Updated input_control
Additional customization added via CSS variables.
This commit is contained in:
Angelos Chalaris
parent
37a1625219
commit
44f09e5880
3 changed files with 47 additions and 35 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
$button-class-name: 'button' !default; // Class name for elements styled as buttons.
|
||||
$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-invalid-color: #d32f2f !default; // Border color for invalid input elements.
|
||||
$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-hover-border-color: transparent !default; // Border color for buttons (hover).
|
||||
// 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-invalid-color-var: '--input-invalid-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;
|
||||
// Check the `_input_control_mixins.scss` file to find this module's 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 */
|
||||
: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-invalid-color-var}: $input-invalid-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
|
||||
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});
|
||||
background: var(#{$form-back-color-var});
|
||||
color: var(#{$form-fore-color-var});
|
||||
border: $__1px solid var(#{$form-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});
|
||||
|
|
@ -67,7 +70,7 @@ form { // Text color is the default, this can be changed manually.
|
|||
// Fieldset styling
|
||||
fieldset {
|
||||
// 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});
|
||||
margin: calc(var(#{$universal-margin-var}) / 4);
|
||||
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 {
|
||||
box-sizing: border-box;
|
||||
// Background, color and border should not be unassigned, as the browser defaults will apply.
|
||||
background: var(#{$back-color-var});
|
||||
color: var(#{$fore-color-var});
|
||||
border: $__1px solid var(#{$secondary-border-color-var});
|
||||
background: var(#{$input-back-color-var});
|
||||
color: var(#{$input-fore-color-var});
|
||||
border: $__1px solid var(#{$input-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: calc(var(#{$universal-margin-var}) / 2);
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
|
|
@ -198,17 +201,17 @@ option {
|
|||
content: '';
|
||||
top: 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;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
|
||||
:placeholder-shown {
|
||||
color: var(#{$fore-color-var});
|
||||
color: var(#{$input-fore-color-var});
|
||||
}
|
||||
::-ms-placeholder {
|
||||
color: var(#{$fore-color-var});
|
||||
color: var(#{$input-fore-color-var});
|
||||
opacity: 0.54;
|
||||
}
|
||||
// Definitions for the button and button-like elements.
|
||||
|
|
|
|||
Loading…
Reference in a new issue