PHP Classes

File: public/asset/vendor/select2/docs/themes/learn2/scss/vendor/bourbon/addons/_directional-values.scss

Recommend this page to a friend!
  Classes of fathurrahman   mnTemplate   public/asset/vendor/select2/docs/themes/learn2/scss/vendor/bourbon/addons/_directional-values.scss   Download  
File: public/asset/vendor/select2/docs/themes/learn2/scss/vendor/bourbon/addons/_directional-values.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: mnTemplate
Route HTTP requests to callback functions
Author: By
Last change:
Date: 1 year ago
Size: 2,863 bytes
 

Contents

Class file image Download
// directional-property mixins are shorthands // for writing properties like the following // // @include margin(null 0 10px); // ------ // margin-right: 0; // margin-bottom: 10px; // margin-left: 0; // // - or - // // @include border-style(dotted null); // ------ // border-top-style: dotted; // border-bottom-style: dotted; // // ------ // // Note: You can also use false instead of null @function collapse-directionals($vals) { $output: null; $A: nth( $vals, 1 ); $B: if( length($vals) < 2, $A, nth($vals, 2)); $C: if( length($vals) < 3, $A, nth($vals, 3)); $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); @if $A == 0 { $A: 0 } @if $B == 0 { $B: 0 } @if $C == 0 { $C: 0 } @if $D == 0 { $D: 0 } @if $A == $B and $A == $C and $A == $D { $output: $A } @else if $A == $C and $B == $D { $output: $A $B } @else if $B == $D { $output: $A $B $C } @else { $output: $A $B $C $D } @return $output; } @function contains-falsy($list) { @each $item in $list { @if not $item { @return true; } } @return false; } @mixin directional-property($pre, $suf, $vals) { // Property Names $top: $pre + "-top" + if($suf, "-#{$suf}", ""); $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); $left: $pre + "-left" + if($suf, "-#{$suf}", ""); $right: $pre + "-right" + if($suf, "-#{$suf}", ""); $all: $pre + if($suf, "-#{$suf}", ""); $vals: collapse-directionals($vals); @if contains-falsy($vals) { @if nth($vals, 1) { #{$top}: nth($vals, 1); } @if length($vals) == 1 { @if nth($vals, 1) { #{$right}: nth($vals, 1); } } @else { @if nth($vals, 2) { #{$right}: nth($vals, 2); } } // prop: top/bottom right/left @if length($vals) == 2 { @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } @if nth($vals, 2) { #{$left}: nth($vals, 2); } // prop: top right/left bottom } @else if length($vals) == 3 { @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } @if nth($vals, 2) { #{$left}: nth($vals, 2); } // prop: top right bottom left } @else if length($vals) == 4 { @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } @if nth($vals, 4) { #{$left}: nth($vals, 4); } } // prop: top/right/bottom/left } @else { #{$all}: $vals; } } @mixin margin($vals...) { @include directional-property(margin, false, $vals...); } @mixin padding($vals...) { @include directional-property(padding, false, $vals...); } @mixin border-style($vals...) { @include directional-property(border, style, $vals...); } @mixin border-color($vals...) { @include directional-property(border, color, $vals...); } @mixin border-width($vals...) { @include directional-property(border, width, $vals...); }