@dialpad/dialtone-css 8.49.2 → 8.50.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/lib/build/less/dialtone.less +1 -0
- package/lib/build/less/recipes/callbar_button_with_dropdown.less +52 -0
- package/lib/dist/dialtone-default-theme.css +41 -0
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone.css +41 -0
- package/lib/dist/dialtone.min.css +1 -1
- package/package.json +2 -2
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
@import 'recipes/attachment_carousel';
|
|
77
77
|
@import 'recipes/callbar_button';
|
|
78
78
|
@import 'recipes/callbar_button_with_popover';
|
|
79
|
+
@import 'recipes/callbar_button_with_dropdown';
|
|
79
80
|
@import 'recipes/callbox';
|
|
80
81
|
@import 'recipes/combobox_multi_select';
|
|
81
82
|
@import 'recipes/combobox_with_popover';
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
.dt-recipe--callbar-button-with-dropdown--arrow {
|
|
2
|
+
width: var(--dt-size-500);
|
|
3
|
+
height: var(--dt-size-500);
|
|
4
|
+
margin-top: var(--dt-space-450);
|
|
5
|
+
margin-left: calc(var(--dt-space-300-negative) * 5);
|
|
6
|
+
padding: var(--dt-space-400);
|
|
7
|
+
border-radius: var(--dt-size-300);
|
|
8
|
+
|
|
9
|
+
&.d-btn--active {
|
|
10
|
+
background: var(--dt-color-surface-moderate-opaque);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&--large {
|
|
14
|
+
margin-left: var(--dt-space-550-negative);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&__icon {
|
|
18
|
+
color: var(--dt-color-black-800);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.dt-recipe--callbar-button-with-dropdown--dropdown {
|
|
23
|
+
.d-popover__header {
|
|
24
|
+
color: var(--dt-color-foreground-primary-inverted);
|
|
25
|
+
background: var(--dt-color-surface-contrast);
|
|
26
|
+
|
|
27
|
+
.d-btn {
|
|
28
|
+
color: var(--dt-color-foreground-primary-inverted);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.dt-recipe--callbar-button-with-dropdown--button .d-tab--selected::after,
|
|
34
|
+
.dt-recipe--callbar-button-with-dropdown--button .d-tab--selected:hover::after {
|
|
35
|
+
--tab--bgc: var(--dt-color-surface-contrast);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.dt-recipe--callbar-button-with-dropdown--button .tab-group {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
height: 100%;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dt-recipe--callbar-button-with-dropdown--button .tab-content {
|
|
45
|
+
flex: 1 1 100%;
|
|
46
|
+
overflow-y: auto;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.dt-recipe--callbar-button-with-dropdown {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: flex-start;
|
|
52
|
+
}
|
|
@@ -8233,6 +8233,47 @@ ul {
|
|
|
8233
8233
|
flex: 1 1 100%;
|
|
8234
8234
|
overflow-y: auto;
|
|
8235
8235
|
}
|
|
8236
|
+
.dt-recipe--callbar-button-with-dropdown--arrow {
|
|
8237
|
+
width: var(--dt-size-500);
|
|
8238
|
+
height: var(--dt-size-500);
|
|
8239
|
+
margin-top: var(--dt-space-450);
|
|
8240
|
+
margin-left: calc(var(--dt-space-300-negative) * 5);
|
|
8241
|
+
padding: var(--dt-space-400);
|
|
8242
|
+
border-radius: var(--dt-size-300);
|
|
8243
|
+
}
|
|
8244
|
+
.dt-recipe--callbar-button-with-dropdown--arrow.d-btn--active {
|
|
8245
|
+
background: var(--dt-color-surface-moderate-opaque);
|
|
8246
|
+
}
|
|
8247
|
+
.dt-recipe--callbar-button-with-dropdown--arrow--large {
|
|
8248
|
+
margin-left: var(--dt-space-550-negative);
|
|
8249
|
+
}
|
|
8250
|
+
.dt-recipe--callbar-button-with-dropdown--arrow__icon {
|
|
8251
|
+
color: var(--dt-color-black-800);
|
|
8252
|
+
}
|
|
8253
|
+
.dt-recipe--callbar-button-with-dropdown--dropdown .d-popover__header {
|
|
8254
|
+
color: var(--dt-color-foreground-primary-inverted);
|
|
8255
|
+
background: var(--dt-color-surface-contrast);
|
|
8256
|
+
}
|
|
8257
|
+
.dt-recipe--callbar-button-with-dropdown--dropdown .d-popover__header .d-btn {
|
|
8258
|
+
color: var(--dt-color-foreground-primary-inverted);
|
|
8259
|
+
}
|
|
8260
|
+
.dt-recipe--callbar-button-with-dropdown--button .d-tab--selected::after,
|
|
8261
|
+
.dt-recipe--callbar-button-with-dropdown--button .d-tab--selected:hover::after {
|
|
8262
|
+
--tab--bgc: var(--dt-color-surface-contrast);
|
|
8263
|
+
}
|
|
8264
|
+
.dt-recipe--callbar-button-with-dropdown--button .tab-group {
|
|
8265
|
+
display: flex;
|
|
8266
|
+
flex-direction: column;
|
|
8267
|
+
height: 100%;
|
|
8268
|
+
}
|
|
8269
|
+
.dt-recipe--callbar-button-with-dropdown--button .tab-content {
|
|
8270
|
+
flex: 1 1 100%;
|
|
8271
|
+
overflow-y: auto;
|
|
8272
|
+
}
|
|
8273
|
+
.dt-recipe--callbar-button-with-dropdown {
|
|
8274
|
+
display: flex;
|
|
8275
|
+
align-items: flex-start;
|
|
8276
|
+
}
|
|
8236
8277
|
.d-recipe-callbox {
|
|
8237
8278
|
padding: 0;
|
|
8238
8279
|
color: var(--dt-color-foreground-primary);
|