|
0
|
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 }
|
