From 77066ad20cdf0bc0fb2e93a7cfa255a6600d1903 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 24 Jun 2019 17:38:19 +0300 Subject: [PATCH] refactor: update buttons example --- .../action-groups.component.html | 17 -- .../action-groups.component.scss | 77 -------- .../action-groups/action-groups.component.ts | 9 - .../button-elements.component.html | 17 -- .../button-elements.component.scss | 15 -- .../button-elements.component.ts | 12 -- .../forms/buttons/buttons.component.html | 123 ++++++++++++- .../forms/buttons/buttons.component.scss | 123 +++---------- .../pages/forms/buttons/buttons.component.ts | 4 + .../default-buttons.component.html | 44 ----- .../default-buttons.component.scss | 130 -------------- .../default-buttons.component.ts | 47 ----- .../hero-buttons/hero-buttons.component.html | 72 -------- .../hero-buttons/hero-buttons.component.scss | 144 --------------- .../hero-buttons/hero-buttons.component.ts | 166 ------------------ .../labeled-actions-group.component.html | 18 -- .../labeled-actions-group.component.scss | 60 ------- .../labeled-actions-group.component.ts | 9 - .../outline-buttons.component.html | 45 ----- .../outline-buttons.component.scss | 130 -------------- .../outline-buttons.component.ts | 47 ----- .../shape-buttons.component.html | 43 ----- .../shape-buttons.component.scss | 30 ---- .../shape-buttons/shape-buttons.component.ts | 9 - .../size-buttons/size-buttons.component.html | 50 ------ .../size-buttons/size-buttons.component.scss | 26 --- .../size-buttons/size-buttons.component.ts | 9 - src/app/pages/forms/forms.module.ts | 23 +-- 28 files changed, 144 insertions(+), 1355 deletions(-) delete mode 100644 src/app/pages/forms/buttons/action-groups/action-groups.component.html delete mode 100644 src/app/pages/forms/buttons/action-groups/action-groups.component.scss delete mode 100644 src/app/pages/forms/buttons/action-groups/action-groups.component.ts delete mode 100644 src/app/pages/forms/buttons/button-elements/button-elements.component.html delete mode 100644 src/app/pages/forms/buttons/button-elements/button-elements.component.scss delete mode 100644 src/app/pages/forms/buttons/button-elements/button-elements.component.ts delete mode 100644 src/app/pages/forms/buttons/default-buttons/default-buttons.component.html delete mode 100644 src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss delete mode 100644 src/app/pages/forms/buttons/default-buttons/default-buttons.component.ts delete mode 100644 src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.html delete mode 100644 src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss delete mode 100644 src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.ts delete mode 100644 src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.html delete mode 100644 src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss delete mode 100644 src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.ts delete mode 100644 src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.html delete mode 100644 src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss delete mode 100644 src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.ts delete mode 100644 src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.html delete mode 100644 src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss delete mode 100644 src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.ts delete mode 100644 src/app/pages/forms/buttons/size-buttons/size-buttons.component.html delete mode 100644 src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss delete mode 100644 src/app/pages/forms/buttons/size-buttons/size-buttons.component.ts diff --git a/src/app/pages/forms/buttons/action-groups/action-groups.component.html b/src/app/pages/forms/buttons/action-groups/action-groups.component.html deleted file mode 100644 index 0f3acab6d3..0000000000 --- a/src/app/pages/forms/buttons/action-groups/action-groups.component.html +++ /dev/null @@ -1,17 +0,0 @@ - - -
- Action Groups -
- - - - - - - - - - - - diff --git a/src/app/pages/forms/buttons/action-groups/action-groups.component.scss b/src/app/pages/forms/buttons/action-groups/action-groups.component.scss deleted file mode 100644 index e7d85187c7..0000000000 --- a/src/app/pages/forms/buttons/action-groups/action-groups.component.scss +++ /dev/null @@ -1,77 +0,0 @@ -//@import '../../../../@theme/styles/themes'; -//@import '~@nebular/theme/components/card/card.component.theme'; -//@import '~bootstrap/scss/mixins/breakpoints'; -//@import '~@nebular/theme/styles/global/breakpoints'; -// -//@include nb-install-component() { -// -// nb-card-body { -// display: flex; -// align-items: center; -// } -// -// .action-groups-header { -// flex-basis: 20%; -// -// color: nb-theme(card-header-fg-heading); -// font-family: nb-theme(card-header-font-family); -// font-size: nb-theme(card-header-font-size); -// font-weight: nb-theme(card-header-font-weight); -// } -// -// .nb-actions { -// flex-basis: 80%; -// } -// -// @include media-breakpoint-down(sm) { -// nb-card-body { -// flex-direction: column; -// align-items: flex-start; -// padding: 0.75rem; -// -// .action-groups-header { -// @include nb-ltr(margin, 0 0 0.5rem 0.25rem); -// @include nb-rtl(margin, 0 0.25rem 0.5rem 0); -// } -// } -// -// nb-action { -// padding: 0 0.5rem; -// ::ng-deep .control-icon { -// font-size: 1.75rem; -// } -// } -// nb-user ::ng-deep { -// .user-container { -// font-size: 0.875rem; -// } -// .user-picture { -// height: 1.75rem; -// width: 1.75rem; -// } -// } -// } -// -// @include media-breakpoint-down(xs) { -// -// nb-action { -// padding: 0 0.375rem; -// ::ng-deep .control-icon { -// font-size: 1.5rem; -// } -// } -// nb-user ::ng-deep { -// .user-container { -// font-size: 0.75rem; -// } -// .user-picture { -// height: 1.5rem; -// width: 1.5rem; -// } -// } -// nb-card-body { -// padding-left: 0; -// padding-right: 0; -// } -// } -//} diff --git a/src/app/pages/forms/buttons/action-groups/action-groups.component.ts b/src/app/pages/forms/buttons/action-groups/action-groups.component.ts deleted file mode 100644 index b82e9cca8b..0000000000 --- a/src/app/pages/forms/buttons/action-groups/action-groups.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-action-groups', - styleUrls: ['./action-groups.component.scss'], - templateUrl: './action-groups.component.html', -}) -export class ActionGroupsComponent { -} diff --git a/src/app/pages/forms/buttons/button-elements/button-elements.component.html b/src/app/pages/forms/buttons/button-elements/button-elements.component.html deleted file mode 100644 index e8c50a73de..0000000000 --- a/src/app/pages/forms/buttons/button-elements/button-elements.component.html +++ /dev/null @@ -1,17 +0,0 @@ - - Button Elements - -
- -
-
- -
-
- -
-
- Link -
- - diff --git a/src/app/pages/forms/buttons/button-elements/button-elements.component.scss b/src/app/pages/forms/buttons/button-elements/button-elements.component.scss deleted file mode 100644 index 4a83e35393..0000000000 --- a/src/app/pages/forms/buttons/button-elements/button-elements.component.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../../../@theme/styles/themes'; -@import '~@nebular/bootstrap/styles/buttons'; - -@include nb-install-component() { - - nb-card-body { - padding: 0 1.25rem 1.25rem 0; - display: flex; - flex-wrap: wrap; - } - - .button-container { - margin: 1.25rem 0 0 1.25rem; - } -} diff --git a/src/app/pages/forms/buttons/button-elements/button-elements.component.ts b/src/app/pages/forms/buttons/button-elements/button-elements.component.ts deleted file mode 100644 index cb92b2e8cc..0000000000 --- a/src/app/pages/forms/buttons/button-elements/button-elements.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-button-elements', - styleUrls: ['./button-elements.component.scss'], - templateUrl: './button-elements.component.html', -}) -export class ButtonElementsComponent { - - onClick() { - } -} diff --git a/src/app/pages/forms/buttons/buttons.component.html b/src/app/pages/forms/buttons/buttons.component.html index 881992904c..b9bbeb50c2 100644 --- a/src/app/pages/forms/buttons/buttons.component.html +++ b/src/app/pages/forms/buttons/buttons.component.html @@ -1,16 +1,123 @@
- - - + + Hero Buttons + +
+ + +
+ + + + + Default Buttons + +
+ + +
+ + + + + Outline Buttons + +
+ + +
+ + + + + Ghost Buttons + +
+ + +
+ +
+
- - - + + Button shapes + +
+ +
+ + + + + Button sizes + +
+ +
+ +
+
- - + + Action Groups + + + + + + + + + + + + + + + + + + + Pause + + + + Logs + + + + Search + + + + Setup + + + +
diff --git a/src/app/pages/forms/buttons/buttons.component.scss b/src/app/pages/forms/buttons/buttons.component.scss index 10bda4e9d1..71df895406 100644 --- a/src/app/pages/forms/buttons/buttons.component.scss +++ b/src/app/pages/forms/buttons/buttons.component.scss @@ -1,103 +1,20 @@ -//@import '../../../@theme/styles/themes'; -//@import '~@nebular/bootstrap/styles/buttons'; -//@import '~bootstrap/scss/mixins/breakpoints'; -//@import '~@nebular/theme/styles/global/breakpoints'; -// -//@include nb-install-component() { -// ::ng-deep { -// $button-size: 50px; -// -// .container-title { -// color: nb-theme(color-fg); -// font-family: nb-theme(font-secondary); -// margin-bottom: 0.5rem; -// } -// -// .header { -// color: nb-theme(color-fg-header); -// font-size: 0.875rem; -// } -// -// .subheader { -// font-size: 0.75rem; -// font-weight: nb-theme(font-weight-light); -// color: nb-theme(color-fg); -// } -// -// .btn-demo { -// width: 180px; -// } -// -// .state-container { -// display: flex; -// -// &:not(:last-child) { -// margin-bottom: 1rem; -// } -// -// .state-value { -// width: $button-size; -// height: $button-size; -// border-radius: nb-theme(btn-border-radius); -// -// @include nb-for-theme(corporate) { -// border-radius: nb-theme(btn-semi-round-border-radius); -// } -// } -// -// .state-details { -// display: flex; -// flex-direction: column; -// justify-content: center; -// margin-left: 1rem; -// margin-right: 1rem; -// height: $button-size; -// } -// } -// -// .example-container { -// @include nb-ltr(padding-right, 0); -// @include nb-rtl(padding-left, 0); -// } -// -// .example-container .container-btn { -// margin-bottom: 1.5rem; -// } -// -// .block-level-buttons .btn-group { -// margin-bottom: 1rem; -// } -// } -// -// @include media-breakpoint-down(is) { -// ngx-default-buttons ::ng-deep nb-card-header { -// flex-direction: column; -// align-items: left; -// -// span { -// margin-bottom: 1rem; -// } -// } -// } -// -// @include media-breakpoint-down(xs) { -// -// ::ng-deep.icon-buttons .icon-button-examples { -// button { -// @include nb-ltr(margin-right, 1rem); -// @include nb-rtl(margin-left, 1rem); -// } -// } -// -// ngx-default-buttons ::ng-deep nb-card-header { -// flex-direction: column; -// margin-bottom: 0.5rem; -// } -// -// ngx-block-level-buttons ::ng-deep { -// .btn-primary { -// padding: 0.75rem 1rem; -// } -// } -// } -//} +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + .buttons-row { + margin: -0.5rem; + } + + button[nbButton] { + margin: 0.5rem; + } + + .action-icon { + @include nb-ltr(margin-right, 0.5rem); + @include nb-rtl(margin-left, 0.5rem); + } + + .actions-card { + height: 8rem; + } +} diff --git a/src/app/pages/forms/buttons/buttons.component.ts b/src/app/pages/forms/buttons/buttons.component.ts index c632c86983..f839321e2b 100644 --- a/src/app/pages/forms/buttons/buttons.component.ts +++ b/src/app/pages/forms/buttons/buttons.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme'; @Component({ selector: 'ngx-buttons', @@ -6,4 +7,7 @@ import { Component } from '@angular/core'; templateUrl: './buttons.component.html', }) export class ButtonsComponent { + statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ]; + shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ]; + sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; } diff --git a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.html b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.html deleted file mode 100644 index 022e624ddc..0000000000 --- a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.html +++ /dev/null @@ -1,44 +0,0 @@ - - - Default Buttons - - -
-
-
- {{ b.containerTitle }} -
-
- -
-
-
-
-
- Default - {{ b.default }} -
-
-
-
-
- Hover - 14% white -
-
-
-
-
- Active - 14% black -
-
-
-
-
- - diff --git a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss deleted file mode 100644 index 5f5682ebd0..0000000000 --- a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss +++ /dev/null @@ -1,130 +0,0 @@ -//@import '../../../../@theme/styles/themes'; -//@import '~@nebular/bootstrap/styles/buttons'; -//@import '~bootstrap/scss/mixins/breakpoints'; -//@import '~@nebular/theme/styles/global/breakpoints'; -// -//@include nb-install-component() { -// -// nb-card-header { -// display: flex; -// align-items: center; -// justify-content: space-between; -// } -// -// nb-card-body { -// padding-bottom: 0; -// } -// -// .example-container { -// margin-bottom: 1.5rem; -// } -// -// .primary-container { -// .original { -// background-color: nb-theme(btn-primary-bg); -// } -// .hover { -// @include btn-primary-hover(); -// } -// .active { -// @include btn-primary-active(); -// } -// } -// -// .primary-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-primary-bg); -// } -// -// .success-container { -// .original { -// background-color: nb-theme(btn-success-bg); -// } -// .hover { -// @include btn-success-hover(); -// } -// .active { -// @include btn-success-active(); -// } -// } -// -// .success-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-success-bg); -// } -// -// .warning-container { -// .original { -// background-color: nb-theme(btn-warning-bg); -// } -// .hover { -// @include btn-warning-hover(); -// } -// .active { -// @include btn-warning-active(); -// } -// } -// -// .warning-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-warning-bg); -// } -// -// .info-container { -// .original { -// background-color: nb-theme(btn-info-bg); -// } -// .hover { -// @include btn-info-hover(); -// } -// .active { -// @include btn-info-active(); -// } -// } -// -// .info-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-info-bg); -// } -// -// .danger-container { -// .original { -// background-color: nb-theme(btn-danger-bg); -// } -// .hover { -// @include btn-danger-hover(); -// } -// .active { -// @include btn-danger-active(); -// } -// } -// -// .danger-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-danger-bg); -// } -// -// .secondary-container { -// .original { -// border: 2px solid nb-theme(btn-secondary-border); -// } -// .hover { -// @include btn-secondary-hover(); -// } -// .active { -// @include btn-secondary-active(); -// } -// } -// -// .secondary-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-secondary-border); -// } -// -// @include media-breakpoint-up(xxl) { -// .example-container { -// flex: 0 0 20%; -// max-width: 20%; -// } -// } -//} diff --git a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.ts b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.ts deleted file mode 100644 index 3a20485bb7..0000000000 --- a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-default-buttons', - styleUrls: ['./default-buttons.component.scss'], - templateUrl: './default-buttons.component.html', -}) -export class DefaultButtonsComponent { - - buttons = [ - { - status: 'primary', - container: 'primary-container', - containerTitle: 'Primary Button', - title: 'Primary', - default: '#7659ff', - }, - { - status: 'warning', - container: 'warning-container', - containerTitle: 'Warning Button', - title: 'Warning', - default: '#ffcb17', - }, - { - status: 'success', - container: 'success-container', - containerTitle: 'Success Button', - title: 'Success', - default: '#00d977', - }, - { - status: 'info', - container: 'info-container', - containerTitle: 'Info Button', - title: 'Info', - default: '#0088ff', - }, - { - status: 'danger', - container: 'danger-container', - containerTitle: 'Danger Button', - title: 'Danger', - default: '#ff386a', - }, - ]; -} diff --git a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.html b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.html deleted file mode 100644 index 6d38ba52b1..0000000000 --- a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.html +++ /dev/null @@ -1,72 +0,0 @@ - - Hero Buttons - -
-
-
- {{ hb.title }} -
-
- -
-
-
-
-
- Border - {{ hb[themeName].border }} -
-
-
-
-
- Color - {{ hb[themeName].color }} -
-
-
-
-
- Linear Gradient - {{ hb[themeName].gradientLeft }} - {{ hb[themeName].gradientRight }} -
-
-
-
-
- Bevel - 0 3px 0 0 - {{ hb[themeName].bevel }} -
-
- No Bevel -
-
-
-
-
- Shadow - 0 4px 10px 0 - {{ hb[themeName].shadow }} -
-
- No Shadow -
-
-
-
-
- Glow - {{ hb[themeName].glow.params }} - {{ hb[themeName].glow.color }} -
-
- No Glow -
-
-
-
-
- - diff --git a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss deleted file mode 100644 index 9f16b1fef5..0000000000 --- a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss +++ /dev/null @@ -1,144 +0,0 @@ -//@import '../../../../@theme/styles/themes'; -//@import '~@nebular/bootstrap/styles/buttons'; -//@import '~bootstrap/scss/mixins/breakpoints'; -//@import '~@nebular/theme/styles/global/breakpoints'; -// -//@include nb-install-component() { -// -// nb-card-body { -// padding-bottom: 0; -// } -// -// .none { -// position: relative; -// transform: rotate(45deg); -// -// &::before, &::after { -// position: absolute; -// content: ''; -// background: nb-theme(form-control-border-color); -// } -// -// &::before { -// left: 50%; -// top: 10%; -// transform: translateX(-50%); -// width: 1px; -// height: 80%; -// } -// -// &::after { -// top: 50%; -// left: 10%; -// transform: translateY(-50%); -// height: 1px; -// width: 80%; -// } -// } -// -// .shadow { -// box-shadow: nb-theme(btn-hero-shadow); -// } -// -// .primary-container { -// .color { -// background-color: nb-theme(color-primary); -// } -// .gradient { -// @include btn-hero-primary-gradient(); -// } -// .glow { -// box-shadow: btn-hero-primary-glow(); -// } -// .bevel { -// box-shadow: btn-hero-primary-bevel(); -// } -// } -// -// .warning-container { -// .color { -// background-color: nb-theme(color-warning); -// } -// .gradient { -// @include btn-hero-warning-gradient(); -// } -// .glow { -// box-shadow: btn-hero-warning-glow(); -// } -// .bevel { -// box-shadow: btn-hero-warning-bevel(); -// } -// } -// -// .success-container { -// .color { -// background-color: nb-theme(color-success); -// } -// .gradient { -// @include btn-hero-success-gradient(); -// } -// .glow { -// box-shadow: btn-hero-success-glow(); -// } -// .bevel { -// box-shadow: btn-hero-success-bevel(); -// } -// } -// -// .info-container { -// .color { -// background-color: nb-theme(color-info); -// } -// .gradient { -// @include btn-hero-info-gradient(); -// } -// .glow { -// box-shadow: btn-hero-info-glow(); -// } -// .bevel { -// box-shadow: btn-hero-info-bevel(); -// } -// } -// -// .danger-container { -// .color { -// background-color: nb-theme(color-danger); -// } -// .gradient { -// @include btn-hero-danger-gradient(); -// } -// .glow { -// box-shadow: btn-hero-danger-glow(); -// } -// .bevel { -// box-shadow: btn-hero-danger-bevel(); -// } -// } -// -// .secondary-container { -// .color { -// background-color: nb-theme(btn-secondary-bg); -// } -// .border { -// color: nb-theme(btn-secondary-color); -// border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border); -// } -// .glow { -// box-shadow: btn-hero-secondary-glow(); -// } -// .bevel { -// box-shadow: btn-hero-secondary-bevel(); -// } -// } -// -// .example-container { -// margin-bottom: 1.5rem; -// } -// -// @include media-breakpoint-up(xxl) { -// .example-container { -// flex: 0 0 20%; -// max-width: 20%; -// } -// } -//} diff --git a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.ts b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.ts deleted file mode 100644 index 19a0c268ae..0000000000 --- a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.ts +++ /dev/null @@ -1,166 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { Subscription } from 'rxjs'; - -@Component({ - selector: 'ngx-hero-buttons', - styleUrls: ['./hero-buttons.component.scss'], - templateUrl: './hero-buttons.component.html', -}) -export class HeroButtonComponent implements OnDestroy { - - themeName = 'default'; - settings: Array; - themeSubscription: Subscription; - - constructor(private themeService: NbThemeService) { - this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => { - this.themeName = theme.name; - this.init(theme.variables); - }); - } - - init(colors: any) { - this.settings = [ - { - status: 'primary', - container: 'primary-container', - title: 'Primary Button', - buttonTitle: 'Primary', - default: { - gradientLeft: `adjust-hue(${colors.primary}, 20deg)`, - gradientRight: colors.primary, - }, - corporate: { - color: colors.primary, - glow: { - params: '0 0 20px 0', - color: 'rgba (115, 161, 255, 0.5)', - }, - }, - cosmic: { - gradientLeft: `adjust-hue(${colors.primary}, 20deg)`, - gradientRight: colors.primary, - bevel: `shade(${colors.primary}, 14%)`, - shadow: 'rgba (6, 7, 64, 0.5)', - glow: { - params: '0 2px 12px 0', - color: `adjust-hue(${colors.primary}, 10deg)`, - }, - }, - }, - { - status: 'warning', - container: 'warning-container', - title: 'Warning Button', - buttonTitle: 'Warning', - default: { - gradientLeft: `adjust-hue(${colors.warning}, 10deg)`, - gradientRight: colors.warning, - }, - corporate: { - color: colors.warning, - glow: { - params: '0 0 20px 0', - color: 'rgba (256, 163, 107, 0.5)', - }, - }, - cosmic: { - gradientLeft: `adjust-hue(${colors.warning}, 10deg)`, - gradientRight: colors.warning, - bevel: `shade(${colors.warning}, 14%)`, - shadow: 'rgba (33, 7, 77, 0.5)', - glow: { - params: '0 2px 12px 0', - color: `adjust-hue(${colors.warning}, 5deg)`, - }, - }, - }, - { - status: 'success', - container: 'success-container', - title: 'Success Button', - buttonTitle: 'Success', - default: { - gradientLeft: `adjust-hue(${colors.success}, 20deg)`, - gradientRight: colors.success, - }, - corporate: { - color: colors.success, - glow: { - params: '0 0 20px 0', - color: 'rgba (93, 207, 227, 0.5)', - }, - }, - cosmic: { - gradientLeft: `adjust-hue(${colors.success}, 20deg)`, - gradientRight: colors.success, - bevel: `shade(${colors.success}, 14%)`, - shadow: 'rgba (33, 7, 77, 0.5)', - glow: { - params: '0 2px 12px 0', - color: `adjust-hue(${colors.success}, 10deg)`, - }, - }, - }, - { - status: 'info', - container: 'info-container', - title: 'Info Button', - buttonTitle: 'Info', - default: { - gradientLeft: `adjust-hue(${colors.info}, -10deg)`, - gradientRight: colors.info, - }, - corporate: { - color: colors.info, - glow: { - params: '0 0 20px 0', - color: 'rgba (186, 127, 236, 0.5)', - }, - }, - cosmic: { - gradientLeft: `adjust-hue(${colors.info}, -10deg)`, - gradientRight: colors.info, - bevel: `shade(${colors.info}, 14%)`, - shadow: 'rgba (33, 7, 77, 0.5)', - glow: { - params: '0 2px 12px 0', - color: `adjust-hue(${colors.info}, -5deg)`, - }, - }, - }, - { - status: 'danger', - container: 'danger-container', - title: 'Danger Button', - buttonTitle: 'Danger', - default: { - gradientLeft: `adjust-hue(${colors.danger}, -20deg)`, - gradientRight: colors.danger, - }, - corporate: { - color: colors.danger, - glow: { - params: '0 0 20px 0', - color: 'rgba (255, 107, 131, 0.5)', - }, - }, - cosmic: { - gradientLeft: `adjust-hue(${colors.danger}, -20deg)`, - gradientRight: colors.danger, - bevel: `shade(${colors.danger}, 14%)`, - shadow: 'rgba (33, 7, 77, 0.5)', - glow: { - params: '0 2px 12px 0', - color: `adjust-hue(${colors.danger}, -10deg)`, - }, - }, - }, - ]; - } - - ngOnDestroy() { - this.themeSubscription.unsubscribe(); - } -} diff --git a/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.html b/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.html deleted file mode 100644 index c08e786cb5..0000000000 --- a/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - Pause - - - Logs - - - Search - - - Setup - - - - diff --git a/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss b/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss deleted file mode 100644 index dd5c72953e..0000000000 --- a/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss +++ /dev/null @@ -1,60 +0,0 @@ -//@import '../../../../@theme/styles/themes'; -//@import '~bootstrap/scss/mixins/breakpoints'; -//@import '~@nebular/theme/styles/global/breakpoints'; -// -//@include nb-install-component() { -// -// nb-actions > nb-action { -// padding: 0; -// } -// -// nb-action { -// i { -// color: nb-theme(color-fg); -// font-size: 2.5rem; -// @include nb-ltr(margin-right, 1rem); -// @include nb-rtl(margin-left, 1rem); -// -// @include nb-for-theme(corporate) { -// color: nb-theme(actions-fg); -// } -// } -// -// span { -// font-family: nb-theme(font-secondary); -// font-weight: nb-theme(font-weight-bold); -// color: nb-theme(color-fg-heading); -// text-transform: uppercase; -// } -// } -// -// @include media-breakpoint-down(md) { -// nb-actions nb-action { -// padding: 0 0.75rem; -// } -// } -// @include media-breakpoint-down(sm) { -// nb-card-body { -// padding: 1rem; -// } -// -// nb-action { -// font-size: 0.75rem; -// i { -// font-size: 2rem; -// @include nb-ltr(margin-right, 0.5rem); -// @include nb-rtl(margin-left, 0.5rem); -// } -// } -// } -// -// @include media-breakpoint-down(is) { -// nb-action i { -// font-size: 1.75rem; -// margin: 0; -// } -// span { -// display: none; -// } -// } -//} diff --git a/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.ts b/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.ts deleted file mode 100644 index 8ff17224d6..0000000000 --- a/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-labeled-actions-group', - styleUrls: ['./labeled-actions-group.component.scss'], - templateUrl: './labeled-actions-group.component.html', -}) -export class LabeledActionsGroupComponent { -} diff --git a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.html b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.html deleted file mode 100644 index 2b031f4b64..0000000000 --- a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.html +++ /dev/null @@ -1,45 +0,0 @@ - - - Default Buttons - - -
-
-
- {{ b.containerTitle }} -
-
- -
-
-
-
-
- Default - {{ b.default }} -
-
-
-
-
- Hover - 14% white -
-
-
-
-
- Active - 14% black -
-
-
-
-
- - diff --git a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss deleted file mode 100644 index 5f5682ebd0..0000000000 --- a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss +++ /dev/null @@ -1,130 +0,0 @@ -//@import '../../../../@theme/styles/themes'; -//@import '~@nebular/bootstrap/styles/buttons'; -//@import '~bootstrap/scss/mixins/breakpoints'; -//@import '~@nebular/theme/styles/global/breakpoints'; -// -//@include nb-install-component() { -// -// nb-card-header { -// display: flex; -// align-items: center; -// justify-content: space-between; -// } -// -// nb-card-body { -// padding-bottom: 0; -// } -// -// .example-container { -// margin-bottom: 1.5rem; -// } -// -// .primary-container { -// .original { -// background-color: nb-theme(btn-primary-bg); -// } -// .hover { -// @include btn-primary-hover(); -// } -// .active { -// @include btn-primary-active(); -// } -// } -// -// .primary-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-primary-bg); -// } -// -// .success-container { -// .original { -// background-color: nb-theme(btn-success-bg); -// } -// .hover { -// @include btn-success-hover(); -// } -// .active { -// @include btn-success-active(); -// } -// } -// -// .success-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-success-bg); -// } -// -// .warning-container { -// .original { -// background-color: nb-theme(btn-warning-bg); -// } -// .hover { -// @include btn-warning-hover(); -// } -// .active { -// @include btn-warning-active(); -// } -// } -// -// .warning-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-warning-bg); -// } -// -// .info-container { -// .original { -// background-color: nb-theme(btn-info-bg); -// } -// .hover { -// @include btn-info-hover(); -// } -// .active { -// @include btn-info-active(); -// } -// } -// -// .info-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-info-bg); -// } -// -// .danger-container { -// .original { -// background-color: nb-theme(btn-danger-bg); -// } -// .hover { -// @include btn-danger-hover(); -// } -// .active { -// @include btn-danger-active(); -// } -// } -// -// .danger-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-danger-bg); -// } -// -// .secondary-container { -// .original { -// border: 2px solid nb-theme(btn-secondary-border); -// } -// .hover { -// @include btn-secondary-hover(); -// } -// .active { -// @include btn-secondary-active(); -// } -// } -// -// .secondary-container.outline .original { -// background-color: transparent; -// border: 2px solid nb-theme(btn-secondary-border); -// } -// -// @include media-breakpoint-up(xxl) { -// .example-container { -// flex: 0 0 20%; -// max-width: 20%; -// } -// } -//} diff --git a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.ts b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.ts deleted file mode 100644 index 9b16982daf..0000000000 --- a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-outline-buttons', - styleUrls: ['./outline-buttons.component.scss'], - templateUrl: './outline-buttons.component.html', -}) -export class OutlineButtonsComponent { - - buttons = [ - { - status: 'primary', - container: 'primary-container outline', - containerTitle: 'Primary Button', - title: 'Primary', - default: '#7659ff', - }, - { - status: 'warning', - container: 'warning-container outline', - containerTitle: 'Warning Button', - title: 'Warning', - default: '#ffcb17', - }, - { - status: 'success', - container: 'success-container outline', - containerTitle: 'Success Button', - title: 'Success', - default: '#00d977', - }, - { - status: 'info', - container: 'info-container', - containerTitle: 'Info Button', - title: 'Info', - default: '#0088ff', - }, - { - status: 'danger', - container: 'danger-container outline', - containerTitle: 'Danger Button', - title: 'Danger', - default: '#ff386a', - }, - ]; -} diff --git a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.html b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.html deleted file mode 100644 index 880da47496..0000000000 --- a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.html +++ /dev/null @@ -1,43 +0,0 @@ - - Button Shapes - -
-
- Rectangle Button -
-
- Border radius: - 4px -
-
- -
-
- -
-
- Semi-round Button -
-
- Border radius: - 12px -
-
- -
-
- -
-
- Rounded Button -
-
- Border radius: - round -
-
- -
-
- - diff --git a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss deleted file mode 100644 index fb7509b2c2..0000000000 --- a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss +++ /dev/null @@ -1,30 +0,0 @@ -//@import '../../../../@theme/styles/themes'; -//@import '~@nebular/bootstrap/styles/buttons'; -// -//@include nb-install-component() { -// -// nb-card-body { -// padding: 0 0 29px; -// display: flex; -// flex-wrap: wrap; -// justify-content: space-between; -// } -// -// .shape-container { -// margin: 1.25rem 1.25rem 0; -// } -// -// .container-title { -// margin-bottom: 0.25rem; -// } -// -// .subheader { -// margin-bottom: 1rem; -// font-size: 0.875rem; -// -// span:nth-child(2) { -// color: nb-theme(color-fg-heading); -// font-weight: nb-theme(font-weight-bold); -// } -// } -//} diff --git a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.ts b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.ts deleted file mode 100644 index dde928d8ba..0000000000 --- a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-shape-buttons', - styleUrls: ['./shape-buttons.component.scss'], - templateUrl: './shape-buttons.component.html', -}) -export class ShapeButtonsComponent { -} diff --git a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.html b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.html deleted file mode 100644 index c76996959d..0000000000 --- a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.html +++ /dev/null @@ -1,50 +0,0 @@ - - Button Sizes - - -
-
- Large Button -
-
- 0.875rem 1.75rem -
-
- -
-
-
-
- Medium Button -
-
- 0.75rem 1.5rem -
-
- -
-
-
-
- Small Button -
-
- 0.675rem 1.5rem -
-
- -
-
-
-
- X-Small Button -
-
- 0.5rem 1.25rem -
-
- -
-
- - diff --git a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss deleted file mode 100644 index 245f521991..0000000000 --- a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss +++ /dev/null @@ -1,26 +0,0 @@ -//@import '../../../../@theme/styles/themes'; -//@import '~@nebular/bootstrap/styles/buttons'; -// -//@include nb-install-component() { -// -// nb-card-body { -// padding: 0 1.25rem 1.25rem 0; -// display: flex; -// flex-wrap: wrap; -// } -// -// .container-title { -// margin-bottom: 0.25rem; -// } -// -// .size-container { -// margin: 1.25rem 0 0 1.25rem; -// } -// -// .subheader { -// margin-bottom: 0.75rem; -// font-size: 0.875rem; -// font-weight: nb-theme(font-weight-bolder); -// color: nb-theme(color-fg-heading); -// } -//} diff --git a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.ts b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.ts deleted file mode 100644 index bdc9bb3391..0000000000 --- a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-size-buttons', - styleUrls: ['./size-buttons.component.scss'], - templateUrl: './size-buttons.component.html', -}) -export class SizeButtonsComponent { -} diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts index 3d0ba2c6d4..6782b85a0f 100644 --- a/src/app/pages/forms/forms.module.ts +++ b/src/app/pages/forms/forms.module.ts @@ -3,9 +3,11 @@ import { NbActionsModule, NbButtonModule, NbCardModule, - NbCheckboxModule, NbDatepickerModule, + NbCheckboxModule, + NbDatepickerModule, NbIconModule, NbInputModule, - NbRadioModule, NbSelectModule, + NbRadioModule, + NbSelectModule, NbUserModule, } from '@nebular/theme'; @@ -16,14 +18,6 @@ import { FormInputsComponent } from './form-inputs/form-inputs.component'; import { FormLayoutsComponent } from './form-layouts/form-layouts.component'; import { DatepickerComponent } from './datepicker/datepicker.component'; import { ButtonsComponent } from './buttons/buttons.component'; -import { DefaultButtonsComponent } from './buttons/default-buttons/default-buttons.component'; -import { OutlineButtonsComponent } from './buttons/outline-buttons/outline-buttons.component'; -import { HeroButtonComponent } from './buttons/hero-buttons/hero-buttons.component'; -import { ShapeButtonsComponent } from './buttons/shape-buttons/shape-buttons.component'; -import { SizeButtonsComponent } from './buttons/size-buttons/size-buttons.component'; -import { ActionGroupsComponent } from './buttons/action-groups/action-groups.component'; -import { LabeledActionsGroupComponent } from './buttons/labeled-actions-group/labeled-actions-group.component'; -import { ButtonElementsComponent } from './buttons/button-elements/button-elements.component'; @NgModule({ imports: [ @@ -38,18 +32,11 @@ import { ButtonElementsComponent } from './buttons/button-elements/button-elemen NbDatepickerModule, FormsRoutingModule, NbSelectModule, + NbIconModule, ], declarations: [ FormsComponent, ButtonsComponent, - DefaultButtonsComponent, - OutlineButtonsComponent, - HeroButtonComponent, - ShapeButtonsComponent, - SizeButtonsComponent, - ActionGroupsComponent, - LabeledActionsGroupComponent, - ButtonElementsComponent, FormInputsComponent, FormLayoutsComponent, DatepickerComponent,