Lehigh Clutch Style Guide

A Tag: Yellow 

<button class="btn btn-primary gold" role="button">
    <span class="button_text">Button Text</span>
    <span class="arrow fal fa-chevron-right"></span>
</button>
 
<button class="btn btn-primary {{ color }}" role="button">
  <span class="button_text">{{ text|raw }}</span>
  <span class="arrow fal fa-chevron-right"></span>
</button>
 
{
  "text": "Button Text",
  "url": "#",
  "color": "gold"
}
  • Content: 
    .btn,
.webform-file-button {
  -webkit-transition: all .25s;
  -moz-transition: all .25s;
  transition: all .25s;
  border-radius: 0;
  text-align: left;
  position: relative;
  font-weight: normal !important;
  width: fit-content;
  line-height: 1.2;
  padding: .375rem $space-and-half .375rem $space-one-half;

  &:hover,
  &:focus {
    text-decoration: none;
    -webkit-box-shadow: 5px 5px 10px 0 $drop_shadow;
    box-shadow: 5px 5px 10px 0 $drop_shadow;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;

    .color-scheme-dark & {
      -webkit-box-shadow: 5px 5px 10px 0 $drop_shadow_darkmode;
      box-shadow: 5px 5px 10px 0 $drop_shadow_darkmode;
    }
  }

  .button_text {
    margin: 0 $spacer 0 0;
    overflow: hidden;
  }

  .arrow {
    position: absolute;
    right: 5px;
    top: calc(50% - .45rem);

    .no-js & {
      transform: rotate(90deg);
      top: 2px;

      &::after {
        content: "^";
        font-size: 1.5rem;
        font-style: normal;
      }
    }
  }

  &.dark-grey {
    background-color: $grey_darkest;
    background-color: var(--grey_darkest, $grey_darkest);
    border: 1px solid $grey_darkest;
    border: 1px solid var(--grey_darkest, $grey_darkest);
    color: $white;
    color: var(--white, $white);

    &:hover,
    &:focus {
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);
      background-color: $white;
      background-color: var(--white, $white);
    }

    .color-scheme-dark & {
      background-color: $grey_darkest;
      background-color: var(--grey_darkest, $grey_darkest);
      border: 1px solid $grey_darkest;
      border: 1px solid var(--grey_darkest, $grey_darkest);
      color: $white;
      color: var(--white, $white);

      &:hover,
      &:focus {
        color: $grey_darkest;
        color: var(--grey_darkest, $grey_darkest);
        background-color: $white;
        background-color: var(--white, $white);
      }
    }
  }

  &.gold {
    background-color: $gold;
    background-color: var(--gold, $gold);
    border: 1px solid $gold;
    border: 1px solid var(--gold, $gold);
    color: $grey_darkest;
    color: var(--grey_darkest, $grey_darkest);

    &:hover,
    &:focus {
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);
      background-color: $white;
      background-color: var(--white, $white);
    }

    .color-scheme-dark & {
      background-color: $gold;
      background-color: var(--gold, $gold);
      border: 1px solid $gold;
      border: 1px solid var(--gold, $gold);
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);

      &:hover,
      &:focus {
        color: $grey_darkest;
        color: var(--grey_darkest, $grey_darkest);
        background-color: $white;
        background-color: var(--white, $white);
      }
    }
  }

  &.maroon {
    background-color: $maroon_light;
    background-color: var(--maroon_light, $maroon_light);
    border: 1px solid $maroon_light;
    border: 1px solid var(--maroon_light, $maroon_light);
    color: $white;
    color: var(--white, $white);

    &:hover,
    &:focus {
      color: $maroon_light;
      color: var(--maroon_light, $maroon_light);
      background-color: $white;
      background-color: var(--white, $white);
    }

    .color-scheme-dark & {
      background-color: $maroon_light;
      background-color: var(--maroon_light, $maroon_light);
      border: 1px solid $maroon_light;
      border: 1px solid var(--maroon_light, $maroon_light);
      color: $white;
      color: var(--white, $white);

      &:hover,
      &:focus {
        color: $maroon_light;
        color: var(--maroon_light, $maroon_light);
        background-color: $white;
        background-color: var(--white, $white);
      }
    }
  }

  &.green {
    background-color: $teal_60;
    background-color: var(--teal_60, $teal_60);
    border: 1px solid $teal_60;
    border: 1px solid var(--teal_60, $teal_60);
    color: $base_font;
    color: var(--base_font, $base_font);

    &:hover,
    &:focus {
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);
      background-color: $white;
      background-color: var(--white, $white);
    }

    .color-scheme-dark & {
      background-color: $teal_60;
      background-color: var(--teal_60, $teal_60);
      border: 1px solid $teal_60;
      border: 1px solid var(--teal_60, $teal_60);
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);

      &:hover,
      &:focus {
        color: $grey_darkest;
        color: var(--grey_darkest, $grey_darkest);
        background-color: $white;
        background-color: var(--white, $white);
      }
    }
  }

  &.blue {
    background-color: $blue_75;
    background-color: var(--blue_75, $blue_75);
    border: 1px solid $blue_75;
    border: 1px solid var(--blue_75, $blue_75);
    color: $base_font;
    color: var(--base_font, $base_font);

    &:hover,
    &:focus {
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);
      background-color: $white;
      background-color: var(--white, $white);
    }

    .color-scheme-dark & {
      background-color: $blue_75;
      background-color: var(--blue_75, $blue_75);
      border: 1px solid $blue_75;
      border: 1px solid var(--blue_75, $blue_75);
      color: $base_font;
      color: var(--base_font, $base_font);

      &:hover,
      &:focus {
        color: $grey_darkest;
        color: var(--grey_darkest, $grey_darkest);
        background-color: $white;
        background-color: var(--white, $white);
      }
    }
  }

  .extlink {
    display: none;
  }
}

.webform-button--submit {
  margin: 0;
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: bits/03-pieces/buttons/button/button.scss
  • Size: 5.7 KB

Button as the HTML ‘button’ element.