From b73dc91898ab1ab62fe78c78cd25cf3d5bd307c2 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Fri, 27 Jun 2014 09:24:53 +0100
Subject: [PATCH] fixing buttons (incomplete)

---
 .../templates/wagtailstyleguide/base.html     | 24 +++++----
 .../wagtailadmin/scss/components/forms.scss   | 50 +++++++++++++++----
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
index e7bd88606..49b47f0b0 100644
--- a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
@@ -149,29 +149,33 @@
         <section id="buttons">
             <h2>Buttons</h2>
 
-            <div href="" class="button">button</div>
+            <a href="#" class="button">button</a>
 
-            <div href="" class="button button-secondary">button-secondary</div>
+            <a href="#" class="button button-secondary">button-secondary</a>
 
-            <div href="" class="button yes">yes</div>
+            <a href="#" class="button yes">yes</a>
 
-            <div href="" class="button no">no / serious</div>
+            <a href="#" class="button no">no / serious</a>
 
-            <div href="" class="button bicolor icon icon-plus">bicolor with icon</div>
+            <a href="#" class="button bicolor icon icon-plus">bicolor with icon</a>
 
-            <div href="" class="button button-small">button-small</div>
+            <a href="#" class="button button-small">button-small</a>
 
-            <div href="" class="button bicolor button-small icon icon-plus">bicolo button-small</div>
+            <a href="#" class="button bicolor button-small icon icon-plus">bicolo button-small</a>
 
-            <div href="" class="button button-secondary no">mixed 1</div>
+            <a href="#" class="button button-secondary no">mixed 1</a>
 
-            <div href="" class="button no bicolor icon icon-cog">mixed 2</div>
+            <a href="#" class="button no bicolor icon icon-cog">mixed 2</a>
+
+            <div class="button no bicolor icon icon-cog">button on a div</div>
 
             <p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor</p>
 
             <button>button</button>
 
             <button class="bicolor icon icon-plus">bicolor with icon</button>
+
+            <input type="submit" class="bicolor icon icon-plus" value="bicolor only supported on button elements" />
         </section>
 
         <section id="dropdowns">
@@ -191,7 +195,7 @@
 
                 <div class="col3">
                     <div class="dropdown dropdown-button">
-                        <div class="button">drop down</div>
+                        <input type="button" value="drop down" class="button" />
                         <div class="dropdown-toggle icon icon-arrow-down"></div>
                         <ul role="menu">
                             <li><a href="#">Items in this list do not match button width</a></li>
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index 3a14a17ae..6f5ee0629 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -55,6 +55,7 @@ input, textarea, select, .richtext, .tagit{
         border: 0 !important;
         margin-top:-3px !important; 
         margin-bottom: -2px !important; 
+        line-height:1em !important;
     }
 
     &:hover{
@@ -76,13 +77,14 @@ input, textarea, select, .richtext, .tagit{
         outline:none;
     }
 
-    &:after{
+    /* Add select arrow back on browsers where native ui has been removed */
+    select ~ span:after{
         @include border-radius(0 6px 6px 0);
         z-index:0;
         position:absolute;
-        right:1px;
+        right:0px;
         top:1px;
-        height:95%;
+        bottom:0px;
         width:1.5em;
         font-family:wagtail;
         content:"q";
@@ -94,12 +96,14 @@ input, textarea, select, .richtext, .tagit{
         pointer-events:none;
         color:$color-grey-3;
         background-color:$color-fieldset-hover;
-        margin:0px 1px 0 0;
+        margin:0px 1px 1px 0;
+
+        .ie &{
+            display:none;
+        }
     }
 
-    .ie &:after{
-        display:none;
-    }
+    
 }
 
 /* radio and check boxes */
@@ -166,7 +170,9 @@ input[type=checkbox]:checked:before{
     color:$color-teal;
 }
 
-/* Core button style */
+/* Core button style 
+Note that these styles include methods to render buttons the same x-browser, described here:
+http://cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights */
 input[type=submit], input[type=reset], input[type=button], .button, button{
     font-family:Open Sans,Arial,sans-serif;
     @include border-radius(3px);
@@ -182,7 +188,6 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
     position:relative;
     -webkit-font-smoothing: auto;
     vertical-align: middle;
-    line-height:1em;
     display:inline-block;
     overflow:hidden;
     position:relative;
@@ -280,6 +285,14 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
     }
 }
 
+/* Special styles to counteract Firefox's completely unwarranted assumptions about button styles */
+input[type=submit], input[type=reset], input[type=button], button{
+    padding:0 1em;
+    height: em; 
+    vertical-align: middle;
+    line-height:inherit;
+}
+
 button.icon{
     &:before,
     &:after{
@@ -394,7 +407,7 @@ li.focused > .help{
     opacity:1;
 }
 
-.required label:after{
+.required .field > label:after{
     content:"*";
     color:$color-red;
     font-weight:bold;
@@ -652,7 +665,7 @@ ul.tagit li.tagit-choice-editable{
 
 /* search-bars */
 .search-bar{
-    .required label:after{
+    .required .field > label:after{
         display:none;
     }
 }
@@ -674,6 +687,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         padding-top:1.2em;
         padding-left:0;
 
+        .choice_field &,
         .model_multiple_choice_field &,
         .boolean_field &,
         .model_choice_field &,
@@ -691,6 +705,11 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         font-size:0.95em;
         padding:0.75em 1.4em;
 
+        padding:0 1.4em;
+        height: 2.8em; 
+        vertical-align: middle;
+        line-height:inherit;
+
         &.bicolor{
             padding-left:3.5em;
 
@@ -701,6 +720,15 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         }
     }
 
+    /* Special styles to counteract Firefox's completely unwarranted assumptions about button styles */
+    input[type=submit], input[type=reset], input[type=button], button{
+        padding:0 1.4em;
+        height: 2.8em; 
+        vertical-align: middle;
+        line-height:inherit;
+    }
+
+
     .help{
         opacity:1;
     }