168 lines
3.8 KiB
SCSS
Raw Normal View History

2020-01-29 20:00:10 +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;
}
}
2020-01-30 17:16:20 +09:00
@mixin disable-selection {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
2020-01-29 09:58:40 +09:00
.search-scrollbar {
height: 550px;
}
2020-01-29 20:00:10 +09:00
::ng-deep .search-area {
.search-container {
width: 100%;
max-width: 100%;
.icon-img {
color: #777777;
transform: translateY(-4px);
}
.mat-form-field {
color: #333333;
width: 100%;
margin-left: -20px;
.mat-form-field-infix {
padding-left: 26px;
}
}
}
}
2020-01-29 09:58:40 +09:00
2020-01-29 20:00:10 +09:00
.table-box {
font-size: 13px;
width: 100%;
overflow: hidden;
2020-01-30 14:21:06 +09:00
display: flex;
table {
table-layout: fixed;
width: 100%;
th {
2020-01-30 17:16:20 +09:00
@include disable-selection;
2020-01-30 14:21:06 +09:00
text-align: center;
2020-01-30 19:41:37 +09:00
&.profile {
width: 200px;
min-width: 200px;
}
2020-01-30 14:21:06 +09:00
}
td.mat-cell {
padding: 6px;
position: relative;
width: 100px;
div {
@include ellipsis(1);
2020-01-30 19:41:37 +09:00
&.table-item {
display: flex;
width: 200px;
min-width: 200px;
2020-01-30 14:21:06 +09:00
font-size: 1em;
2020-01-30 19:41:37 +09:00
div {
display: inline-flex;
height: 100%;
align-self: center;
.name {
@include ellipsis(1);
font-size: 1em;
font-weight: 600;
}
.status {
font-size: 0.84em;
}
2020-01-30 14:21:06 +09:00
2020-01-30 19:41:37 +09:00
&.profile {
width: 70px;
text-overflow: unset;
flex: 0 0 auto;
.presence {
transform: translateY(6px);
}
.thumbnail {
cursor: pointer;
&-mask {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 0;
position: relative;
img {
width: 40px;
height: auto;
background-color: #efefef;
}
}
}
.marker-mobile-state {
position: absolute;
background-color: #ffffff;
width: 20px;
height: 20px;
border-radius: 50%;
bottom: 4px;
left: 50px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
.mat-icon {
font-size: 0.9em;
width: 18px;
height: 18px;
line-height: 18px;
min-width: 18px;
min-height: 18px;
}
2020-01-30 14:21:06 +09:00
}
}
}
}
2020-01-29 20:00:10 +09:00
}
}
}
}
2020-01-29 09:58:40 +09:00
2020-01-30 14:21:06 +09:00
.work-status {
display: inline-block;
justify-content: center;
justify-items: center;
color: #ffffff;
height: 100%;
min-width: 32px;
margin-right: 4px;
border-radius: 24px;
flex: 0 0 auto;
font-size: 0.8em;
text-align: center;
}
2020-01-31 15:27:08 +09:00
::ng-deep .search-result-footer {
position: relative;
.mat-paginator-container {
.mat-paginator-page-size {
position: absolute;
left: 0;
top: -10px;
}
.mat-paginator-range-actions {
padding-top: 10px;
}
}
2020-01-29 20:00:10 +09:00
}