use rgba everywhere instead of fade-out for Stylus (thanks, @potch)

mozilla · Mar 13, 2013 · b042e24 · b042e24
1 parent 039f37d
commit b042e24
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 9 deletions.
diff --git a/media/css/mkt/desktop-listing.styl b/media/css/mkt/desktop-listing.styl
@@ -74,7 +74,7 @@
         box-shadow: 0 0 1px #fff;
         cursor: pointer;
         &.current {
-            box-shadow: 0 -1px 1px rgba(#03101a, 65%) inset, 0 0 4px fade-out(#0091ff,0.56);
+            box-shadow: 0 -1px 1px rgba(#03101a, .35) inset, 0 0 4px rgba(#0091ff, .56);
         }
     }
 }

diff --git a/media/css/mkt/header.styl b/media/css/mkt/header.styl
@@ -258,7 +258,7 @@ body[data-page-type=notice] #site-header h1 {
             &.selected {
                 a, a:hover {
                     box-shadow: 0 1px 0 rgba(0, 0, 0, .2) inset;
-                    gradient-two-color($medium-gray, fade-out($medium-gray, 75%));
+                    gradient-two-color($medium-gray, rgba($medium-gray, .25));
                     border-color: $medium-gray;
                     color: $white;
                     text-shadow: 0 1px 0 rgba(0, 0, 0, .2);

diff --git a/media/css/mkt/lib.styl b/media/css/mkt/lib.styl
@@ -11,11 +11,11 @@ $desktop-ftr = $desktop-hdr;
 // TODO: Have Michael take a peek at these!
 $link = #2d87ca;
 $link-dark = darken($link, 10%);
-$faded-link = fade-out($link, 50%);
+$faded-link = rgba($link, .5);
 $shadow-blue = #98B2C9;
 $border-blue = #C9DDF2;
-$border-black = rgba(#000,0.19999999999999996);
-$faded-blue = fade-out($border-blue, 90%);
+$border-black = rgba(#000, .2);
+$faded-blue = rgba($border-blue, .1);
 $orange = darken(#d60, 5%);
 $red = #c00000;
 $maroon = #800;

diff --git a/media/css/mkt/promo-grid.styl b/media/css/mkt/promo-grid.styl
@@ -46,14 +46,14 @@
     }
     .mkt-tile {
         light-text-shadow();
-        background: fade-out($light-gray, 50%);
+        background: rgba($light-gray, .5);
         display: block;
         height: 64px;
         padding: 10px 10px 10px 90px;
         position: relative;
         text-decoration: none;
         &:hover {
-            box-shadow: 0 1px 2px fade-out($black, 50%);
+            box-shadow: 0 1px 2px rgba($black, .5);
             background: $faint-gray;
             .author {
                 color: $medium-gray;

diff --git a/media/css/mkt/ratings.styl b/media/css/mkt/ratings.styl
@@ -35,7 +35,7 @@ section.replies .review.reply {
         padding-left: 35px;
     }
     &.deleting {
-        background: fade-out($red, 60%);
+        background: rgba($red, .4);
     }
     &.deleted {
         border: 0;

diff --git a/media/css/mkt/tile.styl b/media/css/mkt/tile.styl
@@ -392,7 +392,7 @@
         margin: 0 3px;
         &.current {
             gradient-two-color(#368dd9, #57a9fa);
-            box-shadow: 0 -1px 1px rgba(#03101a, 65%) inset, 0 0 4px fade-out(#0091ff,0.56);
+            box-shadow: 0 -1px 1px rgba(#03101a, .35) inset, 0 0 4px rgba(#0091ff, .56);
         }
     }
 }