From 8fdc53f4c8125140624da087a2b05b60397e6c7e Mon Sep 17 00:00:00 2001 From: Volpeon 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 + tpl/objects/text-field.pug | 52 ++++++++-------- 4 files changed, 102 insertions(+), 103 deletions(-) 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); diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index d33d3b2..2e9827b 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -1,33 +1,33 @@ include icon.pug mixin text-field - - const slots = {} + - const slots = {} - mixin slot(key) - - slots[key] = block + mixin slot(key) + - slots[key] = block - - - block ? block() : undefined + - + block ? block() : undefined - let classes = { - 'o-text-field': true, - 'o-text-field--ext': attributes.ext, - 'is-invalid': attributes.invalid, - 'is-disabled': attributes.disabled, - 'l-card': !!block, - 'l-card--flush': !!block, - 'l-card--gapless': !!block, - 'u-p-xs': !!block - } + let classes = { + 'o-text-field': true, + 'o-text-field--ext': attributes.ext, + 'is-invalid': attributes.invalid, + 'is-disabled': attributes.disabled, + 'l-card': !!block, + 'l-card--flush': !!block, + 'l-card--gapless': !!block, + 'u-p-xs': !!block + } - div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) - if !!block - if slots.pre - - slots.pre() - input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes) - if slots.post - - slots.post() - .o-text-field__bg - else - input.o-text-field__native&attributes(attributes) - .o-text-field__bg + div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) + if !!block + if slots.pre + - slots.pre() + input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes) + if slots.post + - slots.post() + .o-text-field__bg + else + input.o-text-field__native&attributes(attributes) + .o-text-field__bg -- cgit v1.2.3-70-g09d2