next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
2019-12-05 17:42:13 +09:00

140 lines
2.3 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;
}
}
.spinner {
width: 100%;
height: 100%;
position: absolute;
padding: 15px 0;
background: rgb(255, 255, 255, 0.6);
display: table;
text-align: center;
span {
display: table-cell;
vertical-align: middle;
color: #666666;
}
}