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
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;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
}
|