reprogl

1

2
/*
3
    Based on great Codrops article
4
    http://tympanus.net/Development/SelectInspiration/index4.html
5
    with changes..
6
*/
7
// in _settings.scss there are all variables used here
8
@import "settings";
9

10
.cs-select {
11
    display: inline-block;
12
    vertical-align: middle;
13
    position: relative;
14
    text-align: left;
15
    background: #fff;
16
    z-index: 1000;
17
    width: 100%;
18
    height: rem-calc(40);
19
    -webkit-touch-callout: none;
20
    -webkit-user-select: none;
21
    -khtml-user-select: none;
22
    -moz-user-select: none;
23
    -ms-user-select: none;
24
    user-select: none;
25
    margin-top: rem-calc(-5);
26
    &:focus {
27
        outline: none;
28
    }
29
    select {
30
        display: none;
31
    }
32
    span {
33
        display: block;
34
        position: relative;
35
        cursor: pointer;
36
        padding: 0 rem-calc(16);
37
        white-space: nowrap;
38
        overflow: hidden;
39
        text-overflow: ellipsis;
40
    }
41
    > span {
42
        padding-left: rem-calc(30);
43
        &::after {
44
            speak: none;
45
            position: absolute;
46
            top: 50%;
47
            -webkit-transform: translateY(-50%);
48
            -ms-transform: translateY(-50%);
49
            transform: translateY(-50%);
50
            -webkit-font-smoothing: antialiased;
51
            -moz-osx-font-smoothing: grayscale;
52
            content: '\25BE';
53
            left: 0;
54
        }
55
    }
56
    .cs-selected {
57
        span {
58
            &::after {
59
                speak: none;
60
                position: absolute;
61
                top: 50%;
62
                -webkit-transform: translateY(-50%);
63
                -ms-transform: translateY(-50%);
64
                transform: translateY(-50%);
65
                -webkit-font-smoothing: antialiased;
66
                -moz-osx-font-smoothing: grayscale;
67
                content: '\2713';
68
                margin-left: rem-calc(16);
69
            }
70
        }
71
    }
72
    &.cs-active {
73
        z-index: 2000;
74
        > span {
75
            &::after {
76
                -webkit-transform: translateY(-50%) rotate(180deg);
77
                -ms-transform: translateY(-50%) rotate(180deg);
78
                transform: translateY(-50%) rotate(180deg);
79
            }
80
        }
81
        .cs-options {
82
            visibility: visible;
83
        }
84
    }
85
    .cs-options {
86
        position: absolute;
87
        overflow: hidden;
88
        width: 100%;
89
        background: $color-main-light;
90
        visibility: hidden;
91
    }
92
    ul {
93
        list-style: none;
94
        margin: 0;
95
        padding: 0;
96
        width: 100%;
97
        span {
98
            padding: rem-calc(16);
99
        }
100
        li {
101
            &.cs-focus {
102
                span {
103
                    background-color: $color-main-dark;
104
                }
105
            }
106
            &.cs-optgroup {
107
                ul {
108
                    padding-left: rem-calc(16);
109
                }
110
                > span {
111
                    cursor: default;
112
                }
113
            }
114
        }
115
    }
116
}
117

118
.cs-skin-slide {
119
    color: $color-main-dark;
120
    font-size: rem-calc(24);
121
    &.cs-active {
122
        border: 0;
123
        > span {
124
            text-indent: rem-calc(-290);
125
            opacity: 0;
126
            &::after {
127
                font-family: 'Glyphicons Halflings';
128
                content: '\e236';
129
                color: $color-main-contrast;
130
                -webkit-backface-visibility: hidden;
131
                backface-visibility: hidden;
132
                -webkit-transform: translate3d(0, -50%, 0);
133
                -ms-transform: translate(0, -50%);
134
                transform: translate3d(0, -50%, 0);
135
            }
136
        }
137
        .cs-options {
138
            li {
139
                opacity: 1;
140
            }
141
        }
142
    }
143
    > span {
144
        height: rem-calc(40);
145
        line-height: rem-calc(40);
146
        -webkit-transition: text-indent 0.3s, opacity 0.3s;
147
        transition: text-indent 0.3s, opacity 0.3s;
148
        font-size: rem-calc(16);
149
        font-weight: 400;
150
        text-transform: uppercase;
151
        &::after {
152
            font-family: 'Glyphicons Halflings';
153
            content: '\e236';
154
            color: $color-main-contrast;
155
            -webkit-backface-visibility: hidden;
156
            backface-visibility: hidden;
157
            font-size: rem-calc(26);
158
        }
159
    }
160
    .cs-options {
161
        height: auto;
162
        max-height: 650%;
163
        overflow-y: auto;
164
        top: 50%;
165
        left: 50%;
166
        bottom: auto;
167
        right: auto;
168
        padding-top: rem-calc(10);
169
        padding-bottom: rem-calc(10);
170
        -webkit-transform: translate3d(-50%, -50%, 0);
171
        -ms-transform: translate(-50%, -50%);
172
        transform: translate3d(-50%, -50%, 0);
173
        box-shadow: 0 0 rem-calc(15) rgba($color-main-dark, .15);
174
        background: $color-main-light;
175
        &::-webkit-scrollbar {
176
            width: rem-calc(6);
177
        }
178
        &::-webkit-scrollbar-track {
179
            background-color: transparent;
180
            background-color: lighten($color-main-light, 5%);
181
        }
182
        &::-webkit-scrollbar-thumb {
183
             background-color: $color-main-contrast;
184
        }
185
        li {
186
            opacity: 0;
187
            -webkit-transition: opacity 1s;
188
            transition: opacity 1s;
189
            span {
190
                text-transform: uppercase;
191
                font-weight: 400;
192
                letter-spacing: rem-calc(2);
193
                font-size: 85%;
194
                padding: rem-calc(5) rem-calc(20);
195
                &:hover {
196
                    color: $color-main-contrast;
197
                    background: transparent;
198
                }
199
            }
200
            &.cs-focus {
201
                span {
202
                    color: $color-main-contrast;
203
                    background: transparent;
204
                }
205
            }
206
            &.cs-selected {
207
                span {
208
                    color: $color-main-contrast;
209
                    background: transparent;
210
                }
211
            }
212
        }
213
    }
214
    .cs-selected {
215
        span {
216
            &::after {
217
                content: '';
218
            }
219
        }
220
    }
221
}
222