mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-05 05:17:24 +02:00
Code Issues Releases Wiki Activity

Housekeeping for input control module

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/v2/DEVLOG.md
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.

24
src/flavors/mini-default.scss
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

24
src/flavors/mini-sucroa.scss
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

75
src/mini/_input_control.scss
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.

55
src/mini/_input_control_mixins.scss Normal file
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;
}
}
}

3
src/mini/_navigation.scss
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.