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="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
<div class="theme-buttons"> <div class="theme-buttons">
<button class="btn btn-hero-primary" (click)="selectCosmicTheme()">Cosmic</button> <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> <button class="btn btn-hero-info" (click)="selectDefaultTheme()">Default</button>
</div> </div>
</div> </div>
@ -80,10 +79,6 @@ export class HeaderComponent implements OnInit {
this.themeService.changeTheme('cosmic'); this.themeService.changeTheme('cosmic');
} }
selectLightTheme() {
this.themeService.changeTheme('light');
}
selectDefaultTheme() { selectDefaultTheme() {
this.themeService.changeTheme('default'); this.themeService.changeTheme('default');
} }

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

@ -1,17 +1,19 @@
<div class="action-groups"> <nb-card>
<div class="action-groups-header"> <nb-card-body>
<span>Action Groups</span> <div class="action-groups-header">
</div> Action Groups
<nb-actions size="medium"> </div>
<nb-action icon="ion-navicon"></nb-action> <nb-actions size="medium">
<nb-action> <nb-action icon="ion-navicon"></nb-action>
<nb-search type="rotate-layout"></nb-search> <nb-action>
</nb-action> <nb-search type="rotate-layout"></nb-search>
<nb-action icon="ion-ios-email-outline"></nb-action> </nb-action>
<nb-action disabled icon="ion-ios-bell-outline"></nb-action> <nb-action icon="ion-ios-email-outline"></nb-action>
<nb-action> <nb-action disabled icon="ion-ios-bell-outline"></nb-action>
<nb-user [menu]="userMenu" name="Han Solo"></nb-user> <nb-action>
</nb-action> <nb-user [menu]="userMenu" name="Han Solo"></nb-user>
<nb-action icon="ion-ios-gear-outline"></nb-action> </nb-action>
</nb-actions> <nb-action icon="ion-ios-gear-outline"></nb-action>
</div> </nb-actions>
</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'; @import '~@nebular/theme/components/card/card.component.theme';
@include nb-install-component() { @include nb-install-component() {
.action-groups {
nb-card-body {
display: flex; display: flex;
align-items: center;
} }
.action-groups-header { .action-groups-header {
flex: 1; 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);
} }
} }

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

@ -4,9 +4,7 @@
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<ngx-shape-buttons></ngx-shape-buttons> <ngx-shape-buttons></ngx-shape-buttons>
<nb-card> <ngx-action-groups></ngx-action-groups>
<ngx-action-groups></ngx-action-groups>
</nb-card>
<nb-card> <nb-card>
<nb-card-body> <nb-card-body>
<ngx-labeled-actions-group></ngx-labeled-actions-group> <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 { .header {
color: nb-theme(color-fg-header); color: nb-theme(color-fg-header);
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1rem;
} }
.subheader { .subheader {
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1rem; font-weight: nb-theme(font-weight-light);
font-weight: 300;
color: nb-theme(color-fg); 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> <span>Default Buttons</span>
<div ngbDropdown> <div ngbDropdown>
<button class="btn btn-primary" type="button" ngbDropdownToggle> <button class="btn btn-primary" type="button" ngbDropdownToggle>
{{ selectedButtonsView.title }} {{ selectedView.title }}
</button> </button>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a href="#" class="dropdown-item" *ngFor="let v of buttonsViews" (click)="selectView($event, v)">{{ v.title }}</a> <li class="dropdown-item" *ngFor="let v of buttonsViews" (click)="this.selectedView = v">{{ v.title }}</li>
</div> </ul>
</div> </div>
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<div class="row" *ngIf="selectedButtonsView.key === 'default'"> <div class="row">
<div class="example-container col-md-4" *ngFor="let b of defaultButtons"> <div class="example-container col-md-4" *ngFor="let b of buttons[selectedView.key]">
<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="container-title"> <div class="container-title">
<span>{{ b.containerTitle }}</span> <span>{{ b.containerTitle }}</span>
</div> </div>

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

@ -15,86 +15,87 @@ export class DefaultButtonsComponent {
key: 'outline', key: 'outline',
}]; }];
selectedButtonsView = this.buttonsViews[0]; selectedView = this.buttonsViews[0];
defaultButtons = [{ buttons = {
class: 'btn-primary', 'default': [
container: 'primary-container', {
containerTitle: 'Primary Button', class: 'btn-primary',
title: 'Primary', container: 'primary-container',
default: '#7659ff', containerTitle: 'Primary Button',
}, { title: 'Primary',
class: 'btn-warning', default: '#7659ff',
container: 'warning-container', }, {
containerTitle: 'Warning Button', class: 'btn-warning',
title: 'Warning', container: 'warning-container',
default: '#ffcb17', containerTitle: 'Warning Button',
}, { title: 'Warning',
class: 'btn-success', default: '#ffcb17',
container: 'success-container', }, {
containerTitle: 'Success Button', class: 'btn-success',
title: 'Success', container: 'success-container',
default: '#00d977', containerTitle: 'Success Button',
}, { title: 'Success',
class: 'btn-info', default: '#00d977',
container: 'info-container', }, {
containerTitle: 'Info Button', class: 'btn-info',
title: 'Info', container: 'info-container',
default: '#0088ff', containerTitle: 'Info Button',
}, { title: 'Info',
class: 'btn-danger', default: '#0088ff',
container: 'danger-container', }, {
containerTitle: 'Danger Button', class: 'btn-danger',
title: 'Danger', container: 'danger-container',
default: '#ff386a', containerTitle: 'Danger Button',
}, { title: 'Danger',
class: 'btn-secondary', default: '#ff386a',
container: 'secondary-container', }, {
containerTitle: 'Default Button', class: 'btn-secondary',
title: 'Default', container: 'secondary-container',
default: '#bdbaff', containerTitle: 'Default Button',
}]; title: 'Default',
default: '#bdbaff',
},
],
outlineButtons = [{ 'outline': [
class: 'btn-outline-primary', {
container: 'primary-container outline', class: 'btn-outline-primary',
containerTitle: 'Primary Button', container: 'primary-container outline',
title: 'Primary', containerTitle: 'Primary Button',
default: '#7659ff', title: 'Primary',
}, { default: '#7659ff',
class: 'btn-outline-warning', }, {
container: 'warning-container outline', class: 'btn-outline-warning',
containerTitle: 'Warning Button', container: 'warning-container outline',
title: 'Warning', containerTitle: 'Warning Button',
default: '#ffcb17', title: 'Warning',
}, { default: '#ffcb17',
class: 'btn-outline-success', }, {
container: 'success-container outline', class: 'btn-outline-success',
containerTitle: 'Success Button', container: 'success-container outline',
title: 'Success', containerTitle: 'Success Button',
default: '#00d977', title: 'Success',
}, { default: '#00d977',
class: 'btn-outline-info', }, {
container: 'info-container', class: 'btn-outline-info',
containerTitle: 'Info Button', container: 'info-container',
title: 'Info', containerTitle: 'Info Button',
default: '#0088ff', title: 'Info',
}, { default: '#0088ff',
class: 'btn-outline-danger', }, {
container: 'danger-container outline', class: 'btn-outline-danger',
containerTitle: 'Danger Button', container: 'danger-container outline',
title: 'Danger', containerTitle: 'Danger Button',
default: '#ff386a', title: 'Danger',
}, { default: '#ff386a',
class: 'btn-outline-secondary', }, {
container: 'secondary-container outline', class: 'btn-outline-secondary',
containerTitle: 'Default Button', container: 'secondary-container outline',
title: 'Default', containerTitle: 'Default Button',
default: '#bdbaff', 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-header>Hero Buttons</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="row"> <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"> <div class="container-title">
<span>{{ hb.title }}</span> <span>{{ hb.title }}</span>
</div> </div>
@ -10,42 +10,52 @@
<button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button> <button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
</div> </div>
<div class="{{ hb.container }}"> <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-value border"></div>
<div class="state-details"> <div class="state-details">
<span class="header">Border</span> <span class="header">Border</span>
<span class="subheader">{{ hb.border }}</span> <span class="subheader">{{ hb[themeName].border }}</span>
</div> </div>
</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-value gradient"></div>
<div class="state-details"> <div class="state-details">
<span class="header">Linear Gradient</span> <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> </div>
<div class="state-container"> <div class="state-container">
<div class="state-value bevel"></div> <div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
<div class="state-details"> <div class="state-details" *ngIf="hb[themeName].bevel">
<span class="header">Bevel Border</span> <span class="header">Bevel</span>
<span class="subheader">0 3px 0 0</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> </div>
<div class="state-container"> <div class="state-container">
<div class="state-value shadow"></div> <div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
<div class="state-details"> <div class="state-details" *ngIf="hb[themeName].shadow">
<span class="header">Shadow</span> <span class="header">Shadow</span>
<span class="subheader">0 4px 10px 0</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> </div>
<div class="state-container"> <div class="state-container">
<div class="state-value glow"></div> <div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
<div class="state-details"> <div class="state-details" *ngIf="hb[themeName].glow">
<span class="header">Glow</span> <span class="header">Glow</span>
<span class="subheader">0 2px 12px 0</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> </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() { @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 { .primary-container {
.gradient { .gradient {
@include btn-hero-primary-gradient(); @include btn-hero-primary-gradient();
@ -13,9 +44,6 @@
.bevel { .bevel {
box-shadow: btn-hero-primary-bevel(); box-shadow: btn-hero-primary-bevel();
} }
.shadow {
box-shadow: btn-hero-shadow();
}
} }
.warning-container { .warning-container {
@ -28,9 +56,6 @@
.bevel { .bevel {
box-shadow: btn-hero-warning-bevel(); box-shadow: btn-hero-warning-bevel();
} }
.shadow {
box-shadow: btn-hero-shadow();
}
} }
.success-container { .success-container {
@ -43,9 +68,6 @@
.bevel { .bevel {
box-shadow: btn-hero-success-bevel(); box-shadow: btn-hero-success-bevel();
} }
.shadow {
box-shadow: btn-hero-shadow();
}
} }
.info-container { .info-container {
@ -58,9 +80,6 @@
.bevel { .bevel {
box-shadow: btn-hero-info-bevel(); box-shadow: btn-hero-info-bevel();
} }
.shadow {
box-shadow: btn-hero-shadow();
}
} }
.danger-container { .danger-container {
@ -73,9 +92,6 @@
.bevel { .bevel {
box-shadow: btn-hero-danger-bevel(); box-shadow: btn-hero-danger-bevel();
} }
.shadow {
box-shadow: btn-hero-shadow();
}
} }
.secondary-container { .secondary-container {
@ -89,8 +105,5 @@
.bevel { .bevel {
box-shadow: btn-hero-secondary-bevel(); box-shadow: btn-hero-secondary-bevel();
} }
.shadow {
box-shadow: btn-hero-shadow();
}
} }
} }

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

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

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

@ -1,42 +1,42 @@
<nb-card> <nb-card>
<nb-card-header>Button Shapes</nb-card-header> <nb-card-header>Button Shapes</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="row"> <div class="shape-container">
<div class="shape-container col-md-4"> <div class="container-title">
<div class="container-title"> <span>Rectangle Button</span>
<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>
<div class="shape-container col-md-4"> <div class="subheader">
<div class="container-title"> <span>Border radius:</span>
<span>Semi-round Button</span> <span>4px</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>
<div class="shape-container col-md-4"> <div>
<div class="container-title"> <button class="btn btn-success btn-rectangle btn-demo">Rectangle</button>
<span>Rounded Button</span> </div>
</div> </div>
<div class="subheader">
<span>Border radius:</span> <div class="shape-container">
<span>round</span> <div class="container-title">
</div> <span>Semi-round Button</span>
<div> </div>
<button class="btn btn-primary btn-round btn-demo">Round</button> <div class="subheader">
</div> <span>Border radius:</span>
<span>12px</span>
</div>
<div>
<button class="btn btn-success btn-semi-round 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 class="btn btn-success btn-round btn-demo">Round</button>
</div> </div>
</div> </div>
</nb-card-body> </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() { @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 { .subheader {
margin-bottom: 19px; margin-bottom: 1rem;
font-size: 0.875rem;
span:nth-child(2) { span:nth-child(2) {
color: nb-theme(color-fg-heading); 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() { @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 { .size-container {
display: inline-block; margin: 1.25rem 0 0 1.25rem;
margin: 0 1rem 1rem 0;
} }
.subheader { .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); color: nb-theme(color-fg-heading);
} }
} }