summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--package.json2
-rw-r--r--src/objects/_lightbox.scss36
-rw-r--r--tpl/objects/lightbox.pug4
3 files changed, 41 insertions, 1 deletions
diff --git a/package.json b/package.json
index fa4f082..22207c8 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", 11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
12 "build:assets": "cp -r static/* public/", 12 "build:assets": "cp -r static/* public/",
13 "build:app": "pug tpl/index.pug -p tpl --out public/", 13 "build:app": "pug tpl/index.pug -p tpl --out public/",
14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x send smile public/icons.svg", 14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-left chevron-right hash x send smile public/icons.svg",
15 "build:style": "sass --load-path=node_modules src/index.scss public/style.css", 15 "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
16 "lint:style": "stylelint \"src/**/*.scss\"", 16 "lint:style": "stylelint \"src/**/*.scss\"",
17 "fix:style": "stylelint \"src/**/*.scss\" --fix", 17 "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 9d5fb2f..9a79ee8 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -12,10 +12,28 @@
12 --spacing: fn.global-dim(--size --100), 12 --spacing: fn.global-dim(--size --100),
13 --selected: 3px, 13 --selected: 3px,
14 ), 14 ),
15 --nav-btn: (
16 --font-size: fn.global-dim(--font-size --400),
17 --pad-x: fn.global-dim(--size --300),
18 --pad-y: fn.global-dim(--size --300),
19 ),
15 ), 20 ),
16 ), 'dims'); 21 ), 'dims');
17 22
18 @include iro.props-store(( 23 @include iro.props-store((
24 --dims: (
25 --thumbnail: (
26 --size: fn.global-dim(--size --600),
27 ),
28 --nav-btn: (
29 --font-size: fn.global-dim(--font-size --300),
30 --pad-x: fn.global-dim(--size --150),
31 --pad-y: fn.global-dim(--size --150),
32 ),
33 ),
34 ), 'md');
35
36 @include iro.props-store((
19 --colors: ( 37 --colors: (
20 --thumbnail: ( 38 --thumbnail: (
21 --selected: fn.global-color(--fg-lo), 39 --selected: fn.global-color(--fg-lo),
@@ -47,10 +65,12 @@
47 } 65 }
48 66
49 @include iro.bem-elem('img') { 67 @include iro.bem-elem('img') {
68 box-sizing: border-box;
50 grid-area: content; 69 grid-area: content;
51 max-width: 100%; 70 max-width: 100%;
52 max-height: 100%; 71 max-height: 100%;
53 margin: auto; 72 margin: auto;
73 padding: 0 calc(fn.dim(--nav-btn --font-size) + fn.dim(--nav-btn --pad-x));
54 } 74 }
55 75
56 @include iro.bem-elem('thumbnail') { 76 @include iro.bem-elem('thumbnail') {
@@ -80,5 +100,21 @@
80 grid-area: close; 100 grid-area: close;
81 font-size: fn.global-dim(--font-size --150); 101 font-size: fn.global-dim(--font-size --150);
82 } 102 }
103
104 @include iro.bem-elem('prev-btn', 'next-btn') {
105 position: absolute;
106 top: 50%;
107 padding: fn.dim(--nav-btn --pad-y) fn.dim(--nav-btn --pad-x);
108 transform: translate(0, -50%);
109 font-size: fn.dim(--nav-btn --font-size);
110 }
111
112 @include iro.bem-elem('prev-btn') {
113 left: 0;
114 }
115
116 @include iro.bem-elem('next-btn') {
117 right: 0;
118 }
83 } 119 }
84} 120}
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index bfb4f49..c335fdb 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -1,9 +1,13 @@
1include icon.pug
2
1mixin lightbox(images) 3mixin lightbox(images)
2 .o-lightbox 4 .o-lightbox
3 header.o-lightbox__header.s-colored-links 5 header.o-lightbox__header.s-colored-links
4 block 6 block
5 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') 7 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
6 img.o-lightbox__img(src=images[0]) 8 img.o-lightbox__img(src=images[0])
9 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__prev-btn')
10 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__next-btn')
7 footer.o-lightbox__footer 11 footer.o-lightbox__footer
8 each img, i in images 12 each img, i in images
9 - classes = i === 0 ? 'is-selected' : '' 13 - classes = i === 0 ? 'is-selected' : ''