Fix for issues #115 and #159 - Navbar search box and progress ring/bar (

#162)

* Added inline-flex for parent of search bar, fix issues in mobile

* Issue # 115 - Progress Bar and Progress Ring
Fixed the progress bar and ring issues, added the center alignment option.
Documentation was updated

* Fixed the documentation of NavBar, Hamburguer icon is not displayed.
Container is not centering the content

* Fixed the documentation of NavBar, changed the overrides to correct file.

* Removed override from incorrect file

* Recompiled optional css

* Fixed documentation of NavBar, chevron icons in blue bar.

src/doc/partials/loader.hbs

@@ -81,6 +81,14 @@
 ```
     {{/markdown}}
 
+    <div class="col-md-24 m-b-sm">
+      <div class="guidance guidance-usage m-t-xs">
+        {{#markdown}}
+{{> progress-bar-guidance.md}}
+        {{/markdown}}
+      </div>
+    </div>
+
   </div>
 
 </section>

src/doc/partials/navbar/navbar-example.hbs

@@ -1,6 +1,6 @@
 <nav class="navbar navbar-default">
     <div class="navbar-global theme-default">
-        <div class="container-fluid">
+        <div class="container">
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                     <span class="sr-only">Toggle navigation</span>
@@ -68,11 +68,11 @@
     </div>
 
     <div class="navbar-local color-accent theme-dark">
-        <div class="container-fluid">
+        <div class="container">
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                     <span class="sr-only">Toggle navigation</span>
-                    <i class="icon-hamburger"></i>
+                    <i class="glyph glyph-hamburger"></i>
                 </button>
                 <a class="navbar-brand" href="#">Brand</a>
             </div>
@@ -82,7 +82,7 @@
                     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                     <li><a href="#">Link</a></li>
                     <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="icon-flipviewdown"></i></a>
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="glyph glyph-chevron-down-2"></i></a>
                         <ul class="dropdown-menu">
                             <li><a href="#">Action</a></li>
                             <li><a href="#">Another action</a></li>
@@ -98,7 +98,7 @@
                 <ul class="nav navbar-nav navbar-right">
                     <li><a href="#">Link</a></li>
                     <li class="dropdown">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="icon-flipviewdown"></i></a>
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="glyph glyph-chevron-down-2"></i></a>
                         <ul class="dropdown-menu">
                             <li><a href="#">Action</a></li>
                             <li><a href="#">Another action</a></li>

src/doc/partials/progress-bar-guidance.md.hbs

@@ -0,0 +1 @@
+* To center the progress bar, the parent control should have `text-align` to `center`. E.g. `<div style="text-align: center">`.

src/doc/partials/progress-ring-guidance.md.hbs

@@ -1 +1,4 @@
 * The default size is shown in the first example above. Add the `.progress-medium` class to the outer `<div class="progress-ring">` in order to get the medium-sized ring. Add the `.progress-large` class for the large-sized ring.
+{{#markdown}}
+{{> progress-bar-guidance.md}}
+{{/markdown}}

src/scss/override/_bootstrap-optional.scss

@@ -75,4 +75,4 @@
 // @import "bootstrap-sass/assets/stylesheets/bootstrap/carousel";
 // Utility classes
 @import "bootstrap-sass/assets/stylesheets/bootstrap/utilities";
-@import "bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
+@import "bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

src/scss/override/_bootstrap.scss

@@ -75,4 +75,4 @@
 @import "bootstrap-sass/assets/stylesheets/bootstrap/carousel";
 // Utility classes
 @import "bootstrap-sass/assets/stylesheets/bootstrap/utilities";
-@import "bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
+@import "bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

src/scss/override/_navbar.scss

@@ -412,3 +412,8 @@ $navbar-transition-out: .5s;
         }
     }
 }
+
+// Bootsrap Overrides
+.navbar-right > div:first-child {
+    display: inline-flex
+}

src/scss/win/_progress-bar.scss

@@ -1,7 +1,8 @@
 .progress-bar {
   position: relative;
   width: 180px;
-  height: 4px;
+  float: inherit;
+  display: inline-block;
 
   .progress-circle {
     position: absolute;

src/scss/win/_progress-ring.scss

@@ -2,6 +2,8 @@
   position: relative;
   width: 20px;
   height: 20px;
+  text-align: left;
+  display: inline-block;
 
   .progress-circle {
     position: absolute;