From 8534beebecccd8e18395efa6633535934ee3d5e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Thu, 3 Oct 2024 19:19:48 +0200 Subject: [PATCH 01/12] Cleanup: Base cleanup forms styles and page reference Initialize cleanup of forms styles and forms examples on the reference page. Remove redundant examples and specific styles that can cause issues in projects context. --- src/index.html | 110 ++++++++++++++--------------------------- src/styles/_forms.sass | 40 +++++++++++++-- 2 files changed, 74 insertions(+), 76 deletions(-) diff --git a/src/index.html b/src/index.html index 35c4076..f7b67e7 100644 --- a/src/index.html +++ b/src/index.html @@ -1603,73 +1603,54 @@
-
- -
- - + +
+
+ + +
+ + +
+

+ Sorry, this field looks too awesome +

-
+
-
-
- -
- -
-
- -
- + +
+ +
-
-
- -
- - -
-
-
- -
-
-

- You can also add a disabled class to the form-group. +

+ Can't hear you over the beauty of this field

-
- -
- - -
-
- -
- + +
+
-
+
-
+
-
-
-
+
@@ -1708,37 +1687,22 @@ Send Stuff!
+
+
+
- +
- - -
- -
- - -
- - -
-

- Sorry, this field looks too awesome -

- - -
- - -
-

- Can't hear you over the beauty of this field -

+
+ +
+ +
+
+
diff --git a/src/styles/_forms.sass b/src/styles/_forms.sass index 5334ca0..51a70f7 100644 --- a/src/styles/_forms.sass +++ b/src/styles/_forms.sass @@ -1,3 +1,4 @@ +// TODO: refactor and organize styles .form +list-unstyled +inputs-generic @@ -26,6 +27,16 @@ &:focus border-color: var(--color-accent) + &[type="checkbox"], + &[type="radio"] + height: var(--spacer) + min-height: 0 + width: auto + + &[type="checkbox"] + &:hover + cursor: pointer + &[type="file"] padding: 0 @@ -62,25 +73,29 @@ input, background-color: var(--input-color-bg) color: var(--color-text) - height: calc(var(--spacer) * 2.5) + min-height: calc(var(--spacer) * 2.5) +padding(3, x) +padding(2, y) +media-sm - height: var(--spacer-5) + min-height: var(--spacer-5) &:disabled --input-color-bg-hover: var(--input-color-bg) + background-color: var(--input-color-bg) cursor: not-allowed + &::placeholder + color: var(--color-text-tertiary) + &:focus, &:hover background-color: var(--input-color-bg-hover) color: var(--color-text) &::placeholder - color: var(--color-text-tertiary) + color: var(--color-text-secondary) // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 opacity: 1 @@ -116,6 +131,10 @@ label sup, position: absolute right: var(--spacer-2) + &:has([type="checkbox"]), + &:has([type="radio"]) + justify-content: start + .toggle-bar border: var(--border-width) solid var(--border-color) border-radius: calc(var(--spacer) * 2) @@ -177,3 +196,18 @@ label sup, left: .2rem height: 1.2rem width: 1.2rem +select + &.form-control + &:hover + cursor: pointer + +[type="checkbox"], +[type="radio"] + height: var(--spacer) + min-height: 0 + width: auto + +[type="checkbox"] + &:hover + cursor: pointer + -- 2.30.2 From 2ffc7690d6dd360237f6a7cfca18ec8c0fa497bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 4 Oct 2024 11:25:40 +0200 Subject: [PATCH 02/12] UI: Add style component form controls enhancement transitions Improve form control component's transitionining effects. --- src/styles/_variables.sass | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/_variables.sass b/src/styles/_variables.sass index 0b31872..243a99e 100644 --- a/src/styles/_variables.sass +++ b/src/styles/_variables.sass @@ -287,9 +287,11 @@ html[data-theme="dark"] /* Config. */ $font-path: '../assets/fonts' !default +// TODO: change and simplify Sass variables to CSS custom properties $input-box-shadow: none $input-border-color: rgba(black, .1) $input-border-width: .2rem +$input-transition: background-color var(--transition-speed-slow) var(--transition-timing-fast), border-color var(--transition-speed-slow) var(--transition-timing-fast), box-shadow var(--transition-speed-slow) var(--transition-timing-fast) $label-margin-bottom: .2rem -- 2.30.2 From e3b826471fac1f43b89dbc61c18a1ae04ffd7782 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 4 Oct 2024 12:38:05 +0200 Subject: [PATCH 03/12] Cleanup: Add component form default checkbox markup and style overrides Add default checkbox markup and style overrides to the form component, complying with default checkbox markup conventions. Add style overrides to cleanup and simplify base styling. --- src/index.html | 12 ++++-------- src/styles/_forms.sass | 22 ++++++++++++++++++++-- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index f7b67e7..5d86a7e 100644 --- a/src/index.html +++ b/src/index.html @@ -1691,15 +1691,11 @@
-
- -
-
-
- -
- + +
diff --git a/src/styles/_forms.sass b/src/styles/_forms.sass index 51a70f7..a1e06ee 100644 --- a/src/styles/_forms.sass +++ b/src/styles/_forms.sass @@ -13,7 +13,6 @@ .input-group-addon border-color: var(--color-danger) - .form-text, .helptext color: var(--color-text-secondary) font-size: var(--fs-sm) @@ -27,6 +26,7 @@ &:focus border-color: var(--color-accent) + // TODO: check if using form-control with checkbox and radio is a real use case &[type="checkbox"], &[type="radio"] height: var(--spacer) @@ -201,6 +201,25 @@ select &:hover cursor: pointer +// Checkboxes and radios Bootstrap overrides +// TODO: remove overrides when cleaning up Bootstrap deprecated partials +.form-check, +.form-check-input + position: static + +.form-check + line-height: var(--lh-sm) + +padding(0, left) + +.form-check-input + +margin(0, left) + +margin(1, right) + +margin(0, top) + +.form-check-label + &:hover + cursor: pointer + [type="checkbox"], [type="radio"] height: var(--spacer) @@ -210,4 +229,3 @@ select [type="checkbox"] &:hover cursor: pointer - -- 2.30.2 From 610ea38ef2ccd4e50c305ea6baad62edd830493e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 4 Oct 2024 12:52:32 +0200 Subject: [PATCH 04/12] UI: Add page reference component forms radios default --- src/index.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/index.html b/src/index.html index 5d86a7e..2842886 100644 --- a/src/index.html +++ b/src/index.html @@ -1699,6 +1699,23 @@
+
+
+
+
+ + +
+
+ + +
+
+
-- 2.30.2 From 3c20a373308a2cf714cca7e7fab4ea75da1fca90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 4 Oct 2024 14:34:06 +0200 Subject: [PATCH 05/12] UI: Add style component forms checkbox custom base --- src/index.html | 24 ++++++++++++++++++--- src/styles/_forms.sass | 48 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 2842886..066d5f7 100644 --- a/src/index.html +++ b/src/index.html @@ -1692,11 +1692,29 @@
- -
+
+ + +
+
+
+ +
diff --git a/src/styles/_forms.sass b/src/styles/_forms.sass index a1e06ee..9f10055 100644 --- a/src/styles/_forms.sass +++ b/src/styles/_forms.sass @@ -217,6 +217,8 @@ select +margin(0, top) .form-check-label + +fw-normal + &:hover cursor: pointer @@ -229,3 +231,49 @@ select [type="checkbox"] &:hover cursor: pointer + +.form-check-custom + cursor: pointer + display: block + +fw-normal + +margin(3, bottom) + padding-left: calc(var(--spacer) * 2) + position: relative + + input + height: 0 + opacity: 0 + width: 0 + + .form-check-custom-mark + background-color: var(--input-color-bg) + border: var(--border-width) solid var(--border-color) + height: var(--spacer-4) + left: 0 + position: absolute + top: 0 + width: var(--spacer-4) + + &:after + content: "" + display: none + position: absolute + + &:hover input ~ .form-check-custom-mark + background-color: var(--input-color-bg-hover) + + input:checked ~ .form-check-custom-mark + background-color: var(--color-accent) + + &:after + display: block + + .form-check-custom-mark:after + border: solid white + border-width: 0 .2rem .2rem 0 + display: none + height: 1.0rem + left: .8rem + top: .4rem + transform: rotate(45deg) + width: .6rem \ No newline at end of file -- 2.30.2 From 2be7eaf5d8fb1537a6a0982372f6b434620f037b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 4 Oct 2024 14:50:50 +0200 Subject: [PATCH 06/12] UI: Add style component forms radio custom base --- src/index.html | 16 ++++++++++++++-- src/styles/_forms.sass | 15 ++++++++++++++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 066d5f7..d5ba24d 100644 --- a/src/index.html +++ b/src/index.html @@ -1723,16 +1723,28 @@
+
+ + +
diff --git a/src/styles/_forms.sass b/src/styles/_forms.sass index 9f10055..22c6c84 100644 --- a/src/styles/_forms.sass +++ b/src/styles/_forms.sass @@ -276,4 +276,17 @@ select left: .8rem top: .4rem transform: rotate(45deg) - width: .6rem \ No newline at end of file + width: .6rem + +.form-check-custom-radio + .form-check-custom-mark + border-radius: 50% + + &:after + background: white + border: 0 + border-radius: 50% + height: var(--spacer-2) + left: .6rem + top: .6rem + width: var(--spacer-2) -- 2.30.2 From d85b97683134555c22a878e8b5b8167f0a03c9e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 4 Oct 2024 14:58:27 +0200 Subject: [PATCH 07/12] Cleanup: Improve page reference markup classes and structure --- src/index.html | 40 +++++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/src/index.html b/src/index.html index d5ba24d..8bcc38a 100644 --- a/src/index.html +++ b/src/index.html @@ -1274,7 +1274,7 @@
  • Item One
  • Item Two
    • -
    +

    Add list-inline for inline layout.

    @@ -1638,7 +1638,7 @@ -
    +
    @@ -1671,7 +1671,7 @@
    -
    +
    @@ -1681,7 +1681,7 @@
    -
    +
    -- 2.30.2 From b752f0c7a1cb38a374f446bacb0d41976b636189 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 4 Oct 2024 15:03:59 +0200 Subject: [PATCH 08/12] Add style component forms form-check-custom transition --- src/styles/_forms.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/_forms.sass b/src/styles/_forms.sass index 22c6c84..06df8dd 100644 --- a/src/styles/_forms.sass +++ b/src/styles/_forms.sass @@ -252,6 +252,7 @@ select left: 0 position: absolute top: 0 + transition: background-color var(--transition-speed) width: var(--spacer-4) &:after -- 2.30.2 From 20cb7b662d22f76492fb434469b95ee4f25b61af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Fri, 4 Oct 2024 15:20:32 +0200 Subject: [PATCH 09/12] UI: Add style form component slider base Add forms component markup and styles for custom stylized slider. --- src/index.html | 9 +++++++++ src/styles/_forms.sass | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+) diff --git a/src/index.html b/src/index.html index 8bcc38a..9a343ac 100644 --- a/src/index.html +++ b/src/index.html @@ -1770,6 +1770,15 @@ +
    +
    +
    + +
    + +
    +
    +
    diff --git a/src/styles/_forms.sass b/src/styles/_forms.sass index 06df8dd..83ed226 100644 --- a/src/styles/_forms.sass +++ b/src/styles/_forms.sass @@ -291,3 +291,39 @@ select left: .6rem top: .6rem width: var(--spacer-2) + +.slider-custom + background: var(--color-text-tertiary) + border: var(--border-width) solid var(--border-color) + border-radius: 1.2rem + height: var(--spacer-4) + min-height: 0 + outline: none + +padding(1, x) + transition: opacity var(--transition-speed-slow) + -webkit-appearance: none + -webkit-transition: var(--transition-speed-slow) + width: 100% + + &:active, + &:focus + background-color: var(--color-text-tertiary) + + &:hover + background-color: var(--color-text-secondary) + + &::-moz-range-thumb + background: white + border-radius: 50% + cursor: pointer + height: var(--spacer) + width: var(--spacer) + + &::-webkit-slider-thumb + appearance: none + background: white + border-radius: 50% + cursor: pointer + height: var(--spacer) + -webkit-appearance: none + width: var(--spacer) -- 2.30.2 From d418b05dbe26887775cecda89483470567e6f6be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 8 Oct 2024 16:18:28 +0200 Subject: [PATCH 10/12] UI: Add component form form-texts to page reference examples Add component form form-texts to page reference from-group examples and clean up arbitrary form-group styles. Part of #94707 --- src/index.html | 12 ++++++------ src/styles/_forms.sass | 4 +--- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/index.html b/src/index.html index 9a343ac..e13ac4b 100644 --- a/src/index.html +++ b/src/index.html @@ -1614,10 +1614,10 @@
    +
    + Sorry, this field looks too awesome +
    -

    - Sorry, this field looks too awesome -

    @@ -1631,10 +1631,10 @@
    +
    + Can't hear you over the beauty of this field +
    -

    - Can't hear you over the beauty of this field -

    diff --git a/src/styles/_forms.sass b/src/styles/_forms.sass index 83ed226..94bd53a 100644 --- a/src/styles/_forms.sass +++ b/src/styles/_forms.sass @@ -122,14 +122,12 @@ label sup, text-decoration: underline .form-group - align-items: center - display: flex - justify-content: end position: relative .form-group-addon position: absolute right: var(--spacer-2) + top: var(--spacer-2) &:has([type="checkbox"]), &:has([type="radio"]) -- 2.30.2 From 88441cd556e29a8fc7cfbbced4bde75dc3c23471 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 8 Oct 2024 16:51:57 +0200 Subject: [PATCH 11/12] UI: Add style component forms slider range steps display Add range steps' display options for forms slider component with default and dotted variants. Show range steps below the input by adding markup items in the number of range steps, but without the need to introduce new styles for each use. Part of #94707 --- src/index.html | 32 ++++++++++++++++++++++++++++++-- src/styles/_forms.sass | 16 ++++++++++++++++ 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index e13ac4b..5a62338 100644 --- a/src/index.html +++ b/src/index.html @@ -1774,8 +1774,36 @@
    -
    - + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    diff --git a/src/styles/_forms.sass b/src/styles/_forms.sass index 94bd53a..967463b 100644 --- a/src/styles/_forms.sass +++ b/src/styles/_forms.sass @@ -325,3 +325,19 @@ select height: var(--spacer) -webkit-appearance: none width: var(--spacer) + +.slider-custom-steps + display: flex + justify-content: space-between + padding-left: 1.6rem + padding-right: 1.2rem + +.slider-custom-steps-item + background-color: var(--color-text-tertiary) + height: var(--spacer-1) + transform: translateX(-.1rem) + width: .2rem + +.slider-custom-steps-item-dots + border-radius: 50% + width: var(--spacer-1) -- 2.30.2 From cb1e5e094b822c437ae3fb4fd431b1edadfd8710 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Lente?= Date: Tue, 8 Oct 2024 17:08:38 +0200 Subject: [PATCH 12/12] UI: Add page reference form component field required example markup Part of #94707 --- src/index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/index.html b/src/index.html index 5a62338..347a0a1 100644 --- a/src/index.html +++ b/src/index.html @@ -1610,6 +1610,12 @@
    + + * +
    + +
    +
    -- 2.30.2