mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-01-17 12:58:13 +01:00
Code Issues Releases Wiki Activity

Customization documentation for switches

Browse Source 
Added full customization documentation for switch components.
This commit is contained in:
Angelos Chalaris 2017-06-08 23:48:21 +03:00
parent acf9e37fdb
commit 8af1ac0d9c
22 changed files with 207 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dist/mini-nord.css vendored
View File

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

2
dist/mini-nord.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/mini-sucroa.css vendored
View File

@ -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 {

2
dist/mini-sucroa.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
docs/customization/card.html
View File

@ -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#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#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#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>

6
docs/customization/contextual.html
View File

@ -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#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#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#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>

4
docs/customization/core.html
View File

@ -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#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#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#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>

4
docs/customization/grid.html
View File

@ -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#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#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#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>

4
docs/customization/index.html
View File

@ -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#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#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#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>

155
docs/customization/input_control.html
View File

@ -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#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#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#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>

4
docs/customization/navigation.html
View File

@ -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#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#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#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>

4
docs/customization/progress.html
View File

@ -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#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#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#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>

4
docs/customization/tab.html
View File

@ -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#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#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#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>

4
docs/customization/table.html
View File

@ -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#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#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#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>

4
docs/customization/utility.html
View File

@ -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#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#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#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>

3
docs/v2/DEVLOG.md
View File

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

2
src/flavors/mini-dark.scss
View File

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

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

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

1
src/flavors/mini-lite.scss
View File

@ -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

6
src/flavors/mini-nord.scss
View File

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

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

@ -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

9
src/mini/_input_control.scss
View File

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