summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/objects/_lightbox.scss24
1 files changed, 20 insertions, 4 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index c2894ee..74515c4 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -10,6 +10,7 @@
10 --thumbnail: ( 10 --thumbnail: (
11 --size: fn.global-dim(--size --700), 11 --size: fn.global-dim(--size --700),
12 --spacing: fn.global-dim(--size --100), 12 --spacing: fn.global-dim(--size --100),
13 --idle: 1px,
13 --selected: 2px, 14 --selected: 2px,
14 ), 15 ),
15 --close-button: ( 16 --close-button: (
@@ -38,6 +39,7 @@
38 @include iro.props-store(( 39 @include iro.props-store((
39 --colors: ( 40 --colors: (
40 --thumbnail: ( 41 --thumbnail: (
42 --idle: fn.global-color(--fg-hi2),
41 --selected: fn.global-color(--fg-lo), 43 --selected: fn.global-color(--fg-lo),
42 ), 44 ),
43 --footer: ( 45 --footer: (
@@ -89,7 +91,12 @@
89 } 91 }
90 92
91 @include iro.bem-elem('thumbnail') { 93 @include iro.bem-elem('thumbnail') {
92 opacity: .75; 94 position: relative;
95 flex: 0 0 auto;
96 width: fn.dim(--thumbnail --size);
97 height: fn.dim(--thumbnail --size);
98 opacity: .75;
99 box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset;
93 100
94 &:hover { 101 &:hover {
95 opacity: 1; 102 opacity: 1;
@@ -103,13 +110,22 @@
103 110
104 @include iro.bem-elem('thumbnail-img') { 111 @include iro.bem-elem('thumbnail-img') {
105 display: block; 112 display: block;
106 width: fn.dim(--thumbnail --size); 113 position: absolute;
107 min-width: fn.dim(--thumbnail --size); 114 top: 0;
108 height: fn.dim(--thumbnail --size); 115 left: 0;
116 width: 100%;
117 height: 100%;
109 object-fit: cover; 118 object-fit: cover;
110 object-position: center center; 119 object-position: center center;
111 } 120 }
112 121
122 @include iro.bem-elem('thumbnail-icon') {
123 position: absolute;
124 top: 50%;
125 left: 50%;
126 transform: translate(-50%, -50%);
127 }
128
113 @include iro.bem-elem('close-btn') { 129 @include iro.bem-elem('close-btn') {
114 flex: 0 0 auto; 130 flex: 0 0 auto;
115 margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto; 131 margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;