@angelscmf/front 1.0.13 → 1.0.15
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 +79 -14
- package/sass/_AngelsPageLayout.scss +89 -8
- package/sass/_AngelsTheme.scss +12 -32
package/package.json
CHANGED
|
@@ -21,6 +21,11 @@
|
|
|
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
|
|
|
@@ -34,6 +39,22 @@ a {
|
|
|
34
39
|
}
|
|
35
40
|
}
|
|
36
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
|
+
|
|
37
58
|
button {
|
|
38
59
|
background: var(--a-button-background);
|
|
39
60
|
border-radius: var(--a-border-radius);
|
|
@@ -41,6 +62,8 @@ button {
|
|
|
41
62
|
border-style: var(--a-button-border-style);
|
|
42
63
|
border-width: var(--a-button-border-width);
|
|
43
64
|
color: var(--a-button-color);
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
gap: var(--a-button-gap);
|
|
44
67
|
min-height: var(--a-button-min-height);
|
|
45
68
|
padding-left: calc(var(--a-button-padding-left) - var(--a-button-border-width));
|
|
46
69
|
padding-right: calc(var(--a-button-padding-right) - var(--a-button-border-width));
|
|
@@ -51,58 +74,100 @@ button {
|
|
|
51
74
|
&:enabled {
|
|
52
75
|
cursor: pointer;
|
|
53
76
|
}
|
|
77
|
+
}
|
|
54
78
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
79
|
+
:root {
|
|
80
|
+
--a-submit-background: #8F54B0;
|
|
81
|
+
--a-submit-border-color: #551C74;
|
|
82
|
+
--a-submit-color: #fff;
|
|
83
|
+
}
|
|
84
|
+
|
|
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);
|
|
59
89
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
90
|
+
&:hover {
|
|
91
|
+
background: var(--a-submit-hover-background);
|
|
63
92
|
}
|
|
64
93
|
}
|
|
65
94
|
|
|
95
|
+
:root {
|
|
96
|
+
--a-header1-margin: 0;
|
|
97
|
+
--a-header1-size: #{AngelsVariables.$a-font-size + 6};
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
h1,
|
|
66
101
|
h1.a-h1 {
|
|
67
102
|
color: var(--a-header-color);
|
|
68
103
|
font-size: var(--a-header1-size);
|
|
69
|
-
margin:
|
|
104
|
+
margin: var(--a-header1-margin);
|
|
70
105
|
padding: 0;
|
|
71
106
|
}
|
|
72
107
|
|
|
108
|
+
:root {
|
|
109
|
+
--a-header2-margin: 0;
|
|
110
|
+
--a-header2-size: #{AngelsVariables.$a-font-size + 5};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
h2,
|
|
73
114
|
h2.a-h2 {
|
|
74
115
|
color: var(--a-header-color);
|
|
75
116
|
font-size: var(--a-header2-size);
|
|
76
117
|
font-weight: normal;
|
|
77
118
|
letter-spacing: 2px;
|
|
78
|
-
margin:
|
|
119
|
+
margin: var(--a-header2-margin);
|
|
79
120
|
padding: 0;
|
|
80
121
|
}
|
|
81
122
|
|
|
123
|
+
:root {
|
|
124
|
+
--a-header3-margin: 0;
|
|
125
|
+
--a-header3-size: #{AngelsVariables.$a-font-size + 4};
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
h3,
|
|
82
129
|
h3.a-h3 {
|
|
83
130
|
color: var(--a-header-color);
|
|
84
131
|
font-size: var(--a-header3-size);
|
|
85
132
|
font-weight: normal;
|
|
86
133
|
letter-spacing: 2px;
|
|
87
|
-
margin:
|
|
134
|
+
margin: var(--a-header3-margin);
|
|
88
135
|
padding: 0;
|
|
89
136
|
}
|
|
90
137
|
|
|
138
|
+
:root {
|
|
139
|
+
--a-header4-margin: 0;
|
|
140
|
+
--a-header4-size: #{AngelsVariables.$a-font-size + 3};
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
h4,
|
|
91
144
|
h4.a-h4 {
|
|
92
145
|
font-size: var(--a-header4-size);
|
|
93
|
-
margin:
|
|
146
|
+
margin: var(--a-header4-margin);
|
|
94
147
|
padding: 0;
|
|
95
148
|
}
|
|
96
149
|
|
|
150
|
+
:root {
|
|
151
|
+
--a-header5-margin: 0;
|
|
152
|
+
--a-header5-size: #{AngelsVariables.$a-font-size + 2};
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
h5,
|
|
97
156
|
h5.a-h5 {
|
|
98
157
|
font-size: var(--a-header5-size);
|
|
99
|
-
margin:
|
|
158
|
+
margin: var(--a-header5-margin);
|
|
100
159
|
padding: 0;
|
|
101
160
|
}
|
|
102
161
|
|
|
162
|
+
:root {
|
|
163
|
+
--a-header6-margin: 0;
|
|
164
|
+
--a-header6-size: #{AngelsVariables.$a-font-size + 1};
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
h6,
|
|
103
168
|
h6.a-h6 {
|
|
104
169
|
font-size: var(--a-header6-size);
|
|
105
|
-
margin:
|
|
170
|
+
margin: var(--a-header6-margin);
|
|
106
171
|
padding: 0;
|
|
107
172
|
}
|
|
108
173
|
|
|
@@ -117,7 +182,7 @@ p {
|
|
|
117
182
|
table.a-table {
|
|
118
183
|
|
|
119
184
|
td {
|
|
120
|
-
padding: .1em
|
|
185
|
+
padding: .1em var(--a-half-size);
|
|
121
186
|
}
|
|
122
187
|
}
|
|
123
188
|
|
|
@@ -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
|
}
|
|
@@ -57,28 +63,103 @@ a-page-header {
|
|
|
57
63
|
}
|
|
58
64
|
}
|
|
59
65
|
|
|
66
|
+
:root {
|
|
67
|
+
--a-page-body-gap: var(--a-4x-size);
|
|
68
|
+
--a-page-body-padding: var(--a-4x-size) var(--a-size);
|
|
69
|
+
}
|
|
70
|
+
|
|
60
71
|
a-page-body {
|
|
61
72
|
display: flex;
|
|
62
73
|
flex-direction: column;
|
|
63
74
|
flex-grow: 1;
|
|
64
|
-
gap:
|
|
65
|
-
padding:
|
|
75
|
+
gap: var(--a-page-body-gap);
|
|
76
|
+
padding: var(--a-page-body-padding);
|
|
66
77
|
}
|
|
67
78
|
|
|
68
79
|
:root {
|
|
69
80
|
--a-page-footer-background-color: #{AngelsVariables.$a-second-background-color};
|
|
81
|
+
--a-page-footer-padding: var(--a-size);
|
|
82
|
+
--a-page-footer-gap: var(--a-double-size);
|
|
70
83
|
--a-page-footer-text-color: #{AngelsVariables.$a-second-text-color};
|
|
71
|
-
--a-page-footer-padding: 1rem;
|
|
72
84
|
}
|
|
73
85
|
|
|
74
86
|
a-page-footer {
|
|
75
87
|
background-color: var(--a-page-footer-background-color);
|
|
76
88
|
color: var(--a-page-footer-text-color);
|
|
77
|
-
display:
|
|
89
|
+
display: grid;
|
|
78
90
|
font-family: monospace;
|
|
91
|
+
gap: var(--a-page-footer-gap);
|
|
79
92
|
padding: var(--a-page-footer-padding);
|
|
80
93
|
|
|
81
94
|
&:empty {
|
|
82
95
|
display: none;
|
|
83
96
|
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
a-block {
|
|
100
|
+
display: grid;
|
|
101
|
+
gap: var(--a-double-size);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
a-block-header {}
|
|
105
|
+
|
|
106
|
+
a-block-body {
|
|
107
|
+
display: grid;
|
|
108
|
+
gap: var(--a-double-size);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
a-block-footer {}
|
|
112
|
+
|
|
113
|
+
a-infra {
|
|
114
|
+
color: steelblue;
|
|
115
|
+
display: flex;
|
|
116
|
+
gap: var(--a-double-size);
|
|
117
|
+
flex-wrap: wrap;
|
|
118
|
+
align-items: flex-start;
|
|
119
|
+
justify-content: center;
|
|
120
|
+
|
|
121
|
+
address {
|
|
122
|
+
font-style: normal;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
a-infral {
|
|
127
|
+
display: grid;
|
|
128
|
+
gap: var(--a-size);
|
|
129
|
+
min-width: 200px;
|
|
130
|
+
|
|
131
|
+
>header {}
|
|
132
|
+
|
|
133
|
+
>nav {
|
|
134
|
+
display: grid;
|
|
135
|
+
|
|
136
|
+
>a {
|
|
137
|
+
width: fit-content;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
a-law {
|
|
143
|
+
font-family: monospace;
|
|
144
|
+
|
|
145
|
+
display: grid;
|
|
146
|
+
gap: var(--a-size);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
a-properties {
|
|
151
|
+
display: grid;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
a-property {
|
|
155
|
+
|
|
156
|
+
&strong {
|
|
157
|
+
|
|
158
|
+
&::after {
|
|
159
|
+
content: ':';
|
|
160
|
+
display: inline-block;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
&span {}
|
|
84
165
|
}
|
package/sass/_AngelsTheme.scss
CHANGED
|
@@ -13,19 +13,23 @@
|
|
|
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
|
+
// 4em = 64px;
|
|
23
|
+
--a-4x-size: 64px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:root {
|
|
17
27
|
/* --a-border-radius: 4px = 1em/4 = 16px/4 */
|
|
18
28
|
--a-border-radius: 4px;
|
|
19
29
|
--a-font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
20
30
|
--a-font-size: 16px;
|
|
21
31
|
--a-header-color: orangered;
|
|
22
|
-
--a-
|
|
23
|
-
--a-header2-size: #{AngelsVariables.$a-font-size + 5};
|
|
24
|
-
--a-header3-size: #{AngelsVariables.$a-font-size + 4};
|
|
25
|
-
--a-header4-size: #{AngelsVariables.$a-font-size + 3};
|
|
26
|
-
--a-header5-size: #{AngelsVariables.$a-font-size + 2};
|
|
27
|
-
--a-header6-size: #{AngelsVariables.$a-font-size + 1};
|
|
28
|
-
--a-line-height: 1.5;
|
|
32
|
+
--a-line-height: 24px;
|
|
29
33
|
--a-note-color: palevioletred;
|
|
30
34
|
--a-text-color: #4B2E2E;
|
|
31
35
|
}
|
|
@@ -33,28 +37,4 @@
|
|
|
33
37
|
:root {
|
|
34
38
|
--a-focus-box-shadow: 0 0 10px #551c74;
|
|
35
39
|
--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
|
-
--a-link-hover-color: #8F54B0;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
:root {
|
|
57
|
-
--a-submit-background: #8F54B0;
|
|
58
|
-
--a-submit-border-color: #551C74;
|
|
59
|
-
--a-submit-color: #fff;
|
|
60
40
|
}
|