sp-dev-fx-webparts/samples/react-videolibrary/src/webparts/videoLibraryReact3DCarousel/VideoLibraryReact3DCarousel...

58 lines
1010 B
SCSS

.videoLibrary {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
.react-3d-carousel {
width: 400px;
height: 300px;
position: relative;
perspective: 1000px;
}
.react-3d-carousel .carousel {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.react-3d-carousel .carousel figure {
display: block;
position: absolute;
width: 400px;
height: 300px;
left: 10px;
top: 10px;
border: 2px solid black;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
.react-3d-carousel .carousel figure {
background: hsla( 160, 100%, 50%, 0.8);
}
}
.row {
padding: 20px;
}
.listItem {
max-width: 715px;
margin: 5px auto 5px auto;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.button {
text-decoration: none;
}
}