Material Theme: Buttons need border radius

Material buttons actually have a border radius:
http://preview.tinyurl.com/zw5ftjf

Theme Preview Pages should use Font Awesome
H2 should not be manually overridden

Change-Id: I8951e04d463ef897815d8a46ad93e5d2327d4793
Closes-bug: #1528369
Closes-bug: #1528368
Closes-bug: #1528372

openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html

@@ -42,7 +42,7 @@
               <li class="active"><a translate href="#">Active</a></li>
               <li><a href="#">Link</a></li>
               <li class="dropdown">
-                <a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="fa fa-caret-down"></b></a>
                 <ul class="dropdown-menu">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
@@ -60,7 +60,7 @@
             <ul class="nav navbar-nav navbar-right">
               <li><a translate href="#">Link</a></li>
               <li class="dropdown">
-                <a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="fa fa-caret-down"></b></a>
                 <ul class="dropdown-menu">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
@@ -89,7 +89,7 @@
               <li class="active"><a translate href="#">Active</a></li>
               <li><a translate href="#">Link</a></li>
               <li class="dropdown">
-                <a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="fa fa-caret-down"></b></a>
                 <ul class="dropdown-menu">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
@@ -107,7 +107,7 @@
             <ul class="nav navbar-nav navbar-right">
               <li><a translate href="#">Link</a></li>
               <li class="dropdown">
-                <a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <a translate href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="fa fa-caret-down"></b></a>
                 <ul class="dropdown-menu">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
@@ -160,7 +160,7 @@
         <div class="btn-toolbar bs-component">
           <div class="btn-group">
             <button translate type="button" class="btn btn-default">Default</button>
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>
               <li><a translate href="#">Another action</a></li>
@@ -172,7 +172,7 @@
 
           <div class="btn-group">
             <button translate type="button" class="btn btn-primary">Primary</button>
-            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>
               <li><a translate href="#">Another action</a></li>
@@ -184,7 +184,7 @@
 
           <div class="btn-group">
             <button translate type="button" class="btn btn-success">Success</button>
-            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>
               <li><a translate href="#">Another action</a></li>
@@ -196,7 +196,7 @@
 
           <div class="btn-group">
             <button translate type="button" class="btn btn-info">Info</button>
-            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>
               <li><a translate href="#">Another action</a></li>
@@ -208,7 +208,7 @@
 
           <div class="btn-group">
             <button translate type="button" class="btn btn-warning">Warning</button>
-            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>
               <li><a translate href="#">Another action</a></li>
@@ -224,7 +224,7 @@
         <div class="btn-toolbar bs-component">
           <div class="btn-group">
             <button translate type="button" class="btn btn-lg btn-default">Default</button>
-            <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+            <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>
               <li><a translate href="#">Another action</a></li>
@@ -235,7 +235,7 @@
           </div>
           <div class="btn-group">
             <button translate type="button" class="btn btn-sm btn-default">Default</button>
-            <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+            <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>
               <li><a translate href="#">Another action</a></li>
@@ -246,7 +246,7 @@
           </div>
           <div class="btn-group">
             <button translate type="button" class="btn btn-xs btn-default">Default</button>
-            <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+            <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>
               <li><a translate href="#">Another action</a></li>
@@ -299,7 +299,7 @@
             <div class="btn-group">
               <button translate type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                 Dropdown
-                <span class="caret"></span>
+                <span class="fa fa-caret-down"></span>
               </button>
               <ul class="dropdown-menu">
                 <li><a translate href="#">Dropdown link</a></li>
@@ -724,7 +724,7 @@
           <li class="disabled"><a translate>Disabled</a></li>
           <li class="dropdown">
             <a translate class="dropdown-toggle" data-toggle="dropdown" href="#">
-              Dropdown <span class="caret"></span>
+              Dropdown <span class="fa fa-caret-down"></span>
             </a>
             <ul class="dropdown-menu">
               <li><a translate href="#dropdown1" data-toggle="tab">Action</a></li>
@@ -758,7 +758,7 @@
           <li class="disabled"><a translate href="#">Disabled</a></li>
           <li class="dropdown">
             <a translate class="dropdown-toggle" data-toggle="dropdown" href="#">
-              Dropdown <span class="caret"></span>
+              Dropdown <span class="fa fa-caret-down"></span>
             </a>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>
@@ -778,7 +778,7 @@
           <li class="disabled"><a translate href="#">Disabled</a></li>
           <li class="dropdown">
             <a translate class="dropdown-toggle" data-toggle="dropdown" href="#">
-              Dropdown <span class="caret"></span>
+              Dropdown <span class="fa fa-caret-down"></span>
             </a>
             <ul class="dropdown-menu">
               <li><a translate href="#">Action</a></li>

openstack_dashboard/static/dashboard/scss/_mixins.scss

@@ -17,3 +17,13 @@
     @content;
   }
 }
+
+@mixin horizontal-center {
+  float: none;
+  margin: 0 auto;
+}
+
+@mixin vertical-center {
+  display: inline-block;
+  vertical-align: middle;
+}

openstack_dashboard/static/dashboard/scss/_util.scss

@@ -2,8 +2,11 @@
 
 .row .horizontal-center,
 .horizontal-center {
-  float: none;
+  @include horizontal-center();
-  margin: 0 auto;
+}
+
+.vertical-center {
+  @include vertical-center();
 }
 
 /* new clearfix */

openstack_dashboard/themes/material/static/bootstrap/_variable_customizations.scss

@@ -30,10 +30,6 @@ $icon-font-svg-id:        "material";
 //
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-$border-radius-base:        0;
-$border-radius-small:       0;
-
-
 //== Navbar
 //
 //##

openstack_dashboard/themes/material/static/horizon/_icons.scss

@@ -1,3 +1,5 @@
+@import "/dashboard/scss/mixins";
+
 // This file does a 1-1 mapping of each font-awesome icon in use to
 // a corresponding Material Design Icon.
 
@@ -64,3 +66,12 @@ $icon-swap: (
     @extend .mdi-#{$mdi-icon};
   }
 }
+
+.dropdown-toggle > {
+  &.btn-lg .fa-caret-down {
+    font-size: 1.2em;
+  }
+  .fa-caret-down {
+    @include vertical-center();
+  }
+}

openstack_dashboard/themes/material/static/horizon/_styles.scss

@@ -39,6 +39,11 @@
   z-index: 4;
 }
 
+// Border radius is unattractive here
+.navbar {
+  border-radius: 0;
+}
+
 .navbar-brand {
   svg {
     fill: $navbar-inverse-link-active-color;