mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-24 03:10:13 +01:00
refactor: comment button styles
This commit is contained in:
Sergey Andrievskiy
parent
994cb69c29
commit
a37889b410
5 changed files with 296 additions and 296 deletions
|
|
@ -1,77 +1,77 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-groups-header {
|
||||
flex-basis: 20%;
|
||||
|
||||
color: nb-theme(card-header-fg-heading);
|
||||
font-family: nb-theme(card-header-font-family);
|
||||
font-size: nb-theme(card-header-font-size);
|
||||
font-weight: nb-theme(card-header-font-weight);
|
||||
}
|
||||
|
||||
.nb-actions {
|
||||
flex-basis: 80%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
nb-card-body {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0.75rem;
|
||||
|
||||
.action-groups-header {
|
||||
@include nb-ltr(margin, 0 0 0.5rem 0.25rem);
|
||||
@include nb-rtl(margin, 0 0.25rem 0.5rem 0);
|
||||
}
|
||||
}
|
||||
|
||||
nb-action {
|
||||
padding: 0 0.5rem;
|
||||
::ng-deep .control-icon {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
nb-user ::ng-deep {
|
||||
.user-container {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.user-picture {
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
|
||||
nb-action {
|
||||
padding: 0 0.375rem;
|
||||
::ng-deep .control-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
nb-user ::ng-deep {
|
||||
.user-container {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.user-picture {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
nb-card-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
//@import '../../../../@theme/styles/themes';
|
||||
//@import '~@nebular/theme/components/card/card.component.theme';
|
||||
//@import '~bootstrap/scss/mixins/breakpoints';
|
||||
//@import '~@nebular/theme/styles/global/breakpoints';
|
||||
//
|
||||
//@include nb-install-component() {
|
||||
//
|
||||
// nb-card-body {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
//
|
||||
// .action-groups-header {
|
||||
// flex-basis: 20%;
|
||||
//
|
||||
// color: nb-theme(card-header-fg-heading);
|
||||
// font-family: nb-theme(card-header-font-family);
|
||||
// font-size: nb-theme(card-header-font-size);
|
||||
// font-weight: nb-theme(card-header-font-weight);
|
||||
// }
|
||||
//
|
||||
// .nb-actions {
|
||||
// flex-basis: 80%;
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(sm) {
|
||||
// nb-card-body {
|
||||
// flex-direction: column;
|
||||
// align-items: flex-start;
|
||||
// padding: 0.75rem;
|
||||
//
|
||||
// .action-groups-header {
|
||||
// @include nb-ltr(margin, 0 0 0.5rem 0.25rem);
|
||||
// @include nb-rtl(margin, 0 0.25rem 0.5rem 0);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// nb-action {
|
||||
// padding: 0 0.5rem;
|
||||
// ::ng-deep .control-icon {
|
||||
// font-size: 1.75rem;
|
||||
// }
|
||||
// }
|
||||
// nb-user ::ng-deep {
|
||||
// .user-container {
|
||||
// font-size: 0.875rem;
|
||||
// }
|
||||
// .user-picture {
|
||||
// height: 1.75rem;
|
||||
// width: 1.75rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(xs) {
|
||||
//
|
||||
// nb-action {
|
||||
// padding: 0 0.375rem;
|
||||
// ::ng-deep .control-icon {
|
||||
// font-size: 1.5rem;
|
||||
// }
|
||||
// }
|
||||
// nb-user ::ng-deep {
|
||||
// .user-container {
|
||||
// font-size: 0.75rem;
|
||||
// }
|
||||
// .user-picture {
|
||||
// height: 1.5rem;
|
||||
// width: 1.5rem;
|
||||
// }
|
||||
// }
|
||||
// nb-card-body {
|
||||
// padding-left: 0;
|
||||
// padding-right: 0;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -1,103 +1,103 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
::ng-deep {
|
||||
$button-size: 50px;
|
||||
|
||||
.container-title {
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: nb-theme(color-fg-header);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
font-size: 0.75rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.state-container {
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.state-value {
|
||||
width: $button-size;
|
||||
height: $button-size;
|
||||
border-radius: nb-theme(btn-border-radius);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(btn-semi-round-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.state-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
height: $button-size;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
@include nb-ltr(padding-right, 0);
|
||||
@include nb-rtl(padding-left, 0);
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.block-level-buttons .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-default-buttons ::ng-deep nb-card-header {
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
|
||||
span {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
|
||||
::ng-deep.icon-buttons .icon-button-examples {
|
||||
button {
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
ngx-default-buttons ::ng-deep nb-card-header {
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ngx-block-level-buttons ::ng-deep {
|
||||
.btn-primary {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//@import '../../../@theme/styles/themes';
|
||||
//@import '~@nebular/bootstrap/styles/buttons';
|
||||
//@import '~bootstrap/scss/mixins/breakpoints';
|
||||
//@import '~@nebular/theme/styles/global/breakpoints';
|
||||
//
|
||||
//@include nb-install-component() {
|
||||
// ::ng-deep {
|
||||
// $button-size: 50px;
|
||||
//
|
||||
// .container-title {
|
||||
// color: nb-theme(color-fg);
|
||||
// font-family: nb-theme(font-secondary);
|
||||
// margin-bottom: 0.5rem;
|
||||
// }
|
||||
//
|
||||
// .header {
|
||||
// color: nb-theme(color-fg-header);
|
||||
// font-size: 0.875rem;
|
||||
// }
|
||||
//
|
||||
// .subheader {
|
||||
// font-size: 0.75rem;
|
||||
// font-weight: nb-theme(font-weight-light);
|
||||
// color: nb-theme(color-fg);
|
||||
// }
|
||||
//
|
||||
// .btn-demo {
|
||||
// width: 180px;
|
||||
// }
|
||||
//
|
||||
// .state-container {
|
||||
// display: flex;
|
||||
//
|
||||
// &:not(:last-child) {
|
||||
// margin-bottom: 1rem;
|
||||
// }
|
||||
//
|
||||
// .state-value {
|
||||
// width: $button-size;
|
||||
// height: $button-size;
|
||||
// border-radius: nb-theme(btn-border-radius);
|
||||
//
|
||||
// @include nb-for-theme(corporate) {
|
||||
// border-radius: nb-theme(btn-semi-round-border-radius);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .state-details {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: center;
|
||||
// margin-left: 1rem;
|
||||
// margin-right: 1rem;
|
||||
// height: $button-size;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .example-container {
|
||||
// @include nb-ltr(padding-right, 0);
|
||||
// @include nb-rtl(padding-left, 0);
|
||||
// }
|
||||
//
|
||||
// .example-container .container-btn {
|
||||
// margin-bottom: 1.5rem;
|
||||
// }
|
||||
//
|
||||
// .block-level-buttons .btn-group {
|
||||
// margin-bottom: 1rem;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(is) {
|
||||
// ngx-default-buttons ::ng-deep nb-card-header {
|
||||
// flex-direction: column;
|
||||
// align-items: left;
|
||||
//
|
||||
// span {
|
||||
// margin-bottom: 1rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(xs) {
|
||||
//
|
||||
// ::ng-deep.icon-buttons .icon-button-examples {
|
||||
// button {
|
||||
// @include nb-ltr(margin-right, 1rem);
|
||||
// @include nb-rtl(margin-left, 1rem);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ngx-default-buttons ::ng-deep nb-card-header {
|
||||
// flex-direction: column;
|
||||
// margin-bottom: 0.5rem;
|
||||
// }
|
||||
//
|
||||
// ngx-block-level-buttons ::ng-deep {
|
||||
// .btn-primary {
|
||||
// padding: 0.75rem 1rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,60 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-actions > nb-action {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nb-action {
|
||||
i {
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(actions-fg);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
nb-actions nb-action {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
nb-card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
nb-action {
|
||||
font-size: 0.75rem;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
@include nb-ltr(margin-right, 0.5rem);
|
||||
@include nb-rtl(margin-left, 0.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-action i {
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
//@import '../../../../@theme/styles/themes';
|
||||
//@import '~bootstrap/scss/mixins/breakpoints';
|
||||
//@import '~@nebular/theme/styles/global/breakpoints';
|
||||
//
|
||||
//@include nb-install-component() {
|
||||
//
|
||||
// nb-actions > nb-action {
|
||||
// padding: 0;
|
||||
// }
|
||||
//
|
||||
// nb-action {
|
||||
// i {
|
||||
// color: nb-theme(color-fg);
|
||||
// font-size: 2.5rem;
|
||||
// @include nb-ltr(margin-right, 1rem);
|
||||
// @include nb-rtl(margin-left, 1rem);
|
||||
//
|
||||
// @include nb-for-theme(corporate) {
|
||||
// color: nb-theme(actions-fg);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// span {
|
||||
// font-family: nb-theme(font-secondary);
|
||||
// font-weight: nb-theme(font-weight-bold);
|
||||
// color: nb-theme(color-fg-heading);
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(md) {
|
||||
// nb-actions nb-action {
|
||||
// padding: 0 0.75rem;
|
||||
// }
|
||||
// }
|
||||
// @include media-breakpoint-down(sm) {
|
||||
// nb-card-body {
|
||||
// padding: 1rem;
|
||||
// }
|
||||
//
|
||||
// nb-action {
|
||||
// font-size: 0.75rem;
|
||||
// i {
|
||||
// font-size: 2rem;
|
||||
// @include nb-ltr(margin-right, 0.5rem);
|
||||
// @include nb-rtl(margin-left, 0.5rem);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(is) {
|
||||
// nb-action i {
|
||||
// font-size: 1.75rem;
|
||||
// margin: 0;
|
||||
// }
|
||||
// span {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 0 29px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.shape-container {
|
||||
margin: 1.25rem 1.25rem 0;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
span:nth-child(2) {
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
//@import '../../../../@theme/styles/themes';
|
||||
//@import '~@nebular/bootstrap/styles/buttons';
|
||||
//
|
||||
//@include nb-install-component() {
|
||||
//
|
||||
// nb-card-body {
|
||||
// padding: 0 0 29px;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
//
|
||||
// .shape-container {
|
||||
// margin: 1.25rem 1.25rem 0;
|
||||
// }
|
||||
//
|
||||
// .container-title {
|
||||
// margin-bottom: 0.25rem;
|
||||
// }
|
||||
//
|
||||
// .subheader {
|
||||
// margin-bottom: 1rem;
|
||||
// font-size: 0.875rem;
|
||||
//
|
||||
// span:nth-child(2) {
|
||||
// color: nb-theme(color-fg-heading);
|
||||
// font-weight: nb-theme(font-weight-bold);
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 1.25rem 1.25rem 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.size-container {
|
||||
margin: 1.25rem 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
//@import '../../../../@theme/styles/themes';
|
||||
//@import '~@nebular/bootstrap/styles/buttons';
|
||||
//
|
||||
//@include nb-install-component() {
|
||||
//
|
||||
// nb-card-body {
|
||||
// padding: 0 1.25rem 1.25rem 0;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// }
|
||||
//
|
||||
// .container-title {
|
||||
// margin-bottom: 0.25rem;
|
||||
// }
|
||||
//
|
||||
// .size-container {
|
||||
// margin: 1.25rem 0 0 1.25rem;
|
||||
// }
|
||||
//
|
||||
// .subheader {
|
||||
// margin-bottom: 0.75rem;
|
||||
// font-size: 0.875rem;
|
||||
// font-weight: nb-theme(font-weight-bolder);
|
||||
// color: nb-theme(color-fg-heading);
|
||||
// }
|
||||
//}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue