minolith 1.1.1 → 1.1.2

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 (11) hide show
  1. package/dist/css/minolith-skelton.css +9 -9
  2. package/dist/css/minolith-skelton.css.map +1 -1
  3. package/dist/css/minolith-skelton.min.css +9 -9
  4. package/dist/css/minolith-skelton.min.css.map +1 -1
  5. package/dist/css/minolith.css +63 -63
  6. package/dist/css/minolith.css.map +1 -1
  7. package/dist/css/minolith.min.css +62 -62
  8. package/dist/css/minolith.min.css.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/card.scss +18 -17
  11. package/src/components/input.scss +139 -134
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "minolith",
3
- "version": "1.1.1",
3
+ "version": "1.1.2",
4
4
  "description": "design system by minominolyly",
5
5
  "main": "src/minolith.scss",
6
6
  "scripts": {
package/src/components/card.scss CHANGED
@@ -46,14 +46,14 @@
46
46
  --#{variables.$prefix}color-default-card-body-border
47
47
  );
48
48
 
49
- --#{variables.$prefix}card-color-footer-fore: var(
50
- --#{variables.$prefix}color-default-card-body-fore
49
+ --#{variables.$prefix}card-footer-color-fore: var(
50
+ --#{variables.$prefix}color-default-card-footer-fore
51
51
  );
52
- --#{variables.$prefix}card-color-footer-back: var(
53
- --#{variables.$prefix}color-default-card-body-back
52
+ --#{variables.$prefix}card-footer-color-back: var(
53
+ --#{variables.$prefix}color-default-card-footer-back
54
54
  );
55
- --#{variables.$prefix}card-color-footer-border: var(
56
- --#{variables.$prefix}color-default-card-body-border
55
+ --#{variables.$prefix}card-footer-color-border: var(
56
+ --#{variables.$prefix}color-default-card-footer-border
57
57
  );
58
58
 
59
59
  --#{variables.$prefix}card-border-width: var(
@@ -85,7 +85,7 @@
85
85
  background-color: var(--#{variables.$prefix}card-color-selection-back);
86
86
  }
87
87
 
88
- >.card-header {
88
+ > .card-header {
89
89
  @include mixins.element();
90
90
  background-color: var(--#{variables.$prefix}card-header-color-back);
91
91
  border-radius: var(--#{variables.$prefix}card-border-radius)
@@ -96,7 +96,7 @@
96
96
  font-size: var(--#{variables.$prefix}font-size-medium);
97
97
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
98
98
  }
99
- >.card-body {
99
+ > .card-body {
100
100
  @include mixins.element();
101
101
  background-color: var(--#{variables.$prefix}card-body-color-back);
102
102
  color: var(--#{variables.$prefix}card-body-color-fore);
@@ -114,12 +114,12 @@
114
114
  border-radius: var(--#{variables.$prefix}card-border-radius);
115
115
  }
116
116
  }
117
- >.card-footer {
117
+ > .card-footer {
118
118
  @include mixins.element();
119
- background-color: var(--#{variables.$prefix}card-color-footer-back);
119
+ background-color: var(--#{variables.$prefix}card-footer-color-back);
120
120
  border-radius: 0 0 var(--#{variables.$prefix}card-border-radius)
121
121
  var(--#{variables.$prefix}card-border-radius);
122
- color: var(--#{variables.$prefix}card-color-footer-fore);
122
+ color: var(--#{variables.$prefix}card-footer-color-fore);
123
123
  padding: 0.5rem;
124
124
  display: block;
125
125
  }
@@ -171,18 +171,19 @@
171
171
  --#{variables.$prefix}color-#{$colorName}-card-body-border
172
172
  );
173
173
 
174
- --#{variables.$prefix}card-color-footer-fore: var(
174
+ --#{variables.$prefix}card-footer-color-fore: var(
175
175
  --#{variables.$prefix}color-#{$colorName}-card-body-fore
176
176
  );
177
- --#{variables.$prefix}card-color-footer-back: var(
177
+ --#{variables.$prefix}card-footer-color-back: var(
178
178
  --#{variables.$prefix}color-#{$colorName}-card-body-back
179
179
  );
180
- --#{variables.$prefix}card-color-footer-border: var(
180
+ --#{variables.$prefix}card-footer-color-border: var(
181
181
  --#{variables.$prefix}color-#{$colorName}-card-body-border
182
182
  );
183
183
  //#endregion local css variables
184
184
  }
185
185
  }
186
+
186
187
  @each $semanticColor in variables.$semanticColors {
187
188
  $colorName: map.get($semanticColor, "name");
188
189
  &.is-#{$colorName} {
@@ -229,13 +230,13 @@
229
230
  --#{variables.$prefix}color-#{$colorName}-card-body-border
230
231
  );
231
232
 
232
- --#{variables.$prefix}card-color-footer-fore: var(
233
+ --#{variables.$prefix}card-footer-color-fore: var(
233
234
  --#{variables.$prefix}color-#{$colorName}-card-body-fore
234
235
  );
235
- --#{variables.$prefix}card-color-footer-back: var(
236
+ --#{variables.$prefix}card-footer-color-back: var(
236
237
  --#{variables.$prefix}color-#{$colorName}-card-body-back
237
238
  );
238
- --#{variables.$prefix}card-color-footer-border: var(
239
+ --#{variables.$prefix}card-footer-color-border: var(
239
240
  --#{variables.$prefix}color-#{$colorName}-card-body-border
240
241
  );
241
242
  //#endregion local css variables
package/src/components/input.scss CHANGED
@@ -2,6 +2,144 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
+ @mixin input-base() {
6
+ --#{variables.$prefix}input-color-fore: var(
7
+ --#{variables.$prefix}color-default-input-fore
8
+ );
9
+ --#{variables.$prefix}input-color-back: var(
10
+ --#{variables.$prefix}color-default-input-back
11
+ );
12
+ --#{variables.$prefix}input-color-border: var(
13
+ --#{variables.$prefix}color-default-input-border
14
+ );
15
+ --#{variables.$prefix}input-color-placeholder: var(
16
+ --#{variables.$prefix}color-default-input-placeholder
17
+ );
18
+
19
+ --#{variables.$prefix}input-focus-color-back: var(
20
+ --#{variables.$prefix}color-default-input-focus-back
21
+ );
22
+ --#{variables.$prefix}input-focus-color-border: var(
23
+ --#{variables.$prefix}color-default-input-focus-border
24
+ );
25
+ --#{variables.$prefix}input-disabled-color-back: var(
26
+ --#{variables.$prefix}color-default-input-disabled-back
27
+ );
28
+ --#{variables.$prefix}input-disabled-color-border: var(
29
+ --#{variables.$prefix}color-default-input-disabled-border
30
+ );
31
+
32
+ --#{variables.$prefix}input-border-style: solid;
33
+ --#{variables.$prefix}input-border-width: var(
34
+ --#{variables.$prefix}border-width-medium
35
+ );
36
+ --#{variables.$prefix}input-border-radius: var(
37
+ --#{variables.$prefix}border-radius-medium
38
+ );
39
+
40
+ @include mixins.element();
41
+ background-color: var(--#{variables.$prefix}input-color-back);
42
+ border-color: var(--#{variables.$prefix}input-color-border);
43
+ border-radius: var(--#{variables.$prefix}input-border-radius);
44
+ border-style: var(--#{variables.$prefix}input-border-style);
45
+ border-width: var(--#{variables.$prefix}input-border-width);
46
+ color: var(--#{variables.$prefix}input-color-fore);
47
+ padding: 0.5rem;
48
+ &::placeholder {
49
+ color: var(--#{variables.$prefix}input-color-placeholder);
50
+ }
51
+ &:focus,
52
+ &.is-focus,
53
+ &.is-focused {
54
+ outline: none;
55
+ background-color: var(--#{variables.$prefix}input-focus-color-back);
56
+ border-color: var(--#{variables.$prefix}input-focus-color-border);
57
+ }
58
+ &[disabled],
59
+ fieldset[disabled],
60
+ &.is-disabled {
61
+ background-color: var(--#{variables.$prefix}input-disabled-color-back);
62
+ border-color: var(--#{variables.$prefix}input-disabled-color-border);
63
+ }
64
+ @if (not variables.$is-skelton) {
65
+ @each $borderRadius in variables.$borderRadiuses {
66
+ $name: map.get($borderRadius, "name");
67
+ &.is-border-radius-#{$name} {
68
+ border-radius: var(--#{variables.$prefix}border-radius-#{$name});
69
+ }
70
+ }
71
+
72
+ @each $borderWidth in variables.$borderWidths {
73
+ $name: map.get($borderWidth, "name");
74
+ &.is-border-width-#{$name} {
75
+ border-width: var(--#{variables.$prefix}border-radius-#{$name});
76
+ }
77
+ }
78
+
79
+ @each $color in variables.$colors {
80
+ $colorName: map.get($color, "name");
81
+ &.is-#{$colorName} {
82
+ --#{variables.$prefix}input-color-fore: var(
83
+ --#{variables.$prefix}color-#{$colorName}-input-fore
84
+ );
85
+ --#{variables.$prefix}input-color-back: var(
86
+ --#{variables.$prefix}color-#{$colorName}-input-back
87
+ );
88
+ --#{variables.$prefix}input-color-border: var(
89
+ --#{variables.$prefix}color-#{$colorName}-input-border
90
+ );
91
+ --#{variables.$prefix}input-color-placeholder: var(
92
+ --#{variables.$prefix}color-#{$colorName}-input-placeholder
93
+ );
94
+
95
+ --#{variables.$prefix}input-focus-color-back: var(
96
+ --#{variables.$prefix}color-#{$colorName}-input-focus-back
97
+ );
98
+ --#{variables.$prefix}input-focus-color-border: var(
99
+ --#{variables.$prefix}color-#{$colorName}-input-focus-border
100
+ );
101
+ --#{variables.$prefix}input-disabled-color-back: var(
102
+ --#{variables.$prefix}color-#{$colorName}-input-disabled-back
103
+ );
104
+ --#{variables.$prefix}input-disabled-color-border: var(
105
+ --#{variables.$prefix}color-#{$colorName}-input-disabled-border
106
+ );
107
+ }
108
+ }
109
+
110
+ @each $semanticColor in variables.$semanticColors {
111
+ $colorName: map.get($semanticColor, "name");
112
+ &.is-#{$colorName} {
113
+ --#{variables.$prefix}input-color-fore: var(
114
+ --#{variables.$prefix}color-#{$colorName}-input-fore
115
+ );
116
+ --#{variables.$prefix}input-color-back: var(
117
+ --#{variables.$prefix}color-#{$colorName}-input-back
118
+ );
119
+ --#{variables.$prefix}input-color-border: var(
120
+ --#{variables.$prefix}color-#{$colorName}-input-border
121
+ );
122
+ --#{variables.$prefix}input-color-placeholder: var(
123
+ --#{variables.$prefix}color-#{$colorName}-input-placeholder
124
+ );
125
+
126
+ --#{variables.$prefix}input-focus-color-back: var(
127
+ --#{variables.$prefix}color-#{$colorName}-input-focus-back
128
+ );
129
+ --#{variables.$prefix}input-focus-color-border: var(
130
+ --#{variables.$prefix}color-#{$colorName}-input-focus-border
131
+ );
132
+ --#{variables.$prefix}input-disabled-color-back: var(
133
+ --#{variables.$prefix}color-#{$colorName}-input-disabled-back
134
+ );
135
+ --#{variables.$prefix}input-disabled-color-border: var(
136
+ --#{variables.$prefix}color-#{$colorName}-input-disabled-border
137
+ );
138
+ }
139
+ }
140
+ }
141
+ }
142
+
5
143
  .input-checkbox {
6
144
  appearance: none;
7
145
  border-radius: 25%;
@@ -224,141 +362,8 @@
224
362
  }
225
363
 
226
364
  :where(.input) {
227
- --#{variables.$prefix}input-color-fore: var(
228
- --#{variables.$prefix}color-default-input-fore
229
- );
230
- --#{variables.$prefix}input-color-back: var(
231
- --#{variables.$prefix}color-default-input-back
232
- );
233
- --#{variables.$prefix}input-color-border: var(
234
- --#{variables.$prefix}color-default-input-border
235
- );
236
- --#{variables.$prefix}input-color-placeholder: var(
237
- --#{variables.$prefix}color-default-input-placeholder
238
- );
239
-
240
- --#{variables.$prefix}input-focus-color-back: var(
241
- --#{variables.$prefix}color-default-input-focus-back
242
- );
243
- --#{variables.$prefix}input-focus-color-border: var(
244
- --#{variables.$prefix}color-default-input-focus-border
245
- );
246
- --#{variables.$prefix}input-disabled-color-back: var(
247
- --#{variables.$prefix}color-default-input-disabled-back
248
- );
249
- --#{variables.$prefix}input-disabled-color-border: var(
250
- --#{variables.$prefix}color-default-input-disabled-border
251
- );
252
-
253
- --#{variables.$prefix}input-border-style: solid;
254
- --#{variables.$prefix}input-border-width: var(
255
- --#{variables.$prefix}border-width-medium
256
- );
257
- --#{variables.$prefix}input-border-radius: var(
258
- --#{variables.$prefix}border-radius-medium
259
- );
365
+ @include input-base();
260
366
 
261
- @include mixins.element();
262
- background-color: var(--#{variables.$prefix}input-color-back);
263
- border-color: var(--#{variables.$prefix}input-color-border);
264
- border-radius: var(--#{variables.$prefix}input-border-radius);
265
- border-style: var(--#{variables.$prefix}input-border-style);
266
- border-width: var(--#{variables.$prefix}input-border-width);
267
- color: var(--#{variables.$prefix}input-color-fore);
268
- padding: 0.5rem;
269
- &::placeholder {
270
- color: var(--#{variables.$prefix}input-color-placeholder);
271
- }
272
- &:focus,
273
- &.is-focus,
274
- &.is-focused {
275
- outline: none;
276
- background-color: var(--#{variables.$prefix}input-focus-color-back);
277
- border-color: var(--#{variables.$prefix}input-focus-color-border);
278
- }
279
- &[disabled],
280
- fieldset[disabled],
281
- &.is-disabled {
282
- background-color: var(--#{variables.$prefix}input-disabled-color-back);
283
- border-color: var(--#{variables.$prefix}input-disabled-color-border);
284
- }
285
- @if (not variables.$is-skelton) {
286
- @each $borderRadius in variables.$borderRadiuses {
287
- $name: map.get($borderRadius, "name");
288
- &.is-border-radius-#{$name} {
289
- border-radius: var(--#{variables.$prefix}border-radius-#{$name});
290
- }
291
- }
292
-
293
- @each $borderWidth in variables.$borderWidths {
294
- $name: map.get($borderWidth, "name");
295
- &.is-border-width-#{$name} {
296
- border-width: var(--#{variables.$prefix}border-radius-#{$name});
297
- }
298
- }
299
-
300
- @each $color in variables.$colors {
301
- $colorName: map.get($color, "name");
302
- &.is-#{$colorName} {
303
- --#{variables.$prefix}input-color-fore: var(
304
- --#{variables.$prefix}color-#{$colorName}-input-fore
305
- );
306
- --#{variables.$prefix}input-color-back: var(
307
- --#{variables.$prefix}color-#{$colorName}-input-back
308
- );
309
- --#{variables.$prefix}input-color-border: var(
310
- --#{variables.$prefix}color-#{$colorName}-input-border
311
- );
312
- --#{variables.$prefix}input-color-placeholder: var(
313
- --#{variables.$prefix}color-#{$colorName}-input-placeholder
314
- );
315
-
316
- --#{variables.$prefix}input-focus-color-back: var(
317
- --#{variables.$prefix}color-#{$colorName}-input-focus-back
318
- );
319
- --#{variables.$prefix}input-focus-color-border: var(
320
- --#{variables.$prefix}color-#{$colorName}-input-focus-border
321
- );
322
- --#{variables.$prefix}input-disabled-color-back: var(
323
- --#{variables.$prefix}color-#{$colorName}-input-disabled-back
324
- );
325
- --#{variables.$prefix}input-disabled-color-border: var(
326
- --#{variables.$prefix}color-#{$colorName}-input-disabled-border
327
- );
328
- }
329
- }
330
-
331
- @each $semanticColor in variables.$semanticColors {
332
- $colorName: map.get($semanticColor, "name");
333
- &.is-#{$colorName} {
334
- --#{variables.$prefix}input-color-fore: var(
335
- --#{variables.$prefix}color-#{$colorName}-input-fore
336
- );
337
- --#{variables.$prefix}input-color-back: var(
338
- --#{variables.$prefix}color-#{$colorName}-input-back
339
- );
340
- --#{variables.$prefix}input-color-border: var(
341
- --#{variables.$prefix}color-#{$colorName}-input-border
342
- );
343
- --#{variables.$prefix}input-color-placeholder: var(
344
- --#{variables.$prefix}color-#{$colorName}-input-placeholder
345
- );
346
-
347
- --#{variables.$prefix}input-focus-color-back: var(
348
- --#{variables.$prefix}color-#{$colorName}-input-focus-back
349
- );
350
- --#{variables.$prefix}input-focus-color-border: var(
351
- --#{variables.$prefix}color-#{$colorName}-input-focus-border
352
- );
353
- --#{variables.$prefix}input-disabled-color-back: var(
354
- --#{variables.$prefix}color-#{$colorName}-input-disabled-back
355
- );
356
- --#{variables.$prefix}input-disabled-color-border: var(
357
- --#{variables.$prefix}color-#{$colorName}-input-disabled-border
358
- );
359
- }
360
- }
361
- }
362
367
  &[type="checkbox"] {
363
368
  @extend .input-checkbox;
364
369
  }