whoami7 - Manager
:
/
home
/
dataiclx
/
vielorbe.com
/
wp-content
/
themes
/
glowing
/
assets
/
sass
/
Upload File:
files >> //home/dataiclx/vielorbe.com/wp-content/themes/glowing/assets/sass/_mixin.scss
// Determine whether to use dark or light text on top of given color. // Returns black for dark text and white for light text. @function contrast-color($color, $lightColor: #fff, $darkColor: #222) { $lightness: lightness($color); @if ($lightness < 75) { @return $lightColor; } @else { @return $darkColor; } } @function adjust-brightness-color($color, $adjust: 20%) { $lightness: lightness($color); @if ($lightness < 75) { @return lighten($color, $adjust); } @else { @return darken($color, $adjust); } } @mixin media-xxs() { @media only screen and (max-width: $small_mobile_width) { @content; } } @mixin media-xs() { @media only screen and (max-width: $mobile_width - 1px) { @content; } } @mixin media-sm() { @media only screen and (max-width: $tablet_width - 1px) { @content; } } @mixin media-md() { @media only screen and (max-width: $desktop_width - 1px) { @content; } } @mixin media-lg() { @media only screen and (max-width: $wide_width - 1px) { @content; } } @mixin media-xl() { @media only screen and (min-width: $wide_width) { @content; } } @mixin selection() { ::-moz-selection { @content; } ::selection { @content; } } @mixin box-shadow($shadow...) { -webkit-box-shadow: $shadow; box-shadow: $shadow; } @mixin border-radius($radius) { border-radius: $radius; } @mixin transition($pro...) { -webkit-transition: $pro; transition: $pro; } @mixin transition-delay($pro) { -webkit-transition-delay: $pro; transition-delay: $pro; } @mixin transition-duration($pro...) { -webkit-transition-duration: $pro; transition-duration: $pro; } @mixin transition-property($pro...) { -webkit-transition-property: $pro; transition-property: $pro; } @mixin transition-timing-function($pro...) { -webkit-transition-timing-function: $pro; transition-timing-function: $pro; } @mixin transform($pro...) { -webkit-transform: $pro; transform: $pro; } @mixin transform-origin($x:center, $y:center) { -webkit-transform-origin: $x $y; transform-origin: $x $y; } @mixin transform-style($pro...) { -webkit-transform-style: $pro; transform-style: $pro; } @mixin perspective($value: 1000) { -webkit-perspective: $value; perspective: $value; } @mixin push--auto { margin: { left: auto; right: auto; } } @mixin pseudo($display: block, $pos: absolute, $content: '') { content: $content; display: $display; position: $pos; } @mixin responsive-ratio($x,$y, $pseudo: false) { $padding: unquote(( $y / $x ) * 100 + '%'); @if $pseudo { &:before { @include pseudo($pos: relative); width: 100%; padding-top: $padding; } } @else { padding-top: $padding; } } @mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) { @include pseudo($pos: $position); width: 0; height: 0; @if $round { @include border-radius(3px); } @if $direction == down { border-left: $size solid transparent; border-right: $size solid transparent; border-top: $size solid $color; margin-top: 0 - round( $size / 2.5 ); } @else if $direction == up { border-left: $size solid transparent; border-right: $size solid transparent; border-bottom: $size solid $color; margin-bottom: 0 - round( $size / 2.5 ); } @else if $direction == right { border-top: $size solid transparent; border-bottom: $size solid transparent; border-left: $size solid $color; margin-right: -$size; } @else if $direction == left { border-top: $size solid transparent; border-bottom: $size solid transparent; border-right: $size solid $color; margin-left: -$size; } } @mixin input-placeholder { &:-moz-placeholder { @content; } &::-moz-placeholder { @content; } &:-ms-input-placeholder { @content; } &::-webkit-input-placeholder { @content; } } @mixin truncate($truncation-boundary) { max-width: $truncation-boundary; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // Need to trigger hardware acceleration for some animation, // keeping everything fast, slick and flicker-free. @mixin hardware($backface: true, $perspective: 1000) { @if $backface { backface-visibility: hidden; } perspective: $perspective; } // Mixin for display flex //======================================================== @mixin d-flex($important: '') { @if ($important == important) { display: -ms-flexbox !important; display: flex !important; } @else { display: -ms-flexbox; display: flex; } } @mixin d-inline-flex($important: '') { @if ($important == important) { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } @else { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } @mixin flex-row($important: '') { @if ($important == important) { -ms-flex-direction: row !important; flex-direction: row !important; } @else { -ms-flex-direction: row; flex-direction: row; } } @mixin flex-row-reverse($important: '') { @if ($important == important) { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } @else { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @mixin flex-column($important: '') { @if ($important == important) { -ms-flex-direction: column !important; flex-direction: column !important; } @else { -ms-flex-direction: column; flex-direction: column; } } @mixin flex-column-reverse($important: '') { @if ($important == important) { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } @else { -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } @mixin flex-wrap($important: '') { @if ($important == important) { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } @else { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @mixin flex-nowrap($important: '') { @if ($important == important) { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } @else { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } @mixin flex-wrap-reverse($important: '') { @if ($important == important) { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } @else { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } } @mixin flex-fill($important: '') { @if ($important == important) { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } @else { -ms-flex: 1 1 auto; flex: 1 1 auto; } } @mixin flex($pro, $important: '') { @if ($important == important) { -ms-flex: $pro !important; flex: $pro !important; } @else { -ms-flex: $pro; flex: $pro; } } @mixin flex-grow-0($important: '') { @if ($important == important) { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } @else { -ms-flex-positive: 0; flex-grow: 0; } } @mixin flex-grow-1($important: '') { @if ($important == important) { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } @else { -ms-flex-positive: 1; flex-grow: 1; } } @mixin flex-shrink-0($important: '') { @if ($important == important) { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } @else { -ms-flex-negative: 0; flex-shrink: 0; } } @mixin flex-shrink-1($important: '') { @if ($important == important) { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } @else { -ms-flex-negative: 1; flex-shrink: 1; } } @mixin justify-content-start($important: '') { @if ($important == important) { -ms-flex-pack: start !important; justify-content: flex-start !important; } @else { -ms-flex-pack: start; justify-content: flex-start; } } @mixin justify-content-end($important: '') { @if ($important == important) { -ms-flex-pack: end !important; justify-content: flex-end !important; } @else { -ms-flex-pack: end; justify-content: flex-end; } } @mixin justify-content-center($important: '') { @if ($important == important) { -ms-flex-pack: center !important; justify-content: center !important; } @else { -ms-flex-pack: center; justify-content: center; } } @mixin justify-content-between($important: '') { @if ($important == important) { -ms-flex-pack: justify !important; justify-content: space-between !important; } @else { -ms-flex-pack: justify; justify-content: space-between; } } @mixin justify-content-around($important: '') { @if ($important == important) { -ms-flex-pack: distribute !important; justify-content: space-around !important; } @else { -ms-flex-pack: distribute; justify-content: space-around; } } @mixin align-items-start($important: '') { @if ($important == important) { -ms-flex-align: start !important; align-items: flex-start !important; } @else { -ms-flex-align: start; align-items: flex-start; } } @mixin align-items-end($important: '') { @if ($important == important) { -ms-flex-align: end !important; align-items: flex-end !important; } @else { -ms-flex-align: end; align-items: flex-end; } } @mixin align-items-center($important: '') { @if ($important == important) { -ms-flex-align: center !important; align-items: center !important; } @else { -ms-flex-align: center; align-items: center; } } @mixin align-items-baseline($important: '') { @if ($important == important) { -ms-flex-align: baseline !important; align-items: baseline !important; } @else { -ms-flex-align: baseline; align-items: baseline; } } @mixin align-items-stretch($important: '') { @if ($important == important) { -ms-flex-align: stretch !important; align-items: stretch !important; } @else { -ms-flex-align: stretch; align-items: stretch; } } @mixin align-content-start($important: '') { @if ($important == important) { -ms-flex-line-pack: start !important; align-content: flex-start !important; } @else { -ms-flex-line-pack: start; align-content: flex-start; } } @mixin align-content-end($important: '') { @if ($important == important) { -ms-flex-line-pack: end !important; align-content: flex-end !important; } @else { -ms-flex-line-pack: end; align-content: flex-end; } } @mixin align-content-center($important: '') { @if ($important == important) { -ms-flex-line-pack: center !important; align-content: center !important; } @else { -ms-flex-line-pack: center; align-content: center; } } @mixin align-content-between($important: '') { @if ($important == important) { -ms-flex-line-pack: justify !important; align-content: space-between !important; } @else { -ms-flex-line-pack: justify; align-content: space-between; } } @mixin align-content-around($important: '') { @if ($important == important) { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } @else { -ms-flex-line-pack: distribute; align-content: space-around; } } @mixin align-content-stretch($important: '') { @if ($important == important) { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } @else { -ms-flex-line-pack: stretch; align-content: stretch; } } @mixin align-self-auto($important: '') { @if ($important == important) { -ms-flex-item-align: auto !important; align-self: auto !important; } @else { -ms-flex-item-align: auto; align-self: auto; } } @mixin align-self-start($important: '') { @if ($important == important) { -ms-flex-item-align: start !important; align-self: flex-start !important; } @else { -ms-flex-item-align: start; align-self: flex-start; } } @mixin align-self-end($important: '') { @if ($important == important) { -ms-flex-item-align: end !important; align-self: flex-end !important; } @else { -ms-flex-item-align: end; align-self: flex-end; } } @mixin align-self-center($important: '') { @if ($important == important) { -ms-flex-item-align: center !important; align-self: center !important; } @else { -ms-flex-item-align: center; align-self: center; } } @mixin align-self-baseline($important: '') { @if ($important == important) { -ms-flex-item-align: baseline !important; align-self: baseline !important; } @else { -ms-flex-item-align: baseline; align-self: baseline; } } @mixin align-self-stretch($important: '') { @if ($important == important) { -ms-flex-item-align: stretch !important; align-self: stretch !important; } @else { -ms-flex-item-align: stretch; align-self: stretch; } } @mixin flex-flow-wrap-reverse($important: '') { @if ($important == important) { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-flow: wrap-reverse !important; flex-flow: wrap-reverse !important; } @else { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-flow: wrap-reverse; flex-flow: wrap-reverse; } } @mixin flex-flow-wrap($important: '') { @if ($important == important) { -ms-flex-flow: wrap !important; flex-flow: wrap !important; } @else { -ms-flex-flow: wrap; flex-flow: wrap; } } @mixin flex-flow-column($important: '') { @if ($important == important) { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-flow: column !important; flex-flow: column !important; } @else { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; } } @mixin flex-flow-column-reverse($important: '') { @if ($important == important) { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-flow: column-reverse !important; flex-flow: column-reverse !important; } @else { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-flow: column-reverse; flex-flow: column-reverse; } } @mixin flex-flow-row($important: '') { @if ($important == important) { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-flow: row !important; flex-flow: row !important; } @else { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; } } @mixin flex-flow-row-reverse($important: '') { @if ($important == important) { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-flow: row-reverse !important; flex-flow: row-reverse !important; } @else { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-flow: row-reverse; flex-flow: row-reverse; } } @mixin btn-size($height, $padding-horizontal, $font-size) { @if (unit($height) == px) { $height: $height / $font_size_base * 1rem; $padding-horizontal: $padding-horizontal / $font_size_base * 1rem; $font-size: $font-size / $font_size_base * 1rem; } --g5-btn-padding-x: #{$padding-horizontal}; --g5-btn-padding-y: 0; --g5-btn-line-height: calc(#{$height} - (var(--g5-btn-border-width) * 2)) ; --g5-btn-font-size: #{$font-size}; } @mixin btn-variant($color, $background, $border, $color_hover : $color, $background_hover : darken($background,7.5%), $border_hover : darken($border,10%)) { --g5-btn-color: #{$color}; --g5-btn-bg: #{$background}; --g5-btn-border-color: #{$border}; --g5-btn-hover-color: #{$color_hover}; --g5-btn-hover-bg: #{$background_hover}; --g5-btn-hover-border-color: #{$border_hover}; --g5-btn-outline-color: #{$background}; --g5-btn-outline-border-hover-color: #{$border}; --g5-btn-outline-hover-color: #{$color}; --g5-btn-outline-hover-bg: #{$background}; --g5-btn-link-color: #{$background}; } @mixin clearfix() { content: ''; display: block; clear: both; } @mixin backface-visibility($pro...) { -webkit-backface-visibility: $pro; backface-visibility: $pro; } @mixin heading-title() { color: var(--g5-color-heading); font-weight: 700; font-size: 1.5rem; margin-bottom: 1.5rem; line-height: 1.2; } @mixin h1($important: '') { @if ($important == important) { font-family: var(--g5-h1-font) !important; text-transform: var(--g5-h1-text-transform) !important; font-size: var(--g5-h1-font-size) !important; letter-spacing: var(--g5-h1-letter-spacing) !important; font-weight: var(--g5-h1-font-weight) !important; line-height: var(--g5-h1-line-height) !important; color: var(--g5-color-heading) !important; } @else { font-family: var(--g5-h1-font); text-transform: var(--g5-h1-text-transform); font-size: var(--g5-h1-font-size); letter-spacing: var(--g5-h1-letter-spacing); font-weight: var(--g5-h1-font-weight); line-height: var(--g5-h1-line-height); color: var(--g5-color-heading); } } @mixin h2($important: '') { @if ($important == important) { font-family: var(--g5-h2-font) !important; color: var(--g5-color-heading) !important; font-size: var(--g5-h2-font-size) !important; letter-spacing: var(--g5-h2-letter-spacing) !important; text-transform: var(--g5-h2-text-transform) !important; font-weight: var(--g5-h2-font-weight) !important; line-height: var(--g5-h2-line-height) !important; } @else { font-family: var(--g5-h2-font); color: var(--g5-color-heading); font-size: var(--g5-h2-font-size); letter-spacing: var(--g5-h2-letter-spacing); text-transform: var(--g5-h2-text-transform); font-weight: var(--g5-h2-font-weight); line-height: var(--g5-h2-line-height); } } @mixin h3($important: '') { @if ($important == important) { font-family: var(--g5-h3-font) !important; color: var(--g5-color-heading) !important; font-size: var(--g5-h3-font-size) !important; letter-spacing: var(--g5-h3-letter-spacing) !important; text-transform: var(--g5-h3-text-transform) !important; font-weight: var(--g5-h3-font-weight) !important; line-height: var(--g5-h3-line-height) !important; } @else { font-family: var(--g5-h3-font); color: var(--g5-color-heading); font-size: var(--g5-h3-font-size); letter-spacing: var(--g5-h3-letter-spacing); text-transform: var(--g5-h3-text-transform); font-weight: var(--g5-h3-font-weight); line-height: var(--g5-h3-line-height); } } @mixin h4($important: '') { @if ($important == important) { font-family: var(--g5-h4-font) !important; color: var(--g5-color-heading) !important; font-size: var(--g5-h4-font-size) !important; letter-spacing: var(--g5-h4-letter-spacing) !important; text-transform: var(--g5-h4-text-transform) !important; font-weight: var(--g5-h4-font-weight) !important; line-height: var(--g5-h4-line-height) !important; } @else { font-family: var(--g5-h4-font); color: var(--g5-color-heading); font-size: var(--g5-h4-font-size); letter-spacing: var(--g5-h4-letter-spacing); text-transform: var(--g5-h4-text-transform); font-weight: var(--g5-h4-font-weight); line-height: var(--g5-h4-line-height); } } @mixin h5($important: '') { @if ($important == important) { font-family: var(--g5-h5-font) !important; color: var(--g5-color-heading) !important; font-size: var(--g5-h5-font-size) !important; letter-spacing: var(--g5-h5-letter-spacing) !important; text-transform: var(--g5-h5-text-transform) !important; font-weight: var(--g5-h5-font-weight) !important; line-height: var(--g5-h5-line-height) !important; } @else { font-family: var(--g5-h5-font); color: var(--g5-color-heading); font-size: var(--g5-h5-font-size); letter-spacing: var(--g5-h5-letter-spacing); text-transform: var(--g5-h5-text-transform); font-weight: var(--g5-h5-font-weight); line-height: var(--g5-h5-line-height); } } @mixin h6($important: '') { @if ($important == important) { font-family: var(--g5-h6-font) !important; color: var(--g5-color-heading) !important; font-size: var(--g5-h6-font-size) !important; letter-spacing: var(--g5-h6-letter-spacing) !important; text-transform: var(--g5-h6-text-transform) !important; font-weight: var(--g5-h6-font-weight) !important; line-height: var(--g5-h6-line-height) !important; } @else { font-family: var(--g5-h6-font); color: var(--g5-color-heading); font-size: var(--g5-h6-font-size); letter-spacing: var(--g5-h6-letter-spacing); text-transform: var(--g5-h6-text-transform); font-weight: var(--g5-h6-font-weight); line-height: var(--g5-h6-line-height); } }
Copyright ©2021 || Defacer Indonesia