@appartmint/mint 0.10.11 → 0.10.15

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 (16) hide show
  1. package/dist/css/mint.css +57 -3
  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/models/item.d.ts +6 -0
  6. package/dist/js/imports/models/item.d.ts.map +1 -1
  7. package/dist/js/imports/util/text.d.ts +6 -0
  8. package/dist/js/imports/util/text.d.ts.map +1 -1
  9. package/dist/js/index.js +25 -1
  10. package/dist/js/index.js.map +1 -1
  11. package/dist/js/index.min.js +1 -1
  12. package/dist/js/index.min.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/scss/imports/components/_buttons.scss +36 -0
  15. package/src/scss/imports/global/_themes.scss +7 -1
  16. package/src/scss/imports/util/_vars.scss +1 -0
package/dist/css/mint.css CHANGED
@@ -21,6 +21,7 @@
21
21
  }
22
22
 
23
23
  .mint-btn,
24
+ .mint-btn-group,
24
25
  .mint-pill {
25
26
  display: inline-block;
26
27
  border-radius: 1rem;
@@ -31,57 +32,71 @@
31
32
  }
32
33
  @media (min-width: 480px) {
33
34
  .mint-btn,
35
+ .mint-btn-group,
34
36
  .mint-pill {
35
37
  width: auto;
36
38
  }
37
39
  }
38
40
  .mint-btn:hover,
41
+ .mint-btn-group:hover,
39
42
  .mint-pill:hover {
40
43
  color: var(--mint-back);
41
44
  background: var(--mint-brand-3);
42
45
  }
43
46
  .mint-btn:hover i,
47
+ .mint-btn-group:hover i,
44
48
  .mint-pill:hover i {
45
49
  color: inherit !important;
46
50
  }
47
51
  .mint-btn:focus,
52
+ .mint-btn-group:focus,
48
53
  .mint-pill:focus {
49
54
  color: var(--mint-back);
50
55
  background: var(--mint-brand-3);
51
56
  }
52
57
  .mint-btn:focus i,
58
+ .mint-btn-group:focus i,
53
59
  .mint-pill:focus i {
54
60
  color: inherit !important;
55
61
  }
56
62
  .mint-btn:active, .mint-btn.mint-active,
63
+ .mint-btn-group:active,
64
+ .mint-btn-group.mint-active,
57
65
  .mint-pill:active,
58
66
  .mint-pill.mint-active {
59
67
  color: var(--mint-back);
60
68
  background: var(--mint-brand-3);
61
69
  }
62
70
  .mint-btn:active i, .mint-btn.mint-active i,
71
+ .mint-btn-group:active i,
72
+ .mint-btn-group.mint-active i,
63
73
  .mint-pill:active i,
64
74
  .mint-pill.mint-active i {
65
75
  color: inherit !important;
66
76
  }
67
77
  .mint-btn.mint-alt,
78
+ .mint-btn-group.mint-alt,
68
79
  .mint-pill.mint-alt {
69
80
  color: var(--mint-brand-3);
70
81
  background: var(--mint-trans);
71
82
  }
72
83
  .mint-btn.mint-alt:hover,
84
+ .mint-btn-group.mint-alt:hover,
73
85
  .mint-pill.mint-alt:hover {
74
86
  color: var(--mint-back);
75
87
  background: var(--mint-accent-2);
76
88
  border-color: var(--mint-accent-2);
77
89
  }
78
90
  .mint-btn.mint-alt:focus,
91
+ .mint-btn-group.mint-alt:focus,
79
92
  .mint-pill.mint-alt:focus {
80
93
  color: var(--mint-back);
81
94
  background: var(--mint-accent-2);
82
95
  border-color: var(--mint-accent-2);
83
96
  }
84
97
  .mint-btn.mint-alt:active, .mint-btn.mint-alt.mint-active,
98
+ .mint-btn-group.mint-alt:active,
99
+ .mint-btn-group.mint-alt.mint-active,
85
100
  .mint-pill.mint-alt:active,
86
101
  .mint-pill.mint-alt.mint-active {
87
102
  color: var(--mint-back);
@@ -118,6 +133,39 @@
118
133
  .mint-btn-icon i::before {
119
134
  transition: color var(--mint-delay-default);
120
135
  }
136
+ .mint-btn-group {
137
+ display: flex;
138
+ padding: 0;
139
+ transition: all var(--mint-delay-default);
140
+ }
141
+ .mint-btn-group button {
142
+ width: 100%;
143
+ border: none;
144
+ color: inherit;
145
+ background: transparent;
146
+ }
147
+ .mint-btn-group button:first-child {
148
+ padding: 0.5rem 0 0.5rem 1rem;
149
+ border-top-left-radius: 1rem;
150
+ border-bottom-left-radius: 1rem;
151
+ }
152
+ .mint-btn-group button:last-child {
153
+ padding: 0.5rem 1rem 0.5rem 0;
154
+ border-top-right-radius: 1rem;
155
+ border-bottom-right-radius: 1rem;
156
+ }
157
+ .mint-btn-group button[disabled] {
158
+ pointer-events: none;
159
+ }
160
+ .mint-btn-group button:hover {
161
+ background: var(--mint-brand-5);
162
+ }
163
+ .mint-btn-group button:focus {
164
+ background: var(--mint-brand-5);
165
+ }
166
+ .mint-btn-group button:active, .mint-btn-group button.mint-active {
167
+ background: var(--mint-brand-5);
168
+ }
121
169
 
122
170
  .mint-pill {
123
171
  min-width: 5rem;
@@ -1183,6 +1231,7 @@ p, .mint-p {
1183
1231
  --mint-twitter: #1da1f2;
1184
1232
  --mint-youtube: #F00;
1185
1233
  --mint-apple: #DDD;
1234
+ --mint-apple-music: #fc3c44;
1186
1235
  --mint-spotify: #84bd00;
1187
1236
  --mint-soundcloud: #f26f23;
1188
1237
  --mint-bandcamp: #629aa9;
@@ -1299,6 +1348,11 @@ p, .mint-p {
1299
1348
  color: var(--mint-fore);
1300
1349
  }
1301
1350
 
1351
+ .mint-success {
1352
+ background-color: var(--mint-success-2);
1353
+ border-color: var(--mint-success-4);
1354
+ }
1355
+
1302
1356
  a {
1303
1357
  color: var(--mint-brand);
1304
1358
  }
@@ -1342,7 +1396,7 @@ a:hover .fa-spotify {
1342
1396
  color: var(--mint-spotify);
1343
1397
  }
1344
1398
  a:hover .fa-apple {
1345
- color: var(--mint-apple);
1399
+ color: var(--mint-apple-music);
1346
1400
  }
1347
1401
  a:hover .fa-soundcloud {
1348
1402
  color: var(--mint-soundcloud);
@@ -1381,7 +1435,7 @@ a:focus .fa-spotify {
1381
1435
  color: var(--mint-spotify);
1382
1436
  }
1383
1437
  a:focus .fa-apple {
1384
- color: var(--mint-apple);
1438
+ color: var(--mint-apple-music);
1385
1439
  }
1386
1440
  a:focus .fa-soundcloud {
1387
1441
  color: var(--mint-soundcloud);
@@ -1420,7 +1474,7 @@ a:active .fa-spotify, a.mint-active .fa-spotify {
1420
1474
  color: var(--mint-spotify);
1421
1475
  }
1422
1476
  a:active .fa-apple, a.mint-active .fa-apple {
1423
- color: var(--mint-apple);
1477
+ color: var(--mint-apple-music);
1424
1478
  }
1425
1479
  a:active .fa-soundcloud, a.mint-active .fa-soundcloud {
1426
1480
  color: var(--mint-soundcloud);