@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
224 lines (181 loc) • 8.57 kB
JavaScript
// src/components/tab-group/tab-group.custom.styles.ts
import { css } from "lit";
var tab_group_custom_styles_default = css`
/* stylelint-disable no-descending-specificity */
/* Write custom CSS here */
:host {
--track-width: var(--syn-border-width-small);
--track-color: var(--syn-panel-border-color);
--indicator-width: var(--syn-border-width-x-large);
--indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
}
/* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value */
.tab-group--top .tab-group__body {
position: relative;
top: calc(-1 * var(--syn-panel-border-width));
}
.tab-group--top .tab-group__nav {
padding: 0 0 var(--syn-panel-border-width) 0;
}
/**
* Indicator
*/
.tab-group--top .tab-group__indicator {
border-bottom: solid var(--indicator-width) var(--indicator-color);
}
.tab-group--start .tab-group__indicator {
border-right: solid var(--indicator-width) var(--indicator-color);
}
.tab-group--end .tab-group__indicator {
border-inline-start: solid var(--indicator-width) var(--indicator-color);
}
/**
* Panel
*/
.tab-group--top ::slotted(syn-tab-panel) {
--padding: var(--syn-spacing-large) 0;
}
.tab-group--start ::slotted(syn-tab-panel) {
--padding: 0 var(--syn-spacing-large);
}
.tab-group--end ::slotted(syn-tab-panel) {
--padding: 0 var(--syn-spacing-large);
}
/**
* Contained styling
*/
.tab-group--contained .tab-group__tabs {
border: none;
}
.tab-group--contained ::slotted(syn-tab-panel) {
--padding: var(--syn-spacing-large);
background-color: var(--syn-panel-background-color);
border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);
border-radius: var(--syn-border-radius-medium);
}
/* Stretch the tab panel container for non-top placements, otherwise the borders are not drawn correctly */
.tab-group--contained:not(.tab-group--top) ::slotted(syn-tab-panel) {
height: 100%;
}
/* Draw the correct border radii of the panel depending on the placement and direction */
.tab-group--top.tab-group--contained:not(.tab-group--sharp):not(.tab-group--has-scroll-controls) ::slotted(syn-tab-panel:first-of-type),
.tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {
border-start-start-radius: var(--syn-border-radius-none);
}
.tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {
border-end-start-radius: var(--syn-border-radius-none);
}
.tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {
border-end-end-radius: var(--syn-border-radius-none);
}
.tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {
border-start-end-radius: var(--syn-border-radius-none);
}
.tab-group--contained .tab-group__indicator {
/* Remove the animation of the indicator */
transition: none;
/* Needed, otherwise the indicator is hidden under the background of the tab */
z-index: 2;
}
/* Contained styling for tabs */
.tab-group--contained ::slotted(syn-tab) {
--background-color: var(--syn-panel-background-color);
--border-width: var(--syn-panel-border-width);
position: relative;
z-index: 1;
}
/* Top */
.tab-group--top.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {
--border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none);
}
.tab-group--top.tab-group--contained ::slotted(syn-tab[active]) {
--border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);
/* We need to move the tab down, so the bottom border, hides parts of the border of the tab-group */
top: var(--syn-panel-border-width);
}
.tab-group--top.tab-group--contained ::slotted(syn-tab:not([active])) {
/* We need to move down the non-active tabs also, so we don't get jumping of the tab text content */
top: var(--syn-panel-border-width);
}
/* Start & End with rtl */
.tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),
.tab-group--end.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {
--border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none) var(--syn-border-radius-medium);
}
.tab-group--start.tab-group--contained ::slotted(syn-tab[active]),
.tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {
--border-color: var(--syn-panel-border-color) var(--syn-panel-background-color) var(--syn-panel-border-color) var(--syn-panel-border-color) ;
/* We need to move the tab right, so the right border, hides parts of the border of the tab-group */
left: var(--syn-panel-border-width);
right: unset;
}
.tab-group--start.tab-group--contained ::slotted(syn-tab:not([active])),
.tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {
/* We need to move right the non-active tabs also, so we don't get jumping of the tab text content */
left: var(--syn-panel-border-width);
right: unset;
}
/* End & Start with rtl */
.tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),
.tab-group--start.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {
--border-radius: var(--syn-border-radius-none) var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none);
}
.tab-group--end.tab-group--contained ::slotted(syn-tab[active]),
.tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {
--border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);
/* We need to move the tab left, so the left border, hides parts of the border of the tab-group */
left: unset;
right: var(--syn-panel-border-width);
}
.tab-group--end.tab-group--contained ::slotted(syn-tab:not([active])),
.tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {
/* We need to move left the non-active tabs also, so we don't get jumping of the tab text content */
left: unset;
right: var(--syn-panel-border-width);
}
/**
* Sharp styling
*/
.tab-group--sharp ::slotted(syn-tab-panel) {
border-radius: var(--syn-border-radius-none);
}
/**
* Scroll buttons
*/
.tab-group--has-scroll-controls .tab-group__nav-container {
padding: 0 calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
}
.tab-group__scroll-button {
/* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav */
bottom: var(--syn-panel-border-width);
color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));
font-size: var(--syn-font-size-medium);
width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
}
.tab-group__scroll-button::part(base) {
padding: calc(var(--syn-spacing-small) - var(--syn-spacing-3x-small));
}
.tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button {
border-bottom: solid var(--track-width) var(--track-color);
}
/**
* Shoelace 2.17 introduced a new attribute "fixed-scroll-controls".
* Per default, tab-groups now hide the scroll buttons when they are not needed.
* "fixed-scroll-controls" will keep the scroll buttons visible at all times,
* which is the default behavior of Synergy.
* For this reason, we make the buttons visible by default, but show them in a "disabled" state when they are not needed.
*/
.tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,
.tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {
visibility: visible;
}
.tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden::part(base),
.tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden::part(base) {
opacity: var(--syn-input-disabled-opacity);
pointer-events: none;
}
`;
export {
tab_group_custom_styles_default
};
//# sourceMappingURL=chunk.LBUMVFCE.js.map