199 lines
3.6 KiB
SCSS
Raw Normal View History

2020-01-20 18:54:24 +09:00
$listH-row2: 60px;
$tablet-s-width: 768px;
2020-01-20 18:54:24 +09:00
2019-11-19 13:13:08 +09:00
@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-filebox {
2019-11-19 13:13:08 +09:00
width: 100%;
height: calc(100% - 60px);
.rightDrawer-tab {
.mat-tab-label {
width: 50%;
}
}
}
.select-filebox {
2019-11-20 17:31:08 +09:00
position: relative;
2019-11-19 13:13:08 +09:00
display: flex;
flex-flow: column;
margin: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
display: none;
}
2020-01-10 15:22:45 +09:00
.select-filed {
height: calc(100% - 50px);
overflow-y: auto;
.select-flie {
display: flex;
flex-flow: row;
align-items: flex-start;
color: #212121;
padding: 10px;
border-bottom: 1px dotted #dddddd;
ul {
padding: 0;
.name {
font-weight: 600;
word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;
}
2019-11-19 13:13:08 +09:00
}
}
}
2019-11-20 17:31:08 +09:00
.empty-msg {
display: inline-flex;
flex-flow: column;
margin: auto 0;
align-items: center;
justify-content: center;
color: #999999;
span {
padding: 6px;
}
}
.select-file-option {
position: absolute;
display: flex;
justify-content: space-between;
width: 100%;
text-align: center;
padding: 10px 0;
bottom: 4px;
span {
width: 28px;
height: 28px;
display: inline-flex;
text-align: center;
justify-content: center;
align-items: center;
margin: 0 20px;
cursor: pointer;
svg {
}
&:hover {
border-radius: 50%;
background-color: #999999;
color: #ffffff !important;
}
}
}
2019-11-19 13:13:08 +09:00
}
.mat-table {
width: 100%;
2019-11-19 13:13:08 +09:00
position: relative;
th.infos {
2020-01-20 18:54:24 +09:00
padding: 10px;
2019-11-19 13:13:08 +09:00
}
tr.mat-row {
2020-01-20 18:54:24 +09:00
height: $listH-row2;
2020-01-10 15:22:45 +09:00
.cdk-column-check {
width: 40px;
}
2019-11-19 13:13:08 +09:00
.file-info {
2020-01-20 18:54:24 +09:00
padding: 10px;
2019-11-19 13:13:08 +09:00
display: grid;
2020-01-20 18:54:24 +09:00
height: $listH-row2;
2019-11-19 13:13:08 +09:00
.file-name {
2020-01-10 15:22:45 +09:00
font-weight: 500;
2019-11-19 13:13:08 +09:00
width: 100%;
@include ellipsis(1);
}
.download-period {
font-size: 12px;
width: 100%;
@include ellipsis(1);
}
.progress {
position: relative;
.mat-progress-bar {
position: absolute;
}
}
2019-11-19 13:13:08 +09:00
}
2020-01-10 15:22:45 +09:00
.file-size {
span {
width: 100px;
text-align: right;
@include ellipsis(1);
}
}
2019-11-19 13:13:08 +09:00
}
}
2019-11-20 17:31:08 +09:00
.table-box {
height: calc(100% - 440px);
2019-11-19 13:13:08 +09:00
overflow-y: auto;
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
height: calc(100% - 146px);
}
2020-01-10 15:22:45 +09:00
th {
2020-01-20 18:54:24 +09:00
font-size: 1em;
2020-01-10 15:22:45 +09:00
color: #333333;
}
2020-01-20 18:54:24 +09:00
td {
font-size: 1em;
}
2019-11-19 13:13:08 +09:00
}
2020-01-10 15:22:45 +09:00
2019-11-19 13:13:08 +09:00
.mat-paginator-container {
display: flex;
flex-flow: column;
}
.mat-row:hover {
background: rgba(0, 0, 0, 0.04);
cursor: pointer;
}
::ng-deep .footer-fix {
2019-11-19 13:13:08 +09:00
position: absolute;
bottom: 0;
min-height: 40px;
width: 100%;
2019-11-19 13:13:08 +09:00
flex-direction: column;
box-sizing: border-box;
display: flex;
2019-11-20 17:31:08 +09:00
border-top: 1px solid #dddddd;
2019-11-19 13:13:08 +09:00
.btn-box {
height: 50px;
padding-bottom: 10px;
width: 100%;
background-color: #ffffff;
button {
margin: 5px;
2020-01-20 18:54:24 +09:00
font-size: 0.9em;
2020-01-23 12:11:45 +09:00
padding: 0 12px;
2019-11-19 13:13:08 +09:00
}
}
.mat-paginator-page-size {
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
display: none;
}
}
2019-11-19 13:13:08 +09:00
}
2019-11-20 17:31:08 +09:00
::ng-deep .mat-form-field-appearance-legacy {
.mat-form-field-infix {
padding: 6px;
}
}