Subversion-Projekte lars-tiefland.webanos.zeldi.de

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
4 lars 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 
/* Arrows */
25 
.slick-prev,
26 
.slick-next {
27 
    position: absolute;
28 
    display: block;
29 
    height: 20px;
30 
    width: 20px;
31 
    line-height: 0px;
32 
    font-size: 0px;
33 
    cursor: pointer;
34 
    background: transparent;
35 
    color: transparent;
36 
    top: 50%;
37 
    -webkit-transform: translate(0, -50%);
38 
    -ms-transform: translate(0, -50%);
39 
    transform: translate(0, -50%);
40 
    padding: 0;
41 
    border: none;
42 
    outline: none;
43 
    &:hover, &:focus {
44 
        outline: none;
45 
        background: transparent;
46 
        color: transparent;
47 
        &:before {
48 
            opacity: @slick-opacity-on-hover;
49 
        }
50 
    }
51 
    &.slick-disabled:before {
52 
        opacity: @slick-opacity-not-active;
53 
    }
54 
}
55 
 
56 
.slick-prev:before, .slick-next:before {
57 
    font-family: @slick-font-family;
58 
    font-size: 20px;
59 
    line-height: 1;
60 
    color: @slick-arrow-color;
61 
    opacity: @slick-opacity-default;
62 
    -webkit-font-smoothing: antialiased;
63 
    -moz-osx-font-smoothing: grayscale;
64 
 
65 
    & when ( @slick-font-family = 'slick' ) {
66 
        /* Icons */
67 
        @font-face {
68 
            font-family: 'slick';
69 
            font-weight: normal;
70 
            font-style: normal;
71 
            src: url('@{slick-font-path}slick.eot');
72 
            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');
73 
        }
74 
    }
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 
}