studiokit-scaffolding-js 7.0.12-next.1.7 → 7.0.12-next.1.8

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 (26) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +137 -137
  3. package/lib/components/Impersonation/UserDetail.css +22 -22
  4. package/lib/components/Quill/TableModule/index.css +171 -171
  5. package/lib/css/base/_base.css +98 -98
  6. package/lib/css/base/_typography.css +130 -130
  7. package/lib/css/components/_alert.css +86 -86
  8. package/lib/css/components/_bootstrap-grid.css +28 -28
  9. package/lib/css/components/_buttons.css +397 -397
  10. package/lib/css/components/_forms.css +101 -101
  11. package/lib/css/components/_menu.css +56 -56
  12. package/lib/css/components/_modals.css +46 -46
  13. package/lib/css/components/_quill.css +315 -315
  14. package/lib/css/components/_tables.css +497 -497
  15. package/lib/css/components/_tags.css +12 -12
  16. package/lib/css/index-with-variables.css +15 -15
  17. package/lib/css/index.css +14 -14
  18. package/lib/css/utils/_border.css +463 -463
  19. package/lib/css/utils/_color.css +317 -317
  20. package/lib/css/utils/_display.css +305 -305
  21. package/lib/css/utils/_general.css +48 -48
  22. package/lib/css/utils/_icon.css +16 -16
  23. package/lib/css/utils/_text.css +25 -25
  24. package/lib/css/utils/_width.css +60 -60
  25. package/lib/css/variables.css +84 -84
  26. package/package.json +214 -214
package/lib/css/utils/_display.css CHANGED
@@ -1,305 +1,305 @@
1
- /**
2
- * Display None - LT Styles
3
- * * Hidden in the breakpoint range and below, visible above the breakpoint range
4
- */
5
-
6
- .dn-lt-phone-new {
7
- @media (--lt-phone-new) {
8
- display: none !important;
9
- }
10
- }
11
-
12
- .dn-lt-xs {
13
- display: none !important;
14
-
15
- @media (--xs) {
16
- display: inherit;
17
- }
18
- }
19
-
20
- .dn-lt-sm {
21
- @media (--lt-sm) {
22
- display: none !important;
23
- }
24
-
25
- @media (--sm) {
26
- display: inherit;
27
- }
28
- }
29
-
30
- .dn-lt-md {
31
- @media (--lt-md) {
32
- display: none !important;
33
- }
34
-
35
- @media (--md) {
36
- display: inherit;
37
- }
38
- }
39
-
40
- .dn-lt-lg {
41
- @media (--lt-lg) {
42
- display: none !important;
43
- }
44
-
45
- @media (--lg) {
46
- display: inherit;
47
- }
48
- }
49
-
50
- .dn-lt-xl {
51
- @media (--lt-xl) {
52
- display: none !important;
53
- }
54
-
55
- @media (--xl) {
56
- display: inherit;
57
- }
58
- }
59
-
60
- td,
61
- th {
62
- &.dn-lt-xs {
63
- @media (--xs) {
64
- display: table-cell;
65
- }
66
- }
67
-
68
- &.dn-lt-sm {
69
- @media (--sm) {
70
- display: table-cell;
71
- }
72
- }
73
-
74
- &.dn-lt-md {
75
- @media (--md) {
76
- display: table-cell;
77
- }
78
- }
79
-
80
- &.dn-lt-lg {
81
- @media (--lg) {
82
- display: table-cell;
83
- }
84
- }
85
-
86
- &.dn-lt-xl {
87
- @media (--xl) {
88
- display: table-cell;
89
- }
90
- }
91
- }
92
-
93
- /**
94
- * Display None - GTE Styles
95
- * * Show in the breakpoint range and below, hidden above the breakpoint range
96
- */
97
-
98
- .dn-gte-phone-new {
99
- @media (--phone-new) {
100
- display: none !important;
101
- }
102
- }
103
-
104
- .dn-gte-xs {
105
- @media (--xs) {
106
- display: none !important;
107
- }
108
- }
109
-
110
- .dn-gte-sm {
111
- @media (--sm) {
112
- display: none !important;
113
- }
114
- }
115
-
116
- .dn-gte-md {
117
- @media (--md) {
118
- display: none !important;
119
- }
120
- }
121
-
122
- .dn-gte-lg {
123
- @media (--lg) {
124
- display: none !important;
125
- }
126
- }
127
-
128
- .dn-gte-xl {
129
- @media (--xl) {
130
- display: none !important;
131
- }
132
- }
133
-
134
- /* Display Inline */
135
-
136
- .di-lt-phone-new {
137
- @media (--lt-phone-new) {
138
- display: inline !important;
139
- }
140
- }
141
-
142
- .di-gte-phone-new {
143
- @media (--phone-new) {
144
- display: inline !important;
145
- }
146
- }
147
-
148
- /* Display Block */
149
-
150
- .db-gte-md {
151
- @media (--md) {
152
- display: block !important;
153
- }
154
- }
155
-
156
- .db-gte-lg {
157
- @media (--lg) {
158
- display: block !important;
159
- }
160
- }
161
-
162
- /* Display Inline Block */
163
-
164
- .dib-gte-lg {
165
- @media (--lg) {
166
- display: inline-block !important;
167
- }
168
- }
169
-
170
- /* Flex */
171
-
172
- .flex-gte-xs {
173
- @media (--xs) {
174
- display: flex;
175
- }
176
- }
177
-
178
- /**
179
- * Visually Hidden
180
- *
181
- * Hide element while making it readable for screen readers
182
- * Shamelessly borrowed from HTML5Boilerplate:
183
- * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
184
- */
185
-
186
- .visually-hidden {
187
- border: 0;
188
- clip-path: inset(50%);
189
- height: 1px;
190
- margin: -1px;
191
- overflow: hidden;
192
- padding: 0;
193
- position: fixed !important;
194
- width: 1px;
195
- }
196
-
197
- .visually-hidden-lt-xs {
198
- @media (--lt-xs) {
199
- border: 0;
200
- clip-path: inset(50%);
201
- height: 1px;
202
- margin: -1px;
203
- overflow: hidden;
204
- padding: 0;
205
- position: fixed !important;
206
- width: 1px;
207
- }
208
- }
209
-
210
- .visually-hidden-lt-sm {
211
- @media (--lt-sm) {
212
- border: 0;
213
- clip-path: inset(50%);
214
- height: 1px;
215
- margin: -1px;
216
- overflow: hidden;
217
- padding: 0;
218
- position: fixed !important;
219
- width: 1px;
220
- }
221
- }
222
-
223
- .visually-hidden-lt-md {
224
- @media (--lt-md) {
225
- border: 0;
226
- clip-path: inset(50%);
227
- height: 1px;
228
- margin: -1px;
229
- overflow: hidden;
230
- padding: 0;
231
- position: fixed !important;
232
- width: 1px;
233
- }
234
- }
235
-
236
- .visually-hidden-lt-lg {
237
- @media (--lt-lg) {
238
- border: 0;
239
- clip-path: inset(50%);
240
- height: 1px;
241
- margin: -1px;
242
- overflow: hidden;
243
- padding: 0;
244
- position: fixed !important;
245
- width: 1px;
246
- }
247
- }
248
-
249
- .visually-hidden-lt-xl {
250
- @media (--lt-xl) {
251
- border: 0;
252
- clip-path: inset(50%);
253
- height: 1px;
254
- margin: -1px;
255
- overflow: hidden;
256
- padding: 0;
257
- position: fixed !important;
258
- width: 1px;
259
- }
260
- }
261
-
262
- /* Clip */
263
-
264
- .clip-lt-xs {
265
- position: fixed !important;
266
- _position: absolute !important;
267
- clip-path: inset(50%);
268
-
269
- @media (--xs) {
270
- position: inherit !important;
271
- clip-path: inherit;
272
- }
273
- }
274
-
275
- .clip-gte-sm {
276
- @media (--sm) {
277
- position: fixed !important;
278
- _position: absolute !important;
279
- clip-path: inset(50%);
280
- }
281
- }
282
-
283
- .clip-gte-md {
284
- @media (--md) {
285
- position: fixed !important;
286
- _position: absolute !important;
287
- clip-path: inset(50%);
288
- }
289
- }
290
-
291
- .clip-gte-lg {
292
- @media (--lg) {
293
- position: fixed !important;
294
- _position: absolute !important;
295
- clip-path: inset(50%);
296
- }
297
- }
298
-
299
- .clip-gte-xl {
300
- @media (--xl) {
301
- position: fixed !important;
302
- _position: absolute !important;
303
- clip-path: inset(50%);
304
- }
305
- }
1
+ /**
2
+ * Display None - LT Styles
3
+ * * Hidden in the breakpoint range and below, visible above the breakpoint range
4
+ */
5
+
6
+ .dn-lt-phone-new {
7
+ @media (--lt-phone-new) {
8
+ display: none !important;
9
+ }
10
+ }
11
+
12
+ .dn-lt-xs {
13
+ display: none !important;
14
+
15
+ @media (--xs) {
16
+ display: inherit;
17
+ }
18
+ }
19
+
20
+ .dn-lt-sm {
21
+ @media (--lt-sm) {
22
+ display: none !important;
23
+ }
24
+
25
+ @media (--sm) {
26
+ display: inherit;
27
+ }
28
+ }
29
+
30
+ .dn-lt-md {
31
+ @media (--lt-md) {
32
+ display: none !important;
33
+ }
34
+
35
+ @media (--md) {
36
+ display: inherit;
37
+ }
38
+ }
39
+
40
+ .dn-lt-lg {
41
+ @media (--lt-lg) {
42
+ display: none !important;
43
+ }
44
+
45
+ @media (--lg) {
46
+ display: inherit;
47
+ }
48
+ }
49
+
50
+ .dn-lt-xl {
51
+ @media (--lt-xl) {
52
+ display: none !important;
53
+ }
54
+
55
+ @media (--xl) {
56
+ display: inherit;
57
+ }
58
+ }
59
+
60
+ td,
61
+ th {
62
+ &.dn-lt-xs {
63
+ @media (--xs) {
64
+ display: table-cell;
65
+ }
66
+ }
67
+
68
+ &.dn-lt-sm {
69
+ @media (--sm) {
70
+ display: table-cell;
71
+ }
72
+ }
73
+
74
+ &.dn-lt-md {
75
+ @media (--md) {
76
+ display: table-cell;
77
+ }
78
+ }
79
+
80
+ &.dn-lt-lg {
81
+ @media (--lg) {
82
+ display: table-cell;
83
+ }
84
+ }
85
+
86
+ &.dn-lt-xl {
87
+ @media (--xl) {
88
+ display: table-cell;
89
+ }
90
+ }
91
+ }
92
+
93
+ /**
94
+ * Display None - GTE Styles
95
+ * * Show in the breakpoint range and below, hidden above the breakpoint range
96
+ */
97
+
98
+ .dn-gte-phone-new {
99
+ @media (--phone-new) {
100
+ display: none !important;
101
+ }
102
+ }
103
+
104
+ .dn-gte-xs {
105
+ @media (--xs) {
106
+ display: none !important;
107
+ }
108
+ }
109
+
110
+ .dn-gte-sm {
111
+ @media (--sm) {
112
+ display: none !important;
113
+ }
114
+ }
115
+
116
+ .dn-gte-md {
117
+ @media (--md) {
118
+ display: none !important;
119
+ }
120
+ }
121
+
122
+ .dn-gte-lg {
123
+ @media (--lg) {
124
+ display: none !important;
125
+ }
126
+ }
127
+
128
+ .dn-gte-xl {
129
+ @media (--xl) {
130
+ display: none !important;
131
+ }
132
+ }
133
+
134
+ /* Display Inline */
135
+
136
+ .di-lt-phone-new {
137
+ @media (--lt-phone-new) {
138
+ display: inline !important;
139
+ }
140
+ }
141
+
142
+ .di-gte-phone-new {
143
+ @media (--phone-new) {
144
+ display: inline !important;
145
+ }
146
+ }
147
+
148
+ /* Display Block */
149
+
150
+ .db-gte-md {
151
+ @media (--md) {
152
+ display: block !important;
153
+ }
154
+ }
155
+
156
+ .db-gte-lg {
157
+ @media (--lg) {
158
+ display: block !important;
159
+ }
160
+ }
161
+
162
+ /* Display Inline Block */
163
+
164
+ .dib-gte-lg {
165
+ @media (--lg) {
166
+ display: inline-block !important;
167
+ }
168
+ }
169
+
170
+ /* Flex */
171
+
172
+ .flex-gte-xs {
173
+ @media (--xs) {
174
+ display: flex;
175
+ }
176
+ }
177
+
178
+ /**
179
+ * Visually Hidden
180
+ *
181
+ * Hide element while making it readable for screen readers
182
+ * Shamelessly borrowed from HTML5Boilerplate:
183
+ * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
184
+ */
185
+
186
+ .visually-hidden {
187
+ border: 0;
188
+ clip-path: inset(50%);
189
+ height: 1px;
190
+ margin: -1px;
191
+ overflow: hidden;
192
+ padding: 0;
193
+ position: fixed !important;
194
+ width: 1px;
195
+ }
196
+
197
+ .visually-hidden-lt-xs {
198
+ @media (--lt-xs) {
199
+ border: 0;
200
+ clip-path: inset(50%);
201
+ height: 1px;
202
+ margin: -1px;
203
+ overflow: hidden;
204
+ padding: 0;
205
+ position: fixed !important;
206
+ width: 1px;
207
+ }
208
+ }
209
+
210
+ .visually-hidden-lt-sm {
211
+ @media (--lt-sm) {
212
+ border: 0;
213
+ clip-path: inset(50%);
214
+ height: 1px;
215
+ margin: -1px;
216
+ overflow: hidden;
217
+ padding: 0;
218
+ position: fixed !important;
219
+ width: 1px;
220
+ }
221
+ }
222
+
223
+ .visually-hidden-lt-md {
224
+ @media (--lt-md) {
225
+ border: 0;
226
+ clip-path: inset(50%);
227
+ height: 1px;
228
+ margin: -1px;
229
+ overflow: hidden;
230
+ padding: 0;
231
+ position: fixed !important;
232
+ width: 1px;
233
+ }
234
+ }
235
+
236
+ .visually-hidden-lt-lg {
237
+ @media (--lt-lg) {
238
+ border: 0;
239
+ clip-path: inset(50%);
240
+ height: 1px;
241
+ margin: -1px;
242
+ overflow: hidden;
243
+ padding: 0;
244
+ position: fixed !important;
245
+ width: 1px;
246
+ }
247
+ }
248
+
249
+ .visually-hidden-lt-xl {
250
+ @media (--lt-xl) {
251
+ border: 0;
252
+ clip-path: inset(50%);
253
+ height: 1px;
254
+ margin: -1px;
255
+ overflow: hidden;
256
+ padding: 0;
257
+ position: fixed !important;
258
+ width: 1px;
259
+ }
260
+ }
261
+
262
+ /* Clip */
263
+
264
+ .clip-lt-xs {
265
+ position: fixed !important;
266
+ _position: absolute !important;
267
+ clip-path: inset(50%);
268
+
269
+ @media (--xs) {
270
+ position: inherit !important;
271
+ clip-path: inherit;
272
+ }
273
+ }
274
+
275
+ .clip-gte-sm {
276
+ @media (--sm) {
277
+ position: fixed !important;
278
+ _position: absolute !important;
279
+ clip-path: inset(50%);
280
+ }
281
+ }
282
+
283
+ .clip-gte-md {
284
+ @media (--md) {
285
+ position: fixed !important;
286
+ _position: absolute !important;
287
+ clip-path: inset(50%);
288
+ }
289
+ }
290
+
291
+ .clip-gte-lg {
292
+ @media (--lg) {
293
+ position: fixed !important;
294
+ _position: absolute !important;
295
+ clip-path: inset(50%);
296
+ }
297
+ }
298
+
299
+ .clip-gte-xl {
300
+ @media (--xl) {
301
+ position: fixed !important;
302
+ _position: absolute !important;
303
+ clip-path: inset(50%);
304
+ }
305
+ }
package/lib/css/utils/_general.css CHANGED
@@ -1,48 +1,48 @@
1
- /**
2
- * General
3
- * --------
4
- * Assorted utility styles, similar to tachyons.
5
- * Break out style groups into separate files once a few similar ones exist.
6
- */
7
-
8
- .touch-target {
9
- min-height: 44px;
10
- min-width: 44px;
11
- }
12
-
13
- .circle {
14
- border-radius: 50%;
15
- }
16
-
17
- /* Shadows */
18
-
19
- .shadow-large {
20
- box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
21
- }
22
-
23
- /* Padding */
24
-
25
- /* 25% between pa3 and pa4 */
26
- .pa3pt25 {
27
- padding: 1.25rem;
28
- }
29
-
30
- .pa0-lt-xs {
31
- @media (--lt-xs) {
32
- padding: 0 !important;
33
- }
34
- }
35
-
36
- /* Margin */
37
-
38
- .mb0-gte-xs {
39
- @media (--xs) {
40
- margin-bottom: 0 !important;
41
- }
42
- }
43
-
44
- .mb4-gte-lg {
45
- @media (--lg) {
46
- margin-bottom: 2rem !important;
47
- }
48
- }
1
+ /**
2
+ * General
3
+ * --------
4
+ * Assorted utility styles, similar to tachyons.
5
+ * Break out style groups into separate files once a few similar ones exist.
6
+ */
7
+
8
+ .touch-target {
9
+ min-height: 44px;
10
+ min-width: 44px;
11
+ }
12
+
13
+ .circle {
14
+ border-radius: 50%;
15
+ }
16
+
17
+ /* Shadows */
18
+
19
+ .shadow-large {
20
+ box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
21
+ }
22
+
23
+ /* Padding */
24
+
25
+ /* 25% between pa3 and pa4 */
26
+ .pa3pt25 {
27
+ padding: 1.25rem;
28
+ }
29
+
30
+ .pa0-lt-xs {
31
+ @media (--lt-xs) {
32
+ padding: 0 !important;
33
+ }
34
+ }
35
+
36
+ /* Margin */
37
+
38
+ .mb0-gte-xs {
39
+ @media (--xs) {
40
+ margin-bottom: 0 !important;
41
+ }
42
+ }
43
+
44
+ .mb4-gte-lg {
45
+ @media (--lg) {
46
+ margin-bottom: 2rem !important;
47
+ }
48
+ }