@ulu/frontend 0.6.17 → 0.6.18
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
CHANGED
|
@@ -3749,6 +3749,12 @@
|
|
|
3749
3749
|
"description": "The gap between graphic and text.",
|
|
3750
3750
|
"default": "1rem"
|
|
3751
3751
|
},
|
|
3752
|
+
{
|
|
3753
|
+
"name": "gap-compact",
|
|
3754
|
+
"type": "CssUnit",
|
|
3755
|
+
"description": "The smaller gap applied when the compact modifier is used.",
|
|
3756
|
+
"default": "0.5rem"
|
|
3757
|
+
},
|
|
3752
3758
|
{
|
|
3753
3759
|
"name": "margin",
|
|
3754
3760
|
"type": "List",
|
|
@@ -14583,8 +14589,8 @@
|
|
|
14583
14589
|
"name": "set",
|
|
14584
14590
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14585
14591
|
"line": {
|
|
14586
|
-
"start":
|
|
14587
|
-
"end":
|
|
14592
|
+
"start": 56,
|
|
14593
|
+
"end": 58
|
|
14588
14594
|
}
|
|
14589
14595
|
}
|
|
14590
14596
|
},
|
|
@@ -14595,8 +14601,8 @@
|
|
|
14595
14601
|
"name": "set",
|
|
14596
14602
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14597
14603
|
"line": {
|
|
14598
|
-
"start":
|
|
14599
|
-
"end":
|
|
14604
|
+
"start": 56,
|
|
14605
|
+
"end": 58
|
|
14600
14606
|
}
|
|
14601
14607
|
}
|
|
14602
14608
|
},
|
|
@@ -14607,8 +14613,8 @@
|
|
|
14607
14613
|
"name": "get",
|
|
14608
14614
|
"code": "\n $value: utils.require-map-get($config, $name, \"graphic-text-group [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
14609
14615
|
"line": {
|
|
14610
|
-
"start":
|
|
14611
|
-
"end":
|
|
14616
|
+
"start": 65,
|
|
14617
|
+
"end": 68
|
|
14612
14618
|
}
|
|
14613
14619
|
}
|
|
14614
14620
|
},
|
|
@@ -14835,8 +14841,8 @@
|
|
|
14835
14841
|
"name": "set",
|
|
14836
14842
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14837
14843
|
"line": {
|
|
14838
|
-
"start":
|
|
14839
|
-
"end":
|
|
14844
|
+
"start": 156,
|
|
14845
|
+
"end": 158
|
|
14840
14846
|
}
|
|
14841
14847
|
}
|
|
14842
14848
|
},
|
|
@@ -14847,8 +14853,8 @@
|
|
|
14847
14853
|
"name": "set",
|
|
14848
14854
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14849
14855
|
"line": {
|
|
14850
|
-
"start":
|
|
14851
|
-
"end":
|
|
14856
|
+
"start": 156,
|
|
14857
|
+
"end": 158
|
|
14852
14858
|
}
|
|
14853
14859
|
}
|
|
14854
14860
|
},
|
|
@@ -14859,8 +14865,8 @@
|
|
|
14859
14865
|
"name": "get",
|
|
14860
14866
|
"code": "\n $value: utils.require-map-get($config, $name, \"menu-stack [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
14861
14867
|
"line": {
|
|
14862
|
-
"start":
|
|
14863
|
-
"end":
|
|
14868
|
+
"start": 165,
|
|
14869
|
+
"end": 168
|
|
14864
14870
|
}
|
|
14865
14871
|
}
|
|
14866
14872
|
},
|
|
@@ -23189,10 +23195,10 @@
|
|
|
23189
23195
|
"context": {
|
|
23190
23196
|
"type": "mixin",
|
|
23191
23197
|
"name": "styles",
|
|
23192
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23198
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23193
23199
|
"line": {
|
|
23194
|
-
"start":
|
|
23195
|
-
"end":
|
|
23200
|
+
"start": 75,
|
|
23201
|
+
"end": 200
|
|
23196
23202
|
}
|
|
23197
23203
|
}
|
|
23198
23204
|
},
|
|
@@ -23201,10 +23207,10 @@
|
|
|
23201
23207
|
"context": {
|
|
23202
23208
|
"type": "mixin",
|
|
23203
23209
|
"name": "styles",
|
|
23204
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23210
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23205
23211
|
"line": {
|
|
23206
|
-
"start":
|
|
23207
|
-
"end":
|
|
23212
|
+
"start": 75,
|
|
23213
|
+
"end": 200
|
|
23208
23214
|
}
|
|
23209
23215
|
}
|
|
23210
23216
|
},
|
|
@@ -23213,10 +23219,10 @@
|
|
|
23213
23219
|
"context": {
|
|
23214
23220
|
"type": "mixin",
|
|
23215
23221
|
"name": "styles",
|
|
23216
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23222
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23217
23223
|
"line": {
|
|
23218
|
-
"start":
|
|
23219
|
-
"end":
|
|
23224
|
+
"start": 75,
|
|
23225
|
+
"end": 200
|
|
23220
23226
|
}
|
|
23221
23227
|
}
|
|
23222
23228
|
},
|
|
@@ -23225,10 +23231,10 @@
|
|
|
23225
23231
|
"context": {
|
|
23226
23232
|
"type": "mixin",
|
|
23227
23233
|
"name": "styles",
|
|
23228
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23234
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23229
23235
|
"line": {
|
|
23230
|
-
"start":
|
|
23231
|
-
"end":
|
|
23236
|
+
"start": 75,
|
|
23237
|
+
"end": 200
|
|
23232
23238
|
}
|
|
23233
23239
|
}
|
|
23234
23240
|
},
|
|
@@ -23237,10 +23243,10 @@
|
|
|
23237
23243
|
"context": {
|
|
23238
23244
|
"type": "mixin",
|
|
23239
23245
|
"name": "styles",
|
|
23240
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23246
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23241
23247
|
"line": {
|
|
23242
|
-
"start":
|
|
23243
|
-
"end":
|
|
23248
|
+
"start": 75,
|
|
23249
|
+
"end": 200
|
|
23244
23250
|
}
|
|
23245
23251
|
}
|
|
23246
23252
|
},
|
|
@@ -23249,10 +23255,10 @@
|
|
|
23249
23255
|
"context": {
|
|
23250
23256
|
"type": "mixin",
|
|
23251
23257
|
"name": "styles",
|
|
23252
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23258
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23253
23259
|
"line": {
|
|
23254
|
-
"start":
|
|
23255
|
-
"end":
|
|
23260
|
+
"start": 75,
|
|
23261
|
+
"end": 200
|
|
23256
23262
|
}
|
|
23257
23263
|
}
|
|
23258
23264
|
},
|
|
@@ -23261,10 +23267,10 @@
|
|
|
23261
23267
|
"context": {
|
|
23262
23268
|
"type": "mixin",
|
|
23263
23269
|
"name": "styles",
|
|
23264
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23270
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23265
23271
|
"line": {
|
|
23266
|
-
"start":
|
|
23267
|
-
"end":
|
|
23272
|
+
"start": 75,
|
|
23273
|
+
"end": 200
|
|
23268
23274
|
}
|
|
23269
23275
|
}
|
|
23270
23276
|
},
|
|
@@ -23273,10 +23279,10 @@
|
|
|
23273
23279
|
"context": {
|
|
23274
23280
|
"type": "mixin",
|
|
23275
23281
|
"name": "styles",
|
|
23276
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23282
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23277
23283
|
"line": {
|
|
23278
|
-
"start":
|
|
23279
|
-
"end":
|
|
23284
|
+
"start": 75,
|
|
23285
|
+
"end": 200
|
|
23280
23286
|
}
|
|
23281
23287
|
}
|
|
23282
23288
|
},
|
|
@@ -23285,10 +23291,10 @@
|
|
|
23285
23291
|
"context": {
|
|
23286
23292
|
"type": "mixin",
|
|
23287
23293
|
"name": "styles",
|
|
23288
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23294
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23289
23295
|
"line": {
|
|
23290
|
-
"start":
|
|
23291
|
-
"end":
|
|
23296
|
+
"start": 75,
|
|
23297
|
+
"end": 200
|
|
23292
23298
|
}
|
|
23293
23299
|
}
|
|
23294
23300
|
},
|
|
@@ -23297,10 +23303,10 @@
|
|
|
23297
23303
|
"context": {
|
|
23298
23304
|
"type": "mixin",
|
|
23299
23305
|
"name": "styles",
|
|
23300
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23306
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23301
23307
|
"line": {
|
|
23302
|
-
"start":
|
|
23303
|
-
"end":
|
|
23308
|
+
"start": 75,
|
|
23309
|
+
"end": 200
|
|
23304
23310
|
}
|
|
23305
23311
|
}
|
|
23306
23312
|
},
|
|
@@ -23309,10 +23315,10 @@
|
|
|
23309
23315
|
"context": {
|
|
23310
23316
|
"type": "mixin",
|
|
23311
23317
|
"name": "styles",
|
|
23312
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23318
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23313
23319
|
"line": {
|
|
23314
|
-
"start":
|
|
23315
|
-
"end":
|
|
23320
|
+
"start": 75,
|
|
23321
|
+
"end": 200
|
|
23316
23322
|
}
|
|
23317
23323
|
}
|
|
23318
23324
|
},
|
|
@@ -23321,10 +23327,22 @@
|
|
|
23321
23327
|
"context": {
|
|
23322
23328
|
"type": "mixin",
|
|
23323
23329
|
"name": "styles",
|
|
23324
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23330
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23325
23331
|
"line": {
|
|
23326
|
-
"start":
|
|
23327
|
-
"end":
|
|
23332
|
+
"start": 75,
|
|
23333
|
+
"end": 200
|
|
23334
|
+
}
|
|
23335
|
+
}
|
|
23336
|
+
},
|
|
23337
|
+
{
|
|
23338
|
+
"description": "Prints component styles\n",
|
|
23339
|
+
"context": {
|
|
23340
|
+
"type": "mixin",
|
|
23341
|
+
"name": "styles",
|
|
23342
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23343
|
+
"line": {
|
|
23344
|
+
"start": 75,
|
|
23345
|
+
"end": 200
|
|
23328
23346
|
}
|
|
23329
23347
|
}
|
|
23330
23348
|
},
|
|
@@ -23983,8 +24001,8 @@
|
|
|
23983
24001
|
"name": "styles",
|
|
23984
24002
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
23985
24003
|
"line": {
|
|
23986
|
-
"start":
|
|
23987
|
-
"end":
|
|
24004
|
+
"start": 181,
|
|
24005
|
+
"end": 438
|
|
23988
24006
|
}
|
|
23989
24007
|
}
|
|
23990
24008
|
},
|
|
@@ -23995,8 +24013,8 @@
|
|
|
23995
24013
|
"name": "styles",
|
|
23996
24014
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
23997
24015
|
"line": {
|
|
23998
|
-
"start":
|
|
23999
|
-
"end":
|
|
24016
|
+
"start": 181,
|
|
24017
|
+
"end": 438
|
|
24000
24018
|
}
|
|
24001
24019
|
}
|
|
24002
24020
|
},
|
|
@@ -24007,8 +24025,8 @@
|
|
|
24007
24025
|
"name": "styles",
|
|
24008
24026
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24009
24027
|
"line": {
|
|
24010
|
-
"start":
|
|
24011
|
-
"end":
|
|
24028
|
+
"start": 181,
|
|
24029
|
+
"end": 438
|
|
24012
24030
|
}
|
|
24013
24031
|
}
|
|
24014
24032
|
},
|
|
@@ -24019,8 +24037,8 @@
|
|
|
24019
24037
|
"name": "styles",
|
|
24020
24038
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24021
24039
|
"line": {
|
|
24022
|
-
"start":
|
|
24023
|
-
"end":
|
|
24040
|
+
"start": 181,
|
|
24041
|
+
"end": 438
|
|
24024
24042
|
}
|
|
24025
24043
|
}
|
|
24026
24044
|
},
|
|
@@ -24031,8 +24049,8 @@
|
|
|
24031
24049
|
"name": "styles",
|
|
24032
24050
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24033
24051
|
"line": {
|
|
24034
|
-
"start":
|
|
24035
|
-
"end":
|
|
24052
|
+
"start": 181,
|
|
24053
|
+
"end": 438
|
|
24036
24054
|
}
|
|
24037
24055
|
}
|
|
24038
24056
|
},
|
|
@@ -24043,8 +24061,8 @@
|
|
|
24043
24061
|
"name": "styles",
|
|
24044
24062
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24045
24063
|
"line": {
|
|
24046
|
-
"start":
|
|
24047
|
-
"end":
|
|
24064
|
+
"start": 181,
|
|
24065
|
+
"end": 438
|
|
24048
24066
|
}
|
|
24049
24067
|
}
|
|
24050
24068
|
},
|
|
@@ -24055,8 +24073,8 @@
|
|
|
24055
24073
|
"name": "styles",
|
|
24056
24074
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24057
24075
|
"line": {
|
|
24058
|
-
"start":
|
|
24059
|
-
"end":
|
|
24076
|
+
"start": 181,
|
|
24077
|
+
"end": 438
|
|
24060
24078
|
}
|
|
24061
24079
|
}
|
|
24062
24080
|
},
|
|
@@ -24067,8 +24085,8 @@
|
|
|
24067
24085
|
"name": "styles",
|
|
24068
24086
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24069
24087
|
"line": {
|
|
24070
|
-
"start":
|
|
24071
|
-
"end":
|
|
24088
|
+
"start": 181,
|
|
24089
|
+
"end": 438
|
|
24072
24090
|
}
|
|
24073
24091
|
}
|
|
24074
24092
|
},
|
|
@@ -24079,8 +24097,8 @@
|
|
|
24079
24097
|
"name": "styles",
|
|
24080
24098
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24081
24099
|
"line": {
|
|
24082
|
-
"start":
|
|
24083
|
-
"end":
|
|
24100
|
+
"start": 181,
|
|
24101
|
+
"end": 438
|
|
24084
24102
|
}
|
|
24085
24103
|
}
|
|
24086
24104
|
},
|
|
@@ -24091,8 +24109,8 @@
|
|
|
24091
24109
|
"name": "styles",
|
|
24092
24110
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24093
24111
|
"line": {
|
|
24094
|
-
"start":
|
|
24095
|
-
"end":
|
|
24112
|
+
"start": 181,
|
|
24113
|
+
"end": 438
|
|
24096
24114
|
}
|
|
24097
24115
|
}
|
|
24098
24116
|
},
|
|
@@ -24103,8 +24121,8 @@
|
|
|
24103
24121
|
"name": "styles",
|
|
24104
24122
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24105
24123
|
"line": {
|
|
24106
|
-
"start":
|
|
24107
|
-
"end":
|
|
24124
|
+
"start": 181,
|
|
24125
|
+
"end": 438
|
|
24108
24126
|
}
|
|
24109
24127
|
}
|
|
24110
24128
|
},
|
|
@@ -24115,8 +24133,8 @@
|
|
|
24115
24133
|
"name": "styles",
|
|
24116
24134
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24117
24135
|
"line": {
|
|
24118
|
-
"start":
|
|
24119
|
-
"end":
|
|
24136
|
+
"start": 181,
|
|
24137
|
+
"end": 438
|
|
24120
24138
|
}
|
|
24121
24139
|
}
|
|
24122
24140
|
},
|
|
@@ -24127,8 +24145,8 @@
|
|
|
24127
24145
|
"name": "styles",
|
|
24128
24146
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24129
24147
|
"line": {
|
|
24130
|
-
"start":
|
|
24131
|
-
"end":
|
|
24148
|
+
"start": 181,
|
|
24149
|
+
"end": 438
|
|
24132
24150
|
}
|
|
24133
24151
|
}
|
|
24134
24152
|
},
|
|
@@ -24139,8 +24157,8 @@
|
|
|
24139
24157
|
"name": "styles",
|
|
24140
24158
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24141
24159
|
"line": {
|
|
24142
|
-
"start":
|
|
24143
|
-
"end":
|
|
24160
|
+
"start": 181,
|
|
24161
|
+
"end": 438
|
|
24144
24162
|
}
|
|
24145
24163
|
}
|
|
24146
24164
|
},
|
|
@@ -24151,8 +24169,8 @@
|
|
|
24151
24169
|
"name": "styles",
|
|
24152
24170
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24153
24171
|
"line": {
|
|
24154
|
-
"start":
|
|
24155
|
-
"end":
|
|
24172
|
+
"start": 181,
|
|
24173
|
+
"end": 438
|
|
24156
24174
|
}
|
|
24157
24175
|
}
|
|
24158
24176
|
},
|
|
@@ -24163,8 +24181,8 @@
|
|
|
24163
24181
|
"name": "styles",
|
|
24164
24182
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24165
24183
|
"line": {
|
|
24166
|
-
"start":
|
|
24167
|
-
"end":
|
|
24184
|
+
"start": 181,
|
|
24185
|
+
"end": 438
|
|
24168
24186
|
}
|
|
24169
24187
|
}
|
|
24170
24188
|
},
|
|
@@ -24175,8 +24193,8 @@
|
|
|
24175
24193
|
"name": "styles",
|
|
24176
24194
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24177
24195
|
"line": {
|
|
24178
|
-
"start":
|
|
24179
|
-
"end":
|
|
24196
|
+
"start": 181,
|
|
24197
|
+
"end": 438
|
|
24180
24198
|
}
|
|
24181
24199
|
}
|
|
24182
24200
|
},
|
|
@@ -24187,8 +24205,8 @@
|
|
|
24187
24205
|
"name": "styles",
|
|
24188
24206
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24189
24207
|
"line": {
|
|
24190
|
-
"start":
|
|
24191
|
-
"end":
|
|
24208
|
+
"start": 181,
|
|
24209
|
+
"end": 438
|
|
24192
24210
|
}
|
|
24193
24211
|
}
|
|
24194
24212
|
},
|
|
@@ -24199,8 +24217,8 @@
|
|
|
24199
24217
|
"name": "styles",
|
|
24200
24218
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24201
24219
|
"line": {
|
|
24202
|
-
"start":
|
|
24203
|
-
"end":
|
|
24220
|
+
"start": 181,
|
|
24221
|
+
"end": 438
|
|
24204
24222
|
}
|
|
24205
24223
|
}
|
|
24206
24224
|
},
|
|
@@ -24211,8 +24229,8 @@
|
|
|
24211
24229
|
"name": "styles",
|
|
24212
24230
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24213
24231
|
"line": {
|
|
24214
|
-
"start":
|
|
24215
|
-
"end":
|
|
24232
|
+
"start": 181,
|
|
24233
|
+
"end": 438
|
|
24216
24234
|
}
|
|
24217
24235
|
}
|
|
24218
24236
|
},
|
|
@@ -24223,8 +24241,8 @@
|
|
|
24223
24241
|
"name": "styles",
|
|
24224
24242
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24225
24243
|
"line": {
|
|
24226
|
-
"start":
|
|
24227
|
-
"end":
|
|
24244
|
+
"start": 181,
|
|
24245
|
+
"end": 438
|
|
24228
24246
|
}
|
|
24229
24247
|
}
|
|
24230
24248
|
},
|
|
@@ -24235,8 +24253,8 @@
|
|
|
24235
24253
|
"name": "styles",
|
|
24236
24254
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24237
24255
|
"line": {
|
|
24238
|
-
"start":
|
|
24239
|
-
"end":
|
|
24256
|
+
"start": 181,
|
|
24257
|
+
"end": 438
|
|
24240
24258
|
}
|
|
24241
24259
|
}
|
|
24242
24260
|
},
|
|
@@ -24247,8 +24265,8 @@
|
|
|
24247
24265
|
"name": "styles",
|
|
24248
24266
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24249
24267
|
"line": {
|
|
24250
|
-
"start":
|
|
24251
|
-
"end":
|
|
24268
|
+
"start": 181,
|
|
24269
|
+
"end": 438
|
|
24252
24270
|
}
|
|
24253
24271
|
}
|
|
24254
24272
|
},
|
|
@@ -24259,8 +24277,8 @@
|
|
|
24259
24277
|
"name": "styles",
|
|
24260
24278
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24261
24279
|
"line": {
|
|
24262
|
-
"start":
|
|
24263
|
-
"end":
|
|
24280
|
+
"start": 181,
|
|
24281
|
+
"end": 438
|
|
24264
24282
|
}
|
|
24265
24283
|
}
|
|
24266
24284
|
},
|
|
@@ -24271,8 +24289,8 @@
|
|
|
24271
24289
|
"name": "styles",
|
|
24272
24290
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24273
24291
|
"line": {
|
|
24274
|
-
"start":
|
|
24275
|
-
"end":
|
|
24292
|
+
"start": 181,
|
|
24293
|
+
"end": 438
|
|
24276
24294
|
}
|
|
24277
24295
|
}
|
|
24278
24296
|
},
|
|
@@ -24283,8 +24301,8 @@
|
|
|
24283
24301
|
"name": "styles",
|
|
24284
24302
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24285
24303
|
"line": {
|
|
24286
|
-
"start":
|
|
24287
|
-
"end":
|
|
24304
|
+
"start": 181,
|
|
24305
|
+
"end": 438
|
|
24288
24306
|
}
|
|
24289
24307
|
}
|
|
24290
24308
|
},
|
|
@@ -24295,8 +24313,8 @@
|
|
|
24295
24313
|
"name": "styles",
|
|
24296
24314
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24297
24315
|
"line": {
|
|
24298
|
-
"start":
|
|
24299
|
-
"end":
|
|
24316
|
+
"start": 181,
|
|
24317
|
+
"end": 438
|
|
24300
24318
|
}
|
|
24301
24319
|
}
|
|
24302
24320
|
},
|
|
@@ -24307,8 +24325,8 @@
|
|
|
24307
24325
|
"name": "styles",
|
|
24308
24326
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24309
24327
|
"line": {
|
|
24310
|
-
"start":
|
|
24311
|
-
"end":
|
|
24328
|
+
"start": 181,
|
|
24329
|
+
"end": 438
|
|
24312
24330
|
}
|
|
24313
24331
|
}
|
|
24314
24332
|
},
|
|
@@ -24319,8 +24337,8 @@
|
|
|
24319
24337
|
"name": "styles",
|
|
24320
24338
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24321
24339
|
"line": {
|
|
24322
|
-
"start":
|
|
24323
|
-
"end":
|
|
24340
|
+
"start": 181,
|
|
24341
|
+
"end": 438
|
|
24324
24342
|
}
|
|
24325
24343
|
}
|
|
24326
24344
|
},
|
|
@@ -24331,8 +24349,8 @@
|
|
|
24331
24349
|
"name": "styles",
|
|
24332
24350
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24333
24351
|
"line": {
|
|
24334
|
-
"start":
|
|
24335
|
-
"end":
|
|
24352
|
+
"start": 181,
|
|
24353
|
+
"end": 438
|
|
24336
24354
|
}
|
|
24337
24355
|
}
|
|
24338
24356
|
},
|
|
@@ -24343,8 +24361,8 @@
|
|
|
24343
24361
|
"name": "styles",
|
|
24344
24362
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24345
24363
|
"line": {
|
|
24346
|
-
"start":
|
|
24347
|
-
"end":
|
|
24364
|
+
"start": 181,
|
|
24365
|
+
"end": 438
|
|
24348
24366
|
}
|
|
24349
24367
|
}
|
|
24350
24368
|
},
|
|
@@ -24355,8 +24373,8 @@
|
|
|
24355
24373
|
"name": "styles",
|
|
24356
24374
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24357
24375
|
"line": {
|
|
24358
|
-
"start":
|
|
24359
|
-
"end":
|
|
24376
|
+
"start": 181,
|
|
24377
|
+
"end": 438
|
|
24360
24378
|
}
|
|
24361
24379
|
}
|
|
24362
24380
|
},
|
|
@@ -24367,8 +24385,8 @@
|
|
|
24367
24385
|
"name": "styles",
|
|
24368
24386
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24369
24387
|
"line": {
|
|
24370
|
-
"start":
|
|
24371
|
-
"end":
|
|
24388
|
+
"start": 181,
|
|
24389
|
+
"end": 438
|
|
24372
24390
|
}
|
|
24373
24391
|
}
|
|
24374
24392
|
},
|
|
@@ -24379,8 +24397,8 @@
|
|
|
24379
24397
|
"name": "styles",
|
|
24380
24398
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24381
24399
|
"line": {
|
|
24382
|
-
"start":
|
|
24383
|
-
"end":
|
|
24400
|
+
"start": 181,
|
|
24401
|
+
"end": 438
|
|
24384
24402
|
}
|
|
24385
24403
|
}
|
|
24386
24404
|
},
|
|
@@ -24391,8 +24409,8 @@
|
|
|
24391
24409
|
"name": "styles",
|
|
24392
24410
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24393
24411
|
"line": {
|
|
24394
|
-
"start":
|
|
24395
|
-
"end":
|
|
24412
|
+
"start": 181,
|
|
24413
|
+
"end": 438
|
|
24396
24414
|
}
|
|
24397
24415
|
}
|
|
24398
24416
|
},
|
|
@@ -24403,8 +24421,8 @@
|
|
|
24403
24421
|
"name": "styles",
|
|
24404
24422
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24405
24423
|
"line": {
|
|
24406
|
-
"start":
|
|
24407
|
-
"end":
|
|
24424
|
+
"start": 181,
|
|
24425
|
+
"end": 438
|
|
24408
24426
|
}
|
|
24409
24427
|
}
|
|
24410
24428
|
},
|
|
@@ -24415,8 +24433,8 @@
|
|
|
24415
24433
|
"name": "styles",
|
|
24416
24434
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24417
24435
|
"line": {
|
|
24418
|
-
"start":
|
|
24419
|
-
"end":
|
|
24436
|
+
"start": 181,
|
|
24437
|
+
"end": 438
|
|
24420
24438
|
}
|
|
24421
24439
|
}
|
|
24422
24440
|
},
|
|
@@ -24427,8 +24445,8 @@
|
|
|
24427
24445
|
"name": "styles",
|
|
24428
24446
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24429
24447
|
"line": {
|
|
24430
|
-
"start":
|
|
24431
|
-
"end":
|
|
24448
|
+
"start": 181,
|
|
24449
|
+
"end": 438
|
|
24432
24450
|
}
|
|
24433
24451
|
}
|
|
24434
24452
|
},
|
|
@@ -24439,8 +24457,8 @@
|
|
|
24439
24457
|
"name": "styles",
|
|
24440
24458
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24441
24459
|
"line": {
|
|
24442
|
-
"start":
|
|
24443
|
-
"end":
|
|
24460
|
+
"start": 181,
|
|
24461
|
+
"end": 438
|
|
24444
24462
|
}
|
|
24445
24463
|
}
|
|
24446
24464
|
},
|
|
@@ -24451,8 +24469,8 @@
|
|
|
24451
24469
|
"name": "styles",
|
|
24452
24470
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24453
24471
|
"line": {
|
|
24454
|
-
"start":
|
|
24455
|
-
"end":
|
|
24472
|
+
"start": 181,
|
|
24473
|
+
"end": 438
|
|
24456
24474
|
}
|
|
24457
24475
|
}
|
|
24458
24476
|
},
|
|
@@ -24463,8 +24481,8 @@
|
|
|
24463
24481
|
"name": "styles",
|
|
24464
24482
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24465
24483
|
"line": {
|
|
24466
|
-
"start":
|
|
24467
|
-
"end":
|
|
24484
|
+
"start": 181,
|
|
24485
|
+
"end": 438
|
|
24468
24486
|
}
|
|
24469
24487
|
}
|
|
24470
24488
|
},
|
|
@@ -24475,8 +24493,8 @@
|
|
|
24475
24493
|
"name": "styles",
|
|
24476
24494
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24477
24495
|
"line": {
|
|
24478
|
-
"start":
|
|
24479
|
-
"end":
|
|
24496
|
+
"start": 181,
|
|
24497
|
+
"end": 438
|
|
24480
24498
|
}
|
|
24481
24499
|
}
|
|
24482
24500
|
},
|
|
@@ -24487,8 +24505,8 @@
|
|
|
24487
24505
|
"name": "styles",
|
|
24488
24506
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24489
24507
|
"line": {
|
|
24490
|
-
"start":
|
|
24491
|
-
"end":
|
|
24508
|
+
"start": 181,
|
|
24509
|
+
"end": 438
|
|
24492
24510
|
}
|
|
24493
24511
|
}
|
|
24494
24512
|
},
|
|
@@ -24499,8 +24517,8 @@
|
|
|
24499
24517
|
"name": "styles",
|
|
24500
24518
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24501
24519
|
"line": {
|
|
24502
|
-
"start":
|
|
24503
|
-
"end":
|
|
24520
|
+
"start": 181,
|
|
24521
|
+
"end": 438
|
|
24504
24522
|
}
|
|
24505
24523
|
}
|
|
24506
24524
|
},
|
|
@@ -24511,8 +24529,8 @@
|
|
|
24511
24529
|
"name": "styles",
|
|
24512
24530
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24513
24531
|
"line": {
|
|
24514
|
-
"start":
|
|
24515
|
-
"end":
|
|
24532
|
+
"start": 181,
|
|
24533
|
+
"end": 438
|
|
24516
24534
|
}
|
|
24517
24535
|
}
|
|
24518
24536
|
},
|
|
@@ -24523,8 +24541,8 @@
|
|
|
24523
24541
|
"name": "styles",
|
|
24524
24542
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24525
24543
|
"line": {
|
|
24526
|
-
"start":
|
|
24527
|
-
"end":
|
|
24544
|
+
"start": 181,
|
|
24545
|
+
"end": 438
|
|
24528
24546
|
}
|
|
24529
24547
|
}
|
|
24530
24548
|
},
|
|
@@ -24535,8 +24553,8 @@
|
|
|
24535
24553
|
"name": "styles",
|
|
24536
24554
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24537
24555
|
"line": {
|
|
24538
|
-
"start":
|
|
24539
|
-
"end":
|
|
24556
|
+
"start": 181,
|
|
24557
|
+
"end": 438
|
|
24540
24558
|
}
|
|
24541
24559
|
}
|
|
24542
24560
|
},
|
|
@@ -24547,8 +24565,8 @@
|
|
|
24547
24565
|
"name": "styles",
|
|
24548
24566
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24549
24567
|
"line": {
|
|
24550
|
-
"start":
|
|
24551
|
-
"end":
|
|
24568
|
+
"start": 181,
|
|
24569
|
+
"end": 438
|
|
24552
24570
|
}
|
|
24553
24571
|
}
|
|
24554
24572
|
},
|
|
@@ -24559,8 +24577,8 @@
|
|
|
24559
24577
|
"name": "styles",
|
|
24560
24578
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24561
24579
|
"line": {
|
|
24562
|
-
"start":
|
|
24563
|
-
"end":
|
|
24580
|
+
"start": 181,
|
|
24581
|
+
"end": 438
|
|
24564
24582
|
}
|
|
24565
24583
|
}
|
|
24566
24584
|
},
|
|
@@ -24571,8 +24589,8 @@
|
|
|
24571
24589
|
"name": "styles",
|
|
24572
24590
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24573
24591
|
"line": {
|
|
24574
|
-
"start":
|
|
24575
|
-
"end":
|
|
24592
|
+
"start": 181,
|
|
24593
|
+
"end": 438
|
|
24576
24594
|
}
|
|
24577
24595
|
}
|
|
24578
24596
|
},
|
|
@@ -24583,8 +24601,8 @@
|
|
|
24583
24601
|
"name": "styles",
|
|
24584
24602
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24585
24603
|
"line": {
|
|
24586
|
-
"start":
|
|
24587
|
-
"end":
|
|
24604
|
+
"start": 181,
|
|
24605
|
+
"end": 438
|
|
24588
24606
|
}
|
|
24589
24607
|
}
|
|
24590
24608
|
},
|
|
@@ -24595,8 +24613,8 @@
|
|
|
24595
24613
|
"name": "styles",
|
|
24596
24614
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24597
24615
|
"line": {
|
|
24598
|
-
"start":
|
|
24599
|
-
"end":
|
|
24616
|
+
"start": 181,
|
|
24617
|
+
"end": 438
|
|
24600
24618
|
}
|
|
24601
24619
|
}
|
|
24602
24620
|
},
|
|
@@ -24607,8 +24625,8 @@
|
|
|
24607
24625
|
"name": "styles",
|
|
24608
24626
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24609
24627
|
"line": {
|
|
24610
|
-
"start":
|
|
24611
|
-
"end":
|
|
24628
|
+
"start": 181,
|
|
24629
|
+
"end": 438
|
|
24612
24630
|
}
|
|
24613
24631
|
}
|
|
24614
24632
|
},
|
|
@@ -24619,8 +24637,8 @@
|
|
|
24619
24637
|
"name": "styles",
|
|
24620
24638
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24621
24639
|
"line": {
|
|
24622
|
-
"start":
|
|
24623
|
-
"end":
|
|
24640
|
+
"start": 181,
|
|
24641
|
+
"end": 438
|
|
24624
24642
|
}
|
|
24625
24643
|
}
|
|
24626
24644
|
},
|
|
@@ -24631,8 +24649,8 @@
|
|
|
24631
24649
|
"name": "styles",
|
|
24632
24650
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24633
24651
|
"line": {
|
|
24634
|
-
"start":
|
|
24635
|
-
"end":
|
|
24652
|
+
"start": 181,
|
|
24653
|
+
"end": 438
|
|
24636
24654
|
}
|
|
24637
24655
|
}
|
|
24638
24656
|
},
|
|
@@ -24643,8 +24661,8 @@
|
|
|
24643
24661
|
"name": "styles",
|
|
24644
24662
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24645
24663
|
"line": {
|
|
24646
|
-
"start":
|
|
24647
|
-
"end":
|
|
24664
|
+
"start": 181,
|
|
24665
|
+
"end": 438
|
|
24648
24666
|
}
|
|
24649
24667
|
}
|
|
24650
24668
|
},
|
|
@@ -24655,8 +24673,8 @@
|
|
|
24655
24673
|
"name": "styles",
|
|
24656
24674
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24657
24675
|
"line": {
|
|
24658
|
-
"start":
|
|
24659
|
-
"end":
|
|
24676
|
+
"start": 181,
|
|
24677
|
+
"end": 438
|
|
24660
24678
|
}
|
|
24661
24679
|
}
|
|
24662
24680
|
},
|
|
@@ -24667,8 +24685,8 @@
|
|
|
24667
24685
|
"name": "styles",
|
|
24668
24686
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24669
24687
|
"line": {
|
|
24670
|
-
"start":
|
|
24671
|
-
"end":
|
|
24688
|
+
"start": 181,
|
|
24689
|
+
"end": 438
|
|
24672
24690
|
}
|
|
24673
24691
|
}
|
|
24674
24692
|
},
|
|
@@ -24679,8 +24697,8 @@
|
|
|
24679
24697
|
"name": "styles",
|
|
24680
24698
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24681
24699
|
"line": {
|
|
24682
|
-
"start":
|
|
24683
|
-
"end":
|
|
24700
|
+
"start": 181,
|
|
24701
|
+
"end": 438
|
|
24684
24702
|
}
|
|
24685
24703
|
}
|
|
24686
24704
|
},
|
|
@@ -24691,8 +24709,8 @@
|
|
|
24691
24709
|
"name": "styles",
|
|
24692
24710
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24693
24711
|
"line": {
|
|
24694
|
-
"start":
|
|
24695
|
-
"end":
|
|
24712
|
+
"start": 181,
|
|
24713
|
+
"end": 438
|
|
24696
24714
|
}
|
|
24697
24715
|
}
|
|
24698
24716
|
},
|
|
@@ -24703,8 +24721,8 @@
|
|
|
24703
24721
|
"name": "styles",
|
|
24704
24722
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24705
24723
|
"line": {
|
|
24706
|
-
"start":
|
|
24707
|
-
"end":
|
|
24724
|
+
"start": 181,
|
|
24725
|
+
"end": 438
|
|
24708
24726
|
}
|
|
24709
24727
|
}
|
|
24710
24728
|
},
|
|
@@ -24715,8 +24733,8 @@
|
|
|
24715
24733
|
"name": "styles",
|
|
24716
24734
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24717
24735
|
"line": {
|
|
24718
|
-
"start":
|
|
24719
|
-
"end":
|
|
24736
|
+
"start": 181,
|
|
24737
|
+
"end": 438
|
|
24720
24738
|
}
|
|
24721
24739
|
}
|
|
24722
24740
|
},
|
|
@@ -24727,8 +24745,8 @@
|
|
|
24727
24745
|
"name": "styles",
|
|
24728
24746
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24729
24747
|
"line": {
|
|
24730
|
-
"start":
|
|
24731
|
-
"end":
|
|
24748
|
+
"start": 181,
|
|
24749
|
+
"end": 438
|
|
24732
24750
|
}
|
|
24733
24751
|
}
|
|
24734
24752
|
},
|
|
@@ -24739,8 +24757,8 @@
|
|
|
24739
24757
|
"name": "styles",
|
|
24740
24758
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24741
24759
|
"line": {
|
|
24742
|
-
"start":
|
|
24743
|
-
"end":
|
|
24760
|
+
"start": 181,
|
|
24761
|
+
"end": 438
|
|
24744
24762
|
}
|
|
24745
24763
|
}
|
|
24746
24764
|
},
|
|
@@ -24751,8 +24769,8 @@
|
|
|
24751
24769
|
"name": "styles",
|
|
24752
24770
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24753
24771
|
"line": {
|
|
24754
|
-
"start":
|
|
24755
|
-
"end":
|
|
24772
|
+
"start": 181,
|
|
24773
|
+
"end": 438
|
|
24756
24774
|
}
|
|
24757
24775
|
}
|
|
24758
24776
|
},
|
|
@@ -24763,8 +24781,8 @@
|
|
|
24763
24781
|
"name": "styles",
|
|
24764
24782
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24765
24783
|
"line": {
|
|
24766
|
-
"start":
|
|
24767
|
-
"end":
|
|
24784
|
+
"start": 181,
|
|
24785
|
+
"end": 438
|
|
24768
24786
|
}
|
|
24769
24787
|
}
|
|
24770
24788
|
},
|
|
@@ -43107,16 +43125,16 @@
|
|
|
43107
43125
|
"description": "Module Settings\n",
|
|
43108
43126
|
"commentRange": {
|
|
43109
43127
|
"start": 27,
|
|
43110
|
-
"end":
|
|
43128
|
+
"end": 37
|
|
43111
43129
|
},
|
|
43112
43130
|
"context": {
|
|
43113
43131
|
"type": "variable",
|
|
43114
43132
|
"name": "config",
|
|
43115
|
-
"value": "(\n \"gap\" : 1rem,\n \"margin\" : (2em 0),\n \"graphic-width\" : 3.5rem,\n \"rule-border\" : true,\n \"rule-padding\" : 1rem,\n \"wrap-breakpoint\" : \"small\",\n \"separator-border\" : true,\n \"separator-gap\" : 0.8rem,\n)",
|
|
43133
|
+
"value": "(\n \"gap\" : 1rem,\n \"gap-compact\" : 0.5rem,\n \"margin\" : (2em 0),\n \"graphic-width\" : 3.5rem,\n \"rule-border\" : true,\n \"rule-padding\" : 1rem,\n \"wrap-breakpoint\" : \"small\",\n \"separator-border\" : true,\n \"separator-gap\" : 0.8rem,\n)",
|
|
43116
43134
|
"scope": "default",
|
|
43117
43135
|
"line": {
|
|
43118
|
-
"start":
|
|
43119
|
-
"end":
|
|
43136
|
+
"start": 39,
|
|
43137
|
+
"end": 49
|
|
43120
43138
|
}
|
|
43121
43139
|
},
|
|
43122
43140
|
"type": "Map",
|
|
@@ -43127,6 +43145,12 @@
|
|
|
43127
43145
|
"default": "1rem",
|
|
43128
43146
|
"description": "The gap between graphic and text."
|
|
43129
43147
|
},
|
|
43148
|
+
{
|
|
43149
|
+
"type": "CssUnit",
|
|
43150
|
+
"name": "gap-compact",
|
|
43151
|
+
"default": "0.5rem",
|
|
43152
|
+
"description": "The smaller gap applied when the compact modifier is used."
|
|
43153
|
+
},
|
|
43130
43154
|
{
|
|
43131
43155
|
"type": "List",
|
|
43132
43156
|
"name": "margin",
|
|
@@ -43186,16 +43210,16 @@
|
|
|
43186
43210
|
"path": "/sass/components/graphic-text-group/#mixin-set",
|
|
43187
43211
|
"description": "Change modules $config\n",
|
|
43188
43212
|
"commentRange": {
|
|
43189
|
-
"start":
|
|
43190
|
-
"end":
|
|
43213
|
+
"start": 51,
|
|
43214
|
+
"end": 54
|
|
43191
43215
|
},
|
|
43192
43216
|
"context": {
|
|
43193
43217
|
"type": "mixin",
|
|
43194
43218
|
"name": "set",
|
|
43195
43219
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
43196
43220
|
"line": {
|
|
43197
|
-
"start":
|
|
43198
|
-
"end":
|
|
43221
|
+
"start": 56,
|
|
43222
|
+
"end": 58
|
|
43199
43223
|
}
|
|
43200
43224
|
},
|
|
43201
43225
|
"parameter": [
|
|
@@ -43237,16 +43261,16 @@
|
|
|
43237
43261
|
"path": "/sass/components/graphic-text-group/#function-get",
|
|
43238
43262
|
"description": "Get a config option\n",
|
|
43239
43263
|
"commentRange": {
|
|
43240
|
-
"start":
|
|
43241
|
-
"end":
|
|
43264
|
+
"start": 60,
|
|
43265
|
+
"end": 63
|
|
43242
43266
|
},
|
|
43243
43267
|
"context": {
|
|
43244
43268
|
"type": "function",
|
|
43245
43269
|
"name": "get",
|
|
43246
43270
|
"code": "\n $value: utils.require-map-get($config, $name, \"graphic-text-group [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
43247
43271
|
"line": {
|
|
43248
|
-
"start":
|
|
43249
|
-
"end":
|
|
43272
|
+
"start": 65,
|
|
43273
|
+
"end": 68
|
|
43250
43274
|
}
|
|
43251
43275
|
},
|
|
43252
43276
|
"parameter": [
|
|
@@ -43284,16 +43308,16 @@
|
|
|
43284
43308
|
"path": "/sass/components/graphic-text-group/#mixin-styles",
|
|
43285
43309
|
"description": "Prints component styles\n",
|
|
43286
43310
|
"commentRange": {
|
|
43287
|
-
"start":
|
|
43288
|
-
"end":
|
|
43311
|
+
"start": 70,
|
|
43312
|
+
"end": 73
|
|
43289
43313
|
},
|
|
43290
43314
|
"context": {
|
|
43291
43315
|
"type": "mixin",
|
|
43292
43316
|
"name": "styles",
|
|
43293
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
43317
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
43294
43318
|
"line": {
|
|
43295
|
-
"start":
|
|
43296
|
-
"end":
|
|
43319
|
+
"start": 75,
|
|
43320
|
+
"end": 200
|
|
43297
43321
|
}
|
|
43298
43322
|
},
|
|
43299
43323
|
"demo": {
|
|
@@ -43355,6 +43379,10 @@
|
|
|
43355
43379
|
"type": "function",
|
|
43356
43380
|
"name": "get"
|
|
43357
43381
|
},
|
|
43382
|
+
{
|
|
43383
|
+
"type": "function",
|
|
43384
|
+
"name": "get"
|
|
43385
|
+
},
|
|
43358
43386
|
{
|
|
43359
43387
|
"type": "function",
|
|
43360
43388
|
"name": "get"
|
|
@@ -44951,43 +44979,15 @@
|
|
|
44951
44979
|
}
|
|
44952
44980
|
],
|
|
44953
44981
|
"menu-stack": [
|
|
44954
|
-
{
|
|
44955
|
-
"id": "content-content-block-id-1",
|
|
44956
|
-
"title": "content-block-id-1",
|
|
44957
|
-
"groupName": "menu-stack",
|
|
44958
|
-
"path": "/sass/components/menu-stack/#content-content-block-id-1",
|
|
44959
|
-
"description": "Module Settings\n",
|
|
44960
|
-
"commentRange": {
|
|
44961
|
-
"start": 38,
|
|
44962
|
-
"end": 39
|
|
44963
|
-
},
|
|
44964
|
-
"context": {
|
|
44965
|
-
"type": "content",
|
|
44966
|
-
"name": "content-block-id-1",
|
|
44967
|
-
"value": "Dimension",
|
|
44968
|
-
"line": {
|
|
44969
|
-
"start": 38,
|
|
44970
|
-
"end": 39
|
|
44971
|
-
}
|
|
44972
|
-
},
|
|
44973
|
-
"group": [
|
|
44974
|
-
"menu-stack"
|
|
44975
|
-
],
|
|
44976
|
-
"access": "public",
|
|
44977
|
-
"file": {
|
|
44978
|
-
"path": "_menu-stack.scss",
|
|
44979
|
-
"name": "_menu-stack.scss"
|
|
44980
|
-
}
|
|
44981
|
-
},
|
|
44982
44982
|
{
|
|
44983
44983
|
"id": "variable-config",
|
|
44984
44984
|
"title": "$config",
|
|
44985
44985
|
"groupName": "menu-stack",
|
|
44986
44986
|
"path": "/sass/components/menu-stack/#variable-config",
|
|
44987
|
-
"description": "",
|
|
44987
|
+
"description": "Module Settings\n",
|
|
44988
44988
|
"commentRange": {
|
|
44989
|
-
"start":
|
|
44990
|
-
"end":
|
|
44989
|
+
"start": 38,
|
|
44990
|
+
"end": 92
|
|
44991
44991
|
},
|
|
44992
44992
|
"context": {
|
|
44993
44993
|
"type": "variable",
|
|
@@ -44995,10 +44995,11 @@
|
|
|
44995
44995
|
"value": "(\n \"nested-indent\" : 0.5em,\n \"rule-style\" : \"light\",\n \"rule-margin\" : 0.5em,\n \"toggle-icon-rotate\" : false,\n \"label-color\" : \"type-secondary\",\n \"label-margin\" : 0.5em,\n \"label-text-transform\" : null,\n \"label-type-size\" : false,\n \"label-font-weight\" : bold,\n \"label-line-height\" : true,\n \"link-separated-margin\" : false,\n \"link-separated-rule-style\" : false,\n \"link-active-selectors\" : (\".is-active\",),\n \"link-background-color\" : transparent,\n \"link-background-color-active\" : \"control-background-active\",\n \"link-background-color-hover\" : rgba(0,0,0,0.2),\n \"link-border-radius\" : true,\n \"link-color\" : \"type-secondary\",\n \"link-color-active\" : \"control-active\",\n \"link-color-hover\" : \"type\",\n \"link-font-weight\" : null,\n \"link-line-height\" : true,\n \"link-icon-margin\" : 0.65em,\n \"link-icon-width\" : 1em,\n \"link-icon-font-size\" : null,\n \"link-margin\" : 0.2em,\n \"link-padding-x\": 0.85em,\n \"link-padding-y\": 0.4em,\n \"link-transition-duration\": 200ms,\n \"link-transition-properties\": (border-color, background-color, color, box-shadow),\n \"compact-link-padding-x\": 0.75em,\n \"compact-link-padding-y\": 0.25em,\n \"compact-link-margin\" : 0.2em,\n \"compact-link-border-radius\" : null,\n \"compact-selectable-input-width\": 2.2em,\n \"compact-selectable-input-top\" : 0.5em,\n \"compact-selectable-input-font-size\": 0.8em,\n \"stacked-link-padding-x\": 0.4em,\n \"stacked-link-padding-y\": 0.8em,\n \"stacked-link-margin\": 0.4em,\n \"stacked-link-icon-margin\": 0.35em,\n \"stacked-link-border-radius\": true,\n \"stacked-link-font-weight\" : null,\n \"selectable-input-width\" : 3em,\n \"selectable-input-top\" : 0.73em,\n \"selectable-input-font-size\" : null,\n \"title-color\" : null,\n \"title-font-weight\" : bold,\n \"title-separator-enabled\": true,\n \"title-separator-color\" : \"rule\",\n \"title-rule-style\" : \"light\",\n \"title-separated-margin\" : false,\n \"columns-gap\" : 2rem,\n \"columns-min-width\" : 18rem,\n)",
|
|
44996
44996
|
"scope": "default",
|
|
44997
44997
|
"line": {
|
|
44998
|
-
"start":
|
|
44999
|
-
"end":
|
|
44998
|
+
"start": 94,
|
|
44999
|
+
"end": 149
|
|
45000
45000
|
}
|
|
45001
45001
|
},
|
|
45002
|
+
"type": "Map",
|
|
45002
45003
|
"property": [
|
|
45003
45004
|
{
|
|
45004
45005
|
"type": "Dimension",
|
|
@@ -45335,16 +45336,16 @@
|
|
|
45335
45336
|
"path": "/sass/components/menu-stack/#mixin-set",
|
|
45336
45337
|
"description": "Change modules $config\n",
|
|
45337
45338
|
"commentRange": {
|
|
45338
|
-
"start":
|
|
45339
|
-
"end":
|
|
45339
|
+
"start": 151,
|
|
45340
|
+
"end": 154
|
|
45340
45341
|
},
|
|
45341
45342
|
"context": {
|
|
45342
45343
|
"type": "mixin",
|
|
45343
45344
|
"name": "set",
|
|
45344
45345
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
45345
45346
|
"line": {
|
|
45346
|
-
"start":
|
|
45347
|
-
"end":
|
|
45347
|
+
"start": 156,
|
|
45348
|
+
"end": 158
|
|
45348
45349
|
}
|
|
45349
45350
|
},
|
|
45350
45351
|
"parameter": [
|
|
@@ -45386,16 +45387,16 @@
|
|
|
45386
45387
|
"path": "/sass/components/menu-stack/#function-get",
|
|
45387
45388
|
"description": "Get a config option\n",
|
|
45388
45389
|
"commentRange": {
|
|
45389
|
-
"start":
|
|
45390
|
-
"end":
|
|
45390
|
+
"start": 160,
|
|
45391
|
+
"end": 163
|
|
45391
45392
|
},
|
|
45392
45393
|
"context": {
|
|
45393
45394
|
"type": "function",
|
|
45394
45395
|
"name": "get",
|
|
45395
45396
|
"code": "\n $value: utils.require-map-get($config, $name, \"menu-stack [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
45396
45397
|
"line": {
|
|
45397
|
-
"start":
|
|
45398
|
-
"end":
|
|
45398
|
+
"start": 165,
|
|
45399
|
+
"end": 168
|
|
45399
45400
|
}
|
|
45400
45401
|
},
|
|
45401
45402
|
"parameter": [
|
|
@@ -45433,16 +45434,16 @@
|
|
|
45433
45434
|
"path": "/sass/components/menu-stack/#mixin-styles",
|
|
45434
45435
|
"description": "Prints component styles\n",
|
|
45435
45436
|
"commentRange": {
|
|
45436
|
-
"start":
|
|
45437
|
-
"end":
|
|
45437
|
+
"start": 175,
|
|
45438
|
+
"end": 179
|
|
45438
45439
|
},
|
|
45439
45440
|
"context": {
|
|
45440
45441
|
"type": "mixin",
|
|
45441
45442
|
"name": "styles",
|
|
45442
45443
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
45443
45444
|
"line": {
|
|
45444
|
-
"start":
|
|
45445
|
-
"end":
|
|
45445
|
+
"start": 181,
|
|
45446
|
+
"end": 438
|
|
45446
45447
|
}
|
|
45447
45448
|
},
|
|
45448
45449
|
"example": [
|