From 89d429dfd0e42cfdd0d0400d070a8dd1d82386ce Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Wed, 11 Jul 2018 17:35:00 +0300 Subject: [PATCH] feat(theme): add new Button component (#341) BREAKING CHANGE: bootstrap button class `.btn-tn` renamed to `btn-xs` --- docs/structure.ts | 26 +- .../components/button/_button-colors.scss | 264 ++++++++ .../components/button/_button-heroes.scss | 622 ++++++++++++++++++ .../components/button/_button-outlines.scss | 205 ++++++ .../components/button/_button-shapes.scss | 31 + .../components/button/_button-sizes.scss | 55 ++ .../button/_button.component.theme.scss | 35 + .../components/button/button.component.scss | 26 + .../components/button/button.component.ts | 258 ++++++++ .../theme/components/button/button.module.ts | 28 + .../theme/components/button/button.spec.ts | 68 ++ src/framework/theme/index.ts | 2 + .../theme/styles/global/_components.scss | 2 + .../global/bootstrap/_size-buttons.scss | 12 +- .../theme/styles/themes/_default.scss | 6 +- .../bootstrap/bootstrap-test.component.ts | 6 + .../button/button-colors.component.html | 10 + .../button/button-colors.component.ts | 21 + .../button/button-hero.component.html | 10 + .../button/button-hero.component.ts | 21 + .../button/button-outline.component.html | 10 + .../button/button-outline.component.ts | 21 + .../button/button-shapes.component.html | 8 + .../button/button-shapes.component.ts | 21 + .../button/button-showcase.component.html | 7 + .../button/button-showcase.component.ts | 21 + .../button/button-sizes.component.html | 9 + .../button/button-sizes.component.ts | 21 + .../button/button-types.component.html | 9 + .../button/button-types.component.ts | 26 + src/playground/playground-routing.module.ts | 40 ++ src/playground/playground.module.ts | 16 + tslint.json | 4 +- 33 files changed, 1892 insertions(+), 29 deletions(-) create mode 100644 src/framework/theme/components/button/_button-colors.scss create mode 100644 src/framework/theme/components/button/_button-heroes.scss create mode 100644 src/framework/theme/components/button/_button-outlines.scss create mode 100644 src/framework/theme/components/button/_button-shapes.scss create mode 100644 src/framework/theme/components/button/_button-sizes.scss create mode 100644 src/framework/theme/components/button/_button.component.theme.scss create mode 100644 src/framework/theme/components/button/button.component.scss create mode 100644 src/framework/theme/components/button/button.component.ts create mode 100644 src/framework/theme/components/button/button.module.ts create mode 100644 src/framework/theme/components/button/button.spec.ts create mode 100644 src/playground/button/button-colors.component.html create mode 100644 src/playground/button/button-colors.component.ts create mode 100644 src/playground/button/button-hero.component.html create mode 100644 src/playground/button/button-hero.component.ts create mode 100644 src/playground/button/button-outline.component.html create mode 100644 src/playground/button/button-outline.component.ts create mode 100644 src/playground/button/button-shapes.component.html create mode 100644 src/playground/button/button-shapes.component.ts create mode 100644 src/playground/button/button-showcase.component.html create mode 100644 src/playground/button/button-showcase.component.ts create mode 100644 src/playground/button/button-sizes.component.html create mode 100644 src/playground/button/button-sizes.component.ts create mode 100644 src/playground/button/button-types.component.html create mode 100644 src/playground/button/button-types.component.ts diff --git a/docs/structure.ts b/docs/structure.ts index b26c7d51fd..9fde19a8e6 100644 --- 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 new file mode 100644 index 0000000000..b6ff30cb27 --- /dev/null +++ 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)); +} diff --git a/src/framework/theme/components/button/_button-heroes.scss b/src/framework/theme/components/button/_button-heroes.scss new file mode 100644 index 0000000000..bc6b7052ac --- /dev/null +++ b/src/framework/theme/components/button/_button-heroes.scss @@ -0,0 +1,622 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@mixin btn-heroes() { + &.btn-hero.btn-primary { + @include btn-hero-primary(); + } + + &.btn-hero.btn-success { + @include btn-hero-success(); + } + + &.btn-hero.btn-warning { + @include btn-hero-warning(); + } + + &.btn-hero.btn-info { + @include btn-hero-info(); + } + + &.btn-hero.btn-danger { + @include btn-hero-danger(); + } + + &.btn-hero.btn-secondary { + @include btn-hero-secondary(); + } +} + +@mixin btn-hero-primary() { + @include btn-hero-primary-gradient(); + @include btn-hero-primary-bevel-glow-shadow(); + @include btn-hero-text(); + @include btn-hero-primary-focus(); + @include btn-hero-primary-hover(); + @include btn-hero-primary-active(); + @include btn-hero-primary-border(); + @include btn-hero-disabled(); + @include btn-hero-line-height(); + @include btn-hero-primary-pulse(); +} + +@mixin btn-hero-success() { + @include btn-hero-success-gradient(); + @include btn-hero-success-bevel-glow-shadow(); + @include btn-hero-text(); + @include btn-hero-success-focus(); + @include btn-hero-success-hover(); + @include btn-hero-success-active(); + @include btn-hero-success-border(); + @include btn-hero-disabled(); + @include btn-hero-line-height(); + @include btn-hero-success-pulse(); +} + +@mixin btn-hero-warning() { + @include btn-hero-warning-gradient(); + @include btn-hero-warning-bevel-glow-shadow(); + @include btn-hero-text(); + @include btn-hero-warning-focus(); + @include btn-hero-warning-hover(); + @include btn-hero-warning-active(); + @include btn-hero-warning-border(); + @include btn-hero-disabled(); + @include btn-hero-line-height(); + @include btn-hero-warning-pulse(); +} + +@mixin btn-hero-info() { + @include btn-hero-info-gradient(); + @include btn-hero-info-bevel-glow-shadow(); + @include btn-hero-text(); + @include btn-hero-info-focus(); + @include btn-hero-info-hover(); + @include btn-hero-info-active(); + @include btn-hero-info-border(); + @include btn-hero-disabled(); + @include btn-hero-line-height(); + @include btn-hero-info-pulse(); +} + +@mixin btn-hero-danger() { + @include btn-hero-danger-gradient(); + @include btn-hero-danger-bevel-glow-shadow(); + @include btn-hero-text(); + @include btn-hero-danger-focus(); + @include btn-hero-danger-hover(); + @include btn-hero-danger-active(); + @include btn-hero-danger-border(); + @include btn-hero-disabled(); + @include btn-hero-line-height(); + @include btn-hero-danger-pulse(); +} + +@mixin btn-hero-secondary() { + color: nb-theme(btn-outline-fg); + @include btn-hero-secondary-bg(); + @include btn-hero-secondary-bevel-glow-shadow(); + @include btn-hero-text(); + @include btn-hero-secondary-focus(); + @include btn-hero-secondary-hover(); + @include btn-hero-secondary-active(); + @include btn-hero-secondary-border(); + @include btn-hero-disabled(); + @include btn-hero-secondary-pulse(); +} + +@function btn-hero-gradient-left($color, $degrees: 20deg) { + @return adjust-hue($color, $degrees); +} + +// Functions for box-shadow +@function btn-hero-bevel($color) { + @return nb-theme(btn-hero-bevel-size) shade($color, 14%); +} + +@function btn-hero-glow($color) { + @return nb-theme(btn-hero-glow-size) $color; +} + +// Left colors +@function btn-hero-primary-left-color() { + @return btn-hero-gradient-left(nb-theme(btn-primary-bg)); +} + +@function btn-hero-success-left-color() { + @return btn-hero-gradient-left(nb-theme(btn-success-bg)); +} + +@function btn-hero-warning-left-color() { + @return btn-hero-gradient-left(nb-theme(btn-warning-bg), 10deg); +} + +@function btn-hero-info-left-color() { + @return btn-hero-gradient-left(nb-theme(btn-info-bg), -10deg); +} + +@function btn-hero-danger-left-color() { + @return btn-hero-gradient-left(nb-theme(btn-danger-bg), -20deg); +} + +@function btn-hero-secondary-left-color() { + @return btn-hero-gradient-left(nb-theme(btn-secondary-border)); +} + +// Middle colors +@function btn-hero-primary-middle-color() { + @return mix(btn-hero-primary-left-color(), nb-theme(btn-primary-bg)); +} + +@function btn-hero-success-middle-color() { + @return mix(btn-hero-success-left-color(), nb-theme(btn-success-bg)); +} + +@function btn-hero-warning-middle-color() { + @return mix(btn-hero-warning-left-color(), nb-theme(btn-warning-bg)); +} + +@function btn-hero-info-middle-color() { + @return mix(btn-hero-info-left-color(), nb-theme(btn-info-bg)); +} + +@function btn-hero-danger-middle-color() { + @return mix(btn-hero-danger-left-color(), nb-theme(btn-danger-bg)); +} + +@function btn-hero-secondary-middle-color() { + @return mix(btn-hero-secondary-left-color(), nb-theme(btn-secondary-border)); +} + +// light gradients +@function btn-hero-light-gradient($color-left, $color-right) { + $color-left: tint($color-left, 14%); + $color-right: tint($color-right, 14%); + + @return linear-gradient(to right, $color-left, $color-right); +} + +@function btn-hero-primary-light-gradient() { + $color-right: nb-theme(btn-primary-bg); + $color-left: btn-hero-primary-left-color(); + + @return btn-hero-light-gradient($color-left, $color-right); +} + +@function btn-hero-success-light-gradient() { + $color-right: nb-theme(btn-success-bg); + $color-left: btn-hero-success-left-color(); + + @return btn-hero-light-gradient($color-left, $color-right); +} + +@function btn-hero-warning-light-gradient() { + $color-right: nb-theme(btn-warning-bg); + $color-left: btn-hero-warning-left-color(); + + @return btn-hero-light-gradient($color-left, $color-right); +} + +@function btn-hero-info-light-gradient() { + $color-right: nb-theme(btn-info-bg); + $color-left: btn-hero-info-left-color(); + + @return btn-hero-light-gradient($color-left, $color-right); +} + +@function btn-hero-danger-light-gradient() { + $color-right: nb-theme(btn-danger-bg); + $color-left: btn-hero-danger-left-color(); + + @return btn-hero-light-gradient($color-left, $color-right); +} + +// dark gradients +@function btn-hero-dark-gradient($color-left, $color-right) { + $color-left: shade($color-left, 14%); + $color-right: shade($color-right, 14%); + + @return linear-gradient(to right, $color-left, $color-right); +} + +@function btn-hero-primary-dark-gradient() { + $color-right: nb-theme(btn-primary-bg); + $color-left: btn-hero-primary-left-color(); + + @return btn-hero-dark-gradient($color-left, $color-right); +} + +@function btn-hero-success-dark-gradient() { + $color-right: nb-theme(btn-success-bg); + $color-left: btn-hero-success-left-color(); + + @return btn-hero-dark-gradient($color-left, $color-right); +} + +@function btn-hero-warning-dark-gradient() { + $color-right: nb-theme(btn-warning-bg); + $color-left: btn-hero-warning-left-color(); + + @return btn-hero-dark-gradient($color-left, $color-right); +} + +@function btn-hero-info-dark-gradient() { + $color-right: nb-theme(btn-info-bg); + $color-left: btn-hero-info-left-color(); + + @return btn-hero-dark-gradient($color-left, $color-right); +} + +@function btn-hero-danger-dark-gradient() { + $color-right: nb-theme(btn-danger-bg); + $color-left: btn-hero-danger-left-color(); + + @return btn-hero-dark-gradient($color-left, $color-right); +} +// End functions + +// Help mixins +@mixin btn-hero-text() { + text-shadow: nb-theme(btn-hero-text-shadow); +} + +@mixin btn-hero-hover($light-gradient) { + &:hover, + .hover { + background-image: $light-gradient; + } +} + +@mixin btn-hero-focus($light-gradient) { + &:focus, + .focus { + background-image: $light-gradient; + } +} + +@mixin btn-hero-active($dark-gradient) { + &:active, + .active { + background-image: $dark-gradient; + box-shadow: none; + border-color: transparent; + } +} +// End help mixins + +// Gradient +@mixin btn-hero-primary-gradient() { + $color-right: nb-theme(btn-primary-bg); + $color-left: btn-hero-primary-left-color(); + + @include nb-right-gradient($color-left, $color-right); +} + +@mixin btn-hero-success-gradient() { + $color-right: nb-theme(btn-success-bg); + $color-left: btn-hero-success-left-color(); + + @include nb-right-gradient($color-left, $color-right); +} + +@mixin btn-hero-warning-gradient() { + $color-right: nb-theme(btn-warning-bg); + $color-left: btn-hero-warning-left-color(); + + @include nb-right-gradient($color-left, $color-right); +} + +@mixin btn-hero-info-gradient() { + $color-right: nb-theme(btn-info-bg); + $color-left: btn-hero-info-left-color(); + + @include nb-right-gradient($color-left, $color-right); +} + +@mixin btn-hero-danger-gradient() { + $color-right: nb-theme(btn-danger-bg); + $color-left: btn-hero-danger-left-color(); + + @include nb-right-gradient($color-left, $color-right); +} + +@mixin btn-hero-secondary-bg() { + background-color: nb-theme(btn-secondary-bg); +} + + +// Bevel +@function btn-hero-primary-bevel() { + @return btn-hero-bevel(btn-hero-primary-middle-color()); +} + +@function btn-hero-success-bevel() { + @return btn-hero-bevel(btn-hero-success-middle-color()); +} + +@function btn-hero-warning-bevel() { + @return btn-hero-bevel(btn-hero-warning-middle-color()); +} + +@function btn-hero-info-bevel() { + @return btn-hero-bevel(btn-hero-info-middle-color()); +} + +@function btn-hero-danger-bevel() { + @return btn-hero-bevel(btn-hero-danger-middle-color()); +} + +@function btn-hero-secondary-bevel() { + @return btn-hero-bevel(btn-hero-secondary-middle-color()); +} + +// Glow +@function btn-hero-primary-glow() { + @return btn-hero-glow(btn-hero-primary-middle-color()); +} + +@function btn-hero-success-glow() { + @return btn-hero-glow(btn-hero-success-middle-color()); +} + +@function btn-hero-warning-glow() { + @return btn-hero-glow(btn-hero-warning-middle-color()); +} + +@function btn-hero-info-glow() { + @return btn-hero-glow(btn-hero-info-middle-color()); +} + +@function btn-hero-danger-glow() { + @return btn-hero-glow(btn-hero-danger-middle-color()); +} + +@function btn-hero-secondary-glow() { + @return btn-hero-glow(btn-hero-secondary-middle-color()); +} + +// Bevel-glow-shadow +@mixin btn-hero-bevel-glow-shadow($bevel, $glow, $shadow) { + $box-shadow: $bevel, $glow; + @if ($shadow != 'none') { + $box-shadow: $box-shadow, $shadow; + } + box-shadow: $box-shadow; +} + +@mixin btn-hero-primary-bevel-glow-shadow() { + $bevel: btn-hero-primary-bevel(); + $glow: btn-hero-primary-glow(); + $shadow: nb-theme(btn-hero-shadow); + + @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow); +} + +@mixin btn-hero-success-bevel-glow-shadow() { + $bevel: btn-hero-success-bevel(); + $glow: btn-hero-success-glow(); + $shadow: nb-theme(btn-hero-shadow); + + @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow); +} + +@mixin btn-hero-warning-bevel-glow-shadow() { + $bevel: btn-hero-warning-bevel(); + $glow: btn-hero-warning-glow(); + $shadow: nb-theme(btn-hero-shadow); + + @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow); +} + +@mixin btn-hero-info-bevel-glow-shadow() { + $bevel: btn-hero-info-bevel(); + $glow: btn-hero-info-glow(); + $shadow: nb-theme(btn-hero-shadow); + + @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow); +} + +@mixin btn-hero-danger-bevel-glow-shadow() { + $bevel: btn-hero-danger-bevel(); + $glow: btn-hero-danger-glow(); + $shadow: nb-theme(btn-hero-shadow); + + @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow); +} + +@mixin btn-hero-secondary-bevel-glow-shadow() { + $bevel: btn-hero-secondary-bevel(); + $glow: btn-hero-secondary-glow(); + $shadow: nb-theme(btn-hero-shadow); + + @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow); +} + +// Border +@mixin btn-hero-primary-border() { + border: none; +} + +@mixin btn-hero-success-border() { + border: none; +} + +@mixin btn-hero-warning-border() { + border: none; +} + +@mixin btn-hero-info-border() { + border: none; +} + +@mixin btn-hero-danger-border() { + border: none; +} + +@mixin btn-hero-secondary-border() { + border: 2px solid nb-theme(btn-secondary-border); +} + +// Hover +@mixin btn-hero-primary-hover() { + @include btn-hero-hover(btn-hero-primary-light-gradient()); +} + +@mixin btn-hero-success-hover() { + @include btn-hero-hover(btn-hero-success-light-gradient()); +} + +@mixin btn-hero-warning-hover() { + @include btn-hero-hover(btn-hero-warning-light-gradient()); +} + +@mixin btn-hero-info-hover() { + @include btn-hero-hover(btn-hero-info-light-gradient()); +} + +@mixin btn-hero-danger-hover() { + @include btn-hero-hover(btn-hero-danger-light-gradient()); +} + +@mixin btn-hero-secondary-hover() { + &:hover, + .hover { + background-color: rgba(nb-theme(btn-secondary-border), 0.2); + } +} + +// Focus +@mixin btn-hero-primary-focus() { + @include btn-hero-focus(btn-hero-primary-light-gradient()); +} + +@mixin btn-hero-success-focus() { + @include btn-hero-focus(btn-hero-success-light-gradient()); +} + +@mixin btn-hero-warning-focus() { + @include btn-hero-focus(btn-hero-warning-light-gradient()); +} + +@mixin btn-hero-info-focus() { + @include btn-hero-focus(btn-hero-info-light-gradient()); +} + +@mixin btn-hero-danger-focus() { + @include btn-hero-focus(btn-hero-danger-light-gradient()); +} + +@mixin btn-hero-secondary-focus() { + $color: nb-theme(btn-secondary-border); + + &:focus, + .focus { + border-color: tint($color, 14%); + } +} + +// Active +@mixin btn-hero-primary-active() { + @include btn-hero-active(btn-hero-primary-dark-gradient()); +} + +@mixin btn-hero-success-active() { + @include btn-hero-active(btn-hero-success-dark-gradient()); +} + +@mixin btn-hero-warning-active() { + @include btn-hero-active(btn-hero-warning-dark-gradient()); +} + +@mixin btn-hero-info-active() { + @include btn-hero-active(btn-hero-info-dark-gradient()); +} + +@mixin btn-hero-danger-active() { + @include btn-hero-active(btn-hero-danger-dark-gradient()); +} + +@mixin btn-hero-secondary-active() { + $color: nb-theme(btn-secondary-border); + + &:active, + .active { + border-color: shade($color, 14%); + box-shadow: none; + background: none; + } +} + +// Disabled +@mixin btn-hero-disabled() { + &:disabled, &.btn-disabled { + opacity: nb-theme(btn-disabled-opacity); + box-shadow: none; + } +} + +// Line height +@function btn-hero-line-height($font-size) { + @return calc((#{$font-size} * 1.25) + 4px); +} + +@function btn-hero-line-height-lg() { + @return btn-hero-line-height(nb-theme(btn-font-size-lg)); +} + +@function btn-hero-line-height-md() { + @return btn-hero-line-height(nb-theme(btn-font-size-md)); +} + +@function btn-hero-line-height-sm() { + @return btn-hero-line-height(nb-theme(btn-font-size-sm)); +} + +@function btn-hero-line-height-tn() { + @return btn-hero-line-height(nb-theme(btn-font-size-tn)); +} + + +@mixin btn-hero-line-height() { + + line-height: btn-hero-line-height-md(); + + &.btn.btn-lg { + line-height: btn-hero-line-height-lg(); + } + + &.btn.btn-md { + line-height: btn-hero-line-height-md(); + } + + &.btn.btn-sm { + line-height: btn-hero-line-height-sm(); + } + + &.btn.btn-tn { + line-height: btn-hero-line-height-tn(); + } +} + +// Pulse +@mixin btn-hero-primary-pulse() { + @include btn-pulse(hero-primary, nb-theme(color-primary)); +} +@mixin btn-hero-success-pulse() { + @include btn-pulse(hero-success, nb-theme(color-success)); +} +@mixin btn-hero-danger-pulse() { + @include btn-pulse(hero-danger, nb-theme(color-danger)); +} +@mixin btn-hero-info-pulse() { + @include btn-pulse(hero-info, nb-theme(color-info)); +} +@mixin btn-hero-warning-pulse() { + @include btn-pulse(hero-warning, nb-theme(color-warning)); +} +@mixin btn-hero-secondary-pulse() { + @include btn-pulse(hero-secondary, nb-theme(btn-secondary-border)); +} diff --git a/src/framework/theme/components/button/_button-outlines.scss b/src/framework/theme/components/button/_button-outlines.scss new file mode 100644 index 0000000000..20cb0e4462 --- /dev/null +++ b/src/framework/theme/components/button/_button-outlines.scss @@ -0,0 +1,205 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import './button-colors'; + +@mixin btn-outlines() { + &.btn-outline.btn-primary { + @include btn-outline-primary(); + } + + &.btn-outline.btn-warning { + @include btn-outline-warning(); + } + + &.btn-outline.btn-success { + @include btn-outline-success(); + } + + &.btn-outline.btn-info { + @include btn-outline-info(); + } + + &.btn-outline.btn-danger { + @include btn-outline-danger(); + } + + &.btn-outline.btn-secondary { + @include btn-outline-secondary(); + } +} + +@mixin btn-outline-primary() { + @include btn-outline-primary-border(); + @include btn-outline-fg(); + @include btn-outline-bg(); + @include btn-outline-primary-focus(); + @include btn-outline-primary-hover(); + @include btn-outline-primary-active(); +} + +@mixin btn-outline-warning() { + @include btn-outline-warning-border(); + @include btn-outline-fg(); + @include btn-outline-bg(); + @include btn-outline-warning-focus(); + @include btn-outline-warning-hover(); + @include btn-outline-warning-active(); +} + +@mixin btn-outline-success() { + @include btn-outline-success-border(); + @include btn-outline-fg(); + @include btn-outline-bg(); + @include btn-outline-success-focus(); + @include btn-outline-success-hover(); + @include btn-outline-success-active(); +} + +@mixin btn-outline-info() { + @include btn-outline-info-border(); + @include btn-outline-fg(); + @include btn-outline-bg(); + @include btn-outline-info-focus(); + @include btn-outline-info-hover(); + @include btn-outline-info-active(); +} + +@mixin btn-outline-danger() { + @include btn-outline-danger-border(); + @include btn-outline-fg(); + @include btn-outline-bg(); + @include btn-outline-danger-focus(); + @include btn-outline-danger-hover(); + @include btn-outline-danger-active(); +} + +@mixin btn-outline-secondary() { + @include btn-outline-secondary-border(); + @include btn-outline-fg(); + @include btn-outline-bg(); + @include btn-outline-secondary-focus(); + @include btn-outline-secondary-hover(); + @include btn-outline-secondary-active(); + + &:focus, &.focus, + &:hover, &.hover, + &:active, &.active { + @include btn-outline-fg(); + } +} + +@mixin btn-outline-border($color) { + border: 2px solid $color; +} + +@mixin btn-outline-fg() { + color: nb-theme(btn-outline-fg); +} + +@mixin btn-outline-bg() { + background-color: transparent; +} + +// Hover +@mixin btn-outline-primary-hover() { + @include btn-primary-hover(); +} + +@mixin btn-outline-warning-hover() { + @include btn-warning-hover(); +} + +@mixin btn-outline-success-hover() { + @include btn-success-hover(); +} + +@mixin btn-outline-info-hover() { + @include btn-info-hover(); +} + +@mixin btn-outline-danger-hover() { + @include btn-danger-hover(); +} + +@mixin btn-outline-secondary-hover() { + @include btn-secondary-hover(); +} + +// Focus +@mixin btn-outline-primary-focus() { + @include btn-outline-focus(btn-focus-color(btn-primary-bg, 20%)); +} + +@mixin btn-outline-warning-focus() { + @include btn-outline-focus(btn-focus-color(btn-warning-bg, 20%)); +} + +@mixin btn-outline-success-focus() { + @include btn-outline-focus(btn-focus-color(btn-success-bg, 20%)); +} + +@mixin btn-outline-info-focus() { + @include btn-outline-focus(btn-focus-color(btn-info-bg, 20%)); +} + +@mixin btn-outline-danger-focus() { + @include btn-outline-focus(btn-focus-color(btn-danger-bg, 20%)); +} + +@mixin btn-outline-secondary-focus() { + @include btn-outline-focus(btn-focus-color(btn-secondary-border, 20%)); +} + +// Active +@mixin btn-outline-primary-active() { + @include btn-primary-active(); +} + +@mixin btn-outline-warning-active() { + @include btn-warning-active(); +} + +@mixin btn-outline-success-active() { + @include btn-success-active(); +} + +@mixin btn-outline-info-active() { + @include btn-info-active(); +} + +@mixin btn-outline-danger-active() { + @include btn-danger-active(); +} + +@mixin btn-outline-secondary-active() { + @include btn-secondary-active(); +} + +// Border +@mixin btn-outline-primary-border() { + @include btn-outline-border(nb-theme(btn-primary-bg)); +} + +@mixin btn-outline-warning-border() { + @include btn-outline-border(nb-theme(btn-warning-bg)); +} + +@mixin btn-outline-success-border() { + @include btn-outline-border(nb-theme(btn-success-bg)); +} + +@mixin btn-outline-info-border() { + @include btn-outline-border(nb-theme(btn-info-bg)); +} + +@mixin btn-outline-danger-border() { + @include btn-outline-border(nb-theme(btn-danger-bg)); +} + +@mixin btn-outline-secondary-border() { + @include btn-outline-border(nb-theme(btn-secondary-border)); +} diff --git a/src/framework/theme/components/button/_button-shapes.scss b/src/framework/theme/components/button/_button-shapes.scss new file mode 100644 index 0000000000..4f5aa109c8 --- /dev/null +++ b/src/framework/theme/components/button/_button-shapes.scss @@ -0,0 +1,31 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@mixin btn-shapes() { + &.btn-rectangle { + @include btn-rectangle(); + } + + &.btn-semi-round { + @include btn-semi-round(); + } + + &.btn-round { + @include btn-round(); + } +} + +@mixin btn-rectangle() { + @include border-radius(nb-theme(btn-rectangle-border-radius)); +} + +@mixin btn-semi-round() { + @include border-radius(nb-theme(btn-semi-round-border-radius)); +} + +@mixin btn-round() { + @include border-radius(nb-theme(btn-round-border-radius)); +} diff --git a/src/framework/theme/components/button/_button-sizes.scss b/src/framework/theme/components/button/_button-sizes.scss new file mode 100644 index 0000000000..cbcccd1aea --- /dev/null +++ b/src/framework/theme/components/button/_button-sizes.scss @@ -0,0 +1,55 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@mixin btn-large() { + @include button-size(nb-theme(btn-padding-y-lg), + nb-theme(btn-padding-x-lg), + nb-theme(btn-font-size-lg), + nb-theme(btn-line-height), + nb-theme(btn-border-radius)); +} + +@mixin btn-meduim() { + @include button-size(nb-theme(btn-padding-y-md), + nb-theme(btn-padding-x-md), + nb-theme(btn-font-size-md), + nb-theme(btn-line-height), + nb-theme(btn-border-radius)); +} + +@mixin btn-small() { + @include button-size(nb-theme(btn-padding-y-sm), + nb-theme(btn-padding-x-sm), + nb-theme(btn-font-size-sm), + nb-theme(btn-line-height), + nb-theme(btn-border-radius)); +} + +@mixin btn-xsmall() { + @include button-size(nb-theme(btn-padding-y-xs), + nb-theme(btn-padding-x-xs), + nb-theme(btn-font-size-xs), + nb-theme(btn-line-height), + nb-theme(btn-border-radius)); +} + +@mixin btn-sizes() { + &.btn-large { + @include btn-large(); + } + + &.btn-medium { + @include btn-meduim(); + } + + &.btn-small { + @include btn-small(); + } + + &.btn-xsmall { + @include btn-xsmall(); + } +} diff --git a/src/framework/theme/components/button/_button.component.theme.scss b/src/framework/theme/components/button/_button.component.theme.scss new file mode 100644 index 0000000000..6a10f02b6f --- /dev/null +++ b/src/framework/theme/components/button/_button.component.theme.scss @@ -0,0 +1,35 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import './button-sizes'; +@import './button-colors'; +@import './button-heroes'; +@import './button-outlines'; +@import './button-shapes'; + +@mixin nb-buttons-theme() { + [nbButton] { + color: nb-theme(btn-fg); + font-weight: nb-theme(font-weight-bolder); + font-family: nb-theme(btn-font-family); + cursor: nb-theme(btn-cursor); + + &:focus, .focus, + &:hover, .hover, + &:active, .active { + color: nb-theme(btn-fg); + cursor: nb-theme(btn-cursor); + } + @include btn-meduim(); + @include btn-primary(); + + @include btn-sizes(); + @include btn-colors(); + @include btn-heroes(); + @include btn-outlines(); + @include btn-shapes(); + } +} diff --git a/src/framework/theme/components/button/button.component.scss b/src/framework/theme/components/button/button.component.scss new file mode 100644 index 0000000000..e1f3f5f459 --- /dev/null +++ b/src/framework/theme/components/button/button.component.scss @@ -0,0 +1,26 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +:host { + text-transform: uppercase; + letter-spacing: 0.4px; + border: 2px solid transparent; + transition: none; + cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + text-align: center; + text-decoration: none; + margin: 0; + display: inline-block; + white-space: nowrap; + vertical-align: middle; + user-select: none; + + &:hover, &:focus { + text-decoration: none; + } +} diff --git a/src/framework/theme/components/button/button.component.ts b/src/framework/theme/components/button/button.component.ts new file mode 100644 index 0000000000..70a4f889fc --- /dev/null +++ b/src/framework/theme/components/button/button.component.ts @@ -0,0 +1,258 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component, Input, HostBinding, HostListener } from '@angular/core'; +import { convertToBoolProperty } from '../helpers'; + +/** + * Basic button component. + * + * Default button size is `medium` and status color is `primary`: + * @stacked-example(Button Showcase, button/button-showcase.component) + * + * ```html + * + * ``` + * + * Buttons are available in multiple colors using `status` property: + * @stacked-example(Button Colors, button/button-colors.component.html) + * + * There are three button sizes: + * + * @stacked-example(Button Sizes, button/button-sizes.component.html) + * + * And two additional style types - `outline`: + * + * @stacked-example(Outline Buttons, button/button-outline.component.html) + * + * and `hero`: + * + * @stacked-example(Button Colors, button/button-hero.component.html) + * + * Buttons available in different shapes, which could be combined with the other properties: + * @stacked-example(Button Shapes, button/button-shapes.component) + * + * `nbButton` could be applied to the following selectors - `button`, `input[type="button"]`, `input[type="submit"]` + * and `a`: + * @stacked-example(Button Elements, button/button-types.component.html) + * + * @styles + * + * btn-fg: + * btn-font-family: + * btn-line-height: + * btn-disabled-opacity: + * btn-cursor: + * btn-primary-bg: + * btn-secondary-bg: + * btn-info-bg: + * btn-success-bg: + * btn-warning-bg: + * btn-danger-bg: + * btn-secondary-border: + * btn-secondary-border-width: + * btn-padding-y-lg: + * btn-padding-x-lg: + * btn-font-size-lg: + * btn-padding-y-md: + * btn-padding-x-md: + * btn-font-size-md: + * btn-padding-y-sm: + * btn-padding-x-sm: + * btn-font-size-sm: + * btn-padding-y-xs: + * btn-padding-x-xs: + * btn-font-size-xs: + * btn-border-radius: + * btn-rectangle-border-radius: + * btn-semi-round-border-radius: + * btn-round-border-radius: + * btn-hero-shadow: + * btn-hero-text-shadow: + * btn-hero-bevel-size: + * btn-hero-glow-size: + * btn-hero-primary-glow-size: + * btn-hero-success-glow-size: + * btn-hero-warning-glow-size: + * btn-hero-info-glow-size: + * btn-hero-danger-glow-size: + * btn-hero-secondary-glow-size: + * btn-hero-degree: + * btn-hero-primary-degree: + * btn-hero-success-degree: + * btn-hero-warning-degree: + * btn-hero-info-degree: + * btn-hero-danger-degree: + * btn-hero-secondary-degree: + * btn-hero-border-radius: + * btn-outline-fg: + * btn-outline-hover-fg: + * btn-outline-focus-fg: + */ +@Component({ + selector: 'button[nbButton],a[nbButton],input[type="button"][nbButton],input[type="submit"][nbButton]', + styleUrls: ['./button.component.scss'], + template: ` + + `, +}) +export class NbButtonComponent { + + static readonly SIZE_XSMALL = 'xsmall'; + static readonly SIZE_SMALL = 'small'; + static readonly SIZE_MEDIUM = 'medium'; + static readonly SIZE_LARGE = 'large'; + + static readonly STATUS_PRIMARY = 'primary'; + static readonly STATUS_INFO = 'info'; + static readonly STATUS_SUCCESS = 'success'; + static readonly STATUS_WARNING = 'warning'; + static readonly STATUS_DANGER = 'danger'; + + static readonly SHAPE_RECTANGLE = 'rectangle'; + static readonly SHAPE_ROUND = 'round'; + static readonly SHAPE_SEMI_ROUND = 'semi-round'; + + size: string; + status: string; + accent: string; + shape: string; + + @HostBinding('class.btn-xsmall') + get xsmall() { + return this.size === NbButtonComponent.SIZE_XSMALL; + } + + @HostBinding('class.btn-small') + get small() { + return this.size === NbButtonComponent.SIZE_SMALL; + } + + @HostBinding('class.btn-medium') + get medium() { + return this.size === NbButtonComponent.SIZE_MEDIUM; + } + + @HostBinding('class.btn-large') + get large() { + return this.size === NbButtonComponent.SIZE_LARGE; + } + + @HostBinding('class.btn-primary') + get primary() { + return this.status === NbButtonComponent.STATUS_PRIMARY; + } + + @HostBinding('class.btn-info') + get info() { + return this.status === NbButtonComponent.STATUS_INFO; + } + + @HostBinding('class.btn-success') + get success() { + return this.status === NbButtonComponent.STATUS_SUCCESS; + } + + @HostBinding('class.btn-warning') + get warning() { + return this.status === NbButtonComponent.STATUS_WARNING; + } + + @HostBinding('class.btn-danger') + get danger() { + return this.status === NbButtonComponent.STATUS_DANGER; + } + + @HostBinding('class.btn-rectangle') + get rectangle() { + return this.shape === NbButtonComponent.SHAPE_RECTANGLE; + } + + @HostBinding('class.btn-round') + get round() { + return this.shape === NbButtonComponent.SHAPE_ROUND; + } + + @HostBinding('class.btn-semi-round') + get semiRound() { + return this.shape === NbButtonComponent.SHAPE_SEMI_ROUND; + } + + @HostBinding('class.btn-hero') hero: boolean; + @HostBinding('class.btn-outline') outline: boolean; + + @HostBinding('attr.aria-disabled') + @HostBinding('class.btn-disabled') disabled: boolean; + + @HostBinding('attr.tabindex') + get tabbable(): string { + return this.disabled ? '-1' : '0'; + } + + /** + * Button size, available sizes: + * `xxsmall`, `xsmall`, `small`, `medium`, `large` + * @param {string} val + */ + @Input('size') + private set setSize(val: string) { + this.size = val; + } + + /** + * Button status (adds specific styles): + * `primary`, `info`, `success`, `warning`, `danger` + * @param {string} val + */ + @Input('status') + private set setStatus(val: string) { + this.status = val; + } + + /** + * Button shapes: `rectangle`, `round`, `semi-round` + * @param {string} val + */ + @Input('shape') + private set setShape(val: string) { + this.shape = val; + } + + /** + * Adds `hero` styles + * @param {boolean} val + */ + @Input('hero') + set setHero(val: boolean) { + this.hero = convertToBoolProperty(val); + } + + /** + * Disables the button + * @param {boolean} val + */ + @Input('disabled') + set setDisabled(val: boolean) { + this.disabled = convertToBoolProperty(val); + } + + /** + * Adds `outline` styles + * @param {boolean} val + */ + @Input() + set setOutline(val: boolean) { + this.outline = convertToBoolProperty(val); + } + + @HostListener('click', ['$event']) + onClick(event: Event) { + if (this.disabled) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + } +} diff --git a/src/framework/theme/components/button/button.module.ts b/src/framework/theme/components/button/button.module.ts new file mode 100644 index 0000000000..14e23730f3 --- /dev/null +++ b/src/framework/theme/components/button/button.module.ts @@ -0,0 +1,28 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { NgModule } from '@angular/core'; + +import { NbSharedModule } from '../shared/shared.module'; + +import { NbButtonComponent } from './button.component'; + +const NB_BUTTON_COMPONENTS = [ + NbButtonComponent, +]; + +@NgModule({ + imports: [ + NbSharedModule, + ], + declarations: [ + ...NB_BUTTON_COMPONENTS, + ], + exports: [ + ...NB_BUTTON_COMPONENTS, + ], +}) +export class NbButtonModule { } diff --git a/src/framework/theme/components/button/button.spec.ts b/src/framework/theme/components/button/button.spec.ts new file mode 100644 index 0000000000..9acd3dd047 --- /dev/null +++ b/src/framework/theme/components/button/button.spec.ts @@ -0,0 +1,68 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NbButtonComponent } from './button.component'; + +describe('Component: NbButton', () => { + + let button: NbButtonComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [NbButtonComponent], + }); + + fixture = TestBed.createComponent(NbButtonComponent); + button = fixture.componentInstance; + }); + + it('should set class danger', () => { + button.status = 'danger'; + fixture.detectChanges(); + expect( + fixture + .debugElement.nativeElement.classList.contains('btn-danger')) + .toBeTruthy() + }); + + it('should set size small', () => { + button.size = 'small'; + fixture.detectChanges(); + expect( + fixture + .debugElement.nativeElement.classList.contains('btn-small')) + .toBeTruthy() + }); + + it('should set outline class', () => { + button.outline = true; + fixture.detectChanges(); + expect( + fixture + .debugElement.nativeElement.classList.contains('btn-outline')) + .toBeTruthy() + }); + + it('should set hero class', () => { + button.hero = true; + fixture.detectChanges(); + expect( + fixture + .debugElement.nativeElement.classList.contains('btn-hero')) + .toBeTruthy() + }); + + it('should set shape class', () => { + button.shape = 'semi-round'; + fixture.detectChanges(); + expect( + fixture + .debugElement.nativeElement.classList.contains('btn-semi-round')) + .toBeTruthy() + }); +}); diff --git a/src/framework/theme/index.ts b/src/framework/theme/index.ts index cc3cff7a0a..a630261dd1 100644 --- a/src/framework/theme/index.ts +++ b/src/framework/theme/index.ts @@ -52,3 +52,5 @@ export * from './components/accordion/accordion-item.component'; export * from './components/accordion/accordion-item-body.component'; export * from './components/accordion/accordion-item-header.component'; export * from './components/accordion/accordion.module'; +export * from './components/button/button.component'; +export * from './components/button/button.module'; diff --git a/src/framework/theme/styles/global/_components.scss b/src/framework/theme/styles/global/_components.scss index c4c3442de2..dcecc85b34 100644 --- a/src/framework/theme/styles/global/_components.scss +++ b/src/framework/theme/styles/global/_components.scss @@ -25,6 +25,7 @@ @import '../../components/spinner/spinner.component.theme'; @import '../../components/stepper/stepper.component.theme'; @import '../../components/accordion/accordion.component.theme'; +@import '../../components/button/button.component.theme'; @mixin nb-theme-components() { @@ -49,4 +50,5 @@ @include nb-alert-theme(); @include nb-chat-theme(); @include nb-accordion-theme(); + @include nb-buttons-theme(); } diff --git a/src/framework/theme/styles/global/bootstrap/_size-buttons.scss b/src/framework/theme/styles/global/bootstrap/_size-buttons.scss index c40c886df5..f15157c4a2 100644 --- a/src/framework/theme/styles/global/bootstrap/_size-buttons.scss +++ b/src/framework/theme/styles/global/bootstrap/_size-buttons.scss @@ -17,8 +17,8 @@ @include btn-sm(); } - .btn.btn-tn { - @include btn-tn(); + .btn.btn-xs { + @include btn-xs(); } } @@ -46,10 +46,10 @@ nb-theme(btn-border-radius)); } -@mixin btn-tn() { - @include button-size(nb-theme(btn-padding-y-tn), - nb-theme(btn-padding-x-tn), - nb-theme(btn-font-size-tn), +@mixin btn-xs() { + @include button-size(nb-theme(btn-padding-y-xs), + nb-theme(btn-padding-x-xs), + nb-theme(btn-font-size-xs), nb-theme(btn-line-height), nb-theme(btn-border-radius)); } diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 0cc0cb54fe..36a82bde59 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -333,9 +333,9 @@ $theme: ( btn-padding-x-sm: 1.5rem, btn-font-size-sm: 0.875rem, - btn-padding-y-tn: 0.5rem, - btn-padding-x-tn: 1.25rem, - btn-font-size-tn: 0.75rem, + btn-padding-y-xs: 0.5rem, + btn-padding-x-xs: 1.25rem, + btn-font-size-xs: 0.75rem, btn-border-radius: radius, btn-rectangle-border-radius: 0.25rem, diff --git a/src/playground/bootstrap/bootstrap-test.component.ts b/src/playground/bootstrap/bootstrap-test.component.ts index df99cdbec8..d6c2c65f28 100644 --- a/src/playground/bootstrap/bootstrap-test.component.ts +++ b/src/playground/bootstrap/bootstrap-test.component.ts @@ -23,6 +23,12 @@ import { Component } from '@angular/core'; +
+ + + + +

Tables

diff --git a/src/playground/button/button-colors.component.html b/src/playground/button/button-colors.component.html new file mode 100644 index 0000000000..a4bb13594c --- /dev/null +++ b/src/playground/button/button-colors.component.html @@ -0,0 +1,10 @@ + + Button Colors + + + + + + + + diff --git a/src/playground/button/button-colors.component.ts b/src/playground/button/button-colors.component.ts new file mode 100644 index 0000000000..79effccfa3 --- /dev/null +++ b/src/playground/button/button-colors.component.ts @@ -0,0 +1,21 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-button-colors', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './button-colors.component.html', + styles: [` + [nbButton] { + margin-right: 0.75rem; + margin-bottom: 1rem; + } + `], +}) +export class NbButtonColorsComponent { +} diff --git a/src/playground/button/button-hero.component.html b/src/playground/button/button-hero.component.html new file mode 100644 index 0000000000..c77a081290 --- /dev/null +++ b/src/playground/button/button-hero.component.html @@ -0,0 +1,10 @@ + + Button Hero + + + + + + + + diff --git a/src/playground/button/button-hero.component.ts b/src/playground/button/button-hero.component.ts new file mode 100644 index 0000000000..3b181315d0 --- /dev/null +++ b/src/playground/button/button-hero.component.ts @@ -0,0 +1,21 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-button-hero', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './button-hero.component.html', + styles: [` + [nbButton] { + margin-right: 0.75rem; + margin-bottom: 1rem; + } + `], +}) +export class NbButtonHeroComponent { +} diff --git a/src/playground/button/button-outline.component.html b/src/playground/button/button-outline.component.html new file mode 100644 index 0000000000..28b550e6ff --- /dev/null +++ b/src/playground/button/button-outline.component.html @@ -0,0 +1,10 @@ + + Button Outline + + + + + + + + diff --git a/src/playground/button/button-outline.component.ts b/src/playground/button/button-outline.component.ts new file mode 100644 index 0000000000..937a0bc23e --- /dev/null +++ b/src/playground/button/button-outline.component.ts @@ -0,0 +1,21 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-button-outline', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './button-outline.component.html', + styles: [` + [nbButton] { + margin-right: 0.75rem; + margin-bottom: 1rem; + } + `], +}) +export class NbButtonOutlineComponent { +} diff --git a/src/playground/button/button-shapes.component.html b/src/playground/button/button-shapes.component.html new file mode 100644 index 0000000000..d553949305 --- /dev/null +++ b/src/playground/button/button-shapes.component.html @@ -0,0 +1,8 @@ + + Button Shapes + + + + + + diff --git a/src/playground/button/button-shapes.component.ts b/src/playground/button/button-shapes.component.ts new file mode 100644 index 0000000000..2dca65f05d --- /dev/null +++ b/src/playground/button/button-shapes.component.ts @@ -0,0 +1,21 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-button-shapes', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './button-shapes.component.html', + styles: [` + [nbButton] { + margin-right: 0.75rem; + margin-bottom: 1rem; + } + `], +}) +export class NbButtonShapesComponent { +} diff --git a/src/playground/button/button-showcase.component.html b/src/playground/button/button-showcase.component.html new file mode 100644 index 0000000000..b8cfc12e7b --- /dev/null +++ b/src/playground/button/button-showcase.component.html @@ -0,0 +1,7 @@ + + Button + + + + + diff --git a/src/playground/button/button-showcase.component.ts b/src/playground/button/button-showcase.component.ts new file mode 100644 index 0000000000..2b84f872a8 --- /dev/null +++ b/src/playground/button/button-showcase.component.ts @@ -0,0 +1,21 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-button-showcase', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './button-showcase.component.html', + styles: [` + [nbButton] { + margin-right: 1rem; + margin-bottom: 1rem; + } + `], +}) +export class NbButtonShowcaseComponent { +} diff --git a/src/playground/button/button-sizes.component.html b/src/playground/button/button-sizes.component.html new file mode 100644 index 0000000000..67e55842db --- /dev/null +++ b/src/playground/button/button-sizes.component.html @@ -0,0 +1,9 @@ + + Button Sizes + + + + + + + diff --git a/src/playground/button/button-sizes.component.ts b/src/playground/button/button-sizes.component.ts new file mode 100644 index 0000000000..642605271c --- /dev/null +++ b/src/playground/button/button-sizes.component.ts @@ -0,0 +1,21 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-button-sizes', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './button-sizes.component.html', + styles: [` + [nbButton] { + margin-right: 0.75rem; + margin-bottom: 1rem; + } + `], +}) +export class NbButtonSizesComponent { +} diff --git a/src/playground/button/button-types.component.html b/src/playground/button/button-types.component.html new file mode 100644 index 0000000000..32fb1820a1 --- /dev/null +++ b/src/playground/button/button-types.component.html @@ -0,0 +1,9 @@ + + Button Elements + + + + + Link + + diff --git a/src/playground/button/button-types.component.ts b/src/playground/button/button-types.component.ts new file mode 100644 index 0000000000..8709fcb80e --- /dev/null +++ b/src/playground/button/button-types.component.ts @@ -0,0 +1,26 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-button-types', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './button-types.component.html', + styles: [` + [nbButton] { + margin-right: 0.75rem; + margin-bottom: 1rem; + } + `], +}) +export class NbButtonTypesComponent { + + + onClick() { + return false; + } +} diff --git a/src/playground/playground-routing.module.ts b/src/playground/playground-routing.module.ts index 1954d3e351..f4396ae8ae 100644 --- a/src/playground/playground-routing.module.ts +++ b/src/playground/playground-routing.module.ts @@ -125,6 +125,13 @@ import { NbAccordionMultiComponent } from './accordion/accordion-multi.component import { NbAccordionToggleComponent } from './accordion/accordion-toggle.component'; import { NbLayoutSidebarSubheaderComponent } from './layout/layout-sidebar-subheader.component'; import { NbLayoutSubheaderComponent } from './layout/layout-subheader.component'; +import { NbButtonShowcaseComponent } from './button/button-showcase.component'; +import { NbButtonColorsComponent } from './button/button-colors.component'; +import { NbButtonShapesComponent } from './button/button-shapes.component'; +import { NbButtonHeroComponent } from './button/button-hero.component'; +import { NbButtonOutlineComponent } from './button/button-outline.component'; +import { NbButtonSizesComponent } from './button/button-sizes.component'; +import { NbButtonTypesComponent } from './button/button-types.component'; export const routes: Routes = [ { @@ -160,6 +167,39 @@ export const routes: Routes = [ }, ], }, + { + path: 'button', + children: [ + { + path: 'button-showcase.component', + component: NbButtonShowcaseComponent, + }, + { + path: 'button-colors.component', + component: NbButtonColorsComponent, + }, + { + path: 'button-shapes.component', + component: NbButtonShapesComponent, + }, + { + path: 'button-hero.component', + component: NbButtonHeroComponent, + }, + { + path: 'button-outline.component', + component: NbButtonOutlineComponent, + }, + { + path: 'button-sizes.component', + component: NbButtonSizesComponent, + }, + { + path: 'button-types.component', + component: NbButtonTypesComponent, + }, + ], + }, { path: 'checkbox', children: [ diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts index 300e233b4d..ff042ca4c7 100644 --- a/src/playground/playground.module.ts +++ b/src/playground/playground.module.ts @@ -153,6 +153,14 @@ import { NbAccordionToggleComponent } from './accordion/accordion-toggle.compone import { NbAccordionMultiComponent } from './accordion/accordion-multi.component'; import { NbLayoutSidebarSubheaderComponent } from './layout/layout-sidebar-subheader.component'; import { NbLayoutSubheaderComponent } from './layout/layout-subheader.component'; +import { NbButtonShowcaseComponent } from './button/button-showcase.component'; +import { NbButtonModule } from '@nebular/theme/components/button/button.module'; +import { NbButtonColorsComponent } from './button/button-colors.component'; +import { NbButtonShapesComponent } from './button/button-shapes.component'; +import { NbButtonHeroComponent } from './button/button-hero.component'; +import { NbButtonOutlineComponent } from './button/button-outline.component'; +import { NbButtonSizesComponent } from './button/button-sizes.component'; +import { NbButtonTypesComponent } from './button/button-types.component'; export const NB_MODULES = [ NbCardModule, @@ -180,6 +188,7 @@ export const NB_MODULES = [ }), NbSpinnerModule, NbAccordionModule, + NbButtonModule, ]; export const NB_EXAMPLE_COMPONENTS = [ @@ -296,6 +305,13 @@ export const NB_EXAMPLE_COMPONENTS = [ NbAccordionTestComponent, NbAccordionToggleComponent, NbAccordionMultiComponent, + NbButtonShowcaseComponent, + NbButtonColorsComponent, + NbButtonShapesComponent, + NbButtonHeroComponent, + NbButtonOutlineComponent, + NbButtonSizesComponent, + NbButtonTypesComponent, ]; diff --git a/tslint.json b/tslint.json index e2df073dab..083ed0be92 100644 --- a/tslint.json +++ b/tslint.json @@ -110,9 +110,9 @@ ], "component-selector": [ true, - "element", + ["element", "attribute"], ["nb", "ngd"], - "kebab-case" + ["kebab-case", "camelCase"] ], "ban": [ true,