diff options
author | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-01-20 01:28:44 +0100 |
---|---|---|
committer | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-01-20 01:28:44 +0100 |
commit | 604734c4a960aac3d99f1008337181ed2b0f04db (patch) | |
tree | 0cc5a4a9c958edce1b28366a446b75f6a720f6dc /slick/slick-theme.scss | |
download | ludivine-slick-component-604734c4a960aac3d99f1008337181ed2b0f04db.tar.gz ludivine-slick-component-604734c4a960aac3d99f1008337181ed2b0f04db.tar.zst ludivine-slick-component-604734c4a960aac3d99f1008337181ed2b0f04db.zip |
Diffstat (limited to 'slick/slick-theme.scss')
-rw-r--r-- | slick/slick-theme.scss | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/slick/slick-theme.scss b/slick/slick-theme.scss new file mode 100644 index 0000000..7fe63e1 --- /dev/null +++ b/slick/slick-theme.scss | |||
@@ -0,0 +1,194 @@ | |||
1 | @charset "UTF-8"; | ||
2 | |||
3 | // Default Variables | ||
4 | |||
5 | // Slick icon entity codes outputs the following | ||
6 | // "\2190" outputs ascii character "←" | ||
7 | // "\2192" outputs ascii character "→" | ||
8 | // "\2022" outputs ascii character "•" | ||
9 | |||
10 | $slick-font-path: "./fonts/" !default; | ||
11 | $slick-font-family: "slick" !default; | ||
12 | $slick-loader-path: "./" !default; | ||
13 | $slick-arrow-color: white !default; | ||
14 | $slick-dot-color: black !default; | ||
15 | $slick-dot-color-active: $slick-dot-color !default; | ||
16 | $slick-prev-character: "\2190" !default; | ||
17 | $slick-next-character: "\2192" !default; | ||
18 | $slick-dot-character: "\2022" !default; | ||
19 | $slick-dot-size: 6px !default; | ||
20 | $slick-opacity-default: 0.75 !default; | ||
21 | $slick-opacity-on-hover: 1 !default; | ||
22 | $slick-opacity-not-active: 0.25 !default; | ||
23 | |||
24 | @function slick-image-url($url) { | ||
25 | @if function-exists(image-url) { | ||
26 | @return image-url($url); | ||
27 | } | ||
28 | @else { | ||
29 | @return url($slick-loader-path + $url); | ||
30 | } | ||
31 | } | ||
32 | |||
33 | @function slick-font-url($url) { | ||
34 | @if function-exists(font-url) { | ||
35 | @return font-url($url); | ||
36 | } | ||
37 | @else { | ||
38 | @return url($slick-font-path + $url); | ||
39 | } | ||
40 | } | ||
41 | |||
42 | /* Slider */ | ||
43 | |||
44 | .slick-list { | ||
45 | .slick-loading & { | ||
46 | background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; | ||
47 | } | ||
48 | } | ||
49 | |||
50 | /* Icons */ | ||
51 | @if $slick-font-family == "slick" { | ||
52 | @font-face { | ||
53 | font-family: "slick"; | ||
54 | src: slick-font-url("slick.eot"); | ||
55 | src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); | ||
56 | font-weight: normal; | ||
57 | font-style: normal; | ||
58 | } | ||
59 | } | ||
60 | |||
61 | /* Arrows */ | ||
62 | |||
63 | .slick-prev, | ||
64 | .slick-next { | ||
65 | position: absolute; | ||
66 | display: block; | ||
67 | height: 20px; | ||
68 | width: 20px; | ||
69 | line-height: 0px; | ||
70 | font-size: 0px; | ||
71 | cursor: pointer; | ||
72 | background: transparent; | ||
73 | color: transparent; | ||
74 | top: 50%; | ||
75 | -webkit-transform: translate(0, -50%); | ||
76 | -ms-transform: translate(0, -50%); | ||
77 | transform: translate(0, -50%); | ||
78 | padding: 0; | ||
79 | border: none; | ||
80 | outline: none; | ||
81 | &:hover, &:focus { | ||
82 | outline: none; | ||
83 | background: transparent; | ||
84 | color: transparent; | ||
85 | &:before { | ||
86 | opacity: $slick-opacity-on-hover; | ||
87 | } | ||
88 | } | ||
89 | &.slick-disabled:before { | ||
90 | opacity: $slick-opacity-not-active; | ||
91 | } | ||
92 | &:before { | ||
93 | font-family: $slick-font-family; | ||
94 | font-size: 20px; | ||
95 | line-height: 1; | ||
96 | color: $slick-arrow-color; | ||
97 | opacity: $slick-opacity-default; | ||
98 | -webkit-font-smoothing: antialiased; | ||
99 | -moz-osx-font-smoothing: grayscale; | ||
100 | } | ||
101 | } | ||
102 | |||
103 | .slick-prev { | ||
104 | left: -25px; | ||
105 | [dir="rtl"] & { | ||
106 | left: auto; | ||
107 | right: -25px; | ||
108 | } | ||
109 | &:before { | ||
110 | content: $slick-prev-character; | ||
111 | [dir="rtl"] & { | ||
112 | content: $slick-next-character; | ||
113 | } | ||
114 | } | ||
115 | } | ||
116 | |||
117 | .slick-next { | ||
118 | right: -25px; | ||
119 | [dir="rtl"] & { | ||
120 | left: -25px; | ||
121 | right: auto; | ||
122 | } | ||
123 | &:before { | ||
124 | content: $slick-next-character; | ||
125 | [dir="rtl"] & { | ||
126 | content: $slick-prev-character; | ||
127 | } | ||
128 | } | ||
129 | } | ||
130 | |||
131 | /* Dots */ | ||
132 | |||
133 | .slick-dotted.slick-slider { | ||
134 | margin-bottom: 30px; | ||
135 | } | ||
136 | |||
137 | .slick-dots { | ||
138 | position: absolute; | ||
139 | bottom: -25px; | ||
140 | list-style: none; | ||
141 | display: block; | ||
142 | text-align: center; | ||
143 | padding: 0; | ||
144 | margin: 0; | ||
145 | width: 100%; | ||
146 | li { | ||
147 | position: relative; | ||
148 | display: inline-block; | ||
149 | height: 20px; | ||
150 | width: 20px; | ||
151 | margin: 0 5px; | ||
152 | padding: 0; | ||
153 | cursor: pointer; | ||
154 | button { | ||
155 | border: 0; | ||
156 | background: transparent; | ||
157 | display: block; | ||
158 | height: 20px; | ||
159 | width: 20px; | ||
160 | outline: none; | ||
161 | line-height: 0px; | ||
162 | font-size: 0px; | ||
163 | color: transparent; | ||
164 | padding: 5px; | ||
165 | cursor: pointer; | ||
166 | &:hover, &:focus { | ||
167 | outline: none; | ||
168 | &:before { | ||
169 | opacity: $slick-opacity-on-hover; | ||
170 | } | ||
171 | } | ||
172 | &:before { | ||
173 | position: absolute; | ||
174 | top: 0; | ||
175 | left: 0; | ||
176 | content: $slick-dot-character; | ||
177 | width: 20px; | ||
178 | height: 20px; | ||
179 | font-family: $slick-font-family; | ||
180 | font-size: $slick-dot-size; | ||
181 | line-height: 20px; | ||
182 | text-align: center; | ||
183 | color: $slick-dot-color; | ||
184 | opacity: $slick-opacity-not-active; | ||
185 | -webkit-font-smoothing: antialiased; | ||
186 | -moz-osx-font-smoothing: grayscale; | ||
187 | } | ||
188 | } | ||
189 | &.slick-active button:before { | ||
190 | color: $slick-dot-color-active; | ||
191 | opacity: $slick-opacity-default; | ||
192 | } | ||
193 | } | ||
194 | } | ||