@appartmint/mint 0.12.7 → 0.12.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.
Files changed (8) hide show
  1. package/dist/css/mint.css +81 -27
  2. package/dist/css/mint.css.map +1 -1
  3. package/dist/css/mint.min.css +1 -1
  4. package/dist/css/mint.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/scss/imports/components/_header.scss +262 -229
  7. package/src/scss/imports/global/_global.scss +102 -77
  8. package/src/scss/imports/global/_themes.scss +75 -71
package/src/scss/imports/components/_header.scss CHANGED
@@ -10,239 +10,272 @@
10
10
 
11
11
  /// CSS Variables
12
12
  :root {
13
- @include css-var(header-height, $header-height);
14
- @include css-var-ref(header-bg, $header-bg);
15
- @include css-var-ref(header-fg, $header-fg);
13
+ @include css-var(header-height, $header-height);
14
+ @include css-var-ref(header-bg, $header-bg);
15
+ @include css-var-ref(header-fg, $header-fg);
16
16
  }
17
17
 
18
18
  /// Header Styles
19
19
  #{id(header)} {
20
- position: relative;
21
- width: 100%;
22
- color: css-var(header-fg);
23
- background-color: css-var(header-bg);
24
- z-index: 10000;
25
- height: css-var(header-height);
26
- //padding: 0 calc(css-var(header-height) / 2);
27
-
28
- &#{class(fixed)} {
29
- position: fixed;
30
- top: 0;
31
- left: 0;
32
- }
33
-
34
- &#{class(right)} {
35
- #{id(wrapper)} {
36
- top: css-var(header-height);
37
- right: -100%;
38
- left: unset;
39
-
40
- &#{class(open)} {
41
- right: 0;
42
- }
43
- }
44
- }
45
-
46
- &#{class(bottom)} {
47
- #{id(wrapper)} {
48
- top: unset;
49
- bottom: -100%;
50
-
51
- &#{class(open)} {
52
- bottom: 0;
53
- }
54
- }
55
- }
56
-
57
- &#{class(left)} {
58
- #{id(wrapper)} {
59
- top: css-var(header-height);
60
- left: -100%;
61
-
62
- &#{class(open)} {
63
- left: 0;
64
- }
65
- }
66
- }
67
-
68
- &::before {
69
- content: '';
70
- position: absolute;
71
- top: 0;
72
- left: 0;
73
- width: 100%;
74
- height: css-var(header-height);
75
- background: css-var(header-bg);
76
- z-index: -1;
77
- }
78
-
79
- nav {
80
- & > ul {
81
- display: flex;
82
- flex-direction: column;
83
- }
84
- }
85
-
86
- ul {
87
- list-style: none;
88
- margin-top: 0;
89
- margin-bottom: 1rem;
90
- padding-left: 0;
91
- }
92
-
93
- a, button {
94
- display: flex;
95
- align-items: center;
96
- width: 100%;
97
- margin: 0;
98
- border: 0;
99
- color: css-var(header-fg);
100
- background: css-var(trans);
101
- }
102
-
103
- h1 {
104
- display: flex;
105
- white-space: nowrap;
106
- margin: 0;
107
- }
108
-
109
- #{class(logo)} {
110
- text-decoration: none;
20
+ position: relative;
21
+ width: 100%;
22
+ color: css-var(header-fg);
23
+ background-color: css-var(header-bg);
24
+ z-index: 10000;
25
+ height: css-var(header-height);
26
+ //padding: 0 calc(css-var(header-height) / 2);
27
+
28
+ &#{class(right)} {
29
+ #{id(wrapper)} {
30
+ top: css-var(header-height);
31
+ right: -100%;
32
+ left: unset;
33
+
34
+ &#{class(open)} {
35
+ right: 0;
36
+ }
37
+ }
38
+ }
39
+
40
+ &#{class(bottom)} {
41
+ #{id(wrapper)} {
42
+ top: unset;
43
+ bottom: -100%;
44
+
45
+ &#{class(open)} {
46
+ bottom: 0;
47
+ }
48
+ }
49
+ }
50
+
51
+ &#{class(left)} {
52
+ #{id(wrapper)} {
53
+ top: css-var(header-height);
54
+ left: -100%;
55
+
56
+ &#{class(open)} {
57
+ left: 0;
58
+ }
59
+ }
60
+ }
61
+
62
+ &::before {
63
+ content: '';
64
+ position: absolute;
65
+ top: 0;
66
+ left: 0;
67
+ width: 100%;
68
+ height: css-var(header-height);
69
+ background: css-var(header-bg);
70
+ z-index: -1;
71
+ }
72
+
73
+ nav {
74
+ &>ul {
75
+ display: flex;
76
+ flex-direction: column;
77
+ }
78
+ }
79
+
80
+ ul {
81
+ list-style: none;
82
+ margin-top: 0;
83
+ margin-bottom: 1rem;
84
+ padding-left: 0;
85
+ }
86
+
87
+ a,
88
+ button {
89
+ width: 100%;
90
+ margin: 0;
91
+ border: 0;
92
+ color: css-var(fore);
93
+ background: css-var(trans);
94
+
95
+ @include states(hover, focus) {
96
+ color: css-var(back);
97
+ }
98
+ }
99
+
100
+ h1 {
101
+ display: flex;
102
+ white-space: nowrap;
103
+ margin: 0;
104
+ }
105
+
106
+ #{id(navbar)} {
107
+ display: flex;
108
+ flex-direction: column;
109
+ align-items: center;
110
+ flex-direction: row;
111
+ height: 100%;
112
+ }
113
+
114
+ #{class(logo)} {
115
+ text-decoration: none;
111
116
  width: auto;
112
117
 
113
- img {
114
- max-width: css-var(header-height);
115
- }
116
- }
117
-
118
- #{controls(wrapper)} {
119
- display: inline-block;
120
- position: relative;
121
- padding: $menu-btn-padding;
122
- width: $menu-bar-width + $menu-btn-padding * 2;
123
- height: $menu-btn-height + $menu-btn-padding * 2;
124
- margin-left: auto;
125
- border-radius: $border-radius;
126
- background: css-var($menu-btn-color);
127
- box-shadow: $menu-btn-shadow-size css-var($menu-btn-shadow-color);
128
- z-index: 1000;
129
-
130
- #{class(menu-icon)} {
131
- top: 50%;
132
- left: 50%;
133
- transform: translate(-50%, -50%);
134
-
135
- &, &::before, &::after {
136
- content: '';
137
- display: block;
138
- position: absolute;
139
- left: 50%;
140
- height: $menu-bar-height;
141
- width: $menu-bar-width;
142
- background-color: css-var($menu-bar-color);
143
- transition: delay(default);
144
- }
145
-
146
- &::before {
147
- transform: translate(-50%, -200%);
148
- }
149
-
150
- &::after {
151
- transform: translate(-50%, 200%);
152
- }
153
- }
154
-
155
- &#{expanded(true)} {
156
- #{class(menu-icon)} {
157
- background: transparent;
158
- &::before {
159
- transform: translate(-50%, 0) rotate(45deg);
160
- }
161
-
162
- &::after {
163
- transform: translate(-50%, 0) rotate(-45deg);
164
- }
165
- }
166
- }
167
- }
168
-
169
- #{id(wrapper)} {
170
- display: flex;
171
- flex-direction: column;
172
- position: fixed;
173
- top: -100%;
174
- left: 0;
175
- width: 100%;
176
- height: calc(100vh - css-var(header-height));
177
- z-index: -2;
178
- background: css-var(header-bg);
179
- transition-duration: css-var(delay-default);
180
- transition-property: top, right, bottom, left;
181
- overflow: auto;
182
-
183
- &#{class(open)} {
184
- top: css-var(header-height);
185
- }
186
-
187
- nav {
188
- height: 100%;
189
- background: css-var(back);
190
- overflow: auto;
191
- background-repeat: repeat;
192
- }
193
-
194
- a, button {
195
- font-family: $font-secondary, $font-backups !important;
196
- font-size: 4em;
197
- }
198
- }
199
-
200
- #{id(widgets)} {
201
- position: absolute;
202
- top: 0;
203
- right: 0;
204
- height: css-var(header-height);
205
- }
206
-
207
- #{class(dropdown)} {
208
- background: css-var(header-bg);
209
-
210
- button {
211
- display: flex;
212
- align-items: center;
213
- justify-content: center;
214
- min-width: css-var(header-height);
215
- height: css-var(header-height);
216
- padding: calc(css-var(header-height) / 2);
217
- }
218
-
219
- li {
220
- padding: calc(css-var(header-height) / 2);
221
- line-height: 1;
222
- cursor: pointer;
223
- }
224
- }
225
-
226
- #{$has-controls + neg(controls(wrapper))} {
227
- & + ul {
228
- display: flex;
229
- flex-direction: column;
230
- height: 0;
231
- overflow: hidden;
232
- transition: height css-var(delay-default), margin css-var(delay-default);
233
- }
234
-
235
- &#{$has-expanded + neg(expanded(true))} {
236
- & + ul {
237
- margin: 0;
238
- }
239
- }
240
- }
241
- }
242
-
243
- #{id(navbar)} {
244
- display: flex;
245
- flex-direction: column;
246
- align-items: center;
247
- flex-direction: row;
118
+ img {
119
+ max-width: css-var(header-height);
120
+ }
121
+ }
122
+
123
+ #{controls(wrapper)} {
124
+ display: inline-block;
125
+ position: relative;
126
+ padding: $menu-btn-padding;
127
+ width: $menu-bar-width + $menu-btn-padding * 2;
128
+ height: $menu-btn-height + $menu-btn-padding * 2;
129
+ margin-left: auto;
130
+ border-radius: $border-radius;
131
+ background: css-var($menu-btn-color);
132
+ box-shadow: $menu-btn-shadow-size css-var($menu-btn-shadow-color);
133
+ z-index: 1000;
134
+
135
+ #{class(menu-icon)} {
136
+ top: 50%;
137
+ left: 50%;
138
+ transform: translate(-50%, -50%);
139
+
140
+ &,
141
+ &::before,
142
+ &::after {
143
+ content: '';
144
+ display: block;
145
+ position: absolute;
146
+ left: 50%;
147
+ height: $menu-bar-height;
148
+ width: $menu-bar-width;
149
+ background-color: css-var($menu-bar-color);
150
+ transition: delay(default);
151
+ }
152
+
153
+ &::before {
154
+ transform: translate(-50%, -200%);
155
+ }
156
+
157
+ &::after {
158
+ transform: translate(-50%, 200%);
159
+ }
160
+ }
161
+
162
+ &#{expanded(true)} {
163
+ #{class(menu-icon)} {
164
+ background: transparent;
165
+
166
+ &::before {
167
+ transform: translate(-50%, 0) rotate(45deg);
168
+ }
169
+
170
+ &::after {
171
+ transform: translate(-50%, 0) rotate(-45deg);
172
+ }
173
+ }
174
+ }
175
+ }
176
+
177
+ #{id(wrapper)} {
178
+ display: flex;
179
+ flex-direction: column;
180
+ position: fixed;
181
+ top: -100%;
182
+ left: 0;
183
+ width: 100%;
184
+ height: calc(100vh - css-var(header-height));
185
+ height: calc(100dvh - css-var(header-height));
186
+ z-index: -2;
187
+ background: css-var(header-bg);
188
+ transition-duration: css-var(delay-default);
189
+ transition-property: top, right, bottom, left;
190
+ overflow: auto;
191
+
192
+ &#{class(open)} {
193
+ top: css-var(header-height);
194
+ }
195
+
196
+ nav {
197
+ height: 100%;
198
+ background: css-var(back);
199
+ overflow: auto;
200
+ background-repeat: repeat;
201
+
202
+ &> :last-child {
203
+ margin-bottom: 0;
204
+ }
205
+ }
206
+
207
+ a,
208
+ button {
209
+ font-family: $font-secondary, $font-backups !important;
210
+ font-size: 3em;
211
+ padding: 0.5rem;
212
+ text-align: center;
213
+
214
+ @include break(xs) {
215
+ font-size: 4em;
216
+ }
217
+
218
+ @include states(hover, focus) {
219
+ background-color: css-var(shadow-5);
220
+ }
221
+
222
+ @include states(active) {
223
+ text-decoration: underline;
224
+ }
225
+ }
226
+
227
+ ul {
228
+ li {
229
+ &:last-child {
230
+ margin-bottom: 0;
231
+
232
+ ul {
233
+ margin-bottom: 0;
234
+ }
235
+ }
236
+ }
237
+ }
238
+ }
239
+
240
+ #{id(widgets)} {
241
+ position: absolute;
242
+ top: 0;
243
+ right: 0;
244
+ height: css-var(header-height);
245
+ }
246
+
247
+ #{class(dropdown)} {
248
+ background: css-var(header-bg);
249
+
250
+ button {
251
+ display: flex;
252
+ align-items: center;
253
+ justify-content: center;
254
+ min-width: css-var(header-height);
255
+ height: css-var(header-height);
256
+ padding: calc(css-var(header-height) / 2);
257
+ }
258
+
259
+ li {
260
+ padding: calc(css-var(header-height) / 2);
261
+ line-height: 1;
262
+ cursor: pointer;
263
+ }
264
+ }
265
+
266
+ #{$has-controls + neg(controls(wrapper))} {
267
+ &+ul {
268
+ display: flex;
269
+ flex-direction: column;
270
+ height: 0;
271
+ overflow: hidden;
272
+ transition: height css-var(delay-default), margin css-var(delay-default);
273
+ }
274
+
275
+ &#{$has-expanded + neg(expanded(true))} {
276
+ &+ul {
277
+ margin: 0;
278
+ }
279
+ }
280
+ }
248
281
  }