@angelscmf/front 1.0.12 → 1.0.14
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/package.json +1 -1
- package/sass/_AngelsHTMLElements.scss +47 -8
- package/sass/_AngelsPageLayout.scss +25 -5
- package/sass/_AngelsTheme.scss +10 -25
package/package.json
CHANGED
|
@@ -21,15 +21,40 @@
|
|
|
21
21
|
box-sizing: border-box;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
+
:root {
|
|
25
|
+
--a-link-color: #551c74;
|
|
26
|
+
--a-link-hover-color: #8F54B0;
|
|
27
|
+
}
|
|
28
|
+
|
|
24
29
|
a {
|
|
25
30
|
color: var(--a-link-color);
|
|
26
31
|
|
|
32
|
+
&:hover {
|
|
33
|
+
color: var(--a-link-hover-color);
|
|
34
|
+
}
|
|
35
|
+
|
|
27
36
|
&:focus {
|
|
28
37
|
box-shadow: var(--a-focus-box-shadow);
|
|
29
38
|
outline-color: var(--a-focus-outline-color);
|
|
30
39
|
}
|
|
31
40
|
}
|
|
32
41
|
|
|
42
|
+
:root {
|
|
43
|
+
--a-button-background: #fff;
|
|
44
|
+
--a-button-color: #8F54B0;
|
|
45
|
+
/* 1/2em */
|
|
46
|
+
--a-button-gap: var(--a-half-size);
|
|
47
|
+
/* 2em */
|
|
48
|
+
--a-button-min-height: var(--a-double-size);
|
|
49
|
+
--a-button-padding-left: var(--a-size);
|
|
50
|
+
--a-button-padding-right: var(--a-size);
|
|
51
|
+
--a-button-padding-top: var(--a-half-size);
|
|
52
|
+
--a-button-padding-bottom: var(--a-half-size);
|
|
53
|
+
--a-button-border-color: #8F54B0;
|
|
54
|
+
--a-button-border-style: solid;
|
|
55
|
+
--a-button-border-width: 2px;
|
|
56
|
+
}
|
|
57
|
+
|
|
33
58
|
button {
|
|
34
59
|
background: var(--a-button-background);
|
|
35
60
|
border-radius: var(--a-border-radius);
|
|
@@ -37,6 +62,8 @@ button {
|
|
|
37
62
|
border-style: var(--a-button-border-style);
|
|
38
63
|
border-width: var(--a-button-border-width);
|
|
39
64
|
color: var(--a-button-color);
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
gap: var(--a-button-gap);
|
|
40
67
|
min-height: var(--a-button-min-height);
|
|
41
68
|
padding-left: calc(var(--a-button-padding-left) - var(--a-button-border-width));
|
|
42
69
|
padding-right: calc(var(--a-button-padding-right) - var(--a-button-border-width));
|
|
@@ -47,18 +74,25 @@ button {
|
|
|
47
74
|
&:enabled {
|
|
48
75
|
cursor: pointer;
|
|
49
76
|
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
:root {
|
|
80
|
+
--a-submit-background: #8F54B0;
|
|
81
|
+
--a-submit-border-color: #551C74;
|
|
82
|
+
--a-submit-color: #fff;
|
|
83
|
+
}
|
|
50
84
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
85
|
+
button[type=submit] {
|
|
86
|
+
background: var(--a-submit-background);
|
|
87
|
+
border-width: var(--a-submit-border-width, --a-button-border-width);
|
|
88
|
+
color: var(--a-submit-color);
|
|
55
89
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
90
|
+
&:hover {
|
|
91
|
+
background: var(--a-submit-hover-background);
|
|
59
92
|
}
|
|
60
93
|
}
|
|
61
94
|
|
|
95
|
+
h1,
|
|
62
96
|
h1.a-h1 {
|
|
63
97
|
color: var(--a-header-color);
|
|
64
98
|
font-size: var(--a-header1-size);
|
|
@@ -66,6 +100,7 @@ h1.a-h1 {
|
|
|
66
100
|
padding: 0;
|
|
67
101
|
}
|
|
68
102
|
|
|
103
|
+
h2,
|
|
69
104
|
h2.a-h2 {
|
|
70
105
|
color: var(--a-header-color);
|
|
71
106
|
font-size: var(--a-header2-size);
|
|
@@ -75,6 +110,7 @@ h2.a-h2 {
|
|
|
75
110
|
padding: 0;
|
|
76
111
|
}
|
|
77
112
|
|
|
113
|
+
h3,
|
|
78
114
|
h3.a-h3 {
|
|
79
115
|
color: var(--a-header-color);
|
|
80
116
|
font-size: var(--a-header3-size);
|
|
@@ -84,18 +120,21 @@ h3.a-h3 {
|
|
|
84
120
|
padding: 0;
|
|
85
121
|
}
|
|
86
122
|
|
|
123
|
+
h4,
|
|
87
124
|
h4.a-h4 {
|
|
88
125
|
font-size: var(--a-header4-size);
|
|
89
126
|
margin: 0 0 8px 0;
|
|
90
127
|
padding: 0;
|
|
91
128
|
}
|
|
92
129
|
|
|
130
|
+
h5,
|
|
93
131
|
h5.a-h5 {
|
|
94
132
|
font-size: var(--a-header5-size);
|
|
95
133
|
margin: 0 0 4px 0;
|
|
96
134
|
padding: 0;
|
|
97
135
|
}
|
|
98
136
|
|
|
137
|
+
h6,
|
|
99
138
|
h6.a-h6 {
|
|
100
139
|
font-size: var(--a-header6-size);
|
|
101
140
|
margin: 0 0 4px 0;
|
|
@@ -113,7 +152,7 @@ p {
|
|
|
113
152
|
table.a-table {
|
|
114
153
|
|
|
115
154
|
td {
|
|
116
|
-
padding: .1em
|
|
155
|
+
padding: .1em var(--a-half-size);
|
|
117
156
|
}
|
|
118
157
|
}
|
|
119
158
|
|
|
@@ -18,24 +18,30 @@ html {
|
|
|
18
18
|
min-height: 100vh;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
:root {
|
|
22
|
+
--a-backgorund-color: #{AngelsVariables.$a-main-background-color};
|
|
23
|
+
}
|
|
24
|
+
|
|
21
25
|
body {
|
|
26
|
+
background-color: var(--a-backgorund-color);
|
|
27
|
+
color: var(--a-text-color);
|
|
28
|
+
font-family: var(--a-font-family);
|
|
29
|
+
font-size: var(--a-font-size);
|
|
30
|
+
line-height: var(--a-line-height);
|
|
22
31
|
min-height: 100vh;
|
|
23
32
|
min-width: AngelsVariables.$a-mobile-min-width;
|
|
24
33
|
margin: 0;
|
|
25
34
|
}
|
|
26
35
|
|
|
27
36
|
:root {
|
|
28
|
-
--a-page-background-color:
|
|
37
|
+
--a-page-background-color: var(--a-backgorund-color);
|
|
29
38
|
--a-page-gap: 0;
|
|
30
39
|
}
|
|
31
40
|
|
|
32
41
|
a-page {
|
|
33
42
|
background-color: var(--a-page-background-color);
|
|
34
|
-
color: var(--a-text-color);
|
|
35
43
|
display: flex;
|
|
36
44
|
flex-direction: column;
|
|
37
|
-
font-family: var(--a-font-family);
|
|
38
|
-
font-size: var(--a-font-size);
|
|
39
45
|
gap: var(--a-page-gap);
|
|
40
46
|
min-height: 100vh;
|
|
41
47
|
}
|
|
@@ -81,4 +87,18 @@ a-page-footer {
|
|
|
81
87
|
&:empty {
|
|
82
88
|
display: none;
|
|
83
89
|
}
|
|
84
|
-
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
a-block {
|
|
93
|
+
display: grid;
|
|
94
|
+
gap: var(--a-double-size);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
a-block-header {}
|
|
98
|
+
|
|
99
|
+
a-block-body {
|
|
100
|
+
display: grid;
|
|
101
|
+
gap: var(--a-double-size);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
a-block-footer {}
|
package/sass/_AngelsTheme.scss
CHANGED
|
@@ -13,7 +13,15 @@
|
|
|
13
13
|
@use "AngelsVariables";
|
|
14
14
|
|
|
15
15
|
:root {
|
|
16
|
-
|
|
16
|
+
// 1/2em = 8px;
|
|
17
|
+
--a-half-size: 8px;
|
|
18
|
+
// 1em = 16px;
|
|
19
|
+
--a-size: 16px;
|
|
20
|
+
// 2em = 32px;
|
|
21
|
+
--a-double-size: 32px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:root {
|
|
17
25
|
/* --a-border-radius: 4px = 1em/4 = 16px/4 */
|
|
18
26
|
--a-border-radius: 4px;
|
|
19
27
|
--a-font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
@@ -25,7 +33,7 @@
|
|
|
25
33
|
--a-header4-size: #{AngelsVariables.$a-font-size + 3};
|
|
26
34
|
--a-header5-size: #{AngelsVariables.$a-font-size + 2};
|
|
27
35
|
--a-header6-size: #{AngelsVariables.$a-font-size + 1};
|
|
28
|
-
--a-line-height:
|
|
36
|
+
--a-line-height: 24px;
|
|
29
37
|
--a-note-color: palevioletred;
|
|
30
38
|
--a-text-color: #4B2E2E;
|
|
31
39
|
}
|
|
@@ -33,27 +41,4 @@
|
|
|
33
41
|
:root {
|
|
34
42
|
--a-focus-box-shadow: 0 0 10px #551c74;
|
|
35
43
|
--a-focus-outline-color: #8f54b0;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:root {
|
|
39
|
-
--a-button-background: #fff;
|
|
40
|
-
--a-button-color: #8F54B0;
|
|
41
|
-
--a-button-min-height: 2em;
|
|
42
|
-
--a-button-padding-left: 1em;
|
|
43
|
-
--a-button-padding-right: 1em;
|
|
44
|
-
--a-button-padding-top: .5em;
|
|
45
|
-
--a-button-padding-bottom: .5em;
|
|
46
|
-
--a-button-border-color: #8F54B0;
|
|
47
|
-
--a-button-border-style: solid;
|
|
48
|
-
--a-button-border-width: 2px;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
:root {
|
|
52
|
-
--a-link-color: #551c74;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
:root {
|
|
56
|
-
--a-submit-background: #8F54B0;
|
|
57
|
-
--a-submit-border-color: #551C74;
|
|
58
|
-
--a-submit-color: #fff;
|
|
59
44
|
}
|