updates checkbox to include formatting for both inline labels and labels outside

Former-commit-id: 622ca0e181
Former-commit-id: 722eb1d762

src/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;
 }