@dialpad/dialtone 6.28.0 → 6.30.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/components/chip.less +181 -0
- package/lib/build/less/dialtone.less +1 -0
- package/lib/build/less/utilities/internals.less +4 -6
- package/lib/build/svg/system/back-to-listen.svg +2 -2
- package/lib/build/svg/system/barge.svg +1 -1
- package/lib/build/svg/system/done-all.svg +1 -1
- package/lib/build/svg/system/fire.svg +3 -1
- package/lib/build/svg/system/park.svg +2 -2
- package/lib/build/svg/system/skip-next.svg +3 -0
- package/lib/build/svg/system/skip-previous.svg +3 -0
- package/lib/build/svg/system/snooze.svg +4 -1
- package/lib/build/svg/system/takeover.svg +1 -1
- package/lib/build/svg/system/thumb-down.svg +1 -1
- package/lib/build/svg/system/thumb-up.svg +1 -1
- package/lib/build/svg/system/whisper.svg +2 -2
- package/lib/build/svg/system/windows.svg +4 -4
- package/lib/build/svg/system/zero.svg +3 -0
- package/lib/dist/css/dialtone.css +136 -12
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/svg/system/back-to-listen.svg +1 -1
- package/lib/dist/svg/system/barge.svg +1 -1
- package/lib/dist/svg/system/done-all.svg +1 -1
- package/lib/dist/svg/system/fire.svg +1 -1
- package/lib/dist/svg/system/park.svg +1 -1
- package/lib/dist/svg/system/skip-next.svg +1 -0
- package/lib/dist/svg/system/skip-previous.svg +1 -0
- package/lib/dist/svg/system/snooze.svg +1 -1
- package/lib/dist/svg/system/takeover.svg +1 -1
- package/lib/dist/svg/system/thumb-down.svg +1 -1
- package/lib/dist/svg/system/thumb-up.svg +1 -1
- package/lib/dist/svg/system/whisper.svg +1 -1
- package/lib/dist/svg/system/windows.svg +1 -1
- package/lib/dist/svg/system/zero.svg +1 -0
- package/lib/dist/vue/icons/IconBackToListen.vue +1 -1
- package/lib/dist/vue/icons/IconBarge.vue +1 -1
- package/lib/dist/vue/icons/IconDoneAll.vue +1 -1
- package/lib/dist/vue/icons/IconFire.vue +1 -1
- package/lib/dist/vue/icons/IconPark.vue +1 -1
- package/lib/dist/vue/icons/IconSkipNext.vue +3 -0
- package/lib/dist/vue/icons/IconSkipPrevious.vue +3 -0
- package/lib/dist/vue/icons/IconSnooze.vue +1 -1
- package/lib/dist/vue/icons/IconTakeover.vue +1 -1
- package/lib/dist/vue/icons/IconThumbDown.vue +1 -1
- package/lib/dist/vue/icons/IconThumbUp.vue +1 -1
- package/lib/dist/vue/icons/IconWhisper.vue +1 -1
- package/lib/dist/vue/icons/IconWindows.vue +1 -1
- package/lib/dist/vue/icons/IconZero.vue +3 -0
- package/package.json +2 -1
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
//
|
|
2
|
+
// DIALTONE
|
|
3
|
+
// COMPONENTS: CHIP
|
|
4
|
+
//
|
|
5
|
+
// These are chip classes for Dialpad's design system Dialtone.
|
|
6
|
+
// For further documentation of these and other classes,
|
|
7
|
+
// visit https://dialpad.design/components/chip
|
|
8
|
+
//
|
|
9
|
+
// TABLE OF CONTENTS
|
|
10
|
+
// • BASE STYLE
|
|
11
|
+
// • INTERACTIVITY
|
|
12
|
+
// • SIZES
|
|
13
|
+
//
|
|
14
|
+
// ============================================================================
|
|
15
|
+
// $ BASE STYLE
|
|
16
|
+
// ----------------------------------------------------------------------------
|
|
17
|
+
.d-chip {
|
|
18
|
+
// Component CSS Vars
|
|
19
|
+
--chip--fc: var(--fc-dark);
|
|
20
|
+
--chip--bgc: var(--black-050);
|
|
21
|
+
--chip--br: var(--su102);
|
|
22
|
+
|
|
23
|
+
position: relative;
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
padding: var(--su4) var(--su8);
|
|
29
|
+
color: var(--chip--fc);
|
|
30
|
+
font-size: var(--fs16);
|
|
31
|
+
font-family: inherit;
|
|
32
|
+
line-height: var(--lh4);
|
|
33
|
+
background-color: var(--chip--bgc);
|
|
34
|
+
border-radius: var(--chip--br);
|
|
35
|
+
transition-timing-function: var(--ttf-in-out);
|
|
36
|
+
transition-duration: 75ms;
|
|
37
|
+
transition-property: background-color;
|
|
38
|
+
|
|
39
|
+
.d-chip-btn-holder {
|
|
40
|
+
flex-shrink: 0;
|
|
41
|
+
width: calc(var(--su16) + var(--su2));
|
|
42
|
+
height: calc(var(--su16) + var(--su2));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.d-chip-btn-container {
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: var(--su0);
|
|
48
|
+
right: var(--su0);
|
|
49
|
+
padding: var(--su2) var(--su2) var(--su2) var(--su0);
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
|
|
52
|
+
.d-btn {
|
|
53
|
+
padding: calc(var(--su2) + var(--su1));
|
|
54
|
+
border-width: var(--su0);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&:hover {
|
|
58
|
+
.d-btn {
|
|
59
|
+
--button--bgc: hsla(var(--black-800-hsl) ~' / ' 15%);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&:active {
|
|
64
|
+
.d-btn {
|
|
65
|
+
--button--bgc: hsla(var(--black-800-hsl) ~' / ' 25%);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.d-avatar {
|
|
71
|
+
--avatar--size: var(--su24);
|
|
72
|
+
|
|
73
|
+
margin: var(--sun2) var(--su4) var(--sun2) var(--sun6);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.d-svg,
|
|
77
|
+
.d-btn .d-btn__icon .d-svg {
|
|
78
|
+
width: @icon18;
|
|
79
|
+
height: @icon18;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.d-chip__icon {
|
|
84
|
+
padding-right: var(--su4);
|
|
85
|
+
line-height: 0;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.d-chip--active {
|
|
89
|
+
background-color: var(--black-100);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// ============================================================================
|
|
93
|
+
// $ INTERACTIVITY
|
|
94
|
+
// ----------------------------------------------------------------------------
|
|
95
|
+
// $$ INTERACTIVE (DEFAULT)
|
|
96
|
+
// ----------------------------------------------------------------------------
|
|
97
|
+
.d-chip--interactive {
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
|
|
100
|
+
&:hover {
|
|
101
|
+
--chip--bgc: var(--black-075);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&:focus-visible {
|
|
105
|
+
outline: none;
|
|
106
|
+
box-shadow: var(--bs-focus-ring-muted);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// ============================================================================
|
|
111
|
+
// $ SIZES
|
|
112
|
+
// ----------------------------------------------------------------------------
|
|
113
|
+
// $$ EXTRA SMALL
|
|
114
|
+
// ----------------------------------------------------------------------------
|
|
115
|
+
.d-chip--xs {
|
|
116
|
+
padding: var(--su2) var(--su6);
|
|
117
|
+
font-size: var(--fs12);
|
|
118
|
+
|
|
119
|
+
.d-btn .d-btn__icon .d-svg,
|
|
120
|
+
.d-svg {
|
|
121
|
+
width: @icon14;
|
|
122
|
+
height: @icon14;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.d-chip-btn-holder {
|
|
126
|
+
width: var(--su12);
|
|
127
|
+
height: var(--su12);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.d-chip-btn-container {
|
|
131
|
+
top: calc(var(--sun1) + var(--sun2));
|
|
132
|
+
right: var(--sun2);
|
|
133
|
+
padding: var(--su4);
|
|
134
|
+
|
|
135
|
+
.d-btn {
|
|
136
|
+
padding: var(--su1);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.d-avatar {
|
|
141
|
+
--avatar--size: var(--su16);
|
|
142
|
+
|
|
143
|
+
margin-right: var(--su4);
|
|
144
|
+
margin-left: var(--sun4);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// $$ SMALL
|
|
149
|
+
// ----------------------------------------------------------------------------
|
|
150
|
+
.d-chip--sm {
|
|
151
|
+
padding: var(--su2) var(--su8);
|
|
152
|
+
font-size: var(--fs16);
|
|
153
|
+
|
|
154
|
+
.d-btn .d-btn__icon .d-svg,
|
|
155
|
+
.d-svg {
|
|
156
|
+
width: @icon16;
|
|
157
|
+
height: @icon16;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.d-chip-btn-holder {
|
|
161
|
+
width: calc(var(--su12) + var(--su2));
|
|
162
|
+
height: calc(var(--su12) + var(--su2));
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.d-chip-btn-container {
|
|
166
|
+
top: var(--sun1);
|
|
167
|
+
right: var(--su0);
|
|
168
|
+
padding: var(--su2);
|
|
169
|
+
|
|
170
|
+
.d-btn {
|
|
171
|
+
padding: var(--su2);
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.d-avatar {
|
|
176
|
+
--avatar--size: calc(var(--su24) - var(--su4));
|
|
177
|
+
|
|
178
|
+
margin-right: var(--su4);
|
|
179
|
+
margin-left: var(--sun6);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
@@ -12,13 +12,8 @@
|
|
|
12
12
|
// Various configuration settings to generate the classes desired.
|
|
13
13
|
// ----------------------------------------------------------------------------
|
|
14
14
|
#d-internal-config {
|
|
15
|
-
|
|
16
15
|
// Do we want to generate font-face CSS?
|
|
17
16
|
@generate-font-face: true;
|
|
18
|
-
|
|
19
|
-
// What's the font-face file path?
|
|
20
|
-
@define-font-path: '../fonts/';
|
|
21
|
-
|
|
22
17
|
}
|
|
23
18
|
|
|
24
19
|
// ============================================================================
|
|
@@ -383,12 +378,15 @@
|
|
|
383
378
|
#font-face(@type, @name, @style: normal) {
|
|
384
379
|
#d-internal-config();
|
|
385
380
|
|
|
381
|
+
// Path of the fonts that Dialtone provides
|
|
382
|
+
@define-font-path: '../../fonts/';
|
|
383
|
+
|
|
386
384
|
if((@generate-font-face = true), each(@type, {
|
|
387
385
|
@font-face {
|
|
388
386
|
font-style: @style;
|
|
389
387
|
font-weight: @key;
|
|
390
388
|
font-family: @name;
|
|
391
|
-
src: url("
|
|
389
|
+
src: url("./@{define-font-path}@{value}.woff2") format("woff2");
|
|
392
390
|
};
|
|
393
391
|
}));
|
|
394
392
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M13 20C13.29 20 13.56 19.94 13.76 19.85C14.47 19.48 14.97 18.97 15.47 17.47C15.98 15.91 16.94 15.18 17.86 14.47C18.65 13.86 19.47 13.23 20.18 11.94C20.71 10.98 21 9.93 21 9C21 6.2 18.8 4 16 4C13.2 4 11 6.2 11 9H9C9 5.07 12.07 2 16 2C19.93 2 23 5.07 23 9C23 10.26 22.62 11.65 21.93 12.9C21.02 14.55 19.95 15.38 19.08 16.05C18.27 16.67 17.69 17.12 17.37 18.1C16.77 19.92 16 20.94 14.64 21.65C14.13 21.88 13.57 22 13 22C10.79 22 9 20.21 9 18H11C11 19.1 11.9 20 13 20Z"
|
|
3
|
-
<path d="M6.4 9.4L5 8L0 13L5 18L6.4 16.6L3.8 14H12V12H3.8L6.4 9.4Z"
|
|
2
|
+
<path d="M13 20C13.29 20 13.56 19.94 13.76 19.85C14.47 19.48 14.97 18.97 15.47 17.47C15.98 15.91 16.94 15.18 17.86 14.47C18.65 13.86 19.47 13.23 20.18 11.94C20.71 10.98 21 9.93 21 9C21 6.2 18.8 4 16 4C13.2 4 11 6.2 11 9H9C9 5.07 12.07 2 16 2C19.93 2 23 5.07 23 9C23 10.26 22.62 11.65 21.93 12.9C21.02 14.55 19.95 15.38 19.08 16.05C18.27 16.67 17.69 17.12 17.37 18.1C16.77 19.92 16 20.94 14.64 21.65C14.13 21.88 13.57 22 13 22C10.79 22 9 20.21 9 18H11C11 19.1 11.9 20 13 20Z" />
|
|
3
|
+
<path d="M6.4 9.4L5 8L0 13L5 18L6.4 16.6L3.8 14H12V12H3.8L6.4 9.4Z" />
|
|
4
4
|
</svg>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect x="3" y="3" width="18" height="18" rx="2"
|
|
2
|
+
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
3
3
|
<path d="M9.01818 7.68L10.5455 6L16 12L10.5455 18L9.01818 16.32L11.8545 13.2H3V10.8H11.8545L9.01818 7.68Z" fill="#E5E5E5"/>
|
|
4
4
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M18 7L16.59 5.59L10.25 11.93L11.66 13.34L18 7ZM22.24 5.59L11.66 16.17L7.48 12L6.07 13.41L11.66 19L23.66 7L22.24 5.59ZM0.410004 13.41L6 19L7.41 17.59L1.83 12L0.410004 13.41Z"
|
|
2
|
+
<path d="M18 7L16.59 5.59L10.25 11.93L11.66 13.34L18 7ZM22.24 5.59L11.66 16.17L7.48 12L6.07 13.41L11.66 19L23.66 7L22.24 5.59ZM0.410004 13.41L6 19L7.41 17.59L1.83 12L0.410004 13.41Z" />
|
|
3
3
|
</svg>
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M13.5 1C13.5 1 14.24 3.65 14.24 5.8C14.24 7.86 12.89 9.53 10.83 9.53C8.76 9.53 7.2 7.86 7.2 5.8L7.23 5.44C5.21 7.84 4 10.95 4 14.33C4 18.75 7.58 22.33 12 22.33C16.42 22.33 20 18.75 20 14.33C20 8.94 17.41 4.13 13.5 1ZM11.71 19.33C9.93 19.33 8.49 17.93 8.49 16.19C8.49 14.57 9.54 13.43 11.3 13.07C13.07 12.71 14.9 11.86 15.92 10.49C16.31 11.78 16.51 13.14 16.51 14.53C16.51 17.18 14.36 19.33 11.71 19.33Z" />
|
|
3
|
+
</svg>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M10.0272 8.07422V12.0762H11.7432C13.1907 12.0762 13.8969 11.2559 13.8969 10.0664C13.8969 8.87109 13.1907 8.07422 11.7315 8.07422H10.0272Z"
|
|
3
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM10.0272 18H7.5V6H12.216C14.93 6 16.5 7.68164 16.5 10.0664C16.5 12.4629 14.9008 14.1094 12.1518 14.1094H10.0272V18Z"
|
|
2
|
+
<path d="M10.0272 8.07422V12.0762H11.7432C13.1907 12.0762 13.8969 11.2559 13.8969 10.0664C13.8969 8.87109 13.1907 8.07422 11.7315 8.07422H10.0272Z" />
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM10.0272 18H7.5V6H12.216C14.93 6 16.5 7.68164 16.5 10.0664C16.5 12.4629 14.9008 14.1094 12.1518 14.1094H10.0272V18Z" />
|
|
4
4
|
</svg>
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M21.5 17H11V14.6402L17.8549 7.51046H11V5H21.5V7.46025L14.7539 14.4895H21.5V17Z" />
|
|
3
|
+
<path d="M9.5 20H2V18.2301L6.89637 12.8828H2V11H9.5V12.8452L4.68135 18.1172H9.5V20Z" />
|
|
4
|
+
</svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
2
|
<g clip-path="url(#clip0_2848_38)">
|
|
3
3
|
<path d="M6.6 15.6L8 17L13 12L8 7L6.6 8.4L9.2 11L0.999999 11L0.999999 13L9.2 13L6.6 15.6Z" fill="black"/>
|
|
4
|
-
<path d="M17.4011 15.7461C16.5769 13.2317 16.5772 10.5034 17.3852 7.97974L19.9779 7.97444C20.2961 7.97378 20.5845 7.79052 20.7195 7.5133C21.1596 6.6344 21.753 5.80234 22.4822 5.07017C22.8057 4.74541 22.8046 4.21508 22.4798 3.89166L20.4191 1.83937C20.0944 1.51594 19.564 1.51703 19.2406 1.84178C13.7188 7.38621 13.7372 16.3547 19.2816 21.8764C19.6064 22.1999 20.1367 22.1988 20.4601 21.874L22.5183 19.8074C22.8417 19.4827 22.8406 18.9523 22.5159 18.6289C21.7778 17.8938 21.1869 17.0701 20.7431 16.193C20.6011 15.9222 20.3238 15.7401 19.9938 15.7408L17.4011 15.7461Z"
|
|
4
|
+
<path d="M17.4011 15.7461C16.5769 13.2317 16.5772 10.5034 17.3852 7.97974L19.9779 7.97444C20.2961 7.97378 20.5845 7.79052 20.7195 7.5133C21.1596 6.6344 21.753 5.80234 22.4822 5.07017C22.8057 4.74541 22.8046 4.21508 22.4798 3.89166L20.4191 1.83937C20.0944 1.51594 19.564 1.51703 19.2406 1.84178C13.7188 7.38621 13.7372 16.3547 19.2816 21.8764C19.6064 22.1999 20.1367 22.1988 20.4601 21.874L22.5183 19.8074C22.8417 19.4827 22.8406 18.9523 22.5159 18.6289C21.7778 17.8938 21.1869 17.0701 20.7431 16.193C20.6011 15.9222 20.3238 15.7401 19.9938 15.7408L17.4011 15.7461Z" />
|
|
5
5
|
</g>
|
|
6
6
|
<defs>
|
|
7
7
|
<clipPath id="clip0_2848_38">
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M15 3H6C5.17 3 4.46 3.5 4.16 4.22L1.14 11.27C1.05 11.5 1 11.74 1 12V14C1 15.1 1.9 16 3 16H9.31L8.36 20.57L8.33 20.89C8.33 21.3 8.5 21.68 8.77 21.95L9.83 23L16.42 16.41C16.78 16.05 17 15.55 17 15V5C17 3.9 16.1 3 15 3ZM19 3V15H23V3H19Z"
|
|
2
|
+
<path d="M15 3H6C5.17 3 4.46 3.5 4.16 4.22L1.14 11.27C1.05 11.5 1 11.74 1 12V14C1 15.1 1.9 16 3 16H9.31L8.36 20.57L8.33 20.89C8.33 21.3 8.5 21.68 8.77 21.95L9.83 23L16.42 16.41C16.78 16.05 17 15.55 17 15V5C17 3.9 16.1 3 15 3ZM19 3V15H23V3H19Z" />
|
|
3
3
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M1 21H5V9H1V21ZM23 10C23 8.9 22.1 8 21 8H14.69L15.64 3.43L15.67 3.11C15.67 2.7 15.5 2.32 15.23 2.05L14.17 1L7.59 7.59C7.22 7.95 7 8.45 7 9V19C7 20.1 7.9 21 9 21H18C18.83 21 19.54 20.5 19.84 19.78L22.86 12.73C22.95 12.5 23 12.26 23 12V10Z"
|
|
2
|
+
<path d="M1 21H5V9H1V21ZM23 10C23 8.9 22.1 8 21 8H14.69L15.64 3.43L15.67 3.11C15.67 2.7 15.5 2.32 15.23 2.05L14.17 1L7.59 7.59C7.22 7.95 7 8.45 7 9V19C7 20.1 7.9 21 9 21H18C18.83 21 19.54 20.5 19.84 19.78L22.86 12.73C22.95 12.5 23 12.26 23 12V10Z" />
|
|
3
3
|
</svg>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M9 13C11.2091 13 13 11.2091 13 9C13 6.79086 11.2091 5 9 5C6.79086 5 5 6.79086 5 9C5 11.2091 6.79086 13 9 13Z"
|
|
3
|
-
<path d="M9 15C6.33 15 1 16.34 1 19V21H17V19C17 16.34 11.67 15 9 15ZM16.76 5.36L15.08 7.05C15.92 8.23 15.92 9.76 15.08 10.94L16.76 12.63C18.78 10.61 18.78 7.56 16.76 5.36ZM20.07 2L18.44 3.63C21.21 6.65 21.21 11.19 18.44 14.37L20.07 16C23.97 12.11 23.98 6.05 20.07 2Z"
|
|
2
|
+
<path d="M9 13C11.2091 13 13 11.2091 13 9C13 6.79086 11.2091 5 9 5C6.79086 5 5 6.79086 5 9C5 11.2091 6.79086 13 9 13Z" />
|
|
3
|
+
<path d="M9 15C6.33 15 1 16.34 1 19V21H17V19C17 16.34 11.67 15 9 15ZM16.76 5.36L15.08 7.05C15.92 8.23 15.92 9.76 15.08 10.94L16.76 12.63C18.78 10.61 18.78 7.56 16.76 5.36ZM20.07 2L18.44 3.63C21.21 6.65 21.21 11.19 18.44 14.37L20.07 16C23.97 12.11 23.98 6.05 20.07 2Z" />
|
|
4
4
|
</svg>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M19.9029 12.819V20.3506L10.9358 18.9996V12.8035L19.9029 12.819Z"
|
|
3
|
-
<path d="M10.9358 5.33399L19.9029 4.08545V11.499H10.9358V5.33399Z"
|
|
4
|
-
<path d="M9.7445 12.7569V18.8909L3.10205 18.0057V12.7258L9.7445 12.7569Z"
|
|
5
|
-
<path d="M3.09717 6.32779L9.74444 5.44263V11.5766H3.10039L3.09717 6.32779Z"
|
|
2
|
+
<path d="M19.9029 12.819V20.3506L10.9358 18.9996V12.8035L19.9029 12.819Z" />
|
|
3
|
+
<path d="M10.9358 5.33399L19.9029 4.08545V11.499H10.9358V5.33399Z" />
|
|
4
|
+
<path d="M9.7445 12.7569V18.8909L3.10205 18.0057V12.7258L9.7445 12.7569Z" />
|
|
5
|
+
<path d="M3.09717 6.32779L9.74444 5.44263V11.5766H3.10039L3.09717 6.32779Z" />
|
|
6
6
|
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12 19C10.3333 19 9 18.3375 8 17.0125C7 15.6875 6.5 14.0167 6.5 12C6.5 9.98333 7 8.3125 8 6.9875C9 5.6625 10.3333 5 12 5C13.6667 5 15 5.6625 16 6.9875C17 8.3125 17.5 9.98333 17.5 12C17.5 14.0167 17 15.6875 16 17.0125C15 18.3375 13.6667 19 12 19ZM12 17.45C13.2667 17.45 14.2167 16.9042 14.85 15.8125C15.4833 14.7208 15.8 13.45 15.8 12C15.8 10.55 15.4833 9.27917 14.85 8.1875C14.2167 7.09583 13.2667 6.55 12 6.55C10.7333 6.55 9.78333 7.09583 9.15 8.1875C8.51667 9.27917 8.2 10.55 8.2 12C8.2 13.45 8.51667 14.7208 9.15 15.8125C9.78333 16.9042 10.7333 17.45 12 17.45Z" fill="black"/>
|
|
3
|
+
</svg>
|
|
@@ -1057,6 +1057,130 @@ body {
|
|
|
1057
1057
|
.d-btn-group.d-btn-group--space-between {
|
|
1058
1058
|
justify-content: space-between;
|
|
1059
1059
|
}
|
|
1060
|
+
.d-chip {
|
|
1061
|
+
--chip--fc: var(--fc-dark);
|
|
1062
|
+
--chip--bgc: var(--black-050);
|
|
1063
|
+
--chip--br: var(--su102);
|
|
1064
|
+
position: relative;
|
|
1065
|
+
display: inline-flex;
|
|
1066
|
+
align-items: center;
|
|
1067
|
+
justify-content: center;
|
|
1068
|
+
box-sizing: border-box;
|
|
1069
|
+
padding: var(--su4) var(--su8);
|
|
1070
|
+
color: var(--chip--fc);
|
|
1071
|
+
font-size: var(--fs16);
|
|
1072
|
+
font-family: inherit;
|
|
1073
|
+
line-height: var(--lh4);
|
|
1074
|
+
background-color: var(--chip--bgc);
|
|
1075
|
+
border-radius: var(--chip--br);
|
|
1076
|
+
transition-timing-function: var(--ttf-in-out);
|
|
1077
|
+
transition-duration: 75ms;
|
|
1078
|
+
transition-property: background-color;
|
|
1079
|
+
}
|
|
1080
|
+
.d-chip .d-chip-btn-holder {
|
|
1081
|
+
flex-shrink: 0;
|
|
1082
|
+
width: calc(var(--su16) + var(--su2));
|
|
1083
|
+
height: calc(var(--su16) + var(--su2));
|
|
1084
|
+
}
|
|
1085
|
+
.d-chip .d-chip-btn-container {
|
|
1086
|
+
position: absolute;
|
|
1087
|
+
top: var(--su0);
|
|
1088
|
+
right: var(--su0);
|
|
1089
|
+
padding: var(--su2) var(--su2) var(--su2) var(--su0);
|
|
1090
|
+
cursor: pointer;
|
|
1091
|
+
}
|
|
1092
|
+
.d-chip .d-chip-btn-container .d-btn {
|
|
1093
|
+
padding: calc(var(--su2) + var(--su1));
|
|
1094
|
+
border-width: var(--su0);
|
|
1095
|
+
}
|
|
1096
|
+
.d-chip .d-chip-btn-container:hover .d-btn {
|
|
1097
|
+
--button--bgc: hsla(var(--black-800-hsl) / 15%);
|
|
1098
|
+
}
|
|
1099
|
+
.d-chip .d-chip-btn-container:active .d-btn {
|
|
1100
|
+
--button--bgc: hsla(var(--black-800-hsl) / 25%);
|
|
1101
|
+
}
|
|
1102
|
+
.d-chip .d-avatar {
|
|
1103
|
+
--avatar--size: var(--su24);
|
|
1104
|
+
margin: var(--sun2) var(--su4) var(--sun2) var(--sun6);
|
|
1105
|
+
}
|
|
1106
|
+
.d-chip .d-svg,
|
|
1107
|
+
.d-chip .d-btn .d-btn__icon .d-svg {
|
|
1108
|
+
width: 1.8rem;
|
|
1109
|
+
height: 1.8rem;
|
|
1110
|
+
}
|
|
1111
|
+
.d-chip__icon {
|
|
1112
|
+
padding-right: var(--su4);
|
|
1113
|
+
line-height: 0;
|
|
1114
|
+
}
|
|
1115
|
+
.d-chip--active {
|
|
1116
|
+
background-color: var(--black-100);
|
|
1117
|
+
}
|
|
1118
|
+
.d-chip--interactive {
|
|
1119
|
+
cursor: pointer;
|
|
1120
|
+
}
|
|
1121
|
+
.d-chip--interactive:hover {
|
|
1122
|
+
--chip--bgc: var(--black-075);
|
|
1123
|
+
}
|
|
1124
|
+
.d-chip--interactive.focus-visible {
|
|
1125
|
+
outline: none;
|
|
1126
|
+
box-shadow: var(--bs-focus-ring-muted);
|
|
1127
|
+
}
|
|
1128
|
+
.d-chip--interactive:focus-visible {
|
|
1129
|
+
outline: none;
|
|
1130
|
+
box-shadow: var(--bs-focus-ring-muted);
|
|
1131
|
+
}
|
|
1132
|
+
.d-chip--xs {
|
|
1133
|
+
padding: var(--su2) var(--su6);
|
|
1134
|
+
font-size: var(--fs12);
|
|
1135
|
+
}
|
|
1136
|
+
.d-chip--xs .d-btn .d-btn__icon .d-svg,
|
|
1137
|
+
.d-chip--xs .d-svg {
|
|
1138
|
+
width: 1.4rem;
|
|
1139
|
+
height: 1.4rem;
|
|
1140
|
+
}
|
|
1141
|
+
.d-chip--xs .d-chip-btn-holder {
|
|
1142
|
+
width: var(--su12);
|
|
1143
|
+
height: var(--su12);
|
|
1144
|
+
}
|
|
1145
|
+
.d-chip--xs .d-chip-btn-container {
|
|
1146
|
+
top: calc(var(--sun1) + var(--sun2));
|
|
1147
|
+
right: var(--sun2);
|
|
1148
|
+
padding: var(--su4);
|
|
1149
|
+
}
|
|
1150
|
+
.d-chip--xs .d-chip-btn-container .d-btn {
|
|
1151
|
+
padding: var(--su1);
|
|
1152
|
+
}
|
|
1153
|
+
.d-chip--xs .d-avatar {
|
|
1154
|
+
--avatar--size: var(--su16);
|
|
1155
|
+
margin-right: var(--su4);
|
|
1156
|
+
margin-left: var(--sun4);
|
|
1157
|
+
}
|
|
1158
|
+
.d-chip--sm {
|
|
1159
|
+
padding: var(--su2) var(--su8);
|
|
1160
|
+
font-size: var(--fs16);
|
|
1161
|
+
}
|
|
1162
|
+
.d-chip--sm .d-btn .d-btn__icon .d-svg,
|
|
1163
|
+
.d-chip--sm .d-svg {
|
|
1164
|
+
width: 1.6rem;
|
|
1165
|
+
height: 1.6rem;
|
|
1166
|
+
}
|
|
1167
|
+
.d-chip--sm .d-chip-btn-holder {
|
|
1168
|
+
width: calc(var(--su12) + var(--su2));
|
|
1169
|
+
height: calc(var(--su12) + var(--su2));
|
|
1170
|
+
}
|
|
1171
|
+
.d-chip--sm .d-chip-btn-container {
|
|
1172
|
+
top: var(--sun1);
|
|
1173
|
+
right: var(--su0);
|
|
1174
|
+
padding: var(--su2);
|
|
1175
|
+
}
|
|
1176
|
+
.d-chip--sm .d-chip-btn-container .d-btn {
|
|
1177
|
+
padding: var(--su2);
|
|
1178
|
+
}
|
|
1179
|
+
.d-chip--sm .d-avatar {
|
|
1180
|
+
--avatar--size: calc(var(--su24) - var(--su4));
|
|
1181
|
+
margin-right: var(--su4);
|
|
1182
|
+
margin-left: var(--sun6);
|
|
1183
|
+
}
|
|
1060
1184
|
fieldset {
|
|
1061
1185
|
min-width: var(--su0);
|
|
1062
1186
|
padding: var(--su0);
|
|
@@ -18544,73 +18668,73 @@ body.theme-dark .d\:d-bgg-to-0 {
|
|
|
18544
18668
|
font-style: normal;
|
|
18545
18669
|
font-weight: 400;
|
|
18546
18670
|
font-family: 'Inter';
|
|
18547
|
-
src: url("
|
|
18671
|
+
src: url("../../fonts/Inter-Regular.woff2") format("woff2");
|
|
18548
18672
|
}
|
|
18549
18673
|
@font-face {
|
|
18550
18674
|
font-style: normal;
|
|
18551
18675
|
font-weight: 700;
|
|
18552
18676
|
font-family: 'Inter';
|
|
18553
|
-
src: url("
|
|
18677
|
+
src: url("../../fonts/Inter-Bold.woff2") format("woff2");
|
|
18554
18678
|
}
|
|
18555
18679
|
@font-face {
|
|
18556
18680
|
font-style: italic;
|
|
18557
18681
|
font-weight: 400;
|
|
18558
18682
|
font-family: 'Inter';
|
|
18559
|
-
src: url("
|
|
18683
|
+
src: url("../../fonts/Inter-Italic.woff2") format("woff2");
|
|
18560
18684
|
}
|
|
18561
18685
|
@font-face {
|
|
18562
18686
|
font-style: italic;
|
|
18563
18687
|
font-weight: 700;
|
|
18564
18688
|
font-family: 'Inter';
|
|
18565
|
-
src: url("
|
|
18689
|
+
src: url("../../fonts/Inter-BoldItalic.woff2") format("woff2");
|
|
18566
18690
|
}
|
|
18567
18691
|
@font-face {
|
|
18568
18692
|
font-style: normal;
|
|
18569
18693
|
font-weight: 400;
|
|
18570
18694
|
font-family: 'RobotoMono';
|
|
18571
|
-
src: url("
|
|
18695
|
+
src: url("../../fonts/RobotoMono-Regular.woff2") format("woff2");
|
|
18572
18696
|
}
|
|
18573
18697
|
@font-face {
|
|
18574
18698
|
font-style: normal;
|
|
18575
18699
|
font-weight: 700;
|
|
18576
18700
|
font-family: 'RobotoMono';
|
|
18577
|
-
src: url("
|
|
18701
|
+
src: url("../../fonts/RobotoMono-Bold.woff2") format("woff2");
|
|
18578
18702
|
}
|
|
18579
18703
|
@font-face {
|
|
18580
18704
|
font-style: normal;
|
|
18581
18705
|
font-weight: 400;
|
|
18582
18706
|
font-family: 'Archivo';
|
|
18583
|
-
src: url("
|
|
18707
|
+
src: url("../../fonts/Archivo-Regular.woff2") format("woff2");
|
|
18584
18708
|
}
|
|
18585
18709
|
@font-face {
|
|
18586
18710
|
font-style: normal;
|
|
18587
18711
|
font-weight: 600;
|
|
18588
18712
|
font-family: 'Archivo';
|
|
18589
|
-
src: url("
|
|
18713
|
+
src: url("../../fonts/Archivo-SemiBold.woff2") format("woff2");
|
|
18590
18714
|
}
|
|
18591
18715
|
@font-face {
|
|
18592
18716
|
font-style: normal;
|
|
18593
18717
|
font-weight: 700;
|
|
18594
18718
|
font-family: 'Archivo';
|
|
18595
|
-
src: url("
|
|
18719
|
+
src: url("../../fonts/Archivo-Bold.woff2") format("woff2");
|
|
18596
18720
|
}
|
|
18597
18721
|
@font-face {
|
|
18598
18722
|
font-style: normal;
|
|
18599
18723
|
font-weight: 500;
|
|
18600
18724
|
font-family: 'ArchivoSemiExpanded';
|
|
18601
|
-
src: url("
|
|
18725
|
+
src: url("../../fonts/ArchivoSemiExpanded-Medium.woff2") format("woff2");
|
|
18602
18726
|
}
|
|
18603
18727
|
@font-face {
|
|
18604
18728
|
font-style: normal;
|
|
18605
18729
|
font-weight: 600;
|
|
18606
18730
|
font-family: 'ArchivoSemiExpanded';
|
|
18607
|
-
src: url("
|
|
18731
|
+
src: url("../../fonts/ArchivoSemiExpanded-SemiBold.woff2") format("woff2");
|
|
18608
18732
|
}
|
|
18609
18733
|
@font-face {
|
|
18610
18734
|
font-style: normal;
|
|
18611
18735
|
font-weight: 600;
|
|
18612
18736
|
font-family: 'ArchivoExpanded';
|
|
18613
|
-
src: url("
|
|
18737
|
+
src: url("../../fonts/ArchivoExpanded-SemiBold.woff2") format("woff2");
|
|
18614
18738
|
}
|
|
18615
18739
|
.d-ff-custom {
|
|
18616
18740
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
|