diff options
-rw-r--r-- | package.json | 4 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 38 | ||||
-rw-r--r-- | tpl/objects/action-button.pug | 2 | ||||
-rw-r--r-- | tpl/objects/icon.pug | 3 | ||||
-rw-r--r-- | 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 @@ | |||
27 | "postcss-scss": "^4.0.3", | 27 | "postcss-scss": "^4.0.3", |
28 | "pug": "^3.0.0", | 28 | "pug": "^3.0.0", |
29 | "pug-cli": "^1.0.0-alpha6", | 29 | "pug-cli": "^1.0.0-alpha6", |
30 | "sass": "^1.28.0", | 30 | "sass": "^1.49.8", |
31 | "stylelint": "^14.5.0", | 31 | "stylelint": "^14.5.1", |
32 | "stylelint-config-sass-guidelines": "^9.0.1", | 32 | "stylelint-config-sass-guidelines": "^9.0.1", |
33 | "svg-sprite": "^1.5.4" | 33 | "svg-sprite": "^1.5.4" |
34 | } | 34 | } |
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') { |
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 | |||
17 | 17 | ||
18 | a(class=classes href=href) | 18 | a(class=classes href=href) |
19 | if attributes.icon | 19 | if attributes.icon |
20 | +icon(attributes.icon) | 20 | +icon(attributes.icon)(block=!block) |
21 | = ' ' | 21 | = ' ' |
22 | if block | 22 | if block |
23 | span.o-action-button__label | 23 | 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) | |||
2 | - | 2 | - |
3 | let href = 'icons.svg#' + id | 3 | let href = 'icons.svg#' + id |
4 | let classes = { | 4 | let classes = { |
5 | 'o-icon': true | 5 | 'o-icon': true, |
6 | 'o-icon--block': attributes.block, | ||
6 | } | 7 | } |
7 | if (attributes.class) { | 8 | if (attributes.class) { |
8 | classes[attributes.class] = true; | 9 | classes[attributes.class] = true; |
@@ -623,10 +623,10 @@ cosmiconfig@^7.0.1: | |||
623 | path-type "^4.0.0" | 623 | path-type "^4.0.0" |
624 | yaml "^1.10.0" | 624 | yaml "^1.10.0" |
625 | 625 | ||
626 | css-functions-list@^3.0.0: | 626 | css-functions-list@^3.0.1: |
627 | version "3.0.0" | 627 | version "3.0.1" |
628 | resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.0.0.tgz#faa770a0666aea11435efc0889935336cea564be" | 628 | resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.0.1.tgz#1460df7fb584d1692c30b105151dbb988c8094f9" |
629 | integrity sha512-rfwhBOvXVFcKrSwmLxD8JQyuEEy/3g3Y9FMI2l6iV558Coeo1ucXypXb4rwrVpk5Osh5ViXp2DTgafw8WxglhQ== | 629 | integrity sha512-PriDuifDt4u4rkDgnqRCLnjfMatufLmWNfQnGCq34xZwpY3oabwhB9SqRBmuvWUgndbemCFlKqg+nO7C2q0SBw== |
630 | 630 | ||
631 | css-select-base-adapter@^0.1.1: | 631 | css-select-base-adapter@^0.1.1: |
632 | version "0.1.1" | 632 | version "0.1.1" |
@@ -1266,7 +1266,7 @@ internal-slot@^1.0.3: | |||
1266 | 1266 | ||
1267 | "iro-icons@git+https://git.vulpes.one/git/iro-icons.git": | 1267 | "iro-icons@git+https://git.vulpes.one/git/iro-icons.git": |
1268 | version "1.0.0" | 1268 | version "1.0.0" |
1269 | resolved "git+https://git.vulpes.one/git/iro-icons.git#14ba13c215955ca8d22f37b49e0a60b3dd53e783" | 1269 | resolved "git+https://git.vulpes.one/git/iro-icons.git#b871fcd977047a20812ebac8d82f7a1d695eee2b" |
1270 | 1270 | ||
1271 | "iro-sass@git+https://git.vulpes.one/git/iro-sass.git": | 1271 | "iro-sass@git+https://git.vulpes.one/git/iro-sass.git": |
1272 | version "1.0.2" | 1272 | version "1.0.2" |
@@ -1435,7 +1435,7 @@ is-symbol@^1.0.2, is-symbol@^1.0.3: | |||
1435 | dependencies: | 1435 | dependencies: |
1436 | has-symbols "^1.0.2" | 1436 | has-symbols "^1.0.2" |
1437 | 1437 | ||
1438 | is-typedarray@^1.0.0, is-typedarray@~1.0.0: | 1438 | is-typedarray@~1.0.0: |
1439 | version "1.0.0" | 1439 | version "1.0.0" |
1440 | resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" | 1440 | resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" |
1441 | integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= | 1441 | integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= |
@@ -2458,10 +2458,10 @@ safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: | |||
2458 | resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" | 2458 | resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" |
2459 | integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== | 2459 | integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== |
2460 | 2460 | ||
2461 | sass@^1.28.0: | 2461 | sass@^1.49.8: |
2462 | version "1.49.7" | 2462 | version "1.49.8" |
2463 | resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.7.tgz#22a86a50552b9b11f71404dfad1b9ff44c6b0c49" | 2463 | resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828" |
2464 | integrity sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ== | 2464 | integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw== |
2465 | dependencies: | 2465 | dependencies: |
2466 | chokidar ">=3.0.0 <4.0.0" | 2466 | chokidar ">=3.0.0 <4.0.0" |
2467 | immutable "^4.0.0" | 2467 | immutable "^4.0.0" |
@@ -2498,7 +2498,7 @@ side-channel@^1.0.4: | |||
2498 | get-intrinsic "^1.0.2" | 2498 | get-intrinsic "^1.0.2" |
2499 | object-inspect "^1.9.0" | 2499 | object-inspect "^1.9.0" |
2500 | 2500 | ||
2501 | signal-exit@^3.0.2: | 2501 | signal-exit@^3.0.7: |
2502 | version "3.0.7" | 2502 | version "3.0.7" |
2503 | resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9" | 2503 | resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9" |
2504 | integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ== | 2504 | integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ== |
@@ -2693,15 +2693,15 @@ stylelint-scss@^4.0.0: | |||
2693 | postcss-selector-parser "^6.0.6" | 2693 | postcss-selector-parser "^6.0.6" |
2694 | postcss-value-parser "^4.1.0" | 2694 | postcss-value-parser "^4.1.0" |
2695 | 2695 | ||
2696 | stylelint@^14.5.0: | 2696 | stylelint@^14.5.1: |
2697 | version "14.5.0" | 2697 | version "14.5.1" |
2698 | resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.0.tgz#d94252027164bc918303a6b782652931421d8871" | 2698 | resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.1.tgz#2b2575ccaf14bb057209d48fc87c17d5b684f8db" |
2699 | integrity sha512-4dvQjrhAz2njLoE1OvUEZpryNWcmx2w5Lq5jlibxFv6b5W6O8/vob12M2ZzhX3Ndzs5f67F+BEYmhnQXOwfVYQ== | 2699 | integrity sha512-8Hf4HtnhxlWlf7iXF9zFfhSc3X0teRnVzl6PqPs2JEFx+dy/mhMhghZfiTDW4QG0ihDw9+WP7GZw5Nzx7cQF5A== |
2700 | dependencies: | 2700 | dependencies: |
2701 | balanced-match "^2.0.0" | 2701 | balanced-match "^2.0.0" |
2702 | colord "^2.9.2" | 2702 | colord "^2.9.2" |
2703 | cosmiconfig "^7.0.1" | 2703 | cosmiconfig "^7.0.1" |
2704 | css-functions-list "^3.0.0" | 2704 | css-functions-list "^3.0.1" |
2705 | debug "^4.3.3" | 2705 | debug "^4.3.3" |
2706 | execall "^2.0.0" | 2706 | execall "^2.0.0" |
2707 | fast-glob "^3.2.11" | 2707 | fast-glob "^3.2.11" |
@@ -2738,7 +2738,7 @@ stylelint@^14.5.0: | |||
2738 | svg-tags "^1.0.0" | 2738 | svg-tags "^1.0.0" |
2739 | table "^6.8.0" | 2739 | table "^6.8.0" |
2740 | v8-compile-cache "^2.3.0" | 2740 | v8-compile-cache "^2.3.0" |
2741 | write-file-atomic "^4.0.0" | 2741 | write-file-atomic "^4.0.1" |
2742 | 2742 | ||
2743 | supports-color@^2.0.0: | 2743 | supports-color@^2.0.0: |
2744 | version "2.0.0" | 2744 | version "2.0.0" |
@@ -2912,11 +2912,6 @@ type-fest@^0.8.1: | |||
2912 | resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d" | 2912 | resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d" |
2913 | integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA== | 2913 | integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA== |
2914 | 2914 | ||
2915 | typedarray-to-buffer@^4.0.0: | ||
2916 | version "4.0.0" | ||
2917 | resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-4.0.0.tgz#cdd2933c61dd3f5f02eda5d012d441f95bfeb50a" | ||
2918 | integrity sha512-6dOYeZfS3O9RtRD1caom0sMxgK59b27+IwoNy8RDPsmslSGOyU+mpTamlaIW7aNKi90ZQZ9DFaZL3YRoiSCULQ== | ||
2919 | |||
2920 | typedarray@^0.0.6: | 2915 | typedarray@^0.0.6: |
2921 | version "0.0.6" | 2916 | version "0.0.6" |
2922 | resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" | 2917 | resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" |
@@ -3113,15 +3108,13 @@ wrappy@1: | |||
3113 | resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" | 3108 | resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" |
3114 | integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= | 3109 | integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= |
3115 | 3110 | ||
3116 | write-file-atomic@^4.0.0: | 3111 | write-file-atomic@^4.0.1: |
3117 | version "4.0.0" | 3112 | version "4.0.1" |
3118 | resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.0.tgz#0eff5dc687d3e22535ca3fca8558124645a4b053" | 3113 | resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.1.tgz#9faa33a964c1c85ff6f849b80b42a88c2c537c8f" |
3119 | integrity sha512-JhcWoKffJNF7ivO9yflBhc7tn3wKnokMUfWpBriM9yCXj4ePQnRPcWglBkkg1AHC8nsW/EfxwwhqsLtOy59djA== | 3114 | integrity sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ== |
3120 | dependencies: | 3115 | dependencies: |
3121 | imurmurhash "^0.1.4" | 3116 | imurmurhash "^0.1.4" |
3122 | is-typedarray "^1.0.0" | 3117 | signal-exit "^3.0.7" |
3123 | signal-exit "^3.0.2" | ||
3124 | typedarray-to-buffer "^4.0.0" | ||
3125 | 3118 | ||
3126 | xpath@^0.0.32: | 3119 | xpath@^0.0.32: |
3127 | version "0.0.32" | 3120 | version "0.0.32" |