@appartmint/mint 0.12.5 → 0.12.6

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 (12) hide show
  1. package/dist/css/mint.css +92 -55
  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/dist/js/index.js +5 -5
  6. package/dist/js/index.js.map +1 -1
  7. package/dist/js/index.min.js +1 -1
  8. package/dist/js/index.min.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/scss/imports/components/_header.scss +50 -45
  11. package/src/scss/imports/global/_structure.scss +12 -0
  12. package/src/scss/imports/util/_vars.scss +15 -11
package/dist/css/mint.css CHANGED
@@ -28,8 +28,8 @@
28
28
  display: inline-block;
29
29
  border-radius: 1rem;
30
30
  color: var(--mint-fore);
31
- background: var(--mint-brand-1);
32
- border: 0.125rem solid var(--mint-brand-5);
31
+ background: var(--mint-brand-2);
32
+ border: 0.125rem solid var(--mint-brand-4);
33
33
  text-align: center;
34
34
  }
35
35
  @media (min-width: 480px) {
@@ -43,7 +43,7 @@
43
43
  .mint-btn-group:hover,
44
44
  .mint-pill:hover {
45
45
  color: var(--mint-back);
46
- background: var(--mint-brand-5);
46
+ background: var(--mint-brand-4);
47
47
  }
48
48
  .mint-btn:hover i,
49
49
  .mint-btn-group:hover i,
@@ -54,7 +54,7 @@
54
54
  .mint-btn-group:focus,
55
55
  .mint-pill:focus {
56
56
  color: var(--mint-back);
57
- background: var(--mint-brand-5);
57
+ background: var(--mint-brand-4);
58
58
  }
59
59
  .mint-btn:focus i,
60
60
  .mint-btn-group:focus i,
@@ -67,7 +67,7 @@
67
67
  .mint-pill:active,
68
68
  .mint-pill.mint-active {
69
69
  color: var(--mint-back);
70
- background: var(--mint-brand-5);
70
+ background: var(--mint-brand-4);
71
71
  }
72
72
  .mint-btn:active i, .mint-btn.mint-active i,
73
73
  .mint-btn-group:active i,
@@ -80,19 +80,19 @@
80
80
  .mint-btn-group.mint-reverse,
81
81
  .mint-pill.mint-reverse {
82
82
  color: var(--mint-back);
83
- background: var(--mint-brand-5);
83
+ background: var(--mint-brand-4);
84
84
  }
85
85
  .mint-btn.mint-reverse:hover,
86
86
  .mint-btn-group.mint-reverse:hover,
87
87
  .mint-pill.mint-reverse:hover {
88
88
  color: var(--mint-fore);
89
- background: var(--mint-brand-1);
89
+ background: var(--mint-brand-2);
90
90
  }
91
91
  .mint-btn.mint-reverse:focus,
92
92
  .mint-btn-group.mint-reverse:focus,
93
93
  .mint-pill.mint-reverse:focus {
94
94
  color: var(--mint-fore);
95
- background: var(--mint-brand-1);
95
+ background: var(--mint-brand-2);
96
96
  }
97
97
  .mint-btn.mint-reverse:active, .mint-btn.mint-reverse.mint-active,
98
98
  .mint-btn-group.mint-reverse:active,
@@ -100,27 +100,27 @@
100
100
  .mint-pill.mint-reverse:active,
101
101
  .mint-pill.mint-reverse.mint-active {
102
102
  color: var(--mint-fore);
103
- background: var(--mint-brand-1);
103
+ background: var(--mint-brand-2);
104
104
  }
105
105
  .mint-btn.mint-alt,
106
106
  .mint-btn-group.mint-alt,
107
107
  .mint-pill.mint-alt {
108
- color: var(--mint-brand-5);
108
+ color: var(--mint-brand-4);
109
109
  background: var(--mint-trans);
110
110
  }
111
111
  .mint-btn.mint-alt:hover,
112
112
  .mint-btn-group.mint-alt:hover,
113
113
  .mint-pill.mint-alt:hover {
114
114
  color: var(--mint-back);
115
- background: var(--mint-accent-3);
116
- border-color: var(--mint-accent-3);
115
+ background: var(--mint-accent-2);
116
+ border-color: var(--mint-accent-2);
117
117
  }
118
118
  .mint-btn.mint-alt:focus,
119
119
  .mint-btn-group.mint-alt:focus,
120
120
  .mint-pill.mint-alt:focus {
121
121
  color: var(--mint-back);
122
- background: var(--mint-accent-3);
123
- border-color: var(--mint-accent-3);
122
+ background: var(--mint-accent-2);
123
+ border-color: var(--mint-accent-2);
124
124
  }
125
125
  .mint-btn.mint-alt:active, .mint-btn.mint-alt.mint-active,
126
126
  .mint-btn-group.mint-alt:active,
@@ -128,27 +128,27 @@
128
128
  .mint-pill.mint-alt:active,
129
129
  .mint-pill.mint-alt.mint-active {
130
130
  color: var(--mint-back);
131
- background: var(--mint-accent-3);
132
- border-color: var(--mint-accent-3);
131
+ background: var(--mint-accent-2);
132
+ border-color: var(--mint-accent-2);
133
133
  }
134
134
  .mint-btn.mint-alt.mint-reverse,
135
135
  .mint-btn-group.mint-alt.mint-reverse,
136
136
  .mint-pill.mint-alt.mint-reverse {
137
137
  color: var(--mint-back);
138
- background: var(--mint-accent-3);
139
- border-color: var(--mint-accent-3);
138
+ background: var(--mint-accent-2);
139
+ border-color: var(--mint-accent-2);
140
140
  }
141
141
  .mint-btn.mint-alt.mint-reverse:hover,
142
142
  .mint-btn-group.mint-alt.mint-reverse:hover,
143
143
  .mint-pill.mint-alt.mint-reverse:hover {
144
- color: var(--mint-brand-5);
144
+ color: var(--mint-brand-4);
145
145
  background: var(--mint-trans);
146
146
  border-color: var(--mint-trans);
147
147
  }
148
148
  .mint-btn.mint-alt.mint-reverse:focus,
149
149
  .mint-btn-group.mint-alt.mint-reverse:focus,
150
150
  .mint-pill.mint-alt.mint-reverse:focus {
151
- color: var(--mint-brand-5);
151
+ color: var(--mint-brand-4);
152
152
  background: var(--mint-trans);
153
153
  border-color: var(--mint-trans);
154
154
  }
@@ -157,7 +157,7 @@
157
157
  .mint-btn-group.mint-alt.mint-reverse.mint-active,
158
158
  .mint-pill.mint-alt.mint-reverse:active,
159
159
  .mint-pill.mint-alt.mint-reverse.mint-active {
160
- color: var(--mint-brand-5);
160
+ color: var(--mint-brand-4);
161
161
  background: var(--mint-trans);
162
162
  border-color: var(--mint-trans);
163
163
  }
@@ -170,13 +170,13 @@
170
170
  text-align: center;
171
171
  }
172
172
  .mint-btn-icon:hover i {
173
- color: var(--mint-accent-3);
173
+ color: var(--mint-accent-2);
174
174
  }
175
175
  .mint-btn-icon:focus i {
176
- color: var(--mint-accent-3);
176
+ color: var(--mint-accent-2);
177
177
  }
178
178
  .mint-btn-icon:active i, .mint-btn-icon.mint-active i {
179
- color: var(--mint-accent-3);
179
+ color: var(--mint-accent-2);
180
180
  }
181
181
  @media (min-width: 480px) {
182
182
  .mint-btn-icon {
@@ -185,7 +185,7 @@
185
185
  }
186
186
  .mint-btn-icon i {
187
187
  margin: 0 !important;
188
- color: var(--mint-brand-5);
188
+ color: var(--mint-brand-4);
189
189
  font-size: 4rem;
190
190
  }
191
191
  .mint-btn-icon i::before {
@@ -535,48 +535,23 @@ app-footer::before {
535
535
 
536
536
  :root {
537
537
  --mint-header-height: 4rem;
538
- --mint-header-bg: var(--mint-brand-4);
539
- --mint-header-fg: var(--mint-back);
538
+ --mint-header-bg: var(--mint-brand-2);
539
+ --mint-header-fg: var(--mint-fore);
540
540
  }
541
541
 
542
542
  #mint-header {
543
- display: flex;
544
- flex-direction: column;
545
543
  position: relative;
546
544
  width: 100%;
547
545
  color: var(--mint-header-fg);
548
546
  background-color: var(--mint-header-bg);
549
547
  z-index: 10000;
550
- }
551
- #mint-header.mint-js {
552
- align-items: center;
553
- flex-direction: row;
554
548
  height: var(--mint-header-height);
555
549
  }
556
- #mint-header.mint-js [aria-controls=mint-wrapper] {
557
- display: inline-block;
558
- }
559
- #mint-header.mint-js [aria-controls]:not([aria-controls=mint-wrapper]) + ul {
560
- display: flex;
561
- flex-direction: column;
562
- height: 0;
563
- overflow: hidden;
564
- transition: height var(--mint-delay-default), margin var(--mint-delay-default);
565
- }
566
- #mint-header.mint-js [aria-controls]:not([aria-controls=mint-wrapper])[aria-expanded]:not([aria-expanded=true]) + ul {
567
- margin: 0;
568
- }
569
- #mint-header.mint-js.mint-fixed {
550
+ #mint-header.mint-fixed {
570
551
  position: fixed;
571
552
  top: 0;
572
553
  left: 0;
573
554
  }
574
- #mint-header.mint-js #mint-wrapper {
575
- background: var(--mint-bg);
576
- transition-duration: var(--mint-delay-default);
577
- transition-property: top, right, bottom, left;
578
- overflow: auto;
579
- }
580
555
  #mint-header.mint-right #mint-wrapper {
581
556
  top: var(--mint-header-height);
582
557
  right: -100%;
@@ -641,7 +616,7 @@ app-footer::before {
641
616
  max-width: var(--mint-header-height);
642
617
  }
643
618
  #mint-header [aria-controls=mint-wrapper] {
644
- display: none;
619
+ display: inline-block;
645
620
  position: relative;
646
621
  padding: 0.6rem;
647
622
  width: 4.4rem;
@@ -650,6 +625,7 @@ app-footer::before {
650
625
  border-radius: 1rem;
651
626
  background: var(--mint-shadow-6);
652
627
  box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
628
+ z-index: 1000;
653
629
  }
654
630
  #mint-header [aria-controls=mint-wrapper] .mint-menu-icon {
655
631
  top: 50%;
@@ -689,12 +665,25 @@ app-footer::before {
689
665
  left: 0;
690
666
  width: 100%;
691
667
  height: calc(100vh - var(--mint-header-height));
692
- transition: none;
693
668
  z-index: -2;
669
+ background: var(--mint-header-bg);
670
+ transition-duration: var(--mint-delay-default);
671
+ transition-property: top, right, bottom, left;
672
+ overflow: auto;
694
673
  }
695
674
  #mint-header #mint-wrapper.mint-open {
696
675
  top: var(--mint-header-height);
697
676
  }
677
+ #mint-header #mint-wrapper nav {
678
+ height: 100%;
679
+ background: var(--mint-back);
680
+ overflow: auto;
681
+ background-repeat: repeat;
682
+ }
683
+ #mint-header #mint-wrapper a, #mint-header #mint-wrapper button {
684
+ 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" !important;
685
+ font-size: 4em;
686
+ }
698
687
  #mint-header #mint-widgets {
699
688
  position: absolute;
700
689
  top: 0;
@@ -717,6 +706,23 @@ app-footer::before {
717
706
  line-height: 1;
718
707
  cursor: pointer;
719
708
  }
709
+ #mint-header [aria-controls]:not([aria-controls=mint-wrapper]) + ul {
710
+ display: flex;
711
+ flex-direction: column;
712
+ height: 0;
713
+ overflow: hidden;
714
+ transition: height var(--mint-delay-default), margin var(--mint-delay-default);
715
+ }
716
+ #mint-header [aria-controls]:not([aria-controls=mint-wrapper])[aria-expanded]:not([aria-expanded=true]) + ul {
717
+ margin: 0;
718
+ }
719
+
720
+ #mint-navbar {
721
+ display: flex;
722
+ flex-direction: column;
723
+ align-items: center;
724
+ flex-direction: row;
725
+ }
720
726
 
721
727
  .mint-image.mint-error::after {
722
728
  content: "❌ Image failed to load. This is a placeholder.";
@@ -1855,6 +1861,37 @@ i.fa-envelope {
1855
1861
  }
1856
1862
  }
1857
1863
 
1864
+ .mint-max-xs {
1865
+ width: 100%;
1866
+ max-width: 480px;
1867
+ margin-left: auto;
1868
+ margin-right: auto;
1869
+ }
1870
+ .mint-max-sm {
1871
+ width: 100%;
1872
+ max-width: 768px;
1873
+ margin-left: auto;
1874
+ margin-right: auto;
1875
+ }
1876
+ .mint-max-md {
1877
+ width: 100%;
1878
+ max-width: 1024px;
1879
+ margin-left: auto;
1880
+ margin-right: auto;
1881
+ }
1882
+ .mint-max-lg {
1883
+ width: 100%;
1884
+ max-width: 1200px;
1885
+ margin-left: auto;
1886
+ margin-right: auto;
1887
+ }
1888
+ .mint-max-xl {
1889
+ width: 100%;
1890
+ max-width: 1440px;
1891
+ margin-left: auto;
1892
+ margin-right: auto;
1893
+ }
1894
+
1858
1895
  section {
1859
1896
  width: 100%;
1860
1897
  }