316 lines
6.7 KiB
SCSS
316 lines
6.7 KiB
SCSS
@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;
|
|
} |