diff options
Diffstat (limited to 'resources/scss/components/_filterBar.scss')
| -rw-r--r-- | resources/scss/components/_filterBar.scss | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/resources/scss/components/_filterBar.scss b/resources/scss/components/_filterBar.scss new file mode 100644 index 0000000..0e98f32 --- /dev/null +++ b/resources/scss/components/_filterBar.scss @@ -0,0 +1,207 @@ +/** + * ============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-semibold; + 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; +} |