diff --git a/build/minified/elements/step.min.css b/build/minified/elements/step.min.css index 1be24e8bf..68b323cb0 100644 --- a/build/minified/elements/step.min.css +++ b/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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index 65439ef66..91cf9b885 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -0e496b2f47d7f4da699a45fdc2df77cafe1c158d \ No newline at end of file +518dcf5ccaa1e4c63840daabeab8e9b7e2fb7ac9 \ No newline at end of file diff --git a/build/packaged/semantic.min.js.REMOVED.git-id b/build/packaged/semantic.min.js.REMOVED.git-id index f0cbf0e05..7cd7f5ba2 100644 --- a/build/packaged/semantic.min.js.REMOVED.git-id +++ b/build/packaged/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -1e2ac01c08f8e444c2abc84b0759de2449741bfd \ No newline at end of file +84d89d742f0b3b62dd595928d7fce8ab32e44845 \ No newline at end of file diff --git a/build/uncompressed/elements/step.css b/build/uncompressed/elements/step.css index 65e332015..5692842a7 100644 --- a/build/uncompressed/elements/step.css +++ b/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; diff --git a/node/Gruntfile.js b/node/Gruntfile.js index aacd77f5a..a198b0852 100755 --- a/node/Gruntfile.js +++ b/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' ]); }; diff --git a/node/src/documents/elements/step.html b/node/src/documents/elements/step.html old mode 100644 new mode 100755 index f929322fb..ebd12a08d --- a/node/src/documents/elements/step.html +++ b/node/src/documents/elements/step.html @@ -34,7 +34,7 @@ type : 'UI Element'
Billing
-
+
Confirm Order
@@ -56,7 +56,7 @@ type : 'UI Element'
Billing
-
+
Confirm Order
diff --git a/node/src/files/components/semantic/elements/step.css b/node/src/files/components/semantic/elements/step.css index 65e332015..5692842a7 100644 --- a/node/src/files/components/semantic/elements/step.css +++ b/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; diff --git a/src/elements/step.less b/src/elements/step.less index 50dd18087..afbcbf036 100755 --- a/src/elements/step.less +++ b/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;