<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 far fa-map-marker-alt"></span><span class="sr-only">Location: </span><span>Location</span></a></li>
<li><span class="icon far 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>
<li><span class="icon far fa-users"></span><span class="sr-only">In-person</span><span>In-person</span></li>
<li><span class="icon far fa-house-laptop"></span><span class="sr-only">Hybrid</span><span>Hybrid</span></li>
<li><span class="icon far fa-laptop"></span><span class="sr-only">Remote</span><span>Remote</span></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": "far fa-map-marker-alt"
},
"4": {
"sr_text": "Category: ",
"link_text": "Category of event",
"fa_class": "far fa-tag"
},
"5": {
"sr_text": "Department: ",
"link_text": "Department Name",
"quick_url": "#",
"fa_class": "far fa-sitemap"
},
"6": {
"sr_text": "In-person",
"link_text": "In-person",
"fa_class": "far fa-users"
},
"7": {
"sr_text": "Hybrid",
"link_text": "Hybrid",
"fa_class": "far fa-house-laptop"
},
"8": {
"sr_text": "Remote",
"link_text": "Remote",
"fa_class": "far fa-laptop"
}
}
}
.quick_buttons {
display: flex;
justify-content: flex-start;
z-index: 2;
margin: 0 0 $space_three_quarter 0;
@include media-breakpoint-up(lg) {
margin: 0 0 $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;
.accent-patina-green & {
color: $patina-green;
color: var(--patina-green, $patina-green);
}
.accent-first-light & {
color: $valley-green;
color: var(--valley-green, $valley-green);
}
.accent-lehigh_brown & {
color: $autumn-dusk;
color: var(--autumn-dusk, $autumn-dusk);
}
.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);
}
}
}
}
}
}
}
Display quick buttons component.