admin
9 years ago
_colors.scss
9 years ago
_functions.scss
9 years ago
_load.scss
9 years ago
_mixins.scss
9 years ago
_start.scss
9 years ago
_vars.scss
9 years ago
_mixins.scss
283 lines
| 1 | // ---- CSS3 SASS MIXINS ---- |
| 2 | // https://github.com/madr/css3-sass-mixins |
| 3 | // |
| 4 | // Copyright (C) 2011 by Anders Ytterström |
| 5 | // |
| 6 | // Permission is hereby granted, free of charge, to any person obtaining a copy |
| 7 | // of this software and associated documentation files (the "Software"), to deal |
| 8 | // in the Software without restriction, including without limitation the rights |
| 9 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 10 | // copies of the Software, and to permit persons to whom the Software is |
| 11 | // furnished to do so, subject to the following conditions: |
| 12 | // |
| 13 | // The above copyright notice and this permission notice shall be included in |
| 14 | // all copies or substantial portions of the Software. |
| 15 | // |
| 16 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 17 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 18 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 19 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 20 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 21 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 22 | // THE SOFTWARE. |
| 23 | // |
| 24 | |
| 25 | // ---- LEGACY IE SUPPORT USING FILTERS ---- |
| 26 | // Should IE filters be used or not? |
| 27 | // PROS: gradients, drop shadows etc will be handled by css. |
| 28 | // CONS: will harm the site performance badly, |
| 29 | // especially on sites with heavy rendering and scripting. |
| 30 | $useIEFilters: 0; |
| 31 | // might be 0 or 1. disabled by default. |
| 32 | // ---- /LEGACY IE SUPPORT USING FILTERS ---- |
| 33 | |
| 34 | |
| 35 | @mixin background-size ($value) { |
| 36 | -webkit-background-size: $value; |
| 37 | background-size: $value; |
| 38 | } |
| 39 | |
| 40 | @mixin border-image ($path, $offsets, $repeats) { |
| 41 | -moz-border-image: $path $offsets $repeats; |
| 42 | -o-border-image: $path $offsets $repeats; |
| 43 | -webkit-border-image: $path $offsets $repeats; |
| 44 | border-image: $path $offsets $repeats; |
| 45 | } |
| 46 | |
| 47 | @mixin border-radius ($values...) { |
| 48 | -moz-border-radius: $values; |
| 49 | -webkit-border-radius: $values; |
| 50 | border-radius: $values; |
| 51 | /*-moz-background-clip: padding; |
| 52 | -webkit-background-clip: padding-box; |
| 53 | background-clip: padding-box;*/ |
| 54 | } |
| 55 | |
| 56 | @mixin box-shadow ($values...) { |
| 57 | -moz-box-shadow: $values; |
| 58 | -webkit-box-shadow: $values; |
| 59 | box-shadow: $values; |
| 60 | } |
| 61 | |
| 62 | //@mixin box-shadow ($x, $y, $offset, $hex, $ie: $useIEFilters, $inset: null, $spread:null) { |
| 63 | // -moz-box-shadow: $x $y $offset $spread $hex $inset; |
| 64 | // -webkit-box-shadow: $x $y $offset $spread $hex $inset; |
| 65 | // box-shadow: $x $y $offset $spread $hex $inset; |
| 66 | // |
| 67 | // @if $ie == 1 { |
| 68 | // $iecolor: '#' + red($hex) + green($hex) + blue($hex); |
| 69 | // filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}'); |
| 70 | // -ms-filter: quote(progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}')); |
| 71 | // } |
| 72 | //} |
| 73 | |
| 74 | @mixin box-sizing($value) { |
| 75 | -moz-box-sizing: $value; |
| 76 | -webkit-box-sizing: $value; |
| 77 | box-sizing: $value; |
| 78 | } |
| 79 | |
| 80 | // requires sass 3.2 |
| 81 | @mixin keyframes($name){ |
| 82 | @-moz-keyframes #{$name} { @content; } |
| 83 | @-ms-keyframes #{$name} { @content; } |
| 84 | @-o-keyframes #{$name} { @content; } |
| 85 | @-webkit-keyframes #{$name} { @content; } |
| 86 | @keyframes #{$name} { @content; } |
| 87 | } |
| 88 | |
| 89 | @mixin linear-gradient($from, $to, $ie: $useIEFilters) { |
| 90 | @if $ie != 1 { background-color: $to; } |
| 91 | |
| 92 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $from),color-stop(1, $to)); |
| 93 | background-image: -webkit-linear-gradient(top, $from, $to); |
| 94 | background-image: -moz-linear-gradient(top, $from, $to); |
| 95 | background-image: -ms-linear-gradient(top, $from, $to); |
| 96 | background-image: -o-linear-gradient(top, $from, $to); |
| 97 | background-image: linear-gradient(top, bottom, $from, $to); |
| 98 | |
| 99 | @if $ie == 1 { |
| 100 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}'); |
| 101 | } |
| 102 | } |
| 103 | |
| 104 | @mixin horizontal-gradient($startColor: #555, $endColor: #333, $ie: $useIEFilters) { |
| 105 | @if $ie != 1 { background-color: $endColor; } |
| 106 | |
| 107 | background-color: $endColor; |
| 108 | background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ |
| 109 | background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ |
| 110 | background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ |
| 111 | background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 |
| 112 | background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10 |
| 113 | background-repeat: repeat-x; |
| 114 | @if $ie == 1 { |
| 115 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); |
| 116 | } |
| 117 | } |
| 118 | |
| 119 | @mixin radial-gradient($from, $to, $ie: $useIEFilters) { |
| 120 | @if $ie != 1 { background-color: $to; } |
| 121 | |
| 122 | background: -moz-radial-gradient(center, circle cover, $from 0%, $to 100%); |
| 123 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $from), color-stop(100%, $to)); |
| 124 | background: -webkit-radial-gradient(center, circle cover, $from 0%, $to 100%); |
| 125 | background: -o-radial-gradient(center, circle cover, $from 0%, $to 100%); |
| 126 | background: -ms-radial-gradient(center, circle cover, $from 0%, $to 100%); |
| 127 | background: radial-gradient(center, circle cover, $from 0%, $to 100%); |
| 128 | background-color: $from; |
| 129 | |
| 130 | @if $ie == 1 { |
| 131 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}', GradientType=1); /* IE6-9 fallback on horizontal gradient */ |
| 132 | } |
| 133 | } |
| 134 | |
| 135 | /*@mixin rgba-bg ($hex, $alpha, $ie: $useIEFilters) { |
| 136 | @if $ie == 1 { |
| 137 | background-color: none; |
| 138 | $hexopac: ie-hex-str(rgba($hex, $alpha)); |
| 139 | filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}}'); |
| 140 | -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}')); |
| 141 | } |
| 142 | @else { |
| 143 | background-color: $hex; |
| 144 | background-color: rgba($hex, $alpha); |
| 145 | } |
| 146 | }*/ |
| 147 | |
| 148 | @mixin perspective($perspective) { |
| 149 | -moz-perspective: $perspective; |
| 150 | -ms-perspective: $perspective; |
| 151 | -webkit-perspective: $perspective; |
| 152 | perspective: $perspective; |
| 153 | -moz-transform-style: preserve-3d; |
| 154 | -ms-transform-style: preserve-3d; |
| 155 | -webkit-transform-style: preserve-3d; |
| 156 | transform-style: preserve-3d; |
| 157 | } |
| 158 | |
| 159 | @mixin transform ($transforms) { |
| 160 | -moz-transform: $transforms; |
| 161 | -o-transform: $transforms; |
| 162 | -ms-transform: $transforms; |
| 163 | -webkit-transform: $transforms; |
| 164 | transform: $transforms; |
| 165 | } |
| 166 | |
| 167 | @mixin matrix ($a, $b, $c, $d, $e, $f) { |
| 168 | -moz-transform: matrix($a, $b, $c, $d, #{$e}px, #{$f}px); |
| 169 | -o-transform: matrix($a, $b, $c, $d, $e, $f); |
| 170 | -ms-transform: matrix($a, $b, $c, $d, $e, $f); |
| 171 | -webkit-transform: matrix($a, $b, $c, $d, $e, $f); |
| 172 | transform: matrix($a, $b, $c, $d, $e, $f); |
| 173 | } |
| 174 | |
| 175 | @mixin rotate ($deg) { |
| 176 | @include transform(rotate(#{$deg}deg)); |
| 177 | } |
| 178 | |
| 179 | @mixin scale ($size) { |
| 180 | @include transform(scale(#{$size})); |
| 181 | } |
| 182 | |
| 183 | @mixin translate ($x, $y) { |
| 184 | @include transform(translate($x, $y)); |
| 185 | } |
| 186 | |
| 187 | @mixin transition ($value...) { |
| 188 | -moz-transition: $value; |
| 189 | -o-transition: $value; |
| 190 | -ms-transition: $value; |
| 191 | -webkit-transition: $value; |
| 192 | transition: $value; |
| 193 | } |
| 194 | |
| 195 | @mixin animation($str) { |
| 196 | -webkit-animation: #{$str}; |
| 197 | -moz-animation: #{$str}; |
| 198 | -ms-animation: #{$str}; |
| 199 | -o-animation: #{$str}; |
| 200 | animation: #{$str}; |
| 201 | } |
| 202 | |
| 203 | @mixin animation-name($str) { |
| 204 | -webkit-animation-name: #{$str}; |
| 205 | -moz-animation-name: #{$str}; |
| 206 | -ms-animation-name: #{$str}; |
| 207 | -o-animation-name: #{$str}; |
| 208 | animation-name: #{$str}; |
| 209 | } |
| 210 | |
| 211 | @mixin animation-duration($str) { |
| 212 | -webkit-animation-duration: #{$str}; |
| 213 | -moz-animation-duration: #{$str}; |
| 214 | -ms-animation-duration: #{$str}; |
| 215 | -o-animation-duration: #{$str}; |
| 216 | animation-duration: #{$str}; |
| 217 | } |
| 218 | |
| 219 | @mixin animation-direction($str) { |
| 220 | -webkit-animation-direction: #{$str}; |
| 221 | -moz-animation-direction: #{$str}; |
| 222 | -ms-animation-direction: #{$str}; |
| 223 | -o-animation-direction: #{$str}; |
| 224 | animation-direction: #{$str}; |
| 225 | } |
| 226 | |
| 227 | @mixin animation-delay($str) { |
| 228 | animation-delay:#{$str}; |
| 229 | -o-animation-delay:#{$str}; |
| 230 | -ms-animation-delay:#{$str}; |
| 231 | -webkit-animation-delay:#{$str}; |
| 232 | -moz-animation-delay:#{$str}; |
| 233 | } |
| 234 | |
| 235 | @mixin animation-iteration-count($str) { |
| 236 | animation-iteration-count:#{$str}; |
| 237 | -o-animation-iteration-count:#{$str}; |
| 238 | -ms-animation-iteration-count:#{$str}; |
| 239 | -webkit-animation-iteration-count:#{$str}; |
| 240 | -moz-animation-iteration-count:#{$str}; |
| 241 | } |
| 242 | |
| 243 | @mixin animation-timing-function($str) { |
| 244 | -webkit-animation-timing-function: #{$str}; |
| 245 | -moz-animation-timing-function: #{$str}; |
| 246 | -ms-animation-timing-function: #{$str}; |
| 247 | -o-animation-timing-function: #{$str}; |
| 248 | animation-timing-function: #{$str}; |
| 249 | } |
| 250 | |
| 251 | // ==== /CSS3 SASS MIXINS ==== |
| 252 | |
| 253 | @mixin opacity($opacity) { |
| 254 | opacity: $opacity; |
| 255 | $opacity-ie: $opacity * 100; |
| 256 | filter: alpha(opacity=$opacity-ie); //IE8 |
| 257 | } |
| 258 | |
| 259 | @mixin size($width, $height: $width) |
| 260 | { |
| 261 | width: $width; |
| 262 | height: $height; |
| 263 | } |
| 264 | |
| 265 | @mixin clearfix |
| 266 | { |
| 267 | &:after { |
| 268 | content: ""; |
| 269 | display: table; |
| 270 | clear: both; |
| 271 | } |
| 272 | } |
| 273 | |
| 274 | // Placeholder text |
| 275 | @mixin placeholder($color: $input-color-placeholder) { |
| 276 | // Firefox |
| 277 | &::-moz-placeholder { |
| 278 | color: $color; |
| 279 | opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 |
| 280 | } |
| 281 | &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ |
| 282 | &::-webkit-input-placeholder { color: $color; } // Safari and Chrome |
| 283 | } |