@spectrum-web-components/styles
Version:
Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library of patterns built on top of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are ma
148 lines (147 loc) • 10.2 kB
CSS
:root,
:host {
--spectrum-global-dimension-scale-factor: 1.25;
--spectrum-global-dimension-size-0: 0px;
--spectrum-global-dimension-size-10: 1px;
--spectrum-global-dimension-size-25: 2px;
--spectrum-global-dimension-size-30: 3px;
--spectrum-global-dimension-size-40: 4px;
--spectrum-global-dimension-size-50: 5px;
--spectrum-global-dimension-size-65: 6px;
--spectrum-global-dimension-size-75: 8px;
--spectrum-global-dimension-size-85: 9px;
--spectrum-global-dimension-size-100: 10px;
--spectrum-global-dimension-size-115: 11px;
--spectrum-global-dimension-size-125: 13px;
--spectrum-global-dimension-size-130: 14px;
--spectrum-global-dimension-size-150: 15px;
--spectrum-global-dimension-size-160: 16px;
--spectrum-global-dimension-size-175: 18px;
--spectrum-global-dimension-size-185: 19px;
--spectrum-global-dimension-size-200: 20px;
--spectrum-global-dimension-size-225: 22px;
--spectrum-global-dimension-size-250: 25px;
--spectrum-global-dimension-size-275: 28px;
--spectrum-global-dimension-size-300: 30px;
--spectrum-global-dimension-size-325: 32px;
--spectrum-global-dimension-size-350: 35px;
--spectrum-global-dimension-size-400: 40px;
--spectrum-global-dimension-size-450: 45px;
--spectrum-global-dimension-size-500: 50px;
--spectrum-global-dimension-size-550: 56px;
--spectrum-global-dimension-size-600: 60px;
--spectrum-global-dimension-size-650: 65px;
--spectrum-global-dimension-size-675: 68px;
--spectrum-global-dimension-size-700: 70px;
--spectrum-global-dimension-size-750: 75px;
--spectrum-global-dimension-size-800: 80px;
--spectrum-global-dimension-size-900: 90px;
--spectrum-global-dimension-size-1000: 100px;
--spectrum-global-dimension-size-1125: 112px;
--spectrum-global-dimension-size-1200: 120px;
--spectrum-global-dimension-size-1250: 125px;
--spectrum-global-dimension-size-1600: 160px;
--spectrum-global-dimension-size-1700: 170px;
--spectrum-global-dimension-size-1800: 180px;
--spectrum-global-dimension-size-2000: 200px;
--spectrum-global-dimension-size-2400: 240px;
--spectrum-global-dimension-size-2500: 250px;
--spectrum-global-dimension-size-3000: 300px;
--spectrum-global-dimension-size-3400: 340px;
--spectrum-global-dimension-size-3600: 360px;
--spectrum-global-dimension-size-4600: 460px;
--spectrum-global-dimension-size-5000: 500px;
--spectrum-global-dimension-size-6000: 600px;
--spectrum-global-dimension-font-size-25: 12px;
--spectrum-global-dimension-font-size-50: 13px;
--spectrum-global-dimension-font-size-75: 15px;
--spectrum-global-dimension-font-size-100: 17px;
--spectrum-global-dimension-font-size-150: 18px;
--spectrum-global-dimension-font-size-200: 19px;
--spectrum-global-dimension-font-size-300: 22px;
--spectrum-global-dimension-font-size-400: 24px;
--spectrum-global-dimension-font-size-500: 27px;
--spectrum-global-dimension-font-size-600: 31px;
--spectrum-global-dimension-font-size-700: 34px;
--spectrum-global-dimension-font-size-800: 39px;
--spectrum-global-dimension-font-size-900: 44px;
--spectrum-global-dimension-font-size-1000: 49px;
--spectrum-global-dimension-font-size-1100: 55px;
--spectrum-global-dimension-font-size-1200: 62px;
--spectrum-global-dimension-font-size-1300: 70px;
--spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-85);
--spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-item-rounded-workflow-padding-left-m: 17px;
--spectrum-alias-item-rounded-workflow-padding-left-xl: 27px;
--spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-85);
--spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-85);
--spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-160);
--spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-160);
--spectrum-alias-item-control-3-width-s: var(--spectrum-global-dimension-size-325);
--spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-450);
--spectrum-alias-item-control-3-width-l: 41px;
--spectrum-alias-item-control-3-width-xl: 46px;
--spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-static-size-325);
--spectrum-alias-component-focusring-border-radius: var(--spectrum-alias-focus-ring-border-radius-regular);
--spectrum-alias-focus-ring-border-radius-small: var(--spectrum-global-dimension-size-75);
--spectrum-alias-focus-ring-border-radius-regular: 12px;
--spectrum-alias-control-three-width-m: 34px;
--spectrum-alias-control-three-width-l: 38px;
--spectrum-alias-control-three-width-xl: var(--spectrum-global-dimension-static-size-550);
--spectrum-alias-tag-text-padding-top-s: var(--spectrum-global-dimension-size-40);
--spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-275);
--spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-115);
--spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-300);
--spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-175);
--spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-200);
--spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-200);
--spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-225);
--spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-250);
--spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-175);
--spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-200);
--spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-200);
--spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-225);
--spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-250);
--spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-300);
--spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-125);
--spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-125);
--spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-175);
--spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-200);
--spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-225);
--spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-250);
--spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-275);
--spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-125);
--spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-125);
--spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-175);
--spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-200);
--spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-200);
--spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-225);
--spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-175);
--spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-200);
--spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-200);
--spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-225);
--spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-275);
--spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-300);
--spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-175);
--spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-75);
--spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-50);
--spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-85);
--spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-100);
--spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-150);
--spectrum-alias-avatar-size-100: 26px;
--spectrum-alias-avatar-size-400: 36px;
--spectrum-alias-avatar-size-600: 46px;
--spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-xs-text-size);
--spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-75);
}