yapi/client/components/ProjectCard/ProjectCard.scss

90 lines
1.7 KiB
SCSS
Raw Normal View History

2017-08-10 15:36:35 +08:00
@import '../../styles/mixin.scss';
2017-08-19 15:18:55 +08:00
.card-container {
position: relative;
2017-08-22 16:03:39 +08:00
transition: all .2s;
.m-card, .card-btns {
transform: translateY(0);
transition: all .2s;
}
2017-08-19 15:18:55 +08:00
&:hover {
2017-08-22 16:03:39 +08:00
.m-card, .card-btns {
transform: translateY(-4px);
2017-08-19 15:18:55 +08:00
}
2017-08-22 16:03:39 +08:00
}
&:active {
.m-card, .card-btns {
transform: translateY(4px);
2017-08-19 15:18:55 +08:00
}
}
// 按钮组
.card-btns {
position: absolute;
top: 0;
right: 0;
2017-08-22 16:03:39 +08:00
width: .48rem;
height: .48rem;
background: linear-gradient(225deg, #ccc, #ccc 50%, transparent 0);
2017-08-19 15:18:55 +08:00
// 卡片右上角按钮
.icon {
cursor: pointer;
2017-08-22 16:03:39 +08:00
font-size: .16rem;
padding: .06rem;
2017-08-19 15:18:55 +08:00
position: absolute;
right: 0;
top: 0;
}
}
}
2017-08-11 19:30:12 +08:00
.m-card {
cursor: pointer;
text-align: center;
2017-08-22 16:03:39 +08:00
margin-bottom: .36rem;
2017-08-11 19:30:12 +08:00
transition: all .4s;
2017-08-19 15:18:55 +08:00
position: relative;
2017-08-22 16:03:39 +08:00
.ant-card-body {
background-color: $color-bg-gray;
border-radius: 4px;
padding-top: .9rem;
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
}
.ui-logo {
width: 1rem;
height: 1rem;
border-radius: 50%;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -20%);
font-size: .4rem;
color: #fff;
background-color: #2395f1;
line-height: 1rem;
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
}
.ui-title {
font-size: .19rem;
margin-bottom: .08rem;
font-weight: normal;
}
.ui-desc {
font-size: .16rem;
height: .24rem;
line-height: .24rem;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
color: rgba(39, 56, 72, 0.43);
}
.m-card-body {
2017-08-11 19:30:12 +08:00
.icon {
font-size: .8rem;
2017-08-10 15:36:35 +08:00
}
2017-08-11 19:30:12 +08:00
.name {
font-size: .18rem;
margin-top: .16rem;
}
}
2017-08-22 16:03:39 +08:00
2017-08-11 19:30:12 +08:00
}