@telekom/scale-components/dist/collection/components/telekom/telekom-footer/telekom-footer.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-telekom-footer {
  --font-size: var(--telekom-typography-font-size-caption);
  --font-color: var(--telekom-color-text-and-icon-white-standard);

  --font-large: var(--telekom-text-style-ui);
  --background-footer: var(--telekom-color-ui-black);
  --background-footer-minimal: var(--telekom-color-background-canvas);

  --_nav-items-bottom-margin: var(--telekom-spacing-composition-space-08);
  --_nav-items-spacing: var(--telekom-spacing-composition-space-05);
}

.scale-telekom-footer :where(ul),
.scale-telekom-footer[type='minimal'] :where(ul) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--_nav-items-spacing);
  padding: 0;
  margin: 0;
  width: 100%;
  color: var(--font-color);
  list-style: none;
}

/* this is a workaround to host-context not working in FF and safari */
.scale-telekom-footer[type='minimal'] scale-telekom-footer-content {
  --background-footer: var(--background-footer-minimal);
  --_font-color: var(--telekom-color-text-and-icon-additional);
  --_display-logo: none;
  --_navigation-container-padding: var(--telekom-spacing-composition-space-06) 0
    var(--telekom-spacing-composition-space-06) 0;
  --_nav-items-bottom-margin: 0;
}

.scale-telekom-footer :where(a, span),
.scale-telekom-footer[type='minimal'] :where(a, span) {
  display: flex;
  justify-content: center;
  font-size: var(--font-size);
  color: var(--font-color);
  line-height: 140%;
  text-decoration: none;
  /* TODO: is the underline still needed? */
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 2px;
}

.scale-telekom-footer[type='minimal'] :where(a, span) {
  color: var(--telekom-color-text-and-icon-standard);
}

.scale-telekom-footer[type='minimal'] :where(ul) {
  margin-bottom: 0;
}

.scale-telekom-footer[type='minimal'] a:hover {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}
.scale-telekom-footer[type='minimal'] a:active {
  color: var(--telekom-color-text-and-icon-primary-pressed);
}

.scale-telekom-footer :where(a:hover) {
  border-radius: 0;
  border-bottom: 1px solid var(--font-color);
}

.scale-telekom-footer :where(a:active) {
  color: var(--telekom-color-text-and-icon-white-additional);
  /* TODO: is the underline still needed? */
  border-bottom: 1px solid var(--telekom-color-text-and-icon-white-additional);
}

.scale-telekom-footer[type='minimal'] :where(a:focus-visible) {
  outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  outline-offset: 1px;
}

.scale-telekom-footer:not([type='minimal']) :where(a:focus-visible) {
  outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-on-dark-background);
  outline-offset: 1px;
}

.scale-telekom-footer:not([type='minimal'])
  scale-telekom-footer-extended-navigation-column
  :where(a:focus-visible) {
  outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  outline-offset: 1px;
}

@media screen and (min-width: 640px) {
  .scale-telekom-footer :where(ul),
  .scale-telekom-footer[type='minimal'] :where(ul) {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    column-gap: var(--_nav-items-spacing);
    row-gap: var(--telekom-spacing-composition-space-03);
  }
}

@media screen and (min-width: 1040px) {
  .scale-telekom-footer :where(ul),
  .scale-telekom-footer[type='minimal'] :where(ul) {
    --_nav-items-spacing: var(--telekom-spacing-composition-space-08);
    row-gap: var(--telekom-spacing-composition-space-04);
  }
  .scale-telekom-footer :where(a, span) {
    font: var(--font-large);
  }
}

@media screen and (min-width: 1296px) {
  .scale-telekom-footer :where(ul),
  .scale-telekom-footer[type='minimal'] :where(ul) {
    --_nav-items-spacing: var(--telekom-spacing-composition-space-14);
  }
}