diff options
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 36 | ||||
-rw-r--r-- | tpl/objects/lightbox.pug | 4 |
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 @@ | |||
1 | include icon.pug | ||
2 | |||
1 | mixin lightbox(images) | 3 | mixin 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' : '' |