mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-21 01:40:13 +01:00
feat(buttons): add buttons examples
This commit is contained in:
Alexander Zhukov
parent
fa26f9f0bf
commit
9ce1d2a589
10 changed files with 444 additions and 240 deletions
|
|
@ -6,11 +6,10 @@
|
|||
}
|
||||
|
||||
@include nga-install-component() {
|
||||
|
||||
$btn-component-size: 50px;
|
||||
$btn-component-bd-radius: 12px;
|
||||
|
||||
/deep/ {
|
||||
$button-size: 50px;
|
||||
$button-border-radius: 12px;
|
||||
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
height: 48px;
|
||||
|
|
@ -18,31 +17,34 @@
|
|||
|
||||
.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;
|
||||
}
|
||||
.states-container .state-container .state-value {
|
||||
width: $button-size;
|
||||
height: $button-size;
|
||||
border-radius: $button-border-radius;
|
||||
}
|
||||
|
||||
.state-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 17px;
|
||||
height: $btn-component-size;
|
||||
}
|
||||
.states-container .state-container .state-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 1rem;
|
||||
height: $button-size;
|
||||
}
|
||||
|
||||
.state-details .header {
|
||||
color: white;
|
||||
}
|
||||
.states-container .state-container .state-details .header {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.state-details .subheader {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
.states-container .state-container .state-details .subheader {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.states-container .state-container:not(:last-child) .state-value {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.example-container {
|
||||
|
|
@ -51,222 +53,227 @@
|
|||
|
||||
.example-container .container-title {
|
||||
font-family: nga-theme(font-secondary);
|
||||
margin-bottom: 14px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.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.primary-container .gradient {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
|
||||
.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.primary-container .glow {
|
||||
@include btn-hero-primary-glow();
|
||||
}
|
||||
|
||||
.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.primary-container .bevel-border {
|
||||
@include btn-hero-primary-bevel();
|
||||
}
|
||||
|
||||
.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.primary-container .shadow {
|
||||
@include btn-hero-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.warning-container .gradient {
|
||||
@include btn-hero-warning-gradient();
|
||||
}
|
||||
|
||||
.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.warning-container .glow {
|
||||
@include btn-hero-warning-glow();
|
||||
}
|
||||
|
||||
.glow {
|
||||
@include secondary-glow();
|
||||
}
|
||||
.example-container .states-container.warning-container .bevel-border {
|
||||
@include btn-hero-warning-bevel();
|
||||
}
|
||||
|
||||
.bevel-border {
|
||||
@include secondary-bevel();
|
||||
}
|
||||
.example-container .states-container.warning-container .shadow {
|
||||
@include btn-hero-shadow();
|
||||
}
|
||||
|
||||
.shadow {
|
||||
@include 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));
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include primary-hover();
|
||||
}
|
||||
|
||||
.active {
|
||||
@include primary-active();
|
||||
}
|
||||
.example-container .states-container.primary-container .original {
|
||||
@include btn-bg(nga-theme(btn-primary-bg));
|
||||
}
|
||||
|
||||
.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.primary-container .hover {
|
||||
@include btn-primary-hover();
|
||||
}
|
||||
|
||||
.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.primary-container .active {
|
||||
@include btn-primary-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.warning-container .original {
|
||||
@include btn-bg(nga-theme(btn-warning-bg));
|
||||
}
|
||||
|
||||
.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.warning-container .hover {
|
||||
@include btn-warning-hover();
|
||||
}
|
||||
|
||||
.example-container .states-container.secondary-container {
|
||||
.original {
|
||||
@include btn-bg(nga-theme(btn-secondary-border));
|
||||
}
|
||||
.example-container .states-container.warning-container .active {
|
||||
@include btn-warning-active();
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include secondary-hover();
|
||||
}
|
||||
.example-container .states-container.success-container .original {
|
||||
@include btn-bg(nga-theme(btn-success-bg));
|
||||
}
|
||||
|
||||
.active {
|
||||
@include secondary-active();
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
font-family: nga-theme(font-secondary);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.actions-groups .container-title {
|
||||
font-family: nga-theme(font-secondary);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.block-level-buttons .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.button-groups .toolbars-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-groups .pagination-container {
|
||||
flex: 1;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.button-groups .icon-toolbar-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon-buttons .btn-group:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.icon-buttons .icon-button-examples {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.icon-buttons .icon-button-examples:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue