From e3fba3dcd493f609e107435867c4a67cb7ee420f Mon Sep 17 00:00:00 2001 From: Daniel Friesel Date: Sat, 21 Nov 2020 14:13:41 +0100 Subject: import materialize sass sources instead of relying on npm --- sass/components/_carousel.scss | 90 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 sass/components/_carousel.scss (limited to 'sass/components/_carousel.scss') diff --git a/sass/components/_carousel.scss b/sass/components/_carousel.scss new file mode 100644 index 0000000..cc36d4b --- /dev/null +++ b/sass/components/_carousel.scss @@ -0,0 +1,90 @@ +.carousel { + &.carousel-slider { + top: 0; + left: 0; + + .carousel-fixed-item { + &.with-indicators { + bottom: 68px; + } + + position: absolute; + left: 0; + right: 0; + bottom: 20px; + z-index: 1; + } + + .carousel-item { + width: 100%; + height: 100%; + min-height: $carousel-height; + position: absolute; + top: 0; + left: 0; + + h2 { + font-size: 24px; + font-weight: 500; + line-height: 32px; + } + + p { + font-size: 15px; + } + } + } + + overflow: hidden; + position: relative; + width: 100%; + height: $carousel-height; + perspective: 500px; + transform-style: preserve-3d; + transform-origin: 0% 50%; + + .carousel-item { + visibility: hidden; + width: $carousel-item-width; + height: $carousel-item-height; + position: absolute; + top: 0; + left: 0; + + & > img { + width: 100%; + } + } + + .indicators { + position: absolute; + text-align: center; + left: 0; + right: 0; + bottom: 0; + margin: 0; + + .indicator-item { + &.active { + background-color: #fff; + } + + display: inline-block; + position: relative; + cursor: pointer; + height: 8px; + width: 8px; + margin: 24px 4px; + background-color: rgba(255,255,255,.5); + + transition: background-color .3s; + border-radius: 50%; + } + } + + // Materialbox compatibility + &.scrolling .carousel-item .materialboxed, + .carousel-item:not(.active) .materialboxed { + pointer-events: none; + } +} -- cgit v1.2.3