Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(buttons): fix button styles

Browse source
This commit is contained in:
Alexander Zhukov 2017-06-07 14:14:57 +03:00
parent 6e89b96316
commit 0420354b9c
18 changed files with 613 additions and 1243 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/@theme/components/header/header.component.scss
View file

@ -29,6 +29,10 @@
}
}
.theme-buttons button {
margin-left: 10px;
}
.control-icon.ion-navicon {
font-size: 2.8rem;
}

23
src/app/@theme/components/header/header.component.ts
View file

@ -10,8 +10,11 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
<div class="left">
<i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
<span class="logo" (click)="goToHome()">NgX&nbsp;<a>Admin</a></span>
<button (click)="switchTheme()">Switch Theme!</button>
<button (click)="selectDefaultTheme()">Default Theme!</button>
<div class="theme-buttons">
<button class="btn btn-hero btn-primary" (click)="selectCosmicTheme()">Cosmic</button>
<button class="btn btn-hero btn-warning" (click)="selectLightTheme()">Light</button>
<button class="btn btn-hero btn-info" (click)="selectDefaultTheme()">Default</button>
</div>
</div>
<nga-actions size="medium" inverse class="right">
@ -37,8 +40,8 @@ export class HeaderComponent {
];
constructor(private sidebarService: NgaSidebarService,
private menuService: NgaMenuService,
private themeService: NgaThemeService) {
private menuService: NgaMenuService,
private themeService: NgaThemeService) {
}
toggleSidebar() {
@ -49,12 +52,12 @@ export class HeaderComponent {
this.menuService.navigateHome();
}
switchTheme() {
if (this.themeService.currentTheme === 'light') {
this.themeService.changeTheme('cosmic');
} else {
this.themeService.changeTheme('light');
}
selectCosmicTheme() {
this.themeService.changeTheme('cosmic');
}
selectLightTheme() {
this.themeService.changeTheme('light');
}
selectDefaultTheme() {

360
src/app/@theme/styles/cosmic/_buttons.scss
View file

@ -1,8 +1,51 @@
@mixin ngx-buttons-theme($theme-name) {
.hero-buttons {
$btn-component-size: 50px;
$btn-component-bd-radius: 12px;
$btn-component-size: 50px;
$btn-component-bd-radius: 12px;
.states-container .state-container {
display: flex;
.state-value {
width: $btn-component-size;
height: $btn-component-size;
border-radius: $btn-component-bd-radius;
margin-bottom: 16px;
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 17px;
height: $btn-component-size;
}
.state-details .header {
color: white;
}
.state-details .subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
}
.example-container {
padding-right: 0;
}
.example-container .container-title {
margin-bottom: 14px;
font-family: Exo;
}
.example-container .container-btn {
margin-bottom: 24px;
}
.hero-buttons {
@mixin btn-component($bevel-bd, $glow, $shadow) {
.bevel-border {
box-shadow: 0 3px 0 0 $bevel-bd;
@ -17,100 +60,53 @@
}
}
.button-container {
padding-right: 0;
.container-title {
margin-bottom: 14px;
.example-container .states-container.primary-container {
.gradient {
@include primary-gradient();
}
.container-btn {
margin-bottom: 24px;
@include btn-component($btn-primary-bevel-bd, $btn-primary-glow, $btn-primary-shadow);
}
.example-container .states-container.warning-container {
.gradient {
@include warning-gradient();
}
.states-container {
.state-container {
display: flex;
@include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
}
.gradient,
.border,
.bevel-border,
.shadow,
.glow {
width: $btn-component-size;
height: $btn-component-size;
border-radius: $btn-component-bd-radius;
margin-bottom: 16px;
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 17px;
height: $btn-component-size;
.header {
color: white;
}
.subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
}
}
&.primary-container {
.gradient {
@include primary-gradient();
}
@include btn-component($btn-primary-bevel-bd, $btn-primary-glow, $btn-primary-shadow);
}
&.warning-container {
.gradient {
@include warning-gradient();
}
@include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
}
&.success-container {
.gradient {
@include success-gradient();
}
@include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
}
&.info-container {
.gradient {
@include info-gradient();
}
@include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
}
&.danger-container {
.gradient {
@include danger-gradient();
}
@include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
}
&.default-container {
.border {
color: $btn-default-color;
border: $btn-default-border-width solid $btn-default-border;
}
@include btn-component($btn-default-bevel-bd, $btn-default-glow, $btn-default-shadow);
}
.example-container .states-container.success-container {
.gradient {
@include success-gradient();
}
@include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
}
.example-container .states-container.info-container {
.gradient {
@include info-gradient();
}
@include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
}
.example-container .states-container.danger-container {
.gradient {
@include danger-gradient();
}
@include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
}
.example-container .states-container.secondary-container {
.border {
color: $btn-secondary-color;
border: $btn-secondary-border-width solid $btn-secondary-border;
}
@include btn-component($btn-secondary-bevel-bd, $btn-secondary-glow, $btn-secondary-shadow);
}
}
@ -122,133 +118,101 @@
background-color: $background;
}
.button-container {
padding-right: 0;
.container-title {
margin-bottom: 14px;
.example-container .states-container.primary-container {
.original {
@include btn-bg($btn-primary-bg);
}
.container-btn {
margin-bottom: 24px;
.hover {
@include btn-bg($btn-primary-bg-hover-focus);
}
.states-container {
.state-container {
display: flex;
.active {
@include btn-bg($btn-primary-bg-active);
}
}
.original,
.hover,
.active {
width: $btn-component-size;
height: $btn-component-size;
border-radius: $btn-component-bd-radius;
margin-bottom: 16px;
}
.example-container .states-container.warning-container {
.original {
@include btn-bg($btn-warning-bg);
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 17px;
height: $btn-component-size;
.hover {
@include btn-bg($btn-warning-bg-hover-focus);
}
.header {
color: white;
}
.active {
@include btn-bg($btn-warning-bg-active);
}
}
.subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
}
}
.example-container .states-container.success-container {
.original {
@include btn-bg($btn-success-bg);
}
&.primary-container {
.original {
@include btn-bg($btn-primary-bg);
}
.hover {
@include btn-bg($btn-success-bg-hover-focus);
}
.hover {
@include btn-bg($btn-primary-bg-hover-focus);
}
.active {
@include btn-bg($btn-success-bg-active);
}
}
.active {
@include btn-bg($btn-primary-bg-active);
}
}
.example-container .states-container.info-container {
.original {
@include btn-bg($btn-info-bg);
}
&.warning-container {
.original {
@include btn-bg($btn-warning-bg);
}
.hover {
@include btn-bg($btn-info-bg-hover-focus);
}
.hover {
@include btn-bg($btn-warning-bg-hover-focus);
}
.active {
@include btn-bg($btn-info-bg-active);
}
}
.active {
@include btn-bg($btn-warning-bg-active);
}
}
.example-container .states-container.danger-container {
.original {
@include btn-bg($btn-danger-bg);
}
&.success-container {
.original {
@include btn-bg($btn-success-bg);
}
.hover {
@include btn-bg($btn-danger-bg-hover-focus);
}
.hover {
@include btn-bg($btn-success-bg-hover-focus);
}
.active {
@include btn-bg($btn-danger-bg-active);
}
}
.active {
@include btn-bg($btn-success-bg-active);
}
}
.example-container .states-container.secondary-container {
.original {
@include btn-bg($btn-secondary-border);
}
&.info-container {
.original {
@include btn-bg($btn-info-bg);
}
.hover {
@include btn-bg($btn-secondary-bg-hover-focus);
}
.hover {
@include btn-bg($btn-info-bg-hover-focus);
}
.active {
@include btn-bg($btn-info-bg-active);
}
}
&.danger-container {
.original {
@include btn-bg($btn-danger-bg);
}
.hover {
@include btn-bg($btn-danger-bg-hover-focus);
}
.active {
@include btn-bg($btn-danger-bg-active);
}
}
&.default-container {
.original {
@include btn-bg($btn-default-border);
}
.hover {
@include btn-bg($btn-default-bg-hover-focus);
}
.active {
@include btn-bg($btn-default-bg-active);
}
}
.active {
@include btn-bg($btn-secondary-bg-active);
}
}
}
.actions-groups {
display: flex !important;
.container-title {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
color: white;
font-family: Exo;
}
}
}

252
src/app/@theme/styles/default/_buttons.scss
View file

@ -1,254 +1,2 @@
@mixin ngx-buttons-theme($theme-name) {
.hero-buttons {
$btn-component-size: 50px;
$btn-component-bd-radius: 12px;
@mixin btn-component($bevel-bd, $glow, $shadow) {
.bevel-border {
box-shadow: 0 3px 0 0 $bevel-bd;
}
.shadow {
box-shadow: 0 4px 10px 0 $shadow;
}
.glow {
box-shadow: 0 2px 12px 0 $glow;
}
}
.button-container {
padding-right: 0;
.container-title {
margin-bottom: 14px;
}
.container-btn {
margin-bottom: 24px;
}
.states-container {
.state-container {
display: flex;
.gradient,
.border,
.bevel-border,
.shadow,
.glow {
width: $btn-component-size;
height: $btn-component-size;
border-radius: $btn-component-bd-radius;
margin-bottom: 16px;
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 17px;
height: $btn-component-size;
.header {
color: white;
}
.subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
}
}
&.primary-container {
.gradient {
@include primary-gradient();
}
@include btn-component($btn-primary-bevel-bd, $btn-primary-glow, $btn-primary-shadow);
}
&.warning-container {
.gradient {
@include warning-gradient();
}
@include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
}
&.success-container {
.gradient {
@include success-gradient();
}
@include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
}
&.info-container {
.gradient {
@include info-gradient();
}
@include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
}
&.danger-container {
.gradient {
@include danger-gradient();
}
@include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
}
&.default-container {
.border {
color: $btn-default-color;
border: $btn-default-border-width solid $btn-default-border;
}
@include btn-component($btn-default-bevel-bd, $btn-default-glow, $btn-default-shadow);
}
}
}
}
.default-buttons {
$btn-component-size: 50px;
$btn-component-bd-radius: 12px;
@mixin btn-bg($background) {
background-color: $background;
}
.button-container {
padding-right: 0;
.container-title {
margin-bottom: 14px;
}
.container-btn {
margin-bottom: 24px;
}
.states-container {
.state-container {
display: flex;
.original,
.hover,
.active {
width: $btn-component-size;
height: $btn-component-size;
border-radius: $btn-component-bd-radius;
margin-bottom: 16px;
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 17px;
height: $btn-component-size;
.header {
color: white;
}
.subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
}
}
&.primary-container {
.original {
@include btn-bg($btn-primary-bg);
}
.hover {
@include btn-bg($btn-primary-bg-hover-focus);
}
.active {
@include btn-bg($btn-primary-bg-active);
}
}
&.warning-container {
.original {
@include btn-bg($btn-warning-bg);
}
.hover {
@include btn-bg($btn-warning-bg-hover-focus);
}
.active {
@include btn-bg($btn-warning-bg-active);
}
}
&.success-container {
.original {
@include btn-bg($btn-success-bg);
}
.hover {
@include btn-bg($btn-success-bg-hover-focus);
}
.active {
@include btn-bg($btn-success-bg-active);
}
}
&.info-container {
.original {
@include btn-bg($btn-info-bg);
}
.hover {
@include btn-bg($btn-info-bg-hover-focus);
}
.active {
@include btn-bg($btn-info-bg-active);
}
}
&.danger-container {
.original {
@include btn-bg($btn-danger-bg);
}
.hover {
@include btn-bg($btn-danger-bg-hover-focus);
}
.active {
@include btn-bg($btn-danger-bg-active);
}
}
&.default-container {
.original {
@include btn-bg($btn-default-border);
}
.hover {
@include btn-bg($btn-default-bg-hover-focus);
}
.active {
@include btn-bg($btn-default-bg-active);
}
}
}
}
}
}

252
src/app/@theme/styles/light/_buttons.scss
View file

@ -1,254 +1,2 @@
@mixin ngx-buttons-theme($theme-name) {
.hero-buttons {
$btn-component-size: 50px;
$btn-component-bd-radius: 12px;
@mixin btn-component($bevel-bd, $glow, $shadow) {
.bevel-border {
box-shadow: 0 3px 0 0 $bevel-bd;
}
.shadow {
box-shadow: 0 4px 10px 0 $shadow;
}
.glow {
box-shadow: 0 2px 12px 0 $glow;
}
}
.button-container {
padding-right: 0;
.container-title {
margin-bottom: 14px;
}
.container-btn {
margin-bottom: 24px;
}
.states-container {
.state-container {
display: flex;
.gradient,
.border,
.bevel-border,
.shadow,
.glow {
width: $btn-component-size;
height: $btn-component-size;
border-radius: $btn-component-bd-radius;
margin-bottom: 16px;
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 17px;
height: $btn-component-size;
.header {
color: white;
}
.subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
}
}
&.primary-container {
.gradient {
@include primary-gradient();
}
@include btn-component($btn-primary-bevel-bd, $btn-primary-glow, $btn-primary-shadow);
}
&.warning-container {
.gradient {
@include warning-gradient();
}
@include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
}
&.success-container {
.gradient {
@include success-gradient();
}
@include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
}
&.info-container {
.gradient {
@include info-gradient();
}
@include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
}
&.danger-container {
.gradient {
@include danger-gradient();
}
@include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
}
&.default-container {
.border {
color: $btn-default-color;
border: $btn-default-border-width solid $btn-default-border;
}
@include btn-component($btn-default-bevel-bd, $btn-default-glow, $btn-default-shadow);
}
}
}
}
.default-buttons {
$btn-component-size: 50px;
$btn-component-bd-radius: 12px;
@mixin btn-bg($background) {
background-color: $background;
}
.button-container {
padding-right: 0;
.container-title {
margin-bottom: 14px;
}
.container-btn {
margin-bottom: 24px;
}
.states-container {
.state-container {
display: flex;
.original,
.hover,
.active {
width: $btn-component-size;
height: $btn-component-size;
border-radius: $btn-component-bd-radius;
margin-bottom: 16px;
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 17px;
height: $btn-component-size;
.header {
color: white;
}
.subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
}
}
&.primary-container {
.original {
@include btn-bg($btn-primary-bg);
}
.hover {
@include btn-bg($btn-primary-bg-hover-focus);
}
.active {
@include btn-bg($btn-primary-bg-active);
}
}
&.warning-container {
.original {
@include btn-bg($btn-warning-bg);
}
.hover {
@include btn-bg($btn-warning-bg-hover-focus);
}
.active {
@include btn-bg($btn-warning-bg-active);
}
}
&.success-container {
.original {
@include btn-bg($btn-success-bg);
}
.hover {
@include btn-bg($btn-success-bg-hover-focus);
}
.active {
@include btn-bg($btn-success-bg-active);
}
}
&.info-container {
.original {
@include btn-bg($btn-info-bg);
}
.hover {
@include btn-bg($btn-info-bg-hover-focus);
}
.active {
@include btn-bg($btn-info-bg-active);
}
}
&.danger-container {
.original {
@include btn-bg($btn-danger-bg);
}
.hover {
@include btn-bg($btn-danger-bg-hover-focus);
}
.active {
@include btn-bg($btn-danger-bg-active);
}
}
&.default-container {
.original {
@include btn-bg($btn-default-border);
}
.hover {
@include btn-bg($btn-default-bg-hover-focus);
}
.active {
@include btn-bg($btn-default-bg-active);
}
}
}
}
}
}

21
src/app/pages/ui-features/buttons/actions-groups/actions-groups.component.html Normal file
View file

@ -0,0 +1,21 @@
<nga-card>
<nga-card-body>
<div class="actions-groups">
<div class="container-title">
<span>Action Groups</span>
</div>
<nga-actions size="medium" inverse>
<nga-action icon="ion-navicon"></nga-action>
<nga-action>
<nga-search type="rotate-layout"></nga-search>
</nga-action>
<nga-action icon="ion-ios-email-outline"></nga-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
<nga-action>
<nga-user inverse [menu]="userMenu" name="Han Solo"></nga-user>
</nga-action>
<nga-action icon="ion-ios-gear-outline"></nga-action>
</nga-actions>
</div>
</nga-card-body>
</nga-card>

18
src/app/pages/ui-features/buttons/actions-groups/actions-groups.component.ts Normal file
View file

@ -0,0 +1,18 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-actions-groups',
templateUrl: './actions-groups.component.html',
})
export class ActionsGroupsComponent {
userMenu = [
{
title: 'Profile',
},
{
title: 'Log out',
},
];
}

67
src/app/pages/ui-features/buttons/buttons.component.html
View file

@ -1,34 +1,55 @@
<div class="row">
<div class="col-md-12">
<nga-card>
<nga-card-header>Hero Buttons</nga-card-header>
<nga-card-body>
<ngx-hero-buttons></ngx-hero-buttons>
</nga-card-body>
</nga-card>
<ngx-hero-buttons></ngx-hero-buttons>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>Button Shapes</nga-card-header>
<nga-card-body>
<ngx-shape-buttons></ngx-shape-buttons>
</nga-card-body>
</nga-card>
<ngx-shape-buttons></ngx-shape-buttons>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>Button Sizes</nga-card-header>
<nga-card-body>
<ngx-size-buttons></ngx-size-buttons>
</nga-card-body>
</nga-card>
<ngx-size-buttons></ngx-size-buttons>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>Default Buttons</nga-card-header>
<nga-card-body>
<div class="row">
<div class="col-md-12">
<ngx-actions-groups></ngx-actions-groups>
</div>
<div class="col-md-12">
<nga-card>
<nga-card-body>Disconect</nga-card-body>
</nga-card>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<ngx-dropdown-buttons></ngx-dropdown-buttons>
</div>
<div class="col-md-12">
<nga-card>
<nga-card-header>Icon buttons</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
</div>
</div>
</div>
<div class="col-md-8">
<nga-card>
<nga-card-header>Button Groups</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<ngx-default-buttons></ngx-default-buttons>
</nga-card-body>
</nga-card>
</div>
<div class="col-md-12">
<nga-card>
<nga-card-header>Block Level Buttons</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
</div>
</div>
</div>
</div>

8
src/app/pages/ui-features/buttons/buttons.module.ts
View file

@ -1,4 +1,5 @@
import { NgModule } from '@angular/core';
import { NgaActionsModule, NgaSearchModule, NgaUserModule } from '@nga/theme';
import { SharedModule } from '../../../shared.module';
@ -7,6 +8,8 @@ import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
import { ButtonsComponent } from './buttons.component';
import { ActionsGroupsComponent } from './actions-groups/actions-groups.component';
import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
const components = [
ButtonsComponent,
@ -14,11 +17,16 @@ const components = [
HeroButtonComponent,
ShapeButtonsComponent,
SizeButtonsComponent,
ActionsGroupsComponent,
DropdownButtonsComponent,
];
@NgModule({
imports: [
SharedModule,
NgaActionsModule,
NgaSearchModule,
NgaUserModule,
],
exports: [
...components,

216
src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
View file

@ -1,188 +1,38 @@
<div class="row default-buttons">
<div class="button-container col-md-4">
<div class="container-title">
<span>Primary Button</span>
</div>
<div class="container-btn">
<button class="btn btn-primary btn-demo">Primary</button>
</div>
<div class="states-container primary-container">
<div class="state-container">
<div class="original"></div>
<div class="state-details">
<span class="header">Default</span>
<span class="subheader">#7659ff</span>
<nga-card>
<nga-card-header>Default Buttons</nga-card-header>
<nga-card-body>
<div class="row default-buttons">
<div class="example-container col-md-4" *ngFor="let b of buttons">
<div class="container-title">
<span>{{ b.containerTitle }}</span>
</div>
</div>
<div class="state-container">
<div class="hover"></div>
<div class="state-details">
<span class="header">Hover</span>
<span class="subheader">20% white</span>
<div class="container-btn">
<button class="btn {{ b.class }} btn-demo">{{ b.title }}</button>
</div>
</div>
<div class="state-container">
<div class="active"></div>
<div class="state-details">
<span class="header">Active</span>
<span class="subheader">20% black</span>
<div class="states-container {{ 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">20% 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">20% black</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="button-container col-md-4">
<div class="container-title">
<span>Warning Button</span>
</div>
<div class="container-btn">
<button class="btn btn-warning btn-demo">Warning</button>
</div>
<div class="states-container warning-container">
<div class="state-container">
<div class="original"></div>
<div class="state-details">
<span class="header">Default</span>
<span class="subheader">#7659ff</span>
</div>
</div>
<div class="state-container">
<div class="hover"></div>
<div class="state-details">
<span class="header">Hover</span>
<span class="subheader">20% white</span>
</div>
</div>
<div class="state-container">
<div class="active"></div>
<div class="state-details">
<span class="header">Active</span>
<span class="subheader">20% black</span>
</div>
</div>
</div>
</div>
<div class="button-container col-md-4">
<div class="container-title">
<span>Success Button</span>
</div>
<div class="container-btn">
<button class="btn btn-success btn-demo">Success</button>
</div>
<div class="states-container success-container">
<div class="state-container">
<div class="original"></div>
<div class="state-details">
<span class="header">Default</span>
<span class="subheader">#7659ff</span>
</div>
</div>
<div class="state-container">
<div class="hover"></div>
<div class="state-details">
<span class="header">Hover</span>
<span class="subheader">20% white</span>
</div>
</div>
<div class="state-container">
<div class="active"></div>
<div class="state-details">
<span class="header">Active</span>
<span class="subheader">20% black</span>
</div>
</div>
</div>
</div>
<div class="button-container col-md-4">
<div class="container-title">
<span>Info Button</span>
</div>
<div class="container-btn">
<button class="btn btn-info btn-demo">Info</button>
</div>
<div class="states-container info-container">
<div class="state-container">
<div class="original"></div>
<div class="state-details">
<span class="header">Default</span>
<span class="subheader">#7659ff</span>
</div>
</div>
<div class="state-container">
<div class="hover"></div>
<div class="state-details">
<span class="header">Hover</span>
<span class="subheader">20% white</span>
</div>
</div>
<div class="state-container">
<div class="active"></div>
<div class="state-details">
<span class="header">Active</span>
<span class="subheader">20% black</span>
</div>
</div>
</div>
</div>
<div class="button-container col-md-4">
<div class="container-title">
<span>Danger Button</span>
</div>
<div class="container-btn">
<button class="btn btn-danger btn-demo">Danger</button>
</div>
<div class="states-container danger-container">
<div class="state-container">
<div class="original"></div>
<div class="state-details">
<span class="header">Default</span>
<span class="subheader">#7659ff</span>
</div>
</div>
<div class="state-container">
<div class="hover"></div>
<div class="state-details">
<span class="header">Hover</span>
<span class="subheader">20% white</span>
</div>
</div>
<div class="state-container">
<div class="active"></div>
<div class="state-details">
<span class="header">Active</span>
<span class="subheader">20% black</span>
</div>
</div>
</div>
</div>
<div class="button-container col-md-4">
<div class="container-title">
<span>Default Button</span>
</div>
<div class="container-btn">
<button class="btn btn-demo">Default</button>
</div>
<div class="states-container default-container">
<div class="state-container">
<div class="original"></div>
<div class="state-details">
<span class="header">Default</span>
<span class="subheader">#7659ff</span>
</div>
</div>
<div class="state-container">
<div class="hover"></div>
<div class="state-details">
<span class="header">Hover</span>
<span class="subheader">20% white</span>
</div>
</div>
<div class="state-container">
<div class="active"></div>
<div class="state-details">
<span class="header">Active</span>
<span class="subheader">20% black</span>
</div>
</div>
</div>
</div>
</div>
</nga-card-body>
</nga-card>

38
src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
View file

@ -5,4 +5,42 @@ import { Component } from '@angular/core';
templateUrl: './default-buttons.component.html',
})
export class DefaultButtonsComponent {
buttons = [{
class: 'btn-primary',
container: 'primary-container',
containerTitle: 'Prymary Button',
title: 'Primary',
default: '#7659ff',
}, {
class: 'btn-warning',
container: 'warning-container',
containerTitle: 'Warning Button',
title: 'Warning',
default: '#ffcb17',
}, {
class: 'btn-success',
container: 'success-container',
containerTitle: 'Success Button',
title: 'Success',
default: '#00d977',
}, {
class: 'btn-info',
container: 'info-container',
containerTitle: 'Info Button',
title: 'Info',
default: '#0088ff',
}, {
class: 'btn-danger',
container: 'danger-container',
containerTitle: 'Danger Button',
title: 'Danger',
default: '#ff386a',
}, {
class: 'btn-secondary',
container: 'secondary-container',
containerTitle: 'Default Button',
title: 'Default',
default: '#bdbaff',
}];
}

61
src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html Normal file
View file

@ -0,0 +1,61 @@
<nga-card>
<nga-card-header>Button Dropdowns</nga-card-header>
<nga-card-body>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</nga-card-body>
</nga-card>

3
src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss Normal file
View file

@ -0,0 +1,3 @@
.dropdown, .btn-group {
margin-bottom: 1rem;
}

10
src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.ts Normal file
View file

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-dropdown-buttons',
styleUrls: ['./dropdown-button.component.scss'],
templateUrl: './dropdown-button.component.html',
})
export class DropdownButtonsComponent {
}

293
src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
View file

@ -1,248 +1,55 @@
<div class="row hero-buttons">
<div class="button-container col-md-2">
<div class="container-title">
<span>Primary Button</span>
</div>
<div class="container-btn">
<button class="btn btn-primary btn-hero btn-demo">Primary</button>
</div>
<div class="states-container primary-container">
<div class="state-container">
<div class="gradient"></div>
<div class="state-details">
<span class="header">Linear Gradient</span>
<span class="subheader">to right, #7659ff, #ac63ff</span>
<nga-card>
<nga-card-header>Hero Buttons</nga-card-header>
<nga-card-body>
<div class="row hero-buttons">
<div class="example-container col-md-2" *ngFor="let hb of heroButtons">
<div class="container-title">
<span>{{ hb.title }}</span>
</div>
</div>
<div class="state-container">
<div class="bevel-border"></div>
<div class="state-details">
<span class="header">Bevel Border</span>
<span class="subheader">0 3px 0 0</span>
<span class="subheader">#6938c9</span>
<div class="container-btn">
<button class="btn {{ hb.class }} btn-hero btn-demo">{{ hb.buttonTitle }}</button>
</div>
</div>
<div class="state-container">
<div class="shadow"></div>
<div class="state-details">
<span class="header">Shadow</span>
<span class="subheader">0 4px 10px 0</span>
<span class="subheader">rgba (6, 7, 64, 0.5)</span>
</div>
</div>
<div class="state-container">
<div class="glow"></div>
<div class="state-details">
<span class="header">Glow</span>
<span class="subheader">0 2px 12px 0</span>
<span class="subheader">rgba (137, 66, 254, 0.8)</span>
<div class="states-container {{ hb.container }}">
<div class="state-container" *ngIf="hb.border">
<div class="state-value border"></div>
<div class="state-details">
<span class="header">Border</span>
<span class="subheader">{{ hb.border }}</span>
</div>
</div>
<div class="state-container" *ngIf="hb.gradient">
<div class="state-value gradient"></div>
<div class="state-details">
<span class="header">Linear Gradient</span>
<span class="subheader">{{ hb.gradient }}</span>
</div>
</div>
<div class="state-container">
<div class="state-value bevel-border"></div>
<div class="state-details">
<span class="header">Bevel Border</span>
<span class="subheader">0 3px 0 0</span>
<span class="subheader">{{ hb.bevelBorder }}</span>
</div>
</div>
<div class="state-container">
<div class="state-value shadow"></div>
<div class="state-details">
<span class="header">Shadow</span>
<span class="subheader">0 4px 10px 0</span>
<span class="subheader">{{ hb.shadow }}</span>
</div>
</div>
<div class="state-container">
<div class="state-value glow"></div>
<div class="state-details">
<span class="header">Glow</span>
<span class="subheader">0 2px 12px 0</span>
<span class="subheader">{{ hb.glow }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="button-container col-md-2">
<div class="container-title">
<span>Warning Button</span>
</div>
<div class="container-btn">
<button class="btn btn-warning btn-hero btn-demo">Warning</button>
</div>
<div class="states-container warning-container">
<div class="state-container">
<div class="gradient"></div>
<div class="state-details">
<span class="header">Linear Gradient</span>
<span class="subheader">to right, #ffcb17, #ff874c</span>
</div>
</div>
<div class="state-container">
<div class="bevel-border"></div>
<div class="state-details">
<span class="header">Bevel Border</span>
<span class="subheader">0 3px 0 0</span>
<span class="subheader">#ce7b22</span>
</div>
</div>
<div class="state-container">
<div class="shadow"></div>
<div class="state-details">
<span class="header">Shadow</span>
<span class="subheader">0 4px 10px 0</span>
<span class="subheader">rgba (33, 7, 77, 0.5)</span>
</div>
</div>
<div class="state-container">
<div class="glow"></div>
<div class="state-details">
<span class="header">Glow</span>
<span class="subheader">0 2px 12px 0</span>
<span class="subheader">rgba (255, 193, 38, 0.6)</span>
</div>
</div>
</div>
</div>
<div class="button-container col-md-2">
<div class="container-title">
<span>Success Button</span>
</div>
<div class="container-btn">
<button class="btn btn-success btn-hero btn-demo">Success</button>
</div>
<div class="states-container success-container">
<div class="state-container">
<div class="gradient"></div>
<div class="state-details">
<span class="header">Linear Gradient</span>
<span class="subheader">to right, #00c7c7, #00d977</span>
</div>
</div>
<div class="state-container">
<div class="bevel-border"></div>
<div class="state-details">
<span class="header">Bevel Border</span>
<span class="subheader">0 3px 0 0</span>
<span class="subheader">#00967d</span>
</div>
</div>
<div class="state-container">
<div class="shadow"></div>
<div class="state-details">
<span class="header">Shadow</span>
<span class="subheader">0 4px 10px 0</span>
<span class="subheader">rgba (33, 7, 77, 0.5)</span>
</div>
</div>
<div class="state-container">
<div class="glow"></div>
<div class="state-details">
<span class="header">Glow</span>
<span class="subheader">0 2px 12px 0</span>
<span class="subheader">rgba (35, 255, 181, 0.6)</span>
</div>
</div>
</div>
</div>
<div class="button-container col-md-2">
<div class="container-title">
<span>Info Button</span>
</div>
<div class="container-btn">
<button class="btn btn-info btn-hero btn-demo">Info</button>
</div>
<div class="states-container info-container">
<div class="state-container">
<div class="gradient"></div>
<div class="state-details">
<span class="header">Linear Gradient</span>
<span class="subheader">to right, #3dafff, #0088ff</span>
</div>
</div>
<div class="state-container">
<div class="bevel-border"></div>
<div class="state-details">
<span class="header">Bevel Border</span>
<span class="subheader">0 3px 0 0</span>
<span class="subheader">#4150d9</span>
</div>
</div>
<div class="state-container">
<div class="shadow"></div>
<div class="state-details">
<span class="header">Shadow</span>
<span class="subheader">0 4px 10px 0</span>
<span class="subheader">rgba (33, 7, 77, 0.5)</span>
</div>
</div>
<div class="state-container">
<div class="glow"></div>
<div class="state-details">
<span class="header">Glow</span>
<span class="subheader">0 2px 12px 0</span>
<span class="subheader">rgba (0, 136, 255, 0.7)</span>
</div>
</div>
</div>
</div>
<div class="button-container col-md-2">
<div class="container-title">
<span>Danger Button</span>
</div>
<div class="container-btn">
<button class="btn btn-danger btn-hero btn-demo">Danger</button>
</div>
<div class="states-container danger-container">
<div class="state-container">
<div class="gradient"></div>
<div class="state-details">
<span class="header">Linear Gradient</span>
<span class="subheader">to right, #ff3dae, #ff386a</span>
</div>
</div>
<div class="state-container">
<div class="bevel-border"></div>
<div class="state-details">
<span class="header">Bevel Border</span>
<span class="subheader">0 3px 0 0</span>
<span class="subheader">#cc2568</span>
</div>
</div>
<div class="state-container">
<div class="shadow"></div>
<div class="state-details">
<span class="header">Shadow</span>
<span class="subheader">0 4px 10px 0</span>
<span class="subheader">rgba (33, 7, 77, 0.5)</span>
</div>
</div>
<div class="state-container">
<div class="glow"></div>
<div class="state-details">
<span class="header">Glow</span>
<span class="subheader">0 2px 12px 0</span>
<span class="subheader">rgba (255, 73, 184, 0.8)</span>
</div>
</div>
</div>
</div>
<div class="button-container col-md-2">
<div class="container-title">
<span>Ghost Button</span>
</div>
<div class="container-btn">
<button class="btn btn-hero btn-demo">Ghost</button>
</div>
<div class="states-container default-container">
<div class="state-container">
<div class="border"></div>
<div class="state-details">
<span class="header">Border</span>
<span class="subheader">White</span>
</div>
</div>
<div class="state-container">
<div class="bevel-border"></div>
<div class="state-details">
<span class="header">Bevel Border</span>
<span class="subheader">0 2px 0 0</span>
<span class="subheader">#665ebd</span>
</div>
</div>
<div class="state-container">
<div class="shadow"></div>
<div class="state-details">
<span class="header">Shadow</span>
<span class="subheader">0 4px 10px 0</span>
<span class="subheader">rgba (33, 7, 77, 0.5)</span>
</div>
</div>
<div class="state-container">
<div class="glow"></div>
<div class="state-details">
<span class="header">Glow</span>
<span class="subheader">0 2px 12px 0</span>
<span class="subheader">rgba (146, 141, 255, 1)</span>
</div>
</div>
</div>
</div>
</div>
</nga-card-body>
</nga-card>

56
src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts
View file

@ -5,4 +5,60 @@ import { Component } from '@angular/core';
templateUrl: './hero-buttons.component.html',
})
export class HeroButtonComponent {
heroButtons = [{
class: 'btn-primary',
container: 'primary-container',
title: 'Primary Button',
buttonTitle: 'Primary',
gradient: 'to right, #7659ff, #ac63ff',
bevelBorder: '#6938c9',
shadow: 'rgba (6, 7, 64, 0.5)',
glow: 'rgba (137, 66, 254, 0.8)',
}, {
class: 'btn-warning',
container: 'warning-container',
title: 'Warning Button',
buttonTitle: 'Warning',
gradient: 'to right, #ffcb17, #ff874c',
bevelBorder: '#ce7b22',
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (255, 193, 38, 0.6)',
}, {
class: 'btn-success',
container: 'success-container',
title: 'Success Button',
buttonTitle: 'Success',
gradient: 'to right, #00c7c7, #00d977',
bevelBorder: '#00967d',
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (35, 255, 181, 0.6)',
}, {
class: 'btn-info',
container: 'info-container',
title: 'Info Button',
buttonTitle: 'Info',
gradient: 'to right, #3dafff, #0088ff',
bevelBorder: '#4150d9',
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (0, 136, 255, 0.7)',
}, {
class: 'btn-danger',
container: 'danger-container',
title: 'Danger Button',
buttonTitle: 'Danger',
gradient: 'to right, #ff3dae, #ff386a',
bevelBorder: '#cc2568',
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (255, 73, 184, 0.8)',
}, {
class: 'btn-secondary',
container: 'secondary-container',
title: 'Ghost Button',
buttonTitle: 'Ghost',
border: 'White',
bevelBorder: '#665ebd',
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (146, 141, 255, 1)',
}];
}

79
src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.html
View file

@ -1,38 +1,43 @@
<div class="row">
<div class="shape-container col-md-4">
<div class="header">
<span>Rectangle Button</span>
<nga-card>
<nga-card-header>Button Shapes</nga-card-header>
<nga-card-body>
<div class="row">
<div class="shape-container col-md-4">
<div class="header">
<span>Rectangle Button</span>
</div>
<div class="subheader">
<span>Border radius:</span>
<span>4px</span>
</div>
<div>
<button class="btn btn-primary btn-rectangle btn-demo">Rectangle</button>
</div>
</div>
<div class="shape-container col-md-4">
<div class="header">
<span>Semi-round Button</span>
</div>
<div class="subheader">
<span>Border radius:</span>
<span>12px</span>
</div>
<div>
<button class="btn btn-primary btn-semi-round btn-demo">Semi-round</button>
</div>
</div>
<div class="shape-container col-md-4">
<div class="header">
<span>Rounded Button</span>
</div>
<div class="subheader">
<span>Border radius:</span>
<span>round</span>
</div>
<div>
<button class="btn btn-primary btn-round btn-demo">Round</button>
</div>
</div>
</div>
<div class="subheader">
<span>Border radius:</span>
<span>4px</span>
</div>
<div>
<button class="btn btn-primary btn-rectangle btn-demo">Rectangle</button>
</div>
</div>
<div class="shape-container col-md-4">
<div class="header">
<span>Semi-round Button</span>
</div>
<div class="subheader">
<span>Border radius:</span>
<span>12px</span>
</div>
<div>
<button class="btn btn-primary btn-semi-round btn-demo">Semi-round</button>
</div>
</div>
<div class="shape-container col-md-4">
<div class="header">
<span>Rounded Button</span>
</div>
<div class="subheader">
<span>Border radius:</span>
<span>round</span>
</div>
<div>
<button class="btn btn-primary btn-round btn-demo">Round</button>
</div>
</div>
</div>
</nga-card-body>
</nga-card>

95
src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html
View file

@ -1,46 +1,51 @@
<div class="row">
<div class="size-container">
<div class="header">
<span>Rectangle Button</span>
<nga-card>
<nga-card-header>Button Sizes</nga-card-header>
<nga-card-body>
<div class="row">
<div class="size-container">
<div class="header">
<span>Rectangle Button</span>
</div>
<div class="subheader">
<span>1.25rem 1.75rem</span>
</div>
<div>
<button class="btn btn-primary btn-lg">Large Button</button>
</div>
</div>
<div class="size-container">
<div class="header">
<span>Medium Button</span>
</div>
<div class="subheader">
<span>1rem 1.5rem</span>
</div>
<div>
<button class="btn btn-primary btn-md">Medium Button</button>
</div>
</div>
<div class="size-container">
<div class="header">
<span>Small Button</span>
</div>
<div class="subheader">
<span>0.875rem 1.5rem</span>
</div>
<div>
<button class="btn btn-primary btn-sm">Small Button</button>
</div>
</div>
<div class="size-container">
<div class="header">
<span>Tiny Button</span>
</div>
<div class="subheader">
<span>0.625rem 1.25rem</span>
</div>
<div>
<button class="btn btn-primary btn-tn">Tiny</button>
</div>
</div>
</div>
<div class="subheader">
<span>1.25rem 1.75rem</span>
</div>
<div>
<button class="btn btn-primary btn-lg">Large Button</button>
</div>
</div>
<div class="size-container">
<div class="header">
<span>Medium Button</span>
</div>
<div class="subheader">
<span>1rem 1.5rem</span>
</div>
<div>
<button class="btn btn-primary btn-md">Medium Button</button>
</div>
</div>
<div class="size-container">
<div class="header">
<span>Small Button</span>
</div>
<div class="subheader">
<span>0.875rem 1.5rem</span>
</div>
<div>
<button class="btn btn-primary btn-sm">Small Button</button>
</div>
</div>
<div class="size-container">
<div class="header">
<span>Tiny Button</span>
</div>
<div class="subheader">
<span>0.625rem 1.25rem</span>
</div>
<div>
<button class="btn btn-primary btn-tn">Tiny</button>
</div>
</div>
</div>
</nga-card-body>
</nga-card>