fix gradient mixins by escaping them, add notes on progress bars
This commit is contained in:
Mark Otto
parent
6e72760de5
commit
635ee36e11
Binary file not shown.
|
|
@ -1946,7 +1946,7 @@ table .span24 {
|
|||
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
|
||||
background-image: linear-gradient(top, #ffffff, #e6e6e6);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
|
||||
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
|
|
@ -2068,7 +2068,7 @@ table .span24 {
|
|||
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
|
||||
background-image: linear-gradient(top, #0088cc, #0055cc);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
|
||||
border-color: #0055cc #0055cc #003580;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
|
|
@ -2093,7 +2093,7 @@ table .span24 {
|
|||
background-image: -o-linear-gradient(top, #fbb450, #f89406);
|
||||
background-image: linear-gradient(top, #fbb450, #f89406);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
|
||||
border-color: #f89406 #f89406 #ad6704;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
|
|
@ -2118,7 +2118,7 @@ table .span24 {
|
|||
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
|
||||
background-image: linear-gradient(top, #ee5f5b, #bd362f);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
|
||||
border-color: #bd362f #bd362f #802420;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
|
|
@ -2143,7 +2143,7 @@ table .span24 {
|
|||
background-image: -o-linear-gradient(top, #62c462, #51a351);
|
||||
background-image: linear-gradient(top, #62c462, #51a351);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
|
||||
border-color: #51a351 #51a351 #387038;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
|
|
@ -2168,7 +2168,7 @@ table .span24 {
|
|||
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
|
||||
background-image: linear-gradient(top, #5bc0de, #2f96b4);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
|
||||
border-color: #2f96b4 #2f96b4 #1f6377;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
|
|
@ -2193,7 +2193,7 @@ table .span24 {
|
|||
background-image: -o-linear-gradient(top, #555555, #222222);
|
||||
background-image: linear-gradient(top, #555555, #222222);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
|
||||
border-color: #222222 #222222 #000000;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
|
|
@ -2742,7 +2742,7 @@ input[type="submit"].btn.btn-small {
|
|||
background-image: -o-linear-gradient(top, #333333, #222222);
|
||||
background-image: linear-gradient(top, #333333, #222222);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -2767,7 +2767,7 @@ input[type="submit"].btn.btn-small {
|
|||
background-image: -o-linear-gradient(top, #333333, #222222);
|
||||
background-image: linear-gradient(top, #333333, #222222);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
|
||||
border-color: #222222 #222222 #000000;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
||||
|
|
@ -3065,7 +3065,7 @@ input[type="submit"].btn.btn-small {
|
|||
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
|
||||
background-image: linear-gradient(top, #ffffff, #f5f5f5);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
|
|
@ -3620,6 +3620,14 @@ a.thumbnail:hover {
|
|||
background-position: 40px 0;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
}
|
||||
@keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
|
|
@ -3640,7 +3648,7 @@ a.thumbnail:hover {
|
|||
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
|
||||
background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -3663,7 +3671,7 @@ a.thumbnail:hover {
|
|||
background-image: -o-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: linear-gradient(top, #149bdf, #0480be);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
|
|
@ -3703,7 +3711,7 @@ a.thumbnail:hover {
|
|||
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
|
||||
}
|
||||
.progress-danger.progress-striped .bar {
|
||||
background-color: #ee5f5b;
|
||||
|
|
@ -3723,7 +3731,7 @@ a.thumbnail:hover {
|
|||
background-image: -o-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: linear-gradient(top, #62c462, #57a957);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
|
||||
}
|
||||
.progress-success.progress-striped .bar {
|
||||
background-color: #62c462;
|
||||
|
|
@ -3743,7 +3751,7 @@ a.thumbnail:hover {
|
|||
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
|
||||
}
|
||||
.progress-info.progress-striped .bar {
|
||||
background-color: #5bc0de;
|
||||
|
|
@ -3763,7 +3771,7 @@ a.thumbnail:hover {
|
|||
background-image: -o-linear-gradient(top, #fbb450, #f89406);
|
||||
background-image: linear-gradient(top, #fbb450, #f89406);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
|
||||
}
|
||||
.progress-warning.progress-striped .bar {
|
||||
background-color: #fbb450;
|
||||
|
|
|
|||
|
|
@ -1770,7 +1770,7 @@
|
|||
</div>
|
||||
<div class="span4">
|
||||
<h3>Striped</h3>
|
||||
<p>Uses a gradient to create a striped effect.</p>
|
||||
<p>Uses a gradient to create a striped effect (no IE).</p>
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
|
|
@ -1783,7 +1783,7 @@
|
|||
</div>
|
||||
<div class="span4">
|
||||
<h3>Animated</h3>
|
||||
<p>Takes the striped example and animates it.</p>
|
||||
<p>Takes the striped example and animates it (no IE).</p>
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar" style="width: 45%"></div>
|
||||
</div>
|
||||
|
|
@ -1838,8 +1838,8 @@
|
|||
</div>
|
||||
<div class="span3">
|
||||
<h3>Browser support</h3>
|
||||
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p>
|
||||
<p>Opera does not support animations at this time.</p>
|
||||
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p>
|
||||
<p>Opera and IE do not support animations at this time.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -654,47 +654,47 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>.#translucent > .background()</code></td>
|
||||
<td><code>#translucent > .background()</code></td>
|
||||
<td><code>@color: @white, @alpha: 1</code></td>
|
||||
<td>Give an element a translucent background color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#translucent > .border()</code></td>
|
||||
<td><code>#translucent > .border()</code></td>
|
||||
<td><code>@color: @white, @alpha: 1</code></td>
|
||||
<td>Give an element a translucent border color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .vertical()</code></td>
|
||||
<td><code>#gradient > .vertical()</code></td>
|
||||
<td><code>@startColor, @endColor</code></td>
|
||||
<td>Create a cross-browser vertical background gradient</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .horizontal()</code></td>
|
||||
<td><code>#gradient > .horizontal()</code></td>
|
||||
<td><code>@startColor, @endColor</code></td>
|
||||
<td>Create a cross-browser horizontal background gradient</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .directional()</code></td>
|
||||
<td><code>#gradient > .directional()</code></td>
|
||||
<td><code>@startColor, @endColor, @deg</code></td>
|
||||
<td>Create a cross-browser directional background gradient</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .vertical-three-colors()</code></td>
|
||||
<td><code>#gradient > .vertical-three-colors()</code></td>
|
||||
<td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
|
||||
<td>Create a cross-browser three-color background gradient</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .radial()</code></td>
|
||||
<td><code>#gradient > .radial()</code></td>
|
||||
<td><code>@innerColor, @outerColor</code></td>
|
||||
<td>Create a cross-browser radial background gradient</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .striped()</code></td>
|
||||
<td><code>#gradient > .striped()</code></td>
|
||||
<td><code>@color, @angle</code></td>
|
||||
<td>Create a cross-browser striped background gradient</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradientBar()</code></td>
|
||||
<td><code>#gradientBar()</code></td>
|
||||
<td><code>@primaryColor, @secondaryColor</code></td>
|
||||
<td>Used for buttons to assign a gradient and slightly darker border</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -1694,7 +1694,7 @@
|
|||
</div>
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Striped{{/i}}</h3>
|
||||
<p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
|
||||
<p>{{_i}}Uses a gradient to create a striped effect (no IE).{{/i}}</p>
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
|
|
@ -1707,7 +1707,7 @@
|
|||
</div>
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Animated{{/i}}</h3>
|
||||
<p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
|
||||
<p>{{_i}}Takes the striped example and animates it (no IE).{{/i}}</p>
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar" style="width: 45%"></div>
|
||||
</div>
|
||||
|
|
@ -1762,8 +1762,8 @@
|
|||
</div>
|
||||
<div class="span3">
|
||||
<h3>{{_i}}Browser support{{/i}}</h3>
|
||||
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}</p>
|
||||
<p>{{_i}}Opera does not support animations at this time.{{/i}}</p>
|
||||
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p>
|
||||
<p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -578,47 +578,47 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>.#translucent > .background()</code></td>
|
||||
<td><code>#translucent > .background()</code></td>
|
||||
<td><code>@color: @white, @alpha: 1</code></td>
|
||||
<td>{{_i}}Give an element a translucent background color{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#translucent > .border()</code></td>
|
||||
<td><code>#translucent > .border()</code></td>
|
||||
<td><code>@color: @white, @alpha: 1</code></td>
|
||||
<td>{{_i}}Give an element a translucent border color{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .vertical()</code></td>
|
||||
<td><code>#gradient > .vertical()</code></td>
|
||||
<td><code>@startColor, @endColor</code></td>
|
||||
<td>{{_i}}Create a cross-browser vertical background gradient{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .horizontal()</code></td>
|
||||
<td><code>#gradient > .horizontal()</code></td>
|
||||
<td><code>@startColor, @endColor</code></td>
|
||||
<td>{{_i}}Create a cross-browser horizontal background gradient{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .directional()</code></td>
|
||||
<td><code>#gradient > .directional()</code></td>
|
||||
<td><code>@startColor, @endColor, @deg</code></td>
|
||||
<td>{{_i}}Create a cross-browser directional background gradient{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .vertical-three-colors()</code></td>
|
||||
<td><code>#gradient > .vertical-three-colors()</code></td>
|
||||
<td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
|
||||
<td>{{_i}}Create a cross-browser three-color background gradient{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .radial()</code></td>
|
||||
<td><code>#gradient > .radial()</code></td>
|
||||
<td><code>@innerColor, @outerColor</code></td>
|
||||
<td>{{_i}}Create a cross-browser radial background gradient{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradient > .striped()</code></td>
|
||||
<td><code>#gradient > .striped()</code></td>
|
||||
<td><code>@color, @angle</code></td>
|
||||
<td>{{_i}}Create a cross-browser striped background gradient{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.#gradientBar()</code></td>
|
||||
<td><code>#gradientBar()</code></td>
|
||||
<td><code>@primaryColor, @secondaryColor</code></td>
|
||||
<td>{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}}</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
|
||||
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=1); // IE9 and down
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
|
||||
}
|
||||
.vertical(@startColor: #555, @endColor: #333) {
|
||||
background-color: mix(@startColor, @endColor, 60%);
|
||||
|
|
@ -331,7 +331,7 @@
|
|||
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
|
||||
background-image: linear-gradient(top, @startColor, @endColor); // The standard
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=0); // IE9 and down
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
|
||||
}
|
||||
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
|
||||
background-color: @endColor;
|
||||
|
|
@ -351,7 +351,7 @@
|
|||
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
||||
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
|
||||
}
|
||||
.radial(@innerColor: #555, @outerColor: #333) {
|
||||
background-color: @outerColor;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@
|
|||
to { background-position: 40px 0; }
|
||||
}
|
||||
|
||||
// IE9
|
||||
@-ms-keyframes progress-bar-stripes {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 40px 0; }
|
||||
}
|
||||
|
||||
// Spec
|
||||
@keyframes progress-bar-stripes {
|
||||
from { background-position: 0 0; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue