@arbeidstilsynet/design-css 0.10.1 → 0.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/digdir/dropdown.css +1 -1
- package/dist/digdir/input.css +1 -1
- package/dist/src/button.css +4 -2
- package/dist/src/header.css +1 -8
- package/dist/src/index.css +7 -12
- package/package.json +4 -4
package/dist/digdir/dropdown.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-dropdown{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}.ds-dropdown:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:"";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}.ds-dropdown[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}.ds-dropdown{--_ds-floating:var(--dsc-dropdown-placement);--_ds-floating-arrow-size:var(--dsc-dropdown-arrow-size);--_ds-floating-arrow-visibility:hidden;--dsc-dropdown-padding:var(--ds-size-3) var(--ds-size-2);--dsc-dropdown-item-padding:var(--ds-size-2) var(--ds-size-4);--dsc-dropdown-item-size:var(--ds-size-12);--dsc-dropdown-background:var(--ds-color-neutral-surface-default);--dsc-dropdown-border-width:var(--ds-border-width-default);--dsc-dropdown-border-style:solid;--dsc-dropdown-border-color:var(--ds-color-neutral-border-subtle);--dsc-dropdown-placement:bottom;--dsc-dropdown-arrow-size:var(--ds-size-2);background:var(--dsc-dropdown-background);border-color:var(--dsc-dropdown-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-dropdown-border-style);border-width:var(--dsc-dropdown-border-width);box-sizing:border-box;list-style:none;min-width:15em;padding:var(--dsc-dropdown-padding);&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}.ds-dropdown
|
|
1
|
+
.ds-dropdown{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}.ds-dropdown:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:"";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}.ds-dropdown[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}.ds-dropdown{--_ds-floating:var(--dsc-dropdown-placement);--_ds-floating-arrow-size:var(--dsc-dropdown-arrow-size);--_ds-floating-arrow-visibility:hidden;--dsc-dropdown-padding:var(--ds-size-3) var(--ds-size-2);--dsc-dropdown-item-padding:var(--ds-size-2) var(--ds-size-4);--dsc-dropdown-item-size:var(--ds-size-12);--dsc-dropdown-background:var(--ds-color-neutral-surface-default);--dsc-dropdown-border-width:var(--ds-border-width-default);--dsc-dropdown-border-style:solid;--dsc-dropdown-border-color:var(--ds-color-neutral-border-subtle);--dsc-dropdown-placement:bottom;--dsc-dropdown-arrow-size:var(--ds-size-2);background:var(--dsc-dropdown-background);border-color:var(--dsc-dropdown-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-dropdown-border-style);border-width:var(--dsc-dropdown-border-width);box-sizing:border-box;list-style:none;min-width:15em;padding:var(--dsc-dropdown-padding);&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}.ds-dropdown>:is(h2,h3,h4,h5,h6){align-items:center;box-sizing:border-box;color:var(--ds-color-neutral-text-default);font-size:inherit;font-weight:var(--ds-font-weight-medium);margin:0;min-height:var(--dsc-dropdown-item-size);padding:var(--dsc-dropdown-item-padding)}:is(.ds-dropdown>:is(h2,h3,h4,h5,h6)):not([hidden]){display:flex}.ds-dropdown>ul{list-style:none;margin:0;padding:0}.ds-dropdown>ul>li>:is(a,button,[role=button]){font-weight:var(--ds-font-weight-regular);justify-content:start;min-height:var(--dsc-dropdown-item-size);padding:var(--dsc-dropdown-item-padding);width:100%}
|
package/dist/digdir/input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(.ds-input){margin:0}.ds-input{--dsc-input-padding-block:var(--ds-size-2);--dsc-input-padding-inline:var(--ds-size-3);--dsc-input-padding:var(--dsc-input-padding-block) var(--dsc-input-padding-inline);--dsc-input-size--toggle:var(--ds-size-6);--dsc-input-size:var(--ds-size-12);--dsc-input-background--readonly:var(--ds-color-neutral-surface-tinted);--dsc-input-background:var(--ds-color-neutral-surface-default);--dsc-input-border-color--readonly:var(--ds-color-neutral-border-subtle);--dsc-input-border-color:var(--ds-color-neutral-border-default);--dsc-input-border-style:solid;--dsc-input-border-width--toggle:max(var(--ds-border-width-default),calc(var(--ds-size-1)/2));--dsc-input-border-width:var(--ds-border-width-default);--dsc-input-outline-color--hover:var(--ds-color-neutral-border-default);--dsc-input-outline-color--toggle--hover:var(--dsc-input-accent-color);--dsc-input-outline-width--hover:var(--ds-border-width-default);--dsc-input-outline-style--hover:solid;--dsc-input-color--readonly:var(--ds-color-neutral-text-default);--dsc-input-color:var(--ds-color-neutral-text-default);--dsc-input-stroke-color:var(--ds-color-base-contrast-default);--dsc-input-stroke-color--invalid:var(--ds-color-danger-base-contrast-default);--dsc-input-stroke-width:0.05em;--dsc-input-accent-color:var(--ds-color-base-default);--dsc-input-accent-color--invalid:var(--ds-color-danger-text-subtle);--_dsc-input-diagonal-1:transparent calc(48% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-2:currentcolor calc(50% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-3:currentcolor calc(50% + var(--dsc-input-stroke-width));--_dsc-input-diagonal-4:transparent calc(52% + var(--dsc-input-stroke-width));--dsc-input-line-height:var(--ds-line-height-md);--_dsc-input-spacing--toggle:calc(var(--ds-size-1)/2);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-input-background);border-color:var(--dsc-input-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-input-border-style);border-width:var(--dsc-input-border-width);box-sizing:border-box;color:var(--dsc-input-color);font-family:inherit;height:var(--dsc-input-size);line-height:var(--dsc-input-line-height);max-width:100%;min-width:0;padding:var(--dsc-input-padding);position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle}.ds-input:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-input:focus-visible *{--_ds--focus: }.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover{outline-color:var(--dsc-input-outline-color--hover);outline-style:var(--dsc-input-outline-style--hover);outline-width:var(--dsc-input-outline-width--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover):is(:checked,:indeterminate:where([type=checkbox])):not([aria-invalid=true]){outline-color:var(--dsc-input-outline-color--toggle--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover):is([aria-invalid=true]){outline-color:var(--dsc-input-accent-color--invalid)}@media (forced-colors:active){.ds-input{background-color:Canvas;border-color:ButtonText}.ds-input:disabled,.ds-input[aria-disabled=true],.ds-input[aria-readonly=true],.ds-input[readonly]{border-color:GrayText}}@supports (width:round(down,0.1em,1px)){.ds-input{border-width:round(up,var(--dsc-input-border-width),1px)}}.ds-input:not([data-size]){font-size:inherit}.ds-input:is(select){background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;padding-inline-end:2.4em;text-overflow:ellipsis}:dir(rtl) .ds-input:is(select){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}.ds-input:is(select):open{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}@media (forced-colors:active){.ds-input:is(select){-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}.ds-input:is(textarea){height:auto;min-height:calc(var(--dsc-input-size)*1.5);resize:vertical}.ds-input:is(textarea):not([rows]){field-sizing:content;height:var(--_ds-field-sizing)}.ds-input:not([type=button],[type=radio],[type=checkbox],[type=color],[type=file],textarea,select){height:unset;padding-block:calc((var(--dsc-input-size) - var(--dsc-input-line-height)*1em)/2 - var(--dsc-input-border-width))}.ds-input:not([size],[cols],select:where([data-width=auto])){width:100%}.ds-input:checked,.ds-input:indeterminate:where([type=checkbox]){background:var(--dsc-input-accent-color);border-color:var(--dsc-input-accent-color);color:var(--dsc-input-stroke-color)}.ds-input:disabled,.ds-input[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}.ds-input[aria-invalid=true]{border-color:var(--dsc-input-accent-color--invalid)}.ds-input[aria-invalid=true]:where(:checked){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[type=checkbox][aria-invalid=true]:where(:indeterminate){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[aria-readonly=true],.ds-input[readonly]{background-color:var(--dsc-input-background--readonly);border-color:var(--dsc-input-border-color--readonly);color:var(--dsc-input-color--readonly)}@media (forced-colors:active){.ds-input[aria-readonly=true],.ds-input[readonly]{border-color:GrayText}}.ds-input:-moz-read-only:not([readonly],[aria-readonly=true],[aria-disabled=true],:disabled){cursor:pointer}.ds-input:read-only:not([readonly],[aria-readonly=true],[aria-disabled=true],:disabled){cursor:pointer}.ds-input[type=checkbox],.ds-input[type=radio]{border-width:var(--dsc-input-border-width--toggle);flex-shrink:0;height:var(--dsc-input-size--toggle);line-height:inherit;padding:var(--_dsc-input-spacing--toggle);width:var(--dsc-input-size--toggle)}@media (forced-colors:active){.ds-input[type=checkbox],.ds-input[type=radio]{color:Canvas}:is(.ds-input[type=checkbox],.ds-input[type=radio]):disabled,[aria-disabled=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[aria-readonly=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[readonly]:is(.ds-input[type=checkbox],.ds-input[type=radio]){border-color:GrayText}}.ds-input[type=radio]{border-radius:var(--ds-border-radius-full)}.ds-input[type=radio]:checked{background-image:radial-gradient(circle closest-side,currentcolor 45%,transparent 50%)}@media (forced-colors:active){.ds-input[type=radio]:checked{background-color:LinkText;border-color:LinkText;color:Canvas;forced-color-adjust:none}}.ds-input[type=checkbox]{border-radius:var(--ds-border-radius-sm)}.ds-input[type=checkbox]:checked{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-origin:content-box;background-position:10% 73%,90% 50%;background-repeat:no-repeat;background-size:35% 35%,65% 65%}@media (forced-colors:active){.ds-input[type=checkbox]:checked{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[type=checkbox]:indeterminate{background-image:linear-gradient(transparent calc(48% - var(--dsc-input-stroke-width)),currentcolor calc(50% - var(--dsc-input-stroke-width)),currentcolor calc(50% + var(--dsc-input-stroke-width)),transparent calc(52% + var(--dsc-input-stroke-width)));background-origin:content-box;background-position:50%;background-repeat:no-repeat;background-size:contain}@media (forced-colors:active){.ds-input[type=checkbox]:indeterminate{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[role=switch]:is([type=radio],[type=checkbox]){--_dsc-input-circle-position:left;background-image:radial-gradient(circle closest-side,currentcolor 95%,transparent 100%);background-origin:content-box;background-position:var(--_dsc-input-circle-position);background-repeat:no-repeat;background-size:calc(var(--dsc-input-size--toggle) - var(--_dsc-input-spacing--toggle)*2) 100%;border-radius:var(--ds-border-radius-full);padding-inline:0;transition:background-position .2s;width:calc(var(--dsc-input-size--toggle)*2)}.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{--_dsc-input-circle-position:right}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{color:CanvasText}}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]){color:GrayText;forced-color-adjust:none}.ds-input[role=switch][aria-readonly=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){color:GrayText}.ds-input[role=switch]:is([type=radio],[type=checkbox]):disabled,.ds-input[role=switch][aria-disabled=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][aria-readonly=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){border-color:GrayText}}
|
|
1
|
+
:where(.ds-input){margin:0}.ds-input{--dsc-input-padding-block:var(--ds-size-2);--dsc-input-padding-inline:var(--ds-size-3);--dsc-input-padding:var(--dsc-input-padding-block) var(--dsc-input-padding-inline);--dsc-input-size--toggle:var(--ds-size-6);--dsc-input-size:var(--ds-size-12);--dsc-input-background--readonly:var(--ds-color-neutral-surface-tinted);--dsc-input-background:var(--ds-color-neutral-surface-default);--dsc-input-border-color--readonly:var(--ds-color-neutral-border-subtle);--dsc-input-border-color:var(--ds-color-neutral-border-default);--dsc-input-border-style:solid;--dsc-input-border-width--toggle:max(var(--ds-border-width-default),calc(var(--ds-size-1)/2));--dsc-input-border-width:var(--ds-border-width-default);--dsc-input-outline-color--hover:var(--ds-color-neutral-border-default);--dsc-input-outline-color--toggle--hover:var(--dsc-input-accent-color);--dsc-input-outline-width--hover:var(--ds-border-width-default);--dsc-input-outline-style--hover:solid;--dsc-input-color--readonly:var(--ds-color-neutral-text-default);--dsc-input-color:var(--ds-color-neutral-text-default);--dsc-input-stroke-color:var(--ds-color-base-contrast-default);--dsc-input-stroke-color--invalid:var(--ds-color-danger-base-contrast-default);--dsc-input-stroke-width:0.05em;--dsc-input-accent-color:var(--ds-color-base-default);--dsc-input-accent-color--invalid:var(--ds-color-danger-text-subtle);--_dsc-input-diagonal-1:transparent calc(48% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-2:currentcolor calc(50% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-3:currentcolor calc(50% + var(--dsc-input-stroke-width));--_dsc-input-diagonal-4:transparent calc(52% + var(--dsc-input-stroke-width));--dsc-input-line-height:var(--ds-line-height-md);--_dsc-input-spacing--toggle:calc(var(--ds-size-1)/2);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-input-background);border-color:var(--dsc-input-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-input-border-style);border-width:var(--dsc-input-border-width);box-sizing:border-box;color:var(--dsc-input-color);font-family:inherit;height:var(--dsc-input-size);line-height:var(--dsc-input-line-height);max-width:100%;min-width:0;padding:var(--dsc-input-padding);position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle}.ds-input:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-input:focus-visible *{--_ds--focus: }.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover{outline-color:var(--dsc-input-outline-color--hover);outline-style:var(--dsc-input-outline-style--hover);outline-width:var(--dsc-input-outline-width--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover):is(:checked,:indeterminate:where([type=checkbox])):not([aria-invalid=true]){outline-color:var(--dsc-input-outline-color--toggle--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover):is([aria-invalid=true]){outline-color:var(--dsc-input-accent-color--invalid)}@media (forced-colors:active){.ds-input{background-color:Canvas;border-color:ButtonText}.ds-input:disabled,.ds-input[aria-disabled=true],.ds-input[aria-readonly=true],.ds-input[readonly]{border-color:GrayText}}@supports (width:round(down,0.1em,1px)){.ds-input{border-width:round(up,var(--dsc-input-border-width),1px)}}.ds-input:not([data-size]){font-size:inherit}.ds-input:is(select){background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;padding-inline-end:2.4em;text-overflow:ellipsis}:dir(rtl) .ds-input:is(select){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}.ds-input:is(select):open{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}@media (forced-colors:active){.ds-input:is(select){-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}.ds-input:is(textarea){height:auto;min-height:calc(var(--dsc-input-size)*1.5);resize:vertical}.ds-input:is(textarea):not([rows]){field-sizing:content;height:var(--_ds-field-sizing)}.ds-input:where([type=text],[type=email],[type=tel],[type=url],[type=search]){height:unset;padding-block:calc((var(--dsc-input-size) - var(--dsc-input-line-height)*1em)/2 - var(--dsc-input-border-width))}.ds-input:not([size],[cols],select:where([data-width=auto])){width:100%}.ds-input:checked,.ds-input:indeterminate:where([type=checkbox]){background:var(--dsc-input-accent-color);border-color:var(--dsc-input-accent-color);color:var(--dsc-input-stroke-color)}.ds-input:disabled,.ds-input[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}.ds-input[aria-invalid=true]{border-color:var(--dsc-input-accent-color--invalid)}.ds-input[aria-invalid=true]:where(:checked){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[type=checkbox][aria-invalid=true]:where(:indeterminate){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[aria-readonly=true],.ds-input[readonly]{background-color:var(--dsc-input-background--readonly);border-color:var(--dsc-input-border-color--readonly);color:var(--dsc-input-color--readonly)}@media (forced-colors:active){.ds-input[aria-readonly=true],.ds-input[readonly]{border-color:GrayText}}.ds-input:-moz-read-only:not([readonly],[aria-readonly=true],[aria-disabled=true],:disabled){cursor:pointer}.ds-input:read-only:not([readonly],[aria-readonly=true],[aria-disabled=true],:disabled){cursor:pointer}.ds-input[type=checkbox],.ds-input[type=radio]{border-width:var(--dsc-input-border-width--toggle);flex-shrink:0;height:var(--dsc-input-size--toggle);line-height:inherit;padding:var(--_dsc-input-spacing--toggle);width:var(--dsc-input-size--toggle)}@media (forced-colors:active){.ds-input[type=checkbox],.ds-input[type=radio]{color:Canvas}:is(.ds-input[type=checkbox],.ds-input[type=radio]):disabled,[aria-disabled=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[aria-readonly=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[readonly]:is(.ds-input[type=checkbox],.ds-input[type=radio]){border-color:GrayText}}.ds-input[type=radio]{border-radius:var(--ds-border-radius-full)}.ds-input[type=radio]:checked{background-image:radial-gradient(circle closest-side,currentcolor 45%,transparent 50%)}@media (forced-colors:active){.ds-input[type=radio]:checked{background-color:LinkText;border-color:LinkText;color:Canvas;forced-color-adjust:none}}.ds-input[type=checkbox]{border-radius:var(--ds-border-radius-sm)}.ds-input[type=checkbox]:checked{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-origin:content-box;background-position:10% 73%,90% 50%;background-repeat:no-repeat;background-size:35% 35%,65% 65%}@media (forced-colors:active){.ds-input[type=checkbox]:checked{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[type=checkbox]:indeterminate{background-image:linear-gradient(transparent calc(48% - var(--dsc-input-stroke-width)),currentcolor calc(50% - var(--dsc-input-stroke-width)),currentcolor calc(50% + var(--dsc-input-stroke-width)),transparent calc(52% + var(--dsc-input-stroke-width)));background-origin:content-box;background-position:50%;background-repeat:no-repeat;background-size:contain}@media (forced-colors:active){.ds-input[type=checkbox]:indeterminate{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[role=switch]:is([type=radio],[type=checkbox]){--_dsc-input-circle-position:left;background-image:radial-gradient(circle closest-side,currentcolor 95%,transparent 100%);background-origin:content-box;background-position:var(--_dsc-input-circle-position);background-repeat:no-repeat;background-size:calc(var(--dsc-input-size--toggle) - var(--_dsc-input-spacing--toggle)*2) 100%;border-radius:var(--ds-border-radius-full);padding-inline:0;transition:background-position .2s;width:calc(var(--dsc-input-size--toggle)*2)}.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{--_dsc-input-circle-position:right}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{color:CanvasText}}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]){color:GrayText;forced-color-adjust:none}.ds-input[role=switch][aria-readonly=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){color:GrayText}.ds-input[role=switch]:is([type=radio],[type=checkbox]):disabled,.ds-input[role=switch][aria-disabled=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][aria-readonly=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){border-color:GrayText}}
|
package/dist/src/button.css
CHANGED
|
@@ -30,8 +30,10 @@
|
|
|
30
30
|
/* Don't apply when inside Pagination.
|
|
31
31
|
Pagination currently has mixed docs of either setting data-variant="primary" on Pagination.Button
|
|
32
32
|
or keeping it as tertiary (returned from usePagination). If this is changed upstream we can simplify this selector.
|
|
33
|
+
|
|
34
|
+
Also don't apply when inside ToggleGroup, which uses <label class="ds-button" data-variant="tertiary">
|
|
33
35
|
*/
|
|
34
|
-
.ds-pagination .ds-button[data-variant="tertiary"]
|
|
36
|
+
:is(.ds-pagination, .ds-toggle-group) .ds-button[data-variant="tertiary"]
|
|
35
37
|
) {
|
|
36
38
|
/** Text **/
|
|
37
39
|
--dsc-button-color: var(--ds-color-text-default);
|
|
@@ -48,7 +50,7 @@
|
|
|
48
50
|
text-decoration: none;
|
|
49
51
|
}
|
|
50
52
|
|
|
51
|
-
.ds-button[data-variant="tertiary"]:not(.ds-pagination .ds-button[data-variant="tertiary"]):hover:not([disabled]),.ds-button[data-variant="tertiary"]:not(.ds-pagination .ds-button[data-variant="tertiary"]):active:not([disabled]) {
|
|
53
|
+
.ds-button[data-variant="tertiary"]:not(:is(.ds-pagination,.ds-toggle-group) .ds-button[data-variant="tertiary"]):hover:not([disabled]),.ds-button[data-variant="tertiary"]:not(:is(.ds-pagination,.ds-toggle-group) .ds-button[data-variant="tertiary"]):active:not([disabled]) {
|
|
52
54
|
-webkit-text-decoration: underline 2px;
|
|
53
55
|
text-decoration: underline 2px;
|
|
54
56
|
text-underline-offset: 6px; /** Hack to prevent us from having to create our own button component just to support underline on hover. */
|
package/dist/src/header.css
CHANGED
|
@@ -196,7 +196,6 @@
|
|
|
196
196
|
|
|
197
197
|
@media (max-width: 48rem) {
|
|
198
198
|
.at-header {
|
|
199
|
-
height: var(--ds-size-18);
|
|
200
199
|
margin: 0;
|
|
201
200
|
padding: var(--ds-size-2) var(--ds-size-4);
|
|
202
201
|
}
|
|
@@ -206,13 +205,7 @@
|
|
|
206
205
|
|
|
207
206
|
.ds-link:has(.at-header__left) {
|
|
208
207
|
height: 100%;
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
.at-header__left {
|
|
212
|
-
height: 100%;
|
|
213
|
-
margin-right: 0;
|
|
214
|
-
flex-shrink: 0;
|
|
215
|
-
align-items: flex-end;
|
|
208
|
+
align-self: flex-end;
|
|
216
209
|
}
|
|
217
210
|
|
|
218
211
|
.at-header__center {
|
package/dist/src/index.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
@layer ds.base{:where(.ds-validation-message){margin:0}.ds-validation-message{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-validation-message-icon-size:var(--ds-size-7);--dsc-validation-message-spacing:var(--ds-size-2);--dsc-validation-message-color:var(--ds-color-danger-text-subtle);color:var(--dsc-validation-message-color);padding-inline-start:calc(var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-spacing));position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact}.ds-validation-message:before{background:currentcolor;content:"";height:var(--dsc-validation-message-icon-size);margin-inline:calc((var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-spacing))*-1);-webkit-mask:var(--dsc-validation-message-icon-url) center /contain no-repeat;mask:var(--dsc-validation-message-icon-url) center /contain no-repeat;position:absolute;translate:0 calc((1lh - var(--dsc-validation-message-icon-size))/2);width:var(--dsc-validation-message-icon-size)}@media (forced-colors:active){.ds-validation-message:before{background:CanvasText}}.ds-validation-message[data-color=success]{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");--dsc-validation-message-color:var(--ds-color-success-text-subtle)}.ds-validation-message[data-color=warning]{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");--dsc-validation-message-color:var(--ds-color-warning-text-subtle)}.ds-validation-message[data-color=info]{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");--dsc-validation-message-color:var(--ds-color-info-text-subtle)}}
|
|
8
8
|
@layer ds.components{[data-size]:is(.ds-avatar,.ds-heading,.ds-paragraph,.ds-spinner){--ds-size:var(--ds-size--md)}[data-size]:not(.ds-avatar,.ds-heading,.ds-paragraph,.ds-spinner){--_ds-size-mode__hack:var(--ds-size-mode-font-size)}[data-size] :is(.ds-avatar,.ds-heading,.ds-paragraph,.ds-spinner){--ds-size-mode-font-size:var(--_ds-size-mode__hack)}}
|
|
9
9
|
@layer ds.components{.ds-button{--dsc-button-background--active:var(--ds-color-base-active);--dsc-button-background--hover:var(--ds-color-base-hover);--dsc-button-background:var(--ds-color-base-default);--dsc-button-color:var(--ds-color-base-contrast-default);--dsc-button-color--hover:var(--ds-color-base-contrast-default);--dsc-button-border-width:var(--ds-border-width-default);--dsc-button-border-style:solid;--dsc-button-border-color:transparent;--dsc-button-gap:var(--ds-size-2);--dsc-button-padding:var(--ds-size-2) var(--ds-size-4);--dsc-button-size:var(--ds-size-12);--_ds-captured-length:1em;align-items:center;background:var(--dsc-button-background);border-color:var(--dsc-button-border-color);border-radius:var(--ds-border-radius-default);border-style:var(--dsc-button-border-style);border-width:var(--dsc-button-border-width);box-sizing:border-box;color:var(--dsc-button-color);cursor:pointer;font-family:inherit;font-weight:var(--ds-font-weight-medium);gap:var(--dsc-button-gap);height:-moz-fit-content;height:fit-content;justify-content:center;line-height:var(--ds-line-height-sm);min-height:var(--dsc-button-size);min-width:var(--dsc-button-size);outline:none;padding:var(--dsc-button-padding);-webkit-print-color-adjust:exact;print-color-adjust:exact;text-align:inherit;text-decoration:none}.ds-button:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-button:focus-visible *{--_ds--focus: }.ds-button[data-variant=secondary],.ds-button[data-variant=tertiary]{--dsc-button-background:transparent;--dsc-button-background--active:var(--ds-color-surface-active);--dsc-button-background--hover:var(--ds-color-surface-hover);--dsc-button-color:var(--ds-color-text-subtle);--dsc-button-color--hover:var(--ds-color-text-default)}.ds-button[data-variant=secondary]{--dsc-button-border-color:var(--ds-color-border-strong)}.ds-button:not([data-size]){font-size:inherit}.ds-button :where(img,svg):not(.ds-spinner){flex-shrink:0;font-size:calc(var(--_ds-captured-length)*1.3)}.ds-button:focus-visible{position:relative}.ds-button:where(:not([hidden])){display:flex}.ds-button[data-icon]{height:var(--dsc-button-size);padding:0;width:var(--dsc-button-size)}.ds-button[data-icon] :where(img,svg):not(.ds-spinner){font-size:calc(var(--_ds-captured-length)*1.5)}.ds-button[data-fullwidth]{text-align:center;width:100%}.ds-button .ds-spinner{height:1.4em}@media (hover:hover) and (pointer:fine){.ds-button:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):hover{background:var(--dsc-button-background--hover);color:var(--dsc-button-color--hover)}}.ds-button[aria-busy=true]{cursor:progress}.ds-button:is(:disabled,[aria-disabled=true]){cursor:not-allowed;opacity:var(--ds-opacity-disabled)}.ds-button[aria-busy=true]:is(:disabled,[aria-disabled=true]){cursor:progress;opacity:1}.ds-button:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):active{background:var(--dsc-button-background--active)}}
|
|
10
|
-
@layer ds.components{:where(.ds-input){margin:0}.ds-input{--dsc-input-padding-block:var(--ds-size-2);--dsc-input-padding-inline:var(--ds-size-3);--dsc-input-padding:var(--dsc-input-padding-block) var(--dsc-input-padding-inline);--dsc-input-size--toggle:var(--ds-size-6);--dsc-input-size:var(--ds-size-12);--dsc-input-background--readonly:var(--ds-color-neutral-surface-tinted);--dsc-input-background:var(--ds-color-neutral-surface-default);--dsc-input-border-color--readonly:var(--ds-color-neutral-border-subtle);--dsc-input-border-color:var(--ds-color-neutral-border-default);--dsc-input-border-style:solid;--dsc-input-border-width--toggle:max(var(--ds-border-width-default),calc(var(--ds-size-1)/2));--dsc-input-border-width:var(--ds-border-width-default);--dsc-input-outline-color--hover:var(--ds-color-neutral-border-default);--dsc-input-outline-color--toggle--hover:var(--dsc-input-accent-color);--dsc-input-outline-width--hover:var(--ds-border-width-default);--dsc-input-outline-style--hover:solid;--dsc-input-color--readonly:var(--ds-color-neutral-text-default);--dsc-input-color:var(--ds-color-neutral-text-default);--dsc-input-stroke-color:var(--ds-color-base-contrast-default);--dsc-input-stroke-color--invalid:var(--ds-color-danger-base-contrast-default);--dsc-input-stroke-width:0.05em;--dsc-input-accent-color:var(--ds-color-base-default);--dsc-input-accent-color--invalid:var(--ds-color-danger-text-subtle);--_dsc-input-diagonal-1:transparent calc(48% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-2:currentcolor calc(50% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-3:currentcolor calc(50% + var(--dsc-input-stroke-width));--_dsc-input-diagonal-4:transparent calc(52% + var(--dsc-input-stroke-width));--dsc-input-line-height:var(--ds-line-height-md);--_dsc-input-spacing--toggle:calc(var(--ds-size-1)/2);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-input-background);border-color:var(--dsc-input-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-input-border-style);border-width:var(--dsc-input-border-width);box-sizing:border-box;color:var(--dsc-input-color);font-family:inherit;height:var(--dsc-input-size);line-height:var(--dsc-input-line-height);max-width:100%;min-width:0;padding:var(--dsc-input-padding);position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle}.ds-input:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-input:focus-visible *{--_ds--focus: }.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover{outline-color:var(--dsc-input-outline-color--hover);outline-style:var(--dsc-input-outline-style--hover);outline-width:var(--dsc-input-outline-width--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover):is(:checked,:indeterminate:where([type=checkbox])):not([aria-invalid=true]){outline-color:var(--dsc-input-outline-color--toggle--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover):is([aria-invalid=true]){outline-color:var(--dsc-input-accent-color--invalid)}@media (forced-colors:active){.ds-input{background-color:Canvas;border-color:ButtonText}.ds-input:disabled,.ds-input[aria-disabled=true],.ds-input[aria-readonly=true],.ds-input[readonly]{border-color:GrayText}}@supports (width:round(down,0.1em,1px)){.ds-input{border-width:round(up,var(--dsc-input-border-width),1px)}}.ds-input:not([data-size]){font-size:inherit}.ds-input:is(select){background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;padding-inline-end:2.4em;text-overflow:ellipsis}:dir(rtl) .ds-input:is(select){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}.ds-input:is(select):open{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}@media (forced-colors:active){.ds-input:is(select){-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}.ds-input:is(textarea){height:auto;min-height:calc(var(--dsc-input-size)*1.5);resize:vertical}.ds-input:is(textarea):not([rows]){field-sizing:content;height:var(--_ds-field-sizing)}.ds-input:not([type=button],[type=radio],[type=checkbox],[type=color],[type=file],textarea,select){height:unset;padding-block:calc((var(--dsc-input-size) - var(--dsc-input-line-height)*1em)/2 - var(--dsc-input-border-width))}.ds-input:not([size],[cols],select:where([data-width=auto])){width:100%}.ds-input:checked,.ds-input:indeterminate:where([type=checkbox]){background:var(--dsc-input-accent-color);border-color:var(--dsc-input-accent-color);color:var(--dsc-input-stroke-color)}.ds-input:disabled,.ds-input[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}.ds-input[aria-invalid=true]{border-color:var(--dsc-input-accent-color--invalid)}.ds-input[aria-invalid=true]:where(:checked){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[type=checkbox][aria-invalid=true]:where(:indeterminate){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[aria-readonly=true],.ds-input[readonly]{background-color:var(--dsc-input-background--readonly);border-color:var(--dsc-input-border-color--readonly);color:var(--dsc-input-color--readonly)}@media (forced-colors:active){.ds-input[aria-readonly=true],.ds-input[readonly]{border-color:GrayText}}.ds-input:-moz-read-only:not([readonly],[aria-readonly=true],[aria-disabled=true],:disabled){cursor:pointer}.ds-input:read-only:not([readonly],[aria-readonly=true],[aria-disabled=true],:disabled){cursor:pointer}.ds-input[type=checkbox],.ds-input[type=radio]{border-width:var(--dsc-input-border-width--toggle);flex-shrink:0;height:var(--dsc-input-size--toggle);line-height:inherit;padding:var(--_dsc-input-spacing--toggle);width:var(--dsc-input-size--toggle)}@media (forced-colors:active){.ds-input[type=checkbox],.ds-input[type=radio]{color:Canvas}:is(.ds-input[type=checkbox],.ds-input[type=radio]):disabled,[aria-disabled=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[aria-readonly=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[readonly]:is(.ds-input[type=checkbox],.ds-input[type=radio]){border-color:GrayText}}.ds-input[type=radio]{border-radius:var(--ds-border-radius-full)}.ds-input[type=radio]:checked{background-image:radial-gradient(circle closest-side,currentcolor 45%,transparent 50%)}@media (forced-colors:active){.ds-input[type=radio]:checked{background-color:LinkText;border-color:LinkText;color:Canvas;forced-color-adjust:none}}.ds-input[type=checkbox]{border-radius:var(--ds-border-radius-sm)}.ds-input[type=checkbox]:checked{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-origin:content-box;background-position:10% 73%,90% 50%;background-repeat:no-repeat;background-size:35% 35%,65% 65%}@media (forced-colors:active){.ds-input[type=checkbox]:checked{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[type=checkbox]:indeterminate{background-image:linear-gradient(transparent calc(48% - var(--dsc-input-stroke-width)),currentcolor calc(50% - var(--dsc-input-stroke-width)),currentcolor calc(50% + var(--dsc-input-stroke-width)),transparent calc(52% + var(--dsc-input-stroke-width)));background-origin:content-box;background-position:50%;background-repeat:no-repeat;background-size:contain}@media (forced-colors:active){.ds-input[type=checkbox]:indeterminate{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[role=switch]:is([type=radio],[type=checkbox]){--_dsc-input-circle-position:left;background-image:radial-gradient(circle closest-side,currentcolor 95%,transparent 100%);background-origin:content-box;background-position:var(--_dsc-input-circle-position);background-repeat:no-repeat;background-size:calc(var(--dsc-input-size--toggle) - var(--_dsc-input-spacing--toggle)*2) 100%;border-radius:var(--ds-border-radius-full);padding-inline:0;transition:background-position .2s;width:calc(var(--dsc-input-size--toggle)*2)}.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{--_dsc-input-circle-position:right}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{color:CanvasText}}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]){color:GrayText;forced-color-adjust:none}.ds-input[role=switch][aria-readonly=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){color:GrayText}.ds-input[role=switch]:is([type=radio],[type=checkbox]):disabled,.ds-input[role=switch][aria-disabled=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][aria-readonly=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){border-color:GrayText}}}
|
|
10
|
+
@layer ds.components{:where(.ds-input){margin:0}.ds-input{--dsc-input-padding-block:var(--ds-size-2);--dsc-input-padding-inline:var(--ds-size-3);--dsc-input-padding:var(--dsc-input-padding-block) var(--dsc-input-padding-inline);--dsc-input-size--toggle:var(--ds-size-6);--dsc-input-size:var(--ds-size-12);--dsc-input-background--readonly:var(--ds-color-neutral-surface-tinted);--dsc-input-background:var(--ds-color-neutral-surface-default);--dsc-input-border-color--readonly:var(--ds-color-neutral-border-subtle);--dsc-input-border-color:var(--ds-color-neutral-border-default);--dsc-input-border-style:solid;--dsc-input-border-width--toggle:max(var(--ds-border-width-default),calc(var(--ds-size-1)/2));--dsc-input-border-width:var(--ds-border-width-default);--dsc-input-outline-color--hover:var(--ds-color-neutral-border-default);--dsc-input-outline-color--toggle--hover:var(--dsc-input-accent-color);--dsc-input-outline-width--hover:var(--ds-border-width-default);--dsc-input-outline-style--hover:solid;--dsc-input-color--readonly:var(--ds-color-neutral-text-default);--dsc-input-color:var(--ds-color-neutral-text-default);--dsc-input-stroke-color:var(--ds-color-base-contrast-default);--dsc-input-stroke-color--invalid:var(--ds-color-danger-base-contrast-default);--dsc-input-stroke-width:0.05em;--dsc-input-accent-color:var(--ds-color-base-default);--dsc-input-accent-color--invalid:var(--ds-color-danger-text-subtle);--_dsc-input-diagonal-1:transparent calc(48% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-2:currentcolor calc(50% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-3:currentcolor calc(50% + var(--dsc-input-stroke-width));--_dsc-input-diagonal-4:transparent calc(52% + var(--dsc-input-stroke-width));--dsc-input-line-height:var(--ds-line-height-md);--_dsc-input-spacing--toggle:calc(var(--ds-size-1)/2);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-input-background);border-color:var(--dsc-input-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-input-border-style);border-width:var(--dsc-input-border-width);box-sizing:border-box;color:var(--dsc-input-color);font-family:inherit;height:var(--dsc-input-size);line-height:var(--dsc-input-line-height);max-width:100%;min-width:0;padding:var(--dsc-input-padding);position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle}.ds-input:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-input:focus-visible *{--_ds--focus: }.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover{outline-color:var(--dsc-input-outline-color--hover);outline-style:var(--dsc-input-outline-style--hover);outline-width:var(--dsc-input-outline-width--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover):is(:checked,:indeterminate:where([type=checkbox])):not([aria-invalid=true]){outline-color:var(--dsc-input-outline-color--toggle--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly],[aria-readonly=true]):hover):is([aria-invalid=true]){outline-color:var(--dsc-input-accent-color--invalid)}@media (forced-colors:active){.ds-input{background-color:Canvas;border-color:ButtonText}.ds-input:disabled,.ds-input[aria-disabled=true],.ds-input[aria-readonly=true],.ds-input[readonly]{border-color:GrayText}}@supports (width:round(down,0.1em,1px)){.ds-input{border-width:round(up,var(--dsc-input-border-width),1px)}}.ds-input:not([data-size]){font-size:inherit}.ds-input:is(select){background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;padding-inline-end:2.4em;text-overflow:ellipsis}:dir(rtl) .ds-input:is(select){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}.ds-input:is(select):open{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}@media (forced-colors:active){.ds-input:is(select){-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}.ds-input:is(textarea){height:auto;min-height:calc(var(--dsc-input-size)*1.5);resize:vertical}.ds-input:is(textarea):not([rows]){field-sizing:content;height:var(--_ds-field-sizing)}.ds-input:where([type=text],[type=email],[type=tel],[type=url],[type=search]){height:unset;padding-block:calc((var(--dsc-input-size) - var(--dsc-input-line-height)*1em)/2 - var(--dsc-input-border-width))}.ds-input:not([size],[cols],select:where([data-width=auto])){width:100%}.ds-input:checked,.ds-input:indeterminate:where([type=checkbox]){background:var(--dsc-input-accent-color);border-color:var(--dsc-input-accent-color);color:var(--dsc-input-stroke-color)}.ds-input:disabled,.ds-input[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}.ds-input[aria-invalid=true]{border-color:var(--dsc-input-accent-color--invalid)}.ds-input[aria-invalid=true]:where(:checked){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[type=checkbox][aria-invalid=true]:where(:indeterminate){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[aria-readonly=true],.ds-input[readonly]{background-color:var(--dsc-input-background--readonly);border-color:var(--dsc-input-border-color--readonly);color:var(--dsc-input-color--readonly)}@media (forced-colors:active){.ds-input[aria-readonly=true],.ds-input[readonly]{border-color:GrayText}}.ds-input:-moz-read-only:not([readonly],[aria-readonly=true],[aria-disabled=true],:disabled){cursor:pointer}.ds-input:read-only:not([readonly],[aria-readonly=true],[aria-disabled=true],:disabled){cursor:pointer}.ds-input[type=checkbox],.ds-input[type=radio]{border-width:var(--dsc-input-border-width--toggle);flex-shrink:0;height:var(--dsc-input-size--toggle);line-height:inherit;padding:var(--_dsc-input-spacing--toggle);width:var(--dsc-input-size--toggle)}@media (forced-colors:active){.ds-input[type=checkbox],.ds-input[type=radio]{color:Canvas}:is(.ds-input[type=checkbox],.ds-input[type=radio]):disabled,[aria-disabled=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[aria-readonly=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[readonly]:is(.ds-input[type=checkbox],.ds-input[type=radio]){border-color:GrayText}}.ds-input[type=radio]{border-radius:var(--ds-border-radius-full)}.ds-input[type=radio]:checked{background-image:radial-gradient(circle closest-side,currentcolor 45%,transparent 50%)}@media (forced-colors:active){.ds-input[type=radio]:checked{background-color:LinkText;border-color:LinkText;color:Canvas;forced-color-adjust:none}}.ds-input[type=checkbox]{border-radius:var(--ds-border-radius-sm)}.ds-input[type=checkbox]:checked{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-origin:content-box;background-position:10% 73%,90% 50%;background-repeat:no-repeat;background-size:35% 35%,65% 65%}@media (forced-colors:active){.ds-input[type=checkbox]:checked{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[type=checkbox]:indeterminate{background-image:linear-gradient(transparent calc(48% - var(--dsc-input-stroke-width)),currentcolor calc(50% - var(--dsc-input-stroke-width)),currentcolor calc(50% + var(--dsc-input-stroke-width)),transparent calc(52% + var(--dsc-input-stroke-width)));background-origin:content-box;background-position:50%;background-repeat:no-repeat;background-size:contain}@media (forced-colors:active){.ds-input[type=checkbox]:indeterminate{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[role=switch]:is([type=radio],[type=checkbox]){--_dsc-input-circle-position:left;background-image:radial-gradient(circle closest-side,currentcolor 95%,transparent 100%);background-origin:content-box;background-position:var(--_dsc-input-circle-position);background-repeat:no-repeat;background-size:calc(var(--dsc-input-size--toggle) - var(--_dsc-input-spacing--toggle)*2) 100%;border-radius:var(--ds-border-radius-full);padding-inline:0;transition:background-position .2s;width:calc(var(--dsc-input-size--toggle)*2)}.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{--_dsc-input-circle-position:right}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{color:CanvasText}}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]){color:GrayText;forced-color-adjust:none}.ds-input[role=switch][aria-readonly=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){color:GrayText}.ds-input[role=switch]:is([type=radio],[type=checkbox]):disabled,.ds-input[role=switch][aria-disabled=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][aria-readonly=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){border-color:GrayText}}}
|
|
11
11
|
@layer ds.components{.ds-field{--dsc-field-content-spacing:var(--ds-size-2);--dsc-field-counter-over:"%d tegn for mye";--dsc-field-counter-under:"%d tegn igjen";-webkit-print-color-adjust:exact;print-color-adjust:exact}.ds-field>*{margin-block:0}.ds-field>*+*{margin-top:var(--dsc-field-content-spacing)}.ds-field [data-field=description]{color:var(
|
|
12
12
|
--ds-color-neutral-text-subtle
|
|
13
13
|
);margin-top:0;margin-block:0}.ds-field [data-field=counter]{--_ds-data-over:var(--dsc-field-counter-over);--_ds-data-under:var(--dsc-field-counter-under)}.ds-field [data-field=counter]:not([data-state=over]){color:inherit;padding-left:0}.ds-field [data-field=counter]:not([data-state=over]):before{display:none}.ds-field [data-field=counter]:after{content:attr(data-label)}.ds-field :is(label,input,select,textarea,.ds-input):where(:not([hidden])),.ds-field:not([hidden]){display:block}.ds-field:has([aria-disabled=true]:not(u-option,[role=option][aria-disabled=true]),:disabled:not(option))>*{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}:is(.ds-field:has([aria-readonly=true],[readonly]) label):before{background:currentcolor;content:"";display:inline-block;height:calc(1em*var(--ds-line-height-md));height:1lh;margin-inline-end:.25ch;-webkit-mask:center/contain no-repeat var(--ds-readonly-icon-url);mask:center/contain no-repeat var(--ds-readonly-icon-url);vertical-align:bottom;width:var(--ds-readonly-icon-size)}:is(:is(.ds-field:has([aria-readonly=true],[readonly]) label):before){-webkit-print-color-adjust:exact;print-color-adjust:exact}@media (forced-colors:active){:is(.ds-field:has([aria-readonly=true],[readonly]) label):before{background:CanvasText}}.ds-field[data-clickdelegatefor]{cursor:pointer}.ds-field:has(input:is([type=radio],[type=checkbox])){border-radius:var(--ds-border-radius-md);grid-template-areas:"input content";grid-template-columns:auto 1fr;width:-moz-fit-content;width:fit-content}.ds-field:has(input:is([type=radio],[type=checkbox])):not([hidden]){display:grid}.ds-field:has(input:is([type=radio],[type=checkbox]))>*{grid-column:content;margin-block:0}.ds-field:has(input:is([type=radio],[type=checkbox]))>:not(input){padding-inline-start:var(--dsc-field-content-spacing)}.ds-field:has(input:is([type=radio],[type=checkbox])) label{font-weight:var(--ds-font-weight-regular)}.ds-field:has(input:is([type=radio],[type=checkbox])) label:before{content:none}.ds-field:has(input:is([type=radio],[type=checkbox])) input{grid-column:input;grid-row:1}.ds-field:has(input:is([type=radio],[type=checkbox])):not(:has([readonly],[aria-disabled=true]:not(u-option),:disabled:not(option))) label{cursor:pointer}.ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible){box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible) *{--_ds--focus: }.ds-field:has(input:is([type=radio],[type=checkbox])) .ds-input:is([type=radio],[type=checkbox]):not([aria-label]){translate:0 calc(.5lh - 50%)}.ds-field[data-position=end]:has(input:is([type=radio],[type=checkbox])){grid-template-areas:"content input";grid-template-columns:1fr auto;width:auto}.ds-field[data-position=end]:has(input:is([type=radio],[type=checkbox]))>:not(input){padding-inline-end:var(--dsc-field-content-spacing);padding-inline-start:0}.ds-field-affixes{--dsc-field-affix-border-width:var(--ds-border-width-default);--dsc-field-affix-border-style:solid;--dsc-field-affix-border-color:var(--ds-color-neutral-border-default);--dsc-field-affix-padding-inline:var(--ds-size-4);background:var(--ds-color-neutral-surface-tinted);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-text-subtle);max-width:100%;white-space:nowrap}.ds-field-affixes:not([hidden]){display:flex}.ds-field-affixes:has([size]){width:-moz-fit-content;width:fit-content}.ds-field-affixes .ds-field-affix{align-items:center;border-color:var(--dsc-field-affix-border-color);border-style:var(--dsc-field-affix-border-style);border-width:var(--dsc-field-affix-border-width);flex-shrink:0;padding-inline:var(--dsc-field-affix-padding-inline)}:is(.ds-field-affixes .ds-field-affix):not([hidden]){display:flex}:is(.ds-field-affixes .ds-field-affix):first-child{border-end-start-radius:inherit;border-inline-end:0;border-start-start-radius:inherit}:is(.ds-field-affixes .ds-field-affix):last-child{border-end-end-radius:inherit;border-inline-start:0;border-start-end-radius:inherit}.ds-field-affixes .ds-input{border-style:var(--dsc-field-affix-border-style);border-width:var(--dsc-field-affix-border-width);flex:1 1 auto}:is(.ds-field-affixes .ds-input):not(:last-child){border-end-end-radius:0;border-start-end-radius:0}:is(.ds-field-affixes .ds-input):not(:first-child){border-end-start-radius:0;border-start-start-radius:0}}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
@layer ds.components{.ds-dialog{--dsc-dialog-backdrop-background:rgba(0,0,0,.5);--dsc-dialog-background:var(--ds-color-neutral-surface-default);--dsc-dialog-icon-spacing:var(--ds-size-3);--dsc-dialog-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-dialog-color:var(--ds-color-neutral-text-default);--dsc-dialog-divider-border-width:var(--ds-border-width-default);--dsc-dialog-divider-border-style:solid;--dsc-dialog-divider-border-color:var(--ds-color-neutral-border-subtle);--dsc-dialog-border-width:var(--ds-border-width-default);--dsc-dialog-border-style:solid;--dsc-dialog-border-color:var(--ds-color-neutral-border-subtle);--dsc-dialog-max-height:80vh;--dsc-dialog-max-width:40rem;--dsc-dialog-spacing:var(--ds-size-6);--dsc-dialog-placement-inline-max-width:40rem;--dsc-dialog-placement-block-max-width:100%;--dsc-dialog-transition-duration:300ms;--_dsc-dialog-icon-top-right-margin:calc(var(--dsc-dialog-spacing)*-1 + var(--dsc-dialog-icon-spacing));background:var(--dsc-dialog-background);border-color:var(--dsc-dialog-border-color);border-radius:clamp(0px,((100vw - 4px) - 100%) * 100000,var(--ds-border-radius-lg));border-style:var(--dsc-dialog-border-style);border-width:var(--dsc-dialog-border-width);box-shadow:var(--ds-shadow-xl);box-sizing:border-box;color:var(--dsc-dialog-color);inset:0;margin:auto;max-height:var(--dsc-dialog-max-height);max-width:var(--dsc-dialog-max-width);overflow:auto;overscroll-behavior:contain;padding:var(--dsc-dialog-spacing);position:fixed;width:100%}.ds-dialog::backdrop{animation:ds-dialog-fade-in var(--dsc-dialog-transition-duration) ease-in-out;background:var(--dsc-dialog-backdrop-background,rgba(0,0,0,.5));overflow:hidden;overscroll-behavior:contain}.ds-dialog:where([data-placement=bottom],[data-placement=top]){margin-inline:auto;max-width:var(--dsc-dialog-placement-block-max-width);width:100%}.ds-dialog:where([data-placement=left],[data-placement=right]){border-block-width:0;border-radius:0;height:100%;height:-webkit-fill-available;height:-moz-available;height:stretch;max-height:unset;max-width:var(--dsc-dialog-placement-inline-max-width)}.ds-dialog[data-placement=bottom]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:0;top:auto}.ds-dialog[data-placement=top]{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;bottom:auto}.ds-dialog[data-placement=left]{border-left-width:0;right:auto}.ds-dialog[data-placement=right]{border-right-width:0;left:auto}.ds-dialog[open]{animation:ds-dialog-slide-up var(--dsc-dialog-transition-duration) ease-in-out,ds-dialog-fade-in var(--dsc-dialog-transition-duration) ease-in-out}.ds-dialog[open][data-placement=bottom]{animation:ds-dialog-slide-up var(--dsc-dialog-transition-duration) ease}.ds-dialog[open][data-placement=top]{animation:ds-dialog-slide-down var(--dsc-dialog-transition-duration) ease}.ds-dialog[open][data-placement=left]{animation:ds-dialog-slide-left var(--dsc-dialog-transition-duration) ease}.ds-dialog[open][data-placement=right]{animation:ds-dialog-slide-right var(--dsc-dialog-transition-duration) ease}.ds-dialog:has(>.ds-dialog__block){--_dsc-dialog-icon-top-right-margin:var(--dsc-dialog-icon-spacing);padding:0}@media (prefers-reduced-motion:reduce){.ds-dialog::backdrop,.ds-dialog[open]{animation:none}}.ds-dialog button[command=close]:empty:before,.ds-dialog button[data-command=close]:empty:before{background:currentcolor;content:"";height:var(--ds-size-6);-webkit-mask:center/contain no-repeat var(--dsc-dialog-icon-url);mask:center/contain no-repeat var(--dsc-dialog-icon-url);width:var(--ds-size-6)}@media (forced-colors:active){.ds-dialog button[command=close]:empty:before,.ds-dialog button[data-command=close]:empty:before{background:ButtonText}}.ds-dialog>button[command=close]:first-child,.ds-dialog>button[data-command=close]:first-child{color:inherit;float:inline-end;margin-block-end:var(--dsc-dialog-icon-spacing);margin-block-start:var(--_dsc-dialog-icon-top-right-margin);margin-inline-end:var(--_dsc-dialog-icon-top-right-margin);margin-inline-start:var(--dsc-dialog-icon-spacing)}.ds-dialog>form[method=dialog]:first-child>button:only-child{color:inherit;float:inline-end;margin-block-end:var(--dsc-dialog-icon-spacing);margin-block-start:var(--_dsc-dialog-icon-top-right-margin);margin-inline-end:var(--_dsc-dialog-icon-top-right-margin);margin-inline-start:var(--dsc-dialog-icon-spacing)}:is(.ds-dialog>form[method=dialog]:first-child>button:only-child):before{background:currentcolor;content:"";height:var(--ds-size-6);-webkit-mask:center/contain no-repeat var(--dsc-dialog-icon-url);mask:center/contain no-repeat var(--dsc-dialog-icon-url);width:var(--ds-size-6)}@media (forced-colors:active){:is(.ds-dialog>form[method=dialog]:first-child>button:only-child):before{background:ButtonText}}.ds-dialog__block{padding:var(--dsc-dialog-spacing)}.ds-dialog__block+.ds-dialog__block{border-top:var(--dsc-dialog-divider-border-width) var(--dsc-dialog-divider-border-style) var(--dsc-dialog-divider-border-color)}body:has(.ds-dialog:modal){overflow:hidden}@keyframes ds-dialog-fade-in{0%{opacity:0}}@keyframes ds-dialog-slide-up{0%{opacity:0;translate:0 3rem}}@keyframes ds-dialog-slide-down{0%{opacity:0;translate:0 -3rem}}@keyframes ds-dialog-slide-left{0%{opacity:0;translate:-3rem 0}}@keyframes ds-dialog-slide-right{0%{opacity:0;translate:3rem 0}}}
|
|
23
23
|
@layer ds.components{.ds-list{--dsc-list-padding-inline:var(--ds-size-6) 0;--dsc-list-margin-top:var(--ds-size-3);--dsc-list-margin-top-nested:var(--ds-size-2);margin:0;padding-inline:var(--dsc-list-padding-inline)}.ds-list>li+li{margin-top:var(--dsc-list-margin-top)}.ds-list>li>:is(ol,ul)>li+li{margin-top:var(--dsc-list-margin-top-nested)}.ds-list>li:before{content:"\200B";position:absolute}}
|
|
24
24
|
@layer ds.components{.ds-card{--dsc-card-background--active:var(--ds-color-surface-active);--dsc-card-background--hover:var(--ds-color-surface-hover);--dsc-card-background:var(--ds-color-surface-default);--dsc-card-border-width:var(--ds-border-width-default);--dsc-card-border-style:solid;--dsc-card-border-color:var(--ds-color-border-subtle);--dsc-card-block-border-width:var(--dsc-card-border-width);--dsc-card-block-border-style:var(--dsc-card-border-style);--dsc-card-block-border-color:var(--dsc-card-border-color);--dsc-card-color:var(--ds-color-text-default);--dsc-card-content-margin-block:var(--ds-size-3) 0;--dsc-card-padding:var(--ds-size-6);--dsc-card-border-radius:var(--ds-border-radius-lg);background:var(--dsc-card-background);border-color:var(--dsc-card-border-color);border-radius:var(--dsc-card-border-radius);border-style:var(--dsc-card-border-style);border-width:var(--dsc-card-border-width);box-sizing:border-box;color:var(--dsc-card-color);font:inherit;margin:0;overflow:clip;padding:var(--dsc-card-padding);text-align:inherit}.ds-card[data-variant=default]{background:var(--ds-color-surface-default)}.ds-card[data-variant=tinted]{background:var(--ds-color-surface-tinted)}.ds-card:not([hidden]){display:block}.ds-card:where(a,button,[role=button],[data-clickdelegatefor]){cursor:pointer;text-decoration:none}.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>.ds-card__block>:is(h1,h2,h3,h4,h5,h6),.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>:is(h1,h2,h3,h4,h5,h6){text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:.0625em;text-underline-offset:.27em}:is(.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>:is(h1,h2,h3,h4,h5,h6),.ds-card:where(a,button,[role=button],[data-clickdelegatefor])>.ds-card__block>:is(h1,h2,h3,h4,h5,h6))>a{color:inherit;text-decoration:none}@media (hover:hover) and (pointer:fine){.ds-card:where(a,button,[role=button]):hover,.ds-card[data-clickdelegatefor]:has(.\:click-delegate-hover){background:var(--dsc-card-background--hover)}:is(.ds-card:where(a,button,[role=button]):hover,.ds-card[data-clickdelegatefor]:has(.\:click-delegate-hover)):active{background:var(--dsc-card-background--active)}}.ds-card:has(>.ds-card__block,>.ds-details){padding:0}.ds-card>.ds-details:first-child{border-top:0}:is(.ds-card>.ds-details:first-child)>summary,:is(.ds-card>.ds-details:first-child)>u-summary{border-top-left-radius:var(--dsc-card-border-radius);border-top-right-radius:var(--dsc-card-border-radius)}.ds-card>.ds-details:last-child{border-bottom:0}:is(.ds-card>.ds-details:last-child):not([open])>summary,:is(.ds-card>.ds-details:last-child):not([open])>u-summary{border-bottom-left-radius:var(--dsc-card-border-radius);border-bottom-right-radius:var(--dsc-card-border-radius)}:where(.ds-card,.ds-card__block)>:first-child{margin-block:0}:where(.ds-card,.ds-card__block)>*+*{margin-block:var(--dsc-card-content-margin-block)}.ds-card__block{box-sizing:border-box;margin:0;padding:var(--dsc-card-padding);position:relative}.ds-card__block:before{border-color:var(--dsc-card-block-border-color);border-top-style:var(--dsc-card-block-border-style);border-top-width:var(--dsc-card-block-border-width);content:"";inset:0 0 auto;position:absolute;translate:0 -100%}.ds-card__block:after{border-color:var(--dsc-card-block-border-color);border-left-style:var(--dsc-card-block-border-style);border-left-width:var(--dsc-card-block-border-width);content:"";inset:0 auto 0 0;position:absolute;translate:-100%}.ds-card__block:has(>:is(audio,figure,iframe,img,picture,video):only-child){padding:0}.ds-card__block:has(>:is(audio,figure,iframe,img,picture,video):only-child)>:not([hidden]),.ds-card__block:has(>:is(audio,figure,iframe,img,picture,video):only-child)>picture img:not([hidden]){border:0;display:block;height:auto;width:100%}.ds-card__block:has(>:is(audio,figure,iframe,img,picture,video):only-child)>iframe{aspect-ratio:16/9}}
|
|
25
|
-
@layer ds.components{.ds-dropdown{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}.ds-dropdown:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:"";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}.ds-dropdown[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}.ds-dropdown{--_ds-floating:var(--dsc-dropdown-placement);--_ds-floating-arrow-size:var(--dsc-dropdown-arrow-size);--_ds-floating-arrow-visibility:hidden;--dsc-dropdown-padding:var(--ds-size-3) var(--ds-size-2);--dsc-dropdown-item-padding:var(--ds-size-2) var(--ds-size-4);--dsc-dropdown-item-size:var(--ds-size-12);--dsc-dropdown-background:var(--ds-color-neutral-surface-default);--dsc-dropdown-border-width:var(--ds-border-width-default);--dsc-dropdown-border-style:solid;--dsc-dropdown-border-color:var(--ds-color-neutral-border-subtle);--dsc-dropdown-placement:bottom;--dsc-dropdown-arrow-size:var(--ds-size-2);background:var(--dsc-dropdown-background);border-color:var(--dsc-dropdown-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-dropdown-border-style);border-width:var(--dsc-dropdown-border-width);box-sizing:border-box;list-style:none;min-width:15em;padding:var(--dsc-dropdown-padding);&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}.ds-dropdown
|
|
25
|
+
@layer ds.components{.ds-dropdown{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}.ds-dropdown:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:"";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}.ds-dropdown[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}.ds-dropdown{--_ds-floating:var(--dsc-dropdown-placement);--_ds-floating-arrow-size:var(--dsc-dropdown-arrow-size);--_ds-floating-arrow-visibility:hidden;--dsc-dropdown-padding:var(--ds-size-3) var(--ds-size-2);--dsc-dropdown-item-padding:var(--ds-size-2) var(--ds-size-4);--dsc-dropdown-item-size:var(--ds-size-12);--dsc-dropdown-background:var(--ds-color-neutral-surface-default);--dsc-dropdown-border-width:var(--ds-border-width-default);--dsc-dropdown-border-style:solid;--dsc-dropdown-border-color:var(--ds-color-neutral-border-subtle);--dsc-dropdown-placement:bottom;--dsc-dropdown-arrow-size:var(--ds-size-2);background:var(--dsc-dropdown-background);border-color:var(--dsc-dropdown-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-dropdown-border-style);border-width:var(--dsc-dropdown-border-width);box-sizing:border-box;list-style:none;min-width:15em;padding:var(--dsc-dropdown-padding);&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}.ds-dropdown>:is(h2,h3,h4,h5,h6){align-items:center;box-sizing:border-box;color:var(--ds-color-neutral-text-default);font-size:inherit;font-weight:var(--ds-font-weight-medium);margin:0;min-height:var(--dsc-dropdown-item-size);padding:var(--dsc-dropdown-item-padding)}:is(.ds-dropdown>:is(h2,h3,h4,h5,h6)):not([hidden]){display:flex}.ds-dropdown>ul{list-style:none;margin:0;padding:0}.ds-dropdown>ul>li>:is(a,button,[role=button]){font-weight:var(--ds-font-weight-regular);justify-content:start;min-height:var(--dsc-dropdown-item-size);padding:var(--dsc-dropdown-item-padding);width:100%}}
|
|
26
26
|
@layer ds.components{.ds-chip{--dsc-chip-background:var(--ds-color-surface-tinted);--dsc-chip-background--hover:var(--ds-color-surface-hover);--dsc-chip-background--active:var(--ds-color-surface-active);--dsc-chip-background--checked:var(--ds-color-base-default);--dsc-chip-background--checked--hover:var(--ds-color-base-hover);--dsc-chip-background--checked--active:var(--ds-color-base-active);--dsc-chip-border-width:var(--ds-border-width-default);--dsc-chip-border-style:solid;--dsc-chip-border-color:var(--ds-color-border-subtle);--dsc-chip-border-color--checked:transparent;--dsc-chip-color:var(--ds-color-text-default);--dsc-chip-input-accent-color:var(--ds-color-base-contrast-default);--dsc-chip-input-color:var(--ds-color-text-subtle);--dsc-chip-input-stroke-color:var(--ds-color-base-default);--dsc-chip-border-radius:var(--ds-border-radius-full);--dsc-chip-border-radius--checkbox:var(--ds-border-radius-md);--dsc-chip-border-radius--checkbox-input:var(--ds-border-radius-sm);--dsc-chip-height:var(--ds-size-8);--dsc-chip-icon-size:var(--ds-size-7);--dsc-chip-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-chip-input-size:var(--ds-size-5);--dsc-chip-spacing:calc((var(--dsc-chip-height) - var(--dsc-chip-input-size))/2);align-items:center;background:var(--dsc-chip-background);border-color:var(--dsc-chip-border-color);border-radius:var(--dsc-chip-border-radius);border-style:var(--dsc-chip-border-style);border-width:var(--dsc-chip-border-width);box-sizing:border-box;color:var(--dsc-chip-color);cursor:pointer;font-family:inherit;font-size:var(--ds-body-sm-font-size);gap:var(--dsc-chip-spacing);line-height:var(--ds-line-height-sm);margin:0;max-height:-moz-fit-content;max-height:fit-content;max-width:-moz-fit-content;max-width:fit-content;min-height:var(--dsc-chip-height);padding:0 var(--ds-size-3);-webkit-print-color-adjust:exact;print-color-adjust:exact;text-decoration:none}.ds-chip:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-chip:focus-visible *{--_ds--focus: }.ds-chip>input{--dsc-input-background:transparent;--dsc-input-border-color:var(--dsc-chip-input-color);--dsc-input-accent-color:var(--dsc-chip-input-accent-color);--dsc-input-stroke-color:var(--dsc-chip-input-stroke-color);--dsc-input-size--toggle:var(--dsc-chip-input-size);--dsc-input-outline-width--hover:0}.ds-chip:not([hidden]){display:inline-flex}.ds-chip:has(:focus-visible){box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-chip:has(:focus-visible) *{--_ds--focus: }.ds-chip:disabled,.ds-chip:has(input:disabled),.ds-chip[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}.ds-chip[data-removable]{padding-inline-end:var(--dsc-chip-spacing)}.ds-chip[data-removable]:after{background:currentcolor;content:"";height:var(--dsc-chip-icon-size);-webkit-mask:center/contain no-repeat var(--dsc-chip-icon-url);mask:center/contain no-repeat var(--dsc-chip-icon-url);padding-inline:0;width:var(--dsc-chip-icon-size)}.ds-chip:has(input[type=radio]){padding-inline-start:var(--dsc-chip-spacing)}.ds-chip:has(input[type=checkbox]){border-radius:var(--dsc-chip-border-radius--checkbox);padding-inline:var(--dsc-chip-spacing)}.ds-chip:has(input[type=checkbox])>input{border-radius:var(--dsc-chip-border-radius--checkbox-input)}.ds-chip:has(input:checked),.ds-chip[data-removable]{background:var(--dsc-chip-background--checked);border-color:var(--dsc-chip-border-color--checked);color:var(--dsc-chip-input-accent-color)}@media (hover:hover) and (pointer:fine){.ds-chip:not(:has(:disabled,[aria-disabled=true])):hover{background:var(--dsc-chip-background--hover)}.ds-chip:not(:has(:disabled,[aria-disabled=true])):active{background:var(--dsc-chip-background--active)}:is(.ds-chip:not(:has(:disabled,[aria-disabled=true])):has(input:checked),.ds-chip[data-removable]:not(:has(:disabled,[aria-disabled=true]))):hover{background:var(--dsc-chip-background--checked--hover)}:is(.ds-chip:not(:has(:disabled,[aria-disabled=true])):has(input:checked),.ds-chip[data-removable]:not(:has(:disabled,[aria-disabled=true]))):active{background:var(--dsc-chip-background--checked--active)}}}
|
|
27
27
|
@layer ds.components{.ds-divider{--dsc-divider-border-width:var(--ds-border-width-default);--dsc-divider-border-style:solid;--dsc-divider-border-color:var(--ds-color-neutral-border-subtle);border-color:var(--dsc-divider-border-color);border-top-style:var(--dsc-divider-border-style);border-width:0;border-top-width:var(--dsc-divider-border-width);box-sizing:border-box;margin-block:.5em;width:100%}.ds-tabs{--dsc-tabs-tab-padding:var(--ds-size-3) var(--ds-size-5);--dsc-tabs-tab-color:var(--ds-color-neutral-text-subtle);--dsc-tabs-tab-color--hover:var(--ds-color-neutral-text-default);--dsc-tabs-tab-color--selected:var(--ds-color-text-subtle);--dsc-tabs-content-padding:var(--ds-size-4) var(--ds-size-5);--dsc-tabs-list-border-color:var(--ds-color-neutral-border-subtle);--dsc-tabs-list-border-bottom-width:var(--ds-border-width-default);--dsc-tabs-list-border-bottom-style:solid}}
|
|
28
28
|
@layer ds.components{.ds-tabs :is([role=tabpanel],.ds-tabs ds-tabpanel,.ds-tabs u-tabpanel){padding:var(--dsc-tabs-content-padding)}:is(.ds-tabs :is([role=tabpanel],.ds-tabs ds-tabpanel,.ds-tabs u-tabpanel)):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}:is(.ds-tabs :is([role=tabpanel],.ds-tabs ds-tabpanel,.ds-tabs u-tabpanel)):focus-visible *{--_ds--focus: }.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist){border-bottom-style:var(--dsc-tabs-list-border-bottom-style);border-bottom-width:var(--dsc-tabs-list-border-bottom-width);border-color:var(--dsc-tabs-list-border-color);flex-direction:row;overflow-x:auto;position:relative}:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist)):not([hidden]){display:flex}:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab){align-items:center;background:none;border:0;box-sizing:border-box;color:var(--dsc-tabs-tab-color);cursor:pointer;flex-direction:row;font-family:inherit;font-size:inherit;gap:var(--ds-size-1);justify-content:center;line-height:var(--ds-line-height-sm);margin:0;padding:var(--dsc-tabs-tab-padding);position:relative;text-align:center;white-space:nowrap;--_ds-captured-length:1em}:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow-inset));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:calc(var(--_ds--focus, var(--ds-border-width-focus))*-1)}:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):focus-visible *{--_ds--focus: }:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):not([hidden]){display:flex}:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):not([data-size]){font-size:inherit}:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)) :where(img,svg){flex-shrink:0;font-size:calc(var(--_ds-captured-length)*1.25)}:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):after{bottom:0;content:"";display:block;height:.15em;left:0;position:absolute;width:100%}[aria-selected=true]:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)){color:var(--dsc-tabs-tab-color--selected)}[aria-selected=true]:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):after{background:var(--dsc-tabs-tab-color--selected)}[aria-selected=true]:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):focus-visible:after{z-index:-1}@media (forced-colors:active){[aria-selected=true]:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)){border-bottom:2px solid CanvasText;color:CanvasText}}:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):focus-visible{z-index:2}@media (hover:hover) and (pointer:fine){:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):hover:not([aria-selected=true]){color:var(--dsc-tabs-tab-color--hover)}:is(:is(.ds-tabs :is([role=tablist],.ds-tabs ds-tablist,.ds-tabs u-tablist))>:is([role=tab],ds-tab,u-tab)):hover:not([aria-selected=true]):after{background:var(--dsc-tabs-list-border-color)}}}
|
|
@@ -74,8 +74,10 @@
|
|
|
74
74
|
/* Don't apply when inside Pagination.
|
|
75
75
|
Pagination currently has mixed docs of either setting data-variant="primary" on Pagination.Button
|
|
76
76
|
or keeping it as tertiary (returned from usePagination). If this is changed upstream we can simplify this selector.
|
|
77
|
+
|
|
78
|
+
Also don't apply when inside ToggleGroup, which uses <label class="ds-button" data-variant="tertiary">
|
|
77
79
|
*/
|
|
78
|
-
.ds-pagination .ds-button[data-variant="tertiary"]
|
|
80
|
+
:is(.ds-pagination, .ds-toggle-group) .ds-button[data-variant="tertiary"]
|
|
79
81
|
) {
|
|
80
82
|
/** Text **/
|
|
81
83
|
--dsc-button-color: var(--ds-color-text-default);
|
|
@@ -92,7 +94,7 @@
|
|
|
92
94
|
text-decoration: none;
|
|
93
95
|
}
|
|
94
96
|
|
|
95
|
-
.ds-button[data-variant="tertiary"]:not(.ds-pagination .ds-button[data-variant="tertiary"]):hover:not([disabled]),.ds-button[data-variant="tertiary"]:not(.ds-pagination .ds-button[data-variant="tertiary"]):active:not([disabled]) {
|
|
97
|
+
.ds-button[data-variant="tertiary"]:not(:is(.ds-pagination,.ds-toggle-group) .ds-button[data-variant="tertiary"]):hover:not([disabled]),.ds-button[data-variant="tertiary"]:not(:is(.ds-pagination,.ds-toggle-group) .ds-button[data-variant="tertiary"]):active:not([disabled]) {
|
|
96
98
|
-webkit-text-decoration: underline 2px;
|
|
97
99
|
text-decoration: underline 2px;
|
|
98
100
|
text-underline-offset: 6px; /** Hack to prevent us from having to create our own button component just to support underline on hover. */
|
|
@@ -464,7 +466,6 @@
|
|
|
464
466
|
|
|
465
467
|
@media (max-width: 48rem) {
|
|
466
468
|
.at-header {
|
|
467
|
-
height: var(--ds-size-18);
|
|
468
469
|
margin: 0;
|
|
469
470
|
padding: var(--ds-size-2) var(--ds-size-4);
|
|
470
471
|
}
|
|
@@ -474,13 +475,7 @@
|
|
|
474
475
|
|
|
475
476
|
.ds-link:has(.at-header__left) {
|
|
476
477
|
height: 100%;
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
.at-header__left {
|
|
480
|
-
height: 100%;
|
|
481
|
-
margin-right: 0;
|
|
482
|
-
flex-shrink: 0;
|
|
483
|
-
align-items: flex-end;
|
|
478
|
+
align-self: flex-end;
|
|
484
479
|
}
|
|
485
480
|
|
|
486
481
|
.at-header__center {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arbeidstilsynet/design-css",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.3",
|
|
4
4
|
"description": "CSS for Designsystemet",
|
|
5
5
|
"author": "Arbeidstilsynet",
|
|
6
6
|
"repository": {
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
"dist"
|
|
26
26
|
],
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@digdir/designsystemet-css": "1.13.
|
|
28
|
+
"@digdir/designsystemet-css": "1.13.1"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@types/node": "24.12.
|
|
31
|
+
"@types/node": "24.12.2",
|
|
32
32
|
"autoprefixer": "10.4.27",
|
|
33
|
-
"cssnano": "7.1.
|
|
33
|
+
"cssnano": "7.1.4",
|
|
34
34
|
"del-cli": "7.0.0",
|
|
35
35
|
"postcss": "8.5.8",
|
|
36
36
|
"postcss-cli": "11.0.1",
|