@appartmint/mint 0.9.1 → 0.9.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/mint.css +66 -61
  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 +37 -38
  7. package/src/scss/imports/global/_global.scss +11 -0
  8. package/src/scss/imports/global/_text.scss +3 -30
  9. package/src/scss/imports/global/_themes.scss +0 -4
  10. package/src/scss/imports/util/_util.scss +12 -0
  11. package/src/scss/imports/util/_vars.scss +31 -2
package/dist/css/mint.css CHANGED
@@ -211,23 +211,9 @@ p .mint-pill {
211
211
  }
212
212
 
213
213
  :root {
214
- --mint-delay-instant: 0ms;
215
- --mint-delay-fast: 100ms;
216
- --mint-delay-med-fast: 200ms;
217
- --mint-delay-default: 300ms;
218
- --mint-delay-med-slow: 400ms;
219
- --mint-delay-slow: 500ms;
220
- }
221
-
222
- .mint-sr-only {
223
- position: absolute !important;
224
- width: 1px !important;
225
- height: 1px !important;
226
- padding: 0 !important;
227
- margin: -1px !important;
228
- overflow: hidden !important;
229
- clip: rect(0, 0, 0, 0) !important;
230
- border: 0 !important;
214
+ --mint-header-height: 4rem;
215
+ --mint-header-bg: var(--mint-brand-4);
216
+ --mint-header-fg: var(--mint-back);
231
217
  }
232
218
 
233
219
  #mint-header {
@@ -235,15 +221,15 @@ p .mint-pill {
235
221
  flex-direction: column;
236
222
  position: relative;
237
223
  width: 100%;
238
- color: var(--mint-fg);
224
+ color: var(--mint-header-fg);
239
225
  background-color: var(--mint-header-bg);
240
226
  z-index: 1000;
241
227
  }
242
228
  #mint-header.mint-js {
243
229
  align-items: center;
244
230
  flex-direction: row;
245
- height: var(--mint-height);
246
- padding: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
231
+ height: var(--mint-header-height);
232
+ padding: calc(var(--mint-header-height) / 2);
247
233
  }
248
234
  #mint-header.mint-js [aria-controls=mint-wrapper] {
249
235
  display: inline-block;
@@ -270,7 +256,7 @@ p .mint-pill {
270
256
  overflow: auto;
271
257
  }
272
258
  #mint-header.mint-right #mint-wrapper {
273
- top: var(--mint-height);
259
+ top: var(--mint-header-height);
274
260
  right: -100%;
275
261
  left: unset;
276
262
  }
@@ -285,7 +271,7 @@ p .mint-pill {
285
271
  bottom: 0;
286
272
  }
287
273
  #mint-header.mint-left #mint-wrapper {
288
- top: var(--mint-height);
274
+ top: var(--mint-header-height);
289
275
  left: -100%;
290
276
  }
291
277
  #mint-header.mint-left #mint-wrapper.mint-open {
@@ -297,7 +283,7 @@ p .mint-pill {
297
283
  top: 0;
298
284
  left: 0;
299
285
  width: 100%;
300
- height: var(--mint-height);
286
+ height: var(--mint-header-height);
301
287
  background: var(--mint-header-bg);
302
288
  z-index: -1;
303
289
  }
@@ -314,15 +300,26 @@ p .mint-pill {
314
300
  #mint-header a, #mint-header button {
315
301
  display: flex;
316
302
  align-items: center;
317
- padding: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
303
+ width: 100%;
304
+ margin: 0;
305
+ border: 0;
306
+ color: var(--mint-header-fg);
307
+ background: var(--mint-trans);
308
+ }
309
+ #mint-header h1 {
310
+ display: flex;
311
+ white-space: nowrap;
312
+ margin: 0;
313
+ }
314
+ #mint-header .mint-logo {
315
+ text-decoration: none;
316
+ }
317
+ #mint-header .mint-logo img {
318
+ max-width: var(--mint-header-height);
318
319
  }
319
320
  #mint-header [aria-controls=mint-wrapper] {
320
321
  display: none;
321
322
  }
322
- #mint-header #mint-logo {
323
- margin: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
324
- padding: 0;
325
- }
326
323
  #mint-header #mint-wrapper {
327
324
  display: flex;
328
325
  flex-direction: column;
@@ -330,18 +327,18 @@ p .mint-pill {
330
327
  top: -100%;
331
328
  left: 0;
332
329
  width: 100%;
333
- height: calc(100vh - var(--mint-height));
330
+ height: calc(100vh - var(--mint-header-height));
334
331
  transition: none;
335
332
  z-index: -2;
336
333
  }
337
334
  #mint-header #mint-wrapper.mint-open {
338
- top: var(--mint-height);
335
+ top: var(--mint-header-height);
339
336
  }
340
337
  #mint-header #mint-widgets {
341
338
  position: absolute;
342
339
  top: 0;
343
340
  right: 0;
344
- height: var(--mint-height);
341
+ height: var(--mint-header-height);
345
342
  }
346
343
  #mint-header .mint-dropdown {
347
344
  background: var(--mint-header-bg);
@@ -350,12 +347,12 @@ p .mint-pill {
350
347
  display: flex;
351
348
  align-items: center;
352
349
  justify-content: center;
353
- min-width: var(--mint-height);
354
- height: var(--mint-height);
355
- padding: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
350
+ min-width: var(--mint-header-height);
351
+ height: var(--mint-header-height);
352
+ padding: calc(var(--mint-header-height) / 2);
356
353
  }
357
354
  #mint-header .mint-dropdown li {
358
- padding: calc((var(--mint-height) - var(--mint-btn-height)) / 2);
355
+ padding: calc(var(--mint-header-height) / 2);
359
356
  line-height: 1;
360
357
  cursor: pointer;
361
358
  }
@@ -518,6 +515,17 @@ img {
518
515
  box-shadow: none !important;
519
516
  }
520
517
 
518
+ .mint-sr-only {
519
+ position: absolute !important;
520
+ width: 1px !important;
521
+ height: 1px !important;
522
+ padding: 0 !important;
523
+ margin: -1px !important;
524
+ overflow: hidden !important;
525
+ clip: rect(0, 0, 0, 0) !important;
526
+ border: 0 !important;
527
+ }
528
+
521
529
  .mint-pad {
522
530
  padding: 1rem;
523
531
  }
@@ -795,7 +803,7 @@ section.mint-bigger {
795
803
  }
796
804
 
797
805
  html, body {
798
- font-family: "Palanquin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
806
+ font-family: sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
799
807
  font-size: 1rem;
800
808
  }
801
809
  @media (min-width: 1024px) {
@@ -809,32 +817,32 @@ p {
809
817
  }
810
818
 
811
819
  h1, .mint-h1 {
812
- font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
820
+ font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
813
821
  line-height: 1;
814
822
  }
815
823
 
816
824
  h2, .mint-h2 {
817
- font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
825
+ font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
818
826
  line-height: 1;
819
827
  }
820
828
 
821
829
  h3, .mint-h3 {
822
- font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
830
+ font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
823
831
  line-height: 1;
824
832
  }
825
833
 
826
834
  h4, .mint-h4 {
827
- font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
835
+ font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
828
836
  line-height: 1;
829
837
  }
830
838
 
831
839
  h5, .mint-h5 {
832
- font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
840
+ font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
833
841
  line-height: 1;
834
842
  }
835
843
 
836
844
  h6, .mint-h6 {
837
- font-family: "JosefinSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
845
+ font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
838
846
  line-height: 1;
839
847
  }
840
848
 
@@ -962,14 +970,14 @@ p, .mint-p {
962
970
  --mint-shadow-4: rgba(0, 0, 0, 0.4);
963
971
  --mint-shadow-5: rgba(0, 0, 0, 0.5);
964
972
  --mint-shadow-6: rgba(0, 0, 0, 0.6);
965
- --mint-brand: #4682b4;
966
- --mint-brand-0: #b2cce1;
967
- --mint-brand-1: #8db3d3;
968
- --mint-brand-2: #699bc4;
969
- --mint-brand-3: #4682b4;
970
- --mint-brand-4: #38678f;
971
- --mint-brand-5: #294d6b;
972
- --mint-brand-6: #1b3246;
973
+ --mint-brand: #bada55;
974
+ --mint-brand-0: #edf5d3;
975
+ --mint-brand-1: #dceca9;
976
+ --mint-brand-2: #cbe37f;
977
+ --mint-brand-3: #bada55;
978
+ --mint-brand-4: #a8cf2d;
979
+ --mint-brand-5: #86a524;
980
+ --mint-brand-6: #647b1b;
973
981
  --mint-accent: #483d8b;
974
982
  --mint-accent-0: #9b92cf;
975
983
  --mint-accent-1: #7a6ec0;
@@ -1002,14 +1010,14 @@ p, .mint-p {
1002
1010
  --mint-warning-4: #ee9200;
1003
1011
  --mint-warning-5: #bb7300;
1004
1012
  --mint-warning-6: #885400;
1005
- --mint-info: #4682b4;
1006
- --mint-info-0: #b2cce1;
1007
- --mint-info-1: #8db3d3;
1008
- --mint-info-2: #699bc4;
1009
- --mint-info-3: #4682b4;
1010
- --mint-info-4: #38678f;
1011
- --mint-info-5: #294d6b;
1012
- --mint-info-6: #1b3246;
1013
+ --mint-info: #bada55;
1014
+ --mint-info-0: #edf5d3;
1015
+ --mint-info-1: #dceca9;
1016
+ --mint-info-2: #cbe37f;
1017
+ --mint-info-3: #bada55;
1018
+ --mint-info-4: #a8cf2d;
1019
+ --mint-info-5: #86a524;
1020
+ --mint-info-6: #647b1b;
1013
1021
  }
1014
1022
 
1015
1023
  :root {
@@ -1095,8 +1103,5 @@ a:active .fa-ethereum, a.mint-active .fa-ethereum {
1095
1103
  a:active .fa-vimeo, a.mint-active .fa-vimeo {
1096
1104
  color: var(--mint-venmo);
1097
1105
  }
1098
- a i {
1099
- transition: color 500ms;
1100
- }
1101
1106
 
1102
1107
  /*# sourceMappingURL=mint.css.map*/