css/source/_tools.scss

   1 // Usage:
   2 // @include px-rem(property, value, value, ecc);
   3 // @include px-rem(margin, 20, auto);
   4 @mixin px-rem($property, $values...) {
   5     $max: length($values);
   6     $pxValues: '';
   7     $remValues: '';
   8
   9     $base-font: strip-units($em-base);
  10
  11     @for $i from 1 through $max {
  12         $value: strip-units(nth($values, $i));
  13
  14         @if $value == auto or $value == inherit or $value == 0 {
  15             $pxValues: #{$pxValues + $value};
  16         } @else {
  17             $pxValues: #{$pxValues + $value}px;
  18         }
  19
  20         @if $i < $max {
  21             $pxValues: #{$pxValues + " "};
  22         }
  23     }
  24
  25     @for $i from 1 through $max {
  26         $value: strip-units(nth($values, $i));
  27         @if $value == auto or $value == inherit or $value == 0 {
  28             $remValues: #{$remValues + $value};
  29         } @else {
  30             $remValues: #{$remValues + $value / $base-font}rem;
  31         }
  32         @if $i < $max {
  33             $remValues: #{$remValues + " "};
  34         }
  35     }
  36
  37     #{$property}: $pxValues;
  38     #{$property}: $remValues;
  39 }
  40
  41 // Usage:
  42 // @include headings([1, 6]){
  43 //    [...]
  44 // }
  45 @mixin headings($from: 1, $to: 6){
  46     @for $i from $from through $to{
  47       h#{$i}{
  48         @content
  49       }
  50     }
  51 }
  52
  53 /// Given a font size in pixels, reproduces that font size in rems.
  54 /// @access public
  55 /// @param {Length} $size - Font size
  56 /// @example scss - Usage
  57 ///   .foo {
  58 ///     @include font-size(16px);
  59 ///   }
  60 /// @example css - Result
  61 ///   .foo {
  62 ///     font-size: 16px;
  63 ///     font-size: 1rem;
  64 ///   }
  65 @mixin font-size($size) {
  66   @if unitless($size) {
  67     $size: $size * 1px;
  68   }
  69
  70   font-size: $size;
  71   font-size: ($size / $em-base) * 1rem;
  72 }
  73
  74 /// Horizontally centers block elements
  75 /// @access public
  76 /// @example scss - Usage
  77 ///   .foo {
  78 ///     @include center-block;
  79 ///   }
  80 /// @example css - Result
  81 ///   .foo {
  82 ///     display: block;
  83 ///     margin-left: auto;
  84 ///     margin-right: auto;
  85 ///   }
  86 @mixin center-block {
  87     display: block;
  88     margin-left: auto;
  89     margin-right: auto;
  90 }
  91
  92 /// Vertically centers block elements with known height.
  93 /// @access public
  94 /// @param {Length} $height - Element's height
  95 /// @example scss - Usage
  96 ///   .foo {
  97 ///     @include center-h(42px);
  98 ///   }
  99 /// @example css - Result
 100 ///   .foo {
 101 ///     position: absolute;
 102 ///     top: 50%;
 103 ///     height: 42px;
 104 ///     margin-top: -21px;
 105 ///   }
 106 @mixin center-h($height) {
 107     position: absolute;
 108     top: 50%;
 109     height: $height;
 110     margin-top: -($height / 2);
 111 }
 112
 113 // box-shadow
 114 // top and left are  the anchor point from where to start moving the shadow
 115 @mixin box-shadow($top, $left, $blur, $color, $inset: false) {
 116     @if unitless($top) or unitless($left) or unitless($blur) {
 117         $top: $top * 1px;
 118         $left: $left * 1px;
 119         $blur: $blur * 1px;
 120     }
 121     @if $inset {
 122         -webkit-box-shadow:inset $top $left $blur $color;
 123         -moz-box-shadow:inset $top $left $blur $color;
 124         box-shadow:inset $top $left $blur $color;
 125     } @else {
 126         -webkit-box-shadow: $top $left $blur $color;
 127         -moz-box-shadow: $top $left $blur $color;
 128         box-shadow: $top $left $blur $color;
 129     }
 130 }
 131
 132 /// text shadow
 133 /// @access public
 134 /// @param {String} $rgb - rgb color
 135 /// @param {Float} $opacity - opacity
 136 /// @param {Int} $h - h-shadow
 137 /// @param {Int} $v - v-shadow
 138 /// @param {Float} $blur - blur-radius
 139 /// @example scss - Usage
 140 ///   .foo {
 141 ///     @include text-shadow("0,0,0", 0.5, 1, 1, 5 );
 142 ///   }
 143 /// @example css - Result
 144 ///   .foo {
 145 ///     text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 5px;
 146 ///   }
 147 @mixin text-shadow($opacity, $h, $v, $blur, $rgb: #000000) {
 148     @if unitless($h) or unitless($v) or unitless($blur) {
 149         $h: $h * 1px;
 150         $v: $v * 1px;
 151         $blur: $blur * 1px;
 152     }
 153     text-shadow: $h $v $blur rgba($rgb, $opacity);
 154 }
 155
 156 // truncate text with an ellipsis
 157 @mixin text-truncate {
 158     overflow: hidden;
 159     text-overflow: ellipsis;
 160     -o-text-overflow: ellipsis;
 161     white-space: pre;
 162 }
 163
 164 // create a circular "thing" out of any item
 165 // needs to be originally square
 166 @mixin circle($size, $color, $display) {
 167     @if unitless($size) {
 168         $size: $size * 1px;
 169     }
 170     display: $display;
 171     line-height: $size;
 172     width: $size;
 173     height: $size;
 174     background: $color;
 175     -webkit-border-radius: $size/2;
 176     -moz-border-radius: $size/2;
 177     border-radius: $size/2;
 178 }
 179
 180 @mixin cover($w: inherit, $h: inherit) {
 181     // Chrome, Safari
 182     object-fit: cover;
 183     height: $h;
 184     width: $w;
 185     // Firefox
 186     @-moz-document url-prefix() {
 187         & {
 188             object-fit: cover;
 189             height: $h;
 190             width: $w;
 191         }
 192     }
 193 }
 194 // border radius bourbon style
 195 @mixin border-radius($value) {
 196     border-radius: $value;
 197     background-clip: padding-box;
 198 }
 199 // columns mixin to arrange stuff into columns
 200 @mixin columns($colcount: 0, $colgap: 50px) {
 201     -moz-column-count: $colcount;
 202     -moz-column-gap: $colgap;
 203     -webkit-column-count: $colcount;
 204     -webkit-column-gap: $colgap;
 205     column-count: $colcount;
 206     column-gap: $colgap;
 207 }
 208 // Vertical/Horizontal Menu Mixin
 209 // Originally derived from http://sachagreif.com/useful-sass-mixins/
 210 @mixin navigation-list ($horiz:false) {
 211     $display: block;
 212     @if $horiz == true {
 213         $display: inline-block;
 214     }
 215     ul {
 216         list-style-type:none;
 217         padding:0;
 218         margin:0;
 219         overflow:hidden;
 220         display: block;
 221
 222         li {
 223             display:$display;
 224             &:last-child {
 225                 margin-right:0px;
 226             }
 227             a {
 228                 display:block;
 229             }
 230         }
 231     }
 232 }