What I'd like the box shadow upgrade to be -- not legal syntax.
This commit is contained in:
parent
46d399c044
commit
fb33dff089
@ -5,6 +5,8 @@
|
|||||||
|
|
||||||
@import "shared";
|
@import "shared";
|
||||||
|
|
||||||
|
$legacy-box-shadow: true !default;
|
||||||
|
|
||||||
// The default color for box shadows
|
// The default color for box shadows
|
||||||
$default-box-shadow-color: #333333 !default;
|
$default-box-shadow-color: #333333 !default;
|
||||||
|
|
||||||
@ -23,9 +25,7 @@ $default-box-shadow-spread : false !default;
|
|||||||
// The default shadow instet: inset or false (for standard shadow).
|
// The default shadow instet: inset or false (for standard shadow).
|
||||||
$default-box-shadow-inset : false !default;
|
$default-box-shadow-inset : false !default;
|
||||||
|
|
||||||
// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
|
@if $legacy-box-shadow {
|
||||||
// Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
|
|
||||||
|
|
||||||
@mixin box-shadow(
|
@mixin box-shadow(
|
||||||
$color : $default-box-shadow-color,
|
$color : $default-box-shadow-color,
|
||||||
$hoff : $default-box-shadow-h-offset,
|
$hoff : $default-box-shadow-h-offset,
|
||||||
@ -34,20 +34,81 @@ $default-box-shadow-inset : false !default;
|
|||||||
$spread : $default-box-shadow-spread,
|
$spread : $default-box-shadow-spread,
|
||||||
$inset : $default-box-shadow-inset
|
$inset : $default-box-shadow-inset
|
||||||
) {
|
) {
|
||||||
$full : $color $hoff $voff $blur $spread;
|
@warn "This usage of the box-shadow mixin has been deprecated. Please read: http://compass-style.org/docs/upgrading/box-shadow-api/ for details."
|
||||||
@if $inset {
|
@include legacy-box-shadow($color, $hoff, $voff, $blur, $spread, $inset);
|
||||||
@if not ($inset == true or $inset == inset) {
|
|
||||||
@warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. The box shadow will be inset."
|
|
||||||
}
|
}
|
||||||
$full: $full inset;
|
|
||||||
}
|
|
||||||
@if $color == none {
|
|
||||||
@include experimental(box-shadow, none,
|
|
||||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
|
||||||
);
|
|
||||||
} @else {
|
} @else {
|
||||||
@include experimental(box-shadow, $full,
|
@mixin box-shadow(
|
||||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
$shadow-1,
|
||||||
|
$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
|
||||||
|
) {
|
||||||
|
@include mult-box-shadow(
|
||||||
|
$shadow-1, $shadow-2, $shadow-3,
|
||||||
|
$shadow-4, $shadow-5, $shadow-6,
|
||||||
|
$shadow-7, $shadow-8, $shadow-9, $shadow-10
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
|
||||||
|
// Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
|
||||||
|
// @deprecated
|
||||||
|
@mixin legacy-box-shadow(
|
||||||
|
$color : $default-box-shadow-color,
|
||||||
|
$hoff : $default-box-shadow-h-offset,
|
||||||
|
$voff : $default-box-shadow-v-offset,
|
||||||
|
$blur : $default-box-shadow-blur,
|
||||||
|
$spread : $default-box-shadow-spread,
|
||||||
|
$inset : $default-box-shadow-inset
|
||||||
|
) {
|
||||||
|
@if not ($inset == true or $inset == false or $inset == inset) {
|
||||||
|
@warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $color == none {
|
||||||
|
@include mult-box-shadow(none);
|
||||||
|
} @else {
|
||||||
|
$full : $hoff $voff;
|
||||||
|
@if $blur { $full: $full $blur; }
|
||||||
|
@if $spread { $full: $full $spread; }
|
||||||
|
@if $color { $full: $full $color; }
|
||||||
|
@if $inset { $full: inset $full; }
|
||||||
|
@include mult-box-shadow($full);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Provides cross-browser box shadows when one or more box shadows are to be used.
|
||||||
|
@mixin mult-box-shadow(
|
||||||
|
$shadow-1,
|
||||||
|
$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
|
||||||
|
) {
|
||||||
|
$shadow : $shadow-1;
|
||||||
|
@if $shadow-2 { $shadow: $shadow, $shadow-2; }
|
||||||
|
@if $shadow-3 { $shadow: $shadow, $shadow-3; }
|
||||||
|
@if $shadow-4 { $shadow: $shadow, $shadow-4; }
|
||||||
|
@if $shadow-5 { $shadow: $shadow, $shadow-5; }
|
||||||
|
@if $shadow-6 { $shadow: $shadow, $shadow-6; }
|
||||||
|
@if $shadow-7 { $shadow: $shadow, $shadow-7; }
|
||||||
|
@if $shadow-8 { $shadow: $shadow, $shadow-8; }
|
||||||
|
@if $shadow-9 { $shadow: $shadow, $shadow-9; }
|
||||||
|
@if $shadow-10 { $shadow: $shadow, $shadow-10; }
|
||||||
|
@include experimental(box-shadow, $shadow,
|
||||||
|
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||||
|
);
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user