@dialpad/dialtone 6.6.0 → 6.8.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.
- package/CHANGELOG.md +41 -0
- package/lib/build/less/components/avatar.less +68 -56
- package/lib/build/less/components/badge.less +39 -28
- package/lib/build/less/components/banner.less +33 -36
- package/lib/build/less/components/breadcrumbs.less +7 -8
- package/lib/build/less/components/button.less +53 -56
- package/lib/build/less/components/forms.less +24 -28
- package/lib/build/less/components/input.less +69 -42
- package/lib/build/less/components/link.less +12 -15
- package/lib/build/less/components/list-group.less +5 -5
- package/lib/build/less/components/modal.less +39 -49
- package/lib/build/less/components/notice.less +27 -29
- package/lib/build/less/components/radio-checkbox.less +73 -66
- package/lib/build/less/components/selects.less +27 -23
- package/lib/build/less/components/table.less +14 -17
- package/lib/build/less/components/tabs.less +30 -31
- package/lib/build/less/components/toast.less +39 -40
- package/lib/build/less/components/tooltip.less +21 -22
- package/lib/build/less/dialtone-globals.less +11 -3
- package/lib/build/less/dialtone-reset.less +11 -11
- package/lib/build/less/dialtone-variables.less +8 -8
- package/lib/build/less/dialtone.less +37 -35
- package/lib/build/less/themes/default.less +9 -9
- package/lib/build/less/themes/example.less +4 -4
- package/lib/build/less/utilities/backgrounds.less +89 -86
- package/lib/build/less/utilities/borders.less +101 -87
- package/lib/build/less/utilities/colors.less +91 -80
- package/lib/build/less/utilities/effects.less +83 -63
- package/lib/build/less/utilities/flex.less +107 -107
- package/lib/build/less/utilities/grid.less +146 -146
- package/lib/build/less/utilities/interactivity.less +27 -27
- package/lib/build/less/utilities/internals.less +46 -46
- package/lib/build/less/utilities/layout.less +82 -81
- package/lib/build/less/utilities/responsive.less +6 -6
- package/lib/build/less/utilities/sizing.less +97 -97
- package/lib/build/less/utilities/spacing.less +26 -26
- package/lib/build/less/utilities/svg.less +9 -1
- package/lib/build/less/utilities/typography.less +122 -111
- package/lib/build/less/variables/colors.less +8 -8
- package/lib/build/less/variables/sizes.less +8 -8
- package/lib/build/less/variables/spacing.less +1 -1
- package/lib/build/less/variables/typography.less +8 -9
- package/lib/build/less/variables/visual-styles.less +27 -27
- package/lib/build/svg/brand/play-store-badge.svg +63 -1
- package/lib/build/svg/spot/browser-list-callout.svg +57 -0
- package/lib/build/svg/spot/browser-table-graph.svg +111 -0
- package/lib/build/svg/system/raise-hand.svg +1 -1
- package/lib/build/svg/system/thumb-down.svg +3 -0
- package/lib/build/svg/system/thumb-up.svg +3 -0
- package/lib/dist/css/dialtone.css +134 -128
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/svg/brand/play-store-badge.svg +1 -1
- package/lib/dist/svg/spot/browser-list-callout.svg +1 -0
- package/lib/dist/svg/spot/browser-table-graph.svg +1 -0
- package/lib/dist/svg/system/raise-hand.svg +1 -1
- package/lib/dist/svg/system/thumb-down.svg +1 -0
- package/lib/dist/svg/system/thumb-up.svg +1 -0
- package/lib/dist/vue/icons/IconPlayStoreBadge.vue +1 -1
- package/lib/dist/vue/icons/IconRaiseHand.vue +1 -1
- package/lib/dist/vue/icons/IconThumbDown.vue +3 -0
- package/lib/dist/vue/icons/IconThumbUp.vue +3 -0
- package/lib/dist/vue/spot/SpotBrowserListCallout.vue +3 -0
- package/lib/dist/vue/spot/SpotBrowserTableGraph.vue +3 -0
- package/package.json +17 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
@import (reference)
|
|
2
|
-
@import (reference)
|
|
3
|
-
@import (reference)
|
|
1
|
+
@import (reference) '../variables/spacing.less';
|
|
2
|
+
@import (reference) '../utilities/internals.less';
|
|
3
|
+
@import (reference) '../variables/borders.less';
|
|
4
4
|
|
|
5
5
|
//
|
|
6
6
|
// DIALTONE
|
|
@@ -26,22 +26,22 @@
|
|
|
26
26
|
// ============================================================================
|
|
27
27
|
// $$ COLOR
|
|
28
28
|
// ----------------------------------------------------------------------------
|
|
29
|
-
.d-bc-transparent
|
|
30
|
-
.d-bc-current
|
|
31
|
-
.d-bc-unset
|
|
29
|
+
.d-bc-transparent { border-color: transparent !important; }
|
|
30
|
+
.d-bc-current { border-color: currentColor !important; }
|
|
31
|
+
.d-bc-unset { border-color: unset !important; }
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
// $$ DIRECTION
|
|
35
35
|
// ----------------------------------------------------------------------------
|
|
36
|
-
.d-ba
|
|
37
|
-
.d-bt
|
|
38
|
-
.d-br
|
|
39
|
-
.d-bb
|
|
40
|
-
.d-bl
|
|
41
|
-
.d-bx
|
|
42
|
-
.d-by
|
|
43
|
-
.d-ba-none
|
|
44
|
-
.d-ba-unset
|
|
36
|
+
.d-ba { border: var(--su1) solid currentColor !important; }
|
|
37
|
+
.d-bt { border-top: var(--su1) solid currentColor !important; }
|
|
38
|
+
.d-br { border-right: var(--su1) solid currentColor !important; }
|
|
39
|
+
.d-bb { border-bottom: var(--su1) solid currentColor !important; }
|
|
40
|
+
.d-bl { border-left: var(--su1) solid currentColor !important; }
|
|
41
|
+
.d-bx { .d-br(); .d-bl(); }
|
|
42
|
+
.d-by { .d-bt(); .d-bb(); }
|
|
43
|
+
.d-ba-none { border: none !important; }
|
|
44
|
+
.d-ba-unset { border: unset !important; }
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
// ============================================================================
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
{ .template(@value) { border-radius: @value !important; } },
|
|
55
55
|
@su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32 unset
|
|
56
56
|
);
|
|
57
|
-
.d-bar-circle
|
|
58
|
-
.d-bar-pill
|
|
57
|
+
.d-bar-circle { border-radius: @br-circle !important; }
|
|
58
|
+
.d-bar-pill { border-radius: @br-pill !important; }
|
|
59
59
|
|
|
60
60
|
// $$ TOP
|
|
61
61
|
// ----------------------------------------------------------------------------
|
|
@@ -64,8 +64,8 @@
|
|
|
64
64
|
{ .template(@value) { border-top-left-radius: @value !important; border-top-right-radius: @value !important; } },
|
|
65
65
|
@su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32
|
|
66
66
|
);
|
|
67
|
-
.d-btr-circle
|
|
68
|
-
.d-btr-pill
|
|
67
|
+
.d-btr-circle { border-top-left-radius: @br-circle !important; border-top-right-radius: @br-circle !important; }
|
|
68
|
+
.d-btr-pill { border-top-left-radius: @br-pill !important; border-top-right-radius: @br-pill !important; }
|
|
69
69
|
|
|
70
70
|
// $$ RIGHT
|
|
71
71
|
// ----------------------------------------------------------------------------
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
{ .template(@value) { border-top-right-radius: @value !important; border-bottom-right-radius: @value !important; } },
|
|
75
75
|
@su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32
|
|
76
76
|
);
|
|
77
|
-
.d-brr-circle
|
|
78
|
-
.d-brr-pill
|
|
77
|
+
.d-brr-circle { border-top-right-radius: @br-circle !important; border-bottom-right-radius: @br-circle !important; }
|
|
78
|
+
.d-brr-pill { border-top-right-radius: @br-pill !important; border-bottom-right-radius: @br-pill !important; }
|
|
79
79
|
|
|
80
80
|
// $$ TOP
|
|
81
81
|
// ----------------------------------------------------------------------------
|
|
@@ -84,8 +84,8 @@
|
|
|
84
84
|
{ .template(@value) { border-bottom-left-radius: @value !important; border-bottom-right-radius: @value !important; } },
|
|
85
85
|
@su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32
|
|
86
86
|
);
|
|
87
|
-
.d-bbr-circle
|
|
88
|
-
.d-bbr-pill
|
|
87
|
+
.d-bbr-circle { border-bottom-right-radius: @br-circle !important; border-bottom-left-radius: @br-circle !important; }
|
|
88
|
+
.d-bbr-pill { border-bottom-right-radius: @br-pill !important; border-bottom-left-radius: @br-pill !important; }
|
|
89
89
|
|
|
90
90
|
// $$ RIGHT
|
|
91
91
|
// ----------------------------------------------------------------------------
|
|
@@ -94,76 +94,76 @@
|
|
|
94
94
|
{ .template(@value) { border-top-left-radius: @value !important; border-bottom-left-radius: @value !important; } },
|
|
95
95
|
@su0 @su2 @su4 @su8 @su12 @su16 @su24 @su32
|
|
96
96
|
);
|
|
97
|
-
.d-blr-circle
|
|
98
|
-
.d-blr-pill
|
|
97
|
+
.d-blr-circle { border-top-left-radius: @br-circle !important; border-bottom-left-radius: @br-circle !important; }
|
|
98
|
+
.d-blr-pill { border-top-left-radius: @br-pill !important; border-bottom-left-radius: @br-pill !important; }
|
|
99
99
|
|
|
100
100
|
|
|
101
101
|
// $$ STYLE
|
|
102
102
|
// ----------------------------------------------------------------------------
|
|
103
|
-
.d-bas-dashed
|
|
104
|
-
.d-bts-dashed
|
|
105
|
-
.d-brs-dashed
|
|
106
|
-
.d-bbs-dashed
|
|
107
|
-
.d-bls-dashed
|
|
103
|
+
.d-bas-dashed { border-style: dashed !important; }
|
|
104
|
+
.d-bts-dashed { border-top-style: dashed !important; }
|
|
105
|
+
.d-brs-dashed { border-right-style: dashed !important; }
|
|
106
|
+
.d-bbs-dashed { border-bottom-style: dashed !important; }
|
|
107
|
+
.d-bls-dashed { border-left-style: dashed !important; }
|
|
108
108
|
|
|
109
|
-
.d-bas-dotted
|
|
110
|
-
.d-bts-dotted
|
|
111
|
-
.d-brs-dotted
|
|
112
|
-
.d-bbs-dotted
|
|
113
|
-
.d-bls-dotted
|
|
109
|
+
.d-bas-dotted { border-style: dotted !important; }
|
|
110
|
+
.d-bts-dotted { border-top-style: dotted !important; }
|
|
111
|
+
.d-brs-dotted { border-right-style: dotted !important; }
|
|
112
|
+
.d-bbs-dotted { border-bottom-style: dotted !important; }
|
|
113
|
+
.d-bls-dotted { border-left-style: dotted !important; }
|
|
114
114
|
|
|
115
|
-
.d-bas-unset
|
|
115
|
+
.d-bas-unset { border-style: unset !important; }
|
|
116
116
|
|
|
117
117
|
|
|
118
118
|
// $$ WIDTH
|
|
119
119
|
// ----------------------------------------------------------------------------
|
|
120
|
-
.d-baw0
|
|
121
|
-
.d-baw1
|
|
122
|
-
.d-baw2
|
|
123
|
-
.d-baw4
|
|
124
|
-
.d-baw6
|
|
120
|
+
.d-baw0 { border-width: var(--su0) !important; }
|
|
121
|
+
.d-baw1 { border-width: var(--su1) !important; }
|
|
122
|
+
.d-baw2 { border-width: var(--su2) !important; }
|
|
123
|
+
.d-baw4 { border-width: var(--su4) !important; }
|
|
124
|
+
.d-baw6 { border-width: var(--su6) !important; }
|
|
125
125
|
|
|
126
126
|
// -- Top Border Width
|
|
127
|
-
.d-btw0
|
|
128
|
-
.d-btw1
|
|
129
|
-
.d-btw2
|
|
130
|
-
.d-btw4
|
|
131
|
-
.d-btw6
|
|
127
|
+
.d-btw0 { border-top-width: var(--su0) !important; }
|
|
128
|
+
.d-btw1 { border-top-width: var(--su1) !important; }
|
|
129
|
+
.d-btw2 { border-top-width: var(--su2) !important; }
|
|
130
|
+
.d-btw4 { border-top-width: var(--su4) !important; }
|
|
131
|
+
.d-btw6 { border-top-width: var(--su6) !important; }
|
|
132
132
|
|
|
133
133
|
// -- Right Border Width
|
|
134
|
-
.d-brw0
|
|
135
|
-
.d-brw1
|
|
136
|
-
.d-brw2
|
|
137
|
-
.d-brw4
|
|
138
|
-
.d-brw6
|
|
134
|
+
.d-brw0 { border-right-width: var(--su0) !important; }
|
|
135
|
+
.d-brw1 { border-right-width: var(--su1) !important; }
|
|
136
|
+
.d-brw2 { border-right-width: var(--su2) !important; }
|
|
137
|
+
.d-brw4 { border-right-width: var(--su4) !important; }
|
|
138
|
+
.d-brw6 { border-right-width: var(--su6) !important; }
|
|
139
139
|
|
|
140
140
|
// -- Bottom Border Width
|
|
141
|
-
.d-bbw0
|
|
142
|
-
.d-bbw1
|
|
143
|
-
.d-bbw2
|
|
144
|
-
.d-bbw4
|
|
145
|
-
.d-bbw6
|
|
141
|
+
.d-bbw0 { border-bottom-width: var(--su0) !important; }
|
|
142
|
+
.d-bbw1 { border-bottom-width: var(--su1) !important; }
|
|
143
|
+
.d-bbw2 { border-bottom-width: var(--su2) !important; }
|
|
144
|
+
.d-bbw4 { border-bottom-width: var(--su4) !important; }
|
|
145
|
+
.d-bbw6 { border-bottom-width: var(--su6) !important; }
|
|
146
146
|
|
|
147
147
|
// -- Left Border Width
|
|
148
|
-
.d-blw0
|
|
149
|
-
.d-blw1
|
|
150
|
-
.d-blw2
|
|
151
|
-
.d-blw4
|
|
152
|
-
.d-blw6
|
|
148
|
+
.d-blw0 { border-left-width: var(--su0) !important; }
|
|
149
|
+
.d-blw1 { border-left-width: var(--su1) !important; }
|
|
150
|
+
.d-blw2 { border-left-width: var(--su2) !important; }
|
|
151
|
+
.d-blw4 { border-left-width: var(--su4) !important; }
|
|
152
|
+
.d-blw6 { border-left-width: var(--su6) !important; }
|
|
153
153
|
|
|
154
154
|
// -- X Border Width
|
|
155
|
-
.d-bxw0
|
|
156
|
-
.d-bxw1
|
|
157
|
-
.d-bxw2
|
|
158
|
-
.d-bxw4
|
|
159
|
-
.d-bxw6
|
|
155
|
+
.d-bxw0 { .d-brw0(); .d-blw0(); }
|
|
156
|
+
.d-bxw1 { .d-brw1(); .d-blw1(); }
|
|
157
|
+
.d-bxw2 { .d-brw2(); .d-blw2(); }
|
|
158
|
+
.d-bxw4 { .d-brw4(); .d-blw4(); }
|
|
159
|
+
.d-bxw6 { .d-brw6(); .d-blw6(); }
|
|
160
160
|
|
|
161
161
|
// -- Y Border Width
|
|
162
|
-
.d-byw0
|
|
163
|
-
.d-byw1
|
|
164
|
-
.d-byw2
|
|
165
|
-
.d-byw4
|
|
166
|
-
.d-byw6
|
|
162
|
+
.d-byw0 { .d-btw0(); .d-bbw0(); }
|
|
163
|
+
.d-byw1 { .d-btw1(); .d-bbw1(); }
|
|
164
|
+
.d-byw2 { .d-btw2(); .d-bbw2(); }
|
|
165
|
+
.d-byw4 { .d-btw4(); .d-bbw4(); }
|
|
166
|
+
.d-byw6 { .d-btw6(); .d-bbw6(); }
|
|
167
167
|
|
|
168
168
|
|
|
169
169
|
// ============================================================================
|
|
@@ -173,23 +173,30 @@
|
|
|
173
173
|
// ----------------------------------------------------------------------------
|
|
174
174
|
.d-divide-y > * + * {
|
|
175
175
|
--divide-y-reverse: 0;
|
|
176
|
-
|
|
177
|
-
border-
|
|
176
|
+
|
|
177
|
+
border-top: calc(~'1px * (1 - var(--divide-y-reverse))') solid currentColor !important;
|
|
178
|
+
border-bottom: calc(~'1px * var(--divide-y-reverse)') solid currentColor !important;
|
|
178
179
|
}
|
|
180
|
+
|
|
179
181
|
.d-divide-y0 > * + * {
|
|
180
182
|
--divide-y-reverse: 0;
|
|
181
|
-
|
|
182
|
-
border-
|
|
183
|
+
|
|
184
|
+
border-top: calc(~'0 * (1 - var(--divide-y-reverse))') solid currentColor !important;
|
|
185
|
+
border-bottom: calc(~'0 * var(--divide-y-reverse)') solid currentColor !important;
|
|
183
186
|
}
|
|
187
|
+
|
|
184
188
|
.d-divide-y2 > * + * {
|
|
185
189
|
--divide-y-reverse: 0;
|
|
186
|
-
|
|
187
|
-
border-
|
|
190
|
+
|
|
191
|
+
border-top: calc(~'2px * (1 - var(--divide-y-reverse))') solid currentColor !important;
|
|
192
|
+
border-bottom: calc(~'2px * var(--divide-y-reverse)') solid currentColor !important;
|
|
188
193
|
}
|
|
194
|
+
|
|
189
195
|
.d-divide-y4 > * + * {
|
|
190
196
|
--divide-y-reverse: 0;
|
|
191
|
-
|
|
192
|
-
border-
|
|
197
|
+
|
|
198
|
+
border-top: calc(~'4px * (1 - var(--divide-y-reverse))') solid currentColor !important;
|
|
199
|
+
border-bottom: calc(~'4px * var(--divide-y-reverse)') solid currentColor !important;
|
|
193
200
|
}
|
|
194
201
|
.d-divide-y-reverse > * + * { --divide-y-reverse: 1; }
|
|
195
202
|
|
|
@@ -197,22 +204,29 @@
|
|
|
197
204
|
// ----------------------------------------------------------------------------
|
|
198
205
|
.d-divide-x > * + * {
|
|
199
206
|
--divide-x-reverse: 0;
|
|
200
|
-
|
|
201
|
-
border-right: calc(~
|
|
207
|
+
|
|
208
|
+
border-right: calc(~'1px * var(--divide-x-reverse)') solid currentColor !important;
|
|
209
|
+
border-left: calc(~'1px * (1 - var(--divide-x-reverse))') solid currentColor !important;
|
|
202
210
|
}
|
|
211
|
+
|
|
203
212
|
.d-divide-x0 > * + * {
|
|
204
213
|
--divide-x-reverse: 0;
|
|
205
|
-
|
|
206
|
-
border-right: calc(~
|
|
214
|
+
|
|
215
|
+
border-right: calc(~'0 * var(--divide-x-reverse)') solid currentColor !important;
|
|
216
|
+
border-left: calc(~'0 * (1 - var(--divide-x-reverse))') solid currentColor !important;
|
|
207
217
|
}
|
|
218
|
+
|
|
208
219
|
.d-divide-x2 > * + * {
|
|
209
220
|
--divide-x-reverse: 0;
|
|
210
|
-
|
|
211
|
-
border-right: calc(~
|
|
221
|
+
|
|
222
|
+
border-right: calc(~'2px * var(--divide-x-reverse)') solid currentColor !important;
|
|
223
|
+
border-left: calc(~'2px * (1 - var(--divide-x-reverse))') solid currentColor !important;
|
|
212
224
|
}
|
|
225
|
+
|
|
213
226
|
.d-divide-x4 > * + * {
|
|
214
227
|
--divide-x-reverse: 0;
|
|
215
|
-
|
|
216
|
-
border-right: calc(~
|
|
228
|
+
|
|
229
|
+
border-right: calc(~'4px * var(--divide-x-reverse)') solid currentColor !important;
|
|
230
|
+
border-left: calc(~'4px * (1 - var(--divide-x-reverse))') solid currentColor !important;
|
|
217
231
|
}
|
|
218
232
|
.d-divide-x-reverse > * + * { --divide-x-reverse: 1; }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import (reference)
|
|
1
|
+
@import (reference) '../utilities/internals.less';
|
|
2
2
|
|
|
3
3
|
//
|
|
4
4
|
// DIALTONE
|
|
@@ -36,16 +36,18 @@
|
|
|
36
36
|
.h\:d-fc-@{color-name}:hover,
|
|
37
37
|
.f\:d-fc-@{color-name}:focus {
|
|
38
38
|
--fco: 100%;
|
|
39
|
-
|
|
39
|
+
|
|
40
|
+
color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--fco)) !important;
|
|
40
41
|
}
|
|
41
42
|
.f\:d-fc-@{color-name}:focus-within {
|
|
42
43
|
--fco: 100%;
|
|
43
|
-
|
|
44
|
+
|
|
45
|
+
color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--fco)) !important;
|
|
44
46
|
}
|
|
45
47
|
#d-internals #dark-mode('.d\:d-fc-@{color-name}', {
|
|
46
48
|
--fco: 100%;
|
|
47
|
-
color: hsla(var(~
|
|
48
|
-
})
|
|
49
|
+
color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--fco)) !important;
|
|
50
|
+
});;
|
|
49
51
|
|
|
50
52
|
|
|
51
53
|
// -- BORDER STYLES
|
|
@@ -53,42 +55,47 @@
|
|
|
53
55
|
.h\:d-bc-@{color-name}:hover,
|
|
54
56
|
.f\:d-bc-@{color-name}:focus {
|
|
55
57
|
--bco: 100%;
|
|
56
|
-
|
|
58
|
+
|
|
59
|
+
border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bco)) !important;
|
|
57
60
|
}
|
|
58
61
|
.f\:d-bc-@{color-name}:focus-within {
|
|
59
62
|
--bco: 100%;
|
|
60
|
-
|
|
63
|
+
|
|
64
|
+
border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bco)) !important;
|
|
61
65
|
}
|
|
62
66
|
#d-internals #dark-mode('.d\:d-bc-@{color-name}', {
|
|
63
67
|
--bco: 100%;
|
|
64
|
-
border-color: hsla(var(~
|
|
65
|
-
})
|
|
68
|
+
border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bco)) !important;
|
|
69
|
+
});;
|
|
66
70
|
|
|
67
71
|
// -- DIVIDER COLORS
|
|
68
72
|
.d-divide-@{color-name} > * + * {
|
|
69
73
|
--dco: 100%;
|
|
70
|
-
|
|
74
|
+
|
|
75
|
+
border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--dco)) !important;
|
|
71
76
|
}
|
|
72
77
|
#d-internals #dark-mode('.d\:d-divide-@{color-name} > * + *', {
|
|
73
78
|
--dco: 100%;
|
|
74
|
-
border-color: hsla(var(~
|
|
75
|
-
})
|
|
79
|
+
border-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--dco)) !important;
|
|
80
|
+
});;
|
|
76
81
|
|
|
77
82
|
// -- BACKGROUND STYLES
|
|
78
83
|
.d-bgc-@{color-name},
|
|
79
84
|
.h\:d-bgc-@{color-name}:hover,
|
|
80
85
|
.f\:d-bgc-@{color-name}:focus {
|
|
81
86
|
--bgo: 100%;
|
|
82
|
-
|
|
87
|
+
|
|
88
|
+
background-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bgo)) !important;
|
|
83
89
|
}
|
|
84
90
|
.f\:d-bgc-@{color-name}:focus-within {
|
|
85
91
|
--bgo: 100%;
|
|
86
|
-
|
|
92
|
+
|
|
93
|
+
background-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bgo)) !important;
|
|
87
94
|
}
|
|
88
95
|
#d-internals #dark-mode('.d\:d-bgc-@{color-name}', {
|
|
89
96
|
--bgo: 100%;
|
|
90
|
-
background-color: hsla(var(~
|
|
91
|
-
})
|
|
97
|
+
background-color: hsla(var(~'--@{color-name}-h') var(~'--@{color-name}-s') var(~'--@{color-name}-l') ~' / ' var(--bgo)) !important;
|
|
98
|
+
});;;;
|
|
92
99
|
}
|
|
93
100
|
|
|
94
101
|
// ========================================================================
|
|
@@ -102,12 +109,12 @@
|
|
|
102
109
|
//
|
|
103
110
|
// ------------------------------------------------------------------------
|
|
104
111
|
#standard-stops(@color) {
|
|
105
|
-
#d-internals #color-classes(~
|
|
106
|
-
#d-internals #color-classes(~
|
|
107
|
-
#d-internals #color-classes(~
|
|
108
|
-
#d-internals #color-classes(~
|
|
109
|
-
#d-internals #color-classes(~
|
|
110
|
-
#d-internals #color-classes(~
|
|
112
|
+
#d-internals #color-classes(~'@{color}-600');;;;
|
|
113
|
+
#d-internals #color-classes(~'@{color}-500');;;;
|
|
114
|
+
#d-internals #color-classes(~'@{color}-400');;;;
|
|
115
|
+
#d-internals #color-classes(~'@{color}-300');;;;
|
|
116
|
+
#d-internals #color-classes(~'@{color}-200');;;;
|
|
117
|
+
#d-internals #color-classes(~'@{color}-100');;;;
|
|
111
118
|
}
|
|
112
119
|
|
|
113
120
|
// ========================================================================
|
|
@@ -123,75 +130,75 @@
|
|
|
123
130
|
.d-fco@{opacity},
|
|
124
131
|
.h\:d-fco@{opacity}:hover,
|
|
125
132
|
.f\:d-fco@{opacity}:focus {
|
|
126
|
-
--fco: ~
|
|
133
|
+
--fco: ~'@{opacity}%' !important;
|
|
127
134
|
}
|
|
128
135
|
.f\:d-fco@{opacity}:focus-within {
|
|
129
|
-
--fco: ~
|
|
136
|
+
--fco: ~'@{opacity}%' !important;
|
|
130
137
|
}
|
|
131
138
|
#d-internals #dark-mode('.d\:d-fco@{opacity}', {
|
|
132
|
-
--fco: ~
|
|
133
|
-
})
|
|
139
|
+
--fco: ~'@{opacity}%' !important;
|
|
140
|
+
});;
|
|
134
141
|
|
|
135
142
|
|
|
136
143
|
// -- BORDER OPACITY
|
|
137
144
|
.d-bco@{opacity},
|
|
138
145
|
.h\:d-bco@{opacity}:hover,
|
|
139
146
|
.f\:d-bco@{opacity}:focus {
|
|
140
|
-
--bco: ~
|
|
147
|
+
--bco: ~'@{opacity}%' !important;
|
|
141
148
|
}
|
|
142
149
|
.f\:d-bco@{opacity}:focus-within {
|
|
143
|
-
--bco: ~
|
|
150
|
+
--bco: ~'@{opacity}%' !important;
|
|
144
151
|
}
|
|
145
152
|
#d-internals #dark-mode('.d\:d-bco@{opacity}', {
|
|
146
|
-
--bco: ~
|
|
147
|
-
})
|
|
153
|
+
--bco: ~'@{opacity}%' !important;
|
|
154
|
+
});;
|
|
148
155
|
|
|
149
156
|
// -- DIVIDER OPACITY
|
|
150
157
|
.d-dco@{opacity} > * + * {
|
|
151
|
-
--dco: ~
|
|
158
|
+
--dco: ~'@{opacity}%' !important;
|
|
152
159
|
}
|
|
153
160
|
#d-internals #dark-mode('.d\:d-dco@{opacity} > * + *', {
|
|
154
|
-
--dco: ~
|
|
155
|
-
})
|
|
161
|
+
--dco: ~'@{opacity}%' !important;
|
|
162
|
+
});;
|
|
156
163
|
|
|
157
164
|
// -- BACKGROUND COLOR OPACITY
|
|
158
165
|
.d-bgo@{opacity},
|
|
159
166
|
.h\:d-bgo@{opacity}:hover,
|
|
160
167
|
.f\:d-bgo@{opacity}:focus {
|
|
161
|
-
--bgo: ~
|
|
168
|
+
--bgo: ~'@{opacity}%' !important;
|
|
162
169
|
}
|
|
163
170
|
.f\:d-bgo@{opacity}:focus-within {
|
|
164
|
-
--bgo: ~
|
|
171
|
+
--bgo: ~'@{opacity}%' !important;
|
|
165
172
|
}
|
|
166
173
|
#d-internals #dark-mode('.d\:d-bgo@{opacity}', {
|
|
167
|
-
--bgo: ~
|
|
168
|
-
})
|
|
174
|
+
--bgo: ~'@{opacity}%' !important;
|
|
175
|
+
});;
|
|
169
176
|
|
|
170
177
|
// -- BACKGROUND GRADIENT STARTING STOP
|
|
171
178
|
.d-bgg-from-o@{opacity},
|
|
172
179
|
.h\:d-bgg-from-@{opacity}:hover,
|
|
173
180
|
.f\:d-bgg-from-@{opacity}:focus {
|
|
174
|
-
--bgg-from-opacity: ~
|
|
181
|
+
--bgg-from-opacity: ~'@{opacity}%' !important;
|
|
175
182
|
}
|
|
176
183
|
.f\:d-bgg-from-@{opacity}:focus-within {
|
|
177
|
-
--bgg-from-opacity: ~
|
|
184
|
+
--bgg-from-opacity: ~'@{opacity}%' !important;
|
|
178
185
|
}
|
|
179
186
|
#d-internals #dark-mode('.d\:d-bgg-from-@{opacity}', {
|
|
180
|
-
--bgg-from-opacity: ~
|
|
181
|
-
})
|
|
187
|
+
--bgg-from-opacity: ~'@{opacity}%' !important;
|
|
188
|
+
});;
|
|
182
189
|
|
|
183
190
|
// -- BACKGROUND GRADIENT ENDING STOP
|
|
184
191
|
.d-bgg-to-o@{opacity},
|
|
185
192
|
.h\:d-bgg-to-@{opacity}:hover,
|
|
186
193
|
.f\:d-bgg-to-@{opacity}:focus {
|
|
187
|
-
--bgg-to-opacity: ~
|
|
194
|
+
--bgg-to-opacity: ~'@{opacity}%' !important;
|
|
188
195
|
}
|
|
189
196
|
.f\:d-bgg-to-@{opacity}:focus-within {
|
|
190
|
-
--bgg-to-opacity: ~
|
|
197
|
+
--bgg-to-opacity: ~'@{opacity}%' !important;
|
|
191
198
|
}
|
|
192
199
|
#d-internals #dark-mode('.d\:d-bgg-to-@{opacity}', {
|
|
193
|
-
--bgg-to-opacity: ~
|
|
194
|
-
})
|
|
200
|
+
--bgg-to-opacity: ~'@{opacity}%' !important;
|
|
201
|
+
});;;;
|
|
195
202
|
}
|
|
196
203
|
}
|
|
197
204
|
|
|
@@ -226,62 +233,66 @@
|
|
|
226
233
|
.d-fc-primary,
|
|
227
234
|
.h\:d-fc-primary:hover,
|
|
228
235
|
.f\:d-fc-primary:focus {
|
|
229
|
-
color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~
|
|
236
|
+
color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~' / ' var(--fco)) !important;
|
|
230
237
|
}
|
|
238
|
+
|
|
231
239
|
.f\:d-fc-primary:focus-within {
|
|
232
|
-
color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~
|
|
240
|
+
color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~' / ' var(--fco)) !important;
|
|
233
241
|
}
|
|
234
242
|
|
|
235
243
|
// $$ TEXT COLORS
|
|
236
244
|
// ----------------------------------------------------------------------------
|
|
237
|
-
.d-fc-dark
|
|
238
|
-
.h\:d-fc-dark:hover
|
|
239
|
-
.f\:d-fc-dark:focus
|
|
240
|
-
.f\:d-fc-dark:focus-within
|
|
241
|
-
|
|
242
|
-
.d-fc-medium
|
|
243
|
-
.h\:d-fc-medium:hover
|
|
244
|
-
.f\:d-fc-medium:focus
|
|
245
|
-
.f\:d-fc-medium:focus-within
|
|
246
|
-
|
|
247
|
-
.d-fc-light
|
|
248
|
-
.h\:d-fc-light:hover
|
|
249
|
-
.f\:d-fc-light:focus
|
|
250
|
-
.f\:d-fc-light:focus-within
|
|
251
|
-
|
|
252
|
-
.d-fc-lighter
|
|
253
|
-
.d-fc-purple
|
|
254
|
-
.d-fc-orange
|
|
255
|
-
.d-fc-pink
|
|
245
|
+
.d-fc-dark { &:extend(.d-fc-black-900); }
|
|
246
|
+
.h\:d-fc-dark:hover { &:extend(.h\:d-fc-black-900:hover); }
|
|
247
|
+
.f\:d-fc-dark:focus { &:extend(.f\:d-fc-black-900:focus); }
|
|
248
|
+
.f\:d-fc-dark:focus-within { &:extend(.f\:d-fc-black-900:focus-within); }
|
|
249
|
+
|
|
250
|
+
.d-fc-medium { &:extend(.d-fc-black-800); }
|
|
251
|
+
.h\:d-fc-medium:hover { &:extend(.h\:d-fc-black-800:hover); }
|
|
252
|
+
.f\:d-fc-medium:focus { &:extend(.f\:d-fc-black-800:focus); }
|
|
253
|
+
.f\:d-fc-medium:focus-within { &:extend(.f\:d-fc-black-800:focus-within); }
|
|
254
|
+
|
|
255
|
+
.d-fc-light { &:extend(.d-fc-black-700); }
|
|
256
|
+
.h\:d-fc-light:hover { &:extend(.h\:d-fc-black-700:hover); }
|
|
257
|
+
.f\:d-fc-light:focus { &:extend(.f\:d-fc-black-700:focus); }
|
|
258
|
+
.f\:d-fc-light:focus-within { &:extend(.f\:d-fc-black-700:focus-within); }
|
|
259
|
+
|
|
260
|
+
.d-fc-lighter { &:extend(.d-fc-black-600); }
|
|
261
|
+
.d-fc-purple { &:extend(.d-fc-purple-500); }
|
|
262
|
+
.d-fc-orange { &:extend(.d-fc-orange-600); }
|
|
263
|
+
.d-fc-pink { &:extend(.d-fc-pink-600); }
|
|
256
264
|
|
|
257
265
|
.d-fc-green,
|
|
258
|
-
.d-fc-success
|
|
266
|
+
.d-fc-success { &:extend(.d-fc-green-600); }
|
|
267
|
+
|
|
259
268
|
.d-fc-yellow,
|
|
260
|
-
.d-fc-warning
|
|
269
|
+
.d-fc-warning { &:extend(.d-fc-yellow-600); }
|
|
270
|
+
|
|
261
271
|
.d-fc-red,
|
|
262
272
|
.d-fc-error,
|
|
263
|
-
.d-fc-danger
|
|
273
|
+
.d-fc-danger { &:extend(.d-fc-red-600); }
|
|
264
274
|
|
|
265
|
-
.d-fc-current
|
|
266
|
-
.d-fc-transparent
|
|
267
|
-
.d-fc-unset
|
|
275
|
+
.d-fc-current { color: currentColor !important; }
|
|
276
|
+
.d-fc-transparent { color: transparent !important; }
|
|
277
|
+
.d-fc-unset { color: unset !important; }
|
|
268
278
|
|
|
269
279
|
|
|
270
280
|
// $$ BACKGROUND COLORS
|
|
271
281
|
// ----------------------------------------------------------------------------
|
|
272
|
-
.d-bgc-success
|
|
273
|
-
.d-bgc-warning
|
|
282
|
+
.d-bgc-success { &:extend(.d-bgc-green-500); }
|
|
283
|
+
.d-bgc-warning { &:extend(.d-bgc-yellow-500); }
|
|
284
|
+
|
|
274
285
|
.d-bgc-error,
|
|
275
|
-
.d-bgc-danger
|
|
276
|
-
.d-bgc-transparent
|
|
277
|
-
.d-bgc-unset
|
|
286
|
+
.d-bgc-danger { &:extend(.d-bgc-red-500); }
|
|
287
|
+
.d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
|
|
288
|
+
.d-bgc-unset { background-color: unset !important; background-image: unset !important; }
|
|
278
289
|
|
|
279
290
|
|
|
280
291
|
// $$ BORDER COLORS
|
|
281
292
|
// ----------------------------------------------------------------------------
|
|
282
|
-
.d-bc-transparent
|
|
283
|
-
.d-bc-current
|
|
284
|
-
.d-bc-unset
|
|
293
|
+
.d-bc-transparent { border-color: transparent !important; }
|
|
294
|
+
.d-bc-current { border-color: currentColor !important; }
|
|
295
|
+
.d-bc-unset { border-color: unset !important; }
|
|
285
296
|
|
|
286
297
|
|
|
287
298
|
// $ OPACITY CLASSES
|