diff --git a/docs/customization/core.html b/docs/customization/core.html index 98cfd32..5a781c7 100644 --- a/docs/customization/core.html +++ b/docs/customization/core.html @@ -73,6 +73,7 @@

The core module's typography rules are quite extensive and deal with background and foreground colors, used fonts, sizing and line height, along with heading, link and paragraph styling.


+ @@ -231,6 +232,7 @@

The core module contains a plethora of styles for horizontal rules, lists and code elements, as well as a few optional display fixes for certain other elements.


Variables
VariableTypeDescriptionSample value
+ diff --git a/docs/customization/grid.html b/docs/customization/grid.html index af0a10c..47d5969 100644 --- a/docs/customization/grid.html +++ b/docs/customization/grid.html @@ -75,6 +75,7 @@

The grid module's systems are based on custom-named classes for containers, rows and columns, as well as reordering and ofsetting classes, breakpoints and padding.


Variables
VariableTypeDescriptionSample value
+ diff --git a/docs/customization/input_control.html b/docs/customization/input_control.html index e337e0a..13b57ec 100644 --- a/docs/customization/input_control.html +++ b/docs/customization/input_control.html @@ -74,6 +74,7 @@

The input_control module's forms and input fields can be easily customized to use different sizes and colors, as well as different class names for groupping.


Variables
VariableTypeDescriptionSample value
+ @@ -232,8 +233,9 @@

Checkboxes & radio buttons

-

The navigation module's checkbox and radio button elements are based on custom rules and depend on the use of <label> elements and input groups to be stylized and properly displayed.


+

The input_control module's checkbox and radio button elements are based on custom rules and depend on the use of <label> elements and input groups to be stylized and properly displayed.


Variables
VariableTypeDescriptionSample value
+ @@ -287,6 +289,184 @@ +
+
+
+

Button & button groups

+
+

The input_control module's button elements are highly customizable, along with the button groups that can be used in combination with them.


+
Variables
VariableTypeDescriptionSample value
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Variables
VariableTypeDescriptionSample value
$button-back-colorColorBackground color for button elements#bdbdbd
$button-fore-colorColorText color for button elements$fore-color
$button-border-styleBorderBorder style for button elements1px solid #9e9e9e
$button-border-radiusBorder radiusBorder radius for button elements2px
$button-marginMarginMargin for button elements8px
$button-paddingPaddingPadding for button elements8px 12px
$button-box-shadowBox shadowBox shadow for button elements0 1px 3px rgba(0,0,0, 0.1)
$button-back-opacityOpacityBackground opacity for button elements (default)0.65
$button-hover-back-opacityOpacityBackground opacity for button elements (focused)0.8
$button-disabled-opacityOpacityOpacity for button elements (focused)0.65
$button-class-nameStringClass name for button elements'button'
$button-group-nameStringClass name for button groups'button-group'
$button-group-border-styleBorderBorder style for button groups1px solid #9e9e9e
$button-group-marginMarginMargin for button groups8px
$button-group-box-shadowBox shadowBox shadow for button groups0 1px 3px rgba(0,0,0, 0.1)
$button-group-mobile-breakpointBreakpointBreakpoint for button groups on mobile devices767px

+
+ + + + +
+
+
+

Button mixins

+
+

The input_control module contains a couple of mixins for adding custom styles to button elements (color and style variants).


+ + + + + + + + + + + + + + + +
Mixin definitions
MixinDescription
make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity, $button-alt-hover-back-opacity, $button-alt-fore-color)Creates a new button color variant using the specified values.
make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius, $button-alt-padding, $button-alt-margin)Creates a new button style variant using the specified values.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
make-button-alt-color
ParameterTypeDescriptionSample value
$button-alt-nameStringClass name for the button color variant'primary'
$button-alt-back-colorColorBackground color for the button color variant#0277bd
$button-alt-back-opacityOpacityBackground opacity for the button color variant (default)0.9
$button-alt-hover-back-opacityOpacityBackground opacity for the button color variant (focused)1
$button-alt-fore-colorColor(Optional) Text color for the button color variant#fafafa

+

Sample usage

+ 
@include make-button-alt-color ('primary', #0277bd, 0.9, 1, #fafafa);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
make-button-alt-style
ParameterTypeDescriptionSample value
$button-alt-nameStringClass name for the button style variant'large'
$button-alt-border-styleBorderBorder style for the button style variant2px solid #9e9e9e
$button-alt-border-radiusBorder radiusBorder radius for the button style variant4px
$button-alt-paddingPaddingPadding for the button style variant12px 18px
$button-alt-marginMarginMargin for the button style variant10px

+

Sample usage

+ 
@include make-button-alt-style ('large', 2px solid #9e9e9e, 4px, 18px, 10px);
+
+
+
+

Notes:

+
    + +
+
+
+
+
+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/customization/navigation.html b/docs/customization/navigation.html index b7bab8d..da1b91d 100644 --- a/docs/customization/navigation.html +++ b/docs/customization/navigation.html @@ -73,6 +73,7 @@

The navigation module contains definitions for styling the <header> element, along with its contents (logo and links).


+ @@ -161,6 +162,7 @@

The navigation module contains definitions for styling <nav> elements, along with the links they contain.


Variables
VariableTypeDescriptionSample value
+ @@ -245,6 +247,7 @@

The navigation module contains various definitions for customizing the appearance of the <footer> element.


Variables
VariableTypeDescriptionSample value
+
Variables
VariableTypeDescriptionSample value