@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
230 lines (227 loc) • 11.6 kB
CSS
/*
Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
:host,
:root {
--spectrum-component-pill-edge-to-visual-75: 13px;
--spectrum-component-pill-edge-to-visual-100: 17px;
--spectrum-component-pill-edge-to-visual-200: 22px;
--spectrum-component-pill-edge-to-visual-300: 27px;
--spectrum-component-pill-edge-to-visual-only-75: 5px;
--spectrum-component-pill-edge-to-visual-only-100: 9px;
--spectrum-component-pill-edge-to-visual-only-200: 13px;
--spectrum-component-pill-edge-to-visual-only-300: 16px;
--spectrum-component-pill-edge-to-text-75: 15px;
--spectrum-component-pill-edge-to-text-100: 20px;
--spectrum-component-pill-edge-to-text-200: 25px;
--spectrum-component-pill-edge-to-text-300: 30px;
--spectrum-component-edge-to-visual-50: 7px;
--spectrum-component-edge-to-visual-75: 9px;
--spectrum-component-edge-to-visual-100: 12px;
--spectrum-component-edge-to-visual-200: 16px;
--spectrum-component-edge-to-visual-300: 19px;
--spectrum-component-edge-to-visual-only-50: 4px;
--spectrum-component-edge-to-visual-only-75: 5px;
--spectrum-component-edge-to-visual-only-100: 9px;
--spectrum-component-edge-to-visual-only-200: 13px;
--spectrum-component-edge-to-visual-only-300: 16px;
--spectrum-component-edge-to-text-50: 10px;
--spectrum-component-edge-to-text-75: 11px;
--spectrum-component-edge-to-text-100: 15px;
--spectrum-component-edge-to-text-200: 19px;
--spectrum-component-edge-to-text-300: 22px;
--spectrum-component-height-50: 26px;
--spectrum-component-height-75: 30px;
--spectrum-component-height-100: 40px;
--spectrum-component-height-200: 50px;
--spectrum-component-height-300: 60px;
--spectrum-component-top-to-workflow-icon-50: 4px;
--spectrum-component-top-to-workflow-icon-75: 5px;
--spectrum-component-top-to-workflow-icon-100: 9px;
--spectrum-component-top-to-workflow-icon-200: 13px;
--spectrum-component-top-to-workflow-icon-300: 16px;
--spectrum-component-top-to-text-50: 4px;
--spectrum-component-top-to-text-75: 5px;
--spectrum-component-top-to-text-100: 8px;
--spectrum-component-top-to-text-200: 12px;
--spectrum-component-top-to-text-300: 15px;
--spectrum-component-bottom-to-text-50: 6px;
--spectrum-component-bottom-to-text-75: 6px;
--spectrum-component-bottom-to-text-100: 11px;
--spectrum-component-bottom-to-text-200: 14px;
--spectrum-component-bottom-to-text-300: 18px;
--spectrum-component-to-menu-small: 7px;
--spectrum-component-to-menu-medium: 8px;
--spectrum-component-to-menu-large: 9px;
--spectrum-component-to-menu-extra-large: 10px;
--spectrum-action-bar-height: 56px;
--spectrum-action-bar-top-to-item-counter: 16px;
--spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
--spectrum-action-button-edge-to-hold-icon-small: 3px;
--spectrum-action-button-edge-to-hold-icon-medium: 5px;
--spectrum-action-button-edge-to-hold-icon-large: 6px;
--spectrum-action-button-edge-to-hold-icon-extra-large: 7px;
--spectrum-field-label-text-to-asterisk-small: 5px;
--spectrum-field-label-text-to-asterisk-medium: 5px;
--spectrum-field-label-text-to-asterisk-large: 6px;
--spectrum-field-label-text-to-asterisk-extra-large: 6px;
--spectrum-field-label-top-to-asterisk-small: 11px;
--spectrum-field-label-top-to-asterisk-medium: 15px;
--spectrum-field-label-top-to-asterisk-large: 19px;
--spectrum-field-label-top-to-asterisk-extra-large: 24px;
--spectrum-field-label-top-margin-small: 0px;
--spectrum-field-label-top-margin-medium: 5px;
--spectrum-field-label-top-margin-large: 5px;
--spectrum-field-label-top-margin-extra-large: 5px;
--spectrum-field-label-to-component-quiet-small: -10px;
--spectrum-field-label-to-component-quiet-medium: -10px;
--spectrum-field-label-to-component-quiet-large: -15px;
--spectrum-field-label-to-component-quiet-extra-large: -19px;
--spectrum-help-text-top-to-workflow-icon-small: 5px;
--spectrum-help-text-top-to-workflow-icon-medium: 4px;
--spectrum-help-text-top-to-workflow-icon-large: 8px;
--spectrum-help-text-top-to-workflow-icon-extra-large: 11px;
--spectrum-in-line-alert-minimum-width: 360px;
--spectrum-menu-item-edge-to-content-not-selected-small: 24px;
--spectrum-menu-item-edge-to-content-not-selected-medium: 42px;
--spectrum-menu-item-edge-to-content-not-selected-large: 47px;
--spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px;
--spectrum-menu-item-top-to-disclosure-icon-small: 9px;
--spectrum-menu-item-top-to-disclosure-icon-medium: 13px;
--spectrum-menu-item-top-to-disclosure-icon-large: 17px;
--spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px;
--spectrum-meter-default-width: 240px;
--spectrum-meter-thickness-small: 5px;
--spectrum-meter-thickness-medium: 8px;
--spectrum-swatch-size-extra-small: 20px;
--spectrum-swatch-size-small: 30px;
--spectrum-swatch-size-medium: 40px;
--spectrum-swatch-size-large: 50px;
--spectrum-progress-bar-thickness-small: 5px;
--spectrum-progress-bar-thickness-medium: 8px;
--spectrum-progress-bar-thickness-large: 10px;
--spectrum-progress-bar-thickness-extra-large: 13px;
--spectrum-progress-circle-size-small: 20px;
--spectrum-progress-circle-size-medium: 40px;
--spectrum-progress-circle-size-large: 80px;
--spectrum-progress-circle-thickness-small: 3px;
--spectrum-progress-circle-thickness-medium: 4px;
--spectrum-progress-circle-thickness-large: 5px;
--spectrum-status-light-dot-size-small: 8px;
--spectrum-status-light-dot-size-medium: 10px;
--spectrum-status-light-dot-size-large: 12px;
--spectrum-status-light-dot-size-extra-large: 12px;
--spectrum-status-light-top-to-dot-small: 11px;
--spectrum-status-light-top-to-dot-medium: 15px;
--spectrum-status-light-top-to-dot-large: 19px;
--spectrum-status-light-top-to-dot-extra-large: 24px;
--spectrum-toast-height: 56px;
--spectrum-toast-top-to-workflow-icon: 17px;
--spectrum-toast-top-to-text: 16px;
--spectrum-toast-bottom-to-text: 19px;
--spectrum-tooltip-tip-width: 10px;
--spectrum-tooltip-tip-height: 5px;
--spectrum-tooltip-maximum-width: 200px;
--spectrum-tag-top-to-avatar-small: 5px;
--spectrum-tag-top-to-avatar-medium: 9px;
--spectrum-tag-top-to-avatar-large: 12px;
--spectrum-tag-top-to-cross-icon-small: 10px;
--spectrum-tag-top-to-cross-icon-medium: 15px;
--spectrum-tag-top-to-cross-icon-large: 19px;
--spectrum-thumbnail-size-50: 20px;
--spectrum-thumbnail-size-75: 22px;
--spectrum-thumbnail-size-100: 26px;
--spectrum-thumbnail-size-200: 28px;
--spectrum-thumbnail-size-300: 32px;
--spectrum-thumbnail-size-400: 36px;
--spectrum-thumbnail-size-500: 40px;
--spectrum-thumbnail-size-600: 46px;
--spectrum-thumbnail-size-700: 50px;
--spectrum-thumbnail-size-800: 55px;
--spectrum-thumbnail-size-900: 62px;
--spectrum-thumbnail-size-1000: 70px;
--spectrum-popover-top-to-content-area: 5px;
--spectrum-text-area-minimum-width: 140px;
--spectrum-text-area-minimum-height: 70px;
--spectrum-font-size-50: 13px;
--spectrum-font-size-75: 15px;
--spectrum-font-size-100: 17px;
--spectrum-font-size-200: 19px;
--spectrum-font-size-300: 22px;
--spectrum-font-size-400: 24px;
--spectrum-font-size-500: 27px;
--spectrum-font-size-600: 31px;
--spectrum-font-size-700: 34px;
--spectrum-font-size-800: 39px;
--spectrum-font-size-900: 44px;
--spectrum-font-size-1000: 49px;
--spectrum-font-size-1100: 55px;
--spectrum-font-size-1200: 62px;
--spectrum-font-size-1300: 70px;
--spectrum-workflow-icon-size-50: 18px;
--spectrum-workflow-icon-size-75: 20px;
--spectrum-workflow-icon-size-100: 22px;
--spectrum-workflow-icon-size-200: 24px;
--spectrum-workflow-icon-size-300: 28px;
--spectrum-text-to-visual-50: 8px;
--spectrum-text-to-visual-75: 9px;
--spectrum-text-to-visual-100: 10px;
--spectrum-text-to-visual-200: 11px;
--spectrum-text-to-visual-300: 13px;
--spectrum-text-to-control-75: 11px;
--spectrum-text-to-control-100: 13px;
--spectrum-text-to-control-200: 14px;
--spectrum-text-to-control-300: 16px;
--spectrum-field-edge-to-disclosure-icon-75: 9px;
--spectrum-field-edge-to-disclosure-icon-100: 13px;
--spectrum-field-edge-to-disclosure-icon-200: 17px;
--spectrum-field-edge-to-disclosure-icon-300: 22px;
--spectrum-field-top-to-alert-icon-small: 5px;
--spectrum-field-top-to-alert-icon-medium: 9px;
--spectrum-field-top-to-alert-icon-large: 13px;
--spectrum-field-top-to-alert-icon-extra-large: 16px;
--spectrum-field-top-to-validation-icon-small: 9px;
--spectrum-field-top-to-validation-icon-medium: 13px;
--spectrum-field-top-to-validation-icon-large: 17px;
--spectrum-field-top-to-validation-icon-extra-large: 22px;
--spectrum-field-top-to-progress-circle-small: 7px;
--spectrum-field-top-to-progress-circle-medium: 12px;
--spectrum-field-top-to-progress-circle-large: 17px;
--spectrum-field-top-to-progress-circle-extra-large: 22px;
--spectrum-field-edge-to-alert-icon-small: 11px;
--spectrum-field-edge-to-alert-icon-medium: 15px;
--spectrum-field-edge-to-alert-icon-large: 19px;
--spectrum-field-edge-to-alert-icon-extra-large: 22px;
--spectrum-field-edge-to-validation-icon-small: 11px;
--spectrum-field-edge-to-validation-icon-medium: 15px;
--spectrum-field-edge-to-validation-icon-large: 19px;
--spectrum-field-edge-to-validation-icon-extra-large: 22px;
--spectrum-field-text-to-alert-icon-small: 10px;
--spectrum-field-text-to-alert-icon-medium: 15px;
--spectrum-field-text-to-alert-icon-large: 19px;
--spectrum-field-text-to-alert-icon-extra-large: 22px;
--spectrum-field-text-to-validation-icon-small: 10px;
--spectrum-field-text-to-validation-icon-medium: 15px;
--spectrum-field-text-to-validation-icon-large: 19px;
--spectrum-field-text-to-validation-icon-extra-large: 22px;
--spectrum-character-count-to-field-quiet-small: -4px;
--spectrum-character-count-to-field-quiet-medium: -4px;
--spectrum-character-count-to-field-quiet-large: -4px;
--spectrum-character-count-to-field-quiet-extra-large: -5px;
--spectrum-side-label-character-count-to-field: 15px;
--spectrum-side-label-character-count-top-margin-small: 5px;
--spectrum-side-label-character-count-top-margin-medium: 10px;
--spectrum-side-label-character-count-top-margin-large: 13px;
--spectrum-side-label-character-count-top-margin-extra-large: 17px;
--spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px;
--spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px;
--spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px;
--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px;
}