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:
@@ -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.
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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.
|
||||
|
55
src/mini/_input_control_mixins.scss
Normal file
55
src/mini/_input_control_mixins.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
@@ -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.
|
||||
|
Reference in New Issue
Block a user