studiokit-scaffolding-js 7.0.12-next.1.7 → 7.0.12-next.1.9
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/LICENSE +21 -21
- package/README.md +137 -137
- package/lib/components/Impersonation/UserDetail.css +22 -22
- package/lib/components/Quill/TableModule/index.css +171 -171
- package/lib/config/eslint/react.js +4 -1
- package/lib/css/base/_base.css +98 -98
- package/lib/css/base/_typography.css +130 -130
- package/lib/css/components/_alert.css +86 -86
- package/lib/css/components/_bootstrap-grid.css +28 -28
- package/lib/css/components/_buttons.css +397 -397
- package/lib/css/components/_forms.css +101 -101
- package/lib/css/components/_menu.css +56 -56
- package/lib/css/components/_modals.css +46 -46
- package/lib/css/components/_quill.css +315 -315
- package/lib/css/components/_tables.css +497 -497
- package/lib/css/components/_tags.css +12 -12
- package/lib/css/index-with-variables.css +15 -15
- package/lib/css/index.css +14 -14
- package/lib/css/utils/_border.css +463 -463
- package/lib/css/utils/_color.css +317 -317
- package/lib/css/utils/_display.css +305 -305
- package/lib/css/utils/_general.css +48 -48
- package/lib/css/utils/_icon.css +16 -16
- package/lib/css/utils/_text.css +25 -25
- package/lib/css/utils/_width.css +60 -60
- package/lib/css/variables.css +84 -84
- package/package.json +215 -214
package/lib/css/utils/_icon.css
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
/* Icon Sizes */
|
|
2
|
-
|
|
3
|
-
.icon-size-1 {
|
|
4
|
-
height: 1.25rem;
|
|
5
|
-
width: 1.25rem;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.icon-size-2 {
|
|
9
|
-
height: 2rem;
|
|
10
|
-
width: 2rem;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.icon-size-3 {
|
|
14
|
-
height: 3rem;
|
|
15
|
-
width: 3rem;
|
|
16
|
-
}
|
|
1
|
+
/* Icon Sizes */
|
|
2
|
+
|
|
3
|
+
.icon-size-1 {
|
|
4
|
+
height: 1.25rem;
|
|
5
|
+
width: 1.25rem;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.icon-size-2 {
|
|
9
|
+
height: 2rem;
|
|
10
|
+
width: 2rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.icon-size-3 {
|
|
14
|
+
height: 3rem;
|
|
15
|
+
width: 3rem;
|
|
16
|
+
}
|
package/lib/css/utils/_text.css
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
/* Font Size */
|
|
2
|
-
|
|
3
|
-
/* 60% between f5 and f4 */
|
|
4
|
-
.f4pt6 {
|
|
5
|
-
font-size: 1.15rem;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
/* Text Align */
|
|
9
|
-
|
|
10
|
-
.tr-gte-lg {
|
|
11
|
-
@media (--lg) {
|
|
12
|
-
text-align: right !important;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/* White Space */
|
|
17
|
-
|
|
18
|
-
.pre-wrap {
|
|
19
|
-
white-space: pre-wrap;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.word-break {
|
|
23
|
-
word-break: normal;
|
|
24
|
-
overflow-wrap: anywhere;
|
|
25
|
-
}
|
|
1
|
+
/* Font Size */
|
|
2
|
+
|
|
3
|
+
/* 60% between f5 and f4 */
|
|
4
|
+
.f4pt6 {
|
|
5
|
+
font-size: 1.15rem;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Text Align */
|
|
9
|
+
|
|
10
|
+
.tr-gte-lg {
|
|
11
|
+
@media (--lg) {
|
|
12
|
+
text-align: right !important;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* White Space */
|
|
17
|
+
|
|
18
|
+
.pre-wrap {
|
|
19
|
+
white-space: pre-wrap;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.word-break {
|
|
23
|
+
word-break: normal;
|
|
24
|
+
overflow-wrap: anywhere;
|
|
25
|
+
}
|
package/lib/css/utils/_width.css
CHANGED
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
/* Width */
|
|
2
|
-
|
|
3
|
-
.w-15 {
|
|
4
|
-
width: 15%;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.w-35 {
|
|
8
|
-
width: 35%;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.w-45 {
|
|
12
|
-
width: 45%;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.w-55 {
|
|
16
|
-
width: 55%;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.w-65 {
|
|
20
|
-
width: 65%;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.w-75 {
|
|
24
|
-
width: 75%;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.w-85 {
|
|
28
|
-
width: 85%;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.w-95 {
|
|
32
|
-
width: 95%;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.w-auto-ns {
|
|
36
|
-
@media screen and (min-width: 30em) {
|
|
37
|
-
width: auto !important;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.w-100-lt-xs {
|
|
42
|
-
@media (--lt-xs) {
|
|
43
|
-
width: 100%;
|
|
44
|
-
float: none;
|
|
45
|
-
clear: both;
|
|
46
|
-
margin-left: 0;
|
|
47
|
-
margin-right: 0;
|
|
48
|
-
display: block;
|
|
49
|
-
|
|
50
|
-
& .MuiFormControl-root {
|
|
51
|
-
width: 100%;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/* Max Width */
|
|
57
|
-
|
|
58
|
-
.max-width-9 {
|
|
59
|
-
max-width: 9rem;
|
|
60
|
-
}
|
|
1
|
+
/* Width */
|
|
2
|
+
|
|
3
|
+
.w-15 {
|
|
4
|
+
width: 15%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.w-35 {
|
|
8
|
+
width: 35%;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.w-45 {
|
|
12
|
+
width: 45%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.w-55 {
|
|
16
|
+
width: 55%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.w-65 {
|
|
20
|
+
width: 65%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.w-75 {
|
|
24
|
+
width: 75%;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.w-85 {
|
|
28
|
+
width: 85%;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.w-95 {
|
|
32
|
+
width: 95%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.w-auto-ns {
|
|
36
|
+
@media screen and (min-width: 30em) {
|
|
37
|
+
width: auto !important;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.w-100-lt-xs {
|
|
42
|
+
@media (--lt-xs) {
|
|
43
|
+
width: 100%;
|
|
44
|
+
float: none;
|
|
45
|
+
clear: both;
|
|
46
|
+
margin-left: 0;
|
|
47
|
+
margin-right: 0;
|
|
48
|
+
display: block;
|
|
49
|
+
|
|
50
|
+
& .MuiFormControl-root {
|
|
51
|
+
width: 100%;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Max Width */
|
|
57
|
+
|
|
58
|
+
.max-width-9 {
|
|
59
|
+
max-width: 9rem;
|
|
60
|
+
}
|
package/lib/css/variables.css
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
/* Fonts */
|
|
3
|
-
--text-font-stack-no-webfonts: 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
|
4
|
-
--text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
|
5
|
-
--code-font-stack: 'Hack', 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;
|
|
6
|
-
|
|
7
|
-
/* Font Size */
|
|
8
|
-
--base-font-size: 16px;
|
|
9
|
-
--base-line-height: 1.57rem;
|
|
10
|
-
|
|
11
|
-
/* Font Weights */
|
|
12
|
-
--font-weight-light: 300;
|
|
13
|
-
--font-weight-normal: 400;
|
|
14
|
-
--font-weight-semibold: 600;
|
|
15
|
-
--font-weight-bold: 700;
|
|
16
|
-
--font-weight-black: 800;
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Constant Colors
|
|
20
|
-
* These are the same across all apps
|
|
21
|
-
*/
|
|
22
|
-
--color-black: #000;
|
|
23
|
-
--color-white: #fff;
|
|
24
|
-
--color-off-white: #f9f9fb;
|
|
25
|
-
--color-light-grey: #dfe2e5;
|
|
26
|
-
--color-blue: #00749c;
|
|
27
|
-
--color-light-red: #f5ccd1;
|
|
28
|
-
--color-dark-gold: #7d882d;
|
|
29
|
-
--color-light-green: #e4f1d4;
|
|
30
|
-
--color-orange: #ee701b;
|
|
31
|
-
--color-light-orange: #f8f5e6;
|
|
32
|
-
--color-dark-yellow: #b2a44a;
|
|
33
|
-
--color-dark-grey: #30363d;
|
|
34
|
-
|
|
35
|
-
/* from Bootstrap's warning alert border and bg */
|
|
36
|
-
--color-light-yellow: #ffeeba;
|
|
37
|
-
--color-lightest-yellow: #fff3cd;
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* Common Colors
|
|
41
|
-
* These usually vary across each app
|
|
42
|
-
*/
|
|
43
|
-
--color-accent-blue: #086ee4;
|
|
44
|
-
--color-grey: #555;
|
|
45
|
-
--color-medium-dark-grey: #888;
|
|
46
|
-
--color-medium-grey: #ccc;
|
|
47
|
-
--color-lightest-grey: #e8e8f0;
|
|
48
|
-
--color-blue-grey: #3b444b;
|
|
49
|
-
--color-light-blue: #e8f4fd;
|
|
50
|
-
--color-purple: #4450be;
|
|
51
|
-
--color-pink: #c31776;
|
|
52
|
-
--color-red: #c93d44;
|
|
53
|
-
--color-green: #7bcf64;
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Themed Colors
|
|
57
|
-
* These will be customized per app
|
|
58
|
-
*/
|
|
59
|
-
--color-disabled: #747474;
|
|
60
|
-
--color-primary: var(--color-blue);
|
|
61
|
-
--color-error: var(--color-red);
|
|
62
|
-
--color-success: var(--color-green);
|
|
63
|
-
|
|
64
|
-
/* Border Radius */
|
|
65
|
-
--border-radius: 3px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
/* Media Queries */
|
|
69
|
-
|
|
70
|
-
/* Older phone widths, e.g. iPhone 8 and earlier, old iPhone SE */
|
|
71
|
-
@custom-media --lt-phone-new only screen and (width < 375px);
|
|
72
|
-
|
|
73
|
-
/* Newer phone widths, e.g. iPhone X and newer, new iPhone SE */
|
|
74
|
-
@custom-media --phone-new only screen and (width >= 375px);
|
|
75
|
-
@custom-media --lt-xs only screen and (width < 480px);
|
|
76
|
-
@custom-media --xs only screen and (width >= 480px);
|
|
77
|
-
@custom-media --lt-sm only screen and (width < 576px);
|
|
78
|
-
@custom-media --sm only screen and (width >= 576px);
|
|
79
|
-
@custom-media --lt-md only screen and (width < 768px);
|
|
80
|
-
@custom-media --md only screen and (width >= 768px);
|
|
81
|
-
@custom-media --lt-lg only screen and (width < 992px);
|
|
82
|
-
@custom-media --lg only screen and (width >= 992px);
|
|
83
|
-
@custom-media --lt-xl only screen and (width < 1200px);
|
|
84
|
-
@custom-media --xl only screen and (width >= 1200px);
|
|
1
|
+
:root {
|
|
2
|
+
/* Fonts */
|
|
3
|
+
--text-font-stack-no-webfonts: 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
|
4
|
+
--text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
|
5
|
+
--code-font-stack: 'Hack', 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;
|
|
6
|
+
|
|
7
|
+
/* Font Size */
|
|
8
|
+
--base-font-size: 16px;
|
|
9
|
+
--base-line-height: 1.57rem;
|
|
10
|
+
|
|
11
|
+
/* Font Weights */
|
|
12
|
+
--font-weight-light: 300;
|
|
13
|
+
--font-weight-normal: 400;
|
|
14
|
+
--font-weight-semibold: 600;
|
|
15
|
+
--font-weight-bold: 700;
|
|
16
|
+
--font-weight-black: 800;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Constant Colors
|
|
20
|
+
* These are the same across all apps
|
|
21
|
+
*/
|
|
22
|
+
--color-black: #000;
|
|
23
|
+
--color-white: #fff;
|
|
24
|
+
--color-off-white: #f9f9fb;
|
|
25
|
+
--color-light-grey: #dfe2e5;
|
|
26
|
+
--color-blue: #00749c;
|
|
27
|
+
--color-light-red: #f5ccd1;
|
|
28
|
+
--color-dark-gold: #7d882d;
|
|
29
|
+
--color-light-green: #e4f1d4;
|
|
30
|
+
--color-orange: #ee701b;
|
|
31
|
+
--color-light-orange: #f8f5e6;
|
|
32
|
+
--color-dark-yellow: #b2a44a;
|
|
33
|
+
--color-dark-grey: #30363d;
|
|
34
|
+
|
|
35
|
+
/* from Bootstrap's warning alert border and bg */
|
|
36
|
+
--color-light-yellow: #ffeeba;
|
|
37
|
+
--color-lightest-yellow: #fff3cd;
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Common Colors
|
|
41
|
+
* These usually vary across each app
|
|
42
|
+
*/
|
|
43
|
+
--color-accent-blue: #086ee4;
|
|
44
|
+
--color-grey: #555;
|
|
45
|
+
--color-medium-dark-grey: #888;
|
|
46
|
+
--color-medium-grey: #ccc;
|
|
47
|
+
--color-lightest-grey: #e8e8f0;
|
|
48
|
+
--color-blue-grey: #3b444b;
|
|
49
|
+
--color-light-blue: #e8f4fd;
|
|
50
|
+
--color-purple: #4450be;
|
|
51
|
+
--color-pink: #c31776;
|
|
52
|
+
--color-red: #c93d44;
|
|
53
|
+
--color-green: #7bcf64;
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Themed Colors
|
|
57
|
+
* These will be customized per app
|
|
58
|
+
*/
|
|
59
|
+
--color-disabled: #747474;
|
|
60
|
+
--color-primary: var(--color-blue);
|
|
61
|
+
--color-error: var(--color-red);
|
|
62
|
+
--color-success: var(--color-green);
|
|
63
|
+
|
|
64
|
+
/* Border Radius */
|
|
65
|
+
--border-radius: 3px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Media Queries */
|
|
69
|
+
|
|
70
|
+
/* Older phone widths, e.g. iPhone 8 and earlier, old iPhone SE */
|
|
71
|
+
@custom-media --lt-phone-new only screen and (width < 375px);
|
|
72
|
+
|
|
73
|
+
/* Newer phone widths, e.g. iPhone X and newer, new iPhone SE */
|
|
74
|
+
@custom-media --phone-new only screen and (width >= 375px);
|
|
75
|
+
@custom-media --lt-xs only screen and (width < 480px);
|
|
76
|
+
@custom-media --xs only screen and (width >= 480px);
|
|
77
|
+
@custom-media --lt-sm only screen and (width < 576px);
|
|
78
|
+
@custom-media --sm only screen and (width >= 576px);
|
|
79
|
+
@custom-media --lt-md only screen and (width < 768px);
|
|
80
|
+
@custom-media --md only screen and (width >= 768px);
|
|
81
|
+
@custom-media --lt-lg only screen and (width < 992px);
|
|
82
|
+
@custom-media --lg only screen and (width >= 992px);
|
|
83
|
+
@custom-media --lt-xl only screen and (width < 1200px);
|
|
84
|
+
@custom-media --xl only screen and (width >= 1200px);
|