resources/scss/components/_filterBar.scss

   1 /**
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  *
  21  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  22  */
  23 /***** Vertical Filter Bar custom styles ******/
  24 $title-color: $text-color6;
  25 $background-color: $background-color8;
  26 $border-color: $border-color6;
  27 $main-color: $text-color4;
  28 $font-family-regular: $base-font-regular;
  29 $font-family-semibold: $base-font-bold;
  30 $res-folder: $icons-folder-path + '/filter';
  31
  32 .vfb-filters {
  33   font-family: $font-family-regular;
  34   background-color: $background-color;
  35   box-shadow: 2px 0px 1.98px 0.02px rgba(0, 0, 0, 0.09);
  36 }
  37
  38 .vfb-header {
  39   background-color: $main-color;
  40   font-size: $heading-font-2;
  41   color: $primary-background-color;
  42
  43   .clear-all{
  44     font-size: $body-font-2;
  45   }
  46 }
  47
  48 .filter {
  49   border-bottom: 1px solid $border-color;
  50   &.expand{
  51     .direction{
  52       background: url($res-folder + '/expand-filter.svg') no-repeat;
  53     }
  54   }
  55   &.collapse{
  56     .direction{
  57       background: url($res-folder  +'/collapse-filter.svg') no-repeat;
  58     }
  59   }
  60 }
  61
  62 .filter-header {
  63   .title {
  64     font-family: $font-family-regular;
  65     font-size: $heading-font-3;
  66     color: $title-color;
  67
  68     .iconClickArea{
  69       .icon{
  70         background: url($res-folder + '/filter-small.svg') no-repeat;
  71       }
  72     }
  73   }
  74 }
  75
  76 .filter-group::-webkit-scrollbar-thumb {
  77   background-color: $border-color;
  78 }
  79
  80 .filter-control {
  81   .label{
  82     font-family: $font-family-semibold;
  83     font-size: $body-font-3;
  84     color: $text-color3;
  85   }
  86 }
  87
  88 .dropdown-filter-control {
  89   .dropdown-select {
  90     font-family: $font-family-semibold;
  91     font-size: $body-font-2;
  92   }
  93 }
  94
  95 .filter-input{
  96   border: 1px solid $border-color;
  97   font-family: $font-family-regular;
  98   &:focus {
  99     border: 1px solid $main-color;
 100   }
 101
 102   &::-webkit-input-placeholder {
 103     font-size: $body-font-3;
 104     font-family: $font-family-regular;
 105     color: $neutral-gray;
 106   }
 107 }
 108
 109 .date-picker-filter-control{
 110   @extend .filter-control;
 111   .react-datepicker__input-container{
 112     width:100%;
 113   }
 114   input{
 115     @extend .filter-input;
 116   }
 117 }
 118
 119 .date-dropdown {
 120   .Select-clear-zone {
 121     visibility: visible;
 122   }
 123 }
 124
 125 /*utils*/
 126
 127 /*DATE PICKER*/
 128
 129 .react-datepicker {
 130   font-family: $font-family-regular;
 131 }
 132
 133 .react-datepicker .react-datepicker__day--selected {
 134   background-color: $main-color;
 135 }
 136 .react-datepicker .react-datepicker__day--selected:hover {
 137   background-color: $main-color;
 138 }
 139
 140 .react-datepicker__day--today {
 141   color: $text-color5;
 142 }
 143
 144 .date-picker-filter-control input[value=""] {
 145   background: #fff url($res-folder + '/calendar-icon.svg') no-repeat 97% center;
 146   background-size: 13px 14px;
 147 }
 148
 149 .date-picker-filter-control input:not([value=""]) {
 150   background: #fff url($res-folder + '/calendar-icon-hover.svg') no-repeat 97% center;
 151   background-size: 13px 14px;
 152 }
 153
 154
 155
 156 /***** Collapsible Panel Custom Styles *******/
 157 .collapsible-sliding-panel {
 158   min-width: 323px;
 159   background-color: $background-color;
 160   border-right: solid 1px #000;
 161   margin-left: -25px;
 162   transition: min-width 0.22s linear;
 163   overflow-y: auto;
 164   overflow-x: hidden;
 165 }
 166
 167 .collapsible-sliding-panel-main-content {
 168   width: 100%;
 169 }
 170
 171 .collapsible-sliding-panel.collapsible-sliding-panel-is-closed {
 172   min-width: 0px;
 173   transition: min-width 0.28s linear;
 174   border: none;
 175   div {
 176     display: none;
 177   }
 178 }
 179
 180 .collapsible-sliding-panel-expander {
 181   min-width: 25px;
 182   height: 30px;
 183   z-index: 2;
 184   position: relative;
 185   top: 0px;
 186   left: 323px;
 187   transition:left 0.22s linear;
 188
 189   background: $background-color6 url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat center;
 190   background-size: 5px;
 191   border-top-right-radius: 25px;
 192   border-bottom-right-radius: 25px;
 193   cursor: pointer;
 194 }
 195
 196 .collapsible-sliding-panel-expander.collapsible-sliding-panel-is-closed {
 197   min-width: 27px;
 198   left: 0px;
 199   transition: left 0.28s linear;
 200   background: url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat 7px center,
 201   url($icons-folder-path + '/collapsible-sliding-panel-expander-modified.svg') no-repeat 16px center $background-color6;
 202   background-size: 5px;
 203 }
 204
 205 .main-panel-class {
 206   padding: 10px;
 207 }