wmdeit_kaform/scss/mixins.scss

316 lines
6.7 KiB
SCSS
Raw Normal View History

2020-02-20 13:45:47 +00:00
@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;
}