0e98f3259e903dfd259695f448d15cdf563e1bad
[aai/sparky-fe.git] / 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-semibold;
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 }

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use