src/app/articles/search-condition/search-condition.component.scss
.search-condition {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 24px;
border-radius: 2px;
box-shadow: 1px 1px 10px -1px rgba(0, 0, 0, 0.4);
padding: 12px;
padding-top: 48px;
&__header {
display: flex;
padding: 12px;
color: white;
background: #4051b4;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 48px;
z-index: 1;
box-sizing: border-box;
&__title {
font-size: 18px;
&__count {
padding-left: 18px;
font-size: 10px;
}
}
&__spacer {
flex: 1 1 auto;
}
&__operation-btn {
margin-top: -8px;
margin-bottom: -8px;
}
}
&__content {
overflow-y: scroll;
max-height: 80vh;
$parent: &;
&_noconditions {
@extend #{$parent};
color: gray;
padding: 24px;
font-size: 18px;
margin-top: 12px;
background: #e6e6e6;
height: 60px;
border-radius: 4px;
}
}
}
.conditions {
&__condition {
margin-top: 12px;
&_checked {
position: relative;
&:after {
display: block;
position: absolute;
content: '';
width: 10px;
background-color: #ec407a;
top: 0px;
left: 0px;
z-index: 1;
bottom: 0;
border-radius: 4px 0 0 4px;
}
}
}
}
.condition {
&__title {
height: 36px;
display: flex;
font-size: 24px;
margin-bottom: 12px;
cursor: pointer;
margin-top: -18px !important;
&:hover {
opacity: 0.6;
color: #F461B3;
}
&_checked {
color: #ec407a;
}
}
&__users {
display: flex;
flex-wrap: wrap;
margin-top: -8px !important;
margin-left: -8px;
}
&__date {
background: #e6e6e6;
margin: 12px 0;
padding: 12px;
border-radius: 4px;
box-sizing: border-box;
height: 36px;
display: flex;
align-items: center;
&__statement {
margin-left: 8px;
}
}
}
.user {
color: #5a5a5a;
display: flex;
height: 36px;
padding: 8px;
box-sizing: border-box;
align-items: center;
background: #e6e6e6;
border-radius: 2px;
margin-top: 8px;
margin-left: 8px;
cursor: pointer;
&:hover {
opacity: 0.8;
}
&:focus {
outline: 0;
}
&__icon {
min-width: 24px;
width: 24px;
height: 24px;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
box-shadow: #2f2f2f 0 0 1px 0;
image-rendering: -webkit-optimize-contrast;
background: white;
display: block;
}
&__userId {
width: 100%;
margin: 0;
padding: 8px 0;
}
}