@dialpad/dialtone-css 8.46.3 → 8.46.5
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/components/avatar.less +2 -2
- package/lib/build/less/components/presence.less +2 -2
- package/lib/build/less/recipes/attachment_carousel.less +106 -106
- package/lib/build/less/recipes/callbar_button.less +21 -9
- package/lib/build/less/recipes/callbar_button_with_popover.less +14 -7
- package/lib/build/less/recipes/callbox.less +17 -17
- package/lib/build/less/recipes/combobox_multi_select.less +13 -9
- package/lib/build/less/recipes/contact_info.less +11 -3
- package/lib/build/less/recipes/editor.less +43 -2
- package/lib/build/less/recipes/emoji_row.less +11 -7
- package/lib/build/less/recipes/feed_item_pill.less +20 -16
- package/lib/build/less/recipes/feed_item_row.less +17 -17
- package/lib/build/less/recipes/grouped_chip.less +8 -5
- package/lib/build/less/recipes/ivr_node.less +93 -15
- package/lib/build/less/recipes/leftbar_row.less +103 -51
- package/lib/build/less/recipes/message_input.less +21 -16
- package/lib/build/less/recipes/settings_menu_button.less +2 -3
- package/lib/build/less/recipes/time_pill.less +2 -2
- package/lib/build/less/recipes/top_banner_info.less +26 -6
- package/lib/build/less/recipes/unread_pill.less +3 -3
- package/lib/dist/dialtone-default-theme.css +431 -267
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone.css +431 -267
- package/lib/dist/dialtone.min.css +1 -1
- package/lib/dist/tokens/tokens-base-deca-dark.css +1325 -0
- package/lib/dist/tokens/tokens-base-deca-light.css +1085 -0
- package/lib/dist/tokens/tokens-deca-dark.css +2131 -0
- package/lib/dist/tokens/tokens-deca-light.css +2131 -0
- package/lib/dist/tokens/tokens-tmo-dark.css +62 -17
- package/lib/dist/tokens/tokens-tmo-light.css +45 -0
- package/package.json +3 -3
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
.
|
|
1
|
+
.d-recipe-feed-item-pill--toggleable {
|
|
2
|
+
cursor: pointer;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.d-recipe-feed-item-pill__wrapper {
|
|
2
6
|
padding: var(--dt-space-400);
|
|
3
7
|
background-color: var(--dt-color-surface-secondary);
|
|
4
8
|
}
|
|
5
9
|
|
|
6
|
-
.
|
|
7
|
-
width: 100
|
|
10
|
+
.d-recipe-feed-item-pill__button {
|
|
11
|
+
width: var(--dt-size-100-percent);
|
|
8
12
|
text-align: left;
|
|
9
13
|
background-color: var(--dt-color-surface-moderate);
|
|
10
14
|
border-width: 0;
|
|
@@ -17,9 +21,9 @@
|
|
|
17
21
|
--button-border-radius: var(--dt-size-radius-600);
|
|
18
22
|
}
|
|
19
23
|
|
|
20
|
-
.
|
|
24
|
+
.d-recipe-feed-item-pill__layout {
|
|
21
25
|
gap: var(--dt-space-300);
|
|
22
|
-
width: 100
|
|
26
|
+
width: var(--dt-size-100-percent);
|
|
23
27
|
padding: var(--dt-space-400);
|
|
24
28
|
|
|
25
29
|
& > .d-item-layout--left {
|
|
@@ -28,46 +32,46 @@
|
|
|
28
32
|
}
|
|
29
33
|
}
|
|
30
34
|
|
|
31
|
-
.
|
|
35
|
+
.d-recipe-feed-item-pill__icon {
|
|
32
36
|
display: flex;
|
|
33
37
|
|
|
34
38
|
& svg {
|
|
35
|
-
animation: fade 0.15s ease-in;
|
|
39
|
+
animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
|
|
36
40
|
}
|
|
37
41
|
}
|
|
38
42
|
|
|
39
|
-
.
|
|
43
|
+
.d-recipe-feed-item-pill__content {
|
|
40
44
|
display: flex;
|
|
41
45
|
justify-content: center;
|
|
42
46
|
}
|
|
43
47
|
|
|
44
|
-
.
|
|
48
|
+
.d-recipe-feed-item-pill__title {
|
|
45
49
|
font-weight: var(--dt-font-weight-bold);
|
|
46
50
|
}
|
|
47
51
|
|
|
48
52
|
// Gradient radius solution taken from https://stackoverflow.com/a/53037637
|
|
49
|
-
.
|
|
53
|
+
.d-recipe-feed-item-pill__border {
|
|
50
54
|
overflow: hidden;
|
|
51
55
|
background-clip: content-box, border-box;
|
|
52
56
|
background-origin: border-box;
|
|
53
|
-
border: double
|
|
57
|
+
border: double var(--dt-size-100) transparent;
|
|
54
58
|
border-radius: var(--dt-size-radius-600);
|
|
55
59
|
}
|
|
56
60
|
|
|
57
|
-
.
|
|
61
|
+
.d-recipe-feed-item-pill__border--default {
|
|
58
62
|
background: var(--dt-color-border-default)
|
|
59
63
|
}
|
|
60
64
|
|
|
61
|
-
.
|
|
65
|
+
.d-recipe-feed-item-pill__border--ai {
|
|
62
66
|
background-image: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),
|
|
63
67
|
var(--dt-badge-color-background-ai);
|
|
64
68
|
}
|
|
65
69
|
|
|
66
|
-
.
|
|
70
|
+
.d-recipe-feed-item-pill__border--critical {
|
|
67
71
|
background: var(--dt-color-foreground-critical);
|
|
68
72
|
}
|
|
69
73
|
|
|
70
|
-
@keyframes fade {
|
|
74
|
+
@keyframes d-recipe-feed-item-pill-fade {
|
|
71
75
|
0% {
|
|
72
76
|
transform: scale(0);
|
|
73
77
|
}
|
|
@@ -75,4 +79,4 @@
|
|
|
75
79
|
100% {
|
|
76
80
|
transform: scale(1);
|
|
77
81
|
}
|
|
78
|
-
}
|
|
82
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.d-recipe-feed-item-row {
|
|
2
2
|
position: relative;
|
|
3
3
|
box-sizing: border-box;
|
|
4
4
|
width: var(--dt-size-100-percent);
|
|
@@ -36,37 +36,37 @@
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
.
|
|
39
|
+
.d-recipe-feed-item-row__state--searched {
|
|
40
40
|
background-color: var(--dt-color-surface-warning-subtle);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
.
|
|
43
|
+
.d-recipe-feed-item-row__state--error {
|
|
44
44
|
background-color: var(--dt-color-surface-critical-subtle);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.
|
|
47
|
+
.d-recipe-feed-item-row__state-transition {
|
|
48
48
|
transition: background-color 2s var(--ttf-in-out) 0s;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.
|
|
51
|
+
.d-recipe-feed-item-row--active {
|
|
52
52
|
background-color: var(--dt-color-surface-secondary-opaque);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
.
|
|
55
|
+
.d-recipe-feed-item-row__avatar-container {
|
|
56
56
|
padding-top: var(--dt-space-300);
|
|
57
57
|
padding-bottom: var(--dt-space-300);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
.
|
|
60
|
+
.d-recipe-feed-item-row__content {
|
|
61
61
|
padding-left: var(--dt-space-300);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
.
|
|
64
|
+
.d-recipe-feed-item-row__attachment {
|
|
65
65
|
padding-top: var(--dt-space-200);
|
|
66
66
|
padding-bottom: var(--dt-space-300);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
.
|
|
69
|
+
.d-recipe-feed-item-row__image {
|
|
70
70
|
display: block;
|
|
71
71
|
min-width: 5.6rem;
|
|
72
72
|
max-width: 30rem;
|
|
@@ -76,12 +76,12 @@
|
|
|
76
76
|
border-radius: var(--dt-size-radius-400);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
.
|
|
79
|
+
.d-recipe-feed-item-row__video {
|
|
80
80
|
display: block;
|
|
81
81
|
height: 25.0rem;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
.
|
|
84
|
+
.d-recipe-feed-item-row__header {
|
|
85
85
|
display: flex;
|
|
86
86
|
flex-wrap: wrap;
|
|
87
87
|
gap: var(--dt-space-300);
|
|
@@ -90,17 +90,17 @@
|
|
|
90
90
|
line-height: var(--dt-font-line-height-300);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.
|
|
93
|
+
.d-recipe-feed-item-row__header-name {
|
|
94
94
|
font-weight: var(--dt-font-weight-bold);
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
.
|
|
97
|
+
.d-recipe-feed-item-row__header-time {
|
|
98
98
|
flex-shrink: 0;
|
|
99
99
|
color: var(--dt-color-foreground-tertiary);
|
|
100
100
|
font-size: var(--dt-font-size-100);
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
.
|
|
103
|
+
.d-recipe-feed-item-row__reactions {
|
|
104
104
|
display: flex;
|
|
105
105
|
flex-wrap: wrap;
|
|
106
106
|
padding-top: var(--dt-space-200);
|
|
@@ -108,12 +108,12 @@
|
|
|
108
108
|
padding-left: var(--dt-space-300);
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
.
|
|
111
|
+
.d-recipe-feed-item-row__threading {
|
|
112
112
|
padding-top: var(--dt-space-200);
|
|
113
113
|
padding-bottom: var(--dt-space-200);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
.
|
|
116
|
+
.d-recipe-feed-item-row__left-time {
|
|
117
117
|
color: var(--dt-color-foreground-tertiary);
|
|
118
118
|
font-weight: var(--dt-font-weight-normal);
|
|
119
119
|
font-size: var(--dt-font-size-100);
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
vertical-align: middle;
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
.
|
|
124
|
+
.d-recipe-feed-item-row__menu {
|
|
125
125
|
position: absolute;
|
|
126
126
|
top: var(--dt-space-550-negative);
|
|
127
127
|
right: var(--dt-space-450);
|
|
@@ -1,25 +1,28 @@
|
|
|
1
|
-
.
|
|
1
|
+
.d-recipe-grouped-chip {
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
white-space: nowrap;
|
|
4
4
|
background-color: unset;
|
|
5
5
|
background-image: unset;
|
|
6
|
+
|
|
7
|
+
.d-chip__text {
|
|
8
|
+
font-size: var(--dt-font-size-100);
|
|
9
|
+
}
|
|
6
10
|
}
|
|
7
11
|
|
|
8
|
-
.
|
|
12
|
+
.d-recipe-grouped-chip__content {
|
|
9
13
|
font-variant-numeric: tabular-nums;
|
|
10
14
|
}
|
|
11
15
|
|
|
12
|
-
.
|
|
16
|
+
.d-recipe-grouped-chip__content-left {
|
|
13
17
|
max-width: var(--dt-size-730);
|
|
14
18
|
background-color: var(--dt-color-surface-moderate-opaque);
|
|
15
19
|
border-top-left-radius: var(--dt-size-radius-pill);
|
|
16
20
|
border-bottom-left-radius: var(--dt-size-radius-pill);
|
|
17
21
|
}
|
|
18
22
|
|
|
19
|
-
.
|
|
23
|
+
.d-recipe-grouped-chip__content-right {
|
|
20
24
|
max-width: var(--dt-size-730);
|
|
21
25
|
background-color: var(--dt-color-purple-200);
|
|
22
26
|
border-top-right-radius: var(--dt-size-radius-pill);
|
|
23
27
|
border-bottom-right-radius: var(--dt-size-radius-pill);
|
|
24
28
|
}
|
|
25
|
-
|
|
@@ -1,30 +1,88 @@
|
|
|
1
|
-
|
|
1
|
+
// ============================================================================
|
|
2
|
+
// $ BASE STYLE
|
|
3
|
+
// ----------------------------------------------------------------------------
|
|
4
|
+
.d-recipe-ivr-node {
|
|
2
5
|
display: flex;
|
|
3
6
|
flex-direction: column;
|
|
4
7
|
align-items: center;
|
|
5
8
|
width: 280px; /* stylelint-disable-line meowtec/no-px */
|
|
6
9
|
cursor: pointer;
|
|
10
|
+
|
|
11
|
+
.d-card {
|
|
12
|
+
width: var(--dt-size-100-percent);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.d-card__header {
|
|
16
|
+
margin-top: var(--dt-size-100-negative);
|
|
17
|
+
padding: var(--dt-space-0);
|
|
18
|
+
border-top-left-radius: var(--dt-size-border-300);
|
|
19
|
+
border-top-right-radius: var(--dt-size-border-300);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.d-card__content {
|
|
23
|
+
padding: var(--dt-space-400) var(--dt-space-450) var(--dt-space-450);
|
|
24
|
+
border-top: var(--dt-size-border-100) solid var(--dt-color-black-300);
|
|
25
|
+
}
|
|
7
26
|
}
|
|
8
27
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
28
|
+
// ============================================================================
|
|
29
|
+
// $ NODE TYPES
|
|
30
|
+
// ----------------------------------------------------------------------------
|
|
31
|
+
.d-recipe-ivr-node-prompt {
|
|
32
|
+
.d-card__header {
|
|
33
|
+
border-top: var(--dt-size-border-300) solid var(--dt-color-blue-200);
|
|
34
|
+
}
|
|
12
35
|
}
|
|
13
36
|
|
|
14
|
-
.
|
|
15
|
-
|
|
16
|
-
|
|
37
|
+
.d-recipe-ivr-node-prompt--selected {
|
|
38
|
+
.d-card {
|
|
39
|
+
border: var(--dt-size-border-300) solid var(--dt-color-blue-300);
|
|
40
|
+
border-radius: var(--dt-size-radius-400);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.d-card__header {
|
|
44
|
+
border-top: var(--dt-size-border-300) solid var(--dt-color-blue-300);
|
|
45
|
+
}
|
|
17
46
|
}
|
|
18
47
|
|
|
19
|
-
.
|
|
20
|
-
|
|
48
|
+
.d-recipe-ivr-node-logic {
|
|
49
|
+
.d-card__header {
|
|
50
|
+
border-top: var(--dt-size-border-300) solid var(--dt-color-purple-200);
|
|
51
|
+
}
|
|
21
52
|
}
|
|
22
53
|
|
|
23
|
-
.
|
|
24
|
-
|
|
54
|
+
.d-recipe-ivr-node-logic--selected {
|
|
55
|
+
.d-card {
|
|
56
|
+
border: var(--dt-size-border-300) solid var(--dt-color-purple-400);
|
|
57
|
+
border-radius: var(--dt-size-radius-400);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.d-card__header {
|
|
61
|
+
border-top: var(--dt-size-border-300) solid var(--dt-color-purple-400);
|
|
62
|
+
}
|
|
25
63
|
}
|
|
26
64
|
|
|
27
|
-
.
|
|
65
|
+
.d-recipe-ivr-node-terminal {
|
|
66
|
+
.d-card__header {
|
|
67
|
+
border-top: var(--dt-size-border-300) solid var(--dt-color-red-100);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.d-recipe-ivr-node-terminal--selected {
|
|
72
|
+
.d-card {
|
|
73
|
+
border: var(--dt-size-border-300) solid var(--dt-color-red-200);
|
|
74
|
+
border-radius: var(--dt-size-radius-400);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.d-card__header {
|
|
78
|
+
border-top: var(--dt-size-border-300) solid var(--dt-color-red-200);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// ============================================================================
|
|
83
|
+
// $ NODE CONNECTOR
|
|
84
|
+
// ----------------------------------------------------------------------------
|
|
85
|
+
.d-recipe-ivr-node__connector {
|
|
28
86
|
z-index: var(--zi-base);
|
|
29
87
|
display: flex;
|
|
30
88
|
align-items: center;
|
|
@@ -37,20 +95,40 @@
|
|
|
37
95
|
border-radius: var(--dt-size-radius-circle);
|
|
38
96
|
}
|
|
39
97
|
|
|
40
|
-
.
|
|
98
|
+
.d-recipe-ivr-node__connector--selected {
|
|
41
99
|
margin-bottom: var(--dt-space-400-negative);
|
|
42
100
|
}
|
|
43
101
|
|
|
44
|
-
.
|
|
102
|
+
.d-recipe-ivr-node__connector-dtmf {
|
|
45
103
|
width: var(--dt-size-550);
|
|
46
104
|
height: var(--dt-size-550);
|
|
47
105
|
margin-bottom: var(--dt-space-450-negative);
|
|
48
106
|
color: var(--dt-color-neutral-white);
|
|
49
107
|
font-size: var(--dt-font-size-200);
|
|
50
108
|
|
|
51
|
-
.
|
|
109
|
+
.d-recipe-ivr-node__connector--selected {
|
|
52
110
|
margin-bottom: var(--dt-space-500-negative);
|
|
53
111
|
}
|
|
54
112
|
}
|
|
55
113
|
|
|
114
|
+
// ============================================================================
|
|
115
|
+
// $ MISC
|
|
116
|
+
// ----------------------------------------------------------------------------
|
|
117
|
+
|
|
118
|
+
.d-recipe-ivr-node__header-left {
|
|
119
|
+
display: flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.d-recipe-ivr-node__label {
|
|
124
|
+
font-weight: var(--dt-font-weight-bold);
|
|
125
|
+
font-size: var(--dt-font-size-200);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.d-recipe-ivr-node__dropdown-list {
|
|
129
|
+
width: var(--dt-size-825);
|
|
130
|
+
}
|
|
56
131
|
|
|
132
|
+
.d-recipe-ivr-node__goto-icon {
|
|
133
|
+
transform: rotate(90deg);
|
|
134
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.d-recipe-leftbar-row {
|
|
2
2
|
// ============================================================================
|
|
3
3
|
// $ CSS CUSTOM PROPERTIES
|
|
4
4
|
// ----------------------------------------------------------------------------
|
|
@@ -40,19 +40,19 @@
|
|
|
40
40
|
// $ VARIANTS
|
|
41
41
|
// ----------------------------------------------------------------------------
|
|
42
42
|
//
|
|
43
|
-
// <div class="
|
|
43
|
+
// <div class="d-recipe-leftbar-row d-recipe-leftbar-row--{$VARIANT}">
|
|
44
44
|
// ...
|
|
45
45
|
// </div>
|
|
46
46
|
//
|
|
47
|
-
&:not(.
|
|
48
|
-
&:not(.
|
|
47
|
+
&:not(.d-recipe-leftbar-row--no-action):hover,
|
|
48
|
+
&:not(.d-recipe-leftbar-row--no-action):focus-within {
|
|
49
49
|
--leftbar-row-unread-badge-display: none;
|
|
50
50
|
|
|
51
|
-
.
|
|
51
|
+
.d-recipe-leftbar-row__action {
|
|
52
52
|
display: inline-flex;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
.
|
|
55
|
+
.d-recipe-leftbar-row__action-button {
|
|
56
56
|
opacity: 1;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
@@ -74,12 +74,12 @@
|
|
|
74
74
|
// $ LABEL'S ELEMENTS
|
|
75
75
|
// ----------------------------------------------------------------------------
|
|
76
76
|
//
|
|
77
|
-
// <div class="
|
|
77
|
+
// <div class="d-recipe-leftbar-row__description">
|
|
78
78
|
// ...
|
|
79
79
|
// </div>
|
|
80
|
-
// <div class="
|
|
81
|
-
// <span class="
|
|
82
|
-
// <span class="
|
|
80
|
+
// <div class="d-recipe-leftbar-row__status">
|
|
81
|
+
// <span class="d-recipe-leftbar-row__meta-context ...">...</span>
|
|
82
|
+
// <span class="d-recipe-leftbar-row__meta-custom">...</span>
|
|
83
83
|
// </div>
|
|
84
84
|
//
|
|
85
85
|
&__description {
|
|
@@ -108,10 +108,10 @@
|
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
&--has-unread {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
111
|
+
--leftbar-row-description-font-weight: var(--dt-font-weight-bold);
|
|
112
|
+
--leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
|
|
113
|
+
--leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
|
|
114
|
+
}
|
|
115
115
|
|
|
116
116
|
&--muted {
|
|
117
117
|
--leftbar-row-opacity: 60%;
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
border-radius: var(--dt-size-radius-pill);
|
|
153
153
|
opacity: 0.3;
|
|
154
154
|
transition: all 500ms ease;
|
|
155
|
-
animation: wave 1.5s ease infinite;
|
|
155
|
+
animation: d-recipe-leftbar-row-wave 1.5s ease infinite;
|
|
156
156
|
|
|
157
157
|
&:nth-child(1) {
|
|
158
158
|
animation-delay: 0ms;
|
|
@@ -172,11 +172,11 @@
|
|
|
172
172
|
// $ ACTIONABLE ELEMENTS
|
|
173
173
|
// ----------------------------------------------------------------------------
|
|
174
174
|
//
|
|
175
|
-
// <el class="
|
|
175
|
+
// <el class="d-recipe-leftbar-row__primary" ...>
|
|
176
176
|
// ...
|
|
177
177
|
// </el>
|
|
178
|
-
// <div class="
|
|
179
|
-
// <button class="
|
|
178
|
+
// <div class="d-recipe-leftbar-row__action">
|
|
179
|
+
// <button class="d-recipe-leftbar-row__action-button d-btn ..." ...>...</button>
|
|
180
180
|
// </div>
|
|
181
181
|
//
|
|
182
182
|
&__primary {
|
|
@@ -216,9 +216,9 @@
|
|
|
216
216
|
// $ PRIMARY'S MAIN ELEMENTS
|
|
217
217
|
// ----------------------------------------------------------------------------
|
|
218
218
|
//
|
|
219
|
-
// <div class="
|
|
220
|
-
// <div class="
|
|
221
|
-
// <div class="
|
|
219
|
+
// <div class="d-recipe-leftbar-row__alpha">...</div>
|
|
220
|
+
// <div class="d-recipe-leftbar-row__label">...</div>
|
|
221
|
+
// <div class="d-recipe-leftbar-row__omega">...</div>
|
|
222
222
|
|
|
223
223
|
&__alpha {
|
|
224
224
|
display: flex;
|
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
}
|
|
259
259
|
|
|
260
260
|
&__unread-count {
|
|
261
|
-
.
|
|
261
|
+
.d-recipe-leftbar-row__action {
|
|
262
262
|
display: none;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
@@ -283,7 +283,7 @@
|
|
|
283
283
|
&__active-voice {
|
|
284
284
|
display: inline-flex;
|
|
285
285
|
color: var(--dt-color-purple-400);
|
|
286
|
-
.opacity-pulsate();
|
|
286
|
+
.d-recipe-leftbar-row-opacity-pulsate();
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
&__dnd {
|
|
@@ -300,18 +300,18 @@
|
|
|
300
300
|
border: var(--dt-size-100) solid var(--dt-color-border-subtle);
|
|
301
301
|
border-radius: var(--dt-size-radius-500);
|
|
302
302
|
|
|
303
|
-
.
|
|
303
|
+
.d-recipe-leftbar-row__primary {
|
|
304
304
|
margin: calc(var(--dt-size-100) * -1);
|
|
305
305
|
}
|
|
306
306
|
}
|
|
307
307
|
|
|
308
308
|
&--contact-centers {
|
|
309
|
-
.
|
|
309
|
+
.d-recipe-leftbar-row__alpha {
|
|
310
310
|
padding-right: var(--dt-space-450);
|
|
311
311
|
padding-left: var(--dt-space-450);
|
|
312
312
|
}
|
|
313
313
|
|
|
314
|
-
.
|
|
314
|
+
.d-recipe-leftbar-row__action-container {
|
|
315
315
|
display: inline-flex;
|
|
316
316
|
align-items: center;
|
|
317
317
|
justify-content: flex-end;
|
|
@@ -327,10 +327,10 @@
|
|
|
327
327
|
}
|
|
328
328
|
}
|
|
329
329
|
|
|
330
|
-
.opacity-pulsate {
|
|
331
|
-
-webkit-animation-name: opacity-pulsate;
|
|
332
|
-
-moz-animation-name: opacity-pulsate;
|
|
333
|
-
animation-name: opacity-pulsate;
|
|
330
|
+
.d-recipe-leftbar-row-opacity-pulsate {
|
|
331
|
+
-webkit-animation-name: d-recipe-leftbar-row-opacity-pulsate;
|
|
332
|
+
-moz-animation-name: d-recipe-leftbar-row-opacity-pulsate;
|
|
333
|
+
animation-name: d-recipe-leftbar-row-opacity-pulsate;
|
|
334
334
|
-webkit-animation-duration: 1s;
|
|
335
335
|
-moz-animation-duration: 1s;
|
|
336
336
|
animation-duration: 1s;
|
|
@@ -342,7 +342,7 @@
|
|
|
342
342
|
animation-fill-mode: both;
|
|
343
343
|
}
|
|
344
344
|
|
|
345
|
-
@keyframes opacity-pulsate {
|
|
345
|
+
@keyframes d-recipe-leftbar-row-opacity-pulsate {
|
|
346
346
|
0%,
|
|
347
347
|
100% {
|
|
348
348
|
opacity: 0.2;
|
|
@@ -353,37 +353,89 @@
|
|
|
353
353
|
}
|
|
354
354
|
}
|
|
355
355
|
|
|
356
|
-
@keyframes
|
|
356
|
+
@keyframes d-recipe-leftbar-row-wave {
|
|
357
357
|
0%,
|
|
358
|
+
50%,
|
|
358
359
|
100% {
|
|
359
|
-
|
|
360
|
+
transform: translate(0, 0);
|
|
360
361
|
}
|
|
361
362
|
|
|
362
|
-
|
|
363
|
-
|
|
363
|
+
10% {
|
|
364
|
+
transform: translate(0, -0.5rem);
|
|
365
|
+
opacity: 0.9;
|
|
364
366
|
}
|
|
365
367
|
}
|
|
366
368
|
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
369
|
+
// ============================================================================
|
|
370
|
+
// $ Contact Row
|
|
371
|
+
// ----------------------------------------------------------------------------
|
|
372
|
+
.d-recipe-contact-row--active {
|
|
373
|
+
color: var(--dt-color-foreground-success);
|
|
374
|
+
}
|
|
372
375
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
}
|
|
376
|
+
.d-recipe-contact-row--busy {
|
|
377
|
+
color: var(--dt-color-foreground-critical);
|
|
376
378
|
}
|
|
377
379
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
380
|
+
.d-recipe-contact-row--away {
|
|
381
|
+
color: var(--dt-color-foreground-warning);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
// ============================================================================
|
|
385
|
+
// $ CSS General Row
|
|
386
|
+
// ----------------------------------------------------------------------------
|
|
387
|
+
.d-recipe-leftbar-general-row {
|
|
388
|
+
&__icon {
|
|
389
|
+
display: flex;
|
|
390
|
+
align-items: center;
|
|
391
|
+
justify-content: center;
|
|
383
392
|
}
|
|
384
393
|
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
394
|
+
&__contact-center {
|
|
395
|
+
&--magenta-100 {
|
|
396
|
+
background-color: var(--dt-color-magenta-100);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
&--magenta-200 {
|
|
400
|
+
background-color: var(--dt-color-magenta-200);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
&--magenta-300 {
|
|
404
|
+
background-color: var(--dt-color-magenta-300);
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
&--magenta-400 {
|
|
408
|
+
background-color: var(--dt-color-magenta-400);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
&--green-200 {
|
|
412
|
+
background-color: var(--dt-color-green-200);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
&--green-500 {
|
|
416
|
+
background-color: var(--dt-color-green-500);
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
&--gold-300 {
|
|
420
|
+
background-color: var(--dt-color-gold-300);
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
&--purple-100 {
|
|
424
|
+
background-color: var(--dt-color-purple-100);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
&--purple-300 {
|
|
428
|
+
background-color: var(--dt-color-purple-300);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
&--purple-600 {
|
|
432
|
+
background-color: var(--dt-color-purple-600);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
&--black-300 {
|
|
436
|
+
background-color: var(--dt-color-black-300);
|
|
437
|
+
}
|
|
388
438
|
}
|
|
389
439
|
}
|
|
440
|
+
|
|
441
|
+
|