@telekom/scale-components/dist/collection/components/dropdown/dropdown.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

scale-dropdown {
  --font-weight: var(--telekom-typography-font-weight-bold);
  --height: var(--telekom-spacing-composition-space-13);
  --spacing-x: var(--telekom-spacing-composition-space-05);
  --spacing-dropdown: 18px var(--telekom-spacing-composition-space-12) 5px
    calc(var(--spacing-x) - 1px);
  --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
  --radius: var(--telekom-radius-standard);
  --border: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-ui-border-standard);
  --border-danger: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-danger-standard);
  --border-success: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-success-standard);
  --border-warning: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-warning-standard);
  --border-color-hover: var(--telekom-color-ui-border-hovered);
  --border-color-focus: var(--telekom-color-ui-border-hovered);
  --border-color-disabled: var(--telekom-color-ui-border-disabled);
  --focus-outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  --color-disabled: var(--telekom-color-text-and-icon-disabled);
  --background-disabled: none;
  --color: var(--telekom-color-text-and-icon-standard);
  --background-color: var(--telekom-color-ui-state-fill-standard);
  --margin-bottom-helper-text: var(--telekom-spacing-composition-space-03);

  /*input*/
  --transition-input: var(--transition);
  --font-size-input: var(--telekom-typography-font-size-body);

  /*meta*/
  --spacing-y-meta: var(--telekom-spacing-composition-space-03);
  --color-meta: var(--telekom-color-text-and-icon-standard);

  /*icon*/
  --height-icon: var(--telekom-spacing-composition-space-07);
  --color-icon: var(--telekom-color-text-and-icon-standard);
  --color-icon-hover: var(--telekom-color-text-and-icon-standard);
  --color-icon-active: var(--telekom-color-text-and-icon-standard);
  --transition-icon: var(--transition);

  /*label*/
  --color-label: var(--telekom-color-text-and-icon-additional);
  --z-index-label: var(--scl-z-index-10);
  --transition-label: var(--transition);
  --font-size-label: var(--telekom-typography-font-size-body);
  --font-weight-label: var(--telekom-typography-font-weight-medium);
  --font-size-label-focus: var(--telekom-typography-font-size-small);
  --font-weight-label-focus: var(--telekom-typography-font-weight-bold);
}

.dropdown {
  position: relative;
}

.dropdown .input__dropdown {
  width: 100%;
  height: var(--height);
  margin: 0;
  display: flex;
  outline: none;
  padding: var(--spacing-dropdown);
  z-index: 1;
  box-sizing: border-box;
  transition: var(--transition-input);
  font-family: inherit;
  font-size: var(--font-size-input);
  border-radius: var(--radius);
  border: var(--border);
  white-space: nowrap;
  line-height: var(--font-size-input);
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--background-color);
  color: var(--color);
}

.dropdown--hide-label .input__dropdown {
  padding: 5px var(--telekom-spacing-composition-space-12) 5px
    calc(var(--spacing-x) - 1px);
}

.dropdown--hide-label .input__label {
  visibility: hidden;
}

.dropdown .input__dropdown-wrapper {
  position: relative;
}
.dropdown.dropdown--helper-text .input__dropdown-wrapper {
  margin-bottom: var(--margin-bottom-helper-text);
}

.dropdown .input__meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-y-meta);
  color: var(--color-meta);
}

.dropdown.dropdown--disabled .input__dropdown-wrapper .input__dropdown-icon {
  color: var(--color-disabled);
}

.dropdown:not(.dropdown--disabled):hover .input__dropdown-icon {
  color: var(--color-icon-hover);
}
.dropdown:not(.dropdown--disabled):active .input__dropdown-icon {
  color: var(--color-icon-active);
}
.dropdown:not(.dropdown--disabled):not(.dropdown--variant-danger)
  .input__dropdown:hover {
  border-color: var(--border-color-hover);
  background-color: var(--telekom-color-ui-state-fill-hovered);
}

.dropdown:not(.dropdown--disabled).dropdown--variant-danger
  .input__dropdown:hover {
  border-color: var(--telekom-color-functional-danger-hovered);
  background-color: var(--telekom-color-ui-state-fill-hovered);
}

.dropdown:not(.dropdown--disabled).dropdown--variant-warning
  .input__dropdown:hover {
  border-color: var(--telekom-color-functional-warning-hovered);
  background-color: var(--telekom-color-ui-state-fill-hovered);
}

.dropdown:not(.dropdown--disabled).dropdown--variant-success
  .input__dropdown:hover {
  border-color: var(--telekom-color-functional-success-hovered);
  background-color: var(--telekom-color-ui-state-fill-hovered);
}

.dropdown:not(.dropdown--disabled):not(.dropdown--variant-danger)
  .input__dropdown:focus {
  border-color: var(--border-color-focus);
}
.dropdown:not(.dropdown--disabled).dropdown--variant-danger
  .input__dropdown:focus {
  border-color: var(--telekom-color-functional-danger-hovered);
}
.dropdown:not(.dropdown--disabled).dropdown--variant-warning
  .input__dropdown:focus {
  border-color: var(--telekom-color-functional-warning-hovered);
}
.dropdown:not(.dropdown--disabled).dropdown--variant-success
  .input__dropdown:focus {
  border-color: var(--telekom-color-functional-success-hovered);
}
.dropdown:not(.dropdown--disabled) .input__dropdown:focus {
  outline: var(--focus-outline);
  outline-offset: 1px;
}
.dropdown .input__dropdown-wrapper .input__dropdown-icon {
  top: 50%;
  right: var(--spacing-x);
  position: absolute;
  transform: translateY(-50%);
  pointer-events: none;
  height: var(--height-icon);
  color: var(--color-icon);
  transition: var(--transition-icon);
}

.input__label {
  top: -2px;
  color: var(--color-label);
  display: flex;
  z-index: var(--z-index-label);
  position: absolute;
  transition: var(--transition-label);
  pointer-events: none;
  font-size: var(--font-size-label);
  transform: translate(
    var(--spacing-x),
    calc(
      (var(--telekom-spacing-composition-space-14) - var(--font-size-label)) / 2
    )
  );
  font-weight: var(--font-weight-label);
}

.animated .input__label {
  transform: translate(
    var(--spacing-x),
    var(--telekom-spacing-composition-space-04)
  );
  font-size: var(--font-size-label-focus);
  font-weight: var(--font-weight-label-focus);
  line-height: var(--telekom-typography-font-size-small);
}

.dropdown--variant-danger .input__dropdown {
  border: var(--border-danger);
}
.dropdown--variant-warning .input__dropdown {
  border: var(--border-warning);
}
.dropdown--variant-success .input__dropdown {
  border: var(--border-success);
}
.dropdown--transparent .input__dropdown {
  background-color: transparent;
}

.dropdown--disabled label,
.dropdown--disabled .input__label,
.dropdown--disabled input,
.dropdown--disabled .input__dropdown {
  cursor: not-allowed;
  border-color: var(--border-color-disabled);
  color: var(--color-disabled);
  background: var(--background-disabled);
}

/* Tokens exceptionally hard-coded, instead of using the component variables,
to fix bug in Firefox/Windows, see https://github.com/telekom/scale/issues/1018) */

[data-mode='light']
  .dropdown:not(.dropdown--disabled):not(.dropdown--variant-danger)
  .input__dropdown:hover {
  background-color: var(--telekom-color-ui-state-fill-hovered);
}

[data-mode='light']
  .dropdown:not(.dropdown--disabled).dropdown--variant-danger
  .input__dropdown:hover {
  background-color: var(--telekom-color-ui-state-fill-hovered);
}

[data-mode='dark'] .dropdown .input__dropdown {
  background-color: var(--telekom-color-background-canvas);
}

[data-mode='dark']
  .dropdown:not(.dropdown--disabled):not(.dropdown--variant-danger)
  .input__dropdown:hover {
  background-color: #1b1b1b;
}

[data-mode='dark']
  .dropdown:not(.dropdown--disabled).dropdown--variant-danger
  .input__dropdown:hover {
  background-color: #1b1b1b;
}

[data-mode='dark'] .dropdown--disabled .input__dropdown {
  background-color: var(--telekom-color-background-canvas);
}

@media (prefers-color-scheme: dark) {
  .dropdown .input__dropdown {
    background-color: var(--telekom-color-background-canvas);
  }

  .dropdown:not(.dropdown--disabled):not(.dropdown--status-error)
    .input__dropdown:hover {
    background-color: #1b1b1b;
  }

  .dropdown:not(.dropdown--disabled).dropdown--status-error
    .input__dropdown:hover {
    background-color: #1b1b1b;
  }

  .dropdown--disabled .input__dropdown {
    background-color: var(--telekom-color-background-canvas);
  }
}