@spectrum-css/menu
Version:
The Spectrum CSS menu component
416 lines (415 loc) • 20.8 kB
JSON
{
"sourceFile": "index.css",
"selectors": [
".spectrum-Menu",
".spectrum-Menu .spectrum-Menu-backIcon",
".spectrum-Menu .spectrum-Menu-checkmark",
".spectrum-Menu .spectrum-Menu-chevron",
".spectrum-Menu .spectrum-Menu-chevron:dir(rtl)",
".spectrum-Menu .spectrum-Menu-divider",
".spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS",
".spectrum-Menu .spectrum-Menu-item",
".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused",
".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active",
".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus",
".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within",
".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover",
".spectrum-Menu .spectrum-Menu-item--drillIn.is-open",
".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox",
".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch",
".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox",
".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch",
".spectrum-Menu .spectrum-Menu-itemIcon",
".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon",
".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)",
".spectrum-Menu-back",
".spectrum-Menu-back .spectrum-Menu-sectionHeading",
".spectrum-Menu-back:focus-visible",
".spectrum-Menu-backButton",
".spectrum-Menu-backButton:focus-visible",
".spectrum-Menu-backHeading",
".spectrum-Menu-item",
".spectrum-Menu-item .spectrum-Menu",
".spectrum-Menu-item .spectrum-Menu-item",
".spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemLabel",
".spectrum-Menu-item .spectrum-Menu-item .spectrum-Menu-itemValue",
".spectrum-Menu-item .spectrum-Menu-itemCheckbox",
".spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box",
".spectrum-Menu-item .spectrum-Menu-itemSwitch",
".spectrum-Menu-item .spectrum-Menu-itemSwitch .spectrum-Switch-switch",
".spectrum-Menu-item--collapsible .spectrum-Menu",
".spectrum-Menu-item--collapsible .spectrum-Menu .spectrum-Menu-item",
".spectrum-Menu-item--collapsible .spectrum-Menu-chevron",
".spectrum-Menu-item--collapsible .spectrum-Menu-itemIcon",
".spectrum-Menu-item--collapsible .spectrum-Menu-sectionHeading",
".spectrum-Menu-item--collapsible .spectrum-Menu.is-open",
".spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon",
".spectrum-Menu-item--collapsible.is-open",
".spectrum-Menu-item--collapsible.is-open .spectrum-Menu-chevron",
".spectrum-Menu-item--collapsible.is-open.is-focused",
".spectrum-Menu-item--collapsible.is-open:active",
".spectrum-Menu-item--collapsible.is-open:focus",
".spectrum-Menu-item--collapsible.is-open:hover",
".spectrum-Menu-item--drillIn .spectrum-Menu-chevron",
".spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron",
".spectrum-Menu-item--drillIn.is-open",
".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark",
".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron",
".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron",
".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron",
".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron",
".spectrum-Menu-item.is-disabled",
".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription",
".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon",
".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel",
".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue",
".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading",
".spectrum-Menu-item.is-disabled:hover",
".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription",
".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon",
".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel",
".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue",
".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading",
".spectrum-Menu-item.is-focused",
".spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark",
".spectrum-Menu-item.is-focused > .spectrum-Menu-chevron",
".spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription",
".spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
".spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel",
".spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue",
".spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading",
".spectrum-Menu-item:active",
".spectrum-Menu-item:active > .spectrum-Menu-checkmark",
".spectrum-Menu-item:active > .spectrum-Menu-chevron",
".spectrum-Menu-item:active > .spectrum-Menu-itemDescription",
".spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
".spectrum-Menu-item:active > .spectrum-Menu-itemLabel",
".spectrum-Menu-item:active > .spectrum-Menu-itemValue",
".spectrum-Menu-item:active > .spectrum-Menu-sectionHeading",
".spectrum-Menu-item:focus",
".spectrum-Menu-item:focus > .spectrum-Menu-checkmark",
".spectrum-Menu-item:focus > .spectrum-Menu-chevron",
".spectrum-Menu-item:focus > .spectrum-Menu-itemDescription",
".spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
".spectrum-Menu-item:focus > .spectrum-Menu-itemLabel",
".spectrum-Menu-item:focus > .spectrum-Menu-itemValue",
".spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading",
".spectrum-Menu-item:focus-visible",
".spectrum-Menu-item:hover",
".spectrum-Menu-item:hover > .spectrum-Menu-checkmark",
".spectrum-Menu-item:hover > .spectrum-Menu-chevron",
".spectrum-Menu-item:hover > .spectrum-Menu-itemDescription",
".spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
".spectrum-Menu-item:hover > .spectrum-Menu-itemLabel",
".spectrum-Menu-item:hover > .spectrum-Menu-itemValue",
".spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading",
".spectrum-Menu-itemActions",
".spectrum-Menu-itemDescription",
".spectrum-Menu-itemLabel",
".spectrum-Menu-itemLabel--truncate",
".spectrum-Menu-itemSelection",
".spectrum-Menu-itemValue",
".spectrum-Menu-item[aria-disabled=\"true\"]",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading",
".spectrum-Menu-item[aria-disabled=\"true\"]:hover",
".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription",
".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon",
".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel",
".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue",
".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading",
".spectrum-Menu-sectionHeading",
".spectrum-Menu.is-selectable .spectrum-Menu-item",
".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected",
".spectrum-Menu.is-selectableMultiple .spectrum-Menu-item",
".spectrum-Menu.is-selectableMultiple .spectrum-Menu-itemCheckbox",
".spectrum-Menu.spectrum-Menu--sizeL",
".spectrum-Menu.spectrum-Menu--sizeS",
".spectrum-Menu.spectrum-Menu--sizeXL",
".spectrum-Menu:dir(rtl)",
".spectrum-Menu:lang(ja)",
".spectrum-Menu:lang(ko)",
".spectrum-Menu:lang(zh)",
"[dir=\"rtl\"] .spectrum-Menu",
"[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron"
],
"modifiers": [
"--mod-menu-back-heading-color",
"--mod-menu-back-icon-color-default",
"--mod-menu-back-icon-margin-block",
"--mod-menu-back-icon-margin-inline",
"--mod-menu-back-padding-block-end",
"--mod-menu-back-padding-block-start",
"--mod-menu-back-padding-inline-end",
"--mod-menu-back-padding-inline-start",
"--mod-menu-checkmark-display",
"--mod-menu-checkmark-icon-color-default",
"--mod-menu-checkmark-icon-color-down",
"--mod-menu-checkmark-icon-color-focus",
"--mod-menu-checkmark-icon-color-hover",
"--mod-menu-collapsible-icon-color",
"--mod-menu-drillin-icon-color-default",
"--mod-menu-drillin-icon-color-down",
"--mod-menu-drillin-icon-color-focus",
"--mod-menu-drillin-icon-color-hover",
"--mod-menu-inline-size",
"--mod-menu-item-background-color-default",
"--mod-menu-item-background-color-down",
"--mod-menu-item-background-color-hover",
"--mod-menu-item-background-color-key-focus",
"--mod-menu-item-bottom-edge-to-text",
"--mod-menu-item-checkmark-height",
"--mod-menu-item-checkmark-width",
"--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
"--mod-menu-item-description-color-default",
"--mod-menu-item-description-color-disabled",
"--mod-menu-item-description-color-down",
"--mod-menu-item-description-color-focus",
"--mod-menu-item-description-color-hover",
"--mod-menu-item-description-font-size",
"--mod-menu-item-description-line-height",
"--mod-menu-item-description-line-height-cjk",
"--mod-menu-item-focus-indicator-color",
"--mod-menu-item-focus-indicator-width",
"--mod-menu-item-icon-height",
"--mod-menu-item-icon-width",
"--mod-menu-item-label-content-color-default",
"--mod-menu-item-label-content-color-disabled",
"--mod-menu-item-label-content-color-down",
"--mod-menu-item-label-content-color-focus",
"--mod-menu-item-label-content-color-hover",
"--mod-menu-item-label-font-size",
"--mod-menu-item-label-icon-color-default",
"--mod-menu-item-label-icon-color-disabled",
"--mod-menu-item-label-icon-color-down",
"--mod-menu-item-label-icon-color-focus",
"--mod-menu-item-label-icon-color-hover",
"--mod-menu-item-label-inline-edge-to-content",
"--mod-menu-item-label-line-height",
"--mod-menu-item-label-line-height-cjk",
"--mod-menu-item-label-text-to-visual",
"--mod-menu-item-label-to-description-spacing",
"--mod-menu-item-label-to-value-area-min-spacing",
"--mod-menu-item-min-height",
"--mod-menu-item-selectable-edge-to-text-not-selected",
"--mod-menu-item-text-to-control",
"--mod-menu-item-top-edge-to-text",
"--mod-menu-item-top-to-action",
"--mod-menu-item-top-to-checkbox",
"--mod-menu-item-top-to-checkmark",
"--mod-menu-item-value-color-default",
"--mod-menu-item-value-color-down",
"--mod-menu-item-value-color-focus",
"--mod-menu-item-value-color-hover",
"--mod-menu-section-divider-margin-block",
"--mod-menu-section-header-bottom-edge-to-text",
"--mod-menu-section-header-color",
"--mod-menu-section-header-font-size",
"--mod-menu-section-header-font-weight",
"--mod-menu-section-header-line-height",
"--mod-menu-section-header-line-height-cjk",
"--mod-menu-section-header-min-width",
"--mod-menu-section-header-top-edge-to-text"
],
"component": [
"--spectrum-menu-back-icon-margin",
"--spectrum-menu-checkmark-display",
"--spectrum-menu-checkmark-display-hidden",
"--spectrum-menu-checkmark-display-shown",
"--spectrum-menu-checkmark-icon-color-default",
"--spectrum-menu-checkmark-icon-color-down",
"--spectrum-menu-checkmark-icon-color-focus",
"--spectrum-menu-checkmark-icon-color-hover",
"--spectrum-menu-collapsible-icon-color",
"--spectrum-menu-divider-thickness",
"--spectrum-menu-drillin-icon-color-default",
"--spectrum-menu-drillin-icon-color-down",
"--spectrum-menu-drillin-icon-color-focus",
"--spectrum-menu-drillin-icon-color-hover",
"--spectrum-menu-item-background-color-default",
"--spectrum-menu-item-background-color-down",
"--spectrum-menu-item-background-color-hover",
"--spectrum-menu-item-background-color-key-focus",
"--spectrum-menu-item-bottom-edge-to-text",
"--spectrum-menu-item-checkmark-height",
"--spectrum-menu-item-checkmark-height-extra-large",
"--spectrum-menu-item-checkmark-height-large",
"--spectrum-menu-item-checkmark-height-medium",
"--spectrum-menu-item-checkmark-height-small",
"--spectrum-menu-item-checkmark-width",
"--spectrum-menu-item-checkmark-width-extra-large",
"--spectrum-menu-item-checkmark-width-large",
"--spectrum-menu-item-checkmark-width-medium",
"--spectrum-menu-item-checkmark-width-small",
"--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
"--spectrum-menu-item-corner-radius",
"--spectrum-menu-item-description-color-default",
"--spectrum-menu-item-description-color-disabled",
"--spectrum-menu-item-description-color-down",
"--spectrum-menu-item-description-color-focus",
"--spectrum-menu-item-description-color-hover",
"--spectrum-menu-item-description-font-size",
"--spectrum-menu-item-description-line-height",
"--spectrum-menu-item-description-line-height-cjk",
"--spectrum-menu-item-focus-indicator-border-width",
"--spectrum-menu-item-focus-indicator-color",
"--spectrum-menu-item-focus-indicator-color-default",
"--spectrum-menu-item-focus-indicator-direction-scalar",
"--spectrum-menu-item-focus-indicator-offset",
"--spectrum-menu-item-focus-indicator-outline-style",
"--spectrum-menu-item-focus-indicator-shadow",
"--spectrum-menu-item-focus-indicator-width",
"--spectrum-menu-item-icon-height",
"--spectrum-menu-item-icon-width",
"--spectrum-menu-item-label-content-color-default",
"--spectrum-menu-item-label-content-color-disabled",
"--spectrum-menu-item-label-content-color-down",
"--spectrum-menu-item-label-content-color-focus",
"--spectrum-menu-item-label-content-color-hover",
"--spectrum-menu-item-label-font-size",
"--spectrum-menu-item-label-icon-color-default",
"--spectrum-menu-item-label-icon-color-disabled",
"--spectrum-menu-item-label-icon-color-down",
"--spectrum-menu-item-label-icon-color-focus",
"--spectrum-menu-item-label-icon-color-hover",
"--spectrum-menu-item-label-inline-edge-to-content",
"--spectrum-menu-item-label-line-height",
"--spectrum-menu-item-label-line-height-cjk",
"--spectrum-menu-item-label-text-to-visual",
"--spectrum-menu-item-label-to-description",
"--spectrum-menu-item-label-to-description-spacing",
"--spectrum-menu-item-label-to-value-area-min-spacing",
"--spectrum-menu-item-min-height",
"--spectrum-menu-item-section-divider-height",
"--spectrum-menu-item-selectable-edge-to-text-not-selected",
"--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large",
"--spectrum-menu-item-selectable-edge-to-text-not-selected-large",
"--spectrum-menu-item-selectable-edge-to-text-not-selected-medium",
"--spectrum-menu-item-selectable-edge-to-text-not-selected-small",
"--spectrum-menu-item-spacing-multiplier",
"--spectrum-menu-item-text-to-control",
"--spectrum-menu-item-top-edge-to-text",
"--spectrum-menu-item-top-to-action",
"--spectrum-menu-item-top-to-checkbox",
"--spectrum-menu-item-top-to-checkmark",
"--spectrum-menu-item-top-to-selected-icon-extra-large",
"--spectrum-menu-item-top-to-selected-icon-large",
"--spectrum-menu-item-top-to-selected-icon-medium",
"--spectrum-menu-item-top-to-selected-icon-small",
"--spectrum-menu-item-value-color-default",
"--spectrum-menu-item-value-color-down",
"--spectrum-menu-item-value-color-focus",
"--spectrum-menu-item-value-color-hover",
"--spectrum-menu-section-header-color",
"--spectrum-menu-section-header-font-size",
"--spectrum-menu-section-header-font-weight",
"--spectrum-menu-section-header-line-height",
"--spectrum-menu-section-header-line-height-cjk",
"--spectrum-menu-section-header-min-width"
],
"global": [
"--spectrum-accent-color-1000",
"--spectrum-accent-color-1100",
"--spectrum-accent-color-900",
"--spectrum-blue-800",
"--spectrum-bold-font-weight",
"--spectrum-border-width-200",
"--spectrum-cjk-line-height-100",
"--spectrum-component-bottom-to-text-100",
"--spectrum-component-bottom-to-text-200",
"--spectrum-component-bottom-to-text-300",
"--spectrum-component-bottom-to-text-75",
"--spectrum-component-edge-to-text-100",
"--spectrum-component-edge-to-text-200",
"--spectrum-component-edge-to-text-300",
"--spectrum-component-edge-to-text-75",
"--spectrum-component-height-100",
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-component-top-to-text-100",
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-300",
"--spectrum-component-top-to-text-75",
"--spectrum-corner-radius-100",
"--spectrum-disabled-content-color",
"--spectrum-divider-thickness-medium",
"--spectrum-divider-thickness-small",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-50",
"--spectrum-font-size-75",
"--spectrum-gray-1000-rgb",
"--spectrum-gray-900",
"--spectrum-line-height-100",
"--spectrum-navigational-indicator-top-to-back-icon-extra-large",
"--spectrum-navigational-indicator-top-to-back-icon-large",
"--spectrum-navigational-indicator-top-to-back-icon-medium",
"--spectrum-navigational-indicator-top-to-back-icon-small",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus",
"--spectrum-neutral-subdued-content-color-default",
"--spectrum-neutral-subdued-content-color-down",
"--spectrum-neutral-subdued-content-color-hover",
"--spectrum-neutral-subdued-content-color-key-focus",
"--spectrum-spacing-100",
"--spectrum-spacing-50",
"--spectrum-text-to-control-100",
"--spectrum-text-to-control-200",
"--spectrum-text-to-control-300",
"--spectrum-text-to-control-75",
"--spectrum-text-to-visual-100",
"--spectrum-text-to-visual-200",
"--spectrum-text-to-visual-300",
"--spectrum-text-to-visual-75",
"--spectrum-transparent-black-200-opacity",
"--spectrum-workflow-icon-size-100",
"--spectrum-workflow-icon-size-200",
"--spectrum-workflow-icon-size-300",
"--spectrum-workflow-icon-size-75"
],
"system-theme": [
"--system-menu-item-background-color-down",
"--system-menu-item-background-color-hover",
"--system-menu-item-background-color-key-focus",
"--system-menu-item-corner-radius",
"--system-menu-item-focus-indicator-offset",
"--system-menu-item-focus-indicator-outline-style",
"--system-menu-item-focus-indicator-shadow",
"--system-menu-item-spacing-multiplier"
],
"passthroughs": [
"--mod-checkbox-text-to-control",
"--mod-checkbox-top-to-text",
"--mod-switch-control-label-spacing",
"--mod-switch-spacing-top-to-label"
],
"high-contrast": [
"--highcontrast-checkbox-highlight-color-default",
"--highcontrast-checkbox-highlight-color-hover",
"--highcontrast-menu-checkmark-icon-color-default",
"--highcontrast-menu-item-background-color-default",
"--highcontrast-menu-item-background-color-focus",
"--highcontrast-menu-item-color-default",
"--highcontrast-menu-item-color-disabled",
"--highcontrast-menu-item-color-focus",
"--highcontrast-menu-item-focus-indicator-color",
"--highcontrast-menu-item-selected-background-color",
"--highcontrast-menu-item-selected-color",
"--highcontrast-switch-background-color-selected-default",
"--highcontrast-switch-background-color-selected-hover",
"--highcontrast-switch-handle-border-color-hover",
"--highcontrast-switch-handle-border-color-selected-default",
"--highcontrast-switch-handle-border-color-selected-hover"
]
}