@appartmint/mint 0.12.7 → 0.12.8

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 +74 -20
  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 +259 -227
  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,271 @@
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
+ #{class(logo)} {
107
+ text-decoration: none;
111
108
  width: auto;
112
109
 
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
- }
110
+ img {
111
+ max-width: css-var(header-height);
112
+ }
113
+ }
114
+
115
+ #{controls(wrapper)} {
116
+ display: inline-block;
117
+ position: relative;
118
+ padding: $menu-btn-padding;
119
+ width: $menu-bar-width + $menu-btn-padding * 2;
120
+ height: $menu-btn-height + $menu-btn-padding * 2;
121
+ margin-left: auto;
122
+ border-radius: $border-radius;
123
+ background: css-var($menu-btn-color);
124
+ box-shadow: $menu-btn-shadow-size css-var($menu-btn-shadow-color);
125
+ z-index: 1000;
126
+
127
+ #{class(menu-icon)} {
128
+ top: 50%;
129
+ left: 50%;
130
+ transform: translate(-50%, -50%);
131
+
132
+ &,
133
+ &::before,
134
+ &::after {
135
+ content: '';
136
+ display: block;
137
+ position: absolute;
138
+ left: 50%;
139
+ height: $menu-bar-height;
140
+ width: $menu-bar-width;
141
+ background-color: css-var($menu-bar-color);
142
+ transition: delay(default);
143
+ }
144
+
145
+ &::before {
146
+ transform: translate(-50%, -200%);
147
+ }
148
+
149
+ &::after {
150
+ transform: translate(-50%, 200%);
151
+ }
152
+ }
153
+
154
+ &#{expanded(true)} {
155
+ #{class(menu-icon)} {
156
+ background: transparent;
157
+
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
+ &> :last-child {
194
+ margin-bottom: 0;
195
+ }
196
+ }
197
+
198
+ a,
199
+ button {
200
+ font-family: $font-secondary, $font-backups !important;
201
+ font-size: 3em;
202
+ padding: 0.5rem;
203
+ text-align: center;
204
+
205
+ @include break(xs) {
206
+ font-size: 4em;
207
+ }
208
+
209
+ @include states(hover, focus) {
210
+ background-color: css-var(shadow-5);
211
+ }
212
+
213
+ @include states(active) {
214
+ text-decoration: underline;
215
+ }
216
+ }
217
+
218
+ ul {
219
+ li {
220
+ &:last-child {
221
+ margin-bottom: 0;
222
+
223
+ ul {
224
+ margin-bottom: 0;
225
+ }
226
+ }
227
+ }
228
+ }
229
+ }
230
+
231
+ #{id(widgets)} {
232
+ position: absolute;
233
+ top: 0;
234
+ right: 0;
235
+ height: css-var(header-height);
236
+ }
237
+
238
+ #{class(dropdown)} {
239
+ background: css-var(header-bg);
240
+
241
+ button {
242
+ display: flex;
243
+ align-items: center;
244
+ justify-content: center;
245
+ min-width: css-var(header-height);
246
+ height: css-var(header-height);
247
+ padding: calc(css-var(header-height) / 2);
248
+ }
249
+
250
+ li {
251
+ padding: calc(css-var(header-height) / 2);
252
+ line-height: 1;
253
+ cursor: pointer;
254
+ }
255
+ }
256
+
257
+ #{$has-controls + neg(controls(wrapper))} {
258
+ &+ul {
259
+ display: flex;
260
+ flex-direction: column;
261
+ height: 0;
262
+ overflow: hidden;
263
+ transition: height css-var(delay-default), margin css-var(delay-default);
264
+ }
265
+
266
+ &#{$has-expanded + neg(expanded(true))} {
267
+ &+ul {
268
+ margin: 0;
269
+ }
270
+ }
271
+ }
241
272
  }
242
273
 
243
274
  #{id(navbar)} {
244
- display: flex;
245
- flex-direction: column;
246
- align-items: center;
247
- flex-direction: row;
248
- }
275
+ display: flex;
276
+ flex-direction: column;
277
+ align-items: center;
278
+ flex-direction: row;
279
+ height: 100%;
280
+ }