@ulu/frontend 0.6.17 → 0.6.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/mcp-data.json
CHANGED
|
@@ -3749,6 +3749,12 @@
|
|
|
3749
3749
|
"description": "The gap between graphic and text.",
|
|
3750
3750
|
"default": "1rem"
|
|
3751
3751
|
},
|
|
3752
|
+
{
|
|
3753
|
+
"name": "gap-compact",
|
|
3754
|
+
"type": "CssUnit",
|
|
3755
|
+
"description": "The smaller gap applied when the compact modifier is used.",
|
|
3756
|
+
"default": "0.5rem"
|
|
3757
|
+
},
|
|
3752
3758
|
{
|
|
3753
3759
|
"name": "margin",
|
|
3754
3760
|
"type": "List",
|
|
@@ -8283,7 +8289,7 @@
|
|
|
8283
8289
|
"description": "System widths\n",
|
|
8284
8290
|
"commentRange": {
|
|
8285
8291
|
"start": 44,
|
|
8286
|
-
"end":
|
|
8292
|
+
"end": 50
|
|
8287
8293
|
},
|
|
8288
8294
|
"context": {
|
|
8289
8295
|
"type": "variable",
|
|
@@ -8291,8 +8297,8 @@
|
|
|
8291
8297
|
"value": "(\n \"small-x\": (\n \"value\": 6rem,\n \"helper-class\": true\n ),\n \"small\": (\n \"value\": 8rem,\n \"helper-class\": true\n ),\n \"medium\": (\n \"value\": 16rem,\n \"helper-class\": true\n ),\n \"large\": (\n \"value\": 32rem,\n \"helper-class\": true\n )\n)",
|
|
8292
8298
|
"scope": "default",
|
|
8293
8299
|
"line": {
|
|
8294
|
-
"start":
|
|
8295
|
-
"end":
|
|
8300
|
+
"start": 52,
|
|
8301
|
+
"end": 69
|
|
8296
8302
|
}
|
|
8297
8303
|
},
|
|
8298
8304
|
"type": "Map",
|
|
@@ -8312,6 +8318,11 @@
|
|
|
8312
8318
|
"name": "[name].helper-class",
|
|
8313
8319
|
"description": "Output a helper class for this width"
|
|
8314
8320
|
},
|
|
8321
|
+
{
|
|
8322
|
+
"type": "Boolean",
|
|
8323
|
+
"name": "[name].match-font-size",
|
|
8324
|
+
"description": "If enabled will set font size equal to width for font based icon fonts (only output with helper class)"
|
|
8325
|
+
},
|
|
8315
8326
|
{
|
|
8316
8327
|
"type": "Map",
|
|
8317
8328
|
"name": "[name].breakpoints",
|
|
@@ -8334,8 +8345,8 @@
|
|
|
8334
8345
|
"name": "set-widths",
|
|
8335
8346
|
"code": "\n $widths: utils.map-merge($widths, $changes, $merge-mode) !global;\n",
|
|
8336
8347
|
"line": {
|
|
8337
|
-
"start":
|
|
8338
|
-
"end":
|
|
8348
|
+
"start": 75,
|
|
8349
|
+
"end": 77
|
|
8339
8350
|
}
|
|
8340
8351
|
}
|
|
8341
8352
|
},
|
|
@@ -8346,8 +8357,8 @@
|
|
|
8346
8357
|
"name": "set-widths",
|
|
8347
8358
|
"code": "\n $widths: utils.map-merge($widths, $changes, $merge-mode) !global;\n",
|
|
8348
8359
|
"line": {
|
|
8349
|
-
"start":
|
|
8350
|
-
"end":
|
|
8360
|
+
"start": 75,
|
|
8361
|
+
"end": 77
|
|
8351
8362
|
}
|
|
8352
8363
|
}
|
|
8353
8364
|
},
|
|
@@ -8358,8 +8369,8 @@
|
|
|
8358
8369
|
"name": "get-width",
|
|
8359
8370
|
"code": "\n @return utils.require-map-get($widths, $name, \"layout [widths]\");\n",
|
|
8360
8371
|
"line": {
|
|
8361
|
-
"start":
|
|
8362
|
-
"end":
|
|
8372
|
+
"start": 83,
|
|
8373
|
+
"end": 85
|
|
8363
8374
|
}
|
|
8364
8375
|
}
|
|
8365
8376
|
}
|
|
@@ -8372,16 +8383,16 @@
|
|
|
8372
8383
|
"path": "/sass/core/layout/#mixin-set-widths",
|
|
8373
8384
|
"description": "Change widths config\n",
|
|
8374
8385
|
"commentRange": {
|
|
8375
|
-
"start":
|
|
8376
|
-
"end":
|
|
8386
|
+
"start": 71,
|
|
8387
|
+
"end": 73
|
|
8377
8388
|
},
|
|
8378
8389
|
"context": {
|
|
8379
8390
|
"type": "mixin",
|
|
8380
8391
|
"name": "set-widths",
|
|
8381
8392
|
"code": "\n $widths: utils.map-merge($widths, $changes, $merge-mode) !global;\n",
|
|
8382
8393
|
"line": {
|
|
8383
|
-
"start":
|
|
8384
|
-
"end":
|
|
8394
|
+
"start": 75,
|
|
8395
|
+
"end": 77
|
|
8385
8396
|
}
|
|
8386
8397
|
},
|
|
8387
8398
|
"parameter": [
|
|
@@ -8426,16 +8437,16 @@
|
|
|
8426
8437
|
"path": "/sass/core/layout/#function-get-width",
|
|
8427
8438
|
"description": "Get a width config by name\n",
|
|
8428
8439
|
"commentRange": {
|
|
8429
|
-
"start":
|
|
8430
|
-
"end":
|
|
8440
|
+
"start": 79,
|
|
8441
|
+
"end": 81
|
|
8431
8442
|
},
|
|
8432
8443
|
"context": {
|
|
8433
8444
|
"type": "function",
|
|
8434
8445
|
"name": "get-width",
|
|
8435
8446
|
"code": "\n @return utils.require-map-get($widths, $name, \"layout [widths]\");\n",
|
|
8436
8447
|
"line": {
|
|
8437
|
-
"start":
|
|
8438
|
-
"end":
|
|
8448
|
+
"start": 83,
|
|
8449
|
+
"end": 85
|
|
8439
8450
|
}
|
|
8440
8451
|
},
|
|
8441
8452
|
"parameter": [
|
|
@@ -8475,8 +8486,8 @@
|
|
|
8475
8486
|
"path": "/sass/core/layout/#variable-max-widths",
|
|
8476
8487
|
"description": "System max-widths\n",
|
|
8477
8488
|
"commentRange": {
|
|
8478
|
-
"start":
|
|
8479
|
-
"end":
|
|
8489
|
+
"start": 87,
|
|
8490
|
+
"end": 92
|
|
8480
8491
|
},
|
|
8481
8492
|
"context": {
|
|
8482
8493
|
"type": "variable",
|
|
@@ -8484,8 +8495,8 @@
|
|
|
8484
8495
|
"value": "(\n \"small\": (\n \"value\": 20rem,\n \"helper-class\": true\n ),\n \"medium\": (\n \"value\": 40rem,\n \"helper-class\": true\n ),\n \"large\": (\n \"value\": 60rem,\n \"helper-class\": true\n )\n)",
|
|
8485
8496
|
"scope": "default",
|
|
8486
8497
|
"line": {
|
|
8487
|
-
"start":
|
|
8488
|
-
"end":
|
|
8498
|
+
"start": 94,
|
|
8499
|
+
"end": 107
|
|
8489
8500
|
}
|
|
8490
8501
|
},
|
|
8491
8502
|
"type": "Map",
|
|
@@ -8527,8 +8538,8 @@
|
|
|
8527
8538
|
"name": "set-max-widths",
|
|
8528
8539
|
"code": "\n $max-widths: utils.map-merge($max-widths, $changes, $merge-mode) !global;\n",
|
|
8529
8540
|
"line": {
|
|
8530
|
-
"start":
|
|
8531
|
-
"end":
|
|
8541
|
+
"start": 113,
|
|
8542
|
+
"end": 115
|
|
8532
8543
|
}
|
|
8533
8544
|
}
|
|
8534
8545
|
},
|
|
@@ -8539,8 +8550,8 @@
|
|
|
8539
8550
|
"name": "set-max-widths",
|
|
8540
8551
|
"code": "\n $max-widths: utils.map-merge($max-widths, $changes, $merge-mode) !global;\n",
|
|
8541
8552
|
"line": {
|
|
8542
|
-
"start":
|
|
8543
|
-
"end":
|
|
8553
|
+
"start": 113,
|
|
8554
|
+
"end": 115
|
|
8544
8555
|
}
|
|
8545
8556
|
}
|
|
8546
8557
|
},
|
|
@@ -8551,8 +8562,8 @@
|
|
|
8551
8562
|
"name": "get-max-width",
|
|
8552
8563
|
"code": "\n @return utils.require-map-get($max-widths, $name, \"layout [max-widths]\");\n",
|
|
8553
8564
|
"line": {
|
|
8554
|
-
"start":
|
|
8555
|
-
"end":
|
|
8565
|
+
"start": 121,
|
|
8566
|
+
"end": 123
|
|
8556
8567
|
}
|
|
8557
8568
|
}
|
|
8558
8569
|
}
|
|
@@ -8565,16 +8576,16 @@
|
|
|
8565
8576
|
"path": "/sass/core/layout/#mixin-set-max-widths",
|
|
8566
8577
|
"description": "Change max-widths config\n",
|
|
8567
8578
|
"commentRange": {
|
|
8568
|
-
"start":
|
|
8569
|
-
"end":
|
|
8579
|
+
"start": 109,
|
|
8580
|
+
"end": 111
|
|
8570
8581
|
},
|
|
8571
8582
|
"context": {
|
|
8572
8583
|
"type": "mixin",
|
|
8573
8584
|
"name": "set-max-widths",
|
|
8574
8585
|
"code": "\n $max-widths: utils.map-merge($max-widths, $changes, $merge-mode) !global;\n",
|
|
8575
8586
|
"line": {
|
|
8576
|
-
"start":
|
|
8577
|
-
"end":
|
|
8587
|
+
"start": 113,
|
|
8588
|
+
"end": 115
|
|
8578
8589
|
}
|
|
8579
8590
|
},
|
|
8580
8591
|
"parameter": [
|
|
@@ -8619,16 +8630,16 @@
|
|
|
8619
8630
|
"path": "/sass/core/layout/#function-get-max-width",
|
|
8620
8631
|
"description": "Get a max-width config by name\n",
|
|
8621
8632
|
"commentRange": {
|
|
8622
|
-
"start":
|
|
8623
|
-
"end":
|
|
8633
|
+
"start": 117,
|
|
8634
|
+
"end": 119
|
|
8624
8635
|
},
|
|
8625
8636
|
"context": {
|
|
8626
8637
|
"type": "function",
|
|
8627
8638
|
"name": "get-max-width",
|
|
8628
8639
|
"code": "\n @return utils.require-map-get($max-widths, $name, \"layout [max-widths]\");\n",
|
|
8629
8640
|
"line": {
|
|
8630
|
-
"start":
|
|
8631
|
-
"end":
|
|
8641
|
+
"start": 121,
|
|
8642
|
+
"end": 123
|
|
8632
8643
|
}
|
|
8633
8644
|
},
|
|
8634
8645
|
"parameter": [
|
|
@@ -8668,8 +8679,8 @@
|
|
|
8668
8679
|
"path": "/sass/core/layout/#variable-containers",
|
|
8669
8680
|
"description": "Containers Lookup (use set-containers)\n",
|
|
8670
8681
|
"commentRange": {
|
|
8671
|
-
"start":
|
|
8672
|
-
"end":
|
|
8682
|
+
"start": 125,
|
|
8683
|
+
"end": 127
|
|
8673
8684
|
},
|
|
8674
8685
|
"context": {
|
|
8675
8686
|
"type": "variable",
|
|
@@ -8677,8 +8688,8 @@
|
|
|
8677
8688
|
"value": "(\n \"container\" : (\n \"width\" : 100%,\n \"max-width\" : get(\"max-width\"),\n \"padding\" : (get(\"margin\") get(\"margin\")),\n \"breakpoints\" : null,\n \"responsive\" : false,\n \"responsive-amount\" : 3vw\n )\n)",
|
|
8678
8689
|
"scope": "default",
|
|
8679
8690
|
"line": {
|
|
8680
|
-
"start":
|
|
8681
|
-
"end":
|
|
8691
|
+
"start": 129,
|
|
8692
|
+
"end": 139
|
|
8682
8693
|
}
|
|
8683
8694
|
},
|
|
8684
8695
|
"type": "Map",
|
|
@@ -8699,8 +8710,8 @@
|
|
|
8699
8710
|
"name": "set-containers",
|
|
8700
8711
|
"code": "\n $containers: utils.map-merge($containers, $changes, $merge-mode) !global;\n",
|
|
8701
8712
|
"line": {
|
|
8702
|
-
"start":
|
|
8703
|
-
"end":
|
|
8713
|
+
"start": 146,
|
|
8714
|
+
"end": 148
|
|
8704
8715
|
}
|
|
8705
8716
|
}
|
|
8706
8717
|
},
|
|
@@ -8711,8 +8722,8 @@
|
|
|
8711
8722
|
"name": "set-containers",
|
|
8712
8723
|
"code": "\n $containers: utils.map-merge($containers, $changes, $merge-mode) !global;\n",
|
|
8713
8724
|
"line": {
|
|
8714
|
-
"start":
|
|
8715
|
-
"end":
|
|
8725
|
+
"start": 146,
|
|
8726
|
+
"end": 148
|
|
8716
8727
|
}
|
|
8717
8728
|
}
|
|
8718
8729
|
},
|
|
@@ -8723,8 +8734,8 @@
|
|
|
8723
8734
|
"name": "get-container",
|
|
8724
8735
|
"code": "\n $container: null;\n @if ($required) {\n $container: utils.require-map-get($containers, $name, \"Layout [get-container]\");\n } @else {\n $container: map.get($containers, $name);\n }\n\n @if ($container and $breakpoint) {\n $breakpoints: map.get($container, \"breakpoints\");\n @if ($required) {\n @if ($breakpoints) {\n @return utils.require-map-get($breakpoints, $breakpoint, \"[container breakpoint]\");\n } @else {\n @error 'ULU: No container breakpoints for container \"#{ $name }\", requested breakpoint #{ $breakpoint }';\n }\n } @else {\n @if ($breakpoints) {\n @return map.get($breakpoints, $breakpoint);\n } @else {\n @return null;\n }\n }\n }\n\n @return $container;\n",
|
|
8725
8736
|
"line": {
|
|
8726
|
-
"start":
|
|
8727
|
-
"end":
|
|
8737
|
+
"start": 154,
|
|
8738
|
+
"end": 180
|
|
8728
8739
|
}
|
|
8729
8740
|
}
|
|
8730
8741
|
},
|
|
@@ -8735,8 +8746,8 @@
|
|
|
8735
8746
|
"name": "get-container",
|
|
8736
8747
|
"code": "\n $container: null;\n @if ($required) {\n $container: utils.require-map-get($containers, $name, \"Layout [get-container]\");\n } @else {\n $container: map.get($containers, $name);\n }\n\n @if ($container and $breakpoint) {\n $breakpoints: map.get($container, \"breakpoints\");\n @if ($required) {\n @if ($breakpoints) {\n @return utils.require-map-get($breakpoints, $breakpoint, \"[container breakpoint]\");\n } @else {\n @error 'ULU: No container breakpoints for container \"#{ $name }\", requested breakpoint #{ $breakpoint }';\n }\n } @else {\n @if ($breakpoints) {\n @return map.get($breakpoints, $breakpoint);\n } @else {\n @return null;\n }\n }\n }\n\n @return $container;\n",
|
|
8737
8748
|
"line": {
|
|
8738
|
-
"start":
|
|
8739
|
-
"end":
|
|
8749
|
+
"start": 154,
|
|
8750
|
+
"end": 180
|
|
8740
8751
|
}
|
|
8741
8752
|
}
|
|
8742
8753
|
}
|
|
@@ -8749,16 +8760,16 @@
|
|
|
8749
8760
|
"path": "/sass/core/layout/#mixin-set-containers",
|
|
8750
8761
|
"description": "Set layout containers\n- See the $containers variable for example of container properties\n",
|
|
8751
8762
|
"commentRange": {
|
|
8752
|
-
"start":
|
|
8753
|
-
"end":
|
|
8763
|
+
"start": 141,
|
|
8764
|
+
"end": 144
|
|
8754
8765
|
},
|
|
8755
8766
|
"context": {
|
|
8756
8767
|
"type": "mixin",
|
|
8757
8768
|
"name": "set-containers",
|
|
8758
8769
|
"code": "\n $containers: utils.map-merge($containers, $changes, $merge-mode) !global;\n",
|
|
8759
8770
|
"line": {
|
|
8760
|
-
"start":
|
|
8761
|
-
"end":
|
|
8771
|
+
"start": 146,
|
|
8772
|
+
"end": 148
|
|
8762
8773
|
}
|
|
8763
8774
|
},
|
|
8764
8775
|
"parameter": [
|
|
@@ -8803,16 +8814,16 @@
|
|
|
8803
8814
|
"path": "/sass/core/layout/#function-get-container",
|
|
8804
8815
|
"description": "Get a container map\n",
|
|
8805
8816
|
"commentRange": {
|
|
8806
|
-
"start":
|
|
8807
|
-
"end":
|
|
8817
|
+
"start": 150,
|
|
8818
|
+
"end": 152
|
|
8808
8819
|
},
|
|
8809
8820
|
"context": {
|
|
8810
8821
|
"type": "function",
|
|
8811
8822
|
"name": "get-container",
|
|
8812
8823
|
"code": "\n $container: null;\n @if ($required) {\n $container: utils.require-map-get($containers, $name, \"Layout [get-container]\");\n } @else {\n $container: map.get($containers, $name);\n }\n\n @if ($container and $breakpoint) {\n $breakpoints: map.get($container, \"breakpoints\");\n @if ($required) {\n @if ($breakpoints) {\n @return utils.require-map-get($breakpoints, $breakpoint, \"[container breakpoint]\");\n } @else {\n @error 'ULU: No container breakpoints for container \"#{ $name }\", requested breakpoint #{ $breakpoint }';\n }\n } @else {\n @if ($breakpoints) {\n @return map.get($breakpoints, $breakpoint);\n } @else {\n @return null;\n }\n }\n }\n\n @return $container;\n",
|
|
8813
8824
|
"line": {
|
|
8814
|
-
"start":
|
|
8815
|
-
"end":
|
|
8825
|
+
"start": 154,
|
|
8826
|
+
"end": 180
|
|
8816
8827
|
}
|
|
8817
8828
|
},
|
|
8818
8829
|
"parameter": [
|
|
@@ -8876,8 +8887,8 @@
|
|
|
8876
8887
|
"name": "match-container-padding",
|
|
8877
8888
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n #{ $property }: get-container-padding($name, $sides);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n #{ $property }: get-container-padding($name, $sides, $breakpoint);\n }\n }\n }\n",
|
|
8878
8889
|
"line": {
|
|
8879
|
-
"start":
|
|
8880
|
-
"end":
|
|
8890
|
+
"start": 188,
|
|
8891
|
+
"end": 200
|
|
8881
8892
|
}
|
|
8882
8893
|
}
|
|
8883
8894
|
},
|
|
@@ -8888,8 +8899,8 @@
|
|
|
8888
8899
|
"name": "match-container-margin",
|
|
8889
8900
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n $padding: 0;\n @if ($include-padding) {\n $padding: get-container-padding($name, true);\n }\n $max: map.get($container, \"max-width\");\n #{ $property }: max(((100vw - $max) / 2) + $padding, $padding);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n $pad: 0;\n @if ($include-padding) {\n $pad: get-container-padding($name, true, $breakpoint);\n }\n #{ $property }: max(((100vw - $max) / 2) + $pad, $pad);\n }\n }\n }\n",
|
|
8890
8901
|
"line": {
|
|
8891
|
-
"start":
|
|
8892
|
-
"end":
|
|
8902
|
+
"start": 211,
|
|
8903
|
+
"end": 232
|
|
8893
8904
|
}
|
|
8894
8905
|
}
|
|
8895
8906
|
},
|
|
@@ -8900,8 +8911,8 @@
|
|
|
8900
8911
|
"name": "get-container-padding",
|
|
8901
8912
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $padding: map.get($container, \"padding\");\n $is-list: meta.type-of($padding) == \"list\"; // Else number\n @if (not $is-list) {\n @return $padding;\n } @else {\n @return list.nth($padding, utils.when($sides, 2, 1));\n }\n",
|
|
8902
8913
|
"line": {
|
|
8903
|
-
"start":
|
|
8904
|
-
"end":
|
|
8914
|
+
"start": 239,
|
|
8915
|
+
"end": 248
|
|
8905
8916
|
}
|
|
8906
8917
|
}
|
|
8907
8918
|
},
|
|
@@ -8912,8 +8923,8 @@
|
|
|
8912
8923
|
"name": "container-padding",
|
|
8913
8924
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $responsive: map.get($container, \"responsive\");\n $x: get-container-padding-x($name, $specific-breakpoint);\n $y: get-container-padding-y($name, $specific-breakpoint);\n $resp-amount: utils.when(meta.type-of($responsive) == number, $responsive, utils.get(\"responsive-change\"));\n \n @if $responsive {\n @if $sides {\n @include utils.responsive-property(\"padding-left\", $x, $resp-amount);\n @include utils.responsive-property(\"padding-right\", $x, $resp-amount);\n }\n @if $ends {\n @include utils.responsive-property(\"padding-top\", $y, $resp-amount);\n @include utils.responsive-property(\"padding-bottom\", $y, $resp-amount);\n }\n } @else {\n @if $sides {\n padding-left: $x;\n padding-right: $x;\n }\n @if $ends {\n padding-top: $y;\n padding-bottom: $y;\n }\n }\n",
|
|
8914
8925
|
"line": {
|
|
8915
|
-
"start":
|
|
8916
|
-
"end":
|
|
8926
|
+
"start": 255,
|
|
8927
|
+
"end": 281
|
|
8917
8928
|
}
|
|
8918
8929
|
}
|
|
8919
8930
|
},
|
|
@@ -8924,8 +8935,8 @@
|
|
|
8924
8935
|
"name": "container-styles",
|
|
8925
8936
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $breakpoints: map.get($container, \"breakpoints\");\n \n $width: map.get($container, \"width\");\n\n @if ($width == null) {\n $width: 100%;\n }\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: $width;\n max-width: map.get($container, \"max-width\");\n @include container-padding($name, $specific-breakpoint: $specific-breakpoint);\n\n // Recursive print other breakpoints\n @if $breakpoints and not $specific-breakpoint {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n @include container-styles($name, $breakpoint);\n }\n }\n }\n",
|
|
8926
8937
|
"line": {
|
|
8927
|
-
"start":
|
|
8928
|
-
"end":
|
|
8938
|
+
"start": 303,
|
|
8939
|
+
"end": 328
|
|
8929
8940
|
}
|
|
8930
8941
|
}
|
|
8931
8942
|
}
|
|
@@ -8938,16 +8949,16 @@
|
|
|
8938
8949
|
"path": "/sass/core/layout/#mixin-match-container-padding",
|
|
8939
8950
|
"description": "Returns padding to another property including breakpoints\nie. { top: $containers-padding; }\n",
|
|
8940
8951
|
"commentRange": {
|
|
8941
|
-
"start":
|
|
8942
|
-
"end":
|
|
8952
|
+
"start": 182,
|
|
8953
|
+
"end": 186
|
|
8943
8954
|
},
|
|
8944
8955
|
"context": {
|
|
8945
8956
|
"type": "mixin",
|
|
8946
8957
|
"name": "match-container-padding",
|
|
8947
8958
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n #{ $property }: get-container-padding($name, $sides);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n #{ $property }: get-container-padding($name, $sides, $breakpoint);\n }\n }\n }\n",
|
|
8948
8959
|
"line": {
|
|
8949
|
-
"start":
|
|
8950
|
-
"end":
|
|
8960
|
+
"start": 188,
|
|
8961
|
+
"end": 200
|
|
8951
8962
|
}
|
|
8952
8963
|
},
|
|
8953
8964
|
"parameter": [
|
|
@@ -9006,16 +9017,16 @@
|
|
|
9006
9017
|
"path": "/sass/core/layout/#mixin-match-container-margin",
|
|
9007
9018
|
"description": "For a given property for every breakpoint in a given container\ncreates a css calc value that will match the containers side margin\nThe margin is created via empty space when the container hits the max-width\nIf passing include padding it would be the containers\nside (x) + the padding. This accounts for the containers max-width to give an absolute value\n",
|
|
9008
9019
|
"commentRange": {
|
|
9009
|
-
"start":
|
|
9010
|
-
"end":
|
|
9020
|
+
"start": 202,
|
|
9021
|
+
"end": 209
|
|
9011
9022
|
},
|
|
9012
9023
|
"context": {
|
|
9013
9024
|
"type": "mixin",
|
|
9014
9025
|
"name": "match-container-margin",
|
|
9015
9026
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n $padding: 0;\n @if ($include-padding) {\n $padding: get-container-padding($name, true);\n }\n $max: map.get($container, \"max-width\");\n #{ $property }: max(((100vw - $max) / 2) + $padding, $padding);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n $pad: 0;\n @if ($include-padding) {\n $pad: get-container-padding($name, true, $breakpoint);\n }\n #{ $property }: max(((100vw - $max) / 2) + $pad, $pad);\n }\n }\n }\n",
|
|
9016
9027
|
"line": {
|
|
9017
|
-
"start":
|
|
9018
|
-
"end":
|
|
9028
|
+
"start": 211,
|
|
9029
|
+
"end": 232
|
|
9019
9030
|
}
|
|
9020
9031
|
},
|
|
9021
9032
|
"parameter": [
|
|
@@ -9078,16 +9089,16 @@
|
|
|
9078
9089
|
"path": "/sass/core/layout/#function-get-container-padding",
|
|
9079
9090
|
"description": "Get a containers padding value\n",
|
|
9080
9091
|
"commentRange": {
|
|
9081
|
-
"start":
|
|
9082
|
-
"end":
|
|
9092
|
+
"start": 234,
|
|
9093
|
+
"end": 237
|
|
9083
9094
|
},
|
|
9084
9095
|
"context": {
|
|
9085
9096
|
"type": "function",
|
|
9086
9097
|
"name": "get-container-padding",
|
|
9087
9098
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $padding: map.get($container, \"padding\");\n $is-list: meta.type-of($padding) == \"list\"; // Else number\n @if (not $is-list) {\n @return $padding;\n } @else {\n @return list.nth($padding, utils.when($sides, 2, 1));\n }\n",
|
|
9088
9099
|
"line": {
|
|
9089
|
-
"start":
|
|
9090
|
-
"end":
|
|
9100
|
+
"start": 239,
|
|
9101
|
+
"end": 248
|
|
9091
9102
|
}
|
|
9092
9103
|
},
|
|
9093
9104
|
"parameter": [
|
|
@@ -9139,8 +9150,8 @@
|
|
|
9139
9150
|
"name": "match-container-padding",
|
|
9140
9151
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n #{ $property }: get-container-padding($name, $sides);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n #{ $property }: get-container-padding($name, $sides, $breakpoint);\n }\n }\n }\n",
|
|
9141
9152
|
"line": {
|
|
9142
|
-
"start":
|
|
9143
|
-
"end":
|
|
9153
|
+
"start": 188,
|
|
9154
|
+
"end": 200
|
|
9144
9155
|
}
|
|
9145
9156
|
}
|
|
9146
9157
|
},
|
|
@@ -9151,8 +9162,8 @@
|
|
|
9151
9162
|
"name": "match-container-padding",
|
|
9152
9163
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n #{ $property }: get-container-padding($name, $sides);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n #{ $property }: get-container-padding($name, $sides, $breakpoint);\n }\n }\n }\n",
|
|
9153
9164
|
"line": {
|
|
9154
|
-
"start":
|
|
9155
|
-
"end":
|
|
9165
|
+
"start": 188,
|
|
9166
|
+
"end": 200
|
|
9156
9167
|
}
|
|
9157
9168
|
}
|
|
9158
9169
|
},
|
|
@@ -9163,8 +9174,8 @@
|
|
|
9163
9174
|
"name": "match-container-margin",
|
|
9164
9175
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n $padding: 0;\n @if ($include-padding) {\n $padding: get-container-padding($name, true);\n }\n $max: map.get($container, \"max-width\");\n #{ $property }: max(((100vw - $max) / 2) + $padding, $padding);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n $pad: 0;\n @if ($include-padding) {\n $pad: get-container-padding($name, true, $breakpoint);\n }\n #{ $property }: max(((100vw - $max) / 2) + $pad, $pad);\n }\n }\n }\n",
|
|
9165
9176
|
"line": {
|
|
9166
|
-
"start":
|
|
9167
|
-
"end":
|
|
9177
|
+
"start": 211,
|
|
9178
|
+
"end": 232
|
|
9168
9179
|
}
|
|
9169
9180
|
}
|
|
9170
9181
|
},
|
|
@@ -9175,8 +9186,8 @@
|
|
|
9175
9186
|
"name": "match-container-margin",
|
|
9176
9187
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n $padding: 0;\n @if ($include-padding) {\n $padding: get-container-padding($name, true);\n }\n $max: map.get($container, \"max-width\");\n #{ $property }: max(((100vw - $max) / 2) + $padding, $padding);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n $pad: 0;\n @if ($include-padding) {\n $pad: get-container-padding($name, true, $breakpoint);\n }\n #{ $property }: max(((100vw - $max) / 2) + $pad, $pad);\n }\n }\n }\n",
|
|
9177
9188
|
"line": {
|
|
9178
|
-
"start":
|
|
9179
|
-
"end":
|
|
9189
|
+
"start": 211,
|
|
9190
|
+
"end": 232
|
|
9180
9191
|
}
|
|
9181
9192
|
}
|
|
9182
9193
|
},
|
|
@@ -9187,8 +9198,8 @@
|
|
|
9187
9198
|
"name": "get-container-padding-x",
|
|
9188
9199
|
"code": "\n @return get-container-padding($name, true, $specific-breakpoint);\n",
|
|
9189
9200
|
"line": {
|
|
9190
|
-
"start":
|
|
9191
|
-
"end":
|
|
9201
|
+
"start": 287,
|
|
9202
|
+
"end": 289
|
|
9192
9203
|
}
|
|
9193
9204
|
}
|
|
9194
9205
|
},
|
|
@@ -9199,8 +9210,8 @@
|
|
|
9199
9210
|
"name": "get-container-padding-y",
|
|
9200
9211
|
"code": "\n @return get-container-padding($name, false, $specific-breakpoint);\n",
|
|
9201
9212
|
"line": {
|
|
9202
|
-
"start":
|
|
9203
|
-
"end":
|
|
9213
|
+
"start": 295,
|
|
9214
|
+
"end": 297
|
|
9204
9215
|
}
|
|
9205
9216
|
}
|
|
9206
9217
|
}
|
|
@@ -9213,16 +9224,16 @@
|
|
|
9213
9224
|
"path": "/sass/core/layout/#mixin-container-padding",
|
|
9214
9225
|
"description": "Print the containers padding properties\n",
|
|
9215
9226
|
"commentRange": {
|
|
9216
|
-
"start":
|
|
9217
|
-
"end":
|
|
9227
|
+
"start": 250,
|
|
9228
|
+
"end": 253
|
|
9218
9229
|
},
|
|
9219
9230
|
"context": {
|
|
9220
9231
|
"type": "mixin",
|
|
9221
9232
|
"name": "container-padding",
|
|
9222
9233
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $responsive: map.get($container, \"responsive\");\n $x: get-container-padding-x($name, $specific-breakpoint);\n $y: get-container-padding-y($name, $specific-breakpoint);\n $resp-amount: utils.when(meta.type-of($responsive) == number, $responsive, utils.get(\"responsive-change\"));\n \n @if $responsive {\n @if $sides {\n @include utils.responsive-property(\"padding-left\", $x, $resp-amount);\n @include utils.responsive-property(\"padding-right\", $x, $resp-amount);\n }\n @if $ends {\n @include utils.responsive-property(\"padding-top\", $y, $resp-amount);\n @include utils.responsive-property(\"padding-bottom\", $y, $resp-amount);\n }\n } @else {\n @if $sides {\n padding-left: $x;\n padding-right: $x;\n }\n @if $ends {\n padding-top: $y;\n padding-bottom: $y;\n }\n }\n",
|
|
9223
9234
|
"line": {
|
|
9224
|
-
"start":
|
|
9225
|
-
"end":
|
|
9235
|
+
"start": 255,
|
|
9236
|
+
"end": 281
|
|
9226
9237
|
}
|
|
9227
9238
|
},
|
|
9228
9239
|
"parameter": [
|
|
@@ -9286,8 +9297,8 @@
|
|
|
9286
9297
|
"name": "container-styles",
|
|
9287
9298
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $breakpoints: map.get($container, \"breakpoints\");\n \n $width: map.get($container, \"width\");\n\n @if ($width == null) {\n $width: 100%;\n }\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: $width;\n max-width: map.get($container, \"max-width\");\n @include container-padding($name, $specific-breakpoint: $specific-breakpoint);\n\n // Recursive print other breakpoints\n @if $breakpoints and not $specific-breakpoint {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n @include container-styles($name, $breakpoint);\n }\n }\n }\n",
|
|
9288
9299
|
"line": {
|
|
9289
|
-
"start":
|
|
9290
|
-
"end":
|
|
9300
|
+
"start": 303,
|
|
9301
|
+
"end": 328
|
|
9291
9302
|
}
|
|
9292
9303
|
}
|
|
9293
9304
|
}
|
|
@@ -9300,16 +9311,16 @@
|
|
|
9300
9311
|
"path": "/sass/core/layout/#function-get-container-padding-x",
|
|
9301
9312
|
"description": "Get containers padding X value (side)\n",
|
|
9302
9313
|
"commentRange": {
|
|
9303
|
-
"start":
|
|
9304
|
-
"end":
|
|
9314
|
+
"start": 283,
|
|
9315
|
+
"end": 285
|
|
9305
9316
|
},
|
|
9306
9317
|
"context": {
|
|
9307
9318
|
"type": "function",
|
|
9308
9319
|
"name": "get-container-padding-x",
|
|
9309
9320
|
"code": "\n @return get-container-padding($name, true, $specific-breakpoint);\n",
|
|
9310
9321
|
"line": {
|
|
9311
|
-
"start":
|
|
9312
|
-
"end":
|
|
9322
|
+
"start": 287,
|
|
9323
|
+
"end": 289
|
|
9313
9324
|
}
|
|
9314
9325
|
},
|
|
9315
9326
|
"parameter": [
|
|
@@ -9346,8 +9357,8 @@
|
|
|
9346
9357
|
"name": "container-padding",
|
|
9347
9358
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $responsive: map.get($container, \"responsive\");\n $x: get-container-padding-x($name, $specific-breakpoint);\n $y: get-container-padding-y($name, $specific-breakpoint);\n $resp-amount: utils.when(meta.type-of($responsive) == number, $responsive, utils.get(\"responsive-change\"));\n \n @if $responsive {\n @if $sides {\n @include utils.responsive-property(\"padding-left\", $x, $resp-amount);\n @include utils.responsive-property(\"padding-right\", $x, $resp-amount);\n }\n @if $ends {\n @include utils.responsive-property(\"padding-top\", $y, $resp-amount);\n @include utils.responsive-property(\"padding-bottom\", $y, $resp-amount);\n }\n } @else {\n @if $sides {\n padding-left: $x;\n padding-right: $x;\n }\n @if $ends {\n padding-top: $y;\n padding-bottom: $y;\n }\n }\n",
|
|
9348
9359
|
"line": {
|
|
9349
|
-
"start":
|
|
9350
|
-
"end":
|
|
9360
|
+
"start": 255,
|
|
9361
|
+
"end": 281
|
|
9351
9362
|
}
|
|
9352
9363
|
}
|
|
9353
9364
|
}
|
|
@@ -9360,16 +9371,16 @@
|
|
|
9360
9371
|
"path": "/sass/core/layout/#function-get-container-padding-y",
|
|
9361
9372
|
"description": "Get containers padding Y value (ends)\n",
|
|
9362
9373
|
"commentRange": {
|
|
9363
|
-
"start":
|
|
9364
|
-
"end":
|
|
9374
|
+
"start": 291,
|
|
9375
|
+
"end": 293
|
|
9365
9376
|
},
|
|
9366
9377
|
"context": {
|
|
9367
9378
|
"type": "function",
|
|
9368
9379
|
"name": "get-container-padding-y",
|
|
9369
9380
|
"code": "\n @return get-container-padding($name, false, $specific-breakpoint);\n",
|
|
9370
9381
|
"line": {
|
|
9371
|
-
"start":
|
|
9372
|
-
"end":
|
|
9382
|
+
"start": 295,
|
|
9383
|
+
"end": 297
|
|
9373
9384
|
}
|
|
9374
9385
|
},
|
|
9375
9386
|
"parameter": [
|
|
@@ -9406,8 +9417,8 @@
|
|
|
9406
9417
|
"name": "container-padding",
|
|
9407
9418
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $responsive: map.get($container, \"responsive\");\n $x: get-container-padding-x($name, $specific-breakpoint);\n $y: get-container-padding-y($name, $specific-breakpoint);\n $resp-amount: utils.when(meta.type-of($responsive) == number, $responsive, utils.get(\"responsive-change\"));\n \n @if $responsive {\n @if $sides {\n @include utils.responsive-property(\"padding-left\", $x, $resp-amount);\n @include utils.responsive-property(\"padding-right\", $x, $resp-amount);\n }\n @if $ends {\n @include utils.responsive-property(\"padding-top\", $y, $resp-amount);\n @include utils.responsive-property(\"padding-bottom\", $y, $resp-amount);\n }\n } @else {\n @if $sides {\n padding-left: $x;\n padding-right: $x;\n }\n @if $ends {\n padding-top: $y;\n padding-bottom: $y;\n }\n }\n",
|
|
9408
9419
|
"line": {
|
|
9409
|
-
"start":
|
|
9410
|
-
"end":
|
|
9420
|
+
"start": 255,
|
|
9421
|
+
"end": 281
|
|
9411
9422
|
}
|
|
9412
9423
|
}
|
|
9413
9424
|
}
|
|
@@ -9420,16 +9431,16 @@
|
|
|
9420
9431
|
"path": "/sass/core/layout/#mixin-container-styles",
|
|
9421
9432
|
"description": "Print all container styles for a given container\n",
|
|
9422
9433
|
"commentRange": {
|
|
9423
|
-
"start":
|
|
9424
|
-
"end":
|
|
9434
|
+
"start": 299,
|
|
9435
|
+
"end": 301
|
|
9425
9436
|
},
|
|
9426
9437
|
"context": {
|
|
9427
9438
|
"type": "mixin",
|
|
9428
9439
|
"name": "container-styles",
|
|
9429
9440
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $breakpoints: map.get($container, \"breakpoints\");\n \n $width: map.get($container, \"width\");\n\n @if ($width == null) {\n $width: 100%;\n }\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: $width;\n max-width: map.get($container, \"max-width\");\n @include container-padding($name, $specific-breakpoint: $specific-breakpoint);\n\n // Recursive print other breakpoints\n @if $breakpoints and not $specific-breakpoint {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n @include container-styles($name, $breakpoint);\n }\n }\n }\n",
|
|
9430
9441
|
"line": {
|
|
9431
|
-
"start":
|
|
9432
|
-
"end":
|
|
9442
|
+
"start": 303,
|
|
9443
|
+
"end": 328
|
|
9433
9444
|
}
|
|
9434
9445
|
},
|
|
9435
9446
|
"parameter": [
|
|
@@ -9486,16 +9497,16 @@
|
|
|
9486
9497
|
"path": "/sass/core/layout/#mixin-clearfix",
|
|
9487
9498
|
"description": "Prints clearfix styles\n",
|
|
9488
9499
|
"commentRange": {
|
|
9489
|
-
"start":
|
|
9490
|
-
"end":
|
|
9500
|
+
"start": 330,
|
|
9501
|
+
"end": 330
|
|
9491
9502
|
},
|
|
9492
9503
|
"context": {
|
|
9493
9504
|
"type": "mixin",
|
|
9494
9505
|
"name": "clearfix",
|
|
9495
9506
|
"code": "\n &::before,\n &::after {\n content: \"\";\n display: table;\n flex-basis: 0; // Flexbox, clear fix for pseudo elements in Safari\n order: 1;\n }\n &::after { \n clear: both; \n }\n",
|
|
9496
9507
|
"line": {
|
|
9497
|
-
"start":
|
|
9498
|
-
"end":
|
|
9508
|
+
"start": 332,
|
|
9509
|
+
"end": 343
|
|
9499
9510
|
}
|
|
9500
9511
|
},
|
|
9501
9512
|
"group": [
|
|
@@ -9514,16 +9525,16 @@
|
|
|
9514
9525
|
"path": "/sass/core/layout/#mixin-remove-scrollbar",
|
|
9515
9526
|
"description": "Removes scrollbar with CSS\n",
|
|
9516
9527
|
"commentRange": {
|
|
9517
|
-
"start":
|
|
9518
|
-
"end":
|
|
9528
|
+
"start": 345,
|
|
9529
|
+
"end": 345
|
|
9519
9530
|
},
|
|
9520
9531
|
"context": {
|
|
9521
9532
|
"type": "mixin",
|
|
9522
9533
|
"name": "remove-scrollbar",
|
|
9523
9534
|
"code": "\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n &::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n",
|
|
9524
9535
|
"line": {
|
|
9525
|
-
"start":
|
|
9526
|
-
"end":
|
|
9536
|
+
"start": 346,
|
|
9537
|
+
"end": 352
|
|
9527
9538
|
}
|
|
9528
9539
|
},
|
|
9529
9540
|
"group": [
|
|
@@ -9542,16 +9553,16 @@
|
|
|
9542
9553
|
"path": "/sass/core/layout/#mixin-absolute-fill",
|
|
9543
9554
|
"description": "Layout utility for absolute (zero on all sides)\n- Probably helpful for gzip if we use this when these exact styles are needed\n so they are identical for compression\n",
|
|
9544
9555
|
"commentRange": {
|
|
9545
|
-
"start":
|
|
9546
|
-
"end":
|
|
9556
|
+
"start": 354,
|
|
9557
|
+
"end": 357
|
|
9547
9558
|
},
|
|
9548
9559
|
"context": {
|
|
9549
9560
|
"type": "mixin",
|
|
9550
9561
|
"name": "absolute-fill",
|
|
9551
9562
|
"code": "\n position: absolute;\n top: 0;\n left: 0;\n @if not $set-size {\n right: 0;\n bottom: 0;\n } @else {\n width: 100%;\n height: 100%;\n }\n",
|
|
9552
9563
|
"line": {
|
|
9553
|
-
"start":
|
|
9554
|
-
"end":
|
|
9564
|
+
"start": 358,
|
|
9565
|
+
"end": 369
|
|
9555
9566
|
}
|
|
9556
9567
|
},
|
|
9557
9568
|
"parameter": [
|
|
@@ -14583,8 +14594,8 @@
|
|
|
14583
14594
|
"name": "set",
|
|
14584
14595
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14585
14596
|
"line": {
|
|
14586
|
-
"start":
|
|
14587
|
-
"end":
|
|
14597
|
+
"start": 56,
|
|
14598
|
+
"end": 58
|
|
14588
14599
|
}
|
|
14589
14600
|
}
|
|
14590
14601
|
},
|
|
@@ -14595,8 +14606,8 @@
|
|
|
14595
14606
|
"name": "set",
|
|
14596
14607
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14597
14608
|
"line": {
|
|
14598
|
-
"start":
|
|
14599
|
-
"end":
|
|
14609
|
+
"start": 56,
|
|
14610
|
+
"end": 58
|
|
14600
14611
|
}
|
|
14601
14612
|
}
|
|
14602
14613
|
},
|
|
@@ -14607,8 +14618,8 @@
|
|
|
14607
14618
|
"name": "get",
|
|
14608
14619
|
"code": "\n $value: utils.require-map-get($config, $name, \"graphic-text-group [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
14609
14620
|
"line": {
|
|
14610
|
-
"start":
|
|
14611
|
-
"end":
|
|
14621
|
+
"start": 65,
|
|
14622
|
+
"end": 68
|
|
14612
14623
|
}
|
|
14613
14624
|
}
|
|
14614
14625
|
},
|
|
@@ -14835,8 +14846,8 @@
|
|
|
14835
14846
|
"name": "set",
|
|
14836
14847
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14837
14848
|
"line": {
|
|
14838
|
-
"start":
|
|
14839
|
-
"end":
|
|
14849
|
+
"start": 156,
|
|
14850
|
+
"end": 158
|
|
14840
14851
|
}
|
|
14841
14852
|
}
|
|
14842
14853
|
},
|
|
@@ -14847,8 +14858,8 @@
|
|
|
14847
14858
|
"name": "set",
|
|
14848
14859
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
14849
14860
|
"line": {
|
|
14850
|
-
"start":
|
|
14851
|
-
"end":
|
|
14861
|
+
"start": 156,
|
|
14862
|
+
"end": 158
|
|
14852
14863
|
}
|
|
14853
14864
|
}
|
|
14854
14865
|
},
|
|
@@ -14859,8 +14870,8 @@
|
|
|
14859
14870
|
"name": "get",
|
|
14860
14871
|
"code": "\n $value: utils.require-map-get($config, $name, \"menu-stack [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
14861
14872
|
"line": {
|
|
14862
|
-
"start":
|
|
14863
|
-
"end":
|
|
14873
|
+
"start": 165,
|
|
14874
|
+
"end": 168
|
|
14864
14875
|
}
|
|
14865
14876
|
}
|
|
14866
14877
|
},
|
|
@@ -23189,10 +23200,10 @@
|
|
|
23189
23200
|
"context": {
|
|
23190
23201
|
"type": "mixin",
|
|
23191
23202
|
"name": "styles",
|
|
23192
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23203
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23193
23204
|
"line": {
|
|
23194
|
-
"start":
|
|
23195
|
-
"end":
|
|
23205
|
+
"start": 75,
|
|
23206
|
+
"end": 200
|
|
23196
23207
|
}
|
|
23197
23208
|
}
|
|
23198
23209
|
},
|
|
@@ -23201,10 +23212,10 @@
|
|
|
23201
23212
|
"context": {
|
|
23202
23213
|
"type": "mixin",
|
|
23203
23214
|
"name": "styles",
|
|
23204
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23215
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23205
23216
|
"line": {
|
|
23206
|
-
"start":
|
|
23207
|
-
"end":
|
|
23217
|
+
"start": 75,
|
|
23218
|
+
"end": 200
|
|
23208
23219
|
}
|
|
23209
23220
|
}
|
|
23210
23221
|
},
|
|
@@ -23213,10 +23224,10 @@
|
|
|
23213
23224
|
"context": {
|
|
23214
23225
|
"type": "mixin",
|
|
23215
23226
|
"name": "styles",
|
|
23216
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23227
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23217
23228
|
"line": {
|
|
23218
|
-
"start":
|
|
23219
|
-
"end":
|
|
23229
|
+
"start": 75,
|
|
23230
|
+
"end": 200
|
|
23220
23231
|
}
|
|
23221
23232
|
}
|
|
23222
23233
|
},
|
|
@@ -23225,10 +23236,10 @@
|
|
|
23225
23236
|
"context": {
|
|
23226
23237
|
"type": "mixin",
|
|
23227
23238
|
"name": "styles",
|
|
23228
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23239
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23229
23240
|
"line": {
|
|
23230
|
-
"start":
|
|
23231
|
-
"end":
|
|
23241
|
+
"start": 75,
|
|
23242
|
+
"end": 200
|
|
23232
23243
|
}
|
|
23233
23244
|
}
|
|
23234
23245
|
},
|
|
@@ -23237,10 +23248,10 @@
|
|
|
23237
23248
|
"context": {
|
|
23238
23249
|
"type": "mixin",
|
|
23239
23250
|
"name": "styles",
|
|
23240
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23251
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23241
23252
|
"line": {
|
|
23242
|
-
"start":
|
|
23243
|
-
"end":
|
|
23253
|
+
"start": 75,
|
|
23254
|
+
"end": 200
|
|
23244
23255
|
}
|
|
23245
23256
|
}
|
|
23246
23257
|
},
|
|
@@ -23249,10 +23260,10 @@
|
|
|
23249
23260
|
"context": {
|
|
23250
23261
|
"type": "mixin",
|
|
23251
23262
|
"name": "styles",
|
|
23252
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23263
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23253
23264
|
"line": {
|
|
23254
|
-
"start":
|
|
23255
|
-
"end":
|
|
23265
|
+
"start": 75,
|
|
23266
|
+
"end": 200
|
|
23256
23267
|
}
|
|
23257
23268
|
}
|
|
23258
23269
|
},
|
|
@@ -23261,10 +23272,10 @@
|
|
|
23261
23272
|
"context": {
|
|
23262
23273
|
"type": "mixin",
|
|
23263
23274
|
"name": "styles",
|
|
23264
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23275
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23265
23276
|
"line": {
|
|
23266
|
-
"start":
|
|
23267
|
-
"end":
|
|
23277
|
+
"start": 75,
|
|
23278
|
+
"end": 200
|
|
23268
23279
|
}
|
|
23269
23280
|
}
|
|
23270
23281
|
},
|
|
@@ -23273,10 +23284,10 @@
|
|
|
23273
23284
|
"context": {
|
|
23274
23285
|
"type": "mixin",
|
|
23275
23286
|
"name": "styles",
|
|
23276
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23287
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23277
23288
|
"line": {
|
|
23278
|
-
"start":
|
|
23279
|
-
"end":
|
|
23289
|
+
"start": 75,
|
|
23290
|
+
"end": 200
|
|
23280
23291
|
}
|
|
23281
23292
|
}
|
|
23282
23293
|
},
|
|
@@ -23285,10 +23296,10 @@
|
|
|
23285
23296
|
"context": {
|
|
23286
23297
|
"type": "mixin",
|
|
23287
23298
|
"name": "styles",
|
|
23288
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23299
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23289
23300
|
"line": {
|
|
23290
|
-
"start":
|
|
23291
|
-
"end":
|
|
23301
|
+
"start": 75,
|
|
23302
|
+
"end": 200
|
|
23292
23303
|
}
|
|
23293
23304
|
}
|
|
23294
23305
|
},
|
|
@@ -23297,10 +23308,10 @@
|
|
|
23297
23308
|
"context": {
|
|
23298
23309
|
"type": "mixin",
|
|
23299
23310
|
"name": "styles",
|
|
23300
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23311
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23301
23312
|
"line": {
|
|
23302
|
-
"start":
|
|
23303
|
-
"end":
|
|
23313
|
+
"start": 75,
|
|
23314
|
+
"end": 200
|
|
23304
23315
|
}
|
|
23305
23316
|
}
|
|
23306
23317
|
},
|
|
@@ -23309,10 +23320,10 @@
|
|
|
23309
23320
|
"context": {
|
|
23310
23321
|
"type": "mixin",
|
|
23311
23322
|
"name": "styles",
|
|
23312
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23323
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23313
23324
|
"line": {
|
|
23314
|
-
"start":
|
|
23315
|
-
"end":
|
|
23325
|
+
"start": 75,
|
|
23326
|
+
"end": 200
|
|
23316
23327
|
}
|
|
23317
23328
|
}
|
|
23318
23329
|
},
|
|
@@ -23321,10 +23332,22 @@
|
|
|
23321
23332
|
"context": {
|
|
23322
23333
|
"type": "mixin",
|
|
23323
23334
|
"name": "styles",
|
|
23324
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
23335
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23325
23336
|
"line": {
|
|
23326
|
-
"start":
|
|
23327
|
-
"end":
|
|
23337
|
+
"start": 75,
|
|
23338
|
+
"end": 200
|
|
23339
|
+
}
|
|
23340
|
+
}
|
|
23341
|
+
},
|
|
23342
|
+
{
|
|
23343
|
+
"description": "Prints component styles\n",
|
|
23344
|
+
"context": {
|
|
23345
|
+
"type": "mixin",
|
|
23346
|
+
"name": "styles",
|
|
23347
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
23348
|
+
"line": {
|
|
23349
|
+
"start": 75,
|
|
23350
|
+
"end": 200
|
|
23328
23351
|
}
|
|
23329
23352
|
}
|
|
23330
23353
|
},
|
|
@@ -23983,8 +24006,8 @@
|
|
|
23983
24006
|
"name": "styles",
|
|
23984
24007
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
23985
24008
|
"line": {
|
|
23986
|
-
"start":
|
|
23987
|
-
"end":
|
|
24009
|
+
"start": 181,
|
|
24010
|
+
"end": 438
|
|
23988
24011
|
}
|
|
23989
24012
|
}
|
|
23990
24013
|
},
|
|
@@ -23995,8 +24018,8 @@
|
|
|
23995
24018
|
"name": "styles",
|
|
23996
24019
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
23997
24020
|
"line": {
|
|
23998
|
-
"start":
|
|
23999
|
-
"end":
|
|
24021
|
+
"start": 181,
|
|
24022
|
+
"end": 438
|
|
24000
24023
|
}
|
|
24001
24024
|
}
|
|
24002
24025
|
},
|
|
@@ -24007,8 +24030,8 @@
|
|
|
24007
24030
|
"name": "styles",
|
|
24008
24031
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24009
24032
|
"line": {
|
|
24010
|
-
"start":
|
|
24011
|
-
"end":
|
|
24033
|
+
"start": 181,
|
|
24034
|
+
"end": 438
|
|
24012
24035
|
}
|
|
24013
24036
|
}
|
|
24014
24037
|
},
|
|
@@ -24019,8 +24042,8 @@
|
|
|
24019
24042
|
"name": "styles",
|
|
24020
24043
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24021
24044
|
"line": {
|
|
24022
|
-
"start":
|
|
24023
|
-
"end":
|
|
24045
|
+
"start": 181,
|
|
24046
|
+
"end": 438
|
|
24024
24047
|
}
|
|
24025
24048
|
}
|
|
24026
24049
|
},
|
|
@@ -24031,8 +24054,8 @@
|
|
|
24031
24054
|
"name": "styles",
|
|
24032
24055
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24033
24056
|
"line": {
|
|
24034
|
-
"start":
|
|
24035
|
-
"end":
|
|
24057
|
+
"start": 181,
|
|
24058
|
+
"end": 438
|
|
24036
24059
|
}
|
|
24037
24060
|
}
|
|
24038
24061
|
},
|
|
@@ -24043,8 +24066,8 @@
|
|
|
24043
24066
|
"name": "styles",
|
|
24044
24067
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24045
24068
|
"line": {
|
|
24046
|
-
"start":
|
|
24047
|
-
"end":
|
|
24069
|
+
"start": 181,
|
|
24070
|
+
"end": 438
|
|
24048
24071
|
}
|
|
24049
24072
|
}
|
|
24050
24073
|
},
|
|
@@ -24055,8 +24078,8 @@
|
|
|
24055
24078
|
"name": "styles",
|
|
24056
24079
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24057
24080
|
"line": {
|
|
24058
|
-
"start":
|
|
24059
|
-
"end":
|
|
24081
|
+
"start": 181,
|
|
24082
|
+
"end": 438
|
|
24060
24083
|
}
|
|
24061
24084
|
}
|
|
24062
24085
|
},
|
|
@@ -24067,8 +24090,8 @@
|
|
|
24067
24090
|
"name": "styles",
|
|
24068
24091
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24069
24092
|
"line": {
|
|
24070
|
-
"start":
|
|
24071
|
-
"end":
|
|
24093
|
+
"start": 181,
|
|
24094
|
+
"end": 438
|
|
24072
24095
|
}
|
|
24073
24096
|
}
|
|
24074
24097
|
},
|
|
@@ -24079,8 +24102,8 @@
|
|
|
24079
24102
|
"name": "styles",
|
|
24080
24103
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24081
24104
|
"line": {
|
|
24082
|
-
"start":
|
|
24083
|
-
"end":
|
|
24105
|
+
"start": 181,
|
|
24106
|
+
"end": 438
|
|
24084
24107
|
}
|
|
24085
24108
|
}
|
|
24086
24109
|
},
|
|
@@ -24091,8 +24114,8 @@
|
|
|
24091
24114
|
"name": "styles",
|
|
24092
24115
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24093
24116
|
"line": {
|
|
24094
|
-
"start":
|
|
24095
|
-
"end":
|
|
24117
|
+
"start": 181,
|
|
24118
|
+
"end": 438
|
|
24096
24119
|
}
|
|
24097
24120
|
}
|
|
24098
24121
|
},
|
|
@@ -24103,8 +24126,8 @@
|
|
|
24103
24126
|
"name": "styles",
|
|
24104
24127
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24105
24128
|
"line": {
|
|
24106
|
-
"start":
|
|
24107
|
-
"end":
|
|
24129
|
+
"start": 181,
|
|
24130
|
+
"end": 438
|
|
24108
24131
|
}
|
|
24109
24132
|
}
|
|
24110
24133
|
},
|
|
@@ -24115,8 +24138,8 @@
|
|
|
24115
24138
|
"name": "styles",
|
|
24116
24139
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24117
24140
|
"line": {
|
|
24118
|
-
"start":
|
|
24119
|
-
"end":
|
|
24141
|
+
"start": 181,
|
|
24142
|
+
"end": 438
|
|
24120
24143
|
}
|
|
24121
24144
|
}
|
|
24122
24145
|
},
|
|
@@ -24127,8 +24150,8 @@
|
|
|
24127
24150
|
"name": "styles",
|
|
24128
24151
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24129
24152
|
"line": {
|
|
24130
|
-
"start":
|
|
24131
|
-
"end":
|
|
24153
|
+
"start": 181,
|
|
24154
|
+
"end": 438
|
|
24132
24155
|
}
|
|
24133
24156
|
}
|
|
24134
24157
|
},
|
|
@@ -24139,8 +24162,8 @@
|
|
|
24139
24162
|
"name": "styles",
|
|
24140
24163
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24141
24164
|
"line": {
|
|
24142
|
-
"start":
|
|
24143
|
-
"end":
|
|
24165
|
+
"start": 181,
|
|
24166
|
+
"end": 438
|
|
24144
24167
|
}
|
|
24145
24168
|
}
|
|
24146
24169
|
},
|
|
@@ -24151,8 +24174,8 @@
|
|
|
24151
24174
|
"name": "styles",
|
|
24152
24175
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24153
24176
|
"line": {
|
|
24154
|
-
"start":
|
|
24155
|
-
"end":
|
|
24177
|
+
"start": 181,
|
|
24178
|
+
"end": 438
|
|
24156
24179
|
}
|
|
24157
24180
|
}
|
|
24158
24181
|
},
|
|
@@ -24163,8 +24186,8 @@
|
|
|
24163
24186
|
"name": "styles",
|
|
24164
24187
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24165
24188
|
"line": {
|
|
24166
|
-
"start":
|
|
24167
|
-
"end":
|
|
24189
|
+
"start": 181,
|
|
24190
|
+
"end": 438
|
|
24168
24191
|
}
|
|
24169
24192
|
}
|
|
24170
24193
|
},
|
|
@@ -24175,8 +24198,8 @@
|
|
|
24175
24198
|
"name": "styles",
|
|
24176
24199
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24177
24200
|
"line": {
|
|
24178
|
-
"start":
|
|
24179
|
-
"end":
|
|
24201
|
+
"start": 181,
|
|
24202
|
+
"end": 438
|
|
24180
24203
|
}
|
|
24181
24204
|
}
|
|
24182
24205
|
},
|
|
@@ -24187,8 +24210,8 @@
|
|
|
24187
24210
|
"name": "styles",
|
|
24188
24211
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24189
24212
|
"line": {
|
|
24190
|
-
"start":
|
|
24191
|
-
"end":
|
|
24213
|
+
"start": 181,
|
|
24214
|
+
"end": 438
|
|
24192
24215
|
}
|
|
24193
24216
|
}
|
|
24194
24217
|
},
|
|
@@ -24199,8 +24222,8 @@
|
|
|
24199
24222
|
"name": "styles",
|
|
24200
24223
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24201
24224
|
"line": {
|
|
24202
|
-
"start":
|
|
24203
|
-
"end":
|
|
24225
|
+
"start": 181,
|
|
24226
|
+
"end": 438
|
|
24204
24227
|
}
|
|
24205
24228
|
}
|
|
24206
24229
|
},
|
|
@@ -24211,8 +24234,8 @@
|
|
|
24211
24234
|
"name": "styles",
|
|
24212
24235
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24213
24236
|
"line": {
|
|
24214
|
-
"start":
|
|
24215
|
-
"end":
|
|
24237
|
+
"start": 181,
|
|
24238
|
+
"end": 438
|
|
24216
24239
|
}
|
|
24217
24240
|
}
|
|
24218
24241
|
},
|
|
@@ -24223,8 +24246,8 @@
|
|
|
24223
24246
|
"name": "styles",
|
|
24224
24247
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24225
24248
|
"line": {
|
|
24226
|
-
"start":
|
|
24227
|
-
"end":
|
|
24249
|
+
"start": 181,
|
|
24250
|
+
"end": 438
|
|
24228
24251
|
}
|
|
24229
24252
|
}
|
|
24230
24253
|
},
|
|
@@ -24235,8 +24258,8 @@
|
|
|
24235
24258
|
"name": "styles",
|
|
24236
24259
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24237
24260
|
"line": {
|
|
24238
|
-
"start":
|
|
24239
|
-
"end":
|
|
24261
|
+
"start": 181,
|
|
24262
|
+
"end": 438
|
|
24240
24263
|
}
|
|
24241
24264
|
}
|
|
24242
24265
|
},
|
|
@@ -24247,8 +24270,8 @@
|
|
|
24247
24270
|
"name": "styles",
|
|
24248
24271
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24249
24272
|
"line": {
|
|
24250
|
-
"start":
|
|
24251
|
-
"end":
|
|
24273
|
+
"start": 181,
|
|
24274
|
+
"end": 438
|
|
24252
24275
|
}
|
|
24253
24276
|
}
|
|
24254
24277
|
},
|
|
@@ -24259,8 +24282,8 @@
|
|
|
24259
24282
|
"name": "styles",
|
|
24260
24283
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24261
24284
|
"line": {
|
|
24262
|
-
"start":
|
|
24263
|
-
"end":
|
|
24285
|
+
"start": 181,
|
|
24286
|
+
"end": 438
|
|
24264
24287
|
}
|
|
24265
24288
|
}
|
|
24266
24289
|
},
|
|
@@ -24271,8 +24294,8 @@
|
|
|
24271
24294
|
"name": "styles",
|
|
24272
24295
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24273
24296
|
"line": {
|
|
24274
|
-
"start":
|
|
24275
|
-
"end":
|
|
24297
|
+
"start": 181,
|
|
24298
|
+
"end": 438
|
|
24276
24299
|
}
|
|
24277
24300
|
}
|
|
24278
24301
|
},
|
|
@@ -24283,8 +24306,8 @@
|
|
|
24283
24306
|
"name": "styles",
|
|
24284
24307
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24285
24308
|
"line": {
|
|
24286
|
-
"start":
|
|
24287
|
-
"end":
|
|
24309
|
+
"start": 181,
|
|
24310
|
+
"end": 438
|
|
24288
24311
|
}
|
|
24289
24312
|
}
|
|
24290
24313
|
},
|
|
@@ -24295,8 +24318,8 @@
|
|
|
24295
24318
|
"name": "styles",
|
|
24296
24319
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24297
24320
|
"line": {
|
|
24298
|
-
"start":
|
|
24299
|
-
"end":
|
|
24321
|
+
"start": 181,
|
|
24322
|
+
"end": 438
|
|
24300
24323
|
}
|
|
24301
24324
|
}
|
|
24302
24325
|
},
|
|
@@ -24307,8 +24330,8 @@
|
|
|
24307
24330
|
"name": "styles",
|
|
24308
24331
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24309
24332
|
"line": {
|
|
24310
|
-
"start":
|
|
24311
|
-
"end":
|
|
24333
|
+
"start": 181,
|
|
24334
|
+
"end": 438
|
|
24312
24335
|
}
|
|
24313
24336
|
}
|
|
24314
24337
|
},
|
|
@@ -24319,8 +24342,8 @@
|
|
|
24319
24342
|
"name": "styles",
|
|
24320
24343
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24321
24344
|
"line": {
|
|
24322
|
-
"start":
|
|
24323
|
-
"end":
|
|
24345
|
+
"start": 181,
|
|
24346
|
+
"end": 438
|
|
24324
24347
|
}
|
|
24325
24348
|
}
|
|
24326
24349
|
},
|
|
@@ -24331,8 +24354,8 @@
|
|
|
24331
24354
|
"name": "styles",
|
|
24332
24355
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24333
24356
|
"line": {
|
|
24334
|
-
"start":
|
|
24335
|
-
"end":
|
|
24357
|
+
"start": 181,
|
|
24358
|
+
"end": 438
|
|
24336
24359
|
}
|
|
24337
24360
|
}
|
|
24338
24361
|
},
|
|
@@ -24343,8 +24366,8 @@
|
|
|
24343
24366
|
"name": "styles",
|
|
24344
24367
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24345
24368
|
"line": {
|
|
24346
|
-
"start":
|
|
24347
|
-
"end":
|
|
24369
|
+
"start": 181,
|
|
24370
|
+
"end": 438
|
|
24348
24371
|
}
|
|
24349
24372
|
}
|
|
24350
24373
|
},
|
|
@@ -24355,8 +24378,8 @@
|
|
|
24355
24378
|
"name": "styles",
|
|
24356
24379
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24357
24380
|
"line": {
|
|
24358
|
-
"start":
|
|
24359
|
-
"end":
|
|
24381
|
+
"start": 181,
|
|
24382
|
+
"end": 438
|
|
24360
24383
|
}
|
|
24361
24384
|
}
|
|
24362
24385
|
},
|
|
@@ -24367,8 +24390,8 @@
|
|
|
24367
24390
|
"name": "styles",
|
|
24368
24391
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24369
24392
|
"line": {
|
|
24370
|
-
"start":
|
|
24371
|
-
"end":
|
|
24393
|
+
"start": 181,
|
|
24394
|
+
"end": 438
|
|
24372
24395
|
}
|
|
24373
24396
|
}
|
|
24374
24397
|
},
|
|
@@ -24379,8 +24402,8 @@
|
|
|
24379
24402
|
"name": "styles",
|
|
24380
24403
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24381
24404
|
"line": {
|
|
24382
|
-
"start":
|
|
24383
|
-
"end":
|
|
24405
|
+
"start": 181,
|
|
24406
|
+
"end": 438
|
|
24384
24407
|
}
|
|
24385
24408
|
}
|
|
24386
24409
|
},
|
|
@@ -24391,8 +24414,8 @@
|
|
|
24391
24414
|
"name": "styles",
|
|
24392
24415
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24393
24416
|
"line": {
|
|
24394
|
-
"start":
|
|
24395
|
-
"end":
|
|
24417
|
+
"start": 181,
|
|
24418
|
+
"end": 438
|
|
24396
24419
|
}
|
|
24397
24420
|
}
|
|
24398
24421
|
},
|
|
@@ -24403,8 +24426,8 @@
|
|
|
24403
24426
|
"name": "styles",
|
|
24404
24427
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24405
24428
|
"line": {
|
|
24406
|
-
"start":
|
|
24407
|
-
"end":
|
|
24429
|
+
"start": 181,
|
|
24430
|
+
"end": 438
|
|
24408
24431
|
}
|
|
24409
24432
|
}
|
|
24410
24433
|
},
|
|
@@ -24415,8 +24438,8 @@
|
|
|
24415
24438
|
"name": "styles",
|
|
24416
24439
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24417
24440
|
"line": {
|
|
24418
|
-
"start":
|
|
24419
|
-
"end":
|
|
24441
|
+
"start": 181,
|
|
24442
|
+
"end": 438
|
|
24420
24443
|
}
|
|
24421
24444
|
}
|
|
24422
24445
|
},
|
|
@@ -24427,8 +24450,8 @@
|
|
|
24427
24450
|
"name": "styles",
|
|
24428
24451
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24429
24452
|
"line": {
|
|
24430
|
-
"start":
|
|
24431
|
-
"end":
|
|
24453
|
+
"start": 181,
|
|
24454
|
+
"end": 438
|
|
24432
24455
|
}
|
|
24433
24456
|
}
|
|
24434
24457
|
},
|
|
@@ -24439,8 +24462,8 @@
|
|
|
24439
24462
|
"name": "styles",
|
|
24440
24463
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24441
24464
|
"line": {
|
|
24442
|
-
"start":
|
|
24443
|
-
"end":
|
|
24465
|
+
"start": 181,
|
|
24466
|
+
"end": 438
|
|
24444
24467
|
}
|
|
24445
24468
|
}
|
|
24446
24469
|
},
|
|
@@ -24451,8 +24474,8 @@
|
|
|
24451
24474
|
"name": "styles",
|
|
24452
24475
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24453
24476
|
"line": {
|
|
24454
|
-
"start":
|
|
24455
|
-
"end":
|
|
24477
|
+
"start": 181,
|
|
24478
|
+
"end": 438
|
|
24456
24479
|
}
|
|
24457
24480
|
}
|
|
24458
24481
|
},
|
|
@@ -24463,8 +24486,8 @@
|
|
|
24463
24486
|
"name": "styles",
|
|
24464
24487
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24465
24488
|
"line": {
|
|
24466
|
-
"start":
|
|
24467
|
-
"end":
|
|
24489
|
+
"start": 181,
|
|
24490
|
+
"end": 438
|
|
24468
24491
|
}
|
|
24469
24492
|
}
|
|
24470
24493
|
},
|
|
@@ -24475,8 +24498,8 @@
|
|
|
24475
24498
|
"name": "styles",
|
|
24476
24499
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24477
24500
|
"line": {
|
|
24478
|
-
"start":
|
|
24479
|
-
"end":
|
|
24501
|
+
"start": 181,
|
|
24502
|
+
"end": 438
|
|
24480
24503
|
}
|
|
24481
24504
|
}
|
|
24482
24505
|
},
|
|
@@ -24487,8 +24510,8 @@
|
|
|
24487
24510
|
"name": "styles",
|
|
24488
24511
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24489
24512
|
"line": {
|
|
24490
|
-
"start":
|
|
24491
|
-
"end":
|
|
24513
|
+
"start": 181,
|
|
24514
|
+
"end": 438
|
|
24492
24515
|
}
|
|
24493
24516
|
}
|
|
24494
24517
|
},
|
|
@@ -24499,8 +24522,8 @@
|
|
|
24499
24522
|
"name": "styles",
|
|
24500
24523
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24501
24524
|
"line": {
|
|
24502
|
-
"start":
|
|
24503
|
-
"end":
|
|
24525
|
+
"start": 181,
|
|
24526
|
+
"end": 438
|
|
24504
24527
|
}
|
|
24505
24528
|
}
|
|
24506
24529
|
},
|
|
@@ -24511,8 +24534,8 @@
|
|
|
24511
24534
|
"name": "styles",
|
|
24512
24535
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24513
24536
|
"line": {
|
|
24514
|
-
"start":
|
|
24515
|
-
"end":
|
|
24537
|
+
"start": 181,
|
|
24538
|
+
"end": 438
|
|
24516
24539
|
}
|
|
24517
24540
|
}
|
|
24518
24541
|
},
|
|
@@ -24523,8 +24546,8 @@
|
|
|
24523
24546
|
"name": "styles",
|
|
24524
24547
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24525
24548
|
"line": {
|
|
24526
|
-
"start":
|
|
24527
|
-
"end":
|
|
24549
|
+
"start": 181,
|
|
24550
|
+
"end": 438
|
|
24528
24551
|
}
|
|
24529
24552
|
}
|
|
24530
24553
|
},
|
|
@@ -24535,8 +24558,8 @@
|
|
|
24535
24558
|
"name": "styles",
|
|
24536
24559
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24537
24560
|
"line": {
|
|
24538
|
-
"start":
|
|
24539
|
-
"end":
|
|
24561
|
+
"start": 181,
|
|
24562
|
+
"end": 438
|
|
24540
24563
|
}
|
|
24541
24564
|
}
|
|
24542
24565
|
},
|
|
@@ -24547,8 +24570,8 @@
|
|
|
24547
24570
|
"name": "styles",
|
|
24548
24571
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24549
24572
|
"line": {
|
|
24550
|
-
"start":
|
|
24551
|
-
"end":
|
|
24573
|
+
"start": 181,
|
|
24574
|
+
"end": 438
|
|
24552
24575
|
}
|
|
24553
24576
|
}
|
|
24554
24577
|
},
|
|
@@ -24559,8 +24582,8 @@
|
|
|
24559
24582
|
"name": "styles",
|
|
24560
24583
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24561
24584
|
"line": {
|
|
24562
|
-
"start":
|
|
24563
|
-
"end":
|
|
24585
|
+
"start": 181,
|
|
24586
|
+
"end": 438
|
|
24564
24587
|
}
|
|
24565
24588
|
}
|
|
24566
24589
|
},
|
|
@@ -24571,8 +24594,8 @@
|
|
|
24571
24594
|
"name": "styles",
|
|
24572
24595
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24573
24596
|
"line": {
|
|
24574
|
-
"start":
|
|
24575
|
-
"end":
|
|
24597
|
+
"start": 181,
|
|
24598
|
+
"end": 438
|
|
24576
24599
|
}
|
|
24577
24600
|
}
|
|
24578
24601
|
},
|
|
@@ -24583,8 +24606,8 @@
|
|
|
24583
24606
|
"name": "styles",
|
|
24584
24607
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24585
24608
|
"line": {
|
|
24586
|
-
"start":
|
|
24587
|
-
"end":
|
|
24609
|
+
"start": 181,
|
|
24610
|
+
"end": 438
|
|
24588
24611
|
}
|
|
24589
24612
|
}
|
|
24590
24613
|
},
|
|
@@ -24595,8 +24618,8 @@
|
|
|
24595
24618
|
"name": "styles",
|
|
24596
24619
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24597
24620
|
"line": {
|
|
24598
|
-
"start":
|
|
24599
|
-
"end":
|
|
24621
|
+
"start": 181,
|
|
24622
|
+
"end": 438
|
|
24600
24623
|
}
|
|
24601
24624
|
}
|
|
24602
24625
|
},
|
|
@@ -24607,8 +24630,8 @@
|
|
|
24607
24630
|
"name": "styles",
|
|
24608
24631
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24609
24632
|
"line": {
|
|
24610
|
-
"start":
|
|
24611
|
-
"end":
|
|
24633
|
+
"start": 181,
|
|
24634
|
+
"end": 438
|
|
24612
24635
|
}
|
|
24613
24636
|
}
|
|
24614
24637
|
},
|
|
@@ -24619,8 +24642,8 @@
|
|
|
24619
24642
|
"name": "styles",
|
|
24620
24643
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24621
24644
|
"line": {
|
|
24622
|
-
"start":
|
|
24623
|
-
"end":
|
|
24645
|
+
"start": 181,
|
|
24646
|
+
"end": 438
|
|
24624
24647
|
}
|
|
24625
24648
|
}
|
|
24626
24649
|
},
|
|
@@ -24631,8 +24654,8 @@
|
|
|
24631
24654
|
"name": "styles",
|
|
24632
24655
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24633
24656
|
"line": {
|
|
24634
|
-
"start":
|
|
24635
|
-
"end":
|
|
24657
|
+
"start": 181,
|
|
24658
|
+
"end": 438
|
|
24636
24659
|
}
|
|
24637
24660
|
}
|
|
24638
24661
|
},
|
|
@@ -24643,8 +24666,8 @@
|
|
|
24643
24666
|
"name": "styles",
|
|
24644
24667
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24645
24668
|
"line": {
|
|
24646
|
-
"start":
|
|
24647
|
-
"end":
|
|
24669
|
+
"start": 181,
|
|
24670
|
+
"end": 438
|
|
24648
24671
|
}
|
|
24649
24672
|
}
|
|
24650
24673
|
},
|
|
@@ -24655,8 +24678,8 @@
|
|
|
24655
24678
|
"name": "styles",
|
|
24656
24679
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24657
24680
|
"line": {
|
|
24658
|
-
"start":
|
|
24659
|
-
"end":
|
|
24681
|
+
"start": 181,
|
|
24682
|
+
"end": 438
|
|
24660
24683
|
}
|
|
24661
24684
|
}
|
|
24662
24685
|
},
|
|
@@ -24667,8 +24690,8 @@
|
|
|
24667
24690
|
"name": "styles",
|
|
24668
24691
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24669
24692
|
"line": {
|
|
24670
|
-
"start":
|
|
24671
|
-
"end":
|
|
24693
|
+
"start": 181,
|
|
24694
|
+
"end": 438
|
|
24672
24695
|
}
|
|
24673
24696
|
}
|
|
24674
24697
|
},
|
|
@@ -24679,8 +24702,8 @@
|
|
|
24679
24702
|
"name": "styles",
|
|
24680
24703
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24681
24704
|
"line": {
|
|
24682
|
-
"start":
|
|
24683
|
-
"end":
|
|
24705
|
+
"start": 181,
|
|
24706
|
+
"end": 438
|
|
24684
24707
|
}
|
|
24685
24708
|
}
|
|
24686
24709
|
},
|
|
@@ -24691,8 +24714,8 @@
|
|
|
24691
24714
|
"name": "styles",
|
|
24692
24715
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24693
24716
|
"line": {
|
|
24694
|
-
"start":
|
|
24695
|
-
"end":
|
|
24717
|
+
"start": 181,
|
|
24718
|
+
"end": 438
|
|
24696
24719
|
}
|
|
24697
24720
|
}
|
|
24698
24721
|
},
|
|
@@ -24703,8 +24726,8 @@
|
|
|
24703
24726
|
"name": "styles",
|
|
24704
24727
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24705
24728
|
"line": {
|
|
24706
|
-
"start":
|
|
24707
|
-
"end":
|
|
24729
|
+
"start": 181,
|
|
24730
|
+
"end": 438
|
|
24708
24731
|
}
|
|
24709
24732
|
}
|
|
24710
24733
|
},
|
|
@@ -24715,8 +24738,8 @@
|
|
|
24715
24738
|
"name": "styles",
|
|
24716
24739
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24717
24740
|
"line": {
|
|
24718
|
-
"start":
|
|
24719
|
-
"end":
|
|
24741
|
+
"start": 181,
|
|
24742
|
+
"end": 438
|
|
24720
24743
|
}
|
|
24721
24744
|
}
|
|
24722
24745
|
},
|
|
@@ -24727,8 +24750,8 @@
|
|
|
24727
24750
|
"name": "styles",
|
|
24728
24751
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24729
24752
|
"line": {
|
|
24730
|
-
"start":
|
|
24731
|
-
"end":
|
|
24753
|
+
"start": 181,
|
|
24754
|
+
"end": 438
|
|
24732
24755
|
}
|
|
24733
24756
|
}
|
|
24734
24757
|
},
|
|
@@ -24739,8 +24762,8 @@
|
|
|
24739
24762
|
"name": "styles",
|
|
24740
24763
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24741
24764
|
"line": {
|
|
24742
|
-
"start":
|
|
24743
|
-
"end":
|
|
24765
|
+
"start": 181,
|
|
24766
|
+
"end": 438
|
|
24744
24767
|
}
|
|
24745
24768
|
}
|
|
24746
24769
|
},
|
|
@@ -24751,8 +24774,8 @@
|
|
|
24751
24774
|
"name": "styles",
|
|
24752
24775
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24753
24776
|
"line": {
|
|
24754
|
-
"start":
|
|
24755
|
-
"end":
|
|
24777
|
+
"start": 181,
|
|
24778
|
+
"end": 438
|
|
24756
24779
|
}
|
|
24757
24780
|
}
|
|
24758
24781
|
},
|
|
@@ -24763,8 +24786,8 @@
|
|
|
24763
24786
|
"name": "styles",
|
|
24764
24787
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
24765
24788
|
"line": {
|
|
24766
|
-
"start":
|
|
24767
|
-
"end":
|
|
24789
|
+
"start": 181,
|
|
24790
|
+
"end": 438
|
|
24768
24791
|
}
|
|
24769
24792
|
}
|
|
24770
24793
|
},
|
|
@@ -43107,16 +43130,16 @@
|
|
|
43107
43130
|
"description": "Module Settings\n",
|
|
43108
43131
|
"commentRange": {
|
|
43109
43132
|
"start": 27,
|
|
43110
|
-
"end":
|
|
43133
|
+
"end": 37
|
|
43111
43134
|
},
|
|
43112
43135
|
"context": {
|
|
43113
43136
|
"type": "variable",
|
|
43114
43137
|
"name": "config",
|
|
43115
|
-
"value": "(\n \"gap\" : 1rem,\n \"margin\" : (2em 0),\n \"graphic-width\" : 3.5rem,\n \"rule-border\" : true,\n \"rule-padding\" : 1rem,\n \"wrap-breakpoint\" : \"small\",\n \"separator-border\" : true,\n \"separator-gap\" : 0.8rem,\n)",
|
|
43138
|
+
"value": "(\n \"gap\" : 1rem,\n \"gap-compact\" : 0.5rem,\n \"margin\" : (2em 0),\n \"graphic-width\" : 3.5rem,\n \"rule-border\" : true,\n \"rule-padding\" : 1rem,\n \"wrap-breakpoint\" : \"small\",\n \"separator-border\" : true,\n \"separator-gap\" : 0.8rem,\n)",
|
|
43116
43139
|
"scope": "default",
|
|
43117
43140
|
"line": {
|
|
43118
|
-
"start":
|
|
43119
|
-
"end":
|
|
43141
|
+
"start": 39,
|
|
43142
|
+
"end": 49
|
|
43120
43143
|
}
|
|
43121
43144
|
},
|
|
43122
43145
|
"type": "Map",
|
|
@@ -43127,6 +43150,12 @@
|
|
|
43127
43150
|
"default": "1rem",
|
|
43128
43151
|
"description": "The gap between graphic and text."
|
|
43129
43152
|
},
|
|
43153
|
+
{
|
|
43154
|
+
"type": "CssUnit",
|
|
43155
|
+
"name": "gap-compact",
|
|
43156
|
+
"default": "0.5rem",
|
|
43157
|
+
"description": "The smaller gap applied when the compact modifier is used."
|
|
43158
|
+
},
|
|
43130
43159
|
{
|
|
43131
43160
|
"type": "List",
|
|
43132
43161
|
"name": "margin",
|
|
@@ -43186,16 +43215,16 @@
|
|
|
43186
43215
|
"path": "/sass/components/graphic-text-group/#mixin-set",
|
|
43187
43216
|
"description": "Change modules $config\n",
|
|
43188
43217
|
"commentRange": {
|
|
43189
|
-
"start":
|
|
43190
|
-
"end":
|
|
43218
|
+
"start": 51,
|
|
43219
|
+
"end": 54
|
|
43191
43220
|
},
|
|
43192
43221
|
"context": {
|
|
43193
43222
|
"type": "mixin",
|
|
43194
43223
|
"name": "set",
|
|
43195
43224
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
43196
43225
|
"line": {
|
|
43197
|
-
"start":
|
|
43198
|
-
"end":
|
|
43226
|
+
"start": 56,
|
|
43227
|
+
"end": 58
|
|
43199
43228
|
}
|
|
43200
43229
|
},
|
|
43201
43230
|
"parameter": [
|
|
@@ -43237,16 +43266,16 @@
|
|
|
43237
43266
|
"path": "/sass/components/graphic-text-group/#function-get",
|
|
43238
43267
|
"description": "Get a config option\n",
|
|
43239
43268
|
"commentRange": {
|
|
43240
|
-
"start":
|
|
43241
|
-
"end":
|
|
43269
|
+
"start": 60,
|
|
43270
|
+
"end": 63
|
|
43242
43271
|
},
|
|
43243
43272
|
"context": {
|
|
43244
43273
|
"type": "function",
|
|
43245
43274
|
"name": "get",
|
|
43246
43275
|
"code": "\n $value: utils.require-map-get($config, $name, \"graphic-text-group [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
43247
43276
|
"line": {
|
|
43248
|
-
"start":
|
|
43249
|
-
"end":
|
|
43277
|
+
"start": 65,
|
|
43278
|
+
"end": 68
|
|
43250
43279
|
}
|
|
43251
43280
|
},
|
|
43252
43281
|
"parameter": [
|
|
@@ -43284,16 +43313,16 @@
|
|
|
43284
43313
|
"path": "/sass/components/graphic-text-group/#mixin-styles",
|
|
43285
43314
|
"description": "Prints component styles\n",
|
|
43286
43315
|
"commentRange": {
|
|
43287
|
-
"start":
|
|
43288
|
-
"end":
|
|
43316
|
+
"start": 70,
|
|
43317
|
+
"end": 73
|
|
43289
43318
|
},
|
|
43290
43319
|
"context": {
|
|
43291
43320
|
"type": "mixin",
|
|
43292
43321
|
"name": "styles",
|
|
43293
|
-
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n",
|
|
43322
|
+
"code": "\n $prefix: selector.class(\"graphic-text-group\");\n\n #{ $prefix } {\n display: flex;\n align-items: center;\n text-align: left;\n gap: get(\"gap\");\n margin: get(\"margin\");\n }\n\n #{ $prefix }__graphic {\n flex-shrink: 0;\n width: get(\"graphic-width\");\n display: flex;\n align-items: center;\n justify-content: center;\n order: 1;\n\n img, svg {\n margin: 0;\n }\n }\n\n #{ $prefix }__text {\n flex-grow: 1;\n min-width: 0;\n order: 3;\n }\n\n // Separator Modifier\n #{ $prefix }--separator {\n gap: get(\"separator-gap\");\n &::before {\n content: \"\";\n display: block;\n order: 2;\n align-self: stretch;\n border-left: get(\"separator-border\");\n }\n &#{ $prefix }--top,\n &#{ $prefix }--bottom {\n &::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Responsive Modifiers\n #{ $prefix }--wrap {\n @include breakpoint.max(get(\"wrap-breakpoint\")) {\n flex-direction: column;\n align-items: flex-start;\n &#{ $prefix }--separator::before {\n border-left: none;\n border-bottom: get(\"separator-border\");\n }\n }\n }\n\n // Alignment Modifiers\n #{ $prefix }--align-start {\n align-items: flex-start;\n }\n\n #{ $prefix }--align-baseline {\n align-items: baseline;\n }\n\n #{ $prefix }--align-end {\n align-items: flex-end;\n }\n\n // Position Modifiers\n #{ $prefix }--right {\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--top {\n flex-direction: column;\n }\n\n #{ $prefix }--bottom {\n flex-direction: column;\n > #{ $prefix }__graphic {\n order: 3;\n }\n > #{ $prefix }__text {\n order: 1;\n }\n }\n\n #{ $prefix }--center {\n align-items: center;\n text-align: center;\n }\n\n // Rule Modifiers\n #{ $prefix }--rule-top {\n border-top: get(\"rule-border\");\n padding-top: get(\"rule-padding\");\n }\n\n #{ $prefix }--rule-bottom {\n border-bottom: get(\"rule-border\");\n padding-bottom: get(\"rule-padding\");\n }\n\n // Spacing Modifiers\n #{ $prefix }--compact {\n gap: get(\"gap-compact\");\n }\n\n // Graphic Modifiers\n #{ $prefix }--auto {\n > #{ $prefix }__graphic {\n width: auto;\n }\n }\n",
|
|
43294
43323
|
"line": {
|
|
43295
|
-
"start":
|
|
43296
|
-
"end":
|
|
43324
|
+
"start": 75,
|
|
43325
|
+
"end": 200
|
|
43297
43326
|
}
|
|
43298
43327
|
},
|
|
43299
43328
|
"demo": {
|
|
@@ -43355,6 +43384,10 @@
|
|
|
43355
43384
|
"type": "function",
|
|
43356
43385
|
"name": "get"
|
|
43357
43386
|
},
|
|
43387
|
+
{
|
|
43388
|
+
"type": "function",
|
|
43389
|
+
"name": "get"
|
|
43390
|
+
},
|
|
43358
43391
|
{
|
|
43359
43392
|
"type": "function",
|
|
43360
43393
|
"name": "get"
|
|
@@ -44951,43 +44984,15 @@
|
|
|
44951
44984
|
}
|
|
44952
44985
|
],
|
|
44953
44986
|
"menu-stack": [
|
|
44954
|
-
{
|
|
44955
|
-
"id": "content-content-block-id-1",
|
|
44956
|
-
"title": "content-block-id-1",
|
|
44957
|
-
"groupName": "menu-stack",
|
|
44958
|
-
"path": "/sass/components/menu-stack/#content-content-block-id-1",
|
|
44959
|
-
"description": "Module Settings\n",
|
|
44960
|
-
"commentRange": {
|
|
44961
|
-
"start": 38,
|
|
44962
|
-
"end": 39
|
|
44963
|
-
},
|
|
44964
|
-
"context": {
|
|
44965
|
-
"type": "content",
|
|
44966
|
-
"name": "content-block-id-1",
|
|
44967
|
-
"value": "Dimension",
|
|
44968
|
-
"line": {
|
|
44969
|
-
"start": 38,
|
|
44970
|
-
"end": 39
|
|
44971
|
-
}
|
|
44972
|
-
},
|
|
44973
|
-
"group": [
|
|
44974
|
-
"menu-stack"
|
|
44975
|
-
],
|
|
44976
|
-
"access": "public",
|
|
44977
|
-
"file": {
|
|
44978
|
-
"path": "_menu-stack.scss",
|
|
44979
|
-
"name": "_menu-stack.scss"
|
|
44980
|
-
}
|
|
44981
|
-
},
|
|
44982
44987
|
{
|
|
44983
44988
|
"id": "variable-config",
|
|
44984
44989
|
"title": "$config",
|
|
44985
44990
|
"groupName": "menu-stack",
|
|
44986
44991
|
"path": "/sass/components/menu-stack/#variable-config",
|
|
44987
|
-
"description": "",
|
|
44992
|
+
"description": "Module Settings\n",
|
|
44988
44993
|
"commentRange": {
|
|
44989
|
-
"start":
|
|
44990
|
-
"end":
|
|
44994
|
+
"start": 38,
|
|
44995
|
+
"end": 92
|
|
44991
44996
|
},
|
|
44992
44997
|
"context": {
|
|
44993
44998
|
"type": "variable",
|
|
@@ -44995,10 +45000,11 @@
|
|
|
44995
45000
|
"value": "(\n \"nested-indent\" : 0.5em,\n \"rule-style\" : \"light\",\n \"rule-margin\" : 0.5em,\n \"toggle-icon-rotate\" : false,\n \"label-color\" : \"type-secondary\",\n \"label-margin\" : 0.5em,\n \"label-text-transform\" : null,\n \"label-type-size\" : false,\n \"label-font-weight\" : bold,\n \"label-line-height\" : true,\n \"link-separated-margin\" : false,\n \"link-separated-rule-style\" : false,\n \"link-active-selectors\" : (\".is-active\",),\n \"link-background-color\" : transparent,\n \"link-background-color-active\" : \"control-background-active\",\n \"link-background-color-hover\" : rgba(0,0,0,0.2),\n \"link-border-radius\" : true,\n \"link-color\" : \"type-secondary\",\n \"link-color-active\" : \"control-active\",\n \"link-color-hover\" : \"type\",\n \"link-font-weight\" : null,\n \"link-line-height\" : true,\n \"link-icon-margin\" : 0.65em,\n \"link-icon-width\" : 1em,\n \"link-icon-font-size\" : null,\n \"link-margin\" : 0.2em,\n \"link-padding-x\": 0.85em,\n \"link-padding-y\": 0.4em,\n \"link-transition-duration\": 200ms,\n \"link-transition-properties\": (border-color, background-color, color, box-shadow),\n \"compact-link-padding-x\": 0.75em,\n \"compact-link-padding-y\": 0.25em,\n \"compact-link-margin\" : 0.2em,\n \"compact-link-border-radius\" : null,\n \"compact-selectable-input-width\": 2.2em,\n \"compact-selectable-input-top\" : 0.5em,\n \"compact-selectable-input-font-size\": 0.8em,\n \"stacked-link-padding-x\": 0.4em,\n \"stacked-link-padding-y\": 0.8em,\n \"stacked-link-margin\": 0.4em,\n \"stacked-link-icon-margin\": 0.35em,\n \"stacked-link-border-radius\": true,\n \"stacked-link-font-weight\" : null,\n \"selectable-input-width\" : 3em,\n \"selectable-input-top\" : 0.73em,\n \"selectable-input-font-size\" : null,\n \"title-color\" : null,\n \"title-font-weight\" : bold,\n \"title-separator-enabled\": true,\n \"title-separator-color\" : \"rule\",\n \"title-rule-style\" : \"light\",\n \"title-separated-margin\" : false,\n \"columns-gap\" : 2rem,\n \"columns-min-width\" : 18rem,\n)",
|
|
44996
45001
|
"scope": "default",
|
|
44997
45002
|
"line": {
|
|
44998
|
-
"start":
|
|
44999
|
-
"end":
|
|
45003
|
+
"start": 94,
|
|
45004
|
+
"end": 149
|
|
45000
45005
|
}
|
|
45001
45006
|
},
|
|
45007
|
+
"type": "Map",
|
|
45002
45008
|
"property": [
|
|
45003
45009
|
{
|
|
45004
45010
|
"type": "Dimension",
|
|
@@ -45335,16 +45341,16 @@
|
|
|
45335
45341
|
"path": "/sass/components/menu-stack/#mixin-set",
|
|
45336
45342
|
"description": "Change modules $config\n",
|
|
45337
45343
|
"commentRange": {
|
|
45338
|
-
"start":
|
|
45339
|
-
"end":
|
|
45344
|
+
"start": 151,
|
|
45345
|
+
"end": 154
|
|
45340
45346
|
},
|
|
45341
45347
|
"context": {
|
|
45342
45348
|
"type": "mixin",
|
|
45343
45349
|
"name": "set",
|
|
45344
45350
|
"code": "\n $config: map.merge($config, $changes) !global;\n",
|
|
45345
45351
|
"line": {
|
|
45346
|
-
"start":
|
|
45347
|
-
"end":
|
|
45352
|
+
"start": 156,
|
|
45353
|
+
"end": 158
|
|
45348
45354
|
}
|
|
45349
45355
|
},
|
|
45350
45356
|
"parameter": [
|
|
@@ -45386,16 +45392,16 @@
|
|
|
45386
45392
|
"path": "/sass/components/menu-stack/#function-get",
|
|
45387
45393
|
"description": "Get a config option\n",
|
|
45388
45394
|
"commentRange": {
|
|
45389
|
-
"start":
|
|
45390
|
-
"end":
|
|
45395
|
+
"start": 160,
|
|
45396
|
+
"end": 163
|
|
45391
45397
|
},
|
|
45392
45398
|
"context": {
|
|
45393
45399
|
"type": "function",
|
|
45394
45400
|
"name": "get",
|
|
45395
45401
|
"code": "\n $value: utils.require-map-get($config, $name, \"menu-stack [config]\");\n @return utils.function-fallback($name, $value, $-fallbacks);\n",
|
|
45396
45402
|
"line": {
|
|
45397
|
-
"start":
|
|
45398
|
-
"end":
|
|
45403
|
+
"start": 165,
|
|
45404
|
+
"end": 168
|
|
45399
45405
|
}
|
|
45400
45406
|
},
|
|
45401
45407
|
"parameter": [
|
|
@@ -45433,16 +45439,16 @@
|
|
|
45433
45439
|
"path": "/sass/components/menu-stack/#mixin-styles",
|
|
45434
45440
|
"description": "Prints component styles\n",
|
|
45435
45441
|
"commentRange": {
|
|
45436
|
-
"start":
|
|
45437
|
-
"end":
|
|
45442
|
+
"start": 175,
|
|
45443
|
+
"end": 179
|
|
45438
45444
|
},
|
|
45439
45445
|
"context": {
|
|
45440
45446
|
"type": "mixin",
|
|
45441
45447
|
"name": "styles",
|
|
45442
45448
|
"code": "\n $prefix: selector.class(\"menu-stack\");\n $prefix-name-only: selector.class(\"menu-stack\", $name-only: true);\n $prefix-popover: selector.class(\"popover\");\n $selectable-y: (get(\"link-padding-y\") + get(\"link-margin\"));\n\n #{ $prefix } {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"link-padding-x\"));\n }\n\n #{ $prefix }--separated {\n border-top: element.get-rule-style(get(\"rule-style\"));\n padding-top: get(\"rule-margin\");\n margin-top: get(\"rule-margin\");\n }\n #{ $prefix }__label {\n text-transform: get(\"label-text-transform\");\n padding-bottom: get(\"label-margin\");\n color: color.get(get(\"label-color\"));\n font-weight: get(\"label-font-weight\");\n line-height: get(\"label-line-height\");\n @if (get(\"label-type-size\")) {\n @include typography.size(get(\"label-type-size\"), $only-font-size: true);\n }\n }\n #{ $prefix }__item--separator-before {\n border-top: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-top: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__item--separator-after {\n border-bottom: element.get-rule-style(-fallback(\"link-separated-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"link-separated-margin\", \"link-padding-y\");\n }\n #{ $prefix }__list {\n & & {\n padding-left: get(\"nested-indent\");\n }\n }\n\n // Special modifier for item to style as a title\n // - Used in columns menus where first level isn't in a <ul> but is just above \n // the <ul> and being styled as though it was to match the styling of the menu \n // of children\n // - Note: This is output above the link styling for specificity, so it will \n // fallback to link colors for hover/active\n #{ $prefix }__item--title {\n @if get(\"title-separator-enabled\") {\n border-bottom: element.get-rule-style(-fallback(\"title-rule-style\", \"rule-style\"));\n margin-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n padding-bottom: -fallback(\"title-separated-margin\", \"link-padding-y\");\n }\n &,\n > #{ $prefix }__link {\n color: color.get(get(\"title-color\"));\n font-weight: get(\"title-font-weight\");\n }\n }\n \n\n // By default the link hangs outside the container so that \n // the icons/text align to the text (above/below)\n // - Use the modifier \"site-menu--contained\" to keep the links within \n // the parent container (no optical alignment), should be within something that contains it\n\n #{ $prefix }__link,\n #{ $prefix }__selectable,\n #{ $prefix }__toggle {\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n padding: get(\"link-padding-y\") cssvar.use-ulu(\"menu-stack-link-padding-x\");\n margin: get(\"link-margin\") 0;\n border-radius: get(\"link-border-radius\");\n font-weight: get(\"link-font-weight\");\n line-height: get(\"link-line-height\");\n color: color.get(get(\"link-color\"));\n background-color: color.get(get(\"link-background-color\"));\n transition-duration: get(\"link-transition-duration\");\n transition-property: get(\"link-transition-properties\");\n &:hover,\n &:focus {\n z-index: 2;\n color: color.get(get(\"link-color-hover\"));\n background-color: color.get(get(\"link-background-color-hover\"));\n }\n }\n #{ $prefix }__selectable {\n padding: 0;\n }\n\n // Combine all active selectors using sass:selector functions\n $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;\n $active-from-config: get(\"link-active-selectors\");\n $traditional-active: sassSelector.append($base-selectors, $active-from-config);\n\n $checked-active: sassSelector.parse(\"#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)\");\n\n #{ $traditional-active, $checked-active },\n #{ $prefix }__link[aria-current=\"page\"] {\n &,\n &:hover {\n color: color.get(get(\"link-color-active\"));\n background-color: color.get(get(\"link-background-color-active\"));\n }\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n position: absolute;\n top: utils.fallback(get(\"selectable-input-top\"), $selectable-y);\n left: cssvar.use-ulu(\"menu-stack-link-padding-x\");\n font-size: get(\"selectable-input-font-size\");\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n width: 100%;\n padding: $selectable-y cssvar.use-ulu(\"menu-stack-link-padding-x\") $selectable-y get(\"selectable-input-width\");\n }\n #{ $prefix }__link-text {\n display: block;\n flex-grow: 1;\n }\n #{ $prefix }__link-icon {\n margin-right: get(\"link-icon-margin\");\n flex: 0 0 get(\"link-icon-width\");\n font-size: get(\"link-icon-font-size\");\n }\n #{ $prefix }__collapsible {\n margin: 0;\n @if (get(\"toggle-icon-rotate\")) {\n &[open] {\n #{ $prefix }__toggle-icon {\n transform: rotate(get(\"toggle-icon-rotate\"));\n }\n }\n }\n }\n #{ $prefix }__toggle {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n @include element.summary-remove-marker(); \n }\n\n // Modifiers\n\n // Link buttons hang outside in margin so that text optically aligns\n #{ $prefix }--hanging {\n &:not(#{ $prefix }--columns, #{ $prefix }--columns-fluid) > #{ $prefix }__list > #{ $prefix }__item,\n &[class*=\"#{ $prefix-name-only }--columns\"] > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list > #{ $prefix }__item {\n > #{ $prefix }__link, \n > #{ $prefix }__collapsible {\n margin-left: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n margin-right: calc(cssvar.use-ulu(\"menu-stack-link-padding-x\") * -1);\n width: calc(100% + (cssvar.use-ulu(\"menu-stack-link-padding-x\") * 2));\n }\n }\n }\n\n #{ $prefix }--compact {\n $compact-y: get(\"compact-link-padding-y\");\n $compact-x: get(\"compact-link-padding-x\");\n \n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", $compact-x);\n\n #{ $prefix }__selectable,\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n border-radius: get(\"compact-link-border-radius\");\n margin: get(\"compact-link-margin\") 0;\n }\n #{ $prefix }__toggle,\n #{ $prefix }__link {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n }\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-top: $compact-y;\n padding-bottom: $compact-y;\n padding-right: get(\"compact-selectable-input-width\");\n }\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"],\n #{ $prefix }__selectable-input {\n top: utils.fallback(get(\"compact-selectable-input-top\"), $compact-y);\n font-size: get(\"compact-selectable-input-font-size\");\n }\n }\n\n #{ $prefix }--hide-inputs {\n #{ $prefix }__selectable-input,\n #{ $prefix }__selectable [type=\"checkbox\"],\n #{ $prefix }__selectable [type=\"radio\"] {\n @include element.hidden-visually();\n }\n\n #{ $prefix }__selectable label,\n #{ $prefix }__selectable-label {\n padding-left: get(\"link-padding-x\");\n }\n }\n\n #{ $prefix }--stacked {\n @include cssvar.declare-ulu(\"menu-stack-link-padding-x\", get(\"stacked-link-padding-x\"));\n\n #{ $prefix }__link,\n #{ $prefix }__toggle {\n flex-direction: column;\n justify-content: center;\n text-align: center;\n border-radius: get(\"stacked-link-border-radius\");\n padding-top: get(\"stacked-link-padding-y\");\n padding-bottom: get(\"stacked-link-padding-y\");\n margin: get(\"stacked-link-margin\") 0;\n font-weight: get(\"stacked-link-font-weight\");\n }\n #{ $prefix }__link-icon {\n margin-right: 0;\n margin-bottom: get(\"stacked-link-icon-margin\");\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n #{ $prefix }--columns {\n > #{ $prefix }__list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(get(\"columns-min-width\"), 1fr));\n gap: get(\"columns-gap\");\n }\n }\n #{ $prefix }--columns-fluid {\n > #{ $prefix }__list {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: get(\"columns-gap\");\n > #{ $prefix }__item {\n flex: 0 0 0;\n min-width: get(\"columns-min-width\");\n }\n }\n }\n // No indenting if we're using columns\n [class*=\"#{ $prefix-name-only }--columns\"] {\n > #{ $prefix }__list > #{ $prefix }__item > #{ $prefix }__list {\n padding-left: 0;\n }\n }\n",
|
|
45443
45449
|
"line": {
|
|
45444
|
-
"start":
|
|
45445
|
-
"end":
|
|
45450
|
+
"start": 181,
|
|
45451
|
+
"end": 438
|
|
45446
45452
|
}
|
|
45447
45453
|
},
|
|
45448
45454
|
"example": [
|
|
@@ -57787,8 +57793,8 @@
|
|
|
57787
57793
|
"name": "get-container",
|
|
57788
57794
|
"code": "\n $container: null;\n @if ($required) {\n $container: utils.require-map-get($containers, $name, \"Layout [get-container]\");\n } @else {\n $container: map.get($containers, $name);\n }\n\n @if ($container and $breakpoint) {\n $breakpoints: map.get($container, \"breakpoints\");\n @if ($required) {\n @if ($breakpoints) {\n @return utils.require-map-get($breakpoints, $breakpoint, \"[container breakpoint]\");\n } @else {\n @error 'ULU: No container breakpoints for container \"#{ $name }\", requested breakpoint #{ $breakpoint }';\n }\n } @else {\n @if ($breakpoints) {\n @return map.get($breakpoints, $breakpoint);\n } @else {\n @return null;\n }\n }\n }\n\n @return $container;\n",
|
|
57789
57795
|
"line": {
|
|
57790
|
-
"start":
|
|
57791
|
-
"end":
|
|
57796
|
+
"start": 154,
|
|
57797
|
+
"end": 180
|
|
57792
57798
|
}
|
|
57793
57799
|
}
|
|
57794
57800
|
},
|
|
@@ -57799,8 +57805,8 @@
|
|
|
57799
57805
|
"name": "get-container",
|
|
57800
57806
|
"code": "\n $container: null;\n @if ($required) {\n $container: utils.require-map-get($containers, $name, \"Layout [get-container]\");\n } @else {\n $container: map.get($containers, $name);\n }\n\n @if ($container and $breakpoint) {\n $breakpoints: map.get($container, \"breakpoints\");\n @if ($required) {\n @if ($breakpoints) {\n @return utils.require-map-get($breakpoints, $breakpoint, \"[container breakpoint]\");\n } @else {\n @error 'ULU: No container breakpoints for container \"#{ $name }\", requested breakpoint #{ $breakpoint }';\n }\n } @else {\n @if ($breakpoints) {\n @return map.get($breakpoints, $breakpoint);\n } @else {\n @return null;\n }\n }\n }\n\n @return $container;\n",
|
|
57801
57807
|
"line": {
|
|
57802
|
-
"start":
|
|
57803
|
-
"end":
|
|
57808
|
+
"start": 154,
|
|
57809
|
+
"end": 180
|
|
57804
57810
|
}
|
|
57805
57811
|
}
|
|
57806
57812
|
},
|
|
@@ -57811,8 +57817,8 @@
|
|
|
57811
57817
|
"name": "get-container",
|
|
57812
57818
|
"code": "\n $container: null;\n @if ($required) {\n $container: utils.require-map-get($containers, $name, \"Layout [get-container]\");\n } @else {\n $container: map.get($containers, $name);\n }\n\n @if ($container and $breakpoint) {\n $breakpoints: map.get($container, \"breakpoints\");\n @if ($required) {\n @if ($breakpoints) {\n @return utils.require-map-get($breakpoints, $breakpoint, \"[container breakpoint]\");\n } @else {\n @error 'ULU: No container breakpoints for container \"#{ $name }\", requested breakpoint #{ $breakpoint }';\n }\n } @else {\n @if ($breakpoints) {\n @return map.get($breakpoints, $breakpoint);\n } @else {\n @return null;\n }\n }\n }\n\n @return $container;\n",
|
|
57813
57819
|
"line": {
|
|
57814
|
-
"start":
|
|
57815
|
-
"end":
|
|
57820
|
+
"start": 154,
|
|
57821
|
+
"end": 180
|
|
57816
57822
|
}
|
|
57817
57823
|
}
|
|
57818
57824
|
},
|
|
@@ -57823,8 +57829,8 @@
|
|
|
57823
57829
|
"name": "match-container-padding",
|
|
57824
57830
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n #{ $property }: get-container-padding($name, $sides);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n #{ $property }: get-container-padding($name, $sides, $breakpoint);\n }\n }\n }\n",
|
|
57825
57831
|
"line": {
|
|
57826
|
-
"start":
|
|
57827
|
-
"end":
|
|
57832
|
+
"start": 188,
|
|
57833
|
+
"end": 200
|
|
57828
57834
|
}
|
|
57829
57835
|
}
|
|
57830
57836
|
},
|
|
@@ -57835,8 +57841,8 @@
|
|
|
57835
57841
|
"name": "match-container-padding",
|
|
57836
57842
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n #{ $property }: get-container-padding($name, $sides);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n #{ $property }: get-container-padding($name, $sides, $breakpoint);\n }\n }\n }\n",
|
|
57837
57843
|
"line": {
|
|
57838
|
-
"start":
|
|
57839
|
-
"end":
|
|
57844
|
+
"start": 188,
|
|
57845
|
+
"end": 200
|
|
57840
57846
|
}
|
|
57841
57847
|
}
|
|
57842
57848
|
},
|
|
@@ -57847,8 +57853,8 @@
|
|
|
57847
57853
|
"name": "match-container-margin",
|
|
57848
57854
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n $padding: 0;\n @if ($include-padding) {\n $padding: get-container-padding($name, true);\n }\n $max: map.get($container, \"max-width\");\n #{ $property }: max(((100vw - $max) / 2) + $padding, $padding);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n $pad: 0;\n @if ($include-padding) {\n $pad: get-container-padding($name, true, $breakpoint);\n }\n #{ $property }: max(((100vw - $max) / 2) + $pad, $pad);\n }\n }\n }\n",
|
|
57849
57855
|
"line": {
|
|
57850
|
-
"start":
|
|
57851
|
-
"end":
|
|
57856
|
+
"start": 211,
|
|
57857
|
+
"end": 232
|
|
57852
57858
|
}
|
|
57853
57859
|
}
|
|
57854
57860
|
},
|
|
@@ -57859,8 +57865,8 @@
|
|
|
57859
57865
|
"name": "match-container-margin",
|
|
57860
57866
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n $padding: 0;\n @if ($include-padding) {\n $padding: get-container-padding($name, true);\n }\n $max: map.get($container, \"max-width\");\n #{ $property }: max(((100vw - $max) / 2) + $padding, $padding);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n $pad: 0;\n @if ($include-padding) {\n $pad: get-container-padding($name, true, $breakpoint);\n }\n #{ $property }: max(((100vw - $max) / 2) + $pad, $pad);\n }\n }\n }\n",
|
|
57861
57867
|
"line": {
|
|
57862
|
-
"start":
|
|
57863
|
-
"end":
|
|
57868
|
+
"start": 211,
|
|
57869
|
+
"end": 232
|
|
57864
57870
|
}
|
|
57865
57871
|
}
|
|
57866
57872
|
},
|
|
@@ -57871,8 +57877,8 @@
|
|
|
57871
57877
|
"name": "match-container-margin",
|
|
57872
57878
|
"code": "\n $container: get-container($name);\n $breakpoints: map.get($container, \"breakpoints\");\n $padding: 0;\n @if ($include-padding) {\n $padding: get-container-padding($name, true);\n }\n $max: map.get($container, \"max-width\");\n #{ $property }: max(((100vw - $max) / 2) + $padding, $padding);\n @if $breakpoints {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n $pad: 0;\n @if ($include-padding) {\n $pad: get-container-padding($name, true, $breakpoint);\n }\n #{ $property }: max(((100vw - $max) / 2) + $pad, $pad);\n }\n }\n }\n",
|
|
57873
57879
|
"line": {
|
|
57874
|
-
"start":
|
|
57875
|
-
"end":
|
|
57880
|
+
"start": 211,
|
|
57881
|
+
"end": 232
|
|
57876
57882
|
}
|
|
57877
57883
|
}
|
|
57878
57884
|
},
|
|
@@ -57883,8 +57889,8 @@
|
|
|
57883
57889
|
"name": "get-container-padding",
|
|
57884
57890
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $padding: map.get($container, \"padding\");\n $is-list: meta.type-of($padding) == \"list\"; // Else number\n @if (not $is-list) {\n @return $padding;\n } @else {\n @return list.nth($padding, utils.when($sides, 2, 1));\n }\n",
|
|
57885
57891
|
"line": {
|
|
57886
|
-
"start":
|
|
57887
|
-
"end":
|
|
57892
|
+
"start": 239,
|
|
57893
|
+
"end": 248
|
|
57888
57894
|
}
|
|
57889
57895
|
}
|
|
57890
57896
|
},
|
|
@@ -57895,8 +57901,8 @@
|
|
|
57895
57901
|
"name": "container-padding",
|
|
57896
57902
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $responsive: map.get($container, \"responsive\");\n $x: get-container-padding-x($name, $specific-breakpoint);\n $y: get-container-padding-y($name, $specific-breakpoint);\n $resp-amount: utils.when(meta.type-of($responsive) == number, $responsive, utils.get(\"responsive-change\"));\n \n @if $responsive {\n @if $sides {\n @include utils.responsive-property(\"padding-left\", $x, $resp-amount);\n @include utils.responsive-property(\"padding-right\", $x, $resp-amount);\n }\n @if $ends {\n @include utils.responsive-property(\"padding-top\", $y, $resp-amount);\n @include utils.responsive-property(\"padding-bottom\", $y, $resp-amount);\n }\n } @else {\n @if $sides {\n padding-left: $x;\n padding-right: $x;\n }\n @if $ends {\n padding-top: $y;\n padding-bottom: $y;\n }\n }\n",
|
|
57897
57903
|
"line": {
|
|
57898
|
-
"start":
|
|
57899
|
-
"end":
|
|
57904
|
+
"start": 255,
|
|
57905
|
+
"end": 281
|
|
57900
57906
|
}
|
|
57901
57907
|
}
|
|
57902
57908
|
},
|
|
@@ -57907,8 +57913,8 @@
|
|
|
57907
57913
|
"name": "container-padding",
|
|
57908
57914
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $responsive: map.get($container, \"responsive\");\n $x: get-container-padding-x($name, $specific-breakpoint);\n $y: get-container-padding-y($name, $specific-breakpoint);\n $resp-amount: utils.when(meta.type-of($responsive) == number, $responsive, utils.get(\"responsive-change\"));\n \n @if $responsive {\n @if $sides {\n @include utils.responsive-property(\"padding-left\", $x, $resp-amount);\n @include utils.responsive-property(\"padding-right\", $x, $resp-amount);\n }\n @if $ends {\n @include utils.responsive-property(\"padding-top\", $y, $resp-amount);\n @include utils.responsive-property(\"padding-bottom\", $y, $resp-amount);\n }\n } @else {\n @if $sides {\n padding-left: $x;\n padding-right: $x;\n }\n @if $ends {\n padding-top: $y;\n padding-bottom: $y;\n }\n }\n",
|
|
57909
57915
|
"line": {
|
|
57910
|
-
"start":
|
|
57911
|
-
"end":
|
|
57916
|
+
"start": 255,
|
|
57917
|
+
"end": 281
|
|
57912
57918
|
}
|
|
57913
57919
|
}
|
|
57914
57920
|
},
|
|
@@ -57919,8 +57925,8 @@
|
|
|
57919
57925
|
"name": "container-styles",
|
|
57920
57926
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $breakpoints: map.get($container, \"breakpoints\");\n \n $width: map.get($container, \"width\");\n\n @if ($width == null) {\n $width: 100%;\n }\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: $width;\n max-width: map.get($container, \"max-width\");\n @include container-padding($name, $specific-breakpoint: $specific-breakpoint);\n\n // Recursive print other breakpoints\n @if $breakpoints and not $specific-breakpoint {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n @include container-styles($name, $breakpoint);\n }\n }\n }\n",
|
|
57921
57927
|
"line": {
|
|
57922
|
-
"start":
|
|
57923
|
-
"end":
|
|
57928
|
+
"start": 303,
|
|
57929
|
+
"end": 328
|
|
57924
57930
|
}
|
|
57925
57931
|
}
|
|
57926
57932
|
},
|
|
@@ -57931,8 +57937,8 @@
|
|
|
57931
57937
|
"name": "container-styles",
|
|
57932
57938
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $breakpoints: map.get($container, \"breakpoints\");\n \n $width: map.get($container, \"width\");\n\n @if ($width == null) {\n $width: 100%;\n }\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: $width;\n max-width: map.get($container, \"max-width\");\n @include container-padding($name, $specific-breakpoint: $specific-breakpoint);\n\n // Recursive print other breakpoints\n @if $breakpoints and not $specific-breakpoint {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n @include container-styles($name, $breakpoint);\n }\n }\n }\n",
|
|
57933
57939
|
"line": {
|
|
57934
|
-
"start":
|
|
57935
|
-
"end":
|
|
57940
|
+
"start": 303,
|
|
57941
|
+
"end": 328
|
|
57936
57942
|
}
|
|
57937
57943
|
}
|
|
57938
57944
|
},
|
|
@@ -57943,8 +57949,8 @@
|
|
|
57943
57949
|
"name": "container-styles",
|
|
57944
57950
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $breakpoints: map.get($container, \"breakpoints\");\n \n $width: map.get($container, \"width\");\n\n @if ($width == null) {\n $width: 100%;\n }\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: $width;\n max-width: map.get($container, \"max-width\");\n @include container-padding($name, $specific-breakpoint: $specific-breakpoint);\n\n // Recursive print other breakpoints\n @if $breakpoints and not $specific-breakpoint {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n @include container-styles($name, $breakpoint);\n }\n }\n }\n",
|
|
57945
57951
|
"line": {
|
|
57946
|
-
"start":
|
|
57947
|
-
"end":
|
|
57952
|
+
"start": 303,
|
|
57953
|
+
"end": 328
|
|
57948
57954
|
}
|
|
57949
57955
|
}
|
|
57950
57956
|
},
|
|
@@ -57955,8 +57961,8 @@
|
|
|
57955
57961
|
"name": "container-styles",
|
|
57956
57962
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $breakpoints: map.get($container, \"breakpoints\");\n \n $width: map.get($container, \"width\");\n\n @if ($width == null) {\n $width: 100%;\n }\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: $width;\n max-width: map.get($container, \"max-width\");\n @include container-padding($name, $specific-breakpoint: $specific-breakpoint);\n\n // Recursive print other breakpoints\n @if $breakpoints and not $specific-breakpoint {\n @each $breakpoint, $props in $breakpoints {\n $direction: map.get($props, \"direction\");\n @include breakpoint.from($breakpoint, $direction) {\n @include container-styles($name, $breakpoint);\n }\n }\n }\n",
|
|
57957
57963
|
"line": {
|
|
57958
|
-
"start":
|
|
57959
|
-
"end":
|
|
57964
|
+
"start": 303,
|
|
57965
|
+
"end": 328
|
|
57960
57966
|
}
|
|
57961
57967
|
}
|
|
57962
57968
|
},
|
|
@@ -63017,8 +63023,8 @@
|
|
|
63017
63023
|
"name": "get-width",
|
|
63018
63024
|
"code": "\n @return utils.require-map-get($widths, $name, \"layout [widths]\");\n",
|
|
63019
63025
|
"line": {
|
|
63020
|
-
"start":
|
|
63021
|
-
"end":
|
|
63026
|
+
"start": 83,
|
|
63027
|
+
"end": 85
|
|
63022
63028
|
}
|
|
63023
63029
|
}
|
|
63024
63030
|
},
|
|
@@ -63029,8 +63035,8 @@
|
|
|
63029
63035
|
"name": "get-max-width",
|
|
63030
63036
|
"code": "\n @return utils.require-map-get($max-widths, $name, \"layout [max-widths]\");\n",
|
|
63031
63037
|
"line": {
|
|
63032
|
-
"start":
|
|
63033
|
-
"end":
|
|
63038
|
+
"start": 121,
|
|
63039
|
+
"end": 123
|
|
63034
63040
|
}
|
|
63035
63041
|
}
|
|
63036
63042
|
},
|
|
@@ -63041,8 +63047,8 @@
|
|
|
63041
63047
|
"name": "get-container",
|
|
63042
63048
|
"code": "\n $container: null;\n @if ($required) {\n $container: utils.require-map-get($containers, $name, \"Layout [get-container]\");\n } @else {\n $container: map.get($containers, $name);\n }\n\n @if ($container and $breakpoint) {\n $breakpoints: map.get($container, \"breakpoints\");\n @if ($required) {\n @if ($breakpoints) {\n @return utils.require-map-get($breakpoints, $breakpoint, \"[container breakpoint]\");\n } @else {\n @error 'ULU: No container breakpoints for container \"#{ $name }\", requested breakpoint #{ $breakpoint }';\n }\n } @else {\n @if ($breakpoints) {\n @return map.get($breakpoints, $breakpoint);\n } @else {\n @return null;\n }\n }\n }\n\n @return $container;\n",
|
|
63043
63049
|
"line": {
|
|
63044
|
-
"start":
|
|
63045
|
-
"end":
|
|
63050
|
+
"start": 154,
|
|
63051
|
+
"end": 180
|
|
63046
63052
|
}
|
|
63047
63053
|
}
|
|
63048
63054
|
},
|
|
@@ -63053,8 +63059,8 @@
|
|
|
63053
63059
|
"name": "get-container",
|
|
63054
63060
|
"code": "\n $container: null;\n @if ($required) {\n $container: utils.require-map-get($containers, $name, \"Layout [get-container]\");\n } @else {\n $container: map.get($containers, $name);\n }\n\n @if ($container and $breakpoint) {\n $breakpoints: map.get($container, \"breakpoints\");\n @if ($required) {\n @if ($breakpoints) {\n @return utils.require-map-get($breakpoints, $breakpoint, \"[container breakpoint]\");\n } @else {\n @error 'ULU: No container breakpoints for container \"#{ $name }\", requested breakpoint #{ $breakpoint }';\n }\n } @else {\n @if ($breakpoints) {\n @return map.get($breakpoints, $breakpoint);\n } @else {\n @return null;\n }\n }\n }\n\n @return $container;\n",
|
|
63055
63061
|
"line": {
|
|
63056
|
-
"start":
|
|
63057
|
-
"end":
|
|
63062
|
+
"start": 154,
|
|
63063
|
+
"end": 180
|
|
63058
63064
|
}
|
|
63059
63065
|
}
|
|
63060
63066
|
},
|
|
@@ -63527,8 +63533,8 @@
|
|
|
63527
63533
|
"name": "get-container-padding",
|
|
63528
63534
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $padding: map.get($container, \"padding\");\n $is-list: meta.type-of($padding) == \"list\"; // Else number\n @if (not $is-list) {\n @return $padding;\n } @else {\n @return list.nth($padding, utils.when($sides, 2, 1));\n }\n",
|
|
63529
63535
|
"line": {
|
|
63530
|
-
"start":
|
|
63531
|
-
"end":
|
|
63536
|
+
"start": 239,
|
|
63537
|
+
"end": 248
|
|
63532
63538
|
}
|
|
63533
63539
|
}
|
|
63534
63540
|
},
|
|
@@ -63539,8 +63545,8 @@
|
|
|
63539
63545
|
"name": "container-padding",
|
|
63540
63546
|
"code": "\n $container: get-container($name, $specific-breakpoint);\n $responsive: map.get($container, \"responsive\");\n $x: get-container-padding-x($name, $specific-breakpoint);\n $y: get-container-padding-y($name, $specific-breakpoint);\n $resp-amount: utils.when(meta.type-of($responsive) == number, $responsive, utils.get(\"responsive-change\"));\n \n @if $responsive {\n @if $sides {\n @include utils.responsive-property(\"padding-left\", $x, $resp-amount);\n @include utils.responsive-property(\"padding-right\", $x, $resp-amount);\n }\n @if $ends {\n @include utils.responsive-property(\"padding-top\", $y, $resp-amount);\n @include utils.responsive-property(\"padding-bottom\", $y, $resp-amount);\n }\n } @else {\n @if $sides {\n padding-left: $x;\n padding-right: $x;\n }\n @if $ends {\n padding-top: $y;\n padding-bottom: $y;\n }\n }\n",
|
|
63541
63547
|
"line": {
|
|
63542
|
-
"start":
|
|
63543
|
-
"end":
|
|
63548
|
+
"start": 255,
|
|
63549
|
+
"end": 281
|
|
63544
63550
|
}
|
|
63545
63551
|
}
|
|
63546
63552
|
},
|
|
@@ -64091,8 +64097,8 @@
|
|
|
64091
64097
|
"name": "set-widths",
|
|
64092
64098
|
"code": "\n $widths: utils.map-merge($widths, $changes, $merge-mode) !global;\n",
|
|
64093
64099
|
"line": {
|
|
64094
|
-
"start":
|
|
64095
|
-
"end":
|
|
64100
|
+
"start": 75,
|
|
64101
|
+
"end": 77
|
|
64096
64102
|
}
|
|
64097
64103
|
}
|
|
64098
64104
|
},
|
|
@@ -64103,8 +64109,8 @@
|
|
|
64103
64109
|
"name": "set-max-widths",
|
|
64104
64110
|
"code": "\n $max-widths: utils.map-merge($max-widths, $changes, $merge-mode) !global;\n",
|
|
64105
64111
|
"line": {
|
|
64106
|
-
"start":
|
|
64107
|
-
"end":
|
|
64112
|
+
"start": 113,
|
|
64113
|
+
"end": 115
|
|
64108
64114
|
}
|
|
64109
64115
|
}
|
|
64110
64116
|
},
|
|
@@ -64115,8 +64121,8 @@
|
|
|
64115
64121
|
"name": "set-containers",
|
|
64116
64122
|
"code": "\n $containers: utils.map-merge($containers, $changes, $merge-mode) !global;\n",
|
|
64117
64123
|
"line": {
|
|
64118
|
-
"start":
|
|
64119
|
-
"end":
|
|
64124
|
+
"start": 146,
|
|
64125
|
+
"end": 148
|
|
64120
64126
|
}
|
|
64121
64127
|
}
|
|
64122
64128
|
},
|