UNPKG

@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
: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); }