summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-08 22:00:33 +0100
committerVolpeon <git@volpeon.ink>2022-03-08 22:00:33 +0100
commitbdd534a2fea536f4143d29dd26138a4705c1f825 (patch)
tree3ff5dbc4f9de8e3c77918f444a1bc20550db764d /src
parentDialog (diff)
downloadiro-design-bdd534a2fea536f4143d29dd26138a4705c1f825.tar.gz
iro-design-bdd534a2fea536f4143d29dd26138a4705c1f825.tar.bz2
iro-design-bdd534a2fea536f4143d29dd26138a4705c1f825.zip
Improved dialog
Diffstat (limited to 'src')
-rw-r--r--src/_layouts.scss2
-rw-r--r--src/layouts/_card.scss9
-rw-r--r--src/layouts/_flex.scss23
-rw-r--r--src/layouts/_overflow.scss9
-rw-r--r--src/objects/_dialog.scss115
-rw-r--r--src/objects/_lightbox.scss2
-rw-r--r--src/objects/_menu.scss18
-rw-r--r--src/objects/_rule.scss8
8 files changed, 135 insertions, 51 deletions
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 99a003e..3a4c32b 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -2,3 +2,5 @@
2@use 'layouts/container'; 2@use 'layouts/container';
3@use 'layouts/button-group'; 3@use 'layouts/button-group';
4@use 'layouts/form'; 4@use 'layouts/form';
5@use 'layouts/flex';
6@use 'layouts/overflow';
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 3022da0..e6c379d 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -14,6 +14,10 @@
14 --200: ( 14 --200: (
15 --pad-x: fn.global-dim(--size --300), 15 --pad-x: fn.global-dim(--size --300),
16 --pad-y: fn.global-dim(--size --150), 16 --pad-y: fn.global-dim(--size --150),
17 ),
18 --300: (
19 --pad-x: fn.global-dim(--size --450),
20 --pad-y: fn.global-dim(--size --225),
17 ) 21 )
18 ) 22 )
19 ), 'dims'); 23 ), 'dims');
@@ -35,6 +39,11 @@
35 gap: fn.dim(--200 --pad-x); 39 gap: fn.dim(--200 --pad-x);
36 } 40 }
37 41
42 @include iro.bem-modifier('300') {
43 padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x);
44 gap: fn.dim(--300 --pad-x);
45 }
46
38 @include iro.bem-modifier('flush') { 47 @include iro.bem-modifier('flush') {
39 padding: 0; 48 padding: 0;
40 } 49 }
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
new file mode 100644
index 0000000..e8cdbaa
--- /dev/null
+++ b/src/layouts/_flex.scss
@@ -0,0 +1,23 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('flex') {
4 @include iro.bem-layout(iro.props-namespace()) {
5 display: flex;
6
7 @include iro.bem-modifier('align-stretch') {
8 align-items: stretch;
9 }
10
11 @include iro.bem-modifier('align-center') {
12 align-items: center;
13 }
14
15 @include iro.bem-modifier('align-start') {
16 align-items: flex-start;
17 }
18
19 @include iro.bem-modifier('align-end') {
20 align-items: flex-end;
21 }
22 }
23}
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
new file mode 100644
index 0000000..d3af570
--- /dev/null
+++ b/src/layouts/_overflow.scss
@@ -0,0 +1,9 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('overflow') {
5 @include iro.bem-layout(iro.props-namespace()) {
6 overflow: auto;
7 scrollbar-color: fn.global-color(--obj-lo) transparent;
8 }
9}
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index d5b6ed9..9c61e93 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -4,13 +4,15 @@
4@include iro.props-namespace('dialog') { 4@include iro.props-namespace('dialog') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --300), 7 --pad-x: fn.global-dim(--size --300),
8 --pad-y: fn.global-dim(--size --300), 8 --pad-y: fn.global-dim(--size --300),
9 --width-sm: iro.fn-px-to-rem(500px), 9 --width-sm: iro.fn-px-to-rem(500px),
10 --width-md: iro.fn-px-to-rem(800px), 10 --width-md: iro.fn-px-to-rem(800px),
11 --width-lg: iro.fn-px-to-rem(1100px), 11 --width-lg: iro.fn-px-to-rem(1100px),
12 --rounding: 3px, 12 --rounding: 3px,
13 --title-body-spacing: fn.global-dim(--size --200), 13 --sidebar: (
14 --pad-x: fn.global-dim(--size --150),
15 )
14 ), 16 ),
15 ), 'dims'); 17 ), 'dims');
16 18
@@ -24,24 +26,40 @@
24 @include iro.props-store(( 26 @include iro.props-store((
25 --colors: ( 27 --colors: (
26 --shadow: 0 .2em .5em rgba(#000, .2), 28 --shadow: 0 .2em .5em rgba(#000, .2),
29 --sidebar: (
30 --bg: fn.global-color(--bg),
31 --border: fn.global-color(--obj),
32 )
27 ), 33 ),
28 ), 'colors'); 34 ), 'colors');
29 35
36 @include iro.props-store((
37 --colors: (
38 --sidebar: (
39 --bg: fn.global-color(--bg-hi),
40 --border: fn.global-color(--bg-hi),
41 ),
42 ),
43 ), 'colors-dark');
44
30 @include iro.bem-object(iro.props-namespace()) { 45 @include iro.bem-object(iro.props-namespace()) {
31 display: grid; 46 display: grid;
32 grid-template-rows: auto auto 1fr auto; 47 grid-template-rows: auto 1fr auto;
33 grid-template-areas: 'header' 'rule' 'body' 'footer'; 48 grid-template-columns: auto 1fr;
34 position: relative; 49 grid-template-areas:
35 box-sizing: border-box; 50 'sidebar header'
36 width: 100%; 51 'sidebar body'
37 max-width: fn.dim(--width-md); 52 'sidebar footer';
38 margin: 0 auto; 53 position: relative;
39 padding: fn.dim(--pad-y) fn.dim(--pad-x); 54 box-sizing: border-box;
40 overflow: hidden; 55 width: 100%;
41 border-radius: fn.dim(--rounding); 56 max-width: fn.dim(--width-md);
42 background-color: fn.global-color(--bg); 57 margin: 0 auto;
43 box-shadow: fn.color(--shadow); 58 overflow: hidden;
44 color: fn.global-color(--fg); 59 border-radius: fn.dim(--rounding);
60 background-color: fn.global-color(--bg);
61 box-shadow: fn.color(--shadow);
62 color: fn.global-color(--fg);
45 63
46 @include iro.bem-modifier('sm') { 64 @include iro.bem-modifier('sm') {
47 max-width: fn.dim(--width-sm); 65 max-width: fn.dim(--width-sm);
@@ -51,39 +69,52 @@
51 max-width: fn.dim(--width-lg); 69 max-width: fn.dim(--width-lg);
52 } 70 }
53 71
54 @include iro.bem-elem('header') { 72 @include iro.bem-elem('sidebar') {
55 grid-area: header; 73 grid-area: sidebar;
56 margin-bottom: fn.dim(--title-body-spacing); 74 padding: fn.dim(--pad-y) fn.dim(--sidebar --pad-x);
75 border-right: 1px solid fn.color(--sidebar --border);
76 background-color: fn.color(--sidebar --bg);
57 } 77 }
58 78
59 @include iro.bem-elem('close-btn') { 79 @include iro.bem-elem('header') {
60 position: absolute; 80 grid-area: header;
61 top: iro.fn-px-to-rem(12px); 81 margin: fn.dim(--pad-y) fn.dim(--pad-x) 0;
62 right: iro.fn-px-to-rem(12px);
63 font-size: fn.global-dim(--font-size --150);
64 }
65 82
66 @include iro.bem-elem('rule') { 83 @include iro.bem-sibling-elem('body') {
67 grid-area: rule; 84 &::before {
68 margin: 0; 85 display: none;
86 }
87 }
69 } 88 }
70 89
71 @include iro.bem-elem('title') { 90 @include iro.bem-elem('body') {
72 margin-top: 0; 91 grid-area: body;
92 min-height: 0;
93 margin: fn.dim(--pad-y) fn.dim(--pad-x);
94
95 &::before {
96 content: '';
97 width: fn.global-dim(--size --500);
98 height: fn.global-dim(--size --500);
99 float: right;
100 }
73 } 101 }
74 102
75 @include iro.bem-elem('body') { 103 @include iro.bem-elem('close-btn') {
76 grid-area: body; 104 position: absolute;
77 min-height: 0; 105 top: fn.global-dim(--size --150);
78 margin-top: fn.dim(--title-body-spacing); 106 right: fn.global-dim(--size --150);
79 overflow: auto; 107 font-size: fn.global-dim(--font-size --150);
80 scrollbar-color: fn.global-color(--obj-lo) transparent;
81 } 108 }
82 109
83 @include iro.bem-elem('footer') { 110 @include iro.bem-elem('footer') {
84 grid-area: footer; 111 grid-area: footer;
85 justify-content: flex-end; 112 justify-content: flex-end;
86 margin-top: fn.dim(--pad-y); 113 margin: fn.dim(--pad-y) fn.dim(--pad-x);
114 }
115
116 @include iro.bem-elem('title') {
117 margin-top: 0;
87 } 118 }
88 } 119 }
89} 120}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 6d83f01..f3addf7 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -10,7 +10,7 @@
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, //fn.global-dim(--border-width --medium), 13 --selected: 2px, //fn.global-dim(--border-width --medium),
14 ), 14 ),
15 --button: ( 15 --button: (
16 --font-size: fn.global-dim(--font-size --200), 16 --font-size: fn.global-dim(--font-size --200),
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index f03dbc1..40610e0 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -9,8 +9,9 @@
9 ), 9 ),
10 --separator: fn.global-dim(--size --150), 10 --separator: fn.global-dim(--size --150),
11 --item: ( 11 --item: (
12 --pad-x: fn.global-dim(--size --150), 12 --pad-x: fn.global-dim(--size --150),
13 --pad-y: fn.global-dim(--size --100), 13 --pad-y: fn.global-dim(--size --100),
14 --rounding: 3px,
14 ), 15 ),
15 ), 16 ),
16 ), 'dims'); 17 ), 'dims');
@@ -52,12 +53,13 @@
52 } 53 }
53 54
54 @include iro.bem-elem('item') { 55 @include iro.bem-elem('item') {
55 display: block; 56 display: block;
56 box-sizing: border-box; 57 box-sizing: border-box;
57 width: 100%; 58 width: 100%;
58 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); 59 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
59 border: 2px solid transparent; 60 border: 2px solid transparent;
60 color: fn.color(--item --disabled --label); 61 border-radius: fn.dim(--item --rounding);
62 color: fn.color(--item --disabled --label);
61 63
62 &:link, 64 &:link,
63 &:visited, 65 &:visited,
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
index 777e864..693729a 100644
--- a/src/objects/_rule.scss
+++ b/src/objects/_rule.scss
@@ -45,6 +45,14 @@
45 margin-bottom: fn.dim(--margin-y); 45 margin-bottom: fn.dim(--margin-y);
46 background-color: fn.color(--strong --bg); 46 background-color: fn.color(--strong --bg);
47 47
48 @include iro.bem-modifier('vertical') {
49 width: 1px;
50 height: auto;
51 margin-top: 0;
52 margin-bottom: 0;
53 background-color: fn.color(--faint --bg);
54 }
55
48 @include iro.bem-modifier('medium') { 56 @include iro.bem-modifier('medium') {
49 height: fn.dim(--medium --border-width); 57 height: fn.dim(--medium --border-width);
50 background-color: fn.color(--medium --bg); 58 background-color: fn.color(--medium --bg);
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 09:47:14 +0000