Contents

$button-border: darken($accent-color, 8%);
$button-border-dark: lighten($accent-color-dark, 8%);

a {
  &:not(.button) {
    &:link {
      color: $accent-color;
      text-decoration-color: $accent-color;

      @media (prefers-color-scheme: dark) {
        color: $accent-color-dark;
        text-decoration-color: $accent-color-dark;
      }

      text-decoration-line: underline;
      text-underline-position: under;
    }

    &:visited {
      color: $accent-color;
      text-decoration-color: $accent-color;

      @media (prefers-color-scheme: dark) {
        color: $accent-color-dark;
        text-decoration-color: $accent-color-dark;
      }

      text-decoration-line: underline;
    }

    &:hover,
    &:focus {
      outline: 0;
      color: $accent-inverted;
      background-color: $accent-color;

      @media (prefers-color-scheme: dark) {
        color: $accent-inverted-dark;
        background-color: $accent-color-dark;
      }

      padding: 8px;
      margin: -8px;
    }

    &:active {
      color: $accent-inverted-active;
      @media (prefers-color-scheme: dark) {
        color: $accent-inverted-active-dark;
      }
    }
  }

  &.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    text-decoration: none;

    background-color: $accent-color;
    color: $accent-inverted;
    border: 1px solid $button-border;

    @media (prefers-color-scheme: dark) {
      background-color: $accent-color-dark;
      color: $accent-inverted-dark;
      border: 1px solid $button-border-dark;
    }

    align-items: center;
    border-radius: 4px;
    box-shadow: none;
    display: inline-flex;
    font-size: inherit;
    justify-content: center;
    padding: 0.5em 1em;
    position: relative;
    vertical-align: top;

    cursor: pointer;

    &:hover {
      background-color: $button-border;
      @media (prefers-color-scheme: dark) {
        background-color: $button-border-dark;
      }
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
kids-0.2.0	_sass/kids/_links.scss