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