Browse code

Initial commit

Benjamin Roth authored on16/02/2017 11:35:38
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -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
+}