@appartmint/mint 0.10.13 → 0.10.17

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.
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;
@@ -693,7 +741,7 @@ a, button {
693
741
  font-size: inherit;
694
742
  }
695
743
 
696
- img {
744
+ img, video {
697
745
  width: 100%;
698
746
  }
699
747
 
@@ -1300,6 +1348,11 @@ p, .mint-p {
1300
1348
  color: var(--mint-fore);
1301
1349
  }
1302
1350
 
1351
+ .mint-success {
1352
+ background-color: var(--mint-success-2);
1353
+ border-color: var(--mint-success-4);
1354
+ }
1355
+
1303
1356
  a {
1304
1357
  color: var(--mint-brand);
1305
1358
  }