--- /dev/null
+
+.roo-navigation-bar-group,
+.roo-navigation-top-bar,
+.roo-navigation-bullets-bar,
+.roo-navigation-bottom-bar {
+ width: 100%;
+ float: left;
+}
+
+.roo-navigation-bar-text > span {
+ text-transform: uppercase;
+ width: 90%;
+ display: inline-block;
+}
+
+
+.roo-navigation-bar-text {
+ float: left;
+ line-height: 24px;
+ height: 100%;
+ min-height: 24px;
+ text-align: center;
+ position: relative;
+}
+
+.roo-navigation-bar {
+ counter-reset: step;
+ text-align: center;
+ padding: 0px;
+ overflow: hidden;
+ margin: 0px;
+}
+
+.roo-navigation-bar .roo-navigation-bar-item {
+ list-style-type: none;
+ color: @gray-base;
+ text-transform: uppercase;
+ font-size: 14px;
+ float: left;
+ position: relative;
+}
+
+.roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon:before {
+ counter-increment: step;
+ width: 25px;
+ line-height: 25px;
+ display: block;
+ color: @body-bg;
+ background: @brand-primary;
+ border-radius: 5px;
+ font-weight: bold;
+ cursor: pointer;
+}
+
+.roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon.step-number:before {
+ content: counter(step);
+}
+
+.roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon:after {
+ content: '';
+ width: 100%;
+ height: 5px;
+ background: @brand-primary;
+ position: absolute;
+ top: 10px;
+ z-index: -1;
+}
+
+.roo-navigation-bar .roo-navigation-bar-item:last-child > .roo-navigation-bar-item-icon:after {
+ content: none;
+}
+
+.roo-navigation-bar .roo-navigation-bar-item.active .roo-navigation-bar-item-icon:before {
+ background: darken(@brand-danger, 17%);
+ color: @body-bg;
+}
+
+.roo-navigation-bar .roo-navigation-bar-item.disabled .roo-navigation-bar-item-icon:before {
+ background: @gray-light;
+ color: @body-bg;
+ cursor: not-allowed;
+}
+
+.roo-navigation-bar .roo-navigation-bar-item.active .roo-navigation-bar-item-icon:before {
+ cursor: default;
+}
+
+.roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon {
+ font: normal normal normal 14px/1 FontAwesome;
+ display: inline-block;
+
+}
+
+@media (min-width: 768px) {
+ .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before {
+ content: counter(step);
+ }
+
+}
+
+@media (min-width: 992px) {
+ .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before,
+ .roo-navigation-bar .roo-navigation-bar-item.sm-icon > .roo-navigation-bar-item-icon:before {
+ content: counter(step);
+ }
+}
+
+@media (min-width: 1200px) {
+ .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before,
+ .roo-navigation-bar .roo-navigation-bar-item.sm-icon > .roo-navigation-bar-item-icon:before,
+ .roo-navigation-bar .roo-navigation-bar-item.md-icon > .roo-navigation-bar-item-icon:before {
+ content: counter(step);
+ }
+}