mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-01 19:40:35 +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 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.
|
||||||
|
@@ -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.
|
||||||
|
@@ -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.
|
||||||
|
@@ -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
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`).
|
$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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user