75 lines
1.9 KiB
SCSS
75 lines
1.9 KiB
SCSS
|
@import 'variables';
|
||
|
|
.search {
|
||
|
|
display: flex;
|
||
|
|
.filters {
|
||
|
|
width: 300px;
|
||
|
|
}
|
||
|
|
.cardList {
|
||
|
|
padding: 20px 0;
|
||
|
|
|
||
|
|
flex: 1;
|
||
|
|
.card {
|
||
|
|
display: flex;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
border-radius: 2px;
|
||
|
|
background: #fff;
|
||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
|
||
|
|
&:not(:last-child) {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
img {
|
||
|
|
height: 200px;
|
||
|
|
}
|
||
|
|
.body {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
max-height: 200px;
|
||
|
|
|
||
|
|
flex: 1;
|
||
|
|
.info {
|
||
|
|
display: flex;
|
||
|
|
overflow: hidden;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
padding: 16px 16px 0;
|
||
|
|
|
||
|
|
flex: 1;
|
||
|
|
.title {
|
||
|
|
font-size: 25px;
|
||
|
|
|
||
|
|
color: $pink;
|
||
|
|
}
|
||
|
|
.synopsis {
|
||
|
|
overflow: hidden;
|
||
|
|
display: -webkit-box;
|
||
|
|
|
||
|
|
padding: 16px 0 0 0;
|
||
|
|
|
||
|
|
color: rgba(0,0,0,.52);
|
||
|
|
|
||
|
|
-webkit-line-clamp: 3;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.action {
|
||
|
|
padding: 16px;
|
||
|
|
|
||
|
|
border-top: 1px rgba(0,0,0,.12) solid;
|
||
|
|
button {
|
||
|
|
font-size: 16px;
|
||
|
|
|
||
|
|
color: #448aff;
|
||
|
|
border: none;
|
||
|
|
background: none;
|
||
|
|
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|