Revert "less/roojs-bootstrap/alert.less"
[roojs1] / less / roojs-bootstrap / nav-progress-bar.scss
diff --git a/less/roojs-bootstrap/nav-progress-bar.scss b/less/roojs-bootstrap/nav-progress-bar.scss
new file mode 100644 (file)
index 0000000..3b1e3bc
--- /dev/null
@@ -0,0 +1,114 @@
+
+.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);
+    }
+}