feat: hairlines width can be configured with a sass variable

ionic-team · Feb 7, 2016 · 06b3a5b · 06b3a5b
1 parent 5ac1cf9
commit 06b3a5b
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 17 deletions.
diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss
@@ -88,6 +88,6 @@ ion-action-sheet {
 &.hairlines {
   .action-sheet-title,
   .action-sheet-button {
-    border-bottom-width: 0.55px;
+    border-bottom-width: $hairlines-width;
   }
 }
diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss
@@ -247,15 +247,15 @@ ion-alert {
 &.hairlines {
   .alert-radio-group,
   .alert-checkbox-group {
-    border-width: 0.55px;
+    border-width: $hairlines-width;
   }
 
   .alert-input {
-    border-width: 0.55px;
+    border-width: $hairlines-width;
   }
 
   .alert-button {
-    border-top-width: 0.55px;
-    border-right-width: 0.55px;
+    border-top-width: $hairlines-width;
+    border-right-width: $hairlines-width;
   }
 }
diff --git a/ionic/components/app/app.ios.scss b/ionic/components/app/app.ios.scss
@@ -21,7 +21,7 @@ hr {
 }
 
 &.hairlines hr {
-  height: 0.55px;
+  height: $hairlines-width;
 }
 
 @each $color-name, $color-value in $colors-ios {

diff --git a/ionic/components/button/button.ios.scss b/ionic/components/button/button.ios.scss
@@ -131,6 +131,9 @@ $button-ios-small-icon-font-size:     1.3em !default;
   }
 }
 
+&.hairlines .button-outline {
+  border-width: $hairlines-width;
+}
 
 // iOS Outline Button Color Mixin
 // --------------------------------------------------

diff --git a/ionic/components/item/item.ios.scss b/ionic/components/item/item.ios.scss
@@ -86,7 +86,7 @@ $item-ios-sliding-content-bg:         $list-ios-background-color !default;
 }
 
 &.hairlines .item-inner {
-  border-bottom-width: 0.55px;
+  border-bottom-width: $hairlines-width;
 }
 
 

diff --git a/ionic/components/list/list.ios.scss b/ionic/components/list/list.ios.scss
@@ -98,28 +98,28 @@ ion-list + ion-list {
 &.hairlines {
 
   ion-list-header {
-    border-bottom-width: 0.55px;
+    border-bottom-width: $hairlines-width;
   }
 
   ion-list {
 
     ion-item-options {
-      border-width: 0.55px;
+      border-width: $hairlines-width;
     }
 
     .item {
       .item-inner {
-        border-width: 0.55px;
+        border-width: $hairlines-width;
       }
     }
 
     > .item:first-child {
-      border-top-width: 0.55px;
+      border-top-width: $hairlines-width;
     }
 
     > .item:last-child,
     > ion-item-sliding:last-child .item {
-      border-bottom-width: 0.55px;
+      border-bottom-width: $hairlines-width;
     }
   }
 
@@ -163,7 +163,7 @@ ion-list[inset] + ion-list[inset] {
 
 &.hairlines ion-list[inset] {
   .item {
-    border-width: 0.55px;
+    border-width: $hairlines-width;
   }
 }
 

diff --git a/ionic/components/searchbar/searchbar.ios.scss b/ionic/components/searchbar/searchbar.ios.scss
@@ -175,7 +175,7 @@ ion-searchbar {
 // -----------------------------------------
 
 &.hairlines ion-searchbar {
-  border-bottom-width: 0.55px;
+  border-bottom-width: $hairlines-width;
 }
 
 

diff --git a/ionic/components/tabs/tabs.ios.scss b/ionic/components/tabs/tabs.ios.scss
@@ -97,11 +97,11 @@ ion-tabs[tabbarPlacement=top] tabbar {
 &.hairlines ion-tabs {
 
   tabbar {
-    border-top-width: 0.55px;
+    border-top-width: $hairlines-width;
   }
 
   &[tabbarPlacement="top"] tabbar {
-    border-bottom-width: 0.55px;
+    border-bottom-width: $hairlines-width;
   }
 
 }

diff --git a/ionic/components/toolbar/toolbar.ios.scss b/ionic/components/toolbar/toolbar.ios.scss
@@ -47,7 +47,7 @@ ion-navbar-section {
 }
 
 &.hairlines .toolbar-background {
-  border-bottom-width: 0.55px;
+  border-bottom-width: $hairlines-width;
 }
 
 

diff --git a/ionic/globals.core.scss b/ionic/globals.core.scss
@@ -13,3 +13,7 @@ $include-rtl: true !default;
 
 // Global font path
 $font-path: "../fonts" !default;
+
+
+// Hairline width
+$hairlines-width: 0.55px !default;
-Original file line number
+Diff line change
@@ Expand Up @@
     }
     &.hairlines .item-inner {
-      border-bottom-width: 0.55px;
+      border-bottom-width: $hairlines-width;
     }
@@ Expand Down @@