/* ==========================================================================
UTILITY CLASSES ========================================================================== */
/*
Visibility ========================================================================== */
/* www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
.hidden {
display: none; visibility: hidden;
}
/* for preloading images */
.load {
display: none;
}
.transparent {
opacity: 0;
}
/* developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
.visually-hidden, .screen-reader-text, .screen-reader-text span, .screen-reader-shortcut {
position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; width: 1px !important; border: 0 !important; overflow: hidden;
}
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button {
display: none !important;
}
/* screen readers */
.screen-reader-text:focus, .screen-reader-shortcut:focus {
clip: auto !important; height: auto !important; width: auto !important; display: block; font-size: 1em; font-weight: bold; padding: 15px 23px 14px; background: #fff; z-index: 100000; text-decoration: none; box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}
/*
Skip links ========================================================================== */
.skip-link {
position: fixed; z-index: 20; margin: 0; font-family: $sans-serif; white-space: nowrap;
}
.skip-link li {
height: 0; width: 0; list-style: none;
}
/*
Type ========================================================================== */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}
/*
Alignment ========================================================================== */
/* clearfix */
.cf { clear: both; }
.wrapper {
@include container();
}
/*
Images ========================================================================== */
/* image align left */
.align-left {
display: block; margin-left: auto; margin-right: auto; @include breakpoint($small) { float: left; margin-right: 1em; }
}
/* image align right */
.align-right {
display: block; margin-left: auto; margin-right: auto; @include breakpoint($small) { float: right; margin-left: 1em; }
}
/* image align center */
.align-center {
display: block; margin-left: auto; margin-right: auto;
}
/* file page content container */
.full {
@include breakpoint($large){ margin-right: -1 * span(2.5 of 12) !important; }
}
/*
Icons ========================================================================== */
.icon {
display: inline-block; fill: currentColor; width: 1em; height: 1.1em; line-height: 1; position: relative; top: -0.1em; vertical-align: middle;
}
/* social icons*/
.social-icons {
.fa { color: #000; } .fa-behance, .fa-behance-square { color: $behance-color; } .fa-dribbble { color: $dribbble-color; } .fa-facebook, .fa-facebook-square { color: $facebook-color; } .fa-flickr { color: $flickr-color; } .fa-foursquare { color: $foursquare-color; } .fa-github, .fa-github-alt, .fa-github-square { color: $github-color; } .fa-google-plus, .fa-google-plus-square { color: $google-plus-color; } .fa-instagram { color: $instagram-color; } .fa-lastfm, .fa-lastfm-square { color: $lastfm-color; } .fa-linkedin, .fa-linkedin-square { color: $linkedin-color; } .fa-pinterest, .fa-pinterest-p, .fa-pinterest-square { color: $pinterest-color; } .fa-rss, .fa-rss-square { color: $rss-color; } .fa-soundcloud { color: $soundcloud-color; } .fa-stack-exchange, .fa-stack-overflow { color: $stackoverflow-color; } .fa-tumblr, .fa-tumblr-square { color: $tumblr-color; } .fa-twitter, .fa-twitter-square { color: $twitter-color; } .fa-vimeo, .fa-vimeo-square { color: $vimeo-color; } .fa-vine { color: $vine-color; } .fa-youtube, .fa-youtube-square, .fa-youtube-play { color: $youtube-color; } .fa-xing, .fa-xing-square { color: $xing-color; }
}
/*
Navicons ========================================================================== */
.navicon {
position: relative; width: $navicon-width; height: $navicon-height; background: #fff; margin: auto; -webkit-transition: 0.3s; transition: 0.3s; &:before, &:after { content: ""; position: absolute; left: 0; width: $navicon-width; height: $navicon-height; background: #fff; -webkit-transition: 0.3s; transition: 0.3s; } &:before { top: (-2 * $navicon-height); } &:after { bottom: (-2 * $navicon-height); }
}
.close .navicon {
/* hide the middle line*/ background: transparent; /* overlay the lines by setting both their top values to 0*/ &:before, &:after{ -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 0; width: $navicon-width; } /* rotate the lines to form the x shape*/ &:before{ -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); } &:after{ -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); }
}
/*
Sticky, fixed to top content ========================================================================== */
.sticky {
@include breakpoint($large) { @include clearfix(); position: -webkit-sticky; position: sticky; top: 2em; > * { display: block; } }
}
/*
Wells ========================================================================== */
.well {
min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: $border-radius; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
/*
Modals ========================================================================== */
.show-modal {
overflow: hidden; position: relative; &:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: rgba(255, 255, 255, 0.85); } .modal { display: block; }
}
.modal {
display: none; position: fixed; width: 300px; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; min-height: 0; z-index: 9999; background: #fff; border: 1px solid $border-color; border-radius: $border-radius; box-shadow: $box-shadow; &__title { margin: 0; padding: 0.5em 1em; } &__supporting-text { padding: 0 1em 0.5em 1em; } &__actions { padding: 0.5em 1em; border-top: 1px solid $border-color; }
}
/*
Footnotes ========================================================================== */
.footnote {
color: mix(#fff, $gray, 25%); text-decoration: none;
}
.footnotes {
color: mix(#fff, $gray, 25%); ol, li, p { margin-bottom: 0; font-size: $type-size-6; }
}
a.reversefootnote {
color: $gray; text-decoration: none; &:hover { text-decoration: underline; }
}
/*
Required ========================================================================== */
.required {
color: $danger-color; font-weight: bold;
}