fix(core): glyphicon references

change to font icon
Orange-OpenSource · Feb 22, 2016 · b765fcd · b765fcd
1 parent 3a80edc
commit b765fcd
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 56 deletions.
diff --git a/docs-orange/_includes/boostwatch/tableSorter.html b/docs-orange/_includes/boostwatch/tableSorter.html
@@ -32,7 +32,7 @@ <h3 id="default-tables">Default tables</h3>
         <tr>
             <th scope="row">3</th>
             <td>
-                <span class="glyphicon glyphicon-ok text-success" aria-hidden="true"></span>
+                <span class="icon-tick text-success" aria-hidden="true"></span>
                 <span class="sr-only">success</span>
             </td>
             <td>Column content</td>
@@ -49,7 +49,7 @@ <h3 id="default-tables">Default tables</h3>
         <tr>
             <th scope="row">5</th>
             <td>
-                <span class="glyphicon glyphicon-info-sign text-info" aria-hidden="true"></span>
+                <span class="icon-info text-info" aria-hidden="true"></span>
                 <span class="sr-only">information</span>
             </td>
             <td>Column content</td>

diff --git a/docs-orange/assets/scss/_boosted-docs.scss b/docs-orange/assets/scss/_boosted-docs.scss
@@ -156,22 +156,19 @@
 }
 
 //
-// Glyphicons
+// Font icons
 //
 // Special styles for displaying the icons and their classes in the docs.
 
-.bs-glyphicons .glyphicon {
-    color: #F16E00;
-}
-.bs-glyphicons {
+.doc-fonticon {
   margin: 0 -10px 20px;
   overflow: hidden;
 }
-.bs-glyphicons-list {
+.doc-fonticon-list {
   padding-left: 0;
   list-style: none;
 }
-.bs-glyphicons li {
+.doc-fonticon li {
   float: left;
   width: 25%;
   height: 150px;
@@ -181,27 +178,23 @@
   background-color: #f9f9f9;
   border: 1px solid #fff;
 }
-.bs-glyphicons .glyphicon {
-  margin-top: 5px;
-  margin-bottom: 10px;
-  font-size: 24px;
-}
-.bs-glyphicons .glyphicon-class {
+
+.doc-fonticon .fonticon-class {
   display: block;
   text-align: center;
   word-wrap: break-word; // Help out IE10+ with class names
 }
-.bs-glyphicons li:hover {
+.doc-fonticon li:hover {
   color: #fff;
   background-color: #000;
 }
 
 @media (min-width: 768px) {
-  .bs-glyphicons {
+  .doc-fonticon {
     margin-right: 0;
     margin-left: 0;
   }
-  .bs-glyphicons li {
+  .doc-fonticon li {
     width: 12.5%;
   }
 }

diff --git a/docs-orange/boosted-migration.md b/docs-orange/boosted-migration.md
@@ -48,6 +48,6 @@ Rename the `.skiplinks_show` class to `.skiplinks-show`.
 Replace the `.axs_hide` class by `.sr-only` native class included into Bootstrap.
 
 
-### Glyphicons
+### Font icons
 
 Rename all the class containing  `_` to `-`.
diff --git a/docs-orange/boostwatch/index.html b/docs-orange/boostwatch/index.html
@@ -6,12 +6,12 @@
 
 <h2 id="orange-icons">Orange Icons</h2>
 <p>Icons created from the Orange brand.</p>
-<div class="bs-glyphicons">
-    <ul class="bs-glyphicons-list">
+<div class="doc-fonticon">
+    <ul class="doc-fonticon-list">
         {% for iconClassName in site.data.orange-icons %}
         <li>
             <span class="{{ iconClassName }}" aria-hidden="true"></span>
-            <span class="glyphicon-class">{{ iconClassName }}</span>
+            <span class="fonticon-class">{{ iconClassName }}</span>
         </li>
         {% endfor %}
     </ul>

diff --git a/docs-orange/examples/orange-admin/edit.html b/docs-orange/examples/orange-admin/edit.html
@@ -36,12 +36,12 @@
                     <a class="navbar-brand" href="#"><span class="sr-only">Link to the homepage</span></a>
 					<ul class="nav navbar-nav" role="tablist">
 						<li role="presentation" class="nav-item"><a class="nav-link" href="#" role="button">edit news &nbsp;<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></li>
-						<li role="presentation" class="nav-item"><a class="nav-link" href="#" role="button">preferences &nbsp;<span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a></li>
+						<li role="presentation" class="nav-item"><a class="nav-link" href="#" role="button">preferences &nbsp;<span class="icon-settings" aria-hidden="true"></span></a></li>
 					</ul>
 					<ul class="nav navbar-nav pull-md-right">
 						<li role="presentation" class="nav-item dropdown">
 							<a href="#" class="dropdown-toggle active" data-toggle="dropdown" type="button">
-								<span class="glyphicon glyphicon-user" aria-hidden="true"></span>hello <span class="orange">admin&nbsp;</span><b class="caret" aria-hidden="true"></b>
+								<span class="icon-avatar" aria-hidden="true"></span>hello <span class="orange">admin&nbsp;</span><b class="caret" aria-hidden="true"></b>
 							</a>
 							<ul class="dropdown-menu">
 								<li><a class="dropdown-item" href="#">logout</a></li>

diff --git a/docs-orange/examples/orange-admin/index.html b/docs-orange/examples/orange-admin/index.html
@@ -35,12 +35,12 @@
                     <a class="navbar-brand" href="#"><span class="sr-only">Link to the homepage</span></a>
 					<ul class="nav navbar-nav" role="tablist">
 						<li role="presentation" class="nav-item"><a class="nav-link" href="#" role="button">edit news &nbsp;<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></li>
-						<li role="presentation" class="nav-item"><a class="nav-link" href="#" role="button">preferences &nbsp;<span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a></li>
+						<li role="presentation" class="nav-item"><a class="nav-link" href="#" role="button">preferences &nbsp;<span class="icon-settings" aria-hidden="true"></span></a></li>
 					</ul>
 					<ul class="nav navbar-nav pull-md-right">
 						<li role="presentation" class="nav-item dropdown">
 							<a href="#" class="dropdown-toggle active" data-toggle="dropdown" type="button">
-								<span class="glyphicon glyphicon-user" aria-hidden="true"></span>hello <span class="orange">admin&nbsp;</span><b class="caret" aria-hidden="true"></b>
+								<span class="icon-avatar" aria-hidden="true"></span>hello <span class="orange">admin&nbsp;</span><b class="caret" aria-hidden="true"></b>
 							</a>
 							<ul class="dropdown-menu">
 								<li><a class="dropdown-item" href="#">logout</a></li>

diff --git a/docs-orange/examples/orange-dashboard/index.html b/docs-orange/examples/orange-dashboard/index.html
@@ -85,7 +85,7 @@
 					<ul class="nav navbar-nav pull-md-right">
 						<li class="nav-item dropdown" role="presentation">
 							<a class="nav-link" href="#" class="dropdown-toggle active" data-toggle="dropdown">
-								<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
+								<span class="icon-international-globe" aria-hidden="true"></span>
 								<span class="hidden-xs hidden-sm">&nbsp;language</span>&nbsp;<b class="caret" aria-hidden="true"></b>
 							</a>
 							<ul class="dropdown-menu">
@@ -95,7 +95,7 @@
 						</li>
 						<li class="nav-item dropdown" role="presentation">
 							<a href="#" class="dropdown-toggle active" data-toggle="dropdown">
-								<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+								<span class="icon-avatar" aria-hidden="true"></span>
 								<span class="hidden-xs hidden-sm">&nbsp;hello
 									<span class="orange">admin</span>&nbsp;
 								</span><b class="caret" aria-hidden="true"></b>

diff --git a/docs-orange/examples/orange-form/index.html b/docs-orange/examples/orange-form/index.html
@@ -174,9 +174,9 @@
 			</div>
 			<div class="form-group row">
 				<div class="col-sm-offset-2 col-sm-10">
-					<button type="submit" class="btn btn-secondary btn-sm"><span class="glyphicon glyphicon-chevron-left"></span> Previous</button>
+					<button type="submit" class="btn btn-secondary btn-sm"><span class="icon-arrow-prev"></span> Previous</button>
 					<button type="submit" class="btn btn-secondary btn-sm">Save</button>
-					<button type="submit" class="btn btn-primary btn-sm">Next <span class="glyphicon glyphicon-chevron-right"></span></button>
+					<button type="submit" class="btn btn-primary btn-sm">Next <span class="icon-arrow-next"></span></button>
 				</div>
 			</div>
 		</form>

diff --git a/scss/_o-nav.scss b/scss/_o-nav.scss
@@ -51,7 +51,7 @@
   font-family: $font-family-base;
   font-size: $font-size-base;
   font-weight: normal;
-  line-height: $line-height;
+  line-height: $line-height-base;
   color: $o-nav-tabs-color;
   text-align: left;
   white-space: normal;

diff --git a/scss/_o-special_font-size.scss b/scss/_o-special_font-size.scss
@@ -13,10 +13,8 @@ pre {
 @media screen {
   @include media-breakpoint-up(sm) {
     .carousel-control {
-      .glyphicon-chevron-left,
-      .glyphicon-chevron-right,
-      .icon-prev,
-      .icon-next {
+      .icon-arrow-prev,
+      .icon-arrow-next {
         font-size: 3rem;
       }
     }

diff --git a/scss/_o-variables.scss b/scss/_o-variables.scss
@@ -88,7 +88,7 @@ $font-size-h5: 2.4rem;
 $font-size-h6: 2rem;
 
 // Unit-less `line-height` for use in components like buttons.
-$line-height: (20 / 16); //line spacing 20px
+$line-heigh-base: (20 / 16); //line spacing 20px
 // Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 // For REM size
 $line-height-computed: 2rem;
@@ -101,8 +101,6 @@ $headings-color: $brand-orange-black;
 
 // Iconography
 //
-// Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
-
 // Load fonts from this directory.
 $icon-font-path:          "../fonts/";
 // for REM size
@@ -163,6 +161,7 @@ $table-border-color: $gray-light;
 // For each of Bootstrap's buttons, define text, background and border color.
 
 $btn-font-weight: $brand-font-weight-bold;
+$btn-line-height: (20 / 16);
 
 $btn-primary-color: $brand-orange-white;
 $btn-primary-bg: $brand-primary;
@@ -536,7 +535,7 @@ $modal-inner-padding:         15px;
 // Padding applied to the modal title
 $modal-title-padding:         15px;
 // Modal title line-height
-$modal-title-line-height:     $line-height;
+$modal-title-line-height:     $line-height-base;
 
 // Background color of modal content area
 $modal-content-bg:                             $brand-orange-white;

diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss
@@ -270,22 +270,6 @@ a:focus {
     }
   }
 
-//   .glyphicon {
-//     position: relative;
-//     top: auto;
-//     margin: auto;
-//     color: $brand-orange;
-//     text-shadow: none;
-//   }
-//
-//   .glyphicon-chevron-left {
-//     left: auto;
-//   }
-//
-//   .glyphicon-chevron-right {
-//     right: auto;
-//   }
-
   span[aria-hidden="true"] {
     font-size: 3rem;
     color: $brand-orange;
@@ -539,7 +523,7 @@ a.btn {
 // Reposition feedback icon if input has visible label above
 .has-feedback label {
   ~ .form-control-feedback {
-    top: ($line-height + .5); // Height of the `label` and its margin
+    top: ($line-height-base + .5); // Height of the `label` and its margin
   }
 }