Material Design: New LI Tweaks

Some things on the new LI needed tweaking for material design:

 * Help Icon Strangeness -- Snazz added
 * Material Icon Alignment -- Removed Custom Size
 * Required Icon Size Strangeness - Specificity Required

Change-Id: I09620f25192352ab47dd329e8a594a9fd091a6a3
partial-bug: 1538491

openstack_dashboard/static/dashboard/scss/components/_help_panel.scss

@@ -30,6 +30,7 @@ $help-panel-width: 400px;
     &:active,
     &:focus {
       @extend .close;
+      box-shadow: none;
       margin: $padding-xs-horizontal;
     }
 

openstack_dashboard/static/dashboard/scss/components/_icons.scss

@@ -1,4 +1,5 @@
-.hz-icon-required {
+// Specificity Required
+.fa.hz-icon-required {
   font-size: 50%;
   vertical-align: top;
   color: $brand-primary;

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

@@ -4,3 +4,24 @@
 @import "/bootstrap/scss/bootstrap/mixins/vendor-prefixes";
 @import "/horizon/lib/bootswatch/paper/bootswatch";
 @import "/horizon/lib/roboto_fontface/css/roboto-fontface.scss";
+
+
+
+// Patch to Paper
+// Inside alerts, the text color of buttons aren't properly ignored
+// https://github.com/thomaspark/bootswatch/issues/552
+.alert a:not(.close).btn-primary {
+  color: $btn-primary-color;
+}
+.alert a:not(.close).btn-default {
+  color: $btn-default-color;
+}
+.alert a:not(.close).btn-info {
+  color: $btn-info-color;
+}
+.alert a:not(.close).btn-warning {
+  color: $btn-warning-color;
+}
+.alert a:not(.close).btn-danger {
+  color: $btn-danger-color;
+}

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

@@ -8,7 +8,6 @@ $mdi-font-path: $static_url + "/horizon/lib/mdi/fonts";
 
 .fa {
   @extend .mdi;
-  font-size: $mdi-icon-size;
 }
 
 $icon-swap: (
@@ -70,12 +69,3 @@ $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

@@ -2,9 +2,9 @@
 @import "components/context_selection";
 @import "components/messages";
 @import "components/hamburger";
+@import "components/help_panel";
 @import "components/magic_search";
 @import "components/navbar";
-@import "components/selection_menu";
 @import "components/sidebar";
 
 .login .splash-logo {

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

@@ -3,5 +3,3 @@ $hamburger-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
 $sidebar-animation: $hamburger-transition;
 
 $alert-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
-
-$mdi-icon-size: 1.3em;

openstack_dashboard/themes/material/static/horizon/components/_help_panel.scss

@@ -0,0 +1,41 @@
+// Controls the size of the "?" icon on the right of the wizards
+
+
+// Position the toggle above the content a bit so it doesn't
+// cover up the words
+$material-toggle-offset: -$font-size-h3;
+
+.help-toggle {
+  z-index: 3;
+
+  &:not(.collapsed) {
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      margin-top: $material-toggle-offset;
+      margin-right: -$padding-xs-horizontal/2;
+    }
+  }
+
+  &,
+  &:active:hover,
+  &:hover,
+  &:active,
+  &:focus {
+    margin-top: $material-toggle-offset;
+    margin-right: -$padding-xs-horizontal/2;
+    background: none;
+    box-shadow: none;
+    color: $brand-primary;
+  }
+}
+
+#help-panel {
+  margin-top: $material-toggle-offset;
+
+  // Material is all about depth, lets add some
+  & > .well {
+    @extend .panel;
+  }
+}

openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss

@@ -1,16 +0,0 @@
-.selection-menu {
-  .dropdown-menu > li > a {
-    padding-left: $mdi-icon-size*2;
-  }
-
-  .dropdown-selected {
-    .dropdown-selected-icon {
-      left: $mdi-icon-size/4;
-
-      @media (min-width: $screen-sm) {
-        color: $brand-primary;
-        left: $mdi-icon-size/2;
-      }
-    }
-  }
-}