@enact/sandstone/Dropdown/Dropdown.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

.dropdown {
  display: inline-block;
  margin: 0 1rem;
  min-width: 6.25rem;
}
.dropdown.tinyWidth .title,
.dropdown.tinyWidth .button {
  width: 10rem;
}
.dropdown.smallWidth .title,
.dropdown.smallWidth .button {
  width: 11.25rem;
}
.dropdown.mediumWidth .title,
.dropdown.mediumWidth .button {
  width: 14.375rem;
}
.dropdown.largeWidth .title,
.dropdown.largeWidth .button {
  width: 16.25rem;
}
.dropdown.x-largeWidth .title,
.dropdown.x-largeWidth .button {
  width: 21.875rem;
}
.dropdown.hugeWidth .title,
.dropdown.hugeWidth .button {
  width: 28.75rem;
}
.dropdown .title {
  min-width: 6.25rem;
  font-style: italic;
}
:global(.enact-locale-non-italic) .dropdown .title {
  font-style: normal;
}
.dropdown.hasTitle .button {
  margin-top: 0;
}
.dropdown .button {
  min-width: unset;
  max-width: unset;
}
:global(.spotlight-input-key) .dropdown .button:not([disabled]):global(.spottable):focus.pressed .bg,
:global(.spotlight-input-mouse) .dropdown .button:not([disabled]):global(.spottable):focus.pressed .bg,
:global(.spotlight-input-key) .dropdown .button:not([disabled]):global(.spottable):focus:active .bg,
:global(.spotlight-input-mouse) .dropdown .button:not([disabled]):global(.spottable):focus:active .bg {
  animation-name: none;
}
:global(.spotlight-input-touch) .dropdown .button:not([disabled]):global(.spottable):active.pressed .bg,
:global(.spotlight-input-touch) .dropdown .button:not([disabled]):global(.spottable):active:active .bg {
  animation-name: none;
}
.dropdown:global(.neutral) .title {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.enact-a11y-high-contrast) .dropdown:global(.neutral):global(.highContrast) .title {
  color: var(--sand-text-sub-color, #abaeb3);
}
.dropdown:global(.light) .title {
  color: var(--sand-text-sub-color, #2e3239);
}
.dropdown:global(.game) .title {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.green) .dropdown:global(.game) .title {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.orange) .dropdown:global(.game) .title {
  color: var(--sand-text-sub-color, #abaeb3);
}
.dropdownList {
  max-height: 13.875rem;
  min-width: 6.25rem;
}
.dropdownList.tiny {
  width: 9.875rem;
}
.dropdownList.small {
  width: 11.125rem;
}
.dropdownList.medium {
  width: 14.25rem;
}
.dropdownList.large {
  width: 16.125rem;
}
.dropdownList.x-large {
  width: 21.75rem;
}
.dropdownList.huge {
  width: 28.625rem;
}
.dropdownList:global(.largeText) {
  max-height: 13.875rem;
}
.dropdownList:global(.neutral) {
  border-radius: 0.25rem;
}
.dropdownList:global(.neutral) [data-selected="true"]:not(:focus) {
  color: var(--sand-selected-text-color, rgb(var(--sand-text-color-rgb, 230, 230, 230)));
}
:global(.enact-a11y-high-contrast) .dropdownList:global(.neutral):global(.highContrast) {
  border-radius: 0.25rem;
}
:global(.enact-a11y-high-contrast) .dropdownList:global(.neutral):global(.highContrast) [data-selected="true"]:not(:focus) {
  color: var(--sand-selected-text-color, rgb(var(--sand-text-color-rgb, 230, 230, 230)));
}
.dropdownList:global(.light) {
  border-radius: 0.25rem;
}
.dropdownList:global(.light) [data-selected="true"]:not(:focus) {
  color: var(--sand-selected-text-color, rgb(var(--sand-text-color-rgb, 46, 50, 57)));
}
.dropdownList:global(.game) {
  border-radius: 0;
}
.dropdownList:global(.game) [data-selected="true"]:not(:focus) {
  color: var(--sand-selected-text-color, rgb(var(--sand-text-color-rgb, 230, 230, 230)));
}
:global(.green) .dropdownList:global(.game) {
  border-radius: 0;
}
:global(.green) .dropdownList:global(.game) [data-selected="true"]:not(:focus) {
  color: var(--sand-selected-text-color, rgb(var(--sand-text-color-rgb, 230, 230, 230)));
}
:global(.orange) .dropdownList:global(.game) {
  border-radius: 0;
}
:global(.orange) .dropdownList:global(.game) [data-selected="true"]:not(:focus) {
  color: var(--sand-selected-text-color, rgb(var(--sand-text-color-rgb, 230, 230, 230)));
}