UNPKG

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