mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-12 00:43:57 +02:00
Code Issues Releases Wiki Activity

Updated input_control

Browse Source 
Additional customization added via CSS variables.
This commit is contained in:
Angelos Chalaris
2017-11-12 15:23:18 +02:00
parent 37a1625219
commit 44f09e5880
3 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/v3/DEVLOG.md
View File

@@ -132,8 +132,10 @@
- Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it.
- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
- Customized `checkbox` and `radio` input elements, they should work pretty much fine.
- *TODO* Add variables to customize `input_control` further, except buttons. Add all missing values much like I have done in `layout` module.
- *TODO* Add all missing values to modules much like I have done in `layout` module.
## 20171112
- Updated `navigation` module to use Unicode symbols instead of icons. This will allow for more customization of the icons used in terms of color and alignment.
- Modularized colorization of `form` and `input` elements, everything should now work fine by itself.
- *TODO* Add button groups, deal with `checkbox` and `radio` sizing in a proper manner.

25
docs/v3_dev/src/index.css
View File

@@ -646,6 +646,12 @@ a:hover, a:focus {
*/
/* Input_control module CSS variable definitions */
:root {
--form-back-color: #f0f0f0;
--form-fore-color: #111;
--form-border-color: #ddd;
--input-back-color: #f8f8f8;
--input-fore-color: #111;
--input-border-color: #ddd;
--input-focus-color: #0288d1;
--input-invalid-color: #d32f2f;
--button-back-color: #e2e2e2;
@@ -656,15 +662,16 @@ a:hover, a:focus {
}
form {
background: var(--secondary-back-color);
border: 0.0625rem solid var(--secondary-border-color);
background: var(--form-back-color);
color: var(--form-fore-color);
border: 0.0625rem solid var(--form-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: 0.0625rem solid var(--form-border-color);
border-radius: var(--universal-border-radius);
margin: calc(var(--universal-margin) / 4);
padding: var(--universal-padding);
@@ -733,9 +740,9 @@ label {
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
box-sizing: border-box;
background: var(--back-color);
color: var(--fore-color);
border: 0.0625rem solid var(--secondary-border-color);
background: var(--input-back-color);
color: var(--input-fore-color);
border: 0.0625rem solid var(--input-border-color);
border-radius: var(--universal-border-radius);
margin: calc(var(--universal-margin) / 2);
padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
@@ -798,17 +805,17 @@ option {
content: '';
top: calc(0.0625rem + var(--universal-padding) / 2);
left: calc(0.0625rem + var(--universal-padding) / 2);
background: #111;
background: var(--input-fore-color);
width: 0.5rem;
height: 0.5rem;
}
:placeholder-shown {
color: var(--fore-color);
color: var(--input-fore-color);
}
::-ms-placeholder {
color: var(--fore-color);
color: var(--input-fore-color);
opacity: 0.54;
}