Improved SASS calculation

Author: haubek

HISTORY.md

@@ -1,5 +1,9 @@
 # Release History
 
+## 1.1.2
+
+* Improved `:before` and `:after` calculation
+
 ## 1.1.1
 
 * Fixed `line-height` issue

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap4c-custom-switch",
   "description": "Bootstrap 4 Component - Custom switch",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "MIT",
   "authors": [
     { "name": "Martin Haubek", "email": "[email protected]", "homepage": "https://haubek.github.io" }

dist/css/component-custom-switch.css

@@ -3,7 +3,7 @@
  *
  *
  * Bootstrap 4 Component - Custom switch
- * Version: 1.1.1
+ * Version: 1.1.2
  * Copyright (c) 2017-18 Martin Haubek
  *
  *
@@ -47,8 +47,8 @@
         position: relative;
         display: block;
         content: "";
-        width: 30px;
-        height: 30px; }
+        width: 29px;
+        height: 29px; }
       .custom-switch .custom-switch-input + .custom-switch-btn:after {
         left: 2px;
         border-radius: 50%;
@@ -116,13 +116,13 @@
   .custom-switch-sm .custom-switch-input + .custom-switch-btn {
     width: 60px;
     height: 31px;
-    padding: 3.26316px;
+    padding: 3px;
     border-radius: 62px; }
     .custom-switch-sm .custom-switch-input + .custom-switch-btn:after, .custom-switch-sm .custom-switch-input + .custom-switch-btn:before {
-      width: 25px;
-      height: 25px; }
+      width: 23px;
+      height: 23px; }
     .custom-switch-sm .custom-switch-input + .custom-switch-btn:after {
-      left: 1px; }
+      left: 2px; }
   .custom-switch-sm .custom-switch-input:checked + .custom-switch-btn:after {
     left: 29px; }
   .custom-switch-sm .custom-switch-form-text {
@@ -154,7 +154,7 @@
   .custom-switch-xs .custom-switch-input + .custom-switch-btn {
     width: 48px;
     height: 24px;
-    padding: 2.52632px;
+    padding: 3px;
     border-radius: 48px; }
     .custom-switch-xs .custom-switch-input + .custom-switch-btn:after, .custom-switch-xs .custom-switch-input + .custom-switch-btn:before {
       width: 18px;

dist/css/component-custom-switch.min.css

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap4c-custom-switch",
   "description": "Bootstrap 4 Component - Custom switch",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "MIT",
   "author": {
     "name": "Martin Haubek",

package.json

@@ -25,7 +25,7 @@
       width: ($switch-width + $switch-unit);
       height: ($switch-height + $switch-unit);
       margin: 0;
-      padding: (($switch-height / 9.5) + $switch-unit);
+      padding: ((round(($switch-height - (round($switch-height * .75))) / 2) - 1) + $switch-unit);
       background: $switch-unchecked-bg;
       border-radius: (($switch-height * 2) + $switch-unit);
       transition: all $switch-duration ease;
@@ -34,11 +34,11 @@
         position: relative;
         display: block;
         content: "";
-        width: (($switch-height - 8) + $switch-unit);
-        height: (($switch-height - 8) + $switch-unit);
+        width: (round($switch-height * .75) + $switch-unit);
+        height: (round($switch-height * .75) + $switch-unit);
       }
       &:after {
-        left: 2px;
+        left: ((round(($switch-height - (round($switch-height * .75))) / 2) - 3) + $switch-unit);
         border-radius: 50%;
         background: white;
         transition: all $switch-duration ease;
@@ -156,15 +156,15 @@
     + .custom-switch-btn {
       width: ($switch-width-sm + $switch-unit);
       height: ($switch-height-sm + $switch-unit);
-      padding: (($switch-height-sm / 9.5) + $switch-unit);
+      padding: ((round(($switch-height-sm - (round($switch-height-sm * .75))) / 2) - 1) + $switch-unit);
       border-radius: (($switch-height-sm * 2) + $switch-unit);
       &:after,
       &:before {
-        width: (($switch-height-sm - 6) + $switch-unit);
-        height: (($switch-height-sm - 6) + $switch-unit);
+        width: (round($switch-height-sm * .75) + $switch-unit);
+        height: (round($switch-height-sm * .75) + $switch-unit);
       }
       &:after {
-        left: 1px;
+        left: ((round(($switch-height-sm - (round($switch-height-sm * .75))) / 2) - 2) + $switch-unit);
       }
     }
     &:checked + .custom-switch-btn {
@@ -229,15 +229,15 @@
     + .custom-switch-btn {
       width: ($switch-width-xs + $switch-unit);
       height: ($switch-height-xs + $switch-unit);
-      padding: (($switch-height-xs / 9.5) + $switch-unit);
+      padding: ((round(($switch-height-xs - (round($switch-height-xs * .75))) / 2)) + $switch-unit);
       border-radius: (($switch-height-xs * 2) + $switch-unit);
       &:after,
       &:before {
-        width: (($switch-height-xs - 6) + $switch-unit);
-        height: (($switch-height-xs - 6) + $switch-unit);
+        width: (round($switch-height-xs * .75) + $switch-unit);
+        height: (round($switch-height-xs * .75) + $switch-unit);
       }
       &:after {
-        left: 1px;
+        left: ((round(($switch-height-xs - (round($switch-height-xs * .75))) / 2) - 2) + $switch-unit);
       }
     }
     &:checked + .custom-switch-btn {

src/scss/_component-custom-switch.scss

@@ -7,7 +7,7 @@ $switch-width-status-sm:            88;
 $switch-width-status-xs:            76;
 $switch-height:                     38; // The default Bootstrap btn height in px
 $switch-height-sm:                  31; // The default Bootstrap small btn height in px
-$switch-height-xs:                  24; // The default Bootstrap extra small btn height in px
+$switch-height-xs:                  24; // Extra small btn height in px
 $switch-font-size:                  12;
 $switch-font-size-sm:               11;
 $switch-font-size-xs:               10;

src/scss/_component-variables.scss

@@ -3,7 +3,7 @@
  *
  *
  * Bootstrap 4 Component - Custom switch
- * Version: 1.1.1
+ * Version: 1.1.2
  * Copyright (c) 2017-18 Martin Haubek
  *
  *