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 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 `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. - 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.

178
src/flavors/mini-default.scss
View File

@@ -198,105 +198,97 @@ $footer-sticky-name: 'sticky'; // Class name for sticky <footer> eleme
// of <footer> elements, using the value of $footer-sticky-name for the name of the class. // of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for forms and inputs // Variables for forms and inputs
$form-back-color: #eeeeee; // Background color for forms $form-back-color: #eeeeee; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms $form-fore-color: $fore-color; // Text color for forms
$form-border-style: 1px solid #bdbdbd; // Border style for forms $form-border-style: 1px solid #bdbdbd; // Border style for forms
$form-border-radius: 0; // Border radius for forms $form-border-radius: 0; // Border radius for forms
$form-margin: 8px; // Margin for forms $form-margin: 8px; // Margin for forms
$form-padding: 12px 10px 18px; // Padding for forms $form-padding: 12px 10px 18px; // Padding for forms
$form-box-shadow: // Box shadow for forms $form-box-shadow: // Box shadow for forms
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); 0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$fieldset-back-color: $form-back-color; // Background color for fieldset $fieldset-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: 1px solid #bdbdbd; // Border style for fieldset $fieldset-border-style: 1px solid #bdbdbd; // Border style for fieldset
$fieldset-border-radius: 2px; // Border radius for fieldset $fieldset-border-radius:2px; // Border radius for fieldset
$fieldset-margin: 2px; // Margin for fieldset $fieldset-margin: 2px; // Margin for fieldset
$fieldset-padding: 6px 8px 8px; // Padding for fieldset $fieldset-padding: 6px 8px 8px; // Padding for fieldset
$legend-font-weight: $bold-font-weight; // Font weight for legend $legend-font-weight: $bold-font-weight; // Font weight for legend
$legend-font-size: 0.925em; // Font size for legend $legend-font-size: 0.925em; // Font size for legend
$legend-fore-color: $form-fore-color; // Text color for legend $legend-fore-color: $form-fore-color; // Text color for legend
$legend-padding: 2px 4px; // Padding for legend $legend-padding: 2px 4px; // Padding for legend
$label-padding: 4px; // Padding for label $label-padding: 4px; // Padding for label
$input-group-name: 'input-group'; // Class for input groups $input-group-name: 'input-group'; // Class for input groups
$include-fluid-input-group: true; // Should fluid input grooups be $include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
// included? (`true`/`false`) [1] $input-group-fluid-name:'fluid'; // Class name for fluid input groups
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups $input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view $input-back-color: #fafafa; // Background for input
$input-back-color: #fafafa; // Background for input $input-fore-color: $fore-color; // Text color for input
$input-fore-color: $fore-color; // Text color for input $input-border-style: 1px solid #bdbdbd; // Border style for input
$input-border-style: 1px solid #bdbdbd; // Border style for input $input-border-radius: 1px; // Border radius for input
$input-border-radius: 1px; // Border radius for input $input-margin: 2px; // Margin 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-focus-border-color: #0288d1; // Border color for focused input $input-invalid-border-color: #d32f2f; // Border color for invalid input
$input-invalid-border-color: #d32f2f; // Border color for invalid input $input-disabled-opacity: 0.75; // Opacity for disabled input
$input-disabled-opacity: 0.75; // Opacity for disabled input $input-readonly-back-color: #e0e0e0; // Background color for readonly input
$input-readonly-back-color: #e0e0e0; // Background color for readonly input $input-readonly-border-color: #bdbdbd; // Border color for readonly input
$input-readonly-border-color: #bdbdbd; // Border color for readonly input $input-placeholder-fore-color:#616161; // Text color for input placeholder
$input-placeholder-fore-color: #616161; // Text color for input placeholder $button-back-color: #bdbdbd; // Back color for button elements
$button-back-color: #bdbdbd; // Back color for button elements $button-back-opacity: 0.65; // Background opacity 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 $button-fore-color: $fore-color; // Text color for button elements
// on hover or focus $button-border-style: 0; // Border style for button elements
$button-fore-color: $fore-color; // Text color for button elements $button-border-radius: 2px; // Border radius for button elements
$button-border-style: 0; // Border style for button elements
$button-border-radius: 2px; // Border radius for button elements
$button-padding: 8px 12px; // Padding for button elements $button-padding: 8px 12px; // Padding for button elements
$button-margin: 8px; // Margin for button elements $button-margin: 8px; // Margin for button elements
$button-box-shadow: // Box shadow for buttons $button-box-shadow: // Box shadow for buttons
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$button-disabled-opacity: 0.65; // Disabled button elements opacity $button-disabled-opacity: 0.65; // Disabled button elements opacity
$button-class-name: 'button'; // Class for custom button elements $button-class-name: 'button'; // Class for custom button elements
$button-group-name: 'button-group'; // Class for button groups $button-group-name: 'button-group'; // Class for button groups
$button-group-border-style: 1px solid #9e9e9e; // Border style for button groups $button-group-border-style: 1px solid #9e9e9e; // Border style for button groups
$button-group-margin: $button-margin; // Margin for button groups $button-group-margin: $button-margin; // Margin for button groups
$button-group-box-shadow: // Box shadow 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); 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 $button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
$hide-file-inputs: true; // Should a style be added that makes all $hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [2]
// <input>s of type `file` hidden? $button-variant1-name: 'primary'; // Class name for button variant 1
// (`true`/`false`) [2] $button-variant1-back-color: #0277bd; // Background color for button variant 1
$button-variant1-name: 'primary'; // Class name for button variant 1 $button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
$button-variant1-back-color: #0277bd; // Background color for button variant 1 $button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1 $button-variant1-fore-color: #fafafa; // Text color for button variant 1
$button-variant1-hover-back-opacity: // Background opacity for button variant 1 $button-variant2-name: 'secondary';// Class name for button variant 2
1; // on hover or focus $button-variant2-back-color: #c62828; // Background color for button variant 2
$button-variant1-fore-color: #fafafa; // Text color for button variant 1 $button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
$button-variant2-name: 'secondary'; // Class name for button variant 2 $button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
$button-variant2-back-color: #c62828; // Background color for button variant 2 $button-variant2-fore-color: #fafafa; // Text color for button variant 2
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2 $button-variant3-name: 'tertiary'; // Class name for button variant 3
$button-variant2-hover-back-opacity: // Background opacity for button variant 2 $button-variant3-back-color: #689f38; // Background color for button variant 3
1; // on hover or focus $button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
$button-variant2-fore-color: #fafafa; // Text color for button variant 2 $button-variant3-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
$button-variant3-name: 'tertiary'; // Class name for button variant 3 $button-variant3-fore-color: #fafafa; // Text color for button variant 3
$button-variant3-back-color: #689f38; // Background color for button variant 3 $button-variant4-name: 'inverse'; // Class name for button variant 4
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3 $button-variant4-back-color: $fore-color;// Background color for button variant 4
$button-variant3-hover-back-opacity: // Background opacity for button variant 3 $button-variant4-back-opacity: 1; // Background opacity for button variant 4
1; // on hover or focus $button-variant4-hover-back-opacity: 0.9; // Background opacity for button variant 4 on hover or focus
$button-variant3-fore-color: #fafafa; // Text color for button variant 3 $button-variant4-fore-color: #fafafa; // Text color for button variant 4
$button-variant4-name: 'inverse'; // Class name for button variant 4 $button-style1-name: 'small'; // Class name for button style 1
$button-variant4-back-color: $fore-color; // Background color for button variant 4 $button-style1-border-style: 0; // Border style for button style 1
$button-variant4-back-opacity: 1; // Background opacity for button variant 4 $button-style1-border-radius: 1px; // Border radius for button style 1
$button-variant4-hover-back-opacity: // Background opacity for button variant 4 $button-style1-padding: 4px 6px; // Padding for button style 1
0.9; // on hover or focus $button-style1-margin: 6px 8px; // Margin for button style 1
$button-variant4-fore-color: #fafafa; // Text color for button variant 4 $button-style2-name: 'large'; // Class name for button style 2
$button-style1-name: 'small'; // Class name for button style 1 $button-style2-border-style: 0; // Border style for button style 2
$button-style1-border-style: 0; // Border style for button style 1 $button-style2-border-radius: 4px; // Border radius for button style 2
$button-style1-border-radius: 1px; // Border radius for button style 1 $button-style2-padding: 12px 18px; // Padding for button style 2
$button-style1-padding: 4px 6px; // Padding for button style 1 $button-style2-margin: 10px 8px; // Margin for button style 2
$button-style1-margin: 6px 8px; // Margin for button style 1 $checkbox-size: 16px; // Size for checkbox/radio [3]
$button-style2-name: 'large'; // Class name for button style 2 $checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
$button-style2-border-style: 0; // Border style for button style 2 $checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
$button-style2-border-radius: 4px; // Border radius for button style 2 $checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
$button-style2-padding: 12px 18px; // Padding for button style 2 $checkbox-border-color: #bdbdbd; // Border color for checkbox/radio
$button-style2-margin: 10px 8px; // Margin for button style 2 $checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
$checkbox-size: 16px; // Size for checkbox/radio [3] $checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio $checkbox-bottom-spacing: 6px; // Bottom spacing for checkbox/radio
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
$checkbox-border-color: #bdbdbd; // Border color for checkbox/radio
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
$checkbox-bottom-spacing: 6px; // Bottom spacing for checkbox/radio
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
// Notes: // Notes:
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values // [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
// specified in the corresponding variables. // specified in the corresponding variables.

180
src/flavors/mini-sucroa.scss
View File

@@ -195,105 +195,97 @@ $footer-sticky-name: 'sticky'; // Class name for sticky <footer> eleme
// of <footer> elements, using the value of $footer-sticky-name for the name of the class. // of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for forms and inputs // Variables for forms and inputs
$form-back-color: #e8deff; // Background color for forms $form-back-color: #e8deff; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms $form-fore-color: $fore-color; // Text color for forms
$form-border-style: 1px solid #a9a2ba; // Border style for forms $form-border-style: 1px solid #a9a2ba; // Border style for forms
$form-border-radius: 2px; // Border radius for forms $form-border-radius: 2px; // Border radius for forms
$form-margin: 10px; // Margin for forms $form-margin: 10px; // Margin for forms
$form-padding: 14px 10px 20px; // Padding for forms $form-padding: 14px 10px 20px; // Padding for forms
$form-box-shadow: // Box shadow for forms $form-box-shadow: // Box shadow for forms
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); 0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$fieldset-back-color: $form-back-color; // Background color for fieldset $fieldset-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: 1px solid #a9a2ba; // Border style for fieldset $fieldset-border-style: 1px solid #a9a2ba; // Border style for fieldset
$fieldset-border-radius: 2px; // Border radius for fieldset $fieldset-border-radius: 2px; // Border radius for fieldset
$fieldset-margin: 2px; // Margin for fieldset $fieldset-margin: 2px; // Margin for fieldset
$fieldset-padding: 6px 8px 8px; // Padding for fieldset $fieldset-padding: 6px 8px 8px; // Padding for fieldset
$legend-font-weight: $bold-font-weight; // Font weight for legend $legend-font-weight: $bold-font-weight; // Font weight for legend
$legend-font-size: 0.925em; // Font size for legend $legend-font-size: 0.925em; // Font size for legend
$legend-fore-color: $form-fore-color; // Text color for legend $legend-fore-color: $form-fore-color; // Text color for legend
$legend-padding: 2px 4px; // Padding for legend $legend-padding: 2px 4px; // Padding for legend
$label-padding: 6px; // Padding for label $label-padding: 6px; // Padding for label
$input-group-name: 'input-group'; // Class for input groups $input-group-name: 'input-group'; // Class for input groups
$include-fluid-input-group: true; // Should fluid input grooups be $include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
// included? (`true`/`false`) [1] $input-group-fluid-name: 'fluid'; // Class name for fluid input groups
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups $input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view $input-back-color: #f2edff; // Background for input
$input-back-color: #f2edff; // Background for input $input-fore-color: $fore-color; // Text color for input
$input-fore-color: $fore-color; // Text color for input $input-border-style: 1px solid #a9a2ba; // Border style for input
$input-border-style: 1px solid #a9a2ba; // Border style for input
$input-border-radius: 2px; // Border radius for input $input-border-radius: 2px; // Border radius for input
$input-margin: 2px; // Margin 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-focus-border-color: #6979c6; // Border color for focused input
$input-invalid-border-color: #d2405f; // Border color for invalid input $input-invalid-border-color: #d2405f; // Border color for invalid input
$input-disabled-opacity: 0.8; // Opacity for disabled input $input-disabled-opacity: 0.8; // Opacity for disabled input
$input-readonly-back-color: #eae1ff; // Background color for readonly input $input-readonly-back-color: #eae1ff; // Background color for readonly input
$input-readonly-border-color: #a9a2ba; // Border color for readonly input $input-readonly-border-color: #a9a2ba; // Border color for readonly input
$input-placeholder-fore-color: #493e4b; // Text color for input placeholder $input-placeholder-fore-color:#493e4b; // Text color for input placeholder
$button-back-color: #d3cae8; // Back color for button elements $button-back-color: #d3cae8; // Back color for button elements
$button-back-opacity: 1; // Background opacity for button elements $button-back-opacity: 1; // Background opacity for button elements
$button-hover-back-opacity: 0.75; // Background opacity for button elements $button-hover-back-opacity: 0.75; // Background opacity for button elements on hover or focus
// on hover or focus $button-fore-color: $fore-color; // Text color for button elements
$button-fore-color: $fore-color; // Text color for button elements $button-border-style: 1px solid #a9a2ba; // Border style for button elements
$button-border-style: 1px solid #a9a2ba; // Border style for button elements $button-border-radius: 3px; // Border radius for button elements
$button-border-radius: 3px; // Border radius for button elements $button-padding: 8px 12px; // Padding for button elements
$button-padding: 8px 12px; // Padding for button elements $button-margin: 10px; // Margin for button elements
$button-margin: 10px; // Margin for button elements $button-box-shadow: // Box shadow for buttons
$button-box-shadow: // Box shadow for buttons
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$button-disabled-opacity: 0.75; // Disabled button elements opacity $button-disabled-opacity: 0.75; // Disabled button elements opacity
$button-class-name: 'button'; // Class for custom button elements $button-class-name: 'button'; // Class for custom button elements
$button-group-name: 'button-group'; // Class for button groups $button-group-name: 'button-group'; // Class for button groups
$button-group-border-style: 1px solid #a9a2ba; // Border style for button groups $button-group-border-style: 1px solid #a9a2ba; // Border style for button groups
$button-group-margin: $button-margin; // Margin for button groups $button-group-margin: $button-margin; // Margin for button groups
$button-group-box-shadow: // Box shadow 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); 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 $button-group-mobile-breakpoint: 767px; // Breakpoint for button group mobile view
$hide-file-inputs: true; // Should a style be added that makes all $hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [1]
// <input>s of type `file` hidden? $button-variant1-name: 'primary'; // Class name for button variant 1
// (`true`/`false`) [1] $button-variant1-back-color: #6979c6; // Background color for button variant 1
$button-variant1-name: 'primary'; // Class name for button variant 1 $button-variant1-back-opacity: 1; // Background opacity for button variant 1
$button-variant1-back-color: #6979c6; // Background color for button variant 1 $button-variant1-hover-back-opacity: 0.75; // Background opacity for button variant 1 on hover or focus
$button-variant1-back-opacity: 1; // Background opacity for button variant 1 $button-variant1-fore-color: #fffddc; // Text color for button variant 1
$button-variant1-hover-back-opacity: // Background opacity for button variant 1 $button-variant2-name: 'secondary'; // Class name for button variant 2
0.75; // on hover or focus $button-variant2-back-color: #d2405f; // Background color for button variant 2
$button-variant1-fore-color: #fffddc; // Text color for button variant 1 $button-variant2-back-opacity: 1; // Background opacity for button variant 2
$button-variant2-name: 'secondary'; // Class name for button variant 2 $button-variant2-hover-back-opacity: 0.75; // Background opacity for button variant 2 on hover or focus
$button-variant2-back-color: #d2405f; // Background color for button variant 2 $button-variant2-fore-color: #fffddc; // Text color for button variant 2
$button-variant2-back-opacity: 1; // Background opacity for button variant 2 $button-variant3-name: 'tertiary'; // Class name for button variant 3
$button-variant2-hover-back-opacity: // Background opacity for button variant 2 $button-variant3-back-color: #2b866d; // Background color for button variant 3
0.75; // on hover or focus $button-variant3-back-opacity: 1; // Background opacity for button variant 3
$button-variant2-fore-color: #fffddc; // Text color for button variant 2 $button-variant3-hover-back-opacity: 0.75; // Background opacity for button variant 3 on hover or focus
$button-variant3-name: 'tertiary'; // Class name for button variant 3 $button-variant3-fore-color: #fffddc; // Text color for button variant 3
$button-variant3-back-color: #2b866d; // Background color for button variant 3 $button-variant4-name: 'inverse'; // Class name for button variant 4
$button-variant3-back-opacity: 1; // Background opacity for button variant 3 $button-variant4-back-color: #331e36; // Background color for button variant 4
$button-variant3-hover-back-opacity: // Background opacity for button variant 3 $button-variant4-back-opacity: 1; // 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-variant3-fore-color: #fffddc; // Text color for button variant 3 $button-variant4-fore-color: #fffddc; // Text color for button variant 4
$button-variant4-name: 'inverse'; // Class name for button variant 4 $button-style1-name: 'small'; // Class name for button style 1
$button-variant4-back-color: #331e36; // Background color for button variant 4 $button-style1-border-style: 0; // Border style for button style 1
$button-variant4-back-opacity: 1; // Background opacity for button variant 4 $button-style1-border-radius: 2px; // Border radius for button style 1
$button-variant4-hover-back-opacity: // Background opacity for button variant 4 $button-style1-padding: 4px 6px; // Padding for button style 1
0.75; // on hover or focus $button-style1-margin: 6px 8px; // Margin for button style 1
$button-variant4-fore-color: #fffddc; // Text color for button variant 4 $button-style2-name: 'large'; // Class name for button style 2
$button-style1-name: 'small'; // Class name for button style 1 $button-style2-border-style: 0; // Border style for button style 2
$button-style1-border-style: 0; // Border style for button style 1 $button-style2-border-radius: 4px; // Border radius for button style 2
$button-style1-border-radius: 2px; // Border radius for button style 1 $button-style2-padding: 12px 18px; // Padding for button style 2
$button-style1-padding: 4px 6px; // Padding for button style 1 $button-style2-margin: 10px 8px; // Margin for button style 2
$button-style1-margin: 6px 8px; // Margin for button style 1 $checkbox-size: 16px; // Size for checkbox/radio [2]
$button-style2-name: 'large'; // Class name for button style 2 $checkbox-back-color: $input-back-color;// Background clor for checkbox/radio
$button-style2-border-style: 0; // Border style for button style 2 $checkbox-fore-color: $input-fore-color;// Text/mark color for checkbox/radio
$button-style2-border-radius: 4px; // Border radius for button style 2 $checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
$button-style2-padding: 12px 18px; // Padding for button style 2 $checkbox-border-color: #a9a2ba; // Border color for checkbox/radio
$button-style2-margin: 10px 8px; // Margin for button style 2 $checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
$checkbox-size: 16px; // Size for checkbox/radio [2] $checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio $checkbox-bottom-spacing: 3px; // Bottom spacing for checkbox/radio
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
$checkbox-border-color: #a9a2ba; // Border color for checkbox/radio
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
$checkbox-bottom-spacing: 3px; // Bottom spacing for checkbox/radio
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
// Notes: // Notes:
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values // [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
// specified in the corresponding variables. // specified in the corresponding variables.

131
src/mini/_input_control.scss
View File

@@ -1,7 +1,16 @@
/* /*
Definitions for forms and input elements. 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. // 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. // Base form styling.
form { form {
@if $form-back-color != $back-color { @if $form-back-color != $back-color {
@@ -35,7 +44,7 @@ fieldset {
border: $fieldset-border-style; border: $fieldset-border-style;
border-radius: $fieldset-border-radius; border-radius: $fieldset-border-radius;
margin: $fieldset-margin; margin: $fieldset-margin;
padding: $fieldset-padding; padding: $fieldset-padding;
} }
// Legend styling. // Legend styling.
legend { legend {
@@ -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. 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 base naming.
.#{$input-group-name} { .#{$input-group-name} {
display: inline-block; display: inline-block;
@@ -71,21 +79,21 @@ $include-fluid-input-group: true !default; // Should fluid input groups be i
display: -webkit-box; display: -webkit-box;
-webkit-box-pack: justify; -webkit-box-pack: justify;
// New syntax // New syntax
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
& > input { & > input {
// Old syntax // Old syntax
-webkit-box-flex: 1; -webkit-box-flex: 1;
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
} }
@@ -98,9 +106,9 @@ $include-fluid-input-group: true !default; // Should fluid input groups be i
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
// New syntax // New syntax
-webkit-align-items: stretch; -webkit-align-items: stretch;
align-items: stretch; align-items: stretch;
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
} }
} }
@@ -122,10 +130,6 @@ textarea {
[type="search"]::-webkit-search-decoration { [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -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. // Common textual input styling.
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], textarea, select { [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; border-color: $input-invalid-border-color;
box-shadow: none; box-shadow: none;
} }
//&:focus:invalid:focus {
// border-color: brown;
//}
&[readonly]{ &[readonly]{
background: $input-readonly-back-color; background: $input-readonly-back-color;
border-color: $input-readonly-border-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 { ::-webkit-input-placeholder {
opacity: 1; opacity: 1;
color: $input-placeholder-fore-color; color: $input-placeholder-fore-color;
@@ -211,8 +212,8 @@ button, html [type="button"], [type="reset"], [type="submit"] {
} }
// Other fixes. // Other fixes.
button { button {
overflow: visible; // Show the overflow in IE. overflow: visible; // Show the overflow in IE.
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE. text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
} }
// Default styling // Default styling
button, [type="button"], [type="submit"], [type="reset"], button, [type="button"], [type="submit"], [type="reset"],
@@ -238,7 +239,7 @@ a[role="button"], label[role="button"], [role="button"] {
text-decoration: none; text-decoration: none;
} }
-webkit-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
cursor: pointer; cursor: pointer;
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: rgba($button-back-color, $button-hover-back-opacity); background: rgba($button-back-color, $button-hover-back-opacity);
@@ -252,7 +253,6 @@ a[role="button"], label[role="button"], [role="button"] {
} }
} }
// Styling for file inputs // Styling for file inputs
$hide-file-inputs: true !default;
@if $hide-file-inputs { @if $hide-file-inputs {
input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible. input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible.
border: 0; border: 0;
@@ -264,13 +264,13 @@ $hide-file-inputs: true !default;
position: absolute; position: absolute;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%); -webkit-clip-path: inset(100%);
clip-path: inset(100%); clip-path: inset(100%);
} }
} }
@else { @else {
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; // Correct inability to style in iOS and Safari. -webkit-appearance: button; // Correct inability to style in iOS and Safari.
font: inherit; // Change font propery to `inherit` in Safari. font: inherit; // Change font propery to `inherit` in Safari.
} }
} }
// Button group definition // Button group definition
@@ -278,8 +278,8 @@ $hide-file-inputs: true !default;
// Old syntax // Old syntax
display: -webkit-box; display: -webkit-box;
// New syntax // New syntax
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
border: $button-group-border-style; border: $button-group-border-style;
@if $button-border-radius != 0 { @if $button-border-radius != 0 {
border-radius: $button-border-radius; border-radius: $button-border-radius;
@@ -298,9 +298,9 @@ $hide-file-inputs: true !default;
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
text-align: center; text-align: center;
border: 0; border: 0;
@if $button-border-radius != 0 { @if $button-border-radius != 0 {
@@ -324,7 +324,7 @@ $hide-file-inputs: true !default;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
// New syntax // New syntax
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
@if $button-group-border-style !=0 { @if $button-group-border-style !=0 {
button, [type="button"], [type="submit"], [type="reset"], button, [type="button"], [type="submit"], [type="reset"],
.#{$button-class-name}, [role="button"] { .#{$button-class-name}, [role="button"] {
@@ -337,71 +337,20 @@ $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. // Definitions for checkboxes and radio button elements.
// Note: both elements are hidden by default and use labels to show their input state. // 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). // Hide both input types - accessible (element is not visible, but screen readers read it normally).
[type="checkbox"], [type="radio"] { @if $hide-check-and-radio { // If you want to make these two <input>s visible by default, turn this on.
height: 1px; [type="checkbox"], [type="radio"] {
width: 1px; height: 1px;
margin: -1px; width: 1px;
overflow: hidden; margin: -1px;
position: absolute; overflow: hidden;
clip: rect(0 0 0 0); position: absolute;
-webkit-clip-path: inset(100%); clip: rect(0 0 0 0);
clip-path: inset(100%); -webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
} }
// Use input-group to setup the style for labels. // Use input-group to setup the style for labels.
.#{$input-group-name} { .#{$input-group-name} {

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;
}
}
}

85
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`). $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-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-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-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add. $nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories. $nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
@@ -86,47 +87,49 @@ header {
} }
} }
// Navigation sidebar styling. // Navigation sidebar styling.
nav { @if $include-nav-styles { // Unless you want unstylized <nav> elements, keep this flag on.
display: block; // Correct display for older versions of IE. nav {
@if $nav-back-color != $back-color { display: block; // Correct display for older versions of IE.
background: $nav-back-color; @if $nav-back-color != $back-color {
} background: $nav-back-color;
@if $nav-fore-color != $fore-color { }
color: $nav-fore-color; @if $nav-fore-color != $fore-color {
} color: $nav-fore-color;
@if $nav-border-style != 0 { }
border: $nav-border-style; @if $nav-border-style != 0 {
} border: $nav-border-style;
@if $nav-border-radius != 0 { }
border-radius: $nav-border-radius; @if $nav-border-radius != 0 {
} border-radius: $nav-border-radius;
@if $nav-margin != 0 { }
margin: $nav-margin; @if $nav-margin != 0 {
} margin: $nav-margin;
@if $nav-padding != 0 { }
padding: $nav-padding; @if $nav-padding != 0 {
} padding: $nav-padding;
@if $nav-box-shadow != none { }
box-shadow: $nav-box-shadow; @if $nav-box-shadow != none {
} box-shadow: $nav-box-shadow;
a, a:visited { }
display: block; a, a:visited {
color: $nav-link-fore-color; // Apply regardless to de-stylize visited links. display: block;
} color: $nav-link-fore-color; // Apply regardless to de-stylize visited links.
// Subcategories in navigation. }
@for $i from 1 through $nav-sublink-depth { // Subcategories in navigation.
.#{$nav-sublink-prefix}-#{$i} { @for $i from 1 through $nav-sublink-depth {
padding-left: $i * $nav-sublink-padding-left; .#{$nav-sublink-prefix}-#{$i} {
position: relative; padding-left: $i * $nav-sublink-padding-left;
@if $nav-include-sublink-bar { position: relative;
&:before { @if $nav-include-sublink-bar {
position: absolute; &:before {
left: $nav-sublink-bar-left-position; position: absolute;
top: -$nav-sublink-bar-width; left: $nav-sublink-bar-left-position;
content: ''; top: -$nav-sublink-bar-width;
height: 100%; content: '';
border: $nav-sublink-bar-width solid $nav-sublink-bar-color; height: 100%;
border-left: 0; border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
border-left: 0;
}
} }
} }
} }