forms-angular 0.12.0-beta.306 → 0.12.0-beta.307

package/dist/client/forms-angular-bs-common.less

@@ -0,0 +1,383 @@
+.list-item {
+  .well;
+}
+
+.list-header, .edit-header {
+  .fixed-header;
+}
+
+.list-body {
+  padding-top: 100px;
+}
+
+.edit-header {
+  padding-top: 10px;
+}
+
+.edit-body {
+  padding-top: 100px;
+}
+
+.page-header {
+  padding-left: 20px;
+  z-index: 102;
+}
+
+.report-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  .header-lhs {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+  .header-rhs {
+    flex-grow: 1;
+  }
+}
+
+.header-rhs {
+  min-width: 226px;
+  min-height: 40px;
+  padding-right: 20px;
+  padding-bottom: 5px;
+  display: block;
+}
+
+.list-header .header-rhs {
+  margin: 15px 0;
+}
+
+// "Mixins"
+.fixed-header {
+  position: fixed;
+  width: 100%;
+  margin-top: 11px;
+  z-index: 101;
+}
+
+// Modifications to ngGrid style
+
+.gridStyle {
+  border: 1px solid #d4d4d4;
+  margin: auto;
+  .ngTopPanel {
+    background-color: #ffffff;
+  }
+  .ngHeaderCell {
+    background-color: #e4e4e4;
+  }
+  .fng-right {
+    text-align: right;
+  }
+  .fng-left {
+    text-align: left;
+  }
+  .fng-centre, .fng-center {
+    text-align: center;
+  }
+  .ngTotalCell {
+    font-weight: bold;
+  }
+}
+
+button.form-btn {
+  width: 8em;
+  height: 2em;
+}
+
+.form-btn-grp {
+  max-width: 17em;
+}
+
+
+form {
+  &.form-horizontal.compact {
+    input + .help-block, select + .help-block, textarea + .help-block, .uneditable-input + .help-block,
+    .input-prepend + .help-block, .input-append + .help-block {
+      margin-top: 0;
+      margin-bottom: 2px;
+    }
+    hr {
+      margin: 8px 0;
+    }
+  }
+
+  .schema-head {
+    margin-top: 8px;
+    font-weight: bold;
+  }
+  ol.sub-doc {
+    padding: 0;
+    margin: 0;
+    position: relative;
+    li {
+      width: available;
+      display: block;
+      margin: 2px 0;
+      padding-top: 3px;
+    }
+  }
+  .sub-doc-btns {
+    position: absolute;
+    right: 8px;
+    z-index: 1;
+  }
+  .schema-foot {
+    margin-top: 0;
+    margin-bottom: 5px;
+  }
+
+  input.ng-invalid:not(.ng-invalid-required):focus:read-write {
+    border: solid 1px red;
+  }
+
+  input[type="checkbox"].ng-invalid-required:before:read-write, span:first-child input[type="radio"].ng-invalid-required:before:read-write {
+    content:"*";
+    font-weight: bold;
+    color: red;
+    margin-left: -8px
+  }
+
+  input.ng-invalid-required, select.fng-invalid-required:read-write,  select.ng-invalid-required, textarea.ng-invalid-required:read-write {
+    background-color: rgba(255, 0, 0, 0.10);
+  }
+
+  option {
+    background-color: white;
+  }
+  .fng-select2 {
+    width: 220px;
+  }
+  .form-inline > .sub-doc {
+    padding: 0 5px;
+    border: none;
+    box-shadow: none;
+  }
+}
+
+a.fng-link, span.fng-link {
+  line-height: 30px;
+}
+
+.form-inline a.fng-link, .form-inline span.fng-link {
+  padding: 0 15px;
+}
+
+// Inline radio buttons need a bigger top margin
+span input[type="radio"] {
+  margin : 9px 0 0;
+}
+
+.global-search {
+  position : relative;
+  float: right;
+}
+
+.results-container {
+  width: 6000px;
+  z-index: 103;
+  position: absolute;
+  top: 41px;
+  right: 0;
+}
+
+.search-results {
+  float: right;
+  border: 1px solid gray;
+  -webkit-box-shadow: 10px 10px 10px #888;
+  box-shadow: 10px 10px 10px #888;
+  background: white;
+  padding: 5px;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  .search-result.focus {
+    color: white;
+  }
+}
+
+.dropdown-menu > .disabled > li,
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  cursor: not-allowed;
+}
+
+#why-disabled {
+  display: none
+}
+
+button#saveButton[disabled]:hover + #why-disabled.showwhy {
+  display: block;
+  border: #ddd solid 2px;
+  font-size: small;
+  z-index: 20;
+  position: absolute;
+  background-color: white;
+  right: 0;
+  border-radius: 6px;
+  padding: 5px;
+  box-shadow: 4px 4px 4px #999;
+  color: red;
+  font-weight: normal;
+  top: 22px;
+}
+
+#display-error {
+  position: fixed;
+  top: 60px;
+  width: 100%;
+  z-index: 1090;
+}
+
+#display-error.ng-hide {
+  opacity: 0;
+}
+#display-error.ng-hide-add,         // animate the error display
+#display-error.ng-hide-remove {
+  transition: all linear 0.5s;
+}
+
+input[type="checkbox"].ng-invalid::after {
+  content: "Invalid";
+  color: rgba(255, 0, 0, 0.6);
+  padding-left: 1em;
+}
+
+/* Delayed Absolute Center Spinner */
+/* Absolute Center Spinner */
+.loading, .spinner {
+  position: fixed;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: visible;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.loading {
+  -webkit-animation: lds-ring-fadein 3.4s;
+  animation: lds-ring-fadein 3.4s;
+}
+
+.spinner {
+  -webkit-animation: lds-ring-fadein 0.4s;
+  animation: lds-ring-fadein 0.4s;
+}
+
+/* Transparent Overlay */
+.loading:before, .spinner:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required), .spinner:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after, .spinner:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes lds-ring-fadein{
+  0% { opacity:0; }
+  50% { opacity:0.1; }
+  100% { opacity:1; }
+}

package/dist/client/forms-angular-bs2-specific.less

@@ -0,0 +1,93 @@
+@iconSpritePath:          "../img/glyphicons-halflings.png";
+@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
+
+.list-item {
+  .well-small;
+}
+
+.page-header {
+  font-family: @headingsFontFamily;
+  font-weight: @headingsFontWeight;
+  color: @headingsColor;
+  font-size: @fontSizeLarge;
+  min-height: @navbarHeight;
+}
+
+.fixed-header {
+  background-color: @bodyBackground;
+}
+
+@media (max-width: @navbarCollapseWidth) {
+
+  // UNFIX THE TOPBAR
+  // ----------------
+  //  // Remove any padding from the page body
+  .page-body {
+    padding-top: 0;
+  }
+  // Unfix the navbars
+  .page-header {
+    position: static;
+  }
+
+  .global-search {
+    padding-right : 1em;
+    input {
+      width: 12em;
+    }
+  }
+}
+
+form, ngform {
+  &.form-horizontal.compact {
+    .control-group {
+      margin-bottom: 2px;
+    }
+  }
+
+  .schema-head {
+    padding: 0 0 0 180px;
+    border-top: 1px solid darken(@wellBackground, 7%);
+    border-bottom: 1px solid darken(@wellBackground, 7%);
+  }
+  .schema-foot {
+    padding: 0 0 0 180px;
+  }
+
+  ol.sub-doc li {
+    border-bottom: 1px solid darken(@wellBackground, 7%);
+  }
+
+  .form-inline > .sub-doc {
+    background-color: @bodyBackground;
+  }
+}
+
+.search-results {
+  .search-result {
+    color: @linkColor;
+  }
+  .search-result.focus {
+    background-color: @linkColorHover;
+  }
+}
+
+// fng-jq-upload overrides for bs2, to make it look the same as bs3
+// TODO: Move these to a BS2 less file in fng-jq-upload and do whatever it takes to make it come out in the appropriate CSS files
+.fileupload-form {
+  position: relative;
+  top: -30px;
+  margin-bottom: -30px;
+}
+
+.fileupload-buttonbar {
+  margin-left: 0;
+}
+
+@media (max-width: 767px) {
+  form {
+    .schema-head, .schema-foot {
+      padding: 5px 15px;
+    }
+  }
+}

package/dist/client/forms-angular-bs3-specific.less

@@ -0,0 +1,163 @@
+// Default styling for the forms-angular classes, to work with navbar-fixed
+.list-item {
+  .well-sm;
+  min-height: 40px;
+}
+
+button.form-btn {
+  font-size: 60%;
+  padding-top: 0.25em;
+}
+
+.form-horizontal {
+  input.input-sm,  textarea.input-sm {
+    font-size: 14px;
+    padding: 2px 6px;
+  }
+  select.input-sm {
+    font-size: 14px;
+    padding-left: 5px;
+  }
+  .checkbox {
+    float: left;
+    padding: 5px 10px 0 6px;
+  }
+  .control-label {
+    padding-top: 6px;
+  }
+  .bs3-input {
+    padding-left: 0;
+  }
+  .help-block {
+    clear: left;
+    bottom-margin: 4px;
+  }
+}
+
+// Try and get angular-elastic to work properly (or as near as is really necessary for now)
+// May be worth trying to understand why it works fine in BS2
+textarea[msd-elastic] {
+  min-height: 25px;
+}
+
+.fileupload-buttonbar .btn {
+  padding: 5px 8px;
+}
+
+.page-header {
+  font-family: @headings-font-family;
+  font-weight: @headings-font-weight;
+  color: @headings-color;
+  font-size: @font-size-large;
+  border-bottom: 2px solid @headings-color;
+  min-height: @navbar-height;
+}
+
+.fixed-header {
+  background-color: @body-bg;
+}
+
+@media (max-width: @grid-float-breakpoint) {
+
+  // UNFIX THE TOPBAR
+  // ----------------
+  //  // Remove any padding from the page body
+  .page-body {
+    padding-top: 0;
+  }
+
+  // Unfix the navbars
+  .page-header {
+    position: static;
+  }
+
+  .global-search {
+    padding-right: 7px;
+  }
+}
+
+form, ng-form {
+  &.form-horizontal .form-group {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  &.form-horizontal.compact {
+    .form-group {
+      margin-bottom: 2px;
+    }
+  }
+
+  ol.sub-doc li {
+    border-bottom: 1px solid darken(@well-bg, 7%);
+  }
+
+  .schema-head, .schema-foot {
+    border-bottom: 1px solid darken(@well-bg, 7%);
+    padding-left: 23px;
+  }
+
+  .schema-head {
+    border-top: 1px solid darken(@well-bg, 7%);
+  }
+
+  //  .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox-inline input[type="checkbox"]
+  .checkbox input[type="checkbox"] {
+    margin-left: -5px;
+  }
+
+  .form-inline > .sub-doc {
+    background-color: @body-bg;
+  }
+}
+
+.search-results {
+  .search-result {
+    color: @link-color;
+  }
+  .search-result.focus {
+    background-color: @link-hover-color;
+  }
+}
+
+.form-inline {
+  .row {
+    margin-left: 5px;
+    margin-right: 0;
+  }
+  .form-group .input-group {
+    display: table-cell;
+    .input-group-addon {
+      display: none;
+    }
+  }
+}
+
+form {
+  .tab-content {
+    margin-top: 5px;
+  }
+}
+
+@media (max-width: 767px) {
+  // For some reason bootstrap only does this for large windows - need it for search on mobile
+  .navbar-form {
+    width: auto;
+    border: 0;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  .navbar-form.navbar-right:last-child {
+    margin-right: -15px;
+  }
+
+  form {
+    .schema-head, .schema-foot {
+      padding: 5px 15px;
+    }
+  }
+
+}