@ulu/frontend 0.6.11 → 0.6.12
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 +445 -362
- package/dist/umd/frontend.css +1 -1
- package/lib/scss/components/_menu-stack.scss +20 -14
- package/package.json +1 -1
package/dist/mcp-data.json
CHANGED
|
@@ -4031,18 +4031,6 @@
|
|
|
4031
4031
|
"menu-stack": {
|
|
4032
4032
|
"description": "SCSS Configuration for menu-stack. To override these defaults, use the set mixin: `@include ulu.component-menu-stack-set(( \"property\": \"value\" ));`",
|
|
4033
4033
|
"properties": [
|
|
4034
|
-
{
|
|
4035
|
-
"name": "link-separated-margin",
|
|
4036
|
-
"type": "Boolean",
|
|
4037
|
-
"description": "Enables a margin between the items in the menu-stack.",
|
|
4038
|
-
"default": "false"
|
|
4039
|
-
},
|
|
4040
|
-
{
|
|
4041
|
-
"name": "link-separated-rule-style",
|
|
4042
|
-
"type": "Boolean",
|
|
4043
|
-
"description": "Enables a rule between the items in the menu-stack.",
|
|
4044
|
-
"default": "false"
|
|
4045
|
-
},
|
|
4046
4034
|
{
|
|
4047
4035
|
"name": "nested-indent",
|
|
4048
4036
|
"type": "Dimension",
|
|
@@ -4067,66 +4055,6 @@
|
|
|
4067
4055
|
"description": "Set a value to rotate the collapsible item toggle icon rotation when open (ie. 90deg)",
|
|
4068
4056
|
"default": "false"
|
|
4069
4057
|
},
|
|
4070
|
-
{
|
|
4071
|
-
"name": "compact-link-padding-x",
|
|
4072
|
-
"type": "Dimension",
|
|
4073
|
-
"description": "The links horizontal padding when using the compact option.",
|
|
4074
|
-
"default": "0.75em"
|
|
4075
|
-
},
|
|
4076
|
-
{
|
|
4077
|
-
"name": "compact-link-padding-y",
|
|
4078
|
-
"type": "Dimension",
|
|
4079
|
-
"description": "The links vertical padding when using the compact option.",
|
|
4080
|
-
"default": "0.25em"
|
|
4081
|
-
},
|
|
4082
|
-
{
|
|
4083
|
-
"name": "compact-link-margin",
|
|
4084
|
-
"type": "Dimension",
|
|
4085
|
-
"description": "Margin between items when compact",
|
|
4086
|
-
"default": "0.2em"
|
|
4087
|
-
},
|
|
4088
|
-
{
|
|
4089
|
-
"name": "compact-link-border-radius",
|
|
4090
|
-
"type": "Dimension",
|
|
4091
|
-
"description": "Unless set will use the normal link border radius",
|
|
4092
|
-
"default": "null"
|
|
4093
|
-
},
|
|
4094
|
-
{
|
|
4095
|
-
"name": "compact-selectable-input-width",
|
|
4096
|
-
"type": "Dimension",
|
|
4097
|
-
"description": "The width of the checkbox/radio input (when compact modifier)",
|
|
4098
|
-
"default": "2em"
|
|
4099
|
-
},
|
|
4100
|
-
{
|
|
4101
|
-
"name": "compact-selectable-input-font-size",
|
|
4102
|
-
"type": "Dimension",
|
|
4103
|
-
"description": "Optional compact input font-size",
|
|
4104
|
-
"default": "null"
|
|
4105
|
-
},
|
|
4106
|
-
{
|
|
4107
|
-
"name": "compact-selectable-input-top",
|
|
4108
|
-
"type": "Dimension",
|
|
4109
|
-
"description": "Optional y/top for input",
|
|
4110
|
-
"default": "null"
|
|
4111
|
-
},
|
|
4112
|
-
{
|
|
4113
|
-
"name": "stacked-link-padding-x",
|
|
4114
|
-
"type": "Dimension",
|
|
4115
|
-
"description": "The links horizontal padding when using the stacked option.",
|
|
4116
|
-
"default": "0.4em"
|
|
4117
|
-
},
|
|
4118
|
-
{
|
|
4119
|
-
"name": "stacked-link-padding-y",
|
|
4120
|
-
"type": "Dimension",
|
|
4121
|
-
"description": "The links vertical padding when using the stacked option.",
|
|
4122
|
-
"default": "0.4em"
|
|
4123
|
-
},
|
|
4124
|
-
{
|
|
4125
|
-
"name": "stacked-link-icon-margin",
|
|
4126
|
-
"type": "Dimension",
|
|
4127
|
-
"description": "Margin between icon and text when stacked.",
|
|
4128
|
-
"default": "0.35em"
|
|
4129
|
-
},
|
|
4130
4058
|
{
|
|
4131
4059
|
"name": "label-color",
|
|
4132
4060
|
"type": "Color",
|
|
@@ -4259,6 +4187,18 @@
|
|
|
4259
4187
|
"description": "Vertical padding for menu-stack toggle.",
|
|
4260
4188
|
"default": "0.35em"
|
|
4261
4189
|
},
|
|
4190
|
+
{
|
|
4191
|
+
"name": "link-separated-margin",
|
|
4192
|
+
"type": "Boolean",
|
|
4193
|
+
"description": "Enables a margin between the items in the menu-stack.",
|
|
4194
|
+
"default": "false"
|
|
4195
|
+
},
|
|
4196
|
+
{
|
|
4197
|
+
"name": "link-separated-rule-style",
|
|
4198
|
+
"type": "Boolean",
|
|
4199
|
+
"description": "Enables a rule between the items in the menu-stack.",
|
|
4200
|
+
"default": "false"
|
|
4201
|
+
},
|
|
4262
4202
|
{
|
|
4263
4203
|
"name": "selectable-input-width",
|
|
4264
4204
|
"type": "Dimension",
|
|
@@ -4336,6 +4276,78 @@
|
|
|
4336
4276
|
"type": "Dimension",
|
|
4337
4277
|
"description": "The minimum width of a column in a columns menu stack.",
|
|
4338
4278
|
"default": "18rem"
|
|
4279
|
+
},
|
|
4280
|
+
{
|
|
4281
|
+
"name": "compact-link-padding-x",
|
|
4282
|
+
"type": "Dimension",
|
|
4283
|
+
"description": "The links horizontal padding when using the compact option.",
|
|
4284
|
+
"default": "0.75em"
|
|
4285
|
+
},
|
|
4286
|
+
{
|
|
4287
|
+
"name": "compact-link-padding-y",
|
|
4288
|
+
"type": "Dimension",
|
|
4289
|
+
"description": "The links vertical padding when using the compact option.",
|
|
4290
|
+
"default": "0.25em"
|
|
4291
|
+
},
|
|
4292
|
+
{
|
|
4293
|
+
"name": "compact-link-margin",
|
|
4294
|
+
"type": "Dimension",
|
|
4295
|
+
"description": "Margin between items when compact",
|
|
4296
|
+
"default": "0.2em"
|
|
4297
|
+
},
|
|
4298
|
+
{
|
|
4299
|
+
"name": "compact-link-border-radius",
|
|
4300
|
+
"type": "Dimension",
|
|
4301
|
+
"description": "Unless set will use the normal link border radius",
|
|
4302
|
+
"default": "null"
|
|
4303
|
+
},
|
|
4304
|
+
{
|
|
4305
|
+
"name": "compact-selectable-input-width",
|
|
4306
|
+
"type": "Dimension",
|
|
4307
|
+
"description": "The width of the checkbox/radio input (when compact modifier)",
|
|
4308
|
+
"default": "2em"
|
|
4309
|
+
},
|
|
4310
|
+
{
|
|
4311
|
+
"name": "compact-selectable-input-font-size",
|
|
4312
|
+
"type": "Dimension",
|
|
4313
|
+
"description": "Optional compact input font-size",
|
|
4314
|
+
"default": "null"
|
|
4315
|
+
},
|
|
4316
|
+
{
|
|
4317
|
+
"name": "compact-selectable-input-top",
|
|
4318
|
+
"type": "Dimension",
|
|
4319
|
+
"description": "Optional y/top for input",
|
|
4320
|
+
"default": "null"
|
|
4321
|
+
},
|
|
4322
|
+
{
|
|
4323
|
+
"name": "stacked-link-padding-x",
|
|
4324
|
+
"type": "Dimension",
|
|
4325
|
+
"description": "The links horizontal padding when using the stacked option.",
|
|
4326
|
+
"default": "0.4em"
|
|
4327
|
+
},
|
|
4328
|
+
{
|
|
4329
|
+
"name": "stacked-link-padding-y",
|
|
4330
|
+
"type": "Dimension",
|
|
4331
|
+
"description": "The links vertical padding when using the stacked option.",
|
|
4332
|
+
"default": "0.4em"
|
|
4333
|
+
},
|
|
4334
|
+
{
|
|
4335
|
+
"name": "stacked-link-icon-margin",
|
|
4336
|
+
"type": "Dimension",
|
|
4337
|
+
"description": "Margin between icon and text when stacked.",
|
|
4338
|
+
"default": "0.35em"
|
|
4339
|
+
},
|
|
4340
|
+
{
|
|
4341
|
+
"name": "stacked-link-border-radius",
|
|
4342
|
+
"type": "Dimension",
|
|
4343
|
+
"description": "Border radius for stacked style of links, defaults to element \"border-radius-small\"",
|
|
4344
|
+
"default": "true"
|
|
4345
|
+
},
|
|
4346
|
+
{
|
|
4347
|
+
"name": "stacked-link-font-weight",
|
|
4348
|
+
"type": "Dimension",
|
|
4349
|
+
"description": "Optional font-weight for stacked style",
|
|
4350
|
+
"default": "true"
|
|
4339
4351
|
}
|
|
4340
4352
|
]
|
|
4341
4353
|
},
|
|
@@ -14782,8 +14794,8 @@
|
|
|
14782
14794
|
"name": "set",
|
|
14783
14795
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14784
14796
|
"line": {
|
|
14785
|
-
"start":
|
|
14786
|
-
"end":
|
|
14797
|
+
"start": 157,
|
|
14798
|
+
"end": 159
|
|
14787
14799
|
}
|
|
14788
14800
|
}
|
|
14789
14801
|
},
|
|
@@ -14794,8 +14806,8 @@
|
|
|
14794
14806
|
"name": "set",
|
|
14795
14807
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14796
14808
|
"line": {
|
|
14797
|
-
"start":
|
|
14798
|
-
"end":
|
|
14809
|
+
"start": 157,
|
|
14810
|
+
"end": 159
|
|
14799
14811
|
}
|
|
14800
14812
|
}
|
|
14801
14813
|
},
|
|
@@ -14806,8 +14818,8 @@
|
|
|
14806
14818
|
"name": "get",
|
|
14807
14819
|
"code": "\n $value: utils.require-map-get($config, $name, \"menu-stack [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
14808
14820
|
"line": {
|
|
14809
|
-
"start":
|
|
14810
|
-
"end":
|
|
14821
|
+
"start": 166,
|
|
14822
|
+
"end": 169
|
|
14811
14823
|
}
|
|
14812
14824
|
}
|
|
14813
14825
|
},
|
|
@@ -23868,10 +23880,10 @@
|
|
|
23868
23880
|
"context": {
|
|
23869
23881
|
"type": "mixin",
|
|
23870
23882
|
"name": "styles",
|
|
23871
|
-
"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 }\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",
|
|
23883
|
+
"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",
|
|
23872
23884
|
"line": {
|
|
23873
|
-
"start":
|
|
23874
|
-
"end":
|
|
23885
|
+
"start": 182,
|
|
23886
|
+
"end": 439
|
|
23875
23887
|
}
|
|
23876
23888
|
}
|
|
23877
23889
|
},
|
|
@@ -23880,10 +23892,10 @@
|
|
|
23880
23892
|
"context": {
|
|
23881
23893
|
"type": "mixin",
|
|
23882
23894
|
"name": "styles",
|
|
23883
|
-
"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 }\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",
|
|
23895
|
+
"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",
|
|
23884
23896
|
"line": {
|
|
23885
|
-
"start":
|
|
23886
|
-
"end":
|
|
23897
|
+
"start": 182,
|
|
23898
|
+
"end": 439
|
|
23887
23899
|
}
|
|
23888
23900
|
}
|
|
23889
23901
|
},
|
|
@@ -23892,10 +23904,10 @@
|
|
|
23892
23904
|
"context": {
|
|
23893
23905
|
"type": "mixin",
|
|
23894
23906
|
"name": "styles",
|
|
23895
|
-
"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 }\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",
|
|
23907
|
+
"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",
|
|
23896
23908
|
"line": {
|
|
23897
|
-
"start":
|
|
23898
|
-
"end":
|
|
23909
|
+
"start": 182,
|
|
23910
|
+
"end": 439
|
|
23899
23911
|
}
|
|
23900
23912
|
}
|
|
23901
23913
|
},
|
|
@@ -23904,10 +23916,10 @@
|
|
|
23904
23916
|
"context": {
|
|
23905
23917
|
"type": "mixin",
|
|
23906
23918
|
"name": "styles",
|
|
23907
|
-
"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 }\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",
|
|
23919
|
+
"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",
|
|
23908
23920
|
"line": {
|
|
23909
|
-
"start":
|
|
23910
|
-
"end":
|
|
23921
|
+
"start": 182,
|
|
23922
|
+
"end": 439
|
|
23911
23923
|
}
|
|
23912
23924
|
}
|
|
23913
23925
|
},
|
|
@@ -23916,10 +23928,10 @@
|
|
|
23916
23928
|
"context": {
|
|
23917
23929
|
"type": "mixin",
|
|
23918
23930
|
"name": "styles",
|
|
23919
|
-
"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 }\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",
|
|
23931
|
+
"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",
|
|
23920
23932
|
"line": {
|
|
23921
|
-
"start":
|
|
23922
|
-
"end":
|
|
23933
|
+
"start": 182,
|
|
23934
|
+
"end": 439
|
|
23923
23935
|
}
|
|
23924
23936
|
}
|
|
23925
23937
|
},
|
|
@@ -23928,10 +23940,10 @@
|
|
|
23928
23940
|
"context": {
|
|
23929
23941
|
"type": "mixin",
|
|
23930
23942
|
"name": "styles",
|
|
23931
|
-
"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 }\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",
|
|
23943
|
+
"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",
|
|
23932
23944
|
"line": {
|
|
23933
|
-
"start":
|
|
23934
|
-
"end":
|
|
23945
|
+
"start": 182,
|
|
23946
|
+
"end": 439
|
|
23935
23947
|
}
|
|
23936
23948
|
}
|
|
23937
23949
|
},
|
|
@@ -23940,10 +23952,10 @@
|
|
|
23940
23952
|
"context": {
|
|
23941
23953
|
"type": "mixin",
|
|
23942
23954
|
"name": "styles",
|
|
23943
|
-
"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 }\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",
|
|
23955
|
+
"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",
|
|
23944
23956
|
"line": {
|
|
23945
|
-
"start":
|
|
23946
|
-
"end":
|
|
23957
|
+
"start": 182,
|
|
23958
|
+
"end": 439
|
|
23947
23959
|
}
|
|
23948
23960
|
}
|
|
23949
23961
|
},
|
|
@@ -23952,10 +23964,10 @@
|
|
|
23952
23964
|
"context": {
|
|
23953
23965
|
"type": "mixin",
|
|
23954
23966
|
"name": "styles",
|
|
23955
|
-
"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 }\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",
|
|
23967
|
+
"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",
|
|
23956
23968
|
"line": {
|
|
23957
|
-
"start":
|
|
23958
|
-
"end":
|
|
23969
|
+
"start": 182,
|
|
23970
|
+
"end": 439
|
|
23959
23971
|
}
|
|
23960
23972
|
}
|
|
23961
23973
|
},
|
|
@@ -23964,10 +23976,10 @@
|
|
|
23964
23976
|
"context": {
|
|
23965
23977
|
"type": "mixin",
|
|
23966
23978
|
"name": "styles",
|
|
23967
|
-
"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 }\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",
|
|
23979
|
+
"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",
|
|
23968
23980
|
"line": {
|
|
23969
|
-
"start":
|
|
23970
|
-
"end":
|
|
23981
|
+
"start": 182,
|
|
23982
|
+
"end": 439
|
|
23971
23983
|
}
|
|
23972
23984
|
}
|
|
23973
23985
|
},
|
|
@@ -23976,10 +23988,10 @@
|
|
|
23976
23988
|
"context": {
|
|
23977
23989
|
"type": "mixin",
|
|
23978
23990
|
"name": "styles",
|
|
23979
|
-
"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 }\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",
|
|
23991
|
+
"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",
|
|
23980
23992
|
"line": {
|
|
23981
|
-
"start":
|
|
23982
|
-
"end":
|
|
23993
|
+
"start": 182,
|
|
23994
|
+
"end": 439
|
|
23983
23995
|
}
|
|
23984
23996
|
}
|
|
23985
23997
|
},
|
|
@@ -23988,10 +24000,10 @@
|
|
|
23988
24000
|
"context": {
|
|
23989
24001
|
"type": "mixin",
|
|
23990
24002
|
"name": "styles",
|
|
23991
|
-
"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 }\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",
|
|
24003
|
+
"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",
|
|
23992
24004
|
"line": {
|
|
23993
|
-
"start":
|
|
23994
|
-
"end":
|
|
24005
|
+
"start": 182,
|
|
24006
|
+
"end": 439
|
|
23995
24007
|
}
|
|
23996
24008
|
}
|
|
23997
24009
|
},
|
|
@@ -24000,10 +24012,10 @@
|
|
|
24000
24012
|
"context": {
|
|
24001
24013
|
"type": "mixin",
|
|
24002
24014
|
"name": "styles",
|
|
24003
|
-
"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 }\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",
|
|
24015
|
+
"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",
|
|
24004
24016
|
"line": {
|
|
24005
|
-
"start":
|
|
24006
|
-
"end":
|
|
24017
|
+
"start": 182,
|
|
24018
|
+
"end": 439
|
|
24007
24019
|
}
|
|
24008
24020
|
}
|
|
24009
24021
|
},
|
|
@@ -24012,10 +24024,10 @@
|
|
|
24012
24024
|
"context": {
|
|
24013
24025
|
"type": "mixin",
|
|
24014
24026
|
"name": "styles",
|
|
24015
|
-
"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 }\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",
|
|
24027
|
+
"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",
|
|
24016
24028
|
"line": {
|
|
24017
|
-
"start":
|
|
24018
|
-
"end":
|
|
24029
|
+
"start": 182,
|
|
24030
|
+
"end": 439
|
|
24019
24031
|
}
|
|
24020
24032
|
}
|
|
24021
24033
|
},
|
|
@@ -24024,10 +24036,10 @@
|
|
|
24024
24036
|
"context": {
|
|
24025
24037
|
"type": "mixin",
|
|
24026
24038
|
"name": "styles",
|
|
24027
|
-
"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 }\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",
|
|
24039
|
+
"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",
|
|
24028
24040
|
"line": {
|
|
24029
|
-
"start":
|
|
24030
|
-
"end":
|
|
24041
|
+
"start": 182,
|
|
24042
|
+
"end": 439
|
|
24031
24043
|
}
|
|
24032
24044
|
}
|
|
24033
24045
|
},
|
|
@@ -24036,10 +24048,10 @@
|
|
|
24036
24048
|
"context": {
|
|
24037
24049
|
"type": "mixin",
|
|
24038
24050
|
"name": "styles",
|
|
24039
|
-
"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 }\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",
|
|
24051
|
+
"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",
|
|
24040
24052
|
"line": {
|
|
24041
|
-
"start":
|
|
24042
|
-
"end":
|
|
24053
|
+
"start": 182,
|
|
24054
|
+
"end": 439
|
|
24043
24055
|
}
|
|
24044
24056
|
}
|
|
24045
24057
|
},
|
|
@@ -24048,10 +24060,10 @@
|
|
|
24048
24060
|
"context": {
|
|
24049
24061
|
"type": "mixin",
|
|
24050
24062
|
"name": "styles",
|
|
24051
|
-
"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 }\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",
|
|
24063
|
+
"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",
|
|
24052
24064
|
"line": {
|
|
24053
|
-
"start":
|
|
24054
|
-
"end":
|
|
24065
|
+
"start": 182,
|
|
24066
|
+
"end": 439
|
|
24055
24067
|
}
|
|
24056
24068
|
}
|
|
24057
24069
|
},
|
|
@@ -24060,10 +24072,10 @@
|
|
|
24060
24072
|
"context": {
|
|
24061
24073
|
"type": "mixin",
|
|
24062
24074
|
"name": "styles",
|
|
24063
|
-
"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 }\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",
|
|
24075
|
+
"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",
|
|
24064
24076
|
"line": {
|
|
24065
|
-
"start":
|
|
24066
|
-
"end":
|
|
24077
|
+
"start": 182,
|
|
24078
|
+
"end": 439
|
|
24067
24079
|
}
|
|
24068
24080
|
}
|
|
24069
24081
|
},
|
|
@@ -24072,10 +24084,10 @@
|
|
|
24072
24084
|
"context": {
|
|
24073
24085
|
"type": "mixin",
|
|
24074
24086
|
"name": "styles",
|
|
24075
|
-
"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 }\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",
|
|
24087
|
+
"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",
|
|
24076
24088
|
"line": {
|
|
24077
|
-
"start":
|
|
24078
|
-
"end":
|
|
24089
|
+
"start": 182,
|
|
24090
|
+
"end": 439
|
|
24079
24091
|
}
|
|
24080
24092
|
}
|
|
24081
24093
|
},
|
|
@@ -24084,10 +24096,10 @@
|
|
|
24084
24096
|
"context": {
|
|
24085
24097
|
"type": "mixin",
|
|
24086
24098
|
"name": "styles",
|
|
24087
|
-
"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 }\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",
|
|
24099
|
+
"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",
|
|
24088
24100
|
"line": {
|
|
24089
|
-
"start":
|
|
24090
|
-
"end":
|
|
24101
|
+
"start": 182,
|
|
24102
|
+
"end": 439
|
|
24091
24103
|
}
|
|
24092
24104
|
}
|
|
24093
24105
|
},
|
|
@@ -24096,10 +24108,10 @@
|
|
|
24096
24108
|
"context": {
|
|
24097
24109
|
"type": "mixin",
|
|
24098
24110
|
"name": "styles",
|
|
24099
|
-
"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 }\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",
|
|
24111
|
+
"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",
|
|
24100
24112
|
"line": {
|
|
24101
|
-
"start":
|
|
24102
|
-
"end":
|
|
24113
|
+
"start": 182,
|
|
24114
|
+
"end": 439
|
|
24103
24115
|
}
|
|
24104
24116
|
}
|
|
24105
24117
|
},
|
|
@@ -24108,10 +24120,10 @@
|
|
|
24108
24120
|
"context": {
|
|
24109
24121
|
"type": "mixin",
|
|
24110
24122
|
"name": "styles",
|
|
24111
|
-
"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 }\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",
|
|
24123
|
+
"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",
|
|
24112
24124
|
"line": {
|
|
24113
|
-
"start":
|
|
24114
|
-
"end":
|
|
24125
|
+
"start": 182,
|
|
24126
|
+
"end": 439
|
|
24115
24127
|
}
|
|
24116
24128
|
}
|
|
24117
24129
|
},
|
|
@@ -24120,10 +24132,10 @@
|
|
|
24120
24132
|
"context": {
|
|
24121
24133
|
"type": "mixin",
|
|
24122
24134
|
"name": "styles",
|
|
24123
|
-
"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 }\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",
|
|
24135
|
+
"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",
|
|
24124
24136
|
"line": {
|
|
24125
|
-
"start":
|
|
24126
|
-
"end":
|
|
24137
|
+
"start": 182,
|
|
24138
|
+
"end": 439
|
|
24127
24139
|
}
|
|
24128
24140
|
}
|
|
24129
24141
|
},
|
|
@@ -24132,10 +24144,10 @@
|
|
|
24132
24144
|
"context": {
|
|
24133
24145
|
"type": "mixin",
|
|
24134
24146
|
"name": "styles",
|
|
24135
|
-
"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 }\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",
|
|
24147
|
+
"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",
|
|
24136
24148
|
"line": {
|
|
24137
|
-
"start":
|
|
24138
|
-
"end":
|
|
24149
|
+
"start": 182,
|
|
24150
|
+
"end": 439
|
|
24139
24151
|
}
|
|
24140
24152
|
}
|
|
24141
24153
|
},
|
|
@@ -24144,10 +24156,10 @@
|
|
|
24144
24156
|
"context": {
|
|
24145
24157
|
"type": "mixin",
|
|
24146
24158
|
"name": "styles",
|
|
24147
|
-
"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 }\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",
|
|
24159
|
+
"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",
|
|
24148
24160
|
"line": {
|
|
24149
|
-
"start":
|
|
24150
|
-
"end":
|
|
24161
|
+
"start": 182,
|
|
24162
|
+
"end": 439
|
|
24151
24163
|
}
|
|
24152
24164
|
}
|
|
24153
24165
|
},
|
|
@@ -24156,10 +24168,10 @@
|
|
|
24156
24168
|
"context": {
|
|
24157
24169
|
"type": "mixin",
|
|
24158
24170
|
"name": "styles",
|
|
24159
|
-
"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 }\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",
|
|
24171
|
+
"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",
|
|
24160
24172
|
"line": {
|
|
24161
|
-
"start":
|
|
24162
|
-
"end":
|
|
24173
|
+
"start": 182,
|
|
24174
|
+
"end": 439
|
|
24163
24175
|
}
|
|
24164
24176
|
}
|
|
24165
24177
|
},
|
|
@@ -24168,10 +24180,10 @@
|
|
|
24168
24180
|
"context": {
|
|
24169
24181
|
"type": "mixin",
|
|
24170
24182
|
"name": "styles",
|
|
24171
|
-
"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 }\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",
|
|
24183
|
+
"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",
|
|
24172
24184
|
"line": {
|
|
24173
|
-
"start":
|
|
24174
|
-
"end":
|
|
24185
|
+
"start": 182,
|
|
24186
|
+
"end": 439
|
|
24175
24187
|
}
|
|
24176
24188
|
}
|
|
24177
24189
|
},
|
|
@@ -24180,10 +24192,10 @@
|
|
|
24180
24192
|
"context": {
|
|
24181
24193
|
"type": "mixin",
|
|
24182
24194
|
"name": "styles",
|
|
24183
|
-
"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 }\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",
|
|
24195
|
+
"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",
|
|
24184
24196
|
"line": {
|
|
24185
|
-
"start":
|
|
24186
|
-
"end":
|
|
24197
|
+
"start": 182,
|
|
24198
|
+
"end": 439
|
|
24187
24199
|
}
|
|
24188
24200
|
}
|
|
24189
24201
|
},
|
|
@@ -24192,10 +24204,10 @@
|
|
|
24192
24204
|
"context": {
|
|
24193
24205
|
"type": "mixin",
|
|
24194
24206
|
"name": "styles",
|
|
24195
|
-
"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 }\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",
|
|
24207
|
+
"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",
|
|
24196
24208
|
"line": {
|
|
24197
|
-
"start":
|
|
24198
|
-
"end":
|
|
24209
|
+
"start": 182,
|
|
24210
|
+
"end": 439
|
|
24199
24211
|
}
|
|
24200
24212
|
}
|
|
24201
24213
|
},
|
|
@@ -24204,10 +24216,10 @@
|
|
|
24204
24216
|
"context": {
|
|
24205
24217
|
"type": "mixin",
|
|
24206
24218
|
"name": "styles",
|
|
24207
|
-
"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 }\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",
|
|
24219
|
+
"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",
|
|
24208
24220
|
"line": {
|
|
24209
|
-
"start":
|
|
24210
|
-
"end":
|
|
24221
|
+
"start": 182,
|
|
24222
|
+
"end": 439
|
|
24211
24223
|
}
|
|
24212
24224
|
}
|
|
24213
24225
|
},
|
|
@@ -24216,10 +24228,10 @@
|
|
|
24216
24228
|
"context": {
|
|
24217
24229
|
"type": "mixin",
|
|
24218
24230
|
"name": "styles",
|
|
24219
|
-
"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 }\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",
|
|
24231
|
+
"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",
|
|
24220
24232
|
"line": {
|
|
24221
|
-
"start":
|
|
24222
|
-
"end":
|
|
24233
|
+
"start": 182,
|
|
24234
|
+
"end": 439
|
|
24223
24235
|
}
|
|
24224
24236
|
}
|
|
24225
24237
|
},
|
|
@@ -24228,10 +24240,10 @@
|
|
|
24228
24240
|
"context": {
|
|
24229
24241
|
"type": "mixin",
|
|
24230
24242
|
"name": "styles",
|
|
24231
|
-
"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 }\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",
|
|
24243
|
+
"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",
|
|
24232
24244
|
"line": {
|
|
24233
|
-
"start":
|
|
24234
|
-
"end":
|
|
24245
|
+
"start": 182,
|
|
24246
|
+
"end": 439
|
|
24235
24247
|
}
|
|
24236
24248
|
}
|
|
24237
24249
|
},
|
|
@@ -24240,10 +24252,10 @@
|
|
|
24240
24252
|
"context": {
|
|
24241
24253
|
"type": "mixin",
|
|
24242
24254
|
"name": "styles",
|
|
24243
|
-
"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 }\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",
|
|
24255
|
+
"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",
|
|
24244
24256
|
"line": {
|
|
24245
|
-
"start":
|
|
24246
|
-
"end":
|
|
24257
|
+
"start": 182,
|
|
24258
|
+
"end": 439
|
|
24247
24259
|
}
|
|
24248
24260
|
}
|
|
24249
24261
|
},
|
|
@@ -24252,10 +24264,10 @@
|
|
|
24252
24264
|
"context": {
|
|
24253
24265
|
"type": "mixin",
|
|
24254
24266
|
"name": "styles",
|
|
24255
|
-
"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 }\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",
|
|
24267
|
+
"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",
|
|
24256
24268
|
"line": {
|
|
24257
|
-
"start":
|
|
24258
|
-
"end":
|
|
24269
|
+
"start": 182,
|
|
24270
|
+
"end": 439
|
|
24259
24271
|
}
|
|
24260
24272
|
}
|
|
24261
24273
|
},
|
|
@@ -24264,10 +24276,10 @@
|
|
|
24264
24276
|
"context": {
|
|
24265
24277
|
"type": "mixin",
|
|
24266
24278
|
"name": "styles",
|
|
24267
|
-
"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 }\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",
|
|
24279
|
+
"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",
|
|
24268
24280
|
"line": {
|
|
24269
|
-
"start":
|
|
24270
|
-
"end":
|
|
24281
|
+
"start": 182,
|
|
24282
|
+
"end": 439
|
|
24271
24283
|
}
|
|
24272
24284
|
}
|
|
24273
24285
|
},
|
|
@@ -24276,10 +24288,10 @@
|
|
|
24276
24288
|
"context": {
|
|
24277
24289
|
"type": "mixin",
|
|
24278
24290
|
"name": "styles",
|
|
24279
|
-
"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 }\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",
|
|
24291
|
+
"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",
|
|
24280
24292
|
"line": {
|
|
24281
|
-
"start":
|
|
24282
|
-
"end":
|
|
24293
|
+
"start": 182,
|
|
24294
|
+
"end": 439
|
|
24283
24295
|
}
|
|
24284
24296
|
}
|
|
24285
24297
|
},
|
|
@@ -24288,10 +24300,10 @@
|
|
|
24288
24300
|
"context": {
|
|
24289
24301
|
"type": "mixin",
|
|
24290
24302
|
"name": "styles",
|
|
24291
|
-
"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 }\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",
|
|
24303
|
+
"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",
|
|
24292
24304
|
"line": {
|
|
24293
|
-
"start":
|
|
24294
|
-
"end":
|
|
24305
|
+
"start": 182,
|
|
24306
|
+
"end": 439
|
|
24295
24307
|
}
|
|
24296
24308
|
}
|
|
24297
24309
|
},
|
|
@@ -24300,10 +24312,10 @@
|
|
|
24300
24312
|
"context": {
|
|
24301
24313
|
"type": "mixin",
|
|
24302
24314
|
"name": "styles",
|
|
24303
|
-
"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 }\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",
|
|
24315
|
+
"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",
|
|
24304
24316
|
"line": {
|
|
24305
|
-
"start":
|
|
24306
|
-
"end":
|
|
24317
|
+
"start": 182,
|
|
24318
|
+
"end": 439
|
|
24307
24319
|
}
|
|
24308
24320
|
}
|
|
24309
24321
|
},
|
|
@@ -24312,10 +24324,10 @@
|
|
|
24312
24324
|
"context": {
|
|
24313
24325
|
"type": "mixin",
|
|
24314
24326
|
"name": "styles",
|
|
24315
|
-
"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 }\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",
|
|
24327
|
+
"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",
|
|
24316
24328
|
"line": {
|
|
24317
|
-
"start":
|
|
24318
|
-
"end":
|
|
24329
|
+
"start": 182,
|
|
24330
|
+
"end": 439
|
|
24319
24331
|
}
|
|
24320
24332
|
}
|
|
24321
24333
|
},
|
|
@@ -24324,10 +24336,10 @@
|
|
|
24324
24336
|
"context": {
|
|
24325
24337
|
"type": "mixin",
|
|
24326
24338
|
"name": "styles",
|
|
24327
|
-
"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 }\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",
|
|
24339
|
+
"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",
|
|
24328
24340
|
"line": {
|
|
24329
|
-
"start":
|
|
24330
|
-
"end":
|
|
24341
|
+
"start": 182,
|
|
24342
|
+
"end": 439
|
|
24331
24343
|
}
|
|
24332
24344
|
}
|
|
24333
24345
|
},
|
|
@@ -24336,10 +24348,10 @@
|
|
|
24336
24348
|
"context": {
|
|
24337
24349
|
"type": "mixin",
|
|
24338
24350
|
"name": "styles",
|
|
24339
|
-
"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 }\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",
|
|
24351
|
+
"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",
|
|
24340
24352
|
"line": {
|
|
24341
|
-
"start":
|
|
24342
|
-
"end":
|
|
24353
|
+
"start": 182,
|
|
24354
|
+
"end": 439
|
|
24343
24355
|
}
|
|
24344
24356
|
}
|
|
24345
24357
|
},
|
|
@@ -24348,10 +24360,10 @@
|
|
|
24348
24360
|
"context": {
|
|
24349
24361
|
"type": "mixin",
|
|
24350
24362
|
"name": "styles",
|
|
24351
|
-
"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 }\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",
|
|
24363
|
+
"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",
|
|
24352
24364
|
"line": {
|
|
24353
|
-
"start":
|
|
24354
|
-
"end":
|
|
24365
|
+
"start": 182,
|
|
24366
|
+
"end": 439
|
|
24355
24367
|
}
|
|
24356
24368
|
}
|
|
24357
24369
|
},
|
|
@@ -24360,10 +24372,10 @@
|
|
|
24360
24372
|
"context": {
|
|
24361
24373
|
"type": "mixin",
|
|
24362
24374
|
"name": "styles",
|
|
24363
|
-
"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 }\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",
|
|
24375
|
+
"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",
|
|
24364
24376
|
"line": {
|
|
24365
|
-
"start":
|
|
24366
|
-
"end":
|
|
24377
|
+
"start": 182,
|
|
24378
|
+
"end": 439
|
|
24367
24379
|
}
|
|
24368
24380
|
}
|
|
24369
24381
|
},
|
|
@@ -24372,10 +24384,10 @@
|
|
|
24372
24384
|
"context": {
|
|
24373
24385
|
"type": "mixin",
|
|
24374
24386
|
"name": "styles",
|
|
24375
|
-
"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 }\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",
|
|
24387
|
+
"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",
|
|
24376
24388
|
"line": {
|
|
24377
|
-
"start":
|
|
24378
|
-
"end":
|
|
24389
|
+
"start": 182,
|
|
24390
|
+
"end": 439
|
|
24379
24391
|
}
|
|
24380
24392
|
}
|
|
24381
24393
|
},
|
|
@@ -24384,10 +24396,10 @@
|
|
|
24384
24396
|
"context": {
|
|
24385
24397
|
"type": "mixin",
|
|
24386
24398
|
"name": "styles",
|
|
24387
|
-
"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 }\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",
|
|
24399
|
+
"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",
|
|
24388
24400
|
"line": {
|
|
24389
|
-
"start":
|
|
24390
|
-
"end":
|
|
24401
|
+
"start": 182,
|
|
24402
|
+
"end": 439
|
|
24391
24403
|
}
|
|
24392
24404
|
}
|
|
24393
24405
|
},
|
|
@@ -24396,10 +24408,10 @@
|
|
|
24396
24408
|
"context": {
|
|
24397
24409
|
"type": "mixin",
|
|
24398
24410
|
"name": "styles",
|
|
24399
|
-
"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 }\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",
|
|
24411
|
+
"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",
|
|
24400
24412
|
"line": {
|
|
24401
|
-
"start":
|
|
24402
|
-
"end":
|
|
24413
|
+
"start": 182,
|
|
24414
|
+
"end": 439
|
|
24403
24415
|
}
|
|
24404
24416
|
}
|
|
24405
24417
|
},
|
|
@@ -24408,10 +24420,10 @@
|
|
|
24408
24420
|
"context": {
|
|
24409
24421
|
"type": "mixin",
|
|
24410
24422
|
"name": "styles",
|
|
24411
|
-
"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 }\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",
|
|
24423
|
+
"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",
|
|
24412
24424
|
"line": {
|
|
24413
|
-
"start":
|
|
24414
|
-
"end":
|
|
24425
|
+
"start": 182,
|
|
24426
|
+
"end": 439
|
|
24415
24427
|
}
|
|
24416
24428
|
}
|
|
24417
24429
|
},
|
|
@@ -24420,10 +24432,10 @@
|
|
|
24420
24432
|
"context": {
|
|
24421
24433
|
"type": "mixin",
|
|
24422
24434
|
"name": "styles",
|
|
24423
|
-
"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 }\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",
|
|
24435
|
+
"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",
|
|
24424
24436
|
"line": {
|
|
24425
|
-
"start":
|
|
24426
|
-
"end":
|
|
24437
|
+
"start": 182,
|
|
24438
|
+
"end": 439
|
|
24427
24439
|
}
|
|
24428
24440
|
}
|
|
24429
24441
|
},
|
|
@@ -24432,10 +24444,10 @@
|
|
|
24432
24444
|
"context": {
|
|
24433
24445
|
"type": "mixin",
|
|
24434
24446
|
"name": "styles",
|
|
24435
|
-
"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 }\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",
|
|
24447
|
+
"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",
|
|
24436
24448
|
"line": {
|
|
24437
|
-
"start":
|
|
24438
|
-
"end":
|
|
24449
|
+
"start": 182,
|
|
24450
|
+
"end": 439
|
|
24439
24451
|
}
|
|
24440
24452
|
}
|
|
24441
24453
|
},
|
|
@@ -24444,10 +24456,10 @@
|
|
|
24444
24456
|
"context": {
|
|
24445
24457
|
"type": "mixin",
|
|
24446
24458
|
"name": "styles",
|
|
24447
|
-
"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 }\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",
|
|
24459
|
+
"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",
|
|
24448
24460
|
"line": {
|
|
24449
|
-
"start":
|
|
24450
|
-
"end":
|
|
24461
|
+
"start": 182,
|
|
24462
|
+
"end": 439
|
|
24451
24463
|
}
|
|
24452
24464
|
}
|
|
24453
24465
|
},
|
|
@@ -24456,10 +24468,10 @@
|
|
|
24456
24468
|
"context": {
|
|
24457
24469
|
"type": "mixin",
|
|
24458
24470
|
"name": "styles",
|
|
24459
|
-
"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 }\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",
|
|
24471
|
+
"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",
|
|
24460
24472
|
"line": {
|
|
24461
|
-
"start":
|
|
24462
|
-
"end":
|
|
24473
|
+
"start": 182,
|
|
24474
|
+
"end": 439
|
|
24463
24475
|
}
|
|
24464
24476
|
}
|
|
24465
24477
|
},
|
|
@@ -24468,10 +24480,10 @@
|
|
|
24468
24480
|
"context": {
|
|
24469
24481
|
"type": "mixin",
|
|
24470
24482
|
"name": "styles",
|
|
24471
|
-
"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 }\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",
|
|
24483
|
+
"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",
|
|
24472
24484
|
"line": {
|
|
24473
|
-
"start":
|
|
24474
|
-
"end":
|
|
24485
|
+
"start": 182,
|
|
24486
|
+
"end": 439
|
|
24475
24487
|
}
|
|
24476
24488
|
}
|
|
24477
24489
|
},
|
|
@@ -24480,10 +24492,10 @@
|
|
|
24480
24492
|
"context": {
|
|
24481
24493
|
"type": "mixin",
|
|
24482
24494
|
"name": "styles",
|
|
24483
|
-
"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 }\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",
|
|
24495
|
+
"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",
|
|
24484
24496
|
"line": {
|
|
24485
|
-
"start":
|
|
24486
|
-
"end":
|
|
24497
|
+
"start": 182,
|
|
24498
|
+
"end": 439
|
|
24487
24499
|
}
|
|
24488
24500
|
}
|
|
24489
24501
|
},
|
|
@@ -24492,10 +24504,10 @@
|
|
|
24492
24504
|
"context": {
|
|
24493
24505
|
"type": "mixin",
|
|
24494
24506
|
"name": "styles",
|
|
24495
|
-
"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 }\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",
|
|
24507
|
+
"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",
|
|
24496
24508
|
"line": {
|
|
24497
|
-
"start":
|
|
24498
|
-
"end":
|
|
24509
|
+
"start": 182,
|
|
24510
|
+
"end": 439
|
|
24499
24511
|
}
|
|
24500
24512
|
}
|
|
24501
24513
|
},
|
|
@@ -24504,10 +24516,10 @@
|
|
|
24504
24516
|
"context": {
|
|
24505
24517
|
"type": "mixin",
|
|
24506
24518
|
"name": "styles",
|
|
24507
|
-
"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 }\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",
|
|
24519
|
+
"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",
|
|
24508
24520
|
"line": {
|
|
24509
|
-
"start":
|
|
24510
|
-
"end":
|
|
24521
|
+
"start": 182,
|
|
24522
|
+
"end": 439
|
|
24511
24523
|
}
|
|
24512
24524
|
}
|
|
24513
24525
|
},
|
|
@@ -24516,10 +24528,10 @@
|
|
|
24516
24528
|
"context": {
|
|
24517
24529
|
"type": "mixin",
|
|
24518
24530
|
"name": "styles",
|
|
24519
|
-
"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 }\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",
|
|
24531
|
+
"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",
|
|
24520
24532
|
"line": {
|
|
24521
|
-
"start":
|
|
24522
|
-
"end":
|
|
24533
|
+
"start": 182,
|
|
24534
|
+
"end": 439
|
|
24523
24535
|
}
|
|
24524
24536
|
}
|
|
24525
24537
|
},
|
|
@@ -24528,10 +24540,10 @@
|
|
|
24528
24540
|
"context": {
|
|
24529
24541
|
"type": "mixin",
|
|
24530
24542
|
"name": "styles",
|
|
24531
|
-
"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 }\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",
|
|
24543
|
+
"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",
|
|
24532
24544
|
"line": {
|
|
24533
|
-
"start":
|
|
24534
|
-
"end":
|
|
24545
|
+
"start": 182,
|
|
24546
|
+
"end": 439
|
|
24535
24547
|
}
|
|
24536
24548
|
}
|
|
24537
24549
|
},
|
|
@@ -24540,10 +24552,10 @@
|
|
|
24540
24552
|
"context": {
|
|
24541
24553
|
"type": "mixin",
|
|
24542
24554
|
"name": "styles",
|
|
24543
|
-
"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 }\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",
|
|
24555
|
+
"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",
|
|
24544
24556
|
"line": {
|
|
24545
|
-
"start":
|
|
24546
|
-
"end":
|
|
24557
|
+
"start": 182,
|
|
24558
|
+
"end": 439
|
|
24547
24559
|
}
|
|
24548
24560
|
}
|
|
24549
24561
|
},
|
|
@@ -24552,10 +24564,10 @@
|
|
|
24552
24564
|
"context": {
|
|
24553
24565
|
"type": "mixin",
|
|
24554
24566
|
"name": "styles",
|
|
24555
|
-
"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 }\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",
|
|
24567
|
+
"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",
|
|
24556
24568
|
"line": {
|
|
24557
|
-
"start":
|
|
24558
|
-
"end":
|
|
24569
|
+
"start": 182,
|
|
24570
|
+
"end": 439
|
|
24559
24571
|
}
|
|
24560
24572
|
}
|
|
24561
24573
|
},
|
|
@@ -24564,10 +24576,10 @@
|
|
|
24564
24576
|
"context": {
|
|
24565
24577
|
"type": "mixin",
|
|
24566
24578
|
"name": "styles",
|
|
24567
|
-
"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 }\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",
|
|
24579
|
+
"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",
|
|
24568
24580
|
"line": {
|
|
24569
|
-
"start":
|
|
24570
|
-
"end":
|
|
24581
|
+
"start": 182,
|
|
24582
|
+
"end": 439
|
|
24571
24583
|
}
|
|
24572
24584
|
}
|
|
24573
24585
|
},
|
|
@@ -24576,10 +24588,10 @@
|
|
|
24576
24588
|
"context": {
|
|
24577
24589
|
"type": "mixin",
|
|
24578
24590
|
"name": "styles",
|
|
24579
|
-
"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 }\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",
|
|
24591
|
+
"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",
|
|
24580
24592
|
"line": {
|
|
24581
|
-
"start":
|
|
24582
|
-
"end":
|
|
24593
|
+
"start": 182,
|
|
24594
|
+
"end": 439
|
|
24583
24595
|
}
|
|
24584
24596
|
}
|
|
24585
24597
|
},
|
|
@@ -24588,10 +24600,10 @@
|
|
|
24588
24600
|
"context": {
|
|
24589
24601
|
"type": "mixin",
|
|
24590
24602
|
"name": "styles",
|
|
24591
|
-
"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 }\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",
|
|
24603
|
+
"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",
|
|
24592
24604
|
"line": {
|
|
24593
|
-
"start":
|
|
24594
|
-
"end":
|
|
24605
|
+
"start": 182,
|
|
24606
|
+
"end": 439
|
|
24595
24607
|
}
|
|
24596
24608
|
}
|
|
24597
24609
|
},
|
|
@@ -24600,10 +24612,10 @@
|
|
|
24600
24612
|
"context": {
|
|
24601
24613
|
"type": "mixin",
|
|
24602
24614
|
"name": "styles",
|
|
24603
|
-
"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 }\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",
|
|
24615
|
+
"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",
|
|
24604
24616
|
"line": {
|
|
24605
|
-
"start":
|
|
24606
|
-
"end":
|
|
24617
|
+
"start": 182,
|
|
24618
|
+
"end": 439
|
|
24607
24619
|
}
|
|
24608
24620
|
}
|
|
24609
24621
|
},
|
|
@@ -24612,10 +24624,10 @@
|
|
|
24612
24624
|
"context": {
|
|
24613
24625
|
"type": "mixin",
|
|
24614
24626
|
"name": "styles",
|
|
24615
|
-
"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 }\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",
|
|
24627
|
+
"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",
|
|
24616
24628
|
"line": {
|
|
24617
|
-
"start":
|
|
24618
|
-
"end":
|
|
24629
|
+
"start": 182,
|
|
24630
|
+
"end": 439
|
|
24619
24631
|
}
|
|
24620
24632
|
}
|
|
24621
24633
|
},
|
|
@@ -24624,10 +24636,34 @@
|
|
|
24624
24636
|
"context": {
|
|
24625
24637
|
"type": "mixin",
|
|
24626
24638
|
"name": "styles",
|
|
24627
|
-
"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 }\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",
|
|
24639
|
+
"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",
|
|
24628
24640
|
"line": {
|
|
24629
|
-
"start":
|
|
24630
|
-
"end":
|
|
24641
|
+
"start": 182,
|
|
24642
|
+
"end": 439
|
|
24643
|
+
}
|
|
24644
|
+
}
|
|
24645
|
+
},
|
|
24646
|
+
{
|
|
24647
|
+
"description": "Prints component styles\n",
|
|
24648
|
+
"context": {
|
|
24649
|
+
"type": "mixin",
|
|
24650
|
+
"name": "styles",
|
|
24651
|
+
"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",
|
|
24652
|
+
"line": {
|
|
24653
|
+
"start": 182,
|
|
24654
|
+
"end": 439
|
|
24655
|
+
}
|
|
24656
|
+
}
|
|
24657
|
+
},
|
|
24658
|
+
{
|
|
24659
|
+
"description": "Prints component styles\n",
|
|
24660
|
+
"context": {
|
|
24661
|
+
"type": "mixin",
|
|
24662
|
+
"name": "styles",
|
|
24663
|
+
"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",
|
|
24664
|
+
"line": {
|
|
24665
|
+
"start": 182,
|
|
24666
|
+
"end": 439
|
|
24631
24667
|
}
|
|
24632
24668
|
}
|
|
24633
24669
|
},
|
|
@@ -44746,40 +44782,55 @@
|
|
|
44746
44782
|
}
|
|
44747
44783
|
],
|
|
44748
44784
|
"menu-stack": [
|
|
44785
|
+
{
|
|
44786
|
+
"id": "content-content-block-id-1",
|
|
44787
|
+
"title": "content-block-id-1",
|
|
44788
|
+
"groupName": "menu-stack",
|
|
44789
|
+
"path": "/sass/components/menu-stack/#content-content-block-id-1",
|
|
44790
|
+
"description": "Module Settings\n",
|
|
44791
|
+
"commentRange": {
|
|
44792
|
+
"start": 38,
|
|
44793
|
+
"end": 39
|
|
44794
|
+
},
|
|
44795
|
+
"context": {
|
|
44796
|
+
"type": "content",
|
|
44797
|
+
"name": "content-block-id-1",
|
|
44798
|
+
"value": "Dimension",
|
|
44799
|
+
"line": {
|
|
44800
|
+
"start": 38,
|
|
44801
|
+
"end": 39
|
|
44802
|
+
}
|
|
44803
|
+
},
|
|
44804
|
+
"group": [
|
|
44805
|
+
"menu-stack"
|
|
44806
|
+
],
|
|
44807
|
+
"access": "public",
|
|
44808
|
+
"file": {
|
|
44809
|
+
"path": "_menu-stack.scss",
|
|
44810
|
+
"name": "_menu-stack.scss"
|
|
44811
|
+
}
|
|
44812
|
+
},
|
|
44749
44813
|
{
|
|
44750
44814
|
"id": "variable-config",
|
|
44751
44815
|
"title": "$config",
|
|
44752
44816
|
"groupName": "menu-stack",
|
|
44753
44817
|
"path": "/sass/components/menu-stack/#variable-config",
|
|
44754
|
-
"description": "
|
|
44818
|
+
"description": "",
|
|
44755
44819
|
"commentRange": {
|
|
44756
|
-
"start":
|
|
44757
|
-
"end":
|
|
44820
|
+
"start": 41,
|
|
44821
|
+
"end": 93
|
|
44758
44822
|
},
|
|
44759
44823
|
"context": {
|
|
44760
44824
|
"type": "variable",
|
|
44761
44825
|
"name": "config",
|
|
44762
|
-
"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.4em,\n \"stacked-link-icon-margin\": 0.35em,\n \"stacked-link-border-radius\": true,\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)",
|
|
44826
|
+
"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)",
|
|
44763
44827
|
"scope": "default",
|
|
44764
44828
|
"line": {
|
|
44765
|
-
"start":
|
|
44766
|
-
"end":
|
|
44829
|
+
"start": 95,
|
|
44830
|
+
"end": 150
|
|
44767
44831
|
}
|
|
44768
44832
|
},
|
|
44769
|
-
"type": "Map",
|
|
44770
44833
|
"property": [
|
|
44771
|
-
{
|
|
44772
|
-
"type": "Boolean",
|
|
44773
|
-
"name": "link-separated-margin",
|
|
44774
|
-
"default": "false",
|
|
44775
|
-
"description": "Enables a margin between the items in the menu-stack."
|
|
44776
|
-
},
|
|
44777
|
-
{
|
|
44778
|
-
"type": "Boolean",
|
|
44779
|
-
"name": "link-separated-rule-style",
|
|
44780
|
-
"default": "false",
|
|
44781
|
-
"description": "Enables a rule between the items in the menu-stack."
|
|
44782
|
-
},
|
|
44783
44834
|
{
|
|
44784
44835
|
"type": "Dimension",
|
|
44785
44836
|
"name": "nested-indent",
|
|
@@ -44804,66 +44855,6 @@
|
|
|
44804
44855
|
"default": "false",
|
|
44805
44856
|
"description": "Set a value to rotate the collapsible item toggle icon rotation when open (ie. 90deg)"
|
|
44806
44857
|
},
|
|
44807
|
-
{
|
|
44808
|
-
"type": "Dimension",
|
|
44809
|
-
"name": "compact-link-padding-x",
|
|
44810
|
-
"default": "0.75em",
|
|
44811
|
-
"description": "The links horizontal padding when using the compact option."
|
|
44812
|
-
},
|
|
44813
|
-
{
|
|
44814
|
-
"type": "Dimension",
|
|
44815
|
-
"name": "compact-link-padding-y",
|
|
44816
|
-
"default": "0.25em",
|
|
44817
|
-
"description": "The links vertical padding when using the compact option."
|
|
44818
|
-
},
|
|
44819
|
-
{
|
|
44820
|
-
"type": "Dimension",
|
|
44821
|
-
"name": "compact-link-margin",
|
|
44822
|
-
"default": "0.2em",
|
|
44823
|
-
"description": "Margin between items when compact"
|
|
44824
|
-
},
|
|
44825
|
-
{
|
|
44826
|
-
"type": "Dimension",
|
|
44827
|
-
"name": "compact-link-border-radius",
|
|
44828
|
-
"default": "null",
|
|
44829
|
-
"description": "Unless set will use the normal link border radius"
|
|
44830
|
-
},
|
|
44831
|
-
{
|
|
44832
|
-
"type": "Dimension",
|
|
44833
|
-
"name": "compact-selectable-input-width",
|
|
44834
|
-
"default": "2em",
|
|
44835
|
-
"description": "The width of the checkbox/radio input (when compact modifier)"
|
|
44836
|
-
},
|
|
44837
|
-
{
|
|
44838
|
-
"type": "Dimension",
|
|
44839
|
-
"name": "compact-selectable-input-font-size",
|
|
44840
|
-
"default": "null",
|
|
44841
|
-
"description": "Optional compact input font-size"
|
|
44842
|
-
},
|
|
44843
|
-
{
|
|
44844
|
-
"type": "Dimension",
|
|
44845
|
-
"name": "compact-selectable-input-top",
|
|
44846
|
-
"default": "null",
|
|
44847
|
-
"description": "Optional y/top for input"
|
|
44848
|
-
},
|
|
44849
|
-
{
|
|
44850
|
-
"type": "Dimension",
|
|
44851
|
-
"name": "stacked-link-padding-x",
|
|
44852
|
-
"default": "0.4em",
|
|
44853
|
-
"description": "The links horizontal padding when using the stacked option."
|
|
44854
|
-
},
|
|
44855
|
-
{
|
|
44856
|
-
"type": "Dimension",
|
|
44857
|
-
"name": "stacked-link-padding-y",
|
|
44858
|
-
"default": "0.4em",
|
|
44859
|
-
"description": "The links vertical padding when using the stacked option."
|
|
44860
|
-
},
|
|
44861
|
-
{
|
|
44862
|
-
"type": "Dimension",
|
|
44863
|
-
"name": "stacked-link-icon-margin",
|
|
44864
|
-
"default": "0.35em",
|
|
44865
|
-
"description": "Margin between icon and text when stacked."
|
|
44866
|
-
},
|
|
44867
44858
|
{
|
|
44868
44859
|
"type": "Color",
|
|
44869
44860
|
"name": "label-color",
|
|
@@ -44996,6 +44987,18 @@
|
|
|
44996
44987
|
"default": "0.35em",
|
|
44997
44988
|
"description": "Vertical padding for menu-stack toggle."
|
|
44998
44989
|
},
|
|
44990
|
+
{
|
|
44991
|
+
"type": "Boolean",
|
|
44992
|
+
"name": "link-separated-margin",
|
|
44993
|
+
"default": "false",
|
|
44994
|
+
"description": "Enables a margin between the items in the menu-stack."
|
|
44995
|
+
},
|
|
44996
|
+
{
|
|
44997
|
+
"type": "Boolean",
|
|
44998
|
+
"name": "link-separated-rule-style",
|
|
44999
|
+
"default": "false",
|
|
45000
|
+
"description": "Enables a rule between the items in the menu-stack."
|
|
45001
|
+
},
|
|
44999
45002
|
{
|
|
45000
45003
|
"type": "Dimension",
|
|
45001
45004
|
"name": "selectable-input-width",
|
|
@@ -45073,6 +45076,78 @@
|
|
|
45073
45076
|
"name": "columns-min-width",
|
|
45074
45077
|
"default": "18rem",
|
|
45075
45078
|
"description": "The minimum width of a column in a columns menu stack."
|
|
45079
|
+
},
|
|
45080
|
+
{
|
|
45081
|
+
"type": "Dimension",
|
|
45082
|
+
"name": "compact-link-padding-x",
|
|
45083
|
+
"default": "0.75em",
|
|
45084
|
+
"description": "The links horizontal padding when using the compact option."
|
|
45085
|
+
},
|
|
45086
|
+
{
|
|
45087
|
+
"type": "Dimension",
|
|
45088
|
+
"name": "compact-link-padding-y",
|
|
45089
|
+
"default": "0.25em",
|
|
45090
|
+
"description": "The links vertical padding when using the compact option."
|
|
45091
|
+
},
|
|
45092
|
+
{
|
|
45093
|
+
"type": "Dimension",
|
|
45094
|
+
"name": "compact-link-margin",
|
|
45095
|
+
"default": "0.2em",
|
|
45096
|
+
"description": "Margin between items when compact"
|
|
45097
|
+
},
|
|
45098
|
+
{
|
|
45099
|
+
"type": "Dimension",
|
|
45100
|
+
"name": "compact-link-border-radius",
|
|
45101
|
+
"default": "null",
|
|
45102
|
+
"description": "Unless set will use the normal link border radius"
|
|
45103
|
+
},
|
|
45104
|
+
{
|
|
45105
|
+
"type": "Dimension",
|
|
45106
|
+
"name": "compact-selectable-input-width",
|
|
45107
|
+
"default": "2em",
|
|
45108
|
+
"description": "The width of the checkbox/radio input (when compact modifier)"
|
|
45109
|
+
},
|
|
45110
|
+
{
|
|
45111
|
+
"type": "Dimension",
|
|
45112
|
+
"name": "compact-selectable-input-font-size",
|
|
45113
|
+
"default": "null",
|
|
45114
|
+
"description": "Optional compact input font-size"
|
|
45115
|
+
},
|
|
45116
|
+
{
|
|
45117
|
+
"type": "Dimension",
|
|
45118
|
+
"name": "compact-selectable-input-top",
|
|
45119
|
+
"default": "null",
|
|
45120
|
+
"description": "Optional y/top for input"
|
|
45121
|
+
},
|
|
45122
|
+
{
|
|
45123
|
+
"type": "Dimension",
|
|
45124
|
+
"name": "stacked-link-padding-x",
|
|
45125
|
+
"default": "0.4em",
|
|
45126
|
+
"description": "The links horizontal padding when using the stacked option."
|
|
45127
|
+
},
|
|
45128
|
+
{
|
|
45129
|
+
"type": "Dimension",
|
|
45130
|
+
"name": "stacked-link-padding-y",
|
|
45131
|
+
"default": "0.4em",
|
|
45132
|
+
"description": "The links vertical padding when using the stacked option."
|
|
45133
|
+
},
|
|
45134
|
+
{
|
|
45135
|
+
"type": "Dimension",
|
|
45136
|
+
"name": "stacked-link-icon-margin",
|
|
45137
|
+
"default": "0.35em",
|
|
45138
|
+
"description": "Margin between icon and text when stacked."
|
|
45139
|
+
},
|
|
45140
|
+
{
|
|
45141
|
+
"type": "Dimension",
|
|
45142
|
+
"name": "stacked-link-border-radius",
|
|
45143
|
+
"default": "true",
|
|
45144
|
+
"description": "Border radius for stacked style of links, defaults to element \"border-radius-small\""
|
|
45145
|
+
},
|
|
45146
|
+
{
|
|
45147
|
+
"type": "Dimension",
|
|
45148
|
+
"name": "stacked-link-font-weight",
|
|
45149
|
+
"default": "true",
|
|
45150
|
+
"description": "Optional font-weight for stacked style"
|
|
45076
45151
|
}
|
|
45077
45152
|
],
|
|
45078
45153
|
"group": [
|
|
@@ -45091,16 +45166,16 @@
|
|
|
45091
45166
|
"path": "/sass/components/menu-stack/#mixin-set",
|
|
45092
45167
|
"description": "Change modules $config\n",
|
|
45093
45168
|
"commentRange": {
|
|
45094
|
-
"start":
|
|
45095
|
-
"end":
|
|
45169
|
+
"start": 152,
|
|
45170
|
+
"end": 155
|
|
45096
45171
|
},
|
|
45097
45172
|
"context": {
|
|
45098
45173
|
"type": "mixin",
|
|
45099
45174
|
"name": "set",
|
|
45100
45175
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
45101
45176
|
"line": {
|
|
45102
|
-
"start":
|
|
45103
|
-
"end":
|
|
45177
|
+
"start": 157,
|
|
45178
|
+
"end": 159
|
|
45104
45179
|
}
|
|
45105
45180
|
},
|
|
45106
45181
|
"parameter": [
|
|
@@ -45142,16 +45217,16 @@
|
|
|
45142
45217
|
"path": "/sass/components/menu-stack/#function-get",
|
|
45143
45218
|
"description": "Get a config option\n",
|
|
45144
45219
|
"commentRange": {
|
|
45145
|
-
"start":
|
|
45146
|
-
"end":
|
|
45220
|
+
"start": 161,
|
|
45221
|
+
"end": 164
|
|
45147
45222
|
},
|
|
45148
45223
|
"context": {
|
|
45149
45224
|
"type": "function",
|
|
45150
45225
|
"name": "get",
|
|
45151
45226
|
"code": "\n $value: utils.require-map-get($config, $name, \"menu-stack [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
45152
45227
|
"line": {
|
|
45153
|
-
"start":
|
|
45154
|
-
"end":
|
|
45228
|
+
"start": 166,
|
|
45229
|
+
"end": 169
|
|
45155
45230
|
}
|
|
45156
45231
|
},
|
|
45157
45232
|
"parameter": [
|
|
@@ -45189,16 +45264,16 @@
|
|
|
45189
45264
|
"path": "/sass/components/menu-stack/#mixin-styles",
|
|
45190
45265
|
"description": "Prints component styles\n",
|
|
45191
45266
|
"commentRange": {
|
|
45192
|
-
"start":
|
|
45193
|
-
"end":
|
|
45267
|
+
"start": 176,
|
|
45268
|
+
"end": 180
|
|
45194
45269
|
},
|
|
45195
45270
|
"context": {
|
|
45196
45271
|
"type": "mixin",
|
|
45197
45272
|
"name": "styles",
|
|
45198
|
-
"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 }\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",
|
|
45273
|
+
"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",
|
|
45199
45274
|
"line": {
|
|
45200
|
-
"start":
|
|
45201
|
-
"end":
|
|
45275
|
+
"start": 182,
|
|
45276
|
+
"end": 439
|
|
45202
45277
|
}
|
|
45203
45278
|
},
|
|
45204
45279
|
"example": [
|
|
@@ -45468,6 +45543,14 @@
|
|
|
45468
45543
|
"type": "function",
|
|
45469
45544
|
"name": "get"
|
|
45470
45545
|
},
|
|
45546
|
+
{
|
|
45547
|
+
"type": "function",
|
|
45548
|
+
"name": "get"
|
|
45549
|
+
},
|
|
45550
|
+
{
|
|
45551
|
+
"type": "function",
|
|
45552
|
+
"name": "get"
|
|
45553
|
+
},
|
|
45471
45554
|
{
|
|
45472
45555
|
"type": "function",
|
|
45473
45556
|
"name": "get"
|