2020-04-15 08:59:21 +02:00
|
|
|
/*
|
2020-04-15 12:53:19 +02:00
|
|
|
* Fixes an element on the page to take up all the space or only part of it.
|
2020-04-15 08:59:21 +02:00
|
|
|
* $side: all (default), top, bottom
|
2020-04-15 12:53:19 +02:00
|
|
|
*
|
|
|
|
* Examples: @include pin() , @include pin('top'), @include pin('bottom', 2500)
|
2020-04-15 08:59:21 +02:00
|
|
|
*/
|
2020-04-15 12:53:19 +02:00
|
|
|
@mixin pin($side: all, $z-index: 1000)
|
2020-04-12 17:38:51 +02:00
|
|
|
position: fixed
|
|
|
|
left: 0
|
|
|
|
right: 0
|
2020-04-15 12:53:19 +02:00
|
|
|
z-index: $z-index
|
2020-04-15 08:59:21 +02:00
|
|
|
@if $side == 'all'
|
|
|
|
top: 0
|
|
|
|
bottom: 0
|
|
|
|
@else if $side == 'top'
|
|
|
|
top: 0
|
|
|
|
@else if $side == 'bottom'
|
|
|
|
bottom: 0
|
2020-04-14 21:10:44 +02:00
|
|
|
|
2020-04-17 20:32:46 +02:00
|
|
|
/*
|
|
|
|
* Add a border through the shadows avoiding extra space.
|
|
|
|
* $size: unit
|
|
|
|
*
|
|
|
|
* Examples: @include sizeSquare(4rem) , @include sizeSquare(10px)
|
|
|
|
*/
|
2020-04-15 09:18:54 +02:00
|
|
|
@mixin sizeSquare($size)
|
2020-04-14 22:31:13 +02:00
|
|
|
width: $size
|
|
|
|
height: $size
|
2020-05-23 19:45:22 +02:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Remove initial styles <ul>
|
|
|
|
*
|
|
|
|
* Examples: @include ulReset()
|
|
|
|
*/
|
|
|
|
@mixin ulReset()
|
2020-05-23 19:49:29 +02:00
|
|
|
list-style: none
|
2020-05-23 19:45:22 +02:00
|
|
|
padding: initial
|
|
|
|
margin: initial
|
2020-06-04 16:13:18 +02:00
|
|
|
|
|
|
|
/*
|
|
|
|
* Remove initial styles <button>
|
|
|
|
*
|
|
|
|
* Examples: @include buttonReset()
|
|
|
|
*/
|
|
|
|
@mixin buttonReset()
|
|
|
|
background: initial
|
|
|
|
border: initial
|
|
|
|
padding: initial
|
|
|
|
margin: initial
|
2020-04-14 22:31:13 +02:00
|
|
|
|
2020-04-14 21:50:39 +02:00
|
|
|
/*
|
2020-04-17 20:32:46 +02:00
|
|
|
* Add a border through the shadows avoiding extra space.
|
2020-05-23 19:45:22 +02:00
|
|
|
* $size: 1px (default), unit
|
|
|
|
* $color: black (default), color
|
2020-04-15 08:59:21 +02:00
|
|
|
* $side: all (default), top, right, bottom, left
|
2020-05-23 19:45:22 +02:00
|
|
|
*
|
2020-09-03 12:24:34 +02:00
|
|
|
* Examples: @include border(), @include border(2px, red), @include border(2px, red, left)
|
2020-04-14 21:50:39 +02:00
|
|
|
*/
|
|
|
|
@mixin border($size: 1px, $color: black, $side: all)
|
|
|
|
border: 0
|
|
|
|
-webkit-appearance: none
|
|
|
|
@if $side == 'all'
|
|
|
|
box-shadow: inset 0 0 0 $size $color
|
|
|
|
@else if $side == 'top'
|
|
|
|
box-shadow: inset 0 $size 0 0 $color
|
|
|
|
@else if $side == 'right'
|
|
|
|
box-shadow: inset -#{$size} 0 0 0 $color
|
|
|
|
@else if $side == 'left'
|
|
|
|
box-shadow: inset $size 0 0 0 $color
|
|
|
|
@else if $side == 'bottom'
|
|
|
|
box-shadow: inset 0 -#{$size} 0 0 $color
|
|
|
|
|
2020-05-23 19:45:22 +02:00
|
|
|
/*
|
|
|
|
* Add a rotation animation.
|
|
|
|
* $speed: 1s (default), seconds
|
|
|
|
*
|
|
|
|
* Examples: @include animationRotate(2s), @include animationRotate(0.5s)
|
|
|
|
*/
|
2020-04-14 21:10:44 +02:00
|
|
|
@mixin animationRotate($speed: 1s)
|
2020-04-14 22:31:13 +02:00
|
|
|
$id: unique-id()
|
|
|
|
@keyframes#{$id}
|
2020-04-14 21:10:44 +02:00
|
|
|
from
|
|
|
|
transform: rotate(0)
|
|
|
|
to
|
|
|
|
transform: rotate(360deg)
|
|
|
|
animation:
|
2020-04-15 08:56:06 +02:00
|
|
|
name: $id
|
2020-04-14 21:10:44 +02:00
|
|
|
duration: $speed
|
|
|
|
iteration-count: infinite
|
|
|
|
timing-function: linear
|
2020-04-14 21:31:10 +02:00
|
|
|
|
2020-06-03 17:45:47 +02:00
|
|
|
/*
|
|
|
|
* Add a pulse animation.
|
|
|
|
* $speed: 1s (default), seconds
|
|
|
|
* $size: 1rem (default), unit
|
|
|
|
* $color: black (default), color
|
|
|
|
* $iteration: infinite (default), number
|
|
|
|
*
|
|
|
|
* Examples: @include animationPulse(2s), @include animationPulse(0.5s, 2rem, yellow, 1)
|
|
|
|
*/
|
2020-04-14 22:12:12 +02:00
|
|
|
@mixin animationPulse($speed: 1s, $size: 1rem, $color: black, $iteration: infinite)
|
2020-04-14 22:31:13 +02:00
|
|
|
$id: unique-id()
|
|
|
|
@keyframes #{$id}
|
2020-04-14 21:31:10 +02:00
|
|
|
from
|
2020-04-14 21:31:30 +02:00
|
|
|
box-shadow: 0 0 0 0 $color
|
2020-04-14 21:31:10 +02:00
|
|
|
to
|
2020-04-14 21:31:30 +02:00
|
|
|
box-shadow: 0 0 0 $size transparentize($color, 1)
|
2020-04-14 21:31:10 +02:00
|
|
|
animation:
|
2020-04-14 22:31:13 +02:00
|
|
|
name: $id
|
2020-04-14 21:31:10 +02:00
|
|
|
duration: $speed
|
2020-04-14 22:12:12 +02:00
|
|
|
iteration-count: $iteration
|
2020-04-14 21:31:10 +02:00
|
|
|
timing-function: linear
|
2020-04-17 20:36:55 +02:00
|
|
|
|
2020-06-04 16:13:18 +02:00
|
|
|
/*
|
|
|
|
* Add a opacity animation.
|
|
|
|
* $speed: 1s (default), seconds
|
|
|
|
* $iteration: infinite (default), number
|
|
|
|
*
|
|
|
|
* Examples: @include animationOpacity(2s), @include animationOpacity(0.5s, 1)
|
|
|
|
*/
|
2020-04-17 20:36:55 +02:00
|
|
|
@mixin animationOpacity($speed: 1s, $iteration: infinite)
|
|
|
|
$id: unique-id()
|
|
|
|
@keyframes #{$id}
|
|
|
|
from
|
|
|
|
opacity: 0
|
|
|
|
to
|
|
|
|
opacity: 1
|
|
|
|
animation:
|
|
|
|
name: $id
|
|
|
|
duration: $speed
|
|
|
|
iteration-count: $iteration
|
|
|
|
timing-function: linear
|
2020-04-17 20:38:55 +02:00
|
|
|
direction: alternate
|
|
|
|
|
2020-09-03 12:24:34 +02:00
|
|
|
/*
|
|
|
|
* Create animation from a horizontal sprite sheet
|
|
|
|
*
|
|
|
|
* Examples: @include animationSpriteSheet(6, "../img/sprite.png", 1.5s)
|
|
|
|
*/
|
|
|
|
@mixin animationSpriteSheet($steps, $image, $speed: 1s, $iteration: infinite)
|
|
|
|
$id: unique-id()
|
|
|
|
@keyframes #{$id}
|
|
|
|
100%
|
|
|
|
background-position-x: calc(#{$steps} * -100%)
|
|
|
|
animation:
|
|
|
|
name: $id
|
|
|
|
duration: $speed
|
|
|
|
iteration-count: $iteration
|
|
|
|
timing-function: steps(#{$steps})
|
|
|
|
background:
|
|
|
|
image: url(#{$image})
|
|
|
|
size: calc(#{$steps} * 100%) auto
|
|
|
|
|
2020-06-03 17:49:11 +02:00
|
|
|
/*
|
2023-05-31 08:20:10 +02:00
|
|
|
* Center children elements horizontally and vertically.
|
2020-06-03 17:49:11 +02:00
|
|
|
*
|
2023-05-31 08:20:10 +02:00
|
|
|
* Examples: @include centerChildren()
|
2020-06-03 17:49:11 +02:00
|
|
|
*/
|
2023-05-31 08:20:10 +02:00
|
|
|
@mixin centerChildren()
|
2020-06-03 17:49:11 +02:00
|
|
|
display: flex
|
|
|
|
justify-content: center
|
|
|
|
align-items: center
|
|
|
|
|
2020-08-28 17:07:20 +02:00
|
|
|
/*
|
|
|
|
* Mimics grid-gap separation for flex
|
|
|
|
*
|
|
|
|
* Examples: @include gridGap(2.5rem)
|
|
|
|
*/
|
|
|
|
@mixin gridGap($size: 1rem)
|
|
|
|
margin: 0 $size
|
|
|
|
&:first-child
|
|
|
|
margin-left: 0
|
|
|
|
&:last-child
|
|
|
|
margin-right: 0
|