TeaWeb/shared/js/ui/modal/avatar-upload/Renderer.scss
2021-03-24 17:57:21 +01:00

138 lines
No EOL
2.3 KiB
SCSS

@import "../../../../css/static/mixin";
@import "../../../../css/static/properties";
.container {
display: flex;
flex-direction: column;
padding: 1em;
width: 30em;
&.windowed {
height: 100%;
width: 100%;
}
}
.containerSelect {
display: flex;
flex-direction: column;
.containerFile {
display: flex;
flex-direction: row;
justify-content: flex-start;
.button {
margin-right: .5em;
}
.name {
align-self: center;
@include text-dotdotdot();
}
}
.containerLimit {
margin-top: .1em;
margin-left: .25em;
font-size: .9em;
color: #666;
&.error {
color: #a32929;
}
}
}
.containerPreview {
display: flex;
flex-direction: column;
margin-top: 1em;
.title {
color: #557edc;
text-transform: uppercase;
}
.previews {
margin-top: .5em;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
}
.preview {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 10em;
.imageContainer {
width: 1em;
height: 1em;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
align-self: center;
//background: #353535;
box-shadow: inset 0 0 5px #00000040;
.image {
align-self: center;
max-height: 100%;
max-width: 100%;
/* We currently strech all avatars */
/*
&.heightBound {
height: 100%;
}
&.widthBound {
width: 100%;
}
*/
width: 100%;
height: 100%;
}
&.sizeChatInfo {
height: 10em;
width: 10em;
}
&.sizeChat {
height: 2.5em;
width: 2.5em;
}
}
.name {
margin-top: 1em;
text-align: center;
}
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 1em;
margin-top: auto;
}