mirror of https://github.com/keeweb/keeweb.git
103 lines
1.9 KiB
SCSS
103 lines
1.9 KiB
SCSS
.app {
|
|
@include size(100%);
|
|
@include display(flex);
|
|
@include align-items(stretch);
|
|
@include flex-direction(column);
|
|
@include justify-content(flex-start);
|
|
|
|
&__body {
|
|
@include flex(1);
|
|
@include display(flex);
|
|
@include align-items(stretch);
|
|
@include flex-direction(row);
|
|
@include justify-content(flex-start);
|
|
overflow: hidden;
|
|
}
|
|
|
|
&__menu {
|
|
@include flex(0 0 auto);
|
|
@include display(flex);
|
|
width: 150px;
|
|
@include mobile {
|
|
&:not(.menu-visible) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__list-wrap {
|
|
@include flex(1);
|
|
@include display(flex);
|
|
@include align-items(stretch);
|
|
@include flex-direction(row);
|
|
@include justify-content(flex-start);
|
|
&.app__list-wrap--table {
|
|
@include flex-direction(column);
|
|
}
|
|
}
|
|
|
|
&__menu-drag, &__list-drag {
|
|
@include drag-handle;
|
|
@include flex(0 0 auto);
|
|
width: 1px;
|
|
cursor: col-resize;
|
|
@include mobile { display: none; }
|
|
}
|
|
|
|
&__list-drag {
|
|
.app__list-wrap--table & {
|
|
width: auto;
|
|
height: 1px;
|
|
cursor: row-resize;
|
|
}
|
|
}
|
|
|
|
.menu-visible + &__menu-drag {
|
|
display: block;
|
|
}
|
|
|
|
&__list {
|
|
@include flex(0 0 250px);
|
|
@include display(flex);
|
|
@include align-items(stretch);
|
|
@include flex-direction(column);
|
|
overflow-y: auto;
|
|
.app__list-wrap--table & {
|
|
}
|
|
@include mobile {
|
|
width: 100vw;
|
|
&.app__list--details-visible {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__details {
|
|
@include flex(1);
|
|
@include display(flex);
|
|
overflow: hidden;
|
|
padding: $base-spacing;
|
|
position: relative;
|
|
@include mobile {
|
|
width: 100vw;
|
|
padding: $base-padding;
|
|
}
|
|
}
|
|
|
|
&__grp {
|
|
@include flex(1);
|
|
@include display(flex);
|
|
overflow: hidden;
|
|
padding: $base-spacing;
|
|
position: relative;
|
|
@include mobile {
|
|
padding: $base-padding;
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
@include flex(0 0 auto);
|
|
@include th { border-top: light-border(); }
|
|
}
|
|
}
|