Initial coomit for AAI-UI(sparky-fe)

Change-Id: I9f8482824a52bac431c100939899e760c0fa4fdb
Signed-off-by: ARULNA <arul.nambi@amdocs.com>

15 files changed, 825 insertions, 0 deletions

diff --git a/resources/scss/components/_buttons.scss b/resources/scss/components/_buttons.scss
new file mode 100644
index 0000000..00cce4b
--- /dev/null
+++ b/resources/scss/components/_buttons.scss
@@ -0,0 +1,70 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+$plus-circle-icon-size: 18px;
+.plus-icon-button {
+  background: url($plus-circle-icon) no-repeat;
+  background-size: $plus-circle-icon-size;
+  width: $plus-circle-icon-size;
+  height: $plus-circle-icon-size;
+  cursor: pointer;
+  &.small {
+    background-size: $plus-circle-icon-size - 6;
+    width: $plus-circle-icon-size - 6;
+    height: $plus-circle-icon-size - 6;
+  }
+}
+
+.primary-btn{
+  border: 1px solid;
+  border-color: $blue;
+  color: $blue;
+  font-weight: bolder;
+  @extend .body-1;
+  text-align: center;
+  padding: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  align-self: center;
+  background-color: $white;
+  .primary-btn-text {
+    width: 100%;
+  }
+  &:hover {
+    color: $blue;
+    border-color: $blue;
+    background-color: $tlv-hover;
+    &:active {
+      color: $blue;
+      border-color: $blue;
+    }
+  }
+
+  &:focus:not(:hover) {
+    color: $blue;
+    border-color: $blue;
+    background-color: $white;
+  }
+}
diff --git a/resources/scss/components/_containerPanel.scss b/resources/scss/components/_containerPanel.scss
new file mode 100644
index 0000000..82a70da
--- /dev/null
+++ b/resources/scss/components/_containerPanel.scss
@@ -0,0 +1,28 @@
+.titled-container {
+  margin: 5px;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 30px;
+}
+
+.titled-container-boarders {
+  border: solid 1px $black;
+  -webkit-box-shadow: 3px 3px 10px DarkGrey;
+  -moz-box-shadow: 3px 3px 10px DarkGrey;
+  box-shadow: 3px 3px 10px DarkGrey;
+}
+
+.titled-container-header {
+  padding: 0px 5px;
+  font-weight: bold;
+  font-size: 17px;
+  min-height: 25px;
+}
+
+.header-title {
+  width: 100%;
+}
+
+.titled-container > .contents {
+  padding: 5px;
+}
diff --git a/resources/scss/components/_dateRange.scss b/resources/scss/components/_dateRange.scss
new file mode 100644
index 0000000..1e6073d
--- /dev/null
+++ b/resources/scss/components/_dateRange.scss
@@ -0,0 +1,41 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.date-range {
+  display: block;
+}
+
+.date-range label {
+  margin: 5px 0px;
+  min-width: 70px;
+}
+
+.date-input {
+
+}
+
+.date-input input {
+  padding: 3px 2px 2px 4px;
+}
diff --git a/resources/scss/components/_dateRangeSelector.scss b/resources/scss/components/_dateRangeSelector.scss
new file mode 100644
index 0000000..c317f1b
--- /dev/null
+++ b/resources/scss/components/_dateRangeSelector.scss
@@ -0,0 +1,71 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.dateRangeSelector {
+  display: inline-block;
+  position: absolute;
+  margin-top: -1px;
+}
+
+.dateRangeSelectorSearchButton span {
+  margin: 0px 10px;
+  font-weight: bold;
+  color: $black;
+}
+
+#dateRangeSelectorPopover .popover-content {
+  padding: 5px;
+}
+
+#dateRangeSelectorPopover li {
+  list-style: none;
+  margin: 5px 0px;
+  padding: 0px;
+  font-size: small;
+  font-weight: bold;
+  min-width: 200px;
+  box-sizing: content-box;
+}
+
+#dateRangeSelectorPopover li a {
+  text-decoration: none;
+  background-color: $white;
+  display: block;
+  color: $dark-gray;
+  border-radius: 8px;
+  padding: 8px 5px 5px 8px;
+  border: solid 1px $tlv-gray;
+}
+
+#dateRangeSelectorPopover li.active a,
+#dateRangeSelectorPopover li a:hover {
+  background-color: $blue;
+  color: $white;
+}
+
+.dateRangeSearchButton {
+  padding: 5px 5px 2px 5px;
+  margin: 5px 0px 0px 0px;
+}
diff --git a/resources/scss/components/_dropdownMultiSelect.scss b/resources/scss/components/_dropdownMultiSelect.scss
new file mode 100644
index 0000000..0362b4d
--- /dev/null
+++ b/resources/scss/components/_dropdownMultiSelect.scss
@@ -0,0 +1,45 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.dropdown-multi-select {
+  .Select {
+    display: block;
+    width: 100%;
+    &.Select--multi {
+      .Select-value {
+        color: $text-black;
+        background-color: transparent;
+        border-color: $light-gray;
+      }
+      .Select-value-icon {
+        border-right-color: $light-gray;
+      }
+      .Select-arrow-zone {
+        vertical-align: top;
+        padding-top: 8px;
+      }
+    }
+  }
+}
diff --git a/resources/scss/components/_inlineMessage.scss b/resources/scss/components/_inlineMessage.scss
new file mode 100644
index 0000000..b878265
--- /dev/null
+++ b/resources/scss/components/_inlineMessage.scss
@@ -0,0 +1,49 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.inline-message-alert {
+  padding: 5px;
+  margin: 5px 0px 5px 0px;
+}
+
+.notification {
+  white-space: pre;
+  font-size: 15px;
+}
+
+.messageIconPanel {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: normal;
+  margin: 0px 10px;
+  float: left;
+}
+
+.messageTextPanel {
+  margin-top: 4px;
+  margin-left: 35px;
+  white-space: normal;
+  font-size: small;
+}
diff --git a/resources/scss/components/_inputOptions.scss b/resources/scss/components/_inputOptions.scss
new file mode 100644
index 0000000..e48e7dc
--- /dev/null
+++ b/resources/scss/components/_inputOptions.scss
@@ -0,0 +1,64 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.input-options {
+  display: flex;
+  border: 1px solid $light-gray;
+  border-radius: 2px;
+  height: 30px;
+  &:hover {
+    border-color: $gray;
+  }
+  .input-options-select {
+    float: left;
+    border: none;
+    transition-property: width;
+    transition-duration: 300ms;
+    padding-top:0px;
+    padding-bottom: 0px;
+    height:28px;
+  }
+
+  .input-options-other{
+    float: left;
+    height: 30px;
+    border: none;
+    padding-top:0px;
+    padding-bottom: 0px;
+    height:28px;
+  }
+  .input-options-separator {
+    width: 1px;
+    height: 24px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    border:1px solid $light-gray;
+  }
+}
+
+.input-options.has-error {
+   border-color: #A94442;
+}
+
diff --git a/resources/scss/components/_notifications.scss b/resources/scss/components/_notifications.scss
new file mode 100644
index 0000000..5773651
--- /dev/null
+++ b/resources/scss/components/_notifications.scss
@@ -0,0 +1,53 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.notification-modal {
+
+  .modal-content {
+    .modal-header {
+      padding: 15px 10px 10px;
+      .modal-title {
+        @extend .heading-3-medium;
+      }
+    }
+    .modal-body {
+      padding: 30px 15px;
+      @extend .body-1-medium;
+    }
+  }
+
+  &.danger {
+    .modal-content .modal-header {
+      border-top: 3px solid $red;
+    }
+  }
+
+  &.warning {
+    .modal-content .modal-header {
+      border-top: 3px solid $yellow;
+    }
+  }
+
+}
diff --git a/resources/scss/components/_progressBar.scss b/resources/scss/components/_progressBar.scss
new file mode 100644
index 0000000..d4434e2
--- /dev/null
+++ b/resources/scss/components/_progressBar.scss
@@ -0,0 +1,49 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.progress-bar-view {
+    display: -webkit-box;
+    padding: 5px;
+    .progress-bar-outside {
+      display: flex;
+      width: 90%;
+      justify-content: space-between;
+      background-color: lightgray;
+      border-radius: 15px;
+      height: 10px;
+      .progress-bar-inside {
+        display: block;
+        border: 1px solid gainsboro;
+        background-color: #4faa39;
+        border-radius: inherit;
+      }
+    }
+    .progress-bar-view-label {
+      margin-right: -30px;
+      margin-top: -2px;
+      margin-left: 10px;
+      color: black;
+     }
+  }
diff --git a/resources/scss/components/_punchOut.scss b/resources/scss/components/_punchOut.scss
new file mode 100644
index 0000000..ecedc13
--- /dev/null
+++ b/resources/scss/components/_punchOut.scss
@@ -0,0 +1,37 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+&.dox-ui-punch-out {
+  background-color: $background-gray;
+}
+
+&.dox-ui-punch-out.dox-ui-punch-out-full-page {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+}
diff --git a/resources/scss/components/_slidePanel.scss b/resources/scss/components/_slidePanel.scss
new file mode 100644
index 0000000..ac4cfb3
--- /dev/null
+++ b/resources/scss/components/_slidePanel.scss
@@ -0,0 +1,59 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.slide-panel {
+  transition: left .5s,right .5s;
+
+  .slide-panel-header {
+    padding: 10px;
+    height: 45px;
+    display: table;
+    width: 100%;
+    .slide-panel-header-title, .collapse-double-icon {
+      display: table-cell;
+      vertical-align: middle;
+    }
+    .slide-panel-header-title {
+      @extend .body-2;
+      text-align: center;
+      width: 100%;
+      color: $text-black;
+    }
+    .collapse-double-icon {
+      color: $text-black;
+      cursor: pointer;
+    }
+  }
+
+  .slide-panel-content {
+    opacity: 1;
+    transition: opacity .5s, visibility .5s;
+
+    &.closed {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+}
diff --git a/resources/scss/components/_titledComponent.scss b/resources/scss/components/_titledComponent.scss
new file mode 100644
index 0000000..64cd4a1
--- /dev/null
+++ b/resources/scss/components/_titledComponent.scss
@@ -0,0 +1,66 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.dep-titled-container {
+  border: solid 1px $black;
+  -webkit-box-shadow: 3px 3px 10px $dark-gray;
+  -moz-box-shadow: 3px 3px 10px $dark-gray;
+  box-shadow: 3px 3px 10px $dark-gray;
+  border-radius: 0px 0px 5px 5px;
+  margin: 20px 5px;
+
+  .header {
+    border-bottom: solid 1px $black;
+    padding: 5px;
+    background-color: $light-gray;
+    font-weight: bold;
+    font-size: $heading-font-3;
+
+    .toggle-visibility-button, .toggle-visibility-button:focus {
+      float: right;
+      background-color: $light-gray;
+      border: none;
+      margin-top: -2px;
+    }
+
+    .toggle-visibility-button:hover {
+      background-color: $light-gray;
+      border: none;
+
+      .fa {
+        color: $black;
+      }
+    }
+
+    .header-title {
+      width: 100%;
+    }
+  }
+
+  .contents {
+    padding: 5px;
+    text-align: center;
+  }
+}
diff --git a/resources/scss/components/_toggleButtonGroup.scss b/resources/scss/components/_toggleButtonGroup.scss
new file mode 100644
index 0000000..a7593bf
--- /dev/null
+++ b/resources/scss/components/_toggleButtonGroup.scss
@@ -0,0 +1,32 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.displayOptionButtons {
+  float: right;
+}
+
+.displayOptionButtons button {
+  padding: 8px 15px;
+}
diff --git a/resources/scss/components/_toggleInput.scss b/resources/scss/components/_toggleInput.scss
new file mode 100644
index 0000000..b0c788d
--- /dev/null
+++ b/resources/scss/components/_toggleInput.scss
@@ -0,0 +1,87 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+.toggle-input-wrapper {
+  $toggle-width: 40px;
+  $toggle-height: 20px;
+  display: table;
+  .toggle-switch, .toggle-input-label {
+    display: table-cell;
+    vertical-align: middle;
+    padding-left: 10px;
+  }
+  .toggle {
+    position: absolute;
+    margin-left: -9999px;
+    visibility: hidden;
+  }
+  .toggle + label {
+    @extend %noselect;
+    display: block;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+  }
+
+  input.toggle-round-flat + label {
+    padding: 1px;
+    width: $toggle-width;
+    height: $toggle-height;
+    background-color: $dark-gray;
+    border-radius: $toggle-height;
+    transition: background 0.4s;
+  }
+  input.toggle-round-flat + label:before,
+  input.toggle-round-flat + label:after {
+    display: block;
+    position: absolute;
+    content: "";
+  }
+  input.toggle-round-flat + label:before {
+    top: 1px;
+    left: 1px;
+    bottom: 1px;
+    right: 1px;
+    background-color: $white;
+    border-radius: $toggle-height;
+    transition: background 0.4s;
+  }
+  input.toggle-round-flat + label:after {
+    top: 4px;
+    left: 4px;
+    bottom: 4px;
+    width: $toggle-height - 8;
+    background-color: $dark-gray;
+    border-radius: $toggle-height - 8;
+    transition: margin 0.4s, background 0.4s;
+  }
+  input.toggle-round-flat:checked + label {
+    background-color: $link-blue;
+  }
+  input.toggle-round-flat:checked + label:after {
+    margin-left: $toggle-height;
+    background-color: $link-blue;
+  }
+}
diff --git a/resources/scss/components/_validationForm.scss b/resources/scss/components/_validationForm.scss
new file mode 100644
index 0000000..9c7ebff
--- /dev/null
+++ b/resources/scss/components/_validationForm.scss
@@ -0,0 +1,74 @@
+/*
+* ============LICENSE_START=======================================================
+* SPARKY (AAI UI service)
+* ================================================================================
+* Copyright © 2017 AT&T Intellectual Property.
+* Copyright © 2017 Amdocs
+* All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*      http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*
+* ECOMP and OpenECOMP are trademarks
+* and service marks of AT&T Intellectual Property.
+*/
+
+form {
+  .validation-form-content {
+    .validation-input-wrapper {
+      position: relative;
+    }
+    .nav-tabs {
+      .invalid-tab:not(.active) {
+        a {
+          color: $red;
+        }
+      }
+    }
+    .validation-error-message {
+      &.bottom {
+        .tooltip-arrow {
+          border-bottom-color: $red;
+        }
+      }
+      &.right {
+        .tooltip-arrow {
+          border-right-color: $red;
+        }
+      }
+      &.left {
+        .tooltip-arrow {
+          border-left-color: $red;
+        }
+      }
+      .tooltip-inner {
+        background-color: $red;
+      }
+    }
+  }
+
+  .validation-buttons {
+    padding: 20px 0;
+    text-align: right;
+    button:first-child {
+      margin-right: 15px;
+    }
+  }
+}
+
+.modal-body {
+  .validation-buttons {
+    padding: 20px 15px;
+    background-color: $tlv-gray;
+  }
+}