Mercurial > nebulaweb3

comparison default/assets/scss/components/_carousel.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // main: ../style.scss
2 /********************************
3 *********************************
4 Carousel
5 *********************************
6 *********************************/
7 .carousel.slick-slider {
8
9 .slick-slide img {
10 width: 100%;
11 height: auto;
12 }
13
14 &.slick-dotted.slick-slider {
15 margin-bottom: em(60);
16 }
17
18 .slick-slide {
19 max-width: 100%;
20 height: auto;
21 }
22
23 .slick-arrow:before {
24 font-size: rem(36);
25 display: block;
26 }
27 .slick-next, .slick-prev {
28 @include size( rem(60) );
29 z-index: 3;
30 }
31
32 .slick-next {
33 right: rem(25);
34 &:before {
35 content: "keyboard_arrow_right";
36 font-family: "Material Icons";
37 }
38 }
39
40 .slick-prev {
41 left: rem(25);
42 &:before {
43 content: "keyboard_arrow_left";
44 font-family: "Material Icons";
45 }
46 }
47
48 .slick-dots {
49 bottom: rem(-55);
50 li {
51 padding: 0 rem(5);
52 &.slick-active button:before {
53 transform: scale(1.5);
54 transform-origin: center center;
55 transition: transform 0.3s cubic-bezier(0.680, 0, 0.265, 1);
56 }
57 }
58 li button:before {
59 @include size( rem(10) );
60 content: "";
61 display: block;
62 background: $color-scheme;
63 border-radius: 100px;
64 transition: all 0.3s ease;
65 opacity: 0.2;
66 }
67 }
68
69 .single-item-caption {
70 background: #fff;
71 text-shadow: none;
72 bottom: auto;
73 top: 50%;
74 left: 50%;
75 transform: translateY(-50%) translateX(-50%);
76
77 .single-item-caption-inside {
78 p {
79 color: #000;
80 }
81 border: 6px solid #e0f0ed;
82 margin: 0 em(20) 0 em(20);
83 padding-bottom: em(20);
84 }
85 }
86
87 .carousel-caption {
88 width: 50%;
89 left: 50%;
90 right: auto;
91 }
92
93 body.rtl & {
94 direction: ltr;
95 }
96 }
97
98 .multi-slide-carousel {
99
100 .slick-slide {
101 margin-left: rem(2);
102 }
103
104 /* the parent */
105 .slick-list {
106 margin-left: rem(-2);
107 }
108
109 .item-image {
110 position: relative;
111
112 .img-shadow {
113 .shadow {
114 position: absolute;
115 width: 100%;
116 height: 100%;
117 box-shadow:inset 0 -100px 70px -30px rgba(0,0,0,.7);
118 top: 0;
119 left: 0;
120 }
121 }
122
123 .header-caption {
124 position: absolute;
125 top: 0;
126 padding: em(20);
127 a {
128 position: relative;
129 font-family: $tertiary-font-family;
130 font-size: em(12);
131 color: #fff;
132 padding: em(5,12) em(8,12);
133 border-radius: 5px;
134 border-bottom-left-radius: 0;
135 display: inline-block;
136 .triangle-top-left {
137 display: inline-block;
138 position: absolute;
139 left: 0;
140 top: 100%;
141 width: 0;
142 height: 0;
143 border-style: solid;
144 border-width: 6px 4px 0 0;
145 border-color: #38d57a transparent transparent transparent;
146 }
147 }
148 }
149
150 .content-caption {
151 cursor: pointer;
152 font-weight: 300;
153 position: absolute;
154 bottom: em(-65);
155 padding: 0 em(20);
156 transition: all .4s ease-in-out;
157
158 @include tablet {
159 transition: none;
160 bottom: 0;
161 .item-desc { display: none; }
162 }
163
164 @include mobile {
165 transition: none;
166 bottom: 0;
167 .item-desc { display: none; }
168 }
169
170 .item-title {
171 text-decoration: none;
172 margin-bottom: em(10);
173 h3 {
174 font-family: $tertiary-font-family;
175 }
176 }
177 }
178
179 &:hover {
180 .content-caption {
181 bottom: 0;
182 }
183 }
184 }
185
186 body.rtl & {
187 .item-image .content-caption {
188 direction: rtl;
189 }
190 }
191 }