Sha256: a8010dc57378be06df48009c92a95251f7bfca846705446b4d654c26347267bb
Contents?: true
Size: 1.88 KB
Versions: 5
Compression:
Stored size: 1.88 KB
Contents
.exhibit-card {
box-sizing: border-box;
float: left;
height: $exhibit-card-height;
margin: 0 -1 * $exhibit-card-gutter $exhibit-card-gutter $exhibit-card-gutter;
// image width + gutter + border (x2)
max-width: $exhibit-card-image-size + $exhibit-card-gutter + 2px;
padding: 0 $exhibit-card-gutter 0 0;
perspective: 1000; // for flip animation
position: relative;
.flipper {
position: relative;
transform-style: preserve-3d;
transition: 0.6s;
}
&.hover .flipper,
&:hover .flipper {
-ms-filter: "FlipH"; // autoprefixer doesn't handle this case.
filter: FlipH;
transform: rotateY(180deg);
}
}
.card-face {
backface-visibility: hidden;
background-color: $exhibit-card-bg;
border: 1px solid $exhibit-card-border;
height: $exhibit-card-height;
left: 0;
position: absolute;
top: 0;
transform-style: preserve-3d;
transition: 0.6s;
width: 100%;
}
.card-title {
@extend .h5;
@extend .text-center;
font-size: $font-size-h4;
}
.card-front {
transform: rotateY(0deg);
z-index: 2;
img {
height: $exhibit-card-image-size;
object-fit: cover;
width: $exhibit-card-image-size;
}
.card-title {
padding-top: $padding-large-vertical;
}
}
.card-back {
box-shadow: $exhibit-card-shadow;
padding: 0 $exhibit-card-gutter;
transform: rotateY(-180deg);
.card-title {
border-bottom: 1px dotted $exhibit-card-border;
line-height: $headings-line-height;
margin-bottom: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
}
.subtitle {
@extend .h5;
@extend .text-center;
line-height: $headings-line-height;
}
.description {
font-size: $font-size-h6;
}
.visit-exhibit {
bottom: $exhibit-card-gutter;
position: absolute;
}
}
.center-btn {
left: 50%;
position: absolute;
.btn {
left: -50%;
position: relative;
}
}
Version data entries
5 entries across 5 versions & 1 rubygems