@ulu/frontend 0.6.23 → 0.6.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mcp-data.json +112 -112
- package/dist/umd/frontend.css +1 -1
- package/lib/scss/components/_tabs.scss +14 -15
- package/package.json +1 -1
package/dist/mcp-data.json
CHANGED
|
@@ -30614,10 +30614,10 @@
|
|
|
30614
30614
|
"context": {
|
|
30615
30615
|
"type": "mixin",
|
|
30616
30616
|
"name": "styles",
|
|
30617
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30617
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30618
30618
|
"line": {
|
|
30619
30619
|
"start": 130,
|
|
30620
|
-
"end":
|
|
30620
|
+
"end": 307
|
|
30621
30621
|
}
|
|
30622
30622
|
}
|
|
30623
30623
|
},
|
|
@@ -30626,10 +30626,10 @@
|
|
|
30626
30626
|
"context": {
|
|
30627
30627
|
"type": "mixin",
|
|
30628
30628
|
"name": "styles",
|
|
30629
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30629
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30630
30630
|
"line": {
|
|
30631
30631
|
"start": 130,
|
|
30632
|
-
"end":
|
|
30632
|
+
"end": 307
|
|
30633
30633
|
}
|
|
30634
30634
|
}
|
|
30635
30635
|
},
|
|
@@ -30638,10 +30638,10 @@
|
|
|
30638
30638
|
"context": {
|
|
30639
30639
|
"type": "mixin",
|
|
30640
30640
|
"name": "styles",
|
|
30641
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30641
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30642
30642
|
"line": {
|
|
30643
30643
|
"start": 130,
|
|
30644
|
-
"end":
|
|
30644
|
+
"end": 307
|
|
30645
30645
|
}
|
|
30646
30646
|
}
|
|
30647
30647
|
},
|
|
@@ -30650,10 +30650,10 @@
|
|
|
30650
30650
|
"context": {
|
|
30651
30651
|
"type": "mixin",
|
|
30652
30652
|
"name": "styles",
|
|
30653
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30653
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30654
30654
|
"line": {
|
|
30655
30655
|
"start": 130,
|
|
30656
|
-
"end":
|
|
30656
|
+
"end": 307
|
|
30657
30657
|
}
|
|
30658
30658
|
}
|
|
30659
30659
|
},
|
|
@@ -30662,10 +30662,10 @@
|
|
|
30662
30662
|
"context": {
|
|
30663
30663
|
"type": "mixin",
|
|
30664
30664
|
"name": "styles",
|
|
30665
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30665
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30666
30666
|
"line": {
|
|
30667
30667
|
"start": 130,
|
|
30668
|
-
"end":
|
|
30668
|
+
"end": 307
|
|
30669
30669
|
}
|
|
30670
30670
|
}
|
|
30671
30671
|
},
|
|
@@ -30674,10 +30674,10 @@
|
|
|
30674
30674
|
"context": {
|
|
30675
30675
|
"type": "mixin",
|
|
30676
30676
|
"name": "styles",
|
|
30677
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30677
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30678
30678
|
"line": {
|
|
30679
30679
|
"start": 130,
|
|
30680
|
-
"end":
|
|
30680
|
+
"end": 307
|
|
30681
30681
|
}
|
|
30682
30682
|
}
|
|
30683
30683
|
},
|
|
@@ -30686,10 +30686,10 @@
|
|
|
30686
30686
|
"context": {
|
|
30687
30687
|
"type": "mixin",
|
|
30688
30688
|
"name": "styles",
|
|
30689
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30689
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30690
30690
|
"line": {
|
|
30691
30691
|
"start": 130,
|
|
30692
|
-
"end":
|
|
30692
|
+
"end": 307
|
|
30693
30693
|
}
|
|
30694
30694
|
}
|
|
30695
30695
|
},
|
|
@@ -30698,10 +30698,10 @@
|
|
|
30698
30698
|
"context": {
|
|
30699
30699
|
"type": "mixin",
|
|
30700
30700
|
"name": "styles",
|
|
30701
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30701
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30702
30702
|
"line": {
|
|
30703
30703
|
"start": 130,
|
|
30704
|
-
"end":
|
|
30704
|
+
"end": 307
|
|
30705
30705
|
}
|
|
30706
30706
|
}
|
|
30707
30707
|
},
|
|
@@ -30710,10 +30710,10 @@
|
|
|
30710
30710
|
"context": {
|
|
30711
30711
|
"type": "mixin",
|
|
30712
30712
|
"name": "styles",
|
|
30713
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30713
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30714
30714
|
"line": {
|
|
30715
30715
|
"start": 130,
|
|
30716
|
-
"end":
|
|
30716
|
+
"end": 307
|
|
30717
30717
|
}
|
|
30718
30718
|
}
|
|
30719
30719
|
},
|
|
@@ -30722,10 +30722,10 @@
|
|
|
30722
30722
|
"context": {
|
|
30723
30723
|
"type": "mixin",
|
|
30724
30724
|
"name": "styles",
|
|
30725
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30725
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30726
30726
|
"line": {
|
|
30727
30727
|
"start": 130,
|
|
30728
|
-
"end":
|
|
30728
|
+
"end": 307
|
|
30729
30729
|
}
|
|
30730
30730
|
}
|
|
30731
30731
|
},
|
|
@@ -30734,10 +30734,10 @@
|
|
|
30734
30734
|
"context": {
|
|
30735
30735
|
"type": "mixin",
|
|
30736
30736
|
"name": "styles",
|
|
30737
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30737
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30738
30738
|
"line": {
|
|
30739
30739
|
"start": 130,
|
|
30740
|
-
"end":
|
|
30740
|
+
"end": 307
|
|
30741
30741
|
}
|
|
30742
30742
|
}
|
|
30743
30743
|
},
|
|
@@ -30746,10 +30746,10 @@
|
|
|
30746
30746
|
"context": {
|
|
30747
30747
|
"type": "mixin",
|
|
30748
30748
|
"name": "styles",
|
|
30749
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30749
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30750
30750
|
"line": {
|
|
30751
30751
|
"start": 130,
|
|
30752
|
-
"end":
|
|
30752
|
+
"end": 307
|
|
30753
30753
|
}
|
|
30754
30754
|
}
|
|
30755
30755
|
},
|
|
@@ -30758,10 +30758,10 @@
|
|
|
30758
30758
|
"context": {
|
|
30759
30759
|
"type": "mixin",
|
|
30760
30760
|
"name": "styles",
|
|
30761
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30761
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30762
30762
|
"line": {
|
|
30763
30763
|
"start": 130,
|
|
30764
|
-
"end":
|
|
30764
|
+
"end": 307
|
|
30765
30765
|
}
|
|
30766
30766
|
}
|
|
30767
30767
|
},
|
|
@@ -30770,10 +30770,10 @@
|
|
|
30770
30770
|
"context": {
|
|
30771
30771
|
"type": "mixin",
|
|
30772
30772
|
"name": "styles",
|
|
30773
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30773
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30774
30774
|
"line": {
|
|
30775
30775
|
"start": 130,
|
|
30776
|
-
"end":
|
|
30776
|
+
"end": 307
|
|
30777
30777
|
}
|
|
30778
30778
|
}
|
|
30779
30779
|
},
|
|
@@ -30782,10 +30782,10 @@
|
|
|
30782
30782
|
"context": {
|
|
30783
30783
|
"type": "mixin",
|
|
30784
30784
|
"name": "styles",
|
|
30785
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30785
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30786
30786
|
"line": {
|
|
30787
30787
|
"start": 130,
|
|
30788
|
-
"end":
|
|
30788
|
+
"end": 307
|
|
30789
30789
|
}
|
|
30790
30790
|
}
|
|
30791
30791
|
},
|
|
@@ -30794,10 +30794,10 @@
|
|
|
30794
30794
|
"context": {
|
|
30795
30795
|
"type": "mixin",
|
|
30796
30796
|
"name": "styles",
|
|
30797
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30797
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30798
30798
|
"line": {
|
|
30799
30799
|
"start": 130,
|
|
30800
|
-
"end":
|
|
30800
|
+
"end": 307
|
|
30801
30801
|
}
|
|
30802
30802
|
}
|
|
30803
30803
|
},
|
|
@@ -30806,10 +30806,10 @@
|
|
|
30806
30806
|
"context": {
|
|
30807
30807
|
"type": "mixin",
|
|
30808
30808
|
"name": "styles",
|
|
30809
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30809
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30810
30810
|
"line": {
|
|
30811
30811
|
"start": 130,
|
|
30812
|
-
"end":
|
|
30812
|
+
"end": 307
|
|
30813
30813
|
}
|
|
30814
30814
|
}
|
|
30815
30815
|
},
|
|
@@ -30818,10 +30818,10 @@
|
|
|
30818
30818
|
"context": {
|
|
30819
30819
|
"type": "mixin",
|
|
30820
30820
|
"name": "styles",
|
|
30821
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30821
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30822
30822
|
"line": {
|
|
30823
30823
|
"start": 130,
|
|
30824
|
-
"end":
|
|
30824
|
+
"end": 307
|
|
30825
30825
|
}
|
|
30826
30826
|
}
|
|
30827
30827
|
},
|
|
@@ -30830,10 +30830,10 @@
|
|
|
30830
30830
|
"context": {
|
|
30831
30831
|
"type": "mixin",
|
|
30832
30832
|
"name": "styles",
|
|
30833
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30833
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30834
30834
|
"line": {
|
|
30835
30835
|
"start": 130,
|
|
30836
|
-
"end":
|
|
30836
|
+
"end": 307
|
|
30837
30837
|
}
|
|
30838
30838
|
}
|
|
30839
30839
|
},
|
|
@@ -30842,10 +30842,10 @@
|
|
|
30842
30842
|
"context": {
|
|
30843
30843
|
"type": "mixin",
|
|
30844
30844
|
"name": "styles",
|
|
30845
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30845
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30846
30846
|
"line": {
|
|
30847
30847
|
"start": 130,
|
|
30848
|
-
"end":
|
|
30848
|
+
"end": 307
|
|
30849
30849
|
}
|
|
30850
30850
|
}
|
|
30851
30851
|
},
|
|
@@ -30854,10 +30854,10 @@
|
|
|
30854
30854
|
"context": {
|
|
30855
30855
|
"type": "mixin",
|
|
30856
30856
|
"name": "styles",
|
|
30857
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30857
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30858
30858
|
"line": {
|
|
30859
30859
|
"start": 130,
|
|
30860
|
-
"end":
|
|
30860
|
+
"end": 307
|
|
30861
30861
|
}
|
|
30862
30862
|
}
|
|
30863
30863
|
},
|
|
@@ -30866,10 +30866,10 @@
|
|
|
30866
30866
|
"context": {
|
|
30867
30867
|
"type": "mixin",
|
|
30868
30868
|
"name": "styles",
|
|
30869
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30869
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30870
30870
|
"line": {
|
|
30871
30871
|
"start": 130,
|
|
30872
|
-
"end":
|
|
30872
|
+
"end": 307
|
|
30873
30873
|
}
|
|
30874
30874
|
}
|
|
30875
30875
|
},
|
|
@@ -30878,10 +30878,10 @@
|
|
|
30878
30878
|
"context": {
|
|
30879
30879
|
"type": "mixin",
|
|
30880
30880
|
"name": "styles",
|
|
30881
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30881
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30882
30882
|
"line": {
|
|
30883
30883
|
"start": 130,
|
|
30884
|
-
"end":
|
|
30884
|
+
"end": 307
|
|
30885
30885
|
}
|
|
30886
30886
|
}
|
|
30887
30887
|
},
|
|
@@ -30890,10 +30890,10 @@
|
|
|
30890
30890
|
"context": {
|
|
30891
30891
|
"type": "mixin",
|
|
30892
30892
|
"name": "styles",
|
|
30893
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30893
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30894
30894
|
"line": {
|
|
30895
30895
|
"start": 130,
|
|
30896
|
-
"end":
|
|
30896
|
+
"end": 307
|
|
30897
30897
|
}
|
|
30898
30898
|
}
|
|
30899
30899
|
},
|
|
@@ -30902,10 +30902,10 @@
|
|
|
30902
30902
|
"context": {
|
|
30903
30903
|
"type": "mixin",
|
|
30904
30904
|
"name": "styles",
|
|
30905
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30905
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30906
30906
|
"line": {
|
|
30907
30907
|
"start": 130,
|
|
30908
|
-
"end":
|
|
30908
|
+
"end": 307
|
|
30909
30909
|
}
|
|
30910
30910
|
}
|
|
30911
30911
|
},
|
|
@@ -30914,10 +30914,10 @@
|
|
|
30914
30914
|
"context": {
|
|
30915
30915
|
"type": "mixin",
|
|
30916
30916
|
"name": "styles",
|
|
30917
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30917
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30918
30918
|
"line": {
|
|
30919
30919
|
"start": 130,
|
|
30920
|
-
"end":
|
|
30920
|
+
"end": 307
|
|
30921
30921
|
}
|
|
30922
30922
|
}
|
|
30923
30923
|
},
|
|
@@ -30926,10 +30926,10 @@
|
|
|
30926
30926
|
"context": {
|
|
30927
30927
|
"type": "mixin",
|
|
30928
30928
|
"name": "styles",
|
|
30929
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30929
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30930
30930
|
"line": {
|
|
30931
30931
|
"start": 130,
|
|
30932
|
-
"end":
|
|
30932
|
+
"end": 307
|
|
30933
30933
|
}
|
|
30934
30934
|
}
|
|
30935
30935
|
},
|
|
@@ -30938,10 +30938,10 @@
|
|
|
30938
30938
|
"context": {
|
|
30939
30939
|
"type": "mixin",
|
|
30940
30940
|
"name": "styles",
|
|
30941
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30941
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30942
30942
|
"line": {
|
|
30943
30943
|
"start": 130,
|
|
30944
|
-
"end":
|
|
30944
|
+
"end": 307
|
|
30945
30945
|
}
|
|
30946
30946
|
}
|
|
30947
30947
|
},
|
|
@@ -30950,10 +30950,10 @@
|
|
|
30950
30950
|
"context": {
|
|
30951
30951
|
"type": "mixin",
|
|
30952
30952
|
"name": "styles",
|
|
30953
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30953
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30954
30954
|
"line": {
|
|
30955
30955
|
"start": 130,
|
|
30956
|
-
"end":
|
|
30956
|
+
"end": 307
|
|
30957
30957
|
}
|
|
30958
30958
|
}
|
|
30959
30959
|
},
|
|
@@ -30962,10 +30962,10 @@
|
|
|
30962
30962
|
"context": {
|
|
30963
30963
|
"type": "mixin",
|
|
30964
30964
|
"name": "styles",
|
|
30965
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30965
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30966
30966
|
"line": {
|
|
30967
30967
|
"start": 130,
|
|
30968
|
-
"end":
|
|
30968
|
+
"end": 307
|
|
30969
30969
|
}
|
|
30970
30970
|
}
|
|
30971
30971
|
},
|
|
@@ -30974,10 +30974,10 @@
|
|
|
30974
30974
|
"context": {
|
|
30975
30975
|
"type": "mixin",
|
|
30976
30976
|
"name": "styles",
|
|
30977
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30977
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30978
30978
|
"line": {
|
|
30979
30979
|
"start": 130,
|
|
30980
|
-
"end":
|
|
30980
|
+
"end": 307
|
|
30981
30981
|
}
|
|
30982
30982
|
}
|
|
30983
30983
|
},
|
|
@@ -30986,10 +30986,10 @@
|
|
|
30986
30986
|
"context": {
|
|
30987
30987
|
"type": "mixin",
|
|
30988
30988
|
"name": "styles",
|
|
30989
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
30989
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
30990
30990
|
"line": {
|
|
30991
30991
|
"start": 130,
|
|
30992
|
-
"end":
|
|
30992
|
+
"end": 307
|
|
30993
30993
|
}
|
|
30994
30994
|
}
|
|
30995
30995
|
},
|
|
@@ -30998,10 +30998,10 @@
|
|
|
30998
30998
|
"context": {
|
|
30999
30999
|
"type": "mixin",
|
|
31000
31000
|
"name": "styles",
|
|
31001
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31001
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31002
31002
|
"line": {
|
|
31003
31003
|
"start": 130,
|
|
31004
|
-
"end":
|
|
31004
|
+
"end": 307
|
|
31005
31005
|
}
|
|
31006
31006
|
}
|
|
31007
31007
|
},
|
|
@@ -31010,10 +31010,10 @@
|
|
|
31010
31010
|
"context": {
|
|
31011
31011
|
"type": "mixin",
|
|
31012
31012
|
"name": "styles",
|
|
31013
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31013
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31014
31014
|
"line": {
|
|
31015
31015
|
"start": 130,
|
|
31016
|
-
"end":
|
|
31016
|
+
"end": 307
|
|
31017
31017
|
}
|
|
31018
31018
|
}
|
|
31019
31019
|
},
|
|
@@ -31022,10 +31022,10 @@
|
|
|
31022
31022
|
"context": {
|
|
31023
31023
|
"type": "mixin",
|
|
31024
31024
|
"name": "styles",
|
|
31025
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31025
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31026
31026
|
"line": {
|
|
31027
31027
|
"start": 130,
|
|
31028
|
-
"end":
|
|
31028
|
+
"end": 307
|
|
31029
31029
|
}
|
|
31030
31030
|
}
|
|
31031
31031
|
},
|
|
@@ -31034,10 +31034,10 @@
|
|
|
31034
31034
|
"context": {
|
|
31035
31035
|
"type": "mixin",
|
|
31036
31036
|
"name": "styles",
|
|
31037
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31037
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31038
31038
|
"line": {
|
|
31039
31039
|
"start": 130,
|
|
31040
|
-
"end":
|
|
31040
|
+
"end": 307
|
|
31041
31041
|
}
|
|
31042
31042
|
}
|
|
31043
31043
|
},
|
|
@@ -31046,10 +31046,10 @@
|
|
|
31046
31046
|
"context": {
|
|
31047
31047
|
"type": "mixin",
|
|
31048
31048
|
"name": "styles",
|
|
31049
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31049
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31050
31050
|
"line": {
|
|
31051
31051
|
"start": 130,
|
|
31052
|
-
"end":
|
|
31052
|
+
"end": 307
|
|
31053
31053
|
}
|
|
31054
31054
|
}
|
|
31055
31055
|
},
|
|
@@ -31058,10 +31058,10 @@
|
|
|
31058
31058
|
"context": {
|
|
31059
31059
|
"type": "mixin",
|
|
31060
31060
|
"name": "styles",
|
|
31061
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31061
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31062
31062
|
"line": {
|
|
31063
31063
|
"start": 130,
|
|
31064
|
-
"end":
|
|
31064
|
+
"end": 307
|
|
31065
31065
|
}
|
|
31066
31066
|
}
|
|
31067
31067
|
},
|
|
@@ -31070,10 +31070,10 @@
|
|
|
31070
31070
|
"context": {
|
|
31071
31071
|
"type": "mixin",
|
|
31072
31072
|
"name": "styles",
|
|
31073
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31073
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31074
31074
|
"line": {
|
|
31075
31075
|
"start": 130,
|
|
31076
|
-
"end":
|
|
31076
|
+
"end": 307
|
|
31077
31077
|
}
|
|
31078
31078
|
}
|
|
31079
31079
|
},
|
|
@@ -31082,10 +31082,10 @@
|
|
|
31082
31082
|
"context": {
|
|
31083
31083
|
"type": "mixin",
|
|
31084
31084
|
"name": "styles",
|
|
31085
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31085
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31086
31086
|
"line": {
|
|
31087
31087
|
"start": 130,
|
|
31088
|
-
"end":
|
|
31088
|
+
"end": 307
|
|
31089
31089
|
}
|
|
31090
31090
|
}
|
|
31091
31091
|
},
|
|
@@ -31094,10 +31094,10 @@
|
|
|
31094
31094
|
"context": {
|
|
31095
31095
|
"type": "mixin",
|
|
31096
31096
|
"name": "styles",
|
|
31097
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31097
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31098
31098
|
"line": {
|
|
31099
31099
|
"start": 130,
|
|
31100
|
-
"end":
|
|
31100
|
+
"end": 307
|
|
31101
31101
|
}
|
|
31102
31102
|
}
|
|
31103
31103
|
},
|
|
@@ -31106,10 +31106,10 @@
|
|
|
31106
31106
|
"context": {
|
|
31107
31107
|
"type": "mixin",
|
|
31108
31108
|
"name": "styles",
|
|
31109
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31109
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31110
31110
|
"line": {
|
|
31111
31111
|
"start": 130,
|
|
31112
|
-
"end":
|
|
31112
|
+
"end": 307
|
|
31113
31113
|
}
|
|
31114
31114
|
}
|
|
31115
31115
|
},
|
|
@@ -31118,10 +31118,10 @@
|
|
|
31118
31118
|
"context": {
|
|
31119
31119
|
"type": "mixin",
|
|
31120
31120
|
"name": "styles",
|
|
31121
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31121
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31122
31122
|
"line": {
|
|
31123
31123
|
"start": 130,
|
|
31124
|
-
"end":
|
|
31124
|
+
"end": 307
|
|
31125
31125
|
}
|
|
31126
31126
|
}
|
|
31127
31127
|
},
|
|
@@ -31130,10 +31130,10 @@
|
|
|
31130
31130
|
"context": {
|
|
31131
31131
|
"type": "mixin",
|
|
31132
31132
|
"name": "styles",
|
|
31133
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31133
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31134
31134
|
"line": {
|
|
31135
31135
|
"start": 130,
|
|
31136
|
-
"end":
|
|
31136
|
+
"end": 307
|
|
31137
31137
|
}
|
|
31138
31138
|
}
|
|
31139
31139
|
},
|
|
@@ -31142,10 +31142,10 @@
|
|
|
31142
31142
|
"context": {
|
|
31143
31143
|
"type": "mixin",
|
|
31144
31144
|
"name": "styles",
|
|
31145
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31145
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31146
31146
|
"line": {
|
|
31147
31147
|
"start": 130,
|
|
31148
|
-
"end":
|
|
31148
|
+
"end": 307
|
|
31149
31149
|
}
|
|
31150
31150
|
}
|
|
31151
31151
|
},
|
|
@@ -31154,10 +31154,10 @@
|
|
|
31154
31154
|
"context": {
|
|
31155
31155
|
"type": "mixin",
|
|
31156
31156
|
"name": "styles",
|
|
31157
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31157
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31158
31158
|
"line": {
|
|
31159
31159
|
"start": 130,
|
|
31160
|
-
"end":
|
|
31160
|
+
"end": 307
|
|
31161
31161
|
}
|
|
31162
31162
|
}
|
|
31163
31163
|
},
|
|
@@ -31166,10 +31166,10 @@
|
|
|
31166
31166
|
"context": {
|
|
31167
31167
|
"type": "mixin",
|
|
31168
31168
|
"name": "styles",
|
|
31169
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31169
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31170
31170
|
"line": {
|
|
31171
31171
|
"start": 130,
|
|
31172
|
-
"end":
|
|
31172
|
+
"end": 307
|
|
31173
31173
|
}
|
|
31174
31174
|
}
|
|
31175
31175
|
},
|
|
@@ -31178,10 +31178,10 @@
|
|
|
31178
31178
|
"context": {
|
|
31179
31179
|
"type": "mixin",
|
|
31180
31180
|
"name": "styles",
|
|
31181
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31181
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31182
31182
|
"line": {
|
|
31183
31183
|
"start": 130,
|
|
31184
|
-
"end":
|
|
31184
|
+
"end": 307
|
|
31185
31185
|
}
|
|
31186
31186
|
}
|
|
31187
31187
|
},
|
|
@@ -31190,10 +31190,10 @@
|
|
|
31190
31190
|
"context": {
|
|
31191
31191
|
"type": "mixin",
|
|
31192
31192
|
"name": "styles",
|
|
31193
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31193
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31194
31194
|
"line": {
|
|
31195
31195
|
"start": 130,
|
|
31196
|
-
"end":
|
|
31196
|
+
"end": 307
|
|
31197
31197
|
}
|
|
31198
31198
|
}
|
|
31199
31199
|
},
|
|
@@ -31202,10 +31202,10 @@
|
|
|
31202
31202
|
"context": {
|
|
31203
31203
|
"type": "mixin",
|
|
31204
31204
|
"name": "styles",
|
|
31205
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31205
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31206
31206
|
"line": {
|
|
31207
31207
|
"start": 130,
|
|
31208
|
-
"end":
|
|
31208
|
+
"end": 307
|
|
31209
31209
|
}
|
|
31210
31210
|
}
|
|
31211
31211
|
},
|
|
@@ -31214,10 +31214,10 @@
|
|
|
31214
31214
|
"context": {
|
|
31215
31215
|
"type": "mixin",
|
|
31216
31216
|
"name": "styles",
|
|
31217
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31217
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31218
31218
|
"line": {
|
|
31219
31219
|
"start": 130,
|
|
31220
|
-
"end":
|
|
31220
|
+
"end": 307
|
|
31221
31221
|
}
|
|
31222
31222
|
}
|
|
31223
31223
|
},
|
|
@@ -31226,10 +31226,10 @@
|
|
|
31226
31226
|
"context": {
|
|
31227
31227
|
"type": "mixin",
|
|
31228
31228
|
"name": "styles",
|
|
31229
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31229
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31230
31230
|
"line": {
|
|
31231
31231
|
"start": 130,
|
|
31232
|
-
"end":
|
|
31232
|
+
"end": 307
|
|
31233
31233
|
}
|
|
31234
31234
|
}
|
|
31235
31235
|
},
|
|
@@ -31238,10 +31238,10 @@
|
|
|
31238
31238
|
"context": {
|
|
31239
31239
|
"type": "mixin",
|
|
31240
31240
|
"name": "styles",
|
|
31241
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31241
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31242
31242
|
"line": {
|
|
31243
31243
|
"start": 130,
|
|
31244
|
-
"end":
|
|
31244
|
+
"end": 307
|
|
31245
31245
|
}
|
|
31246
31246
|
}
|
|
31247
31247
|
},
|
|
@@ -31250,10 +31250,10 @@
|
|
|
31250
31250
|
"context": {
|
|
31251
31251
|
"type": "mixin",
|
|
31252
31252
|
"name": "styles",
|
|
31253
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31253
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31254
31254
|
"line": {
|
|
31255
31255
|
"start": 130,
|
|
31256
|
-
"end":
|
|
31256
|
+
"end": 307
|
|
31257
31257
|
}
|
|
31258
31258
|
}
|
|
31259
31259
|
},
|
|
@@ -31262,10 +31262,10 @@
|
|
|
31262
31262
|
"context": {
|
|
31263
31263
|
"type": "mixin",
|
|
31264
31264
|
"name": "styles",
|
|
31265
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
31265
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
31266
31266
|
"line": {
|
|
31267
31267
|
"start": 130,
|
|
31268
|
-
"end":
|
|
31268
|
+
"end": 307
|
|
31269
31269
|
}
|
|
31270
31270
|
}
|
|
31271
31271
|
},
|
|
@@ -53721,10 +53721,10 @@
|
|
|
53721
53721
|
"context": {
|
|
53722
53722
|
"type": "mixin",
|
|
53723
53723
|
"name": "styles",
|
|
53724
|
-
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n
|
|
53724
|
+
"code": "\n @include utils.file-header(\"component\", \"tabs\");\n\n $prefix: selector.class(\"tabs\");\n $tabpanel-spacing: utils.get-spacing(get(\"tabpanel-padding\"));\n\n #{ $prefix } {\n margin: get(\"margin\");\n [role=\"tablist\"] {\n position: relative;\n z-index: 2;\n display: flex; \n gap: get(\"tab-gap\");\n overflow-x: auto;\n border-bottom: get(\"tablist-divider\");\n border-bottom-width: get(\"tablist-divider-width\");\n @include layout.remove-scrollbar();\n }\n [role=\"tab\"] {\n display: block;\n position: relative; \n cursor: pointer;\n text-align: center;\n padding: get(\"tab-padding\");\n color: color.get(get(\"tab-color\"));\n font-weight: get(\"tab-font-weight\");\n @if (not get(\"horizontal-tab-wrap\")) {\n white-space: nowrap;\n }\n // Indicator\n &::after {\n content: \"\";\n position: absolute;\n background-color: color.get(get(\"indicator-color\"));\n opacity: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: get(\"indicator-size\");\n transition-property: opacity, background-color, transform;\n transition-duration: get(\"indicator-transition-duration\");\n transition-timing-function: get(\"indicator-transition-timing\");\n transform: scaleX(get(\"indicator-scale-start\"));\n transform-origin: center;\n }\n &:hover {\n color: color.get(get(\"tab-color-hover\"));\n }\n // Add focus so as user clicks item it starts the active state styling\n &:focus,\n &[aria-selected=\"true\"] {\n @if get(\"tab-hide-native-focus\") {\n outline: none;\n }\n &::after {\n opacity: 1;\n transform: scaleX(1);\n }\n }\n // Add new focus-specific colors\n // Using :focus-visible so it only applies to keyboard focus\n &:focus-visible,\n &[aria-selected=\"true\"]:focus-visible {\n color: color.get(get(\"tab-color-focus\"));\n background-color: color.get(get(\"tab-background-color-focus\"));\n }\n &[aria-selected=\"true\"] {\n color: color.get(get(\"tab-color-selected\"));\n background-color: color.get(get(\"tab-background-color-selected\"));\n }\n }\n [role=\"tabpanel\"] {\n position: relative;\n z-index: 1;\n padding: get(\"tabpanel-padding\");\n overflow: hidden;\n background-color: color.get(get(\"tabpanel-background-color\"));\n }\n }\n // For images, etc that should fill tabpanel\n #{ $prefix }__tabpanel-content-fill {\n margin-left: -(map.get($tabpanel-spacing, \"left\"));\n margin-right: -(map.get($tabpanel-spacing, \"right\"));\n width: calc(100% + #{ map.get($tabpanel-spacing, \"left\") + map.get($tabpanel-spacing, \"right\") });\n max-width: none;\n &:first-child {\n margin-top: -(map.get($tabpanel-spacing, \"top\"));\n }\n &:last-child {\n margin-bottom: -(map.get($tabpanel-spacing, \"bottom\"));\n }\n }\n\n #{ $prefix }--sticky {\n [role=\"tablist\"] {\n position: sticky;\n top: get(\"sticky-top\");\n z-index: get(\"sticky-z-index\");\n background-color: color.get(get(\"sticky-background-color\"));\n }\n }\n\n @include breakpoint.min(get(\"vertical-breakpoint\")) {\n #{ $prefix }--vertical {\n display: grid;\n grid-template-columns: get(\"vertical-tablist-width\") auto; \n [role=\"tablist\"] {\n flex-direction: column;\n gap: get(\"vertical-tab-gap\");\n border-right: get(\"tablist-divider\");\n border-right-width: get(\"vertical-divider-width\");\n border-bottom: none;\n grid-column: 1;\n }\n [role=\"tab\"] {\n padding: get(\"vertical-tab-padding\");\n white-space: normal;\n text-align: left;\n &::after {\n left: utils.when(get(\"vertical-indicator-left\"), 0, auto);\n right: utils.when(not get(\"vertical-indicator-left\"), 0, auto);\n bottom: 0;\n top: 0;\n width: get(\"indicator-size\");\n height: auto;\n }\n }\n [role=\"tabpanel\"] {\n grid-column: 2; // needed for equalHeights in vertical\n }\n }\n #{ $prefix }--sticky#{ $prefix }--vertical {\n [role=\"tablist\"] {\n top: get(\"sticky-vertical-top\");\n align-self: start;\n }\n }\n }\n\n #{ $prefix }--transparent {\n [role=\"tablist\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n [role=\"tabpanel\"] {\n background-color: transparent;\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n #{ $prefix }--full-width {\n > [role=\"tablist\"] {\n justify-content: safe center;\n background-color: color.get(get(\"full-width-tablist-background-color\"));\n }\n >[role=\"tabpanel\"] {\n background-color: color.get(get(\"full-width-tabpanel-background-color\"));\n padding: 0;\n }\n }\n\n // Display all tabs during print\n #{ $prefix }--print {\n @media print {\n [role=\"tablist\"] {\n display: none;\n }\n [role=\"tabpanel\"] {\n display: block;\n + [role=\"tabpanel\"] {\n margin-top: get(\"print-margin\");\n }\n }\n }\n }\n",
|
|
53725
53725
|
"line": {
|
|
53726
53726
|
"start": 130,
|
|
53727
|
-
"end":
|
|
53727
|
+
"end": 307
|
|
53728
53728
|
}
|
|
53729
53729
|
},
|
|
53730
53730
|
"example": [
|