diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 8600ca0..c6d4e13 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -94,3 +94,4 @@ - Added conditions for `box-shadow` values in `core`. The module is mostly complete, apart from extra features that I might want to add in the future. - Decided not to add the `select` fix in `input_control`. Browsers are pretty wild around the element and its use cases are causing a ton of complications. It is possible, but quite unlikely that it will be rebuilt in the old way in the future, but most likely it will just follow the OS/Browser/Native UI as it should have done originally. It's debatable if this is for the best, but quite frankly it saves me a lot of time and effort for a single element and a lot of bytes in the codebase. I would rather not style it and provide an outside fix for safety, one that goes a bit against semantics to provide better styling. If you are reading this and want to tell me why this was a bad choice and led to the demise of the **hugging cat**, kindly do! - Added styling for `form` elements, simplified the values of `padding` to make them more reasonable and uniform. +- `legend` elements now have larger text (`1rem` over `0.875rem` in the past). This is done with accessibility in mind, making sure that users will have an easier time reading forms, which are a crucially important part of websites nowadays. Also simplified padding to be more universal and avoid cluttering. diff --git a/docs/v3_dev/src/index.css b/docs/v3_dev/src/index.css index 50a24ce..e8a817b 100644 --- a/docs/v3_dev/src/index.css +++ b/docs/v3_dev/src/index.css @@ -586,6 +586,24 @@ a:hover, a:focus { } } +/* + Definitions for forms and input elements. +*/ +form { + background: var(--secondary-back-color); + border: 0.0625rem solid var(--secondary-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); + padding: calc(2 * var(--universal-padding)) var(--universal-padding); +} + +fieldset { + border: 0.0625rem solid var(--secondary-border-color); + border-radius: var(--universal-border-radius); + margin: calc(var(--universal-margin) / 4); + padding: var(--universal-padding); +} + :not(.doc) { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; } diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss index cf8ba0e..7458e03 100644 --- a/src/mini/_input_control.scss +++ b/src/mini/_input_control.scss @@ -9,7 +9,7 @@ // Base form styling form { // Text color is the default, this can be changed manually. background: var(#{$secondary-back-color-var}); - border: $__1px solid var(#{$secondary-border-color-var}); + border: $__1px solid var(#{$secondary-border-color-var}); border-radius: var(#{$universal-border-radius-var}); margin: var(#{$universal-margin-var}); padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var}); @@ -17,3 +17,26 @@ form { // Text color is the default, this can be changed manually. box-shadow: var(#{$universal-box-shadow-var}); } } +// Fieldset styling +fieldset { + // Apply always to overwrite defaults for all of the below. + border: $__1px solid var(#{$secondary-border-color-var}); + border-radius: var(#{$universal-border-radius-var}); + margin: calc(var(#{$universal-margin-var}) / 4); + padding: var(#{$universal-padding-var}); +} +// Legend styling. +legend { + // Edge fixes. + box-sizing: border-box; + display: table; + max-width: 100%; + white-space: normal; + // Actual styling. + font-weight: $bold-font-weight; + padding: calc(var(#{$universal-padding-var}) / 2); +} +// Label syling. - Basically just padding, but there might be more in the future. +label { + padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var}); +}