From 8fdc53f4c8125140624da087a2b05b60397e6c7e Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 13 Feb 2022 19:54:26 +0100
Subject: Fix dialog+backdrop
---
src/_declare-vars.scss | 150 ++++++++++++++++++++++-----------------------
src/objects/_backdrop.scss | 1 +
src/objects/_dialog.scss | 2 +
3 files changed, 76 insertions(+), 77 deletions(-)
(limited to 'src')
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index a9b4d0a..d81b299 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -67,93 +67,89 @@
//
-@include iro.fn-execute {
- @include iro.props-store((
- --colors: (
- --bg-hi2: fn.color(--gray --1, null), // Lightest background
- --bg-hi: fn.color(--gray --2, null), // Lighter background
- --bg: fn.color(--gray --3, null), // Background
-
- --obj-hi: fn.color(--gray --4, null),
- --obj: fn.color(--gray --5, null),
- --obj-lo: fn.color(--gray --6, null),
-
- --fg-hi3: fn.color(--gray --7, null), // Disabled text
- --fg-hi2: fn.color(--gray --8, null), // Placeholder text
- --fg-hi: fn.color(--gray --9, null), // Faint text
- --fg: fn.color(--gray --10, null), // Text
- --fg-lo: fn.color(--gray --11, null), // Strong text
-
- --gray: ( --h: 220, --s: 5% ),
- --blue: fn.color-palette(blend.lch(48% 50 279)),
- --red: fn.color-palette(blend.lch(48% 50 23)),
- --green: fn.color-palette(blend.lch(63% 50 147)),
- --yellow: fn.color-palette(blend.lch(73% 50 80)),
-
- --accent: (
- --primary: iro.props-ref('colors', --colors --blue),
- --error: iro.props-ref('colors', --colors --red),
- --success: iro.props-ref('colors', --colors --green),
- ),
-
- --selection: (
- --bg: fn.color(--accent --primary --selection, null),
- --bg-img: fn.color(--accent --primary --semi, null),
- --fg: fn.color(--accent --primary --fg, null),
- ),
-
- --focus: (
- --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
- --fill: fn.color(--accent --primary --bg, null),
- --text: fn.color(--accent --primary --lo, null),
- --fill-text: fn.color(--accent --primary --fg, null),
- ),
+@include iro.props-store((
+ --colors: (
+ --bg-hi2: fn.color(--gray --1, null), // Lightest background
+ --bg-hi: fn.color(--gray --2, null), // Lighter background
+ --bg: fn.color(--gray --3, null), // Background
+
+ --obj-hi: fn.color(--gray --4, null),
+ --obj: fn.color(--gray --5, null),
+ --obj-lo: fn.color(--gray --6, null),
+
+ --fg-hi3: fn.color(--gray --7, null), // Disabled text
+ --fg-hi2: fn.color(--gray --8, null), // Placeholder text
+ --fg-hi: fn.color(--gray --9, null), // Faint text
+ --fg: fn.color(--gray --10, null), // Text
+ --fg-lo: fn.color(--gray --11, null), // Strong text
+
+ --gray: ( --h: 220, --s: 5% ),
+ --blue: fn.color-palette(blend.lch(48% 50 279)),
+ --red: fn.color-palette(blend.lch(48% 50 23)),
+ --green: fn.color-palette(blend.lch(63% 50 147)),
+ --yellow: fn.color-palette(blend.lch(73% 50 80)),
+
+ --accent: (
+ --primary: iro.props-ref('colors', --colors --blue),
+ --error: iro.props-ref('colors', --colors --red),
+ --success: iro.props-ref('colors', --colors --green),
),
- ), 'colors');
- @include iro.props-store((
- --colors: (
- --gray: fn.gray-palette(94%),
+ --selection: (
+ --bg: fn.color(--accent --primary --selection, null),
+ --bg-img: fn.color(--accent --primary --semi, null),
+ --fg: fn.color(--accent --primary --fg, null),
),
- ), 'palette-light');
- @include iro.props-store((
- --colors: (
- --gray: fn.gray-palette(100%),
+ --focus: (
+ --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
+ --fill: fn.color(--accent --primary --bg, null),
+ --text: fn.color(--accent --primary --lo, null),
+ --fill-text: fn.color(--accent --primary --fg, null),
),
- ), 'palette-light-raised');
-}
+ ),
+), 'colors');
-//
+@include iro.props-store((
+ --colors: (
+ --gray: fn.gray-palette(94%),
+ ),
+), 'palette-light');
-@include iro.fn-execute {
- @include iro.props-store((
- --colors: (
- --blue: fn.color-palette(blend.lch(58% 60 279), -1),
- --red: fn.color-palette(blend.lch(58% 60 23), -1),
- --green: fn.color-palette(blend.lch(73% 60 147), -1),
- --yellow: fn.color-palette(blend.lch(83% 60 80), -1),
-
- --accent: (
- --primary: iro.props-ref('colors-dark', --colors --blue),
- --error: iro.props-ref('colors-dark', --colors --red),
- --success: iro.props-ref('colors-dark', --colors --green),
- ),
- )
- ), 'colors-dark');
+@include iro.props-store((
+ --colors: (
+ --gray: fn.gray-palette(100%),
+ ),
+), 'palette-light-raised');
- @include iro.props-store((
- --colors: (
- --gray: fn.gray-palette(9%),
- ),
- ), 'palette-dark');
+//
- @include iro.props-store((
- --colors: (
- --gray: fn.gray-palette(16%),
+@include iro.props-store((
+ --colors: (
+ --blue: fn.color-palette(blend.lch(58% 60 279), -1),
+ --red: fn.color-palette(blend.lch(58% 60 23), -1),
+ --green: fn.color-palette(blend.lch(73% 60 147), -1),
+ --yellow: fn.color-palette(blend.lch(83% 60 80), -1),
+
+ --accent: (
+ --primary: iro.props-ref('colors-dark', --colors --blue),
+ --error: iro.props-ref('colors-dark', --colors --red),
+ --success: iro.props-ref('colors-dark', --colors --green),
),
- ), 'palette-dark-raised');
-}
+ )
+), 'colors-dark');
+
+@include iro.props-store((
+ --colors: (
+ --gray: fn.gray-palette(9%),
+ ),
+), 'palette-dark');
+
+@include iro.props-store((
+ --colors: (
+ --gray: fn.gray-palette(16%),
+ ),
+), 'palette-dark-raised');
//
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 34ce46a..ddf4ea0 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -37,6 +37,7 @@
bottom: 0;
left: 0;
box-sizing: border-box;
+ flex-direction: column;
padding: fn.dim(--pad-y) fn.dim(--pad-x);
background-color: fn.color(--bg);
}
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 22325f4..45af8b6 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -25,6 +25,8 @@
grid-template-rows: auto auto 1fr auto;
grid-template-areas: 'header' 'rule' 'body' 'footer';
position: relative;
+ box-sizing: border-box;
+ width: 100%;
max-width: fn.dim(--width-md);
margin: 0 auto;
padding: fn.dim(--pad-y) fn.dim(--pad-x);
--
cgit v1.2.3-70-g09d2