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

refactor: comment button styles

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-21 23:44:15 +03:00
parent 994cb69c29
commit a37889b410
5 changed files with 296 additions and 296 deletions
Download patch file Download diff file Expand all files Collapse all files

154
src/app/pages/forms/buttons/action-groups/action-groups.component.scss
View file

@ -1,77 +1,77 @@
@import '../../../../@theme/styles/themes'; //@import '../../../../@theme/styles/themes';
@import '~@nebular/theme/components/card/card.component.theme'; //@import '~@nebular/theme/components/card/card.component.theme';
@import '~bootstrap/scss/mixins/breakpoints'; //@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; //@import '~@nebular/theme/styles/global/breakpoints';
//
@include nb-install-component() { //@include nb-install-component() {
//
nb-card-body { // nb-card-body {
display: flex; // display: flex;
align-items: center; // align-items: center;
} // }
//
.action-groups-header { // .action-groups-header {
flex-basis: 20%; // flex-basis: 20%;
//
color: nb-theme(card-header-fg-heading); // color: nb-theme(card-header-fg-heading);
font-family: nb-theme(card-header-font-family); // font-family: nb-theme(card-header-font-family);
font-size: nb-theme(card-header-font-size); // font-size: nb-theme(card-header-font-size);
font-weight: nb-theme(card-header-font-weight); // font-weight: nb-theme(card-header-font-weight);
} // }
//
.nb-actions { // .nb-actions {
flex-basis: 80%; // flex-basis: 80%;
} // }
//
@include media-breakpoint-down(sm) { // @include media-breakpoint-down(sm) {
nb-card-body { // nb-card-body {
flex-direction: column; // flex-direction: column;
align-items: flex-start; // align-items: flex-start;
padding: 0.75rem; // padding: 0.75rem;
//
.action-groups-header { // .action-groups-header {
@include nb-ltr(margin, 0 0 0.5rem 0.25rem); // @include nb-ltr(margin, 0 0 0.5rem 0.25rem);
@include nb-rtl(margin, 0 0.25rem 0.5rem 0); // @include nb-rtl(margin, 0 0.25rem 0.5rem 0);
} // }
} // }
//
nb-action { // nb-action {
padding: 0 0.5rem; // padding: 0 0.5rem;
::ng-deep .control-icon { // ::ng-deep .control-icon {
font-size: 1.75rem; // font-size: 1.75rem;
} // }
} // }
nb-user ::ng-deep { // nb-user ::ng-deep {
.user-container { // .user-container {
font-size: 0.875rem; // font-size: 0.875rem;
} // }
.user-picture { // .user-picture {
height: 1.75rem; // height: 1.75rem;
width: 1.75rem; // width: 1.75rem;
} // }
} // }
} // }
//
@include media-breakpoint-down(xs) { // @include media-breakpoint-down(xs) {
//
nb-action { // nb-action {
padding: 0 0.375rem; // padding: 0 0.375rem;
::ng-deep .control-icon { // ::ng-deep .control-icon {
font-size: 1.5rem; // font-size: 1.5rem;
} // }
} // }
nb-user ::ng-deep { // nb-user ::ng-deep {
.user-container { // .user-container {
font-size: 0.75rem; // font-size: 0.75rem;
} // }
.user-picture { // .user-picture {
height: 1.5rem; // height: 1.5rem;
width: 1.5rem; // width: 1.5rem;
} // }
} // }
nb-card-body { // nb-card-body {
padding-left: 0; // padding-left: 0;
padding-right: 0; // padding-right: 0;
} // }
} // }
} //}

206
src/app/pages/forms/buttons/buttons.component.scss
View file

@ -1,103 +1,103 @@
@import '../../../@theme/styles/themes'; //@import '../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons'; //@import '~@nebular/bootstrap/styles/buttons';
@import '~bootstrap/scss/mixins/breakpoints'; //@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; //@import '~@nebular/theme/styles/global/breakpoints';
//
@include nb-install-component() { //@include nb-install-component() {
::ng-deep { // ::ng-deep {
$button-size: 50px; // $button-size: 50px;
//
.container-title { // .container-title {
color: nb-theme(color-fg); // color: nb-theme(color-fg);
font-family: nb-theme(font-secondary); // font-family: nb-theme(font-secondary);
margin-bottom: 0.5rem; // margin-bottom: 0.5rem;
} // }
//
.header { // .header {
color: nb-theme(color-fg-header); // color: nb-theme(color-fg-header);
font-size: 0.875rem; // font-size: 0.875rem;
} // }
//
.subheader { // .subheader {
font-size: 0.75rem; // font-size: 0.75rem;
font-weight: nb-theme(font-weight-light); // font-weight: nb-theme(font-weight-light);
color: nb-theme(color-fg); // color: nb-theme(color-fg);
} // }
//
.btn-demo { // .btn-demo {
width: 180px; // width: 180px;
} // }
//
.state-container { // .state-container {
display: flex; // display: flex;
//
&:not(:last-child) { // &:not(:last-child) {
margin-bottom: 1rem; // margin-bottom: 1rem;
} // }
//
.state-value { // .state-value {
width: $button-size; // width: $button-size;
height: $button-size; // height: $button-size;
border-radius: nb-theme(btn-border-radius); // border-radius: nb-theme(btn-border-radius);
//
@include nb-for-theme(corporate) { // @include nb-for-theme(corporate) {
border-radius: nb-theme(btn-semi-round-border-radius); // border-radius: nb-theme(btn-semi-round-border-radius);
} // }
} // }
//
.state-details { // .state-details {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
margin-left: 1rem; // margin-left: 1rem;
margin-right: 1rem; // margin-right: 1rem;
height: $button-size; // height: $button-size;
} // }
} // }
//
.example-container { // .example-container {
@include nb-ltr(padding-right, 0); // @include nb-ltr(padding-right, 0);
@include nb-rtl(padding-left, 0); // @include nb-rtl(padding-left, 0);
} // }
//
.example-container .container-btn { // .example-container .container-btn {
margin-bottom: 1.5rem; // margin-bottom: 1.5rem;
} // }
//
.block-level-buttons .btn-group { // .block-level-buttons .btn-group {
margin-bottom: 1rem; // margin-bottom: 1rem;
} // }
} // }
//
@include media-breakpoint-down(is) { // @include media-breakpoint-down(is) {
ngx-default-buttons ::ng-deep nb-card-header { // ngx-default-buttons ::ng-deep nb-card-header {
flex-direction: column; // flex-direction: column;
align-items: left; // align-items: left;
//
span { // span {
margin-bottom: 1rem; // margin-bottom: 1rem;
} // }
} // }
} // }
//
@include media-breakpoint-down(xs) { // @include media-breakpoint-down(xs) {
//
::ng-deep.icon-buttons .icon-button-examples { // ::ng-deep.icon-buttons .icon-button-examples {
button { // button {
@include nb-ltr(margin-right, 1rem); // @include nb-ltr(margin-right, 1rem);
@include nb-rtl(margin-left, 1rem); // @include nb-rtl(margin-left, 1rem);
} // }
} // }
//
ngx-default-buttons ::ng-deep nb-card-header { // ngx-default-buttons ::ng-deep nb-card-header {
flex-direction: column; // flex-direction: column;
margin-bottom: 0.5rem; // margin-bottom: 0.5rem;
} // }
//
ngx-block-level-buttons ::ng-deep { // ngx-block-level-buttons ::ng-deep {
.btn-primary { // .btn-primary {
padding: 0.75rem 1rem; // padding: 0.75rem 1rem;
} // }
} // }
} // }
} //}

120
src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss
View file

@ -1,60 +1,60 @@
@import '../../../../@theme/styles/themes'; //@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints'; //@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; //@import '~@nebular/theme/styles/global/breakpoints';
//
@include nb-install-component() { //@include nb-install-component() {
//
nb-actions > nb-action { // nb-actions > nb-action {
padding: 0; // padding: 0;
} // }
//
nb-action { // nb-action {
i { // i {
color: nb-theme(color-fg); // color: nb-theme(color-fg);
font-size: 2.5rem; // font-size: 2.5rem;
@include nb-ltr(margin-right, 1rem); // @include nb-ltr(margin-right, 1rem);
@include nb-rtl(margin-left, 1rem); // @include nb-rtl(margin-left, 1rem);
//
@include nb-for-theme(corporate) { // @include nb-for-theme(corporate) {
color: nb-theme(actions-fg); // color: nb-theme(actions-fg);
} // }
} // }
//
span { // span {
font-family: nb-theme(font-secondary); // font-family: nb-theme(font-secondary);
font-weight: nb-theme(font-weight-bold); // font-weight: nb-theme(font-weight-bold);
color: nb-theme(color-fg-heading); // color: nb-theme(color-fg-heading);
text-transform: uppercase; // text-transform: uppercase;
} // }
} // }
//
@include media-breakpoint-down(md) { // @include media-breakpoint-down(md) {
nb-actions nb-action { // nb-actions nb-action {
padding: 0 0.75rem; // padding: 0 0.75rem;
} // }
} // }
@include media-breakpoint-down(sm) { // @include media-breakpoint-down(sm) {
nb-card-body { // nb-card-body {
padding: 1rem; // padding: 1rem;
} // }
//
nb-action { // nb-action {
font-size: 0.75rem; // font-size: 0.75rem;
i { // i {
font-size: 2rem; // font-size: 2rem;
@include nb-ltr(margin-right, 0.5rem); // @include nb-ltr(margin-right, 0.5rem);
@include nb-rtl(margin-left, 0.5rem); // @include nb-rtl(margin-left, 0.5rem);
} // }
} // }
} // }
//
@include media-breakpoint-down(is) { // @include media-breakpoint-down(is) {
nb-action i { // nb-action i {
font-size: 1.75rem; // font-size: 1.75rem;
margin: 0; // margin: 0;
} // }
span { // span {
display: none; // display: none;
} // }
} // }
} //}

60
src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss
View file

@ -1,30 +1,30 @@
@import '../../../../@theme/styles/themes'; //@import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons'; //@import '~@nebular/bootstrap/styles/buttons';
//
@include nb-install-component() { //@include nb-install-component() {
//
nb-card-body { // nb-card-body {
padding: 0 0 29px; // padding: 0 0 29px;
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
justify-content: space-between; // justify-content: space-between;
} // }
//
.shape-container { // .shape-container {
margin: 1.25rem 1.25rem 0; // margin: 1.25rem 1.25rem 0;
} // }
//
.container-title { // .container-title {
margin-bottom: 0.25rem; // margin-bottom: 0.25rem;
} // }
//
.subheader { // .subheader {
margin-bottom: 1rem; // margin-bottom: 1rem;
font-size: 0.875rem; // 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); // font-weight: nb-theme(font-weight-bold);
} // }
} // }
} //}

52
src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss
View file

@ -1,26 +1,26 @@
@import '../../../../@theme/styles/themes'; //@import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons'; //@import '~@nebular/bootstrap/styles/buttons';
//
@include nb-install-component() { //@include nb-install-component() {
//
nb-card-body { // nb-card-body {
padding: 0 1.25rem 1.25rem 0; // padding: 0 1.25rem 1.25rem 0;
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
} // }
//
.container-title { // .container-title {
margin-bottom: 0.25rem; // margin-bottom: 0.25rem;
} // }
//
.size-container { // .size-container {
margin: 1.25rem 0 0 1.25rem; // margin: 1.25rem 0 0 1.25rem;
} // }
//
.subheader { // .subheader {
margin-bottom: 0.75rem; // margin-bottom: 0.75rem;
font-size: 0.875rem; // font-size: 0.875rem;
font-weight: nb-theme(font-weight-bolder); // font-weight: nb-theme(font-weight-bolder);
color: nb-theme(color-fg-heading); // color: nb-theme(color-fg-heading);
} // }
} //}