sudovanilla-website/public/@shoelace-style/shoelace/cdn/chunks/chunk.EG6EOQHP.js
2024-05-13 23:34:06 -04:00

244 lines
4.6 KiB
JavaScript

import {
component_styles_default
} from "./chunk.K23QWHWK.js";
import {
i
} from "./chunk.CXZZ2LVK.js";
// src/components/tab-group/tab-group.styles.ts
var tab_group_styles_default = i`
${component_styles_default}
:host {
--indicator-color: var(--sl-color-primary-600);
--track-color: var(--sl-color-neutral-200);
--track-width: 2px;
display: block;
}
.tab-group {
display: flex;
border-radius: 0;
}
.tab-group__tabs {
display: flex;
position: relative;
}
.tab-group__indicator {
position: absolute;
transition:
var(--sl-transition-fast) translate ease,
var(--sl-transition-fast) width ease;
}
.tab-group--has-scroll-controls .tab-group__nav-container {
position: relative;
padding: 0 var(--sl-spacing-x-large);
}
.tab-group__body {
display: block;
overflow: auto;
}
.tab-group__scroll-button {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
width: var(--sl-spacing-x-large);
}
.tab-group__scroll-button--start {
left: 0;
}
.tab-group__scroll-button--end {
right: 0;
}
.tab-group--rtl .tab-group__scroll-button--start {
left: auto;
right: 0;
}
.tab-group--rtl .tab-group__scroll-button--end {
left: 0;
right: auto;
}
/*
* Top
*/
.tab-group--top {
flex-direction: column;
}
.tab-group--top .tab-group__nav-container {
order: 1;
}
.tab-group--top .tab-group__nav {
display: flex;
overflow-x: auto;
/* Hide scrollbar in Firefox */
scrollbar-width: none;
}
/* Hide scrollbar in Chrome/Safari */
.tab-group--top .tab-group__nav::-webkit-scrollbar {
width: 0;
height: 0;
}
.tab-group--top .tab-group__tabs {
flex: 1 1 auto;
position: relative;
flex-direction: row;
border-bottom: solid var(--track-width) var(--track-color);
}
.tab-group--top .tab-group__indicator {
bottom: calc(-1 * var(--track-width));
border-bottom: solid var(--track-width) var(--indicator-color);
}
.tab-group--top .tab-group__body {
order: 2;
}
.tab-group--top ::slotted(sl-tab-panel) {
--padding: var(--sl-spacing-medium) 0;
}
/*
* Bottom
*/
.tab-group--bottom {
flex-direction: column;
}
.tab-group--bottom .tab-group__nav-container {
order: 2;
}
.tab-group--bottom .tab-group__nav {
display: flex;
overflow-x: auto;
/* Hide scrollbar in Firefox */
scrollbar-width: none;
}
/* Hide scrollbar in Chrome/Safari */
.tab-group--bottom .tab-group__nav::-webkit-scrollbar {
width: 0;
height: 0;
}
.tab-group--bottom .tab-group__tabs {
flex: 1 1 auto;
position: relative;
flex-direction: row;
border-top: solid var(--track-width) var(--track-color);
}
.tab-group--bottom .tab-group__indicator {
top: calc(-1 * var(--track-width));
border-top: solid var(--track-width) var(--indicator-color);
}
.tab-group--bottom .tab-group__body {
order: 1;
}
.tab-group--bottom ::slotted(sl-tab-panel) {
--padding: var(--sl-spacing-medium) 0;
}
/*
* Start
*/
.tab-group--start {
flex-direction: row;
}
.tab-group--start .tab-group__nav-container {
order: 1;
}
.tab-group--start .tab-group__tabs {
flex: 0 0 auto;
flex-direction: column;
border-inline-end: solid var(--track-width) var(--track-color);
}
.tab-group--start .tab-group__indicator {
right: calc(-1 * var(--track-width));
border-right: solid var(--track-width) var(--indicator-color);
}
.tab-group--start.tab-group--rtl .tab-group__indicator {
right: auto;
left: calc(-1 * var(--track-width));
}
.tab-group--start .tab-group__body {
flex: 1 1 auto;
order: 2;
}
.tab-group--start ::slotted(sl-tab-panel) {
--padding: 0 var(--sl-spacing-medium);
}
/*
* End
*/
.tab-group--end {
flex-direction: row;
}
.tab-group--end .tab-group__nav-container {
order: 2;
}
.tab-group--end .tab-group__tabs {
flex: 0 0 auto;
flex-direction: column;
border-left: solid var(--track-width) var(--track-color);
}
.tab-group--end .tab-group__indicator {
left: calc(-1 * var(--track-width));
border-inline-start: solid var(--track-width) var(--indicator-color);
}
.tab-group--end.tab-group--rtl .tab-group__indicator {
right: calc(-1 * var(--track-width));
left: auto;
}
.tab-group--end .tab-group__body {
flex: 1 1 auto;
order: 1;
}
.tab-group--end ::slotted(sl-tab-panel) {
--padding: 0 var(--sl-spacing-medium);
}
`;
export {
tab_group_styles_default
};