summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_backdrop.scss10
-rw-r--r--src/objects/_lightbox.scss29
2 files changed, 15 insertions, 24 deletions
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 164b487..e7f2cfd 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -5,8 +5,6 @@
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --z-index: 10000, 7 --z-index: 10000,
8 --pad-x: fn.global-dim(--size --150),
9 --pad-y: fn.global-dim(--size --150),
10 ), 8 ),
11 ), 'dims'); 9 ), 'dims');
12 10
@@ -22,13 +20,6 @@
22 ), 20 ),
23 ), 'colors-dark'); 21 ), 'colors-dark');
24 22
25 @include iro.props-store((
26 --dims: (
27 --pad-x: fn.global-dim(--size --100),
28 --pad-y: fn.global-dim(--size --100),
29 )
30 ), 'sm');
31
32 @include iro.bem-object(iro.props-namespace()) { 23 @include iro.bem-object(iro.props-namespace()) {
33 display: flex; 24 display: flex;
34 position: fixed; 25 position: fixed;
@@ -39,7 +30,6 @@
39 left: 0; 30 left: 0;
40 box-sizing: border-box; 31 box-sizing: border-box;
41 flex-direction: column; 32 flex-direction: column;
42 padding: fn.dim(--pad-y) fn.dim(--pad-x);
43 background-color: fn.color(--bg); 33 background-color: fn.color(--bg);
44 color: fn.global-color(--fg); 34 color: fn.global-color(--fg);
45 } 35 }
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 131db29..14aa302 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -6,20 +6,20 @@
6@include iro.props-namespace('lightbox') { 6@include iro.props-namespace('lightbox') {
7 @include iro.props-store(( 7 @include iro.props-store((
8 --dims: ( 8 --dims: (
9 --pad-x: fn.global-dim(--size --150), 9 --pad: fn.global-dim(--size --150),
10 --pad-y: fn.global-dim(--size --150),
11 --spacing: fn.global-dim(--size --200), 10 --spacing: fn.global-dim(--size --200),
12 --thumbnail: ( 11 --thumbnail: (
13 --size: fn.global-dim(--size --800), 12 --size: fn.global-dim(--size --700),
14 --spacing: fn.global-dim(--size --100), 13 --spacing: fn.global-dim(--size --100),
15 --selected: 2px, //fn.global-dim(--border --medium), 14 --selected: 2px,
16 ), 15 ),
17 --button: ( 16 --close-button: (
18 --font-size: fn.global-dim(--font-size --200), 17 --font-size: fn.global-dim(--font-size --200),
19 ), 18 ),
20 --nav-btn: ( 19 --nav-button: (
21 --width: fn.global-dim(--size --3800), 20 --width: fn.global-dim(--size --3800),
22 --height: fn.global-dim(--size --3800), 21 --height: fn.global-dim(--size --3800),
22 --font-size: fn.global-dim(--font-size --400),
23 ), 23 ),
24 ), 24 ),
25 ), 'dims'); 25 ), 'dims');
@@ -29,7 +29,7 @@
29 --thumbnail: ( 29 --thumbnail: (
30 --size: fn.global-dim(--size --600), 30 --size: fn.global-dim(--size --600),
31 ), 31 ),
32 --nav-btn: ( 32 --nav-button: (
33 --width: fn.global-dim(--size --2500), 33 --width: fn.global-dim(--size --2500),
34 --height: fn.global-dim(--size --2500), 34 --height: fn.global-dim(--size --2500),
35 ), 35 ),
@@ -52,6 +52,7 @@
52 gap: fn.dim(--spacing); 52 gap: fn.dim(--spacing);
53 position: relative; 53 position: relative;
54 height: 100%; 54 height: 100%;
55 padding: fn.dim(--pad);
55 56
56 @include iro.bem-elem('footer') { 57 @include iro.bem-elem('footer') {
57 grid-area: footer; 58 grid-area: footer;
@@ -74,7 +75,7 @@
74 max-width: 100%; 75 max-width: 100%;
75 max-height: 100%; 76 max-height: 100%;
76 margin: auto; 77 margin: auto;
77 padding: 0 calc(fn.dim(--button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px); 78 padding: 0 calc(fn.dim(--nav-button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px);
78 } 79 }
79 80
80 @include iro.bem-elem('thumbnail') { 81 @include iro.bem-elem('thumbnail') {
@@ -100,7 +101,7 @@
100 101
101 @include iro.bem-elem('close-btn') { 102 @include iro.bem-elem('close-btn') {
102 grid-area: close; 103 grid-area: close;
103 font-size: fn.dim(--button --font-size); 104 font-size: fn.dim(--close-button --font-size);
104 } 105 }
105 106
106 @include iro.bem-elem('prev-btn', 'next-btn') { 107 @include iro.bem-elem('prev-btn', 'next-btn') {
@@ -108,7 +109,7 @@
108 top: 50%; 109 top: 50%;
109 overflow: visible; 110 overflow: visible;
110 transform: translate(0, -50%); 111 transform: translate(0, -50%);
111 font-size: fn.dim(--button --font-size); 112 font-size: fn.dim(--nav-button --font-size);
112 113
113 &::after { 114 &::after {
114 content: ''; 115 content: '';
@@ -117,8 +118,8 @@
117 z-index: -1; 118 z-index: -1;
118 top: 50%; 119 top: 50%;
119 left: 50%; 120 left: 50%;
120 width: fn.dim(--nav-btn --width); 121 width: fn.dim(--nav-button --width);
121 height: fn.dim(--nav-btn --height); 122 height: fn.dim(--nav-button --height);
122 transform: translate(-50%, -50%); 123 transform: translate(-50%, -50%);
123 } 124 }
124 } 125 }