minolith 0.0.7 → 0.0.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 (13) hide show
  1. package/dist/css/minolith.css +666 -539
  2. package/dist/css/minolith.css.map +1 -1
  3. package/dist/css/minolith.min.css +4 -3
  4. package/dist/css/minolith.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/base/normalize.scss +3 -3
  7. package/src/components/heading.scss +1 -0
  8. package/src/components/nav.scss +157 -157
  9. package/src/css-variables/typography.scss +4 -0
  10. package/src/mixins/responsive.scss +48 -56
  11. package/src/variables/color.scss +19 -11
  12. package/src/variables/miscellaneous.scss +3 -1
  13. package/src/variables/typography.scss +6 -2
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-medium-or-less {
152
+
153
+ &.is-medium-or-less,
154
+ &.is-medium-down {
138
155
  @include screen("large") {
139
156
  display: none !important;
140
157
  }
@@ -156,7 +173,8 @@ $offset: 0.02px;
156
173
  display: none !important;
157
174
  }
158
175
  }
159
- &.is-medium-or-more {
176
+ &.is-medium-or-more,
177
+ &.is-medium-up {
160
178
  @include screen("small") {
161
179
  display: none !important;
162
180
  }
@@ -164,37 +182,9 @@ $offset: 0.02px;
164
182
  display: none !important;
165
183
  }
166
184
  }
167
- &.is-large-or-less {
168
- @include screen("large") {
169
- display: none !important;
170
- }
171
- @include screen("xlarge") {
172
- display: none !important;
173
- }
174
- }
175
- &.is-large {
176
- @include screen("xsmall") {
177
- display: none !important;
178
- }
179
- @include screen("small") {
180
- display: none !important;
181
- }
182
- @include screen("large") {
183
- display: none !important;
184
- }
185
- @include screen("xlarge") {
186
- display: none !important;
187
- }
188
- }
189
- &.is-large-or-more {
190
- @include screen("xsmall") {
191
- display: none !important;
192
- }
193
- @include screen("small") {
194
- display: none !important;
195
- }
196
- }
197
- &.is-large-or-less {
185
+
186
+ &.is-large-or-less,
187
+ &.is-large-down {
198
188
  @include screen("xlarge") {
199
189
  display: none !important;
200
190
  }
@@ -213,7 +203,8 @@ $offset: 0.02px;
213
203
  display: none !important;
214
204
  }
215
205
  }
216
- &.is-large-or-more {
206
+ &.is-large-or-more,
207
+ &.is-large-up {
217
208
  @include screen("xsmall") {
218
209
  display: none !important;
219
210
  }
@@ -224,6 +215,7 @@ $offset: 0.02px;
224
215
  display: none !important;
225
216
  }
226
217
  }
218
+
227
219
  &.is-xlarge {
228
220
  @include screen("xsmall") {
229
221
  display: none !important;
package/src/variables/color.scss CHANGED
@@ -79,6 +79,7 @@ $color-light-lightness-card-footer-back: 80 !default;
79
79
  //#region color-light-lightness-header
80
80
  $color-light-lightness-header-fore: 5 !default;
81
81
  $color-light-lightness-header-back: 70 !default;
82
+ $color-light-lightness-header-shadow: 70 !default;
82
83
  //#endregion color-light-lightness-header
83
84
 
84
85
  //#region color-light-lightness-label
@@ -153,26 +154,27 @@ $color-dark-lightness-card-footer-fore: 95 !default;
153
154
  $color-dark-lightness-card-footer-back: 20 !default;
154
155
  //#endregion color-dark-lightness-card
155
156
 
156
- //#region color-light-lightness-header
157
+ //#region color-dark-lightness-header
157
158
  $color-dark-lightness-header-fore: 95 !default;
158
- $color-dark-lightness-header-back: 70 !default;
159
- //#endregion color-light-lightness-header
159
+ $color-dark-lightness-header-back: 30 !default;
160
+ $color-dark-lightness-header-shadow: 30 !default;
161
+ //#endregion color-dark-lightness-header
160
162
 
161
- //#region color-light-lightness-label
163
+ //#region color-dark-lightness-label
162
164
  $color-dark-lightness-label-fore: 80 !default;
163
- //#endregion color-light-lightness-label
165
+ //#endregion color-dark-lightness-label
164
166
 
165
- //#region color-light-lightness-link
167
+ //#region color-dark-lightness-link
166
168
  $color-dark-lightness-link-fore: 80 !default;
167
- //#endregion color-light-lightness-link
169
+ //#endregion color-dark-lightness-link
168
170
 
169
- //#region color-light-lightness-loader
171
+ //#region color-dark-lightness-loader
170
172
  $color-dark-lightness-loader-fore: 80 !default;
171
- //#endregion color-light-lightness-loader
173
+ //#endregion color-dark-lightness-loader
172
174
 
173
- //#region color-light-lightness-progress
175
+ //#region color-dark-lightness-progress
174
176
  $color-dark-lightness-progress-fore: 80 !default;
175
- //#endregion color-light-lightness-progress
177
+ //#endregion color-dark-lightness-progress
176
178
 
177
179
  //#region color-dark-lightness-message
178
180
  $color-dark-lightness-message-fore: 95 !default;
@@ -191,6 +193,8 @@ $color-dark-lightness-progress-back: 5 !default;
191
193
 
192
194
  //#endregion color-dark-lightness
193
195
 
196
+ //#region color-lightness-offset
197
+
194
198
  $color-light-lightness-offset-disabled-fore: 30 !default;
195
199
  $color-dark-lightness-offset-disabled-fore: -30 !default;
196
200
  $color-lightness-offset-disabled: 0 !default;
@@ -199,6 +203,8 @@ $color-lightness-offset-hover: 5 !default;
199
203
  $color-lightness-offset-active: -5 !default;
200
204
  $color-lightness-offset-visited: 0 !default;
201
205
 
206
+ //#endregion color-lightness-offset
207
+
202
208
  //#region colorShadesLight
203
209
 
204
210
  $colorShadesLight: (
@@ -286,6 +292,7 @@ $colorShadesLight: (
286
292
  header: (
287
293
  fore: functions.zeroPadding($color-light-lightness-header-fore, 2),
288
294
  back: functions.zeroPadding($color-light-lightness-header-back, 2),
295
+ shadow: functions.zeroPadding($color-light-lightness-header-shadow, 2),
289
296
  ),
290
297
  label: (
291
298
  fore: functions.zeroPadding($color-light-lightness-label-fore, 2),
@@ -735,6 +742,7 @@ $colorShadesDark: (
735
742
  header: (
736
743
  fore: functions.zeroPadding($color-dark-lightness-header-fore, 2),
737
744
  back: functions.zeroPadding($color-dark-lightness-header-back, 2),
745
+ shadow: functions.zeroPadding($color-dark-lightness-header-shadow, 2),
738
746
  ),
739
747
  label: (
740
748
  fore: functions.zeroPadding($color-dark-lightness-label-fore, 2),
package/src/variables/miscellaneous.scss CHANGED
@@ -9,4 +9,6 @@ $z-index-modal-content: auto !default;
9
9
 
10
10
  $z-index-header-is-sticky: 100 !default;
11
11
 
12
- $columns-count: 12;
12
+ $columns-count: 12 !default;
13
+
14
+ $responsive-breakpoint-max-width-offset: 0.02px !default;
package/src/variables/typography.scss CHANGED
@@ -1,6 +1,10 @@
1
+ $font-family-serif: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro",
2
+ serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
1
3
  $font-family-sans-serif: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
2
- "Hiragino Sans", Meiryo, sans-serif;
3
- $font-family-monospace: "Consolas", "Courier New", courier, monospace;
4
+ "Hiragino Sans", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
5
+ "Segoe UI Symbol";
6
+ $font-family-monospace: "Consolas", "Courier New", courier, monospace,
7
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
4
8
 
5
9
  $font-size-root: null !default;
6
10
  $font-size-base: 1rem !default;