Customization documentation for switches

Added full customization documentation for switch components.

dist/mini-nord.css

@@ -947,6 +947,7 @@ input[type="file"] {
   background: #E5E9F0;
   color: #2E3440;
   margin-left: -20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
 }
 
 .input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:focus:before {
@@ -991,6 +992,7 @@ input[type="file"] {
   border-radius: 8px;
   background: #D8DEE9;
   margin-left: -38px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
 }
 
 .input-group [type="checkbox"] + label.switch:after, .input-group [type="radio"] + label.switch:after {
@@ -1004,6 +1006,7 @@ input[type="file"] {
   border-radius: 100%;
   bottom: 5px;
   margin-left: -48px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
   transition: left 0.3s;
 }
 

dist/mini-sucroa.css

@@ -951,6 +951,7 @@ input[type="file"] {
   background: #f2edff;
   color: #211423;
   margin-left: -20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
 }
 
 .input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:focus:before {

docs/customization/card.html

@@ -50,8 +50,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>

docs/customization/contextual.html

@@ -49,8 +49,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
@@ -162,7 +162,7 @@
 					<div class="card fluid">
 						<div class="section"><h2>Toasts</h2></div>
 						<div class="section">
-							<p style="text-align:justify">The <strong>contextual</strong> module's contains custom classes and styles for defining toast messages.</p><br/>
+							<p style="text-align:justify">The <strong>contextual</strong> module contains custom classes and styles for defining toast messages.</p><br/>
 							<table style="width: 100%" class="striped">
 								<caption>Variables</caption>
 								<thead>

docs/customization/core.html

@@ -49,8 +49,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>

docs/customization/grid.html

@@ -51,8 +51,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>

docs/customization/index.html

@@ -48,8 +48,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>

docs/customization/input_control.html

@@ -50,8 +50,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
@@ -308,6 +308,10 @@
 										<td data-label="Variable">$checkbox-disabled-opacity</td><td data-label="Type">Opacity</td>
 										<td data-label="Description">Opacity for checkbox/radio elements (disabled)</td><td data-label="Sample value">0.75</td>
 									</tr>
+									<tr>
+										<td data-label="Variable">$checkbox-box-shadow</td><td data-label="Type">Box shadow</td>
+										<td data-label="Description">Box shadow for checkbox/radio elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
+									</tr>
 								</tbody>
 							</table><br/>
 						</div>
@@ -321,6 +325,99 @@
 				</div>
 			</div>
 
+			<div class="row" id="switch">
+				<div class="col-sm-12">
+					<div class="card fluid">
+						<div class="section"><h2>Switches</h2></div>
+						<div class="section">
+							<p style="text-align:justify">The <strong>input_control</strong> module contains custom classes and styles for defining switch components.</p><br/>
+							<table style="width: 100%" class="striped">
+								<caption>Variables</caption>
+								<thead>
+									<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td data-label="Variable">$include-switch</td><td data-label="Type">Logical</td>
+										<td data-label="Description">Enables switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">true</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-name</td><td data-label="Type">String</td>
+										<td data-label="Description">Class name for switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">'switch'</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-bar-back-color</td><td data-label="Type">Color</td>
+										<td data-label="Description">Background color for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">#bdbdbd</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-on-bar-back-color</td><td data-label="Type">Color</td>
+										<td data-label="Description">Background color for the bar of switch components (when turned on)<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">#bdbdbd</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-bar-width</td><td data-label="Type">Width</td>
+										<td data-label="Description">Text color for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">28px</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-bar-height</td><td data-label="Type">Height</td>
+										<td data-label="Description">Text color for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">14px</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-bar-border-style</td><td data-label="Type">Border</td>
+										<td data-label="Description">Border style for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">1px solid #212121</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-bar-border-radius</td><td data-label="Type">Border radius</td>
+										<td data-label="Description">Border radius for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">2px</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-bar-box-shadow</td><td data-label="Type">Box shadow</td>
+										<td data-label="Description">Box shadow for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-bottom-spacing</td><td data-label="Type">Position bottom (<code>px</code> preferred)</td>
+										<td data-label="Description">Position bottom spacing for switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">8px</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-knob-back-color</td><td data-label="Type">Color</td>
+										<td data-label="Description">Background color for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">#e0e0e0</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-on-knob-back-color</td><td data-label="Type">Color</td>
+										<td data-label="Description">Background color for the knob of switch components (when turned on)<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">#0277bd</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-knob-width</td><td data-label="Type">Width</td>
+										<td data-label="Description">Text color for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">20px</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-knob-height</td><td data-label="Type">Height</td>
+										<td data-label="Description">Text color for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">20px</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-knob-border-style</td><td data-label="Type">Border</td>
+										<td data-label="Description">Border style for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">1px solid #212121</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-knob-border-radius</td><td data-label="Type">Border radius</td>
+										<td data-label="Description">Border radius for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">100%</td>
+									</tr>
+									<tr>
+										<td data-label="Variable">$switch-knob-box-shadow</td><td data-label="Type">Box shadow</td>
+										<td data-label="Description">Box shadow for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
+									</tr>
+								</tbody>
+							</table><br/>
+						</div>
+						<div class="section">
+							<h3>Notes:</h3>
+							<ol style="text-align:justify">
+								<li id="switch-note-one">The values used in the switch components will only be used if <code>$include-switch</code> is set to <code class="fore-tertiary">true</code>.</li>
+							</ol>
+						</div>
+					</div>
+				</div>
+			</div>
+
 			<div class="row" id="buttons">
 				<div class="col-sm-12">
 					<div class="card fluid">
@@ -493,6 +590,60 @@
 				</div>
 			</div>
 
+			<div class="row" id="switch-mixins">
+				<div class="col-sm-12">
+					<div class="card fluid">
+						<div class="section"><h2>Switch mixins</h2></div>
+						<div class="section">
+							<p style="text-align:justify">The <strong>input_control</strong> module contains a mixin for adding custom color variants to switches.</p><br/>
+							<table style="width: 100%" class="striped">
+								<caption>Mixin definition</caption>
+								<thead>
+									<tr><th>Mixin</th><th>Description</th></tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td data-label="Mixin">make-switch-alt-color (<span class="fore-primary">$switch-alt-name</span>, <span class="fore-primary">$switch-alt-on-knob-back-color</span>, <span class="fore-tertiary">$switch-alt-on-bar-back-color</span>, <span class="fore-tertiary">$switch-alt-knob-back-color</span>, <span class="fore-tertiary">$switch-alt-bar-back-color</span>)</td>
+										<td data-label="Description">Creates a new switch color variant using the specified values.</td>
+									</tr>
+								</tbody>
+							</table><br/>
+							<table style="width: 100%" class="striped">
+								<caption style="font-family: monospace, monospace">make-switch-alt-color</caption>
+								<thead>
+									<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td data-label="Parameter">$switch-alt-name</td><td data-label="Type">String</td>
+										<td data-label="Description">Class name for the switch color variant</td><td data-label="Sample value">'primary'</td>
+									</tr>
+									<tr>
+										<td data-label="Parameter">$switch-alt-on-knob-back-color</td><td data-label="Type">Color</td>
+										<td data-label="Description">Background color for the knob of the switch component (when turned on)</td><td data-label="Sample value">#e53935</td>
+									</tr>
+									<tr>
+										<td data-label="Parameter">$switch-alt-on-bar-back-color</td><td data-label="Type">Color</td>
+										<td data-label="Description">(Optional) Background color for the bar of the switch component (when turned on)</td><td data-label="Sample value">#bdbdbd</td>
+									</tr>
+									<tr>
+										<td data-label="Parameter">$switch-alt-knob-back-color</td><td data-label="Type">Color</td>
+										<td data-label="Description">(Optional) Background color for the knob of the switch component</td><td data-label="Sample value">#e0e0e0</td>
+									</tr>
+									<tr>
+										<td data-label="Parameter">$switch-alt-bar-back-color</td><td data-label="Type">Color</td>
+										<td data-label="Description">(Optional) Background color for the bar of the switch component</td><td data-label="Sample value">#bdbdbd</td>
+									</tr>
+								</tbody>
+							</table><br/>
+							<h3>Sample usage</h3>
+							<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-switch-alt-color</span> ('secondary', #e53935, #bdbdbd, #e0e0e0, #bdbdbd);</pre>
+							<br/>
+						</div>
+					</div>
+				</div>
+			</div>
+
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
           <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>

docs/customization/navigation.html

@@ -49,8 +49,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>

docs/customization/progress.html

@@ -51,8 +51,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>

docs/customization/tab.html

@@ -49,8 +49,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>

docs/customization/table.html

@@ -49,8 +49,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>

docs/customization/utility.html

@@ -49,8 +49,8 @@
 				<br/> <a href="grid.html#grid-title">Grid</a>
 				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
 				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
+				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
+				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
 				<br/> <a href="navigation.html#navigation-title">Navigation</a>
 				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
 				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>

docs/v2/DEVLOG.md

@@ -1238,3 +1238,6 @@
 - Added `make-switch-alt-color` mixin for `.switch` components.
 - Added `cursor:pointer` to `checkbox` and `.switch` components.
 - Added documentation and navigation for `.switch` component.
+- Added `box-shadow` option to `.switch` (was missing before).
+- Added `box-shadow` to `checkbox` and `radio`, updated flavors as required.
+- Added and updated customization documentation and navigation for `.switch` component.

src/flavors/mini-dark.scss

@@ -247,12 +247,14 @@ $switch-bar-height:							0.875rem;						// Height for the switch's bar
 $switch-bar-border-style: 			0;									// Border style for the switch's bar
 $switch-bar-border-radius: 			0.5rem;							// Borer radius for the switch's bar
 $switch-bottom-spacing:					0.5rem;							// Bottom spacing for the switch's bar
+$switch-bar-box-shadow:					none;								// Box shadow for the switch's bar
 $switch-knob-back-color: 				#39444a;						// Back color for the switch's knob
 $switch-on-knob-back-color: 		#0277bd;						// Back color for the switch's knob when the switch is turned on
 $switch-knob-width:							1.25rem;						// Width for the switch's knob
 $switch-knob-height: 						1.25rem;						// Height for the switch's knob
 $switch-knob-border-style: 			0;									// Border style for the switch's knob
 $switch-knob-border-radius: 		100%;								// Borer radius for the switch's knob
+$switch-bar-box-shadow:					none;								// Box shadow for the switch's knob
 // 	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.

src/flavors/mini-default.scss

@@ -238,6 +238,7 @@ $checkbox-border-radius:			$input-border-radius;	// Border radius for checkbox/r
 $checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
 $checkbox-bottom-spacing:				0.375rem;						// Bottom spacing for checkbox/radio
 $checkbox-disabled-opacity:	$input-disabled-opacity;// Opacity for disabled checkbox/radio
+$checkbox-box-shadow:						none;								// Box shadow for checkbox/radio
 $include-switch: 								true;								// Should switch components be included? (`true`/`false`)
 $switch-name: 									'switch';						// Class name for switch components
 $switch-bar-back-color: 				#c9c9c9;						// Back color for the switch's bar
@@ -245,14 +246,16 @@ $switch-on-bar-back-color: 			#dcdcdc;						// Back color for the switch's bar w
 $switch-bar-width:							1.75rem;						// Width for the switch's bar
 $switch-bar-height:							0.875rem;						// Height for the switch's bar
 $switch-bar-border-style: 			0;									// Border style for the switch's bar
-$switch-bar-border-radius: 			0.5rem;							// Borer radius for the switch's bar
+$switch-bar-border-radius: 			0.5rem;							// Border radius for the switch's bar
 $switch-bottom-spacing:					0.5rem;							// Bottom spacing for the switch's bar
+$switch-bar-box-shadow:					none;								// Box shadow for the switch's bar
 $switch-knob-back-color: 				#e0e0e0;						// Back color for the switch's knob
 $switch-on-knob-back-color: 		#0277bd;						// Back color for the switch's knob when the switch is turned on
 $switch-knob-width:							1.25rem;						// Width for the switch's knob
 $switch-knob-height: 						1.25rem;						// Height for the switch's knob
 $switch-knob-border-style: 			0;									// Border style for the switch's knob
 $switch-knob-border-radius: 		100%;								// Borer radius for the switch's knob
+$switch-knob-box-shadow:				none;								// Box shadow for the switch's knob
 // 	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.

src/flavors/mini-lite.scss

@@ -218,6 +218,7 @@ $checkbox-border-radius:			$input-border-radius;	// Border radius for checkbox/r
 $checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
 $checkbox-bottom-spacing:				0.375rem;						// Bottom spacing for checkbox/radio
 $checkbox-disabled-opacity:	$input-disabled-opacity;// Opacity for disabled checkbox/radio
+$checkbox-box-shadow:						none;								// Box shadow for checkbox/radio
 $include-switch: 								false;							// Should switch components be included? (`true`/`false`) [5]
 // 	Notes:
 // [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values

src/flavors/mini-nord.scss

@@ -244,6 +244,8 @@ $checkbox-border-radius:		$input-border-radius;			// Border radius for checkbox/
 $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
+$checkbox-box-shadow:																	// Box shadow for the checkbox/radio
+	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
 $include-switch: 								true;								// Should switch components be included? (`true`/`false`)
 $switch-name: 									'switch';						// Class name for switch components
 $switch-bar-back-color: 				#D8DEE9;						// Back color for the switch's bar
@@ -253,12 +255,16 @@ $switch-bar-height:							14px;								// Height for the switch's bar
 $switch-bar-border-style: 			0;									// Border style for the switch's bar
 $switch-bar-border-radius: 			8px;								// Borer radius for the switch's bar
 $switch-bottom-spacing:					8px;								// Bottom spacing for the switch's bar
+$switch-bar-box-shadow:															// Box shadow for the switch's bar
+	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
 $switch-knob-back-color: 				#ECEFF4;						// Back color for the switch's knob
 $switch-on-knob-back-color: 		#5E81AC;						// Back color for the switch's knob when the switch is turned on
 $switch-knob-width:							20px;								// Width for the switch's knob
 $switch-knob-height: 						20px;								// Height for the switch's knob
 $switch-knob-border-style: 			0;									// Border style for the switch's knob
 $switch-knob-border-radius: 		100%;								// Borer radius for the switch's knob
+$switch-knob-box-shadow:														// Box shadow for the switch's knob
+	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
 // 	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.

src/flavors/mini-sucroa.scss

@@ -243,6 +243,8 @@ $checkbox-border-radius:		$input-border-radius;		// Border radius for checkbox/r
 $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
+$checkbox-box-shadow:																	// Box shadow for checkbox/radio
+	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
 $include-switch: 								false;								// Should switch components be included? (`true`/`false`)
 // 	Notes:
 // [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values

src/mini/_input_control.scss

@@ -448,6 +448,9 @@ a[role="button"], label[role="button"], [role="button"] {
 			@else {
 				margin-left: - $checkbox-size * 1.25;
 			}
+			@if $checkbox-box-shadow != none {
+				box-shadow: $checkbox-box-shadow;
+			}
 		}
 		// Hover, focus styling.
 		&:hover, &:focus {
@@ -521,6 +524,9 @@ a[role="button"], label[role="button"], [role="button"] {
 				@else {
 					margin-left: - ($switch-bar-width + $switch-knob-width/2);
 				}
+				@if $switch-bar-box-shadow != none {
+					box-shadow: $switch-bar-box-shadow;
+				}
 			}
 			// Styling for the knob part of the switch
 			&:after {
@@ -547,6 +553,9 @@ a[role="button"], label[role="button"], [role="button"] {
 					bottom: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
 					margin-left: - ($switch-bar-width + $switch-knob-width);
 				}
+				@if $switch-knob-box-shadow != none {
+					box-shadow: $switch-knob-box-shadow;
+				}
 	      transition: left 0.3s;
 			}
 			// Hover and focus styles are absent for switches, as they are mainly intended for mobile, but you can add them in manually.