Kavita/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss

59 lines
938 B
SCSS

//
//.publisher-img-container {
// background-color: var(--card-bg-color);
// border-radius: 3px;
// padding: 2px 5px;
// font-size: 0.8rem;
// vertical-align: middle;
//
// div {
// min-height: 32px;
// line-height: 32px;
// }
//}
// Animation code
.publisher-wrapper {
perspective: 1000px;
height: 32px;
background-color: var(--card-bg-color);
border-radius: 3px;
padding: 2px 5px;
font-size: 0.8rem;
vertical-align: middle;
div {
min-height: 32px;
line-height: 32px;
}
}
.publisher-flipper {
position: relative;
width: 100%;
height: 100%;
text-align: left;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.publisher-flipper.is-flipped {
transform: rotateX(180deg);
}
.publisher-side {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.publisher-front {
z-index: 2;
}
.publisher-back {
transform: rotateX(180deg);
}