CSS gradient "fix"

This commit is contained in:
Ruud
2012-10-13 10:52:35 +02:00
parent 0773d6e6ad
commit d0d9ac07a6
3 changed files with 26 additions and 17 deletions
@@ -1,5 +1,5 @@
/** /**
* StyleFix 1.0.3 * StyleFix 1.0.3 & PrefixFree 1.0.7
* @author Lea Verou * @author Lea Verou
* MIT license * MIT license
*/ */
@@ -122,9 +122,9 @@ var self = window.StyleFix = {
.splice(index === undefined? self.fixers.length : index, 0, fixer); .splice(index === undefined? self.fixers.length : index, 0, fixer);
}, },
fix: function(css, raw) { fix: function(css, raw, element) {
for(var i=0; i<self.fixers.length; i++) { for(var i=0; i<self.fixers.length; i++) {
css = self.fixers[i](css, raw) || css; css = self.fixers[i](css, raw, element) || css;
} }
return css; return css;
@@ -157,11 +157,9 @@ function $(expr, con) {
})(); })();
/** /**
* PrefixFree 1.0.6 * PrefixFree
* @author Lea Verou
* MIT license
*/ */
(function(root, undefined){ (function(root){
if(!window.StyleFix || !window.getComputedStyle) { if(!window.StyleFix || !window.getComputedStyle) {
return; return;
@@ -181,9 +179,17 @@ function fix(what, before, after, replacement, css) {
} }
var self = window.PrefixFree = { var self = window.PrefixFree = {
prefixCSS: function(css, raw) { prefixCSS: function(css, raw, element) {
var prefix = self.prefix; var prefix = self.prefix;
// Gradient angles hotfix
if(self.functions.indexOf('linear-gradient') > -1) {
// Gradients are supported with a prefix, convert angles to legacy
css = css.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig, function ($0, delim, repeating, deg) {
return delim + (repeating || '') + 'linear-gradient(' + (90-deg) + 'deg';
});
}
css = fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(', css); css = fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(', css);
css = fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3', css); css = fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3', css);
css = fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:', css); css = fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:', css);
@@ -205,6 +211,9 @@ var self = window.PrefixFree = {
// Fix double prefixing // Fix double prefixing
css = css.replace(RegExp('-' + prefix, 'g'), '-'); css = css.replace(RegExp('-' + prefix, 'g'), '-');
// Prefix wildcard
css = css.replace(/-\*-(?=[a-z]+)/gi, self.prefix);
return css; return css;
}, },
+5 -5
View File
@@ -271,7 +271,7 @@ body > .spinner, .mask{
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 3px rgba(0,0,0,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 3px rgba(0,0,0,.7);
background-color: #1b79b8; background-color: #1b79b8;
text-shadow: none; text-shadow: none;
background-image: linear-gradient(0deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 100%); background-image: -*-linear-gradient(0deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 100%);
} }
.header .notification_menu .wrapper { .header .notification_menu .wrapper {
@@ -355,7 +355,7 @@ body > .spinner, .mask{
border-radius:30px; border-radius:30px;
box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20); box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20);
background: url('../images/sprite.png') no-repeat 94% -53px, linear-gradient( background: url('../images/sprite.png') no-repeat 94% -53px, -*-linear-gradient(
270deg, 270deg,
#5b9bd1 0%, #5b9bd1 0%,
#406db8 100% #406db8 100%
@@ -431,7 +431,7 @@ body > .spinner, .mask{
border: 1px solid #252930; border: 1px solid #252930;
box-shadow: inset 0 1px 0px rgba(255,255,255,0.20), 0 0 3px rgba(0,0,0, 0.2); box-shadow: inset 0 1px 0px rgba(255,255,255,0.20), 0 0 3px rgba(0,0,0, 0.2);
background: rgb(55,62,74); background: rgb(55,62,74);
background-image: linear-gradient( background-image: -*-linear-gradient(
90deg, 90deg,
rgb(55,62,74) 0%, rgb(55,62,74) 0%,
rgb(73,83,98) 100% rgb(73,83,98) 100%
@@ -520,7 +520,7 @@ body > .spinner, .mask{
text-align: center; text-align: center;
color: #000; color: #000;
text-shadow: none; text-shadow: none;
background-image: linear-gradient( background-image: -*-linear-gradient(
45deg, 45deg,
rgb(200,200,200) 0%, rgb(200,200,200) 0%,
rgb(255,255,255) 100% rgb(255,255,255) 100%
@@ -592,7 +592,7 @@ body > .spinner, .mask{
overflow: hidden; overflow: hidden;
transition: all .6s cubic-bezier(0.9,0,0.1,1); transition: all .6s cubic-bezier(0.9,0,0.1,1);
box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20); box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20);
background-image: linear-gradient( background-image: -*-linear-gradient(
270deg, 270deg,
#5b9bd1 0%, #5b9bd1 0%,
#406db8 100% #406db8 100%
+4 -4
View File
@@ -16,7 +16,7 @@
padding: 40px 0; padding: 40px 0;
margin: 0; margin: 0;
min-height: 470px; min-height: 470px;
background-image: linear-gradient( background-image: -*-linear-gradient(
20deg, 20deg,
rgba(0,0,0,0) 50%, rgba(0,0,0,0) 50%,
rgba(0,0,0,0.3) 100% rgba(0,0,0,0.3) 100%
@@ -365,7 +365,7 @@
border-radius: 2px; border-radius: 2px;
} }
.page .tag_input > ul:hover > li.choice { .page .tag_input > ul:hover > li.choice {
background: linear-gradient( background: -*-linear-gradient(
270deg, 270deg,
rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.1) 100% rgba(255,255,255,0.1) 100%
@@ -373,7 +373,7 @@
} }
.page .tag_input > ul > li.choice:hover, .page .tag_input > ul > li.choice:hover,
.page .tag_input > ul > li.choice.selected { .page .tag_input > ul > li.choice.selected {
background: linear-gradient( background: -*-linear-gradient(
270deg, 270deg,
#5b9bd1 0%, #5b9bd1 0%,
#406db8 100% #406db8 100%
@@ -412,7 +412,7 @@
margin: -9px 0 0 -16px; margin: -9px 0 0 -16px;
border-radius: 30px 30px 0 0; border-radius: 30px 30px 0 0;
cursor: pointer; cursor: pointer;
background: url('../../images/icon.delete.png') no-repeat center 2px, linear-gradient( background: url('../../images/icon.delete.png') no-repeat center 2px, -*-linear-gradient(
270deg, 270deg,
#5b9bd1 0%, #5b9bd1 0%,
#5b9bd1 100% #5b9bd1 100%