shop.balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

_grid.scss (3338B)

      1 // Grid system
      2 //
      3 // Generate semantic grid columns with these mixins.
      4 
      5 // Centered container element
      6 @mixin container-fixed($gutter: $grid-gutter-width) {
      7   margin-right: auto;
      8   margin-left: auto;
      9   padding-left:  floor(($gutter / 2));
     10   padding-right: ceil(($gutter / 2));
     11   @include clearfix;
     12 }
     13 
     14 // Creates a wrapper for a series of columns
     15 @mixin make-row($gutter: $grid-gutter-width) {
     16   margin-left:  ceil(($gutter / -2));
     17   margin-right: floor(($gutter / -2));
     18   @include clearfix;
     19 }
     20 
     21 // Generate the extra small columns
     22 @mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
     23   position: relative;
     24   float: left;
     25   width: percentage(($columns / $grid-columns));
     26   min-height: 1px;
     27   padding-left:  ($gutter / 2);
     28   padding-right: ($gutter / 2);
     29 }
     30 @mixin make-xs-column-offset($columns) {
     31   margin-left: percentage(($columns / $grid-columns));
     32 }
     33 @mixin make-xs-column-push($columns) {
     34   left: percentage(($columns / $grid-columns));
     35 }
     36 @mixin make-xs-column-pull($columns) {
     37   right: percentage(($columns / $grid-columns));
     38 }
     39 
     40 // Generate the small columns
     41 @mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
     42   position: relative;
     43   min-height: 1px;
     44   padding-left:  ($gutter / 2);
     45   padding-right: ($gutter / 2);
     46 
     47   @media (min-width: $screen-sm-min) {
     48     float: left;
     49     width: percentage(($columns / $grid-columns));
     50   }
     51 }
     52 @mixin make-sm-column-offset($columns) {
     53   @media (min-width: $screen-sm-min) {
     54     margin-left: percentage(($columns / $grid-columns));
     55   }
     56 }
     57 @mixin make-sm-column-push($columns) {
     58   @media (min-width: $screen-sm-min) {
     59     left: percentage(($columns / $grid-columns));
     60   }
     61 }
     62 @mixin make-sm-column-pull($columns) {
     63   @media (min-width: $screen-sm-min) {
     64     right: percentage(($columns / $grid-columns));
     65   }
     66 }
     67 
     68 // Generate the medium columns
     69 @mixin make-md-column($columns, $gutter: $grid-gutter-width) {
     70   position: relative;
     71   min-height: 1px;
     72   padding-left:  ($gutter / 2);
     73   padding-right: ($gutter / 2);
     74 
     75   @media (min-width: $screen-md-min) {
     76     float: left;
     77     width: percentage(($columns / $grid-columns));
     78   }
     79 }
     80 @mixin make-md-column-offset($columns) {
     81   @media (min-width: $screen-md-min) {
     82     margin-left: percentage(($columns / $grid-columns));
     83   }
     84 }
     85 @mixin make-md-column-push($columns) {
     86   @media (min-width: $screen-md-min) {
     87     left: percentage(($columns / $grid-columns));
     88   }
     89 }
     90 @mixin make-md-column-pull($columns) {
     91   @media (min-width: $screen-md-min) {
     92     right: percentage(($columns / $grid-columns));
     93   }
     94 }
     95 
     96 // Generate the large columns
     97 @mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
     98   position: relative;
     99   min-height: 1px;
    100   padding-left:  ($gutter / 2);
    101   padding-right: ($gutter / 2);
    102 
    103   @media (min-width: $screen-lg-min) {
    104     float: left;
    105     width: percentage(($columns / $grid-columns));
    106   }
    107 }
    108 @mixin make-lg-column-offset($columns) {
    109   @media (min-width: $screen-lg-min) {
    110     margin-left: percentage(($columns / $grid-columns));
    111   }
    112 }
    113 @mixin make-lg-column-push($columns) {
    114   @media (min-width: $screen-lg-min) {
    115     left: percentage(($columns / $grid-columns));
    116   }
    117 }
    118 @mixin make-lg-column-pull($columns) {
    119   @media (min-width: $screen-lg-min) {
    120     right: percentage(($columns / $grid-columns));
    121   }
    122 }