summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-01-26 17:57:44 +0100
committerVolpeon <git@volpeon.ink>2023-01-26 17:57:44 +0100
commit9b13c09059f0d71f3ddc64ab06d6dba690ee5ac9 (patch)
tree1f15248c34917379f18f3327178f55a146284084
parentAvatar (diff)
downloadiro-design-9b13c09059f0d71f3ddc64ab06d6dba690ee5ac9.tar.gz
iro-design-9b13c09059f0d71f3ddc64ab06d6dba690ee5ac9.tar.bz2
iro-design-9b13c09059f0d71f3ddc64ab06d6dba690ee5ac9.zip
Lightbox
-rw-r--r--package.json2
-rw-r--r--src/objects/_lightbox.scss24
-rw-r--r--tpl/objects/lightbox.pug4
3 files changed, 25 insertions, 5 deletions
diff --git a/package.json b/package.json
index a278393..6cf8b90 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 cog logout tags lock user chevron-left chevron-right hash x send smile public/icons.svg", 14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile public/icons.svg",
15 "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", 15 "build:style": "sass --load-path=node_modules src_demo/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 c2894ee..74515c4 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -10,6 +10,7 @@
10 --thumbnail: ( 10 --thumbnail: (
11 --size: fn.global-dim(--size --700), 11 --size: fn.global-dim(--size --700),
12 --spacing: fn.global-dim(--size --100), 12 --spacing: fn.global-dim(--size --100),
13 --idle: 1px,
13 --selected: 2px, 14 --selected: 2px,
14 ), 15 ),
15 --close-button: ( 16 --close-button: (
@@ -38,6 +39,7 @@
38 @include iro.props-store(( 39 @include iro.props-store((
39 --colors: ( 40 --colors: (
40 --thumbnail: ( 41 --thumbnail: (
42 --idle: fn.global-color(--fg-hi2),
41 --selected: fn.global-color(--fg-lo), 43 --selected: fn.global-color(--fg-lo),
42 ), 44 ),
43 --footer: ( 45 --footer: (
@@ -89,7 +91,12 @@
89 } 91 }
90 92
91 @include iro.bem-elem('thumbnail') { 93 @include iro.bem-elem('thumbnail') {
92 opacity: .75; 94 position: relative;
95 flex: 0 0 auto;
96 width: fn.dim(--thumbnail --size);
97 height: fn.dim(--thumbnail --size);
98 opacity: .75;
99 box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset;
93 100
94 &:hover { 101 &:hover {
95 opacity: 1; 102 opacity: 1;
@@ -103,13 +110,22 @@
103 110
104 @include iro.bem-elem('thumbnail-img') { 111 @include iro.bem-elem('thumbnail-img') {
105 display: block; 112 display: block;
106 width: fn.dim(--thumbnail --size); 113 position: absolute;
107 min-width: fn.dim(--thumbnail --size); 114 top: 0;
108 height: fn.dim(--thumbnail --size); 115 left: 0;
116 width: 100%;
117 height: 100%;
109 object-fit: cover; 118 object-fit: cover;
110 object-position: center center; 119 object-position: center center;
111 } 120 }
112 121
122 @include iro.bem-elem('thumbnail-icon') {
123 position: absolute;
124 top: 50%;
125 left: 50%;
126 transform: translate(-50%, -50%);
127 }
128
113 @include iro.bem-elem('close-btn') { 129 @include iro.bem-elem('close-btn') {
114 flex: 0 0 auto; 130 flex: 0 0 auto;
115 margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto; 131 margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index faf7fa2..ac7d886 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -15,3 +15,7 @@ mixin lightbox(images)
15 - classes = i === 0 ? 'is-selected' : '' 15 - classes = i === 0 ? 'is-selected' : ''
16 button.o-lightbox__thumbnail(class=classes) 16 button.o-lightbox__thumbnail(class=classes)
17 img.o-lightbox__thumbnail-img(src=img) 17 img.o-lightbox__thumbnail-img(src=img)
18 button.o-lightbox__thumbnail
19 +icon('volume-2')(class='o-lightbox__thumbnail-icon')
20 button.o-lightbox__thumbnail
21 +icon('video')(class='o-lightbox__thumbnail-icon')