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