From 62d0e619de3b4b65812382dc7fb82d4e79158929 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 7 Feb 2026 21:00:48 +0100 Subject: New lightbox --- package.json | 2 +- pnpm-lock.yaml | 116 ++++++++-------------------- src/objects/_lightbox.scss | 158 +++++++++++++++------------------------ src/objects/_lightbox.vars.scss | 25 +++---- src/objects/_thumbnail.scss | 11 --- src/objects/_thumbnail.vars.scss | 2 +- src_demo/index.scss | 2 +- tpl/objects/lightbox.pug | 24 +++--- tpl/views/lightbox.pug | 6 +- 9 files changed, 123 insertions(+), 223 deletions(-) diff --git a/package.json b/package.json index a9d4cec..fd7ef0c 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "sass": "^1.97.3", "stylelint": "^17.0.0", "stylelint-config-recess-order": "^7.6.0", - "stylelint-config-sass-guidelines": "^12.1.0", + "stylelint-config-sass-guidelines": "^13.0.0", "stylelint-order": "^7.0.1", "svg-sprite": "^2.0.4" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aeb150e..d6e4c99 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,8 +40,8 @@ importers: specifier: ^7.6.0 version: 7.6.0(stylelint-order@7.0.1(stylelint@17.1.1))(stylelint@17.1.1) stylelint-config-sass-guidelines: - specifier: ^12.1.0 - version: 12.1.0(postcss@8.5.6)(stylelint@17.1.1) + specifier: ^13.0.0 + version: 13.0.0(postcss@8.5.6)(stylelint@17.1.1) stylelint-order: specifier: ^7.0.1 version: 7.0.1(stylelint@17.1.1) @@ -86,12 +86,6 @@ packages: resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==} engines: {node: '>=0.1.90'} - '@csstools/css-parser-algorithms@3.0.1': - resolution: {integrity: sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==} - engines: {node: '>=18'} - peerDependencies: - '@csstools/css-tokenizer': ^3.0.1 - '@csstools/css-parser-algorithms@4.0.0': resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==} engines: {node: '>=20.19.0'} @@ -101,21 +95,10 @@ packages: '@csstools/css-syntax-patches-for-csstree@1.0.26': resolution: {integrity: sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==} - '@csstools/css-tokenizer@3.0.1': - resolution: {integrity: sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==} - engines: {node: '>=18'} - '@csstools/css-tokenizer@4.0.0': resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==} engines: {node: '>=20.19.0'} - '@csstools/media-query-list-parser@3.0.1': - resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==} - engines: {node: '>=18'} - peerDependencies: - '@csstools/css-parser-algorithms': ^3.0.1 - '@csstools/css-tokenizer': ^3.0.1 - '@csstools/media-query-list-parser@5.0.0': resolution: {integrity: sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==} engines: {node: '>=20.19.0'} @@ -331,11 +314,11 @@ packages: resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==} engines: {node: '>=18'} - '@stylistic/stylelint-plugin@3.1.1': - resolution: {integrity: sha512-XagAHHIa528EvyGybv8EEYGK5zrVW74cHpsjhtovVATbhDRuJYfE+X4HCaAieW9lCkwbX6L+X0I4CiUG3w/hFw==} - engines: {node: ^18.12 || >=20.9} + '@stylistic/stylelint-plugin@5.0.1': + resolution: {integrity: sha512-NaVwCNVZ2LyPA3TnUwvjO9c6P6VUjgRB8UP8SOW+cAOJBVqPPuOIDawsvvtql/LhkuR3JuTdGvr/RM3dUl8l2Q==} + engines: {node: '>=20.19.0'} peerDependencies: - stylelint: ^16.8.0 + stylelint: ^17.0.0 '@trysound/sax@0.2.0': resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} @@ -584,10 +567,6 @@ packages: resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==} engines: {node: '>=8.0.0'} - css-tree@2.3.1: - resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} - engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} - css-tree@3.1.0: resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} @@ -952,9 +931,6 @@ packages: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} - known-css-properties@0.34.0: - resolution: {integrity: sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==} - known-css-properties@0.37.0: resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==} @@ -994,12 +970,12 @@ packages: mdn-data@2.0.14: resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==} - mdn-data@2.0.30: - resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} - mdn-data@2.12.2: resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==} + mdn-data@2.27.0: + resolution: {integrity: sha512-/pUmP9UebM48q5BTqZd0yPnDjyRGhITbKh8cwa6/ZwjuDu8xq+VzmugLF7QNxpdaqqNH3J5nnv3yc8oARv096A==} + meow@14.0.0: resolution: {integrity: sha512-JhC3R1f6dbspVtmF3vKjAWz1EVIvwFrGGPLSdU6rK79xBwHWTuHoLnRX/t1/zHS1Ch1Y2UtIrih7DAHuH9JFJA==} engines: {node: '>=20'} @@ -1106,10 +1082,6 @@ packages: peerDependencies: postcss: ^8.4.29 - postcss-selector-parser@6.1.2: - resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} - engines: {node: '>=4'} - postcss-selector-parser@7.1.1: resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==} engines: {node: '>=4'} @@ -1374,12 +1346,12 @@ packages: stylelint: ^16.18.0 || ^17.0.0 stylelint-order: ^7.0.0 - stylelint-config-sass-guidelines@12.1.0: - resolution: {integrity: sha512-NTxEtVT6uNSqRvq+A3ScyKhjUrY/Z845TnpWEwnMgIPZ/+/Waa4+51r6OPuQRMu4XZS3D8DK1UaT4TWFBvuuAw==} - engines: {node: '>=18.12.0'} + stylelint-config-sass-guidelines@13.0.0: + resolution: {integrity: sha512-YJT0X8h0OqyEo7ys3EycV5CGWt2rrkEYE8sHSN6sFnrxbXvHiy4KJFHDOWfyb3eWR6wtYpM+yIyvR2Plc8+pCg==} + engines: {node: '>=20.19.0'} peerDependencies: postcss: ^8.4.21 - stylelint: ^16.1.0 + stylelint: ^17.1.0 stylelint-order@7.0.1: resolution: {integrity: sha512-GWPei1zBVDDjxM+/BmcSCiOcHNd8rSqW6FUZtqQGlTRpD0Z5nSzspzWD8rtKif5KPdzUG68DApKEV/y/I9VbTw==} @@ -1387,11 +1359,11 @@ packages: peerDependencies: stylelint: ^16.18.0 || ^17.0.0 - stylelint-scss@6.7.0: - resolution: {integrity: sha512-RFIa2A+pVWS5wjNT+whtK7wsbZEWazyqesCuSaPbPlZ8lh2TujwVJSnCYJijg6ChZzwI8pZPRZS1L6A9aCbXDg==} - engines: {node: '>=18.12.0'} + stylelint-scss@7.0.0: + resolution: {integrity: sha512-H88kCC+6Vtzj76NsC8rv6x/LW8slBzIbyeSjsKVlS+4qaEJoDrcJR4L+8JdrR2ORdTscrBzYWiiT2jq6leYR1Q==} + engines: {node: '>=20.19.0'} peerDependencies: - stylelint: ^16.0.2 + stylelint: ^16.8.2 || ^17.0.0 stylelint@17.1.1: resolution: {integrity: sha512-SBHVcLEcRF1M9OkD3oT0hT2PayDNLw2hd+aovmzfNQ2ys4Xd3oS9ZNizILWqhQvW802AqKN/vUTMwJqQYMBlWw==} @@ -1589,25 +1561,14 @@ snapshots: '@colors/colors@1.6.0': {} - '@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1)': - dependencies: - '@csstools/css-tokenizer': 3.0.1 - '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)': dependencies: '@csstools/css-tokenizer': 4.0.0 '@csstools/css-syntax-patches-for-csstree@1.0.26': {} - '@csstools/css-tokenizer@3.0.1': {} - '@csstools/css-tokenizer@4.0.0': {} - '@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1)': - dependencies: - '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1) - '@csstools/css-tokenizer': 3.0.1 - '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)': dependencies: '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) @@ -1761,13 +1722,13 @@ snapshots: '@sindresorhus/merge-streams@4.0.0': {} - '@stylistic/stylelint-plugin@3.1.1(stylelint@17.1.1)': + '@stylistic/stylelint-plugin@5.0.1(stylelint@17.1.1)': dependencies: - '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1) - '@csstools/css-tokenizer': 3.0.1 - '@csstools/media-query-list-parser': 3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1) - is-plain-object: 5.0.0 - postcss-selector-parser: 6.1.2 + '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) + '@csstools/css-tokenizer': 4.0.0 + '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0) + postcss: 8.5.6 + postcss-selector-parser: 7.1.1 postcss-value-parser: 4.2.0 style-search: 0.1.0 stylelint: 17.1.1 @@ -2025,11 +1986,6 @@ snapshots: mdn-data: 2.0.14 source-map: 0.6.1 - css-tree@2.3.1: - dependencies: - mdn-data: 2.0.30 - source-map-js: 1.2.1 - css-tree@3.1.0: dependencies: mdn-data: 2.12.2 @@ -2347,8 +2303,6 @@ snapshots: kind-of@6.0.3: {} - known-css-properties@0.34.0: {} - known-css-properties@0.37.0: {} kuler@2.0.0: {} @@ -2380,10 +2334,10 @@ snapshots: mdn-data@2.0.14: {} - mdn-data@2.0.30: {} - mdn-data@2.12.2: {} + mdn-data@2.27.0: {} + meow@14.0.0: {} merge2@1.4.1: {} @@ -2477,11 +2431,6 @@ snapshots: dependencies: postcss: 8.5.6 - postcss-selector-parser@6.1.2: - dependencies: - cssesc: 3.0.0 - util-deprecate: 1.0.2 - postcss-selector-parser@7.1.1: dependencies: cssesc: 3.0.0 @@ -2801,13 +2750,13 @@ snapshots: stylelint: 17.1.1 stylelint-order: 7.0.1(stylelint@17.1.1) - stylelint-config-sass-guidelines@12.1.0(postcss@8.5.6)(stylelint@17.1.1): + stylelint-config-sass-guidelines@13.0.0(postcss@8.5.6)(stylelint@17.1.1): dependencies: - '@stylistic/stylelint-plugin': 3.1.1(stylelint@17.1.1) + '@stylistic/stylelint-plugin': 5.0.1(stylelint@17.1.1) postcss: 8.5.6 postcss-scss: 4.0.9(postcss@8.5.6) stylelint: 17.1.1 - stylelint-scss: 6.7.0(stylelint@17.1.1) + stylelint-scss: 7.0.0(stylelint@17.1.1) stylelint-order@7.0.1(stylelint@17.1.1): dependencies: @@ -2815,14 +2764,15 @@ snapshots: postcss-sorting: 9.1.0(postcss@8.5.6) stylelint: 17.1.1 - stylelint-scss@6.7.0(stylelint@17.1.1): + stylelint-scss@7.0.0(stylelint@17.1.1): dependencies: - css-tree: 2.3.1 + css-tree: 3.1.0 is-plain-object: 5.0.0 - known-css-properties: 0.34.0 + known-css-properties: 0.37.0 + mdn-data: 2.27.0 postcss-media-query-parser: 0.2.3 postcss-resolve-nested-selector: 0.1.6 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.1.1 postcss-value-parser: 4.2.0 stylelint: 17.1.1 diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index b95148f..0d5e111 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -8,127 +8,89 @@ @forward 'lightbox.vars'; @use 'lightbox.vars' as vars; +@use 'backdrop.vars' as backdrop; +@use 'thumbnail.vars' as thumbnail; + @mixin styles { @include materialize-at-root(meta.module-variables('vars')); @include bem.object('lightbox') { - flex: 1 1 auto; - min-block-size: 0; + position: relative; + box-sizing: border-box; + display: flex; + flex: 1 1 auto; + flex-direction: column; + align-items: center; + justify-content: center; + inline-size: 100%; + max-inline-size: none; + block-size: 100%; + min-block-size: 0; + max-block-size: none; + margin: 0; + background-color: transparent; + border: 0; + + &::backdrop { + background-color: props.get(backdrop.$bg-color); + backdrop-filter: blur(props.get(backdrop.$blur)); + } - @include bem.elem('header') { - display: flex; - grid-area: header; - align-items: flex-start; - padding-block-start: props.get(vars.$pad); - padding-inline: props.get(vars.$pad); + &[open] { + display: flex; + } + + @include bem.elem('controls') { + position: absolute; + inset-block-start: props.get(vars.$pad); + inset-inline-end: props.get(vars.$pad); + z-index: 20; + padding: props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x); + border-radius: 10em; } @include bem.elem('img') { - box-sizing: border-box; - display: block; - grid-area: content; - place-self: center; + position: relative; + z-index: 10; + display: none; + flex: 1 1 auto; inline-size: auto; max-inline-size: 100%; block-size: auto; - max-block-size: props.get(vars.$image--max-height); - padding: props.get(vars.$pad); - margin-inline: auto; - border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); - } - - @include bem.elem('thumbnails') { - display: none; - grid-area: thumbnails; - gap: props.get(vars.$thumbnails--spacing); - padding: props.get(vars.$pad); - margin-block-start: calc(-1 * props.get(vars.$pad)); - overflow: auto; - } - - @include bem.elem('close-btn') { - display: none; - flex: 0 0 auto; - margin-block-start: calc(-.5 * props.get(vars.$pad)); - margin-inline: auto calc(-.5 * props.get(vars.$pad)); - font-size: props.get(vars.$close-button--font-size); - } - - @include bem.elem('nav-btn') { - position: relative; - display: none; - align-self: center; - overflow: visible; - font-size: props.get(vars.$nav-button--font-size); - - &::before { - position: absolute; - inset-block-start: 50%; - display: block; - inline-size: props.get(vars.$nav-button--inline-size); - block-size: props.get(vars.$nav-button--block-size); - content: ''; - transform: translateY(-50%); - } - - @include bem.modifier('prev') { - grid-area: prev; - margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); - - &::before { - inset-inline-start: 0; - } - } - - @include bem.modifier('next') { - grid-area: next; - margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); + max-block-size: 100%; + margin: auto; - &::before { - inset-inline-end: 0; - } + @include bem.multi('&:target', 'is' 'visible') { + display: block; } } - @include bem.modifier('interactive') { - display: grid; - grid-template-areas: - 'header header header' - 'prev content next' - 'thumbnails thumbnails thumbnails'; - grid-template-rows: auto minmax(0, 1fr) auto auto; - grid-template-columns: auto minmax(0, 1fr) auto; - - @include bem.modifier('fullscreen') { - block-size: props.get(vars.$fullscreen--height); - } - - @include bem.elem('img') { - display: none; - max-block-size: 100%; - margin-inline: 0; - - @include bem.multi('&:target', 'is' 'visible') { - display: block; - } - } - - @include bem.elem('thumbnails') { - display: flex; - } + @include bem.elem('thumbnails') { + display: flex; + flex: 0 0 auto; + gap: props.get(vars.$thumbnail--spacing); + justify-content: center; + padding: props.get(vars.$pad); + overflow: auto; + } - @include bem.elem('close-btn') { - display: block; - } + @include bem.elem('thumbnail') { + inline-size: props.get(vars.$thumbnail--width); + transition: inline-size .1s ease, margin-inline .1s ease; - @include bem.elem('nav-btn') { - display: block; + @include bem.is('selected') { + inline-size: props.get(vars.$thumbnail--active--width); + margin-inline: props.get(vars.$thumbnail--active--spacing); } } @each $theme in map.keys(props.get(vars.$static-themes)) { @include bem.modifier(string.slice($theme, 3)) { color: props.get(vars.$static-themes, $theme, --text); + + @include bem.elem('controls') { + background-color: props.get(vars.$static-themes, $theme, --controls-bg); + } } } } diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index 6d22aa8..9f200b0 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -4,30 +4,27 @@ @use '../core.vars' as core; $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; -$fullscreen--height: props.def(--o-lightbox--fullscreen--height, 100vh) !default; -$image--max-height: props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default; -$image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !default; +$controls--pad-x: props.def(--o-lightbox--controls--pad-x, props.get(core.$size--150)) !default; +$controls--pad-y: props.def(--o-lightbox--controls--pad-y, props.get(core.$size--50)) !default; -$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default; - -$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default; -$nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default; -$nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default; - -$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; -$nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; - -$thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(core.$size--100)) !default; +$thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default; +$thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default; +$thumbnail--active--width: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--1000)) !default; +$thumbnail--active--spacing: props.def(--o-lightbox--thumbnail--active--spacing, props.get(core.$size--250)) !default; $static-themes: props.def(--o-lightbox, (), 'color'); +$thumbnail--width--md: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--400), 'md') !default; +$thumbnail--active--width--md: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--600), 'md') !default; + @each $theme in map.keys(props.get(core.$transparent-colors)) { $lightbox-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $lightbox-theme: ( - --text: props.get(core.$transparent-colors, $theme, --800), + --text: props.get(core.$transparent-colors, $theme, --text), + --controls-bg: props.get(core.$transparent-colors, $theme, --700), ) )); } diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index 60a98af..2ccb50b 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss @@ -21,7 +21,6 @@ outline: props.get(vars.$border-color) solid props.get(vars.$border-width); outline-offset: calc(-1 * props.get(vars.$border-width)); border-radius: props.get(vars.$rounding); - opacity: .75; &:hover, &:active, @@ -30,16 +29,6 @@ opacity: 1; } - @include bem.is('selected') { - $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); - - margin: $focus-border-offset; - outline: none; - border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - opacity: 1; - } - @include bem.elem('image') { position: absolute; inset-block-start: 0; diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss index e49e52e..d2a38c0 100644 --- a/src/objects/_thumbnail.vars.scss +++ b/src/objects/_thumbnail.vars.scss @@ -3,7 +3,7 @@ @use 'iro-sass/src/props'; @use '../core.vars' as core; -$size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; +$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default; $rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; $spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; diff --git a/src_demo/index.scss b/src_demo/index.scss index 53b01af..257318e 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss @@ -35,6 +35,7 @@ @include iro.o-figure--styles; @include iro.o-field-label--styles; @include iro.o-heading--styles; +@include iro.o-thumbnail--styles; @include iro.o-lightbox--styles; @include iro.o-menu--styles; @include iro.o-navbar--styles; @@ -47,7 +48,6 @@ @include iro.o-table--styles; @include iro.o-tabbar--styles; @include iro.o-text-field--styles; -@include iro.o-thumbnail--styles; @include iro.utils--styles; diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 2d520b5..0fddad1 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -11,26 +11,28 @@ mixin lightbox(images) } let thumbnailClasses = { 'o-thumbnail': true, + 'o-lightbox__thumbnail': true, } + let inverseTheme = { + "static-black": "static-white", + "static-white": "static-black", + }[attributes.theme] if (attributes.theme) { classes[`o-lightbox--${attributes.theme}`] = true; - linksClasses[`s-links--${attributes.theme}`] = true; - thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true; + linksClasses[`s-links--${inverseTheme}`] = true; + thumbnailClasses[`o-thumbnail--${inverseTheme}`] = true; } div(class=classes) - header.o-lightbox__header - div(class=linksClasses) - block - +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') - each img, i in images img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) - if images.length > 1 - +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + .o-lightbox__controls + if images.length > 1 + +button(theme=inverseTheme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +button(theme=inverseTheme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + +button(theme=inverseTheme pill=true quiet=true icon='x' class='o-lightbox__close-btn') .o-lightbox__thumbnails each img, i in images @@ -38,7 +40,7 @@ mixin lightbox(images) let classes = { 'is-selected': i === 0 } Object.assign(classes, thumbnailClasses) - a.o-thumbnail(class=classes href='#image-' + i) + a(class=classes href='#image-' + i) img.o-thumbnail__image(src=img) button(class=thumbnailClasses) +icon('volume-2')(class='o-thumbnail__icon') diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug index 7e366c0..c4b9878 100644 --- a/tpl/views/lightbox.pug +++ b/tpl/views/lightbox.pug @@ -14,7 +14,7 @@ mixin view-lightbox .c-box +backdrop - +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white') + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" @@ -27,7 +27,7 @@ mixin view-lightbox .c-box +backdrop - +lightbox(['avatar.png'])(theme='static-white') + +lightbox(['avatar.png'])(theme='static-black') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" @@ -39,7 +39,7 @@ mixin view-lightbox = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" +backdrop(maxHeight=true) - +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true) + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black' interactive=true) = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" -- cgit v1.2.3-70-g09d2