feat(theme): add new Button component (#341)

BREAKING CHANGE: bootstrap button class `.btn-tn` renamed to `btn-xs`
akveo · Jul 11, 2018 · 89d429d · 89d429d
1 parent b9c03de
commit 89d429d
Show file tree

Hide file tree

Showing 33 changed files with 1,892 additions and 29 deletions.
diff --git a/docs/structure.ts b/docs/structure.ts
@@ -268,6 +268,14 @@ export const structure = [
           'NbCheckboxComponent',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Button',
+        icon: 'button.svg',
+        source: [
+          'NbButtonComponent',
+        ],
+      },
       {
         type: 'tabs',
         name: 'Spinner',
@@ -319,24 +327,6 @@ export const structure = [
           'NbAccordionItemBodyComponent',
         ],
       },
-      // {
-      //   type: 'tabs',
-      //   name: 'Chips',
-      //   icon: 'chips.svg',
-      //   source: [],
-      // },
-      // {
-      //   type: 'tabs',
-      //   name: 'Button',
-      //   icon: 'button.svg',
-      //   source: [],
-      // },
-      // {
-      //   type: 'tabs',
-      //   name: 'Modal',
-      //   icon: 'modal.svg',
-      //   source: [],
-      // },
     ],
   },
   {

diff --git a/src/framework/theme/components/button/_button-colors.scss b/src/framework/theme/components/button/_button-colors.scss
@@ -0,0 +1,264 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin btn-colors() {
+  &.btn-primary {
+    @include btn-primary();
+  }
+
+  &.btn-success {
+    @include btn-success();
+  }
+
+  &.btn-warning {
+    @include btn-warning();
+  }
+
+  &.btn-info {
+    @include btn-info();
+  }
+
+  &.btn-danger {
+    @include btn-danger();
+  }
+
+  &.btn-secondary {
+    @include btn-secondary();
+  }
+}
+
+@mixin btn-primary() {
+  background-color: nb-theme(btn-primary-bg);
+
+  @include btn-primary-focus();
+  @include btn-primary-hover();
+  @include btn-primary-active();
+  @include btn-disabled();
+  @include btn-primary-pulse();
+}
+
+@mixin btn-success() {
+  background-color: nb-theme(btn-success-bg);
+
+  @include btn-success-focus();
+  @include btn-success-hover();
+  @include btn-success-active();
+  @include btn-disabled();
+  @include btn-success-pulse();
+}
+
+@mixin btn-warning() {
+  background-color: nb-theme(btn-warning-bg);
+
+  @include btn-warning-focus();
+  @include btn-warning-hover();
+  @include btn-warning-active();
+  @include btn-disabled();
+  @include btn-warning-pulse();
+}
+
+@mixin btn-info() {
+  background-color: nb-theme(btn-info-bg);
+
+  @include btn-info-focus();
+  @include btn-info-hover();
+  @include btn-info-active();
+  @include btn-disabled();
+  @include btn-info-pulse();
+}
+
+@mixin btn-danger() {
+  background-color: nb-theme(btn-danger-bg);
+
+  @include btn-danger-focus();
+  @include btn-danger-hover();
+  @include btn-danger-active();
+  @include btn-disabled();
+  @include btn-danger-pulse();
+}
+
+@mixin btn-secondary() {
+  @include btn-secondary-border();
+  @include btn-secondary-fg();
+  @include btn-secondary-bg();
+  @include btn-secondary-focus();
+  @include btn-secondary-hover();
+  @include btn-secondary-active();
+  @include btn-disabled();
+  @include btn-secondary-pulse();
+
+  &:focus, &.focus,
+  &:hover, &.hover,
+  &:active, &.active {
+    @include btn-outline-fg();
+  }
+}
+
+@function btn-hover-color($bg, $percentage: 14%) {
+  @return tint(nb-theme($bg), $percentage);
+}
+
+@function btn-focus-color($bg, $percentage: 14%) {
+  @return tint(nb-theme($bg), $percentage);
+}
+
+@function btn-active-color($bg, $percentage: 14%) {
+  @return shade(nb-theme($bg), $percentage);
+}
+
+@mixin btn-outline-focus($focus) {
+  &:focus,
+  &.focus {
+    color: nb-theme(btn-outline-hover-fg);
+    border-color: $focus;
+    box-shadow: none;
+  }
+}
+
+@mixin btn-focus($focus) {
+  &:focus,
+  &.focus {
+    color: nb-theme(btn-outline-hover-fg);
+    background-color: $focus;
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+
+@mixin btn-hover($hover) {
+  &:hover,
+  &.hover {
+    color: nb-theme(btn-outline-hover-fg);
+    background-color: $hover;
+    border-color: transparent;
+  }
+}
+
+@mixin btn-active($active) {
+  &:active,
+  &.active,
+  &:active:focus {
+    color: nb-theme(btn-outline-hover-fg);
+    background-color: $active;
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+
+// Focus
+@mixin btn-primary-focus() {
+  @include btn-focus(btn-focus-color(btn-primary-bg));
+}
+
+@mixin btn-success-focus() {
+  @include btn-focus(btn-focus-color(btn-success-bg));
+}
+
+@mixin btn-warning-focus() {
+  @include btn-focus(btn-focus-color(btn-warning-bg));
+}
+
+@mixin btn-info-focus() {
+  @include btn-focus(btn-focus-color(btn-info-bg));
+}
+
+@mixin btn-danger-focus() {
+  @include btn-focus(btn-focus-color(btn-danger-bg));
+}
+
+@mixin btn-secondary-focus() {
+  @include btn-outline-focus(btn-focus-color(btn-secondary-border, 20%));
+}
+
+// Hover
+@mixin btn-primary-hover() {
+  @include btn-hover(btn-hover-color(btn-primary-bg));
+}
+
+@mixin btn-success-hover() {
+  @include btn-hover(btn-hover-color(btn-success-bg));
+}
+
+@mixin btn-warning-hover() {
+  @include btn-hover(btn-hover-color(btn-warning-bg));
+}
+
+@mixin btn-info-hover() {
+  @include btn-hover(btn-hover-color(btn-info-bg));
+}
+
+@mixin btn-danger-hover() {
+  @include btn-hover(btn-hover-color(btn-danger-bg));
+}
+
+@mixin btn-secondary-hover() {
+  @include btn-hover(btn-hover-color(btn-secondary-border));
+}
+
+// Active
+@mixin btn-primary-active() {
+  @include btn-active(btn-active-color(btn-primary-bg));
+}
+
+@mixin btn-success-active() {
+  @include btn-active(btn-active-color(btn-success-bg));
+}
+
+@mixin btn-warning-active() {
+  @include btn-active(btn-active-color(btn-warning-bg));
+}
+
+@mixin btn-info-active() {
+  @include btn-active(btn-active-color(btn-info-bg));
+}
+
+@mixin btn-danger-active() {
+  @include btn-active(btn-active-color(btn-danger-bg));
+}
+
+@mixin btn-secondary-active() {
+  @include btn-active(btn-active-color(btn-secondary-border));
+}
+
+// Disabled
+@mixin btn-disabled() {
+  &:disabled, &.btn-disabled {
+    opacity: nb-theme(btn-disabled-opacity);
+    cursor: default;
+  }
+}
+
+@mixin btn-secondary-border() {
+  border: 2px solid nb-theme(btn-secondary-border);
+}
+
+@mixin btn-secondary-fg() {
+  color: nb-theme(btn-outline-fg);
+}
+
+@mixin btn-secondary-bg() {
+  background-color: nb-theme(btn-secondary-bg);
+}
+
+// Pulse
+@mixin btn-primary-pulse() {
+  @include btn-pulse(primary, nb-theme(btn-primary-bg));
+}
+@mixin btn-success-pulse() {
+  @include btn-pulse(success, nb-theme(btn-success-bg));
+}
+@mixin btn-warning-pulse() {
+  @include btn-pulse(warning, nb-theme(btn-warning-bg));
+}
+@mixin btn-info-pulse() {
+  @include btn-pulse(info, nb-theme(btn-info-bg));
+}
+@mixin btn-danger-pulse() {
+  @include btn-pulse(danger, nb-theme(btn-danger-bg));
+}
+@mixin btn-secondary-pulse() {
+  @include btn-pulse(secondary, nb-theme(btn-secondary-border));
+}