public/assets/css/scss/partials/_mixins.scss

   1 /* positioning */
   2
   3 @mixin group {
   4
   5     &:after {
   6     content: ".";
   7     display: block;
   8     height: 0;
   9     clear: both;
  10     visibility: hidden;
  11     }
  12 }
  13
  14 @mixin inline-block( $vertical-align: middle ) {
  15     display: inline-block;
  16     *display: inline;
  17     *zoom: 1;
  18     @if ($vertical-align) {
  19         vertical-align: $vertical-align;
  20     }
  21 }
  22
  23 @mixin text-hidden {
  24     text-indent: 0;
  25     line-height: 0;
  26     font-size: 0;
  27 }
  28
  29 /* sprites */
  30
  31 @mixin sprite-icon {
  32     text-indent: -9999px;
  33     line-height: 0;
  34     font-size: 0;
  35     overflow: hidden;
  36     display: block;
  37     background-image: url("../img/greentech-sprite-icons.png");
  38     background-repeat: no-repeat;
  39 }
  40
  41 @mixin sprite-image {
  42     text-indent: -9999px;
  43     line-height: 0;
  44     font-size: 0;
  45     overflow: hidden;
  46     display: block;
  47     background-image: url("../img/greentech-sprite-images.png");
  48     background-repeat: no-repeat;
  49 }
  50
  51 /* borders made from backgrounds */
  52
  53 @mixin border-vertical-dotted($position) {
  54     background-image: url("../img/border-vertical-dotted.png");
  55     background-repeat: repeat-y;
  56     background-position: $position top;
  57 }
  58
  59 @mixin border-horizontal-dotted($position) {
  60     background-image: url("../img/border-horizontal-dotted.png");
  61     background-repeat: repeat-x;
  62     background-position: left $position;
  63 }
  64
  65 /* triangles */
  66
  67 @mixin triangle-vertical($size: 7px, $position: "bottom", $color: #999, $rgba: rgba(0, 0, 0, 0.7)) {
  68     @include text-hidden;
  69     position     : absolute;
  70     height       : 0;
  71     width        : 0;
  72     border-style : solid;
  73     border-width : $size;
  74     border-color : transparent transparent $color transparent;
  75     border-color : transparent transparent $rgba transparent;
  76     left         : 50%;
  77     margin-left  : $size * -2;
  78     #{$position} : 0;
  79
  80 }
  81
  82 @mixin triangle-angled($size: 4px, $position: "bottom", $color: #333, $rgba: "") {
  83     @include text-hidden;
  84     position     : absolute;
  85     height       : 0;
  86     width        : 0;
  87     border-style : solid;
  88     border-width : $size;
  89     border-color : $color transparent transparent $color;
  90     @if $rgba != "" {
  91         border-color : $rgba transparent transparent $rgba;
  92     }
  93     left         : 50%;
  94     margin-left  : $size * -2;
  95     #{$position} : $size * -2;
  96 }
  97
  98 /* css3 */
  99
 100 @mixin rounded($radius: 5px) {
 101   -moz-border-radius: $radius;
 102   border-radius: $radius;
 103 }
 104
 105 @mixin roundedSide($horizontal, $vertical, $magnitude: 5px) {
 106   border-#{$vertical}-#{$horizontal}-radius: $magnitude;
 107   -moz-border-radius-#{$vertical}#{$horizontal}: $magnitude;
 108   -webkit-border-#{$vertical}-#{$horizontal}-radius: $magnitude;
 109 }
 110
 111 @mixin transition($property, $time: 0.25s) {
 112     -webkit-transition: $property $time ease-in-out;
 113     -moz-transition: $property $time ease-in-out;
 114     -o-transition: $property $time ease-in-out;
 115     -ms-transition: $property $time ease-in-out;
 116     transition: $property $time ease-in-out;
 117 }
 118
 119 @mixin inner-shadow($horizontal: -5px, $vertical: -5px, $magnitude: 5px, $color: #888) {
 120     -moz-box-shadow: inset $horizontal $vertical $magnitude $color;
 121     -webkit-box-shadow: inset $horizontal $vertical $magnitude $color;
 122     box-shadow: inset $horizontal $vertical $magnitude $color;
 123 }
 124
 125 @mixin drop-shadow($horizontal: 5px, $vertical: 5px, $magnitude: 5px, $color: #888) {
 126     -moz-box-shadow: $horizontal $vertical $magnitude $color;
 127     -webkit-box-shadow: $horizontal $vertical $magnitude $color;
 128     box-shadow: $horizontal $vertical $magnitude $color;
 129 }