summaryrefslogtreecommitdiff
path: root/sass/components/_carousel.scss
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2020-11-21 14:13:41 +0100
committerDaniel Friesel <derf@finalrewind.org>2020-11-21 14:13:41 +0100
commite3fba3dcd493f609e107435867c4a67cb7ee420f (patch)
treecd228574b1d4f4e446fac87e9d6fe3eeffe27b63 /sass/components/_carousel.scss
parent88d3e67474c518a5c422b5f0e47c58147f31fe6e (diff)
import materialize sass sources instead of relying on npm
Diffstat (limited to 'sass/components/_carousel.scss')
-rw-r--r--sass/components/_carousel.scss90
1 files changed, 90 insertions, 0 deletions
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;
+ }
+}