Button stylings

2017-02-09 13:05:14 -05:00
parent 6c2b9d7429
commit 53c358a63a
9 changed files with 978 additions and 10 deletions
@@ -1,2 +1,94 @@
@import "bootstrap_variables_leafweb";
@import "bootstrap.scss";
+
+// Alternate buttons styles inverse and transparent
+// --------------------------------------------------
+.btn-default {
+  &.btn-inverse {
+    @include button-variant($btn-default-bg, $btn-default-color, $btn-default-bg);
+    &:hover {
+      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+    }
+  }
+  &.btn-transparent {
+    @include button-variant($btn-default-bg, transparent, $btn-default-bg);
+    &:hover {
+      @include button-variant($btn-default-bg, darken($btn-default-bg, 25%), $btn-default-bg);
+    }
+  }
+}
+
+.btn-primary {
+  &.btn-inverse {
+    @include button-variant($btn-primary-bg, $btn-primary-color, $btn-primary-bg);
+    &:hover {
+      @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+    }
+  }
+  &.btn-transparent {
+    @include button-variant($btn-primary-bg, transparent, $btn-primary-bg);
+    &:hover {
+      @include button-variant($btn-primary-bg, darken($btn-primary-bg, 25%), $btn-primary-bg);
+    }
+  }
+}
+
+.btn-success {
+  &.btn-inverse {
+    @include button-variant($btn-success-bg, $btn-success-color, $btn-success-bg);
+    &:hover {
+      @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+    }
+  }
+  &.btn-transparent {
+    @include button-variant($btn-success-bg, transparent, $btn-success-bg);
+    &:hover {
+      @include button-variant($btn-success-bg, darken($btn-success-bg, 25%), $btn-success-bg);
+    }
+  }
+}
+
+.btn-info {
+  &.btn-inverse {
+    @include button-variant($btn-info-bg, $btn-info-color, $btn-info-bg);
+    &:hover {
+      @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+    }
+  }
+  &.btn-transparent {
+    @include button-variant($btn-info-bg, transparent, $btn-info-bg);
+    &:hover {
+      @include button-variant($btn-info-bg, darken($btn-info-bg, 25%), $btn-info-bg);
+    }
+  }
+}
+
+.btn-warning {
+  &.btn-inverse {
+    @include button-variant($btn-warning-bg, $btn-warning-color, $btn-warning-bg);
+    &:hover {
+      @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+    }
+  }
+  &.btn-transparent {
+    @include button-variant($btn-warning-bg, transparent, $btn-warning-bg);
+    &:hover {
+      @include button-variant($btn-warning-bg, darken($btn-warning-bg, 25%), $btn-warning-bg);
+    }
+  }
+}
+
+.btn-danger {
+  &.btn-inverse {
+    @include button-variant($btn-danger-bg, $btn-danger-color, $btn-danger-bg);
+    &:hover {
+      @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+    }
+  }
+  &.btn-transparent {
+    @include button-variant($btn-danger-bg, transparent, $btn-danger-bg);
+    &:hover {
+      @include button-variant($btn-danger-bg, darken($btn-danger-bg, 25%), $btn-danger-bg);
+    }
+  }
+}