Basic Tabs now inherit from a Bootstrap Theme

Tabs were pretty basic.  For the most, tabs were using the standard
styles nicely, except when embedded inside of a modal. There was a
lot of adding padding and removing padding to the tab-content and
modal container.  This has been cleaned up.

Also, the 'asterisk' that is used to show when a tab has required
information for a workflow was changed to an icon font.

Many unused styles were removed from horizon.scss.

Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards

Change-Id: I929de0ae31a3c2cca9e332956eed755c4e279f3d

doc/source/topics/customizing.rst

@@ -129,6 +129,7 @@ full use of the Bootstrap theme architecture.
 
 * Tables_
 * Login_
+* Tabs_
 
 Step 1
 ------
@@ -147,10 +148,8 @@ more useful ones include:
     tools will provide the ``variables.less`` file, which will need to be
     converted to ``_variables.scss``
 
-.. _Top Navbar:
+Top Navbar
-
+----------
-The Top Navbar
---------------
 
 The top navbar in Horizon now uses a native Bootstrap ``navbar``.  There are a
 number of variables that can be used to customize this element.  Please see the
@@ -165,17 +164,13 @@ The top navbar is now responsive on smaller screens.  When the window size hits
 your ``$screen-sm`` value, the topbar will compress into a design that is
 better suited for small screens.
 
-.. _Side Nav:
+Side Nav
-
+--------
-The Side Nav
-------------
 
 The side navigation component has been refactored to use the native Stacked
 Pills element from Bootstrap.  See **Pills** section of your variables file
 for specific variables to customize.
 
-.. _Pie Charts:
-
 Pie Charts
 ----------
 
@@ -186,8 +181,6 @@ Since there is no native element in Bootstrap specifically for pie charts,
 the look and feel of the charts are inheriting from other elements of the
 theme. Please see ``_pie_charts.scss`` for specifics.
 
-.. _Tables:
-
 Tables
 ------
 
@@ -217,6 +210,13 @@ The modal login experience, as used when switching regions, uses a standard
 Bootstrap dialog.  See the **Modals** section of your variables file for
 specific variables to customize.
 
+Tabs
+----
+
+The standard tabs make use of the native Bootstrap tab markup.
+
+See **Tabs** section of your variables file for variables to customize.
+
 Bootswatch and Material Design
 ------------------------------
 

horizon/templates/horizon/_nav_list.html

@@ -1,6 +1,6 @@
 {% load horizon i18n %}
 
-<div class='clearfix'>
+<div>
   <ul class="nav nav-tabs" role="tablist">
     {% for component in components %}
       {% if user|has_permissions:component %}

horizon/templates/horizon/common/_workflow.html

@@ -1,5 +1,7 @@
 {% load i18n %}
+
 {% with workflow.get_entry_point as entry_point %}
+
 <div class="workflow {{ layout|join:' ' }}" data-backdrop="{{ modal_backdrop }}">
   <form {{ workflow.attr_string|safe }} action="{{ workflow.get_absolute_url }}" {% if add_to_field %}data-add-to-field="{{ add_to_field }}"{% endif %} method="POST"{% if workflow.multipart %} enctype="multipart/form-data"{% endif %}>{% csrf_token %}
     {% if REDIRECT_URL %}<input type="hidden" name="{{ workflow.redirect_param_name }}" value="{{ REDIRECT_URL }}"/>{% endif %}
@@ -11,12 +13,15 @@
           <h3 class="modal-title">{{ workflow.name }}</h3>
         {% endblock %}
         </div>
-        <div class="modal-body clearfix">
+        <div class="modal-body">
         {% block modal-body %}
         <ul class="nav nav-tabs{% if workflow.wizard %} wizard-tabs{% endif %}" role="tablist">
             {% for step in workflow.steps %}
             <li class="{% if entry_point == step.slug %}active{% endif %}{% if step.has_errors %} error{% endif %}{% if step.has_required_fields %} required{% endif %}">
-              <a href="#{{ step.get_id }}" data-toggle="tab" data-target="#{{ step.get_id }}">{{ step }}</a>
+              <a href="#{{ step.get_id }}" data-toggle="tab" data-target="#{{ step.get_id }}">
+                {{ step }}
+                {% if step.has_required_fields %}<span class="hz-icon-required fa fa-asterisk"></span>{% endif %}
+              </a>
             </li>
             {% endfor %}
           </ul>
@@ -54,7 +59,9 @@
     </div>
   </form>
 </div>
+
 {% endwith %}
+
 {% block modal-js %}
   {% if workflow.wizard %}
   <script type="text/javascript">

horizon/test/tests/templatetags.py

@@ -114,7 +114,7 @@ class TemplateTagTests(test.TestCase):
     def test_horizon_main_nav(self):
         text = "{% horizon_main_nav %}"
         expected = """
-                <div class='clearfix'>
+                <div>
                     <ul class=\"nav nav-tabs\" role=\"tablist\">
                         <li>
                             <a href=\"/cats/\" tabindex='1'>Cats</a>

openstack_dashboard/static/dashboard/scss/components/_workflow.scss

@@ -91,4 +91,11 @@
       color: $workflow-color-label-error;
     }
   }
+
+  .nav-tabs .hz-icon-required {
+    font-size: 50%;
+    vertical-align: top;
+    color: $brand-primary;
   }
+}
+

openstack_dashboard/static/dashboard/scss/horizon.scss

@@ -161,50 +161,6 @@ a.current_item:hover h4 {
   height: 125px;
 }
 
-.usage_block {
-  background: #e8f8ff;
-  color: #84b6c5;
-  border: 1px solid #afe3fb;
-  border-radius: 5px;
-  float: left;
-  width: 29%;
-  margin-right: 5%;
-  min-height: 125px;
-}
-
-.usage_block.last {
-  margin-right: 0;
-}
-
-
-.usage_block h3 {
-  background: #cef0ff;
-  color: #4fa5bf;
-  font-weight: normal;
-  padding: 0 0 0 10px;
-  border-bottom: 1px solid #c6e7f5;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-.usage_block ul {
-  margin: 10px;
-}
-
-.usage_block .quantity {
-  font-size: 25px;
-}
-
-.usage_block li {
-  font-size: 11px;
-  margin: 0 0 15px 0;
-}
-
-.usage_block .unit{
-  font-size: 11px;
-  text-transform: uppercase;
-  padding: 0 0 0 1px;
-}
-
 .main_nav {
   list-style: none;
   width: 222px;
@@ -593,72 +549,8 @@ tr.terminated {
   color: #999999;
 }
 
-#instance_tabs {
-  float: left;
-  width: 100%;
-  border-bottom: 1px solid #e1e1e1;
-}
-
-#instance_tabs li a {
-  background: #f2f2f2;
-  display: block;
-  font-size: 14px;
-  float: left;
-  padding: 5px 10px;
-  margin-right: 10px;
-  border: 1px solid #e1e1e1;
-  border-bottom: none;
-}
-
-#instance_tabs li.active a {
-  background: #fff;
-  padding-bottom: 8px;
-  margin-bottom: -5px;
-}
-
 #main_content {
   min-width: $main-content-min-width;
-
-  .nav-tabs {
-    border-bottom: 1px solid $nav-tabs-border-color;
-    border-top: none;
-    > li {
-      margin-bottom: -1px;
-      margin-top: 0;
-      > a {
-        margin-right: 0;
-        border-radius: 0;
-        padding: 5px 14px;
-        &:hover {
-          border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
-        }
-      }
-      &.active > a {
-        &,
-        &:hover,
-        &:focus {
-          border-color: $nav-tabs-border-color $nav-tabs-border-color #fff;
-          outline: none;
-        }
-      }
-    }
-  }
-
-  .tab-content {
-    padding: 10px;
-  }
-
-  .workflow .modal-body {
-    padding-left: 0;
-    padding-right: 0;
-
-    .tab-content {
-      border-left: 0 none;
-      border-right: 0 none;
-      border-bottom: 0 none;
-      padding-top: 10px;
-    }
-  }
 }
 
 .javascript_disabled_alert {
@@ -679,65 +571,8 @@ tr.terminated {
   word-wrap: break-word;
 }
 
-.nav-tabs a {
-  cursor: pointer;
-}
-
-.nav-tabs li.error a {
-  color: $brand-danger;
-}
-
-.nav-tabs li.error a:after {
-  content: "*";
-}
-
-.nav-tabs li.required a:after,
-form .form-group.required > label:after,
-form .form-field.required > label:after {
-  content: "*";
-  font-weight: bold;
-  line-height: 0;
-  padding-left: 4px;
-  color: $brand-primary;
-}
-
 /* Region selector in header */
 
-#region_selector {
-  position: absolute;
-  z-index: 9999;
-  right: 0;
-  top: 24px;
-}
-
-#region_selector a {
-  margin-left: 0;
-}
-
-#region_selector ul{
-  float: left;
-  margin-left: 5px;
-  padding-right: 21px;
-  width: 125px;
-}
-#region_selector ul:hover a {
-  display: block;
-}
-
-#region_selector li a {
-  padding: 3px 3px 3px 5px;
-  display: none;
-  background: #e1e1e1;
-  margin-top: -10px;
-}
-
-#region_selector li:first-child p{
-  background: #ededed url(../img/drop_arrow.png) no-repeat 106px 9px !important;
-  display: block;
-  border: 1px solid #e1e1e1;
-  padding: 5px;
-}
-
 iframe {
   border: none;
 }

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

@@ -54,6 +54,7 @@ $icon-swap: (
   share-square-o: 'share',
   link: 'link-variant',
   exchange: 'swap-horizontal',
+  asterisk: 'star',
 );
 
 @each $fa-icon, $mdi-icon in $icon-swap {