You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

175 lines
4.1 KiB

4 years ago
//
// Cards
// --------------------------------------------------
.#{$namespace}card {
// margin: 0 15px;
margin:$card-margin;
overflow: hidden;
background-color: $card-bg;
// border: $border-default;
background-clip:padding-box;
border-radius: $card-border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
position: relative;
font-size: $card-font-size;
}
.#{$namespace}content > .#{$namespace}card:first-child{
margin-top: 15px;
}
//Cards with input-group
.#{$namespace}card .#{$namespace}input-group{
&:before,&:after{
height:0;
}
.#{$namespace}input-row:last-child{
&:before,&:after{
height:0;
}
}
}
// Cards with table-views
// --------------------------------------------------
.#{$namespace}card .#{$namespace}table-view {
margin-bottom: 0;
border-top: 0;
border-bottom: 0;
border-radius: $border-radius;
// Rounding first divider on carded lists and remove border on the top
//fix Android 4.1.x/4.2.x 圆角列表四角不圆的bug
.#{$namespace}table-view-divider:first-child,.#{$namespace}table-view-cell:first-child {
top: 0;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
// Rounding last divider on carded table views
.#{$namespace}table-view-divider:last-child,.#{$namespace}table-view-cell:last-child {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
&:before,&:after{
height:0;
}
}
// Remove the bottom border from last table cell
.#{$namespace}card > .#{$namespace}table-view {
>.#{$namespace}table-view-cell:last-child{
&:before,&:after{
height:0;
}
}
}
.#{$namespace}card-header,
.#{$namespace}card-footer {
min-height: $bar-base-height;
position: relative;
padding: 10px 15px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
.#{$namespace}card-link {
line-height: $bar-base-height;
height: $bar-base-height;
text-decoration: none;
position: relative;
margin-top: -10px;
margin-bottom: -10px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
}
.#{$namespace}card-header:after,
.#{$namespace}card-footer:before {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-color: #c8c7cc;
content: '';
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.#{$namespace}card-header {
border-radius: 2px 2px 0 0;
font-size: $font-size-default;
&:after {
top: auto;
bottom: 0;
}
>img:first-child{
font-size: 0;
line-height: 0;
width: 34px;
height: 34px;
float: left;
}
}
.#{$namespace}card-footer {
border-radius: 0 0 2px 2px;
color: $card-footer-color;
}
.#{$namespace}card-content {
position: relative;
font-size: $card-font-size;
}
.#{$namespace}card-content-inner {
padding: 15px;
position: relative;
}
.#{$namespace}card-media {
color: #fff;
background-size: cover;
background-position: center;
vertical-align: bottom;
}
.#{$namespace}card-header.#{$namespace}card-media {
display: block;
padding: 10px;
.#{$namespace}media-body{
margin-bottom: 0;
margin-left: $card-media-body-margin-left;
font-size: $card-font-size;
font-weight: $font-weight;
color: #333;
line-height: $font-size-default;
p {
font-size: 13px;
margin-bottom: 0;
}
}
}