1 | @import 'lg-variables';
|
2 | @import 'lg-mixins';
|
3 | .lg-outer {
|
4 | .lg-pager-outer {
|
5 | text-align: center;
|
6 | z-index: $zindex-pager;
|
7 | height: 10px;
|
8 | margin-bottom: 10px;
|
9 |
|
10 | &.lg-pager-hover {
|
11 | .lg-pager-cont {
|
12 | overflow: visible;
|
13 | }
|
14 | }
|
15 | }
|
16 |
|
17 | &.lg-single-item {
|
18 | .lg-pager-outer {
|
19 | display: none;
|
20 | }
|
21 | }
|
22 |
|
23 | .lg-pager-cont {
|
24 | cursor: pointer;
|
25 | display: inline-block;
|
26 | overflow: hidden;
|
27 | position: relative;
|
28 | vertical-align: top;
|
29 | margin: 0 5px;
|
30 |
|
31 | &:hover {
|
32 | .lg-pager-thumb-cont {
|
33 | opacity: 1;
|
34 | @include translate3d(0, 0, 0);
|
35 | }
|
36 | }
|
37 |
|
38 | &.lg-pager-active {
|
39 | .lg-pager {
|
40 | box-shadow: 0 0 0 2px white inset;
|
41 | }
|
42 | }
|
43 | }
|
44 |
|
45 | .lg-pager-thumb-cont {
|
46 | background-color: #fff;
|
47 | color: #fff;
|
48 | bottom: 100%;
|
49 | height: 83px;
|
50 | left: 0;
|
51 | margin-bottom: 20px;
|
52 | margin-left: -60px;
|
53 | opacity: 0;
|
54 | padding: 5px;
|
55 | position: absolute;
|
56 | width: 120px;
|
57 | border-radius: 3px;
|
58 | will-change: transform, opacity;
|
59 | @include transitionCustom(
|
60 | opacity 0.15s ease 0s,
|
61 | transform 0.15s ease 0s
|
62 | );
|
63 | @include translate3d(0, 5px, 0);
|
64 |
|
65 | img {
|
66 | width: 100%;
|
67 | height: 100%;
|
68 | }
|
69 | }
|
70 |
|
71 | .lg-pager {
|
72 | background-color: rgba(255, 255, 255, 0.5);
|
73 | border-radius: 50%;
|
74 | box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
|
75 | display: block;
|
76 | height: 12px;
|
77 | @include transition(box-shadow 0.3s ease 0s);
|
78 | width: 12px;
|
79 |
|
80 | &:hover,
|
81 | &:focus {
|
82 | box-shadow: 0 0 0 8px white inset;
|
83 | }
|
84 | }
|
85 |
|
86 | .lg-caret {
|
87 | border-left: 10px solid transparent;
|
88 | border-right: 10px solid transparent;
|
89 | border-top: 10px dashed;
|
90 | bottom: -10px;
|
91 | display: inline-block;
|
92 | height: 0;
|
93 | left: 50%;
|
94 | margin-left: -5px;
|
95 | position: absolute;
|
96 | vertical-align: middle;
|
97 | width: 0;
|
98 | }
|
99 | }
|