From 4418444d157578c414a4c9f35ca1d2b08efa095d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Feb 2022 07:16:07 +0100 Subject: Improved lightbox nav buttons --- package.json | 4 ++-- src/objects/_lightbox.scss | 38 +++++++++++++++++++++----------- tpl/objects/action-button.pug | 2 +- tpl/objects/icon.pug | 3 ++- yarn.lock | 51 +++++++++++++++++++------------------------ 5 files changed, 52 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index 22207c8..13c1056 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,8 @@ "postcss-scss": "^4.0.3", "pug": "^3.0.0", "pug-cli": "^1.0.0-alpha6", - "sass": "^1.28.0", - "stylelint": "^14.5.0", + "sass": "^1.49.8", + "stylelint": "^14.5.1", "stylelint-config-sass-guidelines": "^9.0.1", "svg-sprite": "^1.5.4" } 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 @@ --thumbnail: ( --size: fn.global-dim(--size --800), --spacing: fn.global-dim(--size --100), - --selected: 3px, + --selected: 3px, //fn.global-dim(--border-width --medium), + ), + --button: ( + --font-size: fn.global-dim(--font-size --200), ), --nav-btn: ( - --font-size: fn.global-dim(--font-size --400), - --pad-x: fn.global-dim(--size --300), - --pad-y: fn.global-dim(--size --300), + --width: fn.global-dim(--size --3800), + --height: fn.global-dim(--size --3800), ), ), ), 'dims'); @@ -26,9 +28,8 @@ --size: fn.global-dim(--size --600), ), --nav-btn: ( - --font-size: fn.global-dim(--font-size --300), - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --150), + --width: fn.global-dim(--size --2500), + --height: fn.global-dim(--size --2500), ), ), ), 'md'); @@ -47,6 +48,7 @@ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'header close' 'content content' 'footer footer'; gap: fn.dim(--spacing); + position: relative; height: 100%; @include iro.bem-elem('footer') { @@ -70,7 +72,7 @@ max-width: 100%; max-height: 100%; margin: auto; - padding: 0 calc(fn.dim(--nav-btn --font-size) + fn.dim(--nav-btn --pad-x)); + padding: 0 calc(fn.dim(--button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px); } @include iro.bem-elem('thumbnail') { @@ -95,18 +97,28 @@ } @include iro.bem-elem('close-btn') { - --icon-stroke-width: 2px; - grid-area: close; - font-size: fn.global-dim(--font-size --150); + font-size: fn.dim(--button --font-size); } @include iro.bem-elem('prev-btn', 'next-btn') { position: absolute; top: 50%; - padding: fn.dim(--nav-btn --pad-y) fn.dim(--nav-btn --pad-x); + overflow: visible; transform: translate(0, -50%); - font-size: fn.dim(--nav-btn --font-size); + font-size: fn.dim(--button --font-size); + + &::after { + content: ''; + display: block; + position: absolute; + z-index: -1; + top: 50%; + left: 50%; + width: fn.dim(--nav-btn --width); + height: fn.dim(--nav-btn --height); + transform: translate(-50%, -50%); + } } @include iro.bem-elem('prev-btn') { diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index d752fa6..0467bd7 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -17,7 +17,7 @@ mixin action-button a(class=classes href=href) if attributes.icon - +icon(attributes.icon) + +icon(attributes.icon)(block=!block) = ' ' if block span.o-action-button__label diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug index 494abf6..1ed6052 100644 --- a/tpl/objects/icon.pug +++ b/tpl/objects/icon.pug @@ -2,7 +2,8 @@ mixin icon(id) - let href = 'icons.svg#' + id let classes = { - 'o-icon': true + 'o-icon': true, + 'o-icon--block': attributes.block, } if (attributes.class) { classes[attributes.class] = true; diff --git a/yarn.lock b/yarn.lock index a946522..3745f64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -623,10 +623,10 @@ cosmiconfig@^7.0.1: path-type "^4.0.0" yaml "^1.10.0" -css-functions-list@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.0.0.tgz#faa770a0666aea11435efc0889935336cea564be" - integrity sha512-rfwhBOvXVFcKrSwmLxD8JQyuEEy/3g3Y9FMI2l6iV558Coeo1ucXypXb4rwrVpk5Osh5ViXp2DTgafw8WxglhQ== +css-functions-list@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.0.1.tgz#1460df7fb584d1692c30b105151dbb988c8094f9" + integrity sha512-PriDuifDt4u4rkDgnqRCLnjfMatufLmWNfQnGCq34xZwpY3oabwhB9SqRBmuvWUgndbemCFlKqg+nO7C2q0SBw== css-select-base-adapter@^0.1.1: version "0.1.1" @@ -1266,7 +1266,7 @@ internal-slot@^1.0.3: "iro-icons@git+https://git.vulpes.one/git/iro-icons.git": version "1.0.0" - resolved "git+https://git.vulpes.one/git/iro-icons.git#14ba13c215955ca8d22f37b49e0a60b3dd53e783" + resolved "git+https://git.vulpes.one/git/iro-icons.git#b871fcd977047a20812ebac8d82f7a1d695eee2b" "iro-sass@git+https://git.vulpes.one/git/iro-sass.git": version "1.0.2" @@ -1435,7 +1435,7 @@ is-symbol@^1.0.2, is-symbol@^1.0.3: dependencies: has-symbols "^1.0.2" -is-typedarray@^1.0.0, is-typedarray@~1.0.0: +is-typedarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= @@ -2458,10 +2458,10 @@ safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -sass@^1.28.0: - version "1.49.7" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.7.tgz#22a86a50552b9b11f71404dfad1b9ff44c6b0c49" - integrity sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ== +sass@^1.49.8: + version "1.49.8" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828" + integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" @@ -2498,7 +2498,7 @@ side-channel@^1.0.4: get-intrinsic "^1.0.2" object-inspect "^1.9.0" -signal-exit@^3.0.2: +signal-exit@^3.0.7: version "3.0.7" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9" integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ== @@ -2693,15 +2693,15 @@ stylelint-scss@^4.0.0: postcss-selector-parser "^6.0.6" postcss-value-parser "^4.1.0" -stylelint@^14.5.0: - version "14.5.0" - resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.0.tgz#d94252027164bc918303a6b782652931421d8871" - integrity sha512-4dvQjrhAz2njLoE1OvUEZpryNWcmx2w5Lq5jlibxFv6b5W6O8/vob12M2ZzhX3Ndzs5f67F+BEYmhnQXOwfVYQ== +stylelint@^14.5.1: + version "14.5.1" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.1.tgz#2b2575ccaf14bb057209d48fc87c17d5b684f8db" + integrity sha512-8Hf4HtnhxlWlf7iXF9zFfhSc3X0teRnVzl6PqPs2JEFx+dy/mhMhghZfiTDW4QG0ihDw9+WP7GZw5Nzx7cQF5A== dependencies: balanced-match "^2.0.0" colord "^2.9.2" cosmiconfig "^7.0.1" - css-functions-list "^3.0.0" + css-functions-list "^3.0.1" debug "^4.3.3" execall "^2.0.0" fast-glob "^3.2.11" @@ -2738,7 +2738,7 @@ stylelint@^14.5.0: svg-tags "^1.0.0" table "^6.8.0" v8-compile-cache "^2.3.0" - write-file-atomic "^4.0.0" + write-file-atomic "^4.0.1" supports-color@^2.0.0: version "2.0.0" @@ -2912,11 +2912,6 @@ type-fest@^0.8.1: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d" integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA== -typedarray-to-buffer@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-4.0.0.tgz#cdd2933c61dd3f5f02eda5d012d441f95bfeb50a" - integrity sha512-6dOYeZfS3O9RtRD1caom0sMxgK59b27+IwoNy8RDPsmslSGOyU+mpTamlaIW7aNKi90ZQZ9DFaZL3YRoiSCULQ== - typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" @@ -3113,15 +3108,13 @@ wrappy@1: resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= -write-file-atomic@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.0.tgz#0eff5dc687d3e22535ca3fca8558124645a4b053" - integrity sha512-JhcWoKffJNF7ivO9yflBhc7tn3wKnokMUfWpBriM9yCXj4ePQnRPcWglBkkg1AHC8nsW/EfxwwhqsLtOy59djA== +write-file-atomic@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.1.tgz#9faa33a964c1c85ff6f849b80b42a88c2c537c8f" + integrity sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ== dependencies: imurmurhash "^0.1.4" - is-typedarray "^1.0.0" - signal-exit "^3.0.2" - typedarray-to-buffer "^4.0.0" + signal-exit "^3.0.7" xpath@^0.0.32: version "0.0.32" -- cgit v1.2.3-70-g09d2