Lehigh Clutch Style Guide

Quick Buttons 

<div class="quick_buttons">
    <ul>
        <li><span class="icon far fa-calendar-alt"></span><span class="sr-only">Time of event: </span><span>December 31, 2020 - January 5, 2021</span></li>
        <li><span class="icon far fa-clock"></span><span class="sr-only">Time of event: </span><span>8:30am</span></li>
        <li><a href="#" class="quick-button-link"><span class="icon fas fa-map-marker-alt"></span><span class="sr-only">Location: </span><span>Location</span></a></li>
        <li><span class="icon fas fa-tag"></span><span class="sr-only">Category: </span><span>Category of event</span></li>
        <li><a href="#" class="quick-button-link"><span class="icon far fa-sitemap"></span><span class="sr-only">Department: </span><span>Department Name</span></a></li>
    </ul>
</div><!-- end quick_buttons -->
 
<div class="quick_buttons">
  <ul>
    {% for quick_button in quick_buttons %}
      <li>{% include "@quick_button" with quick_button only %}</li>
    {% endfor %}
  </ul>
</div><!-- end quick_buttons -->
 
{
  "quick_buttons": {
    "1": {
      "sr_text": "Time of event: ",
      "link_text": "December 31, 2020 - January 5, 2021",
      "fa_class": "far fa-calendar-alt"
    },
    "2": {
      "sr_text": "Time of event: ",
      "link_text": "8:30am",
      "fa_class": "far fa-clock"
    },
    "3": {
      "sr_text": "Location: ",
      "link_text": "Location",
      "quick_url": "#",
      "fa_class": "fas fa-map-marker-alt"
    },
    "4": {
      "sr_text": "Category: ",
      "link_text": "Category of event",
      "fa_class": "fas fa-tag"
    },
    "5": {
      "sr_text": "Department: ",
      "link_text": "Department Name",
      "quick_url": "#",
      "fa_class": "far fa-sitemap"
    }
  }
}
  • Content: 
    .quick_buttons {
  display: flex;
  justify-content: flex-start;
  z-index: 2;
  margin: $space_three_quarter 0;

  @include media-breakpoint-up(lg) {
    margin: $space_and_half 0;
  }

  ul {
    @include reset-list-nav;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $grey_darkest;
      font-size: .875rem;
      text-align: center;
      // padding: $spacer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
        transition: all 0.2s;
        max-width: 150px;
        min-width: 150px;

      @include media-breakpoint-up(lg) {
        max-width: 200px;
        font-size: 1rem;
      }

      .color-scheme-dark & {
        color: $white;
      }

      &:hover,
      &:focus {
        text-decoration: none;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;

        .icon {
          color: $lehigh_brown;

          .color-scheme-dark & {
            color: $lehigh_brown_darkmode;
            color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
          }
        }
      }

      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $grey_darkest;
        color: var(--grey_darkest, $grey_darkest);
        font-size: .875rem;
        border-bottom: 0;
        padding: $space_one_quarter;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;

        @include media-breakpoint-up(lg) {
          font-size: 1rem;
        }

        .color-scheme-dark & {
          color: $white;
          color: var(--white, $white);
        }

        .icon {
          font-size: 2.5rem;
          color: $accent_color;
          color: var(--accent_color, $accent_color);
          margin: 0 0 $space_one_half 0;
          -webkit-transition: all 0.2s;
          -moz-transition: all 0.2s;
          -ms-transition: all 0.2s;
          -o-transition: all 0.2s;
          transition: all 0.2s;

          @include media-breakpoint-up(lg) {
            font-size: 4rem;
            margin: 0 0 $spacer 0;
          }
        }

        &:hover,
        &:focus {
          text-decoration: none;
          background-color: $grey_20;
          background-color: var(--grey_20, $grey_20);
          -webkit-box-shadow: 5px 5px 10px $drop_shadow;
          -moz-box-shadow: 5px 5px 10px $drop_shadow;
          box-shadow: 5px 5px 10px $drop_shadow;
          -webkit-transition: all 0.2s;
          -moz-transition: all 0.2s;
          -ms-transition: all 0.2s;
          -o-transition: all 0.2s;
          transition: all 0.2s;

          .color-scheme-dark & {
            background-color: $dark_mode_grey;
            background-color: var(--dark_mode_grey, $dark_mode_grey);
            -webkit-box-shadow: 5px 5px 10px $drop_shadow_darkmode;
            -moz-box-shadow: 5px 5px 10px $drop_shadow_darkmode;
            box-shadow: 5px 5px 10px $drop_shadow_darkmode;
          }


          .icon {
            color: $lehigh_brown;
            color: var(--lehigh_brown, $lehigh_brown);

            .color-scheme-dark & {
              color: $lehigh_brown_darkmode;
              color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
            }
          }
        }
      }
    }
  }
}
  • URL: /components/raw/quick_buttons/quick_buttons.scss
  • Filesystem Path: bits/04-components/quick_buttons/quick_buttons.scss
  • Size: 3.6 KB

Display quick buttons component.