@neo4j-ndl/base 4.0.0-alpha.0.14b0ae9 → 4.0.0-alpha.0.aeb5d94
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/neo4j-ds-styles.css
CHANGED
|
@@ -2057,6 +2057,257 @@ a.ndl-btn {
|
|
|
2057
2057
|
.ndl-banner .ndl-banner-actions .ndl-btn.ndl-text-button:not(:disabled):active, .ndl-banner .ndl-banner-actions .ndl-btn.ndl-outlined-button:not(:disabled):active, .ndl-banner .ndl-banner-actions .ndl-btn.ndl-filled-button:not(:disabled):active {
|
|
2058
2058
|
background-color:var(--theme-color-neutral-pressed);
|
|
2059
2059
|
}
|
|
2060
|
+
.ndl-form-item.ndl-type-checkbox{
|
|
2061
|
+
line-height:0;
|
|
2062
|
+
color:var(--theme-color-neutral-text-default);
|
|
2063
|
+
}
|
|
2064
|
+
.ndl-form-item input[type='checkbox'],
|
|
2065
|
+
.ndl-form-item input[type='radio'] {
|
|
2066
|
+
cursor:pointer;
|
|
2067
|
+
position:relative;
|
|
2068
|
+
width:16px;
|
|
2069
|
+
height:16px;
|
|
2070
|
+
border-width:1px;
|
|
2071
|
+
border-style:solid;
|
|
2072
|
+
border-color:var(--theme-color-neutral-text-weaker);
|
|
2073
|
+
border-radius:4px;
|
|
2074
|
+
-webkit-appearance:none;
|
|
2075
|
+
-moz-appearance:none;
|
|
2076
|
+
appearance:none;
|
|
2077
|
+
flex-shrink:0;
|
|
2078
|
+
}
|
|
2079
|
+
.ndl-form-item input[type='checkbox']:checked, .ndl-form-item input[type='radio']:checked {
|
|
2080
|
+
border-color:var(--theme-color-primary-icon);
|
|
2081
|
+
background-color:var(--theme-color-primary-icon);
|
|
2082
|
+
}
|
|
2083
|
+
.ndl-form-item input[type='checkbox'][role='checkbox']{
|
|
2084
|
+
box-shadow:0 0 0 0 transparent;
|
|
2085
|
+
transition:box-shadow var(--motion-transition-quick);
|
|
2086
|
+
}
|
|
2087
|
+
.ndl-form-item input[type='checkbox'][role='checkbox']:not(:disabled):hover{
|
|
2088
|
+
box-shadow:0 0 0 4px var(--theme-color-neutral-hover);
|
|
2089
|
+
}
|
|
2090
|
+
.ndl-form-item input[type='checkbox'][role='checkbox']:not(:disabled):active{
|
|
2091
|
+
box-shadow:0 0 0 4px var(--theme-color-neutral-pressed);
|
|
2092
|
+
}
|
|
2093
|
+
.ndl-form-item input[type='checkbox'][role='checkbox']:focus-visible {
|
|
2094
|
+
outline-style:solid;
|
|
2095
|
+
outline-width:2px;
|
|
2096
|
+
outline-offset:0px;
|
|
2097
|
+
outline-color:var(--theme-color-primary-focus);
|
|
2098
|
+
}
|
|
2099
|
+
.ndl-form-item input[type='radio']{
|
|
2100
|
+
box-shadow:0 0 0 0 transparent;
|
|
2101
|
+
transition:box-shadow var(--motion-transition-quick);
|
|
2102
|
+
}
|
|
2103
|
+
.ndl-form-item input[type='radio']:not(:disabled):not(:checked):hover{
|
|
2104
|
+
box-shadow:0 0 0 4px var(--theme-color-neutral-hover);
|
|
2105
|
+
}
|
|
2106
|
+
.ndl-form-item input[type='radio']:not(:disabled):not(:checked):active{
|
|
2107
|
+
box-shadow:0 0 0 4px var(--theme-color-neutral-pressed);
|
|
2108
|
+
}
|
|
2109
|
+
.ndl-form-item input[type='radio']:focus-visible {
|
|
2110
|
+
outline-style:solid;
|
|
2111
|
+
outline-width:2px;
|
|
2112
|
+
outline-offset:0px;
|
|
2113
|
+
outline-color:var(--theme-color-primary-focus);
|
|
2114
|
+
}
|
|
2115
|
+
.ndl-form-item.ndl-disabled input[type='checkbox'],
|
|
2116
|
+
.ndl-form-item.ndl-disabled input[type='radio'] {
|
|
2117
|
+
cursor:not-allowed;
|
|
2118
|
+
border-color:var(--theme-color-neutral-text-weakest);
|
|
2119
|
+
}
|
|
2120
|
+
.ndl-form-item.ndl-disabled input[type='checkbox']:checked, .ndl-form-item.ndl-disabled input[type='radio']:checked {
|
|
2121
|
+
background-color:var(--theme-color-neutral-text-weakest);
|
|
2122
|
+
}
|
|
2123
|
+
.ndl-form-item input[type='checkbox']::after{
|
|
2124
|
+
font-size:14px;
|
|
2125
|
+
width:100%;
|
|
2126
|
+
position:absolute;
|
|
2127
|
+
top:-0.5px;
|
|
2128
|
+
color:#fff;
|
|
2129
|
+
}
|
|
2130
|
+
.ndl-form-item input[type='checkbox']:checked::after{
|
|
2131
|
+
content:'';
|
|
2132
|
+
width:100%;
|
|
2133
|
+
height:100%;
|
|
2134
|
+
background-color:var(--theme-color-neutral-text-inverse);
|
|
2135
|
+
transition:opacity var(--motion-transition-quick);
|
|
2136
|
+
-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6.5L5 10.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
2137
|
+
mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6.5L5 10.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
2138
|
+
-webkit-mask-repeat:no-repeat;
|
|
2139
|
+
mask-repeat:no-repeat;
|
|
2140
|
+
-webkit-mask-size:12px;
|
|
2141
|
+
mask-size:12px;
|
|
2142
|
+
-webkit-mask-position:calc(100% - 1px) 2px;
|
|
2143
|
+
mask-position:calc(100% - 1px) 2px;
|
|
2144
|
+
}
|
|
2145
|
+
.ndl-form-item input[type='checkbox']:indeterminate {
|
|
2146
|
+
border-color:var(--theme-color-primary-bg-strong);
|
|
2147
|
+
background-color:var(--theme-color-primary-bg-strong);
|
|
2148
|
+
}
|
|
2149
|
+
.ndl-form-item input[type='checkbox']:indeterminate::after{
|
|
2150
|
+
content:'';
|
|
2151
|
+
width:100%;
|
|
2152
|
+
height:2px;
|
|
2153
|
+
background-color:var(--theme-color-neutral-text-inverse);
|
|
2154
|
+
transition:opacity var(--motion-transition-quick);
|
|
2155
|
+
-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='12' height='2' viewBox='0 0 12 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.33333 1H10.6667' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
2156
|
+
mask-image:url("data:image/svg+xml,%3Csvg width='12' height='2' viewBox='0 0 12 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.33333 1H10.6667' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
2157
|
+
-webkit-mask-repeat:no-repeat;
|
|
2158
|
+
mask-repeat:no-repeat;
|
|
2159
|
+
-webkit-mask-size:12px;
|
|
2160
|
+
mask-size:12px;
|
|
2161
|
+
top:50%;
|
|
2162
|
+
-webkit-mask-position:calc(100% - 1px) 0;
|
|
2163
|
+
mask-position:calc(100% - 1px) 0;
|
|
2164
|
+
transform:translateY(-50%);
|
|
2165
|
+
}
|
|
2166
|
+
.ndl-form-item input[type='checkbox'][role='switch']{
|
|
2167
|
+
--thumb-size:12px;
|
|
2168
|
+
--track-height:20px;
|
|
2169
|
+
--track-width:36px;
|
|
2170
|
+
--track-padding-left:3px;
|
|
2171
|
+
--track-padding-right:1px;
|
|
2172
|
+
--switch-checkmark-color:var(--theme-color-primary-text);
|
|
2173
|
+
position:relative;
|
|
2174
|
+
display:grid;
|
|
2175
|
+
width:16px;
|
|
2176
|
+
height:16px;
|
|
2177
|
+
flex-shrink:0;
|
|
2178
|
+
cursor:pointer;
|
|
2179
|
+
-webkit-appearance:none;
|
|
2180
|
+
-moz-appearance:none;
|
|
2181
|
+
appearance:none;
|
|
2182
|
+
align-items:center;
|
|
2183
|
+
border-radius:9999px;
|
|
2184
|
+
border-width:1px;
|
|
2185
|
+
border-style:solid;
|
|
2186
|
+
border-color:var(--theme-color-neutral-border-strongest);
|
|
2187
|
+
background-color:var(--theme-color-neutral-bg-weak);
|
|
2188
|
+
|
|
2189
|
+
grid:[track] 1fr / [track] 1fr;
|
|
2190
|
+
padding-left:var(--track-padding-left);
|
|
2191
|
+
padding-right:var(--track-padding-right);
|
|
2192
|
+
touch-action:pan-y;
|
|
2193
|
+
pointer-events:auto;
|
|
2194
|
+
box-sizing:border-box;
|
|
2195
|
+
transition:background-color var(--motion-transition-quick), box-shadow var(--motion-transition-quick);
|
|
2196
|
+
box-shadow:0 0 0 0 transparent;
|
|
2197
|
+
|
|
2198
|
+
inline-size:var(--track-width);
|
|
2199
|
+
block-size:var(--track-width);
|
|
2200
|
+
height:var(--track-height);
|
|
2201
|
+
}
|
|
2202
|
+
.ndl-form-item input[type='checkbox'][role='switch']:disabled {
|
|
2203
|
+
cursor:not-allowed;
|
|
2204
|
+
border-color:var(--theme-color-neutral-bg-strong);
|
|
2205
|
+
background-color:var(--theme-color-neutral-bg-strong);
|
|
2206
|
+
outline-width:0px;
|
|
2207
|
+
}
|
|
2208
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):hover:checked{
|
|
2209
|
+
box-shadow:0 0 0 4px var(--theme-color-primary-hover-weak);
|
|
2210
|
+
}
|
|
2211
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):hover:not(:checked){
|
|
2212
|
+
box-shadow:0 0 0 4px var(--theme-color-neutral-hover);
|
|
2213
|
+
}
|
|
2214
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):active:not(:checked){
|
|
2215
|
+
box-shadow:0 0 0 4px var(--theme-color-neutral-pressed);
|
|
2216
|
+
}
|
|
2217
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):active:checked{
|
|
2218
|
+
box-shadow:0 0 0 4px var(--theme-color-primary-pressed-weak);
|
|
2219
|
+
}
|
|
2220
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):focus-visible {
|
|
2221
|
+
outline-style:solid;
|
|
2222
|
+
outline-width:2px;
|
|
2223
|
+
outline-offset:0px;
|
|
2224
|
+
outline-color:var(--theme-color-primary-focus);
|
|
2225
|
+
}
|
|
2226
|
+
.ndl-form-item input[type='checkbox'][role='switch']::before{
|
|
2227
|
+
inline-size:var(--thumb-size);
|
|
2228
|
+
block-size:var(--thumb-size);
|
|
2229
|
+
|
|
2230
|
+
transition:transform var(--motion-transition-quick), width var(--motion-transition-quick), height var(--motion-transition-quick), background-color var(--motion-transition-quick);
|
|
2231
|
+
content:'';
|
|
2232
|
+
grid-area:track;
|
|
2233
|
+
transform:translateX(0);
|
|
2234
|
+
border-radius:9999px;
|
|
2235
|
+
background-color:var(--theme-color-neutral-bg-weak);
|
|
2236
|
+
}
|
|
2237
|
+
.ndl-form-item input[type='checkbox'][role='switch']:not(:disabled):not(:checked)::before {
|
|
2238
|
+
background-color:var(--theme-color-neutral-bg-stronger);
|
|
2239
|
+
}
|
|
2240
|
+
.ndl-form-item input[type='checkbox'][role='switch']:disabled::before{
|
|
2241
|
+
box-shadow:none;
|
|
2242
|
+
}
|
|
2243
|
+
.ndl-form-item input[type='checkbox'][role='switch']::after{
|
|
2244
|
+
content:'';
|
|
2245
|
+
opacity:0;
|
|
2246
|
+
}
|
|
2247
|
+
.ndl-form-item input[type='checkbox'][role='switch']:checked::after{
|
|
2248
|
+
content:'';
|
|
2249
|
+
opacity:1;
|
|
2250
|
+
position:absolute;
|
|
2251
|
+
top:50%;
|
|
2252
|
+
left:calc(
|
|
2253
|
+
var(--track-padding-left) + var(--track-width) - var(--thumb-size) -
|
|
2254
|
+
(var(--track-padding-left) + 1px) -
|
|
2255
|
+
(var(--track-padding-right) + 1px) + var(--thumb-size) / 2
|
|
2256
|
+
);
|
|
2257
|
+
transform:translate(-50%, -50%);
|
|
2258
|
+
width:12px;
|
|
2259
|
+
height:12px;
|
|
2260
|
+
background-color:var(--switch-checkmark-color);
|
|
2261
|
+
-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
2262
|
+
mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
2263
|
+
-webkit-mask-repeat:no-repeat;
|
|
2264
|
+
mask-repeat:no-repeat;
|
|
2265
|
+
-webkit-mask-size:12px;
|
|
2266
|
+
mask-size:12px;
|
|
2267
|
+
-webkit-mask-position:center;
|
|
2268
|
+
mask-position:center;
|
|
2269
|
+
}
|
|
2270
|
+
.ndl-form-item input[type='checkbox'][role='switch']:checked {
|
|
2271
|
+
border-color:var(--theme-color-primary-icon);
|
|
2272
|
+
background-color:var(--theme-color-primary-icon);
|
|
2273
|
+
--thumb-size:16px;
|
|
2274
|
+
}
|
|
2275
|
+
.ndl-form-item input[type='checkbox'][role='switch']:checked::before{
|
|
2276
|
+
transform:translateX(
|
|
2277
|
+
calc(
|
|
2278
|
+
var(--track-width) - var(--thumb-size) -
|
|
2279
|
+
(var(--track-padding-left) + 1px) -
|
|
2280
|
+
(var(--track-padding-right) + 1px)
|
|
2281
|
+
)
|
|
2282
|
+
);
|
|
2283
|
+
}
|
|
2284
|
+
.ndl-form-item input[type='checkbox'][role='switch']:indeterminate::before{
|
|
2285
|
+
transform:translateX(
|
|
2286
|
+
calc(
|
|
2287
|
+
(
|
|
2288
|
+
var(--track-width) - var(--thumb-size) -
|
|
2289
|
+
(var(--track-padding-left) + 1px) * 2
|
|
2290
|
+
) *
|
|
2291
|
+
0.5
|
|
2292
|
+
)
|
|
2293
|
+
);
|
|
2294
|
+
}
|
|
2295
|
+
.ndl-form-item input[type='radio'] {
|
|
2296
|
+
border-radius:9999px;
|
|
2297
|
+
}
|
|
2298
|
+
.ndl-form-item input[type='radio']:checked {
|
|
2299
|
+
border-width:2px;
|
|
2300
|
+
}
|
|
2301
|
+
.ndl-form-item input[type='radio']:checked::after{
|
|
2302
|
+
content:'';
|
|
2303
|
+
border:2px solid var(--theme-color-neutral-bg-default);
|
|
2304
|
+
width:100%;
|
|
2305
|
+
height:100%;
|
|
2306
|
+
position:absolute;
|
|
2307
|
+
left:0;
|
|
2308
|
+
border-radius:9999px;
|
|
2309
|
+
top:0;
|
|
2310
|
+
}
|
|
2060
2311
|
.ndl-form-item .ndl-form-item-label {
|
|
2061
2312
|
display:inline-flex;
|
|
2062
2313
|
align-items:center;
|
|
@@ -2107,6 +2358,21 @@ a.ndl-btn {
|
|
|
2107
2358
|
.ndl-form-item.ndl-type-text:not(.ndl-disabled) .ndl-form-label-text {
|
|
2108
2359
|
color:var(--theme-color-neutral-text-weak);
|
|
2109
2360
|
}
|
|
2361
|
+
.ndl-form-item.ndl-type-radio {
|
|
2362
|
+
display:flex;
|
|
2363
|
+
align-items:center;
|
|
2364
|
+
color:var(--theme-color-neutral-text-default);
|
|
2365
|
+
}
|
|
2366
|
+
.ndl-form-item.ndl-type-radio .ndl-form-item-label {
|
|
2367
|
+
width:100%;
|
|
2368
|
+
}
|
|
2369
|
+
.ndl-form-item.ndl-type-radio .ndl-form-label-text {
|
|
2370
|
+
flex-grow:1;
|
|
2371
|
+
flex-basis:0px;
|
|
2372
|
+
overflow:hidden;
|
|
2373
|
+
text-overflow:ellipsis;
|
|
2374
|
+
text-wrap:nowrap;
|
|
2375
|
+
}
|
|
2110
2376
|
.ndl-form-item.ndl-disabled .ndl-form-label-text {
|
|
2111
2377
|
color:var(--theme-color-neutral-text-weakest);
|
|
2112
2378
|
}
|
|
@@ -2568,19 +2834,19 @@ a.ndl-btn {
|
|
|
2568
2834
|
letter-spacing:var(--typography-label-letter-spacing);
|
|
2569
2835
|
font-family:var(--typography-label-font-family), sans-serif;
|
|
2570
2836
|
}
|
|
2571
|
-
.ndl-datepicker .react-datepicker-wrapper:has(.ndl-fluid)
|
|
2837
|
+
.ndl-datepicker .react-datepicker-wrapper:has(.ndl-fluid) {
|
|
2572
2838
|
width:auto;
|
|
2573
2839
|
}
|
|
2574
|
-
.ndl-datepicker .ndl-datepicker-icon
|
|
2840
|
+
.ndl-datepicker .ndl-datepicker-icon {
|
|
2575
2841
|
width:20px;
|
|
2576
2842
|
height:20px;
|
|
2577
2843
|
flex-shrink:0;
|
|
2578
2844
|
color:var(--theme-color-neutral-icon);
|
|
2579
2845
|
}
|
|
2580
|
-
.ndl-datepicker .ndl-input-wrapper
|
|
2846
|
+
.ndl-datepicker .ndl-input-wrapper {
|
|
2581
2847
|
cursor:pointer;
|
|
2582
2848
|
}
|
|
2583
|
-
.ndl-datepicker .react-datepicker__sr-only
|
|
2849
|
+
.ndl-datepicker .react-datepicker__sr-only{
|
|
2584
2850
|
position:absolute;
|
|
2585
2851
|
width:1px;
|
|
2586
2852
|
height:1px;
|
|
@@ -2591,11 +2857,11 @@ a.ndl-btn {
|
|
|
2591
2857
|
white-space:nowrap;
|
|
2592
2858
|
border:0;
|
|
2593
2859
|
}
|
|
2594
|
-
.ndl-datepicker .react-datepicker-wrapper
|
|
2860
|
+
.ndl-datepicker .react-datepicker-wrapper {
|
|
2595
2861
|
width:-moz-fit-content;
|
|
2596
2862
|
width:fit-content;
|
|
2597
2863
|
}
|
|
2598
|
-
.ndl-datepicker
|
|
2864
|
+
.ndl-datepicker .react-datepicker-popper {
|
|
2599
2865
|
z-index:10;
|
|
2600
2866
|
display:flex;
|
|
2601
2867
|
width:320px;
|
|
@@ -2609,14 +2875,14 @@ a.ndl-btn {
|
|
|
2609
2875
|
--tw-shadow-colored:var(--theme-shadow-overlay);
|
|
2610
2876
|
box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
2611
2877
|
}
|
|
2612
|
-
.ndl-datepicker
|
|
2878
|
+
.ndl-datepicker .react-datepicker-popper .react-datepicker__aria-live {
|
|
2613
2879
|
display:none;
|
|
2614
2880
|
}
|
|
2615
|
-
.ndl-datepicker .react-datepicker
|
|
2881
|
+
.ndl-datepicker .react-datepicker {
|
|
2616
2882
|
width:100%;
|
|
2617
2883
|
padding:24px;
|
|
2618
2884
|
}
|
|
2619
|
-
.ndl-datepicker .ndl-datepicker-header
|
|
2885
|
+
.ndl-datepicker .ndl-datepicker-header {
|
|
2620
2886
|
display:flex;
|
|
2621
2887
|
height:32px;
|
|
2622
2888
|
align-items:center;
|
|
@@ -2624,32 +2890,32 @@ a.ndl-btn {
|
|
|
2624
2890
|
gap:8px;
|
|
2625
2891
|
padding-left:8px;
|
|
2626
2892
|
}
|
|
2627
|
-
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects
|
|
2893
|
+
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects {
|
|
2628
2894
|
display:flex;
|
|
2629
2895
|
gap:16px;
|
|
2630
2896
|
}
|
|
2631
|
-
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button
|
|
2897
|
+
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button {
|
|
2632
2898
|
border-radius:4px;
|
|
2633
2899
|
outline:2px solid transparent;
|
|
2634
2900
|
outline-offset:2px;
|
|
2635
2901
|
}
|
|
2636
|
-
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button:focus-visible
|
|
2902
|
+
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-selects button:focus-visible {
|
|
2637
2903
|
outline-width:2px;
|
|
2638
2904
|
outline-offset:2px;
|
|
2639
2905
|
outline-color:var(--theme-color-primary-focus);
|
|
2640
2906
|
}
|
|
2641
|
-
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-chevron
|
|
2907
|
+
.ndl-datepicker .ndl-datepicker-header .ndl-datepicker-chevron {
|
|
2642
2908
|
width:16px;
|
|
2643
2909
|
height:16px;
|
|
2644
2910
|
color:var(--theme-color-neutral-text-default);
|
|
2645
2911
|
}
|
|
2646
|
-
.ndl-datepicker .react-datepicker__day-names
|
|
2912
|
+
.ndl-datepicker .react-datepicker__day-names {
|
|
2647
2913
|
margin-top:16px;
|
|
2648
2914
|
margin-bottom:8px;
|
|
2649
2915
|
display:flex;
|
|
2650
2916
|
gap:8px;
|
|
2651
2917
|
}
|
|
2652
|
-
.ndl-datepicker .react-datepicker__day-name
|
|
2918
|
+
.ndl-datepicker .react-datepicker__day-name {
|
|
2653
2919
|
width:32px;
|
|
2654
2920
|
height:32px;
|
|
2655
2921
|
text-align:center;
|
|
@@ -2658,24 +2924,24 @@ a.ndl-btn {
|
|
|
2658
2924
|
letter-spacing:var(--typography-body-medium-letter-spacing);
|
|
2659
2925
|
font-family:var(--typography-body-medium-font-family), sans-serif;
|
|
2660
2926
|
}
|
|
2661
|
-
.ndl-datepicker .react-datepicker__day-name:first-child
|
|
2927
|
+
.ndl-datepicker .react-datepicker__day-name:first-child {
|
|
2662
2928
|
margin-left:0px;
|
|
2663
2929
|
}
|
|
2664
|
-
.ndl-datepicker .react-datepicker__day-name:last-child
|
|
2930
|
+
.ndl-datepicker .react-datepicker__day-name:last-child {
|
|
2665
2931
|
margin-right:0px;
|
|
2666
2932
|
}
|
|
2667
|
-
.ndl-datepicker .react-datepicker__day-name
|
|
2933
|
+
.ndl-datepicker .react-datepicker__day-name{
|
|
2668
2934
|
line-height:32px;
|
|
2669
2935
|
}
|
|
2670
|
-
.ndl-datepicker .react-datepicker__month
|
|
2936
|
+
.ndl-datepicker .react-datepicker__month {
|
|
2671
2937
|
display:flex;
|
|
2672
2938
|
flex-direction:column;
|
|
2673
2939
|
}
|
|
2674
|
-
.ndl-datepicker .react-datepicker__week
|
|
2940
|
+
.ndl-datepicker .react-datepicker__week {
|
|
2675
2941
|
display:flex;
|
|
2676
2942
|
width:100%;
|
|
2677
2943
|
}
|
|
2678
|
-
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day
|
|
2944
|
+
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day {
|
|
2679
2945
|
margin:4px;
|
|
2680
2946
|
display:flex;
|
|
2681
2947
|
flex-grow:1;
|
|
@@ -2685,26 +2951,22 @@ a.ndl-btn {
|
|
|
2685
2951
|
border-radius:8px;
|
|
2686
2952
|
text-align:center;
|
|
2687
2953
|
}
|
|
2688
|
-
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day:first-child
|
|
2954
|
+
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day:first-child {
|
|
2689
2955
|
margin-left:0px;
|
|
2690
2956
|
}
|
|
2691
|
-
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day:last-child
|
|
2957
|
+
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day:last-child {
|
|
2692
2958
|
margin-right:0px;
|
|
2693
2959
|
}
|
|
2694
|
-
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day
|
|
2960
|
+
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day{
|
|
2695
2961
|
line-height:32px;
|
|
2696
2962
|
}
|
|
2697
|
-
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled)
|
|
2963
|
+
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled) {
|
|
2698
2964
|
cursor:pointer;
|
|
2699
2965
|
}
|
|
2700
2966
|
.ndl-datepicker .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):hover:not(.react-datepicker__day--selecting-range-start):not(
|
|
2701
2967
|
.react-datepicker__day--selected
|
|
2702
2968
|
):not(.react-datepicker__day--range-start):not(
|
|
2703
2969
|
.react-datepicker__day--range-end
|
|
2704
|
-
), .ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):hover:not(.react-datepicker__day--selecting-range-start):not(
|
|
2705
|
-
.react-datepicker__day--selected
|
|
2706
|
-
):not(.react-datepicker__day--range-start):not(
|
|
2707
|
-
.react-datepicker__day--range-end
|
|
2708
2970
|
) {
|
|
2709
2971
|
background-color:var(--theme-color-neutral-hover);
|
|
2710
2972
|
color:var(--theme-color-neutral-text-default);
|
|
@@ -2718,16 +2980,6 @@ a.ndl-btn {
|
|
|
2718
2980
|
.react-datepicker__day--selecting-range-start
|
|
2719
2981
|
):not(.react-datepicker__day--range-start):not(
|
|
2720
2982
|
.react-datepicker__day--range-end
|
|
2721
|
-
),
|
|
2722
|
-
.ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):focus:not(.react-datepicker__day--selected):not(
|
|
2723
|
-
.react-datepicker__day--selecting-range-start
|
|
2724
|
-
):not(.react-datepicker__day--range-start):not(
|
|
2725
|
-
.react-datepicker__day--range-end
|
|
2726
|
-
),
|
|
2727
|
-
.ndl-datepicker-popper .react-datepicker__week .ndl-datepicker-day:not(.react-datepicker__day--disabled):focus-visible:not(.react-datepicker__day--selected):not(
|
|
2728
|
-
.react-datepicker__day--selecting-range-start
|
|
2729
|
-
):not(.react-datepicker__day--range-start):not(
|
|
2730
|
-
.react-datepicker__day--range-end
|
|
2731
2983
|
) {
|
|
2732
2984
|
color:var(--theme-color-primary-text);
|
|
2733
2985
|
outline:2px solid transparent;
|
|
@@ -2737,21 +2989,17 @@ a.ndl-btn {
|
|
|
2737
2989
|
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2738
2990
|
--tw-ring-color:var(--theme-color-primary-bg-strong);
|
|
2739
2991
|
}
|
|
2740
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--outside-month
|
|
2992
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--outside-month {
|
|
2741
2993
|
visibility:hidden;
|
|
2742
2994
|
}
|
|
2743
2995
|
.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-selecting-range:not(
|
|
2744
2996
|
.react-datepicker__day--selected
|
|
2745
2997
|
):not(.react-datepicker__day--keyboard-selected):not(
|
|
2746
2998
|
.react-datepicker__day--selecting-range-start
|
|
2747
|
-
), .ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--in-selecting-range:not(
|
|
2748
|
-
.react-datepicker__day--selected
|
|
2749
|
-
):not(.react-datepicker__day--keyboard-selected):not(
|
|
2750
|
-
.react-datepicker__day--selecting-range-start
|
|
2751
2999
|
) {
|
|
2752
3000
|
background-color:var(--theme-color-primary-bg-weak);
|
|
2753
3001
|
}
|
|
2754
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range
|
|
3002
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range {
|
|
2755
3003
|
margin-left:0px;
|
|
2756
3004
|
margin-right:0px;
|
|
2757
3005
|
border-radius:0px;
|
|
@@ -2760,19 +3008,17 @@ a.ndl-btn {
|
|
|
2760
3008
|
padding-right:4px;
|
|
2761
3009
|
color:var(--theme-color-neutral-text-default);
|
|
2762
3010
|
}
|
|
2763
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:first-child
|
|
3011
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:first-child {
|
|
2764
3012
|
padding-left:0px;
|
|
2765
3013
|
}
|
|
2766
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:last-child
|
|
3014
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:last-child {
|
|
2767
3015
|
padding-right:0px;
|
|
2768
3016
|
}
|
|
2769
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:hover
|
|
3017
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--in-range:hover {
|
|
2770
3018
|
background-color:var(--theme-color-primary-hover-weak);
|
|
2771
3019
|
}
|
|
2772
3020
|
.ndl-datepicker .react-datepicker__week .react-datepicker__day--keyboard-selected,
|
|
2773
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--highlighted
|
|
2774
|
-
.ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--keyboard-selected,
|
|
2775
|
-
.ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--highlighted {
|
|
3021
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--highlighted {
|
|
2776
3022
|
color:var(--theme-color-primary-text);
|
|
2777
3023
|
outline:2px solid transparent;
|
|
2778
3024
|
outline-offset:2px;
|
|
@@ -2781,53 +3027,49 @@ a.ndl-btn {
|
|
|
2781
3027
|
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2782
3028
|
--tw-ring-color:var(--theme-color-primary-bg-strong);
|
|
2783
3029
|
}
|
|
2784
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected
|
|
3030
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected {
|
|
2785
3031
|
background-color:var(--theme-color-primary-bg-strong);
|
|
2786
3032
|
color:var(--theme-color-neutral-text-inverse);
|
|
2787
3033
|
}
|
|
2788
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:hover
|
|
3034
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:hover {
|
|
2789
3035
|
background-color:var(--theme-color-primary-hover-strong);
|
|
2790
3036
|
}
|
|
2791
3037
|
.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:focus,
|
|
2792
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:focus-visible
|
|
2793
|
-
.ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--selected:focus,
|
|
2794
|
-
.ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--selected:focus-visible {
|
|
3038
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--selected:focus-visible {
|
|
2795
3039
|
outline:2px solid transparent;
|
|
2796
3040
|
outline-offset:2px;
|
|
2797
3041
|
}
|
|
2798
3042
|
.ndl-datepicker .react-datepicker__week .react-datepicker__day--range-start,
|
|
2799
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--selecting-range-start
|
|
2800
|
-
.ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--range-start,
|
|
2801
|
-
.ndl-datepicker-popper .react-datepicker__week .react-datepicker__day--selecting-range-start {
|
|
3043
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--selecting-range-start {
|
|
2802
3044
|
border-top-left-radius:8px;
|
|
2803
3045
|
border-bottom-left-radius:8px;
|
|
2804
3046
|
background-color:var(--theme-color-primary-bg-strong);
|
|
2805
3047
|
color:var(--theme-color-neutral-text-inverse);
|
|
2806
3048
|
}
|
|
2807
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--range-start:hover, .ndl-datepicker .react-datepicker__week .react-datepicker__day--selecting-range-start:hover
|
|
3049
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--range-start:hover, .ndl-datepicker .react-datepicker__week .react-datepicker__day--selecting-range-start:hover {
|
|
2808
3050
|
background-color:var(--theme-color-primary-hover-strong);
|
|
2809
3051
|
}
|
|
2810
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--range-end
|
|
3052
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--range-end {
|
|
2811
3053
|
border-top-right-radius:8px;
|
|
2812
3054
|
border-bottom-right-radius:8px;
|
|
2813
3055
|
background-color:var(--theme-color-primary-bg-strong);
|
|
2814
3056
|
color:var(--theme-color-neutral-text-inverse);
|
|
2815
3057
|
}
|
|
2816
|
-
.ndl-datepicker .react-datepicker__week .react-datepicker__day--range-end:hover
|
|
3058
|
+
.ndl-datepicker .react-datepicker__week .react-datepicker__day--range-end:hover {
|
|
2817
3059
|
background-color:var(--theme-color-primary-hover-strong);
|
|
2818
3060
|
}
|
|
2819
|
-
.ndl-datepicker .react-datepicker__monthPicker
|
|
3061
|
+
.ndl-datepicker .react-datepicker__monthPicker {
|
|
2820
3062
|
margin-top:8px;
|
|
2821
3063
|
gap:8px;
|
|
2822
3064
|
}
|
|
2823
|
-
.ndl-datepicker .react-datepicker__month-wrapper
|
|
3065
|
+
.ndl-datepicker .react-datepicker__month-wrapper {
|
|
2824
3066
|
display:grid;
|
|
2825
3067
|
width:100%;
|
|
2826
3068
|
grid-template-columns:repeat(3, minmax(0, 1fr));
|
|
2827
3069
|
gap:8px;
|
|
2828
3070
|
text-align:center;
|
|
2829
3071
|
}
|
|
2830
|
-
.ndl-datepicker .react-datepicker__month-text
|
|
3072
|
+
.ndl-datepicker .react-datepicker__month-text {
|
|
2831
3073
|
flex-grow:1;
|
|
2832
3074
|
flex-basis:0px;
|
|
2833
3075
|
cursor:pointer;
|
|
@@ -2839,10 +3081,7 @@ a.ndl-btn {
|
|
|
2839
3081
|
}
|
|
2840
3082
|
.ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
|
|
2841
3083
|
.ndl-datepicker .react-datepicker__month-text:focus,
|
|
2842
|
-
.ndl-datepicker .react-datepicker__month-text:focus-visible
|
|
2843
|
-
.ndl-datepicker-popper .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
|
|
2844
|
-
.ndl-datepicker-popper .react-datepicker__month-text:focus,
|
|
2845
|
-
.ndl-datepicker-popper .react-datepicker__month-text:focus-visible {
|
|
3084
|
+
.ndl-datepicker .react-datepicker__month-text:focus-visible {
|
|
2846
3085
|
color:var(--theme-color-primary-text);
|
|
2847
3086
|
outline:2px solid transparent;
|
|
2848
3087
|
outline-offset:2px;
|
|
@@ -2851,17 +3090,17 @@ a.ndl-btn {
|
|
|
2851
3090
|
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2852
3091
|
--tw-ring-color:var(--theme-color-primary-bg-strong);
|
|
2853
3092
|
}
|
|
2854
|
-
.ndl-datepicker .react-datepicker__month-text:hover
|
|
3093
|
+
.ndl-datepicker .react-datepicker__month-text:hover {
|
|
2855
3094
|
background-color:var(--theme-color-neutral-hover);
|
|
2856
3095
|
}
|
|
2857
|
-
.ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected
|
|
3096
|
+
.ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected {
|
|
2858
3097
|
background-color:var(--theme-color-primary-bg-strong);
|
|
2859
3098
|
color:var(--theme-color-neutral-text-inverse);
|
|
2860
3099
|
}
|
|
2861
|
-
.ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected:hover
|
|
3100
|
+
.ndl-datepicker .react-datepicker__month-text.react-datepicker__month-text--selected:hover {
|
|
2862
3101
|
background-color:var(--theme-color-primary-hover-strong);
|
|
2863
3102
|
}
|
|
2864
|
-
.ndl-datepicker .react-datepicker__year-wrapper
|
|
3103
|
+
.ndl-datepicker .react-datepicker__year-wrapper {
|
|
2865
3104
|
margin-top:16px;
|
|
2866
3105
|
display:grid;
|
|
2867
3106
|
width:100%;
|
|
@@ -2869,20 +3108,17 @@ a.ndl-btn {
|
|
|
2869
3108
|
gap:8px;
|
|
2870
3109
|
text-align:center;
|
|
2871
3110
|
}
|
|
2872
|
-
.ndl-datepicker .react-datepicker__year-text
|
|
3111
|
+
.ndl-datepicker .react-datepicker__year-text {
|
|
2873
3112
|
cursor:pointer;
|
|
2874
3113
|
border-radius:8px;
|
|
2875
3114
|
line-height:32px;
|
|
2876
3115
|
}
|
|
2877
|
-
.ndl-datepicker .react-datepicker__year-text:hover
|
|
3116
|
+
.ndl-datepicker .react-datepicker__year-text:hover {
|
|
2878
3117
|
background-color:var(--theme-color-neutral-hover);
|
|
2879
3118
|
}
|
|
2880
3119
|
.ndl-datepicker .react-datepicker__year-text:focus,
|
|
2881
3120
|
.ndl-datepicker .react-datepicker__year-text:focus-visible,
|
|
2882
|
-
.ndl-datepicker .react-datepicker__year-text.react-datepicker__year-text--keyboard-selected
|
|
2883
|
-
.ndl-datepicker-popper .react-datepicker__year-text:focus,
|
|
2884
|
-
.ndl-datepicker-popper .react-datepicker__year-text:focus-visible,
|
|
2885
|
-
.ndl-datepicker-popper .react-datepicker__year-text.react-datepicker__year-text--keyboard-selected {
|
|
3121
|
+
.ndl-datepicker .react-datepicker__year-text.react-datepicker__year-text--keyboard-selected {
|
|
2886
3122
|
color:var(--theme-color-primary-text);
|
|
2887
3123
|
outline:2px solid transparent;
|
|
2888
3124
|
outline-offset:2px;
|
|
@@ -2891,29 +3127,26 @@ a.ndl-btn {
|
|
|
2891
3127
|
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2892
3128
|
--tw-ring-color:var(--theme-color-primary-bg-strong);
|
|
2893
3129
|
}
|
|
2894
|
-
.ndl-datepicker .react-datepicker__year-text--selected
|
|
3130
|
+
.ndl-datepicker .react-datepicker__year-text--selected {
|
|
2895
3131
|
background-color:var(--theme-color-primary-bg-strong);
|
|
2896
3132
|
color:var(--theme-color-neutral-text-inverse);
|
|
2897
3133
|
}
|
|
2898
|
-
.ndl-datepicker .react-datepicker__year-text--selected:hover
|
|
3134
|
+
.ndl-datepicker .react-datepicker__year-text--selected:hover {
|
|
2899
3135
|
background-color:var(--theme-color-primary-hover-strong);
|
|
2900
3136
|
}
|
|
2901
|
-
.ndl-datepicker .react-datepicker-time__caption
|
|
3137
|
+
.ndl-datepicker .react-datepicker-time__caption {
|
|
2902
3138
|
display:none;
|
|
2903
3139
|
}
|
|
2904
3140
|
.ndl-datepicker .react-datepicker__day--disabled,
|
|
2905
3141
|
.ndl-datepicker .react-datepicker__month-text--disabled,
|
|
2906
|
-
.ndl-datepicker .react-datepicker__year-text--disabled
|
|
2907
|
-
.ndl-datepicker-popper .react-datepicker__day--disabled,
|
|
2908
|
-
.ndl-datepicker-popper .react-datepicker__month-text--disabled,
|
|
2909
|
-
.ndl-datepicker-popper .react-datepicker__year-text--disabled {
|
|
3142
|
+
.ndl-datepicker .react-datepicker__year-text--disabled {
|
|
2910
3143
|
cursor:not-allowed;
|
|
2911
3144
|
color:var(--theme-color-neutral-text-weakest);
|
|
2912
3145
|
}
|
|
2913
|
-
.ndl-datepicker .react-datepicker__day--disabled:hover, .ndl-datepicker .react-datepicker__month-text--disabled:hover, .ndl-datepicker .react-datepicker__year-text--disabled:hover
|
|
3146
|
+
.ndl-datepicker .react-datepicker__day--disabled:hover, .ndl-datepicker .react-datepicker__month-text--disabled:hover, .ndl-datepicker .react-datepicker__year-text--disabled:hover {
|
|
2914
3147
|
background-color:transparent;
|
|
2915
3148
|
}
|
|
2916
|
-
.ndl-datepicker .react-datepicker__aria-live
|
|
3149
|
+
.ndl-datepicker .react-datepicker__aria-live{
|
|
2917
3150
|
position:absolute;
|
|
2918
3151
|
clip-path:circle(0);
|
|
2919
3152
|
border:0;
|
|
@@ -2932,12 +3165,6 @@ a.ndl-btn {
|
|
|
2932
3165
|
--tw-shadow-colored:var(--theme-shadow-overlay);
|
|
2933
3166
|
box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
2934
3167
|
}
|
|
2935
|
-
.ndl-dialog .ndl-dialog-content-wrapper {
|
|
2936
|
-
display:flex;
|
|
2937
|
-
height:100%;
|
|
2938
|
-
flex-wrap:nowrap;
|
|
2939
|
-
gap:32px;
|
|
2940
|
-
}
|
|
2941
3168
|
.ndl-dialog .ndl-dialog-type-icon {
|
|
2942
3169
|
width:88px;
|
|
2943
3170
|
}
|
|
@@ -2956,9 +3183,6 @@ a.ndl-btn {
|
|
|
2956
3183
|
.ndl-dialog.ndl-with-icon .ndl-dialog-image {
|
|
2957
3184
|
display:none;
|
|
2958
3185
|
}
|
|
2959
|
-
.ndl-dialog.ndl-with-icon .ndl-dialog-content-wrapper {
|
|
2960
|
-
margin-top:32px;
|
|
2961
|
-
}
|
|
2962
3186
|
.ndl-dialog .ndl-dialog-close {
|
|
2963
3187
|
position:absolute;
|
|
2964
3188
|
right:32px;
|
|
@@ -3109,30 +3333,18 @@ a.ndl-btn {
|
|
|
3109
3333
|
.ndl-popover-backdrop.ndl-allow-click-event-captured{
|
|
3110
3334
|
pointer-events:none;
|
|
3111
3335
|
}
|
|
3112
|
-
.ndl-modal-root
|
|
3336
|
+
.ndl-modal-root{
|
|
3113
3337
|
position:fixed;
|
|
3114
|
-
top:
|
|
3115
|
-
left:
|
|
3116
|
-
bottom:
|
|
3117
|
-
right:
|
|
3118
|
-
z-index:60;
|
|
3119
|
-
}
|
|
3120
|
-
.ndl-modal-root.ndl-modal-container {
|
|
3121
|
-
position:absolute;
|
|
3338
|
+
top:0;
|
|
3339
|
+
left:0;
|
|
3340
|
+
bottom:0;
|
|
3341
|
+
right:0;
|
|
3122
3342
|
}
|
|
3343
|
+
.ndl-modal-root.ndl-modal-container{
|
|
3344
|
+
position:absolute;
|
|
3345
|
+
}
|
|
3123
3346
|
.ndl-modal-root {
|
|
3124
|
-
|
|
3125
|
-
overflow-y:auto;
|
|
3126
|
-
overflow-x:hidden;
|
|
3127
|
-
text-align:center;
|
|
3128
|
-
}
|
|
3129
|
-
.ndl-modal-root:after {
|
|
3130
|
-
display:inline-block;
|
|
3131
|
-
height:100%;
|
|
3132
|
-
width:0px;
|
|
3133
|
-
vertical-align:middle;
|
|
3134
|
-
--tw-content:'';
|
|
3135
|
-
content:var(--tw-content);
|
|
3347
|
+
z-index:60;
|
|
3136
3348
|
}
|
|
3137
3349
|
.ndl-modal-backdrop {
|
|
3138
3350
|
position:absolute;
|
|
@@ -3151,11 +3363,11 @@ a.ndl-btn {
|
|
|
3151
3363
|
border-style:solid;
|
|
3152
3364
|
border-color:var(--theme-color-neutral-border-weak);
|
|
3153
3365
|
position:relative;
|
|
3154
|
-
margin:32px;
|
|
3155
|
-
display:inline-block;
|
|
3156
3366
|
overflow-y:auto;
|
|
3157
|
-
|
|
3367
|
+
display:inline-block;
|
|
3158
3368
|
vertical-align:middle;
|
|
3369
|
+
text-align:left;
|
|
3370
|
+
margin:32px;
|
|
3159
3371
|
width:-moz-available;
|
|
3160
3372
|
width:-webkit-fill-available;
|
|
3161
3373
|
}
|
|
@@ -3168,6 +3380,18 @@ a.ndl-btn {
|
|
|
3168
3380
|
.ndl-modal.ndl-large{
|
|
3169
3381
|
max-width:60rem;
|
|
3170
3382
|
}
|
|
3383
|
+
.ndl-modal-wrapper{
|
|
3384
|
+
height:100%;
|
|
3385
|
+
overflow:hidden auto;
|
|
3386
|
+
text-align:center;
|
|
3387
|
+
}
|
|
3388
|
+
.ndl-modal-wrapper:after{
|
|
3389
|
+
content:'';
|
|
3390
|
+
display:inline-block;
|
|
3391
|
+
vertical-align:middle;
|
|
3392
|
+
height:100%;
|
|
3393
|
+
width:0;
|
|
3394
|
+
}
|
|
3171
3395
|
.ndl-segmented-control{
|
|
3172
3396
|
--segmented-control-height:32px;
|
|
3173
3397
|
--segmented-control-item-padding-x:calc(var(--space-8) - 1px);
|
|
@@ -4568,6 +4792,59 @@ a.ndl-btn {
|
|
|
4568
4792
|
outline:2px solid transparent;
|
|
4569
4793
|
outline-offset:2px;
|
|
4570
4794
|
}
|
|
4795
|
+
.ndl-widget {
|
|
4796
|
+
position:relative;
|
|
4797
|
+
display:flex;
|
|
4798
|
+
flex-direction:column;
|
|
4799
|
+
gap:8px;
|
|
4800
|
+
border-radius:8px;
|
|
4801
|
+
background-color:var(--theme-color-neutral-bg-weak);
|
|
4802
|
+
outline:2px solid transparent;
|
|
4803
|
+
outline-offset:2px;
|
|
4804
|
+
}
|
|
4805
|
+
.ndl-widget.ndl-elevated {
|
|
4806
|
+
--tw-shadow:var(--theme-shadow-overlay);
|
|
4807
|
+
--tw-shadow-colored:var(--theme-shadow-overlay);
|
|
4808
|
+
box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
4809
|
+
}
|
|
4810
|
+
.ndl-widget .ndl-header-wrapper {
|
|
4811
|
+
display:flex;
|
|
4812
|
+
align-items:center;
|
|
4813
|
+
justify-content:space-between;
|
|
4814
|
+
}
|
|
4815
|
+
.ndl-widget .ndl-header-wrapper .ndl-header {
|
|
4816
|
+
color:var(--theme-color-neutral-text-default);
|
|
4817
|
+
font:var(--typography-title-4);
|
|
4818
|
+
letter-spacing:var(--typography-title-4-letter-spacing);
|
|
4819
|
+
font-family:var(--typography-title-4-font-family), sans-serif;
|
|
4820
|
+
}
|
|
4821
|
+
.ndl-widget .ndl-header-wrapper .ndl-subheader {
|
|
4822
|
+
color:var(--theme-color-neutral-text-weak);
|
|
4823
|
+
font:var(--typography-body-medium);
|
|
4824
|
+
letter-spacing:var(--typography-body-medium-letter-spacing);
|
|
4825
|
+
font-family:var(--typography-body-medium-font-family), sans-serif;
|
|
4826
|
+
}
|
|
4827
|
+
.ndl-widget .ndl-header-wrapper .ndl-header-leading {
|
|
4828
|
+
display:flex;
|
|
4829
|
+
align-items:flex-start;
|
|
4830
|
+
}
|
|
4831
|
+
.ndl-widget .ndl-header-wrapper p{
|
|
4832
|
+
font:var(--typography-body-medium);
|
|
4833
|
+
letter-spacing:var(--typography-body-medium-letter-spacing);
|
|
4834
|
+
font-family:var(--typography-body-medium-font-family), sans-serif;
|
|
4835
|
+
}
|
|
4836
|
+
.ndl-widget.ndl-leading-menu .ndl-headers {
|
|
4837
|
+
margin-left:8px;
|
|
4838
|
+
}
|
|
4839
|
+
.ndl-widget .ndl-resize-handle {
|
|
4840
|
+
position:absolute;
|
|
4841
|
+
bottom:0px;
|
|
4842
|
+
right:0px;
|
|
4843
|
+
width:20px;
|
|
4844
|
+
height:20px;
|
|
4845
|
+
cursor:se-resize;
|
|
4846
|
+
color:#a8acb2ff;
|
|
4847
|
+
}
|
|
4571
4848
|
.ndl-wizard .ndl-wizard-step-incomplete {
|
|
4572
4849
|
color:var(--theme-color-neutral-text-weaker);
|
|
4573
4850
|
}
|
|
@@ -7840,7 +8117,6 @@ button.ndl-avatar:focus-visible {
|
|
|
7840
8117
|
--side-nav-width-expanded:192px;
|
|
7841
8118
|
--side-nav-width:var(--side-nav-width-collapsed);
|
|
7842
8119
|
--ndl-side-nav-divider-left-margin:var(--space-8);
|
|
7843
|
-
--ndl-side-nav-category-menu-z-index:60;
|
|
7844
8120
|
|
|
7845
8121
|
z-index:1;
|
|
7846
8122
|
}
|
|
@@ -7873,6 +8149,7 @@ button.ndl-avatar:focus-visible {
|
|
|
7873
8149
|
position:relative;
|
|
7874
8150
|
}
|
|
7875
8151
|
.ndl-side-nav.ndl-side-nav-popover {
|
|
8152
|
+
z-index:60;
|
|
7876
8153
|
border-radius:12px;
|
|
7877
8154
|
border-width:1px;
|
|
7878
8155
|
border-color:var(--theme-color-neutral-border-weak);
|
|
@@ -7880,8 +8157,8 @@ button.ndl-avatar:focus-visible {
|
|
|
7880
8157
|
--tw-shadow:var(--theme-shadow-overlay);
|
|
7881
8158
|
--tw-shadow-colored:var(--theme-shadow-overlay);
|
|
7882
8159
|
box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
7883
|
-
|
|
7884
|
-
|
|
8160
|
+
|
|
8161
|
+
width:220px;
|
|
7885
8162
|
}
|
|
7886
8163
|
.ndl-side-nav.ndl-side-nav-popover.ndl-side-nav-popover-list {
|
|
7887
8164
|
display:flex;
|
|
@@ -7892,9 +8169,6 @@ button.ndl-avatar:focus-visible {
|
|
|
7892
8169
|
padding-left:0px;
|
|
7893
8170
|
padding-right:8px;
|
|
7894
8171
|
}
|
|
7895
|
-
.ndl-side-nav.ndl-side-nav-category-menu-tooltip-content{
|
|
7896
|
-
z-index:calc(var(--ndl-side-nav-category-menu-z-index) + 1);
|
|
7897
|
-
}
|
|
7898
8172
|
.ndl-side-nav .ndl-side-nav-inner {
|
|
7899
8173
|
position:relative;
|
|
7900
8174
|
z-index:20;
|
|
@@ -8327,342 +8601,6 @@ button.ndl-avatar:focus-visible {
|
|
|
8327
8601
|
.ndl-tooltip-content-simple .ndl-kbd .ndl-kbd-key {
|
|
8328
8602
|
border-color:var(--theme-color-neutral-border-strongest);
|
|
8329
8603
|
}
|
|
8330
|
-
.ndl-checkbox-label {
|
|
8331
|
-
display:inline-flex;
|
|
8332
|
-
align-items:center;
|
|
8333
|
-
-moz-column-gap:8px;
|
|
8334
|
-
column-gap:8px;
|
|
8335
|
-
color:var(--theme-color-neutral-text-default);
|
|
8336
|
-
font:var(--typography-body-medium);
|
|
8337
|
-
letter-spacing:var(--typography-body-medium-letter-spacing);
|
|
8338
|
-
font-family:var(--typography-body-medium-font-family), sans-serif;
|
|
8339
|
-
line-height:0;
|
|
8340
|
-
}
|
|
8341
|
-
.ndl-checkbox-label.ndl-fluid {
|
|
8342
|
-
display:flex;
|
|
8343
|
-
width:100%;
|
|
8344
|
-
}
|
|
8345
|
-
.ndl-checkbox-label:has(.ndl-checkbox:disabled) .ndl-checkbox-label-text {
|
|
8346
|
-
cursor:not-allowed;
|
|
8347
|
-
color:var(--theme-color-neutral-text-weakest);
|
|
8348
|
-
}
|
|
8349
|
-
.ndl-checkbox {
|
|
8350
|
-
position:relative;
|
|
8351
|
-
width:16px;
|
|
8352
|
-
height:16px;
|
|
8353
|
-
flex-shrink:0;
|
|
8354
|
-
cursor:pointer;
|
|
8355
|
-
-webkit-appearance:none;
|
|
8356
|
-
-moz-appearance:none;
|
|
8357
|
-
appearance:none;
|
|
8358
|
-
border-radius:4px;
|
|
8359
|
-
border-width:1px;
|
|
8360
|
-
border-style:solid;
|
|
8361
|
-
border-color:var(--theme-color-neutral-border-strongest);
|
|
8362
|
-
}
|
|
8363
|
-
.ndl-checkbox:checked {
|
|
8364
|
-
border-color:var(--theme-color-primary-icon);
|
|
8365
|
-
background-color:var(--theme-color-primary-icon);
|
|
8366
|
-
}
|
|
8367
|
-
.ndl-checkbox:disabled {
|
|
8368
|
-
cursor:not-allowed;
|
|
8369
|
-
border-color:var(--theme-color-neutral-border-strong);
|
|
8370
|
-
}
|
|
8371
|
-
.ndl-checkbox:disabled:checked {
|
|
8372
|
-
border-color:var(--theme-color-neutral-bg-stronger);
|
|
8373
|
-
background-color:var(--theme-color-neutral-bg-stronger);
|
|
8374
|
-
}
|
|
8375
|
-
.ndl-checkbox {
|
|
8376
|
-
box-shadow:0 0 0 0 transparent;
|
|
8377
|
-
transition:box-shadow var(--motion-transition-quick);
|
|
8378
|
-
}
|
|
8379
|
-
.ndl-checkbox:not(:disabled):hover{
|
|
8380
|
-
box-shadow:0 0 0 4px var(--theme-color-neutral-hover);
|
|
8381
|
-
}
|
|
8382
|
-
.ndl-checkbox:not(:disabled):hover:active:not(:checked){
|
|
8383
|
-
box-shadow:0 0 0 4px var(--theme-color-neutral-pressed);
|
|
8384
|
-
}
|
|
8385
|
-
.ndl-checkbox:not(:disabled):hover:checked:not(:active){
|
|
8386
|
-
box-shadow:0 0 0 4px var(--theme-color-primary-hover-weak);
|
|
8387
|
-
}
|
|
8388
|
-
.ndl-checkbox:not(:disabled):hover:active:checked{
|
|
8389
|
-
box-shadow:0 0 0 4px var(--theme-color-primary-pressed-weak);
|
|
8390
|
-
}
|
|
8391
|
-
.ndl-checkbox:focus-visible {
|
|
8392
|
-
outline-style:solid;
|
|
8393
|
-
outline-width:2px;
|
|
8394
|
-
outline-offset:0px;
|
|
8395
|
-
outline-color:var(--theme-color-primary-focus);
|
|
8396
|
-
}
|
|
8397
|
-
.ndl-checkbox::after{
|
|
8398
|
-
font-size:14px;
|
|
8399
|
-
width:100%;
|
|
8400
|
-
position:absolute;
|
|
8401
|
-
top:-0.5px;
|
|
8402
|
-
color:#fff;
|
|
8403
|
-
}
|
|
8404
|
-
.ndl-checkbox:checked::after{
|
|
8405
|
-
content:'';
|
|
8406
|
-
width:100%;
|
|
8407
|
-
height:100%;
|
|
8408
|
-
background-color:var(--theme-color-neutral-text-inverse);
|
|
8409
|
-
transition:opacity var(--motion-transition-quick);
|
|
8410
|
-
-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6.5L5 10.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
8411
|
-
mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6.5L5 10.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
8412
|
-
-webkit-mask-repeat:no-repeat;
|
|
8413
|
-
mask-repeat:no-repeat;
|
|
8414
|
-
-webkit-mask-size:12px;
|
|
8415
|
-
mask-size:12px;
|
|
8416
|
-
-webkit-mask-position:calc(100% - 1px) 2px;
|
|
8417
|
-
mask-position:calc(100% - 1px) 2px;
|
|
8418
|
-
}
|
|
8419
|
-
.ndl-checkbox:indeterminate {
|
|
8420
|
-
border-color:var(--theme-color-primary-bg-strong);
|
|
8421
|
-
background-color:var(--theme-color-primary-bg-strong);
|
|
8422
|
-
}
|
|
8423
|
-
.ndl-checkbox:indeterminate::after{
|
|
8424
|
-
content:'';
|
|
8425
|
-
width:100%;
|
|
8426
|
-
height:2px;
|
|
8427
|
-
background-color:var(--theme-color-neutral-text-inverse);
|
|
8428
|
-
transition:opacity var(--motion-transition-quick);
|
|
8429
|
-
-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='12' height='2' viewBox='0 0 12 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.33333 1H10.6667' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
8430
|
-
mask-image:url("data:image/svg+xml,%3Csvg width='12' height='2' viewBox='0 0 12 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.33333 1H10.6667' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
8431
|
-
-webkit-mask-repeat:no-repeat;
|
|
8432
|
-
mask-repeat:no-repeat;
|
|
8433
|
-
-webkit-mask-size:12px;
|
|
8434
|
-
mask-size:12px;
|
|
8435
|
-
top:50%;
|
|
8436
|
-
-webkit-mask-position:calc(100% - 1px) 0;
|
|
8437
|
-
mask-position:calc(100% - 1px) 0;
|
|
8438
|
-
transform:translateY(-50%);
|
|
8439
|
-
}
|
|
8440
|
-
.ndl-radio-label {
|
|
8441
|
-
display:inline-flex;
|
|
8442
|
-
max-width:100%;
|
|
8443
|
-
align-items:center;
|
|
8444
|
-
-moz-column-gap:8px;
|
|
8445
|
-
column-gap:8px;
|
|
8446
|
-
color:var(--theme-color-neutral-text-default);
|
|
8447
|
-
font:var(--typography-body-medium);
|
|
8448
|
-
letter-spacing:var(--typography-body-medium-letter-spacing);
|
|
8449
|
-
font-family:var(--typography-body-medium-font-family), sans-serif;
|
|
8450
|
-
}
|
|
8451
|
-
.ndl-radio-label.ndl-fluid {
|
|
8452
|
-
display:flex;
|
|
8453
|
-
width:100%;
|
|
8454
|
-
}
|
|
8455
|
-
.ndl-radio-label:has(.ndl-radio:disabled) .ndl-radio-label-text {
|
|
8456
|
-
cursor:not-allowed;
|
|
8457
|
-
color:var(--theme-color-neutral-text-weakest);
|
|
8458
|
-
}
|
|
8459
|
-
.ndl-radio-label .ndl-radio-label-text {
|
|
8460
|
-
flex-grow:1;
|
|
8461
|
-
flex-basis:0px;
|
|
8462
|
-
overflow:hidden;
|
|
8463
|
-
text-overflow:ellipsis;
|
|
8464
|
-
text-wrap:nowrap;
|
|
8465
|
-
}
|
|
8466
|
-
.ndl-radio {
|
|
8467
|
-
position:relative;
|
|
8468
|
-
width:16px;
|
|
8469
|
-
height:16px;
|
|
8470
|
-
flex-shrink:0;
|
|
8471
|
-
cursor:pointer;
|
|
8472
|
-
-webkit-appearance:none;
|
|
8473
|
-
-moz-appearance:none;
|
|
8474
|
-
appearance:none;
|
|
8475
|
-
border-radius:9999px;
|
|
8476
|
-
border-width:1px;
|
|
8477
|
-
border-style:solid;
|
|
8478
|
-
border-color:var(--theme-color-neutral-text-weaker);
|
|
8479
|
-
}
|
|
8480
|
-
.ndl-radio.ndl-disabled {
|
|
8481
|
-
cursor:not-allowed;
|
|
8482
|
-
border-color:var(--theme-color-neutral-text-weakest);
|
|
8483
|
-
}
|
|
8484
|
-
.ndl-radio.ndl-disabled:checked {
|
|
8485
|
-
background-color:var(--theme-color-neutral-text-weakest);
|
|
8486
|
-
}
|
|
8487
|
-
.ndl-radio:checked {
|
|
8488
|
-
border-width:2px;
|
|
8489
|
-
border-color:var(--theme-color-primary-icon);
|
|
8490
|
-
background-color:var(--theme-color-primary-icon);
|
|
8491
|
-
}
|
|
8492
|
-
.ndl-radio {
|
|
8493
|
-
|
|
8494
|
-
box-shadow:0 0 0 0 transparent;
|
|
8495
|
-
transition:box-shadow var(--motion-transition-quick);
|
|
8496
|
-
}
|
|
8497
|
-
.ndl-radio:not(:disabled):not(:checked):hover{
|
|
8498
|
-
box-shadow:0 0 0 4px var(--theme-color-neutral-hover);
|
|
8499
|
-
}
|
|
8500
|
-
.ndl-radio:not(:disabled):not(:checked):active{
|
|
8501
|
-
box-shadow:0 0 0 4px var(--theme-color-neutral-pressed);
|
|
8502
|
-
}
|
|
8503
|
-
.ndl-radio:focus-visible {
|
|
8504
|
-
outline-style:solid;
|
|
8505
|
-
outline-width:2px;
|
|
8506
|
-
outline-offset:0px;
|
|
8507
|
-
outline-color:var(--theme-color-primary-focus);
|
|
8508
|
-
}
|
|
8509
|
-
.ndl-radio:checked::after{
|
|
8510
|
-
content:'';
|
|
8511
|
-
border:2px solid var(--theme-color-neutral-bg-default);
|
|
8512
|
-
width:100%;
|
|
8513
|
-
height:100%;
|
|
8514
|
-
position:absolute;
|
|
8515
|
-
left:0;
|
|
8516
|
-
border-radius:9999px;
|
|
8517
|
-
top:0;
|
|
8518
|
-
}
|
|
8519
|
-
.ndl-switch-label {
|
|
8520
|
-
display:inline-flex;
|
|
8521
|
-
align-items:center;
|
|
8522
|
-
-moz-column-gap:8px;
|
|
8523
|
-
column-gap:8px;
|
|
8524
|
-
color:var(--theme-color-neutral-text-default);
|
|
8525
|
-
font:var(--typography-body-medium);
|
|
8526
|
-
letter-spacing:var(--typography-body-medium-letter-spacing);
|
|
8527
|
-
font-family:var(--typography-body-medium-font-family), sans-serif;
|
|
8528
|
-
}
|
|
8529
|
-
.ndl-switch-label.ndl-fluid {
|
|
8530
|
-
display:flex;
|
|
8531
|
-
width:100%;
|
|
8532
|
-
}
|
|
8533
|
-
.ndl-switch-label:has(.ndl-switch:disabled) .ndl-switch-label-text {
|
|
8534
|
-
cursor:not-allowed;
|
|
8535
|
-
color:var(--theme-color-neutral-text-weakest);
|
|
8536
|
-
}
|
|
8537
|
-
.ndl-switch{
|
|
8538
|
-
--thumb-size:12px;
|
|
8539
|
-
--track-height:20px;
|
|
8540
|
-
--track-width:36px;
|
|
8541
|
-
--track-padding-left:3px;
|
|
8542
|
-
--track-padding-right:1px;
|
|
8543
|
-
--switch-checkmark-color:var(--theme-color-primary-text);
|
|
8544
|
-
position:relative;
|
|
8545
|
-
display:grid;
|
|
8546
|
-
width:16px;
|
|
8547
|
-
height:16px;
|
|
8548
|
-
flex-shrink:0;
|
|
8549
|
-
cursor:pointer;
|
|
8550
|
-
-webkit-appearance:none;
|
|
8551
|
-
-moz-appearance:none;
|
|
8552
|
-
appearance:none;
|
|
8553
|
-
align-items:center;
|
|
8554
|
-
border-radius:9999px;
|
|
8555
|
-
border-width:1px;
|
|
8556
|
-
border-style:solid;
|
|
8557
|
-
border-color:var(--theme-color-neutral-border-strongest);
|
|
8558
|
-
background-color:var(--theme-color-neutral-bg-weak);
|
|
8559
|
-
|
|
8560
|
-
grid:[track] 1fr / [track] 1fr;
|
|
8561
|
-
padding-left:var(--track-padding-left);
|
|
8562
|
-
padding-right:var(--track-padding-right);
|
|
8563
|
-
touch-action:pan-y;
|
|
8564
|
-
pointer-events:auto;
|
|
8565
|
-
box-sizing:border-box;
|
|
8566
|
-
transition:background-color var(--motion-transition-quick), box-shadow var(--motion-transition-quick);
|
|
8567
|
-
box-shadow:0 0 0 0 transparent;
|
|
8568
|
-
|
|
8569
|
-
inline-size:var(--track-width);
|
|
8570
|
-
block-size:var(--track-width);
|
|
8571
|
-
height:var(--track-height);
|
|
8572
|
-
}
|
|
8573
|
-
.ndl-switch:disabled {
|
|
8574
|
-
cursor:not-allowed;
|
|
8575
|
-
border-color:var(--theme-color-neutral-bg-strong);
|
|
8576
|
-
background-color:var(--theme-color-neutral-bg-strong);
|
|
8577
|
-
outline-width:0px;
|
|
8578
|
-
}
|
|
8579
|
-
.ndl-switch:not(:disabled):hover:checked{
|
|
8580
|
-
box-shadow:0 0 0 4px var(--theme-color-primary-hover-weak);
|
|
8581
|
-
}
|
|
8582
|
-
.ndl-switch:not(:disabled):hover:not(:checked){
|
|
8583
|
-
box-shadow:0 0 0 4px var(--theme-color-neutral-hover);
|
|
8584
|
-
}
|
|
8585
|
-
.ndl-switch:not(:disabled):hover:active:not(:checked){
|
|
8586
|
-
box-shadow:0 0 0 4px var(--theme-color-neutral-pressed);
|
|
8587
|
-
}
|
|
8588
|
-
.ndl-switch:not(:disabled):hover:active:checked{
|
|
8589
|
-
box-shadow:0 0 0 4px var(--theme-color-primary-pressed-weak);
|
|
8590
|
-
}
|
|
8591
|
-
.ndl-switch:not(:disabled):hover:focus-visible {
|
|
8592
|
-
outline-style:solid;
|
|
8593
|
-
outline-width:2px;
|
|
8594
|
-
outline-offset:0px;
|
|
8595
|
-
outline-color:var(--theme-color-primary-focus);
|
|
8596
|
-
}
|
|
8597
|
-
.ndl-switch::before{
|
|
8598
|
-
inline-size:var(--thumb-size);
|
|
8599
|
-
block-size:var(--thumb-size);
|
|
8600
|
-
|
|
8601
|
-
transition:transform var(--motion-transition-quick), width var(--motion-transition-quick), height var(--motion-transition-quick), background-color var(--motion-transition-quick);
|
|
8602
|
-
content:'';
|
|
8603
|
-
grid-area:track;
|
|
8604
|
-
transform:translateX(0);
|
|
8605
|
-
border-radius:9999px;
|
|
8606
|
-
background-color:var(--theme-color-neutral-bg-weak);
|
|
8607
|
-
}
|
|
8608
|
-
.ndl-switch:not(:disabled):not(:checked)::before {
|
|
8609
|
-
background-color:var(--theme-color-neutral-bg-stronger);
|
|
8610
|
-
}
|
|
8611
|
-
.ndl-switch:disabled::before{
|
|
8612
|
-
box-shadow:none;
|
|
8613
|
-
}
|
|
8614
|
-
.ndl-switch::after{
|
|
8615
|
-
content:'';
|
|
8616
|
-
opacity:0;
|
|
8617
|
-
}
|
|
8618
|
-
.ndl-switch:checked::after{
|
|
8619
|
-
content:'';
|
|
8620
|
-
opacity:1;
|
|
8621
|
-
position:absolute;
|
|
8622
|
-
top:50%;
|
|
8623
|
-
left:calc(
|
|
8624
|
-
var(--track-padding-left) + var(--track-width) - var(--thumb-size) -
|
|
8625
|
-
(var(--track-padding-left) + 1px) - (var(--track-padding-right) + 1px) +
|
|
8626
|
-
var(--thumb-size) / 2
|
|
8627
|
-
);
|
|
8628
|
-
transform:translate(-50%, -50%);
|
|
8629
|
-
width:12px;
|
|
8630
|
-
height:12px;
|
|
8631
|
-
background-color:var(--switch-checkmark-color);
|
|
8632
|
-
-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
8633
|
-
mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
8634
|
-
-webkit-mask-repeat:no-repeat;
|
|
8635
|
-
mask-repeat:no-repeat;
|
|
8636
|
-
-webkit-mask-size:12px;
|
|
8637
|
-
mask-size:12px;
|
|
8638
|
-
-webkit-mask-position:center;
|
|
8639
|
-
mask-position:center;
|
|
8640
|
-
}
|
|
8641
|
-
.ndl-switch:checked {
|
|
8642
|
-
border-color:var(--theme-color-primary-icon);
|
|
8643
|
-
background-color:var(--theme-color-primary-icon);
|
|
8644
|
-
--thumb-size:16px;
|
|
8645
|
-
}
|
|
8646
|
-
.ndl-switch:checked::before{
|
|
8647
|
-
transform:translateX(
|
|
8648
|
-
calc(
|
|
8649
|
-
var(--track-width) - var(--thumb-size) -
|
|
8650
|
-
(var(--track-padding-left) + 1px) -
|
|
8651
|
-
(var(--track-padding-right) + 1px)
|
|
8652
|
-
)
|
|
8653
|
-
);
|
|
8654
|
-
}
|
|
8655
|
-
.ndl-switch:indeterminate::before{
|
|
8656
|
-
transform:translateX(
|
|
8657
|
-
calc(
|
|
8658
|
-
(
|
|
8659
|
-
var(--track-width) - var(--thumb-size) -
|
|
8660
|
-
(var(--track-padding-left) + 1px) * 2
|
|
8661
|
-
) *
|
|
8662
|
-
0.5
|
|
8663
|
-
)
|
|
8664
|
-
);
|
|
8665
|
-
}
|
|
8666
8604
|
.n-fixed {
|
|
8667
8605
|
position:fixed;
|
|
8668
8606
|
}
|
|
@@ -8793,6 +8731,10 @@ button.ndl-avatar:focus-visible {
|
|
|
8793
8731
|
width:20px;
|
|
8794
8732
|
height:20px;
|
|
8795
8733
|
}
|
|
8734
|
+
.n-size-6 {
|
|
8735
|
+
width:24px;
|
|
8736
|
+
height:24px;
|
|
8737
|
+
}
|
|
8796
8738
|
.n-size-full {
|
|
8797
8739
|
width:100%;
|
|
8798
8740
|
height:100%;
|
|
@@ -8939,6 +8881,9 @@ button.ndl-avatar:focus-visible {
|
|
|
8939
8881
|
.n-shrink-0 {
|
|
8940
8882
|
flex-shrink:0;
|
|
8941
8883
|
}
|
|
8884
|
+
.n-flex-grow {
|
|
8885
|
+
flex-grow:1;
|
|
8886
|
+
}
|
|
8942
8887
|
.n-table-auto {
|
|
8943
8888
|
table-layout:auto;
|
|
8944
8889
|
}
|
|
@@ -8956,6 +8901,9 @@ button.ndl-avatar:focus-visible {
|
|
|
8956
8901
|
.n-transform {
|
|
8957
8902
|
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
8958
8903
|
}
|
|
8904
|
+
.n-cursor-grab {
|
|
8905
|
+
cursor:grab;
|
|
8906
|
+
}
|
|
8959
8907
|
.n-cursor-pointer {
|
|
8960
8908
|
cursor:pointer;
|
|
8961
8909
|
}
|
|
@@ -8989,6 +8937,9 @@ button.ndl-avatar:focus-visible {
|
|
|
8989
8937
|
.n-flex-wrap {
|
|
8990
8938
|
flex-wrap:wrap;
|
|
8991
8939
|
}
|
|
8940
|
+
.n-flex-nowrap {
|
|
8941
|
+
flex-wrap:nowrap;
|
|
8942
|
+
}
|
|
8992
8943
|
.n-place-items-center {
|
|
8993
8944
|
place-items:center;
|
|
8994
8945
|
}
|