1 | @import 'lg-variables';
|
2 | @import 'lg-mixins';
|
3 | $thumbnails-margin: 5px;
|
4 |
|
5 | .lg-outer {
|
6 | .lg-thumb-outer {
|
7 | background-color: $lg-thumb-bg;
|
8 | width: 100%;
|
9 | max-height: 350px;
|
10 | overflow: hidden;
|
11 | float: left;
|
12 |
|
13 | &.lg-grab {
|
14 | .lg-thumb-item {
|
15 | @include grab-cursor;
|
16 | }
|
17 | }
|
18 |
|
19 | &.lg-grabbing {
|
20 | .lg-thumb-item {
|
21 | @include grabbing-cursor;
|
22 | }
|
23 | }
|
24 |
|
25 | &.lg-dragging {
|
26 | .lg-thumb {
|
27 | @include transition-duration(0s !important);
|
28 | }
|
29 | }
|
30 | &.lg-rebuilding-thumbnails {
|
31 | .lg-thumb {
|
32 | @include transition-duration(0s !important);
|
33 | }
|
34 | }
|
35 |
|
36 | &.lg-thumb-align-middle {
|
37 | text-align: center;
|
38 | }
|
39 | &.lg-thumb-align-left {
|
40 | text-align: left;
|
41 | }
|
42 | &.lg-thumb-align-right {
|
43 | text-align: right;
|
44 | }
|
45 | }
|
46 |
|
47 | &.lg-single-item {
|
48 | .lg-thumb-outer {
|
49 | display: none;
|
50 | }
|
51 | }
|
52 |
|
53 | .lg-thumb {
|
54 | padding: 5px 0;
|
55 | height: 100%;
|
56 | margin-bottom: -$thumbnails-margin;
|
57 | display: inline-block;
|
58 | vertical-align: middle;
|
59 | @media (min-width: 768px) {
|
60 | padding: 10px 0;
|
61 | }
|
62 | }
|
63 |
|
64 | .lg-thumb-item {
|
65 | cursor: pointer;
|
66 | float: left;
|
67 | overflow: hidden;
|
68 | height: 100%;
|
69 | border-radius: 2px;
|
70 | margin-bottom: $thumbnails-margin;
|
71 | will-change: border-color;
|
72 | @media (min-width: 768px) {
|
73 | border-radius: 4px;
|
74 | border: 2px solid #fff;
|
75 | @include transition(border-color 0.25s ease);
|
76 | }
|
77 |
|
78 | &.active,
|
79 | &:hover {
|
80 | border-color: $lg-theme-highlight;
|
81 | }
|
82 |
|
83 | img {
|
84 | width: 100%;
|
85 | height: 100%;
|
86 | object-fit: cover;
|
87 | display: block;
|
88 | }
|
89 | }
|
90 |
|
91 | &.lg-can-toggle {
|
92 | .lg-item {
|
93 | padding-bottom: 0;
|
94 | }
|
95 | }
|
96 |
|
97 | .lg-toggle-thumb {
|
98 | &:after {
|
99 | content: '\e1ff';
|
100 | }
|
101 | }
|
102 | &.lg-animate-thumb {
|
103 | .lg-thumb {
|
104 | @include transition-timing-function(
|
105 | cubic-bezier(0.215, 0.61, 0.355, 1)
|
106 | );
|
107 | }
|
108 | }
|
109 | }
|