/* #region tab-container */ tab-container { border: 1px solid var(--color-text); display: flex; flex-direction: column; } /* #region nav */ tab-container > nav { overflow-x: auto; background: var(--color-header-border); padding-top: 0.1em; display: flex; flex-shrink: 0; } /* NOTE: nav requires everything nested in a div to allow overflow-x without causing overflow-y issue... further notes can be found in the component class */ tab-container > nav > div { padding: 0 0.2em; display: flex; column-gap: 0.2em; border-bottom: 1px solid var(--color-text); flex-shrink: 0; flex-grow: 100; } tab-container > nav.sticky { position: sticky; top: 0; z-index: 2; } /* #region button */ tab-container > nav button { padding: 0; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; background: var(--color-header); color: var(--color-header-text); border: none; outline: none; display: flex; align-items: center; justify-content: center; /* margin causes button to overlap container's bottom border. this allows .current-tab to hide the bottom border when selected */ margin-top: 1px; margin-bottom: -1px; border-bottom: 1px solid var(--color-text); /* invisible top border to prevent .current-tab from moving 1px down when adding border */ border-top: 1px solid var(--color-header); padding: 0.75em 3em; flex-shrink: 0; } /* buttons get 50% opacity when disabled, but in this case we need the button to maintian full opacity for the white bottom-border to overlap the tab-bars bottom-border. solution is to pass the opacity down to children */ tab-container > nav button[disabled] { opacity: 1; } tab-container > nav button[disabled] > * { opacity: 0.5; } tab-container > nav button.active { cursor: default; background: var(--color-container) !important; border-top: 1px solid var(--color-text) !important; border-left: 1px solid var(--color-text); border-right: 1px solid var(--color-text); border-bottom: 1px solid var(--color-container) !important; z-index: 2; } tab-container > nav button.active:not(.error):not(.warning) { color: var(--color-text) !important; } tab-container > nav button.active.error { border-top-color: var(--color-error) !important; border-left-color: var(--color-error); border-right-color: var(--color-error); } tab-container > nav button.active.warning { border-top-color: var(--color-warning) !important; border-left-color: var(--color-warning); border-right-color: var(--color-warning); } tab-container > nav button i { margin-right: .25em; margin-left: -.25em; } @media (hover: hover) { tab-container > nav button:not(.active):enabled:hover { background: var(--color-text) !important; color: var(--color-text-text) !important; border-bottom: 1px solid var(--color-text); /* this fills up the bottom 1px to line up with tab-container > nav border */ } tab-container > nav button.error:not(.active):enabled:hover { background: var(--color-error) !important; color: var(--color-error-text) !important; } tab-container > nav button.warning:not(.active):enabled:hover { background: var(--color-warning) !important; color: var(--color-warning-text) !important; } } @media screen and (max-width: 767px) { tab-container > nav.vertical-mobile button { height: auto; flex-direction: column; padding-top: .25em; } tab-container > nav.vertical-mobile button i { margin: 0; } } @media only screen and (max-width: 800px) { tab-container > nav.icon-mobile button { flex-direction: column; } tab-container > nav.icon-mobile button i { margin: 0; } } @media only screen and (max-width: 500px) { tab-container > nav.icon-mobile button span { display: none; } tab-container > nav.icon-mobile button i { margin: 0; } } /* #endregion button */ /* #endregion nav */ /* #region content */ tab-container > div { padding: 0.5em 0.75em; display: flex; flex-direction: column; flex-grow: 1; } tab-container > div >section { flex-grow: 1; } tab-container > div > section:not(.active) { display: none; } /* #endregion */ /* #endregion */ /* #region tab-scroller */ tab-scroller { position: relative; } tab-scroller:not(:empty) { border-bottom: 2px solid var(--color-text); padding: 0 0 0.5em 0 !important; } tab-scroller > div { display: flex; overflow-y: hidden; overflow-x: auto; } tab-scroller > div > * { outline: none; border-width: 0; padding: 0.25em; display: flex; flex: 1; flex-direction: column; align-items: center; min-width: 6em; text-decoration: none !important; color: var(--color-text) !important; font-weight: normal !important; line-height: 1.25em; } /* minor fix/overrides */ tab-scroller > div .material-icons { cursor: pointer; } tab-scroller > div > a:not(.jstree-anchor):focus { font-weight: normal !important; } tab-scroller > div > .active { background: var(--color-accent) !important; color: var(--color-accent-text) !important; opacity: 1 !important; } tab-scroller:not(:empty)::after { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 1.5em; line-height: 1; letter-spacing: normal; text-transform: none !important; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; content: "arrow_drop_down"; background: var(--color-text); color: var(--color-text-text); position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 1em; line-height: 0.25em; padding: 0.25em 0 0.125em 0; } tab-scroller.open::after { content: "arrow_drop_up"; } tab-scroller.open > div { flex-wrap: wrap; } @media (hover:hover) { tab-scroller > div > *:not(.active):not([disabled]):hover { background: var(--color-text) !important; color: var(--color-text-text) !important; } } @media only screen and (max-device-width: 767px) { tab-scroller { font-size: 1.5rem; } } @media only screen and (min-device-width: 768px) { tab-scroller:not(:empty) { padding-bottom: 0 !important; } tab-scroller:not(:empty)::after { display: none; } tab-scroller .btn-icon { display: none; } } @media only screen and (max-width: 500px) { tab-scroller > div > * { min-width: 25vw !important; max-width: 25vw !important; font-size: 0.9em; } } @media screen and (max-device-width: 500px) { tab-scroller { font-size: 2rem } } /* #endregion */