No notes defined.
<div class="wrap">
<ul class="list--inline font-lg">
<li>
<span class="button button--grey"><i class="icon icon--360"></i> 360</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--360-red"></i> 360-red</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--app-store"></i> app-store</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--book-red"></i> book-red</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--calendar"></i> calendar</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--circle-padlock-white"></i> circle-padlock-white</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--clock"></i> clock</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--envelope"></i> envelope</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--facebook"></i> facebook</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--facebook-white"></i> facebook-white</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--form"></i> form</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--globe"></i> globe</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--instagram"></i> instagram</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--instagram-white"></i> instagram-white</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--linkedin"></i> linkedin</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--linkedin-white"></i> linkedin-white</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--person"></i> person</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--phone"></i> phone</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--pin"></i> pin</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--pin-red"></i> pin-red</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--pinterest"></i> pinterest</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--pinterest-white"></i> pinterest-white</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--play-circle-red"></i> play-circle-red</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--play-store"></i> play-store</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--pricetag"></i> pricetag</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--snapchat"></i> snapchat</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--snapchat-white"></i> snapchat-white</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--tiktok"></i> tiktok</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--tiktok-white"></i> tiktok-white</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--twitter"></i> twitter</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--twitter-white"></i> twitter-white</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--x-white"></i> x-white</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--youtube"></i> youtube</span>
</li>
<li>
<span class="button button--grey"><i class="icon icon--youtube-white"></i> youtube-white</span>
</li>
</ul>
</div>
{% set icons = ["360", "360-red", "app-store", "book-red", "calendar", "circle-padlock-white", "clock", "envelope", "facebook", "facebook-white", "form", "globe", "instagram", "instagram-white", "linkedin", "linkedin-white", "person", "phone", "pin", "pin-red", "pinterest", "pinterest-white", "play-circle-red", "play-store", "pricetag", "snapchat", "snapchat-white", "tiktok", "tiktok-white", "twitter", "twitter-white", "x-white", "youtube", "youtube-white"] %}
<div class="wrap">
<ul class="list--inline font-lg">
{% for name in icons %}
<li>
<span class="button button--grey"><i class="icon icon--{{name}}"></i> {{name}}</span>
</li>
{% endfor %}
</ul>
</div>
// add icons to this array with their filename and type,
// the loop at the bottom of the file will create classes for them
$icons: (
'360' : 'svg',
'360-red' : 'svg',
'app-store': 'svg',
'envelope': 'svg',
'external-link': 'svg',
'phone': 'svg',
'facebook': 'svg',
'pin': 'svg',
'pin-red': 'svg',
'book-red': 'svg',
'calendar': 'svg',
'clock': 'svg',
'circle-padlock-white': 'svg',
'pricetag': 'svg',
'facebook-white': 'svg',
'instagram': 'svg',
'instagram-white': 'svg',
'linkedin': 'svg',
'linkedin-white': 'svg',
'more' : 'svg',
'pinterest': 'svg',
'pinterest-white': 'svg',
'play-circle-red': 'svg',
'play-store': 'svg',
'snapchat': 'svg',
'snapchat-white': 'svg',
'tiktok': 'svg',
'tiktok-white': 'svg',
'twitter': 'svg',
'twitter-white': 'svg',
'youtube': 'svg',
'youtube-white': 'svg',
'form' : 'svg',
'globe' : 'svg',
'person' : 'svg',
'video' : 'svg',
'x' : 'svg',
'x-white' : 'svg'
);
.icon {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
text-align: center;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
vertical-align: baseline;
top: 0.1em;
svg,
img {
display: inline-block;
width: 100%;
max-height: 100%;
vertical-align: middle;
}
svg {
height: 100%;
//fill: #000;
}
&:before {
font-size: 1em;
display: inline-block;
}
@each $name, $extension in $icons {
&--#{$name} {
background-image: url('#{$image-theme-directory-icon}/icon-#{$name}.#{$extension}');
}
}
}
.facility-icons {
font-weight: 500;
&__item {
float: left;
position: relative;
padding-bottom: 30%; // CG: = width for a 1:1 aspect ratio
margin: 1.66%;
overflow: hidden;
background-color: $grey--light;
text-transform: uppercase;
margin-bottom: 1rem;
}
&__content {
position: absolute;
height: 90%; // CG: = 100% - 2 * 5% padding
width: 90%; // CG: = 100% - 2 * 5% padding
padding: 5%;
text-align: center;
}
&__image {
margin-bottom: 0;
}
}
.tile__icon { width: 43%; margin-top: 5%; }