@dialpad/dialtone-css 8.45.3 → 8.46.2
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 +61 -3
- package/lib/build/less/components/collapsible.less +6 -0
- package/lib/build/less/components/combobox.less +9 -0
- package/lib/build/less/components/datepicker.less +3 -8
- package/lib/build/less/components/description-list.less +30 -0
- package/lib/build/less/components/dropdown.less +14 -0
- package/lib/build/less/components/emoji-picker.less +4 -0
- package/lib/build/less/components/empty-state.less +0 -4
- package/lib/build/less/components/input.less +9 -0
- package/lib/build/less/components/item-layout.less +20 -20
- package/lib/build/less/components/list-item.less +38 -0
- package/lib/build/less/components/rich-text-editor.less +57 -0
- package/lib/build/less/components/scroller.less +49 -0
- package/lib/build/less/components/skeleton.less +11 -7
- package/lib/build/less/components/tooltip.less +20 -0
- package/lib/build/less/dialtone-reset.less +7 -6
- package/lib/build/less/dialtone.less +5 -0
- package/lib/build/less/utilities/borders.less +38 -8
- package/lib/build/less/utilities/colors.less +10 -3
- package/lib/build/less/utilities/effects.less +3 -4
- package/lib/build/less/utilities/interactivity.less +14 -3
- package/lib/build/less/utilities/layout.less +4 -4
- package/lib/build/less/utilities/spacing.less +27 -7
- package/lib/build/less/utilities/typography.less +3 -2
- package/lib/dist/dialtone-default-theme.css +344 -66
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone.css +336 -58
- package/lib/dist/dialtone.min.css +1 -1
- package/lib/dist/tokens/tokens-base-dark.css +1 -1
- package/lib/dist/tokens/tokens-base-light.css +8 -8
- package/lib/dist/tokens/tokens-debug-base.css +777 -0
- package/lib/dist/tokens/tokens-debug-dp.css +2131 -0
- package/lib/dist/tokens/tokens-dp-dark.css +7 -7
- package/lib/dist/tokens/tokens-expressive-dark.css +7 -7
- package/lib/dist/tokens/tokens-expressive-sm-dark.css +7 -7
- package/lib/dist/tokens/tokens-tmo-dark.css +7 -7
- package/package.json +3 -5
- package/lib/build/less/utilities/lint-staged.config.cjs +0 -5
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
/* stylelint-disable meowtec/no-px */
|
|
1
2
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
2
3
|
/* Document
|
|
3
4
|
========================================================================== */
|
|
4
5
|
* {
|
|
5
|
-
padding: 0;
|
|
6
6
|
margin: 0;
|
|
7
|
+
padding: 0;
|
|
7
8
|
}
|
|
8
9
|
*,
|
|
9
10
|
*::before,
|
|
@@ -55,10 +56,10 @@ hr {
|
|
|
55
56
|
* 2. Correct the odd `em` font sizing in all browsers.
|
|
56
57
|
*/
|
|
57
58
|
pre {
|
|
58
|
-
font-family: monospace, monospace;
|
|
59
|
-
/* 1 */
|
|
60
59
|
font-size: 1em;
|
|
61
60
|
/* 2 */
|
|
61
|
+
font-family: monospace;
|
|
62
|
+
/* 1 */
|
|
62
63
|
}
|
|
63
64
|
/* Text-level semantics
|
|
64
65
|
========================================================================== */
|
|
@@ -80,13 +81,13 @@ u {
|
|
|
80
81
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
81
82
|
*/
|
|
82
83
|
abbr[title] {
|
|
83
|
-
border-bottom: none;
|
|
84
|
-
/* 1 */
|
|
85
84
|
text-decoration: underline;
|
|
86
85
|
/* 2 */
|
|
87
86
|
-webkit-text-decoration: underline dotted;
|
|
88
87
|
text-decoration: underline dotted;
|
|
89
88
|
/* 2 */
|
|
89
|
+
border-bottom: none;
|
|
90
|
+
/* 1 */
|
|
90
91
|
text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
|
|
91
92
|
text-decoration-thickness: var(--dt-size-border-100);
|
|
92
93
|
}
|
|
@@ -108,10 +109,10 @@ strong {
|
|
|
108
109
|
code,
|
|
109
110
|
kbd,
|
|
110
111
|
samp {
|
|
111
|
-
font-family: monospace, monospace;
|
|
112
|
-
/* 1 */
|
|
113
112
|
font-size: 1em;
|
|
114
113
|
/* 2 */
|
|
114
|
+
font-family: monospace;
|
|
115
|
+
/* 1 */
|
|
115
116
|
}
|
|
116
117
|
/**
|
|
117
118
|
* Add the correct font size in all browsers.
|
|
@@ -791,7 +792,7 @@ template {
|
|
|
791
792
|
--stack-gap: var(--dt-space-600);
|
|
792
793
|
}
|
|
793
794
|
}
|
|
794
|
-
.
|
|
795
|
+
.d-item-layout {
|
|
795
796
|
display: flex;
|
|
796
797
|
align-items: stretch;
|
|
797
798
|
min-height: calc(var(--dt-size-550) + var(--dt-size-300));
|
|
@@ -799,77 +800,77 @@ template {
|
|
|
799
800
|
font-size: var(--dt-font-size-200);
|
|
800
801
|
line-height: var(--dt-font-line-height-300);
|
|
801
802
|
}
|
|
802
|
-
.
|
|
803
|
+
.d-item-layout > .d-item-layout--content {
|
|
803
804
|
display: flex;
|
|
804
805
|
flex-direction: column;
|
|
805
806
|
flex-grow: 1;
|
|
806
807
|
justify-content: center;
|
|
807
808
|
min-width: var(--dt-size-0);
|
|
808
809
|
}
|
|
809
|
-
.
|
|
810
|
+
.d-item-layout > .d-item-layout--content > .d-item-layout--subtitle {
|
|
810
811
|
color: var(--dt-color-foreground-tertiary);
|
|
811
812
|
font-size: var(--dt-font-size-100);
|
|
812
813
|
}
|
|
813
|
-
.
|
|
814
|
+
.d-item-layout > .d-item-layout--content > .d-item-layout--subtitle--with-title {
|
|
814
815
|
margin-top: var(--dt-space-200-negative);
|
|
815
816
|
}
|
|
816
|
-
.
|
|
817
|
+
.d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
|
|
817
818
|
margin-top: var(--dt-space-200);
|
|
818
819
|
}
|
|
819
|
-
.
|
|
820
|
-
.
|
|
820
|
+
.d-item-layout > .d-item-layout--right,
|
|
821
|
+
.d-item-layout > .d-item-layout--left {
|
|
821
822
|
display: flex;
|
|
822
823
|
align-items: center;
|
|
823
824
|
min-width: var(--dt-size-600);
|
|
824
825
|
min-height: inherit;
|
|
825
826
|
}
|
|
826
|
-
.
|
|
827
|
-
padding-left: var(--dt-space-400);
|
|
827
|
+
.d-item-layout > .d-item-layout--right {
|
|
828
828
|
flex-shrink: 0;
|
|
829
|
+
padding-left: var(--dt-space-400);
|
|
829
830
|
}
|
|
830
|
-
.
|
|
831
|
+
.d-item-layout > .d-item-layout--left {
|
|
831
832
|
justify-content: flex-end;
|
|
832
833
|
padding-right: var(--dt-space-400);
|
|
833
834
|
}
|
|
834
|
-
.
|
|
835
|
+
.d-item-layout > .d-item-layout--selected {
|
|
835
836
|
display: flex;
|
|
836
837
|
align-items: center;
|
|
837
838
|
}
|
|
838
|
-
.
|
|
839
|
+
.d-item-layout--custom {
|
|
839
840
|
display: grid;
|
|
840
841
|
grid-template-areas: 'left content right selected';
|
|
841
842
|
grid-template-columns: minmax(0, -webkit-max-content) 1fr minmax(0, -webkit-max-content) minmax(0, -webkit-max-content);
|
|
842
843
|
grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content) minmax(0, max-content);
|
|
843
844
|
}
|
|
844
|
-
.
|
|
845
|
+
.d-item-layout--custom > .d-item-layout--left {
|
|
845
846
|
grid-area: left;
|
|
846
847
|
}
|
|
847
|
-
.
|
|
848
|
+
.d-item-layout--custom > .d-item-layout--right {
|
|
848
849
|
grid-area: right;
|
|
849
850
|
}
|
|
850
|
-
.
|
|
851
|
+
.d-item-layout--custom > .d-item-layout--content {
|
|
851
852
|
display: grid;
|
|
852
853
|
grid-area: content;
|
|
853
854
|
grid-template-areas: 'title' 'subtitle' 'bottom';
|
|
854
855
|
grid-template-rows: repeat(auto-fit, minmax(0, auto));
|
|
855
856
|
}
|
|
856
|
-
.
|
|
857
|
+
.d-item-layout--custom > .d-item-layout--content > .d-item-layout--title {
|
|
857
858
|
grid-area: title;
|
|
858
859
|
}
|
|
859
|
-
.
|
|
860
|
+
.d-item-layout--custom > .d-item-layout--content > .d-item-layout--subtitle {
|
|
860
861
|
grid-area: subtitle;
|
|
861
862
|
}
|
|
862
|
-
.
|
|
863
|
+
.d-item-layout--custom > .d-item-layout--content > .d-item-layout--bottom {
|
|
863
864
|
grid-area: bottom;
|
|
864
865
|
}
|
|
865
|
-
.
|
|
866
|
+
.d-item-layout--custom > .d-item-layout--selected {
|
|
866
867
|
grid-area: selected;
|
|
867
868
|
}
|
|
868
869
|
.d-avatar {
|
|
869
870
|
--avatar-color-background: var(--dt-avatar-color-background-000);
|
|
870
871
|
--avatar-color-text: var(--dt-avatar-color-foreground);
|
|
871
872
|
--avatar-size-shape: var(--dt-size-600);
|
|
872
|
-
--avatar-size-image: 100
|
|
873
|
+
--avatar-size-image: var(--dt-size-100-percent);
|
|
873
874
|
--avatar-size-text: var(--dt-font-size-200);
|
|
874
875
|
--avatar-presence-position-right: var(--dt-space-200-negative);
|
|
875
876
|
--avatar-presence-position-bottom: var(--dt-space-200-negative);
|
|
@@ -952,6 +953,10 @@ template {
|
|
|
952
953
|
object-fit: cover;
|
|
953
954
|
border-radius: var(--dt-size-radius-pill);
|
|
954
955
|
}
|
|
956
|
+
.d-avatar--image-loaded {
|
|
957
|
+
background-color: transparent;
|
|
958
|
+
background-image: unset;
|
|
959
|
+
}
|
|
955
960
|
.d-avatar__initials {
|
|
956
961
|
position: absolute;
|
|
957
962
|
z-index: var(--zi-base);
|
|
@@ -970,12 +975,14 @@ template {
|
|
|
970
975
|
position: absolute;
|
|
971
976
|
right: var(--avatar-presence-position-right);
|
|
972
977
|
bottom: var(--avatar-presence-position-bottom);
|
|
978
|
+
z-index: var(--zi-base);
|
|
973
979
|
display: flex;
|
|
974
980
|
}
|
|
975
981
|
.d-avatar__count {
|
|
976
982
|
position: absolute;
|
|
977
|
-
right: 0;
|
|
978
|
-
bottom: 0;
|
|
983
|
+
right: var(--dt-space-0);
|
|
984
|
+
bottom: var(--dt-space-0);
|
|
985
|
+
z-index: var(--zi-base);
|
|
979
986
|
display: inline-flex;
|
|
980
987
|
align-items: center;
|
|
981
988
|
justify-content: center;
|
|
@@ -995,6 +1002,49 @@ template {
|
|
|
995
1002
|
.dt-leftbar-row__primary:hover .d-avatar__count {
|
|
996
1003
|
--avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
|
|
997
1004
|
}
|
|
1005
|
+
.d-avatar--clickable {
|
|
1006
|
+
--avatar-color-border: transparent;
|
|
1007
|
+
padding: 0;
|
|
1008
|
+
background-color: transparent;
|
|
1009
|
+
border: var(--dt-size-border-100) solid var(--avatar-color-border);
|
|
1010
|
+
border-radius: var(--dt-size-radius-circle);
|
|
1011
|
+
cursor: pointer;
|
|
1012
|
+
}
|
|
1013
|
+
.d-avatar--clickable:focus-visible {
|
|
1014
|
+
outline: none;
|
|
1015
|
+
box-shadow: var(--dt-shadow-focus);
|
|
1016
|
+
}
|
|
1017
|
+
.d-avatar--clickable:hover {
|
|
1018
|
+
--avatar-color-border: var(--dt-color-border-default);
|
|
1019
|
+
}
|
|
1020
|
+
.d-avatar--clickable:active {
|
|
1021
|
+
--avatar-color-border: var(--dt-color-border-moderate);
|
|
1022
|
+
-webkit-transform: scale(0.98);
|
|
1023
|
+
transform: scale(0.98);
|
|
1024
|
+
}
|
|
1025
|
+
.d-avatar__overlay {
|
|
1026
|
+
position: absolute;
|
|
1027
|
+
z-index: var(--zi-base);
|
|
1028
|
+
display: flex;
|
|
1029
|
+
align-items: center;
|
|
1030
|
+
justify-content: center;
|
|
1031
|
+
width: var(--dt-size-100-percent);
|
|
1032
|
+
height: var(--dt-size-100-percent);
|
|
1033
|
+
background-color: var(--dt-color-surface-contrast-opaque);
|
|
1034
|
+
border-radius: var(--dt-size-radius-circle);
|
|
1035
|
+
opacity: var(--dt-opacity-900);
|
|
1036
|
+
}
|
|
1037
|
+
.d-avatar__overlay-icon {
|
|
1038
|
+
width: var(--dt-size-100-percent);
|
|
1039
|
+
color: var(--dt-color-foreground-primary-inverted);
|
|
1040
|
+
}
|
|
1041
|
+
.d-avatar__overlay-text {
|
|
1042
|
+
width: var(--dt-size-100-percent);
|
|
1043
|
+
color: var(--dt-color-foreground-primary-inverted);
|
|
1044
|
+
font-weight: var(--dt-font-weight-bold);
|
|
1045
|
+
font-size: var(--dt-font-size-200);
|
|
1046
|
+
text-align: center;
|
|
1047
|
+
}
|
|
998
1048
|
.d-avatar--xs {
|
|
999
1049
|
--avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
|
|
1000
1050
|
--avatar-presence-position-right: var(--dt-space-300-negative);
|
|
@@ -1996,9 +2046,22 @@ template {
|
|
|
1996
2046
|
white-space: nowrap;
|
|
1997
2047
|
text-overflow: ellipsis;
|
|
1998
2048
|
}
|
|
2049
|
+
.d-collapsible__enter-active,
|
|
2050
|
+
.d-collapsible__leave-active {
|
|
2051
|
+
overflow: hidden;
|
|
2052
|
+
transition: height var(--td300) var(--ttf-out-quint);
|
|
2053
|
+
}
|
|
1999
2054
|
.d-combobox__empty-list {
|
|
2000
2055
|
padding: var(--dt-space-0);
|
|
2001
2056
|
}
|
|
2057
|
+
.d-combobox__empty-list-item {
|
|
2058
|
+
display: flex;
|
|
2059
|
+
align-items: center;
|
|
2060
|
+
justify-content: center;
|
|
2061
|
+
padding: var(--dt-space-300) var(--dt-space-450);
|
|
2062
|
+
font-size: var(--dt-font-size-200);
|
|
2063
|
+
line-height: var(--lh4);
|
|
2064
|
+
}
|
|
2002
2065
|
.d-combobox__loading-list {
|
|
2003
2066
|
max-height: var(--dt-size-925);
|
|
2004
2067
|
margin-top: var(--dt-space-400);
|
|
@@ -2008,9 +2071,9 @@ template {
|
|
|
2008
2071
|
.d-datepicker {
|
|
2009
2072
|
--datepicker-width: calc(var(--dt-size-300) * 75);
|
|
2010
2073
|
--datepicker-button-size: calc(var(--dt-size-600) - var(--dt-size-200));
|
|
2074
|
+
box-sizing: border-box;
|
|
2011
2075
|
width: var(--datepicker-width);
|
|
2012
2076
|
padding: var(--dt-space-500);
|
|
2013
|
-
box-sizing: border-box;
|
|
2014
2077
|
}
|
|
2015
2078
|
.d-datepicker__hd {
|
|
2016
2079
|
padding: 0 var(--dt-space-300);
|
|
@@ -2022,9 +2085,9 @@ template {
|
|
|
2022
2085
|
text-align: center;
|
|
2023
2086
|
}
|
|
2024
2087
|
.d-datepicker__month-year-title {
|
|
2025
|
-
line-height: var(--dt-font-line-height-300);
|
|
2026
|
-
font-size: var(--dt-font-size-100);
|
|
2027
2088
|
font-weight: var(--dt-font-weight-normal);
|
|
2089
|
+
font-size: var(--dt-font-size-100);
|
|
2090
|
+
line-height: var(--dt-font-line-height-300);
|
|
2028
2091
|
text-transform: uppercase;
|
|
2029
2092
|
}
|
|
2030
2093
|
.d-datepicker__nav-btn {
|
|
@@ -2063,6 +2126,60 @@ template {
|
|
|
2063
2126
|
color: var(--dt-color-foreground-muted);
|
|
2064
2127
|
background-color: var(--dt-color-neutral-transparent);
|
|
2065
2128
|
}
|
|
2129
|
+
.d-context-menu-list {
|
|
2130
|
+
width: var(--dt-size-850);
|
|
2131
|
+
}
|
|
2132
|
+
.d-dropdown-list {
|
|
2133
|
+
position: relative;
|
|
2134
|
+
margin: var(--dt-space-300);
|
|
2135
|
+
padding-right: var(--dt-space-0);
|
|
2136
|
+
padding-left: var(--dt-space-0);
|
|
2137
|
+
}
|
|
2138
|
+
.d-dropdown-list > .d-list-item {
|
|
2139
|
+
margin-top: var(--dt-space-200);
|
|
2140
|
+
}
|
|
2141
|
+
.d-description-list {
|
|
2142
|
+
display: flex;
|
|
2143
|
+
flex-flow: row wrap;
|
|
2144
|
+
gap: var(--description-list-gap);
|
|
2145
|
+
align-items: flex-start;
|
|
2146
|
+
font-size: var(--dt-font-size-100);
|
|
2147
|
+
line-height: var(--dt-font-line-height-300);
|
|
2148
|
+
--description-list-gap: var(--dt-space-400);
|
|
2149
|
+
}
|
|
2150
|
+
.d-description-list--gap-0 {
|
|
2151
|
+
--description-list-gap: var(--dt-space-0);
|
|
2152
|
+
}
|
|
2153
|
+
.d-description-list--gap-100 {
|
|
2154
|
+
--description-list-gap: var(--dt-space-100);
|
|
2155
|
+
}
|
|
2156
|
+
.d-description-list--gap-200 {
|
|
2157
|
+
--description-list-gap: var(--dt-space-200);
|
|
2158
|
+
}
|
|
2159
|
+
.d-description-list--gap-300 {
|
|
2160
|
+
--description-list-gap: var(--dt-space-300);
|
|
2161
|
+
}
|
|
2162
|
+
.d-description-list--gap-400 {
|
|
2163
|
+
--description-list-gap: var(--dt-space-400);
|
|
2164
|
+
}
|
|
2165
|
+
.d-description-list--gap-500 {
|
|
2166
|
+
--description-list-gap: var(--dt-space-500);
|
|
2167
|
+
}
|
|
2168
|
+
.d-description-list--gap-600 {
|
|
2169
|
+
--description-list-gap: var(--dt-space-600);
|
|
2170
|
+
}
|
|
2171
|
+
.d-description-list--column {
|
|
2172
|
+
flex-direction: column;
|
|
2173
|
+
}
|
|
2174
|
+
.d-description-list__term {
|
|
2175
|
+
flex: 0 1 40%;
|
|
2176
|
+
color: var(--dt-color-foreground-tertiary);
|
|
2177
|
+
}
|
|
2178
|
+
.d-description-list__description {
|
|
2179
|
+
flex: 1 1 50%;
|
|
2180
|
+
margin-left: 0;
|
|
2181
|
+
color: var(--dt-color-foreground-primary);
|
|
2182
|
+
}
|
|
2066
2183
|
.d-empty-state {
|
|
2067
2184
|
display: flex;
|
|
2068
2185
|
flex-direction: column;
|
|
@@ -2468,6 +2585,32 @@ legend .d-label--md {
|
|
|
2468
2585
|
.d-input__wrapper::-ms-expand {
|
|
2469
2586
|
display: none;
|
|
2470
2587
|
}
|
|
2588
|
+
.d-input input[type="search"]::-webkit-search-decoration,
|
|
2589
|
+
.d-input--md input[type="search"]::-webkit-search-decoration,
|
|
2590
|
+
.d-textarea input[type="search"]::-webkit-search-decoration,
|
|
2591
|
+
.d-textarea--md input[type="search"]::-webkit-search-decoration,
|
|
2592
|
+
.d-input__wrapper--md input[type="search"]::-webkit-search-decoration,
|
|
2593
|
+
.d-input__wrapper input[type="search"]::-webkit-search-decoration,
|
|
2594
|
+
.d-input input[type="search"]::-webkit-search-cancel-button,
|
|
2595
|
+
.d-input--md input[type="search"]::-webkit-search-cancel-button,
|
|
2596
|
+
.d-textarea input[type="search"]::-webkit-search-cancel-button,
|
|
2597
|
+
.d-textarea--md input[type="search"]::-webkit-search-cancel-button,
|
|
2598
|
+
.d-input__wrapper--md input[type="search"]::-webkit-search-cancel-button,
|
|
2599
|
+
.d-input__wrapper input[type="search"]::-webkit-search-cancel-button,
|
|
2600
|
+
.d-input input[type="search"]::-webkit-search-results-button,
|
|
2601
|
+
.d-input--md input[type="search"]::-webkit-search-results-button,
|
|
2602
|
+
.d-textarea input[type="search"]::-webkit-search-results-button,
|
|
2603
|
+
.d-textarea--md input[type="search"]::-webkit-search-results-button,
|
|
2604
|
+
.d-input__wrapper--md input[type="search"]::-webkit-search-results-button,
|
|
2605
|
+
.d-input__wrapper input[type="search"]::-webkit-search-results-button,
|
|
2606
|
+
.d-input input[type="search"]::-webkit-search-results-decoration,
|
|
2607
|
+
.d-input--md input[type="search"]::-webkit-search-results-decoration,
|
|
2608
|
+
.d-textarea input[type="search"]::-webkit-search-results-decoration,
|
|
2609
|
+
.d-textarea--md input[type="search"]::-webkit-search-results-decoration,
|
|
2610
|
+
.d-input__wrapper--md input[type="search"]::-webkit-search-results-decoration,
|
|
2611
|
+
.d-input__wrapper input[type="search"]::-webkit-search-results-decoration {
|
|
2612
|
+
display: none;
|
|
2613
|
+
}
|
|
2471
2614
|
.d-input__length-description {
|
|
2472
2615
|
margin-bottom: var(--dt-space-200);
|
|
2473
2616
|
}
|
|
@@ -2864,6 +3007,37 @@ legend .d-label--md {
|
|
|
2864
3007
|
padding-right: var(--dt-space-0);
|
|
2865
3008
|
padding-left: var(--dt-space-0);
|
|
2866
3009
|
}
|
|
3010
|
+
.d-list-item {
|
|
3011
|
+
list-style: none;
|
|
3012
|
+
background-color: var(--dt-action-color-background-muted-default);
|
|
3013
|
+
}
|
|
3014
|
+
.d-list-item:not(.d-list-item--static) {
|
|
3015
|
+
border-radius: var(--dt-size-radius-300);
|
|
3016
|
+
cursor: pointer;
|
|
3017
|
+
}
|
|
3018
|
+
.d-list-item--focusable:focus,
|
|
3019
|
+
.d-list-item--focusable:focus-within,
|
|
3020
|
+
.d-list-item--highlighted {
|
|
3021
|
+
background-color: var(--dt-action-color-background-muted-hover);
|
|
3022
|
+
}
|
|
3023
|
+
.d-list-item--highlighted:active {
|
|
3024
|
+
background-color: var(--dt-action-color-background-muted-active);
|
|
3025
|
+
}
|
|
3026
|
+
.d-list-item--selected-icon {
|
|
3027
|
+
margin-left: var(--dt-space-400);
|
|
3028
|
+
}
|
|
3029
|
+
.d-list-item[role="menuitem"] {
|
|
3030
|
+
border-radius: var(--dt-size-300);
|
|
3031
|
+
}
|
|
3032
|
+
.d-list-item-separator {
|
|
3033
|
+
margin: var(--dt-space-300) var(--dt-space-300-negative);
|
|
3034
|
+
list-style: none;
|
|
3035
|
+
border-top: var(--dt-size-100) solid var(--dt-color-border-default);
|
|
3036
|
+
}
|
|
3037
|
+
.d-list-item :focus-visible {
|
|
3038
|
+
outline: none;
|
|
3039
|
+
box-shadow: var(--dt-shadow-focus);
|
|
3040
|
+
}
|
|
2867
3041
|
.d-modal {
|
|
2868
3042
|
--modal-backdrop-color-background: var(--dt-color-surface-backdrop);
|
|
2869
3043
|
--modal-dialog-padding: var(--dt-space-600);
|
|
@@ -3641,6 +3815,91 @@ legend .d-label--md {
|
|
|
3641
3815
|
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
3642
3816
|
}
|
|
3643
3817
|
}
|
|
3818
|
+
.d-rich-text-editor__code-block {
|
|
3819
|
+
padding: var(--dt-space-400);
|
|
3820
|
+
background: var(--dt-color-surface-secondary);
|
|
3821
|
+
}
|
|
3822
|
+
.d-rich-text-editor > .ProseMirror {
|
|
3823
|
+
box-shadow: none;
|
|
3824
|
+
}
|
|
3825
|
+
.d-rich-text-editor > .ProseMirror p.is-editor-empty:first-child::before {
|
|
3826
|
+
float: left;
|
|
3827
|
+
height: 0;
|
|
3828
|
+
color: var(--dt-color-foreground-placeholder);
|
|
3829
|
+
content: attr(data-placeholder);
|
|
3830
|
+
pointer-events: none;
|
|
3831
|
+
}
|
|
3832
|
+
.d-rich-text-editor > .ProseMirror ul,
|
|
3833
|
+
.d-rich-text-editor > .ProseMirror ol {
|
|
3834
|
+
padding-left: var(--dt-space-525);
|
|
3835
|
+
}
|
|
3836
|
+
.d-rich-text-editor > .ProseMirror ul > li {
|
|
3837
|
+
list-style-type: disc;
|
|
3838
|
+
}
|
|
3839
|
+
.d-rich-text-editor > .ProseMirror ol > li {
|
|
3840
|
+
list-style-type: decimal;
|
|
3841
|
+
}
|
|
3842
|
+
.d-rich-text-editor > .ProseMirror blockquote {
|
|
3843
|
+
margin-left: 0;
|
|
3844
|
+
padding-left: var(--dt-space-400);
|
|
3845
|
+
border-left: var(--dt-size-border-300) solid var(--dt-color-foreground-muted-inverted);
|
|
3846
|
+
}
|
|
3847
|
+
.d-suggestion-list__container {
|
|
3848
|
+
max-height: var(--dt-size-875);
|
|
3849
|
+
}
|
|
3850
|
+
.d-suggestion-list {
|
|
3851
|
+
position: relative;
|
|
3852
|
+
min-width: var(--dt-size-925);
|
|
3853
|
+
max-width: var(--dt-size-975);
|
|
3854
|
+
padding: var(--dt-size-300);
|
|
3855
|
+
}
|
|
3856
|
+
.d-suggestion-list__item {
|
|
3857
|
+
border: var(--dt-size-100) solid transparent;
|
|
3858
|
+
}
|
|
3859
|
+
.d-mention-suggestion__name {
|
|
3860
|
+
overflow: hidden;
|
|
3861
|
+
white-space: nowrap;
|
|
3862
|
+
text-overflow: ellipsis;
|
|
3863
|
+
}
|
|
3864
|
+
.vue-recycle-scroller {
|
|
3865
|
+
position: relative;
|
|
3866
|
+
}
|
|
3867
|
+
.vue-recycle-scroller.direction-vertical:not(.page-mode) {
|
|
3868
|
+
overflow-y: auto;
|
|
3869
|
+
}
|
|
3870
|
+
.vue-recycle-scroller.direction-horizontal:not(.page-mode) {
|
|
3871
|
+
overflow-x: auto;
|
|
3872
|
+
}
|
|
3873
|
+
.vue-recycle-scroller.direction-horizontal {
|
|
3874
|
+
display: flex;
|
|
3875
|
+
}
|
|
3876
|
+
.vue-recycle-scroller__slot {
|
|
3877
|
+
flex: auto 0 0;
|
|
3878
|
+
}
|
|
3879
|
+
.vue-recycle-scroller__item-wrapper {
|
|
3880
|
+
position: relative;
|
|
3881
|
+
flex: 1;
|
|
3882
|
+
box-sizing: border-box;
|
|
3883
|
+
overflow: hidden;
|
|
3884
|
+
}
|
|
3885
|
+
.vue-recycle-scroller.ready .vue-recycle-scroller__item-view {
|
|
3886
|
+
position: absolute;
|
|
3887
|
+
top: 0;
|
|
3888
|
+
left: 0;
|
|
3889
|
+
will-change: transform;
|
|
3890
|
+
}
|
|
3891
|
+
.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
|
|
3892
|
+
width: 100%;
|
|
3893
|
+
}
|
|
3894
|
+
.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper {
|
|
3895
|
+
height: 100%;
|
|
3896
|
+
}
|
|
3897
|
+
.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view {
|
|
3898
|
+
width: 100%;
|
|
3899
|
+
}
|
|
3900
|
+
.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view {
|
|
3901
|
+
height: 100%;
|
|
3902
|
+
}
|
|
3644
3903
|
.d-select {
|
|
3645
3904
|
--select-color-border: var(--dt-inputs-color-border-default);
|
|
3646
3905
|
--select-notch-position-right: var(--dt-space-400);
|
|
@@ -3781,6 +4040,12 @@ legend .d-label--md {
|
|
|
3781
4040
|
.d-select__input::-ms-expand {
|
|
3782
4041
|
display: none;
|
|
3783
4042
|
}
|
|
4043
|
+
.d-select__input input[type="search"]::-webkit-search-decoration,
|
|
4044
|
+
.d-select__input input[type="search"]::-webkit-search-cancel-button,
|
|
4045
|
+
.d-select__input input[type="search"]::-webkit-search-results-button,
|
|
4046
|
+
.d-select__input input[type="search"]::-webkit-search-results-decoration {
|
|
4047
|
+
display: none;
|
|
4048
|
+
}
|
|
3784
4049
|
.d-select__input option {
|
|
3785
4050
|
color: var(--dt-color-foreground-secondary);
|
|
3786
4051
|
background-color: var(--dt-color-surface-secondary);
|
|
@@ -3869,9 +4134,9 @@ legend .d-label--md {
|
|
|
3869
4134
|
.d-select--disabled::after {
|
|
3870
4135
|
opacity: 0.33;
|
|
3871
4136
|
}
|
|
3872
|
-
.skeleton-placeholder {
|
|
3873
|
-
--placeholder-from-color:
|
|
3874
|
-
--placeholder-to-color:
|
|
4137
|
+
.d-skeleton-placeholder {
|
|
4138
|
+
--placeholder-from-color: var(--dt-color-surface-bold-opaque);
|
|
4139
|
+
--placeholder-to-color: var(--dt-color-surface-moderate-opaque);
|
|
3875
4140
|
display: flex;
|
|
3876
4141
|
width: 100%;
|
|
3877
4142
|
background: var(--placeholder-from-color);
|
|
@@ -3880,14 +4145,14 @@ legend .d-label--md {
|
|
|
3880
4145
|
fill: var(--placeholder-from-color);
|
|
3881
4146
|
stroke: none;
|
|
3882
4147
|
}
|
|
3883
|
-
.skeleton-placeholder--animate {
|
|
3884
|
-
-webkit-animation-name: skeleton-placeholder-throb;
|
|
3885
|
-
animation-name: skeleton-placeholder-throb;
|
|
4148
|
+
.d-skeleton-placeholder--animate {
|
|
4149
|
+
-webkit-animation-name: d-skeleton-placeholder-throb;
|
|
4150
|
+
animation-name: d-skeleton-placeholder-throb;
|
|
3886
4151
|
-webkit-animation-iteration-count: infinite;
|
|
3887
4152
|
animation-iteration-count: infinite;
|
|
3888
4153
|
}
|
|
3889
|
-
@-webkit-keyframes skeleton-placeholder-throb {
|
|
3890
|
-
|
|
4154
|
+
@-webkit-keyframes d-skeleton-placeholder-throb {
|
|
4155
|
+
10% {
|
|
3891
4156
|
background: var(--placeholder-from-color);
|
|
3892
4157
|
fill: var(--placeholder-from-color);
|
|
3893
4158
|
}
|
|
@@ -3895,13 +4160,13 @@ legend .d-label--md {
|
|
|
3895
4160
|
background: var(--placeholder-to-color);
|
|
3896
4161
|
fill: var(--placeholder-to-color);
|
|
3897
4162
|
}
|
|
3898
|
-
|
|
4163
|
+
90% {
|
|
3899
4164
|
background: var(--placeholder-from-color);
|
|
3900
4165
|
fill: var(--placeholder-from-color);
|
|
3901
4166
|
}
|
|
3902
4167
|
}
|
|
3903
|
-
@keyframes skeleton-placeholder-throb {
|
|
3904
|
-
|
|
4168
|
+
@keyframes d-skeleton-placeholder-throb {
|
|
4169
|
+
10% {
|
|
3905
4170
|
background: var(--placeholder-from-color);
|
|
3906
4171
|
fill: var(--placeholder-from-color);
|
|
3907
4172
|
}
|
|
@@ -3909,7 +4174,7 @@ legend .d-label--md {
|
|
|
3909
4174
|
background: var(--placeholder-to-color);
|
|
3910
4175
|
fill: var(--placeholder-to-color);
|
|
3911
4176
|
}
|
|
3912
|
-
|
|
4177
|
+
90% {
|
|
3913
4178
|
background: var(--placeholder-from-color);
|
|
3914
4179
|
fill: var(--placeholder-from-color);
|
|
3915
4180
|
}
|
|
@@ -4156,12 +4421,26 @@ legend .d-label--md {
|
|
|
4156
4421
|
.d-tablist--inverted .d-tab--selected::after {
|
|
4157
4422
|
--tab-color-background: currentColor;
|
|
4158
4423
|
}
|
|
4424
|
+
.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
|
|
4159
4425
|
.d-tooltip-container {
|
|
4160
4426
|
position: relative;
|
|
4161
4427
|
display: inline-flex;
|
|
4162
4428
|
align-items: center;
|
|
4163
4429
|
justify-content: center;
|
|
4164
4430
|
}
|
|
4431
|
+
.tippy-box[data-reference-hidden] {
|
|
4432
|
+
visibility: hidden;
|
|
4433
|
+
pointer-events: none;
|
|
4434
|
+
}
|
|
4435
|
+
.tippy-box > .tippy-svg-arrow {
|
|
4436
|
+
fill: var(--dt-color-surface-contrast);
|
|
4437
|
+
}
|
|
4438
|
+
.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
|
|
4439
|
+
fill: var(--dt-color-surface-moderate);
|
|
4440
|
+
}
|
|
4441
|
+
.tippy-box[data-animation='fade'][data-state='hidden'] {
|
|
4442
|
+
opacity: 0;
|
|
4443
|
+
}
|
|
4165
4444
|
.d-tooltip {
|
|
4166
4445
|
--tooltip-color-background: var(--dt-color-surface-contrast);
|
|
4167
4446
|
--tooltip-color-text: var(--dt-color-foreground-primary-inverted);
|
|
@@ -4723,6 +5002,9 @@ legend .d-label--md {
|
|
|
4723
5002
|
.d-emoji-picker__search-label {
|
|
4724
5003
|
padding-top: var(--dt-space-500);
|
|
4725
5004
|
}
|
|
5005
|
+
.d-emoji-picker__search-x-button {
|
|
5006
|
+
margin-right: var(--dt-space-300-negative);
|
|
5007
|
+
}
|
|
4726
5008
|
.d-emoji-picker__tab {
|
|
4727
5009
|
display: flex;
|
|
4728
5010
|
flex-wrap: wrap;
|
|
@@ -5295,6 +5577,7 @@ legend .d-label--md {
|
|
|
5295
5577
|
transform: rotate(360deg);
|
|
5296
5578
|
}
|
|
5297
5579
|
}
|
|
5580
|
+
/* stylelint-disable-next-line keyframes-name-pattern */
|
|
5298
5581
|
@-webkit-keyframes d-loading-bars__short {
|
|
5299
5582
|
0% {
|
|
5300
5583
|
min-height: var(--dt-size-300);
|
|
@@ -5397,6 +5680,7 @@ legend .d-label--md {
|
|
|
5397
5680
|
opacity: 0;
|
|
5398
5681
|
}
|
|
5399
5682
|
}
|
|
5683
|
+
/* stylelint-disable-next-line keyframes-name-pattern */
|
|
5400
5684
|
@-webkit-keyframes d-loading-bars__tall {
|
|
5401
5685
|
0% {
|
|
5402
5686
|
min-height: var(--dt-size-300);
|
|
@@ -5568,10 +5852,7 @@ legend .d-label--md {
|
|
|
5568
5852
|
opacity: unset !important;
|
|
5569
5853
|
}
|
|
5570
5854
|
.d-t {
|
|
5571
|
-
transition
|
|
5572
|
-
transition-timing-function: var(--ttf-in-out);
|
|
5573
|
-
transition-duration: var(--td50);
|
|
5574
|
-
transition-property: all;
|
|
5855
|
+
transition: all var(--td50) var(--ttf-in-out) 0s;
|
|
5575
5856
|
}
|
|
5576
5857
|
.d-td0 {
|
|
5577
5858
|
transition-duration: var(--td0) !important;
|
|
@@ -6456,16 +6737,16 @@ legend .d-label--md {
|
|
|
6456
6737
|
cursor: none !important;
|
|
6457
6738
|
}
|
|
6458
6739
|
.d-ol-focusring {
|
|
6459
|
-
box-shadow: var(--dt-shadow-focus) !important;
|
|
6460
6740
|
outline: none !important;
|
|
6741
|
+
box-shadow: var(--dt-shadow-focus) !important;
|
|
6461
6742
|
}
|
|
6462
6743
|
.d-ol-focusring-inset {
|
|
6463
|
-
box-shadow: var(--dt-shadow-focus-inset) !important;
|
|
6464
6744
|
outline: none !important;
|
|
6745
|
+
box-shadow: var(--dt-shadow-focus-inset) !important;
|
|
6465
6746
|
}
|
|
6466
6747
|
.d-ol-none {
|
|
6467
|
-
box-shadow: none !important;
|
|
6468
6748
|
outline: none !important;
|
|
6749
|
+
box-shadow: none !important;
|
|
6469
6750
|
}
|
|
6470
6751
|
.d-pe-auto {
|
|
6471
6752
|
pointer-events: auto !important;
|
|
@@ -6674,10 +6955,10 @@ legend .d-label--md {
|
|
|
6674
6955
|
}
|
|
6675
6956
|
.d-vi-visible-sr {
|
|
6676
6957
|
position: absolute;
|
|
6677
|
-
width:
|
|
6678
|
-
height:
|
|
6679
|
-
margin: -
|
|
6680
|
-
padding: 0;
|
|
6958
|
+
width: var(--dt-size-100);
|
|
6959
|
+
height: var(--dt-size-100);
|
|
6960
|
+
margin: var(--dt-space-100-negative);
|
|
6961
|
+
padding: var(--dt-space-0);
|
|
6681
6962
|
overflow: hidden;
|
|
6682
6963
|
word-wrap: normal;
|
|
6683
6964
|
border: none;
|
|
@@ -7436,9 +7717,6 @@ ul {
|
|
|
7436
7717
|
.d-headline54 {
|
|
7437
7718
|
font: var(--dt-typography-headline-xxl);
|
|
7438
7719
|
}
|
|
7439
|
-
.d-fs-unset {
|
|
7440
|
-
font-size: unset !important;
|
|
7441
|
-
}
|
|
7442
7720
|
.d-fs-normal {
|
|
7443
7721
|
font-style: normal !important;
|
|
7444
7722
|
}
|
|
@@ -7864,6 +8142,13 @@ body {
|
|
|
7864
8142
|
--dt-shadow-extra-large-color-hsla: hsl(var(--dt-shadow-extra-large-color-h) var(--dt-shadow-extra-large-color-s) var(--dt-shadow-extra-large-color-l) / var(--alpha, 30%));
|
|
7865
8143
|
--dt-shadow-extra-large-color: #0000004d;
|
|
7866
8144
|
--dt-shadow-large-type: dropShadow;
|
|
8145
|
+
--dt-shadow-large-color-h: 0;
|
|
8146
|
+
--dt-shadow-large-color-s: 0%;
|
|
8147
|
+
--dt-shadow-large-color-l: 0%;
|
|
8148
|
+
--dt-shadow-large-color-a: 30%;
|
|
8149
|
+
--dt-shadow-large-color-hsl: var(--dt-shadow-large-color-h) var(--dt-shadow-large-color-s) var(--dt-shadow-large-color-l);
|
|
8150
|
+
--dt-shadow-large-color-hsla: hsl(var(--dt-shadow-large-color-h) var(--dt-shadow-large-color-s) var(--dt-shadow-large-color-l) / var(--alpha, 30%));
|
|
8151
|
+
--dt-shadow-large-color: #0000004d;
|
|
7867
8152
|
--dt-shadow-medium-type: dropShadow;
|
|
7868
8153
|
--dt-shadow-medium-color-h: 0;
|
|
7869
8154
|
--dt-shadow-medium-color-s: 0%;
|
|
@@ -8536,13 +8821,6 @@ body {
|
|
|
8536
8821
|
--dt-shadow-extra-large-blur: var(--dt-size-600);
|
|
8537
8822
|
--dt-shadow-large-offset-y: var(--dt-size-200);
|
|
8538
8823
|
--dt-shadow-large-offset-x: var(--dt-size-0);
|
|
8539
|
-
--dt-shadow-large-color-h: 0;
|
|
8540
|
-
--dt-shadow-large-color-s: 0%;
|
|
8541
|
-
--dt-shadow-large-color-l: 0%;
|
|
8542
|
-
--dt-shadow-large-color-a: 30%;
|
|
8543
|
-
--dt-shadow-large-color-hsl: var(--dt-shadow-large-color-h) var(--dt-shadow-large-color-s) var(--dt-shadow-large-color-l);
|
|
8544
|
-
--dt-shadow-large-color-hsla: hsl(var(--dt-shadow-large-color-h) var(--dt-shadow-large-color-s) var(--dt-shadow-large-color-l) / var(--alpha, 30%));
|
|
8545
|
-
--dt-shadow-large-color: rgba(0, 0, 0, 0.3);
|
|
8546
8824
|
--dt-shadow-large-spread: var(--dt-size-0);
|
|
8547
8825
|
--dt-shadow-large-blur: var(--dt-size-500);
|
|
8548
8826
|
--dt-shadow-medium-offset-y: var(--dt-size-200);
|
|
@@ -8561,7 +8839,7 @@ body {
|
|
|
8561
8839
|
--dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
|
|
8562
8840
|
--dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
|
|
8563
8841
|
--dt-color-gradient-magenta-purple: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 90%); /* Gradient for Ai-oriented treatments. */
|
|
8564
|
-
--dt-size-base: calc(var(--dt-font-size-root) * .8);
|
|
8842
|
+
--dt-size-base: calc(var(--dt-font-size-root) * 0.8);
|
|
8565
8843
|
--dt-font-family-expressive: Archivo, var(--dt-font-family-body);
|
|
8566
8844
|
--dt-font-size-500: calc(var(--dt-font-size-root) * 3.8); /* extra large / xxl */
|
|
8567
8845
|
--dt-font-size-400: calc(var(--dt-font-size-root) * 2.7); /* extra large / xl */
|