@dialpad/dialtone 8.21.2 → 8.21.3
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.
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
.d-link {
|
|
17
17
|
--link-color-default: var(--dt-color-link-primary);
|
|
18
18
|
--link-color-default-hover: var(--dt-color-link-primary-hover);
|
|
19
|
-
--link-text-decoration:
|
|
19
|
+
--link-text-decoration: underline;
|
|
20
20
|
|
|
21
21
|
position: relative;
|
|
22
22
|
display: inline-flex;
|
|
@@ -29,6 +29,8 @@
|
|
|
29
29
|
color: var(--link-color-default);
|
|
30
30
|
font: inherit;
|
|
31
31
|
text-decoration: var(--link-text-decoration);
|
|
32
|
+
text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
|
|
33
|
+
text-decoration-thickness: var(--dt-size-border-100);
|
|
32
34
|
background-color: transparent;
|
|
33
35
|
border: 0;
|
|
34
36
|
transition-timing-function: var(--ttf-out-quint);
|
|
@@ -42,21 +44,23 @@
|
|
|
42
44
|
fill: currentColor;
|
|
43
45
|
|
|
44
46
|
&:hover {
|
|
47
|
+
--link-text-decoration: none;
|
|
48
|
+
|
|
45
49
|
color: var(--link-color-default-hover);
|
|
46
50
|
cursor: pointer;
|
|
47
51
|
}
|
|
48
52
|
|
|
53
|
+
&:active {
|
|
54
|
+
--link-text-decoration: underline;
|
|
55
|
+
}
|
|
56
|
+
|
|
49
57
|
&:focus-visible {
|
|
58
|
+
--link-text-decoration: none;
|
|
59
|
+
|
|
50
60
|
outline: none;
|
|
51
61
|
box-shadow: var(--dt-shadow-focus);
|
|
52
62
|
}
|
|
53
63
|
|
|
54
|
-
.d-banner &,
|
|
55
|
-
.d-toast &,
|
|
56
|
-
.d-notice & {
|
|
57
|
-
--link-text-decoration: underline;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
64
|
// ============================================================================
|
|
61
65
|
// $ ALTERNATE STYLES
|
|
62
66
|
// ============================================================================
|
|
@@ -65,10 +69,6 @@
|
|
|
65
69
|
&--warning {
|
|
66
70
|
--link-color-default: var(--dt-color-link-warning);
|
|
67
71
|
--link-color-default-hover: var(--dt-color-link-warning-hover);
|
|
68
|
-
|
|
69
|
-
&:hover {
|
|
70
|
-
--link-text-decoration: underline;
|
|
71
|
-
}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
// $$ DANGER
|
|
@@ -76,10 +76,6 @@
|
|
|
76
76
|
&--danger {
|
|
77
77
|
--link-color-default: var(--dt-color-link-critical);
|
|
78
78
|
--link-color-default-hover: var(--dt-color-link-critical-hover);
|
|
79
|
-
|
|
80
|
-
&:hover {
|
|
81
|
-
--link-text-decoration: underline;
|
|
82
|
-
}
|
|
83
79
|
}
|
|
84
80
|
|
|
85
81
|
// $$ SUCCESS
|
|
@@ -87,10 +83,6 @@
|
|
|
87
83
|
&--success {
|
|
88
84
|
--link-color-default: var(--dt-color-link-success);
|
|
89
85
|
--link-color-default-hover: var(--dt-color-link-success-hover);
|
|
90
|
-
|
|
91
|
-
&:hover {
|
|
92
|
-
--link-text-decoration: underline;
|
|
93
|
-
}
|
|
94
86
|
}
|
|
95
87
|
|
|
96
88
|
// $$ MUTED
|
|
@@ -98,10 +90,6 @@
|
|
|
98
90
|
&--muted {
|
|
99
91
|
--link-color-default: var(--dt-color-link-muted);
|
|
100
92
|
--link-color-default-hover: var(--dt-color-link-muted-hover);
|
|
101
|
-
|
|
102
|
-
&:hover {
|
|
103
|
-
--link-text-decoration: underline;
|
|
104
|
-
}
|
|
105
93
|
}
|
|
106
94
|
|
|
107
95
|
// $$ DISABLED
|
|
@@ -124,10 +112,6 @@
|
|
|
124
112
|
&--inverted {
|
|
125
113
|
--link-color-default: var(--dt-color-link-primary-inverted);
|
|
126
114
|
--link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
|
|
127
|
-
|
|
128
|
-
&:hover {
|
|
129
|
-
--link-text-decoration: underline;
|
|
130
|
-
}
|
|
131
115
|
}
|
|
132
116
|
|
|
133
117
|
// $$ INVERTED DISABLED
|
|
@@ -137,10 +121,9 @@
|
|
|
137
121
|
&--inverted-disabled {
|
|
138
122
|
--link-color-default: var(--dt-color-link-disabled-inverted);
|
|
139
123
|
--link-color-default-hover: var(--dt-color-link-disabled-inverted-hover);
|
|
124
|
+
--link-text-decoration: none !important;
|
|
140
125
|
|
|
141
126
|
&:hover {
|
|
142
|
-
--link-text-decoration: none;
|
|
143
|
-
|
|
144
127
|
cursor: not-allowed;
|
|
145
128
|
}
|
|
146
129
|
}
|
|
@@ -48,6 +48,8 @@
|
|
|
48
48
|
&__sidebar {
|
|
49
49
|
grid-area: sidebar;
|
|
50
50
|
height: 100%;
|
|
51
|
+
overflow-x: hidden;
|
|
52
|
+
overflow-y: auto;
|
|
51
53
|
box-shadow: none;
|
|
52
54
|
}
|
|
53
55
|
|
|
@@ -67,37 +69,58 @@
|
|
|
67
69
|
}
|
|
68
70
|
|
|
69
71
|
@media (max-width: 480px) {
|
|
72
|
+
|
|
73
|
+
// Having a fixed height in mobile mode doesn't really make any sense,
|
|
74
|
+
// so we'll set it back to auto if the media query triggered.
|
|
75
|
+
.d-root-layout--fixed.d-root-layout__responsive--sm {
|
|
76
|
+
height: auto;
|
|
77
|
+
}
|
|
78
|
+
|
|
70
79
|
.d-root-layout__responsive--sm {
|
|
71
80
|
grid-template-areas:
|
|
72
81
|
'header'
|
|
73
82
|
'sidebar'
|
|
74
83
|
'body'
|
|
75
84
|
'footer';
|
|
76
|
-
grid-template-rows: min-content
|
|
85
|
+
grid-template-rows: min-content auto 1fr min-content;
|
|
77
86
|
grid-template-columns: 1fr;
|
|
78
87
|
}
|
|
79
88
|
}
|
|
80
89
|
|
|
81
90
|
@media (max-width: 640px) {
|
|
91
|
+
|
|
92
|
+
// Having a fixed height in mobile mode doesn't really make any sense,
|
|
93
|
+
// so we'll set it back to auto if the media query triggered.
|
|
94
|
+
.d-root-layout--fixed.d-root-layout__responsive--md {
|
|
95
|
+
height: auto;
|
|
96
|
+
}
|
|
97
|
+
|
|
82
98
|
.d-root-layout__responsive--md {
|
|
83
99
|
grid-template-areas:
|
|
84
100
|
'header'
|
|
85
101
|
'sidebar'
|
|
86
102
|
'body'
|
|
87
103
|
'footer';
|
|
88
|
-
grid-template-rows: min-content
|
|
104
|
+
grid-template-rows: min-content auto 1fr min-content;
|
|
89
105
|
grid-template-columns: 1fr;
|
|
90
106
|
}
|
|
91
107
|
}
|
|
92
108
|
|
|
93
109
|
@media (max-width: 980px) {
|
|
110
|
+
|
|
111
|
+
// Having a fixed height in mobile mode doesn't really make any sense,
|
|
112
|
+
// so we'll set it back to auto if the media query triggered.
|
|
113
|
+
.d-root-layout--fixed.d-root-layout__responsive--lg {
|
|
114
|
+
height: auto;
|
|
115
|
+
}
|
|
116
|
+
|
|
94
117
|
.d-root-layout__responsive--lg {
|
|
95
118
|
grid-template-areas:
|
|
96
119
|
'header'
|
|
97
120
|
'sidebar'
|
|
98
121
|
'body'
|
|
99
122
|
'footer';
|
|
100
|
-
grid-template-rows: min-content
|
|
123
|
+
grid-template-rows: min-content auto 1fr min-content;
|
|
101
124
|
grid-template-columns: 1fr;
|
|
102
125
|
}
|
|
103
126
|
}
|
|
@@ -208,8 +208,16 @@ ul {
|
|
|
208
208
|
// $$ TEXT DECORATION
|
|
209
209
|
// ----------------------------------------------------------------------------
|
|
210
210
|
.d-td-none { text-decoration: none !important; }
|
|
211
|
-
.d-td-underline {
|
|
212
|
-
|
|
211
|
+
.d-td-underline {
|
|
212
|
+
text-decoration: underline !important;
|
|
213
|
+
text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100)) !important;
|
|
214
|
+
text-decoration-thickness: var(--dt-size-border-100) !important;
|
|
215
|
+
}
|
|
216
|
+
.d-td-dotted {
|
|
217
|
+
text-decoration: underline dotted !important;
|
|
218
|
+
text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100)) !important;
|
|
219
|
+
text-decoration-thickness: var(--dt-size-border-100) !important;
|
|
220
|
+
}
|
|
213
221
|
.d-td-line-through { text-decoration: line-through !important; }
|
|
214
222
|
.d-td-unset { text-decoration: unset !important; }
|
|
215
223
|
|
|
@@ -2075,7 +2075,7 @@ legend .d-label {
|
|
|
2075
2075
|
.d-link {
|
|
2076
2076
|
--link-color-default: var(--dt-color-link-primary);
|
|
2077
2077
|
--link-color-default-hover: var(--dt-color-link-primary-hover);
|
|
2078
|
-
--link-text-decoration:
|
|
2078
|
+
--link-text-decoration: underline;
|
|
2079
2079
|
position: relative;
|
|
2080
2080
|
display: inline-flex;
|
|
2081
2081
|
gap: var(--dt-space-300);
|
|
@@ -2088,6 +2088,8 @@ legend .d-label {
|
|
|
2088
2088
|
font: inherit;
|
|
2089
2089
|
-webkit-text-decoration: var(--link-text-decoration);
|
|
2090
2090
|
text-decoration: var(--link-text-decoration);
|
|
2091
|
+
text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
|
|
2092
|
+
text-decoration-thickness: var(--dt-size-border-100);
|
|
2091
2093
|
background-color: transparent;
|
|
2092
2094
|
border: 0;
|
|
2093
2095
|
transition-timing-function: var(--ttf-out-quint);
|
|
@@ -2098,46 +2100,34 @@ legend .d-label {
|
|
|
2098
2100
|
fill: currentColor;
|
|
2099
2101
|
}
|
|
2100
2102
|
.d-link:hover {
|
|
2103
|
+
--link-text-decoration: none;
|
|
2101
2104
|
color: var(--link-color-default-hover);
|
|
2102
2105
|
cursor: pointer;
|
|
2103
2106
|
}
|
|
2107
|
+
.d-link:active {
|
|
2108
|
+
--link-text-decoration: underline;
|
|
2109
|
+
}
|
|
2104
2110
|
.d-link:focus-visible {
|
|
2111
|
+
--link-text-decoration: none;
|
|
2105
2112
|
outline: none;
|
|
2106
2113
|
box-shadow: var(--dt-shadow-focus);
|
|
2107
2114
|
}
|
|
2108
|
-
.d-banner .d-link,
|
|
2109
|
-
.d-toast .d-link,
|
|
2110
|
-
.d-notice .d-link {
|
|
2111
|
-
--link-text-decoration: underline;
|
|
2112
|
-
}
|
|
2113
2115
|
.d-link--warning {
|
|
2114
2116
|
--link-color-default: var(--dt-color-link-warning);
|
|
2115
2117
|
--link-color-default-hover: var(--dt-color-link-warning-hover);
|
|
2116
2118
|
}
|
|
2117
|
-
.d-link--warning:hover {
|
|
2118
|
-
--link-text-decoration: underline;
|
|
2119
|
-
}
|
|
2120
2119
|
.d-link--danger {
|
|
2121
2120
|
--link-color-default: var(--dt-color-link-critical);
|
|
2122
2121
|
--link-color-default-hover: var(--dt-color-link-critical-hover);
|
|
2123
2122
|
}
|
|
2124
|
-
.d-link--danger:hover {
|
|
2125
|
-
--link-text-decoration: underline;
|
|
2126
|
-
}
|
|
2127
2123
|
.d-link--success {
|
|
2128
2124
|
--link-color-default: var(--dt-color-link-success);
|
|
2129
2125
|
--link-color-default-hover: var(--dt-color-link-success-hover);
|
|
2130
2126
|
}
|
|
2131
|
-
.d-link--success:hover {
|
|
2132
|
-
--link-text-decoration: underline;
|
|
2133
|
-
}
|
|
2134
2127
|
.d-link--muted {
|
|
2135
2128
|
--link-color-default: var(--dt-color-link-muted);
|
|
2136
2129
|
--link-color-default-hover: var(--dt-color-link-muted-hover);
|
|
2137
2130
|
}
|
|
2138
|
-
.d-link--muted:hover {
|
|
2139
|
-
--link-text-decoration: underline;
|
|
2140
|
-
}
|
|
2141
2131
|
.d-link[disabled],
|
|
2142
2132
|
.d-link--disabled {
|
|
2143
2133
|
--link-color-default: var(--dt-color-link-disabled);
|
|
@@ -2152,15 +2142,12 @@ legend .d-label {
|
|
|
2152
2142
|
--link-color-default: var(--dt-color-link-primary-inverted);
|
|
2153
2143
|
--link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
|
|
2154
2144
|
}
|
|
2155
|
-
.d-link--inverted:hover {
|
|
2156
|
-
--link-text-decoration: underline;
|
|
2157
|
-
}
|
|
2158
2145
|
.d-link--inverted-disabled {
|
|
2159
2146
|
--link-color-default: var(--dt-color-link-disabled-inverted);
|
|
2160
2147
|
--link-color-default-hover: var(--dt-color-link-disabled-inverted-hover);
|
|
2148
|
+
--link-text-decoration: none !important;
|
|
2161
2149
|
}
|
|
2162
2150
|
.d-link--inverted-disabled:hover {
|
|
2163
|
-
--link-text-decoration: none;
|
|
2164
2151
|
cursor: not-allowed;
|
|
2165
2152
|
}
|
|
2166
2153
|
.d-list-group,
|
|
@@ -3800,6 +3787,8 @@ legend .d-label {
|
|
|
3800
3787
|
.d-root-layout__sidebar {
|
|
3801
3788
|
grid-area: sidebar;
|
|
3802
3789
|
height: 100%;
|
|
3790
|
+
overflow-x: hidden;
|
|
3791
|
+
overflow-y: auto;
|
|
3803
3792
|
box-shadow: none;
|
|
3804
3793
|
}
|
|
3805
3794
|
.d-root-layout__content {
|
|
@@ -7053,10 +7042,14 @@ ul {
|
|
|
7053
7042
|
}
|
|
7054
7043
|
.d-td-underline {
|
|
7055
7044
|
text-decoration: underline !important;
|
|
7045
|
+
text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100)) !important;
|
|
7046
|
+
text-decoration-thickness: var(--dt-size-border-100) !important;
|
|
7056
7047
|
}
|
|
7057
7048
|
.d-td-dotted {
|
|
7058
7049
|
-webkit-text-decoration: underline dotted !important;
|
|
7059
7050
|
text-decoration: underline dotted !important;
|
|
7051
|
+
text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100)) !important;
|
|
7052
|
+
text-decoration-thickness: var(--dt-size-border-100) !important;
|
|
7060
7053
|
}
|
|
7061
7054
|
.d-td-line-through {
|
|
7062
7055
|
text-decoration: line-through !important;
|
|
@@ -15598,10 +15591,13 @@ body {
|
|
|
15598
15591
|
}
|
|
15599
15592
|
|
|
15600
15593
|
@media (max-width: 480px) {
|
|
15594
|
+
.d-root-layout--fixed.d-root-layout__responsive--sm {
|
|
15595
|
+
height: auto;
|
|
15596
|
+
}
|
|
15601
15597
|
.d-root-layout__responsive--sm {
|
|
15602
15598
|
grid-template-areas: 'header' 'sidebar' 'body' 'footer';
|
|
15603
|
-
grid-template-rows: -webkit-min-content
|
|
15604
|
-
grid-template-rows: min-content
|
|
15599
|
+
grid-template-rows: -webkit-min-content auto 1fr -webkit-min-content;
|
|
15600
|
+
grid-template-rows: min-content auto 1fr min-content;
|
|
15605
15601
|
grid-template-columns: 1fr;
|
|
15606
15602
|
}
|
|
15607
15603
|
.sm\:d-stack {
|
|
@@ -16332,10 +16328,13 @@ body {
|
|
|
16332
16328
|
}
|
|
16333
16329
|
|
|
16334
16330
|
@media (max-width: 640px) {
|
|
16331
|
+
.d-root-layout--fixed.d-root-layout__responsive--md {
|
|
16332
|
+
height: auto;
|
|
16333
|
+
}
|
|
16335
16334
|
.d-root-layout__responsive--md {
|
|
16336
16335
|
grid-template-areas: 'header' 'sidebar' 'body' 'footer';
|
|
16337
|
-
grid-template-rows: -webkit-min-content
|
|
16338
|
-
grid-template-rows: min-content
|
|
16336
|
+
grid-template-rows: -webkit-min-content auto 1fr -webkit-min-content;
|
|
16337
|
+
grid-template-rows: min-content auto 1fr min-content;
|
|
16339
16338
|
grid-template-columns: 1fr;
|
|
16340
16339
|
}
|
|
16341
16340
|
.md\:d-stack {
|
|
@@ -17066,10 +17065,13 @@ body {
|
|
|
17066
17065
|
}
|
|
17067
17066
|
|
|
17068
17067
|
@media (max-width: 980px) {
|
|
17068
|
+
.d-root-layout--fixed.d-root-layout__responsive--lg {
|
|
17069
|
+
height: auto;
|
|
17070
|
+
}
|
|
17069
17071
|
.d-root-layout__responsive--lg {
|
|
17070
17072
|
grid-template-areas: 'header' 'sidebar' 'body' 'footer';
|
|
17071
|
-
grid-template-rows: -webkit-min-content
|
|
17072
|
-
grid-template-rows: min-content
|
|
17073
|
+
grid-template-rows: -webkit-min-content auto 1fr -webkit-min-content;
|
|
17074
|
+
grid-template-rows: min-content auto 1fr min-content;
|
|
17073
17075
|
grid-template-columns: 1fr;
|
|
17074
17076
|
}
|
|
17075
17077
|
.lg\:d-stack {
|