Updating versions of Sparky FE files

[aai/sparky-fe.git] / resources / scss / components / _filterBar.scss

diff --git a/resources/scss/components/_filterBar.scss b/resources/scss/components/_filterBar.scss
new file mode 100644 (file)
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;
+}