From 84ea23e13bae7251c9beaa30364bfde2e01cb45a Mon Sep 17 00:00:00 2001 From: Drew Jones Date: Mon, 7 Mar 2022 17:03:57 +0000 Subject: [PATCH 1/2] chore: experiment with slotted styles --- .../components/inputter/src/styles.css | 79 ++++++++++++++----- .../inputter/src/styles.slotted.css | 39 +-------- 2 files changed, 63 insertions(+), 55 deletions(-) diff --git a/packages/library/components/inputter/src/styles.css b/packages/library/components/inputter/src/styles.css index 849d7cce..e0a1f286 100644 --- a/packages/library/components/inputter/src/styles.css +++ b/packages/library/components/inputter/src/styles.css @@ -5,18 +5,21 @@ & ::slotted(label) { color: $INPUTTER_LABEL_COLOR; - } - & ::slotted(*)::placeholder { - color: red; - } + /* NOTE: these psuedo elements don't appear in Safari */ + &::before { + content: "before - "; + color: orange; + } - & ::slotted(input[type="text"]:hover) { - background: pink; + &::after { + content: " - after"; + color: purple; + } } - & ::slotted(input[type="text"]:disabled) { - background: yellow; + & ::slotted(*)::placeholder { + color: red; } & ::slotted(:is( @@ -44,6 +47,53 @@ font-size: $INPUTTER_FIELD_FONT_SIZE; } + & ::slotted(:is( + input[type="date"]:hover, + input[type="email"]:hover, + input[type="number"]:hover, + input[type="password"]:hover, + input[type="search"]:hover, + input[type="tel"]:hover, + input[type="text"]:hover, + select:hover, + textarea:hover)) { + background: pink; + } + + & ::slotted(:is( + input[type="date"]:focus, + input[type="email"]:focus, + input[type="number"]:focus, + input[type="password"]:focus, + input[type="search"]:focus, + input[type="tel"]:focus, + input[type="text"]:focus, + select:focus, + textarea:focus)) { + border-color: green; + color: green; + outline-offset: 0; + outline-color: blue; + outline-style: solid; + outline-width: 3px; + } + + & ::slotted(:is( + input[type="date"]:disabled, + input[type="email"]:disabled, + input[type="number"]:disabled, + input[type="password"]:disabled, + input[type="search"]:disabled, + input[type="tel"]:disabled, + input[type="text"]:disabled, + select:disabled, + textarea:disabled)) { + pointer-events: none; + color: $INPUTTER_DISABLED_COLOR; + background-color: $INPUTTER_DISABLED_BACKGROUND_COLOR; + border-color: $INPUTTER_DISABLED_BORDER_COLOR; + } + & ::slotted(:is( input[type="checkbox"], input[type="radio"])) { @@ -81,16 +131,6 @@ } /* stylelint-enable no-descending-specificity */ - & ::slotted([disabled]) { - /* - TODO: ability to style attribute selectors with less specificity of - styles defined as slotted content (by not using !important) - */ - color: $INPUTTER_DISABLED_COLOR !important; - background-color: $INPUTTER_DISABLED_BACKGROUND_COLOR !important; - border-color: $INPUTTER_DISABLED_BORDER_COLOR !important; - } - & .wrapper { margin-block-start: $INPUTTER_FIELD_MARGIN_BLOCK; max-width: fit-content; @@ -134,7 +174,8 @@ position: relative; & .input-mask, - & ::slotted(input[type="text"]) { /* NOTE: including `[type="text"]` due to Safari not respecting specificity */ + & ::slotted(input[type="text"]) { + /* NOTE: including `[type="text"]` due to Safari not respecting specificity */ width: calc((var(--maxlength)) * 1ch); font-family: $INPUTTER_MASK_FONT_FAMILY; } diff --git a/packages/library/components/inputter/src/styles.slotted.css b/packages/library/components/inputter/src/styles.slotted.css index 9af5f13c..06aa13b2 100644 --- a/packages/library/components/inputter/src/styles.slotted.css +++ b/packages/library/components/inputter/src/styles.slotted.css @@ -1,37 +1,4 @@ :host { - & input[type="date"], - & input[type="email"], - & input[type="number"], - & input[type="password"], - & input[type="tel"], - & input[type="text"], - & input[type="search"], - & select, - & textarea { - &:focus, - &:hover { - border-color: $INPUTTER_HOVER_COLOR; - color: $INPUTTER_HOVER_COLOR; - } - - &:focus-visible { - outline-offset: 0; - outline-color: $INPUTTER_FOCUS_COLOR; - outline-style: solid; - outline-width: 3px; - } - - &:focus:not(:focus-visible) { - /* - https://matthiasott.com/notes/focus-visible-is-here and - https://www.tpgi.com/focus-visible-and-backwards-compatibility/ - NOTE: an input field that expects keyboard interaction will show the focus. - https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo - */ - outline-style: none; - } - } - & input[type="radio"], & input[type="checkbox"] { & + label { @@ -87,16 +54,16 @@ } } - &[disabled] { + &:disabled { & + label { pointer-events: none; color: $INPUTTER_DISABLED_COLOR; - /* &::before, + &::before, &::after { background-color: $INPUTTER_DISABLED_BACKGROUND_COLOR; border-color: $INPUTTER_DISABLED_BORDER_COLOR; - } */ + } } } } From 2ee3faf553555ecff7c4538c85558bef605ffe14 Mon Sep 17 00:00:00 2001 From: Drew Jones Date: Mon, 7 Mar 2022 17:07:58 +0000 Subject: [PATCH 2/2] chore: whitespace tweak --- packages/library/components/inputter/src/styles.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/library/components/inputter/src/styles.css b/packages/library/components/inputter/src/styles.css index e0a1f286..77977128 100644 --- a/packages/library/components/inputter/src/styles.css +++ b/packages/library/components/inputter/src/styles.css @@ -174,8 +174,7 @@ position: relative; & .input-mask, - & ::slotted(input[type="text"]) { - /* NOTE: including `[type="text"]` due to Safari not respecting specificity */ + & ::slotted(input[type="text"]) { /* NOTE: including `[type="text"]` due to Safari not respecting specificity */ width: calc((var(--maxlength)) * 1ch); font-family: $INPUTTER_MASK_FONT_FAMILY; }