diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/objects/_lightbox.scss | 38 |
1 files changed, 25 insertions, 13 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 9a79ee8..6d83f01 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
@@ -10,12 +10,14 @@ | |||
10 | --thumbnail: ( | 10 | --thumbnail: ( |
11 | --size: fn.global-dim(--size --800), | 11 | --size: fn.global-dim(--size --800), |
12 | --spacing: fn.global-dim(--size --100), | 12 | --spacing: fn.global-dim(--size --100), |
13 | --selected: 3px, | 13 | --selected: 3px, //fn.global-dim(--border-width --medium), |
14 | ), | ||
15 | --button: ( | ||
16 | --font-size: fn.global-dim(--font-size --200), | ||
14 | ), | 17 | ), |
15 | --nav-btn: ( | 18 | --nav-btn: ( |
16 | --font-size: fn.global-dim(--font-size --400), | 19 | --width: fn.global-dim(--size --3800), |
17 | --pad-x: fn.global-dim(--size --300), | 20 | --height: fn.global-dim(--size --3800), |
18 | --pad-y: fn.global-dim(--size --300), | ||
19 | ), | 21 | ), |
20 | ), | 22 | ), |
21 | ), 'dims'); | 23 | ), 'dims'); |
@@ -26,9 +28,8 @@ | |||
26 | --size: fn.global-dim(--size --600), | 28 | --size: fn.global-dim(--size --600), |
27 | ), | 29 | ), |
28 | --nav-btn: ( | 30 | --nav-btn: ( |
29 | --font-size: fn.global-dim(--font-size --300), | 31 | --width: fn.global-dim(--size --2500), |
30 | --pad-x: fn.global-dim(--size --150), | 32 | --height: fn.global-dim(--size --2500), |
31 | --pad-y: fn.global-dim(--size --150), | ||
32 | ), | 33 | ), |
33 | ), | 34 | ), |
34 | ), 'md'); | 35 | ), 'md'); |
@@ -47,6 +48,7 @@ | |||
47 | grid-template-columns: minmax(0, 1fr) auto; | 48 | grid-template-columns: minmax(0, 1fr) auto; |
48 | grid-template-areas: 'header close' 'content content' 'footer footer'; | 49 | grid-template-areas: 'header close' 'content content' 'footer footer'; |
49 | gap: fn.dim(--spacing); | 50 | gap: fn.dim(--spacing); |
51 | position: relative; | ||
50 | height: 100%; | 52 | height: 100%; |
51 | 53 | ||
52 | @include iro.bem-elem('footer') { | 54 | @include iro.bem-elem('footer') { |
@@ -70,7 +72,7 @@ | |||
70 | max-width: 100%; | 72 | max-width: 100%; |
71 | max-height: 100%; | 73 | max-height: 100%; |
72 | margin: auto; | 74 | margin: auto; |
73 | padding: 0 calc(fn.dim(--nav-btn --font-size) + fn.dim(--nav-btn --pad-x)); | 75 | padding: 0 calc(fn.dim(--button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px); |
74 | } | 76 | } |
75 | 77 | ||
76 | @include iro.bem-elem('thumbnail') { | 78 | @include iro.bem-elem('thumbnail') { |
@@ -95,18 +97,28 @@ | |||
95 | } | 97 | } |
96 | 98 | ||
97 | @include iro.bem-elem('close-btn') { | 99 | @include iro.bem-elem('close-btn') { |
98 | --icon-stroke-width: 2px; | ||
99 | |||
100 | grid-area: close; | 100 | grid-area: close; |
101 | font-size: fn.global-dim(--font-size --150); | 101 | font-size: fn.dim(--button --font-size); |
102 | } | 102 | } |
103 | 103 | ||
104 | @include iro.bem-elem('prev-btn', 'next-btn') { | 104 | @include iro.bem-elem('prev-btn', 'next-btn') { |
105 | position: absolute; | 105 | position: absolute; |
106 | top: 50%; | 106 | top: 50%; |
107 | padding: fn.dim(--nav-btn --pad-y) fn.dim(--nav-btn --pad-x); | 107 | overflow: visible; |
108 | transform: translate(0, -50%); | 108 | transform: translate(0, -50%); |
109 | font-size: fn.dim(--nav-btn --font-size); | 109 | font-size: fn.dim(--button --font-size); |
110 | |||
111 | &::after { | ||
112 | content: ''; | ||
113 | display: block; | ||
114 | position: absolute; | ||
115 | z-index: -1; | ||
116 | top: 50%; | ||
117 | left: 50%; | ||
118 | width: fn.dim(--nav-btn --width); | ||
119 | height: fn.dim(--nav-btn --height); | ||
120 | transform: translate(-50%, -50%); | ||
121 | } | ||
110 | } | 122 | } |
111 | 123 | ||
112 | @include iro.bem-elem('prev-btn') { | 124 | @include iro.bem-elem('prev-btn') { |