@stackoverflow/stacks 1.8.0 → 1.9.1

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.
Files changed (137) hide show
  1. package/README.md +161 -153
  2. package/dist/{controllers/s-banner.d.ts → components/banner/banner.d.ts} +1 -1
  3. package/dist/{controllers/s-expandable-control.d.ts → components/expandable/expandable.d.ts} +1 -1
  4. package/dist/{controllers/s-modal.d.ts → components/modal/modal.d.ts} +1 -1
  5. package/dist/{controllers/s-navigation-tablist.d.ts → components/navigation/navigation.d.ts} +1 -1
  6. package/dist/{controllers/s-popover.d.ts → components/popover/popover.d.ts} +1 -1
  7. package/dist/{controllers/s-tooltip.d.ts → components/popover/tooltip.d.ts} +1 -1
  8. package/dist/components/table/table.d.ts +30 -0
  9. package/dist/{controllers/s-toast.d.ts → components/toast/toast.d.ts} +1 -1
  10. package/dist/{controllers/s-uploader.d.ts → components/uploader/uploader.d.ts} +1 -1
  11. package/dist/controllers.d.ts +9 -0
  12. package/dist/css/stacks.css +2063 -1994
  13. package/dist/css/stacks.min.css +1 -1
  14. package/dist/index.d.ts +1 -1
  15. package/dist/js/stacks.js +1465 -1436
  16. package/dist/js/stacks.min.js +1 -1
  17. package/lib/{css/atomic/borders.less → atomic/border.less} +397 -379
  18. package/lib/{css/atomic/colors.less → atomic/color.less} +210 -210
  19. package/lib/{css/atomic → atomic}/flex.less +426 -426
  20. package/lib/{css/atomic → atomic}/gap.less +44 -44
  21. package/lib/{css/atomic → atomic}/grid.less +139 -139
  22. package/lib/{css/atomic → atomic}/misc.less +343 -343
  23. package/lib/{css/atomic → atomic}/spacing.less +342 -342
  24. package/lib/{css/atomic → atomic}/typography.less +267 -267
  25. package/lib/{css/atomic → atomic}/width-height.less +194 -194
  26. package/lib/{css/base → base}/body.less +44 -44
  27. package/lib/{css/base → base}/configuration-static.less +61 -61
  28. package/lib/{css/base → base}/fieldset.less +5 -5
  29. package/lib/{css/base/icons.less → base/icon.less} +11 -20
  30. package/lib/{css/base/internals.less → base/internal.less} +220 -220
  31. package/lib/{css/base → base}/reset-meyer.less +64 -64
  32. package/lib/{css/base → base}/reset-normalize.less +449 -449
  33. package/lib/{css/base → base}/reset.less +20 -20
  34. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +21 -0
  35. package/lib/{css/components → components/activity-indicator}/activity-indicator.less +40 -40
  36. package/lib/components/activity-indicator/activity-indicator.visual.test.ts +23 -0
  37. package/lib/{css/components/anchors.less → components/anchor/anchor.less} +61 -61
  38. package/lib/components/avatar/avatar.a11y.test.ts +36 -0
  39. package/lib/{css/components/avatars.less → components/avatar/avatar.less} +108 -108
  40. package/lib/components/avatar/avatar.visual.test.ts +54 -0
  41. package/lib/components/award-bling/award-bling.a11y.test.ts +17 -0
  42. package/lib/{css/components → components/award-bling}/award-bling.less +31 -31
  43. package/lib/components/award-bling/award-bling.visual.test.ts +26 -0
  44. package/lib/{css/components/badges.less → components/badge/badge.less} +251 -251
  45. package/lib/components/banner/banner.a11y.test.ts +37 -0
  46. package/lib/components/banner/banner.less +51 -0
  47. package/lib/{test/s-banner.test.ts → components/banner/banner.test.ts} +73 -73
  48. package/lib/{ts/controllers/s-banner.ts → components/banner/banner.ts} +149 -149
  49. package/lib/components/banner/banner.visual.test.ts +37 -0
  50. package/lib/components/block-link/block-link.a11y.test.ts +68 -0
  51. package/lib/{css/components → components/block-link}/block-link.less +80 -80
  52. package/lib/components/block-link/block-link.visual.test.ts +61 -0
  53. package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +37 -0
  54. package/lib/{css/components → components/breadcrumbs}/breadcrumbs.less +41 -41
  55. package/lib/components/breadcrumbs/breadcrumbs.visual.test.ts +37 -0
  56. package/lib/components/button/button.a11y.test.ts +32 -0
  57. package/lib/{css/components/buttons.less → components/button/button.less} +502 -501
  58. package/lib/components/button/button.visual.test.ts +52 -0
  59. package/lib/{css/components/button-groups.less → components/button-group/button-group.less} +83 -83
  60. package/lib/components/card/card.a11y.test.ts +13 -0
  61. package/lib/{css/components/cards.less → components/card/card.less} +29 -29
  62. package/lib/components/card/card.visual.test.ts +54 -0
  63. package/lib/components/check-control/check-control.less +17 -0
  64. package/lib/components/check-group/check-group.less +19 -0
  65. package/lib/{css/components/checkboxes-radios.less → components/checkbox_radio/checkbox_radio.less} +158 -158
  66. package/lib/{css/components/code-blocks.less → components/code-block/code-block.less} +116 -116
  67. package/lib/{css/components → components/description}/description.less +9 -9
  68. package/lib/{css/components/empty-states.less → components/empty-state/empty-state.less} +16 -16
  69. package/lib/{css/components → components/expandable}/expandable.less +118 -115
  70. package/lib/components/expandable/expandable.test.ts +51 -0
  71. package/lib/{ts/controllers/s-expandable-control.ts → components/expandable/expandable.ts} +238 -238
  72. package/lib/components/input-fill/input-fill.less +35 -0
  73. package/lib/components/input-icon/input-icon.less +45 -0
  74. package/lib/components/input-message/input-message.less +48 -0
  75. package/lib/{css/components/inputs.less → components/input_textarea/input_textarea.less} +166 -297
  76. package/lib/{css/components/labels.less → components/label/label.less} +111 -111
  77. package/lib/{css/components → components/link}/link.less +119 -119
  78. package/lib/{css/components/link-previews.less → components/link-preview/link-preview.less} +139 -139
  79. package/lib/{css/components → components/menu}/menu.less +41 -41
  80. package/lib/{css/components/modals.less → components/modal/modal.less} +113 -113
  81. package/lib/{ts/controllers/s-modal.ts → components/modal/modal.ts} +379 -379
  82. package/lib/{css/components → components/navigation}/navigation.less +134 -134
  83. package/lib/{ts/controllers/s-navigation-tablist.ts → components/navigation/navigation.ts} +128 -128
  84. package/lib/{css/components/notices.less → components/notice/notice.less} +203 -292
  85. package/lib/{css/components/page-titles.less → components/page-title/page-title.less} +51 -51
  86. package/lib/{css/components → components/pagination}/pagination.less +52 -52
  87. package/lib/{css/components/popovers.less → components/popover/popover.less} +148 -147
  88. package/lib/{ts/controllers/s-popover.ts → components/popover/popover.ts} +651 -651
  89. package/lib/{test/s-tooltip.test.ts → components/popover/tooltip.test.ts} +62 -62
  90. package/lib/{ts/controllers/s-tooltip.ts → components/popover/tooltip.ts} +343 -343
  91. package/lib/{test/s-tooltip.visual.test.ts → components/popover/tooltip.visual.test.ts} +31 -31
  92. package/lib/{css/components → components/post-summary}/post-summary.less +415 -415
  93. package/lib/{css/components/progress-bars.less → components/progress-bar/progress-bar.less} +291 -291
  94. package/lib/{css/components → components/prose}/prose.less +452 -452
  95. package/lib/{css/components → components/select}/select.less +148 -148
  96. package/lib/{css/components/sidebar-widgets.less → components/sidebar-widget/sidebar-widget.less} +257 -259
  97. package/lib/{css/components → components/spinner}/spinner.less +103 -103
  98. package/lib/{css/components → components/table}/table.less +307 -297
  99. package/lib/components/table/table.test.ts +366 -0
  100. package/lib/{ts/controllers/s-table.ts → components/table/table.ts} +296 -263
  101. package/lib/components/table-container/table-container.less +4 -0
  102. package/lib/{css/components/tags.less → components/tag/tag.less} +213 -213
  103. package/lib/components/toast/toast.less +35 -0
  104. package/lib/{test/s-toast.test.ts → components/toast/toast.test.ts} +63 -63
  105. package/lib/{ts/controllers/s-toast.ts → components/toast/toast.ts} +357 -357
  106. package/lib/components/toast/toast.visual.test.ts +27 -0
  107. package/lib/{css/components/toggle-switches.less → components/toggle-switch/toggle-switch.less} +110 -110
  108. package/lib/{css/components → components/topbar}/topbar.less +436 -435
  109. package/lib/{css/components → components/uploader}/uploader.less +195 -195
  110. package/lib/{ts/controllers/s-uploader.ts → components/uploader/uploader.ts} +205 -205
  111. package/lib/{css/components/user-cards.less → components/user-card/user-card.less} +129 -129
  112. package/lib/controllers.ts +33 -0
  113. package/lib/{css/exports → exports}/constants-colors.less +1112 -1111
  114. package/lib/{css/exports → exports}/constants-helpers.less +108 -108
  115. package/lib/{css/exports → exports}/constants-type.less +153 -153
  116. package/lib/{css/exports → exports}/exports.less +15 -15
  117. package/lib/{css/exports → exports}/mixins.less +299 -299
  118. package/lib/{ts/index.ts → index.ts} +32 -32
  119. package/lib/{css/input-utils.less → input-utils.less} +44 -44
  120. package/lib/{css/stacks-dynamic.less → stacks-dynamic.less} +24 -25
  121. package/lib/stacks-static.less +93 -0
  122. package/lib/{css/stacks.less → stacks.less} +13 -13
  123. package/lib/{ts/stacks.ts → stacks.ts} +113 -113
  124. package/lib/test/open-wc-testing-patch.d.ts +26 -0
  125. package/lib/test/test-utils.ts +466 -0
  126. package/lib/tsconfig.build.json +4 -0
  127. package/lib/tsconfig.json +16 -13
  128. package/package.json +106 -105
  129. package/dist/controllers/index.d.ts +0 -9
  130. package/dist/controllers/s-table.d.ts +0 -8
  131. package/lib/css/stacks-static.less +0 -87
  132. package/lib/test/s-avatar.a11y.test.ts +0 -77
  133. package/lib/test/s-banner.visual.test.ts +0 -61
  134. package/lib/test/s-btn.a11y.test.ts +0 -123
  135. package/lib/test/s-btn.visual.test.ts +0 -16
  136. package/lib/test/s-toast.visual.test.ts +0 -48
  137. package/lib/ts/controllers/index.ts +0 -17
@@ -1,220 +1,220 @@
1
- /* stylelint-disable */
2
- #stacks-internals() {
3
- #load-static-config() {
4
- #stacks-config-static();
5
- }
6
-
7
- // ===========================================================================
8
- // -- RESPONSIVE (modern)
9
- // #responsify renders a plain class as well as its responsive counterparts.
10
- //
11
- // Usage example:
12
- //
13
- // #stacks-internals #responsify('.d-none', { display: none !important; });
14
- //
15
- // ---------------------------------------------------------------------------
16
-
17
- #responsify(@class, @rules) {
18
- @nodot-s: replace(@class, "^\.", "");
19
- @nodot: ~"@{nodot-s}";
20
-
21
- .@{nodot} {
22
- @rules();
23
- }
24
-
25
- #stacks-internals-collect-large() {
26
- .lg\:@{nodot} {
27
- @rules();
28
- };
29
- }
30
- #stacks-internals-collect-medium() {
31
- .md\:@{nodot} {
32
- @rules();
33
- };
34
- }
35
- #stacks-internals-collect-small() {
36
- .sm\:@{nodot} {
37
- @rules();
38
- };
39
- }
40
- }
41
-
42
- // ===========================================================================
43
- // -- RESPONSIVE
44
- // The three #screen-XX mixins wrap the given rules in the appropriate
45
- // media queries and (if applicable) selector prefixes for all breakpoint
46
- // groups that have been defined in the static configuration section.
47
- //
48
- // Usage example:
49
- //
50
- // .lg\:comic-sans {
51
- // #stacks-internals #screen-lg({
52
- // font-family: "Comic Sans MS";
53
- // });
54
- // }
55
- //
56
- // If @force-selector is `true`, the @rules will be evaluated inside a `html { ... }`
57
- // block if a breakpoint group doesn't have a selector. You should only use this if you
58
- // need to apply CSS to the root element itself:
59
- //
60
- // #stacks-internals #screen-lg({
61
- // &, body {
62
- // font-size: 77px;
63
- // }
64
- // }, @force-selector: true);
65
- //
66
- // The above sets the font size on <html> and <body> at the appropriate widths, regardless
67
- // of whether responsiveness was configured with or without selectors.
68
- // ---------------------------------------------------------------------------
69
-
70
- #screen-lg(@rules, @force-selector: false) {
71
- #stacks-internals #load-static-config();
72
- #stacks-internals #responsive-stuff(0, @rules, @breakpoints, 1, @force-selector);
73
- }
74
- #screen-md(@rules, @force-selector: false) {
75
- #stacks-internals #load-static-config();
76
- #stacks-internals #responsive-stuff(1, @rules, @breakpoints, 1, @force-selector);
77
- }
78
- #screen-sm(@rules, @force-selector: false) {
79
- #stacks-internals #load-static-config();
80
- #stacks-internals #responsive-stuff(2, @rules, @breakpoints, 1, @force-selector);
81
- }
82
-
83
- // @bp-index is 0 (large), 1 (medium), or 2 (small). @start-index is the index into the @breakpoints config option
84
- // which is increased recursively to exhaust the whole list.
85
- #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index, @force-selector: false) when (@start-index < length(@breakpoints)) {
86
-
87
- // If the first list element is a string, it's a selector that is prepended to the responsive class
88
- & when (isstring(extract(@breakpoints, @start-index))) {
89
-
90
- // the actual breakpoint; "+1" to skip the (selector) string
91
- @bp: extract(@breakpoints, @start-index + @bp-index + 1);
92
-
93
- // convert the selector string into an identifier (i.e. remove the quotes)
94
- @sel-s: extract(@breakpoints, @start-index);
95
- @sel: ~"@{sel-s}";
96
-
97
- @media (max-width: (@bp)) {
98
- @{sel} & {
99
- @rules();
100
- }
101
- }
102
-
103
- // recursively descend to handle the next breakpoint group ("+4" for the selector string and the three breakpoint values)
104
- #stacks-internals #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index + 4, @force-selector)
105
- }
106
-
107
- // If the first list element is a number (i.e. pixel value), there is no selector string
108
- & when (isnumber(extract(@breakpoints, @start-index))) {
109
-
110
- // the actual breakpoint
111
- @bp: extract(@breakpoints, @start-index + @bp-index);
112
-
113
- & when not (@force-selector) {
114
- @media (max-width: (@bp)) {
115
- @rules();
116
- }
117
- }
118
-
119
- & when (@force-selector) {
120
- @media (max-width: (@bp)) {
121
- html & {
122
- @rules();
123
- }
124
- }
125
- }
126
-
127
- // recursively descend to handle the next breakpoint group ("+3" for the three breakpoint values)
128
- #stacks-internals #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index + 3, @force-selector)
129
- }
130
- }
131
-
132
- // ===========================================================================
133
- // -- AUTO-GENERATING
134
- // #build-classes is a tool for auto-generating a bunch of related, usually atomic,
135
- // classes.
136
- // The first argument is optional; if given, it must be `responsive`, in which case
137
- // the corresponding responsive classes will be generated as well.
138
- // The next argument, @class-prefix, is the prefix of the generated class names,
139
- // including the dot.
140
- // The @rules argument is a detached ruleset that must contain a mixin called .template()
141
- // which takes a single argument.
142
- // The @values argument is a list of values that will be passed to the template.
143
- //
144
- // The final generated class name consists of
145
- // 1) the given prefix,
146
- // 2a) if the value is a negative number, the letter "n",
147
- // 2b) if the value is not a number, a dash "-"
148
- // 3) the actual value, stripped of any unit (if applicable).
149
- //
150
- // Usage example:
151
- //
152
- // #stacks-internals #build-classes(
153
- // '.ml',
154
- // { .template(@value) { margin-left: @value; } },
155
- // -50%, auto, 20px
156
- // )
157
- //
158
- // will generate:
159
- //
160
- // .mln50 { margin-left: -50%; }
161
- // .ml-auto { margin-left: auto; }
162
- // .ml20 { margin-left: 20px; }
163
- //
164
- // ---------------------------------------------------------------------------
165
-
166
-
167
- #build-classes(@class-prefix, @rules, @values) {
168
- #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, false, @values);
169
- }
170
- #build-classes(responsive, @class-prefix, @rules, @values) {
171
- #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, true, @values);
172
- }
173
- #build-classes-with-start-index(@class-prefix, @rules, @start-index, @responsive, @values) when (@start-index <= length(@values)) {
174
- @val: extract(@values, @start-index);
175
- & when (isnumber(@val)) {
176
- @unitless: unit(@val);
177
- & when (@unitless < 0) {
178
- @abs: abs(@unitless);
179
- @class-name: ~"@{class-prefix}n@{abs}";
180
-
181
- & when not (@responsive) {
182
- @{class-name} { @rules(); .template(@val); }
183
- }
184
-
185
- & when (@responsive) {
186
- #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
187
- }
188
-
189
- }
190
- & when (@unitless >= 0) {
191
- @class-name: ~"@{class-prefix}@{unitless}";
192
- & when not (@responsive) {
193
- @{class-name} { @rules(); .template(@val); }
194
- }
195
-
196
- & when (@responsive) {
197
- #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
198
- }
199
- }
200
- }
201
- & when not (isnumber(@val)) {
202
- @class-name: ~"@{class-prefix}-@{val}";
203
- & when not (@responsive) {
204
- @{class-name} { @rules(); .template(@val); }
205
- }
206
-
207
- & when (@responsive) {
208
- #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
209
- }
210
- }
211
-
212
- #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, @start-index + 1, @responsive, @values);
213
- }
214
-
215
- #bullet-arrow(@col) {
216
- @image: '<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 7 10" xmlns="http://www.w3.org/2000/svg"><path d="m0.72153 0.68446 4.1336 4.3077-4.1336 4.3077" fill="none" stroke="@{col}" stroke-width="2"/></svg>';
217
- @encoded-image: escape(@image);
218
- background-image: url("data:image/svg+xml,@{encoded-image}");
219
- }
220
- }
1
+ /* stylelint-disable */
2
+ #stacks-internals() {
3
+ #load-static-config() {
4
+ #stacks-config-static();
5
+ }
6
+
7
+ // ===========================================================================
8
+ // -- RESPONSIVE (modern)
9
+ // #responsify renders a plain class as well as its responsive counterparts.
10
+ //
11
+ // Usage example:
12
+ //
13
+ // #stacks-internals #responsify('.d-none', { display: none !important; });
14
+ //
15
+ // ---------------------------------------------------------------------------
16
+
17
+ #responsify(@class, @rules) {
18
+ @nodot-s: replace(@class, "^\.", "");
19
+ @nodot: ~"@{nodot-s}";
20
+
21
+ .@{nodot} {
22
+ @rules();
23
+ }
24
+
25
+ #stacks-internals-collect-large() {
26
+ .lg\:@{nodot} {
27
+ @rules();
28
+ };
29
+ }
30
+ #stacks-internals-collect-medium() {
31
+ .md\:@{nodot} {
32
+ @rules();
33
+ };
34
+ }
35
+ #stacks-internals-collect-small() {
36
+ .sm\:@{nodot} {
37
+ @rules();
38
+ };
39
+ }
40
+ }
41
+
42
+ // ===========================================================================
43
+ // -- RESPONSIVE
44
+ // The three #screen-XX mixins wrap the given rules in the appropriate
45
+ // media queries and (if applicable) selector prefixes for all breakpoint
46
+ // groups that have been defined in the static configuration section.
47
+ //
48
+ // Usage example:
49
+ //
50
+ // .lg\:comic-sans {
51
+ // #stacks-internals #screen-lg({
52
+ // font-family: "Comic Sans MS";
53
+ // });
54
+ // }
55
+ //
56
+ // If @force-selector is `true`, the @rules will be evaluated inside a `html { ... }`
57
+ // block if a breakpoint group doesn't have a selector. You should only use this if you
58
+ // need to apply CSS to the root element itself:
59
+ //
60
+ // #stacks-internals #screen-lg({
61
+ // &, body {
62
+ // font-size: 77px;
63
+ // }
64
+ // }, @force-selector: true);
65
+ //
66
+ // The above sets the font size on <html> and <body> at the appropriate widths, regardless
67
+ // of whether responsiveness was configured with or without selectors.
68
+ // ---------------------------------------------------------------------------
69
+
70
+ #screen-lg(@rules, @force-selector: false) {
71
+ #stacks-internals #load-static-config();
72
+ #stacks-internals #responsive-stuff(0, @rules, @breakpoints, 1, @force-selector);
73
+ }
74
+ #screen-md(@rules, @force-selector: false) {
75
+ #stacks-internals #load-static-config();
76
+ #stacks-internals #responsive-stuff(1, @rules, @breakpoints, 1, @force-selector);
77
+ }
78
+ #screen-sm(@rules, @force-selector: false) {
79
+ #stacks-internals #load-static-config();
80
+ #stacks-internals #responsive-stuff(2, @rules, @breakpoints, 1, @force-selector);
81
+ }
82
+
83
+ // @bp-index is 0 (large), 1 (medium), or 2 (small). @start-index is the index into the @breakpoints config option
84
+ // which is increased recursively to exhaust the whole list.
85
+ #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index, @force-selector: false) when (@start-index < length(@breakpoints)) {
86
+
87
+ // If the first list element is a string, it's a selector that is prepended to the responsive class
88
+ & when (isstring(extract(@breakpoints, @start-index))) {
89
+
90
+ // the actual breakpoint; "+1" to skip the (selector) string
91
+ @bp: extract(@breakpoints, @start-index + @bp-index + 1);
92
+
93
+ // convert the selector string into an identifier (i.e. remove the quotes)
94
+ @sel-s: extract(@breakpoints, @start-index);
95
+ @sel: ~"@{sel-s}";
96
+
97
+ @media (max-width: (@bp)) {
98
+ @{sel} & {
99
+ @rules();
100
+ }
101
+ }
102
+
103
+ // recursively descend to handle the next breakpoint group ("+4" for the selector string and the three breakpoint values)
104
+ #stacks-internals #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index + 4, @force-selector)
105
+ }
106
+
107
+ // If the first list element is a number (i.e. pixel value), there is no selector string
108
+ & when (isnumber(extract(@breakpoints, @start-index))) {
109
+
110
+ // the actual breakpoint
111
+ @bp: extract(@breakpoints, @start-index + @bp-index);
112
+
113
+ & when not (@force-selector) {
114
+ @media (max-width: (@bp)) {
115
+ @rules();
116
+ }
117
+ }
118
+
119
+ & when (@force-selector) {
120
+ @media (max-width: (@bp)) {
121
+ html & {
122
+ @rules();
123
+ }
124
+ }
125
+ }
126
+
127
+ // recursively descend to handle the next breakpoint group ("+3" for the three breakpoint values)
128
+ #stacks-internals #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index + 3, @force-selector)
129
+ }
130
+ }
131
+
132
+ // ===========================================================================
133
+ // -- AUTO-GENERATING
134
+ // #build-classes is a tool for auto-generating a bunch of related, usually atomic,
135
+ // classes.
136
+ // The first argument is optional; if given, it must be `responsive`, in which case
137
+ // the corresponding responsive classes will be generated as well.
138
+ // The next argument, @class-prefix, is the prefix of the generated class names,
139
+ // including the dot.
140
+ // The @rules argument is a detached ruleset that must contain a mixin called .template()
141
+ // which takes a single argument.
142
+ // The @values argument is a list of values that will be passed to the template.
143
+ //
144
+ // The final generated class name consists of
145
+ // 1) the given prefix,
146
+ // 2a) if the value is a negative number, the letter "n",
147
+ // 2b) if the value is not a number, a dash "-"
148
+ // 3) the actual value, stripped of any unit (if applicable).
149
+ //
150
+ // Usage example:
151
+ //
152
+ // #stacks-internals #build-classes(
153
+ // '.ml',
154
+ // { .template(@value) { margin-left: @value; } },
155
+ // -50%, auto, 20px
156
+ // )
157
+ //
158
+ // will generate:
159
+ //
160
+ // .mln50 { margin-left: -50%; }
161
+ // .ml-auto { margin-left: auto; }
162
+ // .ml20 { margin-left: 20px; }
163
+ //
164
+ // ---------------------------------------------------------------------------
165
+
166
+
167
+ #build-classes(@class-prefix, @rules, @values) {
168
+ #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, false, @values);
169
+ }
170
+ #build-classes(responsive, @class-prefix, @rules, @values) {
171
+ #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, true, @values);
172
+ }
173
+ #build-classes-with-start-index(@class-prefix, @rules, @start-index, @responsive, @values) when (@start-index <= length(@values)) {
174
+ @val: extract(@values, @start-index);
175
+ & when (isnumber(@val)) {
176
+ @unitless: unit(@val);
177
+ & when (@unitless < 0) {
178
+ @abs: abs(@unitless);
179
+ @class-name: ~"@{class-prefix}n@{abs}";
180
+
181
+ & when not (@responsive) {
182
+ @{class-name} { @rules(); .template(@val); }
183
+ }
184
+
185
+ & when (@responsive) {
186
+ #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
187
+ }
188
+
189
+ }
190
+ & when (@unitless >= 0) {
191
+ @class-name: ~"@{class-prefix}@{unitless}";
192
+ & when not (@responsive) {
193
+ @{class-name} { @rules(); .template(@val); }
194
+ }
195
+
196
+ & when (@responsive) {
197
+ #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
198
+ }
199
+ }
200
+ }
201
+ & when not (isnumber(@val)) {
202
+ @class-name: ~"@{class-prefix}-@{val}";
203
+ & when not (@responsive) {
204
+ @{class-name} { @rules(); .template(@val); }
205
+ }
206
+
207
+ & when (@responsive) {
208
+ #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
209
+ }
210
+ }
211
+
212
+ #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, @start-index + 1, @responsive, @values);
213
+ }
214
+
215
+ #bullet-arrow(@col) {
216
+ @image: '<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 7 10" xmlns="http://www.w3.org/2000/svg"><path d="m0.72153 0.68446 4.1336 4.3077-4.1336 4.3077" fill="none" stroke="@{col}" stroke-width="2"/></svg>';
217
+ @encoded-image: escape(@image);
218
+ background-image: url("data:image/svg+xml,@{encoded-image}");
219
+ }
220
+ }
@@ -1,64 +1,64 @@
1
- /* stylelint-disable */
2
- // ============================================================================
3
- // http://meyerweb.com/eric/tools/css/reset/
4
- // v2.0 | 20110126
5
- // License: none (public domain)
6
- // ----------------------------------------------------------------------------
7
- html, body, div, span, applet, object, iframe,
8
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
9
- a, abbr, acronym, address, big, cite, code,
10
- del, dfn, em, img, ins, kbd, q, s, samp,
11
- small, strike, strong, sub, sup, tt, var,
12
- b, u, i, center,
13
- dl, dt, dd, ol, ul, li,
14
- fieldset, form, label, legend,
15
- table, caption, tbody, tfoot, thead, tr, th, td,
16
- article, aside, canvas, details, embed,
17
- figure, figcaption, footer, header, hgroup,
18
- menu, nav, output, ruby, section, summary,
19
- time, mark, audio, video {
20
- margin: 0;
21
- padding: 0;
22
- border: 0;
23
- font: inherit;
24
- font-size: 100%;
25
- vertical-align: baseline;
26
- }
27
- /* HTML5 display-role reset for older browsers */
28
- article, aside, details, figcaption, figure,
29
- footer, header, hgroup, menu, nav, section {
30
- display: block;
31
- }
32
- body {
33
- line-height: 1;
34
- }
35
- ol, ul {
36
- list-style: none;
37
- }
38
- blockquote, q {
39
- quotes: none;
40
- }
41
- blockquote:before, blockquote:after,
42
- q:before, q:after {
43
- content: '';
44
- content: none;
45
- }
46
- table {
47
- border-collapse: collapse;
48
- border-spacing: 0;
49
- }
50
- /* the stuff below isn't in the original Eric Meyer reset */
51
- sub,
52
- sup {
53
- font-size: 80%;
54
- line-height: 1;
55
- vertical-align: sub;
56
- }
57
-
58
- sup {
59
- vertical-align: super;
60
- }
61
-
62
- button {
63
- margin: 0; /* for Safari */
64
- }
1
+ /* stylelint-disable */
2
+ // ============================================================================
3
+ // http://meyerweb.com/eric/tools/css/reset/
4
+ // v2.0 | 20110126
5
+ // License: none (public domain)
6
+ // ----------------------------------------------------------------------------
7
+ html, body, div, span, applet, object, iframe,
8
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
9
+ a, abbr, acronym, address, big, cite, code,
10
+ del, dfn, em, img, ins, kbd, q, s, samp,
11
+ small, strike, strong, sub, sup, tt, var,
12
+ b, u, i, center,
13
+ dl, dt, dd, ol, ul, li,
14
+ fieldset, form, label, legend,
15
+ table, caption, tbody, tfoot, thead, tr, th, td,
16
+ article, aside, canvas, details, embed,
17
+ figure, figcaption, footer, header, hgroup,
18
+ menu, nav, output, ruby, section, summary,
19
+ time, mark, audio, video {
20
+ margin: 0;
21
+ padding: 0;
22
+ border: 0;
23
+ font: inherit;
24
+ font-size: 100%;
25
+ vertical-align: baseline;
26
+ }
27
+ /* HTML5 display-role reset for older browsers */
28
+ article, aside, details, figcaption, figure,
29
+ footer, header, hgroup, menu, nav, section {
30
+ display: block;
31
+ }
32
+ body {
33
+ line-height: 1;
34
+ }
35
+ ol, ul {
36
+ list-style: none;
37
+ }
38
+ blockquote, q {
39
+ quotes: none;
40
+ }
41
+ blockquote:before, blockquote:after,
42
+ q:before, q:after {
43
+ content: '';
44
+ content: none;
45
+ }
46
+ table {
47
+ border-collapse: collapse;
48
+ border-spacing: 0;
49
+ }
50
+ /* the stuff below isn't in the original Eric Meyer reset */
51
+ sub,
52
+ sup {
53
+ font-size: 80%;
54
+ line-height: 1;
55
+ vertical-align: sub;
56
+ }
57
+
58
+ sup {
59
+ vertical-align: super;
60
+ }
61
+
62
+ button {
63
+ margin: 0; /* for Safari */
64
+ }