Improved lightbox nav buttons

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"