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

fix(buttons): improve buttons styles for default theme

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-23 20:08:41 +03:00
parent fd37cd7a76
commit 7e86c985cb
13 changed files with 344 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,6 @@ import { UserService } from '../../../@core/data/users.service';
<div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
<div class="theme-buttons">
<button class="btn btn-hero-primary" (click)="selectCosmicTheme()">Cosmic</button>
<button class="btn btn-hero-warning" (click)="selectLightTheme()">Light</button>
<button class="btn btn-hero-info" (click)="selectDefaultTheme()">Default</button>
</div>
</div>
@ -80,10 +79,6 @@ export class HeaderComponent implements OnInit {
this.themeService.changeTheme('cosmic');
}
selectLightTheme() {
this.themeService.changeTheme('light');
}
selectDefaultTheme() {
this.themeService.changeTheme('default');
}

8
src/app/pages/ui-features/buttons/action-groups/action-groups.component.html
View file

@ -1,6 +1,7 @@
<div class="action-groups">
<nb-card>
<nb-card-body>
<div class="action-groups-header">
<span>Action Groups</span>
Action Groups
</div>
<nb-actions size="medium">
<nb-action icon="ion-navicon"></nb-action>
@ -14,4 +15,5 @@
</nb-action>
<nb-action icon="ion-ios-gear-outline"></nb-action>
</nb-actions>
</div>
</nb-card-body>
</nb-card>

9
src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss
View file

@ -2,13 +2,18 @@
@import '~@nebular/theme/components/card/card.component.theme';
@include nb-install-component() {
.action-groups {
nb-card-body {
display: flex;
align-items: center;
}
.action-groups-header {
flex: 1;
@include nb-card-header();
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);
}
}

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

@ -4,9 +4,7 @@
</div>
<div class="col-lg-6">
<ngx-shape-buttons></ngx-shape-buttons>
<nb-card>
<ngx-action-groups></ngx-action-groups>
</nb-card>
<nb-card>
<nb-card-body>
<ngx-labeled-actions-group></ngx-labeled-actions-group>

4
src/app/pages/ui-features/buttons/buttons.component.scss
View file

@ -15,13 +15,11 @@
.header {
color: nb-theme(color-fg-header);
font-size: 0.875rem;
line-height: 1rem;
}
.subheader {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 300;
font-weight: nb-theme(font-weight-light);
color: nb-theme(color-fg);
}

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

@ -3,49 +3,16 @@
<span>Default Buttons</span>
<div ngbDropdown>
<button class="btn btn-primary" type="button" ngbDropdownToggle>
{{ selectedButtonsView.title }}
{{ selectedView.title }}
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" *ngFor="let v of buttonsViews" (click)="selectView($event, v)">{{ v.title }}</a>
</div>
<ul class="dropdown-menu">
<li class="dropdown-item" *ngFor="let v of buttonsViews" (click)="this.selectedView = v">{{ v.title }}</li>
</ul>
</div>
</nb-card-header>
<nb-card-body>
<div class="row" *ngIf="selectedButtonsView.key === 'default'">
<div class="example-container col-md-4" *ngFor="let b of defaultButtons">
<div class="container-title">
<span>{{ b.containerTitle }}</span>
</div>
<div class="container-btn">
<button class="btn {{ b.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>
<div class="row" *ngIf="selectedButtonsView.key === 'outline'">
<div class="example-container col-md-4" *ngFor="let b of outlineButtons">
<div class="row">
<div class="example-container col-md-4" *ngFor="let b of buttons[selectedView.key]">
<div class="container-title">
<span>{{ b.containerTitle }}</span>
</div>

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

@ -15,9 +15,11 @@ export class DefaultButtonsComponent {
key: 'outline',
}];
selectedButtonsView = this.buttonsViews[0];
selectedView = this.buttonsViews[0];
defaultButtons = [{
buttons = {
'default': [
{
class: 'btn-primary',
container: 'primary-container',
containerTitle: 'Primary Button',
@ -53,9 +55,11 @@ export class DefaultButtonsComponent {
containerTitle: 'Default Button',
title: 'Default',
default: '#bdbaff',
}];
},
],
outlineButtons = [{
'outline': [
{
class: 'btn-outline-primary',
container: 'primary-container outline',
containerTitle: 'Primary Button',
@ -91,10 +95,7 @@ export class DefaultButtonsComponent {
containerTitle: 'Default Button',
title: 'Default',
default: '#bdbaff',
}];
selectView($event: any, view: any) {
$event.preventDefault();
this.selectedButtonsView = view;
}
},
],
};
}

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

@ -2,7 +2,7 @@
<nb-card-header>Hero Buttons</nb-card-header>
<nb-card-body>
<div class="row">
<div class="example-container col-md-2" *ngFor="let hb of heroButtons">
<div class="example-container col-md-2" *ngFor="let hb of settings">
<div class="container-title">
<span>{{ hb.title }}</span>
</div>
@ -10,42 +10,52 @@
<button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
</div>
<div class="{{ hb.container }}">
<div class="state-container" *ngIf="hb.border">
<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.border }}</span>
<span class="subheader">{{ hb[themeName].border }}</span>
</div>
</div>
<div class="state-container" *ngIf="hb.gradient">
<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.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"></div>
<div class="state-details">
<span class="header">Bevel Border</span>
<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.bevelBorder }}</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"></div>
<div class="state-details">
<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.shadow }}</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"></div>
<div class="state-details">
<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">0 2px 12px 0</span>
<span class="subheader">{{ hb.glow }}</span>
<span class="subheader">{{ hb[themeName].glow }}</span>
</div>
<div class="state-details" *ngIf="!hb[themeName].glow">
<span class="header">No Glow</span>
</div>
</div>
</div>

49
src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss
View file

@ -3,6 +3,37 @@
@include nb-install-component() {
.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 {
.gradient {
@include btn-hero-primary-gradient();
@ -13,9 +44,6 @@
.bevel {
box-shadow: btn-hero-primary-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.warning-container {
@ -28,9 +56,6 @@
.bevel {
box-shadow: btn-hero-warning-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.success-container {
@ -43,9 +68,6 @@
.bevel {
box-shadow: btn-hero-success-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.info-container {
@ -58,9 +80,6 @@
.bevel {
box-shadow: btn-hero-info-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.danger-container {
@ -73,9 +92,6 @@
.bevel {
box-shadow: btn-hero-danger-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.secondary-container {
@ -89,8 +105,5 @@
.bevel {
box-shadow: btn-hero-secondary-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
}

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-hero-buttons',
@ -7,59 +8,111 @@ import { Component } from '@angular/core';
})
export class HeroButtonComponent {
heroButtons = [{
themeName: string = 'default';
settings: Array<any>;
constructor(private themeService: NbThemeService) {
this.themeService.getJsTheme().subscribe(theme => {
this.themeName = theme.name;
this.init(theme.variables);
});
}
init(theme: any) {
this.settings = [{
class: 'btn-hero-primary',
container: 'primary-container',
title: 'Primary Button',
buttonTitle: 'Primary',
gradient: 'to right, #7659ff, #ac63ff',
bevelBorder: '#6938c9',
default: {
gradientLeft: `adjust-hue(${theme.colorPrimary}, 20deg)`,
gradientRight: theme.colorPrimary,
},
cosmic: {
gradientLeft: `adjust-hue(${theme.colorPrimary}, 20deg)`,
gradientRight: theme.colorPrimary,
bevel: `shade(${theme.colorPrimary}, 14%)`,
shadow: 'rgba (6, 7, 64, 0.5)',
glow: 'rgba (137, 66, 254, 0.8)',
glow: `adjust-hue(${theme.colorPrimary}, 10deg)`,
},
}, {
class: 'btn-hero-warning',
container: 'warning-container',
title: 'Warning Button',
buttonTitle: 'Warning',
gradient: 'to right, #ffcb17, #ff874c',
bevelBorder: '#ce7b22',
default: {
gradientLeft: `adjust-hue(${theme.colorWarning}, 10deg)`,
gradientRight: theme.colorWarning,
},
cosmic: {
gradientLeft: `adjust-hue(${theme.colorWarning}, 10deg)`,
gradientRight: theme.colorWarning,
bevel: `shade(${theme.colorWarning}, 14%)`,
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (255, 193, 38, 0.6)',
glow: `adjust-hue(${theme.colorWarning}, 5deg)`,
},
}, {
class: 'btn-hero-success',
container: 'success-container',
title: 'Success Button',
buttonTitle: 'Success',
gradient: 'to right, #00c7c7, #00d977',
bevelBorder: '#00967d',
default: {
gradientLeft: `adjust-hue(${theme.colorSuccess}, 20deg)`,
gradientRight: theme.colorSuccess,
},
cosmic: {
gradientLeft: `adjust-hue(${theme.colorSuccess}, 20deg)`,
gradientRight: theme.colorSuccess,
bevel: `shade(${theme.colorSuccess}, 14%)`,
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (35, 255, 181, 0.6)',
glow: `adjust-hue(${theme.colorSuccess}, 10deg)`,
},
}, {
class: 'btn-hero-info',
container: 'info-container',
title: 'Info Button',
buttonTitle: 'Info',
gradient: 'to right, #3dafff, #0088ff',
bevelBorder: '#4150d9',
default: {
gradientLeft: `adjust-hue(${theme.colorInfo}, -10deg)`,
gradientRight: theme.colorInfo,
},
cosmic: {
gradientLeft: `adjust-hue(${theme.colorInfo}, -10deg)`,
gradientRight: theme.colorInfo,
bevel: `shade(${theme.colorInfo}, 14%)`,
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (0, 136, 255, 0.7)',
glow: `adjust-hue(${theme.colorInfo}, -5deg)`,
},
}, {
class: 'btn-hero-danger',
container: 'danger-container',
title: 'Danger Button',
buttonTitle: 'Danger',
gradient: 'to right, #ff3dae, #ff386a',
bevelBorder: '#cc2568',
default: {
gradientLeft: `adjust-hue(${theme.colorDanger}, -20deg)`,
gradientRight: theme.colorDanger,
},
cosmic: {
gradientLeft: `adjust-hue(${theme.colorDanger}, -20deg)`,
gradientRight: theme.colorDanger,
bevel: `shade(${theme.colorDanger}, 14%)`,
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (255, 73, 184, 0.8)',
glow: `adjust-hue(${theme.colorDanger}, -10deg)`,
},
}, {
class: 'btn-hero-secondary',
container: 'secondary-container',
title: 'Ghost Button',
buttonTitle: 'Ghost',
border: 'White',
bevelBorder: '#665ebd',
default: {
border: '#dadfe6',
},
cosmic: {
border: theme.colorPrimary,
bevel: '#665ebd',
shadow: 'rgba (33, 7, 77, 0.5)',
glow: 'rgba (146, 141, 255, 1)',
},
}];
}
}

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

@ -1,8 +1,7 @@
<nb-card>
<nb-card-header>Button Shapes</nb-card-header>
<nb-card-body>
<div class="row">
<div class="shape-container col-md-4">
<div class="shape-container">
<div class="container-title">
<span>Rectangle Button</span>
</div>
@ -11,10 +10,11 @@
<span>4px</span>
</div>
<div>
<button class="btn btn-primary btn-rectangle btn-demo">Rectangle</button>
<button class="btn btn-success btn-rectangle btn-demo">Rectangle</button>
</div>
</div>
<div class="shape-container col-md-4">
<div class="shape-container">
<div class="container-title">
<span>Semi-round Button</span>
</div>
@ -23,10 +23,11 @@
<span>12px</span>
</div>
<div>
<button class="btn btn-primary btn-semi-round btn-demo">Semi-round</button>
<button class="btn btn-success btn-semi-round btn-demo">Semi-round</button>
</div>
</div>
<div class="shape-container col-md-4">
<div class="shape-container">
<div class="container-title">
<span>Rounded Button</span>
</div>
@ -35,8 +36,7 @@
<span>round</span>
</div>
<div>
<button class="btn btn-primary btn-round btn-demo">Round</button>
</div>
<button class="btn btn-success btn-round btn-demo">Round</button>
</div>
</div>
</nb-card-body>

18
src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss
View file

@ -3,11 +3,27 @@
@include nb-install-component() {
nb-card-body {
padding: 0 0 29px;
display: flex;
flex-wrap: wrap;
}
.shape-container {
margin: 1.25rem 1.25rem 0;
}
.container-title {
margin-bottom: 0.25rem;
}
.subheader {
margin-bottom: 19px;
margin-bottom: 1rem;
font-size: 0.875rem;
span:nth-child(2) {
color: nb-theme(color-fg-heading);
font-weight: nb-theme(font-weight-bold);
}
}
}

17
src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss
View file

@ -3,13 +3,24 @@
@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 {
display: inline-block;
margin: 0 1rem 1rem 0;
margin: 1.25rem 0 0 1.25rem;
}
.subheader {
margin-bottom: 1rem;
margin-bottom: 0.75rem;
font-size: 0.875rem;
font-weight: nb-theme(font-weight-bold);
color: nb-theme(color-fg-heading);
}
}