165 lines
2.6 KiB
SCSS
165 lines
2.6 KiB
SCSS
@import "variables.scss";
|
|
|
|
app-root {
|
|
display: flex;
|
|
flex-flow: column;
|
|
height: 100%;
|
|
}
|
|
|
|
#container {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.vault {
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
> .items,
|
|
> .details,
|
|
> .logo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.inner-content {
|
|
padding: 10px 15px;
|
|
}
|
|
}
|
|
|
|
> .items {
|
|
order: 2;
|
|
width: 28%;
|
|
min-width: 200px;
|
|
max-width: 350px;
|
|
border-right: 1px solid #000000;
|
|
|
|
@include themify($themes) {
|
|
background-color: themed("backgroundColor");
|
|
border-right-color: themed("borderColor");
|
|
}
|
|
|
|
.no-items {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 0 10px;
|
|
|
|
.no-items-image {
|
|
@include themify($themes) {
|
|
content: url("../images/search-desktop" + themed("svgSuffix"));
|
|
}
|
|
}
|
|
|
|
.bwi {
|
|
margin-bottom: 10px;
|
|
|
|
@include themify($themes) {
|
|
color: themed("disabledIconColor");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .details {
|
|
flex: 1;
|
|
min-width: 0;
|
|
order: 3;
|
|
|
|
@include themify($themes) {
|
|
background-color: themed("backgroundColorAlt2");
|
|
}
|
|
|
|
.inner-content {
|
|
min-width: 400px;
|
|
}
|
|
|
|
.box {
|
|
max-width: 550px;
|
|
margin: 30px auto 0 auto;
|
|
|
|
&:first-child {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
> form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.footer {
|
|
button {
|
|
margin-right: 10px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .logo {
|
|
flex: 1;
|
|
min-width: 0;
|
|
order: 3;
|
|
|
|
.content {
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.inner-content {
|
|
min-width: 320px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
img {
|
|
width: 284px;
|
|
opacity: 0.3;
|
|
transition: all 1s ease-in-out;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
flex: 1 1 auto;
|
|
position: relative;
|
|
overflow: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.footer {
|
|
height: 55px;
|
|
flex: 0 0 auto;
|
|
border-top: 1px solid #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 15px;
|
|
|
|
@include themify($themes) {
|
|
background-color: themed("backgroundColorAlt");
|
|
border-top-color: themed("borderColor");
|
|
}
|
|
|
|
.right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|