?AlkantarClanX12
| Current Path : /home/rankinh/numerik/wp-content/themes/blackdsn/assets/sass/mixins/ |
| Current File : /home/rankinh/numerik/wp-content/themes/blackdsn/assets/sass/mixins/_mixins-master.scss |
@mixin transition-delay($delay: 1ms , $var : var(--char-index) , $astek : 30ms) {
transition-delay: calc(#{$astek} * #{$var} + #{$delay});
}
@mixin not-selection($not-selection...) {
-webkit-user-select: $not-selection;
-moz-user-select: $not-selection;
-ms-user-select: $not-selection;
user-select: $not-selection;
}
@mixin col-layout($type, $space) {
.post-full-content,
.widget_text {
&.single-#{$type} > *:not(.gallery),
&.single-#{$type} > *:not(.wp-block-quote) > p {
margin-bottom: #{$space}px;
&.justified-gallery {
margin-bottom: #{$space - 15}px;
}
&:last-child {
margin-bottom: 0;
&.justified-gallery {
margin-bottom: -30px;
}
&.wp-block-gallery {
margin-bottom: -15px;
}
}
&.section-padding {
padding-top: $space;
padding-bottom: $space;
margin: 0;
&.dsn-normalize-block {
padding-top: 0;
padding-bottom: 0;
margin: $space 0;
}
&:not(.dsn-normalize-block) {
padding-top: 0;
}
}
&:first-child.section-padding {
padding-top: 0;
background-color: inherit;
}
&.wp-block-gallery {
margin-bottom: #{$space - 16 }px;
.blocks-gallery-image:last-child,
.blocks-gallery-item:last-child {
margin-bottom: 16px;
}
}
> *:first-child,
&:first-child {
margin-top: 0;
}
> *:last-child,
&:last-child {
margin-bottom: 0;
}
@content
}
}
}
//-------------------- overlay --------------------//
@mixin overlays($count: 0) {
[data-overlay]:before, [data-dsn-overlay]:before {
content: '';
position: absolute;
background-color: var(--bg-overlay);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
mix-blend-mode: var(--overlay-blend-mode);
}
@for $i from 0 through $count {
[data-overlay="#{$i}"]:before, [data-dsn-overlay="#{$i}"]:before {
opacity: $i / 10;
}
}
}
@mixin grid-mix($from : 2 , $to : 3) {
.grid-half-1 {
@include media_768(min) {
grid-template-columns: 30% auto;
}
}
.grid-1-half {
@include media_768(min) {
grid-template-columns: auto 30%;
}
}
@for $i from $from through $to {
.grid-#{$i} {
grid-template-columns: repeat(#{$i}, 1fr);
}
.grid-lg-#{$i} {
@include media_991(min) {
grid-template-columns: repeat(#{$i}, 1fr);
&.dsn-isotope > * {
width: calc(#{100% / $i} - 30px);
max-width: calc(#{100% / $i} - 30px);
&:nth-of-type(n + #{$i + 1}) {
margin-top: 50px;
}
&:nth-of-type(#{$i}) {
margin-top: 0;
}
}
}
}
.grid-md-#{$i} {
@include media_768(min) {
grid-template-columns: repeat(#{$i}, 1fr);
&.dsn-isotope > * {
width: calc(#{100% / $i} - 30px);
max-width: calc(#{100% / $i} - 30px);
&:nth-of-type(n + #{$i + 1}) {
margin-top: 30px;
}
}
}
@include media_768() {
&.dsn-isotope > * {
width: calc(100% - 30px);
max-width: calc(100% - 30px);
&:nth-of-type(n + 2) {
margin-top: 30px;
}
}
}
}
.grid-sm-#{$i} {
@include media_575(min) {
grid-template-columns: repeat(#{$i}, 1fr);
&.dsn-isotope > * {
width: calc(#{100% / $i} - 30px);
max-width: calc(#{100% / $i} - 30px);
&:nth-of-type(n + #{$i + 1}) {
margin-top: 30px;
}
}
}
@include media_575() {
&.dsn-isotope > * {
width: calc(100% - 30px);
max-width: calc(100% - 30px);
&:nth-of-type(n + 2) {
margin-top: 30px;
}
}
}
}
}
}
//---> Margin And Section Helper
@mixin MarginPadding($count , $plus , $class , $type , $c : px) {
@for $i from 0 through $count {
#{$class}-#{$i * $plus} {
#{$type} : #{$i * $plus}#{$c};
}
}
}
@mixin helperClass($from , $to , $plus , $class , $type , $c : px) {
@for $i from 0 through $to {
#{$class}-#{$i * $plus} {
#{$type} : #{$i * $plus}#{$c};
}
}
}
//--> Section Space
@mixin spacing_section($var: margin) {
.section-#{$var} {
#{$var}-top: var(--margin-padding);
#{$var}-bottom: var(--margin-padding);
}
$var-init: p ;
@if ($var == margin) {
$var-init: m ;
}
.#{$var-init}t-section {
#{$var}-top: var(--margin-padding);
}
.#{$var-init}b-section {
#{$var}-bottom: var(--margin-padding);
}
}
//--> Section Space
@mixin nth_of_type($from : 1 , $to : 5) {
@for $i from $from through $to {
.dsn-col .dsn-col-#{$i}:nth-of-type(n + #{$i + 1}) {
@include media_991(min) {
margin-top: 50px;
}
@include media_768(min) {
margin-top: 30px;
}
}
.dsn-col .dsn-col-lg-#{$i}:nth-of-type(n + #{$i + 1}) {
@include media_991(min) {
margin-top: 50px;
}
@include media_991() {
margin-top: 30px;
}
}
.dsn-col .dsn-col-md-#{$i}:nth-of-type(n + #{$i + 1}) {
@include media_991() {
margin-top: 30px;
}
}
.dsn-col .dsn-col-sm-#{$i}:nth-of-type(n + #{$i + 1}) {
@include media_768() {
margin-top: 30px;
}
}
}
}
//---> container
@mixin dsn-container($xl : 50px ,$l : 40px , $m : 25px , $s : 15px) {
.container, .dsn-container {
padding-right: var(--dsn-gap-container);
padding-left: var(--dsn-gap-container);
@include media_991() {
max-width: 100%;
}
}
@include media_991X1200 {
.container {
max-width: calc(960px + var(--dsn-gap-container));
}
.dsn-left-container, .dsn-right-container {
width: calc(100% - ((100vw - 960px) / 2) + (var(--dsn-gap-container) / 2) + var(--dsn-width-scroll, 0) / 2) !important;
}
}
@include media_1200(min) {
.container {
max-width: calc(1200px + var(--dsn-gap-container));
}
.dsn-left-container, .dsn-right-container {
width: calc(100% - ((100vw - 1200px) / 2) + (var(--dsn-gap-container) / 2) + var(--dsn-width-scroll, 0) / 2) !important;
}
}
@include media_991(min) {
.dsn-left-container, .dsn-right-container {
max-width: 100%;
}
.dsn-left-container {
padding-left: 0;
margin-right: auto;
}
.dsn-right-container {
padding-right: 0;
margin-left: auto;
}
}
}
//-------------------- background img cover --------------------//
@mixin background-img-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
//-------------------- Vertical Middle --------------------//
@mixin middle($horizontal: true, $vertical: true) {
position: absolute;
@if ($horizontal and $vertical) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} @else if ($horizontal) {
left: 50%;
transform: translate(-50%, 0);
} @else if ($vertical) {
top: 50%;
transform: translate(0, -50%);
}
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name}{
@content
}
@-moz-keyframes #{$name}{
@content
}
@keyframes #{$name}{
@content
}
}
@mixin text-var-hide($delay: 1ms ,$char : true ,$parent : '.dsn-word-wrapper' , $sub : '.dsn-chars-wrapper' , $transition : $easeInOutBack
) {
#{$parent} {
overflow: hidden;
will-change: transform;
}
#{$sub} {
opacity: 0;
visibility: hidden;
will-change: transform;
transform: translateY(50%) rotate(15deg) scale(0.8);
transform-origin: top left;
transition: transform 0.4s $transition, opacity .3s $transition, visibility .3s;
@if ($char) {
transition-delay: calc(30ms * var(--char-dsn-index) + #{$delay});
} @else {
transition-delay: calc(50ms * var(--word-dsn-index) + #{$delay});
}
}
}
@mixin text-var-show($sub : '.dsn-chars-wrapper' ) {
#{$sub} {
opacity: 1;
visibility: visible;
transform: translateY(0) rotate(0deg) scale(1);
}
}
@mixin admin-sticky-fix( $offset: 0 , $isHeight : false , $height:100% ) {
$narrow-offset: 46px;
$wide-offset: 32px;
@if $offset != 0 and type-of($offset) == 'number' {
$narrow-offset: $narrow-offset + $offset;
$wide-offset: $wide-offset + $offset;
}
.admin-bar & {
top: $narrow-offset;
@if ($isHeight) {
height: calc(#{$height} - #{$narrow-offset});
}
@media screen and (min-width: 783px) {
top: $wide-offset;
@if ($isHeight) {
height: calc(#{$height} - #{$wide-offset});
}
}
}
}
@mixin admin-sticky-height( $height:100% ) {
$narrow-offset: 46px;
$wide-offset: 32px;
.admin-bar & {
height: calc(#{$height} - #{$narrow-offset});
@media screen and (min-width: 783px) {
height: calc(#{$height} - #{$wide-offset});
}
}
}
@mixin v-light() {
.v-light & {
@content;
}
}
@mixin v-dark() {
.v-dark & {
@content;
}
}
@mixin body-light() {
body:not(.v-dark) & {
@content;
}
}
@mixin body-line($width : min) {
@include media_991($width) {
body & {
@content
}
}
}