moving steps over from em

build/minified/elements/step.min.css

@@ -1 +1 @@
-.ui.steps{display:inline-block;font-size:0;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}.ui.steps .step{display:inline-block;position:relative;padding:13px 35px 13px 45px;background-color:#FFF;color:#888}.ui.steps .step:after{position:absolute;content:'';z-index:2;top:7px;right:-16px;width:32px;height:32px;border-top:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);background-color:#FFF;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ui.steps .step:first-child{padding-left:25px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}.ui.steps .step:last-child{-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.ui.steps .step:last-child{margin-right:0}.ui.steps .step:last-child:after{width:0!important;height:0!important}.attached.ui.steps{margin:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.attached.ui.steps .step:first-child{-webkit-border-radius:4px 0 0;-moz-border-radius:4px 0 0;border-radius:4px 0 0}.attached.ui.steps .step:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0}.bottom.attached.ui.steps{margin-top:-1px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.bottom.attached.ui.steps .step:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px}.bottom.attached.ui.steps .step:last-child{-webkit-border-radius:0 0 4px;-moz-border-radius:0 0 4px;border-radius:0 0 4px}.ui.steps.fluid,.ui.steps.fluid>.step{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.steps.two.fluid>.step{width:50%}.ui.steps.three.fluid>.step{width:33.333%}.ui.steps.four.fluid>.step{width:25%}.ui.steps.five.fluid>.step{width:20%}.ui.steps.six.fluid>.step{width:16.666%}.ui.steps.seven.fluid>.step{width:14.285%}.ui.steps.eight.fluid>.step{width:12.5%}.ui.steps .step{font-size:1rem}.ui.steps .hover.step{cursor:pointer;background:-webkit-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-moz-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top,#fff 0,#f0f0f0 100%);background:linear-gradient(top,#fff 0,#f0f0f0 100%);-moz-box-shadow:0 0 2px rgba(0,0,0,.2);-webkit-box-shadow:0 0 2px rgba(0,0,0,.2);box-shadow:0 0 2px rgba(0,0,0,.2)}.ui.steps .hover.step:after{cursor:pointer;background:-webkit-linear-gradient(top left,#fff 0,#f0f0f0 100%);background:-moz-linear-gradient(top left,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top left,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top left,#fff 0,#f0f0f0 100%);background:linear-gradient(top left,#fff 0,#f0f0f0 100%);-moz-box-shadow:2px -2px 1px rgba(0,0,0,.2);-webkit-box-shadow:2px -2px 1px rgba(0,0,0,.2);box-shadow:2px -2px 1px rgba(0,0,0,.2)}.ui.steps .hover.step:before{position:absolute;top:7px;left:-15px;width:32px;height:31px;content:'';background-color:transparent;background-image:none;-moz-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1) inset;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1) inset;box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1) inset;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:2}.ui.steps .hover:first-child:before{width:0;height:0}.ui.steps .down.step{background:-webkit-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-moz-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top,#f0f0f0 0,#fff 100%);background:linear-gradient(top,#f0f0f0 0,#fff 100%)}.ui.steps .down.step:after{background:-webkit-linear-gradient(top left,#f0f0f0 0,#fff 100%);background:-moz-linear-gradient(top left,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top left,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top left,#f0f0f0 0,#fff 100%);background:linear-gradient(top left,#f0f0f0 0,#fff 100%)}.ui.steps .active.step{cursor:auto;background-color:#555;color:#FFF;font-weight:700}.ui.steps .active.step:first-child:before{width:0;height:0}.ui.steps .active.step:after{background-color:#555;border-color:#555;-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.15) inset;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.15) inset;box-shadow:-2px 2px 2px rgba(0,0,0,.15) inset}.ui.steps .disabled.step{color:#BFBFBF}
+.ui.steps{display:inline-block;font-size:0;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-border-radius:.3125em;-webkit-border-radius:.3125em;border-radius:.3125em}.ui.steps .step{display:inline-block;position:relative;padding:.82em 1.5em .82em 2.5em;background-color:#FFF;color:#888}.ui.steps .step:after{position:absolute;content:'';z-index:2;top:.45em;right:-1em;width:2em;height:2em;border-top:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);background-color:#FFF;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ui.steps .step:first-child{padding-left:20.3125em;-webkit-border-radius:.3125em 0 0 .3125em;-moz-border-radius:.3125em 0 0 .3125em;border-radius:.3125em 0 0 .3125em}.ui.steps .step:last-child{-webkit-border-radius:0 .3125em .3125em 0;-moz-border-radius:0 .3125em .3125em 0;border-radius:0 .3125em .3125em 0}.ui.steps .step:last-child{margin-right:0}.ui.steps .step:last-child:after{width:0!important;height:0!important}.attached.ui.steps{margin:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.attached.ui.steps .step:first-child{-webkit-border-radius:.3125em 0 0;-moz-border-radius:.3125em 0 0;border-radius:.3125em 0 0}.attached.ui.steps .step:last-child{-webkit-border-radius:0 .3125em 0 0;-moz-border-radius:0 .3125em 0 0;border-radius:0 .3125em 0 0}.bottom.attached.ui.steps{margin-top:-1px;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.bottom.attached.ui.steps .step:first-child{-webkit-border-radius:0 0 0 .3125em;-moz-border-radius:0 0 0 .3125em;border-radius:0 0 0 .3125em}.bottom.attached.ui.steps .step:last-child{-webkit-border-radius:0 0 .3125em;-moz-border-radius:0 0 .3125em;border-radius:0 0 .3125em}.ui.steps.fluid,.ui.steps.fluid>.step{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.steps.two.fluid>.step{width:50%}.ui.steps.three.fluid>.step{width:33.333%}.ui.steps.four.fluid>.step{width:25%}.ui.steps.five.fluid>.step{width:20%}.ui.steps.six.fluid>.step{width:16.666%}.ui.steps.seven.fluid>.step{width:14.285%}.ui.steps.eight.fluid>.step{width:12.5%}.ui.steps .step{font-size:1rem}.ui.steps .hover.step{cursor:pointer;background:-webkit-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-moz-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top,#fff 0,#f0f0f0 100%);background:linear-gradient(top,#fff 0,#f0f0f0 100%);-moz-box-shadow:0 0 2px rgba(0,0,0,.2);-webkit-box-shadow:0 0 2px rgba(0,0,0,.2);box-shadow:0 0 2px rgba(0,0,0,.2)}.ui.steps .hover.step:after{cursor:pointer;background:-webkit-linear-gradient(top left,#fff 0,#f0f0f0 100%);background:-moz-linear-gradient(top left,#fff 0,#f0f0f0 100%);background:-o-linear-gradient(top left,#fff 0,#f0f0f0 100%);background:-ms-linear-gradient(top left,#fff 0,#f0f0f0 100%);background:linear-gradient(top left,#fff 0,#f0f0f0 100%);-moz-box-shadow:2px -2px 1px rgba(0,0,0,.2);-webkit-box-shadow:2px -2px 1px rgba(0,0,0,.2);box-shadow:2px -2px 1px rgba(0,0,0,.2)}.ui.steps .hover.step:before{position:absolute;top:7px;left:-10.3125em;width:32px;height:31px;content:'';background-color:transparent;background-image:none;-moz-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1) inset;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1) inset;box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1) inset;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:2}.ui.steps .hover:first-child:before{width:0;height:0}.ui.steps .down.step{background:-webkit-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-moz-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top,#f0f0f0 0,#fff 100%);background:linear-gradient(top,#f0f0f0 0,#fff 100%)}.ui.steps .down.step:after{background:-webkit-linear-gradient(top left,#f0f0f0 0,#fff 100%);background:-moz-linear-gradient(top left,#f0f0f0 0,#fff 100%);background:-o-linear-gradient(top left,#f0f0f0 0,#fff 100%);background:-ms-linear-gradient(top left,#f0f0f0 0,#fff 100%);background:linear-gradient(top left,#f0f0f0 0,#fff 100%)}.ui.steps .active.step{cursor:auto;background-color:#555;color:#FFF;font-weight:700}.ui.steps .active.step:first-child:before{width:0;height:0}.ui.steps .active.step:after{background-color:#555;border-color:#555;-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.15) inset;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.15) inset;box-shadow:-2px 2px 2px rgba(0,0,0,.15) inset}.ui.steps .disabled.step{color:#BFBFBF}

build/uncompressed/elements/step.css

@@ -1,17 +1,17 @@
 .ui.steps {
   display: inline-block;
-  font-size: 0px;
+  font-size: 0em;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
+  -moz-border-radius: 0.3125em;
+  -webkit-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
 .ui.steps .step {
   display: inline-block;
   position: relative;
-  padding: 13px 35px 13px 45px;
+  padding: 0.82em 1.5em 0.82em 2.5em;
   background-color: #FFFFFF;
   color: #888888;
 }
@@ -19,10 +19,10 @@
   position: absolute;
   content: '';
   z-index: 2;
-  top: 7px;
-  right: -16px;
-  width: 32px;
-  height: 32px;
+  top: 0.45em;
+  right: -1em;
+  width: 2em;
+  height: 2em;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   background-color: #FFFFFF;
@@ -31,59 +31,59 @@
   transform: rotate(45deg);
 }
 .ui.steps .step:first-child {
-  padding-left: 25px;
-  -webkit-border-radius: 5px 0px 0px 5px;
-  -moz-border-radius: 5px 0px 0px 5px;
-  border-radius: 5px 0px 0px 5px;
+  padding-left: 20.3125em;
+  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
+  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
+  border-radius: 0.3125em 0em 0em 0.3125em;
 }
 .ui.steps .step:last-child {
-  -webkit-border-radius: 0px 5px 5px 0px;
-  -moz-border-radius: 0px 5px 5px 0px;
-  border-radius: 0px 5px 5px 0px;
+  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
+  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
+  border-radius: 0em 0.3125em 0.3125em 0em;
 }
 .ui.steps .step:last-child {
-  margin-right: 0px;
+  margin-right: 0em;
 }
 .ui.steps .step:last-child:after {
-  width: 0px !important;
-  height: 0px !important;
+  width: 0em !important;
+  height: 0em !important;
 }
 /*******************************
            Variations
 *******************************/
 /* Attached */
 .attached.ui.steps {
-  margin: 0px;
-  -webkit-border-radius: 4px 4px 0px 0px;
-  -moz-border-radius: 4px 4px 0px 0px;
-  border-radius: 4px 4px 0px 0px;
+  margin: 0em;
+  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  border-radius: 0.3125em 0.3125em 0em 0em;
 }
 .attached.ui.steps .step:first-child {
-  -webkit-border-radius: 4px 0px 0px 0px;
-  -moz-border-radius: 4px 0px 0px 0px;
-  border-radius: 4px 0px 0px 0px;
+  -webkit-border-radius: 0.3125em 0em 0em 0em;
+  -moz-border-radius: 0.3125em 0em 0em 0em;
+  border-radius: 0.3125em 0em 0em 0em;
 }
 .attached.ui.steps .step:last-child {
-  -webkit-border-radius: 0px 4px 0px 0px;
-  -moz-border-radius: 0px 4px 0px 0px;
-  border-radius: 0px 4px 0px 0px;
+  -webkit-border-radius: 0em 0.3125em 0em 0em;
+  -moz-border-radius: 0em 0.3125em 0em 0em;
+  border-radius: 0em 0.3125em 0em 0em;
 }
 /* Bottom Side */
 .bottom.attached.ui.steps {
   margin-top: -1px;
-  -webkit-border-radius: 0px 0px 4px 4px;
-  -moz-border-radius: 0px 0px 4px 4px;
-  border-radius: 0px 0px 4px 4px;
+  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  border-radius: 0em 0em 0.3125em 0.3125em;
 }
 .bottom.attached.ui.steps .step:first-child {
-  -webkit-border-radius: 0px 0px 0px 4px;
-  -moz-border-radius: 0px 0px 0px 4px;
-  border-radius: 0px 0px 0px 4px;
+  -webkit-border-radius: 0em 0em 0em 0.3125em;
+  -moz-border-radius: 0em 0em 0em 0.3125em;
+  border-radius: 0em 0em 0em 0.3125em;
 }
 .bottom.attached.ui.steps .step:last-child {
-  -webkit-border-radius: 0px 0px 4px 0px;
-  -moz-border-radius: 0px 0px 4px 0px;
-  border-radius: 0px 0px 4px 0px;
+  -webkit-border-radius: 0em 0em 0.3125em 0em;
+  -moz-border-radius: 0em 0em 0.3125em 0em;
+  border-radius: 0em 0em 0.3125em 0em;
 }
 /* Fluid  */
 .ui.steps.fluid,
@@ -132,9 +132,9 @@
   background: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
   background: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
   background: linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0em 0em 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0em 0em 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0em 0em 2px rgba(0, 0, 0, 0.2);
 }
 .ui.steps .hover.step:after {
   cursor: pointer;
@@ -150,23 +150,23 @@
 .ui.steps .hover.step:before {
   position: absolute;
   top: 7px;
-  left: -15px;
+  left: -10.3125em;
   width: 32px;
   height: 31px;
   content: '';
   background-color: transparent;
   background-image: none;
-  -moz-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-  -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: -1px 1px 1px 0em rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: -1px 1px 1px 0em rgba(0, 0, 0, 0.1) inset;
+  box-shadow: -1px 1px 1px 0em rgba(0, 0, 0, 0.1) inset;
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   z-index: 2;
 }
 .ui.steps .hover:first-child:before {
-  width: 0px;
-  height: 0px;
+  width: 0em;
+  height: 0em;
 }
 /* Down */
 .ui.steps .down.step {
@@ -191,8 +191,8 @@
   font-weight: bold;
 }
 .ui.steps .active.step:first-child:before {
-  width: 0px;
-  height: 0px;
+  width: 0em;
+  height: 0em;
 }
 .ui.steps .active.step:after {
   background-color: #555555;

node/Gruntfile.js

@@ -10,13 +10,13 @@ module.exports = function(grunt) {
       // copies assets and js over to build dir
       'copy:toBuild',
 
-      // creates minified css of each
+      // creates minified css of each file
       'cssmin:minifyCSS',
 
-      // creates release css of all together
+      // creates release css 
       'cssmin:buildReleaseCSS',
 
-      // creates minified js of each
+      // creates minified js of each file
       'uglify:minifyJS',
 
       // creates release js of all together
@@ -212,7 +212,5 @@ module.exports = function(grunt) {
 
   grunt.initConfig(config);
 
-  // add watch task to default task
-  tasks.push('watch');
-  grunt.registerTask('default', tasks);
+  grunt.registerTask('default', [ 'watch' ]);
 };

node/src/documents/elements/step.html

@@ -34,7 +34,7 @@ type   : 'UI Element'
       <div class="ui active step">
         Billing
       </div>
-      <div class="ui step">
+      <div class="ui disabled step">
         Confirm Order
       </div>
       <div class="ui disabled step">
@@ -56,7 +56,7 @@ type   : 'UI Element'
       <div class="ui disabled step">
         Billing
       </div>
-      <div class="ui step">
+      <div class="ui disabled step">
         Confirm Order
       </div>
       <div class="ui disabled step">

node/src/files/components/semantic/elements/step.css

@@ -1,17 +1,17 @@
 .ui.steps {
   display: inline-block;
-  font-size: 0px;
+  font-size: 0em;
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
+  -moz-border-radius: 0.3125em;
+  -webkit-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
 .ui.steps .step {
   display: inline-block;
   position: relative;
-  padding: 13px 35px 13px 45px;
+  padding: 0.82em 1.5em 0.82em 2.5em;
   background-color: #FFFFFF;
   color: #888888;
 }
@@ -19,10 +19,10 @@
   position: absolute;
   content: '';
   z-index: 2;
-  top: 7px;
-  right: -16px;
-  width: 32px;
-  height: 32px;
+  top: 0.45em;
+  right: -1em;
+  width: 2em;
+  height: 2em;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   background-color: #FFFFFF;
@@ -31,59 +31,59 @@
   transform: rotate(45deg);
 }
 .ui.steps .step:first-child {
-  padding-left: 25px;
-  -webkit-border-radius: 5px 0px 0px 5px;
-  -moz-border-radius: 5px 0px 0px 5px;
-  border-radius: 5px 0px 0px 5px;
+  padding-left: 20.3125em;
+  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
+  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
+  border-radius: 0.3125em 0em 0em 0.3125em;
 }
 .ui.steps .step:last-child {
-  -webkit-border-radius: 0px 5px 5px 0px;
-  -moz-border-radius: 0px 5px 5px 0px;
-  border-radius: 0px 5px 5px 0px;
+  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
+  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
+  border-radius: 0em 0.3125em 0.3125em 0em;
 }
 .ui.steps .step:last-child {
-  margin-right: 0px;
+  margin-right: 0em;
 }
 .ui.steps .step:last-child:after {
-  width: 0px !important;
-  height: 0px !important;
+  width: 0em !important;
+  height: 0em !important;
 }
 /*******************************
            Variations
 *******************************/
 /* Attached */
 .attached.ui.steps {
-  margin: 0px;
-  -webkit-border-radius: 4px 4px 0px 0px;
-  -moz-border-radius: 4px 4px 0px 0px;
-  border-radius: 4px 4px 0px 0px;
+  margin: 0em;
+  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  border-radius: 0.3125em 0.3125em 0em 0em;
 }
 .attached.ui.steps .step:first-child {
-  -webkit-border-radius: 4px 0px 0px 0px;
-  -moz-border-radius: 4px 0px 0px 0px;
-  border-radius: 4px 0px 0px 0px;
+  -webkit-border-radius: 0.3125em 0em 0em 0em;
+  -moz-border-radius: 0.3125em 0em 0em 0em;
+  border-radius: 0.3125em 0em 0em 0em;
 }
 .attached.ui.steps .step:last-child {
-  -webkit-border-radius: 0px 4px 0px 0px;
-  -moz-border-radius: 0px 4px 0px 0px;
-  border-radius: 0px 4px 0px 0px;
+  -webkit-border-radius: 0em 0.3125em 0em 0em;
+  -moz-border-radius: 0em 0.3125em 0em 0em;
+  border-radius: 0em 0.3125em 0em 0em;
 }
 /* Bottom Side */
 .bottom.attached.ui.steps {
   margin-top: -1px;
-  -webkit-border-radius: 0px 0px 4px 4px;
-  -moz-border-radius: 0px 0px 4px 4px;
-  border-radius: 0px 0px 4px 4px;
+  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  border-radius: 0em 0em 0.3125em 0.3125em;
 }
 .bottom.attached.ui.steps .step:first-child {
-  -webkit-border-radius: 0px 0px 0px 4px;
-  -moz-border-radius: 0px 0px 0px 4px;
-  border-radius: 0px 0px 0px 4px;
+  -webkit-border-radius: 0em 0em 0em 0.3125em;
+  -moz-border-radius: 0em 0em 0em 0.3125em;
+  border-radius: 0em 0em 0em 0.3125em;
 }
 .bottom.attached.ui.steps .step:last-child {
-  -webkit-border-radius: 0px 0px 4px 0px;
-  -moz-border-radius: 0px 0px 4px 0px;
-  border-radius: 0px 0px 4px 0px;
+  -webkit-border-radius: 0em 0em 0.3125em 0em;
+  -moz-border-radius: 0em 0em 0.3125em 0em;
+  border-radius: 0em 0em 0.3125em 0em;
 }
 /* Fluid  */
 .ui.steps.fluid,
@@ -132,9 +132,9 @@
   background: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
   background: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
   background: linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0em 0em 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0em 0em 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0em 0em 2px rgba(0, 0, 0, 0.2);
 }
 .ui.steps .hover.step:after {
   cursor: pointer;
@@ -150,23 +150,23 @@
 .ui.steps .hover.step:before {
   position: absolute;
   top: 7px;
-  left: -15px;
+  left: -10.3125em;
   width: 32px;
   height: 31px;
   content: '';
   background-color: transparent;
   background-image: none;
-  -moz-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-  -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: -1px 1px 1px 0em rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: -1px 1px 1px 0em rgba(0, 0, 0, 0.1) inset;
+  box-shadow: -1px 1px 1px 0em rgba(0, 0, 0, 0.1) inset;
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   z-index: 2;
 }
 .ui.steps .hover:first-child:before {
-  width: 0px;
-  height: 0px;
+  width: 0em;
+  height: 0em;
 }
 /* Down */
 .ui.steps .down.step {
@@ -191,8 +191,8 @@
   font-weight: bold;
 }
 .ui.steps .active.step:first-child:before {
-  width: 0px;
-  height: 0px;
+  width: 0em;
+  height: 0em;
 }
 .ui.steps .active.step:after {
   background-color: #555555;

src/elements/step.less

@@ -1,20 +1,20 @@
 .ui.steps {
   display: inline-block;
-  font-size: 0px;
+  font-size: 0em;
 
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
+  -moz-border-radius: 0.3125em;
+  -webkit-border-radius: 0.3125em;
+  border-radius: 0.3125em;
 }
 
 .ui.steps .step {
   display: inline-block;
   position: relative;
-  padding: 13px 35px 13px 45px;
+  padding: 0.82em 1.5em 0.82em 2.5em;
 
   background-color: #FFFFFF;
 
@@ -25,11 +25,11 @@
   content: '';
   z-index: 2;
 
-  top: 7px;
-  right: -16px;
+  top: 0.45em;
+  right: -1em;
 
-  width: 32px;
-  height: 32px;
+  width: 2em;
+  height: 2em;
 
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-right: 1px solid rgba(0, 0, 0, 0.1);
@@ -41,22 +41,22 @@
 }
 
 .ui.steps .step:first-child {
-  padding-left: 25px;
-  -webkit-border-radius: 5px 0px 0px 5px;
-  -moz-border-radius: 5px 0px 0px 5px;
-  border-radius: 5px 0px 0px 5px;
+  padding-left: 20.3125em;
+  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
+  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
+  border-radius: 0.3125em 0em 0em 0.3125em;
 }
 .ui.steps .step:last-child {
-  -webkit-border-radius: 0px 5px 5px 0px;
-  -moz-border-radius: 0px 5px 5px 0px;
-  border-radius: 0px 5px 5px 0px;
+  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
+  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
+  border-radius: 0em 0.3125em 0.3125em 0em;
 }
 .ui.steps .step:last-child {
-  margin-right: 0px;
+  margin-right: 0em;
 }
 .ui.steps .step:last-child:after {
-  width: 0px !important;
-  height: 0px !important;
+  width: 0em !important;
+  height: 0em !important;
 }
 
 
@@ -66,38 +66,38 @@
 
 /* Attached */
 .attached.ui.steps {
-  margin: 0px;
-  -webkit-border-radius: 4px 4px 0px 0px;
-  -moz-border-radius: 4px 4px 0px 0px;
-  border-radius: 4px 4px 0px 0px;
+  margin: 0em;
+  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  border-radius: 0.3125em 0.3125em 0em 0em;
 }
 .attached.ui.steps .step:first-child {
-  -webkit-border-radius: 4px 0px 0px 0px;
-  -moz-border-radius: 4px 0px 0px 0px;
-  border-radius: 4px 0px 0px 0px;
+  -webkit-border-radius: 0.3125em 0em 0em 0em;
+  -moz-border-radius: 0.3125em 0em 0em 0em;
+  border-radius: 0.3125em 0em 0em 0em;
 }
 .attached.ui.steps .step:last-child {
-  -webkit-border-radius: 0px 4px 0px 0px;
-  -moz-border-radius: 0px 4px 0px 0px;
-  border-radius: 0px 4px 0px 0px;
+  -webkit-border-radius: 0em 0.3125em 0em 0em;
+  -moz-border-radius: 0em 0.3125em 0em 0em;
+  border-radius: 0em 0.3125em 0em 0em;
 }
 
 /* Bottom Side */
 .bottom.attached.ui.steps {
   margin-top: -1px;
-  -webkit-border-radius: 0px 0px 4px 4px;
-  -moz-border-radius: 0px 0px 4px 4px;
-  border-radius: 0px 0px 4px 4px;
+  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  border-radius: 0em 0em 0.3125em 0.3125em;
 }
 .bottom.attached.ui.steps .step:first-child {
-  -webkit-border-radius: 0px 0px 0px 4px;
-  -moz-border-radius: 0px 0px 0px 4px;
-  border-radius: 0px 0px 0px 4px;
+  -webkit-border-radius: 0em 0em 0em 0.3125em;
+  -moz-border-radius: 0em 0em 0em 0.3125em;
+  border-radius: 0em 0em 0em 0.3125em;
 }
 .bottom.attached.ui.steps .step:last-child {
-  -webkit-border-radius: 0px 0px 4px 0px;
-  -moz-border-radius: 0px 0px 4px 0px;
-  border-radius: 0px 0px 4px 0px;
+  -webkit-border-radius: 0em 0em 0.3125em 0em;
+  -moz-border-radius: 0em 0em 0.3125em 0em;
+  border-radius: 0em 0em 0.3125em 0em;
 }
 
 /* Fluid  */
@@ -153,9 +153,9 @@
   background: -ms-linear-gradient(top, #FFFFFF 0%, #F0F0F0 100%);
   background: linear-gradient(top, #FFFFFF 0%, #F0F0F0 100%);
 
-  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0em 0em 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0em 0em 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0em 0em 2px rgba(0, 0, 0, 0.2);
 }
 .ui.steps .hover.step:after {
   cursor: pointer;
@@ -172,7 +172,7 @@
 .ui.steps .hover.step:before {
   position: absolute;
   top: 7px;
-  left: -15px;
+  left: -10.3125em;
 
   width: 32px;
   height: 31px;
@@ -181,9 +181,9 @@
   background-color: transparent;
   background-image: none;
 
-  -moz-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-  -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: -1px 1px 1px 0em rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: -1px 1px 1px 0em rgba(0, 0, 0, 0.1) inset;
+  box-shadow: -1px 1px 1px 0em rgba(0, 0, 0, 0.1) inset;
 
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
@@ -192,8 +192,8 @@
   z-index: 2;
 }
 .ui.steps .hover:first-child:before {
-  width: 0px;
-  height: 0px;
+  width: 0em;
+  height: 0em;
 }
 
 /* Down */
@@ -221,8 +221,8 @@
   font-weight: bold;
 }
 .ui.steps .active.step:first-child:before {
-  width: 0px;
-  height: 0px;
+  width: 0em;
+  height: 0em;
 }
 .ui.steps .active.step:after {
   background-color: #555555;