UNPKG

2.2 kBSCSSView Raw
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}