2 * ============LICENSE_START=======================================================
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
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 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
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';
33 font-family: $font-family-semibold;
34 background-color: $background-color;
35 box-shadow: 2px 0px 1.98px 0.02px rgba(0, 0, 0, 0.09);
39 background-color: $main-color;
40 font-size: $heading-font-2;
41 color: $primary-background-color;
44 font-size: $body-font-2;
49 border-bottom: 1px solid $border-color;
52 background: url($res-folder + '/expand-filter.svg') no-repeat;
57 background: url($res-folder +'/collapse-filter.svg') no-repeat;
64 font-family: $font-family-regular;
65 font-size: $heading-font-3;
70 background: url($res-folder + '/filter-small.svg') no-repeat;
76 .filter-group::-webkit-scrollbar-thumb {
77 background-color: $border-color;
82 font-family: $font-family-semibold;
83 font-size: $body-font-3;
88 .dropdown-filter-control {
90 font-family: $font-family-semibold;
91 font-size: $body-font-2;
96 border: 1px solid $border-color;
97 font-family: $font-family-regular;
99 border: 1px solid $main-color;
102 &::-webkit-input-placeholder {
103 font-size: $body-font-3;
104 font-family: $font-family-regular;
105 color: $neutral-gray;
109 .date-picker-filter-control{
110 @extend .filter-control;
111 .react-datepicker__input-container{
115 @extend .filter-input;
130 font-family: $font-family-regular;
133 .react-datepicker .react-datepicker__day--selected {
134 background-color: $main-color;
136 .react-datepicker .react-datepicker__day--selected:hover {
137 background-color: $main-color;
140 .react-datepicker__day--today {
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;
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;
156 /***** Collapsible Panel Custom Styles *******/
157 .collapsible-sliding-panel {
159 background-color: $background-color;
160 border-right: solid 1px #000;
162 transition: min-width 0.22s linear;
167 .collapsible-sliding-panel-main-content {
171 .collapsible-sliding-panel.collapsible-sliding-panel-is-closed {
173 transition: min-width 0.28s linear;
180 .collapsible-sliding-panel-expander {
187 transition:left 0.22s linear;
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;
196 .collapsible-sliding-panel-expander.collapsible-sliding-panel-is-closed {
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;