_checkbox.scss in semantic-ui-sass-0.8.0.0

- old
+ new

@@ -22,12 +22,13 @@
 
 .ui.checkbox {
   position: relative;
   display: inline-block;
 
-  width: 1em;
-  height: 1.5em;
+  min-width: 1em;
+  height: 1.25em;
+  line-height: 1em;
 
   outline: none;
   vertical-align: middle;
 }
 .ui.checkbox input {
@@ -42,25 +43,18 @@
 /*--- Box ---*/
 
 .ui.checkbox .box,
 .ui.checkbox label {
   cursor: pointer;
-  position: relative;
-
-  min-width: 1em;
-  height: 1.5em;
-
   padding-left: 2em;
   outline: none;
-
-  white-space: nowrap;
 }
 
 .ui.checkbox .box:before,
 .ui.checkbox label:before {
   position: absolute;
-  top: 0.25em;
+  top: 0em;
   left: 0em;
 
   line-height: 1;
   width: 1em;
   height: 1em;
@@ -115,11 +109,11 @@
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 .ui.checkbox .box:after,
 .ui.checkbox label:after {
-  top: 0.54em;
+  top: 0.275em;
   left: 0.2em;
   width: 0.45em;
   height: 0.15em;
 }
 
@@ -206,27 +200,29 @@
      Radio
 ---------------*/
 
 .ui.radio.checkbox .box:before,
 .ui.radio.checkbox label:before {
-  width: 1em;
+  min-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 {
   border: none;
-  top: 0.45em;
+  top: 0.2em;
   left: 0.2em;
 
   width: 0.6em;
   height: 0.6em;
 
   background-color: #555555;
 
+  transform: none;
+
   -webkit-border-radius: 500px;
   -moz-border-radius: 500px;
   border-radius: 500px;
 }
 
@@ -235,17 +231,16 @@
 ---------------*/
 
 .ui.slider.checkbox {
   cursor: pointer;
   min-width: 3em;
-  height: 2em;
 }
 
 /* Line */
 .ui.slider.checkbox:after {
   position: absolute;
-  top: 0.8em;
+  top: 0.5em;
   left: 0em;
   content: '';
 
   width: 3em;
   height: 2px;
@@ -261,12 +256,12 @@
 .ui.slider.checkbox label:before {
   cursor: pointer;
   display: block;
 
   position: absolute;
-  top: 0em;
-  left: 0;
+  top: -0.25em;
+  left: 0em;
   z-index: 1;
 
   width: 1.5em;
   height: 1.5em;
 
@@ -288,11 +283,11 @@
 .ui.slider.checkbox label:after {
   opacity: 1;
 
   position: absolute;
   content: '';
-  top: 0.375em;
+  top: 0.15em;
   left: 0em;
   z-index: 2;
 
   margin-left: 0.375em;
 
@@ -300,10 +295,12 @@
   width: 0.75em;
   height: 0.75em;
 
   border-radius: 50rem;
 
+  transform: none;
+
   -webkit-transition:
     background 0.3s ease 0s,
     left 0.3s ease 0s
   ;
   -moz-transition:
@@ -358,11 +355,10 @@
      Toggle
 ---------------*/
 
 .ui.toggle.checkbox {
   cursor: pointer;
-  height: 2em;
 }
 
 .ui.toggle.checkbox .box,
 .ui.toggle.checkbox label {
   padding-left: 4em;
@@ -374,11 +370,11 @@
   cursor: pointer;
   display: block;
 
   position: absolute;
   content: '';
-  top: 0em;
+  top: -0.25em;
   left: 0em;
   z-index: 1;
 
   background-color: #FFFFFF;
   width: 3em;
@@ -401,10 +397,10 @@
   -moz-box-shadow: none;
   box-shadow: none;
 
   content: '';
   position: absolute;
-  top: 0.35em;
+  top: 0.15em;
   left: 0.5em;
   z-index: 2;
 
   border: none;
   width: 0.75em;
\ No newline at end of file