Updates all checkbox examples to use new style

Former-commit-id: 0af22337ec
Former-commit-id: 084e3fc862

node/src/documents/collections/form.html.eco

@@ -99,24 +99,22 @@ type        : 'UI Collection'
     <div class="ui form">
       <div class="inline field">
         <div class="ui checkbox">
-          <input type="checkbox" id="uniqueid" />
-          <label for="uniqueid"></label>
+          <input type="checkbox" />
+          <label>Checkbox</label>
         </div>
-        <label>Checkbox</label>
       </div>
       <div class="inline field">
         <div class="ui slider checkbox">
-          <input type="checkbox"/>
-          <label></label>
+          <input type="checkbox" />
+          <label>Slider</label>
         </div>
-        <label>Slider</label>
+        <label></label>
       </div>
       <div class="inline field">
         <div class="ui toggle checkbox">
-          <input type="checkbox"/>
-          <label></label>
+          <input type="checkbox" />
+          <label>Toggle</label>
         </div>
-        <label>Toggle</label>
       </div>
     </div>
   </div>
@@ -152,38 +150,27 @@ type        : 'UI Collection'
       <div class="grouped inline fields">
         <div class="field">
           <div class="ui radio checkbox">
-            <input type="radio" name="example" />
-            <label></label>
-          </div>
-          <label>Apples</label>
-        </div>
-        <div class="field">
-          <div class="ui radio checkbox">
-            <input type="radio" name="example" />
-            <label></label>
+            <input type="radio" name="fruit" checked />
+            <label>Apples</label>
           </div>
-          <label>Pears</label>
         </div>
         <div class="field">
           <div class="ui radio checkbox">
-            <input type="radio" name="example" />
-            <label></label>
+            <input type="radio" name="fruit" />
+            <label>Oranges</label>
           </div>
-          <label>Bananas</label>
         </div>
         <div class="field">
           <div class="ui radio checkbox">
-            <input type="radio" name="example" />
-            <label></label>
+            <input type="radio" name="fruit" />
+            <label>Pears</label>
           </div>
-          <label>Oranges</label>
         </div>
         <div class="field">
           <div class="ui radio checkbox">
-            <input type="radio" name="example" />
-            <label></label>
+            <input type="radio" name="fruit" />
+            <label>Grapefruit</label>
           </div>
-          <label>Persimmon</label>
         </div>
       </div>
     </div>
@@ -232,10 +219,9 @@ type        : 'UI Collection'
       </div>
       <div class="inline field">
         <div class="ui checkbox">
-          <input type="checkbox" id="terms" />
-          <label for="terms"></label>
+          <input type="checkbox" />
+          <label>I agree to the terms and conditions</label>
         </div>
-        <label>I agree to the terms and conditions</label>
       </div>
       <div class="ui blue submit button">Submit</div>
     </div>
@@ -269,10 +255,9 @@ type        : 'UI Collection'
       </div>
       <div class="inline field">
         <div class="ui checkbox">
-          <input type="checkbox" id="terms" />
-          <label for="terms"></label>
+          <input type="checkbox" />
+          <label>I agree to the Terms and Conditions</label>
         </div>
-        <label>I agree to the terms and conditions</label>
       </div>
       <div class="ui blue submit button">Submit</div>
     </div>
@@ -312,10 +297,9 @@ type        : 'UI Collection'
       </div>
       <div class="inline field">
         <div class="ui checkbox">
-          <input type="checkbox" id="terms" />
-          <label for="terms"></label>
+          <input type="checkbox" />
+          <label>I agree to the Terms and Conditions</label>
         </div>
-        <label>I agree to the terms and conditions</label>
       </div>
       <div class="ui blue submit button">Submit</div>
     </div>

node/src/documents/modules/checkbox.html.eco

@@ -38,9 +38,8 @@ type        : 'UI Module'
     <div class="code" data-type="html" data-preview="true">
     <div class="ui checkbox">
       <input type="checkbox">
-      <div class="box"></div>
+      <label>Poodle</label>
     </div>
-    <label>Poodle</label>
     </div>
 
     <div class="static example">
@@ -48,11 +47,10 @@ type        : 'UI Module'
       <p>A checkbox can also be used without using javascript by creating the check box as a label with a for tag matching the <code>id</code> attribute of the input field.</p>
       <div class="ui language label">HTML Only</div>
       <div class="code" data-type="html" data-preview="true">
-      <div class="ui checkbox">
-        <input type="checkbox" id="unique-id" />
-        <label class="box" for="unique-id"></label>
-      </div>
+    <div class="ui checkbox">
+      <input type="checkbox" id="unique-id" />
       <label for="unique-id">Poodle</label>
+    </div>
       </div>
     </div>
 
@@ -66,9 +64,8 @@ type        : 'UI Module'
     <p>A checkbox can be formatted to show user selection as a slider</p>
     <div class="ui slider checkbox">
       <input type="checkbox" name="walk" />
-      <label></label>
+      <label>Allow others to see when your dog is on a walk</label>
     </div>
-    <label> Allow others to see when your dog is on a walk</label>
   </div>
 
   <div class="example">
@@ -76,9 +73,8 @@ type        : 'UI Module'
     <p>A checkbox can be formatted to show user selection as a toggle</p>
     <div class="ui toggle checkbox">
       <input type="checkbox" name="pet" />
-      <label></label>
+      <label>Allow other people to pet my dog</label>
     </div>
-    <label> Allow other people to pet my dog</label>
   </div>
 
 
@@ -90,31 +86,27 @@ type        : 'UI Module'
       <div class="grouped inline fields">
         <div class="field">
           <div class="ui radio checkbox">
-            <input type="radio" name="fruit" />
-            <label></label>
+            <input type="radio" name="fruit" checked />
+            <label>Apples</label>
           </div>
-          <label> Apples</label>
         </div>
         <div class="field">
           <div class="ui radio checkbox">
             <input type="radio" name="fruit" />
-            <label></label>
+            <label>Oranges</label>
           </div>
-          <label> Oranges</label>
         </div>
         <div class="field">
           <div class="ui radio checkbox">
             <input type="radio" name="fruit" />
-            <label></label>
+            <label>Pears</label>
           </div>
-          <label> Pears</label>
         </div>
         <div class="field">
           <div class="ui radio checkbox">
             <input type="radio" name="fruit" />
-            <label></label>
+            <label>Grapefruit</label>
           </div>
-          <label> Grapefruit</label>
         </div>
       </div>
     </div>
@@ -127,16 +119,14 @@ type        : 'UI Module'
     <p>A checkbox can be a different size.</p>
     <div class="ui large checkbox">
       <input type="checkbox" />
-      <label></label>
+      <label>Add a pro membership</label>
     </div>
-    <label>Add a pro membership</label>
   </div>
   <div class="another example">
     <div class="ui huge checkbox">
       <input type="checkbox" />
-      <label></label>
+      <label>Signup for our mailing list</label>
     </div>
-    <label>Signup for our mailing list</label>
   </div>
 
   <h2 class="ui dividing header">Behavior</h2>

node/src/documents/modules/form.html.eco

@@ -108,9 +108,8 @@ type        : 'UI Behavior'
       <div class="inline field">
         <div class="ui checkbox">
           <input type="checkbox" name="terms" />
-          <label class="box"></label>
+          <label>I agree to the terms and conditions</label>
         </div>
-        <label>I agree to the terms and conditions</label>
       </div>
       <div class="ui blue submit button">Submit</div>
     </div>
@@ -144,9 +143,8 @@ type        : 'UI Behavior'
       <div class="inline field">
         <div class="ui checkbox">
           <input type="checkbox" name="terms" />
-          <label class="box"></label>
+          <label>I agree to the Terms and Conditions</label>
         </div>
-        <label>I agree to the terms and conditions</label>
       </div>
       <div class="ui blue submit button">Submit</div>
       <div class="ui error message"></div>
@@ -224,9 +222,8 @@ type        : 'UI Behavior'
       <div class="inline field">
         <div class="ui checkbox">
           <input type="checkbox" name="terms" />
-          <label class="box"></label>
+          <label>I agree to the Terms and Conditions</label>
         </div>
-        <label>I agree to the terms and conditions</label>
       </div>
       <div class="ui blue submit button">Submit</div>
     </div>

node/src/files/build/less/modules/checkbox.less

@@ -19,60 +19,78 @@
 
 
 /*--- Content ---*/
+
 .ui.checkbox {
   position: relative;
   display: inline-block;
   outline: none;
-
-  margin-right: 0.5em;
   vertical-align: middle;
 }
 .ui.checkbox input {
+  position: absolute;
+  top: 0px;
+  left: 0px;
   opacity: 0;
   outline: none;
 }
 
 
 /*--- Box ---*/
+
 .ui.checkbox .box,
 .ui.checkbox label {
-  outline: none;
   cursor: pointer;
+  position: relative;
+
+  min-width: 1em;
+  height: 1em;
+
+  padding-left: 2em;
+  outline: none;
+
+  white-space: nowrap;
+}
+
+.ui.checkbox .box:before,
+.ui.checkbox label:before {
   position: absolute;
+  top: 0.25em;
+  left: 0em;
 
   line-height: 1;
   width: 1em;
   height: 1em;
-  bottom: 0em;
   left: 0em;
-  border-radius: 4px;
+  content: '';
 
-  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
 
   background: #FFFFFF;
 
   -webkit-transition:
-    background-color 0.1s ease-out,
-    box-shadow 0.1s ease-out
+    background-color 0.3s ease,
+    box-shadow 0.3s ease
   ;
   -moz-transition:
-    background-color 0.1s ease-out,
-    box-shadow 0.1s ease-out
+    background-color 0.3s ease,
+    box-shadow 0.3s ease
   ;
   -o-transition:
-    background-color 0.1s ease-out,
-    box-shadow 0.1s ease-out
+    background-color 0.3s ease,
+    box-shadow 0.3s ease
   ;
   -ms-transition:
-    background-color 0.1s ease-out,
-    box-shadow 0.1s ease-out
+    background-color 0.3s ease,
+    box-shadow 0.3s ease
   ;
   transition:
-    background-color 0.1s ease-out,
-    box-shadow 0.1s ease-out
+    background-color 0.3s ease,
+    box-shadow 0.3s ease
   ;
+
+  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
 }
 
 /*--- Checkbox ---*/
@@ -95,13 +113,31 @@
 }
 .ui.checkbox .box:after,
 .ui.checkbox label:after {
-  top: 0.3em;
+  top: 0.54em;
   left: 0.2em;
   width: 0.45em;
   height: 0.15em;
 }
 
-/*--- Label ---*/
+/*--- Inside Label ---*/
+.ui.checkbox label {
+  color: rgba(0, 0, 0, 0.6);
+
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -o-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+}
+.ui.checkbox label:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.ui.checkbox input:focus + label {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/*--- Outside Label  ---*/
 .ui.checkbox + label {
   cursor: pointer;
   opacity: 0.85;
@@ -111,27 +147,33 @@
   opacity: 1;
 }
 
+
 /*******************************
            States
 *******************************/
 
 
 /*--- Hover ---*/
-.ui.checkbox .box:hover,
-.ui.checkbox label:hover {
-  background-color: #FAFAFA;
+.ui.checkbox .box:hover::before,
+.ui.checkbox label:hover::before {
   -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
   box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
 }
 
-
 /*--- Down ---*/
-.ui.checkbox .box:active,
-.ui.checkbox label:active {
+.ui.checkbox .box:active::before,
+.ui.checkbox label:active::before {
   background-color: #F5F5F5;
 }
 
+/*--- Focus ---*/
+.ui.checkbox input:focus + .box:before,
+.ui.checkbox input:focus + label:before {
+  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+}
 
 /*--- Active ---*/
 .ui.checkbox input:checked + .box:after,
@@ -141,13 +183,13 @@
   opacity: 1;
 }
 
-
 /*--- Disabled ---*/
 .ui.disabled.checkbox + .box:after,
 .ui.checkbox input[disabled] + .box:after,
 .ui.disabled.checkbox label,
 .ui.checkbox input[disabled] + label {
   opacity: 0.4;
+  color: rgba(0, 0, 0, 0.3);
 }
 
 
@@ -160,26 +202,22 @@
      Radio
 ---------------*/
 
-.ui.radio.checkbox {
-  width: 14px;
-  height: 16px;
-}
-.ui.radio.checkbox .box,
-.ui.radio.checkbox label {
-  width: 14px;
-  height: 14px;
+.ui.radio.checkbox .box:before,
+.ui.radio.checkbox label:before {
+  width: 1em;
+  height: 1em;
   -webkit-border-radius: 500px;
   -moz-border-radius: 500px;
   border-radius: 500px;
 }
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
-  top: 3px;
-  left: 3px;
-
   border: none;
-  width: 8px;
-  height: 8px;
+  top: 0.45em;
+  left: 0.2em;
+
+  width: 0.6em;
+  height: 0.6em;
 
   background-color: #555555;
 
@@ -194,28 +232,34 @@
 
 .ui.slider.checkbox {
   cursor: pointer;
-  width: 3em;
+  min-width: 3em;
   height: 2em;
 }
+
 /* Line */
 .ui.slider.checkbox:after {
   position: absolute;
-  top: 1em;
+  top: 0.8em;
   left: 0em;
   content: '';
 
-  width: 100%;
+  width: 3em;
   height: 2px;
   background-color: rgba(0, 0, 0, 0.1);
 }
+
 /* Button */
 .ui.slider.checkbox .box,
 .ui.slider.checkbox label {
+  padding-left: 4em;
+}
+.ui.slider.checkbox .box:before,
+.ui.slider.checkbox label:before {
   cursor: pointer;
   display: block;
 
   position: absolute;
-  top: 0.25em;
+  top: 0em;
   left: 0;
   z-index: 1;
 
@@ -243,28 +287,62 @@
   position: absolute;
   content: '';
   top: 0.375em;
-  left: 0.375em;
+  left: 0em;
+  z-index: 2;
+
+  margin-left: 0.375em;
 
   border: none;
   width: 0.75em;
   height: 0.75em;
 
-  background-color: #D95C5C;
-
   border-radius: 50rem;
 
-  -webkit-transition: background 0.3s ease 0s;
-  -moz-transition: background 0.3s ease 0s;
-  -o-transition: background 0.3s ease 0s;
-  -ms-transition: background 0.3s ease 0s;
-  transition: background 0.3s ease 0s;
+  -webkit-transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -moz-transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -o-transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -ms-transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
 }
 
-/* Active Slider Toggle */
-.ui.slider.checkbox input:checked + .box,
-.ui.slider.checkbox input:checked + label {
+/* Selected Slider Toggle */
+.ui.slider.checkbox input:checked + .box:before,
+.ui.slider.checkbox input:checked + label:before,
+.ui.slider.checkbox input:checked + .box:after,
+.ui.slider.checkbox input:checked + label:after {
   left: 1.75em;
 }
+
+/* Off Color */
+// .ui.slider.checkbox .box,
+// .ui.slider.checkbox label {
+//   color: #D95C5C !important;
+// }
+.ui.slider.checkbox .box:after,
+.ui.slider.checkbox label:after {
+  background-color: #D95C5C;
+}
+
+/* On Color */
+// .ui.slider.checkbox input:checked + .box,
+// .ui.slider.checkbox input:checked + label {
+//   color: #89B84C !important;
+// }
 .ui.slider.checkbox input:checked + .box:after,
 .ui.slider.checkbox input:checked + label:after {
   background-color: #89B84C;
@@ -278,22 +356,28 @@
 
 .ui.toggle.checkbox {
   cursor: pointer;
-  width: 3em;
   height: 2em;
 }
-/* Line */
-.ui.toggle.checkbox:after {
+
+.ui.toggle.checkbox .box,
+.ui.toggle.checkbox label {
+  padding-left: 4em;
+}
+
+/* Switch */
+.ui.toggle.checkbox .box:before,
+.ui.toggle.checkbox label:before {
   cursor: pointer;
   display: block;
 
   position: absolute;
   content: '';
-  top: 0.25em;
+  top: 0em;
   left: 0em;
   z-index: 1;
 
   background-color: #FFFFFF;
-  width: 100%;
+  width: 3em;
   height: 1.5em;
 
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
@@ -302,32 +386,21 @@
 
   border-radius: 50rem;
 }
-.ui.toggle.checkbox .box,
-.ui.toggle.checkbox label {
-  position: absolute;
-  top: 0.65em;
-  left: 0.5em;
 
-  -webkit-transition: left 0.3s ease 0s;
-  -moz-transition: left 0.3s ease 0s;
-  -o-transition: left 0.3s ease 0s;
-  -ms-transition: left 0.3s ease 0s;
-  transition: left 0.3s ease 0s;
+/* Activation Light */
+.ui.toggle.checkbox .box:after,
+.ui.toggle.checkbox label:after {
+  opacity: 1;
 
   background-color: transparent;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-}
-/* Button Activation Light */
-.ui.toggle.checkbox .box:after,
-.ui.toggle.checkbox label:after {
-  opacity: 1;
 
   content: '';
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 0.35em;
+  left: 0.5em;
   z-index: 2;
 
   border: none;
@@ -335,23 +408,40 @@
   height: 0.75em;
 
   background-color: #D95C5C;
-
   border-radius: 50rem;
 
-  -webkit-transition: background 0.3s ease 0s;
-  -moz-transition: background 0.3s ease 0s;
-  -o-transition: background 0.3s ease 0s;
-  -ms-transition: background 0.3s ease 0s;
-  transition: background 0.3s ease 0s;
+  -webkit-transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -moz-transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -o-transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -ms-transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
 }
 
-/* Active toggle Toggle */
-.ui.toggle.checkbox input:checked + .box,
-.ui.toggle.checkbox input:checked + label {
-  left: 1.75em;
+/* Active */
+.ui.toggle.checkbox:active .box:before,
+.ui.toggle.checkbox:active label:before {
+  background-color: #F5F5F5;
 }
+
+/* Active */
 .ui.toggle.checkbox input:checked + .box:after,
 .ui.toggle.checkbox input:checked + label:after {
+  left: 1.75em;
   background-color: #89B84C;
 }
 

node/src/files/build/packaged/css/semantic.css.REMOVED.git-id

@@ -1 +1 @@
-b25945569905df58941c012736e9c5eb39be8782
+fa58eb78069e1494fe65e5271a0b1cf0e6075e00

node/src/files/build/packaged/javascript/semantic.js.REMOVED.git-id

@@ -1 +0,0 @@
-5078c4c0f7a4107ca4e37f1a3fbcd47f14cf328a

node/src/files/build/uncompressed/modules/checkbox.css

@@ -19,34 +19,45 @@
   position: relative;
   display: inline-block;
   outline: none;
-  margin-right: 0.5em;
   vertical-align: middle;
 }
 .ui.checkbox input {
+  position: absolute;
+  top: 0px;
+  left: 0px;
   opacity: 0;
   outline: none;
 }
 /*--- Box ---*/
 .ui.checkbox .box,
 .ui.checkbox label {
-  outline: none;
   cursor: pointer;
+  position: relative;
+  min-width: 1em;
+  height: 1em;
+  padding-left: 2em;
+  outline: none;
+  white-space: nowrap;
+}
+.ui.checkbox .box:before,
+.ui.checkbox label:before {
   position: absolute;
+  top: 0.25em;
   line-height: 1;
   width: 1em;
   height: 1em;
-  bottom: 0em;
   left: 0em;
+  content: '';
   border-radius: 4px;
+  background: #FFFFFF;
+  -webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  -moz-transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  -o-transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  -ms-transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
   -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
   box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
-  background: #FFFFFF;
-  -webkit-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out;
-  -moz-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out;
-  -o-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out;
-  -ms-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out;
-  transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out;
 }
 /*--- Checkbox ---*/
 .ui.checkbox .box:after,
@@ -68,12 +79,27 @@
 }
 .ui.checkbox .box:after,
 .ui.checkbox label:after {
-  top: 0.3em;
+  top: 0.54em;
   left: 0.2em;
   width: 0.45em;
   height: 0.15em;
 }
-/*--- Label ---*/
+/*--- Inside Label ---*/
+.ui.checkbox label {
+  color: rgba(0, 0, 0, 0.6);
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -o-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+}
+.ui.checkbox label:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.checkbox input:focus + label {
+  color: rgba(0, 0, 0, 0.8);
+}
+/*--- Outside Label  ---*/
 .ui.checkbox + label {
   cursor: pointer;
   opacity: 0.85;
@@ -86,18 +112,24 @@
            States
 *******************************/
 /*--- Hover ---*/
-.ui.checkbox .box:hover,
-.ui.checkbox label:hover {
-  background-color: #FAFAFA;
+.ui.checkbox .box:hover::before,
+.ui.checkbox label:hover::before {
   -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
   box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
 }
 /*--- Down ---*/
-.ui.checkbox .box:active,
-.ui.checkbox label:active {
+.ui.checkbox .box:active::before,
+.ui.checkbox label:active::before {
   background-color: #F5F5F5;
 }
+/*--- Focus ---*/
+.ui.checkbox input:focus + .box:before,
+.ui.checkbox input:focus + label:before {
+  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+}
 /*--- Active ---*/
 .ui.checkbox input:checked + .box:after,
 .ui.checkbox input:checked + label:after {
@@ -111,6 +143,7 @@
 .ui.disabled.checkbox label,
 .ui.checkbox input[disabled] + label {
   opacity: 0.4;
+  color: rgba(0, 0, 0, 0.3);
 }
 /*******************************
           Variations
@@ -118,25 +151,21 @@
 /*--------------
      Radio
 ---------------*/
-.ui.radio.checkbox {
-  width: 14px;
-  height: 16px;
-}
-.ui.radio.checkbox .box,
-.ui.radio.checkbox label {
-  width: 14px;
-  height: 14px;
+.ui.radio.checkbox .box:before,
+.ui.radio.checkbox label:before {
+  width: 1em;
+  height: 1em;
   -webkit-border-radius: 500px;
   -moz-border-radius: 500px;
   border-radius: 500px;
 }
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
-  top: 3px;
-  left: 3px;
   border: none;
-  width: 8px;
-  height: 8px;
+  top: 0.45em;
+  left: 0.2em;
+  width: 0.6em;
+  height: 0.6em;
   background-color: #555555;
   -webkit-border-radius: 500px;
   -moz-border-radius: 500px;
@@ -147,26 +176,30 @@
 ---------------*/
 .ui.slider.checkbox {
   cursor: pointer;
-  width: 3em;
+  min-width: 3em;
   height: 2em;
 }
 /* Line */
 .ui.slider.checkbox:after {
   position: absolute;
-  top: 1em;
+  top: 0.8em;
   left: 0em;
   content: '';
-  width: 100%;
+  width: 3em;
   height: 2px;
   background-color: rgba(0, 0, 0, 0.1);
 }
 /* Button */
 .ui.slider.checkbox .box,
 .ui.slider.checkbox label {
+  padding-left: 4em;
+}
+.ui.slider.checkbox .box:before,
+.ui.slider.checkbox label:before {
   cursor: pointer;
   display: block;
   position: absolute;
-  top: 0.25em;
+  top: 0em;
   left: 0;
   z-index: 1;
   width: 1.5em;
@@ -188,23 +221,42 @@
   position: absolute;
   content: '';
   top: 0.375em;
-  left: 0.375em;
+  left: 0em;
+  z-index: 2;
+  margin-left: 0.375em;
   border: none;
   width: 0.75em;
   height: 0.75em;
-  background-color: #D95C5C;
   border-radius: 50rem;
-  -webkit-transition: background 0.3s ease 0s;
-  -moz-transition: background 0.3s ease 0s;
-  -o-transition: background 0.3s ease 0s;
-  -ms-transition: background 0.3s ease 0s;
-  transition: background 0.3s ease 0s;
-}
-/* Active Slider Toggle */
-.ui.slider.checkbox input:checked + .box,
-.ui.slider.checkbox input:checked + label {
+  -webkit-transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -moz-transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -o-transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -ms-transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+}
+/* Selected Slider Toggle */
+.ui.slider.checkbox input:checked + .box:before,
+.ui.slider.checkbox input:checked + label:before,
+.ui.slider.checkbox input:checked + .box:after,
+.ui.slider.checkbox input:checked + label:after {
   left: 1.75em;
 }
+/* Off Color */
+.ui.slider.checkbox .box:after,
+.ui.slider.checkbox label:after {
+  background-color: #D95C5C;
+}
+/* On Color */
 .ui.slider.checkbox input:checked + .box:after,
 .ui.slider.checkbox input:checked + label:after {
   background-color: #89B84C;
@@ -214,68 +266,73 @@
 ---------------*/
 .ui.toggle.checkbox {
   cursor: pointer;
-  width: 3em;
   height: 2em;
 }
-/* Line */
-.ui.toggle.checkbox:after {
+.ui.toggle.checkbox .box,
+.ui.toggle.checkbox label {
+  padding-left: 4em;
+}
+/* Switch */
+.ui.toggle.checkbox .box:before,
+.ui.toggle.checkbox label:before {
   cursor: pointer;
   display: block;
   position: absolute;
   content: '';
-  top: 0.25em;
+  top: 0em;
   left: 0em;
   z-index: 1;
   background-color: #FFFFFF;
-  width: 100%;
+  width: 3em;
   height: 1.5em;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
   border-radius: 50rem;
 }
-.ui.toggle.checkbox .box,
-.ui.toggle.checkbox label {
-  position: absolute;
-  top: 0.65em;
-  left: 0.5em;
-  -webkit-transition: left 0.3s ease 0s;
-  -moz-transition: left 0.3s ease 0s;
-  -o-transition: left 0.3s ease 0s;
-  -ms-transition: left 0.3s ease 0s;
-  transition: left 0.3s ease 0s;
+/* Activation Light */
+.ui.toggle.checkbox .box:after,
+.ui.toggle.checkbox label:after {
+  opacity: 1;
   background-color: transparent;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-}
-/* Button Activation Light */
-.ui.toggle.checkbox .box:after,
-.ui.toggle.checkbox label:after {
-  opacity: 1;
   content: '';
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 0.35em;
+  left: 0.5em;
   z-index: 2;
   border: none;
   width: 0.75em;
   height: 0.75em;
   background-color: #D95C5C;
   border-radius: 50rem;
-  -webkit-transition: background 0.3s ease 0s;
-  -moz-transition: background 0.3s ease 0s;
-  -o-transition: background 0.3s ease 0s;
-  -ms-transition: background 0.3s ease 0s;
-  transition: background 0.3s ease 0s;
-}
-/* Active toggle Toggle */
-.ui.toggle.checkbox input:checked + .box,
-.ui.toggle.checkbox input:checked + label {
-  left: 1.75em;
+  -webkit-transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -moz-transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -o-transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  -ms-transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+  transition: background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
+}
+/* Active */
+.ui.toggle.checkbox:active .box:before,
+.ui.toggle.checkbox:active label:before {
+  background-color: #F5F5F5;
 }
+/* Active */
 .ui.toggle.checkbox input:checked + .box:after,
 .ui.toggle.checkbox input:checked + label:after {
+  left: 1.75em;
   background-color: #89B84C;
 }
 /*--------------