@orioncactuscorp/ui 1.15.0 → 1.16.0
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/CHANGELOG.md +97 -0
- package/README.md +15 -15
- package/dist/components/Accordion/Accordion.css +1 -1
- package/dist/components/ActionArea/ActionArea.css +1 -1
- package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
- package/dist/components/BackgroundIconButton/BackgroundIconButton.js +9 -9
- package/dist/components/Badge/Badge.css +1 -1
- package/dist/components/Badge/Badge.js +20 -20
- package/dist/components/Button/Button.css +1 -1
- package/dist/components/Button/Button.js +5 -5
- package/dist/components/Cell/Cell.css +1 -1
- package/dist/components/CheckMark/CheckMark.css +1 -1
- package/dist/components/CheckMark/CheckMark.js +6 -6
- package/dist/components/Checkbox/Checkbox.css +1 -1
- package/dist/components/Checkbox/Checkbox.js +15 -15
- package/dist/components/Field/Field.css +1 -1
- package/dist/components/IconButton/IconButton.css +1 -1
- package/dist/components/IconButton/IconButton.js +9 -9
- package/dist/components/Interaction/Interaction.css +1 -1
- package/dist/components/Interaction/Interaction.js +19 -12
- package/dist/components/Menu/Menu.css +1 -1
- package/dist/components/Modal/Modal.css +1 -1
- package/dist/components/Modal/bottomSheetRelease.js +114 -0
- package/dist/components/Modal/modalScrollArbitration.js +49 -47
- package/dist/components/Modal/useModalDrag.js +928 -983
- package/dist/components/PositionSnap/PositionSnap.css +1 -1
- package/dist/components/ProgressIndicator/ProgressIndicator.css +1 -1
- package/dist/components/Radio/Radio.css +1 -1
- package/dist/components/Radio/Radio.js +9 -9
- package/dist/components/ScrollArea/ScrollArea.css +1 -1
- package/dist/components/ScrollArea/ScrollArea.js +262 -264
- package/dist/components/Skeleton/Skeleton.css +1 -1
- package/dist/components/Switch/Switch.css +1 -1
- package/dist/components/Switch/Switch.js +7 -7
- package/dist/components/Tabs/Tabs.css +1 -1
- package/dist/components/TextButton/TextButton.css +1 -1
- package/dist/components/TextButton/TextButton.js +17 -17
- package/dist/foundations/touch.css +1 -0
- package/dist/foundations.css +1 -0
- package/dist/styles.css +22 -21
- package/dist/ui/src/components/Interaction/Interaction.d.ts.map +1 -1
- package/dist/ui/src/components/Interaction/types.d.ts +2 -0
- package/dist/ui/src/components/Interaction/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/bottomSheetRelease.d.ts +19 -0
- package/dist/ui/src/components/Modal/bottomSheetRelease.d.ts.map +1 -0
- package/dist/ui/src/components/Modal/modalScrollArbitration.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
- package/dist/ui/src/components/ScrollArea/ScrollArea.d.ts +1 -1
- package/dist/ui/src/components/ScrollArea/ScrollArea.d.ts.map +1 -1
- package/dist/ui/src/components/ScrollArea/index.d.ts +1 -1
- package/dist/ui/src/components/ScrollArea/index.d.ts.map +1 -1
- package/dist/ui/src/components/ScrollArea/types.d.ts +2 -0
- package/dist/ui/src/components/ScrollArea/types.d.ts.map +1 -1
- package/dist/ui/src/index.d.ts +1 -1
- package/dist/ui/src/index.d.ts.map +1 -1
- package/dist/vscode/oc-ui-vars.css +1 -0
- package/docs/responsive-foundation-profile.md +1 -0
- package/docs/scss-helpers.md +1 -3
- package/docs/selector-contract.md +27 -3
- package/docs/tokens.md +6 -0
- package/package.json +1 -1
- package/src/scss/foundations/touch.scss +3 -0
- package/src/scss/foundations/touch.test.ts +37 -0
- package/src/scss/foundations/typo.scss +1 -1
- package/src/scss/index.scss +1 -0
- package/src/scss/mixins/_fluid.test.ts +0 -16
- package/src/scss/mixins/_utils.scss +0 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
.oc-PositionSnap-module__positioner__-v2BM{--_-position-snap-x: 0px;--_-position-snap-y: 0px
|
|
1
|
+
.oc-PositionSnap-module__positioner__-v2BM{--_-position-snap-x: 0px;--_-position-snap-y: 0px;position:fixed;z-index:var(--oc-position-snap-z-index, var(--oc-zindex-2));inset-block-start:0;inset-inline-start:0;width:max-content;max-width:100%;max-height:100dvh;touch-action:none;transform:translate3d(var(--_-position-snap-x),var(--_-position-snap-y),0)}.oc-PositionSnap-module__positioner__-v2BM[data-oc-positioned=false]{visibility:hidden}.oc-PositionSnap-module__positioner__-v2BM[data-oc-dragging=true]{cursor:grabbing;-webkit-user-select:none;user-select:none}.oc-PositionSnap-module__positioner__-v2BM[data-oc-drag=handle]{touch-action:auto}.oc-PositionSnap-module__handle__iuv3c{cursor:grab;touch-action:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.oc-ProgressIndicator-module__progressIndicator__iBe78{position:relative;display:block;overflow:hidden;inline-size:100%;block-size:var(--oc-progress-indicator-block-size);border-radius:var(--oc-progress-indicator-radius);background-color:var(--oc-progress-indicator-background-color)}.oc-ProgressIndicator-module__progressIndicator__iBe78>[data-oc-part=indicator]{position:absolute;inset-block:0;inset-inline-start:0;min-inline-size:0;max-inline-size:100%;border-radius:inherit;background-color:var(--oc-progress-indicator-color);transition:inline-size calc(.561s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(0 0%,.0045 .83%,.0168 1.67%,.0356 2.5%,.0593 3.33%,.0871 4.17%,.1178 5%,.1507 5.83%,.1852 6.67%,.2207 7.5%,.2566 8.33%,.2926 9.17%,.3283 10%,.3635 10.83%,.398 11.67%,.4316 12.5%,.4642 13.33%,.4957 14.17%,.5259 15%,.5549 15.83%,.5826 16.67%,.609 17.5%,.6341 18.33%,.6579 19.17%,.6805 20%,.7018 20.83%,.722 21.67%,.7409 22.5%,.7588 23.33%,.7756 24.17%,.7913 25%,.8061 25.83%,.8199 26.67%,.8328 27.5%,.8449 28.33%,.8562 29.17%,.8667 30%,.8765 30.83%,.8857 31.67%,.8942 32.5%,.9021 33.33%,.9095 34.17%,.9163 35%,.9227 35.83%,.9286 36.67%,.934 37.5%,.9391 38.33%,.9438 39.17%,.9481 40%,.9522 40.83%,.9559 41.67%,.9594 42.5%,.9625 43.33%,.9655 44.17%,.9682 45%,.9707 45.83%,.9731 46.67%,.9752 47.5%,.9772 48.33%,.979 49.17%,.9807 50%,.9822 50.83%,.9837 51.67%,.985 52.5%,.9862 53.33%,.9873 54.17%,.9883 55%,.9893 55.83%,.9902 56.67%,.991 57.5%,.9917 58.33%,.9924 59.17%,.993 60%,.9936 60.83%,.9941 61.67%,.9946 62.5%,.995 63.33%,.9955 64.17%,.9958 65%,.9962 65.83%,.9965 66.67%,.9968 67.5%,.9971 68.33%,.9973 69.17%,.9975 70%,.9977 70.83%,.9979 71.67%,.9981 72.5%,.9983 73.33%,.9984 74.17%,.9985 75%,.9987 75.83%,.9988 76.67%,.9989 77.5%,.999 78.33%,.9991 79.17%,.9991 80%,.9992 80.83%,.9993 81.67%,.9993 82.5%,.9994 83.33%,.9994 84.17%,.9995 85%,.9995 85.83%,.9996 86.67%,.9996 87.5%,.9996 88.33%,.9997 89.17%,.9997 90%,.9997 90.83%,.9998 91.67%,.9998 92.5%,.9998 93.33%,.9998 94.17%,.9998 95%,.9998 95.83%,.9999 96.67%,.9999 97.5%,.9999 98.33%,.9999 99.17%,1 100%)}@media(prefers-reduced-motion:reduce){.oc-ProgressIndicator-module__progressIndicator__iBe78>[data-oc-part=indicator]{transition:none}}.oc-ProgressIndicator-
|
|
1
|
+
.oc-ProgressIndicator-module__progressIndicator__iBe78{--_-progress-indicator-default-background-color: var(--oc-color-theme-fill-normal);--_-progress-indicator-default-color: var(--oc-color-theme-primary-normal);--_-progress-indicator-default-radius: var(--oc-atomic-radius-max);position:relative;display:block;overflow:hidden;inline-size:100%;block-size:var(--oc-progress-indicator-block-size, var(--_-progress-indicator-default-block-size));border-radius:var(--oc-progress-indicator-radius, var(--_-progress-indicator-default-radius));background-color:var(--oc-progress-indicator-background-color, var(--_-progress-indicator-default-background-color))}.oc-ProgressIndicator-module__progressIndicator__iBe78>[data-oc-part=indicator]{position:absolute;inset-block:0;inset-inline-start:0;min-inline-size:0;max-inline-size:100%;border-radius:inherit;background-color:var(--oc-progress-indicator-color, var(--_-progress-indicator-default-color));transition:inline-size calc(.561s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(0 0%,.0045 .83%,.0168 1.67%,.0356 2.5%,.0593 3.33%,.0871 4.17%,.1178 5%,.1507 5.83%,.1852 6.67%,.2207 7.5%,.2566 8.33%,.2926 9.17%,.3283 10%,.3635 10.83%,.398 11.67%,.4316 12.5%,.4642 13.33%,.4957 14.17%,.5259 15%,.5549 15.83%,.5826 16.67%,.609 17.5%,.6341 18.33%,.6579 19.17%,.6805 20%,.7018 20.83%,.722 21.67%,.7409 22.5%,.7588 23.33%,.7756 24.17%,.7913 25%,.8061 25.83%,.8199 26.67%,.8328 27.5%,.8449 28.33%,.8562 29.17%,.8667 30%,.8765 30.83%,.8857 31.67%,.8942 32.5%,.9021 33.33%,.9095 34.17%,.9163 35%,.9227 35.83%,.9286 36.67%,.934 37.5%,.9391 38.33%,.9438 39.17%,.9481 40%,.9522 40.83%,.9559 41.67%,.9594 42.5%,.9625 43.33%,.9655 44.17%,.9682 45%,.9707 45.83%,.9731 46.67%,.9752 47.5%,.9772 48.33%,.979 49.17%,.9807 50%,.9822 50.83%,.9837 51.67%,.985 52.5%,.9862 53.33%,.9873 54.17%,.9883 55%,.9893 55.83%,.9902 56.67%,.991 57.5%,.9917 58.33%,.9924 59.17%,.993 60%,.9936 60.83%,.9941 61.67%,.9946 62.5%,.995 63.33%,.9955 64.17%,.9958 65%,.9962 65.83%,.9965 66.67%,.9968 67.5%,.9971 68.33%,.9973 69.17%,.9975 70%,.9977 70.83%,.9979 71.67%,.9981 72.5%,.9983 73.33%,.9984 74.17%,.9985 75%,.9987 75.83%,.9988 76.67%,.9989 77.5%,.999 78.33%,.9991 79.17%,.9991 80%,.9992 80.83%,.9993 81.67%,.9993 82.5%,.9994 83.33%,.9994 84.17%,.9995 85%,.9995 85.83%,.9996 86.67%,.9996 87.5%,.9996 88.33%,.9997 89.17%,.9997 90%,.9997 90.83%,.9998 91.67%,.9998 92.5%,.9998 93.33%,.9998 94.17%,.9998 95%,.9998 95.83%,.9999 96.67%,.9999 97.5%,.9999 98.33%,.9999 99.17%,1 100%)}@media(prefers-reduced-motion:reduce){.oc-ProgressIndicator-module__progressIndicator__iBe78>[data-oc-part=indicator]{transition:none}}.oc-ProgressIndicator-module__small__37l6p{--_-progress-indicator-default-block-size: 2px}.oc-ProgressIndicator-module__medium__4Y8b8{--_-progress-indicator-default-block-size: 4px}.oc-ProgressIndicator-module__large__Wis3a{--_-progress-indicator-default-block-size: 6px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.oc-Radio-module__radio__qhO7H{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);display:inline-flex;position:relative;align-items:flex-start;gap:.5em;opacity:1;color:var(--oc-color-theme-label-normal);transition:opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1.5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1.5);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.oc-Radio-module__radio__qhO7H:has([data-oc-part=input]:disabled){opacity:var(--oc-color-global-opacity-43);cursor:not-allowed}.oc-Radio-module__radio__qhO7H
|
|
1
|
+
.oc-Radio-module__radio__qhO7H{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);display:inline-flex;position:relative;align-items:flex-start;gap:.5em;opacity:1;color:var(--oc-color-theme-label-normal);transition:opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1.5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1.5);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.oc-Radio-module__radio__qhO7H:has([data-oc-part=input]:disabled){opacity:var(--oc-color-global-opacity-43);cursor:not-allowed}.oc-Radio-module__radio__qhO7H:has([data-oc-part=input]:disabled) [data-oc-component=interaction],.oc-Radio-module__radio__qhO7H:has([data-oc-part=input]:disabled) [data-oc-component=interaction]:after{pointer-events:none}.oc-Radio-module__radio__qhO7H{--oc-radio-icon-scale: .675}.oc-Radio-module__fill__h24zJ{display:flex;inline-size:100%}.oc-Radio-module__small__PGRQA{font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);--oc-radio-control-size: var(--oc-typo-height-body2);--oc-radio-content-height: var(--oc-typo-height-body2)}.oc-Radio-module__medium__OItEm{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);--oc-radio-control-size: var(--oc-typo-height-body1);--oc-radio-content-height: var(--oc-typo-height-body1)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]{position:absolute;opacity:0;pointer-events:none;inline-size:0;block-size:0}.oc-Radio-module__radio__qhO7H [data-oc-part=container]{position:relative;isolation:isolate;flex-shrink:0;padding:.125em;inline-size:var(--oc-radio-control-size);block-size:var(--oc-radio-control-size);--oc-interaction-inset-x: -.25em;--oc-interaction-inset-y: -.25em;--oc-interaction-z-index: 2;--oc-interaction-radius: var(--oc-atomic-radius-max);--_-interaction-default-touch-target-min: var(--oc-touch-target-min, 44px)}.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{display:flex;box-shadow:inset 0 0 0 1.5px currentcolor}@supports (-webkit-backdrop-filter: none){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1px currentcolor}@media only screen and (resolution:2dppx){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.5px currentcolor}}@media only screen and (resolution:3dppx){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.6666px currentcolor}}}.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{border-radius:var(--oc-atomic-radius-max);inline-size:100%;block-size:100%;color:var(--oc-color-theme-line-normal-normal);transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H [data-oc-part=wrapper]{transition-property:color,background-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H [data-oc-part=icon-wrapper]{display:flex;align-items:center;justify-content:center;transform:scale(var(--oc-radio-icon-scale));inline-size:100%;block-size:100%;color:transparent;transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Radio-module__radio__qhO7H [data-oc-part=icon-wrapper]{transition-property:color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-Radio-module__radio__qhO7H [data-oc-part=icon-wrapper]>svg{inline-size:100%;block-size:100%;padding:.125rem}.oc-Radio-module__radio__qhO7H [data-oc-part=content]{display:flex;flex:1;align-items:flex-start;gap:var(--oc-space-item-gap-tiny);min-inline-size:0;padding-block:calc((var(--oc-radio-control-size) - var(--oc-radio-content-height)) / 2)}.oc-Radio-module__radio__qhO7H [data-oc-part=label]{-webkit-user-select:none;user-select:none}.oc-Radio-module__radio__qhO7H [data-oc-part=trailing-compound]{display:flex;flex-shrink:0;margin-inline-start:auto}.oc-Radio-module__fill__h24zJ [data-oc-part=label]{flex:1}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:disabled+[data-oc-part=container] [data-oc-part=wrapper]{color:var(--oc-color-theme-line-normal-alternative)}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=wrapper]{color:transparent;background-color:var(--oc-radio-background-color, var(--oc-color-theme-primary-normal))}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=icon-wrapper]{color:var(--oc-radio-color, var(--oc-color-theme-static-white))}.oc-Radio-module__radio__qhO7H [data-oc-part=input]:focus-visible+[data-oc-part=container] [data-oc-part=wrapper]{outline:var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);outline-offset:var(--oc-focus-ring-offset)}
|
|
@@ -3,11 +3,11 @@ import { jsxs as r, jsx as t } from "react/jsx-runtime";
|
|
|
3
3
|
import v from "@orioncactuscorp/icons/orioncactus/CircleFill";
|
|
4
4
|
import y from "../Interaction/Interaction.js";
|
|
5
5
|
import e from "./Radio.module.scss.js";
|
|
6
|
-
function
|
|
6
|
+
function x({
|
|
7
7
|
children: o,
|
|
8
8
|
className: l = "",
|
|
9
|
-
size:
|
|
10
|
-
fill:
|
|
9
|
+
size: c = "medium",
|
|
10
|
+
fill: i = !1,
|
|
11
11
|
trailingCompound: n,
|
|
12
12
|
onChange: p,
|
|
13
13
|
onCheckedChange: d,
|
|
@@ -23,13 +23,13 @@ function C({
|
|
|
23
23
|
{
|
|
24
24
|
className: [
|
|
25
25
|
e.radio,
|
|
26
|
-
e[
|
|
27
|
-
|
|
26
|
+
e[c],
|
|
27
|
+
i ? e.fill : "",
|
|
28
28
|
l
|
|
29
29
|
].filter(Boolean).join(" "),
|
|
30
30
|
"data-oc-component": "radio",
|
|
31
|
-
"data-oc-size":
|
|
32
|
-
"data-oc-fill":
|
|
31
|
+
"data-oc-size": c,
|
|
32
|
+
"data-oc-fill": i ? "true" : void 0,
|
|
33
33
|
"data-oc-interaction-variant": u,
|
|
34
34
|
children: [
|
|
35
35
|
/* @__PURE__ */ t(
|
|
@@ -43,7 +43,7 @@ function C({
|
|
|
43
43
|
}
|
|
44
44
|
),
|
|
45
45
|
/* @__PURE__ */ r("span", { "data-oc-part": "container", children: [
|
|
46
|
-
/* @__PURE__ */ t(y, { self: !0 }),
|
|
46
|
+
/* @__PURE__ */ t(y, { self: !0, touchTarget: !0 }),
|
|
47
47
|
/* @__PURE__ */ t("span", { "data-oc-part": "wrapper", children: /* @__PURE__ */ t("span", { "data-oc-part": "icon-wrapper", children: /* @__PURE__ */ t(v, { size: "custom" }) }) })
|
|
48
48
|
] }),
|
|
49
49
|
h ? /* @__PURE__ */ r("span", { "data-oc-part": "content", children: [
|
|
@@ -66,5 +66,5 @@ function C({
|
|
|
66
66
|
);
|
|
67
67
|
}
|
|
68
68
|
export {
|
|
69
|
-
|
|
69
|
+
x as default
|
|
70
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.oc-ScrollArea-module__scrollArea__DqPec{position:relative;isolation:isolate;min-inline-size:0;min-block-size:0;--oc-scroll-area-padding: .25rem;--oc-scroll-area-size: .4375rem;--oc-scroll-area-scrollbar-vertical-inset-block-start: 0px;--oc-scroll-area-scrollbar-vertical-inset-block-end: 0px;--oc-scroll-area-scrollbar-vertical-inset-inline-start: auto;--oc-scroll-area-scrollbar-vertical-inset-inline-end: 0px;--oc-scroll-area-scrollbar-horizontal-inset-block-start: auto;--oc-scroll-area-scrollbar-horizontal-inset-block-end: 0px;--oc-scroll-area-scrollbar-horizontal-inset-inline-start: 0px;--oc-scroll-area-scrollbar-horizontal-inset-inline-end: 0px}.oc-ScrollArea-module__scrollArea__DqPec[data-oc-scroll-root=true]>[data-oc-part=scrollbar-vertical],.oc-ScrollArea-module__scrollArea__DqPec[data-oc-scroll-root=true]>[data-oc-part=scrollbar-horizontal]{position:fixed}.oc-ScrollArea-module__scrollArea__DqPec[data-oc-scroll-root=true]>[data-oc-scroll-container]{block-size:auto;overflow:visible}.oc-ScrollArea-module__container__dGQhY{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;overflow:auto
|
|
1
|
+
.oc-ScrollArea-module__scrollArea__DqPec{position:relative;isolation:isolate;min-inline-size:0;min-block-size:0;--oc-scroll-area-padding: .25rem;--oc-scroll-area-size: .4375rem;--oc-scroll-area-scrollbar-vertical-inset-block-start: 0px;--oc-scroll-area-scrollbar-vertical-inset-block-end: 0px;--oc-scroll-area-scrollbar-vertical-inset-inline-start: auto;--oc-scroll-area-scrollbar-vertical-inset-inline-end: 0px;--oc-scroll-area-scrollbar-horizontal-inset-block-start: auto;--oc-scroll-area-scrollbar-horizontal-inset-block-end: 0px;--oc-scroll-area-scrollbar-horizontal-inset-inline-start: 0px;--oc-scroll-area-scrollbar-horizontal-inset-inline-end: 0px}.oc-ScrollArea-module__scrollArea__DqPec[data-oc-scroll-root=true]>[data-oc-part=scrollbar-vertical],.oc-ScrollArea-module__scrollArea__DqPec[data-oc-scroll-root=true]>[data-oc-part=scrollbar-horizontal]{position:fixed}.oc-ScrollArea-module__scrollArea__DqPec[data-oc-scroll-root=true]>[data-oc-scroll-container]{block-size:auto;overflow:visible}.oc-ScrollArea-module__scrollArea__DqPec:is([data-oc-scrollbar-mode=custom],[data-oc-scrollbar-visibility=hidden],[data-oc-scrollbar-mode=native][data-oc-scrollbar-visibility=hidden-on-touch])>[data-oc-scroll-container]{scrollbar-width:none}.oc-ScrollArea-module__scrollArea__DqPec:is([data-oc-scrollbar-mode=custom],[data-oc-scrollbar-visibility=hidden],[data-oc-scrollbar-mode=native][data-oc-scrollbar-visibility=hidden-on-touch])>[data-oc-scroll-container]::-webkit-scrollbar{display:none}.oc-ScrollArea-module__container__dGQhY{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;overflow:auto}.oc-ScrollArea-module__scrollbar__fSzQp{display:flex;position:absolute;z-index:1;box-sizing:content-box;padding:var(--oc-scroll-area-padding);opacity:0;transition:opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-ScrollArea-module__scrollbar__fSzQp{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-state=active],.oc-ScrollArea-module__scrollbar__fSzQp:hover{opacity:1}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=vertical]{inset-block:var(--oc-scroll-area-scrollbar-vertical-inset-block-start) var(--oc-scroll-area-scrollbar-vertical-inset-block-end);inset-inline:var(--oc-scroll-area-scrollbar-vertical-inset-inline-start) var(--oc-scroll-area-scrollbar-vertical-inset-inline-end);inline-size:var(--oc-scroll-area-size)}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=vertical]:has(+[data-oc-part=scrollbar-horizontal]){inset-block-end:calc(var(--oc-scroll-area-scrollbar-vertical-inset-block-end) + var(--oc-scroll-area-size) + var(--oc-scroll-area-padding) / 2)}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=vertical]>[data-oc-part=scrollbar-track]{inline-size:100%}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=vertical]>[data-oc-part=scrollbar-track]>[data-oc-part=thumb]{inline-size:100%;min-block-size:var(--oc-scroll-area-size);block-size:var(--oc-scroll-area-thumb-height)}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=vertical] [data-oc-part=thumb-background]{inset-block:0;inset-inline-end:0;inline-size:100%;block-size:var(--oc-scroll-area-thumb-height);transition:inline-size calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=vertical] [data-oc-part=thumb-background]{transition-property:background-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=vertical] [data-oc-part=thumb]:is(:hover,:active,[data-oc-state=dragging],:has(>[data-oc-part=thumb-background]>[data-oc-self=true]:hover),:has(>[data-oc-part=thumb-background]>[data-oc-self=true]:active))>[data-oc-part=thumb-background]{inline-size:calc(100% + var(--oc-scroll-area-padding))}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=horizontal]{inset-block:var(--oc-scroll-area-scrollbar-horizontal-inset-block-start) var(--oc-scroll-area-scrollbar-horizontal-inset-block-end);inset-inline:var(--oc-scroll-area-scrollbar-horizontal-inset-inline-start) var(--oc-scroll-area-scrollbar-horizontal-inset-inline-end);block-size:var(--oc-scroll-area-size)}[data-oc-part=scrollbar-vertical]+.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=horizontal]{inset-inline-end:calc(var(--oc-scroll-area-scrollbar-horizontal-inset-inline-end) + var(--oc-scroll-area-size) + var(--oc-scroll-area-padding) / 2)}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=horizontal]>[data-oc-part=scrollbar-track]{inline-size:100%;block-size:100%}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=horizontal]>[data-oc-part=scrollbar-track]>[data-oc-part=thumb]{min-inline-size:var(--oc-scroll-area-size);inline-size:var(--oc-scroll-area-thumb-width);block-size:100%}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=horizontal] [data-oc-part=thumb-background]{inset-block-end:0;inset-inline:0;inline-size:var(--oc-scroll-area-thumb-width);block-size:100%;transition:block-size calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=horizontal] [data-oc-part=thumb-background]{transition-property:background-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=horizontal] [data-oc-part=thumb]:is(:hover,:active,[data-oc-state=dragging],:has(>[data-oc-part=thumb-background]>[data-oc-self=true]:hover),:has(>[data-oc-part=thumb-background]>[data-oc-self=true]:active))>[data-oc-part=thumb-background]{block-size:calc(100% + var(--oc-scroll-area-padding))}.oc-ScrollArea-module__wrapper__wSIU3{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.oc-ScrollArea-module__wrapper__wSIU3:before{position:absolute;inset:calc(-1 * var(--oc-scroll-area-padding));content:""}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-state=active]>[data-oc-part=scrollbar-track]:not([data-oc-state=active]){overflow:hidden;border-radius:var(--oc-atomic-radius-max)}.oc-ScrollArea-module__thumb__vIWmD{position:relative;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-ScrollArea-module__thumb__vIWmD{transition-property:background-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback)}}.oc-ScrollArea-module__thumb__vIWmD{cursor:pointer}.oc-ScrollArea-module__background__sPGmG{position:absolute;overflow:hidden;border-radius:var(--oc-atomic-radius-max);background-color:var(--oc-color-theme-label-assistive)}[data-oc-part=thumb][data-oc-state=dragging]>[data-oc-part=thumb-background]>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);--_-interaction-state-scale: 1}@media(prefers-reduced-motion:reduce){.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=vertical] [data-oc-part=thumb]:is(:hover,:active,[data-oc-state=dragging],:has(>[data-oc-part=thumb-background]>[data-oc-self=true]:hover),:has(>[data-oc-part=thumb-background]>[data-oc-self=true]:active))>[data-oc-part=thumb-background]{inline-size:100%}.oc-ScrollArea-module__scrollbar__fSzQp[data-oc-orientation=horizontal] [data-oc-part=thumb]:is(:hover,:active,[data-oc-state=dragging],:has(>[data-oc-part=thumb-background]>[data-oc-self=true]:hover),:has(>[data-oc-part=thumb-background]>[data-oc-self=true]:active))>[data-oc-part=thumb-background]{block-size:100%}}
|