@appartmint/mint 0.12.5 → 0.12.7

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/mint.css +107 -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/_buttons.scss +13 -0
  11. package/src/scss/imports/components/_header.scss +50 -45
  12. package/src/scss/imports/global/_structure.scss +12 -0
  13. 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,10 +157,25 @@
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
  }
164
+ .mint-btn a,
165
+ .mint-btn-group a,
166
+ .mint-pill a {
167
+ color: inherit;
168
+ }
169
+ .mint-btn a:hover,
170
+ .mint-btn-group a:hover,
171
+ .mint-pill a:hover {
172
+ color: inherit;
173
+ }
174
+ .mint-btn a i,
175
+ .mint-btn-group a i,
176
+ .mint-pill a i {
177
+ display: none;
178
+ }
164
179
 
165
180
  .mint-btn {
166
181
  padding: 0.5rem 1.75rem;
@@ -170,13 +185,13 @@
170
185
  text-align: center;
171
186
  }
172
187
  .mint-btn-icon:hover i {
173
- color: var(--mint-accent-3);
188
+ color: var(--mint-accent-2);
174
189
  }
175
190
  .mint-btn-icon:focus i {
176
- color: var(--mint-accent-3);
191
+ color: var(--mint-accent-2);
177
192
  }
178
193
  .mint-btn-icon:active i, .mint-btn-icon.mint-active i {
179
- color: var(--mint-accent-3);
194
+ color: var(--mint-accent-2);
180
195
  }
181
196
  @media (min-width: 480px) {
182
197
  .mint-btn-icon {
@@ -185,7 +200,7 @@
185
200
  }
186
201
  .mint-btn-icon i {
187
202
  margin: 0 !important;
188
- color: var(--mint-brand-5);
203
+ color: var(--mint-brand-4);
189
204
  font-size: 4rem;
190
205
  }
191
206
  .mint-btn-icon i::before {
@@ -535,48 +550,23 @@ app-footer::before {
535
550
 
536
551
  :root {
537
552
  --mint-header-height: 4rem;
538
- --mint-header-bg: var(--mint-brand-4);
539
- --mint-header-fg: var(--mint-back);
553
+ --mint-header-bg: var(--mint-brand-2);
554
+ --mint-header-fg: var(--mint-fore);
540
555
  }
541
556
 
542
557
  #mint-header {
543
- display: flex;
544
- flex-direction: column;
545
558
  position: relative;
546
559
  width: 100%;
547
560
  color: var(--mint-header-fg);
548
561
  background-color: var(--mint-header-bg);
549
562
  z-index: 10000;
550
- }
551
- #mint-header.mint-js {
552
- align-items: center;
553
- flex-direction: row;
554
563
  height: var(--mint-header-height);
555
564
  }
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 {
565
+ #mint-header.mint-fixed {
570
566
  position: fixed;
571
567
  top: 0;
572
568
  left: 0;
573
569
  }
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
570
  #mint-header.mint-right #mint-wrapper {
581
571
  top: var(--mint-header-height);
582
572
  right: -100%;
@@ -641,7 +631,7 @@ app-footer::before {
641
631
  max-width: var(--mint-header-height);
642
632
  }
643
633
  #mint-header [aria-controls=mint-wrapper] {
644
- display: none;
634
+ display: inline-block;
645
635
  position: relative;
646
636
  padding: 0.6rem;
647
637
  width: 4.4rem;
@@ -650,6 +640,7 @@ app-footer::before {
650
640
  border-radius: 1rem;
651
641
  background: var(--mint-shadow-6);
652
642
  box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
643
+ z-index: 1000;
653
644
  }
654
645
  #mint-header [aria-controls=mint-wrapper] .mint-menu-icon {
655
646
  top: 50%;
@@ -689,12 +680,25 @@ app-footer::before {
689
680
  left: 0;
690
681
  width: 100%;
691
682
  height: calc(100vh - var(--mint-header-height));
692
- transition: none;
693
683
  z-index: -2;
684
+ background: var(--mint-header-bg);
685
+ transition-duration: var(--mint-delay-default);
686
+ transition-property: top, right, bottom, left;
687
+ overflow: auto;
694
688
  }
695
689
  #mint-header #mint-wrapper.mint-open {
696
690
  top: var(--mint-header-height);
697
691
  }
692
+ #mint-header #mint-wrapper nav {
693
+ height: 100%;
694
+ background: var(--mint-back);
695
+ overflow: auto;
696
+ background-repeat: repeat;
697
+ }
698
+ #mint-header #mint-wrapper a, #mint-header #mint-wrapper button {
699
+ 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;
700
+ font-size: 4em;
701
+ }
698
702
  #mint-header #mint-widgets {
699
703
  position: absolute;
700
704
  top: 0;
@@ -717,6 +721,23 @@ app-footer::before {
717
721
  line-height: 1;
718
722
  cursor: pointer;
719
723
  }
724
+ #mint-header [aria-controls]:not([aria-controls=mint-wrapper]) + ul {
725
+ display: flex;
726
+ flex-direction: column;
727
+ height: 0;
728
+ overflow: hidden;
729
+ transition: height var(--mint-delay-default), margin var(--mint-delay-default);
730
+ }
731
+ #mint-header [aria-controls]:not([aria-controls=mint-wrapper])[aria-expanded]:not([aria-expanded=true]) + ul {
732
+ margin: 0;
733
+ }
734
+
735
+ #mint-navbar {
736
+ display: flex;
737
+ flex-direction: column;
738
+ align-items: center;
739
+ flex-direction: row;
740
+ }
720
741
 
721
742
  .mint-image.mint-error::after {
722
743
  content: "❌ Image failed to load. This is a placeholder.";
@@ -1855,6 +1876,37 @@ i.fa-envelope {
1855
1876
  }
1856
1877
  }
1857
1878
 
1879
+ .mint-max-xs {
1880
+ width: 100%;
1881
+ max-width: 480px;
1882
+ margin-left: auto;
1883
+ margin-right: auto;
1884
+ }
1885
+ .mint-max-sm {
1886
+ width: 100%;
1887
+ max-width: 768px;
1888
+ margin-left: auto;
1889
+ margin-right: auto;
1890
+ }
1891
+ .mint-max-md {
1892
+ width: 100%;
1893
+ max-width: 1024px;
1894
+ margin-left: auto;
1895
+ margin-right: auto;
1896
+ }
1897
+ .mint-max-lg {
1898
+ width: 100%;
1899
+ max-width: 1200px;
1900
+ margin-left: auto;
1901
+ margin-right: auto;
1902
+ }
1903
+ .mint-max-xl {
1904
+ width: 100%;
1905
+ max-width: 1440px;
1906
+ margin-left: auto;
1907
+ margin-right: auto;
1908
+ }
1909
+
1858
1910
  section {
1859
1911
  width: 100%;
1860
1912
  }