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