Are we Design Tokens yet?

browser/components/ipprotection/content/locations-subview.css

Propagation: 100%

Back to Home

/* 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/. */

#locations-list-wrapper {
  padding-block-end: var(--space-xlarge);
}

#locations-list-description {
  display: flex;
  padding-inline-start: calc(var(--panel-menuitem-margin-inline) + var(--panel-menuitem-padding-inline) + var(--icon-size) + var(--space-small));
  padding-block: var(--space-small);
  color: var(--text-color-deemphasized);
}

#locations-list {
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    display: flex;
  }
}

.location-item {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  flex: 1;
  border: none;
  color: var(--button-text-color-menu);
  background-color: var(--button-background-color-menu);
  text-align: start;

  &:not([disabled]):hover {
    color: var(--button-text-color-menu-hover);
    background-color: var(--button-background-color-menu-hover);

    &:active {
      color: var(--button-text-color-menu-active);
      background-color: var(--button-background-color-menu-active);
    }
  }

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-inset);
  }

  &[aria-checked="true"] {
    .location-check {
      visibility: visible;
    }
    .location-label {
      font-weight: var(--font-weight-bold);
    }
  }

  &[disabled] {
    .location-label,
    .location-description {
      color: var(--text-color-deemphasized);
    }
  }

  @media (prefers-contrast) {
    border: var(--button-border);
  }

  @media (forced-colors) {
    border: var(--button-border);
  }
}

.location-check {
  visibility: hidden;
  -moz-context-properties: fill;
  fill: var(--icon-color);
  height: var(--icon-size);
  width: var(--icon-size);
}

.location-label-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-xxsmall);
}

.location-description {
  font-size: var(--font-size-small);
  color: var(--text-color-deemphasized);
}

#locations-subview-promo {
  margin-inline: var(--space-medium);
}

Back to Home