novo-elements 5.1.1 → 5.2.3

package/elements/form/FieldInteractionApiTypes.d.ts

@@ -1,29 +1,29 @@
-import { Subscription } from 'rxjs';
-import { ResultsTemplateType } from './FormInterfaces';
-declare type OptionsFunctionConfig = {
-    format?: string;
-} & ({
-    where: string;
-    emptyPickerMessage?: string;
-} | {
-    optionsPromise: (query: string, http: CustomHttp, page?: number) => Promise<unknown[]>;
-} | {
-    optionsUrl: string;
-} | {
-    optionsUrlBuilder: (query: string) => string;
-});
-export declare type ModifyPickerConfigArgs = {
-    options: unknown[];
-} | {
-    resultsTemplateType: ResultsTemplateType;
-} | OptionsFunctionConfig;
-export declare type OptionsFunction = (query: string, page?: number) => Promise<unknown[]>;
-export interface CustomHttp<T = any> {
-    url: string;
-    options: any;
-    mapFn: (o: unknown) => T;
-    get(url: string, options?: any): CustomHttp;
-    map(mapFn: (o: unknown) => T): CustomHttp;
-    subscribe(resolve: any, reject?: any): Subscription;
-}
-export {};
+import { Subscription } from 'rxjs';
+import { ResultsTemplateType } from './FormInterfaces';
+declare type OptionsFunctionConfig = {
+    format?: string;
+} & ({
+    where: string;
+    emptyPickerMessage?: string;
+} | {
+    optionsPromise: (query: string, http: CustomHttp, page?: number) => Promise<unknown[]>;
+} | {
+    optionsUrl: string;
+} | {
+    optionsUrlBuilder: (query: string) => string;
+});
+export declare type ModifyPickerConfigArgs = {
+    options: unknown[];
+} | {
+    resultsTemplateType: ResultsTemplateType;
+} | OptionsFunctionConfig;
+export declare type OptionsFunction = (query: string, page?: number) => Promise<unknown[]>;
+export interface CustomHttp<T = any> {
+    url: string;
+    options: any;
+    mapFn: (o: unknown) => T;
+    get(url: string, options?: any): CustomHttp;
+    map(mapFn: (o: unknown) => T): CustomHttp;
+    subscribe(resolve: any, reject?: any): Subscription;
+}
+export {};

package/elements/form/FieldInteractionModals.d.ts

@@ -1,16 +1,16 @@
-import { NovoModalRef, NovoModalParams } from '../modal/Modal';
-import { NovoLabelService } from '../../services/novo-label-service';
-export declare class ControlConfirmModal {
-    private modalRef;
-    params: NovoModalParams;
-    labels: NovoLabelService;
-    constructor(modalRef: NovoModalRef, params: NovoModalParams, labels: NovoLabelService);
-    close(result: boolean): void;
-}
-export declare class ControlPromptModal {
-    private modalRef;
-    params: NovoModalParams;
-    labels: NovoLabelService;
-    constructor(modalRef: NovoModalRef, params: NovoModalParams, labels: NovoLabelService);
-    close(result: boolean): void;
-}
+import { NovoModalRef, NovoModalParams } from '../modal/Modal';
+import { NovoLabelService } from '../../services/novo-label-service';
+export declare class ControlConfirmModal {
+    private modalRef;
+    params: NovoModalParams;
+    labels: NovoLabelService;
+    constructor(modalRef: NovoModalRef, params: NovoModalParams, labels: NovoLabelService);
+    close(result: boolean): void;
+}
+export declare class ControlPromptModal {
+    private modalRef;
+    params: NovoModalParams;
+    labels: NovoLabelService;
+    constructor(modalRef: NovoModalRef, params: NovoModalParams, labels: NovoLabelService);
+    close(result: boolean): void;
+}

package/elements/form/Form.d.ts

@@ -1,21 +1,21 @@
-import { AfterContentInit, OnInit, QueryList } from '@angular/core';
-import { NovoTemplateService } from '../../services/template/NovoTemplateService';
-import { NovoTemplate } from '../common/novo-template/novo-template.directive';
-import { NovoFormGroup } from './FormInterfaces';
-export declare class NovoFormElement implements AfterContentInit, OnInit {
-    private templates;
-    form: NovoFormGroup;
-    layout: string;
-    hideHeader: boolean;
-    customTemplates: QueryList<NovoTemplate>;
-    showingAllFields: boolean;
-    showingRequiredFields: boolean;
-    constructor(templates: NovoTemplateService);
-    get value(): any;
-    get isValid(): boolean;
-    ngOnInit(): void;
-    ngAfterContentInit(): void;
-    showAllFields(): void;
-    showOnlyRequired(hideRequiredWithValue: any): void;
-    forceValidation(): void;
-}
+import { AfterContentInit, OnInit, QueryList } from '@angular/core';
+import { NovoTemplateService } from '../../services/template/NovoTemplateService';
+import { NovoTemplate } from '../common/novo-template/novo-template.directive';
+import { NovoFormGroup } from './FormInterfaces';
+export declare class NovoFormElement implements AfterContentInit, OnInit {
+    private templates;
+    form: NovoFormGroup;
+    layout: string;
+    hideHeader: boolean;
+    customTemplates: QueryList<NovoTemplate>;
+    showingAllFields: boolean;
+    showingRequiredFields: boolean;
+    constructor(templates: NovoTemplateService);
+    get value(): any;
+    get isValid(): boolean;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    showAllFields(): void;
+    showOnlyRequired(hideRequiredWithValue: any): void;
+    forceValidation(): void;
+}

package/elements/form/Form.module.d.ts

@@ -1,2 +1,2 @@
-export declare class NovoFormModule {
-}
+export declare class NovoFormModule {
+}

package/elements/form/Form.scss

@@ -0,0 +1,857 @@
+@import './extras/address/Address';
+@import './extras/checkbox/Checkbox';
+@import './extras/file/FileInput';
+@import './ControlGroup';
+.novo-form-control-label {
+  color: $dark;
+  font-size: 0.9em;
+  flex: 1;
+  max-width: 130px;
+  min-width: 130px;
+  font-weight: 500;
+  transition: 200ms ease-out;
+  margin-right: 35px;
+  text-transform: uppercase;
+  padding-top: 8px;
+  word-break: word-break;
+  overflow-wrap: break-word;
+  &.encrypted {
+    max-width: 110px;
+    min-width: 110px;
+  }
+}
+
+novo-dynamic-form,
+novo-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  max-width: 715px;
+  .novo-form-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    width: 100%;
+    form {
+      width: 100%;
+      novo-fieldset-header {
+        background: $off-white;
+        box-sizing: content-box;
+        padding: 1em 1em 1em 3em;
+        margin-bottom: 2em;
+        display: flex;
+        margin-left: -1.5em;
+        margin-right: -1.5em;
+        i {
+          margin-right: 10px;
+        }
+        h6 {
+          font-weight: 400;
+          padding: 0;
+          display: flex;
+          > i {
+            display: flex;
+            margin-top: -3px; // Icon itself is not centered in the SVG
+          }
+        }
+        &.hidden {
+          display: none;
+        }
+      }
+      div.novo-form-row,
+      div.novo-control-group-control,
+      td.novo-form-row {
+        width: 100%;
+        &:first-child {
+          > novo-control,
+          > novo-custom-control-container {
+            margin-top: 0;
+          }
+        }
+        novo-control,
+        novo-custom-control-container {
+          margin-top: 1rem;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          width: 100%;
+          height: auto;
+          opacity: 1;
+          input.ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
+            border-bottom: 1px solid $negative !important;
+            &.valid-number {
+              border-bottom: none !important;
+            }
+          }
+          novo-list.vertical-list {
+            margin-left: 1px;
+          }
+          novo-picker.ng-touched.ng-invalid:not(.ng-pristine) input,
+          textarea.ng-touched.ng-invalid:not(.ng-pristine):not(.ng-valid),
+          chips.ng-touched.ng-invalid:not(.ng-pristine) {
+            border-bottom: 1px solid $negative !important;
+          }
+          &.checklist,
+          &.file,
+          &.radio,
+          &.address {
+            .ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
+              border-bottom: none !important;
+              &.valid-number {
+                border-bottom: none !important;
+              }
+            }
+          }
+          &.date,
+          &.time {
+            .ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
+              border-bottom: none !important;
+              > input {
+                border-bottom: 1px solid $negative !important;
+              }
+            }
+          }
+          novo-date-time-picker-input.ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
+            border-bottom: none !important;
+            input {
+              border-bottom: 1px solid $negative !important;
+            }
+          }
+          &.hidden {
+            height: 0;
+            min-height: 0;
+            opacity: 0;
+            display: none;
+          }
+          &.disabled:not(.file):not(.editor) {
+            pointer-events: none;
+          }
+          &.disabled {
+            input {
+              -webkit-text-fill-color: $dark;
+            }
+            input:not(.picker-input):not(.tiles-input) {
+              &::-webkit-input-placeholder {
+                color: lighten($dark, 30%) !important;
+              }
+              border-bottom-style: dashed !important;
+            }
+            input[type='checkbox']:not(.picker-input):not(.tiles-input) {
+              border-bottom-style: none !important;
+            }
+            textarea {
+              border-bottom-style: dashed !important;
+              -webkit-text-fill-color: $dark;
+            }
+            div[type='button'] {
+              border-bottom-style: dashed !important;
+              i.bhi-collapse {
+                top: auto;
+                color: lighten($dark, 30%) !important;
+              }
+            }
+            label {
+              &.clear-all {
+                display: none;
+              }
+            }
+            chips {
+              border-bottom: 1px dashed lighten($dark, 30%) !important;
+              input {
+                border: none !important;
+              }
+              novo-picker {
+                border: none;
+                > input.picker-input {
+                  border: none !important;
+                }
+              }
+              chip {
+                opacity: 0.4;
+                padding: 10px;
+                .bhi-close {
+                  display: none;
+                }
+              }
+            }
+            novo-tiles {
+              opacity: 0.7 !important;
+              label {
+                color: inherit !important;
+              }
+            }
+            .bhi-search,
+            .bhi-times {
+              display: none;
+            }
+            i.bhi-clock,
+            i.bhi-collapse,
+            i.bhi-search,
+            i.bhi-radio-filled,
+            i.bhi-radio-empty,
+            i.bhi-checkbox-filled,
+            i.bhi-checkbox-empty,
+            i.bhi-calendar {
+              top: -5px;
+            }
+          }
+          novo-tip-well.active {
+            margin-bottom: 5px;
+            font-size: 1em !important;
+            > div {
+              width: 100%;
+            }
+          }
+          .field-message {
+            min-height: 24px;
+            margin-bottom: 0 !important;
+          }
+          .field-message,
+          novo-tip-well.active {
+            font-size: 0.8em;
+            padding: 5px 0;
+            margin-left: 22px;
+            margin-bottom: 5px;
+            max-width: 530px;
+            display: flex;
+            justify-content: space-between;
+            &[hidden] {
+              display: block !important;
+              visibility: hidden;
+            }
+            &.has-tip {
+              margin-bottom: 0;
+            }
+            .character-count {
+              font-size: 12px;
+              color: $grey;
+              &.error {
+                color: $negative;
+              }
+            }
+            .record-count {
+              font-size: 12px;
+              color: $grey;
+              margin-right: 9em;
+              &.zero-count {
+                margin-right: 0;
+              }
+              &.row-picker {
+                margin-right: 20em;
+              }
+            }
+            .messages {
+              flex: 1;
+              span.error-text {
+                color: $negative;
+                padding-bottom: 5px;
+                padding-right: 5px;
+                flex: 1;
+                display: flex;
+              }
+              .description {
+                display: flex;
+                padding-bottom: 5px;
+                flex: 1;
+              }
+              .warning-text {
+                color: $warning;
+              }
+            }
+          }
+          .error-message {
+            color: $negative;
+            font-size: 0.8em;
+            padding: 5px 0;
+            flex-basis: 100%;
+            margin-left: 185px;
+            margin-bottom: 5px;
+            height: 2em;
+            max-width: 530px;
+            display: flex;
+            justify-content: space-between;
+            &[hidden] {
+              display: block !important;
+              visibility: hidden;
+            }
+            .character-count {
+              font-size: 12px;
+              color: $grey;
+              &.error {
+                color: $negative;
+              }
+            }
+            span.error-text {
+              flex: 1;
+            }
+          }
+          > div.novo-control-container {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: flex-start;
+            width: 100%;
+            i.bhi-lock {
+              width: 20px;
+              color: $grey;
+              font-weight: 500;
+              font-size: 1.2em;
+              padding-top: 6px;
+            }
+            > label {
+              @extend .novo-form-control-label;
+            }
+            > div.novo-control-outer-container {
+              display: flex;
+              align-items: center;
+              max-width: 550px;
+              position: relative;
+              width: 100%;
+              i.loading {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                right: 0;
+                top: 3px;
+                animation: rotate 1200ms linear infinite;
+                svg {
+                  width: 100%;
+                  height: 100%;
+                  max-width: 15px;
+                  max-height: 15px;
+                  .spinner {
+                    fill: $positive;
+                  }
+                }
+              }
+              .novo-control-inner-container {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                &.required {
+                  div.novo-control-input.address {
+                    margin-left: 20px;
+                  }
+                }
+                .field-message.address {
+                  margin-left: 20px;
+                }
+                .novo-control-inner-input-container {
+                  display: flex;
+                  flex-direction: row;
+                  align-items: center;
+                  > div.novo-control-input {
+                    width: 100%;
+                    position: relative;
+                    .textarea-container {
+                      display: flex;
+                    }
+                    &.control-disabled:not(.file):not(.editor) {
+                      pointer-events: none;
+                    }
+                    &[type='picker'] {
+                      align-self: auto;
+                    }
+                    &.editor {
+                      margin-bottom: 10px;
+                    }
+                    novo-quick-note {
+                      margin-bottom: 10px;
+                      textarea {
+                        line-height: inherit;
+                      }
+                      .quick-note-overlay {
+                        padding: 0;
+                      }
+                    }
+                    input {
+                      font-size: 1em;
+                      background: transparent !important;
+                      border: none;
+                      border-bottom: 1px solid lighten($dark, 45%);
+                      border-radius: 0;
+                      outline: none;
+                      height: 2rem;
+                      width: 100%;
+                      margin: 0;
+                      padding: 0;
+                      box-shadow: none;
+                      box-sizing: content-box;
+                      transition: all 300ms;
+                      color: #26282b;
+                      &:hover {
+                        border-bottom: 1px solid lighten($dark, 15%);
+                      }
+                      &:focus {
+                        border-bottom: 1px solid $positive;
+                      }
+                      &:invalid {
+                        border-bottom: 1px solid #da4453;
+                      }
+                      &.maxlength-error {
+                        border-bottom: 1px solid $negative !important;
+                      }
+                    }
+                    textarea {
+                      font-size: 1em;
+                      height: 2rem;
+                      background: transparent !important;
+                      border: none;
+                      border-bottom: 1px solid lighten($dark, 45%);
+                      border-radius: 0;
+                      outline: none;
+                      width: 100%;
+                      resize: vertical;
+                      margin: 0;
+                      padding: 5px 0;
+                      box-shadow: none;
+                      box-sizing: content-box;
+                      transition: all 300ms;
+                      transition: height 0ms;
+                      color: #26282b;
+                      overflow-y: hidden;
+                      &:hover {
+                        border-bottom: 1px solid lighten($dark, 15%);
+                      }
+                      &:focus {
+                        border-bottom: 1px solid $positive;
+                        overflow-y: auto !important;
+                      }
+                      &:invalid {
+                        border-bottom: 1px solid #da4453;
+                      }
+                      &.maxlength-error {
+                        border-bottom: 1px solid $negative;
+                      }
+                    }
+                    textarea[autosize] {
+                      min-height: 2rem;
+                      max-height: 300px;
+                      padding-top: 0;
+                      padding-bottom: 0;
+                    }
+                    textarea:not(.quick-note-textarea) {
+                      transition: height 0;
+                      background: transparent !important;
+                    }
+                    > div.novo-control-input-with-label {
+                      display: flex;
+                      align-items: center;
+                      @supports (not (-moz-appearance:none)) {
+                        input {
+                          flex: 1;
+                        }
+                      }
+                      @supports (-moz-appearance:none) {
+                        input {
+                          flex: auto;
+                        }
+                      }
+                      label.input-label {
+                        padding-left: 5px;
+                        color: $dark;
+                      }
+                    }
+                    > div.novo-control-input-container {
+                      font-size: 1rem;
+                      flex: 1;
+                      position: relative;
+                      > i.bhi-clock,
+                      > i.bhi-search,
+                      > i.bhi-times,
+                      > i.bhi-calendar {
+                        position: absolute;
+                        right: 0;
+                        top: 0;
+                        font-size: 1.2em;
+                      }
+                      > i.bhi-times {
+                        cursor: pointer;
+                        font-size: 1.1em;
+                      }
+                      > novo-time-picker,
+                      > novo-date-picker,
+                      novo-date-time-picker {
+                        position: absolute;
+                        top: 100%;
+                        left: 0;
+                      }
+                      > div.date-time-container {
+                        position: absolute;
+                        top: 100%;
+                        left: 0;
+                        display: flex;
+                        flex-direction: column;
+                        background: #fff;
+                        z-index: 9;
+                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+                        border-bottom-right-radius: 3px;
+                        border-bottom-left-radius: 3px;
+                        border-top-left-radius: 3px;
+                        border-top-right-radius: 3px;
+                        novo-date-picker {
+                          border-top-right-radius: 0;
+                          border-bottom-right-radius: 0;
+                          box-shadow: none;
+                          border-right: 1px solid rgba($light, 0.5);
+                          > .calendar {
+                            box-shadow: none;
+                          }
+                        }
+                        novo-time-picker {
+                          position: absolute;
+                          height: 100%;
+                          width: 100%;
+                          border-top-left-radius: 0;
+                          border-bottom-left-radius: 0;
+                          box-shadow: none;
+                          .digital {
+                            display: block;
+                            position: absolute;
+                            bottom: 0;
+                            width: 100%;
+                          }
+                        }
+                        .time-control {
+                          border-top: 1px solid #f4f4f4;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                          .am-pm {
+                            display: flex;
+                            flex-direction: column;
+                            margin-left: 10px;
+                          }
+                        }
+                      }
+                    }
+                  }
+                  i.required-indicator {
+                    height: 13px;
+                    width: 13px;
+                    font-size: 13px;
+                    margin-right: 10px;
+                    &.bhi-circle {
+                      color: $grapefruit;
+                      text-align: center;
+                      font-size: 7px;
+                    }
+                    &.bhi-check {
+                      color: $grass;
+                    }
+                    &.address {
+                      display: none;
+                    }
+                    &[hidden] {
+                      display: inherit !important;
+                      visibility: hidden;
+                    }
+                    > h4 {
+                      font-weight: 500;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &[dark] {
+    .novo-form-container {
+      form {
+        form-field {
+          form-label {
+            label {
+              color: #747e86;
+            }
+          }
+          form-input {
+            address-input,
+            currency-input,
+            date-input,
+            date-time-input,
+            entity-input,
+            float-input,
+            number-input,
+            percent-input,
+            picker-input,
+            text-area,
+            text-input,
+            time-input {
+              input,
+              textarea {
+                color: $light;
+                border-bottom: 1px solid rgba(lighten($dark, 12%), 0.25);
+                background: transparent !important;
+                &:focus {
+                  border-bottom: 1px solid $ocean;
+                }
+              }
+            }
+            novo-select {
+              > div[type='button'] {
+                color: $light;
+                border-bottom: 1px solid rgba(lighten($dark, 12%), 0.25);
+                &:focus {
+                  border-bottom: 1px solid $ocean;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  address-input {
+    display: flex;
+    flex-flow: row wrap;
+    .street-address {
+      flex: 3 3 75%;
+    }
+    .apt {
+      flex: 1 1 25%;
+    }
+    .city {
+      flex: 2 2 40%;
+    }
+    .state {
+      flex: 1 1 30%;
+    }
+    .zip {
+      flex: 1 0 20%;
+    }
+    .country-name {
+      flex: 4 4 100%;
+    }
+  }
+  &[layout='vertical'] {
+    .novo-form-container {
+      form {
+        div.novo-form-row,
+        div.novo-control-group-control {
+          novo-control,
+          novo-custom-control-container {
+            margin-top: 0;
+            &.disabled:not(.file):not(.editor) {
+              pointer-events: none;
+            }
+            &.disabled {
+              input:not(.picker-input):not(.tiles-input) {
+                &::-webkit-input-placeholder {
+                  color: lighten($dark, 30%) !important;
+                }
+                border-bottom-style: dashed !important;
+              }
+              input[type='checkbox']:not(.picker-input):not(.tiles-input) {
+                border-bottom-style: none !important;
+              }
+              textarea {
+                border-bottom-style: dashed !important;
+              }
+              div[type='button'] {
+                border-bottom-style: dashed !important;
+                i.bhi-collapse {
+                  top: auto;
+                  color: lighten($dark, 30%) !important;
+                }
+              }
+              label {
+                &.clear-all {
+                  display: none;
+                }
+              }
+              chips {
+                border-bottom: 1px dashed lighten($dark, 30%) !important;
+                input {
+                  border: none !important;
+                }
+                novo-picker {
+                  border: none;
+                  > input.picker-input {
+                    border: none !important;
+                  }
+                }
+                chip {
+                  opacity: 0.4;
+                  padding: 10px;
+                  .bhi-close {
+                    display: none;
+                  }
+                }
+              }
+              novo-tiles {
+                opacity: 0.7 !important;
+                label {
+                  color: inherit !important;
+                }
+              }
+              .bhi-search,
+              .bhi-times {
+                display: none;
+              }
+              i.bhi-clock,
+              i.bhi-collapse,
+              i.bhi-search,
+              i.bhi-radio-filled,
+              i.bhi-radio-empty,
+              i.bhi-checkbox-filled,
+              i.bhi-checkbox-empty,
+              i.bhi-calendar {
+                top: -5px;
+              }
+            }
+            .novo-control-container {
+              flex-direction: column;
+              align-items: flex-start;
+              position: relative;
+              margin-top: 16px;
+              .novo-control-outer-container {
+                max-width: 550px;
+                width: 100%;
+                .novo-control-inner-container {
+                  position: relative;
+                  .novo-control-inner-input-container {
+                    align-items: center;
+                    position: relative;
+                    i.required-indicator {
+                      &.bhi-circle {
+                        padding-top: 2px;
+                      }
+                      &.bhi-check {
+                        margin-top: -4px;
+                      }
+                      &.address {
+                        display: none;
+                      }
+                    }
+                    .novo-control-input-container.novo-control-input-with-label {
+                      flex-direction: row;
+                      display: flex;
+                    }
+                    div.novo-control-input.address {
+                      margin-left: 20px;
+                    }
+                  }
+                }
+                > label.novo-control-label {
+                  bottom: 20px;
+                  color: $dark;
+                  font-size: 0.9em;
+                  font-weight: 500;
+                  text-transform: uppercase;
+                  position: absolute;
+                  left: 22px;
+                  pointer-events: none;
+                  z-index: 1;
+                  width: 100%;
+                  display: block;
+                  cursor: text;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  overflow-x: hidden;
+                  transform: translateY(0);
+                  transform-origin: bottom left;
+                  transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), scale 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
+                    color 400ms cubic-bezier(0.25, 0.8, 0.25, 1), width 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+                  &.novo-control-empty {
+                    display: block;
+                    cursor: text;
+                    top: 7px;
+                    bottom: 0;
+                  }
+                  &.novo-control-extra-spacing,
+                  &.novo-control-always-active {
+                    top: 0;
+                  }
+                  &.novo-control-always-active,
+                  &.novo-control-focused,
+                  &.novo-control-filled {
+                    display: block;
+                    transform: translateY(-100%);
+                    height: 1.5em;
+                    top: 0;
+                  }
+                }
+                .address,
+                .checkbox,
+                .checklist,
+                .file,
+                .select,
+                .tiles {
+                  margin-top: 0.5em;
+                }
+              }
+              novo-tip-well.active {
+                margin-bottom: 5px;
+                font-size: 1em !important;
+                > div {
+                  width: 100%;
+                }
+              }
+              .field-message {
+                min-height: 24px;
+              }
+              .field-message,
+              novo-tip-well.active {
+                justify-content: space-between;
+                display: flex;
+                margin-left: 22px;
+                padding-left: 0;
+                .messages {
+                  min-height: 10px;
+                }
+                &.has-tip {
+                  margin-bottom: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+novo-dynamic-form .novo-form-container form div.novo-form-row novo-control.address .field-message {
+  margin-left: 0px;
+}
+
+control-confirm-modal,
+control-prompt-modal {
+  p {
+    max-width: 100%;
+  }
+  h2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i {
+      font-size: 0.8em;
+      margin: 0 0.5em;
+    }
+    label {
+      margin-right: 10px;
+    }
+  }
+}
+
+@keyframes iconEnter {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  90% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}