262 lines
5.0 KiB
Sass
262 lines
5.0 KiB
Sass
@import "initial-variables"
|
|
|
|
=clearfix
|
|
&::after
|
|
clear: both
|
|
content: " "
|
|
display: table
|
|
|
|
=center($width, $height: 0)
|
|
position: absolute
|
|
@if $height != 0
|
|
left: calc(50% - (#{$width} / 2))
|
|
top: calc(50% - (#{$height} / 2))
|
|
@else
|
|
left: calc(50% - (#{$width} / 2))
|
|
top: calc(50% - (#{$width} / 2))
|
|
|
|
=fa($size, $dimensions)
|
|
display: inline-block
|
|
font-size: $size
|
|
height: $dimensions
|
|
line-height: $dimensions
|
|
text-align: center
|
|
vertical-align: top
|
|
width: $dimensions
|
|
|
|
=hamburger($dimensions)
|
|
cursor: pointer
|
|
display: block
|
|
height: $dimensions
|
|
position: relative
|
|
width: $dimensions
|
|
span
|
|
background-color: currentColor
|
|
display: block
|
|
height: 1px
|
|
left: calc(50% - 8px)
|
|
position: absolute
|
|
transform-origin: center
|
|
transition-duration: $speed
|
|
transition-property: background-color, opacity, transform
|
|
transition-timing-function: $easing
|
|
width: 16px
|
|
&:nth-child(1)
|
|
top: calc(50% - 6px)
|
|
&:nth-child(2)
|
|
top: calc(50% - 1px)
|
|
&:nth-child(3)
|
|
top: calc(50% + 4px)
|
|
&:hover
|
|
background-color: rgba(black, 0.05)
|
|
// Modifers
|
|
&.is-active
|
|
span
|
|
&:nth-child(1)
|
|
transform: translateY(5px) rotate(45deg)
|
|
&:nth-child(2)
|
|
opacity: 0
|
|
&:nth-child(3)
|
|
transform: translateY(-5px) rotate(-45deg)
|
|
|
|
=overflow-touch
|
|
-webkit-overflow-scrolling: touch
|
|
|
|
=placeholder
|
|
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
|
|
@each $placeholder in $placeholders
|
|
&:#{$placeholder}-placeholder
|
|
@content
|
|
|
|
// Responsiveness
|
|
|
|
=from($device)
|
|
@media screen and (min-width: $device)
|
|
@content
|
|
|
|
=until($device)
|
|
@media screen and (max-width: $device - 1px)
|
|
@content
|
|
|
|
=mobile
|
|
@media screen and (max-width: $tablet - 1px)
|
|
@content
|
|
|
|
=tablet
|
|
@media screen and (min-width: $tablet), print
|
|
@content
|
|
|
|
=tablet-only
|
|
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
|
|
@content
|
|
|
|
=touch
|
|
@media screen and (max-width: $desktop - 1px)
|
|
@content
|
|
|
|
=desktop
|
|
@media screen and (min-width: $desktop)
|
|
@content
|
|
|
|
=desktop-only
|
|
@if $widescreen-enabled
|
|
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
|
|
@content
|
|
|
|
=until-widescreen
|
|
@if $widescreen-enabled
|
|
@media screen and (max-width: $widescreen - 1px)
|
|
@content
|
|
|
|
=widescreen
|
|
@if $widescreen-enabled
|
|
@media screen and (min-width: $widescreen)
|
|
@content
|
|
|
|
=widescreen-only
|
|
@if $widescreen-enabled and $fullhd-enabled
|
|
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
|
|
@content
|
|
|
|
=until-fullhd
|
|
@if $fullhd-enabled
|
|
@media screen and (max-width: $fullhd - 1px)
|
|
@content
|
|
|
|
=fullhd
|
|
@if $fullhd-enabled
|
|
@media screen and (min-width: $fullhd)
|
|
@content
|
|
|
|
// Placeholders
|
|
|
|
=unselectable
|
|
-webkit-touch-callout: none
|
|
-webkit-user-select: none
|
|
-moz-user-select: none
|
|
-ms-user-select: none
|
|
user-select: none
|
|
|
|
%unselectable
|
|
+unselectable
|
|
|
|
=arrow($color: transparent)
|
|
border: 3px solid $color
|
|
border-radius: 2px
|
|
border-right: 0
|
|
border-top: 0
|
|
content: " "
|
|
display: block
|
|
height: 0.625em
|
|
margin-top: -0.4375em
|
|
pointer-events: none
|
|
position: absolute
|
|
top: 50%
|
|
transform: rotate(-45deg)
|
|
transform-origin: center
|
|
width: 0.625em
|
|
|
|
%arrow
|
|
+arrow
|
|
|
|
=block
|
|
&:not(:last-child)
|
|
margin-bottom: 1.5rem
|
|
|
|
%block
|
|
+block
|
|
|
|
=delete
|
|
@extend %unselectable
|
|
-moz-appearance: none
|
|
-webkit-appearance: none
|
|
background-color: rgba($black, 0.2)
|
|
border: none
|
|
border-radius: $radius-rounded
|
|
cursor: pointer
|
|
pointer-events: auto
|
|
display: inline-block
|
|
flex-grow: 0
|
|
flex-shrink: 0
|
|
font-size: 0
|
|
height: 20px
|
|
max-height: 20px
|
|
max-width: 20px
|
|
min-height: 20px
|
|
min-width: 20px
|
|
outline: none
|
|
position: relative
|
|
vertical-align: top
|
|
width: 20px
|
|
&::before,
|
|
&::after
|
|
background-color: $white
|
|
content: ""
|
|
display: block
|
|
left: 50%
|
|
position: absolute
|
|
top: 50%
|
|
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
|
transform-origin: center center
|
|
&::before
|
|
height: 2px
|
|
width: 50%
|
|
&::after
|
|
height: 50%
|
|
width: 2px
|
|
&:hover,
|
|
&:focus
|
|
background-color: rgba($black, 0.3)
|
|
&:active
|
|
background-color: rgba($black, 0.4)
|
|
// Sizes
|
|
&.is-small
|
|
height: 16px
|
|
max-height: 16px
|
|
max-width: 16px
|
|
min-height: 16px
|
|
min-width: 16px
|
|
width: 16px
|
|
&.is-medium
|
|
height: 24px
|
|
max-height: 24px
|
|
max-width: 24px
|
|
min-height: 24px
|
|
min-width: 24px
|
|
width: 24px
|
|
&.is-large
|
|
height: 32px
|
|
max-height: 32px
|
|
max-width: 32px
|
|
min-height: 32px
|
|
min-width: 32px
|
|
width: 32px
|
|
|
|
%delete
|
|
+delete
|
|
|
|
=loader
|
|
animation: spinAround 500ms infinite linear
|
|
border: 2px solid $grey-lighter
|
|
border-radius: $radius-rounded
|
|
border-right-color: transparent
|
|
border-top-color: transparent
|
|
content: ""
|
|
display: block
|
|
height: 1em
|
|
position: relative
|
|
width: 1em
|
|
|
|
%loader
|
|
+loader
|
|
|
|
=overlay($offset: 0)
|
|
bottom: $offset
|
|
left: $offset
|
|
position: absolute
|
|
right: $offset
|
|
top: $offset
|
|
|
|
%overlay
|
|
+overlay
|