From 03a23d81e41f628211aead15202ed754506c60f4 Mon Sep 17 00:00:00 2001
From: benmanley <info@benmanley.org>
Date: Fri, 21 Feb 2014 12:14:58 +0000
Subject: [PATCH] Move styles from stable.jade to inventory.styl file

---
 public/css/inventory.styl           | 30 +++++++++++------------------
 views/options/inventory/stable.jade |  8 +++-----
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/public/css/inventory.styl b/public/css/inventory.styl
index f562e010ac..669be6a159 100644
--- a/public/css/inventory.styl
+++ b/public/css/inventory.styl
@@ -17,7 +17,8 @@
 
 .equipment-title
   display: inline-block
-  vertical-align: middle
+  vertical-align: bottom
+  margin-right: 20px
 
 .stable .static-popover
   max-width: 550px
@@ -96,16 +97,9 @@ menu.pets .customize-menu
 .pet-button
     border: none
     background: none white
-
-//adjust position of flying pig down to leave some room between rows
-button[class*="Pet-FlyingPig"]
-    position: relative
-    top: 16px
-
 .pet-not-owned
     width: 81px;
     height: 99px;
-    position:  relative;
     /* Would use css3 filters and just display the original pet image with a black hue,
        but doesn't seem to work in Firefox or Opera */
     /*filter: brightness(0%)
@@ -113,17 +107,15 @@ button[class*="Pet-FlyingPig"]
     -moz-filter: brightness(0%)
     -o-filter: brightness(0%)
     -ms-filter: brightness(0%)*/
-    
-    // align paw with pets, at the bottom of the button (changing margin-top doesn't work cross-browser)
-    .PixelPaw, .PixelPaw-Gold
-      position: absolute
-      top: 38px
-      left: 16px
-      
-//allow paw alignment to apply correctly to PixelPaw-Gold as it is inside a link
-menu.pets-rare a
-    display: inline-block
-    vertical-align: top
+
+    .PixelPaw
+      margin-top: 36px // align paw with pets, at the bottom of the button
+
+// styles for pets that have been fed until they evolve into a mount
+.pet-evolved
+    opacity: 0.1
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"
+    //if this could be changed to the opacity talked about? can't figure it out
 
 .selectableInventory
   background-color: lightgreen !important
diff --git a/views/options/inventory/stable.jade b/views/options/inventory/stable.jade
index b0ee055e24..ee38d05564 100644
--- a/views/options/inventory/stable.jade
+++ b/views/options/inventory/stable.jade
@@ -58,9 +58,7 @@ script(type='text/ng-template', id='partials/options.inventory.pets.html')
                     .progress-bar.progress-bar-success(style="width:{{user.items.pets[pet]/.5}}%")
                 button(class="pet-button pet-not-owned", ng-if='!user.items.pets[pet]')
                   .PixelPaw
-                // How to apply this style in stylus files?
-                button(class="pet-button Pet-{{pet}}" ng-if='user.items.pets[pet]<0',style='opacity:0.1;filter:alpha(opacity=10)')
-                  //if this could be changed to the opacity talked about? can't figure it out
+                button(class="pet-evolved pet-button Pet-{{pet}}", ng-if='user.items.pets[pet]<0')
       .col-md-12
         h4=env.t('questPets')
         menu.pets(type='list')
@@ -72,11 +70,11 @@ script(type='text/ng-template', id='partials/options.inventory.pets.html')
                     .progress-bar.progress-bar-success(style="width:{{user.items.pets[pet]/.5}}%")
                 button(class="pet-button pet-not-owned", ng-if='!user.items.pets[pet]')
                   .PixelPaw
-                button(class="pet-button Pet-{{pet}}" ng-if='user.items.pets[pet]<0',style='opacity:0.1;filter:alpha(opacity=10)')
+                button(class="pet-evolved pet-button Pet-{{pet}}", ng-if='user.items.pets[pet]<0')
 
       .col-md-12
         h4=env.t('rarePets')
-        menu.pets-rare
+        menu
           div
             button(ng-if='user.items.pets["Wolf-Veteran"]', class="pet-button Pet-Wolf-Veteran", ng-class='{active: user.items.currentPet == "Wolf-Veteran"}', ng-click='choosePet("Wolf", "Veteran")', popover=env.t('veteranWolf'), popover-trigger='mouseenter', popover-placement='bottom')
             button(ng-if='user.items.pets["Wolf-Cerberus"]', class="pet-button Pet-Wolf-Cerberus", ng-class='{active: user.items.currentPet == "Wolf-Cerberus"}', ng-click='choosePet("Wolf", "Cerberus")', popover=env.t('cerberusPup'), popover-trigger='mouseenter', popover-placement='bottom')