@telekom/scale-components/dist/collection/components/tag/tag.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/.
 */

:host {
  --background: var(--telekom-color-ui-faint);
  --color: var(--telekom-color-text-and-icon-standard);
  --font: var(--telekom-text-style-caption-bold);
  --radius: 2px;
  --focus-outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);

  --icon-color: var(--telekom-color-text-and-icon-additional);
  --icon-color-hover: var(--color);

  --background-disabled: var(--telekom-color-ui-faint);
  --color-disabled: var(--telekom-color-text-and-icon-disabled);

  --spacing-dismissable: var(--telekom-spacing-composition-space-02)
    var(--telekom-spacing-composition-space-02)
    var(--telekom-spacing-composition-space-02)
    var(--telekom-spacing-composition-space-03);
  --spacing-dismissable-small: var(--telekom-spacing-composition-space-02)
    var(--telekom-spacing-composition-space-02)
    var(--telekom-spacing-composition-space-02)
    var(--telekom-spacing-composition-space-03);

  --height: 24px;
  --height-small: 20px;

  --border-button-dismissable-focus: 1px solid transparent;
  --box-shadow-button-dismissable-focus: var(--box-shadow-focus);
  --background-button-dismissable-hover: var(
    --telekom-color-ui-state-fill-hovered
  );
  --background-button-standard-strong-dismissible-hover: var(
    --telekom-color-ui-state-fill-hovered-inverted
  );
  --background-button-standard-dismissible-hover: var(
    --telekom-color-ui-state-fill-hovered
  );
  --background-button-dismissable-active: var(
    --telekom-color-ui-state-fill-pressed
  );

  --height-button-dismissable: 20px;
  --width-button-dismissable: 20px;
  --height-button-dismissable-small: 16px;
  --width-button-dismissable-small: 16px;

  --spacing-small: 0 var(--telekom-spacing-composition-space-04);
  --font-size-small: var(--telekom-typography-font-size-small);
  --line-height-small: var(--telekom-typography-line-spacing-loose);
}

.tag {
  display: inline-flex;
  outline: none;
  padding: 0 8px;
  text-align: center;
  transition: all 0.15s ease-in-out;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--telekom-radius-small);
  vertical-align: baseline;
  justify-content: center;
  font: var(--font);
  line-height: 1;
  background: var(--background);
  color: var(--color);
  cursor: default;
  height: var(--height);
}

.tag scale-icon-action-close {
  color: var(--icon-color);
}

.tag:not(.tag--disabled) scale-icon-action-close:hover {
  color: var(--icon-color-hover);
}

.tag::slotted(*) {
  padding: 100px;
}

/**
dismissable
**/

.tag--dismissable {
  padding: 0 0 0 8px;
}
.tag--dismissable button {
  border: none;
  cursor: pointer;
  height: var(--height-button-dismissable);
  width: var(--width-button-dismissable);
  margin: 0;
  outline: none;
  padding: 0;
  background: transparent;
  margin: var(--spacing-dismissable);
  border-radius: var(--radius);
  align-items: center;
}
.tag--dismissable scale-icon-action-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.tag--dismissable button:focus {
  justify-content: center;
  outline: var(--focus-outline);
  outline-offset: 1px;
}
.tag--dismissable:not(.tag--disabled) button:hover {
  background: var(--background-button-dismissable-hover);
}
.tag--dismissable.tag--color-standard:not(.tag--disabled) button:hover {
  background: var(--background-button-standard-dismissible-hover);
}
.tag--dismissable.tag--type-strong.tag--color-standard:not(.tag--disabled)
  button:hover {
  background: var(--background-button-standard-strong-dismissible-hover);
}
.tag--dismissable button:active {
  background: var(--background-button-dismissable-active);
}
.tag--dismissable.tag--color-standard button:active {
  background: var(--background-button-standard-dismissible-hover);
}
.tag--dismissable.tag--type-strong.tag--color-standard button:active {
  background: var(--background-button-standard-strong-dismissible-hover);
}

/**
size small
**/

.tag--size-small {
  font-size: var(--font-size-small);
  padding: 0 6px;
  height: var(--height-small);
}
.tag--size-small.tag--dismissable {
  padding-right: 0px;
}
.tag--size-small.tag--dismissable button {
  height: var(--height-button-dismissable-small);
  width: var(--width-button-dismissable-small);
  margin: var(--spacing-dismissable-small);
}

/**
disabled
**/

.tag--disabled {
  background-color: var(--telekom-color-ui-faint) !important;
  color: var(--color-disabled) !important;
  pointer-events: none;
}
.tag--disabled scale-icon-action-close {
  color: var(--color-disabled) !important;
  pointer-events: none;
}

/**
link
**/

.tag--link {
  text-decoration: none;
}
.tag--link:focus {
  outline: var(--focus-outline);
}
.tag--link {
  background: var(--background-secondary);
}
.tag--link:hover {
  background: var(--background-secondary);
}

/**
standard type
**/

/*cyan*/
.tag--type-standard.tag--color-cyan {
  background-color: var(--telekom-color-additional-cyan-subtle);
  color: var(--telekom-color-text-and-icon-on-subtle-cyan);
}
.tag--type-standard.tag--color-cyan.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-on-subtle-cyan);
}
/*yellow*/
.tag--type-standard.tag--color-yellow {
  background-color: var(--telekom-color-additional-yellow-subtle);
  color: var(--telekom-color-text-and-icon-on-subtle-yellow);
}
.tag--type-standard.tag--color-yellow.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-on-subtle-yellow);
}
/*green*/
.tag--type-standard.tag--color-green {
  background-color: var(--telekom-color-functional-success-subtle);
  color: var(--telekom-color-text-and-icon-on-subtle-success);
}
.tag--type-standard.tag--color-green.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-on-subtle-success);
}
/*orange*/
.tag--type-standard.tag--color-orange {
  background-color: var(--telekom-color-functional-warning-subtle);
  color: var(--telekom-color-text-and-icon-on-subtle-warning);
}
.tag--type-standard.tag--color-orange.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-on-subtle-warning);
}
/*red*/
.tag--type-standard.tag--color-red {
  background-color: var(--telekom-color-functional-danger-subtle);
  color: var(--telekom-color-text-and-icon-on-subtle-danger);
}
.tag--type-standard.tag--color-red.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-on-subtle-danger);
}
/*violet*/
.tag--type-standard.tag--color-violet {
  background-color: var(--telekom-color-additional-violet-subtle);
  color: var(--telekom-color-text-and-icon-on-subtle-violet);
}
.tag--type-standard.tag--color-violet.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-on-subtle-violet);
}
/*brown*/
.tag--type-standard.tag--color-brown {
  background-color: var(--telekom-color-additional-brown-subtle);
  color: var(--telekom-color-text-and-icon-on-subtle-brown);
}
.tag--type-standard.tag--color-brown.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-on-subtle-brown);
}
/*olive*/
.tag--type-standard.tag--color-olive {
  background-color: var(--telekom-color-additional-olive-subtle);
  color: var(--telekom-color-text-and-icon-on-subtle-olive);
}
.tag--type-standard.tag--color-olive.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-on-subtle-olive);
}
/*teal*/
.tag--type-standard.tag--color-teal {
  background-color: var(--telekom-color-additional-teal-subtle);
  color: var(--telekom-color-text-and-icon-on-subtle-teal);
}

.tag--type-standard.tag--color-teal.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-on-subtle-teal);
}

/*
*
strong type
*
*/

/*
standard
*/
.tag--type-strong.tag--color-standard {
  background-color: var(--telekom-color-ui-extra-strong);
  color: var(--telekom-color-text-and-icon-inverted-standard);
}
.tag--type-strong.tag--color-standard.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-inverted-additional);
}
/*
cyan
*/
.tag--type-strong.tag--color-cyan {
  background-color: var(--telekom-color-additional-cyan-400);
  color: var(--telekom-color-text-and-icon-black-standard);
}
.tag--type-strong.tag--color-cyan.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-black-additional);
}
/*
yellow
*/
.tag--type-strong.tag--color-yellow {
  background-color: var(--telekom-color-additional-yellow-400);
  color: var(--telekom-color-text-and-icon-black-standard);
}
.tag--type-strong.tag--color-yellow.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-black-additional);
}
/*
green
*/
.tag--type-strong.tag--color-green {
  background-color: var(--telekom-color-functional-success-standard);
  color: var(--telekom-color-text-and-icon-black-standard);
}
.tag--type-strong.tag--color-green.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-black-additional);
}
/*
orange
*/
.tag--type-strong.tag--color-orange {
  background-color: var(--telekom-color-functional-warning-standard);
  color: var(--telekom-color-text-and-icon-black-standard);
}
.tag--type-strong.tag--color-orange.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-black-additional);
}
/*
red
*/
.tag--type-strong.tag--color-red {
  background-color: var(--telekom-color-functional-danger-standard);
  color: var(--telekom-color-text-and-icon-black-standard);
}
.tag--type-strong.tag--color-red.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-black-additional);
}
/*
violet
*/
.tag--type-strong.tag--color-violet {
  background-color: var(--telekom-color-additional-violet-300);
  color: var(--telekom-color-text-and-icon-black-standard);
}
.tag--type-strong.tag--color-violet.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-black-additional);
}
/*
brown
*/
.tag--type-strong.tag--color-brown {
  background-color: var(--telekom-color-additional-brown-400);
  color: var(--telekom-color-text-and-icon-black-standard);
}
.tag--type-strong.tag--color-brown.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-black-additional);
}
/*
olive
*/
.tag--type-strong.tag--color-olive {
  background-color: var(--telekom-color-additional-olive-400);
  color: var(--telekom-color-text-and-icon-black-standard);
}
.tag--type-strong.tag--color-olive.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-black-additional);
}
/*
teal
*/
.tag--type-strong.tag--color-teal {
  background-color: var(--telekom-color-additional-teal-400);
  color: var(--telekom-color-text-and-icon-black-standard);
}
.tag--type-strong.tag--color-teal.tag--dismissable scale-icon-action-close {
  color: var(--telekom-color-text-and-icon-black-additional);
}