hacks-guide-minimal-mistake.../assets/_scss/_utilities.scss

255 lines
4.4 KiB
SCSS
Raw Normal View History

2016-03-10 17:13:54 +01:00
/* ==========================================================================
UTILITY CLASSES
========================================================================== */
/*
Visibility
========================================================================== */
/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
.hidden {
display: none;
visibility: hidden;
}
/* for preloading images */
.load {
display: none;
}
.transparent {
opacity: 0;
}
/* https://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
========================================================================== */
/* center align */
.center {
text-align: center;
}
/*
Alignment
========================================================================== */
/* clearfix */
.cf { clear: both; }
/*
Images
========================================================================== */
/* image align left */
2016-03-11 21:55:06 +01:00
.align-left {
2016-03-10 17:13:54 +01:00
display: block;
margin-left: auto;
margin-right: auto;
2016-03-21 21:36:24 +01:00
2016-03-10 17:13:54 +01:00
@include breakpoint($small) {
float: left;
margin-right: 1em;
}
}
/* image align right */
2016-03-11 21:55:06 +01:00
.align-right {
2016-03-10 17:13:54 +01:00
display: block;
margin-left: auto;
margin-right: auto;
2016-03-21 21:36:24 +01:00
2016-03-10 17:13:54 +01:00
@include breakpoint($small) {
float: right;
margin-left: 1em;
}
}
/* file page content container */
.full {
@include breakpoint($large){
margin-right: -1 * $right-sidebar-width;
}
}
2016-03-10 17:13:54 +01:00
/*
Icons
========================================================================== */
.icon {
display: inline-block;
fill: currentColor;
width: 1em;
height: 1.1em;
line-height: 1;
position: relative;
top: -0.1em;
vertical-align: middle;
}
/*
Navicons
========================================================================== */
$navicon-width : 32px;
$navicon-height : 4px;
.navicon {
position: relative;
width: $navicon-width;
height: $navicon-height;
background: #fff;
margin: auto;
transition: 0.3s;
&:before,
&:after {
content: "";
position: absolute;
left: 0;
width: $navicon-width;
height: $navicon-height;
background: #fff;
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{
transform-origin: 50% 50%;
top: 0;
width: $navicon-width;
}
// rotate the lines to form the x shape
&:before{
transform: rotate3d(0,0,1,45deg);
}
&:after{
transform: rotate3d(0,0,1,-45deg);
}
}
/*
Sticky, fixed to top content
========================================================================== */
.sticky {
@include breakpoint($medium) {
@include clearfix();
position: -webkit-sticky;
position: sticky;
top: 3em;
2016-03-21 21:36:24 +01:00
> * {
display: block;
}
}
}
2016-03-10 17:13:54 +01:00
/*
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);
}
/*
Footnotes
========================================================================== */
.footnotes {
ol, li, p {
margin-bottom: 0;
font-size: 14px;
}
2016-03-21 21:36:24 +01:00
}