arrow($color)¶ ↑
border: 1px solid $color border-right: 0 border-top: 0 content: " " display: block height: 0.5em pointer-events: none position: absolute transform: rotate(-45deg) width: 0.5em
block¶ ↑
&:not(:last-child) margin-bottom: 1.5rem
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))
delete¶ ↑
+unselectable -moz-appearance: none -webkit-appearance: none background-color: rgba($black, 0.2) border: none border-radius: 290486px cursor: pointer display: inline-block flex-grow: 0 flex-shrink: 0 font-size: $size-normal 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
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: 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: rgba(black, 0.05) // Modifers &.is-active span &: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
loader¶ ↑
animation: spinAround 500ms infinite linear border: 2px solid $border border-radius: 290486px border-right-color: transparent border-top-color: transparent content: "" display: block height: 1em position: relative width: 1em
overflow-touch¶ ↑
-webkit-overflow-scrolling: touch
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
unselectable¶ ↑
-webkit-touch-callout: none -webkit-user-select: none -moz-user-select: none -ms-user-select: none user-select: none
// 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¶ ↑
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) @content
widescreen¶ ↑
@media screen and (min-width: $widescreen) @content
widescreen-only¶ ↑
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) @content
fullhd¶ ↑
@media screen and (min-width: $fullhd) @content