// Default Variables $slick-font-path: "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/fonts/"; $slick-font-family: "slick"; $slick-loader-path: "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/"; $slick-dot-color: #cecece; $slick-dot-color-active: #0093c1; $slick-dot-character: "\2022"; $slick-dot-size: 10; $slick-dots-padding-y: 5; $slick-opacity-default: 0.75; $slick-opacity-on-hover: 1; $slick-opacity-not-active: 0.25; $slick-button-size: 36; $slick-margin-bottom: 30; @mixin cwui-carousel { /* Slider */ .slick-slider { margin-bottom: rem-calc($slick-margin-bottom); &.slick-dotted { margin-bottom: rem-calc(($slick-margin-bottom + $slick-dot-size)); } video { display: block; } } .slick-list { .slick-loading & { background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; } } // Arrows .slick-arrow { border-radius: 0; cursor: pointer; display: block; height: calc(100% - 20px); background: transparent; color: transparent; opacity: $slick-opacity-default; padding: 0 rem-calc(10); position: absolute; top: 0; transition: opacity .3s; width: rem-calc($slick-button-size + 20); z-index: 2; &:hover, &:focus { opacity: $slick-opacity-on-hover; } &.slick-disabled::before { opacity: $slick-opacity-not-active; } svg { color: #fff; } } .slick-prev { left: 0; } .slick-next { right: 0; svg { transform: rotate(180deg); } } // Dots .slick-dots { bottom: rem-calc(-($slick-dot-size + 5)); display: flex; justify-content: center; list-style: none; margin: 0; padding: rem-calc($slick-dots-padding-y) 0; text-align: center; width: 100%; li { cursor: pointer; padding: 0; position: relative; button { background: transparent; color: transparent; cursor: pointer; display: block; height: rem-calc($slick-dot-size); width: rem-calc($slick-dot-size); &:hover, &:focus { &::before { opacity: $slick-opacity-on-hover; } } &::before { background: $slick-dot-color; border-radius: 100%; display: block; content: ""; height: rem-calc($slick-dot-size); } } &.slick-active button::before { background: $slick-dot-color-active; } } li:not(:last-child) { margin-right: rem-calc(5); } } .slick-slide { position: relative; } .slide-content-block { background: hsla(0, 0, 0, .5); bottom: 0; color: #fff; font-size: 1rem; padding: rem-calc(10 25); position: absolute; width: 100%; z-index: 2; a { color: #f6d4a0; text-decoration: none; &:hover { text-decoration: underline; } } } .banner { .slick-slider { margin-bottom: 0; overflow: hidden; } .slick-slider:hover .slick-arrow { opacity: $slick-opacity-default; &:hover { opacity: $slick-opacity-on-hover; } } .slick-arrow:hover { opacity: $slick-opacity-on-hover; } .slick-arrow { @include breakpoint(medium down) { display: none !important; } @include breakpoint(large) { opacity: 0; } svg { transition: .3s transform; } } .slick-prev svg { transform: translateX(calc(-100%)); } .slick-next svg { transform: translateX(100%) rotate(180deg); } .slick-dots { background: #fff; } .slick-slider:hover .slick-prev svg { transform: translateX(0); } .slick-slider:hover .slick-next svg { transform: translateX(0) rotate(180deg); } } // Closes the gap between the sidebar nav and the banner // when the banner slider has dots. // `.banner-dotted` class added to `` via JavaScript .banner-dotted .sidebar { @include breakpoint(large) { margin-top: -(rem-calc($slick-dot-size + ($slick-dots-padding-y * 2))); } } }