nav bar and navigation/new form design/use of bootstrap

6 files changed, 317 insertions, 0 deletions

diff --git a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/README.md b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/README.md
new file mode 100644
index 00000000..4825d1f1
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/README.md
@@ -0,0 +1,8 @@
+bootstrap-nav-wizard
+====================
+
+Nav Wizard Component for Bootstrap 3
+
+See demo [here](http://acornejo.github.io/bootstrap-nav-wizard/)
+
+All credit goes to [zzullick](https://github.com/zzullick).
diff --git a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bootstrap-nav-wizard.css b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bootstrap-nav-wizard.css
new file mode 100644
index 00000000..007bbc1d
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bootstrap-nav-wizard.css
@@ -0,0 +1,115 @@
+.nav-wizard > li {
+  float: left;
+}
+.nav-wizard > li > a {
+  position: relative;
+  background-color: #eeeeee;
+}
+.nav-wizard > li > a .badge {
+  margin-left: 3px;
+  color: #eeeeee;
+  background-color: #428bca;
+}
+.nav-wizard > li:not(:first-child) > a {
+  padding-left: 34px;
+}
+.nav-wizard > li:not(:first-child) > a:before {
+  width: 0px;
+  height: 0px;
+  border-top: 20px inset transparent;
+  border-bottom: 20px inset transparent;
+  border-left: 20px solid #ffffff;
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+}
+.nav-wizard > li:not(:last-child) > a {
+  margin-right: 6px;
+}
+.nav-wizard > li:not(:last-child) > a:after {
+  width: 0px;
+  height: 0px;
+  border-top: 20px inset transparent;
+  border-bottom: 20px inset transparent;
+  border-left: 20px solid #eeeeee;
+  position: absolute;
+  content: "";
+  top: 0;
+  right: -20px;
+  z-index: 2;
+}
+.nav-wizard > li:first-child > a {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.nav-wizard > li:last-child > a {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.nav-wizard > li.done:hover > a,
+.nav-wizard > li:hover > a {
+  background-color: #d5d5d5;
+}
+.nav-wizard > li.done:hover > a:before,
+.nav-wizard > li:hover > a:before {
+  border-right-color: #d5d5d5;
+}
+.nav-wizard > li.done:hover > a:after,
+.nav-wizard > li:hover > a:after {
+  border-left-color: #d5d5d5;
+}
+.nav-wizard > li.done > a {
+  background-color: #e2e2e2;
+}
+.nav-wizard > li.done > a:before {
+  border-right-color: #e2e2e2;
+}
+.nav-wizard > li.done > a:after {
+  border-left-color: #e2e2e2;
+}
+.nav-wizard > li.active > a,
+.nav-wizard > li.active > a:hover,
+.nav-wizard > li.active > a:focus {
+  color: #ffffff;
+  background-color: #428bca;
+}
+.nav-wizard > li.active > a:after {
+  border-left-color: #428bca;
+}
+.nav-wizard > li.active > a .badge {
+  color: #428bca;
+  background-color: #ffffff;
+}
+.nav-wizard > li.disabled > a {
+  color: #777777;
+}
+.nav-wizard > li.disabled > a:hover,
+.nav-wizard > li.disabled > a:focus {
+  color: #777777;
+  text-decoration: none;
+  background-color: #eeeeee;
+  cursor: default;
+}
+.nav-wizard > li.disabled > a:before {
+  border-right-color: #eeeeee;
+}
+.nav-wizard > li.disabled > a:after {
+  border-left-color: #eeeeee;
+}
+.nav-wizard.nav-justified > li {
+  float: none;
+}
+.nav-wizard.nav-justified > li > a {
+  padding: 10px 15px;
+}
+@media (max-width: 768px) {
+  .nav-wizard.nav-justified > li > a {
+    border-radius: 4px;
+    margin-right: 0;
+  }
+  .nav-wizard.nav-justified > li > a:before,
+  .nav-wizard.nav-justified > li > a:after {
+    border: none !important;
+  }
+}
diff --git a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bootstrap-nav-wizard.less b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bootstrap-nav-wizard.less
new file mode 100644
index 00000000..831f6e2d
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bootstrap-nav-wizard.less
@@ -0,0 +1,158 @@
+@import 'bower_components/bootstrap/less/variables.less';
+
+@arrow-size: 20px;
+@arrow-sep: 6px;
+
+.arrow(@color) {
+  width: 0px;
+  height: 0px;
+  border-top: @arrow-size inset transparent;
+  border-bottom: @arrow-size inset transparent;
+  border-left: @arrow-size solid @color;
+  position: absolute;
+  content: "";
+  top: 0;
+}
+
+// Nav Wizard
+// From github.com/acornejo/bootstrap-nav-wizard
+// -------------------------
+.nav-wizard {
+  > li {
+    float: left;
+
+    > a {
+      position: relative;
+      background-color: @nav-link-hover-bg;
+
+      .badge {
+        margin-left: 3px;
+        color: @nav-link-hover-bg;
+        background-color: @badge-active-color;
+      }
+    }
+    &:not(:first-child) > a {
+      padding-left: 2*@arrow-size - @arrow-sep;
+
+      &:before {
+        .arrow(#fff);
+        left: 0;
+      }
+    }
+    &:not(:last-child) > a {
+      margin-right: @arrow-sep;
+
+      &:after {
+        .arrow(@nav-link-hover-bg);
+        right: -@arrow-size;
+        z-index: 2;
+      }
+    }
+    &:first-child > a {
+      border-top-left-radius: @nav-pills-border-radius;
+      border-bottom-left-radius: @nav-pills-border-radius;
+    }
+    &:last-child > a {
+      border-top-right-radius: @nav-pills-border-radius;
+      border-bottom-right-radius: @nav-pills-border-radius;
+    }
+
+    &.done:hover > a, &:hover > a {
+      background-color: darken(@nav-link-hover-bg, 10%);
+      &:before {
+        border-right-color: darken(@nav-link-hover-bg, 10%);
+      }
+      &:after {
+        border-left-color: darken(@nav-link-hover-bg, 10%);
+      }
+    }
+
+    &.done > a {
+      background-color: darken(@nav-link-hover-bg, 5%);
+      
+      &:before {
+        border-right-color: darken(@nav-link-hover-bg, 5%);
+      }
+      &:after {
+        border-left-color: darken(@nav-link-hover-bg, 5%);
+      }
+    }
+
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @nav-pills-active-link-hover-color;
+        background-color: @nav-pills-active-link-hover-bg;
+      }
+
+      &:after {
+        border-left-color: @nav-pills-active-link-hover-bg;
+      }
+
+      .badge {
+        color: @badge-active-color;
+        background-color: @badge-active-bg;
+      }
+    }
+
+    &.disabled > a {
+      color: @nav-disabled-link-color;
+
+      &:hover,
+      &:focus {
+        color: @nav-disabled-link-color;
+        text-decoration: none;
+        background-color: @nav-link-hover-bg;
+        cursor: default;
+      }
+      &:before {
+        border-right-color: @nav-link-hover-bg;
+      }
+      &:after {
+        border-left-color: @nav-link-hover-bg;
+      }
+    }
+
+    // &.active ~ li > a {
+    //   color: @nav-disabled-link-color;
+    //   &:hover,
+    //   &:focus {
+    //     color: @nav-disabled-link-hover-color;
+    //     text-decoration: none;
+    //     background-color: transparent;
+    //     cursor: not-allowed;
+    //   }
+    //     // background-color: darken(@nav-link-hover-bg, 20%);
+    //     // &:before {
+    //     //     border-right-color: darken(@nav-link-hover-bg, 20%);
+    //     // }
+    //     // &:after {
+    //     //     border-left-color: darken(@nav-link-hover-bg, 20%);
+    //     // }
+    // }
+  }
+}
+
+.nav-wizard.nav-justified {
+    > li {
+        float: none;
+
+        > a {
+            padding: @nav-link-padding;
+        }
+    }
+
+    // Small screens size, remove the "arrows" and just show it like stacked pills.
+    @media (max-width: @screen-sm-min) {
+        > li > a {
+            border-radius: @nav-pills-border-radius;
+            margin-right: 0;
+
+            &:before,
+            &:after {
+              border: none !important;
+            }
+        }
+    }
+}
diff --git a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bootstrap-nav-wizard.min.css b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bootstrap-nav-wizard.min.css
new file mode 100644
index 00000000..a3769814
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bootstrap-nav-wizard.min.css
@@ -0,0 +1 @@
+.nav-wizard>li{float:left}.nav-wizard>li>a{position:relative;background-color:#eee}.nav-wizard>li>a .badge{margin-left:3px;color:#eee;background-color:#428bca}.nav-wizard>li:not(:first-child)>a{padding-left:34px}.nav-wizard>li:not(:first-child)>a:before{width:0;height:0;border-top:20px inset transparent;border-bottom:20px inset transparent;border-left:20px solid #fff;position:absolute;content:"";top:0;left:0}.nav-wizard>li:not(:last-child)>a{margin-right:6px}.nav-wizard>li:not(:last-child)>a:after{width:0;height:0;border-top:20px inset transparent;border-bottom:20px inset transparent;border-left:20px solid #eee;position:absolute;content:"";top:0;right:-20px;z-index:2}.nav-wizard>li:first-child>a{border-top-left-radius:4px;border-bottom-left-radius:4px}.nav-wizard>li:last-child>a{border-top-right-radius:4px;border-bottom-right-radius:4px}.nav-wizard>li.done:hover>a,.nav-wizard>li:hover>a{background-color:#d5d5d5}.nav-wizard>li.done:hover>a:before,.nav-wizard>li:hover>a:before{border-right-color:#d5d5d5}.nav-wizard>li.done:hover>a:after,.nav-wizard>li:hover>a:after{border-left-color:#d5d5d5}.nav-wizard>li.done>a{background-color:#e2e2e2}.nav-wizard>li.done>a:before{border-right-color:#e2e2e2}.nav-wizard>li.done>a:after{border-left-color:#e2e2e2}.nav-wizard>li.active>a,.nav-wizard>li.active>a:hover,.nav-wizard>li.active>a:focus{color:#fff;background-color:#428bca}.nav-wizard>li.active>a:after{border-left-color:#428bca}.nav-wizard>li.active>a .badge{color:#428bca;background-color:#fff}.nav-wizard>li.disabled>a{color:#777}.nav-wizard>li.disabled>a:hover,.nav-wizard>li.disabled>a:focus{color:#777;text-decoration:none;background-color:#eee;cursor:default}.nav-wizard>li.disabled>a:before{border-right-color:#eee}.nav-wizard>li.disabled>a:after{border-left-color:#eee}.nav-wizard.nav-justified>li{float:none}.nav-wizard.nav-justified>li>a{padding:10px 15px}@media (max-width:768px){.nav-wizard.nav-justified>li>a{border-radius:4px;margin-right:0}.nav-wizard.nav-justified>li>a:before,.nav-wizard.nav-justified>li>a:after{border:none !important}}
\ No newline at end of file
diff --git a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bower.json b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bower.json
new file mode 100644
index 00000000..ddff20b2
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/bower.json
@@ -0,0 +1,17 @@
+{
+  "name": "bootstrap-nav-wizard",
+  "version": "0.0.4",
+  "homepage": "https://github.com/acornejo/bootstrap-nav-wizard",
+  "authors": [
+    "Alex Cornejo <acornejo@gmail.com>"
+  ],
+  "description": "Bootstrap nav wizard extension",
+  "dependencies": {
+    "bootstrap": "*"
+  },
+  "ignore": [
+    "bower_components/",
+    "node_modules/",
+    "package.json"
+  ]
+}
diff --git a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/package.json b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/package.json
new file mode 100644
index 00000000..d6b1d166
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "bootstrap-nav-wizard",
+  "version": "0.0.4",
+  "author": "Alex Cornejo <acornejo@gmail.com>",
+  "main": "bootstrap-nav-wizard.css",
+  "devDependencies": {
+    "less": "*"
+  },
+  "dependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acornejo/bootstrap-nav-wizard.git",
+    "web": "https://github.com/acornejo/bootstrap-nav-wizard"
+  },
+  "scripts": {
+    "prepublish": "./node_modules/.bin/lessc bootstrap-nav-wizard.less > bootstrap-nav-wizard.css; ./node_modules/.bin/lessc -x bootstrap-nav-wizard.less > bootstrap-nav-wizard.min.css"
+  }
+}