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 | |
| 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')
| -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') { |
