mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Housekeeping for input control module
Split file into mixins, moved variables, updated hidden flags and cleaned up flavor files.
This commit is contained in:
Angelos Chalaris
parent
58b8cf981a
commit
94a912b768
@ -896,3 +896,7 @@
|
||||
- Updated flavor files, dealing with indentation and readability.
|
||||
- Updated `navigation` by moving variable definitions and defaults. Added **hidden flag** `$header-colorize-svgs` for a hacky fix that was there before (just in case).
|
||||
- Updated flavor files, made most multiline comments up to `navigation` into single line comments in order to make the flavor files shorter while maintining readability.
|
||||
- Added an extra **hidden flag** in `navigation` under `$include-nav-styles` to make sure that `nav` elements can be removed from flavors (possibly not present in the `barebones` flavor).
|
||||
- Updated `input_control`, splitting into main file and mixins file. Added **hidden flag** `$hide-check-and-radio` and standardized existing one (`$input-high-specificity-selectors`).
|
||||
- Cleanup and housekeeping for readability in flavor files for updated `input_control`.
|
||||
- *TODO* Make class naming rules more consistent in module defaults - meaning add all class naming defaults to the very top of all modules, saving time and space when simplified flavors kick in.
|
||||
|
||||
@ -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.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: 1px solid #bdbdbd; // Border style for forms
|
||||
$form-border-radius: 0; // Border radius for forms
|
||||
$form-margin: 8px; // Margin for forms
|
||||
$form-padding: 12px 10px 18px; // Padding for forms
|
||||
$form-box-shadow: // Box shadow for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: 1px solid #bdbdbd; // Border style for forms
|
||||
$form-border-radius: 0; // Border radius for forms
|
||||
$form-margin: 8px; // Margin for forms
|
||||
$form-padding: 12px 10px 18px; // Padding 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);
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #bdbdbd; // Border style for fieldset
|
||||
$fieldset-border-radius: 2px; // Border radius for fieldset
|
||||
$fieldset-margin: 2px; // Margin for fieldset
|
||||
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
$legend-font-size: 0.925em; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #bdbdbd; // Border style for fieldset
|
||||
$fieldset-border-radius:2px; // Border radius for fieldset
|
||||
$fieldset-margin: 2px; // Margin for fieldset
|
||||
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
$legend-font-size: 0.925em; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 2px 4px; // Padding for legend
|
||||
$label-padding: 4px; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: true; // Should fluid input grooups be
|
||||
// included? (`true`/`false`) [1]
|
||||
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #fafafa; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: 1px solid #bdbdbd; // Border style for input
|
||||
$input-border-radius: 1px; // Border radius for input
|
||||
$input-margin: 2px; // Margin for input
|
||||
$input-padding: 8px 12px; // padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
$input-invalid-border-color: #d32f2f; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
|
||||
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
|
||||
$input-placeholder-fore-color: #616161; // Text color for input placeholder
|
||||
$button-back-color: #bdbdbd; // Back color for button elements
|
||||
$button-back-opacity: 0.65; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 0.8; // Background opacity for button elements
|
||||
// on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2px; // Border radius for button elements
|
||||
$label-padding: 4px; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$input-group-fluid-name:'fluid'; // Class name for fluid input groups
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #fafafa; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: 1px solid #bdbdbd; // Border style for input
|
||||
$input-border-radius: 1px; // Border radius for input
|
||||
$input-margin: 2px; // Margin for input
|
||||
$input-padding: 8px 12px; // Padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
$input-invalid-border-color: #d32f2f; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
|
||||
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#616161; // Text color for input placeholder
|
||||
$button-back-color: #bdbdbd; // Back color for button elements
|
||||
$button-back-opacity: 0.65; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 0.8; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2px; // Border radius for button elements
|
||||
$button-padding: 8px 12px; // Padding for button elements
|
||||
$button-margin: 8px; // Margin for button elements
|
||||
$button-box-shadow: // Box shadow for buttons
|
||||
$button-margin: 8px; // Margin for button elements
|
||||
$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);
|
||||
$button-disabled-opacity: 0.65; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class 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-disabled-opacity: 0.65; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class 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-box-shadow: // Box shadow for button groups
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all
|
||||
// <input>s of type `file` hidden?
|
||||
// (`true`/`false`) [2]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #0277bd; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: // Background opacity for button variant 1
|
||||
1; // on hover or focus
|
||||
$button-variant1-fore-color: #fafafa; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary'; // Class name for button variant 2
|
||||
$button-variant2-back-color: #c62828; // Background color for button variant 2
|
||||
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
|
||||
$button-variant2-hover-back-opacity: // Background opacity for button variant 2
|
||||
1; // on hover or focus
|
||||
$button-variant2-fore-color: #fafafa; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary'; // Class name for button variant 3
|
||||
$button-variant3-back-color: #689f38; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: // Background opacity for button variant 3
|
||||
1; // on hover or focus
|
||||
$button-variant3-fore-color: #fafafa; // Text color for button variant 3
|
||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||
$button-variant4-back-color: $fore-color; // Background color for button variant 4
|
||||
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
||||
$button-variant4-hover-back-opacity: // Background opacity for button variant 4
|
||||
0.9; // on hover or focus
|
||||
$button-variant4-fore-color: #fafafa; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 1px; // Border radius for button style 1
|
||||
$button-style1-padding: 4px 6px; // Padding for button style 1
|
||||
$button-style1-margin: 6px 8px; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-padding: 12px 18px; // Padding for button style 2
|
||||
$button-style2-margin: 10px 8px; // Margin for button style 2
|
||||
$checkbox-size: 16px; // Size for checkbox/radio [3]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for 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
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [2]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #0277bd; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
|
||||
$button-variant1-fore-color: #fafafa; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary';// Class name for button variant 2
|
||||
$button-variant2-back-color: #c62828; // Background color for button variant 2
|
||||
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
|
||||
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
|
||||
$button-variant2-fore-color: #fafafa; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary'; // Class name for button variant 3
|
||||
$button-variant3-back-color: #689f38; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
|
||||
$button-variant3-fore-color: #fafafa; // Text color for button variant 3
|
||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||
$button-variant4-back-color: $fore-color;// Background color for button variant 4
|
||||
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
||||
$button-variant4-hover-back-opacity: 0.9; // Background opacity for button variant 4 on hover or focus
|
||||
$button-variant4-fore-color: #fafafa; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 1px; // Border radius for button style 1
|
||||
$button-style1-padding: 4px 6px; // Padding for button style 1
|
||||
$button-style1-margin: 6px 8px; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-padding: 12px 18px; // Padding for button style 2
|
||||
$button-style2-margin: 10px 8px; // Margin for button style 2
|
||||
$checkbox-size: 16px; // Size for checkbox/radio [3]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for 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:
|
||||
// [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.
|
||||
|
||||
@ -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.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #e8deff; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: 1px solid #a9a2ba; // Border style for forms
|
||||
$form-border-radius: 2px; // Border radius for forms
|
||||
$form-margin: 10px; // Margin for forms
|
||||
$form-padding: 14px 10px 20px; // Padding for forms
|
||||
$form-box-shadow: // Box shadow for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: 1px solid #a9a2ba; // Border style for forms
|
||||
$form-border-radius: 2px; // Border radius for forms
|
||||
$form-margin: 10px; // Margin for forms
|
||||
$form-padding: 14px 10px 20px; // Padding 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);
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #a9a2ba; // Border style for fieldset
|
||||
$fieldset-border-radius: 2px; // Border radius for fieldset
|
||||
$fieldset-margin: 2px; // Margin for fieldset
|
||||
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
$legend-font-size: 0.925em; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 2px 4px; // Padding for legend
|
||||
$label-padding: 6px; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: true; // Should fluid input grooups be
|
||||
// included? (`true`/`false`) [1]
|
||||
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #f2edff; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: 1px solid #a9a2ba; // Border style for input
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #a9a2ba; // Border style for fieldset
|
||||
$fieldset-border-radius: 2px; // Border radius for fieldset
|
||||
$fieldset-margin: 2px; // Margin for fieldset
|
||||
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
$legend-font-size: 0.925em; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 2px 4px; // Padding for legend
|
||||
$label-padding: 6px; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #f2edff; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: 1px solid #a9a2ba; // Border style for input
|
||||
$input-border-radius: 2px; // Border radius for input
|
||||
$input-margin: 2px; // Margin for input
|
||||
$input-padding: 8px 12px; // padding for input
|
||||
$input-focus-border-color: #6979c6; // Border color for focused input
|
||||
$input-invalid-border-color: #d2405f; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.8; // Opacity for disabled input
|
||||
$input-readonly-back-color: #eae1ff; // Background color for readonly input
|
||||
$input-readonly-border-color: #a9a2ba; // Border color for readonly input
|
||||
$input-placeholder-fore-color: #493e4b; // Text color for input placeholder
|
||||
$button-back-color: #d3cae8; // Back color for button elements
|
||||
$button-back-opacity: 1; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 0.75; // Background opacity for button elements
|
||||
// on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 1px solid #a9a2ba; // Border style for button elements
|
||||
$button-border-radius: 3px; // Border radius for button elements
|
||||
$button-padding: 8px 12px; // Padding for button elements
|
||||
$button-margin: 10px; // Margin for button elements
|
||||
$button-box-shadow: // Box shadow for buttons
|
||||
$input-margin: 2px; // Margin for input
|
||||
$input-padding: 8px 12px; // Padding for input
|
||||
$input-focus-border-color: #6979c6; // Border color for focused input
|
||||
$input-invalid-border-color: #d2405f; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.8; // Opacity for disabled input
|
||||
$input-readonly-back-color: #eae1ff; // Background color for readonly input
|
||||
$input-readonly-border-color: #a9a2ba; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#493e4b; // Text color for input placeholder
|
||||
$button-back-color: #d3cae8; // Back color for button elements
|
||||
$button-back-opacity: 1; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 0.75; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 1px solid #a9a2ba; // Border style for button elements
|
||||
$button-border-radius: 3px; // Border radius for button elements
|
||||
$button-padding: 8px 12px; // Padding for button elements
|
||||
$button-margin: 10px; // Margin for button elements
|
||||
$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);
|
||||
$button-disabled-opacity: 0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class 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-disabled-opacity: 0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class 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-box-shadow: // Box shadow for button groups
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all
|
||||
// <input>s of type `file` hidden?
|
||||
// (`true`/`false`) [1]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #6979c6; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 1; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: // Background opacity for button variant 1
|
||||
0.75; // on hover or focus
|
||||
$button-variant1-fore-color: #fffddc; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary'; // Class name for button variant 2
|
||||
$button-variant2-back-color: #d2405f; // Background color for button variant 2
|
||||
$button-variant2-back-opacity: 1; // Background opacity for button variant 2
|
||||
$button-variant2-hover-back-opacity: // Background opacity for button variant 2
|
||||
0.75; // on hover or focus
|
||||
$button-variant2-fore-color: #fffddc; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary'; // Class name for button variant 3
|
||||
$button-variant3-back-color: #2b866d; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 1; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: // Background opacity for button variant 3
|
||||
0.75; // on hover or focus
|
||||
$button-variant3-fore-color: #fffddc; // Text color for button variant 3
|
||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||
$button-variant4-back-color: #331e36; // Background color for button variant 4
|
||||
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
||||
$button-variant4-hover-back-opacity: // Background opacity for button variant 4
|
||||
0.75; // on hover or focus
|
||||
$button-variant4-fore-color: #fffddc; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 2px; // Border radius for button style 1
|
||||
$button-style1-padding: 4px 6px; // Padding for button style 1
|
||||
$button-style1-margin: 6px 8px; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-padding: 12px 18px; // Padding for button style 2
|
||||
$button-style2-margin: 10px 8px; // Margin for button style 2
|
||||
$checkbox-size: 16px; // Size for checkbox/radio [2]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for 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
|
||||
$button-group-mobile-breakpoint: 767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [1]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #6979c6; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 1; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: 0.75; // Background opacity for button variant 1 on hover or focus
|
||||
$button-variant1-fore-color: #fffddc; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary'; // Class name for button variant 2
|
||||
$button-variant2-back-color: #d2405f; // Background color for button variant 2
|
||||
$button-variant2-back-opacity: 1; // Background opacity for button variant 2
|
||||
$button-variant2-hover-back-opacity: 0.75; // Background opacity for button variant 2 on hover or focus
|
||||
$button-variant2-fore-color: #fffddc; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary'; // Class name for button variant 3
|
||||
$button-variant3-back-color: #2b866d; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 1; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: 0.75; // Background opacity for button variant 3 on hover or focus
|
||||
$button-variant3-fore-color: #fffddc; // Text color for button variant 3
|
||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||
$button-variant4-back-color: #331e36; // Background color for button variant 4
|
||||
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
||||
$button-variant4-hover-back-opacity: 0.75; // Background opacity for button variant 4 on hover or focus
|
||||
$button-variant4-fore-color: #fffddc; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 2px; // Border radius for button style 1
|
||||
$button-style1-padding: 4px 6px; // Padding for button style 1
|
||||
$button-style1-margin: 6px 8px; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-padding: 12px 18px; // Padding for button style 2
|
||||
$button-style2-margin: 10px 8px; // Margin for button style 2
|
||||
$checkbox-size: 16px; // Size for checkbox/radio [2]
|
||||
$checkbox-back-color: $input-back-color;// Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color;// Text/mark color for 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:
|
||||
// [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.
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
// Check the `_input_control_mixins.scss` file to find this module's mixins.
|
||||
@import 'input_control_mixins';
|
||||
// Different elements are styled based on the same set of rules.
|
||||
$include-fluid-input-group: true !default; // Should fluid input groups be included? (`true`/`false`)
|
||||
// The below option will use the legacy high specificity selectors for <input> element styling instead
|
||||
// of the less specific, yet less complicated and less bloated input selector. This only applies to
|
||||
// the pseudo-classes and states of the <input> controls and not the default styling of them.
|
||||
$input-high-specificity-selectors: false !default; // [Hidden flag] Use legacy selectors for <input> element styling (`true`/`false`).
|
||||
$hide-file-inputs: true !default; // Should `file` <input> elements be hidden? (`true`/`false`)
|
||||
$hide-check-and-radio: true !default; // [Hidden flag] Should checkboxes and radios be hidden? (`true`/`false`)
|
||||
// Base form styling.
|
||||
form {
|
||||
@if $form-back-color != $back-color {
|
||||
@ -35,7 +44,7 @@ fieldset {
|
||||
border: $fieldset-border-style;
|
||||
border-radius: $fieldset-border-radius;
|
||||
margin: $fieldset-margin;
|
||||
padding: $fieldset-padding;
|
||||
padding: $fieldset-padding;
|
||||
}
|
||||
// Legend styling.
|
||||
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.
|
||||
}
|
||||
}
|
||||
$include-fluid-input-group: true !default; // Should fluid input groups be included?
|
||||
// Input group base naming.
|
||||
.#{$input-group-name} {
|
||||
display: inline-block;
|
||||
@ -71,21 +79,21 @@ $include-fluid-input-group: true !default; // Should fluid input groups be i
|
||||
display: -webkit-box;
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
& > input {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-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;
|
||||
// New syntax
|
||||
-webkit-align-items: stretch;
|
||||
align-items: stretch;
|
||||
align-items: stretch;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,10 +130,6 @@ textarea {
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// The belo option will use the legacy high specificity selectors for <input> element styling instead
|
||||
// of the less specific, yet less complicated and less bloated input selector. This only applies to
|
||||
// the pseudo-classes and states of the <input> controls and not the default styling of them.
|
||||
$input-high-specificity-selectors: false !default; // Hidden option: `false` by default!
|
||||
// Common textual input styling.
|
||||
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
|
||||
[type="password"], [type="url"], [type="tel"], textarea, select {
|
||||
@ -176,16 +180,13 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
||||
border-color: $input-invalid-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
//&:focus:invalid:focus {
|
||||
// border-color: brown;
|
||||
//}
|
||||
&[readonly]{
|
||||
background: $input-readonly-back-color;
|
||||
border-color: $input-readonly-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Placeholder styling.
|
||||
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: $input-placeholder-fore-color;
|
||||
@ -211,8 +212,8 @@ button, html [type="button"], [type="reset"], [type="submit"] {
|
||||
}
|
||||
// Other fixes.
|
||||
button {
|
||||
overflow: visible; // Show the overflow in IE.
|
||||
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
|
||||
overflow: visible; // Show the overflow in IE.
|
||||
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
|
||||
}
|
||||
// Default styling
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
@ -238,7 +239,7 @@ a[role="button"], label[role="button"], [role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
&:hover, &:active, &:focus {
|
||||
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
|
||||
$hide-file-inputs: true !default;
|
||||
@if $hide-file-inputs {
|
||||
input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible.
|
||||
border: 0;
|
||||
@ -264,13 +264,13 @@ $hide-file-inputs: true !default;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
}
|
||||
@else {
|
||||
::-webkit-file-upload-button {
|
||||
-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
|
||||
@ -278,8 +278,8 @@ $hide-file-inputs: true !default;
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
border: $button-group-border-style;
|
||||
@if $button-border-radius != 0 {
|
||||
border-radius: $button-border-radius;
|
||||
@ -298,9 +298,9 @@ $hide-file-inputs: true !default;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
@if $button-border-radius != 0 {
|
||||
@ -324,7 +324,7 @@ $hide-file-inputs: true !default;
|
||||
-webkit-box-orient: vertical;
|
||||
// New syntax
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
@if $button-group-border-style !=0 {
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
.#{$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.
|
||||
// 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).
|
||||
[type="checkbox"], [type="radio"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
@if $hide-check-and-radio { // If you want to make these two <input>s visible by default, turn this on.
|
||||
[type="checkbox"], [type="radio"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
}
|
||||
// Use input-group to setup the style for labels.
|
||||
.#{$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`).
|
||||
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included (`true`/`false`).
|
||||
$include-footer-sticky: false !default; // Should the sticky class for <footer> elements be included (`true`/`false`).
|
||||
$include-nav-styles: true !default; // [Hidden flag] Should <nav> elements by stylized? (`true`/`false`)
|
||||
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
|
||||
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
|
||||
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
|
||||
@ -86,47 +87,49 @@ header {
|
||||
}
|
||||
}
|
||||
// Navigation sidebar styling.
|
||||
nav {
|
||||
display: block; // Correct display for older versions of IE.
|
||||
@if $nav-back-color != $back-color {
|
||||
background: $nav-back-color;
|
||||
}
|
||||
@if $nav-fore-color != $fore-color {
|
||||
color: $nav-fore-color;
|
||||
}
|
||||
@if $nav-border-style != 0 {
|
||||
border: $nav-border-style;
|
||||
}
|
||||
@if $nav-border-radius != 0 {
|
||||
border-radius: $nav-border-radius;
|
||||
}
|
||||
@if $nav-margin != 0 {
|
||||
margin: $nav-margin;
|
||||
}
|
||||
@if $nav-padding != 0 {
|
||||
padding: $nav-padding;
|
||||
}
|
||||
@if $nav-box-shadow != none {
|
||||
box-shadow: $nav-box-shadow;
|
||||
}
|
||||
a, a:visited {
|
||||
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 {
|
||||
.#{$nav-sublink-prefix}-#{$i} {
|
||||
padding-left: $i * $nav-sublink-padding-left;
|
||||
position: relative;
|
||||
@if $nav-include-sublink-bar {
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: $nav-sublink-bar-left-position;
|
||||
top: -$nav-sublink-bar-width;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
|
||||
border-left: 0;
|
||||
@if $include-nav-styles { // Unless you want unstylized <nav> elements, keep this flag on.
|
||||
nav {
|
||||
display: block; // Correct display for older versions of IE.
|
||||
@if $nav-back-color != $back-color {
|
||||
background: $nav-back-color;
|
||||
}
|
||||
@if $nav-fore-color != $fore-color {
|
||||
color: $nav-fore-color;
|
||||
}
|
||||
@if $nav-border-style != 0 {
|
||||
border: $nav-border-style;
|
||||
}
|
||||
@if $nav-border-radius != 0 {
|
||||
border-radius: $nav-border-radius;
|
||||
}
|
||||
@if $nav-margin != 0 {
|
||||
margin: $nav-margin;
|
||||
}
|
||||
@if $nav-padding != 0 {
|
||||
padding: $nav-padding;
|
||||
}
|
||||
@if $nav-box-shadow != none {
|
||||
box-shadow: $nav-box-shadow;
|
||||
}
|
||||
a, a:visited {
|
||||
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 {
|
||||
.#{$nav-sublink-prefix}-#{$i} {
|
||||
padding-left: $i * $nav-sublink-padding-left;
|
||||
position: relative;
|
||||
@if $nav-include-sublink-bar {
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: $nav-sublink-bar-left-position;
|
||||
top: -$nav-sublink-bar-width;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user