@scania/tegel
Version:
Tegel Design System
56 lines (55 loc) • 2.02 kB
CSS
:host([role=listitem]) div ::slotted(a),
:host([role=listitem]) div ::slotted(button) {
font: var(--tds-headline-07);
letter-spacing: var(--tds-headline-07-ls);
color: var(--tds-footer-main-links);
text-decoration: none;
}
:host([role=listitem]) div ::slotted(a:focus-visible),
:host([role=listitem]) div ::slotted(button:focus-visible) {
outline: 2px solid var(--tds-focus-outline-color);
box-shadow: 0 0 0 1px var(--tds-white);
outline-offset: 1px;
z-index: 1;
}
:host([role=listitem]) div ::slotted(a:hover),
:host([role=listitem]) div ::slotted(button:hover) {
text-decoration: underline;
}
:host([role=listitem]) div.top-part-child ::slotted(a),
:host([role=listitem]) div.top-part-child ::slotted(button) {
font: var(--tds-headline-07);
letter-spacing: var(--tds-headline-07-ls);
color: var(--tds-footer-top-links);
}
:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
outline: 2px solid var(--tds-focus-outline-color);
box-shadow: 0 0 0 1px var(--tds-white);
outline-offset: 1px;
z-index: 1;
}
@media all and (max-width: 992px) {
:host([role=listitem]) div.top-part-child {
border-bottom: 1px solid var(--tds-footer-top-divider);
}
:host([role=listitem]) div.top-part-child ::slotted(a),
:host([role=listitem]) div.top-part-child ::slotted(button) {
display: block;
height: 100%;
padding: 19px 40px;
font-weight: normal;
}
:host([role=listitem]) div.top-part-child ::slotted(a:active),
:host([role=listitem]) div.top-part-child ::slotted(button:active) {
text-decoration: underline;
background-color: var(--tds-footer-top-links-background-active);
}
:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
outline: 2px solid var(--tds-focus-outline-color);
box-shadow: 0 0 0 1px var(--tds-white);
outline-offset: 1px;
z-index: 1;
}
}