Updating versions of Sparky FE files

Updating versions of Sparky FE files as previous ones were out-dated

Issue-ID: AAI-543
Change-Id: Idc7d09e0efabaa5ef82db126cf7563fc8370f4f9
Signed-off-by: Shawn Severin <shawn.severin@amdocs.com>

16 files changed, 250 insertions, 247 deletions

diff --git a/resources/scss/components/_buttons.scss b/resources/scss/components/_buttons.scss
index 6aab3e0..dbb684d 100644
--- a/resources/scss/components/_buttons.scss
+++ b/resources/scss/components/_buttons.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 $plus-circle-icon-size: 18px;
 .plus-icon-button {
   background: url($plus-circle-icon) no-repeat;
@@ -38,8 +37,8 @@ $plus-circle-icon-size: 18px;
 
 .primary-btn{
   border: 1px solid;
-  border-color: $blue;
-  color: $blue;
+  border-color: $border-color3;
+  color: $text-color4;
   font-weight: bolder;
   @extend .body-1;
   text-align: center;
@@ -47,23 +46,23 @@ $plus-circle-icon-size: 18px;
   border-radius: 5px;
   cursor: pointer;
   align-self: center;
-  background-color: $white;
+  background-color: $primary-background-color;
   .primary-btn-text {
     width: 100%;
   }
   &:hover {
-    color: $blue;
-    border-color: $blue;
-    background-color: $tlv-hover;
+    color: $background-color5;
+    border-color: $border-color3;
+    background-color: $background-color12;
     &:active {
-      color: $blue;
-      border-color: $blue;
+      color: $background-color5;
+      border-color: $border-color3;
     }
   }
 
   &:focus:not(:hover) {
-    color: $blue;
-    border-color: $blue;
-    background-color: $white;
+    color: $background-color5;
+    border-color: $border-color3;
+    background-color: $primary-background-color;
   }
 }
diff --git a/resources/scss/components/_containerPanel.scss b/resources/scss/components/_containerPanel.scss
index 46bc472..48fc4b9 100644
--- a/resources/scss/components/_containerPanel.scss
+++ b/resources/scss/components/_containerPanel.scss
@@ -28,10 +28,10 @@
 }
 
 .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;
+  border: solid 1px $border-color1;
+  -webkit-box-shadow: 3px 3px 10px $shadow-color1;
+  -moz-box-shadow: 3px 3px 10px $shadow-color1;
+  box-shadow: 3px 3px 10px $shadow-color1;
 }
 
 .titled-container-header {
diff --git a/resources/scss/components/_dateRange.scss b/resources/scss/components/_dateRange.scss
deleted file mode 100644
index 0f63fcb..0000000
--- a/resources/scss/components/_dateRange.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * 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 is a trademark and service mark 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
deleted file mode 100644
index f580cd5..0000000
--- a/resources/scss/components/_dateRangeSelector.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * 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 is a trademark and service mark 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
index caa0db6..7c9e840 100644
--- a/resources/scss/components/_dropdownMultiSelect.scss
+++ b/resources/scss/components/_dropdownMultiSelect.scss
@@ -20,20 +20,19 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 .dropdown-multi-select {
   .Select {
     display: block;
     width: 100%;
     &.Select--multi {
       .Select-value {
-        color: $text-black;
+        color: $text-color1;
         background-color: transparent;
-        border-color: $light-gray;
+        border-color: $border-color5;
       }
       .Select-value-icon {
-        border-right-color: $light-gray;
+        border-right-color: $border-color5;
       }
       .Select-arrow-zone {
         vertical-align: top;
diff --git a/resources/scss/components/_filterBar.scss b/resources/scss/components/_filterBar.scss
new file mode 100644
index 0000000..0e98f32
--- /dev/null
+++ b/resources/scss/components/_filterBar.scss
@@ -0,0 +1,207 @@
+/**
+ * ============LICENSE_START=======================================================
+ * org.onap.aai
+ * ================================================================================
+ * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2017 Amdocs
+ * ================================================================================
+ * 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 is a trademark and service mark of AT&T Intellectual Property.
+ */
+/***** Vertical Filter Bar custom styles ******/
+$title-color: $text-color6;
+$background-color: $background-color8;
+$border-color: $border-color6;
+$main-color: $text-color4;
+$font-family-regular: $base-font-regular;
+$font-family-semibold: $base-font-bold;
+$res-folder: $icons-folder-path + '/filter';
+
+.vfb-filters {
+  font-family: $font-family-semibold;
+  background-color: $background-color;
+  box-shadow: 2px 0px 1.98px 0.02px rgba(0, 0, 0, 0.09);
+}
+
+.vfb-header {
+  background-color: $main-color;
+  font-size: $heading-font-2;
+  color: $primary-background-color;
+
+  .clear-all{
+    font-size: $body-font-2;
+  }
+}
+
+.filter {
+  border-bottom: 1px solid $border-color;
+  &.expand{
+    .direction{
+      background: url($res-folder + '/expand-filter.svg') no-repeat;
+    }
+  }
+  &.collapse{
+    .direction{
+      background: url($res-folder  +'/collapse-filter.svg') no-repeat;
+    }
+  }
+}
+
+.filter-header {
+  .title {
+    font-family: $font-family-regular;
+    font-size: $heading-font-3;
+    color: $title-color;
+
+    .iconClickArea{
+      .icon{
+        background: url($res-folder + '/filter-small.svg') no-repeat;
+      }
+    }
+  }
+}
+
+.filter-group::-webkit-scrollbar-thumb {
+  background-color: $border-color;
+}
+
+.filter-control {
+  .label{
+    font-family: $font-family-semibold;
+    font-size: $body-font-3;
+    color: $text-color3;
+  }
+}
+
+.dropdown-filter-control {
+  .dropdown-select {
+    font-family: $font-family-semibold;
+    font-size: $body-font-2;
+  }
+}
+
+.filter-input{
+  border: 1px solid $border-color;
+  font-family: $font-family-regular;
+  &:focus {
+    border: 1px solid $main-color;
+  }
+
+  &::-webkit-input-placeholder {
+    font-size: $body-font-3;
+    font-family: $font-family-regular;
+    color: $neutral-gray;
+  }
+}
+
+.date-picker-filter-control{
+  @extend .filter-control;
+  .react-datepicker__input-container{
+    width:100%;
+  }
+  input{
+    @extend .filter-input;
+  }
+}
+
+.date-dropdown {
+  .Select-clear-zone {
+    visibility: visible;
+  }
+}
+
+/*utils*/
+
+/*DATE PICKER*/
+
+.react-datepicker {
+  font-family: $font-family-regular;
+}
+
+.react-datepicker .react-datepicker__day--selected {
+  background-color: $main-color;
+}
+.react-datepicker .react-datepicker__day--selected:hover {
+  background-color: $main-color;
+}
+
+.react-datepicker__day--today {
+  color: $text-color5;
+}
+
+.date-picker-filter-control input[value=""] {
+  background: #fff url($res-folder + '/calendar-icon.svg') no-repeat 97% center;
+  background-size: 13px 14px;
+}
+
+.date-picker-filter-control input:not([value=""]) {
+  background: #fff url($res-folder + '/calendar-icon-hover.svg') no-repeat 97% center;
+  background-size: 13px 14px;
+}
+
+
+
+/***** Collapsible Panel Custom Styles *******/
+.collapsible-sliding-panel {
+  min-width: 323px;
+  background-color: $background-color;
+  border-right: solid 1px #000;
+  margin-left: -25px;
+  transition: min-width 0.22s linear;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.collapsible-sliding-panel-main-content {
+  width: 100%;
+}
+
+.collapsible-sliding-panel.collapsible-sliding-panel-is-closed {
+  min-width: 0px;
+  transition: min-width 0.28s linear;
+  border: none;
+  div {
+    display: none;
+  }
+}
+
+.collapsible-sliding-panel-expander {
+  min-width: 25px;
+  height: 30px;
+  z-index: 2;
+  position: relative;
+  top: 0px;
+  left: 323px;
+  transition:left 0.22s linear;
+
+  background: $background-color6 url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat center;
+  background-size: 5px;
+  border-top-right-radius: 25px;
+  border-bottom-right-radius: 25px;
+  cursor: pointer;
+}
+
+.collapsible-sliding-panel-expander.collapsible-sliding-panel-is-closed {
+  min-width: 27px;
+  left: 0px;
+  transition: left 0.28s linear;
+  background: url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat 7px center,
+  url($icons-folder-path + '/collapsible-sliding-panel-expander-modified.svg') no-repeat 16px center $background-color6;
+  background-size: 5px;
+}
+
+.main-panel-class {
+  padding: 10px;
+}
diff --git a/resources/scss/components/_inlineMessage.scss b/resources/scss/components/_inlineMessage.scss
index afc1e51..283c0d7 100644
--- a/resources/scss/components/_inlineMessage.scss
+++ b/resources/scss/components/_inlineMessage.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .inline-message-alert {
   padding: 5px;
   margin: 5px 0px 5px 0px;
diff --git a/resources/scss/components/_inputOptions.scss b/resources/scss/components/_inputOptions.scss
index ee0f86e..1851d14 100644
--- a/resources/scss/components/_inputOptions.scss
+++ b/resources/scss/components/_inputOptions.scss
@@ -21,14 +21,13 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .input-options {
   display: flex;
-  border: 1px solid $light-gray;
+  border: 1px solid $border-color5;
   border-radius: 2px;
   height: 30px;
   &:hover {
-    border-color: $gray;
+    border-color: $border-color6;
   }
   .input-options-select {
     float: left;
@@ -53,11 +52,11 @@
     height: 24px;
     margin-top: 2px;
     margin-bottom: 2px;
-    border:1px solid $light-gray;
+    border:1px solid $border-color5;
   }
 }
 
 .input-options.has-error {
-   border-color: #A94442;
+   border-color: $red;
 }
 
diff --git a/resources/scss/components/_notifications.scss b/resources/scss/components/_notifications.scss
index 871d682..8a6363a 100644
--- a/resources/scss/components/_notifications.scss
+++ b/resources/scss/components/_notifications.scss
@@ -20,8 +20,7 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 .notification-modal {
 
   .modal-content {
@@ -45,7 +44,7 @@
 
   &.warning {
     .modal-content .modal-header {
-      border-top: 3px solid $yellow;
+      border-top: 3px solid $border-color7;
     }
   }
 
diff --git a/resources/scss/components/_progressBar.scss b/resources/scss/components/_progressBar.scss
deleted file mode 100644
index 0755e68..0000000
--- a/resources/scss/components/_progressBar.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * 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 is a trademark and service mark 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
deleted file mode 100644
index f99d8af..0000000
--- a/resources/scss/components/_punchOut.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
- * Copyright © 2017 Amdocs
- * ================================================================================
- * 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 is a trademark and service mark 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
index e36b163..9eaddcd 100644
--- a/resources/scss/components/_slidePanel.scss
+++ b/resources/scss/components/_slidePanel.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .slide-panel {
   transition: left .5s,right .5s;
 
@@ -38,10 +37,10 @@
       @extend .body-2;
       text-align: center;
       width: 100%;
-      color: $text-black;
+      color: $text-color1;
     }
     .collapse-double-icon {
-      color: $text-black;
+      color: $text-color1;
       cursor: pointer;
     }
   }
diff --git a/resources/scss/components/_titledComponent.scss b/resources/scss/components/_titledComponent.scss
index ca1bebf..20c7a2c 100644
--- a/resources/scss/components/_titledComponent.scss
+++ b/resources/scss/components/_titledComponent.scss
@@ -21,35 +21,34 @@
  * ECOMP is a trademark and service mark 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: solid 1px $border-color1;
+  -webkit-box-shadow: 3px 3px 10px $shadow-color1;
+  -moz-box-shadow: 3px 3px 10px $shadow-color1;
+  box-shadow: 3px 3px 10px $shadow-color1;
   border-radius: 0px 0px 5px 5px;
   margin: 20px 5px;
 
   .header {
-    border-bottom: solid 1px $black;
+    border-bottom: solid 1px $border-color1;
     padding: 5px;
-    background-color: $light-gray;
+    background-color: $background-color8;
     font-weight: bold;
     font-size: $heading-font-3;
 
     .toggle-visibility-button, .toggle-visibility-button:focus {
       float: right;
-      background-color: $light-gray;
+      background-color: $background-color8;
       border: none;
       margin-top: -2px;
     }
 
     .toggle-visibility-button:hover {
-      background-color: $light-gray;
+      background-color: $background-color8;
       border: none;
 
       .fa {
-        color: $black;
+        color: $text-color3;
       }
     }
 
diff --git a/resources/scss/components/_toggleButtonGroup.scss b/resources/scss/components/_toggleButtonGroup.scss
index 008b656..01fdc70 100644
--- a/resources/scss/components/_toggleButtonGroup.scss
+++ b/resources/scss/components/_toggleButtonGroup.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .displayOptionButtons {
   float: right;
 }
diff --git a/resources/scss/components/_toggleInput.scss b/resources/scss/components/_toggleInput.scss
index 3401631..59c2058 100644
--- a/resources/scss/components/_toggleInput.scss
+++ b/resources/scss/components/_toggleInput.scss
@@ -21,7 +21,6 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
-
 .toggle-input-wrapper {
   $toggle-width: 40px;
   $toggle-height: 20px;
@@ -48,7 +47,7 @@
     padding: 1px;
     width: $toggle-width;
     height: $toggle-height;
-    background-color: $dark-gray;
+    background-color: $background-color2;
     border-radius: $toggle-height;
     transition: background 0.4s;
   }
@@ -63,7 +62,7 @@
     left: 1px;
     bottom: 1px;
     right: 1px;
-    background-color: $white;
+    background-color: $primary-background-color;
     border-radius: $toggle-height;
     transition: background 0.4s;
   }
@@ -72,15 +71,15 @@
     left: 4px;
     bottom: 4px;
     width: $toggle-height - 8;
-    background-color: $dark-gray;
+    background-color: $background-color2;
     border-radius: $toggle-height - 8;
     transition: margin 0.4s, background 0.4s;
   }
   input.toggle-round-flat:checked + label {
-    background-color: $link-blue;
+    background-color: $background-color3;
   }
   input.toggle-round-flat:checked + label:after {
     margin-left: $toggle-height;
-    background-color: $link-blue;
+    background-color: $background-color3;
   }
 }
diff --git a/resources/scss/components/_validationForm.scss b/resources/scss/components/_validationForm.scss
index 020c5eb..686b9f1 100644
--- a/resources/scss/components/_validationForm.scss
+++ b/resources/scss/components/_validationForm.scss
@@ -20,8 +20,7 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
-
-
+ 
 form {
   .validation-form-content {
     .validation-input-wrapper {
@@ -68,6 +67,6 @@ form {
 .modal-body {
   .validation-buttons {
     padding: 20px 15px;
-    background-color: $tlv-gray;
+    background-color: $background-color12;
   }
 }