Move .fa and .svg global classes to btn-fa.styl and btn-svg.styl

Author: cheton

src/btn-fa.styl

@@ -0,0 +1,42 @@
+.btn {
+    &.btn-icon-only {
+        :global {
+            .fa {
+                margin-right: 0;
+            }
+        }
+    }
+
+    :global {
+        & .fa {
+            font-size: 14px;
+            margin-right: 8px;
+        }
+        & i.fa,
+        & span.fa {
+            font-size: 14px;
+            color: #666;
+        }
+    }
+}
+
+.btn-primary,
+.btn-danger {
+    :global {
+        & i.fa,
+        & span.fa {
+            color: inherit;
+        }
+    }
+}
+
+.btn-lg.btn,
+.btn-sm.btn,
+.btn-xs.btn {
+    :global {
+        & i.fa,
+        & span.fa {
+            font-size: inherit;
+        }
+    }
+}

src/btn-style.styl

@@ -51,12 +51,6 @@
     background-repeat: repeat-x;
     border-color: #0095ce;
 
-    :global {
-        .fa {
-            color: inherit;
-        }
-    }
-
     // Loading class within a primary button
     > [class*="loader-container"] > [class*="loader"] {
         border-color: rgba(255, 255, 255, 0.4);
@@ -110,12 +104,6 @@
     background-repeat: repeat-x;
     border-color: #d8262b;
 
-    :global {
-        .fa {
-            color: inherit;
-        }
-    }
-
     &:active,
     &.active {
         color: #fff;

src/btn-svg.styl

@@ -0,0 +1,30 @@
+.btn-lg.btn {
+    :global {
+        & i.svg,
+        & span.svg {
+            width: 24px;
+            height: 24px;
+        }
+    }
+}
+
+.btn {
+    :global {
+        & i.svg,
+        & span.svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}
+
+.btn-sm.btn,
+.btn-xs.btn {
+    :global {
+        & i.svg,
+        & span.svg {
+            width: 12px;
+            height: 12px;
+        }
+    }
+}

src/btn.styl

@@ -60,22 +60,6 @@
         margin-left: 8px;
     }
 
-    :global {
-        .fa {
-            font-size: 14px;
-            margin-right: 8px;
-            color: #666;
-        }
-    }
-
-    &.btn-icon-only {
-        :global {
-            .fa {
-                margin-right: 0;
-            }
-        }
-    }
-
     // button with icon
     &.btn-icon-only {
         min-width: 0;

src/index.styl

@@ -5,3 +5,5 @@
 @import "btn-group";
 @import "dropdown-toggle";
 @import "btn-form-validation";
+@import "btn-fa";
+@import "btn-svg";