Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(buttons): move styles to related child components

Browse source
This commit is contained in:
KostyaDanovsky 2017-06-27 12:28:07 +03:00
parent 61869dad7a
commit b9a246457f
7 changed files with 202 additions and 205 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,6 @@
@import '../../../@theme/styles/variables';
@import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
@mixin btn-bg($background) {
background-color: $background;
}
@include nga-install-component() {
/deep/ {
$button-size: 50px;
@ -12,39 +8,38 @@
.btn-demo {
width: 180px;
height: 48px;
}
.states-container .state-container {
.state-container {
display: flex;
}
.states-container .state-container .state-value {
width: $button-size;
height: $button-size;
border-radius: $button-border-radius;
}
&:not(:last-child) {
margin-bottom: 1rem;
}
.states-container .state-container .state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1rem;
height: $button-size;
}
.state-value {
width: $button-size;
height: $button-size;
border-radius: $button-border-radius;
}
.states-container .state-container .state-details .header {
color: white;
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1rem;
height: $button-size;
.states-container .state-container .state-details .subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
.header {
color: white;
}
.states-container .state-container:not(:last-child) .state-value {
margin-bottom: 1rem;
.subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
}
}
.example-container {
@ -60,179 +55,6 @@
margin-bottom: 1rem;
}
.hero-buttons {
.example-container .states-container.primary-container .gradient {
@include btn-hero-primary-gradient();
}
.example-container .states-container.primary-container .glow {
@include btn-hero-primary-glow();
}
.example-container .states-container.primary-container .bevel-border {
@include btn-hero-primary-bevel();
}
.example-container .states-container.primary-container .shadow {
@include btn-hero-shadow();
}
.example-container .states-container.warning-container .gradient {
@include btn-hero-warning-gradient();
}
.example-container .states-container.warning-container .glow {
@include btn-hero-warning-glow();
}
.example-container .states-container.warning-container .bevel-border {
@include btn-hero-warning-bevel();
}
.example-container .states-container.warning-container .shadow {
@include btn-hero-shadow();
}
.example-container .states-container.success-container .gradient {
@include btn-hero-success-gradient();
}
.example-container .states-container.success-container .glow {
@include btn-hero-success-glow();
}
.example-container .states-container.success-container .bevel-border {
@include btn-hero-success-bevel();
}
.example-container .states-container.success-container .shadow {
@include btn-hero-shadow();
}
.example-container .states-container.info-container .gradient {
@include btn-hero-info-gradient();
}
.example-container .states-container.info-container .glow {
@include btn-hero-info-glow();
}
.example-container .states-container.info-container .bevel-border {
@include btn-hero-info-bevel();
}
.example-container .states-container.info-container .shadow {
@include btn-hero-shadow();
}
.example-container .states-container.danger-container .gradient {
@include btn-hero-danger-gradient();
}
.example-container .states-container.danger-container .glow {
@include btn-hero-danger-glow();
}
.example-container .states-container.danger-container .bevel-border {
@include btn-hero-danger-bevel();
}
.example-container .states-container.danger-container .shadow {
@include btn-hero-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);
}
.example-container .states-container.secondary-container .glow {
@include btn-hero-secondary-glow();
}
.example-container .states-container.secondary-container .bevel-border {
@include btn-hero-secondary-bevel();
}
.example-container .states-container.secondary-container .shadow {
@include btn-hero-shadow();
}
}
.default-buttons {
.example-container .states-container.primary-container .original {
@include btn-bg(nga-theme(btn-primary-bg));
}
.example-container .states-container.primary-container .hover {
@include btn-primary-hover();
}
.example-container .states-container.primary-container .active {
@include btn-primary-active();
}
.example-container .states-container.warning-container .original {
@include btn-bg(nga-theme(btn-warning-bg));
}
.example-container .states-container.warning-container .hover {
@include btn-warning-hover();
}
.example-container .states-container.warning-container .active {
@include btn-warning-active();
}
.example-container .states-container.success-container .original {
@include btn-bg(nga-theme(btn-success-bg));
}
.example-container .states-container.success-container .hover {
@include btn-success-hover();
}
.example-container .states-container.success-container .active {
@include btn-success-active();
}
.example-container .states-container.info-container .original {
@include btn-bg(nga-theme(btn-info-bg));
}
.example-container .states-container.info-container .hover {
@include btn-info-hover();
}
.example-container .states-container.info-container .active {
@include btn-info-active();
}
.example-container .states-container.danger-container .original {
@include btn-bg(nga-theme(btn-danger-bg));
}
.example-container .states-container.danger-container .hover {
@include btn-danger-hover();
}
.example-container .states-container.danger-container .active {
@include btn-danger-active();
}
.example-container .states-container.secondary-container .original {
@include btn-bg(nga-theme(btn-secondary-border));
}
.example-container .states-container.secondary-container .hover {
@include btn-secondary-hover();
}
.example-container .states-container.secondary-container .active {
@include btn-secondary-active();
}
}
.actions-groups {
display: flex !important;
}

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

@ -1,7 +1,7 @@
<nga-card>
<nga-card-header>Default Buttons</nga-card-header>
<nga-card-body>
<div class="row default-buttons">
<div class="row">
<div class="example-container col-md-4" *ngFor="let b of buttons">
<div class="container-title">
<span>{{ b.containerTitle }}</span>

77
src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss Normal file
View file

@ -0,0 +1,77 @@
@import '../../../../@theme/styles/variables';
@import '~@nga/theme/styles/global/bootstrap/buttons';
@include nga-install-component() {
.primary-container {
.original {
background-color: nga-theme(btn-primary-bg);
}
.hover {
@include btn-primary-hover();
}
.active {
@include btn-primary-active();
}
}
.warning-container {
.original {
background-color: nga-theme(btn-warning-bg);
}
.hover {
@include btn-warning-hover();
}
.active {
@include btn-warning-active();
}
}
.success-container {
.original {
background-color: nga-theme(btn-success-bg);
}
.hover {
@include btn-success-hover();
}
.active {
@include btn-success-active();
}
}
.info-container {
.original {
background-color: nga-theme(btn-info-bg);
}
.hover {
@include btn-info-hover();
}
.active {
@include btn-info-active();
}
}
.danger-container {
.original {
background-color: nga-theme(btn-danger-bg);
}
.hover {
@include btn-danger-hover();
}
.active {
@include btn-danger-active();
}
}
.secondary-container {
.original {
background-color: nga-theme(btn-secondary-border);
}
.hover {
@include btn-secondary-hover();
}
.active {
@include btn-secondary-active();
}
}
}

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

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-default-buttons',
styleUrls: ['./default-buttons.component.scss'],
templateUrl: './default-buttons.component.html',
})
export class DefaultButtonsComponent {

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

@ -1,7 +1,7 @@
<nga-card>
<nga-card-header>Hero Buttons</nga-card-header>
<nga-card-body>
<div class="row hero-buttons">
<div class="row">
<div class="example-container col-md-2" *ngFor="let hb of heroButtons">
<div class="container-title">
<span>{{ hb.title }}</span>
@ -25,7 +25,7 @@
</div>
</div>
<div class="state-container">
<div class="state-value bevel-border"></div>
<div class="state-value bevel"></div>
<div class="state-details">
<span class="header">Bevel Border</span>
<span class="subheader">0 3px 0 0</span>

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

@ -0,0 +1,96 @@
@import '../../../../@theme/styles/variables';
@import '~@nga/theme/styles/global/bootstrap/buttons';
@include nga-install-component() {
.primary-container {
.gradient {
@include btn-hero-primary-gradient();
}
.glow {
box-shadow: btn-hero-primary-glow();
}
.bevel {
box-shadow: btn-hero-primary-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.warning-container {
.gradient {
@include btn-hero-warning-gradient();
}
.glow {
box-shadow: btn-hero-warning-glow();
}
.bevel {
box-shadow: btn-hero-warning-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.success-container {
.gradient {
@include btn-hero-success-gradient();
}
.glow {
box-shadow: btn-hero-success-glow();
}
.bevel {
box-shadow: btn-hero-success-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.info-container {
.gradient {
@include btn-hero-info-gradient();
}
.glow {
box-shadow: btn-hero-info-glow();
}
.bevel {
box-shadow: btn-hero-info-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.danger-container {
.gradient {
@include btn-hero-danger-gradient();
}
.glow {
box-shadow: btn-hero-danger-glow();
}
.bevel {
box-shadow: btn-hero-danger-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
.secondary-container {
.border {
color: nga-theme(btn-secondary-color);
border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
}
.glow {
box-shadow: btn-hero-secondary-glow();
}
.bevel {
box-shadow: btn-hero-secondary-bevel();
}
.shadow {
box-shadow: btn-hero-shadow();
}
}
}

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

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-hero-buttons',
styleUrls: ['./hero-buttons.component.scss'],
templateUrl: './hero-buttons.component.html',
})
export class HeroButtonComponent {