8889841cclixcotz/benson.clix.co.tz/wp-content/themes/skyhaus/assets/sass/site/vendors/gridlex/_gridlex.scss000064400000014264150514250320030637 0ustar00home/* ========================================================================== GRIDLEX Just a Flexbox Grid System - v. 2.4.1 ========================================================================== */ @import "gridlex-vars"; // GRID [#{$gl-attributeName}~="#{$gl-gridName}"], [#{$gl-attributeName}*="#{$gl-gridName}-"], [#{$gl-attributeName}*="#{$gl-gridName}_"] { box-sizing: border-box; display: flex; flex-flow: row wrap; margin: 0 (-$gl-gutter/2); } // COLS [#{$gl-attributeName}~="#{$gl-colName}"], [#{$gl-attributeName}*="#{$gl-colName}-"], [#{$gl-attributeName}*="#{$gl-colName}_"] { box-sizing: border-box; padding: 0 ($gl-gutter/2) $gl-gutter-vertical; max-width: 100%; } // JUST "COL" & "COL_" [#{$gl-attributeName}~="#{$gl-colName}"], [#{$gl-attributeName}*="#{$gl-colName}_"] { flex: 1 1 0%; } // JUST "COL-" [#{$gl-attributeName}*="#{$gl-colName}-"] { flex: none; } // COL & GRID [#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}~="#{$gl-colName}"], [#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}-"], [#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}_"], [#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}~="#{$gl-colName}"], [#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}*="#{$gl-colName}-"], [#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}*="#{$gl-colName}_"], [#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}~="#{$gl-colName}"], [#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}-"], [#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}_"] { margin: 0; padding: 0; } /************************ HELPERS SUFFIXES *************************/ // FOR GRID [#{$gl-attributeName}*="#{$gl-gridName}-"] { // No spacing between cols : noGutter &[#{$gl-attributeName}*="-noGutter"] { margin: 0; > [#{$gl-attributeName}~="#{$gl-colName}"], > [#{$gl-attributeName}*="#{$gl-colName}-"] { padding: 0; } } // No Wrapping &[#{$gl-attributeName}*="-noWrap"] { flex-wrap: nowrap; } // Horizontal alignment on center &[#{$gl-attributeName}*="-center"] { justify-content: center; } // Horizontal alignment on right &[#{$gl-attributeName}*="-right"] { justify-content: flex-end; align-self: flex-end; margin-left: auto; } // Vertical alignment on top &[#{$gl-attributeName}*="-top"] { align-items: flex-start; } // Vertical alignment on middle &[#{$gl-attributeName}*="-middle"] { align-items: center; } // Vertical alignment on bottom &[#{$gl-attributeName}*="-bottom"] { align-items: flex-end; } // Orders &[#{$gl-attributeName}*="-reverse"] { flex-direction: row-reverse; } &[#{$gl-attributeName}*="-column"] { flex-direction: column; > [#{$gl-attributeName}*="#{$gl-colName}-"] { flex-basis: auto; } } &[#{$gl-attributeName}*="-column-reverse"] { flex-direction: column-reverse; } // Spaces between and around cols &[#{$gl-attributeName}*="-spaceBetween"] { justify-content: space-between; } &[#{$gl-attributeName}*="-spaceAround"] { justify-content: space-around; } // Equal heights columns &[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}~="#{$gl-colName}"], &[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="#{$gl-colName}-"], &[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="#{$gl-colName}_"] { align-self: stretch; > * { height: 100%; } } // Removes the padding-bottom &[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}~="#{$gl-colName}"], &[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}*="#{$gl-colName}-"], &[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}*="#{$gl-colName}_"] { padding-bottom: 0; } } // FOR COL [#{$gl-attributeName}*="#{$gl-colName}-"] { &[#{$gl-attributeName}*="-top"] { align-self: flex-start; } &[#{$gl-attributeName}*="-middle"] { align-self: center; } &[#{$gl-attributeName}*="-bottom"] { align-self: flex-end; } &[#{$gl-attributeName}*="-first"] { order: -1; } &[#{$gl-attributeName}*="-last"] { order: 1; } } /************************ GRID BY NUMBER *************************/ @include makeGridByNumber(#{$gl-gridName}); @each $mq-key, $mq-value in $gl-mq-list { @media #{$mq-value} { @include makeGridByNumber(_#{$mq-key}); } } /************************ COLS SIZES *************************/ @include makeCol(#{$gl-colName}); @include makeOff(off); @each $mq-key, $mq-value in $gl-mq-list { @media #{$mq-value} { @include makeCol(_#{$mq-key}); @include makeOff(_#{$mq-key}); @include makeFirstLast(_#{$mq-key}); } } /************************ HIDING COLS *************************/ /*[#{$gl-attributeName}*="#{$gl-colName}-"]:not([#{$gl-attributeName}*="#{$gl-gridName}"]):not([#{$gl-attributeName}*="#{$gl-colName}-0"]) { display: block; } [#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}-"]:not([#{$gl-attributeName}*="#{$gl-colName}-0"]) { display: flex; }*/ [#{$gl-attributeName}*="#{$gl-colName}-"][#{$gl-attributeName}*="#{$gl-colName}-0"] { display: none; } @each $mq-key, $mq-value in $gl-mq-list { @media #{$mq-value} { //_#{$mq-key} [#{$gl-attributeName}~="#{$gl-gridName}"], [#{$gl-attributeName}*="#{$gl-gridName}-"], [#{$gl-attributeName}*="#{$gl-gridName}_"] { > :not([#{$gl-attributeName}*="_#{$mq-key}-0"]) { display: block; } /* &:not([#{$gl-attributeName}*="_#{$mq-key}-0"]) { display: flex; }*/ > [#{$gl-attributeName}*="_#{$mq-key}-0"] { //&[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="_#{$mq-key}-0"]{ display: none; } } } }