beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Basic form element styling

Browse source 
Fieldset, legend and label.
This commit is contained in:
Angelos Chalaris 2017-11-06 23:19:55 +02:00
parent 980ea17d62
commit 1d105936d1
3 changed files with 43 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/v3/DEVLOG.md
View file

@ -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.

18
docs/v3_dev/src/index.css
View file

@ -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;
}

25
src/mini/_input_control.scss
View file

@ -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});
}