/** * Copyright (C) 2023 Intel Corporation * SPDX-License-Identifier: MIT */ /* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/ .spark-dropdown-list-box { margin: var(--spark-dropdown-list-box-margin); outline: var(--spark-dropdown-list-box-outline); padding: var(--spark-dropdown-list-box-padding); list-style: none; } .spark-dropdown-list-box.spark-list.spark-list-size-l .spark-list-item { padding-inline: var(--spark-dropdown-l-list-box-item-padding-inline-start); } .spark-dropdown-list-box.spark-list.spark-list-size-l.spark-dropdown-supplementary-icon.spark-dropdown-primary .spark-list-item { padding-inline-start: var(--spark-dropdown-l-supplementary-icon-primary-padding-inline-start); } .spark-dropdown-list-box.spark-list.spark-list-size-l.spark-dropdown-supplementary-icon.spark-dropdown-ghost .spark-list-item { padding-inline-start: var(--spark-dropdown-l-supplementary-icon-ghost-padding-inline-start); } .spark-dropdown-list-box.spark-list.spark-list-size-m .spark-list-item { padding-inline: var(--spark-dropdown-m-list-box-item-padding-inline-start); } .spark-dropdown-list-box.spark-list.spark-list-size-m.spark-dropdown-supplementary-icon.spark-dropdown-primary .spark-list-item { padding-inline-start: var(--spark-dropdown-m-supplementary-icon-primary-padding-inline-start); } .spark-dropdown-list-box.spark-list.spark-list-size-m.spark-dropdown-supplementary-icon.spark-dropdown-ghost .spark-list-item { padding-inline-start: var(--spark-dropdown-m-supplementary-icon-ghost-padding-inline-start); } .spark-dropdown-list-box.spark-list.spark-list-size-s .spark-list-item { padding-inline: var(--spark-dropdown-s-list-box-item-padding-inline-start); } .spark-dropdown-list-box.spark-list.spark-list-size-s.spark-dropdown-supplementary-icon.spark-dropdown-primary .spark-list-item { padding-inline-start: var(--spark-dropdown-s-supplementary-icon-primary-padding-inline-start); } .spark-dropdown-list-box.spark-list.spark-list-size-s.spark-dropdown-supplementary-icon.spark-dropdown-ghost .spark-list-item { padding-inline-start: var(--spark-dropdown-s-supplementary-icon-ghost-padding-inline-start); } .spark-dropdown-list-box-scroll { padding: var(--spark-dropdown-list-box-scroll-padding) !important; white-space: normal; max-block-size: var(--spark-dropdown-list-box-scroll-height) !important; } .spark-dropdown-ghost { color: var(--spark-dropdown-text-color); } .spark-dropdown-ghost .spark-dropdown-button { border: var(--spark-dropdown-ghost-variant-border) !important; border-bottom: var(--spark-dropdown-ghost-variant-border-bottom) solid var(--spark-dropdown-ghost-border-bottom-color) !important; } .spark-dropdown-ghost .spark-dropdown-button-label { padding-inline-start: var(--spark-dropdown-ghost-padding-inline-start) !important; } .spark-dropdown-ghost .spark-dropdown-arrow-icon { margin-inline-end: var(--spark-dropdown-ghost-arrow-margin-inline-end) !important; } .spark-dropdown-ghost .spark-dropdown-button-error { border-bottom: var(--spark-dropdown-ghost-variant-border-bottom) solid var(--spark-dropdown-border-invalid-color) !important; } .spark-dropdown-ghost:disabled, .spark-dropdown-ghost.spark-dropdown-is-disabled { color: var(--spark-dropdown-text-disabled-color); cursor: default; } .spark-dropdown-ghost .spark-dropdown-button-is-disabled { border: var(--spark-dropdown-ghost-variant-border) !important; border-bottom: var(--spark-dropdown-ghost-variant-border-bottom) solid var(--spark-dropdown-button-disabled-color) !important; background-color: var(--spark-dropdown-button-disabled-background) !important; } .spark-dropdown-ghost:disabled .spark-dropdown-button, .spark-dropdown-ghost.spark-dropdown-is-disabled .spark-dropdown-button { border: none; background-color: var(--spark-dropdown-button-disabled-color); } .spark-dropdown-ghost:disabled .spark-dropdown-button-label, .spark-dropdown-ghost.spark-dropdown-is-disabled .spark-dropdown-button-label { color: var(--spark-dropdown-button-disabled-color); } .spark-dropdown-ghost:disabled .spark-dropdown-arrow-icon, .spark-dropdown-ghost.spark-dropdown-is-disabled .spark-dropdown-arrow-icon { color: var(--spark-dropdown-button-disabled-color); } .spark-dropdown-primary { color: var(--spark-dropdown-text-color); } .spark-dropdown-primary:disabled, .spark-dropdown-primary.spark-dropdown-is-disabled { color: var(--spark-dropdown-text-disabled-color) !important; cursor: default !important; } .spark-dropdown-primary:disabled .spark-dropdown-button, .spark-dropdown-primary.spark-dropdown-is-disabled .spark-dropdown-button { color: var(--spark-dropdown-text-disabled-color); cursor: default; } .spark-dropdown-primary:disabled .spark-dropdown-button .spark-dropdown-button, .spark-dropdown-primary.spark-dropdown-is-disabled .spark-dropdown-button .spark-dropdown-button { border: none; background-color: var(--spark-dropdown-button-disabled-color); } .spark-dropdown-primary:disabled .spark-dropdown-button .spark-dropdown-button-label, .spark-dropdown-primary.spark-dropdown-is-disabled .spark-dropdown-button .spark-dropdown-button-label { color: var(--spark-dropdown-button-disabled-color); } .spark-dropdown-primary:disabled .spark-dropdown-button .spark-dropdown-arrow-icon, .spark-dropdown-primary.spark-dropdown-is-disabled .spark-dropdown-button .spark-dropdown-arrow-icon { color: var(--spark-dropdown-button-disabled-color); } .spark-dropdown-size-l .spark-dropdown-button-label { font-size: var(--spark-dropdown-l-font-size); line-height: var(--spark-dropdown-l-line-height); padding-block: var(--spark-dropdown-l-label-padding-block); padding-inline-start: var(--spark-dropdown-l-label-padding-left); } .spark-dropdown-size-l .spark-dropdown-arrow-icon { margin-inline-end: var(--spark-dropdown-l-icon-padding-end); margin-inline-start: var(--spark-dropdown-l-icon-padding-start); } .spark-dropdown-size-m .spark-dropdown-button-label { font-size: var(--spark-dropdown-m-font-size); line-height: var(--spark-dropdown-m-line-height); padding-block: var(--spark-dropdown-m-label-padding-block); padding-inline-start: var(--spark-dropdown-m-label-padding-left); } .spark-dropdown-size-m .spark-dropdown-arrow-icon { margin-inline-end: var(--spark-dropdown-m-icon-padding-end); margin-inline-start: var(--spark-dropdown-m-icon-padding-start); } .spark-dropdown-size-s .spark-dropdown-button-label { font-size: var(--spark-dropdown-s-font-size); line-height: var(--spark-dropdown-s-line-height); padding-block: var(--spark-dropdown-s-label-padding-block); padding-inline-start: var(--spark-dropdown-s-label-padding-left); } .spark-dropdown-size-s .spark-dropdown-arrow-icon { margin-inline-end: var(--spark-dropdown-s-icon-padding-end); margin-inline-start: var(--spark-dropdown-s-icon-padding-start); } .spark-dropdown { display: inline-block; position: relative; font-family: inherit; inline-size: 100%; } .spark-dropdown.spark-dropdown-is-disabled { pointer-events: none; } .spark-dropdown .spark-dropdown-button.spark-button { color: var(--spark-dropdown-text-color); cursor: pointer; display: flex; padding: var(--spark-dropdown-button-padding); z-index: 1; font-size: var(--spark-dropdown-button-icon-font-size); block-size: inherit; align-items: center; font-weight: normal; inline-size: 100%; border-color: var(--spark-dropdown-border-color); border-style: solid; border-width: var(--spark-dropdown-button-border-width); border-radius: var(--spark-dropdown-button-border-radius); justify-content: flex-start; max-inline-size: inherit; background-color: inherit; } .spark-dropdown .spark-dropdown-button-error.spark-button { border-color: var(--spark-dropdown-border-invalid-color); border-width: var(--spark-dropdown-button-error-border-width); } .spark-dropdown .spark-dropdown-button-is-focused { outline: var(--spark-dropdown-button-opened-focus-outline-width) solid var(--spark-dropdown-button-focus-outline-color) !important; } .spark-dropdown .spark-dropdown-button-label { color: var(--spark-dropdown-text-placeholder-color); width: auto !important; border: none; display: flex; outline: none; overflow: hidden; box-sizing: border-box; font-style: var(--spark-dropdown-text-placeholder-style); font-family: inherit; white-space: nowrap; text-overflow: ellipsis; background-color: transparent; } .spark-dropdown .spark-dropdown-button-label-is-selected { color: var(--spark-dropdown-text-selected-color); font-style: normal; } .spark-dropdown .spark-dropdown-arrow-icon { display: flex; align-items: center; justify-content: center; } .spark-dropdown .spark-dropdown-button-label .spark-dropdown-supplementary-icon { display: flex; align-items: center; padding-inline-end: var(--spark-dropdown-supplementary-icon-padding-inline-end); } .spark-dropdown .spark-dropdown-button-error.spark-button:hover { border-color: var(--spark-dropdown-border-invalid-hover) !important; } .spark-dropdown .spark-dropdown-button.spark-button:hover, .spark-dropdown .spark-dropdown-button.spark-button.spark-button-hovered { border-color: var(--spark-dropdown-border-hover-color); background-color: inherit; } .spark-dropdown .spark-dropdown-button.spark-button:active, .spark-dropdown .spark-dropdown-button.spark-button.spark-button-active { background-color: inherit; } .spark-dropdown .spark-dropdown-button.spark-button.invalid { border-color: var(--spark-dropdown-border-invalid-color); } .spark-dropdown .spark-dropdown-button.spark-button:disabled, .spark-dropdown .spark-dropdown-button.spark-button.spark-dropdown-button-is-disabled { color: var(--spark-dropdown-button-disabled-text-color) !important; cursor: auto !important; border-color: var(--spark-dropdown-button-disabled-background); background-color: var(--spark-dropdown-background-disabled); } .spark-dropdown .spark-dropdown-button.spark-button .spark-button-content { inline-size: 100%; justify-content: space-between; } .spark-dropdown .spark-dropdown-button.spark-button:disabled .spark-dropdown-button-label, .spark-dropdown .spark-dropdown-button.spark-button:disabled .spark-dropdown-arrow-icon, .spark-dropdown .spark-dropdown-button.spark-button.spark-dropdown-button-is-disabled .spark-dropdown-button-label, .spark-dropdown .spark-dropdown-button.spark-button.spark-dropdown-button-is-disabled .spark-dropdown-arrow-icon { color: var(--spark-dropdown-button-disabled-text-color); }