barebones/assets/sass/config/_mixins.scss

84 lines
1.2 KiB
SCSS
Executable File

/*
* Media query to respond to a minimum size (mobile first)
*/
@mixin resp-min($size) {
@media screen and (min-width: $size) {
@content;
}
}
/*
* Media query to respond to a maximum size
*/
@mixin resp-max($size) {
@media screen and (max-width: $size) {
@content;
}
}
/*
* Output font size in px/rem
*/
@mixin font-size($px) {
font-size: $px + px;
font-size: #{$px / 16}rem;
}
/*
* Placeholder mixin for <input>
*/
@mixin placeholder {
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
@each $placeholder in $placeholders {
&:#{$placeholder}-placeholder {
@content;
}
}
}
/**
* Clearfix
*/
@mixin clearfix {
&:before,
&:after{
content: " ";
display: table;
}
&:after{
clear: both;
}
}
/**
* Positioning
*/
@mixin center($horizontal: true, $vertical: true) {
position: absolute;
@if ($horizontal and $vertical) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@else if ($horizontal) {
left: 50%;
transform: translateX(-50%);
}
@else if ($vertical) {
top: 50%;
transform: translateY(-50%);
}
}