// Name: Card // // Component: `card` // ======================================================================== // Variables // ======================================================================== $card-shadow: 0 1px 1px rgba(0, 0, 0, .05) !default; $card-actions-link-color: $gray !default; $card-actions-link-hover-color: $gray-light !default; $card-posts-horizontal-border: $border-color-base !default; // $card-margin-bottom: 2.143rem !default; $card-margin-bottom: pxToRem(30px) !default; // $card-header-padding: $card-spacer-x; // Component: Card // ======================================================================== .card { margin-bottom: $card-margin-bottom; border: none; box-shadow: none; .cover { width: 100%; padding: 0; border-bottom: none; } [class*="blocks-"] > li > & { margin-bottom: 0; } } .card-title { margin-top: 0; } .card-header, .card-footer { border: none; box-shadow: none; } // Modifier: `card-bordered` // ------------------------- .card-bordered { border: $card-border-width solid $card-border-color; } // .card-header-no-border { // border: none; // } // .card-footer-no-border { // border: none; // } .card-header-bordered { border-bottom: $card-border-width solid $card-border-color; } .card-footer-bordered { border-top: $card-border-width solid $card-border-color; } // Modifier: `card transparent` // ------------------------- .card-transparent { background-color: transparent; } .card-header-transparent { background-color: transparent; } .card-footer-transparent { background-color: transparent; } // Modifier: `card-shadow` // ------------------------- .card-shadow { box-shadow: $card-shadow; } // .card-header-shadow { // box-shadow: 0 $card-border-width 0 0 $card-border-color; // } // .card-footer-shadow { // box-shadow: 0 (-$card-border-width) 0 0 $card-border-color; // } // Component: Card block // ======================================================================== .card-block { position: relative; } // Strucutes // ======================================================================== .card-text { &.type-link { a { position: relative; display: inline-block; padding: 3px 5px; color: $gray; &:first-child { padding-left: 0; } &:hover { color: $gray-light; } + a:before { position: absolute; top: 10px; left: -2px; content: ''; width: 3px; height: 3px; background-color: $gray; border-radius: 50%; } } } } // Card Watermark // ======================================================================== .card-watermark { position: absolute; opacity: 0.1; right: 0; bottom: 0; line-height: 1; &.darker { color: black; } &.lighter { color: white; } } // Card divider // ======================================================================== .card-divider { &:after { width: 20px; height: 2px; content: ""; display: block; margin: 15px auto; background-color: $inverse; } } // card Actions // ======================================================================== .card-actions { margin-top: 10px; text-align: right; a { display: inline-block; margin-right: 10px; vertical-align: middle; color: $card-actions-link-color; &.icon, & .icon { text-decoration: none; & + span { margin-left: 2px; } } &.active, &:hover, &:focus { text-decoration: none; color: $card-actions-link-hover-color; } &:last-child { margin-right: 0; } } } .card-actions-sidebar { width: 60px; position: absolute; top: 20px; left: 20px; a { display: inline-block; width: 100%; height: 60px; text-align: center; border-right: 1px solid $card-posts-horizontal-border; margin-right: 0; &:before { display: inline-block; content: ''; height: 100%; vertical-align: middle; } + a { border-top: 1px solid $card-posts-horizontal-border; } } + .card-content { margin-left: 80px; } } // Card image .card-img { border-radius: 0; } // Card Two Column // ======================================================================== $card-img-left-width-percent: 40% !default; $card-img-left-mobile-height: 320px !default; .card-img-left { position: absolute; width: $card-img-left-width-percent; height: 100%; top: 0; left: 0; @include border-radius( $card-border-radius-inner 0 0 $card-border-radius-inner ); ~ .card-block { margin-left: $card-img-left-width-percent; width: (100% - $card-img-left-width-percent); } @include media-breakpoint-down(sm) { position: relative; width: 100%; height: $card-img-left-mobile-height; ~ .card-block { margin-left: 0; width: 100%; } } } // Background variations // ======================================================================== .card-default { @include card-variant($brand-default, $brand-default); } //add by kevin_y 20160920 .card-columns { .card { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } } //end //add for remodel card size --kevin_y 20160921 .card-sm { .card-header { padding: $card-sm-spacer-y $card-sm-spacer-x; } .card-block { padding: $card-sm-spacer-x; } .card-footer { padding: $card-sm-spacer-y $card-sm-spacer-x; } } .card-md { .card-header { padding: $card-md-spacer-x $card-md-spacer-y; } .card-block { padding: $card-md-spacer-x; } .card-footer { padding: $card-md-spacer-y $card-md-spacer-x; } } .card-lg { .card-header { padding: $card-lg-spacer-x; } .card-block { padding: $card-lg-spacer-x; } .card-footer { padding: $card-lg-spacer-x; } } // end //add card-header-actions --kevin_y 20160921 .card-header-actions { float: right; margin: 0; }