Mercurial > nebulaweb3
diff default/assets/scss/components/_carousel.scss @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/assets/scss/components/_carousel.scss Sat May 31 09:21:51 2025 +0800 @@ -0,0 +1,191 @@ +// main: ../style.scss +/******************************** +********************************* +Carousel +********************************* +*********************************/ +.carousel.slick-slider { + + .slick-slide img { + width: 100%; + height: auto; + } + + &.slick-dotted.slick-slider { + margin-bottom: em(60); + } + + .slick-slide { + max-width: 100%; + height: auto; + } + + .slick-arrow:before { + font-size: rem(36); + display: block; + } + .slick-next, .slick-prev { + @include size( rem(60) ); + z-index: 3; + } + + .slick-next { + right: rem(25); + &:before { + content: "keyboard_arrow_right"; + font-family: "Material Icons"; + } + } + + .slick-prev { + left: rem(25); + &:before { + content: "keyboard_arrow_left"; + font-family: "Material Icons"; + } + } + + .slick-dots { + bottom: rem(-55); + li { + padding: 0 rem(5); + &.slick-active button:before { + transform: scale(1.5); + transform-origin: center center; + transition: transform 0.3s cubic-bezier(0.680, 0, 0.265, 1); + } + } + li button:before { + @include size( rem(10) ); + content: ""; + display: block; + background: $color-scheme; + border-radius: 100px; + transition: all 0.3s ease; + opacity: 0.2; + } + } + + .single-item-caption { + background: #fff; + text-shadow: none; + bottom: auto; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + + .single-item-caption-inside { + p { + color: #000; + } + border: 6px solid #e0f0ed; + margin: 0 em(20) 0 em(20); + padding-bottom: em(20); + } + } + + .carousel-caption { + width: 50%; + left: 50%; + right: auto; + } + + body.rtl & { + direction: ltr; + } +} + +.multi-slide-carousel { + + .slick-slide { + margin-left: rem(2); + } + + /* the parent */ + .slick-list { + margin-left: rem(-2); + } + + .item-image { + position: relative; + + .img-shadow { + .shadow { + position: absolute; + width: 100%; + height: 100%; + box-shadow:inset 0 -100px 70px -30px rgba(0,0,0,.7); + top: 0; + left: 0; + } + } + + .header-caption { + position: absolute; + top: 0; + padding: em(20); + a { + position: relative; + font-family: $tertiary-font-family; + font-size: em(12); + color: #fff; + padding: em(5,12) em(8,12); + border-radius: 5px; + border-bottom-left-radius: 0; + display: inline-block; + .triangle-top-left { + display: inline-block; + position: absolute; + left: 0; + top: 100%; + width: 0; + height: 0; + border-style: solid; + border-width: 6px 4px 0 0; + border-color: #38d57a transparent transparent transparent; + } + } + } + + .content-caption { + cursor: pointer; + font-weight: 300; + position: absolute; + bottom: em(-65); + padding: 0 em(20); + transition: all .4s ease-in-out; + + @include tablet { + transition: none; + bottom: 0; + .item-desc { display: none; } + } + + @include mobile { + transition: none; + bottom: 0; + .item-desc { display: none; } + } + + .item-title { + text-decoration: none; + margin-bottom: em(10); + h3 { + font-family: $tertiary-font-family; + } + } + } + + &:hover { + .content-caption { + bottom: 0; + } + } + } + + body.rtl & { + .item-image .content-caption { + direction: rtl; + } + } +}