3
Based on great Codrops article
4
http://tympanus.net/Development/SelectInspiration/index4.html
7
// in _settings.scss there are all variables used here
11
display: inline-block;
12
vertical-align: middle;
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;
25
margin-top: rem-calc(-5);
36
padding: 0 rem-calc(16);
39
text-overflow: ellipsis;
42
padding-left: rem-calc(30);
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;
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;
68
margin-left: rem-calc(16);
76
-webkit-transform: translateY(-50%) rotate(180deg);
77
-ms-transform: translateY(-50%) rotate(180deg);
78
transform: translateY(-50%) rotate(180deg);
89
background: $color-main-light;
98
padding: rem-calc(16);
103
background-color: $color-main-dark;
108
padding-left: rem-calc(16);
119
color: $color-main-dark;
120
font-size: rem-calc(24);
124
text-indent: rem-calc(-290);
127
font-family: 'Glyphicons Halflings';
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);
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);
150
text-transform: uppercase;
152
font-family: 'Glyphicons Halflings';
154
color: $color-main-contrast;
155
-webkit-backface-visibility: hidden;
156
backface-visibility: hidden;
157
font-size: rem-calc(26);
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 {
178
&::-webkit-scrollbar-track {
179
background-color: transparent;
180
background-color: lighten($color-main-light, 5%);
182
&::-webkit-scrollbar-thumb {
183
background-color: $color-main-contrast;
187
-webkit-transition: opacity 1s;
188
transition: opacity 1s;
190
text-transform: uppercase;
192
letter-spacing: rem-calc(2);
194
padding: rem-calc(5) rem-calc(20);
196
color: $color-main-contrast;
197
background: transparent;
202
color: $color-main-contrast;
203
background: transparent;
208
color: $color-main-contrast;
209
background: transparent;