resources/scss/components/_filterBar.scss

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