1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-01 03:20:30 +02:00

Housekeeping for input control module

Split file into mixins, moved variables, updated hidden flags and cleaned up flavor files.
This commit is contained in:
Angelos Chalaris
2017-03-30 14:27:22 +03:00
parent 58b8cf981a
commit 94a912b768
6 changed files with 314 additions and 319 deletions

View File

@@ -896,3 +896,7 @@
- Updated flavor files, dealing with indentation and readability.
- Updated `navigation` by moving variable definitions and defaults. Added **hidden flag** `$header-colorize-svgs` for a hacky fix that was there before (just in case).
- Updated flavor files, made most multiline comments up to `navigation` into single line comments in order to make the flavor files shorter while maintining readability.
- Added an extra **hidden flag** in `navigation` under `$include-nav-styles` to make sure that `nav` elements can be removed from flavors (possibly not present in the `barebones` flavor).
- Updated `input_control`, splitting into main file and mixins file. Added **hidden flag** `$hide-check-and-radio` and standardized existing one (`$input-high-specificity-selectors`).
- Cleanup and housekeeping for readability in flavor files for updated `input_control`.
- *TODO* Make class naming rules more consistent in module defaults - meaning add all class naming defaults to the very top of all modules, saving time and space when simplified flavors kick in.

View File

@@ -216,8 +216,7 @@ $legend-fore-color: $form-fore-color; // Text color for legend
$legend-padding: 2px 4px; // Padding for legend
$label-padding: 4px; // Padding for label
$input-group-name: 'input-group'; // Class for input groups
$include-fluid-input-group: true; // Should fluid input grooups be
// included? (`true`/`false`) [1]
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
$input-group-fluid-name:'fluid'; // Class name for fluid input groups
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
$input-back-color: #fafafa; // Background for input
@@ -225,7 +224,7 @@ $input-fore-color: $fore-color; // Text color for input
$input-border-style: 1px solid #bdbdbd; // Border style for input
$input-border-radius: 1px; // Border radius for input
$input-margin: 2px; // Margin for input
$input-padding: 8px 12px; // padding for input
$input-padding: 8px 12px; // Padding for input
$input-focus-border-color: #0288d1; // Border color for focused input
$input-invalid-border-color: #d32f2f; // Border color for invalid input
$input-disabled-opacity: 0.75; // Opacity for disabled input
@@ -234,8 +233,7 @@ $input-readonly-border-color: #bdbdbd; // Border color for readonly inp
$input-placeholder-fore-color:#616161; // Text color for input placeholder
$button-back-color: #bdbdbd; // Back color for button elements
$button-back-opacity: 0.65; // Background opacity for button elements
$button-hover-back-opacity: 0.8; // Background opacity for button elements
// on hover or focus
$button-hover-back-opacity: 0.8; // Background opacity for button elements on hover or focus
$button-fore-color: $fore-color; // Text color for button elements
$button-border-style: 0; // Border style for button elements
$button-border-radius: 2px; // Border radius for button elements
@@ -251,32 +249,26 @@ $button-group-margin: $button-margin; // Margin for button groups
$button-group-box-shadow: // Box shadow for button groups
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
$hide-file-inputs: true; // Should a style be added that makes all
// <input>s of type `file` hidden?
// (`true`/`false`) [2]
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [2]
$button-variant1-name: 'primary'; // Class name for button variant 1
$button-variant1-back-color: #0277bd; // Background color for button variant 1
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
$button-variant1-hover-back-opacity: // Background opacity for button variant 1
1; // on hover or focus
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
$button-variant1-fore-color: #fafafa; // Text color for button variant 1
$button-variant2-name: 'secondary';// Class name for button variant 2
$button-variant2-back-color: #c62828; // Background color for button variant 2
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
$button-variant2-hover-back-opacity: // Background opacity for button variant 2
1; // on hover or focus
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
$button-variant2-fore-color: #fafafa; // Text color for button variant 2
$button-variant3-name: 'tertiary'; // Class name for button variant 3
$button-variant3-back-color: #689f38; // Background color for button variant 3
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
$button-variant3-hover-back-opacity: // Background opacity for button variant 3
1; // on hover or focus
$button-variant3-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
$button-variant3-fore-color: #fafafa; // Text color for button variant 3
$button-variant4-name: 'inverse'; // Class name for button variant 4
$button-variant4-back-color: $fore-color;// Background color for button variant 4
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
$button-variant4-hover-back-opacity: // Background opacity for button variant 4
0.9; // on hover or focus
$button-variant4-hover-back-opacity: 0.9; // Background opacity for button variant 4 on hover or focus
$button-variant4-fore-color: #fafafa; // Text color for button variant 4
$button-style1-name: 'small'; // Class name for button style 1
$button-style1-border-style: 0; // Border style for button style 1

View File

@@ -213,8 +213,7 @@ $legend-fore-color: $form-fore-color; // Text color for legend
$legend-padding: 2px 4px; // Padding for legend
$label-padding: 6px; // Padding for label
$input-group-name: 'input-group'; // Class for input groups
$include-fluid-input-group: true; // Should fluid input grooups be
// included? (`true`/`false`) [1]
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
$input-back-color: #f2edff; // Background for input
@@ -222,7 +221,7 @@ $input-fore-color: $fore-color; // Text color for input
$input-border-style: 1px solid #a9a2ba; // Border style for input
$input-border-radius: 2px; // Border radius for input
$input-margin: 2px; // Margin for input
$input-padding: 8px 12px; // padding for input
$input-padding: 8px 12px; // Padding for input
$input-focus-border-color: #6979c6; // Border color for focused input
$input-invalid-border-color: #d2405f; // Border color for invalid input
$input-disabled-opacity: 0.8; // Opacity for disabled input
@@ -231,8 +230,7 @@ $input-readonly-border-color: #a9a2ba; // Border color for readonly inp
$input-placeholder-fore-color:#493e4b; // Text color for input placeholder
$button-back-color: #d3cae8; // Back color for button elements
$button-back-opacity: 1; // Background opacity for button elements
$button-hover-back-opacity: 0.75; // Background opacity for button elements
// on hover or focus
$button-hover-back-opacity: 0.75; // Background opacity for button elements on hover or focus
$button-fore-color: $fore-color; // Text color for button elements
$button-border-style: 1px solid #a9a2ba; // Border style for button elements
$button-border-radius: 3px; // Border radius for button elements
@@ -248,32 +246,26 @@ $button-group-margin: $button-margin; // Margin for button groups
$button-group-box-shadow: // Box shadow for button groups
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$button-group-mobile-breakpoint: 767px; // Breakpoint for button group mobile view
$hide-file-inputs: true; // Should a style be added that makes all
// <input>s of type `file` hidden?
// (`true`/`false`) [1]
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [1]
$button-variant1-name: 'primary'; // Class name for button variant 1
$button-variant1-back-color: #6979c6; // Background color for button variant 1
$button-variant1-back-opacity: 1; // Background opacity for button variant 1
$button-variant1-hover-back-opacity: // Background opacity for button variant 1
0.75; // on hover or focus
$button-variant1-hover-back-opacity: 0.75; // Background opacity for button variant 1 on hover or focus
$button-variant1-fore-color: #fffddc; // Text color for button variant 1
$button-variant2-name: 'secondary'; // Class name for button variant 2
$button-variant2-back-color: #d2405f; // Background color for button variant 2
$button-variant2-back-opacity: 1; // Background opacity for button variant 2
$button-variant2-hover-back-opacity: // Background opacity for button variant 2
0.75; // on hover or focus
$button-variant2-hover-back-opacity: 0.75; // Background opacity for button variant 2 on hover or focus
$button-variant2-fore-color: #fffddc; // Text color for button variant 2
$button-variant3-name: 'tertiary'; // Class name for button variant 3
$button-variant3-back-color: #2b866d; // Background color for button variant 3
$button-variant3-back-opacity: 1; // Background opacity for button variant 3
$button-variant3-hover-back-opacity: // Background opacity for button variant 3
0.75; // on hover or focus
$button-variant3-hover-back-opacity: 0.75; // Background opacity for button variant 3 on hover or focus
$button-variant3-fore-color: #fffddc; // Text color for button variant 3
$button-variant4-name: 'inverse'; // Class name for button variant 4
$button-variant4-back-color: #331e36; // Background color for button variant 4
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
$button-variant4-hover-back-opacity: // Background opacity for button variant 4
0.75; // on hover or focus
$button-variant4-hover-back-opacity: 0.75; // Background opacity for button variant 4 on hover or focus
$button-variant4-fore-color: #fffddc; // Text color for button variant 4
$button-style1-name: 'small'; // Class name for button style 1
$button-style1-border-style: 0; // Border style for button style 1

View File

@@ -1,7 +1,16 @@
/*
Definitions for forms and input elements.
*/
// Check the `_input_control_mixins.scss` file to find this module's mixins.
@import 'input_control_mixins';
// Different elements are styled based on the same set of rules.
$include-fluid-input-group: true !default; // Should fluid input groups be included? (`true`/`false`)
// The below option will use the legacy high specificity selectors for <input> element styling instead
// of the less specific, yet less complicated and less bloated input selector. This only applies to
// the pseudo-classes and states of the <input> controls and not the default styling of them.
$input-high-specificity-selectors: false !default; // [Hidden flag] Use legacy selectors for <input> element styling (`true`/`false`).
$hide-file-inputs: true !default; // Should `file` <input> elements be hidden? (`true`/`false`)
$hide-check-and-radio: true !default; // [Hidden flag] Should checkboxes and radios be hidden? (`true`/`false`)
// Base form styling.
form {
@if $form-back-color != $back-color {
@@ -60,7 +69,6 @@ legend {
padding: $label-padding; // Padding is all that seems to be needed for now, but more stuff could be added later.
}
}
$include-fluid-input-group: true !default; // Should fluid input groups be included?
// Input group base naming.
.#{$input-group-name} {
display: inline-block;
@@ -122,10 +130,6 @@ textarea {
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// The belo option will use the legacy high specificity selectors for <input> element styling instead
// of the less specific, yet less complicated and less bloated input selector. This only applies to
// the pseudo-classes and states of the <input> controls and not the default styling of them.
$input-high-specificity-selectors: false !default; // Hidden option: `false` by default!
// Common textual input styling.
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], textarea, select {
@@ -176,16 +180,13 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
border-color: $input-invalid-border-color;
box-shadow: none;
}
//&:focus:invalid:focus {
// border-color: brown;
//}
&[readonly]{
background: $input-readonly-back-color;
border-color: $input-readonly-border-color;
}
}
}
// Placeholder styling.
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
::-webkit-input-placeholder {
opacity: 1;
color: $input-placeholder-fore-color;
@@ -252,7 +253,6 @@ a[role="button"], label[role="button"], [role="button"] {
}
}
// Styling for file inputs
$hide-file-inputs: true !default;
@if $hide-file-inputs {
input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible.
border: 0;
@@ -337,62 +337,10 @@ $hide-file-inputs: true !default;
}
}
}
// Mixin for alternate buttons (button color variants).
// Variables:
// - $button-alt-name : The name of the class used for the alternate button.
// - $button-alt-back-color : The background color of the alternate button.
// - $button-alt-back-opacity : Opacity of the background color of the alternate button.
// - $button-alt-hover-back-opacity : Opacity of the background color of the alternate button on hover.
// - $button-alt-fore-color : (Optional) The text color of the alternate button. Defaults to the text color of the button.
// Notes:
// Due to something like `.button.secondary` being a higher specificity than `a.button` or `a`, no extra rules are
// required for such elements. However rules for the normal button elements are applied in order to not require the
// base class for the button styles.
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
background: rgba($button-alt-back-color, $button-alt-back-opacity);
@if $button-alt-fore-color != $button-fore-color {
color: $button-alt-fore-color;
}
&:hover, &:active, &:focus {
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
}
}
}
// Mixin for alternate button styles (button style variants).
// Variables:
// - $button-alt-name : The name of the class used for the alternate button style.
// - $button-alt-border-style : The border style of the alternate button style.
// - $button-alt-border-radius : Border radius of the alternate button style.
// - $button-alt-padding : Padding of the alternate button style.
// - $button-alt-margin : Margin of the alternate button style.
// Notes:
// Due to something like `.button.small` being a higher specificity than `a.small` or `a`, no extra rules are
// required for such elements. However rules for the normal button elements are applied in order to not require the
// base class for the button styles.
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
$button-alt-padding, $button-alt-margin) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
@if $button-alt-border-style != $button-border-style {
border: $button-alt-border-style;
}
@if $button-alt-border-radius != $button-border-radius {
border-radius: $button-alt-border-radius;
}
@if $button-alt-padding != $button-padding {
padding: $button-alt-padding;
}
@if $button-alt-margin != $button-margin {
margin: $button-alt-margin;
}
}
}
// Definitions for checkboxes and radio button elements.
// Note: both elements are hidden by default and use labels to show their input state.
// Hide both input types - accessible (element is not visible, but screen readers read it normally).
@if $hide-check-and-radio { // If you want to make these two <input>s visible by default, turn this on.
[type="checkbox"], [type="radio"] {
height: 1px;
width: 1px;
@@ -403,6 +351,7 @@ $hide-file-inputs: true !default;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
}
// Use input-group to setup the style for labels.
.#{$input-group-name} {
// Label styling based on the specifics of the checkbox/radio variables.

View File

@@ -0,0 +1,55 @@
// Input_control module's mixin definitions are here. For the module itself
// check `_input_control.scss`.
// Mixin for alternate buttons (button color variants).
// Variables:
// - $button-alt-name : The name of the class used for the alternate button.
// - $button-alt-back-color : The background color of the alternate button.
// - $button-alt-back-opacity : Opacity of the background color of the alternate button.
// - $button-alt-hover-back-opacity : Opacity of the background color of the alternate button on hover.
// - $button-alt-fore-color : (Optional) The text color of the alternate button. Defaults to the text color of the button.
// Notes:
// Due to something like `.button.secondary` being a higher specificity than `a.button` or `a`, no extra rules are
// required for such elements. However rules for the normal button elements are applied in order to not require the
// base class for the button styles.
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
background: rgba($button-alt-back-color, $button-alt-back-opacity);
@if $button-alt-fore-color != $button-fore-color {
color: $button-alt-fore-color;
}
&:hover, &:active, &:focus {
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
}
}
}
// Mixin for alternate button styles (button style variants).
// Variables:
// - $button-alt-name : The name of the class used for the alternate button style.
// - $button-alt-border-style : The border style of the alternate button style.
// - $button-alt-border-radius : Border radius of the alternate button style.
// - $button-alt-padding : Padding of the alternate button style.
// - $button-alt-margin : Margin of the alternate button style.
// Notes:
// Due to something like `.button.small` being a higher specificity than `a.small` or `a`, no extra rules are
// required for such elements. However rules for the normal button elements are applied in order to not require the
// base class for the button styles.
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
$button-alt-padding, $button-alt-margin) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
@if $button-alt-border-style != $button-border-style {
border: $button-alt-border-style;
}
@if $button-alt-border-radius != $button-border-radius {
border-radius: $button-alt-border-radius;
}
@if $button-alt-padding != $button-padding {
padding: $button-alt-padding;
}
@if $button-alt-margin != $button-margin {
margin: $button-alt-margin;
}
}
}

View File

@@ -7,6 +7,7 @@ $header-logo-name: 'logo' !default; // Class name for <header>'s logo.
$header-colorize-svgs: true !default; // [Hidden flag] Colorizes SVGs in the <header> element's logo (`true`/`false`).
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included (`true`/`false`).
$include-footer-sticky: false !default; // Should the sticky class for <footer> elements be included (`true`/`false`).
$include-nav-styles: true !default; // [Hidden flag] Should <nav> elements by stylized? (`true`/`false`)
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
@@ -86,6 +87,7 @@ header {
}
}
// Navigation sidebar styling.
@if $include-nav-styles { // Unless you want unstylized <nav> elements, keep this flag on.
nav {
display: block; // Correct display for older versions of IE.
@if $nav-back-color != $back-color {
@@ -132,6 +134,7 @@ nav {
}
}
}
}
// Footer styling.
footer {
display: block; // Correct display for older versions of IE.