@ulu/frontend 0.6.27 → 0.6.28
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
|
@@ -20126,10 +20126,10 @@
|
|
|
20126
20126
|
"context": {
|
|
20127
20127
|
"type": "mixin",
|
|
20128
20128
|
"name": "styles",
|
|
20129
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20129
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20130
20130
|
"line": {
|
|
20131
20131
|
"start": 72,
|
|
20132
|
-
"end":
|
|
20132
|
+
"end": 154
|
|
20133
20133
|
}
|
|
20134
20134
|
}
|
|
20135
20135
|
},
|
|
@@ -20138,10 +20138,10 @@
|
|
|
20138
20138
|
"context": {
|
|
20139
20139
|
"type": "mixin",
|
|
20140
20140
|
"name": "styles",
|
|
20141
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20141
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20142
20142
|
"line": {
|
|
20143
20143
|
"start": 72,
|
|
20144
|
-
"end":
|
|
20144
|
+
"end": 154
|
|
20145
20145
|
}
|
|
20146
20146
|
}
|
|
20147
20147
|
},
|
|
@@ -20150,10 +20150,10 @@
|
|
|
20150
20150
|
"context": {
|
|
20151
20151
|
"type": "mixin",
|
|
20152
20152
|
"name": "styles",
|
|
20153
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20153
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20154
20154
|
"line": {
|
|
20155
20155
|
"start": 72,
|
|
20156
|
-
"end":
|
|
20156
|
+
"end": 154
|
|
20157
20157
|
}
|
|
20158
20158
|
}
|
|
20159
20159
|
},
|
|
@@ -20162,10 +20162,10 @@
|
|
|
20162
20162
|
"context": {
|
|
20163
20163
|
"type": "mixin",
|
|
20164
20164
|
"name": "styles",
|
|
20165
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20165
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20166
20166
|
"line": {
|
|
20167
20167
|
"start": 72,
|
|
20168
|
-
"end":
|
|
20168
|
+
"end": 154
|
|
20169
20169
|
}
|
|
20170
20170
|
}
|
|
20171
20171
|
},
|
|
@@ -20174,10 +20174,10 @@
|
|
|
20174
20174
|
"context": {
|
|
20175
20175
|
"type": "mixin",
|
|
20176
20176
|
"name": "styles",
|
|
20177
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20177
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20178
20178
|
"line": {
|
|
20179
20179
|
"start": 72,
|
|
20180
|
-
"end":
|
|
20180
|
+
"end": 154
|
|
20181
20181
|
}
|
|
20182
20182
|
}
|
|
20183
20183
|
},
|
|
@@ -20186,10 +20186,10 @@
|
|
|
20186
20186
|
"context": {
|
|
20187
20187
|
"type": "mixin",
|
|
20188
20188
|
"name": "styles",
|
|
20189
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20189
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20190
20190
|
"line": {
|
|
20191
20191
|
"start": 72,
|
|
20192
|
-
"end":
|
|
20192
|
+
"end": 154
|
|
20193
20193
|
}
|
|
20194
20194
|
}
|
|
20195
20195
|
},
|
|
@@ -20198,10 +20198,10 @@
|
|
|
20198
20198
|
"context": {
|
|
20199
20199
|
"type": "mixin",
|
|
20200
20200
|
"name": "styles",
|
|
20201
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20201
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20202
20202
|
"line": {
|
|
20203
20203
|
"start": 72,
|
|
20204
|
-
"end":
|
|
20204
|
+
"end": 154
|
|
20205
20205
|
}
|
|
20206
20206
|
}
|
|
20207
20207
|
},
|
|
@@ -20210,10 +20210,10 @@
|
|
|
20210
20210
|
"context": {
|
|
20211
20211
|
"type": "mixin",
|
|
20212
20212
|
"name": "styles",
|
|
20213
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20213
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20214
20214
|
"line": {
|
|
20215
20215
|
"start": 72,
|
|
20216
|
-
"end":
|
|
20216
|
+
"end": 154
|
|
20217
20217
|
}
|
|
20218
20218
|
}
|
|
20219
20219
|
},
|
|
@@ -20222,10 +20222,10 @@
|
|
|
20222
20222
|
"context": {
|
|
20223
20223
|
"type": "mixin",
|
|
20224
20224
|
"name": "styles",
|
|
20225
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20225
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20226
20226
|
"line": {
|
|
20227
20227
|
"start": 72,
|
|
20228
|
-
"end":
|
|
20228
|
+
"end": 154
|
|
20229
20229
|
}
|
|
20230
20230
|
}
|
|
20231
20231
|
},
|
|
@@ -20234,10 +20234,10 @@
|
|
|
20234
20234
|
"context": {
|
|
20235
20235
|
"type": "mixin",
|
|
20236
20236
|
"name": "styles",
|
|
20237
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20237
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20238
20238
|
"line": {
|
|
20239
20239
|
"start": 72,
|
|
20240
|
-
"end":
|
|
20240
|
+
"end": 154
|
|
20241
20241
|
}
|
|
20242
20242
|
}
|
|
20243
20243
|
},
|
|
@@ -20246,10 +20246,10 @@
|
|
|
20246
20246
|
"context": {
|
|
20247
20247
|
"type": "mixin",
|
|
20248
20248
|
"name": "styles",
|
|
20249
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20249
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20250
20250
|
"line": {
|
|
20251
20251
|
"start": 72,
|
|
20252
|
-
"end":
|
|
20252
|
+
"end": 154
|
|
20253
20253
|
}
|
|
20254
20254
|
}
|
|
20255
20255
|
},
|
|
@@ -20258,10 +20258,10 @@
|
|
|
20258
20258
|
"context": {
|
|
20259
20259
|
"type": "mixin",
|
|
20260
20260
|
"name": "styles",
|
|
20261
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20261
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20262
20262
|
"line": {
|
|
20263
20263
|
"start": 72,
|
|
20264
|
-
"end":
|
|
20264
|
+
"end": 154
|
|
20265
20265
|
}
|
|
20266
20266
|
}
|
|
20267
20267
|
},
|
|
@@ -20270,10 +20270,10 @@
|
|
|
20270
20270
|
"context": {
|
|
20271
20271
|
"type": "mixin",
|
|
20272
20272
|
"name": "styles",
|
|
20273
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20273
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20274
20274
|
"line": {
|
|
20275
20275
|
"start": 72,
|
|
20276
|
-
"end":
|
|
20276
|
+
"end": 154
|
|
20277
20277
|
}
|
|
20278
20278
|
}
|
|
20279
20279
|
},
|
|
@@ -20282,10 +20282,10 @@
|
|
|
20282
20282
|
"context": {
|
|
20283
20283
|
"type": "mixin",
|
|
20284
20284
|
"name": "styles",
|
|
20285
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20285
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20286
20286
|
"line": {
|
|
20287
20287
|
"start": 72,
|
|
20288
|
-
"end":
|
|
20288
|
+
"end": 154
|
|
20289
20289
|
}
|
|
20290
20290
|
}
|
|
20291
20291
|
},
|
|
@@ -20294,10 +20294,10 @@
|
|
|
20294
20294
|
"context": {
|
|
20295
20295
|
"type": "mixin",
|
|
20296
20296
|
"name": "styles",
|
|
20297
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20297
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20298
20298
|
"line": {
|
|
20299
20299
|
"start": 72,
|
|
20300
|
-
"end":
|
|
20300
|
+
"end": 154
|
|
20301
20301
|
}
|
|
20302
20302
|
}
|
|
20303
20303
|
},
|
|
@@ -20306,10 +20306,10 @@
|
|
|
20306
20306
|
"context": {
|
|
20307
20307
|
"type": "mixin",
|
|
20308
20308
|
"name": "styles",
|
|
20309
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20309
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20310
20310
|
"line": {
|
|
20311
20311
|
"start": 72,
|
|
20312
|
-
"end":
|
|
20312
|
+
"end": 154
|
|
20313
20313
|
}
|
|
20314
20314
|
}
|
|
20315
20315
|
},
|
|
@@ -20318,10 +20318,10 @@
|
|
|
20318
20318
|
"context": {
|
|
20319
20319
|
"type": "mixin",
|
|
20320
20320
|
"name": "styles",
|
|
20321
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20321
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20322
20322
|
"line": {
|
|
20323
20323
|
"start": 72,
|
|
20324
|
-
"end":
|
|
20324
|
+
"end": 154
|
|
20325
20325
|
}
|
|
20326
20326
|
}
|
|
20327
20327
|
},
|
|
@@ -20330,10 +20330,10 @@
|
|
|
20330
20330
|
"context": {
|
|
20331
20331
|
"type": "mixin",
|
|
20332
20332
|
"name": "styles",
|
|
20333
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20333
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20334
20334
|
"line": {
|
|
20335
20335
|
"start": 72,
|
|
20336
|
-
"end":
|
|
20336
|
+
"end": 154
|
|
20337
20337
|
}
|
|
20338
20338
|
}
|
|
20339
20339
|
},
|
|
@@ -20342,10 +20342,10 @@
|
|
|
20342
20342
|
"context": {
|
|
20343
20343
|
"type": "mixin",
|
|
20344
20344
|
"name": "styles",
|
|
20345
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20345
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
20346
20346
|
"line": {
|
|
20347
20347
|
"start": 72,
|
|
20348
|
-
"end":
|
|
20348
|
+
"end": 154
|
|
20349
20349
|
}
|
|
20350
20350
|
}
|
|
20351
20351
|
},
|
|
@@ -38841,10 +38841,10 @@
|
|
|
38841
38841
|
"context": {
|
|
38842
38842
|
"type": "mixin",
|
|
38843
38843
|
"name": "styles",
|
|
38844
|
-
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list;\n }\n\n #{ $selector-item } {\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
38844
|
+
"code": "\n $prefix: selector.class(\"counter-list\");\n $prefix-item: sassSelector.parse(\"#{ $prefix }__item\");\n $extra-selector: get(\"extra-selector\");\n\n $selector: $prefix;\n $selector-item: sassSelector.parse(\"#{ $prefix } > li, #{ $prefix-item }\");\n\n @if ($extra-selector) {\n $selector: sassSelector.parse(\"#{ $prefix }, #{ $extra-selector }\");\n $selector-item: sassSelector.parse(\"#{ $selector-item }, #{ $extra-selector } > li\");\n }\n\n #{ $selector } {\n margin: get(\"margin\");\n counter-reset: ulu-counter-list var(--ulu-counter-list-start, 0);\n }\n\n #{ $selector-item } {\n // In case there are lists within (since we're using common var name)\n --ulu-counter-list-start: 0;\n\n $width: get(\"counter-width\");\n $height: utils.fallback(get(\"counter-height\"), $width);\n\n display: flex;\n gap: get(\"counter-gap\");\n align-items: get(\"align-items\");\n margin: get(\"item-margin\");\n min-height: $height;\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n width: $width;\n height: $height;\n flex: 0 0 $width;\n counter-increment: ulu-counter-list;\n content: counter(ulu-counter-list, get(\"counter-style\"));\n font-size: get(\"counter-font-size\");\n font-family: get(\"counter-font-family\");\n font-weight: get(\"counter-font-weight\");\n color: color.get(get(\"counter-color\"));\n background-color: color.get(get(\"counter-background-color\"));\n border-radius: get(\"counter-border-radius\");\n }\n\n // Keeping this could be useful\n // but we need to think about how its setup\n // - Probably should be a modifier (choice)\n // - May need either option for how align-items is set (flex-start vs center)\n // - This could be useful when used in grid\n // - May need to be pervasive and not linked to a breakpoint (alternate style)\n // - It's also just useful to know you could override the layout like this \n // to get useful variations (maybe we don't need to include it but users \n // can do specific)\n // @if ( get(\"counter-mobile-toggle\") ) {\n // @include breakpoint.max(\"small\") {\n // padding-left: 0;\n // padding-top: calc(get(\"counter-width\") + get(\"counter-gap-mobile\"));\n // flex-direction: column;\n // align-items: center;\n // }\n // }\n }\n\n // Modifiers\n #{ $prefix }--alphabetical {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, upper-alpha);\n }\n }\n #{ $prefix }--numeric {\n & > li::before,\n & > #{ $prefix-item }::before {\n content: counter(ulu-counter-list, numeric);\n }\n }\n #{ $prefix }--no-reset {\n counter-reset: none;\n }\n",
|
|
38845
38845
|
"line": {
|
|
38846
38846
|
"start": 72,
|
|
38847
|
-
"end":
|
|
38847
|
+
"end": 154
|
|
38848
38848
|
}
|
|
38849
38849
|
},
|
|
38850
38850
|
"demo": {
|