Bootstrap Breakpoints with mixins.
/**
* Boostrap clearfix
* --
* @type {[type]}
*/
// Mixin itself
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
/**
* Boostrap Breakpoints / Mixins
* --
* @type {[type]}
*/
$mbl: 360px;
$mbl_wide: 480px;
$tablet: 768px;
$tablet_wide: 992px;
$desktop: 1200px;
$desktop_wide: 1600px;
@mixin mobile {
@media (min-width: #{$mbl}) {
@content;
}
}
@mixin mobile_wide {
@media (min-width: #{$mbl_wide}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$tablet}) {
@content;
}
}
@mixin tablet_wide {
@media (min-width: #{$tablet_wide}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$desktop}) {
@content;
}
}
@mixin desktop_wide {
@media (min-width: #{$desktop_wide}) {
@content;
}
}
/**
* V - Center
* --
* @type {[type]}
*/
.center_content{
position: relative;
top: 50%;
transform: translateY(-50%);
}