138 lines
2.1 KiB
SCSS
138 lines
2.1 KiB
SCSS
/**
|
|
use with @extend
|
|
percentage sign % are maks of sass's placeholder selectors.
|
|
they are rendered only if extended.
|
|
for example :
|
|
.my-container {
|
|
@extend %clearfix;
|
|
}
|
|
**/
|
|
%clearfix {
|
|
*zoom: 1;
|
|
&:before, &:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
/**
|
|
hide elements in an evil way
|
|
**/
|
|
%visuallyhidden {
|
|
margin: -1px;
|
|
padding: 0;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
clip: rect(0, 0, 0, 0);
|
|
position: absolute;
|
|
}
|
|
.visually-hidden {
|
|
@extend %visuallyhidden;
|
|
}
|
|
|
|
/**
|
|
to use with @include
|
|
media query mixin
|
|
**/
|
|
$size-lg : '60em';
|
|
$size-md : '40em';
|
|
$size-sm : '30em';
|
|
|
|
// defaults are defined
|
|
@mixin mq($min : '40em',$max : '60em') {
|
|
@media only screen and (min-width: #{$max}) and (max-width: #{$max}) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin mq-large {
|
|
@media only screen and (max-width: $size-lg) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin mq-medium {
|
|
@media only screen and (max-width: $size-md) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin mq-small {
|
|
@media only screen and (max-width: $size-sm) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
/**
|
|
set color and background color in one time
|
|
**/
|
|
@mixin color-and-bg($text, $background) {
|
|
color: $text;
|
|
background-color: $background;
|
|
}
|
|
// helpers
|
|
|
|
.padded {
|
|
padding: 1em;
|
|
}
|
|
|
|
.padded-sm {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
// vertical padding only
|
|
.padded-v {
|
|
padding: 1em 0;
|
|
}
|
|
|
|
.padded-h {
|
|
padding: 0 1em;
|
|
}
|
|
.absolutely {
|
|
position: absolute;
|
|
}
|
|
.block {
|
|
display: block;
|
|
}
|
|
|
|
.centered {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.columned {
|
|
-webkit-column-count: 3;
|
|
-moz-column-count: 3;
|
|
column-count: 3;
|
|
}
|
|
|
|
// transitions
|
|
.slow-ease {
|
|
-webkit-transition: all ease 1s;
|
|
-moz-transition: all ease 1s;
|
|
-ms-transition: all ease 1s;
|
|
-o-transition: all ease 1s;
|
|
transition: all ease 1s;
|
|
}
|
|
.fast-ease {
|
|
-webkit-transition: all ease 0.4s;
|
|
-moz-transition: all ease 0.4s;
|
|
-ms-transition: all ease 0.4s;
|
|
-o-transition: all ease 0.4s;
|
|
transition: all ease 0.4s;
|
|
}
|
|
|
|
.fastest-ease {
|
|
-webkit-transition: all ease 0s;
|
|
-moz-transition: all ease 0s;
|
|
-ms-transition: all ease 0s;
|
|
-o-transition: all ease 0s;
|
|
transition: all ease 0s;
|
|
}
|
|
.debug{
|
|
display: inline-block;
|
|
background: orange;
|
|
}
|