Add border to rest of the tab space (#215)

* add border to rest of the tab space

* All tabs should be False

* slugify div ids

* bottom padding for horizontal

* do not show solo tabs

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* use properties over attribute

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* rename id to class

* scrollbar shenanigans

* rename tag

* wip : button weirdness in safari

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

Co-authored-by: vaz <vmohan@lenbox.io>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Vasanth
2022-11-30 15:33:59 +01:00
committed by GitHub
parent a76de04a8b
commit 07dcb77b88
5 changed files with 41 additions and 9 deletions
@@ -3,22 +3,37 @@
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: 4px;
}
.admin-interface .tabbed-changeform-tab::-webkit-scrollbar {
height: 4px;
background-color: var(--border-color);
}
.admin-interface .tabbed-changeform-tab::-webkit-scrollbar-thumb {
background: #aaa;
}
.admin-interface .tabbed-changeform-tab button {
-webkit-appearance: none;
border: none;
border-bottom: 1px solid var(--border-color) ;
border-radius: 0;
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
flex-grow: 0;
cursor: pointer;
padding: 8px 12px;
margin: 0;
background-color: var(--admin-interface-module-header-text-color);
color: var(--admin-interface-module-background-color);
}
.admin-interface .tabbed-changeform-tab button.active {
outline: none;
font-weight: bold;
border: 1px solid var(--border-color) ;
border: 1px solid var(--border-color);
border-bottom: none;
border-radius: var(--admin-interface-module-border-radius);
border-bottom-left-radius: 0px;
@@ -33,3 +48,8 @@
.admin-interface .tabbed-changeform-tabcontent.active {
display: block;
}
.admin-interface .tabbed-changeform-tabs-remaining-space {
flex: 1;
border-bottom: 1px solid var(--border-color);
}