mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 00:10:14 +01:00
refactor(buttons): fix styles
This commit is contained in:
Alexander Zhukov
parent
83ed53d477
commit
2afb26810e
6 changed files with 279 additions and 239 deletions
|
|
@ -11,9 +11,9 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
|
|||
<i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
|
||||
<span class="logo" (click)="goToHome()">NgX <a>Admin</a></span>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,271 @@
|
|||
:host /deep/ {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
@import '~@nga/theme/styles_new/all';
|
||||
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
height: 48px;
|
||||
@mixin btn-bg($background) {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
@include nga-install-component() {
|
||||
|
||||
$btn-component-size: 50px;
|
||||
$btn-component-bd-radius: 12px;
|
||||
|
||||
/deep/ {
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-family: nga-theme(font-secondary);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
|
||||
.example-container .states-container.primary-container {
|
||||
.gradient {
|
||||
@include primary-gradient();
|
||||
}
|
||||
|
||||
.glow {
|
||||
@include primary-glow();
|
||||
}
|
||||
|
||||
.bevel-border {
|
||||
@include primary-bevel();
|
||||
}
|
||||
|
||||
.shadow {
|
||||
@include shadow();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.warning-container {
|
||||
.gradient {
|
||||
@include warning-gradient();
|
||||
}
|
||||
|
||||
.glow {
|
||||
@include warning-glow();
|
||||
}
|
||||
|
||||
.bevel-border {
|
||||
@include warning-bevel();
|
||||
}
|
||||
|
||||
.shadow {
|
||||
@include shadow();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.success-container {
|
||||
.gradient {
|
||||
@include success-gradient();
|
||||
}
|
||||
|
||||
.glow {
|
||||
@include success-glow();
|
||||
}
|
||||
|
||||
.bevel-border {
|
||||
@include success-bevel();
|
||||
}
|
||||
|
||||
.shadow {
|
||||
@include shadow();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.info-container {
|
||||
.gradient {
|
||||
@include info-gradient();
|
||||
}
|
||||
|
||||
.glow {
|
||||
@include info-glow();
|
||||
}
|
||||
|
||||
.bevel-border {
|
||||
@include info-bevel();
|
||||
}
|
||||
|
||||
.shadow {
|
||||
@include shadow();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.danger-container {
|
||||
.gradient {
|
||||
@include danger-gradient();
|
||||
}
|
||||
|
||||
.glow {
|
||||
@include danger-glow();
|
||||
}
|
||||
|
||||
.bevel-border {
|
||||
@include danger-bevel();
|
||||
}
|
||||
|
||||
.shadow {
|
||||
@include shadow();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.secondary-container {
|
||||
.border {
|
||||
color: nga-theme(btn-secondary-color);
|
||||
border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
|
||||
}
|
||||
|
||||
.glow {
|
||||
@include secondary-glow();
|
||||
}
|
||||
|
||||
.bevel-border {
|
||||
@include secondary-bevel();
|
||||
}
|
||||
|
||||
.shadow {
|
||||
@include shadow();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.default-buttons {
|
||||
.example-container .states-container.primary-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-primary-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include primary-hover();
|
||||
}
|
||||
|
||||
.active {
|
||||
@include primary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.warning-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-warning-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include warning-hover();
|
||||
}
|
||||
|
||||
.active {
|
||||
@include warning-active();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.success-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-success-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include success-hover();
|
||||
}
|
||||
|
||||
.active {
|
||||
@include success-active();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.info-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-info-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include info-hover();
|
||||
}
|
||||
|
||||
.active {
|
||||
@include info-active();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.danger-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-danger-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include danger-hover();
|
||||
}
|
||||
|
||||
.active {
|
||||
@include danger-active();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.secondary-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-secondary-border));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include secondary-hover();
|
||||
}
|
||||
|
||||
.active {
|
||||
@include secondary-active();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-groups {
|
||||
display: flex !important;
|
||||
|
||||
.container-title {
|
||||
font-family: nga-theme(font-secondary);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export class DefaultButtonsComponent {
|
|||
buttons = [{
|
||||
class: 'btn-primary',
|
||||
container: 'primary-container',
|
||||
containerTitle: 'Prymary Button',
|
||||
containerTitle: 'Primary Button',
|
||||
title: 'Primary',
|
||||
default: '#7659ff',
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<span>{{ hb.title }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn {{ hb.class }} btn-hero btn-demo">{{ hb.buttonTitle }}</button>
|
||||
<button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
|
||||
</div>
|
||||
<div class="states-container {{ hb.container }}">
|
||||
<div class="state-container" *ngIf="hb.border">
|
||||
|
|
|
|||
|
|
@ -1,221 +0,0 @@
|
|||
@import '~@nga/theme/styles_new/all';
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-bg($background) {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
@include nga-install-component() {
|
||||
|
||||
$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 {
|
||||
font-family: nga-theme(font-secondary);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
|
||||
.example-container .states-container.primary-container {
|
||||
.gradient {
|
||||
@include primary-gradient();
|
||||
}
|
||||
|
||||
@include btn-component(nga-theme(btn-primary-bevel-bd), nga-theme(btn-primary-glow), nga-theme(btn-primary-shadow));
|
||||
}
|
||||
|
||||
.example-container .states-container.warning-container {
|
||||
.gradient {
|
||||
@include warning-gradient();
|
||||
}
|
||||
|
||||
@include btn-component(nga-theme(btn-warning-bevel-bd), nga-theme(btn-warning-glow), nga-theme(btn-warning-shadow));
|
||||
}
|
||||
|
||||
.example-container .states-container.success-container {
|
||||
.gradient {
|
||||
@include success-gradient();
|
||||
}
|
||||
|
||||
@include btn-component(nga-theme(btn-success-bevel-bd), nga-theme(btn-success-glow), nga-theme(btn-success-shadow));
|
||||
}
|
||||
|
||||
.example-container .states-container.info-container {
|
||||
.gradient {
|
||||
@include info-gradient();
|
||||
}
|
||||
|
||||
@include btn-component(nga-theme(btn-info-bevel-bd), nga-theme(btn-info-glow), nga-theme(btn-info-shadow));
|
||||
}
|
||||
|
||||
.example-container .states-container.danger-container {
|
||||
.gradient {
|
||||
@include danger-gradient();
|
||||
}
|
||||
|
||||
@include btn-component(nga-theme(btn-danger-bevel-bd), nga-theme(btn-danger-glow), nga-theme(btn-danger-shadow));
|
||||
}
|
||||
|
||||
.example-container .states-container.secondary-container {
|
||||
.border {
|
||||
color: nga-theme(btn-secondary-color);
|
||||
border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
|
||||
}
|
||||
|
||||
@include btn-component(nga-theme(btn-secondary-bevel-bd), nga-theme(btn-secondary-glow), nga-theme(btn-secondary-shadow));
|
||||
}
|
||||
}
|
||||
|
||||
.default-buttons {
|
||||
$btn-component-size: 50px;
|
||||
$btn-component-bd-radius: 12px;
|
||||
|
||||
.example-container .states-container.primary-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-primary-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg(nga-theme(btn-primary-bg-hover-focus));
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg(nga-theme(btn-primary-bg-active));
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.warning-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-warning-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg(nga-theme(btn-warning-bg-hover-focus));
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg(nga-theme(btn-warning-bg-active));
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.success-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-success-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg(nga-theme(btn-success-bg-hover-focus));
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg(nga-theme(btn-success-bg-active));
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.info-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-info-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg(nga-theme(btn-info-bg-hover-focus));
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg(nga-theme(btn-info-bg-active));
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.danger-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-danger-bg));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg(nga-theme(btn-danger-bg-hover-focus));
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg(nga-theme(btn-danger-bg-active));
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.secondary-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-secondary-border));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg(nga-theme(btn-secondary-bg-hover-focus));
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg(nga-theme(btn-secondary-bg-active));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-groups {
|
||||
display: flex !important;
|
||||
|
||||
.container-title {
|
||||
font-family: nga-theme(font-secondary);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,13 +2,12 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-hero-buttons',
|
||||
styleUrls: ['./hero-buttons.component.scss'],
|
||||
templateUrl: './hero-buttons.component.html',
|
||||
})
|
||||
export class HeroButtonComponent {
|
||||
|
||||
heroButtons = [{
|
||||
class: 'btn-primary',
|
||||
class: 'btn-hero-primary',
|
||||
container: 'primary-container',
|
||||
title: 'Primary Button',
|
||||
buttonTitle: 'Primary',
|
||||
|
|
@ -17,7 +16,7 @@ export class HeroButtonComponent {
|
|||
shadow: 'rgba (6, 7, 64, 0.5)',
|
||||
glow: 'rgba (137, 66, 254, 0.8)',
|
||||
}, {
|
||||
class: 'btn-warning',
|
||||
class: 'btn-hero-warning',
|
||||
container: 'warning-container',
|
||||
title: 'Warning Button',
|
||||
buttonTitle: 'Warning',
|
||||
|
|
@ -26,7 +25,7 @@ export class HeroButtonComponent {
|
|||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: 'rgba (255, 193, 38, 0.6)',
|
||||
}, {
|
||||
class: 'btn-success',
|
||||
class: 'btn-hero-success',
|
||||
container: 'success-container',
|
||||
title: 'Success Button',
|
||||
buttonTitle: 'Success',
|
||||
|
|
@ -35,7 +34,7 @@ export class HeroButtonComponent {
|
|||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: 'rgba (35, 255, 181, 0.6)',
|
||||
}, {
|
||||
class: 'btn-info',
|
||||
class: 'btn-hero-info',
|
||||
container: 'info-container',
|
||||
title: 'Info Button',
|
||||
buttonTitle: 'Info',
|
||||
|
|
@ -44,7 +43,7 @@ export class HeroButtonComponent {
|
|||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: 'rgba (0, 136, 255, 0.7)',
|
||||
}, {
|
||||
class: 'btn-danger',
|
||||
class: 'btn-hero-danger',
|
||||
container: 'danger-container',
|
||||
title: 'Danger Button',
|
||||
buttonTitle: 'Danger',
|
||||
|
|
@ -53,7 +52,7 @@ export class HeroButtonComponent {
|
|||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: 'rgba (255, 73, 184, 0.8)',
|
||||
}, {
|
||||
class: 'btn-secondary',
|
||||
class: 'btn-hero-secondary',
|
||||
container: 'secondary-container',
|
||||
title: 'Ghost Button',
|
||||
buttonTitle: 'Ghost',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue