minolith 0.0.6 → 0.0.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 (9) hide show
  1. package/dist/css/minolith.css +662 -466
  2. package/dist/css/minolith.css.map +1 -1
  3. package/dist/css/minolith.min.css +3 -3
  4. package/dist/css/minolith.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/nav.scss +157 -157
  7. package/src/mixins/responsive.scss +51 -29
  8. package/src/variables/color.scss +19 -11
  9. package/src/variables/miscellaneous.scss +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "minolith",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "description": "design system by minominolyly",
5
5
  "main": "src/minolith.scss",
6
6
  "scripts": {
package/src/components/nav.scss CHANGED
@@ -64,56 +64,56 @@
64
64
  padding: 0.5rem;
65
65
  position: relative;
66
66
  text-decoration: none;
67
- color: var(--color-default-fore);
68
- text-shadow: 2px 2px 1px var(--color-default-shadow),
69
- -2px 2px 1px var(--color-default-shadow),
70
- 2px -2px 1px var(--color-default-shadow),
71
- -2px -2px 1px var(--color-default-shadow),
72
- 2px 0px 1px var(--color-default-shadow),
73
- 0px 2px 1px var(--color-default-shadow),
74
- -2px 0px 1px var(--color-default-shadow),
75
- 0px -2px 1px var(--color-default-shadow);
67
+ color: var(--#{variables.$prefix}color-default-fore);
68
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
69
+ -2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
70
+ 2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
71
+ -2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
72
+ 2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
73
+ 0px 2px 1px var(--#{variables.$prefix}color-default-shadow),
74
+ -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
75
+ 0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
76
76
  .icon {
77
- filter: drop-shadow(2px 2px 1px var(--color-default-shadow))
78
- drop-shadow(-2px 2px 1px var(--color-default-shadow))
79
- drop-shadow(2px -2px 1px var(--color-default-shadow))
80
- drop-shadow(-2px -2px 1px var(--color-default-shadow));
77
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
78
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
79
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-shadow))
80
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-shadow));
81
81
  }
82
82
  &:hover {
83
- color: var(--color-default-fore-hover);
84
- text-shadow: 2px 2px 1px var(--color-default-hover-shadow),
85
- -2px 2px 1px var(--color-default-hover-shadow),
86
- 2px -2px 1px var(--color-default-hover-shadow),
87
- -2px -2px 1px var(--color-default-hover-shadow),
88
- 2px 0px 1px var(--color-default-hover-shadow),
89
- 0px 2px 1px var(--color-default-hover-shadow),
90
- -2px 0px 1px var(--color-default-hover-shadow),
91
- 0px -2px 1px var(--color-default-hover-shadow);
83
+ color: var(--#{variables.$prefix}color-default-fore-hover);
84
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
85
+ -2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
86
+ 2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
87
+ -2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
88
+ 2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
89
+ 0px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
90
+ -2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
91
+ 0px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow);
92
92
  opacity: 0.8;
93
93
  .icon {
94
- filter: drop-shadow(2px 2px 1px var(--color-default-hover-shadow))
95
- drop-shadow(-2px 2px 1px var(--color-default-hover-shadow))
96
- drop-shadow(2px -2px 1px var(--color-default-hover-shadow))
97
- drop-shadow(-2px -2px 1px var(--color-default-hover-shadow));
94
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
95
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
96
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
97
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow));
98
98
  }
99
99
  }
100
100
  &:active {
101
- color: var(--color-default-fore-active);
102
- text-shadow: 2px 2px 1px var(--color-default-active-shadow),
103
- -2px 2px 1px var(--color-default-active-shadow),
104
- 2px -2px 1px var(--color-default-active-shadow),
105
- -2px -2px 1px var(--color-default-active-shadow),
106
- 2px 0px 1px var(--color-default-active-shadow),
107
- 0px 2px 1px var(--color-default-active-shadow),
108
- -2px 0px 1px var(--color-default-active-shadow),
109
- 0px -2px 1px var(--color-default-active-shadow);
101
+ color: var(--#{variables.$prefix}color-default-fore-active);
102
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
103
+ -2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
104
+ 2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
105
+ -2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
106
+ 2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
107
+ 0px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
108
+ -2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
109
+ 0px -2px 1px var(--#{variables.$prefix}color-default-active-shadow);
110
110
  .icon {
111
111
  filter: drop-shadow(
112
- 2px 2px 1px var(--color-default-active-shadow)
112
+ 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow)
113
113
  )
114
- drop-shadow(-2px 2px 1px var(--color-default-active-shadow))
115
- drop-shadow(2px -2px 1px var(--color-default-active-shadow))
116
- drop-shadow(-2px -2px 1px var(--color-default-active-shadow));
114
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow))
115
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow))
116
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow));
117
117
  }
118
118
  }
119
119
  }
@@ -162,7 +162,7 @@
162
162
  display: block;
163
163
  }
164
164
  .nav-menu-item {
165
- color: var(--color-default-fore);
165
+ color: var(--#{variables.$prefix}color-default-fore);
166
166
  width: 100%;
167
167
  display: block;
168
168
  cursor: pointer;
@@ -172,54 +172,54 @@
172
172
  padding: 0.5rem;
173
173
  position: relative;
174
174
  text-decoration: none;
175
- text-shadow: 2px 2px 1px var(--color-default-shadow),
176
- -2px 2px 1px var(--color-default-shadow),
177
- 2px -2px 1px var(--color-default-shadow),
178
- -2px -2px 1px var(--color-default-shadow),
179
- 2px 0px 1px var(--color-default-shadow),
180
- 0px 2px 1px var(--color-default-shadow),
181
- -2px 0px 1px var(--color-default-shadow),
182
- 0px -2px 1px var(--color-default-shadow);
175
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
176
+ -2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
177
+ 2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
178
+ -2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
179
+ 2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
180
+ 0px 2px 1px var(--#{variables.$prefix}color-default-shadow),
181
+ -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
182
+ 0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
183
183
  .icon {
184
- filter: drop-shadow(2px 2px 1px var(--color-default-shadow))
185
- drop-shadow(-2px 2px 1px var(--color-default-shadow))
186
- drop-shadow(2px -2px 1px var(--color-default-shadow))
187
- drop-shadow(-2px -2px 1px var(--color-default-shadow));
184
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
185
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
186
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-shadow))
187
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-shadow));
188
188
  }
189
189
  &:hover {
190
- color: var(--color-default-fore-hover);
191
- text-shadow: 2px 2px 1px var(--color-default-hover-shadow),
192
- -2px 2px 1px var(--color-default-hover-shadow),
193
- 2px -2px 1px var(--color-default-hover-shadow),
194
- -2px -2px 1px var(--color-default-hover-shadow),
195
- 2px 0px 1px var(--color-default-hover-shadow),
196
- 0px 2px 1px var(--color-default-hover-shadow),
197
- -2px 0px 1px var(--color-default-hover-shadow),
198
- 0px -2px 1px var(--color-default-hover-shadow);
190
+ color: var(--#{variables.$prefix}color-default-fore-hover);
191
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
192
+ -2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
193
+ 2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
194
+ -2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
195
+ 2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
196
+ 0px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
197
+ -2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
198
+ 0px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow);
199
199
  .icon {
200
- filter: drop-shadow(2px 2px 1px var(--color-default-hover-shadow))
201
- drop-shadow(-2px 2px 1px var(--color-default-hover-shadow))
202
- drop-shadow(2px -2px 1px var(--color-default-hover-shadow))
203
- drop-shadow(-2px -2px 1px var(--color-default-hover-shadow));
200
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
201
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
202
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
203
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow));
204
204
  }
205
205
  }
206
206
  &:active {
207
- color: var(--color-default-fore-active);
208
- text-shadow: 2px 2px 1px var(--color-default-active-shadow),
209
- -2px 2px 1px var(--color-default-active-shadow),
210
- 2px -2px 1px var(--color-default-active-shadow),
211
- -2px -2px 1px var(--color-default-active-shadow),
212
- 2px 0px 1px var(--color-default-active-shadow),
213
- 0px 2px 1px var(--color-default-active-shadow),
214
- -2px 0px 1px var(--color-default-active-shadow),
215
- 0px -2px 1px var(--color-default-active-shadow);
207
+ color: var(--#{variables.$prefix}color-default-fore-active);
208
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
209
+ -2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
210
+ 2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
211
+ -2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
212
+ 2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
213
+ 0px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
214
+ -2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
215
+ 0px -2px 1px var(--#{variables.$prefix}color-default-active-shadow);
216
216
  .icon {
217
217
  filter: drop-shadow(
218
- 2px 2px 1px var(--color-default-active-shadow)
218
+ 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow)
219
219
  )
220
- drop-shadow(-2px 2px 1px var(--color-default-active-shadow))
221
- drop-shadow(2px -2px 1px var(--color-default-active-shadow))
222
- drop-shadow(-2px -2px 1px var(--color-default-active-shadow));
220
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow))
221
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow))
222
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow));
223
223
  }
224
224
  }
225
225
  }
@@ -230,73 +230,73 @@
230
230
  @each $color in variables.$colors {
231
231
  $colorName: map.get($color, "name");
232
232
  &.is-#{$colorName} {
233
- color: var(--color-#{$colorName}-fore);
233
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore);
234
234
  .nav-accordion {
235
235
  .nav-menu {
236
236
  .nav-menu-item {
237
- color: var(--color-#{$colorName}-fore);
238
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-shadow),
239
- -2px 2px 1px var(--color-#{$colorName}-shadow),
240
- 2px -2px 1px var(--color-#{$colorName}-shadow),
241
- -2px -2px 1px var(--color-#{$colorName}-shadow),
242
- 2px 0px 1px var(--color-#{$colorName}-shadow),
243
- 0px 2px 1px var(--color-#{$colorName}-shadow),
244
- -2px 0px 1px var(--color-#{$colorName}-shadow),
245
- 0px -2px 1px var(--color-#{$colorName}-shadow);
237
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore);
238
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
239
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
240
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
241
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
242
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
243
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
244
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
245
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow);
246
246
  .icon {
247
- filter: drop-shadow(2px 2px 1px var(--color-#{$colorName}-shadow))
248
- drop-shadow(-2px 2px 1px var(--color-#{$colorName}-shadow))
249
- drop-shadow(2px -2px 1px var(--color-#{$colorName}-shadow))
250
- drop-shadow(-2px -2px 1px var(--color-#{$colorName}-shadow));
247
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
248
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
249
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
250
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow));
251
251
  }
252
252
  &:hover {
253
- color: var(--color-#{$colorName}-fore-hover);
254
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-hover-shadow),
255
- -2px 2px 1px var(--color-#{$colorName}-hover-shadow),
256
- 2px -2px 1px var(--color-#{$colorName}-hover-shadow),
257
- -2px -2px 1px var(--color-#{$colorName}-hover-shadow),
258
- 2px 0px 1px var(--color-#{$colorName}-hover-shadow),
259
- 0px 2px 1px var(--color-#{$colorName}-hover-shadow),
260
- -2px 0px 1px var(--color-#{$colorName}-hover-shadow),
261
- 0px -2px 1px var(--color-#{$colorName}-hover-shadow);
253
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore-hover);
254
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
255
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
256
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
257
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
258
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
259
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
260
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
261
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow);
262
262
  opacity: 0.8;
263
263
  .icon {
264
264
  filter: drop-shadow(
265
- 2px 2px 1px var(--color-#{$colorName}-hover-shadow)
265
+ 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
266
266
  )
267
267
  drop-shadow(
268
- -2px 2px 1px var(--color-#{$colorName}-hover-shadow)
268
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
269
269
  )
270
270
  drop-shadow(
271
- 2px -2px 1px var(--color-#{$colorName}-hover-shadow)
271
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
272
272
  )
273
273
  drop-shadow(
274
- -2px -2px 1px var(--color-#{$colorName}-hover-shadow)
274
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
275
275
  );
276
276
  }
277
277
  }
278
278
  &:active {
279
- color: var(--color-#{$colorName}-fore-active);
280
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-active-shadow),
281
- -2px 2px 1px var(--color-#{$colorName}-active-shadow),
282
- 2px -2px 1px var(--color-#{$colorName}-active-shadow),
283
- -2px -2px 1px var(--color-#{$colorName}-active-shadow),
284
- 2px 0px 1px var(--color-#{$colorName}-active-shadow),
285
- 0px 2px 1px var(--color-#{$colorName}-active-shadow),
286
- -2px 0px 1px var(--color-#{$colorName}-active-shadow),
287
- 0px -2px 1px var(--color-#{$colorName}-active-shadow);
279
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore-active);
280
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
281
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
282
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
283
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
284
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
285
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
286
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
287
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow);
288
288
  .icon {
289
289
  filter: drop-shadow(
290
- 2px 2px 1px var(--color-#{$colorName}-active-shadow)
290
+ 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
291
291
  )
292
292
  drop-shadow(
293
- -2px 2px 1px var(--color-#{$colorName}-active-shadow)
293
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
294
294
  )
295
295
  drop-shadow(
296
- 2px -2px 1px var(--color-#{$colorName}-active-shadow)
296
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
297
297
  )
298
298
  drop-shadow(
299
- -2px -2px 1px var(--color-#{$colorName}-active-shadow)
299
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
300
300
  );
301
301
  }
302
302
  }
@@ -307,61 +307,61 @@
307
307
  .nav-static {
308
308
  .nav-menu {
309
309
  .nav-menu-item {
310
- color: var(--color-#{$colorName}-fore);
311
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-shadow),
312
- -2px 2px 1px var(--color-#{$colorName}-shadow),
313
- 2px -2px 1px var(--color-#{$colorName}-shadow),
314
- -2px -2px 1px var(--color-#{$colorName}-shadow),
315
- 2px 0px 1px var(--color-#{$colorName}-shadow),
316
- 0px 2px 1px var(--color-#{$colorName}-shadow),
317
- -2px 0px 1px var(--color-#{$colorName}-shadow),
318
- 0px -2px 1px var(--color-#{$colorName}-shadow);
310
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore);
311
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
312
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
313
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
314
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
315
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
316
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
317
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
318
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow);
319
319
  .icon {
320
- filter: drop-shadow(2px 2px 1px var(--color-#{$colorName}-shadow))
321
- drop-shadow(-2px 2px 1px var(--color-#{$colorName}-shadow))
322
- drop-shadow(2px -2px 1px var(--color-#{$colorName}-shadow))
323
- drop-shadow(-2px -2px 1px var(--color-#{$colorName}-shadow));
320
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
321
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
322
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
323
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow));
324
324
  }
325
325
  &:hover {
326
- color: var(--color-#{$colorName}-fore-hover);
327
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-hover-shadow),
328
- -2px 2px 1px var(--color-#{$colorName}-hover-shadow),
329
- 2px -2px 1px var(--color-#{$colorName}-hover-shadow),
330
- -2px -2px 1px var(--color-#{$colorName}-hover-shadow),
331
- 2px 0px 1px var(--color-#{$colorName}-hover-shadow),
332
- 0px 2px 1px var(--color-#{$colorName}-hover-shadow),
333
- -2px 0px 1px var(--color-#{$colorName}-hover-shadow),
334
- 0px -2px 1px var(--color-#{$colorName}-hover-shadow);
326
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore-hover);
327
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
328
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
329
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
330
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
331
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
332
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
333
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
334
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow);
335
335
  opacity: 0.8;
336
336
  .icon {
337
337
  filter: drop-shadow(
338
- 2px 2px 1px var(--color-#{$colorName}-hover-shadow)
338
+ 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
339
339
  )
340
- drop-shadow(-2px 2px 1px var(--color-#{$colorName}-hover-shadow))
341
- drop-shadow(2px -2px 1px var(--color-#{$colorName}-hover-shadow))
340
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow))
341
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow))
342
342
  drop-shadow(
343
- -2px -2px 1px var(--color-#{$colorName}-hover-shadow)
343
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
344
344
  );
345
345
  }
346
346
  }
347
347
  &:active {
348
- color: var(--color-#{$colorName}-fore-active);
349
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-active-shadow),
350
- -2px 2px 1px var(--color-#{$colorName}-active-shadow),
351
- 2px -2px 1px var(--color-#{$colorName}-active-shadow),
352
- -2px -2px 1px var(--color-#{$colorName}-active-shadow),
353
- 2px 0px 1px var(--color-#{$colorName}-active-shadow),
354
- 0px 2px 1px var(--color-#{$colorName}-active-shadow),
355
- -2px 0px 1px var(--color-#{$colorName}-active-shadow),
356
- 0px -2px 1px var(--color-#{$colorName}-active-shadow);
348
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore-active);
349
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
350
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
351
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
352
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
353
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
354
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
355
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
356
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow);
357
357
  .icon {
358
358
  filter: drop-shadow(
359
- 2px 2px 1px var(--color-#{$colorName}-active-shadow)
359
+ 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
360
360
  )
361
- drop-shadow(-2px 2px 1px var(--color-#{$colorName}-active-shadow))
362
- drop-shadow(2px -2px 1px var(--color-#{$colorName}-active-shadow))
361
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow))
362
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow))
363
363
  drop-shadow(
364
- -2px -2px 1px var(--color-#{$colorName}-active-shadow)
364
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
365
365
  );
366
366
  }
367
367
  }
package/src/mixins/responsive.scss CHANGED
@@ -1,10 +1,9 @@
1
1
  @use "../variables/index.scss" as variables;
2
2
 
3
- $offset: 0.02px;
4
-
5
3
  @mixin screen($size) {
6
4
  @if ($size == "xsmall") {
7
- $max-width: variables.$breakpoint-small - $offset;
5
+ $max-width: variables.$breakpoint-small -
6
+ variables.$responsive-breakpoint-max-width-offset;
8
7
  @media screen and (max-width: $max-width) {
9
8
  @content;
10
9
  }
@@ -14,17 +13,22 @@ $offset: 0.02px;
14
13
  @content;
15
14
  }
16
15
  } @else {
17
- $min-width: variables.$breakpoint-medium !default;
18
- $max-width: variables.$breakpoint-large - $offset !default;
19
- @if ($size == "medium") {
20
- } @else if ($size == "small") {
16
+ $min-width: 0;
17
+ $max-width: 0;
18
+ @if ($size == "small") {
21
19
  $min-width: variables.$breakpoint-small;
22
- $max-width: variables.$breakpoint-medium - $offset;
20
+ $max-width: variables.$breakpoint-medium -
21
+ variables.$responsive-breakpoint-max-width-offset;
22
+ } @else if ($size == "medium") {
23
+ $min-width: variables.$breakpoint-medium;
24
+ $max-width: variables.$breakpoint-large -
25
+ variables.$responsive-breakpoint-max-width-offset;
23
26
  } @else if ($size == "large") {
24
27
  $min-width: variables.$breakpoint-large;
25
- $max-width: variables.$breakpoint-xlarge - $offset;
28
+ $max-width: variables.$breakpoint-xlarge -
29
+ variables.$responsive-breakpoint-max-width-offset;
26
30
  } @else {
27
- @error "size wrong.";
31
+ @error "wrong size.";
28
32
  }
29
33
  @media screen and (min-width: $min-width) and (max-width: $max-width) {
30
34
  @content;
@@ -35,53 +39,61 @@ $offset: 0.02px;
35
39
  @mixin is-responsive($suffix: "") {
36
40
  @include screen("xsmall") {
37
41
  &.is-xsmall#{$suffix},
38
- &.is-xsmall-up#{$suffix},
39
42
  &.is-small-down#{$suffix},
43
+ &.is-small-or-less#{$suffix},
40
44
  &.is-medium-down#{$suffix},
45
+ &.is-medium-or-less#{$suffix},
41
46
  &.is-large-down#{$suffix},
42
- &.is-xlarge-down#{$suffix} {
47
+ &.is-large-or-less#{$suffix} {
43
48
  @content;
44
49
  }
45
50
  }
46
51
  @include screen("small") {
47
- &.is-xsmall-up#{$suffix},
48
52
  &.is-small-down#{$suffix},
53
+ &.is-small-or-less#{$suffix},
49
54
  &.is-small#{$suffix},
50
55
  &.is-small-up#{$suffix},
56
+ &.is-small-or-more#{$suffix},
51
57
  &.is-medium-down#{$suffix},
58
+ &.is-medium-or-less#{$suffix},
52
59
  &.is-large-down#{$suffix},
53
- &.is-xlarge-down#{$suffix} {
60
+ &.is-large-or-less#{$suffix} {
54
61
  @content;
55
62
  }
56
63
  }
57
64
  @include screen("medium") {
58
- &.is-xsmall-up#{$suffix},
59
65
  &.is-small-up#{$suffix},
66
+ &.is-small-or-more#{$suffix},
60
67
  &.is-medium-down#{$suffix},
68
+ &.is-medium-or-less#{$suffix},
61
69
  &.is-medium#{$suffix},
62
70
  &.is-medium-up#{$suffix},
71
+ &.is-medium-or-more#{$suffix},
63
72
  &.is-large-down#{$suffix},
64
- &.is-xlarge-down#{$suffix} {
73
+ &.is-large-or-less#{$suffix} {
65
74
  @content;
66
75
  }
67
76
  }
68
77
  @include screen("large") {
69
- &.is-xsmall-up#{$suffix},
70
78
  &.is-small-up#{$suffix},
79
+ &.is-small-or-more#{$suffix},
71
80
  &.is-medium-up#{$suffix},
81
+ &.is-medium-or-more#{$suffix},
72
82
  &.is-large-down#{$suffix},
83
+ &.is-large-or-less#{$suffix},
73
84
  &.is-large#{$suffix},
74
85
  &.is-large-up#{$suffix},
75
- &.is-xlarge-down#{$suffix} {
86
+ &.is-large-or-more#{$suffix} {
76
87
  @content;
77
88
  }
78
89
  }
79
90
  @include screen("xlarge") {
80
- &.is-xsmall-up#{$suffix},
81
91
  &.is-small-up#{$suffix},
92
+ &.is-small-or-more#{$suffix},
82
93
  &.is-medium-up#{$suffix},
94
+ &.is-medium-or-more#{$suffix},
83
95
  &.is-large-up#{$suffix},
84
- &.is-xlarge-down#{$suffix},
96
+ &.is-large-or-more#{$suffix},
85
97
  &.is-xlarge#{$suffix} {
86
98
  @content;
87
99
  }
@@ -104,7 +116,9 @@ $offset: 0.02px;
104
116
  display: none !important;
105
117
  }
106
118
  }
107
- &.is-small-or-less {
119
+
120
+ &.is-small-or-less,
121
+ &.is-small-down {
108
122
  @include screen("medium") {
109
123
  display: none !important;
110
124
  }
@@ -129,12 +143,15 @@ $offset: 0.02px;
129
143
  display: none !important;
130
144
  }
131
145
  }
132
- &.is-small-or-more {
146
+ &.is-small-or-more,
147
+ &.is-small-up {
133
148
  @include screen("xsmall") {
134
149
  display: none !important;
135
150
  }
136
151
  }
137
- &.is-large-or-less {
152
+
153
+ &.is-medium-or-less,
154
+ &.is-medium-down {
138
155
  @include screen("large") {
139
156
  display: none !important;
140
157
  }
@@ -142,7 +159,7 @@ $offset: 0.02px;
142
159
  display: none !important;
143
160
  }
144
161
  }
145
- &.is-large {
162
+ &.is-medium {
146
163
  @include screen("xsmall") {
147
164
  display: none !important;
148
165
  }
@@ -156,15 +173,18 @@ $offset: 0.02px;
156
173
  display: none !important;
157
174
  }
158
175
  }
159
- &.is-large-or-more {
160
- @include screen("xsmall") {
176
+ &.is-medium-or-more,
177
+ &.is-medium-up {
178
+ @include screen("small") {
161
179
  display: none !important;
162
180
  }
163
- @include screen("small") {
181
+ @include screen("xsmall") {
164
182
  display: none !important;
165
183
  }
166
184
  }
167
- &.is-large-or-less {
185
+
186
+ &.is-large-or-less,
187
+ &.is-large-down {
168
188
  @include screen("xlarge") {
169
189
  display: none !important;
170
190
  }
@@ -183,7 +203,8 @@ $offset: 0.02px;
183
203
  display: none !important;
184
204
  }
185
205
  }
186
- &.is-large-or-more {
206
+ &.is-large-or-more,
207
+ &.is-large-up {
187
208
  @include screen("xsmall") {
188
209
  display: none !important;
189
210
  }
@@ -194,6 +215,7 @@ $offset: 0.02px;
194
215
  display: none !important;
195
216
  }
196
217
  }
218
+
197
219
  &.is-xlarge {
198
220
  @include screen("xsmall") {
199
221
  display: none !important;