summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-02-04 22:49:04 +0100
committerVolpeon <git@volpeon.ink>2023-02-04 22:49:04 +0100
commitc2640702660f57339b1ba09daef842a1c7e0da90 (patch)
treeac034944f114ea73c0455c27942d583c250f7600
parentScrollable dialog improvements (diff)
downloadiro-design-c2640702660f57339b1ba09daef842a1c7e0da90.tar.gz
iro-design-c2640702660f57339b1ba09daef842a1c7e0da90.tar.bz2
iro-design-c2640702660f57339b1ba09daef842a1c7e0da90.zip
Simplified dialog
-rw-r--r--src/objects/_dialog.scss20
1 files changed, 5 insertions, 15 deletions
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index a85fd1f..a445d56 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -7,7 +7,7 @@
7 --width-sm: iro.fn-px-to-rem(500px), 7 --width-sm: iro.fn-px-to-rem(500px),
8 --width-md: iro.fn-px-to-rem(800px), 8 --width-md: iro.fn-px-to-rem(800px),
9 --width-lg: iro.fn-px-to-rem(1100px), 9 --width-lg: iro.fn-px-to-rem(1100px),
10 --rounding: 8px, 10 --rounding: 4px,
11 --border: 1px, 11 --border: 1px,
12 12
13 --header: ( 13 --header: (
@@ -36,18 +36,10 @@
36 36
37 @include iro.props-store(( 37 @include iro.props-store((
38 --colors: ( 38 --colors: (
39 --outer-border: rgba(#000, .2), 39 --border: fn.global-color(--border --stable),
40 --inner-border: fn.global-color(--border --stable),
41 --shadow: 0 .2em .5em rgba(#000, .2),
42 ), 40 ),
43 ), 'colors'); 41 ), 'colors');
44 42
45 @include iro.props-store((
46 --colors: (
47 --outer-border: rgba(#fff, .2),
48 ),
49 ), 'colors-dark');
50
51 @include iro.bem-object(iro.props-namespace()) { 43 @include iro.bem-object(iro.props-namespace()) {
52 display: grid; 44 display: grid;
53 grid-template-rows: auto 1fr auto; 45 grid-template-rows: auto 1fr auto;
@@ -63,11 +55,9 @@
63 max-width: fn.dim(--width-md); 55 max-width: fn.dim(--width-md);
64 margin: 0 auto; 56 margin: 0 auto;
65 overflow: hidden; 57 overflow: hidden;
66 border: fn.dim(--border) solid fn.color(--outer-border);
67 border-radius: fn.dim(--rounding); 58 border-radius: fn.dim(--rounding);
68 background-clip: padding-box; 59 background-clip: padding-box;
69 background-color: fn.global-color(--bg); 60 background-color: fn.global-color(--bg);
70 box-shadow: fn.color(--shadow);
71 color: fn.global-color(--fg); 61 color: fn.global-color(--fg);
72 62
73 @include iro.bem-modifier('sm') { 63 @include iro.bem-modifier('sm') {
@@ -81,11 +71,11 @@
81 @include iro.bem-elem('header') { 71 @include iro.bem-elem('header') {
82 grid-area: sidebar-header / sidebar-header / header / header; 72 grid-area: sidebar-header / sidebar-header / header / header;
83 padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x); 73 padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x);
84 border-bottom: 1px solid fn.color(--inner-border); 74 border-bottom: 1px solid fn.color(--border);
85 75
86 @include iro.bem-modifier('sidebar') { 76 @include iro.bem-modifier('sidebar') {
87 grid-area: sidebar-header; 77 grid-area: sidebar-header;
88 border-right: 1px solid fn.color(--inner-border); 78 border-right: 1px solid fn.color(--border);
89 79
90 @include iro.bem-sibling-elem('header') { 80 @include iro.bem-sibling-elem('header') {
91 grid-area: header; 81 grid-area: header;
@@ -106,7 +96,7 @@
106 @include iro.bem-elem('sidebar') { 96 @include iro.bem-elem('sidebar') {
107 grid-area: sidebar; 97 grid-area: sidebar;
108 padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x); 98 padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
109 border-right: 1px solid fn.color(--inner-border); 99 border-right: 1px solid fn.color(--border);
110 } 100 }
111 101
112 @include iro.bem-elem('body') { 102 @include iro.bem-elem('body') {