beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

🐛 fix - Resolved #107

Browse source 
Fixes problems with checkbox and radio elements.
This commit is contained in:
Angelos Chalaris 2017-10-23 14:02:44 +03:00
parent 532608e16e
commit 10b70885d9
24 changed files with 125 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -1,5 +1,11 @@
# Changelog
## v2.3.7
- Fixes a couple of bugs with `checkbox` and `radio` elements.
- Fixes a multitude of bugs with `select` and `option` elements.
- Updated documentation to reflect the changes made.
## v2.3.6
- Fixes a bug that caused transparency in `.modal`s that use `.card`s (#104).

26
dist/mini-dark.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
/*
Browsers resets and base typography.
@ -812,7 +812,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
border-color: #20292e;
}
select:not([multiple]) {
select:not([multiple]):not([size]) {
padding-right: 1.5rem;
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23d0d0d0" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
background-color: #39444a;
@ -821,10 +821,19 @@ select:not([multiple]) {
appearance: none;
}
select:not([multiple])[readonly] {
select:not([multiple]):not([size])[readonly] {
background-color: #263238;
}
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
::-webkit-input-placeholder {
opacity: 1;
color: #757575;
@ -951,6 +960,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
position: relative;
display: inline-block;
margin-left: 1.25rem;
cursor: pointer;
}
@ -958,7 +968,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
display: inline-block;
position: absolute;
bottom: 0.375rem;
top: 0.375rem;
left: 0;
width: 1rem;
height: 1rem;
@ -998,14 +1008,14 @@ input[type="file"] {
background: #d0d0d0;
content: '';
margin-left: -1.25rem;
bottom: 0.625rem;
top: 0.625rem;
left: 0.25rem;
width: 0.625rem;
height: 0.625rem;
}
.input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before {
bottom: 0.5rem;
top: 0.5rem;
width: 1.75rem;
height: 0.875rem;
border: 0;
@ -1023,7 +1033,7 @@ input[type="file"] {
height: 1.25rem;
background: #39444a;
border-radius: 100%;
bottom: 0.3125rem;
top: 0.3125rem;
margin-left: -3rem;
transition: left 0.3s;
}
@ -1036,7 +1046,7 @@ input[type="file"] {
left: 1.75rem;
width: 1.25rem;
height: 1.25rem;
bottom: 0.3125rem;
top: 0.3125rem;
margin-left: -3rem;
background: #0277bd;
}

2
dist/mini-dark.min.css vendored
View file

File diff suppressed because one or more lines are too long

11
dist/mini-default.css vendored
View file

@ -959,6 +959,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
position: relative;
display: inline-block;
margin-left: 1.25rem;
cursor: pointer;
}
@ -966,7 +967,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
display: inline-block;
position: absolute;
bottom: 0.375rem;
top: 0.375rem;
left: 0;
width: 1rem;
height: 1rem;
@ -1006,14 +1007,14 @@ input[type="file"] {
background: #212121;
content: '';
margin-left: -1.25rem;
bottom: 0.625rem;
top: 0.625rem;
left: 0.25rem;
width: 0.625rem;
height: 0.625rem;
}
.input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before {
bottom: 0.5rem;
top: 0.5rem;
width: 1.75rem;
height: 0.875rem;
border: 0;
@ -1031,7 +1032,7 @@ input[type="file"] {
height: 1.25rem;
background: #e0e0e0;
border-radius: 100%;
bottom: 0.3125rem;
top: 0.3125rem;
margin-left: -3rem;
transition: left 0.3s;
}
@ -1044,7 +1045,7 @@ input[type="file"] {
left: 1.75rem;
width: 1.25rem;
height: 1.25rem;
bottom: 0.3125rem;
top: 0.3125rem;
margin-left: -3rem;
background: #0277bd;
}

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

16
dist/mini-lite.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
/*
Browsers resets and base typography.
@ -756,6 +756,15 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
border-color: #c9c9c9;
}
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
::-webkit-input-placeholder {
opacity: 1;
color: #616161;
@ -845,6 +854,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
position: relative;
display: inline-block;
margin-left: 1.25rem;
cursor: pointer;
}
@ -852,7 +862,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
display: inline-block;
position: absolute;
bottom: 0.375rem;
top: 0.375rem;
left: 0;
width: 1rem;
height: 1rem;
@ -892,7 +902,7 @@ input[type="file"] {
background: #212121;
content: '';
margin-left: -1.25rem;
bottom: 0.625rem;
top: 0.625rem;
left: 0.25rem;
width: 0.625rem;
height: 0.625rem;

2
dist/mini-lite.min.css vendored
View file

File diff suppressed because one or more lines are too long

26
dist/mini-nord.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
/*
Browsers resets and base typography.
@ -820,7 +820,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
border-color: #bdbdbd;
}
select:not([multiple]) {
select:not([multiple]):not([size]) {
padding-right: 20px;
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%232E3440" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
background-color: #E5E9F0;
@ -829,10 +829,19 @@ select:not([multiple]) {
appearance: none;
}
select:not([multiple])[readonly] {
select:not([multiple]):not([size])[readonly] {
background-color: #e0e0e0;
}
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
::-webkit-input-placeholder {
opacity: 1;
color: #616161;
@ -966,6 +975,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
position: relative;
display: inline-block;
margin-left: 20px;
cursor: pointer;
}
@ -973,7 +983,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
display: inline-block;
position: absolute;
bottom: 6px;
top: 6px;
left: 0;
width: 16px;
height: 16px;
@ -1014,14 +1024,14 @@ input[type="file"] {
background: #2E3440;
content: '';
margin-left: -20px;
bottom: 10px;
top: 10px;
left: 4px;
width: 10px;
height: 10px;
}
.input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before {
bottom: 8px;
top: 8px;
width: 28px;
height: 14px;
border: 0;
@ -1040,7 +1050,7 @@ input[type="file"] {
height: 20px;
background: #ECEFF4;
border-radius: 100%;
bottom: 5px;
top: 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;
@ -1050,7 +1060,7 @@ input[type="file"] {
left: 28px;
width: 20px;
height: 20px;
bottom: 5px;
top: 5px;
margin-left: -48px;
background: #5E81AC;
}

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

File diff suppressed because one or more lines are too long

16
dist/mini-pwa.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Progressive Web App (mini-pw)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
/*
Browsers resets and base typography.
@ -786,6 +786,15 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
border-color: #bdbdbd;
}
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
::-webkit-input-placeholder {
opacity: 1;
color: #616161;
@ -876,6 +885,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
position: relative;
display: inline-block;
margin-left: 1.25rem;
cursor: pointer;
}
@ -883,7 +893,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
display: inline-block;
position: absolute;
bottom: 0.375rem;
top: 0.375rem;
left: 0;
width: 1rem;
height: 1rem;
@ -923,7 +933,7 @@ input[type="file"] {
background: #212121;
content: '';
margin-left: -1.25rem;
bottom: 0.625rem;
top: 0.625rem;
left: 0.25rem;
width: 0.625rem;
height: 0.625rem;

2
dist/mini-pwa.min.css vendored
View file

File diff suppressed because one or more lines are too long

20
dist/mini-sucroa.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
/*
@ -824,7 +824,7 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
border-color: #a9a2ba;
}
select:not([multiple]) {
select:not([multiple]):not([size]) {
padding-right: 20px;
background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23211423" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
background-color: #f2edff;
@ -833,10 +833,19 @@ select:not([multiple]) {
appearance: none;
}
select:not([multiple])[readonly] {
select:not([multiple]):not([size])[readonly] {
background-color: #eae1ff;
}
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
::-webkit-input-placeholder {
opacity: 1;
color: #493e4b;
@ -970,6 +979,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
position: relative;
display: inline-block;
margin-left: 20px;
cursor: pointer;
}
@ -977,7 +987,7 @@ input[type="file"] {
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
display: inline-block;
position: absolute;
bottom: 3px;
top: 3px;
left: 0;
width: 16px;
height: 16px;
@ -1018,7 +1028,7 @@ input[type="file"] {
background: #211423;
content: '';
margin-left: -20px;
bottom: 7px;
top: 7px;
left: 4px;
width: 10px;
height: 10px;

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

File diff suppressed because one or more lines are too long

4
docs/customization/input_control.html
View file

@ -314,8 +314,8 @@
<td data-label="Description">Border color for checkbox/radio elements (focused)</td><td data-label="Sample value">#0288d1</td>
</tr>
<tr>
<td data-label="Variable">$checkbox-bottom-spacing</td><td data-label="Type">Position bottom (<code>px</code> preferred)</td>
<td data-label="Description">Position bottom spacing for checkbox/radio elements</td><td data-label="Sample value">6px</td>
<td data-label="Variable">$checkbox-bottom-spacing</td><td data-label="Type">Position top (<code>px</code> preferred)</td>
<td data-label="Description">Position top spacing for checkbox/radio elements</td><td data-label="Sample value">6px</td>
</tr>
<tr>
<td data-label="Variable">$checkbox-disabled-opacity</td><td data-label="Type">Opacity</td>

2
docs/flavors.html
View file

@ -44,7 +44,7 @@
<h1>Flavors</h1>
<p style="text-align:justify">One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.6/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.7/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p style="text-align:justify">There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
<ul style="margin-left:0px; padding-left: 4px">
<li class="card fluid">

2
docs/index.html
View file

@ -120,7 +120,7 @@
<br/>
<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.6/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.7/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<hr>
</div>

2
docs/quick_reference.html
View file

@ -67,7 +67,7 @@
</div><br>
<p style="text-align:justify">You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.6/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.7/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p style="text-align:justify">You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<p style="text-align:justify">We strongly suggest you add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>

11
docs/v2/DEVLOG.md
View file

@ -1316,3 +1316,14 @@
- Rebuilt flavors to latest version.
- Updated docs.
- Released patch.
# v2.3.7 Development Log
## 20171023
- Fixed the bugs found due to #108. `select` elements should now be pretty decently stylized and work across all browsers and environments.
- Fixed the bugs found due to #107. Custom checkboxes and radio buttons should now behave as expected. Also, updated the customization docs to reflect said changes.
- Size has increased to a total of `6.9KB`, should look into optimizing to trim off some bytes.
- Rebuilt flavors to latest version.
- Updated docs.
- Released patch.

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

@ -5,7 +5,7 @@
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
// Basic rules for body and typography
$fore-color: #d0d0d0; // Text and general foreground color

2
src/flavors/mini-lite.scss
View file

@ -7,7 +7,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color

2
src/flavors/mini-nord.scss
View file

@ -5,7 +5,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
// Basic rules for body and typography

2
src/flavors/mini-pwa.scss
View file

@ -7,7 +7,7 @@
Flavor name: Progressive Web App (mini-pw)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color

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

@ -5,7 +5,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.3.6
mini.css version: v2.3.7
*/
// Google Fonts imports and usage
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');

17
src/mini/_input_control.scss
View file

@ -501,6 +501,7 @@ a[role="button"], label[role="button"], [role="button"] {
// Label styling based on the specifics of the checkbox/radio variables.
[type="checkbox"] + label, [type="radio"] + label {
position: relative;
display: inline-block;
$_unit: $checkbox-size*0 +1; // Used to check if the unit is `px` or `rem/em`
@if $_unit == 1px {
margin-left: floor($checkbox-size + floor($checkbox-size * 0.25));
@ -513,7 +514,7 @@ a[role="button"], label[role="button"], [role="button"] {
&:before {
display: inline-block;
position: absolute;
bottom: $checkbox-bottom-spacing;
top: $checkbox-bottom-spacing;
left: 0;
width: $checkbox-size;
height: $checkbox-size;
@ -568,14 +569,14 @@ a[role="button"], label[role="button"], [role="button"] {
$_unit: $checkbox-size*0 +1; // Used to check if the unit is `px` or `rem/em`
@if $_unit == 1px {
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
bottom: floor($checkbox-size * 0.25) + $checkbox-bottom-spacing;
top: floor($checkbox-size * 0.25) + $checkbox-bottom-spacing;
left: floor($checkbox-size * 0.25);
width: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
height: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
}
@else {
margin-left: - ($checkbox-size * 1.25);
bottom: $checkbox-size * 0.25 + $checkbox-bottom-spacing;
top: $checkbox-size * 0.25 + $checkbox-bottom-spacing;
left: $checkbox-size * 0.25;
width: $checkbox-size * 0.5 + $checkbox-border-thickness * 2;
height: $checkbox-size * 0.5 + $checkbox-border-thickness * 2;
@ -591,7 +592,7 @@ a[role="button"], label[role="button"], [role="button"] {
// Styling for the bar part of the switch
&:before {
@if $switch-bottom-spacing != $checkbox-bottom-spacing {
bottom: $switch-bottom-spacing;
top: $switch-bottom-spacing;
}
width: $switch-bar-width;
height: $switch-bar-height;
@ -629,11 +630,11 @@ a[role="button"], label[role="button"], [role="button"] {
}
$_unit: $switch-bar-width*0 +1; // Used to check if the unit is `px` or `rem/em`
@if $_unit == 1px {
bottom: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
top: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
margin-left: - floor($switch-bar-width + $switch-knob-width);
}
@else {
bottom: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
top: (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 {
@ -660,11 +661,11 @@ a[role="button"], label[role="button"], [role="button"] {
height: $switch-knob-height;
$_unit: $switch-bar-width*0 +1; // Used to check if the unit is `px` or `rem/em`
@if $_unit == 1px {
bottom: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
top: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
margin-left: - floor($switch-bar-width + $switch-knob-width);
}
@else {
bottom: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
top: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
margin-left: - ($switch-bar-width + $switch-knob-width);
}
@if $switch-on-knob-back-color != $switch-knob-back-color {