1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
vault-frontend/src/containers/examples/HorizontalExample/styles.scss
2019-08-02 18:02:36 +07:00

91 lines
1.6 KiB
SCSS

.wrap {
flex: 1;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
}
.card {
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
background: darken($content_bg, 4%);
box-shadow: transparentize(black, 0.7) 0 10px 5px;
}
.editor {
background: $content_bg;
min-height: 200px;
min-width: 50vw;
border-radius: $radius;
display: flex;
align-items: stretch;
justify-content: stretch;
flex-direction: column;
flex: 1;
@include outer_shadow();
}
.panel {
}
.features {
display: flex;
}
.feature_add_btn {
width: 40px;
height: 40px;
border-radius: 24px;
background: $red_gradient;
display: flex;
align-items: center;
justify-content: center;
}
.feature {
background: lighten($content_bg, 4%);
padding: $gap $gap $gap 20px;
border-radius: 24px;
font: $font_14_semibold;
height: 40px;
box-sizing: border-box;
}
.feature_cell {
background: lighten($content_bg, 4%);
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
box-sizing: border-box;
border-radius: $radius;
}
.uploads {
flex: 1;
padding: $gap;
// padding-bottom: 0;
display: grid;
align-items: center;
justify-content: center;
grid-column-gap: $gap;
grid-row-gap: $gap;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@media (max-width: 600px) {
grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
}
}
.cell {
background: lighten($content_bg, 6%);
border-radius: $radius;
padding-bottom: 100%;
}