@angelscmf/front 1.0.22 → 1.0.23
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 +49 -0
- package/package.json +1 -1
- package/sass/AngelsDesign.scss +8 -0
- package/sass/_AngelsClasses.scss +15 -0
- package/sass/_AngelsScreenRanges.scss +105 -0
- package/sass/_AngelsTheme.scss +2 -0
- package/sass/_AngelsVariables.scss +1 -1
- package/sass/angelsMessages/_AngelsAlert.scss +38 -0
- package/sass/angelsMessages/_AngelsDebug.scss +38 -0
- package/sass/angelsMessages/_AngelsError.scss +38 -0
- package/sass/angelsMessages/_AngelsInfo.scss +38 -0
- package/sass/angelsMessages/_AngelsPass.scss +38 -0
- package/sass/angelsTags/_a-brick.scss +3 -0
package/README.md
CHANGED
|
@@ -5,3 +5,52 @@
|
|
|
5
5
|
or
|
|
6
6
|
|
|
7
7
|
> npm i -D @angelscmf/front
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
# Angels' CMF CSS
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## Angels' Screen Ranges
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Super Ranges
|
|
17
|
+
|
|
18
|
+
.a-mobile-only
|
|
19
|
+
.a-desktops-only
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Only Range
|
|
23
|
+
|
|
24
|
+
.a-mobile-only
|
|
25
|
+
.a-tablet-only
|
|
26
|
+
.a-laptop-only
|
|
27
|
+
.a-desktop-only
|
|
28
|
+
.a-large-only
|
|
29
|
+
.a-extra-only
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
### Range and Less
|
|
33
|
+
|
|
34
|
+
.a-mobile-only
|
|
35
|
+
.a-tablet-and-less
|
|
36
|
+
.a-laptop-and-less
|
|
37
|
+
.a-desktop-and-less
|
|
38
|
+
.a-large-and-less
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### Range and More
|
|
42
|
+
|
|
43
|
+
.a-tablet-and-more
|
|
44
|
+
.a-laptop-and-more
|
|
45
|
+
.a-desktop-and-more
|
|
46
|
+
.a-large-and-more
|
|
47
|
+
.a-extra-only
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
## Angels' Messages
|
|
51
|
+
|
|
52
|
+
* `<a-alert></a-alert>` (.a-alert, a-brick.a-alert, div.a-alert, p.a-alert, span.a-alert, ul.a-alert)
|
|
53
|
+
* `<a-debug></a-debug>` (.a-debug, a-brick.a-debug, div.a-debug, p.a-debug, span.a-debug, ul.a-debug)
|
|
54
|
+
* `<a-error></a-error>` .a-error, a-brick.a-error, div.a-error, p.a-error, span.a-error, ul.a-error
|
|
55
|
+
* `<a-info></a-info>` (.a-info, a-brick.a-info, div.a-info, p.a-info, span.a-info, ul.a-info)
|
|
56
|
+
* `<a-pass></a-pass>` (.a-pass, a-brick.a-pass, div.a-pass, p.a-pass, span.a-pass, ul.a-pass)
|
package/package.json
CHANGED
package/sass/AngelsDesign.scss
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
@forward 'AngelsTheme';
|
|
3
3
|
@forward 'AngelsPageLayout';
|
|
4
4
|
@forward 'AngelsHTMLElements';
|
|
5
|
+
@forward 'AngelsClasses';
|
|
6
|
+
@forward 'angelsMessages/AngelsAlert';
|
|
7
|
+
@forward 'angelsMessages/AngelsDebug';
|
|
8
|
+
@forward 'angelsMessages/AngelsError';
|
|
9
|
+
@forward 'angelsMessages/AngelsInfo';
|
|
10
|
+
@forward 'angelsMessages/AngelsPass';
|
|
11
|
+
@forward 'AngelsScreenRanges';
|
|
5
12
|
@forward 'angelsTags/a-block';
|
|
13
|
+
@forward 'angelsTags/a-brick';
|
|
6
14
|
@forward 'angelsTags/a-infra';
|
|
7
15
|
@forward 'angelsTags/a-page';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Angels' CMF Elements' styles.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@use "AngelsVariables";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Tech info class for small print information.
|
|
9
|
+
*
|
|
10
|
+
* @example `<div class="a-tech-info">Release: 1.0.0</div>`
|
|
11
|
+
*/
|
|
12
|
+
.a-tech-info {
|
|
13
|
+
font-size: 10px;
|
|
14
|
+
font-family: 'Courier New', Courier, monospace;
|
|
15
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
@use "AngelsVariables" as *;
|
|
2
|
+
|
|
3
|
+
.a-mobiles-only {
|
|
4
|
+
|
|
5
|
+
@media (min-width: $a-laptop-max-width) {
|
|
6
|
+
display: none;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.a-desktops-only {
|
|
11
|
+
|
|
12
|
+
@media (min-width: $a-desktop-min-width) {
|
|
13
|
+
display: none;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.a-mobile-only {
|
|
18
|
+
@media (min-width: $a-mobile-min-width) {
|
|
19
|
+
display: none;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.a-tablet-only {
|
|
24
|
+
@media (min-width: $a-tablet-min-width) and (max-width: $a-tablet-max-width) {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.a-laptop-only {
|
|
30
|
+
@media (min-width: $a-laptop-min-width) and (max-width: $a-laptop-max-width) {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.a-desktop-only {
|
|
36
|
+
@media (min-width: $a-desktop-min-width) and (max-width: $a-desktop-max-width) {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.a-large-only {
|
|
42
|
+
@media (min-width: $a-large-min-width) and (max-width: $a-large-max-width) {
|
|
43
|
+
display: none;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.a-extra-only {
|
|
48
|
+
@media (min-width: $a-extra-min-width) {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* a Range and Less section
|
|
55
|
+
*/
|
|
56
|
+
.a-tablet-and-less {
|
|
57
|
+
@media (min-width: $a-laptop-min-width) {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.a-laptop-and-less {
|
|
63
|
+
@media (min-width: $a-desktop-min-width) {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.a-desktop-and-less {
|
|
69
|
+
@media (min-width: $a-large-min-width) {
|
|
70
|
+
display: none;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.a-large-and-less {
|
|
75
|
+
@media (min-width: $a-extra-min-width) {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* a Range and More section
|
|
82
|
+
*/
|
|
83
|
+
.a-tablet-and-more {
|
|
84
|
+
@media (max-width: $a-mobile-max-width) {
|
|
85
|
+
display: none;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.a-laptop-and-more {
|
|
90
|
+
@media (max-width: $a-tablet-max-width) {
|
|
91
|
+
display: none;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.a-desktop-and-more {
|
|
96
|
+
@media (max-width: $a-laptop-max-width) {
|
|
97
|
+
display: none;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.a-large-and-more {
|
|
102
|
+
@media (max-width: $a-desktop-max-width) {
|
|
103
|
+
display: none;
|
|
104
|
+
}
|
|
105
|
+
}
|
package/sass/_AngelsTheme.scss
CHANGED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--a-alert-space: var(--a-lineHeightHalf);
|
|
3
|
+
--a-alert-spaceHalf: var(--a-lineHeightQuarter);
|
|
4
|
+
--a-alert-borderColor: #ff6b6b;
|
|
5
|
+
--a-alert-background: #fff5f5;
|
|
6
|
+
--a-alert-color: #d90429;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
a-alert,
|
|
10
|
+
div.a-alert,
|
|
11
|
+
p.a-alert {
|
|
12
|
+
display: block;
|
|
13
|
+
padding: var(--a-alert-space);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a-brick.a-alert,
|
|
17
|
+
span.a-alert {
|
|
18
|
+
padding: 0 var(--a-alert-spaceHalf);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
ul.a-alert {
|
|
22
|
+
list-style-type: disc;
|
|
23
|
+
padding-top: var(--a-alert-space);
|
|
24
|
+
padding-bottom: var(--a-alert-space);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a-alert,
|
|
28
|
+
.a-alert {
|
|
29
|
+
box-shadow: inset 0 0 2px 2px var(--a-alert-borderColor);
|
|
30
|
+
background: var(--a-alert-background);
|
|
31
|
+
color: var(--a-alert-color);
|
|
32
|
+
border-radius: var(--a-borderRadius);
|
|
33
|
+
position: relative;
|
|
34
|
+
|
|
35
|
+
&:empty {
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--a-debug-space: var(--a-lineHeightHalf);
|
|
3
|
+
--a-debug-spaceHalf: var(--a-lineHeightQuarter);
|
|
4
|
+
--a-debug-borderColor: #f0ad4e;
|
|
5
|
+
--a-debug-background: #fffaf0;
|
|
6
|
+
--a-debug-color: #5d3c00;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
a-debug,
|
|
10
|
+
div.a-debug,
|
|
11
|
+
p.a-debug {
|
|
12
|
+
display: block;
|
|
13
|
+
padding: var(--a-debug-space);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a-brick.a-debug,
|
|
17
|
+
span.a-debug {
|
|
18
|
+
padding: 0 var(--a-debug-spaceHalf);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
ul.a-debug {
|
|
22
|
+
list-style-type: disc;
|
|
23
|
+
padding-top: var(--a-debug-space);
|
|
24
|
+
padding-bottom: var(--a-debug-space);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a-debug,
|
|
28
|
+
.a-debug {
|
|
29
|
+
box-shadow: inset 0 0 0px 1px var(--a-debug-borderColor);
|
|
30
|
+
background: var(--a-debug-background);
|
|
31
|
+
color: var(--a-debug-color);
|
|
32
|
+
border-radius: var(--a-borderRadius);
|
|
33
|
+
position: relative;
|
|
34
|
+
|
|
35
|
+
&:empty {
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--a-error-space: var(--a-lineHeightHalf);
|
|
3
|
+
--a-error-spaceHalf: var(--a-lineHeightQuarter);
|
|
4
|
+
--a-error-borderColor: #f28b82;
|
|
5
|
+
--a-error-background: #fff1f0;
|
|
6
|
+
--a-error-color: #c0392b;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
a-error,
|
|
10
|
+
div.a-error,
|
|
11
|
+
p.a-error {
|
|
12
|
+
display: block;
|
|
13
|
+
padding: var(--a-error-space);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a-brick.a-error,
|
|
17
|
+
span.a-error {
|
|
18
|
+
padding: 0 var(--a-error-spaceHalf);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
ul.a-error {
|
|
22
|
+
list-style-type: disc;
|
|
23
|
+
padding-top: var(--a-error-space);
|
|
24
|
+
padding-bottom: var(--a-error-space);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a-error,
|
|
28
|
+
.a-error {
|
|
29
|
+
box-shadow: inset 0 0 0px 1px var(--a-error-borderColor);
|
|
30
|
+
background: var(--a-error-background);
|
|
31
|
+
color: var(--a-error-color);
|
|
32
|
+
border-radius: var(--a-borderRadius);
|
|
33
|
+
position: relative;
|
|
34
|
+
|
|
35
|
+
&:empty {
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--a-info-space: var(--a-lineHeightHalf);
|
|
3
|
+
--a-info-spaceHalf: var(--a-lineHeightQuarter);
|
|
4
|
+
--a-info-borderColor: #4dabf7;
|
|
5
|
+
--a-info-background: #f0f8ff;
|
|
6
|
+
--a-info-color: #1c5d99;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
a-info,
|
|
10
|
+
div.a-info,
|
|
11
|
+
p.a-info {
|
|
12
|
+
display: block;
|
|
13
|
+
padding: var(--a-info-space);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a-brick.a-info,
|
|
17
|
+
span.a-info {
|
|
18
|
+
padding: 0 var(--a-info-spaceHalf);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
ul.a-info {
|
|
22
|
+
list-style-type: disc;
|
|
23
|
+
padding-top: var(--a-info-space);
|
|
24
|
+
padding-bottom: var(--a-info-space);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a-info,
|
|
28
|
+
.a-info {
|
|
29
|
+
box-shadow: inset 0 0 0px 1px var(--a-info-borderColor);
|
|
30
|
+
background: var(--a-info-background);
|
|
31
|
+
color: var(--a-info-color);
|
|
32
|
+
border-radius: var(--a-borderRadius);
|
|
33
|
+
position: relative;
|
|
34
|
+
|
|
35
|
+
&:empty {
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--a-pass-space: var(--a-lineHeightHalf);
|
|
3
|
+
--a-pass-spaceHalf: var(--a-lineHeightQuarter);
|
|
4
|
+
--a-pass-borderColor: #38d9a9;
|
|
5
|
+
--a-pass-background: #f0fffa;
|
|
6
|
+
--a-pass-color: #0b8f6a;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
a-pass,
|
|
10
|
+
div.a-pass,
|
|
11
|
+
p.a-pass {
|
|
12
|
+
display: block;
|
|
13
|
+
padding: var(--a-pass-space);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
a-brick.a-pass,
|
|
17
|
+
span.a-pass {
|
|
18
|
+
padding: 0 var(--a-pass-spaceHalf);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
ul.a-pass {
|
|
22
|
+
list-style-type: disc;
|
|
23
|
+
padding-top: var(--a-pass-space);
|
|
24
|
+
padding-bottom: var(--a-pass-space);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a-pass,
|
|
28
|
+
.a-pass {
|
|
29
|
+
box-shadow: inset 0 0 0px 1px var(--a-pass-borderColor);
|
|
30
|
+
background: var(--a-pass-background);
|
|
31
|
+
color: var(--a-pass-color);
|
|
32
|
+
border-radius: var(--a-borderRadius);
|
|
33
|
+
position: relative;
|
|
34
|
+
|
|
35
|
+
&:empty {
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
}
|