mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
refactor: update buttons example
This commit is contained in:
Sergey Andrievskiy
parent
f4930e4cdc
commit
77066ad20c
28 changed files with 144 additions and 1355 deletions
|
|
@ -1,17 +0,0 @@
|
||||||
<nb-card>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="action-groups-header">
|
|
||||||
Action Groups
|
|
||||||
</div>
|
|
||||||
<nb-actions size="medium">
|
|
||||||
<nb-action icon="nb-menu"></nb-action>
|
|
||||||
<nb-action icon="nb-search"></nb-action>
|
|
||||||
<nb-action icon="nb-email"></nb-action>
|
|
||||||
<nb-action disabled icon="nb-notifications"></nb-action>
|
|
||||||
<nb-action>
|
|
||||||
<nb-user name="Han Solo"></nb-user>
|
|
||||||
</nb-action>
|
|
||||||
<nb-action icon="nb-gear"></nb-action>
|
|
||||||
</nb-actions>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
@ -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;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
@ -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 {
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<nb-card>
|
|
||||||
<nb-card-header>Button Elements</nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="button-container">
|
|
||||||
<button (click)="onClick()" nbButton>Button</button>
|
|
||||||
</div>
|
|
||||||
<div class="button-container">
|
|
||||||
<input (click)="onClick()" nbButton type="submit" value="Input Submit"/>
|
|
||||||
</div>
|
|
||||||
<div class="button-container">
|
|
||||||
<input (click)="onClick()" nbButton type="button" value="Input Button"/>
|
|
||||||
</div>
|
|
||||||
<div class="button-container">
|
|
||||||
<a (click)="onClick()" href="#" nbButton>Link</a>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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() {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +1,123 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<ngx-hero-buttons></ngx-hero-buttons>
|
<nb-card>
|
||||||
<ngx-default-buttons></ngx-default-buttons>
|
<nb-card-header>Hero Buttons</nb-card-header>
|
||||||
<ngx-outline-buttons></ngx-outline-buttons>
|
<nb-card-body>
|
||||||
|
<div class="buttons-row">
|
||||||
|
<button *ngFor="let status of statuses" nbButton [status]="status" hero>
|
||||||
|
{{ status }}
|
||||||
|
</button>
|
||||||
|
<button disabled nbButton hero>
|
||||||
|
disabled
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header>Default Buttons</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="buttons-row">
|
||||||
|
<button *ngFor="let status of statuses" nbButton [status]="status">
|
||||||
|
{{ status }}
|
||||||
|
</button>
|
||||||
|
<button disabled nbButton>
|
||||||
|
disabled
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header>Outline Buttons</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="buttons-row">
|
||||||
|
<button *ngFor="let status of statuses" nbButton [status]="status" outline>
|
||||||
|
{{ status }}
|
||||||
|
</button>
|
||||||
|
<button disabled nbButton outline>
|
||||||
|
disabled
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header>Ghost Buttons</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="buttons-row">
|
||||||
|
<button *ngFor="let status of statuses" nbButton [status]="status" ghost>
|
||||||
|
{{ status }}
|
||||||
|
</button>
|
||||||
|
<button disabled nbButton outline>
|
||||||
|
disabled
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||||
<ngx-shape-buttons></ngx-shape-buttons>
|
<nb-card>
|
||||||
<ngx-action-groups></ngx-action-groups>
|
<nb-card-header>Button shapes</nb-card-header>
|
||||||
<ngx-labeled-actions-group></ngx-labeled-actions-group>
|
<nb-card-body>
|
||||||
|
<div class="buttons-row">
|
||||||
|
<button *ngFor="let shape of shapes" nbButton [shape]="shape">
|
||||||
|
{{ shape }}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header>Button sizes</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="buttons-row">
|
||||||
|
<button *ngFor="let size of sizes" nbButton [size]="size">
|
||||||
|
{{ size }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||||
<ngx-size-buttons></ngx-size-buttons>
|
<nb-card class="actions-card">
|
||||||
<ngx-button-elements></ngx-button-elements>
|
<nb-card-header>Action Groups</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<nb-actions size="medium">
|
||||||
|
<nb-action icon="menu-outline"></nb-action>
|
||||||
|
<nb-action icon="search-outline"></nb-action>
|
||||||
|
<nb-action icon="email-outline"></nb-action>
|
||||||
|
<nb-action disabled icon="bell-outline"></nb-action><nb-action>
|
||||||
|
<nb-user name="Han Solo"></nb-user>
|
||||||
|
</nb-action>
|
||||||
|
<nb-action icon="settings-2-outline"></nb-action>
|
||||||
|
</nb-actions>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-body>
|
||||||
|
<nb-actions size="medium" fullWidth>
|
||||||
|
<nb-action>
|
||||||
|
<nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
|
||||||
|
<span>Pause</span>
|
||||||
|
</nb-action>
|
||||||
|
<nb-action>
|
||||||
|
<nb-icon class="action-icon" icon="list-outline"></nb-icon>
|
||||||
|
<span>Logs</span>
|
||||||
|
</nb-action>
|
||||||
|
<nb-action>
|
||||||
|
<nb-icon class="action-icon" icon="search-outline"></nb-icon>
|
||||||
|
<span>Search</span>
|
||||||
|
</nb-action>
|
||||||
|
<nb-action>
|
||||||
|
<nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
|
||||||
|
<span>Setup</span>
|
||||||
|
</nb-action>
|
||||||
|
</nb-actions>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,103 +1,20 @@
|
||||||
//@import '../../../@theme/styles/themes';
|
@import '../../../@theme/styles/themes';
|
||||||
//@import '~@nebular/bootstrap/styles/buttons';
|
|
||||||
//@import '~bootstrap/scss/mixins/breakpoints';
|
@include nb-install-component() {
|
||||||
//@import '~@nebular/theme/styles/global/breakpoints';
|
.buttons-row {
|
||||||
//
|
margin: -0.5rem;
|
||||||
//@include nb-install-component() {
|
}
|
||||||
// ::ng-deep {
|
|
||||||
// $button-size: 50px;
|
button[nbButton] {
|
||||||
//
|
margin: 0.5rem;
|
||||||
// .container-title {
|
}
|
||||||
// color: nb-theme(color-fg);
|
|
||||||
// font-family: nb-theme(font-secondary);
|
.action-icon {
|
||||||
// margin-bottom: 0.5rem;
|
@include nb-ltr(margin-right, 0.5rem);
|
||||||
// }
|
@include nb-rtl(margin-left, 0.5rem);
|
||||||
//
|
}
|
||||||
// .header {
|
|
||||||
// color: nb-theme(color-fg-header);
|
.actions-card {
|
||||||
// font-size: 0.875rem;
|
height: 8rem;
|
||||||
// }
|
}
|
||||||
//
|
}
|
||||||
// .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;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-buttons',
|
selector: 'ngx-buttons',
|
||||||
|
|
@ -6,4 +7,7 @@ import { Component } from '@angular/core';
|
||||||
templateUrl: './buttons.component.html',
|
templateUrl: './buttons.component.html',
|
||||||
})
|
})
|
||||||
export class ButtonsComponent {
|
export class ButtonsComponent {
|
||||||
|
statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
|
||||||
|
shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
|
||||||
|
sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<nb-card>
|
|
||||||
<nb-card-header>
|
|
||||||
<span>Default Buttons</span>
|
|
||||||
</nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="row">
|
|
||||||
<div class="example-container col-md-4" *ngFor="let b of buttons">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>{{ b.containerTitle }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="container-btn">
|
|
||||||
<button nbButton
|
|
||||||
status="{{ b.status }}"
|
|
||||||
class="btn-demo">
|
|
||||||
{{ b.title }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="{{ b.container }}">
|
|
||||||
<div class="state-container">
|
|
||||||
<div class="state-value original"></div>
|
|
||||||
<div class="state-details">
|
|
||||||
<span class="header">Default</span>
|
|
||||||
<span class="subheader">{{ b.default }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="state-container">
|
|
||||||
<div class="state-value hover"></div>
|
|
||||||
<div class="state-details">
|
|
||||||
<span class="header">Hover</span>
|
|
||||||
<span class="subheader">14% white</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="state-container">
|
|
||||||
<div class="state-value active"></div>
|
|
||||||
<div class="state-details">
|
|
||||||
<span class="header">Active</span>
|
|
||||||
<span class="subheader">14% black</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
@ -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%;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
@ -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',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
<nb-card>
|
|
||||||
<nb-card-header>Hero Buttons</nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="row">
|
|
||||||
<div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>{{ hb.title }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="container-btn">
|
|
||||||
<button class="btn-demo" nbButton hero status="{{ hb.status }}">{{ hb.buttonTitle }}</button>
|
|
||||||
</div>
|
|
||||||
<div class="{{ hb.container }}">
|
|
||||||
<div class="state-container" *ngIf="hb[themeName].border">
|
|
||||||
<div class="state-value border"></div>
|
|
||||||
<div class="state-details">
|
|
||||||
<span class="header">Border</span>
|
|
||||||
<span class="subheader">{{ hb[themeName].border }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="state-container" *ngIf="hb[themeName].color">
|
|
||||||
<div class="state-value color"></div>
|
|
||||||
<div class="state-details">
|
|
||||||
<span class="header">Color</span>
|
|
||||||
<span class="subheader">{{ hb[themeName].color }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="state-container" *ngIf="hb[themeName].gradientLeft">
|
|
||||||
<div class="state-value gradient"></div>
|
|
||||||
<div class="state-details">
|
|
||||||
<span class="header">Linear Gradient</span>
|
|
||||||
<span class="subheader">{{ hb[themeName].gradientLeft }}</span>
|
|
||||||
<span class="subheader">{{ hb[themeName].gradientRight }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="state-container">
|
|
||||||
<div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
|
|
||||||
<div class="state-details" *ngIf="hb[themeName].bevel">
|
|
||||||
<span class="header">Bevel</span>
|
|
||||||
<span class="subheader">0 3px 0 0</span>
|
|
||||||
<span class="subheader">{{ hb[themeName].bevel }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="state-details" *ngIf="!hb[themeName].bevel">
|
|
||||||
<span class="header">No Bevel</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="state-container">
|
|
||||||
<div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
|
|
||||||
<div class="state-details" *ngIf="hb[themeName].shadow">
|
|
||||||
<span class="header">Shadow</span>
|
|
||||||
<span class="subheader">0 4px 10px 0</span>
|
|
||||||
<span class="subheader">{{ hb[themeName].shadow }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="state-details" *ngIf="!hb[themeName].shadow">
|
|
||||||
<span class="header">No Shadow</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="state-container">
|
|
||||||
<div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
|
|
||||||
<div class="state-details" *ngIf="hb[themeName].glow">
|
|
||||||
<span class="header">Glow</span>
|
|
||||||
<span class="subheader">{{ hb[themeName].glow.params }}</span>
|
|
||||||
<span class="subheader">{{ hb[themeName].glow.color }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="state-details" *ngIf="!hb[themeName].glow">
|
|
||||||
<span class="header">No Glow</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
@ -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%;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
@ -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<any>;
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<nb-card>
|
|
||||||
<nb-card-body>
|
|
||||||
<nb-actions size="medium" fullWidth>
|
|
||||||
<nb-action>
|
|
||||||
<i class="nb-pause-outline"></i><span>Pause</span>
|
|
||||||
</nb-action>
|
|
||||||
<nb-action>
|
|
||||||
<i class="nb-list"></i><span>Logs</span>
|
|
||||||
</nb-action>
|
|
||||||
<nb-action>
|
|
||||||
<i class="nb-search"></i><span>Search</span>
|
|
||||||
</nb-action>
|
|
||||||
<nb-action>
|
|
||||||
<i class="nb-gear"></i><span>Setup</span>
|
|
||||||
</nb-action>
|
|
||||||
</nb-actions>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
@ -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;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
@ -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 {
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<nb-card>
|
|
||||||
<nb-card-header>
|
|
||||||
<span>Default Buttons</span>
|
|
||||||
</nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="row">
|
|
||||||
<div class="example-container col-md-4" *ngFor="let b of buttons">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>{{ b.containerTitle }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="container-btn">
|
|
||||||
<button nbButton
|
|
||||||
outline
|
|
||||||
status="{{ b.status }}"
|
|
||||||
class="btn-demo">
|
|
||||||
{{ b.title }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="{{ b.container }}">
|
|
||||||
<div class="state-container">
|
|
||||||
<div class="state-value original"></div>
|
|
||||||
<div class="state-details">
|
|
||||||
<span class="header">Default</span>
|
|
||||||
<span class="subheader">{{ b.default }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="state-container">
|
|
||||||
<div class="state-value hover"></div>
|
|
||||||
<div class="state-details">
|
|
||||||
<span class="header">Hover</span>
|
|
||||||
<span class="subheader">14% white</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="state-container">
|
|
||||||
<div class="state-value active"></div>
|
|
||||||
<div class="state-details">
|
|
||||||
<span class="header">Active</span>
|
|
||||||
<span class="subheader">14% black</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
@ -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%;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
@ -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',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<nb-card>
|
|
||||||
<nb-card-header>Button Shapes</nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="shape-container">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>Rectangle Button</span>
|
|
||||||
</div>
|
|
||||||
<div class="subheader">
|
|
||||||
<span>Border radius:</span>
|
|
||||||
<span>4px</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button nbButton shape="rectangle" status="success" class="btn-demo">Rectangle</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="shape-container">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>Semi-round Button</span>
|
|
||||||
</div>
|
|
||||||
<div class="subheader">
|
|
||||||
<span>Border radius:</span>
|
|
||||||
<span>12px</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button nbButton shape="semi-round" status="success" class="btn-demo">Semi-round</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="shape-container">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>Rounded Button</span>
|
|
||||||
</div>
|
|
||||||
<div class="subheader">
|
|
||||||
<span>Border radius:</span>
|
|
||||||
<span>round</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button nbButton shape="round" status="success" class="btn-demo">Round</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
@ -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);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
@ -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 {
|
|
||||||
}
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<nb-card>
|
|
||||||
<nb-card-header>Button Sizes</nb-card-header>
|
|
||||||
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="size-container">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>Large Button</span>
|
|
||||||
</div>
|
|
||||||
<div class="subheader">
|
|
||||||
<span>0.875rem 1.75rem</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button nbButton size="large">Large Button</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="size-container">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>Medium Button</span>
|
|
||||||
</div>
|
|
||||||
<div class="subheader">
|
|
||||||
<span>0.75rem 1.5rem</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button nbButton size="medium">Medium Button</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="size-container">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>Small Button</span>
|
|
||||||
</div>
|
|
||||||
<div class="subheader">
|
|
||||||
<span>0.675rem 1.5rem</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button nbButton size="small">Small Button</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="size-container">
|
|
||||||
<div class="container-title">
|
|
||||||
<span>X-Small Button</span>
|
|
||||||
</div>
|
|
||||||
<div class="subheader">
|
|
||||||
<span>0.5rem 1.25rem</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button nbButton size="xsmall">X-Small Button</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
@ -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);
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
@ -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 {
|
|
||||||
}
|
|
||||||
|
|
@ -3,9 +3,11 @@ import {
|
||||||
NbActionsModule,
|
NbActionsModule,
|
||||||
NbButtonModule,
|
NbButtonModule,
|
||||||
NbCardModule,
|
NbCardModule,
|
||||||
NbCheckboxModule, NbDatepickerModule,
|
NbCheckboxModule,
|
||||||
|
NbDatepickerModule, NbIconModule,
|
||||||
NbInputModule,
|
NbInputModule,
|
||||||
NbRadioModule, NbSelectModule,
|
NbRadioModule,
|
||||||
|
NbSelectModule,
|
||||||
NbUserModule,
|
NbUserModule,
|
||||||
} from '@nebular/theme';
|
} from '@nebular/theme';
|
||||||
|
|
||||||
|
|
@ -16,14 +18,6 @@ import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||||
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
||||||
import { DatepickerComponent } from './datepicker/datepicker.component';
|
import { DatepickerComponent } from './datepicker/datepicker.component';
|
||||||
import { ButtonsComponent } from './buttons/buttons.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({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
|
@ -38,18 +32,11 @@ import { ButtonElementsComponent } from './buttons/button-elements/button-elemen
|
||||||
NbDatepickerModule,
|
NbDatepickerModule,
|
||||||
FormsRoutingModule,
|
FormsRoutingModule,
|
||||||
NbSelectModule,
|
NbSelectModule,
|
||||||
|
NbIconModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
FormsComponent,
|
FormsComponent,
|
||||||
ButtonsComponent,
|
ButtonsComponent,
|
||||||
DefaultButtonsComponent,
|
|
||||||
OutlineButtonsComponent,
|
|
||||||
HeroButtonComponent,
|
|
||||||
ShapeButtonsComponent,
|
|
||||||
SizeButtonsComponent,
|
|
||||||
ActionGroupsComponent,
|
|
||||||
LabeledActionsGroupComponent,
|
|
||||||
ButtonElementsComponent,
|
|
||||||
FormInputsComponent,
|
FormInputsComponent,
|
||||||
FormLayoutsComponent,
|
FormLayoutsComponent,
|
||||||
DatepickerComponent,
|
DatepickerComponent,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue