150 lines
2.7 KiB
SCSS
150 lines
2.7 KiB
SCSS
@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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|