https://github.com/sha-red/compass-mixins/tree/master/lib
extended with more sass frameworks and as django app.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
3.1 KiB
87 lines
3.1 KiB
@import "shared"; |
|
|
|
// These defaults make the arguments optional for this mixin |
|
// If you like, set different defaults in your project |
|
|
|
$default-text-shadow-color: #aaa !default; |
|
$default-text-shadow-h-offset: 0px !default; |
|
$default-text-shadow-v-offset: 0px !default; |
|
$default-text-shadow-blur: 1px !default; |
|
$default-text-shadow-spread: false !default; |
|
|
|
// Provides cross-browser text shadows when one or more shadows are needed. |
|
// Each shadow argument should adhere to the standard css3 syntax for the |
|
// text-shadow property. |
|
// |
|
// Note: if any shadow has a spread parameter, this will cause the mixin |
|
// to emit the shadow declaration twice, first without the spread, |
|
// then with the spread included. This allows you to progressively |
|
// enhance the browsers that do support the spread parameter. |
|
@mixin text-shadow( |
|
$shadow-1 : default, |
|
$shadow-2 : false, |
|
$shadow-3 : false, |
|
$shadow-4 : false, |
|
$shadow-5 : false, |
|
$shadow-6 : false, |
|
$shadow-7 : false, |
|
$shadow-8 : false, |
|
$shadow-9 : false, |
|
$shadow-10: false |
|
) { |
|
@if $shadow-1 == default { |
|
$shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color); |
|
} |
|
$shadows-without-spread: join((),(),comma); |
|
$shadows: join((),(),comma); |
|
$has-spread: false; |
|
@each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, |
|
$shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) { |
|
@if length($shadow) > 4 { |
|
$has-spread: true; |
|
$shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5)); |
|
$shadows: append($shadows, $shadow); |
|
} else { |
|
$shadows-without-spread: append($shadows-without-spread, $shadow); |
|
$shadows: append($shadows, $shadow); |
|
} |
|
} |
|
@if $has-spread { |
|
text-shadow: $shadows-without-spread; |
|
} |
|
text-shadow: $shadows; |
|
} |
|
|
|
// Provides a single cross-browser CSS text shadow. |
|
// |
|
// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread |
|
// according to the configuration defaults above. |
|
@mixin single-text-shadow( |
|
$hoff: false, |
|
$voff: false, |
|
$blur: false, |
|
$spread: false, |
|
$color: false |
|
) { |
|
// A lot of people think the color comes first. It doesn't. |
|
@if type-of($hoff) == color { |
|
$temp-color: $hoff; |
|
$hoff: $voff; |
|
$voff: $blur; |
|
$blur: $spread; |
|
$spread: $color; |
|
$color: $temp-color; |
|
} |
|
// Can't rely on default assignment with multiple supported argument orders. |
|
$hoff: if($hoff, $hoff, $default-text-shadow-h-offset); |
|
$voff: if($voff, $voff, $default-text-shadow-v-offset); |
|
$blur: if($blur, $blur, $default-text-shadow-blur ); |
|
$spread: if($spread, $spread, $default-text-shadow-spread ); |
|
$color: if($color, $color, $default-text-shadow-color ); |
|
// We don't need experimental support for this property. |
|
@if $color == none or $hoff == none { |
|
@include text-shadow(none); |
|
} @else { |
|
@include text-shadow(compact($hoff $voff $blur $spread $color)); |
|
} |
|
}
|
|
|