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 styles

Browse source
This commit is contained in:
Alexander Zhukov 2017-06-02 16:05:11 +03:00
parent 59ef144716
commit 774fe48d65
11 changed files with 955 additions and 595 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

@ -1,222 +1,186 @@
<div class="row">
<div class="btn-default-container col-md-4">
<div class="btn-container-title">
<div class="row default-buttons">
<div class="button-container col-md-4">
<div class="container-title">
<span>Primary Button</span>
</div>
<div>
<div class="container-btn">
<button class="btn btn-primary btn-demo">Primary</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-primary btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#7659ff</span>
<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>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-primary btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
<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="btn-details-item">
<div>
<button class="btn btn-primary btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
<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="btn-default-container col-md-4">
<div class="btn-container-title">
<div class="button-container col-md-4">
<div class="container-title">
<span>Warning Button</span>
</div>
<div>
<div class="container-btn">
<button class="btn btn-warning btn-demo">Warning</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-warning btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#ffcb17</span>
<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="btn-details-item">
<div>
<button class="btn btn-warning btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
<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="btn-details-item">
<div>
<button class="btn btn-warning btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
<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="btn-default-container col-md-4">
<div class="btn-container-title">
<div class="button-container col-md-4">
<div class="container-title">
<span>Success Button</span>
</div>
<div>
<div class="container-btn">
<button class="btn btn-success btn-demo">Success</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-success btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#00d977</span>
<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="btn-details-item">
<div>
<button class="btn btn-success btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
<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="btn-details-item">
<div>
<button class="btn btn-success btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
<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="btn-default-container col-md-4 col-sm-6 col-6">
<div class="btn-container-title">
<div class="button-container col-md-4">
<div class="container-title">
<span>Info Button</span>
</div>
<div>
<div class="container-btn">
<button class="btn btn-info btn-demo">Info</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-info btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#0088ff</span>
<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="btn-details-item">
<div>
<button class="btn btn-info btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
<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="btn-details-item">
<div>
<button class="btn btn-info btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
<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="btn-default-container col-md-4 col-sm-6 col-6">
<div class="btn-container-title">
<div class="button-container col-md-4">
<div class="container-title">
<span>Danger Button</span>
</div>
<div>
<div class="container-btn">
<button class="btn btn-danger btn-demo">Danger</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-danger btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#ff386a</span>
<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="btn-details-item">
<div>
<button class="btn btn-danger btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
<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="btn-details-item">
<div>
<button class="btn btn-danger btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
<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="btn-default-container col-md-4 col-sm-6 col-6">
<div class="btn-container-title">
<div class="button-container col-md-4">
<div class="container-title">
<span>Default Button</span>
</div>
<div>
<div class="container-btn">
<button class="btn btn-demo">Default</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>transparent</span>
<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="btn-details-item">
<div>
<button class="btn btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
<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="btn-details-item">
<div>
<button class="btn btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
<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>

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

@ -1,33 +0,0 @@
$btn-empty-size: 50px;
.btn-empty {
height: $btn-empty-size !important;
width: $btn-empty-size !important;
padding: 1rem !important;
}
.btn-default-container {
.btn-container-title {
margin-bottom: 14px;
}
.btn-details-container {
margin-top: 24px;
.btn-details-item {
display: flex;
margin-bottom: 8px;
div:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 17px;
span:nth-child(1) {
color: #ffffff;
}
}
}
}
}

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

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

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

@ -1,246 +1,246 @@
<div class="row">
<div class="btn-hero-container col-md-2">
<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-primary-hero btn-demo">Primary</button>
<button class="btn btn-primary btn-hero btn-demo">Primary</button>
</div>
<div class="btn-components-container primary-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
<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>
</div>
</div>
<div class="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
<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>
</div>
<div class="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
<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="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
<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>
</div>
</div>
</div>
<div class="btn-hero-container col-md-2">
<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-warning-hero btn-demo">Warning</button>
<button class="btn btn-warning btn-hero btn-demo">Warning</button>
</div>
<div class="btn-components-container warning-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
<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="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
<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="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
<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="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
<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="btn-hero-container col-md-2">
<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-success-hero btn-demo">Success</button>
<button class="btn btn-success btn-hero btn-demo">Success</button>
</div>
<div class="btn-components-container success-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
<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="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
<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="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
<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="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
<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="btn-hero-container col-md-2">
<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-info-hero btn-demo">Info</button>
<button class="btn btn-info btn-hero btn-demo">Info</button>
</div>
<div class="btn-components-container info-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
<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="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
<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="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
<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="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
<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="btn-hero-container col-md-2">
<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-danger-hero btn-demo">Danger</button>
<button class="btn btn-danger btn-hero btn-demo">Danger</button>
</div>
<div class="btn-components-container danger-container">
<div class="btn-component">
<div class="btn-gradient"></div>
<div class="btn-component-details">
<span class="btn-component-header">Linear Gradient</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
<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="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 3px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
<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="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
<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="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
<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="btn-hero-container col-md-2">
<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="btn-components-container default-container">
<div class="btn-component">
<div class="btn-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Border</span>
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
<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="btn-component">
<div class="btn-bevel-border"></div>
<div class="btn-component-details">
<span class="btn-component-header">Bevel Border</span>
<span class="btn-component-subheader">0 2px 0 0</span>
<span class="btn-component-subheader">#6938c9</span>
<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="btn-component">
<div class="btn-shadow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Shadow</span>
<span class="btn-component-subheader">0 4px 10px 0</span>
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
<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="btn-component">
<div class="btn-glow"></div>
<div class="btn-component-details">
<span class="btn-component-header">Glow</span>
<span class="btn-component-subheader">0 2px 12px 0</span>
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
<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>

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

@ -1,9 +1,9 @@
<div class="row">
<div class="col-md-4">
<div class="btn-shape-name">
<div class="shape-container col-md-4">
<div class="header">
<span>Rectangle Button</span>
</div>
<div class="btn-shape-details">
<div class="subheader">
<span>Border radius:</span>
<span>4px</span>
</div>
@ -11,11 +11,11 @@
<button class="btn btn-primary btn-rectangle btn-demo">Rectangle</button>
</div>
</div>
<div class="col-md-4">
<div class="btn-shape-name">
<div class="shape-container col-md-4">
<div class="header">
<span>Semi-round Button</span>
</div>
<div class="btn-shape-details">
<div class="subheader">
<span>Border radius:</span>
<span>12px</span>
</div>
@ -23,11 +23,11 @@
<button class="btn btn-primary btn-semi-round btn-demo">Semi-round</button>
</div>
</div>
<div class="col-md-4">
<div class="btn-shape-name">
<div class="shape-container col-md-4">
<div class="header">
<span>Rounded Button</span>
</div>
<div class="btn-shape-details">
<div class="subheader">
<span>Border radius:</span>
<span>round</span>
</div>

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

@ -1,9 +1,11 @@
.btn-shape-name {
.shape-container .header {
margin-bottom: 7px;
}
.btn-shape-details {
.shape-container .subheader {
margin-bottom: 19px;
font-weight: 300;
font-size: 0.875rem;
span:nth-child(2) {
color: #ffffff;

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

@ -1,42 +1,42 @@
<div class="row">
<div class="btn-size-container col-md-4">
<div>
<div class="size-container">
<div class="header">
<span>Rectangle Button</span>
</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="btn-size-container col-md-3">
<div>
<div class="size-container">
<div class="header">
<span>Medium Button</span>
</div>
<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="btn-size-container col-md-3">
<div>
<div class="size-container">
<div class="header">
<span>Small Button</span>
</div>
<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="btn-size-container col-md-2">
<div>
<div class="size-container">
<div class="header">
<span>Tiny Button</span>
</div>
<div>
<div class="subheader">
<span>0.625rem 1.25rem</span>
</div>
<div>

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

@ -1,10 +1,18 @@
.btn-size-container {
div:nth-child(1) {
.row {
padding: 0 15px;
}
.size-container {
margin-right: 20px;
.header {
margin-bottom: 7px;
}
div:nth-child(2) {
.subheader {
color: #ffffff;
margin-bottom: 19px;
font-size: 0.875rem;
font-weight: 300;
}
}