@norges-domstoler/dds-components 0.0.0-dev-20260313135341 → 0.0.0-dev-20260313135554
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/dist/index.css +49 -10
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +29 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +54 -36
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -2030,6 +2030,7 @@
|
|
|
2030
2030
|
|
|
2031
2031
|
/* src/components/Toggle/Toggle.module.css */
|
|
2032
2032
|
:where(.Toggle_label) {
|
|
2033
|
+
cursor: pointer;
|
|
2033
2034
|
display: flex;
|
|
2034
2035
|
align-items: center;
|
|
2035
2036
|
width: -moz-fit-content;
|
|
@@ -2069,10 +2070,38 @@
|
|
|
2069
2070
|
}
|
|
2070
2071
|
.Toggle_thumb .Toggle_checkmark {
|
|
2071
2072
|
opacity: 0;
|
|
2073
|
+
color: var(--dds-color-icon-action-resting);
|
|
2072
2074
|
@media (prefers-reduced-motion: no-preference) {
|
|
2073
2075
|
transition: opacity var(--dds-motion-micro-state);
|
|
2074
2076
|
}
|
|
2075
2077
|
}
|
|
2078
|
+
.Toggle_thumb .Toggle_unchecked-icon {
|
|
2079
|
+
opacity: 1;
|
|
2080
|
+
position: absolute;
|
|
2081
|
+
color: var(--dds-color-icon-medium);
|
|
2082
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
2083
|
+
transition: opacity var(--dds-motion-micro-state);
|
|
2084
|
+
}
|
|
2085
|
+
}
|
|
2086
|
+
.Toggle_thumb .Toggle_checked-icon {
|
|
2087
|
+
opacity: 0;
|
|
2088
|
+
position: absolute;
|
|
2089
|
+
color: var(--dds-color-icon-medium);
|
|
2090
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
2091
|
+
transition: opacity var(--dds-motion-micro-state);
|
|
2092
|
+
}
|
|
2093
|
+
}
|
|
2094
|
+
.Toggle_label input:checked ~ .Toggle_track > .Toggle_thumb {
|
|
2095
|
+
.Toggle_checkmark {
|
|
2096
|
+
opacity: 1;
|
|
2097
|
+
}
|
|
2098
|
+
.Toggle_checked-icon {
|
|
2099
|
+
opacity: 1;
|
|
2100
|
+
}
|
|
2101
|
+
.Toggle_unchecked-icon {
|
|
2102
|
+
opacity: 0;
|
|
2103
|
+
}
|
|
2104
|
+
}
|
|
2076
2105
|
.Toggle_labeltext--readonly {
|
|
2077
2106
|
display: flex;
|
|
2078
2107
|
.Toggle_icon--read-only {
|
|
@@ -2126,23 +2155,18 @@
|
|
|
2126
2155
|
border-color: var(--dds-color-border-action-default);
|
|
2127
2156
|
& > .Toggle_thumb {
|
|
2128
2157
|
border-color: var(--dds-color-border-action-default);
|
|
2129
|
-
.Toggle_checkmark {
|
|
2130
|
-
color: var(--dds-color-icon-action-resting);
|
|
2131
|
-
opacity: 1;
|
|
2132
|
-
}
|
|
2133
2158
|
}
|
|
2134
2159
|
}
|
|
2135
2160
|
}
|
|
2136
|
-
.Toggle_label {
|
|
2137
|
-
|
|
2138
|
-
&:hover input:enabled:checked:not([aria-readonly=true]) ~ .Toggle_track {
|
|
2161
|
+
.Toggle_label:hover {
|
|
2162
|
+
input:enabled:checked:not([aria-readonly=true]) ~ .Toggle_track {
|
|
2139
2163
|
background-color: var(--dds-color-surface-action-hover);
|
|
2140
2164
|
border-color: var(--dds-color-border-action-hover);
|
|
2141
2165
|
.Toggle_thumb {
|
|
2142
2166
|
border-color: var(--dds-color-border-action-hover);
|
|
2143
2167
|
}
|
|
2144
2168
|
}
|
|
2145
|
-
|
|
2169
|
+
input:enabled:not([aria-readonly=true]) ~ .Toggle_track {
|
|
2146
2170
|
background-color: var(--dds-color-surface-hover-default);
|
|
2147
2171
|
border-color: var(--dds-color-border-action-hover);
|
|
2148
2172
|
.Toggle_thumb {
|
|
@@ -2153,6 +2177,17 @@
|
|
|
2153
2177
|
}
|
|
2154
2178
|
}
|
|
2155
2179
|
}
|
|
2180
|
+
.Toggle_label--color-scheme,
|
|
2181
|
+
.Toggle_label--color-scheme:hover {
|
|
2182
|
+
input:enabled:not([aria-readonly=true]) ~ .Toggle_track,
|
|
2183
|
+
input:checked:enabled:not([aria-readonly=true]) ~ .Toggle_track {
|
|
2184
|
+
background-color: var(--dds-color-surface-medium);
|
|
2185
|
+
border-color: var(--dds-color-border-default);
|
|
2186
|
+
.Toggle_thumb {
|
|
2187
|
+
border-color: var(--dds-color-border-default);
|
|
2188
|
+
}
|
|
2189
|
+
}
|
|
2190
|
+
}
|
|
2156
2191
|
.Toggle_label--disabled {
|
|
2157
2192
|
cursor: not-allowed;
|
|
2158
2193
|
color: var(--dds-color-text-subtle);
|
|
@@ -2167,7 +2202,12 @@
|
|
|
2167
2202
|
border-color: var(--dds-color-surface-action-selected-disabled);
|
|
2168
2203
|
.Toggle_checkmark {
|
|
2169
2204
|
color: var(--dds-color-icon-subtle);
|
|
2170
|
-
|
|
2205
|
+
}
|
|
2206
|
+
.Toggle_checked-icon {
|
|
2207
|
+
color: var(--dds-color-icon-subtle);
|
|
2208
|
+
}
|
|
2209
|
+
.Toggle_unchecked-icon {
|
|
2210
|
+
color: var(--dds-color-icon-subtle);
|
|
2171
2211
|
}
|
|
2172
2212
|
}
|
|
2173
2213
|
}
|
|
@@ -2185,7 +2225,6 @@
|
|
|
2185
2225
|
border-color: var(--dds-color-surface-inverse-default);
|
|
2186
2226
|
.Toggle_checkmark {
|
|
2187
2227
|
color: var(--dds-color-icon-medium);
|
|
2188
|
-
opacity: 1;
|
|
2189
2228
|
}
|
|
2190
2229
|
}
|
|
2191
2230
|
}
|