diff options
author | Volpeon <git@volpeon.ink> | 2023-02-04 22:49:04 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2023-02-04 22:49:04 +0100 |
commit | c2640702660f57339b1ba09daef842a1c7e0da90 (patch) | |
tree | ac034944f114ea73c0455c27942d583c250f7600 /src/objects/_dialog.scss | |
parent | Scrollable dialog improvements (diff) | |
download | iro-design-c2640702660f57339b1ba09daef842a1c7e0da90.tar.gz iro-design-c2640702660f57339b1ba09daef842a1c7e0da90.tar.bz2 iro-design-c2640702660f57339b1ba09daef842a1c7e0da90.zip |
Simplified dialog
Diffstat (limited to 'src/objects/_dialog.scss')
-rw-r--r-- | src/objects/_dialog.scss | 20 |
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') { |