|
|
@mixin breakpoint($min: 0, $max: 0) { $query: "all" !default; @if $min != 0 and $max != 0 { $query: "(min-width: #{$min}) and (max-width: #{$max})"; } @else if $min != 0 and $max == 0 { $query: "(min-width: #{$min})"; } @else if $min == 0 and $max != 0 { $query: "(max-width: #{$max})"; } @media #{$query} { @content; } }
@mixin for-mobile() { @media only screen and (max-width: $sm - 1) { @content; } } @mixin not-mobile() { @media only screen and (min-width: $sm) { @content; } } // display
@mixin flex { display: flex; }
// basis
@mixin flex-basis($width) { flex-basis: $width; }
// items wrap
@mixin flex-items-wrap { flex-wrap: wrap; }
// items nowrap
@mixin flex-items-nowrap { flex-wrap: nowrap; }
// items row
@mixin flex-items-row { flex-direction: row; }
// items columns
@mixin flex-items-column { flex-direction: column; }
// items left
@mixin flex-items-left { justify-content: flex-start; }
// items right
@mixin flex-items-right { justify-content: flex-end; }
// items center
@mixin flex-items-center { justify-content: center; }
// items between
@mixin flex-items-space-between { justify-content: space-between; }
// items around
@mixin flex-items-space-around { justify-content: space-around; }
// items vertical top
@mixin flex-items-baseline { align-items: baseline; } @mixin flex-items-top { align-items: flex-start; }
// items vertical middle
@mixin flex-items-middle { align-items: center; }
// items vertical bottom
@mixin flex-items-bottom { align-items: flex-end; }
// item grow
@mixin flex-item-grow($grow: 0) { flex-grow: $grow; }
// item auto
@mixin flex-item-auto { flex: auto; }
// item one
@mixin flex-item-one { flex: 1; }
// item shrink
@mixin flex-item-shrink($num: 0) { flex-shrink: $num; }
// item width
@mixin flex-item-width($width) { flex: 0 0 $width; max-width: $width;
@include for-mobile() { flex: 0; max-width: 100%; } } // container
@mixin make-container { display: flex; flex: 1;
@include for-mobile { flex-direction: column; } } @mixin make-container-row { display: flex; flex: 1; } @mixin make-container-column { display: flex; flex-direction: column; flex: 1; }
// middle
@mixin make-items-middle { @include flex-items-middle; @include for-mobile { @include flex-items-left; align-items: flex-start; } }
// content
@mixin make-content { flex: 1; min-width: 0; }
// sidebar
@mixin make-sidebar($width) { @include flex-item-width($width); }
// offset
@mixin make-gap-offset($width) { margin-left: calc($width + #{$grid-gap}) !important; } @mixin make-button($color-back, $color-text) { color: $color-text; background-color: $color-back;
&:hover { color: $color-text; background-color: lighten($color-back, 10%); } &:disabled, &.is-disabled { color: #fff; background-color: rgba($color-black, .5); } &.is-secondary { background: none; border: $button-secondary-border-width solid $color-back; color: $color-back; &:hover { color: rgba($color-text, .95); background-color: $color-back; border-color: $color-back; } &:disabled, &.is-disabled { color: rgba($color-black, .5); border-color: rgba($color-black, .3); &:hover { background-color: transparent; } } &.is-loading:hover:before { border-color: rgba($color-text, .25); border-bottom-color: $color-text; } } &.is-tertiary { background: none; color: $color-back; &:hover { color: $color-back; } &:disabled, &.is-disabled { text-decoration: none; color: rgba($color-black, .5); } } &.is-secondary, &.is-tertiary { &.is-loading:before { border-color: rgba($color-back, 0.25); border-bottom-color: $color-back; } } } @mixin make-label($color) { background-color: rgba($color, .07); color: $color; &.is-secondary { background-color: transparent; color: $color; border-color: rgba($color, .3); } &.is-tertiary { background-color: transparent; color: $color; } & .close:hover { background-color: $color; } } // Clearfix
@mixin clearfix() { &:after { content: ''; display: table; clear: both; } }
// Cropline
@mixin cropline($line-height: 1.5, $lheight: $letter-height, $ctop: $crop-top, $cbottom: $crop-bottom) { &::before, &::after { content: ''; display: block; height: 0; width: 0; } &::before { margin-top: calc((#{$lheight} - #{$line-height}) * #{$ctop}); } &::after { margin-bottom: calc((#{$lheight} - #{$line-height}) * #{$cbottom}); } }
// Transition
@mixin transition($transition: all linear .2s) { -moz-transition: $transition; transition: $transition; }
// Transform
@mixin transform($transforms) { -moz-transform: $transforms; -ms-transform: $transforms; -webkit-transform: $transforms; transform: $transforms; }
// Blur
@mixin blur($radius) { -webkit-filter: blur($radius); -moz-filter: blur($radius); -ms-filter: blur($radius); filter: blur($radius); }
// Striped
@mixin striped($color: rgba(255, 255, 255, .2), $angle: 45deg) { background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); }
// Animation
@mixin animation($animation) { -webkit-animation: $animation; -moz-animation: $animation; animation: $animation; }
// Retina Images
@mixin retina-background-image($file, $type, $width: auto, $height: auto) {
background-repeat: no-repeat; background-image: url($file + '.' + $type);
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { background-image: url($file + '-2x.' + $type); background-size: $width $height; } }
// Full Height Footer
@mixin full-height-footer($color: #000) { box-shadow: 0px 500px 0px 500px $color; }
|