am-commons 0.0.1 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/am-commons-0.0.1.gem +0 -0
  3. data/lib/am-commons/version.rb +1 -1
  4. data/package.json +1 -1
  5. data/stylesheets/_am-commons.scss +1 -2
  6. data/stylesheets/am-commons/_am-american-flags.scss +93 -0
  7. data/stylesheets/am-commons/_am-components.scss +1767 -0
  8. data/stylesheets/am-commons/_am-footer.scss +102 -0
  9. data/stylesheets/am-commons/_am-header.scss +160 -0
  10. data/stylesheets/am-commons/_am-icons-definition.scss +616 -0
  11. data/stylesheets/am-commons/_am-icons.scss +57 -0
  12. data/stylesheets/am-commons/_am-main-menu.scss +243 -0
  13. data/stylesheets/am-commons/_am-print.scss +35 -0
  14. data/stylesheets/am-commons/_am-social-menu.scss +34 -0
  15. data/stylesheets/am-commons/_am-sprite-splash.scss +109 -0
  16. data/stylesheets/am-commons/_am-utils.scss +249 -0
  17. data/stylesheets/am-commons/_am-variables.scss +69 -0
  18. data/stylesheets/am-commons/_epp-grid.scss +1395 -0
  19. data/stylesheets/am-commons/_epp-mixins.scss +38 -0
  20. data/stylesheets/am-commons/_epp-pixelator.scss +352 -0
  21. data/stylesheets/am-commons/_epp-utils.scss +1230 -0
  22. data/stylesheets/am-commons/_fonts.scss +156 -0
  23. data/stylesheets/am-commons/am-airlines.scss +74 -0
  24. data/stylesheets/am-commons/am-checkout.scss +258 -0
  25. data/stylesheets/am-commons/am-common.scss +19 -0
  26. data/stylesheets/am-commons/am-flights-result.scss +2404 -0
  27. data/stylesheets/am-commons/am-flights-resultv2.scss +390 -0
  28. data/stylesheets/am-commons/am-not-found.scss +74 -0
  29. data/stylesheets/am-commons/am.scss +16 -0
  30. data/stylesheets/am-commons/epp-visual-help.scss +36 -0
  31. data/stylesheets/am-commons/epp.scss +12 -0
  32. data/stylesheets/am-commons/flight-result-searchbox.scss +69 -0
  33. metadata +29 -8
  34. data/stylesheets/am-commons/_am.scss +0 -5
  35. data/stylesheets/am-commons/_components.scss +0 -1
  36. data/stylesheets/am-commons/_utils.scss +0 -5
  37. data/stylesheets/am-commons/am/_variables.scss +0 -0
  38. data/stylesheets/am-commons/components/_example.scss +0 -0
  39. data/stylesheets/am-commons/utils/_example.scss +0 -0
@@ -0,0 +1,1767 @@
1
+ //---------------------------------\\
2
+ //----------Table of Content-------\\
3
+ //---------------------------------\\
4
+
5
+ // 00 Redefine Html Tags modified by 8pp pixelator
6
+ // 01 Button
7
+ // 02 Group Button
8
+ // 03 Logo
9
+ // 04 Info Box
10
+ // 05 Country Selector
11
+ // 06 X Close
12
+ // 07 Message Error
13
+ // 08 Jquery Override
14
+ // 09 Cover
15
+ // 10 Searchbox
16
+ // 11 Alert Messages
17
+ // 12 Box List
18
+ // 13 Stars
19
+ // 14 Loader
20
+ // 15 Breadcrumb
21
+ // 16 Pagination
22
+ // 17 Restrictions
23
+ // 18 Filters
24
+
25
+ @import "am-header";
26
+ @import "am-main-menu";
27
+ @import "am-social-menu";
28
+ @import "am-footer";
29
+ @import "epp-mixins";
30
+ @import "am-american-flags";
31
+
32
+
33
+ body{
34
+ font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
35
+ color:$gray-darker;
36
+ }
37
+ a{
38
+ &:link{
39
+ color:$link;
40
+ text-decoration: none;
41
+ }
42
+ &:visited{
43
+ color:$link-dark;
44
+ text-decoration: none;
45
+ }
46
+ &:hover{
47
+ color:$link-light;
48
+ text-decoration: underline;
49
+ }
50
+ &:active{
51
+ color:$link-dark;
52
+ text-decoration: underline;
53
+ }
54
+ }
55
+ fieldset{
56
+ border-color:$gray-lighter;
57
+ }
58
+ h1{
59
+ @include font-rem(normal,32px,40px,null);
60
+ }
61
+ h2{
62
+ @include font-rem(normal,28px,32px,null);
63
+ }
64
+ h3{
65
+ @include font-rem(normal,24px,32px,null);
66
+ }
67
+ h4{
68
+ @include font-rem(normal,20px,24px,null);
69
+ }
70
+ h5{
71
+ @include font-rem(normal,18px,24px,null);
72
+ }
73
+ h6{
74
+ @include font-rem(normal,16px,24px,null);
75
+ }
76
+ input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], input[type="datetime"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"]{
77
+ border-color:$gray-lighter;
78
+ border-top-color: $gray;
79
+ color: $gray-dark;
80
+ @include font-rem(normal, 14px, 16px);
81
+ @include input-placeholder {
82
+ color: $gray-light;
83
+ font-weight: normal;
84
+ }
85
+ &.input--error{
86
+ @include input-placeholder {
87
+ color: $red;
88
+ }
89
+ }
90
+ &.input--sm{
91
+ height:24px;
92
+ padding:4px 4px;
93
+ vertical-align:top;
94
+ @include font-rem(null,14px,16px,sans-serif);
95
+ }
96
+ &.input--lg{
97
+ height:40px;
98
+ padding:4px 4px;
99
+ vertical-align:top;
100
+ @include font-rem(null,14px,32px,sans-serif);
101
+ }
102
+ }
103
+ label{
104
+ @include font-rem(null,14px,24px,null);
105
+ }
106
+ select{
107
+ border-color:$gray-lighter;
108
+ border-top-color: $gray;
109
+ font-family: Arial, Tahoma, sans-serif;
110
+ color:$gray-darker;
111
+ @include font-rem(normal, 14px, 16px);
112
+ &.select--error{
113
+ color: $red;
114
+ }
115
+ &.select--sm{
116
+ height:24px;
117
+ }
118
+ &.select--lg{
119
+ height:40px;
120
+ }
121
+ }
122
+ p{
123
+ @include font-rem(normal, 14px, 16px);
124
+ }
125
+
126
+ textarea{
127
+ border-color:$gray-lighter;
128
+ }
129
+ ul{
130
+ @include font-rem(null,14px,24px,null);
131
+ list-style-position: inside;
132
+ margin-bottom:8px;
133
+ }
134
+
135
+
136
+
137
+ //--------------Buton-------------\\
138
+
139
+ .button{
140
+ background-color:$gray;
141
+ border-radius:4px;
142
+ display: inline-block;
143
+ text-decoration:none;
144
+ font-weight: 400;
145
+ color:white;
146
+ text-align:center;
147
+ -webkit-font-smoothing: antialiased;
148
+ cursor:pointer;
149
+ padding: 0 16px;
150
+ @include box-shadow (0 -2px 0 $gray-dark inset);
151
+ //@include text-shadow(1px 1px 1px black);
152
+
153
+ &:hover{
154
+ background-color:$gray-light;
155
+ @include box-shadow (0 -2px 0 $gray inset);
156
+ text-decoration: none;
157
+ }
158
+ &.button--lg{
159
+ height: 40px!important;
160
+ font-size:20px!important;
161
+ line-height:40px!important;
162
+ font-weight: bold;
163
+ [class*="icon-"]{
164
+ line-height: 40px;
165
+ font-size: 32px;
166
+ }
167
+ }
168
+ &.button--md{
169
+ height: 32px!important;
170
+ font-size:16px!important;
171
+ line-height:32px!important;
172
+ font-weight: bold;
173
+ padding: 0 8px;
174
+ [class*="icon-"]{
175
+ line-height: 32px;
176
+ font-size: 24px;
177
+ }
178
+ }
179
+ &.button--sm{
180
+ height: 24px!important;
181
+ font-size:14px!important;
182
+ line-height:24px!important;
183
+ font-weight: bold;
184
+ padding: 0 8px;
185
+ [class*="icon-"]{
186
+ line-height: 24px;
187
+ font-size: 14px;
188
+ }
189
+ }
190
+ &.button--primary{
191
+ background-color:$orange;
192
+ color:#fff;
193
+ @include box-shadow (0 -2px 0 $orange-dark inset);
194
+ @include text-shadow(1px 1px 1px black);
195
+ &:hover{
196
+ background:$orange-light;
197
+ @include box-shadow (0 -2px 0 $orange inset);
198
+ }
199
+ &.button--selected{
200
+ cursor: default;
201
+ background:$orange-dark;
202
+ }
203
+ }
204
+ &.button--secondary{
205
+ background-color:$blue;
206
+ color:#fff;
207
+ @include box-shadow (0 -2px 0 $blue-dark inset);
208
+ @include text-shadow(1px 1px 1px black);
209
+ &:hover{
210
+ background:$blue-light;
211
+ @include box-shadow (0 -2px 0 $blue inset);
212
+ }
213
+ &.button--selected{
214
+ cursor: default;
215
+ background:$blue-dark;
216
+ }
217
+ }
218
+ &.button--block{
219
+ display:block;
220
+ width:100%;
221
+ @include box-sizing (border-box);
222
+ }
223
+ &.button--disabled{
224
+ background-color:$gray-light;
225
+ color:#888;
226
+ cursor:default;
227
+ @include box-shadow (none);
228
+ @include text-shadow(none);
229
+ }
230
+ &.button--loading {
231
+ background-size: 30px 30px;
232
+ background-image: -webkit-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
233
+ background-image: -o-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
234
+ background-image: linear-gradient(to top right, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
235
+ background-color:$gray-light;
236
+ color:$gray-lighter;
237
+ cursor:default;
238
+ -webkit-animation: barberpole 0.5s linear infinite;
239
+ -webkit-animation: barberpole 0.5s linear infinite;
240
+ -moz-animation: barberpole 0.5s linear infinite;
241
+ -o-animation: barberpole 0.5s linear infinite;
242
+ animation: barberpole 0.5s linear infinite;
243
+ @include box-shadow (none);
244
+ @include text-shadow(none);
245
+ &:hover{
246
+ background-image: -webkit-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
247
+ background-image: -o-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
248
+ background-image: linear-gradient(to top right, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
249
+ color:$gray-lighter;
250
+ cursor:default;
251
+ -webkit-animation: barberpole 0.5s linear infinite;
252
+ -webkit-animation: barberpole 0.5s linear infinite;
253
+ -moz-animation: barberpole 0.5s linear infinite;
254
+ -o-animation: barberpole 0.5s linear infinite;
255
+ animation: barberpole 0.5s linear infinite;
256
+ }
257
+ }
258
+ &.button--link{
259
+ background:transparent;
260
+ color:#319fda;
261
+ box-shadow:none;
262
+ &.button--selected{
263
+ color: black;
264
+ cursor: default;
265
+ background:transparent;
266
+ }
267
+ }
268
+
269
+ &--pressed {
270
+ @include box-shadow (0 2px 0 $orange-dark inset !important);
271
+ background:$orange !important;
272
+
273
+ &:hover {
274
+ background:$orange-light !important;
275
+ @include box-shadow (0 2px 0 $orange inset !important);
276
+ }
277
+ }
278
+
279
+ }
280
+
281
+ @include keyframes (barberpole) {
282
+ from { background-position: 0 0; }
283
+ to { background-position: 60px 30px; }
284
+ }
285
+
286
+ //------------Group Buton-----------\\
287
+
288
+ .button-group{
289
+ font-size: 0;
290
+ .button{
291
+ border-radius: 0;
292
+ border-right: 1px solid;
293
+ &:first-child{
294
+ border-top-left-radius: 4px;
295
+ border-bottom-left-radius: 4px;
296
+ }
297
+ &:last-child{
298
+ border-right:0 none;
299
+ border-top-right-radius: 4px;
300
+ border-bottom-right-radius: 4px;
301
+ }
302
+ &--link{
303
+ border: 0 none;
304
+ }
305
+ }
306
+ &--block{
307
+ display: table;
308
+ width: 100%;
309
+ .button{
310
+ display: table-cell;
311
+ }
312
+ }
313
+ &--vertical{
314
+ overflow: hidden;
315
+ .button{
316
+ display: inline-block;
317
+ float: left;
318
+ clear: both;
319
+ border-right: 0 none;
320
+ border-bottom: 1px solid;
321
+ box-sizing: border-box;
322
+ text-align: left;
323
+ &:first-child{
324
+ border-top-right-radius: 4px;
325
+ border-top-left-radius: 4px;
326
+ border-bottom-left-radius: 0;
327
+ }
328
+ &:last-child{
329
+ border-bottom: 0 none;
330
+ border-bottom-right-radius: 4px;
331
+ border-bottom-left-radius: 4px;
332
+ border-top-right-radius: 0;
333
+ }
334
+ }
335
+ &.button-group--block{
336
+ .button{
337
+ display: block;
338
+ width: 100%;
339
+ }
340
+ }
341
+ }
342
+
343
+ }
344
+
345
+ //--------------Logo-------------\\
346
+
347
+ .background-am-logo {
348
+ background:rgba(255,255,255,0.5);
349
+ padding-top:16px;
350
+ }
351
+
352
+ .am-logo{
353
+ display: inline-block;
354
+ vertical-align: top;
355
+ position:relative;
356
+ font-size:0px;
357
+
358
+ &__iso {
359
+ color:$orange;
360
+ font-size:36px;
361
+ vertical-align:top;
362
+ margin-right:8px;
363
+ position:relative;
364
+
365
+ &:before {
366
+ position:relative;
367
+ z-index:1;
368
+ }
369
+
370
+ &:after {
371
+ position:absolute;
372
+ top:13%;
373
+ left:10%;
374
+ content:"";
375
+ width:80%;
376
+ height:80%;
377
+ background:$white;
378
+ border-radius:50%;
379
+ }
380
+
381
+ }
382
+
383
+ &__typo {
384
+ position:absolute;
385
+ left:44px;
386
+ top:0;
387
+ color:$blue;
388
+ @include font-rem(normal, 190px, 36px, null);
389
+ line-height:36px !important;
390
+ vertical-align:top;
391
+ overflow:hidden;
392
+ }
393
+
394
+ &__com {
395
+ color:$orange;
396
+ @include font-rem(normal, 190px, 36px, null);
397
+ line-height:36px !important;
398
+ vertical-align:top;
399
+ overflow:hidden;
400
+ }
401
+
402
+ &__slogan{
403
+ display: block;
404
+ font-size: 12px;
405
+ color: $blue !important;
406
+ line-height: 9px;
407
+ text-align: right;
408
+ text-decoration: none;
409
+ vertical-align:top;
410
+ }
411
+
412
+ &--lg{
413
+
414
+ & .am-logo__iso{
415
+ font-size: 80px;
416
+ line-height: 80px;
417
+ margin-right:16px;
418
+ }
419
+
420
+ & .am-logo__typo{
421
+ font-size: 400px;
422
+ line-height: 80px !important;
423
+ height: 80px;
424
+ left:96px;
425
+ }
426
+
427
+ & .am-logo__com{
428
+ font-size: 400px;
429
+ line-height: 80px !important;
430
+ height: 80px;
431
+ }
432
+
433
+ & .am-logo__slogan{
434
+ display: block;
435
+ font-size: 16px;
436
+ color: #FF7900;
437
+ line-height: 16px;
438
+ text-align: right;
439
+ position: relative;
440
+ top: -8px;
441
+ }
442
+
443
+ @include respond-to(ph){
444
+ & .am-logo__iso{
445
+ font-size: 36px;
446
+ line-height: 36px;
447
+ margin-right:8px;
448
+ }
449
+
450
+ & .am-logo__typo{
451
+ margin-left: 0px;
452
+ font-size: 190px;
453
+ line-height: 36px !important;
454
+ height: 36px;
455
+ left:44px;
456
+ }
457
+
458
+ & .am-logo__com{
459
+ margin-left: 0px;
460
+ font-size: 190px;
461
+ line-height: 36px !important;
462
+ height: 36px;
463
+ }
464
+
465
+ & .am-logo__slogan{
466
+ font-size: 12px;
467
+ line-height: 9px;
468
+ top: 0;
469
+ }
470
+ }
471
+
472
+ }
473
+
474
+ &:hover{
475
+ text-decoration: none;
476
+ }
477
+
478
+ }
479
+
480
+ //--------------Info Box-------------\\
481
+
482
+ .info-box{
483
+ background-color: #fff;
484
+ position: relative;
485
+ &__content{
486
+ min-height: 152px;
487
+ overflow: hidden;
488
+ position: relative;
489
+ z-index: 1;
490
+ &__title {
491
+ text-align: center;
492
+ font-size: 20px;
493
+ padding: 16px 8px 0 8px;
494
+ margin: 0;
495
+ line-height: 24px;
496
+ }
497
+ &__text {
498
+ text-align: center;
499
+ font-size: 13px;
500
+ padding:16px;
501
+ }
502
+ }
503
+ &__img {
504
+ position: relative;
505
+ @include box-shadow(0px 3px 5px 0px rgba(50, 50, 50, 0.2));
506
+ img{
507
+ width: 100%;
508
+ }
509
+ .info-box__icon{
510
+ display: block;
511
+ width: 40px;
512
+ height:40px;
513
+ border:1px solid red;
514
+ position: absolute;
515
+ left: 50%;
516
+ margin-left: -20px;
517
+ bottom: -20px;
518
+ border-radius: 25px;
519
+ background-color: $gray;
520
+ border:3px solid #fff;
521
+ color: #fff;
522
+ text-align: center;
523
+ line-height: 40px;
524
+ font-size: 20px;
525
+ z-index: 1;
526
+ }
527
+ }
528
+ &--reverse{
529
+ .info-box__content{
530
+ @include box-shadow(0px 3px 5px 0px rgba(50, 50, 50, 0.2));
531
+ }
532
+ .info-box__icon{
533
+ top: -20px;
534
+ }
535
+ }
536
+ }
537
+
538
+ //--------------Country Selector-------------\\
539
+
540
+ .country-selector{
541
+ display: inline-block;
542
+ position: relative;
543
+ margin: 20px 8px 0 16px;
544
+ z-index: 2;
545
+ border-right: 1px solid $gray-lighter;
546
+ padding-right: 16px;
547
+ @include respond-to(ph){
548
+ display: block;
549
+ margin:0;
550
+ }
551
+ &__current{
552
+ display: inline-block;
553
+ cursor: pointer;
554
+ .flag{
555
+ vertical-align: top;
556
+ margin: 6px 4px 4px 4px;
557
+ }
558
+ .icon-arrow-down{
559
+ font-size: 12px;
560
+ margin-left: 4px;
561
+ vertical-align: top;
562
+ line-height: 24px;
563
+ }
564
+ }
565
+ &__list{
566
+ position: absolute;
567
+ z-index: 1;
568
+ top: 20px;
569
+ left: 0;
570
+ background: white;
571
+ border: 1px solid $gray-lighter;
572
+ display: none;
573
+ list-style-type: none;
574
+ margin: 0;
575
+ padding: 0;
576
+ text-align: left;
577
+ white-space: nowrap;
578
+ &__item{
579
+ line-height: 24px;
580
+ margin: 0px;
581
+ font-size: 12px;
582
+ a{
583
+ padding: 0 8px;
584
+ display: block;
585
+ }
586
+ .flag{
587
+ margin-right: 8px;
588
+ vertical-align: top;
589
+ margin-top: 6px;
590
+ }
591
+ }
592
+ &__item--current{
593
+ background: $gray-lightest;
594
+ a{
595
+ color:$gray;
596
+ }
597
+ }
598
+ }
599
+ }
600
+
601
+ //--------------X close-------------\\
602
+
603
+ .x-close{
604
+ width: 15px;
605
+ height: 15px;
606
+ background: $blue;
607
+ display: inline-block;
608
+ text-align: center;
609
+ line-height: 15px;
610
+ font-size: 16px;
611
+ color:white;
612
+ }
613
+
614
+ //--------------Message Error-------------\\
615
+
616
+ .message--error{
617
+ color: $red-dark;
618
+ @include font-rem(normal, 12px, 16px);
619
+
620
+ font-family: almundo;
621
+ @extend .icon-exclamation-circle;
622
+
623
+ &:first-letter {
624
+ margin-right:4px;
625
+ }
626
+
627
+ }
628
+
629
+ //--------------Autocomplete -------------\\
630
+
631
+ .ui-autocomplete{
632
+ background: white;
633
+ list-style-type:none;
634
+ margin: 0;
635
+ border: 1px solid $gray-lighter;
636
+ box-sizing: border-box;
637
+ li{
638
+ line-height: 24px;
639
+ margin: 0;
640
+ padding: 4px 8px;
641
+ &:hover{
642
+ background:$cyan-light;
643
+ cursor: pointer;
644
+ }
645
+ }
646
+ }
647
+ .ui-autocomplete{
648
+ .division{
649
+ cursor: default;
650
+ background-color: $gray-lighter;
651
+ position: relative;
652
+ font-size: 14px;
653
+ &:hover{
654
+ cursor: default;
655
+ background-color: $gray-lighter;
656
+ }
657
+ &:before {
658
+ content: "";
659
+ width: 0;
660
+ height: 0;
661
+ border-top: 8px solid $gray-lighter;
662
+ border-left: 8px solid transparent;
663
+ border-right: 8px solid transparent;
664
+ position: absolute;
665
+ bottom: -4px;
666
+ left: 8px;
667
+ }
668
+ }
669
+ }
670
+
671
+ .ui-datepicker .ui-datepicker-header {
672
+ color: white;
673
+ background: $blue;
674
+ border: 1px solid $gray-light;
675
+ }
676
+ .ui-datepicker-calendar{
677
+ border-bottom: 1px solid #AFAFAF;
678
+ }
679
+ .ui-datepicker td span, .ui-datepicker td a {
680
+ text-align: center!important;
681
+ }
682
+
683
+ .ui-datepicker-next{
684
+ color:white;
685
+ font-weight: bold;
686
+ text-align: center;
687
+ cursor:pointer;
688
+
689
+ &:after{
690
+ content:">";
691
+ }
692
+ }
693
+ .ui-datepicker-prev{
694
+ color:white;
695
+ font-weight: bold;
696
+ text-align: center;
697
+ cursor:pointer;
698
+
699
+ &:after{
700
+ content:"<";
701
+ }
702
+ }
703
+ .ui-state-active{
704
+ background: $cyan;
705
+ color: white!important;
706
+ }
707
+
708
+ //--------------Cover-------------\\
709
+
710
+ .cover{
711
+ background-size: cover;
712
+ background-position: center center;
713
+ width: 100%;
714
+ display: table;
715
+ .logo-ctn{
716
+ display: table-cell;
717
+ vertical-align: middle;
718
+ }
719
+ &--md{
720
+ height: 184px;
721
+ overflow: hidden;
722
+ display: block;
723
+ background-position: center center;
724
+ }
725
+ &--lg{
726
+ height: 344px;
727
+ }
728
+ }
729
+
730
+
731
+
732
+ //--------------Searchbox-------------\\
733
+
734
+ .search{
735
+ background-repeat: repeat-x;
736
+ height: 344px;
737
+ margin-bottom: 32px;
738
+ @include respond-to(ph){
739
+ height: auto;
740
+ }
741
+ @include respond-to(tb){
742
+ height: auto;
743
+ }
744
+ &__ctn{
745
+ background-position: center center;
746
+ background-size: cover;
747
+ padding-top: 16px;
748
+ padding-bottom: 16px;
749
+ height: 312px;
750
+ @include respond-to(ph){
751
+ height: auto;
752
+ }
753
+ @include respond-to(tb){
754
+ height: auto;
755
+ }
756
+ .searchbox{
757
+ background-color: $orange;
758
+ position: relative;
759
+ z-index: 2;
760
+ min-height: 312px;
761
+ label{
762
+ color: white;
763
+ font-size: 14px;
764
+ }
765
+ input[type="text"], input[type="search"], select{
766
+ margin-bottom: 8px;
767
+ }
768
+ h1{
769
+ font-size: 24px;
770
+ line-height: 32px;
771
+ font-weight: normal;
772
+ color:white;
773
+ margin-bottom: 8px;
774
+ }
775
+ }
776
+ .search__links{
777
+ list-style-type: none;
778
+ display: inline-block;
779
+ float: right;
780
+ margin-bottom: 0;
781
+ li{
782
+ margin-bottom: 8px;
783
+ &:last-child{
784
+ margin-bottom: 0;
785
+ }
786
+ }
787
+ &__item{
788
+ display: table;
789
+ .icon{
790
+ display: table-cell;
791
+ font-size: 32px;
792
+ line-height: 32px;
793
+ background: rgba($gray-lightest, 0.8);
794
+ width: 80px;
795
+ vertical-align: middle;
796
+ color: $gray-dark;
797
+ text-align: center;
798
+ }
799
+ .text{
800
+ display: table-cell;
801
+ background: rgba($gray-lighter, 0.8);
802
+ color: $gray;
803
+ padding: 8px;
804
+ vertical-align: top;
805
+ width: 224px;
806
+ color: $gray-dark;
807
+ p{
808
+ margin: 0;
809
+ }
810
+ }
811
+ &:hover{
812
+ text-decoration: none;
813
+ .icon{
814
+ background: rgba($gray-lightest, 0.5);
815
+ }
816
+ .text{
817
+ background: rgba($gray-lighter, 0.5);
818
+ text-decoration: none;
819
+ }
820
+ }
821
+ }
822
+ }
823
+ }
824
+ &--flight{
825
+ //background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-paris-bg.png');
826
+ background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-grecia-bg.jpg');
827
+ @include respond-to(ph){
828
+ //background-image: none!important;
829
+ }
830
+ @include respond-to(tb){
831
+ //background-image: none!important;
832
+ }
833
+ .search__ctn{
834
+ //background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-paris.png');
835
+ background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-grecia.png');
836
+ @include respond-to(ph){
837
+ background-image: none!important;
838
+ }
839
+ @include respond-to(tb){
840
+ background-image: none!important;
841
+ }
842
+ .business{
843
+ margin: 24px 0 8px 0;
844
+ label{
845
+ display: inline-block;
846
+ }
847
+ }
848
+ }
849
+ }
850
+ &--hotel{
851
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search_bg--sidney.jpg');
852
+ .search__ctn{
853
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--opera.png');
854
+ @include respond-to(ph){
855
+ background-image: none!important;
856
+ }
857
+ @include respond-to(tb){
858
+ background-image: none!important;
859
+ }
860
+ .room{
861
+ margin-bottom: 8px;
862
+ .room__title{
863
+ text-align: right;
864
+ margin-top: 24px;
865
+ color: white;
866
+ display: block;
867
+ @include font-rem(bold,14px,32px);
868
+ }
869
+ .age-title{
870
+ text-align: right;
871
+ }
872
+ }
873
+ }
874
+ }
875
+ &--cruise{
876
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--11.jpg');
877
+ .search__ctn{
878
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--11.jpg');
879
+ @include respond-to(ph){
880
+ background-image: none;
881
+ }
882
+ @include respond-to(tb){
883
+ background-image: none;
884
+ }
885
+ }
886
+ }
887
+ &--car{
888
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--4.jpg');
889
+ .search__ctn{
890
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--4.jpg');
891
+ @include respond-to(ph){
892
+ background-image: none;
893
+ }
894
+ @include respond-to(tb){
895
+ background-image: none;
896
+ }
897
+ }
898
+ }
899
+ &--insurance{
900
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--5.jpg');
901
+ .search__ctn{
902
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--5.jpg');
903
+ @include respond-to(ph){
904
+ background-image: none;
905
+ }
906
+ @include respond-to(tb){
907
+ background-image: none;
908
+ }
909
+ }
910
+ }
911
+ &--excursions{
912
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--6.jpg');
913
+ .search__ctn{
914
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--6.jpg');
915
+ @include respond-to(ph){
916
+ background-image: none;
917
+ }
918
+ @include respond-to(tb){
919
+ background-image: none;
920
+ }
921
+ }
922
+ }
923
+ &--package{
924
+ background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-beach2-bg.png');
925
+ .search__ctn{
926
+ background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-beach2.png');
927
+ @include respond-to(ph){
928
+ background-image: none;
929
+ }
930
+ @include respond-to(tb){
931
+ background-image: none;
932
+ }
933
+ }
934
+ }
935
+ &.promo{
936
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--promo2.jpg');
937
+ .search__ctn{
938
+ background-image: url('https://af3e5cfa538f2e5425ae-e2a9c8f39dfb2e0608050999cf0e668b.ssl.cf5.rackcdn.com/search__bg--promo.jpg');
939
+ @include respond-to(ph){
940
+ background-image: none;
941
+ }
942
+ @include respond-to(tb){
943
+ background-image: none;
944
+ }
945
+ }
946
+ }
947
+ }
948
+ .jumbopromo{
949
+ background-color: $gray;
950
+ background-color: rgba(0,0,0,0.2);
951
+ .jumbopromo__txt{
952
+ color: white;
953
+ @include font-rem(normal,24px,32px);
954
+ @include text-shadow(1px 1px 1px black);
955
+ }
956
+ img{
957
+ width: 100%;
958
+ max-width: 624px;
959
+ }
960
+ }
961
+
962
+
963
+ //--------------Alert-------------\\
964
+
965
+
966
+ .alert {
967
+ position:relative;
968
+ font-size:0;
969
+ display:table;
970
+ &__icon {
971
+ position:relative;
972
+ width:56px;
973
+ display:table-cell;
974
+ vertical-align:middle;
975
+ box-sizing:border-box;
976
+ padding:16px;
977
+ @include border-left-radius(2px);
978
+ @include font-rem(normal,24px,24px,null);
979
+ color:white;
980
+ background:$warning;
981
+ [class*="icon-"] {
982
+ vertical-align:top;
983
+ }
984
+ }
985
+ &__text {
986
+ position:relative;
987
+ box-sizing:border-box;
988
+ display:table-cell;
989
+ vertical-align:middle;
990
+ padding:8px 16px;
991
+ @include border-right-radius(2px);
992
+ background:$warning-light;
993
+ &-primary {
994
+ @include font-rem(bold,16px,24px,null);
995
+ margin-bottom:0;
996
+ }
997
+ &-secondary {
998
+ @include font-rem(normal,12px,16px,null);
999
+ margin-bottom:0;
1000
+ }
1001
+ }
1002
+
1003
+ &--block {
1004
+ width:100%;
1005
+ }
1006
+
1007
+ &--error{
1008
+
1009
+ .alert__icon:before {
1010
+ border-color:$error;
1011
+ }
1012
+
1013
+ .alert__icon {
1014
+ background:$error;
1015
+ }
1016
+
1017
+ .alert__text {
1018
+ background:$error-light;
1019
+ }
1020
+
1021
+ }
1022
+
1023
+ &--warning {
1024
+
1025
+ .alert__icon:before {
1026
+ border-color:$warning;
1027
+ }
1028
+
1029
+ .alert__icon {
1030
+ background:$warning;
1031
+ }
1032
+
1033
+ .alert__text {
1034
+ background:$warning-light;
1035
+ }
1036
+
1037
+ }
1038
+
1039
+ &--ok {
1040
+
1041
+ .alert__icon:before {
1042
+ border-color:$ok;
1043
+ }
1044
+
1045
+ .alert__icon {
1046
+ background:$ok;
1047
+ }
1048
+
1049
+ .alert__text {
1050
+ background:$ok-light;
1051
+ }
1052
+ }
1053
+ &--notification {
1054
+
1055
+ .alert__icon:before {
1056
+ border-color:$notification;
1057
+ }
1058
+
1059
+ .alert__icon {
1060
+ background:$notification;
1061
+ }
1062
+
1063
+ .alert__text {
1064
+ background:$notification-light;
1065
+ }
1066
+ }
1067
+ &--arrow-bottom {
1068
+
1069
+ .alert__icon:before {
1070
+ content:"";
1071
+ position:absolute;
1072
+ border-width:8px;
1073
+ border-style:solid;
1074
+ bottom:-16px;
1075
+ left:50%;
1076
+ margin-left:-8px;
1077
+ border-right-color:transparent;
1078
+ border-left-color:transparent;
1079
+ border-bottom-color:transparent;
1080
+ }
1081
+
1082
+
1083
+ }
1084
+
1085
+ &--arrow-top {
1086
+
1087
+ .alert__icon:before {
1088
+ content:"";
1089
+ position:absolute;
1090
+ border-width:8px;
1091
+ border-style:solid;
1092
+ top:-16px;
1093
+ left:50%;
1094
+ margin-left:-8px;
1095
+ border-right-color:transparent;
1096
+ border-left-color:transparent;
1097
+ border-top-color:transparent;
1098
+ }
1099
+ }
1100
+
1101
+ &--arrow-left {
1102
+
1103
+ .alert__icon:before {
1104
+ content:"";
1105
+ position:absolute;
1106
+ border-width:8px;
1107
+ border-style:solid;
1108
+ top:50%;
1109
+ left:-16px;
1110
+ margin-top:-8px;
1111
+ border-left-color:transparent;
1112
+ border-bottom-color:transparent;
1113
+ border-top-color:transparent;
1114
+ }
1115
+ }
1116
+
1117
+ &--arrow-right {
1118
+ .alert__icon:before {
1119
+ content:"";
1120
+ position:absolute;
1121
+ border-width:8px;
1122
+ border-style:solid;
1123
+ top:50%;
1124
+ right:-16px;
1125
+ margin-top:-8px;
1126
+ border-bottom-color:transparent;
1127
+ border-right-color:transparent;
1128
+ border-top-color:transparent;
1129
+ }
1130
+ .alert__icon {
1131
+ width:56px;
1132
+ }
1133
+ .alert__text {
1134
+ width:calc(100% - 56px);
1135
+ }
1136
+ &.alert--small {
1137
+ .alert__text {
1138
+ width:calc(100% - 32px);
1139
+ }
1140
+ }
1141
+ }
1142
+ &--position-right {
1143
+ .alert__icon {
1144
+ float:right;
1145
+ @include border-right-radius (2px);
1146
+ @include border-left-radius (0px);
1147
+ }
1148
+ .alert__text {
1149
+ float:right;
1150
+ @include border-left-radius (2px);
1151
+ @include border-right-radius (0px);
1152
+ }
1153
+ }
1154
+ &--small {
1155
+ .alert__icon {
1156
+ width:32px;
1157
+ padding:8px;
1158
+ @include font-rem(normal,16px,16px,null);
1159
+ }
1160
+ }
1161
+ }
1162
+
1163
+ //--------------Modal-------------\\
1164
+
1165
+ .modal {
1166
+ position:absolute;
1167
+ box-sizing:border-box;
1168
+ min-width:320px;
1169
+ //padding:16px;
1170
+ background: $white;
1171
+ //border:16px solid black;
1172
+ //border:16px solid rgba(0,0,0,0.6);
1173
+ //@include background-clip(padding-box);
1174
+ z-index:99;
1175
+ //box-shadow:0px 0px 5px $black;
1176
+ @include border-radius(8px);
1177
+
1178
+ left:50%;
1179
+ @include translateX (-50%);
1180
+ .ie8 &{
1181
+ left:8px;
1182
+ }
1183
+
1184
+ & .button {
1185
+
1186
+ [class*="icon-"] {
1187
+ margin-top:4px;
1188
+ @include font-rem(normal,32px,32px,null);
1189
+ }
1190
+
1191
+ }
1192
+
1193
+ &__header {
1194
+
1195
+ background:$gray-lightest;
1196
+ padding:16px 32px 16px 16px;
1197
+ @include border-top-radius(16px);
1198
+ overflow:hidden;
1199
+
1200
+ &__text {
1201
+ display:inline-block;
1202
+ margin-bottom:0px;
1203
+ @include font-rem(normal,16px,24px);
1204
+ margin-right:8px;
1205
+ }
1206
+
1207
+ &__close {
1208
+ position:absolute;
1209
+ right:16px;
1210
+ top:16px;
1211
+ color:$gray;
1212
+ @include font-rem(normal,16px,16px,null);
1213
+ padding:4px;
1214
+ cursor:pointer;
1215
+ //float:right;
1216
+
1217
+ &:hover {
1218
+ text-decoration:none;
1219
+ color:$gray-lighter;
1220
+ }
1221
+
1222
+ &:visited {
1223
+ color:$white;
1224
+ }
1225
+
1226
+ &:link {
1227
+ color:$white;
1228
+ }
1229
+
1230
+ &:active {
1231
+ color:$white;
1232
+ }
1233
+
1234
+ }
1235
+
1236
+ &--clear {
1237
+ background:$white;
1238
+ border-bottom:1px solid $gray-lighter;
1239
+ margin:0px 16px;
1240
+ padding:16px 0px;
1241
+ }
1242
+
1243
+ &--clear-color {
1244
+ background:$white;
1245
+ }
1246
+
1247
+ }
1248
+
1249
+ &__content {
1250
+ padding:16px;
1251
+ @include border-bottom-radius(16px);
1252
+ }
1253
+
1254
+ /*
1255
+ &__close {
1256
+ position:absolute;
1257
+ right:-16px;
1258
+ top:-16px;
1259
+ color:$white;
1260
+ background:$orange;
1261
+ @include font-rem(normal,16px,16px,null);
1262
+ padding:4px;
1263
+ cursor:pointer;
1264
+
1265
+ &:hover {
1266
+ text-decoration:none;
1267
+ background:$orange-light;
1268
+ }
1269
+
1270
+ &:visited {
1271
+ color:$white;
1272
+ }
1273
+
1274
+ &:link {
1275
+ color:$white;
1276
+ }
1277
+
1278
+ &:active {
1279
+ color:$white;
1280
+ }
1281
+
1282
+ }*/
1283
+
1284
+ &--sm {
1285
+ width:320px;
1286
+ }
1287
+ &--md {
1288
+ width:80%;
1289
+ max-width:768px;
1290
+ }
1291
+ &--lg {
1292
+ width:80%;
1293
+ margin:auto;
1294
+ max-width:1024px;
1295
+ }
1296
+ &--fluid {
1297
+ width:90%;
1298
+ }
1299
+
1300
+ }
1301
+
1302
+
1303
+ //--------------Modal background-------------\\
1304
+
1305
+
1306
+ .modal-background {
1307
+ //display:none;
1308
+ position:fixed;
1309
+ top:0;
1310
+ left:0;
1311
+ right:0;
1312
+ bottom:0;
1313
+ background:$black;
1314
+ background:rgba(0,0,0,0.6);
1315
+ z-index:98;
1316
+ }
1317
+
1318
+
1319
+ //--------------Box List-------------\\
1320
+
1321
+ .box-list {
1322
+ @include box-sizing(border-box);
1323
+ border:1px solid $gray-light;
1324
+ padding:8px;
1325
+ @include font-rem(normal, 14px, 16px);
1326
+ &__title {
1327
+ display:block;
1328
+ color:$blue;
1329
+ margin-bottom:8px;
1330
+ border-bottom:1px solid $gray-light;
1331
+ padding-bottom:4px;
1332
+ }
1333
+ &__list {
1334
+ list-style:none;
1335
+ }
1336
+ &__item {
1337
+ margin-left:0px;
1338
+ margin-bottom:4px;
1339
+ [class*="icon-"] {
1340
+ margin-right:4px;
1341
+ vertical-align:middle;
1342
+ @include font-rem(normal, 24px, 24px);
1343
+ }
1344
+ }
1345
+
1346
+ }
1347
+
1348
+ //--------------Stars-------------\\
1349
+
1350
+ .stars {
1351
+ font-size:0;
1352
+ @include font-rem(null, null, 16px);
1353
+ vertical-align:middle;
1354
+ display:inline-block;
1355
+
1356
+ [class="icon-star"] {
1357
+ @include font-rem(normal, 16px, 16px);
1358
+ color:$warning;
1359
+ vertical-align:top;
1360
+ }
1361
+ }
1362
+
1363
+ //-------------Loader------------\\
1364
+
1365
+ .loader {
1366
+ box-sizing:border-box;
1367
+ margin:auto;
1368
+ font-size: 10px;
1369
+ position: relative;
1370
+ text-indent: -9999em;
1371
+ border-top: 4px solid rgba(255, 121, 0, 0.4);
1372
+ border-right: 4px solid rgba(255, 121, 0, 0.4);
1373
+ border-bottom: 4px solid rgba(255, 121, 0, 0.4);
1374
+ border-left: 4px solid #FF7900 ;
1375
+ @include animation (loading 1.1s infinite linear);
1376
+ @include border-radius(50%);
1377
+ width: 24px;
1378
+ height: 24px;
1379
+
1380
+ &:after {
1381
+ @include border-radius(50%);
1382
+ width: 24px;
1383
+ height: 24px;
1384
+ }
1385
+
1386
+ &--md {
1387
+ width: 32px;
1388
+ height: 32px;
1389
+
1390
+ &:after {
1391
+ @include border-radius(50%);
1392
+ width: 32px;
1393
+ height: 32px;
1394
+ }
1395
+ }
1396
+
1397
+ &--lg {
1398
+ width: 40px;
1399
+ height: 40px;
1400
+
1401
+ &:after {
1402
+ @include border-radius(50%);
1403
+ width: 40px;
1404
+ height: 40px;
1405
+ }
1406
+ }
1407
+
1408
+ }
1409
+
1410
+ @include keyframes (loading) {
1411
+ 0% {
1412
+ @include rotate(0deg);
1413
+ }
1414
+ 100% {
1415
+ @include rotate(360deg);
1416
+ }
1417
+ }
1418
+
1419
+ .loading-result {
1420
+ background:$gray-lightest;
1421
+ padding:32px;
1422
+
1423
+ & .loader {
1424
+ margin-bottom:16px;
1425
+ }
1426
+
1427
+ }
1428
+
1429
+ //------------Breadcrumb-----------\\
1430
+
1431
+ .breadcrumbs {
1432
+ &__list {
1433
+ padding-left:0px;
1434
+ list-style:none;
1435
+ @include font-rem(normal, 11px, 16px);
1436
+ }
1437
+ &__item {
1438
+ display:inline-block;
1439
+ margin-left:0px;
1440
+ }
1441
+ &__link {
1442
+
1443
+ }
1444
+ }
1445
+
1446
+ //------------Pagination-----------\\
1447
+
1448
+ .pagination {
1449
+
1450
+ &__list {
1451
+ list-style:none;
1452
+ font-size:0px;
1453
+ }
1454
+
1455
+ &__item {
1456
+ display:inline-block;
1457
+ margin-left:0px;
1458
+ border-width:1px 1px 1px 0px;
1459
+ border-style:solid;
1460
+ border-color:$gray-lighter;
1461
+ @include font-rem(normal, 13px, 16px);
1462
+
1463
+ &:first-child {
1464
+ border-left:1px solid $gray-lighter;
1465
+ }
1466
+
1467
+ }
1468
+
1469
+ &__link {
1470
+ display:block;
1471
+ padding:8px;
1472
+
1473
+ &:hover {
1474
+ background:$gray-lightest;
1475
+ }
1476
+ }
1477
+
1478
+ &__item--disabled {
1479
+ background:$white;
1480
+
1481
+ & .pagination__link {
1482
+ color:$gray-lighter;
1483
+ cursor:default;
1484
+
1485
+ &:hover {
1486
+ text-decoration:none;
1487
+ background:$white;
1488
+ }
1489
+
1490
+ }
1491
+
1492
+ }
1493
+
1494
+ & .selected {
1495
+ background:$gray;
1496
+ color:$white;
1497
+ cursor:default;
1498
+
1499
+ &:hover {
1500
+ text-decoration:none;
1501
+ }
1502
+ }
1503
+
1504
+ }
1505
+
1506
+ //------------Restrictions-----------\\
1507
+
1508
+ .restrictions {
1509
+ background: $gray-lightest;
1510
+ @include font-rem(normal, 13px, 16px);
1511
+
1512
+ & label {
1513
+ display:inline;
1514
+ line-height:32px;
1515
+ }
1516
+
1517
+ & select {
1518
+ margin-right:24px;
1519
+
1520
+ &:last-child {
1521
+ margin-right:0px;
1522
+ }
1523
+
1524
+ }
1525
+
1526
+ &__icons {
1527
+ line-height:32px;
1528
+
1529
+ [class*="icon-"] {
1530
+ width:32px;
1531
+ }
1532
+
1533
+ }
1534
+
1535
+
1536
+ }
1537
+
1538
+ //------------Filters-----------\\
1539
+
1540
+ .filtersv2 {
1541
+ //border:1px solid $gray-lighter;
1542
+ padding:0px !important;
1543
+
1544
+ &__head {
1545
+
1546
+ display:table;
1547
+ @include font-rem(normal, 14px, 32px);
1548
+ margin-bottom:8px;
1549
+
1550
+ &__text {
1551
+ display:table-cell;
1552
+ }
1553
+
1554
+ &__link {
1555
+ display:table-cell;
1556
+ text-align:right;
1557
+ }
1558
+
1559
+ }
1560
+
1561
+ }
1562
+
1563
+ .filterv2 {
1564
+
1565
+ position:relative;
1566
+ margin-bottom:8px;
1567
+
1568
+ &__loader {
1569
+ z-index:99;
1570
+ position:absolute;
1571
+ top:0;
1572
+ bottom:0;
1573
+ left:0;
1574
+ right:0;
1575
+ background:$black;
1576
+ background:rgba(255,255,255,.6);
1577
+ text-align:center;
1578
+
1579
+ &__content {
1580
+ position:absolute;
1581
+ top:50%;
1582
+ left:50%;
1583
+ @include translate(-50%, -50%);
1584
+
1585
+ }
1586
+
1587
+ &__icon {
1588
+
1589
+
1590
+ }
1591
+
1592
+ &__text {
1593
+ display:block;
1594
+ color:white;
1595
+ font-weight:bold;
1596
+ }
1597
+
1598
+ &--active {
1599
+
1600
+ background:rgba(0,0,0,.6);
1601
+
1602
+ & .filter__loader__content {
1603
+ display:block;
1604
+ }
1605
+
1606
+ }
1607
+
1608
+ }
1609
+
1610
+ &__header {
1611
+ background:$gray-lighter;
1612
+ cursor:pointer;
1613
+ //margin-bottom:16px;
1614
+ @include font-rem(normal, 14px, 16px);
1615
+ display:block;
1616
+ padding:8px;
1617
+ @include border-top-radius(2px);
1618
+
1619
+ /*&:after {
1620
+ font-family:almundo;
1621
+ content:"\e61a";
1622
+ position:absolute;
1623
+ right:8px;
1624
+ }*/
1625
+
1626
+ &__icon {
1627
+ @include respond-to(ph) {
1628
+ @include rotate(180deg);
1629
+ }
1630
+ position:absolute;
1631
+ right:8px;
1632
+ }
1633
+
1634
+ &--collapse {
1635
+ @include border-bottom-radius(2px);
1636
+ }
1637
+
1638
+ }
1639
+
1640
+ &__content {
1641
+ @include respond-to(ph) {
1642
+ display:none;
1643
+ }
1644
+ }
1645
+
1646
+ &__label--inline {
1647
+ display:inline-block;
1648
+
1649
+ }
1650
+
1651
+ &__label {
1652
+ @include font-rem(normal, 14px, 16px);
1653
+ }
1654
+
1655
+ &__check {
1656
+
1657
+ }
1658
+
1659
+ & ul {
1660
+ list-style:none;
1661
+
1662
+ & li {
1663
+ margin-left:0px;
1664
+ line-height:16px;
1665
+ border-bottom:1px dashed $gray-lightest;
1666
+ padding:8px 0px;
1667
+ }
1668
+
1669
+ }
1670
+
1671
+ &__list-double {
1672
+
1673
+ //display:table;
1674
+ //display:block;
1675
+ //width:100%;
1676
+ //border-collapse:collapse;
1677
+
1678
+ & * {
1679
+ cursor:pointer;
1680
+ }
1681
+
1682
+ &__item {
1683
+
1684
+ //display:table-row;
1685
+ border-bottom:1px dashed $gray-lighter;
1686
+ padding:8px 0px;
1687
+
1688
+ &-input {
1689
+ margin-top:4px;
1690
+ margin-right:4px;
1691
+ }
1692
+
1693
+ &-left {
1694
+ position:relative;
1695
+ //width:70%;
1696
+ //display:table-cell;
1697
+ /*border-bottom:1px solid $gray-lighter;*/
1698
+ }
1699
+
1700
+ &-text {
1701
+ display:inline-block;
1702
+ vertical-align:middle;
1703
+ width:70%;
1704
+ }
1705
+
1706
+ &-right {
1707
+ //width:30%;
1708
+ //display:table-cell;
1709
+ position:absolute;
1710
+ right:0px;
1711
+ top:4px;
1712
+ min-width:16px;
1713
+ text-align:center;
1714
+ //float:right;
1715
+ //@include font-rem(normal, 10px, 16px);
1716
+ //padding:8px 0px;
1717
+
1718
+ //background:$gray-lightest;
1719
+ //padding:4px;
1720
+
1721
+ &.selected {
1722
+
1723
+ background:$gray-lighter;
1724
+
1725
+ }
1726
+ /*border-bottom:1px solid $gray-lighter;*/
1727
+
1728
+ //& span {
1729
+ // background:$gray-lightest;
1730
+ // padding:4px;
1731
+
1732
+ // &.selected {
1733
+
1734
+ // background:$gray-lighter;
1735
+
1736
+ // }
1737
+ //}
1738
+
1739
+ }
1740
+
1741
+ &:last-child{
1742
+ border-bottom: 0;
1743
+ }
1744
+ }
1745
+ &__title{
1746
+ border: 0px;
1747
+ padding:8px 0px;
1748
+ padding-bottom: 0px;
1749
+ color:$black;
1750
+ }
1751
+
1752
+ }
1753
+
1754
+ & .filter-container {
1755
+ padding:8px 16px;
1756
+ border:1px solid $gray-lighter;
1757
+ border-bottom-width:4px;
1758
+ @include border-bottom-radius(2px);
1759
+ }
1760
+
1761
+ & .filter-airline-all {
1762
+ width:40px;
1763
+ text-align:center;
1764
+ line-height:24px;
1765
+ }
1766
+
1767
+ }