2016-01-24 00:03:43 +00:00
|
|
|
=arrow($color)
|
|
|
|
border: 1px solid $color
|
|
|
|
border-right: 0
|
|
|
|
border-top: 0
|
|
|
|
content: " "
|
|
|
|
display: block
|
2016-10-29 20:51:13 +00:00
|
|
|
height: 0.5em
|
2016-01-24 00:03:43 +00:00
|
|
|
pointer-events: none
|
|
|
|
position: absolute
|
|
|
|
transform: rotate(-45deg)
|
2016-10-29 20:51:13 +00:00
|
|
|
width: 0.5em
|
2016-01-24 00:03:43 +00:00
|
|
|
|
2016-09-22 22:14:18 +00:00
|
|
|
=block
|
|
|
|
&:not(:last-child)
|
2016-10-29 17:53:30 +00:00
|
|
|
margin-bottom: 1.5rem
|
2016-09-22 22:14:18 +00:00
|
|
|
|
2016-01-24 00:03:43 +00:00
|
|
|
=clearfix
|
|
|
|
&:after
|
|
|
|
clear: both
|
|
|
|
content: " "
|
|
|
|
display: table
|
|
|
|
|
2017-04-02 13:37:10 +00:00
|
|
|
=center($width, $height: 0)
|
2016-01-24 00:03:43 +00:00
|
|
|
position: absolute
|
2017-04-02 13:37:10 +00:00
|
|
|
@if $height != 0
|
|
|
|
left: calc(50% - (#{$width} / 2))
|
|
|
|
top: calc(50% - (#{$height} / 2))
|
|
|
|
@else
|
|
|
|
left: calc(50% - (#{$width} / 2))
|
|
|
|
top: calc(50% - (#{$width} / 2))
|
2016-01-24 00:03:43 +00:00
|
|
|
|
2016-09-22 22:14:18 +00:00
|
|
|
=delete
|
|
|
|
+unselectable
|
|
|
|
-moz-appearance: none
|
|
|
|
-webkit-appearance: none
|
2016-10-30 16:11:04 +00:00
|
|
|
background-color: rgba($black, 0.2)
|
2016-09-22 22:14:18 +00:00
|
|
|
border: none
|
|
|
|
border-radius: 290486px
|
|
|
|
cursor: pointer
|
|
|
|
display: inline-block
|
2016-10-30 10:41:53 +00:00
|
|
|
font-size: $size-normal
|
2017-03-12 16:25:41 +00:00
|
|
|
height: 20px
|
2016-09-23 21:08:03 +00:00
|
|
|
outline: none
|
2016-09-22 22:14:18 +00:00
|
|
|
position: relative
|
|
|
|
vertical-align: top
|
2017-03-12 16:25:41 +00:00
|
|
|
width: 20px
|
2016-09-22 22:14:18 +00:00
|
|
|
&:before,
|
|
|
|
&:after
|
|
|
|
background-color: $white
|
|
|
|
content: ""
|
|
|
|
display: block
|
|
|
|
left: 50%
|
|
|
|
position: absolute
|
|
|
|
top: 50%
|
2017-03-12 16:25:41 +00:00
|
|
|
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
|
|
|
transform-origin: center center
|
2016-09-22 22:14:18 +00:00
|
|
|
&:before
|
2016-10-30 10:41:53 +00:00
|
|
|
height: 2px
|
|
|
|
width: 50%
|
2016-09-22 22:14:18 +00:00
|
|
|
&:after
|
2016-10-30 10:41:53 +00:00
|
|
|
height: 50%
|
|
|
|
width: 2px
|
2016-10-30 16:11:04 +00:00
|
|
|
&:hover,
|
|
|
|
&:focus
|
|
|
|
background-color: rgba($black, 0.3)
|
|
|
|
&:active
|
|
|
|
background-color: rgba($black, 0.4)
|
2016-09-22 22:14:18 +00:00
|
|
|
// Sizes
|
|
|
|
&.is-small
|
2017-03-12 16:25:41 +00:00
|
|
|
height: 16px
|
|
|
|
width: 16px
|
2016-09-22 22:14:18 +00:00
|
|
|
&.is-medium
|
2017-03-12 16:25:41 +00:00
|
|
|
height: 24px
|
|
|
|
width: 24px
|
2016-09-22 22:14:18 +00:00
|
|
|
&.is-large
|
2017-03-12 16:25:41 +00:00
|
|
|
height: 32px
|
|
|
|
width: 32px
|
2016-09-22 22:14:18 +00:00
|
|
|
|
2016-01-24 00:03:43 +00:00
|
|
|
=fa($size, $dimensions)
|
|
|
|
display: inline-block
|
|
|
|
font-size: $size
|
|
|
|
height: $dimensions
|
|
|
|
line-height: $dimensions
|
|
|
|
text-align: center
|
|
|
|
vertical-align: top
|
|
|
|
width: $dimensions
|
|
|
|
|
2016-09-24 15:04:53 +00:00
|
|
|
=hamburger($dimensions)
|
2016-09-22 22:14:18 +00:00
|
|
|
cursor: pointer
|
|
|
|
display: block
|
2016-09-24 15:04:53 +00:00
|
|
|
height: $dimensions
|
2016-09-22 22:14:18 +00:00
|
|
|
position: relative
|
2016-09-24 15:04:53 +00:00
|
|
|
width: $dimensions
|
2016-09-22 22:14:18 +00:00
|
|
|
span
|
|
|
|
background-color: $text
|
|
|
|
display: block
|
|
|
|
height: 1px
|
|
|
|
left: 50%
|
|
|
|
margin-left: -7px
|
|
|
|
position: absolute
|
|
|
|
top: 50%
|
|
|
|
transition: none $speed $easing
|
|
|
|
transition-property: background, left, opacity, transform
|
|
|
|
width: 15px
|
|
|
|
&:nth-child(1)
|
|
|
|
margin-top: -6px
|
|
|
|
&:nth-child(2)
|
|
|
|
margin-top: -1px
|
|
|
|
&:nth-child(3)
|
|
|
|
margin-top: 4px
|
|
|
|
&:hover
|
|
|
|
background-color: $background
|
|
|
|
// Modifers
|
|
|
|
&.is-active
|
|
|
|
span
|
|
|
|
background-color: $link
|
|
|
|
&:nth-child(1)
|
|
|
|
margin-left: -5px
|
|
|
|
transform: rotate(45deg)
|
|
|
|
transform-origin: left top
|
|
|
|
&:nth-child(2)
|
|
|
|
opacity: 0
|
|
|
|
&:nth-child(3)
|
|
|
|
margin-left: -5px
|
|
|
|
transform: rotate(-45deg)
|
|
|
|
transform-origin: left bottom
|
|
|
|
|
2016-10-16 18:15:56 +00:00
|
|
|
@keyframes spinAround
|
|
|
|
from
|
|
|
|
transform: rotate(0deg)
|
|
|
|
to
|
|
|
|
transform: rotate(359deg)
|
|
|
|
|
2016-09-22 22:14:18 +00:00
|
|
|
=loader
|
2016-10-16 18:15:56 +00:00
|
|
|
animation: spinAround 500ms infinite linear
|
2016-09-22 22:14:18 +00:00
|
|
|
border: 2px solid $border
|
|
|
|
border-radius: 290486px
|
|
|
|
border-right-color: transparent
|
|
|
|
border-top-color: transparent
|
|
|
|
content: ""
|
|
|
|
display: block
|
2017-03-12 17:49:24 +00:00
|
|
|
height: 1em
|
2016-09-22 22:14:18 +00:00
|
|
|
position: relative
|
2017-03-12 17:49:24 +00:00
|
|
|
width: 1em
|
2016-09-22 22:14:18 +00:00
|
|
|
|
2016-12-22 19:51:52 +00:00
|
|
|
=overflow-touch
|
|
|
|
-webkit-overflow-scrolling: touch
|
|
|
|
|
2016-01-24 00:03:43 +00:00
|
|
|
=overlay($offset: 0)
|
|
|
|
bottom: $offset
|
|
|
|
left: $offset
|
|
|
|
position: absolute
|
|
|
|
right: $offset
|
|
|
|
top: $offset
|
|
|
|
|
|
|
|
=placeholder
|
|
|
|
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
|
|
|
|
@each $placeholder in $placeholders
|
|
|
|
&:#{$placeholder}-placeholder
|
|
|
|
@content
|
|
|
|
|
2016-09-22 22:14:18 +00:00
|
|
|
=unselectable
|
|
|
|
-webkit-touch-callout: none
|
|
|
|
-webkit-user-select: none
|
|
|
|
-moz-user-select: none
|
|
|
|
-ms-user-select: none
|
|
|
|
user-select: none
|
|
|
|
|
2016-09-22 19:30:09 +00:00
|
|
|
// Responsiveness
|
|
|
|
|
2016-01-24 00:03:43 +00:00
|
|
|
=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
|
2017-03-27 11:37:45 +00:00
|
|
|
@media screen and (min-width: $tablet), print
|
2016-01-24 00:03:43 +00:00
|
|
|
@content
|
|
|
|
|
2016-04-25 21:00:21 +00:00
|
|
|
=tablet-only
|
|
|
|
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
|
|
|
|
@content
|
|
|
|
|
2016-01-24 00:03:43 +00:00
|
|
|
=touch
|
|
|
|
@media screen and (max-width: $desktop - 1px)
|
|
|
|
@content
|
|
|
|
|
|
|
|
=desktop
|
|
|
|
@media screen and (min-width: $desktop)
|
|
|
|
@content
|
2016-02-13 18:59:09 +00:00
|
|
|
|
2016-04-25 21:00:21 +00:00
|
|
|
=desktop-only
|
|
|
|
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
|
|
|
|
@content
|
|
|
|
|
2016-02-13 18:59:09 +00:00
|
|
|
=widescreen
|
|
|
|
@media screen and (min-width: $widescreen)
|
|
|
|
@content
|
2017-03-14 21:00:58 +00:00
|
|
|
|
|
|
|
=widescreen-only
|
|
|
|
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
|
|
|
|
@content
|
|
|
|
|
|
|
|
=fullhd
|
|
|
|
@media screen and (min-width: $fullhd)
|
|
|
|
@content
|