@telekom/scale-components
Version:
Scale is the digital design system for Telekom products and experiences.
82 lines (67 loc) • 1.89 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/.
*/
/**
* @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 {
--spacing-x-icon: 1ch;
grid-column: auto / span 3;
}
:host(:first-child) {
grid-column: 3 / span 3;
}
:host-context([children-too-many]):host(:first-child) {
grid-column: 2 / span 3;
}
@media screen and (min-width: 1680px) {
:host-context([children-too-many]):host(:first-child) {
grid-column: 1 / span 3;
}
}
[part~='base'] {
display: flex;
flex-direction: column;
}
[part~='icon'] {
transform: translateY(-0.125ch);
}
@media screen and (min-width: 1296px) {
[part~='base'] {
flex-direction: row;
}
[part~='icon'] ::slotted(*) {
padding-right: var(--spacing-x-icon);
}
}
[part~='heading'] {
display: flex;
align-items: flex-start;
height: calc(var(--telekom-typography-line-spacing-standard) * 2rem);
font-weight: var(--telekom-typography-font-weight-bold);
line-height: var(--telekom-typography-line-spacing-tight);
}
[part~='heading-has-link'] [part~='heading']:hover {
color: var(--telekom-color-text-and-icon-primary-hovered);
}
[part~='heading-has-link'] [part~='heading']:active {
color: var(--telekom-color-text-and-icon-primary-pressed);
}
[part~='icon-arrow-right'] {
margin-top: 0.5ch;
margin-left: 0.5ch;
}