summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_apply-vars.scss6
-rw-r--r--src/_objects.scss1
-rw-r--r--src/_utils.scss5
-rw-r--r--src/layouts/_container.scss5
-rw-r--r--src/objects/_backdrop.scss1
-rw-r--r--src/objects/_lightbox.scss35
6 files changed, 48 insertions, 5 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 10bcb5c..66ad9b7 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -28,3 +28,9 @@
28 @include iro.props-assign('palette-dark-raised'); 28 @include iro.props-assign('palette-dark-raised');
29 } 29 }
30} 30}
31
32@include iro.bem-theme('dark') {
33 @include iro.props-assign('colors');
34 @include iro.props-assign('colors-dark');
35 @include iro.props-assign('palette-dark');
36}
diff --git a/src/_objects.scss b/src/_objects.scss
index 45415f1..1b23d44 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -14,3 +14,4 @@
14@use 'objects/menu'; 14@use 'objects/menu';
15@use 'objects/backdrop'; 15@use 'objects/backdrop';
16@use 'objects/dialog'; 16@use 'objects/dialog';
17@use 'objects/lightbox';
diff --git a/src/_utils.scss b/src/_utils.scss
index 89aabd2..69885ba 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -34,6 +34,11 @@ $dirs: (
34 position: relative; 34 position: relative;
35} 35}
36 36
37@include iro.bem-utility('themed') {
38 background-color: fn.global-color(--bg);
39 color: fn.global-color(--fg);
40}
41
37@each $dir, $suffix in $dirs { 42@each $dir, $suffix in $dirs {
38 @include iro.bem-utility('m#{$dir}-auto') { 43 @include iro.bem-utility('m#{$dir}-auto') {
39 margin#{$suffix}: auto; 44 margin#{$suffix}: auto;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index b8fc879..26ba16f 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -79,11 +79,6 @@
79 } 79 }
80 } 80 }
81 81
82 @include iro.bem-modifier('themed') {
83 background-color: fn.global-color(--bg);
84 color: fn.global-color(--fg);
85 }
86
87 @include iro.bem-modifier('in-page') { 82 @include iro.bem-modifier('in-page') {
88 margin-top: fn.dim(--in-page-spacing-y); 83 margin-top: fn.dim(--in-page-spacing-y);
89 margin-bottom: fn.dim(--in-page-spacing-y); 84 margin-bottom: fn.dim(--in-page-spacing-y);
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 5957ffa..9ab140e 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -40,5 +40,6 @@
40 flex-direction: column; 40 flex-direction: column;
41 padding: fn.dim(--pad-y) fn.dim(--pad-x); 41 padding: fn.dim(--pad-y) fn.dim(--pad-x);
42 background-color: fn.color(--bg); 42 background-color: fn.color(--bg);
43 color: fn.global-color(--fg);
43 } 44 }
44} 45}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
new file mode 100644
index 0000000..3ba9744
--- /dev/null
+++ b/src/objects/_lightbox.scss
@@ -0,0 +1,35 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('lightbox') {
5 @include iro.props-store((
6 --dims: (
7
8 ),
9 ), 'dims');
10
11 @include iro.bem-object(iro.props-namespace()) {
12 display: contents;
13
14 @include iro.bem-elem('header') {
15 display: flex;
16 box-sizing: border-box;
17 flex: 0 0 auto;
18 align-items: center;
19 width: 100%;
20 }
21
22 @include iro.bem-elem('img') {
23 align-self: center;
24 max-width: 100%;
25 min-height: 0;
26 max-height: 100%;
27 margin-top: auto;
28 margin-bottom: auto;
29 }
30
31 @include iro.bem-elem('close-btn') {
32 margin-left: auto;
33 }
34 }
35}