@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