@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
281 lines (280 loc) • 11.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-colorwheel-min-width: var(
--spectrum-global-dimension-static-size-2600
);
--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
);
}