@appartmint/mint 0.14.15 → 0.15.1

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 (20) hide show
  1. package/dist/css/mint.css +37 -30
  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/imports/util/list.d.ts +11 -1
  6. package/dist/js/imports/util/list.d.ts.map +1 -1
  7. package/dist/js/imports/util/object.d.ts +9 -1
  8. package/dist/js/imports/util/object.d.ts.map +1 -1
  9. package/dist/js/imports/util/text.d.ts +4 -0
  10. package/dist/js/imports/util/text.d.ts.map +1 -1
  11. package/dist/js/index.js +43 -3
  12. package/dist/js/index.js.map +1 -1
  13. package/dist/js/index.min.js +1 -1
  14. package/dist/js/index.min.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/scss/imports/components/_buttons.scss +12 -0
  17. package/src/scss/imports/global/_global.scss +4 -5
  18. package/src/ts/imports/util/list.ts +21 -1
  19. package/src/ts/imports/util/object.ts +28 -11
  20. package/src/ts/imports/util/text.ts +9 -0
package/dist/css/mint.css CHANGED
@@ -11,7 +11,14 @@
11
11
  transform: none !important;
12
12
  }
13
13
 
14
- .mint-btn,
14
+ .mint-btn, .mint-select,
15
+ .mint-btn-group,
16
+ .mint-btn-icon,
17
+ .mint-pill {
18
+ flex-shrink: 0;
19
+ }
20
+
21
+ .mint-btn, .mint-select,
15
22
  .mint-btn-icon,
16
23
  .mint-pill {
17
24
  width: fit-content;
@@ -24,7 +31,7 @@
24
31
  transition: color var(--mint-delay-default), background-color var(--mint-delay-default), border-color var(--mint-delay-default);
25
32
  }
26
33
 
27
- .mint-btn,
34
+ .mint-btn, .mint-select,
28
35
  .mint-btn-group,
29
36
  .mint-pill {
30
37
  display: inline-block;
@@ -35,35 +42,35 @@
35
42
  text-align: center;
36
43
  }
37
44
  @media (min-width: 480px) {
38
- .mint-btn,
45
+ .mint-btn, .mint-select,
39
46
  .mint-btn-group,
40
47
  .mint-pill {
41
48
  width: fit-content;
42
49
  }
43
50
  }
44
- .mint-btn:hover,
51
+ .mint-btn:hover, .mint-select:hover,
45
52
  .mint-btn-group:hover,
46
53
  .mint-pill:hover {
47
54
  color: var(--mint-back);
48
55
  background: var(--mint-brand-4);
49
56
  }
50
- .mint-btn:hover i,
57
+ .mint-btn:hover i, .mint-select:hover i,
51
58
  .mint-btn-group:hover i,
52
59
  .mint-pill:hover i {
53
60
  color: inherit !important;
54
61
  }
55
- .mint-btn:focus-visible,
62
+ .mint-btn:focus-visible, .mint-select:focus-visible,
56
63
  .mint-btn-group:focus-visible,
57
64
  .mint-pill:focus-visible {
58
65
  color: var(--mint-back);
59
66
  background: var(--mint-brand-4);
60
67
  }
61
- .mint-btn:focus-visible i,
68
+ .mint-btn:focus-visible i, .mint-select:focus-visible i,
62
69
  .mint-btn-group:focus-visible i,
63
70
  .mint-pill:focus-visible i {
64
71
  color: inherit !important;
65
72
  }
66
- .mint-btn:active, .mint-btn.mint-active,
73
+ .mint-btn:active, .mint-select:active, .mint-btn.mint-active, .mint-active.mint-select,
67
74
  .mint-btn-group:active,
68
75
  .mint-btn-group.mint-active,
69
76
  .mint-pill:active,
@@ -71,32 +78,32 @@
71
78
  color: var(--mint-back);
72
79
  background: var(--mint-brand-4);
73
80
  }
74
- .mint-btn:active i, .mint-btn.mint-active i,
81
+ .mint-btn:active i, .mint-select:active i, .mint-btn.mint-active i, .mint-active.mint-select i,
75
82
  .mint-btn-group:active i,
76
83
  .mint-btn-group.mint-active i,
77
84
  .mint-pill:active i,
78
85
  .mint-pill.mint-active i {
79
86
  color: inherit !important;
80
87
  }
81
- .mint-btn.mint-reverse,
88
+ .mint-btn.mint-reverse, .mint-reverse.mint-select,
82
89
  .mint-btn-group.mint-reverse,
83
90
  .mint-pill.mint-reverse {
84
91
  color: var(--mint-back);
85
92
  background: var(--mint-brand-4);
86
93
  }
87
- .mint-btn.mint-reverse:hover,
94
+ .mint-btn.mint-reverse:hover, .mint-reverse.mint-select:hover,
88
95
  .mint-btn-group.mint-reverse:hover,
89
96
  .mint-pill.mint-reverse:hover {
90
97
  color: var(--mint-fore);
91
98
  background: var(--mint-brand-2);
92
99
  }
93
- .mint-btn.mint-reverse:focus-visible,
100
+ .mint-btn.mint-reverse:focus-visible, .mint-reverse.mint-select:focus-visible,
94
101
  .mint-btn-group.mint-reverse:focus-visible,
95
102
  .mint-pill.mint-reverse:focus-visible {
96
103
  color: var(--mint-fore);
97
104
  background: var(--mint-brand-2);
98
105
  }
99
- .mint-btn.mint-reverse:active, .mint-btn.mint-reverse.mint-active,
106
+ .mint-btn.mint-reverse:active, .mint-reverse.mint-select:active, .mint-btn.mint-reverse.mint-active, .mint-reverse.mint-active.mint-select,
100
107
  .mint-btn-group.mint-reverse:active,
101
108
  .mint-btn-group.mint-reverse.mint-active,
102
109
  .mint-pill.mint-reverse:active,
@@ -104,27 +111,27 @@
104
111
  color: var(--mint-fore);
105
112
  background: var(--mint-brand-2);
106
113
  }
107
- .mint-btn.mint-alt,
114
+ .mint-btn.mint-alt, .mint-alt.mint-select,
108
115
  .mint-btn-group.mint-alt,
109
116
  .mint-pill.mint-alt {
110
117
  color: var(--mint-brand-4);
111
118
  background: var(--mint-trans);
112
119
  }
113
- .mint-btn.mint-alt:hover,
120
+ .mint-btn.mint-alt:hover, .mint-alt.mint-select:hover,
114
121
  .mint-btn-group.mint-alt:hover,
115
122
  .mint-pill.mint-alt:hover {
116
123
  color: var(--mint-back);
117
124
  background: var(--mint-accent-2);
118
125
  border-color: var(--mint-accent-2);
119
126
  }
120
- .mint-btn.mint-alt:focus-visible,
127
+ .mint-btn.mint-alt:focus-visible, .mint-alt.mint-select:focus-visible,
121
128
  .mint-btn-group.mint-alt:focus-visible,
122
129
  .mint-pill.mint-alt:focus-visible {
123
130
  color: var(--mint-back);
124
131
  background: var(--mint-accent-2);
125
132
  border-color: var(--mint-accent-2);
126
133
  }
127
- .mint-btn.mint-alt:active, .mint-btn.mint-alt.mint-active,
134
+ .mint-btn.mint-alt:active, .mint-alt.mint-select:active, .mint-btn.mint-alt.mint-active, .mint-alt.mint-active.mint-select,
128
135
  .mint-btn-group.mint-alt:active,
129
136
  .mint-btn-group.mint-alt.mint-active,
130
137
  .mint-pill.mint-alt:active,
@@ -133,28 +140,28 @@
133
140
  background: var(--mint-accent-2);
134
141
  border-color: var(--mint-accent-2);
135
142
  }
136
- .mint-btn.mint-alt.mint-reverse,
143
+ .mint-btn.mint-alt.mint-reverse, .mint-alt.mint-reverse.mint-select,
137
144
  .mint-btn-group.mint-alt.mint-reverse,
138
145
  .mint-pill.mint-alt.mint-reverse {
139
146
  color: var(--mint-back);
140
147
  background: var(--mint-accent-2);
141
148
  border-color: var(--mint-accent-2);
142
149
  }
143
- .mint-btn.mint-alt.mint-reverse:hover,
150
+ .mint-btn.mint-alt.mint-reverse:hover, .mint-alt.mint-reverse.mint-select:hover,
144
151
  .mint-btn-group.mint-alt.mint-reverse:hover,
145
152
  .mint-pill.mint-alt.mint-reverse:hover {
146
153
  color: var(--mint-brand-4);
147
154
  background: var(--mint-trans);
148
155
  border-color: var(--mint-trans);
149
156
  }
150
- .mint-btn.mint-alt.mint-reverse:focus-visible,
157
+ .mint-btn.mint-alt.mint-reverse:focus-visible, .mint-alt.mint-reverse.mint-select:focus-visible,
151
158
  .mint-btn-group.mint-alt.mint-reverse:focus-visible,
152
159
  .mint-pill.mint-alt.mint-reverse:focus-visible {
153
160
  color: var(--mint-brand-4);
154
161
  background: var(--mint-trans);
155
162
  border-color: var(--mint-trans);
156
163
  }
157
- .mint-btn.mint-alt.mint-reverse:active, .mint-btn.mint-alt.mint-reverse.mint-active,
164
+ .mint-btn.mint-alt.mint-reverse:active, .mint-alt.mint-reverse.mint-select:active, .mint-btn.mint-alt.mint-reverse.mint-active, .mint-alt.mint-reverse.mint-active.mint-select,
158
165
  .mint-btn-group.mint-alt.mint-reverse:active,
159
166
  .mint-btn-group.mint-alt.mint-reverse.mint-active,
160
167
  .mint-pill.mint-alt.mint-reverse:active,
@@ -163,23 +170,23 @@
163
170
  background: var(--mint-trans);
164
171
  border-color: var(--mint-trans);
165
172
  }
166
- .mint-btn a,
173
+ .mint-btn a, .mint-select a,
167
174
  .mint-btn-group a,
168
175
  .mint-pill a {
169
176
  color: inherit;
170
177
  }
171
- .mint-btn a:hover,
178
+ .mint-btn a:hover, .mint-select a:hover,
172
179
  .mint-btn-group a:hover,
173
180
  .mint-pill a:hover {
174
181
  color: inherit;
175
182
  }
176
- .mint-btn a i,
183
+ .mint-btn a i, .mint-select a i,
177
184
  .mint-btn-group a i,
178
185
  .mint-pill a i {
179
186
  display: none;
180
187
  }
181
188
 
182
- .mint-btn {
189
+ .mint-btn, .mint-select {
183
190
  padding: 0.5rem 1.75rem;
184
191
  }
185
192
  .mint-btn-icon {
@@ -253,7 +260,7 @@ a.mint-pill, button.mint-pill {
253
260
  min-width: 5rem;
254
261
  }
255
262
 
256
- p .mint-pill, p .mint-btn {
263
+ p .mint-pill, p .mint-btn, p .mint-select {
257
264
  line-height: 1.5rem;
258
265
  vertical-align: middle;
259
266
  }
@@ -273,7 +280,7 @@ p .mint-pill, p .mint-btn {
273
280
  .mint-buttons > * {
274
281
  width: 100%;
275
282
  }
276
- .mint-buttons > * .mint-btn, .mint-buttons > * .mint-pill {
283
+ .mint-buttons > * .mint-btn, .mint-buttons > * .mint-select, .mint-buttons > * .mint-pill {
277
284
  display: block;
278
285
  }
279
286
  @media (min-width: 480px) {
@@ -1156,13 +1163,13 @@ main {
1156
1163
  overflow: hidden;
1157
1164
  z-index: 1000;
1158
1165
  }
1166
+ main > router-outlet {
1167
+ flex-grow: 0;
1168
+ }
1159
1169
  main > router-outlet + * {
1160
1170
  width: 100%;
1161
1171
  flex-grow: 1;
1162
1172
  }
1163
- main router-outlet {
1164
- flex-grow: 0;
1165
- }
1166
1173
 
1167
1174
  nav a {
1168
1175
  display: block;