mapcomplete/css/tabbedComponent.css
2022-01-31 14:34:06 +01:00

74 lines
1.5 KiB
CSS

.tabs-header-bar {
padding-left: 1em;
padding-top: 10px; /* For the shadow */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: start;
background-color: var(--background-color);
max-width: 100%;
overflow-x: auto;
}
.tab-single-header img {
height: 3em;
max-width: 3em;
padding: 0.5em;
display: block;
margin: auto;
}
.tab-single-header svg {
height: 3em;
max-width: 3em;
padding: 0.5em;
display: block;
margin: auto;
}
.tab-single-header {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
z-index: 5000;
padding-bottom: 0;
margin-bottom: 0;
}
.tab-active {
background-color: var(--background-color);
color: var(--foreground-color);
z-index: 5001;
box-shadow: 0 0 10px var(--shadow-color);
border: 1px solid var(--background-color);
min-width: 4em;
}
.tab-active svg {
fill: var(--foreground-color);
stroke: var(--foreground-color);
}
.tab-non-active {
background-color: var(--subtle-detail-color);
color: var(--foreground-color);
opacity: 0.5;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid lightgray;
min-width: 4em;
}
.tab-non-active svg {
fill: var(--non-active-tab-svg) !important;
stroke: var(--non-active-tab-svg) !important;
}
.tab-non-active svg path {
fill: var(--non-active-tab-svg) !important;
stroke: var(--non-active-tab-svg) !important;
}