scinote-web/app/assets/stylesheets/shared/avatar.scss

102 lines
1.6 KiB
SCSS
Raw Normal View History

2019-10-02 15:52:37 +08:00
// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
// scss-lint:disable NestingDepth ImportantRule
@import "constants";
@import "mixins";
.global-avatar-container {
border-radius: 15px;
display: inline-block;
height: 30px;
overflow: hidden;
position: relative;
width: 30px;
img {
border-radius: 15px;
height: 100%;
object-fit: cover;
width: 100%;
}
}
.new-avatar-preview-container {
height: 200px;
margin-bottom: 45px;
position: relative;
width: 100%;
}
2019-10-01 22:49:46 +08:00
.modal-user-avatar {
.modal-dialog {
width: 350px;
}
.option-text {
margin-bottom: 10px;
text-align: center;
}
.avatar-collection {
display: grid;
grid-template-columns: auto auto auto;
height: 215px;
2019-11-05 17:43:02 +08:00
padding: 5px 35px 0;
2019-10-01 22:49:46 +08:00
position: relative;
.avatar {
border-radius: 5px;
cursor: pointer;
height: 100px;
margin-bottom: 5px;
transition: $md-transaction;
2019-10-02 15:52:37 +08:00
width: 80px;
2019-10-01 22:49:46 +08:00
&:hover {
box-shadow: $md-shadow;
}
}
img {
height: 60px;
margin: 20px 10px;
user-select: none;
width: 60px;
}
}
.upload-block {
align-items: center;
display: flex;
flex-direction: column;
.current-avatar {
height: 150px;
2019-10-02 15:52:37 +08:00
margin: 25px 0 45px;
2019-10-01 22:49:46 +08:00
width: 150px;
img {
border-radius: 50%;
height: 100%;
width: 100%;
}
}
.avatar-preview-container {
height: 150px;
margin: 20px 0 50px;
position: relative;
width: 250px;
}
.upload-photo {
margin-bottom: 10px;
width: 150px;
}
}
.modal-footer {
2019-10-02 15:52:37 +08:00
text-align: center;
2019-10-01 22:49:46 +08:00
}
2019-10-02 15:52:37 +08:00
}