@dialpad/dialtone 6.19.0 → 6.20.0
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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# [6.20.0](https://github.com/dialpad/dialtone/compare/v6.19.0...v6.20.0) (2022-03-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* dt-404 popover alignment fixes ([#558](https://github.com/dialpad/dialtone/issues/558)) ([6e8b035](https://github.com/dialpad/dialtone/commit/6e8b035d34d51a3609508b757fea95fa0db99812))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* dt-407 support icons above and below the labels on buttons ([#561](https://github.com/dialpad/dialtone/issues/561)) ([8e2752a](https://github.com/dialpad/dialtone/commit/8e2752a11556836c6061c9e8b559c9fea1e0cffa))
|
|
12
|
+
|
|
1
13
|
# [6.19.0](https://github.com/dialpad/dialtone/compare/v6.18.1...v6.19.0) (2022-03-12)
|
|
2
14
|
|
|
3
15
|
|
|
@@ -140,20 +140,36 @@
|
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
// ============================================================================
|
|
143
|
-
// $ BUTTON ICON
|
|
143
|
+
// $ BUTTON WITH ICON
|
|
144
144
|
// ----------------------------------------------------------------------------
|
|
145
|
+
.d-btn--vertical {
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
}
|
|
148
|
+
|
|
145
149
|
.d-btn__icon {
|
|
146
150
|
display: flex;
|
|
151
|
+
line-height: 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.d-btn__icon--left,
|
|
155
|
+
.d-btn__icon--right {
|
|
147
156
|
margin-top: var(--sun4);
|
|
148
157
|
margin-bottom: var(--sun4);
|
|
149
|
-
line-height: 0;
|
|
150
158
|
}
|
|
151
159
|
|
|
152
|
-
.d-btn__icon--
|
|
160
|
+
.d-btn__icon--top,
|
|
161
|
+
.d-btn__icon--bottom {
|
|
162
|
+
margin-right: var(--sun4);
|
|
163
|
+
margin-left: var(--sun4);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.d-btn__icon--left,
|
|
167
|
+
.d-btn__icon--top {
|
|
153
168
|
order: -1;
|
|
154
169
|
}
|
|
155
170
|
|
|
156
|
-
.d-btn__icon--right
|
|
171
|
+
.d-btn__icon--right,
|
|
172
|
+
.d-btn__icon--bottom {
|
|
157
173
|
order: 1;
|
|
158
174
|
}
|
|
159
175
|
|
|
@@ -175,6 +191,16 @@
|
|
|
175
191
|
margin-right: var(--su4);
|
|
176
192
|
}
|
|
177
193
|
|
|
194
|
+
.d-btn__icon--top ~ .d-btn__label,
|
|
195
|
+
.d-btn__label ~ .d-btn__icon--bottom {
|
|
196
|
+
margin-top: var(--su4);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.d-btn__icon--bottom ~ .d-btn__label,
|
|
200
|
+
.d-btn__label ~ .d-btn__icon--top {
|
|
201
|
+
margin-bottom: var(--su4);
|
|
202
|
+
}
|
|
203
|
+
|
|
178
204
|
// ============================================================================
|
|
179
205
|
// $ VISUAL STYLES
|
|
180
206
|
// ----------------------------------------------------------------------------
|
|
@@ -753,16 +753,29 @@ body {
|
|
|
753
753
|
align-items: center;
|
|
754
754
|
justify-content: center;
|
|
755
755
|
}
|
|
756
|
+
.d-btn--vertical {
|
|
757
|
+
flex-direction: column;
|
|
758
|
+
}
|
|
756
759
|
.d-btn__icon {
|
|
757
760
|
display: flex;
|
|
761
|
+
line-height: 0;
|
|
762
|
+
}
|
|
763
|
+
.d-btn__icon--left,
|
|
764
|
+
.d-btn__icon--right {
|
|
758
765
|
margin-top: var(--sun4);
|
|
759
766
|
margin-bottom: var(--sun4);
|
|
760
|
-
line-height: 0;
|
|
761
767
|
}
|
|
762
|
-
.d-btn__icon--
|
|
768
|
+
.d-btn__icon--top,
|
|
769
|
+
.d-btn__icon--bottom {
|
|
770
|
+
margin-right: var(--sun4);
|
|
771
|
+
margin-left: var(--sun4);
|
|
772
|
+
}
|
|
773
|
+
.d-btn__icon--left,
|
|
774
|
+
.d-btn__icon--top {
|
|
763
775
|
order: -1;
|
|
764
776
|
}
|
|
765
|
-
.d-btn__icon--right
|
|
777
|
+
.d-btn__icon--right,
|
|
778
|
+
.d-btn__icon--bottom {
|
|
766
779
|
order: 1;
|
|
767
780
|
}
|
|
768
781
|
.d-btn__icon--left:not(:only-child) {
|
|
@@ -779,6 +792,14 @@ body {
|
|
|
779
792
|
.d-btn__label ~ .d-btn__icon--left {
|
|
780
793
|
margin-right: var(--su4);
|
|
781
794
|
}
|
|
795
|
+
.d-btn__icon--top ~ .d-btn__label,
|
|
796
|
+
.d-btn__label ~ .d-btn__icon--bottom {
|
|
797
|
+
margin-top: var(--su4);
|
|
798
|
+
}
|
|
799
|
+
.d-btn__icon--bottom ~ .d-btn__label,
|
|
800
|
+
.d-btn__label ~ .d-btn__icon--top {
|
|
801
|
+
margin-bottom: var(--su4);
|
|
802
|
+
}
|
|
782
803
|
.d-btn--circle {
|
|
783
804
|
--button--fc: var(--black-800);
|
|
784
805
|
--button--br: var(--br-circle);
|