diff options
-rw-r--r-- | src/objects/_backdrop.scss | 10 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 29 |
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 | } |