src/app/articles/article-list/article-list.component.scss
.wrapper {
display: flex;
}
.message-area {
margin: 24px 24px 72px;
max-width: 720px;
min-width: 400px;
border-radius: 4px;
color: #464545;
background: #d2d2d2;
padding: 24px;
&__main {
display: flex;
&__icon {
width: 10%;
padding: 12px;
box-sizing: border-box;
}
&__message {
width: 90%;
}
}
&__operation {
margin-top: 24px;
display: flex;
&__spacer {
flex: 1 1 auto;
}
}
}
.prograss-bar {
margin: 24px 24px 72px;
max-width: 720px;
min-width: 400px;
display: flex;
justify-content: center;
}
.article-list {
margin: 24px 24px 72px;
max-width: 720px;
min-width: 400px;
&__item {
margin-bottom: 24px;
}
&__operation {
display: flex;
flex-wrap: nowrap;
background: white;
height: 48px;
font-size: 12px;
align-items: center;
margin: 12px 0;
padding: 0 12px 2px;
border-radius: 12px;
&_top {
margin-top: 0;
}
&_bottom {
margin-bottom: 0;
}
&__sort-item {
display: flex;
button {
margin-right: 6px;
background: #fdfdfd;
font-size: 1em;
line-height: 32px;
height: 32px;
border-radius: 4px;
}
button.checked {
color: #ed4c7a;
font-weight: bold;
}
}
&__sort-direction {
width: 5em;
margin-right: 24px;
}
&__spacer {
flex: 1 1 auto;
}
&__paginator {
margin: 0;
height: 100%;
background: transparent;
padding-bottom: 6px;
}
}
}
.search-condition {
margin: 0 0 0 auto;
padding: 24px;
min-width: 360px;
max-width: 480px;
}