From 44f09e5880d92426bfb825632de9e5fb6d579ba8 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 12 Nov 2017 15:23:18 +0200 Subject: [PATCH] Updated input_control Additional customization added via CSS variables. --- docs/v3/DEVLOG.md | 4 ++- docs/v3_dev/src/index.css | 25 +++++++++++------ src/mini/_input_control.scss | 53 +++++++++++++++++++----------------- 3 files changed, 47 insertions(+), 35 deletions(-) diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 5ecd3cd..e005ff3 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -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. diff --git a/docs/v3_dev/src/index.css b/docs/v3_dev/src/index.css index 8be66a7..6d17dde 100644 --- a/docs/v3_dev/src/index.css +++ b/docs/v3_dev/src/index.css @@ -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; } diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss index f867d42..805b2d3 100644 --- a/src/mini/_input_control.scss +++ b/src/mini/_input_control.scss @@ -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.