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

fix(buttons): buttons responsive

Browse source
This commit is contained in:
Mikhail Hryb 2017-09-18 11:27:40 +03:00 • committed by KostyaDanovsky
parent b1a0024a27
commit 1c4c964e25
5 changed files with 93 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,11 +9,15 @@
}
.action-groups-header {
flex: 1;
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%;
}
}

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

@ -68,7 +68,12 @@
.icon-buttons .icon-button-examples {
display: flex;
justify-content: space-between;
justify-content: flex-start;
button {
margin-right: 2rem;
min-width: 4rem;
}
}
.icon-buttons .icon-button-examples:not(:last-child) {
@ -76,12 +81,58 @@
}
}
@include media-breakpoint-down(xs) {
@include media-breakpoint-down(xxxl) {
ngx-default-buttons /deep/ nb-card-header {
flex-direction: column;
margin-bottom: 0.5rem;
}
}
@include media-breakpoint-down(sm) {
ngx-action-groups /deep/ nb-card-body {
flex-direction: column;
align-items: flex-start;
padding: 0.75rem;
.action-groups-header {
margin: 0 0 0.5rem 0.25rem;
}
}
}
@include media-breakpoint-down(is) {
ngx-action-groups /deep/ nb-card-body {
nb-action {
padding: 0.75rem;
}
.control-icon, .start-search {
font-size: 1.75rem;
}
.user-container {
font-size: 1rem;
}
.user-picture {
height: 1.75rem;
width: 1.75rem;
}
}
}
@include media-breakpoint-down(xs) {
/deep/.icon-buttons .icon-button-examples {
button {
margin-right: 1rem;
}
}
ngx-action-groups /deep/ nb-card-body {
nb-action {
padding: 0.5rem;
}
@ -98,10 +149,6 @@
height: 1.5rem;
width: 1.5rem;
}
.action-groups-header {
margin: 0 0 0.5rem 0.25rem;
}
}
ngx-labeled-actions-group /deep/ nb-card-body {
@ -113,5 +160,11 @@
flex-direction: column;
margin-bottom: 0.5rem;
}
ngx-block-level-buttons /deep/ {
.btn-primary {
padding: 0.75rem 1rem;
}
}
}
}

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

@ -8,6 +8,7 @@
span {
flex: 1;
margin-bottom: 1rem;
}
.dropdown {
@ -16,8 +17,8 @@
}
}
.example-container:nth-child(n + 4) {
margin-top: 2rem;
.example-container {
margin-bottom: 2rem;
}
.primary-container {

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

@ -106,4 +106,8 @@
box-shadow: btn-hero-secondary-bevel();
}
}
.example-container {
margin-bottom: 2rem;
}
}

24
src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
View file

@ -23,11 +23,31 @@
}
}
@include media-breakpoint-down(xs) {
@include media-breakpoint-down(sm) {
nb-action {
font-size: 0.75rem;
i {
font-size: 2rem;
font-size: 1.5rem;
}
}
}
@include media-breakpoint-down(is) {
nb-action {
font-size: 0.625rem;
}
}
@include media-breakpoint-down(xs) {
nb-action {
font-size: 0.5rem;
span {
display: none;
}
i {
margin: 0;
}
}
}