2 * ============LICENSE_START=======================================================
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
12 * http://www.apache.org/licenses/LICENSE-2.0
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=========================================================
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';
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);
37 background-color: $main-color;
38 font-size: $heading-font-2;
39 color: $primary-background-color;
42 font-size: $body-font-2;
47 border-bottom: 1px solid $border-color;
50 background: url($res-folder + '/expand-filter.svg') no-repeat;
55 background: url($res-folder +'/collapse-filter.svg') no-repeat;
62 font-family: $font-family-regular;
63 font-size: $heading-font-3;
68 background: url($res-folder + '/filter-small.svg') no-repeat;
74 .filter-group::-webkit-scrollbar-thumb {
75 background-color: $border-color;
80 font-family: $font-family-semibold;
81 font-size: $body-font-3;
86 .dropdown-filter-control {
88 font-family: $font-family-semibold;
89 font-size: $body-font-2;
94 border: 1px solid $border-color;
95 font-family: $font-family-regular;
97 border: 1px solid $main-color;
100 &::-webkit-input-placeholder {
101 font-size: $body-font-3;
102 font-family: $font-family-regular;
103 color: $neutral-gray;
107 .date-picker-filter-control{
108 @extend .filter-control;
109 .react-datepicker__input-container{
113 @extend .filter-input;
128 font-family: $font-family-regular;
131 .react-datepicker .react-datepicker__day--selected {
132 background-color: $main-color;
134 .react-datepicker .react-datepicker__day--selected:hover {
135 background-color: $main-color;
138 .react-datepicker__day--today {
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;
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;
154 /***** Collapsible Panel Custom Styles *******/
155 .collapsible-sliding-panel {
157 background-color: $background-color;
158 border-right: solid 1px #000;
160 transition: min-width 0.22s linear;
165 .collapsible-sliding-panel-main-content {
169 .collapsible-sliding-panel.collapsible-sliding-panel-is-closed {
171 transition: min-width 0.28s linear;
178 .collapsible-sliding-panel-expander {
185 transition:left 0.22s linear;
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;
194 .collapsible-sliding-panel-expander.collapsible-sliding-panel-is-closed {
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;