Файловый менеджер - Редактировать - /home2/cocinasdalloway/public_html/tienda/wp-content/themes/negan/assets/scss/_mixin.scss
Назад
@mixin border-radius($var){ border-radius: $var; } @mixin single-transition($property:all, $speed:250ms, $ease:ease-out) { transition: $property $speed $ease; } @mixin clearfix(){ &::before, &::after { content: ' '; display: table; flex-basis: 0; order: 1; } &::after { clear: both; } } @mixin transform($var){ transform: $var; -ms-transform: $var; -webkit-transform: $var; } @mixin translate2d($x,$y){ @include transform(translate($x,$y)); } @mixin translate3d($tx, $ty, $tz) { @include transform(translate3d($tx, $ty, $tz)); } @mixin box-shadow($var){ -webkit-box-shadow: $var; box-shadow: $var; } @mixin vertical-center { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } @mixin absolute-center{ position: absolute; left: 50%; top: 50%; @include translate2d(-50%,-50%); } @mixin opacity($opacity) { opacity: $opacity; } @mixin animation($animation) { -webkit-animation: $animation; animation: $animation; } @mixin transition($transition) { transition: $transition; } @mixin scale($scale){ @include transform(scale($scale)); } @mixin rotate($rotate){ @include transform(rotate($rotate)); } @mixin skew($skew){ @include transform(skew($skew)); } @mixin responsive-visibility($parent) { #{$parent} { display: block !important; } table#{$parent} { display: table !important; } tr#{$parent} { display: table-row !important; } th#{$parent}, td#{$parent} { display: table-cell !important; } } // [converter] $parent hack @mixin responsive-invisibility($parent) { #{$parent} { display: none !important; } } // Centered container element @mixin container-fixed($gutter: $grid-gutter-width) { margin-right: auto; margin-left: auto; padding-left: floor(($gutter / 2)); padding-right: ceil(($gutter / 2)); @include clearfix; } // Creates a wrapper for a series of columns @mixin make-row($gutter: $grid-gutter-width) { margin-left: ceil(($gutter / -2)); margin-right: floor(($gutter / -2)); @include clearfix; } // Generate the extra small columns @mixin make-xs-column($columns, $gutter: $grid-gutter-width) { position: relative; float: left; width: percentage(($columns / $grid-columns)); min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); } @mixin make-xs-column-offset($columns) { margin-left: percentage(($columns / $grid-columns)); } @mixin make-xs-column-push($columns) { left: percentage(($columns / $grid-columns)); } @mixin make-xs-column-pull($columns) { right: percentage(($columns / $grid-columns)); } // Generate the small columns @mixin make-sm-column($columns, $gutter: $grid-gutter-width) { position: relative; min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); @media (min-width: $screen-sm-min) { float: left; width: percentage(($columns / $grid-columns)); } } @mixin make-sm-column-offset($columns) { @media (min-width: $screen-sm-min) { margin-left: percentage(($columns / $grid-columns)); } } @mixin make-sm-column-push($columns) { @media (min-width: $screen-sm-min) { left: percentage(($columns / $grid-columns)); } } @mixin make-sm-column-pull($columns) { @media (min-width: $screen-sm-min) { right: percentage(($columns / $grid-columns)); } } // Generate the medium columns @mixin make-md-column($columns, $gutter: $grid-gutter-width) { position: relative; min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); @media (min-width: $screen-md-min) { float: left; width: percentage(($columns / $grid-columns)); } } @mixin make-md-column-offset($columns) { @media (min-width: $screen-md-min) { margin-left: percentage(($columns / $grid-columns)); } } @mixin make-md-column-push($columns) { @media (min-width: $screen-md-min) { left: percentage(($columns / $grid-columns)); } } @mixin make-md-column-pull($columns) { @media (min-width: $screen-md-min) { right: percentage(($columns / $grid-columns)); } } // Generate the large columns @mixin make-lg-column($columns, $gutter: $grid-gutter-width) { position: relative; min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); @media (min-width: $screen-lg-min) { float: left; width: percentage(($columns / $grid-columns)); } } @mixin make-lg-column-offset($columns) { @media (min-width: $screen-lg-min) { margin-left: percentage(($columns / $grid-columns)); } } @mixin make-lg-column-push($columns) { @media (min-width: $screen-lg-min) { left: percentage(($columns / $grid-columns)); } } @mixin make-lg-column-pull($columns) { @media (min-width: $screen-lg-min) { right: percentage(($columns / $grid-columns)); } } @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { @for $i from (1 + 1) through $grid-columns { $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; } #{$list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ceil(($grid-gutter-width / 2)); padding-right: floor(($grid-gutter-width / 2)); } } // [converter] This is defined recursively in LESS, but Sass supports real loops @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { @for $i from (1 + 1) through $grid-columns { $list: "#{$list}, .col-#{$class}-#{$i}"; } #{$list} { float: left; } } @mixin calc-grid-column($index, $class, $type) { @if ($type == width) and ($index > 0) { .col-#{$class}-#{$index} { width: percentage(($index / $grid-columns)); } } @if ($type == push) and ($index > 0) { .col-#{$class}-push-#{$index} { left: percentage(($index / $grid-columns)); } } @if ($type == push) and ($index == 0) { .col-#{$class}-push-0 { left: auto; } } @if ($type == pull) and ($index > 0) { .col-#{$class}-pull-#{$index} { right: percentage(($index / $grid-columns)); } } @if ($type == pull) and ($index == 0) { .col-#{$class}-pull-0 { right: auto; } } @if ($type == offset) { .col-#{$class}-offset-#{$index} { margin-left: percentage(($index / $grid-columns)); } } } // [converter] This is defined recursively in LESS, but Sass supports real loops @mixin loop-grid-columns($columns, $class, $type) { @for $i from 0 through $columns { @include calc-grid-column($i, $class, $type); } } // Create grid for specific class @mixin make-grid($class) { @include float-grid-columns($class); @include loop-grid-columns($grid-columns, $class, width); @include loop-grid-columns($grid-columns, $class, pull); @include loop-grid-columns($grid-columns, $class, push); @include loop-grid-columns($grid-columns, $class, offset); } %vertical-center{ @include vertical-center; } %absolute-center{ @include absolute-center; } %radius-0{ @include border-radius(0); } %radius-global{ @include border-radius(4px); } %radius-50{ @include border-radius(50%); } %default-transition{ @include single-transition(); } %left-top-bottom-right-0{ right: 0; left: 0; bottom: 0; top: 0; } %clearfix{ @include clearfix; } %default-shadow{ @include box-shadow(0 6px 12px rgba(0, 0, 0, 0.076)); } %thumb-hover{ @include opacity(0.8); visibility: visible; @extend %left-top-bottom-right-0; } %content-vertical{ display: flex; justify-content: center; align-items: center; }
| ver. 1.4 |
Github
|
.
| PHP 8.2.22 | Генерация страницы: 0 |
proxy
|
phpinfo
|
Настройка