next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

124 lines
2.0 KiB
SCSS

@mixin ellipsis($row) {
overflow: hidden;
text-overflow: ellipsis;
@if $row == 1 {
display: block;
white-space: nowrap;
word-wrap: normal;
} @else if $row >= 2 {
display: -webkit-box;
-webkit-line-clamp: $row;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
}
::ng-deep .rightDrawer-albumbox {
height: 100%;
overflow: hidden;
.mat-tab-labels {
.mat-tab-label {
width: 50%;
}
}
}
.select-filebox{
display:flex;
flex-flow: column;
margin:10px;
padding:10px;
border:1px solid #cccccc;
border-radius: 4px;
.select-file{
color: #212121;
border-bottom: 1px dotted #dddddd;
text-align:center;
padding-bottom:10px;
}
ul{
padding-top:10px;
li{
@include ellipsis(1);
&.name{
font-weight:600;
}
}
}
.empty-msg{
display:inline-flex;
flex-flow: column;
margin:auto 0;
align-items: center;
justify-content: center;
color:#999999;
span{
padding:6px;
}
}
}
.search-list{
display:flex;
padding:0 10px;
height: calc(100% - 450px);
overflow-y: auto;
flex-wrap: wrap;
.img-item {
cursor: pointer;
margin-bottom:10px;
margin-right:9px;
position: relative;
height: 150px;
dl{
dt{
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
background-color: #efefef;
border: 1px dotted #cccccc;
box-sizing: border-box;
img{
width:100%;
height:100%;
}
}
dd{
.btn-download{
margin-left:auto;
}
}
}
&:nth-child(3n+0){
margin-right:0;
}
}
}
::ng-deep .album-scrollbar{
.ps{
.ps-content{
display:flex;
flex-flow: wrap;
}
}
}
.preview-image,
.preview-video{
max-height: 140px;
}
.btn-box {
position:absolute;
bottom:0;
height:50px;
margin-bottom:10px;
width:100%;
button {
margin: 5px;
}
}