taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix flexbox layout in taskboard

stable
Xavier Julián 2014-12-10 14:12:56 +01:00
parent 57163aafb7
commit c0e126a938
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/styles/layout/base.scss
View File

@ -86,24 +86,27 @@ body {
} }
.wrapper { .wrapper {
@include table-flex(); @include display(flex);
min-height: 100vh; min-height: 100vh;
padding-left: 90px; padding-left: 90px;
} }
.menu-secondary { .menu-secondary {
@include table-flex-child(1, 260px, 0, 260px); @include flex(1);
background: $whitish; background: $whitish;
min-width: 0;
padding: 2rem 1rem; padding: 2rem 1rem;
width: 260px;
&.filters-bar { &.filters-bar {
@include table-flex-child(0, 1px, 0, 1px); @include flex(0);
@include transition(all .2s linear); @include transition(all .2s linear);
padding: 0; padding: 0;
width: 0;
&.active { &.active {
@include table-flex-child(1, 260px, 0, 260px); @include flex(1);
@include transition(all .2s linear); @include transition(all .2s linear);
padding: 2em 1em; padding: 2em 1em;
width: 260px;
.filters-inner { .filters-inner {
@include transition (all .4s ease-in); @include transition (all .4s ease-in);
opacity: 1; opacity: 1;
@ -113,7 +116,7 @@ body {
} }
.menu-tertiary { .menu-tertiary {
@include table-flex-child(1, 210px, 0, 210px); @include flex(1);
background-color: $dark-grayish-lime-green; background-color: $dark-grayish-lime-green;
padding: 2em 1em; padding: 2em 1em;
} }
@ -123,9 +126,10 @@ body {
} }
.main { .main {
@include table-flex-child(8, 600px, 0, 600px); @include flex(4);
padding: 2rem; padding: 2rem;
padding-bottom: 1rem; padding-bottom: 1rem;
min-width: 600px;
} }
.icon { .icon {
@ -137,7 +141,7 @@ body {
} }
.header-with-actions { .header-with-actions {
@include table-flex(stretch, center, flex, row, wrap, space-between); @include display(flex);
margin-bottom: 1rem; margin-bottom: 1rem;
.action-buttons { .action-buttons {
@include flex-shrink(0); @include flex-shrink(0);