@telekom/scale-components

Version:
Scale is the digital design system for Telekom products and experiences.
83 lines (74 loc) • 2.48 kB
CSS
/**
 * @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 {
  --scl-chart-stack-card-color: var(--telekom-color-additional-blue-600);
}
.chart-stack-card {
  color: var(--color-text);
  --scl-chart-stack-card-color: var(--telekom-color-additional-blue-600);
}
.chart-stack-card .header {
  height: var(--telekom-spacing-composition-space-08);
  font-size: var(--telekom-typography-font-size-headline-3);
  font-weight: var(--telekom-typography-font-weight-extra-bold);
  line-height: var(--telekom-typography-line-spacing-tight);
  margin-bottom: var(--telekom-spacing-composition-space-08);
}

.chart-stack-card .bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--telekom-spacing-composition-space-06);
}

.chart-stack-card .bar__item {
  background-color: var(--scl-chart-stack-card-color);
  height: var(--telekom-spacing-composition-space-10);
  flex: 1;
}

.chart-stack-card .bar__item:first-of-type {
  border-top-left-radius: var(--telekom-radius-small);
  border-bottom-left-radius: var(--telekom-radius-small);
}

.chart-stack-card .bar__item:last-of-type {
  border-top-right-radius: var(--telekom-radius-small);
  border-bottom-right-radius: var(--telekom-radius-small);
}

.chart-stack-card .legend {
  display: flex;
  flex-direction: column;
  height: calc(var(--telekom-spacing-composition-space-06) * 10);
}
.chart-stack-card .spacer {
  padding: 0 var(--telekom-spacing-composition-space-04);
}
.chart-stack-card .legend .legend__row__item {
  display: flex;
  line-height: var(--telekom-typography-line-spacing-standard);
}
.chart-stack-card .legend .legend__row {
  display: flex;
  justify-content: space-between;
}
.chart-stack-card .legend .legend__row:last-child {
  padding-bottom: var(--telekom-spacing-composition-space-10);
}

.chart-stack-card .legend .legend__item {
  height: 10px;
  width: 10px;
  background-color: var(--scl-chart-stack-card-color);
  border-radius: 100%;
  align-self: center;
  margin-right: var(--telekom-spacing-composition-space-03);
}

.chart-stack-card .legend .legend__label {
  font-weight: var(--type-weight-bold);
  font-size: var(--telekom-spacing-composition-space-06);
  line-height: 200%;
}