/** * ============LICENSE_START======================================================= * org.onap.aai * ================================================================================ * Copyright © 2017 AT&T Intellectual Property. All rights reserved. * Copyright © 2017 Amdocs * ================================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ============LICENSE_END========================================================= * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ /***** Vertical Filter Bar custom styles ******/ $title-color: $text-color6; $background-color: $background-color8; $border-color: $border-color6; $main-color: $text-color4; $font-family-regular: $base-font-regular; $font-family-semibold: $base-font-bold; $res-folder: $icons-folder-path + '/filter'; .vfb-filters { font-family: $font-family-regular; background-color: $background-color; box-shadow: 2px 0px 1.98px 0.02px rgba(0, 0, 0, 0.09); } .vfb-header { background-color: $main-color; font-size: $heading-font-2; color: $primary-background-color; .clear-all{ font-size: $body-font-2; } } .filter { border-bottom: 1px solid $border-color; &.expand{ .direction{ background: url($res-folder + '/expand-filter.svg') no-repeat; } } &.collapse{ .direction{ background: url($res-folder +'/collapse-filter.svg') no-repeat; } } } .filter-header { .title { font-family: $font-family-regular; font-size: $heading-font-3; color: $title-color; .iconClickArea{ .icon{ background: url($res-folder + '/filter-small.svg') no-repeat; } } } } .filter-group::-webkit-scrollbar-thumb { background-color: $border-color; } .filter-control { .label{ font-family: $font-family-semibold; font-size: $body-font-3; color: $text-color3; } } .dropdown-filter-control { .dropdown-select { font-family: $font-family-semibold; font-size: $body-font-2; } } .filter-input{ border: 1px solid $border-color; font-family: $font-family-regular; &:focus { border: 1px solid $main-color; } &::-webkit-input-placeholder { font-size: $body-font-3; font-family: $font-family-regular; color: $neutral-gray; } } .date-picker-filter-control{ @extend .filter-control; .react-datepicker__input-container{ width:100%; } input{ @extend .filter-input; } } .date-dropdown { .Select-clear-zone { visibility: visible; } } /*utils*/ /*DATE PICKER*/ .react-datepicker { font-family: $font-family-regular; } .react-datepicker .react-datepicker__day--selected { background-color: $main-color; } .react-datepicker .react-datepicker__day--selected:hover { background-color: $main-color; } .react-datepicker__day--today { color: $text-color5; } .date-picker-filter-control input[value=""] { background: #fff url($res-folder + '/calendar-icon.svg') no-repeat 97% center; background-size: 13px 14px; } .date-picker-filter-control input:not([value=""]) { background: #fff url($res-folder + '/calendar-icon-hover.svg') no-repeat 97% center; background-size: 13px 14px; } /***** Collapsible Panel Custom Styles *******/ .collapsible-sliding-panel { min-width: 323px; background-color: $background-color; border-right: solid 1px #000; margin-left: -25px; transition: min-width 0.22s linear; overflow-y: auto; overflow-x: hidden; } .collapsible-sliding-panel-main-content { width: 100%; } .collapsible-sliding-panel.collapsible-sliding-panel-is-closed { min-width: 0px; transition: min-width 0.28s linear; border: none; div { display: none; } } .collapsible-sliding-panel-expander { min-width: 25px; height: 30px; z-index: 2; position: relative; top: 0px; left: 323px; transition:left 0.22s linear; background: $background-color6 url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat center; background-size: 5px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; cursor: pointer; } .collapsible-sliding-panel-expander.collapsible-sliding-panel-is-closed { min-width: 27px; left: 0px; transition: left 0.28s linear; background: url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat 7px center, url($icons-folder-path + '/collapsible-sliding-panel-expander-modified.svg') no-repeat 16px center $background-color6; background-size: 5px; } .main-panel-class { padding: 10px; }