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

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 (39) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +137 -137
  3. package/lib/components/ActionList.js +1 -5
  4. package/lib/components/Dropdowns/UserDropdown.js +1 -3
  5. package/lib/components/Groups/CreateEditCopySaveButtons.js +1 -5
  6. package/lib/components/Groups/ExternalGroups/Attach.js +1 -3
  7. package/lib/components/Groups/RosterSyncInfo.js +1 -7
  8. package/lib/components/HOC/SearchPersistorComponent.js +2 -2
  9. package/lib/components/Impersonation/UserDetail.css +22 -22
  10. package/lib/components/Notifications.d.ts +1 -1
  11. package/lib/components/Notifications.js +2 -2
  12. package/lib/components/Quill/ImageDropModule.js +1 -1
  13. package/lib/components/Quill/TableModule/index.css +171 -171
  14. package/lib/css/base/_base.css +98 -98
  15. package/lib/css/base/_typography.css +130 -130
  16. package/lib/css/components/_alert.css +86 -86
  17. package/lib/css/components/_bootstrap-grid.css +28 -28
  18. package/lib/css/components/_buttons.css +397 -397
  19. package/lib/css/components/_forms.css +101 -101
  20. package/lib/css/components/_menu.css +56 -56
  21. package/lib/css/components/_modals.css +46 -46
  22. package/lib/css/components/_quill.css +315 -315
  23. package/lib/css/components/_tables.css +497 -497
  24. package/lib/css/components/_tags.css +12 -12
  25. package/lib/css/index-with-variables.css +15 -15
  26. package/lib/css/index.css +14 -14
  27. package/lib/css/utils/_border.css +463 -463
  28. package/lib/css/utils/_color.css +317 -317
  29. package/lib/css/utils/_display.css +305 -305
  30. package/lib/css/utils/_general.css +48 -48
  31. package/lib/css/utils/_icon.css +16 -16
  32. package/lib/css/utils/_text.css +25 -25
  33. package/lib/css/utils/_width.css +60 -60
  34. package/lib/css/variables.css +84 -84
  35. package/lib/hooks/usePrevious.d.ts +14 -1
  36. package/lib/hooks/usePrevious.js +23 -1
  37. package/lib/utils/fetch.js +9 -7
  38. package/lib/utils/url.d.ts +2 -2
  39. 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
+ }