mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-05 13:27:25 +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. - 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. - 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. - 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 ## 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. - 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 */ /* Input_control module CSS variable definitions */
:root { :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-focus-color: #0288d1;
--input-invalid-color: #d32f2f; --input-invalid-color: #d32f2f;
--button-back-color: #e2e2e2; --button-back-color: #e2e2e2;
@@ -656,15 +662,16 @@ a:hover, a:focus {
} }
form { form {
background: var(--secondary-back-color); background: var(--form-back-color);
border: 0.0625rem solid var(--secondary-border-color); color: var(--form-fore-color);
border: 0.0625rem solid var(--form-border-color);
border-radius: var(--universal-border-radius); border-radius: var(--universal-border-radius);
margin: var(--universal-margin); margin: var(--universal-margin);
padding: calc(2 * var(--universal-padding)) var(--universal-padding); padding: calc(2 * var(--universal-padding)) var(--universal-padding);
} }
fieldset { fieldset {
border: 0.0625rem solid var(--secondary-border-color); border: 0.0625rem solid var(--form-border-color);
border-radius: var(--universal-border-radius); border-radius: var(--universal-border-radius);
margin: calc(var(--universal-margin) / 4); margin: calc(var(--universal-margin) / 4);
padding: var(--universal-padding); padding: var(--universal-padding);
@@ -733,9 +740,9 @@ label {
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select { [type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
box-sizing: border-box; box-sizing: border-box;
background: var(--back-color); background: var(--input-back-color);
color: var(--fore-color); color: var(--input-fore-color);
border: 0.0625rem solid var(--secondary-border-color); border: 0.0625rem solid var(--input-border-color);
border-radius: var(--universal-border-radius); border-radius: var(--universal-border-radius);
margin: calc(var(--universal-margin) / 2); margin: calc(var(--universal-margin) / 2);
padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
@@ -798,17 +805,17 @@ option {
content: ''; content: '';
top: calc(0.0625rem + var(--universal-padding) / 2); top: calc(0.0625rem + var(--universal-padding) / 2);
left: 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; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
:placeholder-shown { :placeholder-shown {
color: var(--fore-color); color: var(--input-fore-color);
} }
::-ms-placeholder { ::-ms-placeholder {
color: var(--fore-color); color: var(--input-fore-color);
opacity: 0.54; opacity: 0.54;
} }

53
src/mini/_input_control.scss
View File

@@ -9,6 +9,12 @@ $input-group-vertical-name: 'vertical' !default; // Class name for vertical
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view. $input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
$button-class-name: 'button' !default; // Class name for elements styled as buttons. $button-class-name: 'button' !default; // Class name for elements styled as buttons.
$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled. $input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
$form-back-color: #f0f0f0 !default; // Background color for forms.
$form-fore-color: #111 !default; // Text color for forms.
$form-border-color: #ddd !default; // Border color for forms.
$input-back-color: #f8f8f8 !default; // Background color for input elements.
$input-fore-color: #111 !default; // Text color for input elements.
$input-border-color: #ddd !default; // Border color for input elements.
$input-focus-color: #0288d1 !default; // Border color for focused input elements. $input-focus-color: #0288d1 !default; // Border color for focused input elements.
$input-invalid-color: #d32f2f !default; // Border color for invalid input elements. $input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
$button-back-color: #e2e2e2 !default; // Background color for buttons. $button-back-color: #e2e2e2 !default; // Background color for buttons.
@@ -17,6 +23,12 @@ $button-fore-color: #212121 !default; // Text color for buttons.
$button-border-color: transparent !default; // Border color for buttons. $button-border-color: transparent !default; // Border color for buttons.
$button-hover-border-color: transparent !default; // Border color for buttons (hover). $button-hover-border-color: transparent !default; // Border color for buttons (hover).
// CSS variable name definitions [exercise caution if modifying these] // CSS variable name definitions [exercise caution if modifying these]
$form-back-color-var: '--form-back-color' !default;
$form-fore-color-var: '--form-fore-color' !default;
$form-border-color-var: '--form-border-color' !default;
$input-back-color-var: '--input-back-color' !default;
$input-fore-color-var: '--input-fore-color' !default;
$input-border-color-var: '--input-border-color' !default;
$input-focus-color-var: '--input-focus-color' !default; $input-focus-color-var: '--input-focus-color' !default;
$input-invalid-color-var: '--input-invalid-color' !default; $input-invalid-color-var: '--input-invalid-color' !default;
$button-back-color-var: '--button-back-color' !default; $button-back-color-var: '--button-back-color' !default;
@@ -27,24 +39,14 @@ $button-border-color-var: '--button-border-color' !default;
$button-hover-border-color-var: '--button-hover-border-color' !default; $button-hover-border-color-var: '--button-hover-border-color' !default;
// Check the `_input_control_mixins.scss` file to find this module's mixins. // Check the `_input_control_mixins.scss` file to find this module's mixins.
@import 'input_control_mixins'; @import 'input_control_mixins';
// Necessary functions for certain elements (mainly the icon used for the checkbox)
/// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
/// -----------------------------------------------------------------------
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/* Input_control module CSS variable definitions */ /* Input_control module CSS variable definitions */
:root { :root {
#{$form-back-color-var}: $form-back-color;
#{$form-fore-color-var}: $form-fore-color;
#{$form-border-color-var}: $form-border-color;
#{$input-back-color-var}: $input-back-color;
#{$input-fore-color-var}: $input-fore-color;
#{$input-border-color-var}: $input-border-color;
#{$input-focus-color-var}: $input-focus-color; #{$input-focus-color-var}: $input-focus-color;
#{$input-invalid-color-var}: $input-invalid-color; #{$input-invalid-color-var}: $input-invalid-color;
#{$button-back-color-var}: $button-back-color; #{$button-back-color-var}: $button-back-color;
@@ -55,8 +57,9 @@ $button-hover-border-color-var: '--button-hover-border-color' !default;
} }
// Base form styling // Base form styling
form { // Text color is the default, this can be changed manually. form { // Text color is the default, this can be changed manually.
background: var(#{$secondary-back-color-var}); background: var(#{$form-back-color-var});
border: $__1px solid var(#{$secondary-border-color-var}); color: var(#{$form-fore-color-var});
border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var}); border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var}); margin: var(#{$universal-margin-var});
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var}); padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
@@ -67,7 +70,7 @@ form { // Text color is the default, this can be changed manually.
// Fieldset styling // Fieldset styling
fieldset { fieldset {
// Apply always to overwrite defaults for all of the below. // Apply always to overwrite defaults for all of the below.
border: $__1px solid var(#{$secondary-border-color-var}); border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var}); border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 4); margin: calc(var(#{$universal-margin-var}) / 4);
padding: var(#{$universal-padding-var}); padding: var(#{$universal-padding-var});
@@ -137,9 +140,9 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select { [type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
box-sizing: border-box; box-sizing: border-box;
// Background, color and border should not be unassigned, as the browser defaults will apply. // Background, color and border should not be unassigned, as the browser defaults will apply.
background: var(#{$back-color-var}); background: var(#{$input-back-color-var});
color: var(#{$fore-color-var}); color: var(#{$input-fore-color-var});
border: $__1px solid var(#{$secondary-border-color-var}); border: $__1px solid var(#{$input-border-color-var});
border-radius: var(#{$universal-border-radius-var}); border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 2); margin: calc(var(#{$universal-margin-var}) / 2);
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var})); padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
@@ -198,17 +201,17 @@ option {
content: ''; content: '';
top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2); top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2); left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
background: $fore-color; background: var(#{$input-fore-color-var});
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
} }
} }
// Placeholder styling (keep browser-specific definitions separated, they do not play well together). // Placeholder styling (keep browser-specific definitions separated, they do not play well together).
:placeholder-shown { :placeholder-shown {
color: var(#{$fore-color-var}); color: var(#{$input-fore-color-var});
} }
::-ms-placeholder { ::-ms-placeholder {
color: var(#{$fore-color-var}); color: var(#{$input-fore-color-var});
opacity: 0.54; opacity: 0.54;
} }
// Definitions for the button and button-like elements. // Definitions for the button and button-like elements.