@kushagradhawan/kookie-ui 0.1.22 → 0.1.23
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/components.css +748 -612
- package/dist/cjs/components/_internal/base-checkbox.props.d.ts +2 -2
- package/dist/cjs/components/_internal/base-checkbox.props.js +1 -1
- package/dist/cjs/components/_internal/base-checkbox.props.js.map +2 -2
- package/dist/cjs/components/_internal/base-radio.props.d.ts +2 -2
- package/dist/cjs/components/_internal/base-radio.props.js +1 -1
- package/dist/cjs/components/_internal/base-radio.props.js.map +2 -2
- package/dist/cjs/components/checkbox-cards.d.ts.map +1 -1
- package/dist/cjs/components/checkbox-cards.js +1 -1
- package/dist/cjs/components/checkbox-cards.js.map +3 -3
- package/dist/cjs/components/checkbox-cards.props.d.ts +5 -0
- package/dist/cjs/components/checkbox-cards.props.d.ts.map +1 -1
- package/dist/cjs/components/checkbox-cards.props.js +1 -1
- package/dist/cjs/components/checkbox-cards.props.js.map +3 -3
- package/dist/cjs/components/checkbox-group.props.d.ts +2 -2
- package/dist/cjs/components/image.d.ts.map +1 -1
- package/dist/cjs/components/image.js +1 -1
- package/dist/cjs/components/image.js.map +2 -2
- package/dist/cjs/components/radio-cards.d.ts.map +1 -1
- package/dist/cjs/components/radio-cards.js +1 -1
- package/dist/cjs/components/radio-cards.js.map +3 -3
- package/dist/cjs/components/radio-cards.props.d.ts +5 -0
- package/dist/cjs/components/radio-cards.props.d.ts.map +1 -1
- package/dist/cjs/components/radio-cards.props.js +1 -1
- package/dist/cjs/components/radio-cards.props.js.map +3 -3
- package/dist/cjs/components/radio-group.props.d.ts +2 -2
- package/dist/cjs/components/radio-group.props.js +1 -1
- package/dist/cjs/components/radio-group.props.js.map +2 -2
- package/dist/cjs/components/segmented-control.props.d.ts +5 -0
- package/dist/cjs/components/segmented-control.props.d.ts.map +1 -1
- package/dist/cjs/components/segmented-control.props.js +1 -1
- package/dist/cjs/components/segmented-control.props.js.map +2 -2
- package/dist/esm/components/_internal/base-checkbox.props.d.ts +2 -2
- package/dist/esm/components/_internal/base-checkbox.props.js +1 -1
- package/dist/esm/components/_internal/base-checkbox.props.js.map +2 -2
- package/dist/esm/components/_internal/base-radio.props.d.ts +2 -2
- package/dist/esm/components/_internal/base-radio.props.js +1 -1
- package/dist/esm/components/_internal/base-radio.props.js.map +2 -2
- package/dist/esm/components/checkbox-cards.d.ts.map +1 -1
- package/dist/esm/components/checkbox-cards.js +1 -1
- package/dist/esm/components/checkbox-cards.js.map +3 -3
- package/dist/esm/components/checkbox-cards.props.d.ts +5 -0
- package/dist/esm/components/checkbox-cards.props.d.ts.map +1 -1
- package/dist/esm/components/checkbox-cards.props.js +1 -1
- package/dist/esm/components/checkbox-cards.props.js.map +3 -3
- package/dist/esm/components/checkbox-group.props.d.ts +2 -2
- package/dist/esm/components/image.d.ts.map +1 -1
- package/dist/esm/components/image.js +1 -1
- package/dist/esm/components/image.js.map +2 -2
- package/dist/esm/components/radio-cards.d.ts.map +1 -1
- package/dist/esm/components/radio-cards.js +1 -1
- package/dist/esm/components/radio-cards.js.map +3 -3
- package/dist/esm/components/radio-cards.props.d.ts +5 -0
- package/dist/esm/components/radio-cards.props.d.ts.map +1 -1
- package/dist/esm/components/radio-cards.props.js +1 -1
- package/dist/esm/components/radio-cards.props.js.map +3 -3
- package/dist/esm/components/radio-group.props.d.ts +2 -2
- package/dist/esm/components/radio-group.props.js +1 -1
- package/dist/esm/components/radio-group.props.js.map +2 -2
- package/dist/esm/components/segmented-control.props.d.ts +5 -0
- package/dist/esm/components/segmented-control.props.d.ts.map +1 -1
- package/dist/esm/components/segmented-control.props.js +1 -1
- package/dist/esm/components/segmented-control.props.js.map +2 -2
- package/package.json +1 -1
- package/src/components/_internal/base-button.css +1 -7
- package/src/components/_internal/base-card.css +31 -0
- package/src/components/_internal/base-checkbox.css +84 -24
- package/src/components/_internal/base-checkbox.props.ts +2 -2
- package/src/components/_internal/base-radio.css +68 -12
- package/src/components/_internal/base-radio.props.ts +2 -2
- package/src/components/badge.css +1 -1
- package/src/components/card.css +23 -60
- package/src/components/checkbox-cards.css +36 -14
- package/src/components/checkbox-cards.props.tsx +3 -0
- package/src/components/checkbox-cards.tsx +13 -6
- package/src/components/image.css +33 -9
- package/src/components/image.tsx +2 -1
- package/src/components/progress.css +29 -27
- package/src/components/radio-cards.css +33 -9
- package/src/components/radio-cards.props.tsx +3 -0
- package/src/components/radio-cards.tsx +10 -5
- package/src/components/radio-group.props.tsx +2 -2
- package/src/components/segmented-control.css +71 -26
- package/src/components/segmented-control.props.tsx +6 -0
- package/src/components/select.css +32 -32
- package/src/components/slider.css +19 -19
- package/src/components/switch.css +6 -6
- package/src/components/text-area.css +11 -11
- package/src/components/text-field.css +11 -11
- package/src/styles/tokens/constants.css +130 -15
- package/src/styles/tokens/transition.css +19 -0
- package/styles.css +827 -623
- package/tokens/base.css +8 -0
- package/tokens.css +79 -11
package/components.css
CHANGED
|
@@ -465,7 +465,7 @@
|
|
|
465
465
|
--scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
|
|
466
466
|
--scrollarea-scrollbar-vertical-margin-left: var(--space-1);
|
|
467
467
|
--scrollarea-scrollbar-vertical-margin-right: var(--space-1);
|
|
468
|
-
--segmented-control-transition-duration:
|
|
468
|
+
--segmented-control-transition-duration: var(--duration-1);
|
|
469
469
|
--spinner-animation-duration: 800ms;
|
|
470
470
|
--spinner-opacity: 0.65;
|
|
471
471
|
}
|
|
@@ -1959,8 +1959,11 @@
|
|
|
1959
1959
|
--base-card-surface-hover-box-shadow: 0 0 0 1px var(--gray-a7);
|
|
1960
1960
|
--base-card-surface-active-box-shadow: 0 0 0 1px var(--gray-a6);
|
|
1961
1961
|
--base-card-classic-box-shadow-outer: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6), 0 0 0 var(--classic-border-width) var(--gray-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
|
|
1962
|
+
--base-card-classic-box-shadow-inner: none;
|
|
1962
1963
|
--base-card-classic-hover-box-shadow-outer: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6), 0 0 0 var(--classic-border-width) var(--gray-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7), 0 0 0 var(--classic-border-width) var(--gray-a5);
|
|
1964
|
+
--base-card-classic-hover-box-shadow-inner: none;
|
|
1963
1965
|
--base-card-classic-active-box-shadow-outer: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
|
|
1966
|
+
--base-card-classic-active-box-shadow-inner: none;
|
|
1964
1967
|
--base-card-classic-border-color: var(--gray-a3);
|
|
1965
1968
|
--base-card-classic-hover-border-color: var(--gray-a3);
|
|
1966
1969
|
--base-card-classic-active-border-color: var(--gray-a4);
|
|
@@ -2008,7 +2011,7 @@
|
|
|
2008
2011
|
letter-spacing: var(--letter-spacing-0);
|
|
2009
2012
|
padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
|
|
2010
2013
|
gap: calc(var(--space-1) * 1.5);
|
|
2011
|
-
border-radius: max(var(--radius-1), var(--radius-full));
|
|
2014
|
+
border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
|
|
2012
2015
|
}
|
|
2013
2016
|
.rt-Badge:where(.rt-r-size-1):where(.rt-variant-ghost) {
|
|
2014
2017
|
padding: calc(var(--space-1) * 0.25) var(--space-1);
|
|
@@ -2045,7 +2048,7 @@
|
|
|
2045
2048
|
letter-spacing: var(--letter-spacing-0);
|
|
2046
2049
|
padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
|
|
2047
2050
|
gap: calc(var(--space-1) * 1.5);
|
|
2048
|
-
border-radius: max(var(--radius-1), var(--radius-full));
|
|
2051
|
+
border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
|
|
2049
2052
|
}
|
|
2050
2053
|
.rt-Badge:where(.xs\:rt-r-size-1):where(.rt-variant-ghost) {
|
|
2051
2054
|
padding: calc(var(--space-1) * 0.25) var(--space-1);
|
|
@@ -2083,7 +2086,7 @@
|
|
|
2083
2086
|
letter-spacing: var(--letter-spacing-0);
|
|
2084
2087
|
padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
|
|
2085
2088
|
gap: calc(var(--space-1) * 1.5);
|
|
2086
|
-
border-radius: max(var(--radius-1), var(--radius-full));
|
|
2089
|
+
border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
|
|
2087
2090
|
}
|
|
2088
2091
|
.rt-Badge:where(.sm\:rt-r-size-1):where(.rt-variant-ghost) {
|
|
2089
2092
|
padding: calc(var(--space-1) * 0.25) var(--space-1);
|
|
@@ -2121,7 +2124,7 @@
|
|
|
2121
2124
|
letter-spacing: var(--letter-spacing-0);
|
|
2122
2125
|
padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
|
|
2123
2126
|
gap: calc(var(--space-1) * 1.5);
|
|
2124
|
-
border-radius: max(var(--radius-1), var(--radius-full));
|
|
2127
|
+
border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
|
|
2125
2128
|
}
|
|
2126
2129
|
.rt-Badge:where(.md\:rt-r-size-1):where(.rt-variant-ghost) {
|
|
2127
2130
|
padding: calc(var(--space-1) * 0.25) var(--space-1);
|
|
@@ -2159,7 +2162,7 @@
|
|
|
2159
2162
|
letter-spacing: var(--letter-spacing-0);
|
|
2160
2163
|
padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
|
|
2161
2164
|
gap: calc(var(--space-1) * 1.5);
|
|
2162
|
-
border-radius: max(var(--radius-1), var(--radius-full));
|
|
2165
|
+
border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
|
|
2163
2166
|
}
|
|
2164
2167
|
.rt-Badge:where(.lg\:rt-r-size-1):where(.rt-variant-ghost) {
|
|
2165
2168
|
padding: calc(var(--space-1) * 0.25) var(--space-1);
|
|
@@ -2197,7 +2200,7 @@
|
|
|
2197
2200
|
letter-spacing: var(--letter-spacing-0);
|
|
2198
2201
|
padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
|
|
2199
2202
|
gap: calc(var(--space-1) * 1.5);
|
|
2200
|
-
border-radius: max(var(--radius-1), var(--radius-full));
|
|
2203
|
+
border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
|
|
2201
2204
|
}
|
|
2202
2205
|
.rt-Badge:where(.xl\:rt-r-size-1):where(.rt-variant-ghost) {
|
|
2203
2206
|
padding: calc(var(--space-1) * 0.25) var(--space-1);
|
|
@@ -3040,14 +3043,6 @@
|
|
|
3040
3043
|
cursor: not-allowed;
|
|
3041
3044
|
pointer-events: none;
|
|
3042
3045
|
}
|
|
3043
|
-
.rt-BaseButton:where([data-state='on']) {
|
|
3044
|
-
transform: scale(0.98);
|
|
3045
|
-
}
|
|
3046
|
-
@media (prefers-reduced-motion: reduce) {
|
|
3047
|
-
.rt-BaseButton:where([data-state='on']) {
|
|
3048
|
-
transform: none;
|
|
3049
|
-
}
|
|
3050
|
-
}
|
|
3051
3046
|
.rt-BaseButton:where([data-state='on']):where(.rt-variant-classic) {
|
|
3052
3047
|
padding-top: var(--base-button-classic-active-padding-top);
|
|
3053
3048
|
padding-bottom: 0;
|
|
@@ -3914,6 +3909,24 @@
|
|
|
3914
3909
|
.rt-BaseCard::before {
|
|
3915
3910
|
z-index: -1;
|
|
3916
3911
|
}
|
|
3912
|
+
:where([data-panel-background='translucent']) .rt-BaseCard::before {
|
|
3913
|
+
-webkit-backdrop-filter: var(--backdrop-filter-panel);
|
|
3914
|
+
backdrop-filter: var(--backdrop-filter-panel);
|
|
3915
|
+
}
|
|
3916
|
+
:where(.rt-BaseCard[data-panel-background='solid']) .rt-BaseCard::before {
|
|
3917
|
+
-webkit-backdrop-filter: none;
|
|
3918
|
+
backdrop-filter: none;
|
|
3919
|
+
--backdrop-filter-panel: none;
|
|
3920
|
+
}
|
|
3921
|
+
:where(.rt-BaseCard[data-panel-background='translucent']) .rt-BaseCard::before {
|
|
3922
|
+
-webkit-backdrop-filter: var(--backdrop-filter-panel);
|
|
3923
|
+
backdrop-filter: var(--backdrop-filter-panel);
|
|
3924
|
+
--backdrop-filter-panel: blur(var(--backdrop-blur-panel));
|
|
3925
|
+
}
|
|
3926
|
+
:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard::before {
|
|
3927
|
+
-webkit-backdrop-filter: none !important;
|
|
3928
|
+
backdrop-filter: none !important;
|
|
3929
|
+
}
|
|
3917
3930
|
@supports (color: color-mix(in oklab, white, black)) {
|
|
3918
3931
|
:where(.radix-themes) {
|
|
3919
3932
|
--base-card-surface-box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-a5), var(--gray-5) var(--color-mix-percentage-light));
|
|
@@ -3928,6 +3941,9 @@
|
|
|
3928
3941
|
--base-card-classic-box-shadow-outer: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--gray-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
|
|
3929
3942
|
--base-card-classic-hover-box-shadow-outer: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-shadow-offset-negative) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--gray-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12), 0 0 0 var(--classic-border-width) var(--gray-a5);
|
|
3930
3943
|
--base-card-classic-active-box-shadow-outer: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
|
|
3944
|
+
--base-card-classic-box-shadow-inner: none;
|
|
3945
|
+
--base-card-classic-hover-box-shadow-inner: none;
|
|
3946
|
+
--base-card-classic-active-box-shadow-inner: none;
|
|
3931
3947
|
}
|
|
3932
3948
|
.rt-Card {
|
|
3933
3949
|
--base-card-padding-top: var(--card-padding);
|
|
@@ -4101,51 +4117,49 @@
|
|
|
4101
4117
|
box-shadow: var(--base-card-surface-active-box-shadow);
|
|
4102
4118
|
}
|
|
4103
4119
|
.rt-Card:where(.rt-variant-classic) {
|
|
4104
|
-
--card-border-width:
|
|
4105
|
-
--card-background-color: var(--
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6), 0 0 0 var(--classic-border-width) var(--gray-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
|
|
4109
|
-
}
|
|
4110
|
-
:where(.dark, .dark-theme) .rt-Card:where(.rt-variant-classic), :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-Card:where(.rt-variant-classic) {
|
|
4111
|
-
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--gray-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
|
|
4120
|
+
--card-border-width: 1px;
|
|
4121
|
+
--card-background-color: var(--color-surface);
|
|
4122
|
+
transition: box-shadow 120ms;
|
|
4123
|
+
box-shadow: var(--base-card-classic-box-shadow-outer);
|
|
4112
4124
|
}
|
|
4113
4125
|
.rt-Card:where(.rt-variant-classic)::before {
|
|
4114
4126
|
background-color: var(--card-background-color);
|
|
4115
4127
|
-webkit-backdrop-filter: var(--backdrop-filter-panel);
|
|
4116
4128
|
backdrop-filter: var(--backdrop-filter-panel);
|
|
4117
4129
|
}
|
|
4130
|
+
.rt-Card:where(.rt-variant-classic)::after {
|
|
4131
|
+
box-shadow: var(--base-card-classic-box-shadow-inner);
|
|
4132
|
+
}
|
|
4118
4133
|
@media (hover: hover) {
|
|
4119
4134
|
.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover) {
|
|
4120
|
-
|
|
4121
|
-
|
|
4122
|
-
:where(.dark, .dark-theme) .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover), :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover) {
|
|
4123
|
-
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), 0 0 0 var(--classic-border-width) var(--gray-a5);
|
|
4135
|
+
transition-duration: 40ms;
|
|
4136
|
+
box-shadow: var(--base-card-classic-hover-box-shadow-outer);
|
|
4124
4137
|
}
|
|
4125
|
-
.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::
|
|
4126
|
-
|
|
4138
|
+
.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::after {
|
|
4139
|
+
box-shadow: var(--base-card-classic-hover-box-shadow-inner);
|
|
4127
4140
|
}
|
|
4128
4141
|
}
|
|
4129
4142
|
.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open']) {
|
|
4130
|
-
|
|
4131
|
-
|
|
4132
|
-
:where(.dark, .dark-theme) .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open']), :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open']) {
|
|
4133
|
-
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), 0 0 0 var(--classic-border-width) var(--gray-a5);
|
|
4143
|
+
transition-duration: 40ms;
|
|
4144
|
+
box-shadow: var(--base-card-classic-hover-box-shadow-outer);
|
|
4134
4145
|
}
|
|
4135
|
-
.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::
|
|
4136
|
-
|
|
4146
|
+
.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::after {
|
|
4147
|
+
box-shadow: var(--base-card-classic-hover-box-shadow-inner);
|
|
4137
4148
|
}
|
|
4138
4149
|
.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open'])) {
|
|
4139
|
-
|
|
4140
|
-
box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
|
|
4150
|
+
box-shadow: var(--base-card-classic-active-box-shadow-outer);
|
|
4141
4151
|
}
|
|
4142
|
-
.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::
|
|
4143
|
-
|
|
4152
|
+
.rt-Card:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::after {
|
|
4153
|
+
box-shadow: var(--base-card-classic-active-box-shadow-inner);
|
|
4144
4154
|
}
|
|
4145
4155
|
.rt-Card:where(.rt-variant-ghost) {
|
|
4146
4156
|
--card-border-width: 0px;
|
|
4147
4157
|
transition: var(--transition-background-blur);
|
|
4148
4158
|
}
|
|
4159
|
+
.rt-Card:where(.rt-variant-ghost)::before {
|
|
4160
|
+
-webkit-backdrop-filter: none !important;
|
|
4161
|
+
backdrop-filter: none !important;
|
|
4162
|
+
}
|
|
4149
4163
|
.rt-Card:where(.rt-variant-ghost):where([data-flush='true']) {
|
|
4150
4164
|
--margin-top: 0px;
|
|
4151
4165
|
--margin-right: 0px;
|
|
@@ -4506,6 +4520,7 @@
|
|
|
4506
4520
|
height: var(--checkbox-size);
|
|
4507
4521
|
width: var(--checkbox-size);
|
|
4508
4522
|
border-radius: var(--checkbox-border-radius);
|
|
4523
|
+
transition: var(--transition-checkbox);
|
|
4509
4524
|
}
|
|
4510
4525
|
.rt-BaseCheckboxIndicator {
|
|
4511
4526
|
position: absolute;
|
|
@@ -4514,151 +4529,173 @@
|
|
|
4514
4529
|
transform: translate(-50%, -50%);
|
|
4515
4530
|
top: 50%;
|
|
4516
4531
|
left: 50%;
|
|
4532
|
+
transition: color var(--duration-1) var(--ease-1);
|
|
4533
|
+
}
|
|
4534
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4535
|
+
.rt-BaseCheckboxIndicator {
|
|
4536
|
+
transition: none;
|
|
4537
|
+
}
|
|
4517
4538
|
}
|
|
4518
4539
|
.rt-BaseCheckboxRoot:where(.rt-r-size-1) {
|
|
4519
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4520
|
-
--checkbox-indicator-size:
|
|
4521
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4540
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4541
|
+
--checkbox-indicator-size: var(--indicator-icon-size-1);
|
|
4542
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
|
|
4522
4543
|
}
|
|
4523
4544
|
.rt-BaseCheckboxRoot:where(.rt-r-size-2) {
|
|
4524
4545
|
--checkbox-size: var(--space-4);
|
|
4525
|
-
--checkbox-indicator-size:
|
|
4526
|
-
--checkbox-border-radius: var(--radius-1);
|
|
4546
|
+
--checkbox-indicator-size: var(--indicator-icon-size-2);
|
|
4547
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4527
4548
|
}
|
|
4528
4549
|
.rt-BaseCheckboxRoot:where(.rt-r-size-3) {
|
|
4529
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4530
|
-
--checkbox-indicator-size:
|
|
4531
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4550
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4551
|
+
--checkbox-indicator-size: var(--indicator-icon-size-3);
|
|
4552
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4532
4553
|
}
|
|
4533
4554
|
@media (min-width: 520px) {
|
|
4534
4555
|
.rt-BaseCheckboxRoot:where(.xs\:rt-r-size-1) {
|
|
4535
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4536
|
-
--checkbox-indicator-size:
|
|
4537
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4556
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4557
|
+
--checkbox-indicator-size: var(--indicator-icon-size-1);
|
|
4558
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
|
|
4538
4559
|
}
|
|
4539
4560
|
.rt-BaseCheckboxRoot:where(.xs\:rt-r-size-2) {
|
|
4540
4561
|
--checkbox-size: var(--space-4);
|
|
4541
|
-
--checkbox-indicator-size:
|
|
4542
|
-
--checkbox-border-radius: var(--radius-1);
|
|
4562
|
+
--checkbox-indicator-size: var(--indicator-icon-size-2);
|
|
4563
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4543
4564
|
}
|
|
4544
4565
|
.rt-BaseCheckboxRoot:where(.xs\:rt-r-size-3) {
|
|
4545
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4546
|
-
--checkbox-indicator-size:
|
|
4547
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4566
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4567
|
+
--checkbox-indicator-size: var(--indicator-icon-size-3);
|
|
4568
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4548
4569
|
}
|
|
4549
4570
|
}
|
|
4550
4571
|
@media (min-width: 768px) {
|
|
4551
4572
|
.rt-BaseCheckboxRoot:where(.sm\:rt-r-size-1) {
|
|
4552
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4553
|
-
--checkbox-indicator-size:
|
|
4554
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4573
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4574
|
+
--checkbox-indicator-size: var(--indicator-icon-size-1);
|
|
4575
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
|
|
4555
4576
|
}
|
|
4556
4577
|
.rt-BaseCheckboxRoot:where(.sm\:rt-r-size-2) {
|
|
4557
4578
|
--checkbox-size: var(--space-4);
|
|
4558
|
-
--checkbox-indicator-size:
|
|
4559
|
-
--checkbox-border-radius: var(--radius-1);
|
|
4579
|
+
--checkbox-indicator-size: var(--indicator-icon-size-2);
|
|
4580
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4560
4581
|
}
|
|
4561
4582
|
.rt-BaseCheckboxRoot:where(.sm\:rt-r-size-3) {
|
|
4562
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4563
|
-
--checkbox-indicator-size:
|
|
4564
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4583
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4584
|
+
--checkbox-indicator-size: var(--indicator-icon-size-3);
|
|
4585
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4565
4586
|
}
|
|
4566
4587
|
}
|
|
4567
4588
|
@media (min-width: 1024px) {
|
|
4568
4589
|
.rt-BaseCheckboxRoot:where(.md\:rt-r-size-1) {
|
|
4569
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4570
|
-
--checkbox-indicator-size:
|
|
4571
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4590
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4591
|
+
--checkbox-indicator-size: var(--indicator-icon-size-1);
|
|
4592
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
|
|
4572
4593
|
}
|
|
4573
4594
|
.rt-BaseCheckboxRoot:where(.md\:rt-r-size-2) {
|
|
4574
4595
|
--checkbox-size: var(--space-4);
|
|
4575
|
-
--checkbox-indicator-size:
|
|
4576
|
-
--checkbox-border-radius: var(--radius-1);
|
|
4596
|
+
--checkbox-indicator-size: var(--indicator-icon-size-2);
|
|
4597
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4577
4598
|
}
|
|
4578
4599
|
.rt-BaseCheckboxRoot:where(.md\:rt-r-size-3) {
|
|
4579
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4580
|
-
--checkbox-indicator-size:
|
|
4581
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4600
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4601
|
+
--checkbox-indicator-size: var(--indicator-icon-size-3);
|
|
4602
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4582
4603
|
}
|
|
4583
4604
|
}
|
|
4584
4605
|
@media (min-width: 1280px) {
|
|
4585
4606
|
.rt-BaseCheckboxRoot:where(.lg\:rt-r-size-1) {
|
|
4586
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4587
|
-
--checkbox-indicator-size:
|
|
4588
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4607
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4608
|
+
--checkbox-indicator-size: var(--indicator-icon-size-1);
|
|
4609
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
|
|
4589
4610
|
}
|
|
4590
4611
|
.rt-BaseCheckboxRoot:where(.lg\:rt-r-size-2) {
|
|
4591
4612
|
--checkbox-size: var(--space-4);
|
|
4592
|
-
--checkbox-indicator-size:
|
|
4593
|
-
--checkbox-border-radius: var(--radius-1);
|
|
4613
|
+
--checkbox-indicator-size: var(--indicator-icon-size-2);
|
|
4614
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4594
4615
|
}
|
|
4595
4616
|
.rt-BaseCheckboxRoot:where(.lg\:rt-r-size-3) {
|
|
4596
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4597
|
-
--checkbox-indicator-size:
|
|
4598
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4617
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4618
|
+
--checkbox-indicator-size: var(--indicator-icon-size-3);
|
|
4619
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4599
4620
|
}
|
|
4600
4621
|
}
|
|
4601
4622
|
@media (min-width: 1640px) {
|
|
4602
4623
|
.rt-BaseCheckboxRoot:where(.xl\:rt-r-size-1) {
|
|
4603
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4604
|
-
--checkbox-indicator-size:
|
|
4605
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4624
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4625
|
+
--checkbox-indicator-size: var(--indicator-icon-size-1);
|
|
4626
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-small));
|
|
4606
4627
|
}
|
|
4607
4628
|
.rt-BaseCheckboxRoot:where(.xl\:rt-r-size-2) {
|
|
4608
4629
|
--checkbox-size: var(--space-4);
|
|
4609
|
-
--checkbox-indicator-size:
|
|
4610
|
-
--checkbox-border-radius: var(--radius-1);
|
|
4630
|
+
--checkbox-indicator-size: var(--indicator-icon-size-2);
|
|
4631
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4611
4632
|
}
|
|
4612
4633
|
.rt-BaseCheckboxRoot:where(.xl\:rt-r-size-3) {
|
|
4613
|
-
--checkbox-size: calc(var(--space-4) *
|
|
4614
|
-
--checkbox-indicator-size:
|
|
4615
|
-
--checkbox-border-radius: calc(var(--radius-1) *
|
|
4634
|
+
--checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4635
|
+
--checkbox-indicator-size: var(--indicator-icon-size-3);
|
|
4636
|
+
--checkbox-border-radius: calc(var(--radius-1) * var(--spacing-multiplier-medium));
|
|
4616
4637
|
}
|
|
4617
4638
|
}
|
|
4618
|
-
.rt-BaseCheckboxRoot:where(.rt-variant-
|
|
4639
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='unchecked'])::before {
|
|
4619
4640
|
background-color: var(--color-surface);
|
|
4620
|
-
box-shadow: inset 0 0 0
|
|
4641
|
+
box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a7);
|
|
4621
4642
|
}
|
|
4622
|
-
.rt-BaseCheckboxRoot:where(.rt-variant-
|
|
4643
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='checked'], [data-state='indeterminate'])::before {
|
|
4623
4644
|
background-color: var(--accent-indicator);
|
|
4624
4645
|
}
|
|
4625
|
-
.rt-BaseCheckboxRoot:where(.rt-variant-
|
|
4646
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='checked'], [data-state='indeterminate']) :where(.rt-BaseCheckboxIndicator) {
|
|
4626
4647
|
color: var(--accent-contrast);
|
|
4627
4648
|
}
|
|
4628
|
-
.rt-BaseCheckboxRoot:where(.rt-variant-
|
|
4649
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='checked'], [data-state='indeterminate']):where(.rt-high-contrast)::before {
|
|
4629
4650
|
background-color: var(--accent-12);
|
|
4630
4651
|
}
|
|
4631
|
-
.rt-BaseCheckboxRoot:where(.rt-variant-
|
|
4652
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-solid):where([data-state='checked'], [data-state='indeterminate']):where(.rt-high-contrast) :where(.rt-BaseCheckboxIndicator) {
|
|
4632
4653
|
color: var(--accent-1);
|
|
4633
4654
|
}
|
|
4634
|
-
.rt-BaseCheckboxRoot:where(.rt-variant-
|
|
4635
|
-
box-shadow: inset 0 0 0
|
|
4655
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-solid):where(:disabled)::before {
|
|
4656
|
+
box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a6);
|
|
4636
4657
|
background-color: transparent;
|
|
4637
4658
|
}
|
|
4638
|
-
.rt-BaseCheckboxRoot:where(.rt-variant-
|
|
4659
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-solid):where(:disabled) :where(.rt-BaseCheckboxIndicator) {
|
|
4639
4660
|
color: var(--gray-a8);
|
|
4640
4661
|
}
|
|
4662
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-classic) {
|
|
4663
|
+
position: relative;
|
|
4664
|
+
top: var(--classic-elevation-offset);
|
|
4665
|
+
}
|
|
4641
4666
|
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='unchecked'])::before {
|
|
4642
|
-
background-color: var(--
|
|
4643
|
-
box-shadow: inset 0
|
|
4667
|
+
background-color: var(--accent-2);
|
|
4668
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6), 0 0 0 var(--classic-border-width) var(--accent-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
|
|
4669
|
+
}
|
|
4670
|
+
:where(.dark, .dark-theme) .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='unchecked'])::before, :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='unchecked'])::before {
|
|
4671
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3), inset 0 var(--classic-border-width) var(--accent-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--accent-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
|
|
4644
4672
|
}
|
|
4645
4673
|
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate'])::before {
|
|
4646
|
-
background-color: var(--accent-
|
|
4647
|
-
|
|
4648
|
-
box-shadow: inset 0 0.5px 0.5px var(--white-a4), inset 0 -0.5px 0.5px var(--black-a4);
|
|
4674
|
+
background-color: var(--accent-3);
|
|
4675
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6), 0 0 0 var(--classic-border-width) var(--accent-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
|
|
4649
4676
|
}
|
|
4650
4677
|
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate']) :where(.rt-BaseCheckboxIndicator) {
|
|
4651
|
-
color: var(--accent-
|
|
4678
|
+
color: var(--accent-a11);
|
|
4652
4679
|
}
|
|
4653
|
-
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate']):where(.rt-
|
|
4654
|
-
background-color: var(--accent-
|
|
4680
|
+
:where(.dark, .dark-theme) .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate'])::before, :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate'])::before {
|
|
4681
|
+
background-color: var(--accent-3);
|
|
4682
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3), inset 0 var(--classic-border-width) var(--accent-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--accent-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
|
|
4655
4683
|
}
|
|
4656
4684
|
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where([data-state='checked'], [data-state='indeterminate']):where(.rt-high-contrast) :where(.rt-BaseCheckboxIndicator) {
|
|
4657
|
-
color: var(--accent-
|
|
4685
|
+
color: var(--accent-12);
|
|
4686
|
+
}
|
|
4687
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:active:not(:disabled)) {
|
|
4688
|
+
top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
|
|
4689
|
+
}
|
|
4690
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:active:not(:disabled))::before {
|
|
4691
|
+
box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
|
|
4692
|
+
}
|
|
4693
|
+
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:disabled) {
|
|
4694
|
+
top: 0;
|
|
4658
4695
|
}
|
|
4659
4696
|
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:disabled)::before {
|
|
4660
|
-
|
|
4661
|
-
|
|
4697
|
+
background-color: var(--gray-a3);
|
|
4698
|
+
box-shadow: none;
|
|
4662
4699
|
background-image: none;
|
|
4663
4700
|
}
|
|
4664
4701
|
.rt-BaseCheckboxRoot:where(.rt-variant-classic):where(:disabled) :where(.rt-BaseCheckboxIndicator) {
|
|
@@ -4685,8 +4722,9 @@
|
|
|
4685
4722
|
cursor: default;
|
|
4686
4723
|
}
|
|
4687
4724
|
.rt-CheckboxCardsItem:where(:has(:focus-visible)) {
|
|
4688
|
-
|
|
4689
|
-
outline
|
|
4725
|
+
transition: var(--transition-focus);
|
|
4726
|
+
outline: var(--focus-outline-width) solid var(--focus-8);
|
|
4727
|
+
outline-offset: var(--focus-outline-offset-inset);
|
|
4690
4728
|
}
|
|
4691
4729
|
.rt-CheckboxCardsItem:where(:has(:focus-visible))::after {
|
|
4692
4730
|
outline: inherit;
|
|
@@ -4719,18 +4757,18 @@
|
|
|
4719
4757
|
font-size: var(--font-size-2);
|
|
4720
4758
|
--line-height: var(--line-height-2);
|
|
4721
4759
|
--letter-spacing: var(--letter-spacing-2);
|
|
4722
|
-
--checkbox-cards-item-padding-top: calc(var(--space-3)
|
|
4723
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-3)
|
|
4760
|
+
--checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4761
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4724
4762
|
--checkbox-cards-item-padding-left: var(--space-3);
|
|
4725
4763
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4726
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4764
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4727
4765
|
}
|
|
4728
4766
|
.rt-CheckboxCardsRoot:where(.rt-r-size-2) {
|
|
4729
4767
|
font-size: var(--font-size-2);
|
|
4730
4768
|
--line-height: var(--line-height-2);
|
|
4731
4769
|
--letter-spacing: var(--letter-spacing-2);
|
|
4732
|
-
--checkbox-cards-item-padding-top: calc(var(--space-4) *
|
|
4733
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-4) *
|
|
4770
|
+
--checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4771
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4734
4772
|
--checkbox-cards-item-padding-left: var(--space-4);
|
|
4735
4773
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4736
4774
|
--checkbox-cards-item-checkbox-size: var(--space-4);
|
|
@@ -4739,29 +4777,29 @@
|
|
|
4739
4777
|
font-size: var(--font-size-3);
|
|
4740
4778
|
--line-height: var(--line-height-3);
|
|
4741
4779
|
--letter-spacing: var(--letter-spacing-3);
|
|
4742
|
-
--checkbox-cards-item-padding-top: calc(var(--space-5)
|
|
4743
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-5)
|
|
4780
|
+
--checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4781
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4744
4782
|
--checkbox-cards-item-padding-left: var(--space-5);
|
|
4745
4783
|
--checkbox-cards-item-border-radius: var(--radius-4);
|
|
4746
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4784
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4747
4785
|
}
|
|
4748
4786
|
@media (min-width: 520px) {
|
|
4749
4787
|
.rt-CheckboxCardsRoot:where(.xs\:rt-r-size-1) {
|
|
4750
4788
|
font-size: var(--font-size-2);
|
|
4751
4789
|
--line-height: var(--line-height-2);
|
|
4752
4790
|
--letter-spacing: var(--letter-spacing-2);
|
|
4753
|
-
--checkbox-cards-item-padding-top: calc(var(--space-3)
|
|
4754
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-3)
|
|
4791
|
+
--checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4792
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4755
4793
|
--checkbox-cards-item-padding-left: var(--space-3);
|
|
4756
4794
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4757
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4795
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4758
4796
|
}
|
|
4759
4797
|
.rt-CheckboxCardsRoot:where(.xs\:rt-r-size-2) {
|
|
4760
4798
|
font-size: var(--font-size-2);
|
|
4761
4799
|
--line-height: var(--line-height-2);
|
|
4762
4800
|
--letter-spacing: var(--letter-spacing-2);
|
|
4763
|
-
--checkbox-cards-item-padding-top: calc(var(--space-4) *
|
|
4764
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-4) *
|
|
4801
|
+
--checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4802
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4765
4803
|
--checkbox-cards-item-padding-left: var(--space-4);
|
|
4766
4804
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4767
4805
|
--checkbox-cards-item-checkbox-size: var(--space-4);
|
|
@@ -4770,11 +4808,11 @@
|
|
|
4770
4808
|
font-size: var(--font-size-3);
|
|
4771
4809
|
--line-height: var(--line-height-3);
|
|
4772
4810
|
--letter-spacing: var(--letter-spacing-3);
|
|
4773
|
-
--checkbox-cards-item-padding-top: calc(var(--space-5)
|
|
4774
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-5)
|
|
4811
|
+
--checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4812
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4775
4813
|
--checkbox-cards-item-padding-left: var(--space-5);
|
|
4776
4814
|
--checkbox-cards-item-border-radius: var(--radius-4);
|
|
4777
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4815
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4778
4816
|
}
|
|
4779
4817
|
}
|
|
4780
4818
|
@media (min-width: 768px) {
|
|
@@ -4782,18 +4820,18 @@
|
|
|
4782
4820
|
font-size: var(--font-size-2);
|
|
4783
4821
|
--line-height: var(--line-height-2);
|
|
4784
4822
|
--letter-spacing: var(--letter-spacing-2);
|
|
4785
|
-
--checkbox-cards-item-padding-top: calc(var(--space-3)
|
|
4786
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-3)
|
|
4823
|
+
--checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4824
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4787
4825
|
--checkbox-cards-item-padding-left: var(--space-3);
|
|
4788
4826
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4789
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4827
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4790
4828
|
}
|
|
4791
4829
|
.rt-CheckboxCardsRoot:where(.sm\:rt-r-size-2) {
|
|
4792
4830
|
font-size: var(--font-size-2);
|
|
4793
4831
|
--line-height: var(--line-height-2);
|
|
4794
4832
|
--letter-spacing: var(--letter-spacing-2);
|
|
4795
|
-
--checkbox-cards-item-padding-top: calc(var(--space-4) *
|
|
4796
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-4) *
|
|
4833
|
+
--checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4834
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4797
4835
|
--checkbox-cards-item-padding-left: var(--space-4);
|
|
4798
4836
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4799
4837
|
--checkbox-cards-item-checkbox-size: var(--space-4);
|
|
@@ -4802,11 +4840,11 @@
|
|
|
4802
4840
|
font-size: var(--font-size-3);
|
|
4803
4841
|
--line-height: var(--line-height-3);
|
|
4804
4842
|
--letter-spacing: var(--letter-spacing-3);
|
|
4805
|
-
--checkbox-cards-item-padding-top: calc(var(--space-5)
|
|
4806
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-5)
|
|
4843
|
+
--checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4844
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4807
4845
|
--checkbox-cards-item-padding-left: var(--space-5);
|
|
4808
4846
|
--checkbox-cards-item-border-radius: var(--radius-4);
|
|
4809
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4847
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4810
4848
|
}
|
|
4811
4849
|
}
|
|
4812
4850
|
@media (min-width: 1024px) {
|
|
@@ -4814,18 +4852,18 @@
|
|
|
4814
4852
|
font-size: var(--font-size-2);
|
|
4815
4853
|
--line-height: var(--line-height-2);
|
|
4816
4854
|
--letter-spacing: var(--letter-spacing-2);
|
|
4817
|
-
--checkbox-cards-item-padding-top: calc(var(--space-3)
|
|
4818
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-3)
|
|
4855
|
+
--checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4856
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4819
4857
|
--checkbox-cards-item-padding-left: var(--space-3);
|
|
4820
4858
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4821
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4859
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4822
4860
|
}
|
|
4823
4861
|
.rt-CheckboxCardsRoot:where(.md\:rt-r-size-2) {
|
|
4824
4862
|
font-size: var(--font-size-2);
|
|
4825
4863
|
--line-height: var(--line-height-2);
|
|
4826
4864
|
--letter-spacing: var(--letter-spacing-2);
|
|
4827
|
-
--checkbox-cards-item-padding-top: calc(var(--space-4) *
|
|
4828
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-4) *
|
|
4865
|
+
--checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4866
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4829
4867
|
--checkbox-cards-item-padding-left: var(--space-4);
|
|
4830
4868
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4831
4869
|
--checkbox-cards-item-checkbox-size: var(--space-4);
|
|
@@ -4834,11 +4872,11 @@
|
|
|
4834
4872
|
font-size: var(--font-size-3);
|
|
4835
4873
|
--line-height: var(--line-height-3);
|
|
4836
4874
|
--letter-spacing: var(--letter-spacing-3);
|
|
4837
|
-
--checkbox-cards-item-padding-top: calc(var(--space-5)
|
|
4838
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-5)
|
|
4875
|
+
--checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4876
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4839
4877
|
--checkbox-cards-item-padding-left: var(--space-5);
|
|
4840
4878
|
--checkbox-cards-item-border-radius: var(--radius-4);
|
|
4841
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4879
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4842
4880
|
}
|
|
4843
4881
|
}
|
|
4844
4882
|
@media (min-width: 1280px) {
|
|
@@ -4846,18 +4884,18 @@
|
|
|
4846
4884
|
font-size: var(--font-size-2);
|
|
4847
4885
|
--line-height: var(--line-height-2);
|
|
4848
4886
|
--letter-spacing: var(--letter-spacing-2);
|
|
4849
|
-
--checkbox-cards-item-padding-top: calc(var(--space-3)
|
|
4850
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-3)
|
|
4887
|
+
--checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4888
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4851
4889
|
--checkbox-cards-item-padding-left: var(--space-3);
|
|
4852
4890
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4853
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4891
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4854
4892
|
}
|
|
4855
4893
|
.rt-CheckboxCardsRoot:where(.lg\:rt-r-size-2) {
|
|
4856
4894
|
font-size: var(--font-size-2);
|
|
4857
4895
|
--line-height: var(--line-height-2);
|
|
4858
4896
|
--letter-spacing: var(--letter-spacing-2);
|
|
4859
|
-
--checkbox-cards-item-padding-top: calc(var(--space-4) *
|
|
4860
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-4) *
|
|
4897
|
+
--checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4898
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4861
4899
|
--checkbox-cards-item-padding-left: var(--space-4);
|
|
4862
4900
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4863
4901
|
--checkbox-cards-item-checkbox-size: var(--space-4);
|
|
@@ -4866,11 +4904,11 @@
|
|
|
4866
4904
|
font-size: var(--font-size-3);
|
|
4867
4905
|
--line-height: var(--line-height-3);
|
|
4868
4906
|
--letter-spacing: var(--letter-spacing-3);
|
|
4869
|
-
--checkbox-cards-item-padding-top: calc(var(--space-5)
|
|
4870
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-5)
|
|
4907
|
+
--checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4908
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4871
4909
|
--checkbox-cards-item-padding-left: var(--space-5);
|
|
4872
4910
|
--checkbox-cards-item-border-radius: var(--radius-4);
|
|
4873
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4911
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4874
4912
|
}
|
|
4875
4913
|
}
|
|
4876
4914
|
@media (min-width: 1640px) {
|
|
@@ -4878,18 +4916,18 @@
|
|
|
4878
4916
|
font-size: var(--font-size-2);
|
|
4879
4917
|
--line-height: var(--line-height-2);
|
|
4880
4918
|
--letter-spacing: var(--letter-spacing-2);
|
|
4881
|
-
--checkbox-cards-item-padding-top: calc(var(--space-3)
|
|
4882
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-3)
|
|
4919
|
+
--checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4920
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
4883
4921
|
--checkbox-cards-item-padding-left: var(--space-3);
|
|
4884
4922
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4885
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4923
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4886
4924
|
}
|
|
4887
4925
|
.rt-CheckboxCardsRoot:where(.xl\:rt-r-size-2) {
|
|
4888
4926
|
font-size: var(--font-size-2);
|
|
4889
4927
|
--line-height: var(--line-height-2);
|
|
4890
4928
|
--letter-spacing: var(--letter-spacing-2);
|
|
4891
|
-
--checkbox-cards-item-padding-top: calc(var(--space-4) *
|
|
4892
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-4) *
|
|
4929
|
+
--checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4930
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
4893
4931
|
--checkbox-cards-item-padding-left: var(--space-4);
|
|
4894
4932
|
--checkbox-cards-item-border-radius: var(--radius-3);
|
|
4895
4933
|
--checkbox-cards-item-checkbox-size: var(--space-4);
|
|
@@ -4898,16 +4936,17 @@
|
|
|
4898
4936
|
font-size: var(--font-size-3);
|
|
4899
4937
|
--line-height: var(--line-height-3);
|
|
4900
4938
|
--letter-spacing: var(--letter-spacing-3);
|
|
4901
|
-
--checkbox-cards-item-padding-top: calc(var(--space-5)
|
|
4902
|
-
--checkbox-cards-item-padding-bottom: calc(var(--space-5)
|
|
4939
|
+
--checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4940
|
+
--checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
4903
4941
|
--checkbox-cards-item-padding-left: var(--space-5);
|
|
4904
4942
|
--checkbox-cards-item-border-radius: var(--radius-4);
|
|
4905
|
-
--checkbox-cards-item-checkbox-size: calc(var(--space-4) *
|
|
4943
|
+
--checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
|
|
4906
4944
|
}
|
|
4907
4945
|
}
|
|
4908
4946
|
:where(.rt-CheckboxCardsRoot.rt-variant-surface) .rt-CheckboxCardsItem {
|
|
4909
|
-
--checkbox-cards-item-border-width:
|
|
4947
|
+
--checkbox-cards-item-border-width: var(--border-width-standard);
|
|
4910
4948
|
--checkbox-cards-item-background-color: var(--color-surface);
|
|
4949
|
+
transition: var(--transition-card);
|
|
4911
4950
|
}
|
|
4912
4951
|
:where(.rt-CheckboxCardsRoot.rt-variant-surface) .rt-CheckboxCardsItem::before {
|
|
4913
4952
|
background-color: var(--checkbox-cards-item-background-color);
|
|
@@ -4916,14 +4955,23 @@
|
|
|
4916
4955
|
box-shadow: var(--base-card-surface-box-shadow);
|
|
4917
4956
|
}
|
|
4918
4957
|
@media (hover: hover) {
|
|
4958
|
+
:where(.rt-CheckboxCardsRoot.rt-variant-surface) .rt-CheckboxCardsItem:where(:not(:has(:disabled)):hover) {
|
|
4959
|
+
transition-duration: var(--duration-1);
|
|
4960
|
+
}
|
|
4919
4961
|
:where(.rt-CheckboxCardsRoot.rt-variant-surface) .rt-CheckboxCardsItem:where(:not(:has(:disabled)):hover)::after {
|
|
4920
4962
|
box-shadow: var(--base-card-surface-hover-box-shadow);
|
|
4921
4963
|
}
|
|
4922
4964
|
}
|
|
4965
|
+
:where(.rt-CheckboxCardsRoot.rt-variant-surface):where([data-panel-background='solid']) .rt-CheckboxCardsItem {
|
|
4966
|
+
--color-surface: var(--color-surface-solid);
|
|
4967
|
+
}
|
|
4968
|
+
:where(.rt-CheckboxCardsRoot.rt-variant-surface):where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
|
|
4969
|
+
--color-surface: var(--color-surface-translucent);
|
|
4970
|
+
}
|
|
4923
4971
|
:where(.rt-CheckboxCardsRoot.rt-variant-classic) .rt-CheckboxCardsItem {
|
|
4924
|
-
--checkbox-cards-item-border-width:
|
|
4972
|
+
--checkbox-cards-item-border-width: var(--border-width-standard);
|
|
4925
4973
|
--checkbox-cards-item-background-color: var(--color-surface);
|
|
4926
|
-
transition:
|
|
4974
|
+
transition: var(--transition-card);
|
|
4927
4975
|
box-shadow: var(--base-card-classic-box-shadow-outer);
|
|
4928
4976
|
}
|
|
4929
4977
|
:where(.rt-CheckboxCardsRoot.rt-variant-classic) .rt-CheckboxCardsItem::before {
|
|
@@ -4934,13 +4982,19 @@
|
|
|
4934
4982
|
}
|
|
4935
4983
|
@media (hover: hover) {
|
|
4936
4984
|
:where(.rt-CheckboxCardsRoot.rt-variant-classic) .rt-CheckboxCardsItem:where(:not(:has(:disabled)):hover) {
|
|
4937
|
-
transition-duration:
|
|
4985
|
+
transition-duration: var(--duration-1);
|
|
4938
4986
|
box-shadow: var(--base-card-classic-hover-box-shadow-outer);
|
|
4939
4987
|
}
|
|
4940
4988
|
:where(.rt-CheckboxCardsRoot.rt-variant-classic) .rt-CheckboxCardsItem:where(:not(:has(:disabled)):hover)::after {
|
|
4941
4989
|
box-shadow: var(--base-card-classic-hover-box-shadow-inner);
|
|
4942
4990
|
}
|
|
4943
4991
|
}
|
|
4992
|
+
:where(.rt-CheckboxCardsRoot.rt-variant-classic):where([data-panel-background='solid']) .rt-CheckboxCardsItem {
|
|
4993
|
+
--color-surface: var(--color-surface-solid);
|
|
4994
|
+
}
|
|
4995
|
+
:where(.rt-CheckboxCardsRoot.rt-variant-classic):where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
|
|
4996
|
+
--color-surface: var(--color-surface-translucent);
|
|
4997
|
+
}
|
|
4944
4998
|
@media (pointer: coarse) {
|
|
4945
4999
|
.rt-CheckboxCardsItem:where(:active:not(:focus-visible))::before {
|
|
4946
5000
|
background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
|
|
@@ -7749,16 +7803,32 @@
|
|
|
7749
7803
|
}
|
|
7750
7804
|
@media (hover: hover) {
|
|
7751
7805
|
.rt-Image:where(:any-link, button, label):where(:hover) {
|
|
7752
|
-
transform: scale(1.02);
|
|
7753
7806
|
box-shadow: var(--box-shadow, var(--shadow-2)), 0 0 0 1px var(--gray-a4);
|
|
7807
|
+
filter: brightness(1.05) contrast(1.02);
|
|
7754
7808
|
}
|
|
7755
7809
|
}
|
|
7810
|
+
.rt-Image:where(:any-link, button, label):where(:active) {
|
|
7811
|
+
filter: brightness(0.98) contrast(1.02);
|
|
7812
|
+
}
|
|
7756
7813
|
.rt-Image:where(:any-link, button, label):where(:focus-visible) {
|
|
7757
7814
|
outline: 2px solid var(--focus-8);
|
|
7758
|
-
outline-offset: 2px;
|
|
7815
|
+
outline-offset: -2px;
|
|
7759
7816
|
}
|
|
7760
|
-
|
|
7761
|
-
|
|
7817
|
+
:where(:any-link, button, label) .rt-Image {
|
|
7818
|
+
cursor: pointer;
|
|
7819
|
+
}
|
|
7820
|
+
@media (hover: hover) {
|
|
7821
|
+
:where(:any-link, button, label) .rt-Image:where(:hover) {
|
|
7822
|
+
box-shadow: var(--box-shadow, var(--shadow-2)), 0 0 0 1px var(--gray-a4);
|
|
7823
|
+
filter: brightness(1.05) contrast(1.02);
|
|
7824
|
+
}
|
|
7825
|
+
}
|
|
7826
|
+
:where(:any-link, button, label) .rt-Image:where(:active) {
|
|
7827
|
+
filter: brightness(0.98) contrast(1.02);
|
|
7828
|
+
}
|
|
7829
|
+
:where(:any-link, button, label):where(:focus-visible) .rt-Image {
|
|
7830
|
+
outline: 2px solid var(--focus-8);
|
|
7831
|
+
outline-offset: -2px;
|
|
7762
7832
|
}
|
|
7763
7833
|
.rt-variant-blur {
|
|
7764
7834
|
position: relative;
|
|
@@ -7774,15 +7844,15 @@
|
|
|
7774
7844
|
}
|
|
7775
7845
|
@media (hover: hover) {
|
|
7776
7846
|
.rt-variant-blur:where(:any-link, button, label):where(:hover) {
|
|
7777
|
-
|
|
7847
|
+
filter: brightness(1.05) contrast(1.02);
|
|
7778
7848
|
}
|
|
7779
7849
|
}
|
|
7850
|
+
.rt-variant-blur:where(:any-link, button, label):where(:active) {
|
|
7851
|
+
filter: brightness(0.98) contrast(1.02);
|
|
7852
|
+
}
|
|
7780
7853
|
.rt-variant-blur:where(:any-link, button, label):where(:focus-visible) {
|
|
7781
7854
|
outline: 2px solid var(--focus-8);
|
|
7782
|
-
outline-offset: 2px;
|
|
7783
|
-
}
|
|
7784
|
-
.rt-variant-blur:where(:any-link, button, label):where(:active) {
|
|
7785
|
-
transform: scale(0.98);
|
|
7855
|
+
outline-offset: -2px;
|
|
7786
7856
|
}
|
|
7787
7857
|
.rt-variant-blur:where(:any-link, button, label) .rt-Image {
|
|
7788
7858
|
cursor: inherit;
|
|
@@ -8965,13 +9035,13 @@
|
|
|
8965
9035
|
.rt-ProgressRoot {
|
|
8966
9036
|
--progress-value: 0;
|
|
8967
9037
|
--progress-max: 100;
|
|
8968
|
-
--progress-duration:
|
|
9038
|
+
--progress-duration: var(--progress-default-duration);
|
|
8969
9039
|
pointer-events: none;
|
|
8970
9040
|
position: relative;
|
|
8971
9041
|
overflow: hidden;
|
|
8972
9042
|
flex-grow: 1;
|
|
8973
9043
|
height: var(--progress-height);
|
|
8974
|
-
border-radius: max(calc(var(--radius-factor) * var(--progress-height) /
|
|
9044
|
+
border-radius: max(calc(var(--radius-factor) * var(--progress-height) / var(--progress-border-radius-factor)), calc(var(--radius-factor) * var(--radius-thumb)));
|
|
8975
9045
|
}
|
|
8976
9046
|
.rt-ProgressRoot::after {
|
|
8977
9047
|
position: absolute;
|
|
@@ -8981,16 +9051,16 @@
|
|
|
8981
9051
|
}
|
|
8982
9052
|
.rt-ProgressIndicator {
|
|
8983
9053
|
display: block;
|
|
8984
|
-
height:
|
|
8985
|
-
width:
|
|
9054
|
+
height: var(--position-full);
|
|
9055
|
+
width: var(--position-full);
|
|
8986
9056
|
transform: scaleX(calc(var(--progress-value) / var(--progress-max)));
|
|
8987
9057
|
transform-origin: left center;
|
|
8988
|
-
transition:
|
|
9058
|
+
transition: var(--transition-progress);
|
|
8989
9059
|
}
|
|
8990
9060
|
.rt-ProgressIndicator:where([data-state='indeterminate']) {
|
|
8991
9061
|
animation-name: rt-progress-indicator-indeterminate-grow, var(--progress-indicator-indeterminate-animation-start), var(--progress-indicator-indeterminate-animation-repeat);
|
|
8992
|
-
animation-delay: 0s, calc(var(--progress-duration) +
|
|
8993
|
-
animation-duration: var(--progress-duration),
|
|
9062
|
+
animation-delay: 0s, calc(var(--progress-duration) + var(--progress-animation-delay-start)), calc(var(--progress-duration) + var(--progress-animation-delay-shine));
|
|
9063
|
+
animation-duration: var(--progress-duration), var(--progress-animation-duration-fade), var(--progress-animation-duration-pulse);
|
|
8994
9064
|
animation-iteration-count: 1, 1, infinite;
|
|
8995
9065
|
animation-fill-mode: both, none, none;
|
|
8996
9066
|
animation-direction: normal, normal, alternate;
|
|
@@ -8999,45 +9069,45 @@
|
|
|
8999
9069
|
position: absolute;
|
|
9000
9070
|
inset: 0;
|
|
9001
9071
|
content: '';
|
|
9002
|
-
width:
|
|
9072
|
+
width: calc(var(--position-full) * var(--progress-shine-width-multiplier));
|
|
9003
9073
|
animation-name: rt-progress-indicator-indeterminate-shine-from-left;
|
|
9004
|
-
animation-delay: calc(var(--progress-duration) +
|
|
9005
|
-
animation-duration:
|
|
9074
|
+
animation-delay: calc(var(--progress-duration) + var(--progress-animation-delay-start));
|
|
9075
|
+
animation-duration: var(--progress-animation-duration-pulse);
|
|
9006
9076
|
animation-fill-mode: backwards;
|
|
9007
9077
|
animation-iteration-count: infinite;
|
|
9008
|
-
background-image: linear-gradient(to right, transparent
|
|
9078
|
+
background-image: linear-gradient(to right, transparent var(--progress-gradient-stop-start), var(--progress-indicator-after-linear-gradient), transparent var(--progress-gradient-stop-end));
|
|
9009
9079
|
}
|
|
9010
9080
|
@keyframes rt-progress-indicator-indeterminate-grow {
|
|
9011
9081
|
0% {
|
|
9012
|
-
transform: scaleX(
|
|
9082
|
+
transform: scaleX(var(--progress-scale-initial));
|
|
9013
9083
|
}
|
|
9014
9084
|
20% {
|
|
9015
|
-
transform: scaleX(
|
|
9085
|
+
transform: scaleX(var(--progress-scale-step-1));
|
|
9016
9086
|
}
|
|
9017
9087
|
30% {
|
|
9018
|
-
transform: scaleX(
|
|
9088
|
+
transform: scaleX(var(--progress-scale-step-2));
|
|
9019
9089
|
}
|
|
9020
9090
|
40%,
|
|
9021
9091
|
50% {
|
|
9022
|
-
transform: scaleX(
|
|
9092
|
+
transform: scaleX(var(--progress-scale-step-3));
|
|
9023
9093
|
}
|
|
9024
9094
|
100% {
|
|
9025
|
-
transform: scaleX(
|
|
9095
|
+
transform: scaleX(var(--progress-scale-final));
|
|
9026
9096
|
}
|
|
9027
9097
|
}
|
|
9028
9098
|
@keyframes rt-progress-indicator-indeterminate-shine-from-left {
|
|
9029
9099
|
0% {
|
|
9030
|
-
transform: translateX(-
|
|
9100
|
+
transform: translateX(var(--position-negative-full));
|
|
9031
9101
|
}
|
|
9032
9102
|
100% {
|
|
9033
|
-
transform: translateX(
|
|
9103
|
+
transform: translateX(var(--position-zero));
|
|
9034
9104
|
}
|
|
9035
9105
|
}
|
|
9036
9106
|
.rt-ProgressRoot:where(.rt-r-size-1) {
|
|
9037
9107
|
--progress-height: var(--space-1);
|
|
9038
9108
|
}
|
|
9039
9109
|
.rt-ProgressRoot:where(.rt-r-size-2) {
|
|
9040
|
-
--progress-height: calc(var(--space-2) *
|
|
9110
|
+
--progress-height: calc(var(--space-2) * var(--size-multiplier-small));
|
|
9041
9111
|
}
|
|
9042
9112
|
.rt-ProgressRoot:where(.rt-r-size-3) {
|
|
9043
9113
|
--progress-height: var(--space-2);
|
|
@@ -9047,7 +9117,7 @@
|
|
|
9047
9117
|
--progress-height: var(--space-1);
|
|
9048
9118
|
}
|
|
9049
9119
|
.rt-ProgressRoot:where(.xs\:rt-r-size-2) {
|
|
9050
|
-
--progress-height: calc(var(--space-2) *
|
|
9120
|
+
--progress-height: calc(var(--space-2) * var(--size-multiplier-small));
|
|
9051
9121
|
}
|
|
9052
9122
|
.rt-ProgressRoot:where(.xs\:rt-r-size-3) {
|
|
9053
9123
|
--progress-height: var(--space-2);
|
|
@@ -9058,7 +9128,7 @@
|
|
|
9058
9128
|
--progress-height: var(--space-1);
|
|
9059
9129
|
}
|
|
9060
9130
|
.rt-ProgressRoot:where(.sm\:rt-r-size-2) {
|
|
9061
|
-
--progress-height: calc(var(--space-2) *
|
|
9131
|
+
--progress-height: calc(var(--space-2) * var(--size-multiplier-small));
|
|
9062
9132
|
}
|
|
9063
9133
|
.rt-ProgressRoot:where(.sm\:rt-r-size-3) {
|
|
9064
9134
|
--progress-height: var(--space-2);
|
|
@@ -9069,7 +9139,7 @@
|
|
|
9069
9139
|
--progress-height: var(--space-1);
|
|
9070
9140
|
}
|
|
9071
9141
|
.rt-ProgressRoot:where(.md\:rt-r-size-2) {
|
|
9072
|
-
--progress-height: calc(var(--space-2) *
|
|
9142
|
+
--progress-height: calc(var(--space-2) * var(--size-multiplier-small));
|
|
9073
9143
|
}
|
|
9074
9144
|
.rt-ProgressRoot:where(.md\:rt-r-size-3) {
|
|
9075
9145
|
--progress-height: var(--space-2);
|
|
@@ -9080,7 +9150,7 @@
|
|
|
9080
9150
|
--progress-height: var(--space-1);
|
|
9081
9151
|
}
|
|
9082
9152
|
.rt-ProgressRoot:where(.lg\:rt-r-size-2) {
|
|
9083
|
-
--progress-height: calc(var(--space-2) *
|
|
9153
|
+
--progress-height: calc(var(--space-2) * var(--size-multiplier-small));
|
|
9084
9154
|
}
|
|
9085
9155
|
.rt-ProgressRoot:where(.lg\:rt-r-size-3) {
|
|
9086
9156
|
--progress-height: var(--space-2);
|
|
@@ -9091,7 +9161,7 @@
|
|
|
9091
9161
|
--progress-height: var(--space-1);
|
|
9092
9162
|
}
|
|
9093
9163
|
.rt-ProgressRoot:where(.xl\:rt-r-size-2) {
|
|
9094
|
-
--progress-height: calc(var(--space-2) *
|
|
9164
|
+
--progress-height: calc(var(--space-2) * var(--size-multiplier-small));
|
|
9095
9165
|
}
|
|
9096
9166
|
.rt-ProgressRoot:where(.xl\:rt-r-size-3) {
|
|
9097
9167
|
--progress-height: var(--space-2);
|
|
@@ -9103,7 +9173,7 @@
|
|
|
9103
9173
|
background-color: var(--gray-a3);
|
|
9104
9174
|
}
|
|
9105
9175
|
.rt-ProgressRoot:where(.rt-variant-surface)::after {
|
|
9106
|
-
box-shadow: inset 0 0 0
|
|
9176
|
+
box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a4);
|
|
9107
9177
|
}
|
|
9108
9178
|
.rt-ProgressRoot:where(.rt-variant-surface) :where(.rt-ProgressIndicator) {
|
|
9109
9179
|
background-color: var(--accent-track);
|
|
@@ -9124,10 +9194,12 @@
|
|
|
9124
9194
|
.rt-ProgressRoot:where(.rt-variant-classic) {
|
|
9125
9195
|
--progress-indicator-indeterminate-animation-start: rt-progress-indicator-classic-indeterminate-fade;
|
|
9126
9196
|
--progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-classic-indeterminate-pulse;
|
|
9197
|
+
position: relative;
|
|
9198
|
+
top: calc(var(--classic-elevation-offset) / var(--classic-elevation-factor-subtle));
|
|
9127
9199
|
background-color: var(--gray-a3);
|
|
9128
9200
|
}
|
|
9129
9201
|
.rt-ProgressRoot:where(.rt-variant-classic)::after {
|
|
9130
|
-
box-shadow: var(--shadow-
|
|
9202
|
+
box-shadow: var(--classic-inset-shadow-dark);
|
|
9131
9203
|
}
|
|
9132
9204
|
.rt-ProgressRoot:where(.rt-variant-classic) :where(.rt-ProgressIndicator) {
|
|
9133
9205
|
background-color: var(--accent-track);
|
|
@@ -9156,7 +9228,7 @@
|
|
|
9156
9228
|
background-color: var(--accent-8);
|
|
9157
9229
|
}
|
|
9158
9230
|
.rt-ProgressRoot:where(.rt-variant-soft) :where(.rt-ProgressIndicator)::after {
|
|
9159
|
-
opacity:
|
|
9231
|
+
opacity: var(--opacity-soft-variant);
|
|
9160
9232
|
}
|
|
9161
9233
|
@keyframes rt-progress-indicator-soft-indeterminate-fade {
|
|
9162
9234
|
100% {
|
|
@@ -9179,19 +9251,19 @@
|
|
|
9179
9251
|
background-color: var(--accent-12);
|
|
9180
9252
|
}
|
|
9181
9253
|
.rt-ProgressRoot:where(.rt-high-contrast) :where(.rt-ProgressIndicator)::after {
|
|
9182
|
-
opacity:
|
|
9254
|
+
opacity: var(--opacity-soft-variant);
|
|
9183
9255
|
}
|
|
9184
9256
|
@keyframes rt-progress-indicator-high-contrast-indeterminate-fade {
|
|
9185
9257
|
100% {
|
|
9186
|
-
opacity:
|
|
9258
|
+
opacity: var(--opacity-high-contrast);
|
|
9187
9259
|
}
|
|
9188
9260
|
}
|
|
9189
9261
|
@keyframes rt-progress-indicator-high-contrast-indeterminate-pulse {
|
|
9190
9262
|
0% {
|
|
9191
|
-
opacity:
|
|
9263
|
+
opacity: var(--opacity-high-contrast);
|
|
9192
9264
|
}
|
|
9193
9265
|
100% {
|
|
9194
|
-
opacity:
|
|
9266
|
+
opacity: var(--progress-scale-final);
|
|
9195
9267
|
}
|
|
9196
9268
|
}
|
|
9197
9269
|
.rt-Quote {
|
|
@@ -9207,123 +9279,310 @@
|
|
|
9207
9279
|
.rt-Quote :where(.rt-Quote) {
|
|
9208
9280
|
font-size: inherit;
|
|
9209
9281
|
}
|
|
9210
|
-
.rt-
|
|
9211
|
-
|
|
9212
|
-
|
|
9213
|
-
cursor: default;
|
|
9214
|
-
}
|
|
9215
|
-
.rt-RadioCardsItem {
|
|
9216
|
-
--base-card-padding-top: var(--radio-cards-item-padding-y);
|
|
9217
|
-
--base-card-padding-right: var(--radio-cards-item-padding-x);
|
|
9218
|
-
--base-card-padding-bottom: var(--radio-cards-item-padding-y);
|
|
9219
|
-
--base-card-padding-left: var(--radio-cards-item-padding-x);
|
|
9220
|
-
--base-card-border-radius: var(--radio-cards-item-border-radius);
|
|
9221
|
-
--base-card-border-width: var(--radio-cards-item-border-width);
|
|
9222
|
-
display: flex;
|
|
9282
|
+
.rt-BaseRadioRoot {
|
|
9283
|
+
position: relative;
|
|
9284
|
+
display: inline-flex;
|
|
9223
9285
|
align-items: center;
|
|
9224
9286
|
justify-content: center;
|
|
9225
|
-
|
|
9287
|
+
vertical-align: top;
|
|
9288
|
+
flex-shrink: 0;
|
|
9289
|
+
cursor: var(--cursor-radio);
|
|
9290
|
+
height: var(--skeleton-height, var(--line-height, var(--radio-size)));
|
|
9291
|
+
--skeleton-height-override: var(--radio-size);
|
|
9292
|
+
border-radius: var(--skeleton-radius);
|
|
9293
|
+
--skeleton-radius-override: 100%;
|
|
9226
9294
|
}
|
|
9227
|
-
.rt-
|
|
9295
|
+
.rt-BaseRadioRoot:where(:disabled, [data-disabled]) {
|
|
9296
|
+
cursor: var(--cursor-disabled);
|
|
9297
|
+
}
|
|
9298
|
+
.rt-BaseRadioRoot::before {
|
|
9299
|
+
content: '';
|
|
9300
|
+
display: block;
|
|
9301
|
+
height: var(--radio-size);
|
|
9302
|
+
width: var(--radio-size);
|
|
9303
|
+
border-radius: 100%;
|
|
9304
|
+
transition: var(--transition-radio);
|
|
9305
|
+
}
|
|
9306
|
+
.rt-BaseRadioRoot::after {
|
|
9228
9307
|
pointer-events: none;
|
|
9308
|
+
position: absolute;
|
|
9309
|
+
height: var(--radio-size);
|
|
9310
|
+
width: var(--radio-size);
|
|
9311
|
+
border-radius: 100%;
|
|
9312
|
+
transform: scale(0.4);
|
|
9313
|
+
transition: var(--transition-radio);
|
|
9229
9314
|
}
|
|
9230
|
-
.rt-
|
|
9231
|
-
|
|
9315
|
+
.rt-BaseRadioRoot:where(:checked, [data-state='checked'])::after {
|
|
9316
|
+
content: '';
|
|
9232
9317
|
}
|
|
9233
|
-
.rt-
|
|
9234
|
-
outline
|
|
9318
|
+
.rt-BaseRadioRoot:where(:focus-visible)::before {
|
|
9319
|
+
outline: 2px solid var(--focus-8);
|
|
9320
|
+
outline-offset: 2px;
|
|
9235
9321
|
}
|
|
9236
|
-
.rt-
|
|
9237
|
-
|
|
9238
|
-
--line-height: var(--line-height-2);
|
|
9239
|
-
--letter-spacing: var(--letter-spacing-2);
|
|
9240
|
-
--radio-cards-item-padding-x: var(--space-3);
|
|
9241
|
-
--radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
|
|
9242
|
-
--radio-cards-item-border-radius: var(--radius-3);
|
|
9322
|
+
.rt-BaseRadioRoot:where(.rt-r-size-1) {
|
|
9323
|
+
--radio-size: calc(var(--space-4) * 0.875);
|
|
9243
9324
|
}
|
|
9244
|
-
.rt-
|
|
9245
|
-
|
|
9246
|
-
--line-height: var(--line-height-2);
|
|
9247
|
-
--letter-spacing: var(--letter-spacing-2);
|
|
9248
|
-
--radio-cards-item-padding-x: var(--space-4);
|
|
9249
|
-
--radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
|
|
9250
|
-
--radio-cards-item-border-radius: var(--radius-3);
|
|
9325
|
+
.rt-BaseRadioRoot:where(.rt-r-size-2) {
|
|
9326
|
+
--radio-size: var(--space-4);
|
|
9251
9327
|
}
|
|
9252
|
-
.rt-
|
|
9253
|
-
|
|
9254
|
-
--line-height: var(--line-height-3);
|
|
9255
|
-
--letter-spacing: var(--letter-spacing-3);
|
|
9256
|
-
--radio-cards-item-padding-x: var(--space-5);
|
|
9257
|
-
--radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
|
|
9258
|
-
--radio-cards-item-border-radius: var(--radius-4);
|
|
9328
|
+
.rt-BaseRadioRoot:where(.rt-r-size-3) {
|
|
9329
|
+
--radio-size: calc(var(--space-4) * 1.25);
|
|
9259
9330
|
}
|
|
9260
9331
|
@media (min-width: 520px) {
|
|
9261
|
-
.rt-
|
|
9262
|
-
|
|
9263
|
-
--line-height: var(--line-height-2);
|
|
9264
|
-
--letter-spacing: var(--letter-spacing-2);
|
|
9265
|
-
--radio-cards-item-padding-x: var(--space-3);
|
|
9266
|
-
--radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
|
|
9267
|
-
--radio-cards-item-border-radius: var(--radius-3);
|
|
9332
|
+
.rt-BaseRadioRoot:where(.xs\:rt-r-size-1) {
|
|
9333
|
+
--radio-size: calc(var(--space-4) * 0.875);
|
|
9268
9334
|
}
|
|
9269
|
-
.rt-
|
|
9270
|
-
|
|
9271
|
-
--line-height: var(--line-height-2);
|
|
9272
|
-
--letter-spacing: var(--letter-spacing-2);
|
|
9273
|
-
--radio-cards-item-padding-x: var(--space-4);
|
|
9274
|
-
--radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
|
|
9275
|
-
--radio-cards-item-border-radius: var(--radius-3);
|
|
9335
|
+
.rt-BaseRadioRoot:where(.xs\:rt-r-size-2) {
|
|
9336
|
+
--radio-size: var(--space-4);
|
|
9276
9337
|
}
|
|
9277
|
-
.rt-
|
|
9278
|
-
|
|
9279
|
-
--line-height: var(--line-height-3);
|
|
9280
|
-
--letter-spacing: var(--letter-spacing-3);
|
|
9281
|
-
--radio-cards-item-padding-x: var(--space-5);
|
|
9282
|
-
--radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
|
|
9283
|
-
--radio-cards-item-border-radius: var(--radius-4);
|
|
9338
|
+
.rt-BaseRadioRoot:where(.xs\:rt-r-size-3) {
|
|
9339
|
+
--radio-size: calc(var(--space-4) * 1.25);
|
|
9284
9340
|
}
|
|
9285
9341
|
}
|
|
9286
9342
|
@media (min-width: 768px) {
|
|
9287
|
-
.rt-
|
|
9288
|
-
|
|
9289
|
-
--line-height: var(--line-height-2);
|
|
9290
|
-
--letter-spacing: var(--letter-spacing-2);
|
|
9291
|
-
--radio-cards-item-padding-x: var(--space-3);
|
|
9292
|
-
--radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
|
|
9293
|
-
--radio-cards-item-border-radius: var(--radius-3);
|
|
9343
|
+
.rt-BaseRadioRoot:where(.sm\:rt-r-size-1) {
|
|
9344
|
+
--radio-size: calc(var(--space-4) * 0.875);
|
|
9294
9345
|
}
|
|
9295
|
-
.rt-
|
|
9296
|
-
|
|
9297
|
-
--line-height: var(--line-height-2);
|
|
9298
|
-
--letter-spacing: var(--letter-spacing-2);
|
|
9299
|
-
--radio-cards-item-padding-x: var(--space-4);
|
|
9300
|
-
--radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
|
|
9301
|
-
--radio-cards-item-border-radius: var(--radius-3);
|
|
9346
|
+
.rt-BaseRadioRoot:where(.sm\:rt-r-size-2) {
|
|
9347
|
+
--radio-size: var(--space-4);
|
|
9302
9348
|
}
|
|
9303
|
-
.rt-
|
|
9304
|
-
|
|
9305
|
-
--line-height: var(--line-height-3);
|
|
9306
|
-
--letter-spacing: var(--letter-spacing-3);
|
|
9307
|
-
--radio-cards-item-padding-x: var(--space-5);
|
|
9308
|
-
--radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
|
|
9309
|
-
--radio-cards-item-border-radius: var(--radius-4);
|
|
9349
|
+
.rt-BaseRadioRoot:where(.sm\:rt-r-size-3) {
|
|
9350
|
+
--radio-size: calc(var(--space-4) * 1.25);
|
|
9310
9351
|
}
|
|
9311
9352
|
}
|
|
9312
9353
|
@media (min-width: 1024px) {
|
|
9313
|
-
.rt-
|
|
9314
|
-
|
|
9315
|
-
|
|
9316
|
-
|
|
9317
|
-
--radio-
|
|
9318
|
-
|
|
9319
|
-
|
|
9354
|
+
.rt-BaseRadioRoot:where(.md\:rt-r-size-1) {
|
|
9355
|
+
--radio-size: calc(var(--space-4) * 0.875);
|
|
9356
|
+
}
|
|
9357
|
+
.rt-BaseRadioRoot:where(.md\:rt-r-size-2) {
|
|
9358
|
+
--radio-size: var(--space-4);
|
|
9359
|
+
}
|
|
9360
|
+
.rt-BaseRadioRoot:where(.md\:rt-r-size-3) {
|
|
9361
|
+
--radio-size: calc(var(--space-4) * 1.25);
|
|
9362
|
+
}
|
|
9363
|
+
}
|
|
9364
|
+
@media (min-width: 1280px) {
|
|
9365
|
+
.rt-BaseRadioRoot:where(.lg\:rt-r-size-1) {
|
|
9366
|
+
--radio-size: calc(var(--space-4) * 0.875);
|
|
9367
|
+
}
|
|
9368
|
+
.rt-BaseRadioRoot:where(.lg\:rt-r-size-2) {
|
|
9369
|
+
--radio-size: var(--space-4);
|
|
9370
|
+
}
|
|
9371
|
+
.rt-BaseRadioRoot:where(.lg\:rt-r-size-3) {
|
|
9372
|
+
--radio-size: calc(var(--space-4) * 1.25);
|
|
9373
|
+
}
|
|
9374
|
+
}
|
|
9375
|
+
@media (min-width: 1640px) {
|
|
9376
|
+
.rt-BaseRadioRoot:where(.xl\:rt-r-size-1) {
|
|
9377
|
+
--radio-size: calc(var(--space-4) * 0.875);
|
|
9378
|
+
}
|
|
9379
|
+
.rt-BaseRadioRoot:where(.xl\:rt-r-size-2) {
|
|
9380
|
+
--radio-size: var(--space-4);
|
|
9381
|
+
}
|
|
9382
|
+
.rt-BaseRadioRoot:where(.xl\:rt-r-size-3) {
|
|
9383
|
+
--radio-size: calc(var(--space-4) * 1.25);
|
|
9384
|
+
}
|
|
9385
|
+
}
|
|
9386
|
+
.rt-BaseRadioRoot:where(.rt-variant-solid):where(:not(:checked), [data-state='unchecked'])::before {
|
|
9387
|
+
background-color: var(--color-surface);
|
|
9388
|
+
box-shadow: inset 0 0 0 1px var(--gray-a7);
|
|
9389
|
+
}
|
|
9390
|
+
.rt-BaseRadioRoot:where(.rt-variant-solid):where(:checked, [data-state='checked'])::before {
|
|
9391
|
+
background-color: var(--accent-indicator);
|
|
9392
|
+
}
|
|
9393
|
+
.rt-BaseRadioRoot:where(.rt-variant-solid)::after {
|
|
9394
|
+
background-color: var(--accent-contrast);
|
|
9395
|
+
}
|
|
9396
|
+
.rt-BaseRadioRoot:where(.rt-variant-solid):where(.rt-high-contrast):where(:checked, [data-state='checked'])::before {
|
|
9397
|
+
background-color: var(--accent-12);
|
|
9398
|
+
}
|
|
9399
|
+
.rt-BaseRadioRoot:where(.rt-variant-solid):where(.rt-high-contrast)::after {
|
|
9400
|
+
background-color: var(--accent-1);
|
|
9401
|
+
}
|
|
9402
|
+
.rt-BaseRadioRoot:where(.rt-variant-solid):where(:disabled, [data-disabled])::before {
|
|
9403
|
+
box-shadow: inset 0 0 0 1px var(--gray-a6);
|
|
9404
|
+
background-color: var(--gray-a3);
|
|
9405
|
+
}
|
|
9406
|
+
.rt-BaseRadioRoot:where(.rt-variant-solid):where(:disabled, [data-disabled])::after {
|
|
9407
|
+
background-color: var(--gray-a8);
|
|
9408
|
+
}
|
|
9409
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic) {
|
|
9410
|
+
position: relative;
|
|
9411
|
+
top: var(--classic-elevation-offset);
|
|
9412
|
+
}
|
|
9413
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:not(:checked), [data-state='unchecked'])::before {
|
|
9414
|
+
background-color: var(--accent-2);
|
|
9415
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6), 0 0 0 var(--classic-border-width) var(--accent-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
|
|
9416
|
+
}
|
|
9417
|
+
:where(.dark, .dark-theme) .rt-BaseRadioRoot:where(.rt-variant-classic):where(:not(:checked), [data-state='unchecked'])::before, :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-BaseRadioRoot:where(.rt-variant-classic):where(:not(:checked), [data-state='unchecked'])::before {
|
|
9418
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3), inset 0 var(--classic-border-width) var(--accent-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--accent-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
|
|
9419
|
+
}
|
|
9420
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:checked, [data-state='checked'])::before {
|
|
9421
|
+
background-color: var(--accent-3);
|
|
9422
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6), 0 0 0 var(--classic-border-width) var(--accent-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
|
|
9423
|
+
}
|
|
9424
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic)::after {
|
|
9425
|
+
background-color: var(--accent-a11);
|
|
9426
|
+
}
|
|
9427
|
+
:where(.dark, .dark-theme) .rt-BaseRadioRoot:where(.rt-variant-classic):where(:checked, [data-state='checked'])::before, :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) .rt-BaseRadioRoot:where(.rt-variant-classic):where(:checked, [data-state='checked'])::before {
|
|
9428
|
+
background-color: var(--accent-3);
|
|
9429
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3), inset 0 var(--classic-border-width) var(--accent-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--accent-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
|
|
9430
|
+
}
|
|
9431
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic):where(.rt-high-contrast)::after {
|
|
9432
|
+
background-color: var(--accent-12);
|
|
9433
|
+
}
|
|
9434
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:active:not(:disabled, [data-disabled])) {
|
|
9435
|
+
top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
|
|
9436
|
+
}
|
|
9437
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:active:not(:disabled, [data-disabled]))::before {
|
|
9438
|
+
box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
|
|
9439
|
+
}
|
|
9440
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled])::before {
|
|
9441
|
+
background-color: var(--gray-a3);
|
|
9442
|
+
box-shadow: none;
|
|
9443
|
+
background-image: none;
|
|
9444
|
+
}
|
|
9445
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled])::after {
|
|
9446
|
+
background-color: var(--gray-a8);
|
|
9447
|
+
}
|
|
9448
|
+
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled]) {
|
|
9449
|
+
top: 0;
|
|
9450
|
+
}
|
|
9451
|
+
.rt-BaseRadioRoot:where(.rt-variant-soft)::before {
|
|
9452
|
+
background-color: var(--accent-a4);
|
|
9453
|
+
}
|
|
9454
|
+
.rt-BaseRadioRoot:where(.rt-variant-soft)::after {
|
|
9455
|
+
background-color: var(--accent-a11);
|
|
9456
|
+
}
|
|
9457
|
+
.rt-BaseRadioRoot:where(.rt-variant-soft):where(.rt-high-contrast)::after {
|
|
9458
|
+
background-color: var(--accent-12);
|
|
9459
|
+
}
|
|
9460
|
+
.rt-BaseRadioRoot:where(.rt-variant-soft):where(:focus-visible)::before {
|
|
9461
|
+
outline-color: var(--accent-a8);
|
|
9462
|
+
}
|
|
9463
|
+
.rt-BaseRadioRoot:where(.rt-variant-soft):where(:disabled, [data-disabled])::before {
|
|
9464
|
+
background-color: var(--gray-a3);
|
|
9465
|
+
}
|
|
9466
|
+
.rt-BaseRadioRoot:where(.rt-variant-soft):where(:disabled, [data-disabled])::after {
|
|
9467
|
+
background-color: var(--gray-a8);
|
|
9468
|
+
}
|
|
9469
|
+
.rt-RadioCardsRoot {
|
|
9470
|
+
line-height: var(--line-height);
|
|
9471
|
+
letter-spacing: var(--letter-spacing);
|
|
9472
|
+
cursor: default;
|
|
9473
|
+
}
|
|
9474
|
+
.rt-RadioCardsItem {
|
|
9475
|
+
--base-card-padding-top: var(--radio-cards-item-padding-y);
|
|
9476
|
+
--base-card-padding-right: var(--radio-cards-item-padding-x);
|
|
9477
|
+
--base-card-padding-bottom: var(--radio-cards-item-padding-y);
|
|
9478
|
+
--base-card-padding-left: var(--radio-cards-item-padding-x);
|
|
9479
|
+
--base-card-border-radius: var(--radio-cards-item-border-radius);
|
|
9480
|
+
--base-card-border-width: var(--radio-cards-item-border-width);
|
|
9481
|
+
display: flex;
|
|
9482
|
+
align-items: center;
|
|
9483
|
+
justify-content: center;
|
|
9484
|
+
gap: var(--space-2);
|
|
9485
|
+
}
|
|
9486
|
+
.rt-RadioCardsItem > * {
|
|
9487
|
+
pointer-events: none;
|
|
9488
|
+
}
|
|
9489
|
+
.rt-RadioCardsItem > :where(svg) {
|
|
9490
|
+
flex-shrink: 0;
|
|
9491
|
+
}
|
|
9492
|
+
.rt-RadioCardsItem::after {
|
|
9493
|
+
outline-offset: -1px;
|
|
9494
|
+
}
|
|
9495
|
+
.rt-RadioCardsRoot:where(.rt-r-size-1) {
|
|
9496
|
+
font-size: var(--font-size-2);
|
|
9497
|
+
--line-height: var(--line-height-2);
|
|
9498
|
+
--letter-spacing: var(--letter-spacing-2);
|
|
9499
|
+
--radio-cards-item-padding-x: var(--space-3);
|
|
9500
|
+
--radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
9501
|
+
--radio-cards-item-border-radius: var(--radius-3);
|
|
9502
|
+
}
|
|
9503
|
+
.rt-RadioCardsRoot:where(.rt-r-size-2) {
|
|
9504
|
+
font-size: var(--font-size-2);
|
|
9505
|
+
--line-height: var(--line-height-2);
|
|
9506
|
+
--letter-spacing: var(--letter-spacing-2);
|
|
9507
|
+
--radio-cards-item-padding-x: var(--space-4);
|
|
9508
|
+
--radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
9509
|
+
--radio-cards-item-border-radius: var(--radius-3);
|
|
9510
|
+
}
|
|
9511
|
+
.rt-RadioCardsRoot:where(.rt-r-size-3) {
|
|
9512
|
+
font-size: var(--font-size-3);
|
|
9513
|
+
--line-height: var(--line-height-3);
|
|
9514
|
+
--letter-spacing: var(--letter-spacing-3);
|
|
9515
|
+
--radio-cards-item-padding-x: var(--space-5);
|
|
9516
|
+
--radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
9517
|
+
--radio-cards-item-border-radius: var(--radius-4);
|
|
9518
|
+
}
|
|
9519
|
+
@media (min-width: 520px) {
|
|
9520
|
+
.rt-RadioCardsRoot:where(.xs\:rt-r-size-1) {
|
|
9521
|
+
font-size: var(--font-size-2);
|
|
9522
|
+
--line-height: var(--line-height-2);
|
|
9523
|
+
--letter-spacing: var(--letter-spacing-2);
|
|
9524
|
+
--radio-cards-item-padding-x: var(--space-3);
|
|
9525
|
+
--radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
9526
|
+
--radio-cards-item-border-radius: var(--radius-3);
|
|
9527
|
+
}
|
|
9528
|
+
.rt-RadioCardsRoot:where(.xs\:rt-r-size-2) {
|
|
9529
|
+
font-size: var(--font-size-2);
|
|
9530
|
+
--line-height: var(--line-height-2);
|
|
9531
|
+
--letter-spacing: var(--letter-spacing-2);
|
|
9532
|
+
--radio-cards-item-padding-x: var(--space-4);
|
|
9533
|
+
--radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
9534
|
+
--radio-cards-item-border-radius: var(--radius-3);
|
|
9535
|
+
}
|
|
9536
|
+
.rt-RadioCardsRoot:where(.xs\:rt-r-size-3) {
|
|
9537
|
+
font-size: var(--font-size-3);
|
|
9538
|
+
--line-height: var(--line-height-3);
|
|
9539
|
+
--letter-spacing: var(--letter-spacing-3);
|
|
9540
|
+
--radio-cards-item-padding-x: var(--space-5);
|
|
9541
|
+
--radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
9542
|
+
--radio-cards-item-border-radius: var(--radius-4);
|
|
9543
|
+
}
|
|
9544
|
+
}
|
|
9545
|
+
@media (min-width: 768px) {
|
|
9546
|
+
.rt-RadioCardsRoot:where(.sm\:rt-r-size-1) {
|
|
9547
|
+
font-size: var(--font-size-2);
|
|
9548
|
+
--line-height: var(--line-height-2);
|
|
9549
|
+
--letter-spacing: var(--letter-spacing-2);
|
|
9550
|
+
--radio-cards-item-padding-x: var(--space-3);
|
|
9551
|
+
--radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
9552
|
+
--radio-cards-item-border-radius: var(--radius-3);
|
|
9553
|
+
}
|
|
9554
|
+
.rt-RadioCardsRoot:where(.sm\:rt-r-size-2) {
|
|
9555
|
+
font-size: var(--font-size-2);
|
|
9556
|
+
--line-height: var(--line-height-2);
|
|
9557
|
+
--letter-spacing: var(--letter-spacing-2);
|
|
9558
|
+
--radio-cards-item-padding-x: var(--space-4);
|
|
9559
|
+
--radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
9560
|
+
--radio-cards-item-border-radius: var(--radius-3);
|
|
9561
|
+
}
|
|
9562
|
+
.rt-RadioCardsRoot:where(.sm\:rt-r-size-3) {
|
|
9563
|
+
font-size: var(--font-size-3);
|
|
9564
|
+
--line-height: var(--line-height-3);
|
|
9565
|
+
--letter-spacing: var(--letter-spacing-3);
|
|
9566
|
+
--radio-cards-item-padding-x: var(--space-5);
|
|
9567
|
+
--radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
9568
|
+
--radio-cards-item-border-radius: var(--radius-4);
|
|
9569
|
+
}
|
|
9570
|
+
}
|
|
9571
|
+
@media (min-width: 1024px) {
|
|
9572
|
+
.rt-RadioCardsRoot:where(.md\:rt-r-size-1) {
|
|
9573
|
+
font-size: var(--font-size-2);
|
|
9574
|
+
--line-height: var(--line-height-2);
|
|
9575
|
+
--letter-spacing: var(--letter-spacing-2);
|
|
9576
|
+
--radio-cards-item-padding-x: var(--space-3);
|
|
9577
|
+
--radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
9578
|
+
--radio-cards-item-border-radius: var(--radius-3);
|
|
9320
9579
|
}
|
|
9321
9580
|
.rt-RadioCardsRoot:where(.md\:rt-r-size-2) {
|
|
9322
9581
|
font-size: var(--font-size-2);
|
|
9323
9582
|
--line-height: var(--line-height-2);
|
|
9324
9583
|
--letter-spacing: var(--letter-spacing-2);
|
|
9325
9584
|
--radio-cards-item-padding-x: var(--space-4);
|
|
9326
|
-
--radio-cards-item-padding-y: calc(var(--space-4) *
|
|
9585
|
+
--radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
9327
9586
|
--radio-cards-item-border-radius: var(--radius-3);
|
|
9328
9587
|
}
|
|
9329
9588
|
.rt-RadioCardsRoot:where(.md\:rt-r-size-3) {
|
|
@@ -9331,7 +9590,7 @@
|
|
|
9331
9590
|
--line-height: var(--line-height-3);
|
|
9332
9591
|
--letter-spacing: var(--letter-spacing-3);
|
|
9333
9592
|
--radio-cards-item-padding-x: var(--space-5);
|
|
9334
|
-
--radio-cards-item-padding-y: calc(var(--space-5)
|
|
9593
|
+
--radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
9335
9594
|
--radio-cards-item-border-radius: var(--radius-4);
|
|
9336
9595
|
}
|
|
9337
9596
|
}
|
|
@@ -9341,7 +9600,7 @@
|
|
|
9341
9600
|
--line-height: var(--line-height-2);
|
|
9342
9601
|
--letter-spacing: var(--letter-spacing-2);
|
|
9343
9602
|
--radio-cards-item-padding-x: var(--space-3);
|
|
9344
|
-
--radio-cards-item-padding-y: calc(var(--space-3)
|
|
9603
|
+
--radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
9345
9604
|
--radio-cards-item-border-radius: var(--radius-3);
|
|
9346
9605
|
}
|
|
9347
9606
|
.rt-RadioCardsRoot:where(.lg\:rt-r-size-2) {
|
|
@@ -9349,7 +9608,7 @@
|
|
|
9349
9608
|
--line-height: var(--line-height-2);
|
|
9350
9609
|
--letter-spacing: var(--letter-spacing-2);
|
|
9351
9610
|
--radio-cards-item-padding-x: var(--space-4);
|
|
9352
|
-
--radio-cards-item-padding-y: calc(var(--space-4) *
|
|
9611
|
+
--radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
9353
9612
|
--radio-cards-item-border-radius: var(--radius-3);
|
|
9354
9613
|
}
|
|
9355
9614
|
.rt-RadioCardsRoot:where(.lg\:rt-r-size-3) {
|
|
@@ -9357,7 +9616,7 @@
|
|
|
9357
9616
|
--line-height: var(--line-height-3);
|
|
9358
9617
|
--letter-spacing: var(--letter-spacing-3);
|
|
9359
9618
|
--radio-cards-item-padding-x: var(--space-5);
|
|
9360
|
-
--radio-cards-item-padding-y: calc(var(--space-5)
|
|
9619
|
+
--radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
9361
9620
|
--radio-cards-item-border-radius: var(--radius-4);
|
|
9362
9621
|
}
|
|
9363
9622
|
}
|
|
@@ -9367,7 +9626,7 @@
|
|
|
9367
9626
|
--line-height: var(--line-height-2);
|
|
9368
9627
|
--letter-spacing: var(--letter-spacing-2);
|
|
9369
9628
|
--radio-cards-item-padding-x: var(--space-3);
|
|
9370
|
-
--radio-cards-item-padding-y: calc(var(--space-3)
|
|
9629
|
+
--radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
|
|
9371
9630
|
--radio-cards-item-border-radius: var(--radius-3);
|
|
9372
9631
|
}
|
|
9373
9632
|
.rt-RadioCardsRoot:where(.xl\:rt-r-size-2) {
|
|
@@ -9375,7 +9634,7 @@
|
|
|
9375
9634
|
--line-height: var(--line-height-2);
|
|
9376
9635
|
--letter-spacing: var(--letter-spacing-2);
|
|
9377
9636
|
--radio-cards-item-padding-x: var(--space-4);
|
|
9378
|
-
--radio-cards-item-padding-y: calc(var(--space-4) *
|
|
9637
|
+
--radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
|
|
9379
9638
|
--radio-cards-item-border-radius: var(--radius-3);
|
|
9380
9639
|
}
|
|
9381
9640
|
.rt-RadioCardsRoot:where(.xl\:rt-r-size-3) {
|
|
@@ -9383,13 +9642,14 @@
|
|
|
9383
9642
|
--line-height: var(--line-height-3);
|
|
9384
9643
|
--letter-spacing: var(--letter-spacing-3);
|
|
9385
9644
|
--radio-cards-item-padding-x: var(--space-5);
|
|
9386
|
-
--radio-cards-item-padding-y: calc(var(--space-5)
|
|
9645
|
+
--radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
|
|
9387
9646
|
--radio-cards-item-border-radius: var(--radius-4);
|
|
9388
9647
|
}
|
|
9389
9648
|
}
|
|
9390
9649
|
:where(.rt-RadioCardsRoot.rt-variant-surface) .rt-RadioCardsItem {
|
|
9391
|
-
--radio-cards-item-border-width:
|
|
9650
|
+
--radio-cards-item-border-width: var(--border-width-standard);
|
|
9392
9651
|
--radio-cards-item-background-color: var(--color-surface);
|
|
9652
|
+
transition: var(--transition-card);
|
|
9393
9653
|
}
|
|
9394
9654
|
:where(.rt-RadioCardsRoot.rt-variant-surface) .rt-RadioCardsItem::before {
|
|
9395
9655
|
background-color: var(--radio-cards-item-background-color);
|
|
@@ -9398,14 +9658,23 @@
|
|
|
9398
9658
|
box-shadow: var(--base-card-surface-box-shadow);
|
|
9399
9659
|
}
|
|
9400
9660
|
@media (hover: hover) {
|
|
9661
|
+
:where(.rt-RadioCardsRoot.rt-variant-surface) .rt-RadioCardsItem:where(:not(:disabled):not([data-state='checked']):hover) {
|
|
9662
|
+
transition-duration: var(--duration-1);
|
|
9663
|
+
}
|
|
9401
9664
|
:where(.rt-RadioCardsRoot.rt-variant-surface) .rt-RadioCardsItem:where(:not(:disabled):not([data-state='checked']):hover)::after {
|
|
9402
9665
|
box-shadow: var(--base-card-surface-hover-box-shadow);
|
|
9403
9666
|
}
|
|
9404
9667
|
}
|
|
9668
|
+
:where(.rt-RadioCardsRoot.rt-variant-surface):where([data-panel-background='solid']) .rt-RadioCardsItem {
|
|
9669
|
+
--color-surface: var(--color-surface-solid);
|
|
9670
|
+
}
|
|
9671
|
+
:where(.rt-RadioCardsRoot.rt-variant-surface):where([data-panel-background='translucent']) .rt-RadioCardsItem {
|
|
9672
|
+
--color-surface: var(--color-surface-translucent);
|
|
9673
|
+
}
|
|
9405
9674
|
:where(.rt-RadioCardsRoot.rt-variant-classic) .rt-RadioCardsItem {
|
|
9406
|
-
--radio-cards-item-border-width:
|
|
9675
|
+
--radio-cards-item-border-width: var(--border-width-standard);
|
|
9407
9676
|
--radio-cards-item-background-color: var(--color-surface);
|
|
9408
|
-
transition:
|
|
9677
|
+
transition: var(--transition-card);
|
|
9409
9678
|
box-shadow: var(--base-card-classic-box-shadow-outer);
|
|
9410
9679
|
}
|
|
9411
9680
|
:where(.rt-RadioCardsRoot.rt-variant-classic) .rt-RadioCardsItem::before {
|
|
@@ -9416,21 +9685,33 @@
|
|
|
9416
9685
|
}
|
|
9417
9686
|
@media (hover: hover) {
|
|
9418
9687
|
:where(.rt-RadioCardsRoot.rt-variant-classic) .rt-RadioCardsItem:where(:not(:disabled):not([data-state='checked']):hover) {
|
|
9419
|
-
transition-duration:
|
|
9688
|
+
transition-duration: var(--duration-1);
|
|
9420
9689
|
box-shadow: var(--base-card-classic-hover-box-shadow-outer);
|
|
9421
9690
|
}
|
|
9422
9691
|
:where(.rt-RadioCardsRoot.rt-variant-classic) .rt-RadioCardsItem:where(:not(:disabled):not([data-state='checked']):hover)::after {
|
|
9423
9692
|
box-shadow: var(--base-card-classic-hover-box-shadow-inner);
|
|
9424
9693
|
}
|
|
9425
9694
|
}
|
|
9695
|
+
:where(.rt-RadioCardsRoot.rt-variant-classic):where([data-panel-background='solid']) .rt-RadioCardsItem {
|
|
9696
|
+
--color-surface: var(--color-surface-solid);
|
|
9697
|
+
}
|
|
9698
|
+
:where(.rt-RadioCardsRoot.rt-variant-classic):where([data-panel-background='translucent']) .rt-RadioCardsItem {
|
|
9699
|
+
--color-surface: var(--color-surface-translucent);
|
|
9700
|
+
}
|
|
9701
|
+
.rt-RadioCardsItem:where([data-state='checked']) {
|
|
9702
|
+
transition: var(--transition-fast);
|
|
9703
|
+
}
|
|
9426
9704
|
.rt-RadioCardsItem:where([data-state='checked'])::after {
|
|
9427
|
-
outline:
|
|
9705
|
+
outline: var(--focus-outline-width) solid var(--accent-indicator);
|
|
9428
9706
|
}
|
|
9429
9707
|
:where(.rt-RadioCardsRoot.rt-high-contrast) .rt-RadioCardsItem:where([data-state='checked'])::after {
|
|
9430
9708
|
outline-color: var(--accent-12);
|
|
9431
9709
|
}
|
|
9710
|
+
.rt-RadioCardsItem:where(:focus-visible) {
|
|
9711
|
+
transition: var(--transition-focus);
|
|
9712
|
+
}
|
|
9432
9713
|
.rt-RadioCardsItem:where(:focus-visible)::after {
|
|
9433
|
-
outline:
|
|
9714
|
+
outline: var(--focus-outline-width) solid var(--focus-8);
|
|
9434
9715
|
}
|
|
9435
9716
|
.rt-RadioCardsItem:where(:focus-visible):where([data-state='checked'])::before {
|
|
9436
9717
|
background-image: linear-gradient(var(--focus-a3), var(--focus-a3));
|
|
@@ -9465,175 +9746,6 @@
|
|
|
9465
9746
|
.rt-RadioGroupItemInner {
|
|
9466
9747
|
min-width: 0;
|
|
9467
9748
|
}
|
|
9468
|
-
.rt-BaseRadioRoot {
|
|
9469
|
-
position: relative;
|
|
9470
|
-
display: inline-flex;
|
|
9471
|
-
align-items: center;
|
|
9472
|
-
justify-content: center;
|
|
9473
|
-
vertical-align: top;
|
|
9474
|
-
flex-shrink: 0;
|
|
9475
|
-
cursor: var(--cursor-radio);
|
|
9476
|
-
height: var(--skeleton-height, var(--line-height, var(--radio-size)));
|
|
9477
|
-
--skeleton-height-override: var(--radio-size);
|
|
9478
|
-
border-radius: var(--skeleton-radius);
|
|
9479
|
-
--skeleton-radius-override: 100%;
|
|
9480
|
-
}
|
|
9481
|
-
.rt-BaseRadioRoot:where(:disabled, [data-disabled]) {
|
|
9482
|
-
cursor: var(--cursor-disabled);
|
|
9483
|
-
}
|
|
9484
|
-
.rt-BaseRadioRoot::before {
|
|
9485
|
-
content: '';
|
|
9486
|
-
display: block;
|
|
9487
|
-
height: var(--radio-size);
|
|
9488
|
-
width: var(--radio-size);
|
|
9489
|
-
border-radius: 100%;
|
|
9490
|
-
}
|
|
9491
|
-
.rt-BaseRadioRoot::after {
|
|
9492
|
-
pointer-events: none;
|
|
9493
|
-
position: absolute;
|
|
9494
|
-
height: var(--radio-size);
|
|
9495
|
-
width: var(--radio-size);
|
|
9496
|
-
border-radius: 100%;
|
|
9497
|
-
transform: scale(0.4);
|
|
9498
|
-
}
|
|
9499
|
-
.rt-BaseRadioRoot:where(:checked, [data-state='checked'])::after {
|
|
9500
|
-
content: '';
|
|
9501
|
-
}
|
|
9502
|
-
.rt-BaseRadioRoot:where(:focus-visible)::before {
|
|
9503
|
-
outline: 2px solid var(--focus-8);
|
|
9504
|
-
outline-offset: 2px;
|
|
9505
|
-
}
|
|
9506
|
-
.rt-BaseRadioRoot:where(.rt-r-size-1) {
|
|
9507
|
-
--radio-size: calc(var(--space-4) * 0.875);
|
|
9508
|
-
}
|
|
9509
|
-
.rt-BaseRadioRoot:where(.rt-r-size-2) {
|
|
9510
|
-
--radio-size: var(--space-4);
|
|
9511
|
-
}
|
|
9512
|
-
.rt-BaseRadioRoot:where(.rt-r-size-3) {
|
|
9513
|
-
--radio-size: calc(var(--space-4) * 1.25);
|
|
9514
|
-
}
|
|
9515
|
-
@media (min-width: 520px) {
|
|
9516
|
-
.rt-BaseRadioRoot:where(.xs\:rt-r-size-1) {
|
|
9517
|
-
--radio-size: calc(var(--space-4) * 0.875);
|
|
9518
|
-
}
|
|
9519
|
-
.rt-BaseRadioRoot:where(.xs\:rt-r-size-2) {
|
|
9520
|
-
--radio-size: var(--space-4);
|
|
9521
|
-
}
|
|
9522
|
-
.rt-BaseRadioRoot:where(.xs\:rt-r-size-3) {
|
|
9523
|
-
--radio-size: calc(var(--space-4) * 1.25);
|
|
9524
|
-
}
|
|
9525
|
-
}
|
|
9526
|
-
@media (min-width: 768px) {
|
|
9527
|
-
.rt-BaseRadioRoot:where(.sm\:rt-r-size-1) {
|
|
9528
|
-
--radio-size: calc(var(--space-4) * 0.875);
|
|
9529
|
-
}
|
|
9530
|
-
.rt-BaseRadioRoot:where(.sm\:rt-r-size-2) {
|
|
9531
|
-
--radio-size: var(--space-4);
|
|
9532
|
-
}
|
|
9533
|
-
.rt-BaseRadioRoot:where(.sm\:rt-r-size-3) {
|
|
9534
|
-
--radio-size: calc(var(--space-4) * 1.25);
|
|
9535
|
-
}
|
|
9536
|
-
}
|
|
9537
|
-
@media (min-width: 1024px) {
|
|
9538
|
-
.rt-BaseRadioRoot:where(.md\:rt-r-size-1) {
|
|
9539
|
-
--radio-size: calc(var(--space-4) * 0.875);
|
|
9540
|
-
}
|
|
9541
|
-
.rt-BaseRadioRoot:where(.md\:rt-r-size-2) {
|
|
9542
|
-
--radio-size: var(--space-4);
|
|
9543
|
-
}
|
|
9544
|
-
.rt-BaseRadioRoot:where(.md\:rt-r-size-3) {
|
|
9545
|
-
--radio-size: calc(var(--space-4) * 1.25);
|
|
9546
|
-
}
|
|
9547
|
-
}
|
|
9548
|
-
@media (min-width: 1280px) {
|
|
9549
|
-
.rt-BaseRadioRoot:where(.lg\:rt-r-size-1) {
|
|
9550
|
-
--radio-size: calc(var(--space-4) * 0.875);
|
|
9551
|
-
}
|
|
9552
|
-
.rt-BaseRadioRoot:where(.lg\:rt-r-size-2) {
|
|
9553
|
-
--radio-size: var(--space-4);
|
|
9554
|
-
}
|
|
9555
|
-
.rt-BaseRadioRoot:where(.lg\:rt-r-size-3) {
|
|
9556
|
-
--radio-size: calc(var(--space-4) * 1.25);
|
|
9557
|
-
}
|
|
9558
|
-
}
|
|
9559
|
-
@media (min-width: 1640px) {
|
|
9560
|
-
.rt-BaseRadioRoot:where(.xl\:rt-r-size-1) {
|
|
9561
|
-
--radio-size: calc(var(--space-4) * 0.875);
|
|
9562
|
-
}
|
|
9563
|
-
.rt-BaseRadioRoot:where(.xl\:rt-r-size-2) {
|
|
9564
|
-
--radio-size: var(--space-4);
|
|
9565
|
-
}
|
|
9566
|
-
.rt-BaseRadioRoot:where(.xl\:rt-r-size-3) {
|
|
9567
|
-
--radio-size: calc(var(--space-4) * 1.25);
|
|
9568
|
-
}
|
|
9569
|
-
}
|
|
9570
|
-
.rt-BaseRadioRoot:where(.rt-variant-surface):where(:not(:checked), [data-state='unchecked'])::before {
|
|
9571
|
-
background-color: var(--color-surface);
|
|
9572
|
-
box-shadow: inset 0 0 0 1px var(--gray-a7);
|
|
9573
|
-
}
|
|
9574
|
-
.rt-BaseRadioRoot:where(.rt-variant-surface):where(:checked, [data-state='checked'])::before {
|
|
9575
|
-
background-color: var(--accent-indicator);
|
|
9576
|
-
}
|
|
9577
|
-
.rt-BaseRadioRoot:where(.rt-variant-surface)::after {
|
|
9578
|
-
background-color: var(--accent-contrast);
|
|
9579
|
-
}
|
|
9580
|
-
.rt-BaseRadioRoot:where(.rt-variant-surface):where(.rt-high-contrast):where(:checked, [data-state='checked'])::before {
|
|
9581
|
-
background-color: var(--accent-12);
|
|
9582
|
-
}
|
|
9583
|
-
.rt-BaseRadioRoot:where(.rt-variant-surface):where(.rt-high-contrast)::after {
|
|
9584
|
-
background-color: var(--accent-1);
|
|
9585
|
-
}
|
|
9586
|
-
.rt-BaseRadioRoot:where(.rt-variant-surface):where(:disabled, [data-disabled])::before {
|
|
9587
|
-
box-shadow: inset 0 0 0 1px var(--gray-a6);
|
|
9588
|
-
background-color: var(--gray-a3);
|
|
9589
|
-
}
|
|
9590
|
-
.rt-BaseRadioRoot:where(.rt-variant-surface):where(:disabled, [data-disabled])::after {
|
|
9591
|
-
background-color: var(--gray-a8);
|
|
9592
|
-
}
|
|
9593
|
-
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:not(:checked), [data-state='unchecked'])::before {
|
|
9594
|
-
background-color: var(--color-surface);
|
|
9595
|
-
box-shadow: inset 0 0 0 1px var(--gray-7), var(--shadow-1);
|
|
9596
|
-
}
|
|
9597
|
-
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:checked, [data-state='checked'])::before {
|
|
9598
|
-
background-color: var(--accent-indicator);
|
|
9599
|
-
background-image: linear-gradient(to bottom, var(--white-a3), transparent, var(--black-a3));
|
|
9600
|
-
box-shadow: inset 0 0.5px 0.5px var(--white-a4), inset 0 -0.5px 0.5px var(--black-a4);
|
|
9601
|
-
}
|
|
9602
|
-
.rt-BaseRadioRoot:where(.rt-variant-classic)::after {
|
|
9603
|
-
background-color: var(--accent-contrast);
|
|
9604
|
-
}
|
|
9605
|
-
.rt-BaseRadioRoot:where(.rt-variant-classic):where(.rt-high-contrast):where(:checked, [data-state='checked'])::before {
|
|
9606
|
-
background-color: var(--accent-12);
|
|
9607
|
-
}
|
|
9608
|
-
.rt-BaseRadioRoot:where(.rt-variant-classic):where(.rt-high-contrast)::after {
|
|
9609
|
-
background-color: var(--accent-1);
|
|
9610
|
-
}
|
|
9611
|
-
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled])::before {
|
|
9612
|
-
box-shadow: var(--shadow-1);
|
|
9613
|
-
background-color: var(--gray-a3);
|
|
9614
|
-
background-image: none;
|
|
9615
|
-
}
|
|
9616
|
-
.rt-BaseRadioRoot:where(.rt-variant-classic):where(:disabled, [data-disabled])::after {
|
|
9617
|
-
background-color: var(--gray-a8);
|
|
9618
|
-
}
|
|
9619
|
-
.rt-BaseRadioRoot:where(.rt-variant-soft)::before {
|
|
9620
|
-
background-color: var(--accent-a4);
|
|
9621
|
-
}
|
|
9622
|
-
.rt-BaseRadioRoot:where(.rt-variant-soft)::after {
|
|
9623
|
-
background-color: var(--accent-a11);
|
|
9624
|
-
}
|
|
9625
|
-
.rt-BaseRadioRoot:where(.rt-variant-soft):where(.rt-high-contrast)::after {
|
|
9626
|
-
background-color: var(--accent-12);
|
|
9627
|
-
}
|
|
9628
|
-
.rt-BaseRadioRoot:where(.rt-variant-soft):where(:focus-visible)::before {
|
|
9629
|
-
outline-color: var(--accent-a8);
|
|
9630
|
-
}
|
|
9631
|
-
.rt-BaseRadioRoot:where(.rt-variant-soft):where(:disabled, [data-disabled])::before {
|
|
9632
|
-
background-color: var(--gray-a3);
|
|
9633
|
-
}
|
|
9634
|
-
.rt-BaseRadioRoot:where(.rt-variant-soft):where(:disabled, [data-disabled])::after {
|
|
9635
|
-
background-color: var(--gray-a8);
|
|
9636
|
-
}
|
|
9637
9749
|
.rt-ScrollAreaRoot {
|
|
9638
9750
|
display: flex;
|
|
9639
9751
|
flex-direction: column;
|
|
@@ -9799,22 +9911,29 @@
|
|
|
9799
9911
|
background-color: var(--gray-a9);
|
|
9800
9912
|
}
|
|
9801
9913
|
}
|
|
9802
|
-
.rt-SegmentedControlRoot {
|
|
9803
|
-
|
|
9804
|
-
|
|
9805
|
-
|
|
9806
|
-
|
|
9807
|
-
|
|
9808
|
-
|
|
9914
|
+
:where([data-panel-background='translucent']) .rt-SegmentedControlRoot {
|
|
9915
|
+
background-color: var(--color-surface-translucent);
|
|
9916
|
+
background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
|
|
9917
|
+
-webkit-backdrop-filter: var(--backdrop-filter-panel);
|
|
9918
|
+
backdrop-filter: var(--backdrop-filter-panel);
|
|
9919
|
+
}
|
|
9920
|
+
.rt-SegmentedControlRoot:where([data-panel-background='solid']) {
|
|
9809
9921
|
background-color: var(--color-surface);
|
|
9810
9922
|
background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
|
|
9811
|
-
|
|
9812
|
-
|
|
9813
|
-
|
|
9814
|
-
|
|
9815
|
-
|
|
9816
|
-
|
|
9817
|
-
|
|
9923
|
+
-webkit-backdrop-filter: none;
|
|
9924
|
+
backdrop-filter: none;
|
|
9925
|
+
--backdrop-filter-panel: none;
|
|
9926
|
+
}
|
|
9927
|
+
.rt-SegmentedControlRoot:where([data-panel-background='translucent']) {
|
|
9928
|
+
background-color: var(--color-surface-translucent);
|
|
9929
|
+
background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
|
|
9930
|
+
-webkit-backdrop-filter: var(--backdrop-filter-panel);
|
|
9931
|
+
backdrop-filter: var(--backdrop-filter-panel);
|
|
9932
|
+
--backdrop-filter-panel: blur(var(--backdrop-blur-panel));
|
|
9933
|
+
}
|
|
9934
|
+
:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-SegmentedControlRoot {
|
|
9935
|
+
-webkit-backdrop-filter: none !important;
|
|
9936
|
+
backdrop-filter: none !important;
|
|
9818
9937
|
}
|
|
9819
9938
|
.rt-SegmentedControlRoot:where([data-disabled]) {
|
|
9820
9939
|
color: var(--gray-a8);
|
|
@@ -9836,8 +9955,8 @@
|
|
|
9836
9955
|
}
|
|
9837
9956
|
.rt-SegmentedControlItem:where(:focus-visible) {
|
|
9838
9957
|
border-radius: inherit;
|
|
9839
|
-
outline:
|
|
9840
|
-
outline-offset: -
|
|
9958
|
+
outline: var(--focus-outline-width) solid var(--focus-8);
|
|
9959
|
+
outline-offset: var(--focus-outline-offset-inset);
|
|
9841
9960
|
}
|
|
9842
9961
|
.rt-SegmentedControlItemLabel :where(svg) {
|
|
9843
9962
|
flex-shrink: 0;
|
|
@@ -9849,45 +9968,44 @@
|
|
|
9849
9968
|
}
|
|
9850
9969
|
.rt-SegmentedControlItemLabelInactive {
|
|
9851
9970
|
position: absolute;
|
|
9852
|
-
transition:
|
|
9971
|
+
transition: var(--transition-tabs);
|
|
9853
9972
|
font-weight: var(--font-weight-regular);
|
|
9854
9973
|
letter-spacing: var(--tab-inactive-letter-spacing);
|
|
9855
9974
|
word-spacing: var(--tab-inactive-word-spacing);
|
|
9856
9975
|
opacity: 1;
|
|
9857
|
-
transition-
|
|
9976
|
+
transition-delay: var(--duration-1);
|
|
9858
9977
|
}
|
|
9859
9978
|
:where(.rt-SegmentedControlItem[data-state='on']) .rt-SegmentedControlItemLabelInactive {
|
|
9860
9979
|
opacity: 0;
|
|
9861
|
-
transition-
|
|
9980
|
+
transition-delay: 0ms;
|
|
9862
9981
|
}
|
|
9863
9982
|
.rt-SegmentedControlItemLabelActive {
|
|
9864
|
-
transition:
|
|
9983
|
+
transition: var(--transition-tabs);
|
|
9865
9984
|
font-weight: var(--font-weight-medium);
|
|
9866
9985
|
letter-spacing: var(--tab-active-letter-spacing);
|
|
9867
9986
|
word-spacing: var(--tab-active-word-spacing);
|
|
9868
9987
|
opacity: 0;
|
|
9869
|
-
transition-
|
|
9988
|
+
transition-delay: 0ms;
|
|
9870
9989
|
}
|
|
9871
9990
|
:where(.rt-SegmentedControlItem[data-state='on']) .rt-SegmentedControlItemLabelActive {
|
|
9872
9991
|
opacity: 1;
|
|
9873
|
-
transition-
|
|
9992
|
+
transition-delay: 0ms;
|
|
9874
9993
|
}
|
|
9875
9994
|
.rt-SegmentedControlItemSeparator {
|
|
9876
9995
|
z-index: -1;
|
|
9877
|
-
margin-top:
|
|
9878
|
-
margin-bottom:
|
|
9879
|
-
margin-left: -0.
|
|
9880
|
-
margin-right: -0.
|
|
9881
|
-
width:
|
|
9996
|
+
margin-top: calc(var(--space-1) * 0.75);
|
|
9997
|
+
margin-bottom: calc(var(--space-1) * 0.75);
|
|
9998
|
+
margin-left: calc(-1 * var(--border-width-standard) * 0.5);
|
|
9999
|
+
margin-right: calc(-1 * var(--border-width-standard) * 0.5);
|
|
10000
|
+
width: var(--border-width-standard);
|
|
9882
10001
|
background-color: var(--gray-a4);
|
|
9883
|
-
transition: opacity calc(0.8 * var(--segmented-control-transition-duration));
|
|
9884
|
-
transition-timing-function: ease-out;
|
|
10002
|
+
transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--ease-1);
|
|
9885
10003
|
}
|
|
9886
10004
|
:where(.rt-SegmentedControlItem:first-child) .rt-SegmentedControlItemSeparator,
|
|
9887
10005
|
:where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) .rt-SegmentedControlItemSeparator,
|
|
9888
10006
|
:where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) + * .rt-SegmentedControlItemSeparator {
|
|
9889
10007
|
opacity: 0;
|
|
9890
|
-
transition-timing-function: ease-
|
|
10008
|
+
transition-timing-function: var(--ease-1);
|
|
9891
10009
|
}
|
|
9892
10010
|
:where(.rt-SegmentedControlRoot:has(:focus-visible)) .rt-SegmentedControlItemSeparator {
|
|
9893
10011
|
transition-duration: 0ms;
|
|
@@ -9900,14 +10018,12 @@
|
|
|
9900
10018
|
left: 0;
|
|
9901
10019
|
height: 100%;
|
|
9902
10020
|
pointer-events: none;
|
|
9903
|
-
transition
|
|
9904
|
-
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
9905
|
-
transition-duration: var(--segmented-control-transition-duration);
|
|
10021
|
+
transition: transform var(--segmented-control-transition-duration) var(--ease-3);
|
|
9906
10022
|
}
|
|
9907
10023
|
.rt-SegmentedControlIndicator::before {
|
|
9908
|
-
inset:
|
|
10024
|
+
inset: var(--border-width-standard);
|
|
9909
10025
|
position: absolute;
|
|
9910
|
-
border-radius: max(0.
|
|
10026
|
+
border-radius: max(calc(var(--border-width-standard) * 0.5), calc(var(--segmented-control-border-radius) - var(--border-width-standard)));
|
|
9911
10027
|
background-color: var(--segmented-control-indicator-background-color);
|
|
9912
10028
|
content: '';
|
|
9913
10029
|
}
|
|
@@ -9918,7 +10034,7 @@
|
|
|
9918
10034
|
--segmented-control-indicator-background-color: var(--gray-a3);
|
|
9919
10035
|
}
|
|
9920
10036
|
:where(.rt-SegmentedControlItem[disabled]) ~ .rt-SegmentedControlIndicator::before {
|
|
9921
|
-
inset:
|
|
10037
|
+
inset: 0;
|
|
9922
10038
|
box-shadow: none;
|
|
9923
10039
|
}
|
|
9924
10040
|
.rt-SegmentedControlIndicator:where(:nth-child(2)) {
|
|
@@ -9989,8 +10105,25 @@
|
|
|
9989
10105
|
justify-content: center;
|
|
9990
10106
|
border-radius: inherit;
|
|
9991
10107
|
}
|
|
10108
|
+
.rt-SegmentedControlRoot {
|
|
10109
|
+
border-radius: var(--segmented-control-border-radius);
|
|
10110
|
+
display: inline-grid;
|
|
10111
|
+
vertical-align: top;
|
|
10112
|
+
grid-auto-flow: column;
|
|
10113
|
+
grid-auto-columns: 1fr;
|
|
10114
|
+
align-items: stretch;
|
|
10115
|
+
color: var(--gray-12);
|
|
10116
|
+
background-color: var(--color-surface);
|
|
10117
|
+
background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
|
|
10118
|
+
position: relative;
|
|
10119
|
+
min-width: max-content;
|
|
10120
|
+
font-family: var(--default-font-family);
|
|
10121
|
+
font-style: normal;
|
|
10122
|
+
text-align: center;
|
|
10123
|
+
isolation: isolate;
|
|
10124
|
+
}
|
|
9992
10125
|
.rt-SegmentedControlRoot:where(.rt-r-size-1) {
|
|
9993
|
-
--segmented-control-border-radius: max(var(--radius-
|
|
10126
|
+
--segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
|
|
9994
10127
|
height: var(--space-5);
|
|
9995
10128
|
}
|
|
9996
10129
|
.rt-SegmentedControlRoot:where(.rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
|
|
@@ -10024,7 +10157,7 @@
|
|
|
10024
10157
|
}
|
|
10025
10158
|
@media (min-width: 520px) {
|
|
10026
10159
|
.rt-SegmentedControlRoot:where(.xs\:rt-r-size-1) {
|
|
10027
|
-
--segmented-control-border-radius: max(var(--radius-
|
|
10160
|
+
--segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
|
|
10028
10161
|
height: var(--space-5);
|
|
10029
10162
|
}
|
|
10030
10163
|
.rt-SegmentedControlRoot:where(.xs\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
|
|
@@ -10059,7 +10192,7 @@
|
|
|
10059
10192
|
}
|
|
10060
10193
|
@media (min-width: 768px) {
|
|
10061
10194
|
.rt-SegmentedControlRoot:where(.sm\:rt-r-size-1) {
|
|
10062
|
-
--segmented-control-border-radius: max(var(--radius-
|
|
10195
|
+
--segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
|
|
10063
10196
|
height: var(--space-5);
|
|
10064
10197
|
}
|
|
10065
10198
|
.rt-SegmentedControlRoot:where(.sm\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
|
|
@@ -10094,7 +10227,7 @@
|
|
|
10094
10227
|
}
|
|
10095
10228
|
@media (min-width: 1024px) {
|
|
10096
10229
|
.rt-SegmentedControlRoot:where(.md\:rt-r-size-1) {
|
|
10097
|
-
--segmented-control-border-radius: max(var(--radius-
|
|
10230
|
+
--segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
|
|
10098
10231
|
height: var(--space-5);
|
|
10099
10232
|
}
|
|
10100
10233
|
.rt-SegmentedControlRoot:where(.md\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
|
|
@@ -10129,7 +10262,7 @@
|
|
|
10129
10262
|
}
|
|
10130
10263
|
@media (min-width: 1280px) {
|
|
10131
10264
|
.rt-SegmentedControlRoot:where(.lg\:rt-r-size-1) {
|
|
10132
|
-
--segmented-control-border-radius: max(var(--radius-
|
|
10265
|
+
--segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
|
|
10133
10266
|
height: var(--space-5);
|
|
10134
10267
|
}
|
|
10135
10268
|
.rt-SegmentedControlRoot:where(.lg\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
|
|
@@ -10164,7 +10297,7 @@
|
|
|
10164
10297
|
}
|
|
10165
10298
|
@media (min-width: 1640px) {
|
|
10166
10299
|
.rt-SegmentedControlRoot:where(.xl\:rt-r-size-1) {
|
|
10167
|
-
--segmented-control-border-radius: max(var(--radius-
|
|
10300
|
+
--segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
|
|
10168
10301
|
height: var(--space-5);
|
|
10169
10302
|
}
|
|
10170
10303
|
.rt-SegmentedControlRoot:where(.xl\:rt-r-size-1) :where(.rt-SegmentedControlItemLabel) {
|
|
@@ -10198,10 +10331,13 @@
|
|
|
10198
10331
|
}
|
|
10199
10332
|
}
|
|
10200
10333
|
.rt-SegmentedControlRoot:where(.rt-variant-surface) :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator)::before {
|
|
10201
|
-
box-shadow: 0 0 0
|
|
10334
|
+
box-shadow: 0 0 0 var(--border-width-standard) var(--gray-a4);
|
|
10202
10335
|
}
|
|
10203
10336
|
.rt-SegmentedControlRoot:where(.rt-variant-classic) :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator)::before {
|
|
10204
|
-
box-shadow: var(--shadow-
|
|
10337
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 var(--classic-border-width) var(--white-a12), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6), 0 0 0 var(--classic-border-width) var(--gray-a5), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
|
|
10338
|
+
}
|
|
10339
|
+
:where(.dark, .dark-theme) :is(.rt-SegmentedControlRoot:where(.rt-variant-classic) :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator)::before), :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) :is(.rt-SegmentedControlRoot:where(.rt-variant-classic) :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator)::before) {
|
|
10340
|
+
box-shadow: inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3), inset 0 var(--classic-border-width) var(--gray-a11), inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2), inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11), 0 0 0 var(--classic-border-width-thick) var(--gray-a7), 0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
|
|
10205
10341
|
}
|
|
10206
10342
|
.rt-SelectTrigger {
|
|
10207
10343
|
display: inline-flex;
|
|
@@ -10220,8 +10356,8 @@
|
|
|
10220
10356
|
color: var(--gray-12);
|
|
10221
10357
|
}
|
|
10222
10358
|
.rt-SelectTrigger:where(:focus-visible) {
|
|
10223
|
-
outline:
|
|
10224
|
-
outline-offset: -
|
|
10359
|
+
outline: var(--focus-outline-width) solid var(--focus-8);
|
|
10360
|
+
outline-offset: var(--focus-outline-offset-inset);
|
|
10225
10361
|
}
|
|
10226
10362
|
@media (prefers-reduced-motion: reduce) {
|
|
10227
10363
|
.rt-SelectTrigger {
|
|
@@ -10285,7 +10421,7 @@
|
|
|
10285
10421
|
justify-content: center;
|
|
10286
10422
|
}
|
|
10287
10423
|
.rt-SelectSeparator {
|
|
10288
|
-
height:
|
|
10424
|
+
height: var(--separator-height-thin);
|
|
10289
10425
|
margin-top: var(--space-2);
|
|
10290
10426
|
margin-bottom: var(--space-2);
|
|
10291
10427
|
margin-left: var(--select-item-indicator-width);
|
|
@@ -10314,7 +10450,7 @@
|
|
|
10314
10450
|
box-sizing: border-box;
|
|
10315
10451
|
height: var(--select-trigger-height);
|
|
10316
10452
|
padding: 0 var(--select-trigger-ghost-padding-x);
|
|
10317
|
-
--select-trigger-border-width:
|
|
10453
|
+
--select-trigger-border-width: var(--border-width-none);
|
|
10318
10454
|
background-color: transparent;
|
|
10319
10455
|
color: var(--accent-12);
|
|
10320
10456
|
}
|
|
@@ -10691,7 +10827,7 @@
|
|
|
10691
10827
|
.rt-SelectContent:where(.rt-r-size-1) {
|
|
10692
10828
|
--select-content-padding: var(--space-1);
|
|
10693
10829
|
--select-item-height: var(--space-5);
|
|
10694
|
-
--select-item-indicator-width: calc(var(--space-5) /
|
|
10830
|
+
--select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
|
|
10695
10831
|
--select-separator-margin-right: var(--space-2);
|
|
10696
10832
|
border-radius: var(--radius-3);
|
|
10697
10833
|
}
|
|
@@ -10707,8 +10843,8 @@
|
|
|
10707
10843
|
border-radius: var(--radius-1);
|
|
10708
10844
|
}
|
|
10709
10845
|
.rt-SelectContent:where(.rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
|
|
10710
|
-
width:
|
|
10711
|
-
height:
|
|
10846
|
+
width: var(--select-indicator-icon-size-1);
|
|
10847
|
+
height: var(--select-indicator-icon-size-1);
|
|
10712
10848
|
}
|
|
10713
10849
|
.rt-SelectContent:where(.rt-r-size-2, .rt-r-size-3) {
|
|
10714
10850
|
--select-content-padding: var(--space-2);
|
|
@@ -10731,22 +10867,22 @@
|
|
|
10731
10867
|
letter-spacing: var(--letter-spacing-2);
|
|
10732
10868
|
}
|
|
10733
10869
|
.rt-SelectContent:where(.rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
|
|
10734
|
-
width:
|
|
10735
|
-
height:
|
|
10870
|
+
width: var(--select-indicator-icon-size-2);
|
|
10871
|
+
height: var(--select-indicator-icon-size-2);
|
|
10736
10872
|
}
|
|
10737
10873
|
.rt-SelectContent:where(.rt-r-size-3) :where(.rt-SelectItem) {
|
|
10738
10874
|
font-size: var(--font-size-3);
|
|
10739
10875
|
letter-spacing: var(--letter-spacing-3);
|
|
10740
10876
|
}
|
|
10741
10877
|
.rt-SelectContent:where(.rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
|
|
10742
|
-
width:
|
|
10743
|
-
height:
|
|
10878
|
+
width: var(--select-indicator-icon-size-3);
|
|
10879
|
+
height: var(--select-indicator-icon-size-3);
|
|
10744
10880
|
}
|
|
10745
10881
|
@media (min-width: 520px) {
|
|
10746
10882
|
.rt-SelectContent:where(.xs\:rt-r-size-1) {
|
|
10747
10883
|
--select-content-padding: var(--space-1);
|
|
10748
10884
|
--select-item-height: var(--space-5);
|
|
10749
|
-
--select-item-indicator-width: calc(var(--space-5) /
|
|
10885
|
+
--select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
|
|
10750
10886
|
--select-separator-margin-right: var(--space-2);
|
|
10751
10887
|
border-radius: var(--radius-3);
|
|
10752
10888
|
}
|
|
@@ -10762,8 +10898,8 @@
|
|
|
10762
10898
|
border-radius: var(--radius-1);
|
|
10763
10899
|
}
|
|
10764
10900
|
.rt-SelectContent:where(.xs\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
|
|
10765
|
-
width:
|
|
10766
|
-
height:
|
|
10901
|
+
width: var(--select-indicator-icon-size-1);
|
|
10902
|
+
height: var(--select-indicator-icon-size-1);
|
|
10767
10903
|
}
|
|
10768
10904
|
.rt-SelectContent:where(.xs\:rt-r-size-2, .xs\:rt-r-size-3) {
|
|
10769
10905
|
--select-content-padding: var(--space-2);
|
|
@@ -10786,23 +10922,23 @@
|
|
|
10786
10922
|
letter-spacing: var(--letter-spacing-2);
|
|
10787
10923
|
}
|
|
10788
10924
|
.rt-SelectContent:where(.xs\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
|
|
10789
|
-
width:
|
|
10790
|
-
height:
|
|
10925
|
+
width: var(--select-indicator-icon-size-2);
|
|
10926
|
+
height: var(--select-indicator-icon-size-2);
|
|
10791
10927
|
}
|
|
10792
10928
|
.rt-SelectContent:where(.xs\:rt-r-size-3) :where(.rt-SelectItem) {
|
|
10793
10929
|
font-size: var(--font-size-3);
|
|
10794
10930
|
letter-spacing: var(--letter-spacing-3);
|
|
10795
10931
|
}
|
|
10796
10932
|
.rt-SelectContent:where(.xs\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
|
|
10797
|
-
width:
|
|
10798
|
-
height:
|
|
10933
|
+
width: var(--select-indicator-icon-size-3);
|
|
10934
|
+
height: var(--select-indicator-icon-size-3);
|
|
10799
10935
|
}
|
|
10800
10936
|
}
|
|
10801
10937
|
@media (min-width: 768px) {
|
|
10802
10938
|
.rt-SelectContent:where(.sm\:rt-r-size-1) {
|
|
10803
10939
|
--select-content-padding: var(--space-1);
|
|
10804
10940
|
--select-item-height: var(--space-5);
|
|
10805
|
-
--select-item-indicator-width: calc(var(--space-5) /
|
|
10941
|
+
--select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
|
|
10806
10942
|
--select-separator-margin-right: var(--space-2);
|
|
10807
10943
|
border-radius: var(--radius-3);
|
|
10808
10944
|
}
|
|
@@ -10818,8 +10954,8 @@
|
|
|
10818
10954
|
border-radius: var(--radius-1);
|
|
10819
10955
|
}
|
|
10820
10956
|
.rt-SelectContent:where(.sm\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
|
|
10821
|
-
width:
|
|
10822
|
-
height:
|
|
10957
|
+
width: var(--select-indicator-icon-size-1);
|
|
10958
|
+
height: var(--select-indicator-icon-size-1);
|
|
10823
10959
|
}
|
|
10824
10960
|
.rt-SelectContent:where(.sm\:rt-r-size-2, .sm\:rt-r-size-3) {
|
|
10825
10961
|
--select-content-padding: var(--space-2);
|
|
@@ -10842,23 +10978,23 @@
|
|
|
10842
10978
|
letter-spacing: var(--letter-spacing-2);
|
|
10843
10979
|
}
|
|
10844
10980
|
.rt-SelectContent:where(.sm\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
|
|
10845
|
-
width:
|
|
10846
|
-
height:
|
|
10981
|
+
width: var(--select-indicator-icon-size-2);
|
|
10982
|
+
height: var(--select-indicator-icon-size-2);
|
|
10847
10983
|
}
|
|
10848
10984
|
.rt-SelectContent:where(.sm\:rt-r-size-3) :where(.rt-SelectItem) {
|
|
10849
10985
|
font-size: var(--font-size-3);
|
|
10850
10986
|
letter-spacing: var(--letter-spacing-3);
|
|
10851
10987
|
}
|
|
10852
10988
|
.rt-SelectContent:where(.sm\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
|
|
10853
|
-
width:
|
|
10854
|
-
height:
|
|
10989
|
+
width: var(--select-indicator-icon-size-3);
|
|
10990
|
+
height: var(--select-indicator-icon-size-3);
|
|
10855
10991
|
}
|
|
10856
10992
|
}
|
|
10857
10993
|
@media (min-width: 1024px) {
|
|
10858
10994
|
.rt-SelectContent:where(.md\:rt-r-size-1) {
|
|
10859
10995
|
--select-content-padding: var(--space-1);
|
|
10860
10996
|
--select-item-height: var(--space-5);
|
|
10861
|
-
--select-item-indicator-width: calc(var(--space-5) /
|
|
10997
|
+
--select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
|
|
10862
10998
|
--select-separator-margin-right: var(--space-2);
|
|
10863
10999
|
border-radius: var(--radius-3);
|
|
10864
11000
|
}
|
|
@@ -10874,8 +11010,8 @@
|
|
|
10874
11010
|
border-radius: var(--radius-1);
|
|
10875
11011
|
}
|
|
10876
11012
|
.rt-SelectContent:where(.md\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
|
|
10877
|
-
width:
|
|
10878
|
-
height:
|
|
11013
|
+
width: var(--select-indicator-icon-size-1);
|
|
11014
|
+
height: var(--select-indicator-icon-size-1);
|
|
10879
11015
|
}
|
|
10880
11016
|
.rt-SelectContent:where(.md\:rt-r-size-2, .md\:rt-r-size-3) {
|
|
10881
11017
|
--select-content-padding: var(--space-2);
|
|
@@ -10898,23 +11034,23 @@
|
|
|
10898
11034
|
letter-spacing: var(--letter-spacing-2);
|
|
10899
11035
|
}
|
|
10900
11036
|
.rt-SelectContent:where(.md\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
|
|
10901
|
-
width:
|
|
10902
|
-
height:
|
|
11037
|
+
width: var(--select-indicator-icon-size-2);
|
|
11038
|
+
height: var(--select-indicator-icon-size-2);
|
|
10903
11039
|
}
|
|
10904
11040
|
.rt-SelectContent:where(.md\:rt-r-size-3) :where(.rt-SelectItem) {
|
|
10905
11041
|
font-size: var(--font-size-3);
|
|
10906
11042
|
letter-spacing: var(--letter-spacing-3);
|
|
10907
11043
|
}
|
|
10908
11044
|
.rt-SelectContent:where(.md\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
|
|
10909
|
-
width:
|
|
10910
|
-
height:
|
|
11045
|
+
width: var(--select-indicator-icon-size-3);
|
|
11046
|
+
height: var(--select-indicator-icon-size-3);
|
|
10911
11047
|
}
|
|
10912
11048
|
}
|
|
10913
11049
|
@media (min-width: 1280px) {
|
|
10914
11050
|
.rt-SelectContent:where(.lg\:rt-r-size-1) {
|
|
10915
11051
|
--select-content-padding: var(--space-1);
|
|
10916
11052
|
--select-item-height: var(--space-5);
|
|
10917
|
-
--select-item-indicator-width: calc(var(--space-5) /
|
|
11053
|
+
--select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
|
|
10918
11054
|
--select-separator-margin-right: var(--space-2);
|
|
10919
11055
|
border-radius: var(--radius-3);
|
|
10920
11056
|
}
|
|
@@ -10930,8 +11066,8 @@
|
|
|
10930
11066
|
border-radius: var(--radius-1);
|
|
10931
11067
|
}
|
|
10932
11068
|
.rt-SelectContent:where(.lg\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
|
|
10933
|
-
width:
|
|
10934
|
-
height:
|
|
11069
|
+
width: var(--select-indicator-icon-size-1);
|
|
11070
|
+
height: var(--select-indicator-icon-size-1);
|
|
10935
11071
|
}
|
|
10936
11072
|
.rt-SelectContent:where(.lg\:rt-r-size-2, .lg\:rt-r-size-3) {
|
|
10937
11073
|
--select-content-padding: var(--space-2);
|
|
@@ -10954,23 +11090,23 @@
|
|
|
10954
11090
|
letter-spacing: var(--letter-spacing-2);
|
|
10955
11091
|
}
|
|
10956
11092
|
.rt-SelectContent:where(.lg\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
|
|
10957
|
-
width:
|
|
10958
|
-
height:
|
|
11093
|
+
width: var(--select-indicator-icon-size-2);
|
|
11094
|
+
height: var(--select-indicator-icon-size-2);
|
|
10959
11095
|
}
|
|
10960
11096
|
.rt-SelectContent:where(.lg\:rt-r-size-3) :where(.rt-SelectItem) {
|
|
10961
11097
|
font-size: var(--font-size-3);
|
|
10962
11098
|
letter-spacing: var(--letter-spacing-3);
|
|
10963
11099
|
}
|
|
10964
11100
|
.rt-SelectContent:where(.lg\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
|
|
10965
|
-
width:
|
|
10966
|
-
height:
|
|
11101
|
+
width: var(--select-indicator-icon-size-3);
|
|
11102
|
+
height: var(--select-indicator-icon-size-3);
|
|
10967
11103
|
}
|
|
10968
11104
|
}
|
|
10969
11105
|
@media (min-width: 1640px) {
|
|
10970
11106
|
.rt-SelectContent:where(.xl\:rt-r-size-1) {
|
|
10971
11107
|
--select-content-padding: var(--space-1);
|
|
10972
11108
|
--select-item-height: var(--space-5);
|
|
10973
|
-
--select-item-indicator-width: calc(var(--space-5) /
|
|
11109
|
+
--select-item-indicator-width: calc(var(--space-5) / var(--select-item-indicator-width-factor));
|
|
10974
11110
|
--select-separator-margin-right: var(--space-2);
|
|
10975
11111
|
border-radius: var(--radius-3);
|
|
10976
11112
|
}
|
|
@@ -10986,8 +11122,8 @@
|
|
|
10986
11122
|
border-radius: var(--radius-1);
|
|
10987
11123
|
}
|
|
10988
11124
|
.rt-SelectContent:where(.xl\:rt-r-size-1) :where(.rt-SelectItemIndicatorIcon) {
|
|
10989
|
-
width:
|
|
10990
|
-
height:
|
|
11125
|
+
width: var(--select-indicator-icon-size-1);
|
|
11126
|
+
height: var(--select-indicator-icon-size-1);
|
|
10991
11127
|
}
|
|
10992
11128
|
.rt-SelectContent:where(.xl\:rt-r-size-2, .xl\:rt-r-size-3) {
|
|
10993
11129
|
--select-content-padding: var(--space-2);
|
|
@@ -11010,20 +11146,20 @@
|
|
|
11010
11146
|
letter-spacing: var(--letter-spacing-2);
|
|
11011
11147
|
}
|
|
11012
11148
|
.rt-SelectContent:where(.xl\:rt-r-size-2) :where(.rt-SelectItemIndicatorIcon) {
|
|
11013
|
-
width:
|
|
11014
|
-
height:
|
|
11149
|
+
width: var(--select-indicator-icon-size-2);
|
|
11150
|
+
height: var(--select-indicator-icon-size-2);
|
|
11015
11151
|
}
|
|
11016
11152
|
.rt-SelectContent:where(.xl\:rt-r-size-3) :where(.rt-SelectItem) {
|
|
11017
11153
|
font-size: var(--font-size-3);
|
|
11018
11154
|
letter-spacing: var(--letter-spacing-3);
|
|
11019
11155
|
}
|
|
11020
11156
|
.rt-SelectContent:where(.xl\:rt-r-size-3) :where(.rt-SelectItemIndicatorIcon) {
|
|
11021
|
-
width:
|
|
11022
|
-
height:
|
|
11157
|
+
width: var(--select-indicator-icon-size-3);
|
|
11158
|
+
height: var(--select-indicator-icon-size-3);
|
|
11023
11159
|
}
|
|
11024
11160
|
}
|
|
11025
11161
|
.rt-SelectTrigger:where(.rt-variant-outline) {
|
|
11026
|
-
--select-trigger-border-width:
|
|
11162
|
+
--select-trigger-border-width: var(--border-width-standard);
|
|
11027
11163
|
background-color: var(--color-surface);
|
|
11028
11164
|
color: var(--gray-12);
|
|
11029
11165
|
box-shadow: inset 0 0 0 var(--select-trigger-border-width) var(--gray-a6);
|
|
@@ -11059,12 +11195,12 @@
|
|
|
11059
11195
|
color: var(--gray-a10);
|
|
11060
11196
|
}
|
|
11061
11197
|
.rt-SelectTrigger:where(.rt-variant-classic) {
|
|
11062
|
-
--select-trigger-border-width:
|
|
11198
|
+
--select-trigger-border-width: var(--border-width-none);
|
|
11063
11199
|
position: relative;
|
|
11064
|
-
top: calc(var(--classic-elevation-offset) /
|
|
11200
|
+
top: calc(var(--classic-elevation-offset) / var(--classic-elevation-factor-subtle));
|
|
11065
11201
|
background-color: var(--color-surface);
|
|
11066
11202
|
color: var(--gray-12);
|
|
11067
|
-
box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) /
|
|
11203
|
+
box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a4), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2), inset 0 calc(var(--classic-border-width) * var(--classic-border-multiplier-double)) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-medium-factor-third)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a5);
|
|
11068
11204
|
}
|
|
11069
11205
|
:where([data-panel-background='translucent']) .rt-SelectTrigger:where(.rt-variant-classic) {
|
|
11070
11206
|
-webkit-backdrop-filter: var(--backdrop-filter-components);
|
|
@@ -11082,25 +11218,25 @@
|
|
|
11082
11218
|
}
|
|
11083
11219
|
@media (hover: hover) {
|
|
11084
11220
|
.rt-SelectTrigger:where(.rt-variant-classic):where(:hover:not(:focus-visible)) {
|
|
11085
|
-
box-shadow: inset 0 calc(var(--classic-border-width) /
|
|
11221
|
+
box-shadow: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
|
|
11086
11222
|
}
|
|
11087
11223
|
}
|
|
11088
11224
|
.rt-SelectTrigger:where(.rt-variant-classic):where([data-state='open']) {
|
|
11089
|
-
box-shadow: inset 0 calc(var(--classic-border-width) /
|
|
11225
|
+
box-shadow: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-light)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / var(--classic-border-factor-light)) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-factor-subtle)) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
|
|
11090
11226
|
}
|
|
11091
11227
|
.rt-SelectTrigger:where(.rt-variant-classic):where(:focus-visible) {
|
|
11092
|
-
box-shadow: inset 0 calc(var(--classic-border-width) /
|
|
11228
|
+
box-shadow: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-heavy)) var(--gray-a2), 0 0 0 var(--focus-outline-width) var(--focus-8);
|
|
11093
11229
|
}
|
|
11094
11230
|
.rt-SelectTrigger:where(.rt-variant-classic):where(:disabled) {
|
|
11095
11231
|
color: var(--gray-a11);
|
|
11096
11232
|
background-color: var(--gray-a2);
|
|
11097
|
-
box-shadow: inset 0 calc(var(--classic-border-width) /
|
|
11233
|
+
box-shadow: inset 0 calc(var(--classic-border-width) / var(--classic-border-factor-half)) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-medium)) var(--gray-a2), inset 0 0 0 var(--classic-border-width) var(--gray-a6);
|
|
11098
11234
|
}
|
|
11099
11235
|
.rt-SelectTrigger:where(.rt-variant-classic):where([data-placeholder]) :where(.rt-SelectTriggerInner) {
|
|
11100
11236
|
color: var(--gray-a10);
|
|
11101
11237
|
}
|
|
11102
11238
|
.rt-SelectTrigger:where(.rt-variant-soft) {
|
|
11103
|
-
--select-trigger-border-width:
|
|
11239
|
+
--select-trigger-border-width: var(--border-width-none);
|
|
11104
11240
|
background-color: var(--accent-3);
|
|
11105
11241
|
color: var(--accent-12);
|
|
11106
11242
|
}
|
|
@@ -11160,7 +11296,7 @@
|
|
|
11160
11296
|
opacity: 0.6;
|
|
11161
11297
|
}
|
|
11162
11298
|
.rt-SelectTrigger:where(.rt-variant-surface) {
|
|
11163
|
-
--select-trigger-border-width:
|
|
11299
|
+
--select-trigger-border-width: var(--border-width-standard);
|
|
11164
11300
|
background-color: transparent;
|
|
11165
11301
|
box-shadow: inset 0 0 0 var(--select-trigger-border-width) var(--accent-7);
|
|
11166
11302
|
color: var(--gray-12);
|
|
@@ -12918,7 +13054,7 @@
|
|
|
12918
13054
|
display: flex;
|
|
12919
13055
|
align-items: center;
|
|
12920
13056
|
flex-grow: 1;
|
|
12921
|
-
border-radius: max(calc(var(--radius-factor) * var(--slider-track-size) /
|
|
13057
|
+
border-radius: max(calc(var(--radius-factor) * var(--slider-track-size) / var(--slider-track-radius-factor)), calc(var(--radius-factor) * var(--radius-thumb)));
|
|
12922
13058
|
-webkit-user-select: none;
|
|
12923
13059
|
user-select: none;
|
|
12924
13060
|
touch-action: none;
|
|
@@ -12953,10 +13089,10 @@
|
|
|
12953
13089
|
border-radius: inherit;
|
|
12954
13090
|
}
|
|
12955
13091
|
.rt-SliderRange:where([data-orientation='horizontal']) {
|
|
12956
|
-
height:
|
|
13092
|
+
height: var(--position-full);
|
|
12957
13093
|
}
|
|
12958
13094
|
.rt-SliderRange:where([data-orientation='vertical']) {
|
|
12959
|
-
width:
|
|
13095
|
+
width: var(--position-full);
|
|
12960
13096
|
}
|
|
12961
13097
|
.rt-SliderThumb {
|
|
12962
13098
|
display: block;
|
|
@@ -12968,102 +13104,102 @@
|
|
|
12968
13104
|
content: '';
|
|
12969
13105
|
position: absolute;
|
|
12970
13106
|
z-index: -1;
|
|
12971
|
-
width: calc(var(--slider-thumb-size) *
|
|
12972
|
-
height: calc(var(--slider-thumb-size) *
|
|
12973
|
-
top:
|
|
12974
|
-
left:
|
|
13107
|
+
width: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
|
|
13108
|
+
height: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
|
|
13109
|
+
top: var(--position-center);
|
|
13110
|
+
left: var(--position-center);
|
|
12975
13111
|
transform: translate(-50%, -50%);
|
|
12976
13112
|
}
|
|
12977
13113
|
.rt-SliderThumb::after {
|
|
12978
13114
|
content: '';
|
|
12979
13115
|
position: absolute;
|
|
12980
|
-
inset: calc(-
|
|
13116
|
+
inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
|
|
12981
13117
|
background-color: white;
|
|
12982
13118
|
border-radius: max(var(--radius-1), var(--radius-thumb));
|
|
12983
13119
|
box-shadow: var(--slider-thumb-box-shadow);
|
|
12984
13120
|
cursor: var(--cursor-slider-thumb);
|
|
12985
13121
|
}
|
|
12986
13122
|
.rt-SliderThumb:where(:focus-visible)::after {
|
|
12987
|
-
box-shadow: var(--slider-thumb-box-shadow), 0 0 0
|
|
13123
|
+
box-shadow: var(--slider-thumb-box-shadow), 0 0 0 var(--slider-focus-ring-inner) var(--accent-3), 0 0 0 var(--slider-focus-ring-outer) var(--focus-8);
|
|
12988
13124
|
}
|
|
12989
13125
|
.rt-SliderThumb:where(:active) {
|
|
12990
13126
|
cursor: var(--cursor-slider-thumb-active);
|
|
12991
13127
|
}
|
|
12992
13128
|
.rt-SliderRoot:where(.rt-r-size-1) {
|
|
12993
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13129
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
|
|
12994
13130
|
}
|
|
12995
13131
|
.rt-SliderRoot:where(.rt-r-size-2) {
|
|
12996
13132
|
--slider-track-size: var(--space-2);
|
|
12997
13133
|
}
|
|
12998
13134
|
.rt-SliderRoot:where(.rt-r-size-3) {
|
|
12999
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13135
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
|
|
13000
13136
|
}
|
|
13001
13137
|
@media (min-width: 520px) {
|
|
13002
13138
|
.rt-SliderRoot:where(.xs\:rt-r-size-1) {
|
|
13003
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13139
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
|
|
13004
13140
|
}
|
|
13005
13141
|
.rt-SliderRoot:where(.xs\:rt-r-size-2) {
|
|
13006
13142
|
--slider-track-size: var(--space-2);
|
|
13007
13143
|
}
|
|
13008
13144
|
.rt-SliderRoot:where(.xs\:rt-r-size-3) {
|
|
13009
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13145
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
|
|
13010
13146
|
}
|
|
13011
13147
|
}
|
|
13012
13148
|
@media (min-width: 768px) {
|
|
13013
13149
|
.rt-SliderRoot:where(.sm\:rt-r-size-1) {
|
|
13014
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13150
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
|
|
13015
13151
|
}
|
|
13016
13152
|
.rt-SliderRoot:where(.sm\:rt-r-size-2) {
|
|
13017
13153
|
--slider-track-size: var(--space-2);
|
|
13018
13154
|
}
|
|
13019
13155
|
.rt-SliderRoot:where(.sm\:rt-r-size-3) {
|
|
13020
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13156
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
|
|
13021
13157
|
}
|
|
13022
13158
|
}
|
|
13023
13159
|
@media (min-width: 1024px) {
|
|
13024
13160
|
.rt-SliderRoot:where(.md\:rt-r-size-1) {
|
|
13025
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13161
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
|
|
13026
13162
|
}
|
|
13027
13163
|
.rt-SliderRoot:where(.md\:rt-r-size-2) {
|
|
13028
13164
|
--slider-track-size: var(--space-2);
|
|
13029
13165
|
}
|
|
13030
13166
|
.rt-SliderRoot:where(.md\:rt-r-size-3) {
|
|
13031
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13167
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
|
|
13032
13168
|
}
|
|
13033
13169
|
}
|
|
13034
13170
|
@media (min-width: 1280px) {
|
|
13035
13171
|
.rt-SliderRoot:where(.lg\:rt-r-size-1) {
|
|
13036
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13172
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
|
|
13037
13173
|
}
|
|
13038
13174
|
.rt-SliderRoot:where(.lg\:rt-r-size-2) {
|
|
13039
13175
|
--slider-track-size: var(--space-2);
|
|
13040
13176
|
}
|
|
13041
13177
|
.rt-SliderRoot:where(.lg\:rt-r-size-3) {
|
|
13042
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13178
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
|
|
13043
13179
|
}
|
|
13044
13180
|
}
|
|
13045
13181
|
@media (min-width: 1640px) {
|
|
13046
13182
|
.rt-SliderRoot:where(.xl\:rt-r-size-1) {
|
|
13047
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13183
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
|
|
13048
13184
|
}
|
|
13049
13185
|
.rt-SliderRoot:where(.xl\:rt-r-size-2) {
|
|
13050
13186
|
--slider-track-size: var(--space-2);
|
|
13051
13187
|
}
|
|
13052
13188
|
.rt-SliderRoot:where(.xl\:rt-r-size-3) {
|
|
13053
|
-
--slider-track-size: calc(var(--space-2) *
|
|
13189
|
+
--slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
|
|
13054
13190
|
}
|
|
13055
13191
|
}
|
|
13056
13192
|
.rt-SliderRoot:where(.rt-variant-surface) :where(.rt-SliderTrack) {
|
|
13057
13193
|
background-color: var(--gray-a3);
|
|
13058
|
-
box-shadow: inset 0 0 0
|
|
13194
|
+
box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
|
|
13059
13195
|
}
|
|
13060
13196
|
.rt-SliderRoot:where(.rt-variant-surface) :where(.rt-SliderTrack):where([data-disabled]) {
|
|
13061
|
-
box-shadow: inset 0 0 0
|
|
13197
|
+
box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a4);
|
|
13062
13198
|
}
|
|
13063
13199
|
.rt-SliderRoot:where(.rt-variant-surface) :where(.rt-SliderRange) {
|
|
13064
13200
|
background-color: var(--accent-track);
|
|
13065
13201
|
background-image: var(--slider-range-high-contrast-background-image);
|
|
13066
|
-
box-shadow: inset 0 0 0
|
|
13202
|
+
box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
|
|
13067
13203
|
}
|
|
13068
13204
|
.rt-SliderRoot:where(.rt-variant-surface) :where(.rt-SliderThumb) {
|
|
13069
13205
|
--slider-thumb-box-shadow: 0 0 0 1px var(--black-a4);
|
|
@@ -13081,18 +13217,18 @@
|
|
|
13081
13217
|
inset: 0;
|
|
13082
13218
|
position: absolute;
|
|
13083
13219
|
border-radius: inherit;
|
|
13084
|
-
box-shadow: var(--shadow-
|
|
13220
|
+
box-shadow: var(--classic-inset-shadow-dark);
|
|
13085
13221
|
}
|
|
13086
13222
|
.rt-SliderRoot:where(.rt-variant-classic) :where(.rt-SliderTrack):where([data-disabled])::before {
|
|
13087
|
-
opacity:
|
|
13223
|
+
opacity: var(--opacity-disabled);
|
|
13088
13224
|
}
|
|
13089
13225
|
.rt-SliderRoot:where(.rt-variant-classic) :where(.rt-SliderRange) {
|
|
13090
13226
|
background-color: var(--accent-track);
|
|
13091
13227
|
background-image: var(--slider-range-high-contrast-background-image);
|
|
13092
|
-
box-shadow: inset 0 0 0
|
|
13228
|
+
box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
|
|
13093
13229
|
}
|
|
13094
13230
|
.rt-SliderRoot:where(.rt-variant-classic) :where(.rt-SliderRange):where(.rt-high-contrast) {
|
|
13095
|
-
box-shadow: inset 0 0 0
|
|
13231
|
+
box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
|
|
13096
13232
|
}
|
|
13097
13233
|
.rt-SliderRoot:where(.rt-variant-classic) :where(.rt-SliderThumb) {
|
|
13098
13234
|
--slider-thumb-box-shadow: 0 0 0 1px var(--black-a3), 0 1px 3px var(--black-a1), 0 2px 4px -1px var(--black-a1);
|
|
@@ -13471,19 +13607,19 @@
|
|
|
13471
13607
|
.rt-SwitchRoot:where(.rt-variant-classic)::before {
|
|
13472
13608
|
background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
|
|
13473
13609
|
background-color: var(--gray-a4);
|
|
13474
|
-
box-shadow: var(--shadow-
|
|
13610
|
+
box-shadow: var(--classic-inset-shadow-dark);
|
|
13475
13611
|
}
|
|
13476
13612
|
.rt-SwitchRoot:where(.rt-variant-classic):where([data-state='unchecked']:active)::before {
|
|
13477
13613
|
background-color: var(--gray-a5);
|
|
13478
13614
|
}
|
|
13479
13615
|
.rt-SwitchRoot:where(.rt-variant-classic):where([data-state='checked'])::before {
|
|
13480
|
-
box-shadow: inset 0 0 0
|
|
13616
|
+
box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
|
|
13481
13617
|
}
|
|
13482
13618
|
.rt-SwitchRoot:where(.rt-variant-classic):where([data-state='checked']:active)::before {
|
|
13483
13619
|
filter: var(--switch-surface-checked-active-filter);
|
|
13484
13620
|
}
|
|
13485
13621
|
.rt-SwitchRoot:where(.rt-variant-classic):where(.rt-high-contrast)::before {
|
|
13486
|
-
box-shadow: inset 0 0 0
|
|
13622
|
+
box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
|
|
13487
13623
|
background-image: linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%), linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
|
|
13488
13624
|
}
|
|
13489
13625
|
.rt-SwitchRoot:where(.rt-variant-classic):where(.rt-high-contrast):where([data-state='checked']:active)::before {
|
|
@@ -13496,8 +13632,8 @@
|
|
|
13496
13632
|
filter: none;
|
|
13497
13633
|
background-image: none;
|
|
13498
13634
|
background-color: var(--gray-a5);
|
|
13499
|
-
box-shadow: var(--shadow-
|
|
13500
|
-
opacity:
|
|
13635
|
+
box-shadow: var(--classic-inset-shadow-dark);
|
|
13636
|
+
opacity: var(--opacity-disabled);
|
|
13501
13637
|
}
|
|
13502
13638
|
.rt-SwitchRoot:where(.rt-variant-classic) :where(.rt-SwitchThumb):where([data-state='unchecked']) {
|
|
13503
13639
|
box-shadow: 0 1px 3px var(--black-a3), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2);
|
|
@@ -14386,7 +14522,7 @@
|
|
|
14386
14522
|
top: calc(var(--classic-elevation-offset) / 3);
|
|
14387
14523
|
background-color: var(--color-surface);
|
|
14388
14524
|
color: var(--gray-12);
|
|
14389
|
-
box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-
|
|
14525
|
+
box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a4), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2), inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a5);
|
|
14390
14526
|
}
|
|
14391
14527
|
:where([data-panel-background='translucent']) .rt-TextAreaRoot:where(.rt-variant-classic) {
|
|
14392
14528
|
-webkit-backdrop-filter: var(--backdrop-filter-components);
|
|
@@ -14404,11 +14540,11 @@
|
|
|
14404
14540
|
}
|
|
14405
14541
|
@media (hover: hover) {
|
|
14406
14542
|
.rt-TextAreaRoot:where(.rt-variant-classic):where(:hover:not(:has(.rt-TextAreaInput:focus))) {
|
|
14407
|
-
box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-
|
|
14543
|
+
box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
|
|
14408
14544
|
}
|
|
14409
14545
|
}
|
|
14410
14546
|
.rt-TextAreaRoot:where(.rt-variant-classic):where(:has(.rt-TextAreaInput:focus)) {
|
|
14411
|
-
box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-
|
|
14547
|
+
box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a2), 0 0 0 2px var(--focus-8);
|
|
14412
14548
|
}
|
|
14413
14549
|
.rt-TextAreaRoot:where(.rt-variant-classic) :where(.rt-TextAreaInput)::placeholder {
|
|
14414
14550
|
color: var(--gray-a10);
|
|
@@ -15274,7 +15410,7 @@
|
|
|
15274
15410
|
top: calc(var(--classic-elevation-offset) / 3);
|
|
15275
15411
|
background-color: var(--color-surface);
|
|
15276
15412
|
color: var(--gray-12);
|
|
15277
|
-
box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-
|
|
15413
|
+
box-shadow: inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / 1.5) var(--gray-a4), inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2), inset 0 calc(var(--classic-border-width) * 2) calc(var(--classic-shadow-blur-medium) / 3) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a5);
|
|
15278
15414
|
}
|
|
15279
15415
|
:where([data-panel-background='translucent']) .rt-TextFieldRoot:where(.rt-variant-classic) {
|
|
15280
15416
|
-webkit-backdrop-filter: var(--backdrop-filter-components);
|
|
@@ -15292,11 +15428,11 @@
|
|
|
15292
15428
|
}
|
|
15293
15429
|
@media (hover: hover) {
|
|
15294
15430
|
.rt-TextFieldRoot:where(.rt-variant-classic):where(:hover:not(:has(.rt-TextFieldInput:focus))) {
|
|
15295
|
-
box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-
|
|
15431
|
+
box-shadow: inset 0 calc(var(--classic-border-width) / 1.5) calc(var(--classic-shadow-blur-small) / 2) var(--gray-a3), inset 0 calc(-1 * var(--classic-border-width) / 1.5) var(--gray-a2), inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-medium) / 4) var(--gray-a3), 0 0 0 var(--classic-border-width) var(--gray-a6);
|
|
15296
15432
|
}
|
|
15297
15433
|
}
|
|
15298
15434
|
.rt-TextFieldRoot:where(.rt-variant-classic):where(:has(.rt-TextFieldInput:focus)) {
|
|
15299
|
-
box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-
|
|
15435
|
+
box-shadow: inset 0 calc(var(--classic-border-width) / 2) calc(var(--classic-shadow-blur-small) / 3) var(--gray-a2), 0 0 0 2px var(--focus-8);
|
|
15300
15436
|
}
|
|
15301
15437
|
.rt-TextFieldRoot:where(.rt-variant-classic) :where(.rt-TextFieldInput)::placeholder {
|
|
15302
15438
|
color: var(--gray-a10);
|