hubl/src/styles/mixins.scss

150 lines
2.8 KiB
SCSS
Raw Normal View History

2018-09-28 19:20:15 +00:00
@charset "UTF-8";
@mixin debug {
$hsla: hsla(random(360), 100%, 50%, 0.3);
background-color: $hsla;
}
@mixin log($v) {
font-family: '__log__:#{$v}';
}
@mixin offset($corner: 1, $x: 0, $y: 0) {
// corner:
// 1-----2
// | |
// | |
// 3-----4
position: absolute;
@if ($corner == 1) {
top: $y;
left: $x;
}
@if ($corner == 2) {
top: $y;
right: $x;
}
@if ($corner == 3) {
bottom: $y;
left: $x;
}
@if ($corner == 4) {
bottom: $y;
right: $x;
}
}
@mixin position($top: 0, $right: null, $bottom: null, $left: null) {
// --1--
// | |
// 4 2
// | |
// --3--
@if ($right == null) {
$right: $top;
}
@if ($bottom == null) {
$bottom: $top;
}
@if ($left == null) {
$left: $right;
}
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
@mixin pos($pos: 5, $position: absolute) {
// ╔═──┐ ╔═══╗ ┌──═╗
// │ 1 │ │ 2 │ │ 3 │
// └───┘ └───┘ └───┘
// ╔═──┐ ╔═══╗ ┌──═╗
// ║ 4 │ ║ 5 ║ │ 6 ║
// ╚═──┘ ╚═══╝ └──═╝
// ┌───┐ ┌───┐ ┌───┐
// │ 7 │ │ 8 │ │ 9 │
// ╚═──┘ ╚═══╝ └──═╝
$mod: ($pos - 1) % 3;
position: $position;
@if ($pos <= 6) {
top: 0;
}
@if ($mod <= 1) {
left: 0;
}
@if ($mod >= 1) {
right: 0;
}
@if ($pos >= 4) {
bottom: 0;
}
}
2018-11-16 10:33:39 +00:00
// @mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
// &:after {
// content: '';
// position: absolute;
// top: if(($border == bottom), auto, 0);
// left: if(($border == right), auto, 0);
// right: if(($border == left), auto, 0);
// bottom: if(($border == top), auto, 0);
// background-image: linear-gradient(to #{$border}, $color, transparent);
// #{$border}: -$size;
// opacity: $opacity;
// @if ($border == top or $border == bottom) {
// height: $size;
// } @else {
// width: $size;
// }
// }
// }
2018-09-28 19:20:15 +00:00
@mixin align($horizontal: center, $vertical: middle) {
text-align: $horizontal;
white-space: nowrap;
&:after,
> * {
display: inline-block;
vertical-align: $vertical;
}
&:after {
content: '';
height: 100%;
width: 0;
visibility: hidden;
}
> * {
//text-align:left;
white-space: normal;
}
}
@mixin list-reset($deep: 0) {
padding: 0;
margin: 0;
display: block;
list-style: none;
@if ($deep == 0) {
> li {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
} @else {
ul,
ol,
li {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
}
}