@stackoverflow/stacks 1.0.0 → 1.0.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.
- package/README.md +47 -47
- package/dist/css/stacks.css +108 -0
- package/dist/css/stacks.min.css +1 -1
- package/lib/css/atomic/borders.less +378 -378
- package/lib/css/atomic/colors.less +209 -209
- package/lib/css/atomic/flex.less +375 -375
- package/lib/css/atomic/grid.less +174 -174
- package/lib/css/atomic/misc.less +343 -343
- package/lib/css/atomic/spacing.less +332 -314
- package/lib/css/atomic/typography.less +273 -273
- package/lib/css/atomic/width-height.less +194 -194
- package/lib/css/base/body.less +44 -44
- package/lib/css/base/configuration-static.less +61 -61
- package/lib/css/base/icons.less +20 -20
- package/lib/css/base/internals.less +220 -220
- package/lib/css/base/reset-meyer.less +64 -64
- package/lib/css/base/reset-normalize.less +449 -449
- package/lib/css/base/reset.less +20 -20
- package/lib/css/components/activity-indicator.less +45 -45
- package/lib/css/components/avatars.less +189 -189
- package/lib/css/components/badges.less +209 -209
- package/lib/css/components/banners.less +80 -80
- package/lib/css/components/blank-states.less +26 -26
- package/lib/css/components/breadcrumbs.less +44 -44
- package/lib/css/components/button-groups.less +104 -104
- package/lib/css/components/buttons.less +665 -665
- package/lib/css/components/cards.less +44 -44
- package/lib/css/components/code-blocks.less +130 -130
- package/lib/css/components/collapsible.less +104 -104
- package/lib/css/components/inputs.less +728 -728
- package/lib/css/components/link-previews.less +136 -136
- package/lib/css/components/links.less +218 -218
- package/lib/css/components/menu.less +47 -47
- package/lib/css/components/modals.less +133 -133
- package/lib/css/components/navigation.less +146 -146
- package/lib/css/components/notices.less +233 -233
- package/lib/css/components/page-titles.less +60 -60
- package/lib/css/components/pagination.less +55 -55
- package/lib/css/components/popovers.less +197 -197
- package/lib/css/components/post-summary.less +425 -425
- package/lib/css/components/progress-bars.less +330 -330
- package/lib/css/components/prose.less +503 -503
- package/lib/css/components/spinner.less +107 -107
- package/lib/css/components/tables.less +341 -341
- package/lib/css/components/tags.less +236 -236
- package/lib/css/components/toggle-switches.less +144 -144
- package/lib/css/components/topbar.less +427 -427
- package/lib/css/components/uploader.less +210 -210
- package/lib/css/components/user-cards.less +169 -169
- package/lib/css/components/widget-dynamic.less +33 -33
- package/lib/css/components/widget-static.less +273 -273
- package/lib/css/exports/constants-colors.less +1092 -1092
- package/lib/css/exports/constants-helpers.less +108 -108
- package/lib/css/exports/constants-type.less +153 -153
- package/lib/css/exports/exports.less +15 -15
- package/lib/css/exports/mixins.less +237 -237
- package/lib/css/stacks-dynamic.less +35 -35
- package/lib/css/stacks-static.less +86 -86
- package/lib/css/stacks.less +13 -13
- package/lib/ts/controllers/index.ts +7 -7
- package/lib/ts/controllers/s-expandable-control.ts +188 -188
- package/lib/ts/controllers/s-modal.ts +321 -321
- package/lib/ts/controllers/s-navigation-tablist.ts +117 -117
- package/lib/ts/controllers/s-popover.ts +547 -547
- package/lib/ts/controllers/s-table.ts +220 -220
- package/lib/ts/controllers/s-tooltip.ts +246 -246
- package/lib/ts/controllers/s-uploader.ts +172 -172
- package/lib/ts/index.ts +20 -20
- package/lib/ts/stacks.ts +88 -88
- package/lib/tsconfig.json +13 -13
- package/package.json +87 -87
|
@@ -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
|
+
}
|