diff options
Diffstat (limited to 'resources/scss/components')
| -rw-r--r-- | resources/scss/components/_buttons.scss | 23 | ||||
| -rw-r--r-- | resources/scss/components/_containerPanel.scss | 8 | ||||
| -rw-r--r-- | resources/scss/components/_dateRange.scss | 40 | ||||
| -rw-r--r-- | resources/scss/components/_dateRangeSelector.scss | 70 | ||||
| -rw-r--r-- | resources/scss/components/_dropdownMultiSelect.scss | 9 | ||||
| -rw-r--r-- | resources/scss/components/_filterBar.scss | 207 | ||||
| -rw-r--r-- | resources/scss/components/_inlineMessage.scss | 1 | ||||
| -rw-r--r-- | resources/scss/components/_inputOptions.scss | 9 | ||||
| -rw-r--r-- | resources/scss/components/_notifications.scss | 5 | ||||
| -rw-r--r-- | resources/scss/components/_progressBar.scss | 48 | ||||
| -rw-r--r-- | resources/scss/components/_punchOut.scss | 36 | ||||
| -rw-r--r-- | resources/scss/components/_slidePanel.scss | 5 | ||||
| -rw-r--r-- | resources/scss/components/_titledComponent.scss | 19 | ||||
| -rw-r--r-- | resources/scss/components/_toggleButtonGroup.scss | 1 | ||||
| -rw-r--r-- | resources/scss/components/_toggleInput.scss | 11 | ||||
| -rw-r--r-- | resources/scss/components/_validationForm.scss | 5 |
16 files changed, 250 insertions, 247 deletions
diff --git a/resources/scss/components/_buttons.scss b/resources/scss/components/_buttons.scss index 6aab3e0..dbb684d 100644 --- a/resources/scss/components/_buttons.scss +++ b/resources/scss/components/_buttons.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - $plus-circle-icon-size: 18px; .plus-icon-button { background: url($plus-circle-icon) no-repeat; @@ -38,8 +37,8 @@ $plus-circle-icon-size: 18px; .primary-btn{ border: 1px solid; - border-color: $blue; - color: $blue; + border-color: $border-color3; + color: $text-color4; font-weight: bolder; @extend .body-1; text-align: center; @@ -47,23 +46,23 @@ $plus-circle-icon-size: 18px; border-radius: 5px; cursor: pointer; align-self: center; - background-color: $white; + background-color: $primary-background-color; .primary-btn-text { width: 100%; } &:hover { - color: $blue; - border-color: $blue; - background-color: $tlv-hover; + color: $background-color5; + border-color: $border-color3; + background-color: $background-color12; &:active { - color: $blue; - border-color: $blue; + color: $background-color5; + border-color: $border-color3; } } &:focus:not(:hover) { - color: $blue; - border-color: $blue; - background-color: $white; + color: $background-color5; + border-color: $border-color3; + background-color: $primary-background-color; } } diff --git a/resources/scss/components/_containerPanel.scss b/resources/scss/components/_containerPanel.scss index 46bc472..48fc4b9 100644 --- a/resources/scss/components/_containerPanel.scss +++ b/resources/scss/components/_containerPanel.scss @@ -28,10 +28,10 @@ } .titled-container-boarders { - border: solid 1px $black; - -webkit-box-shadow: 3px 3px 10px DarkGrey; - -moz-box-shadow: 3px 3px 10px DarkGrey; - box-shadow: 3px 3px 10px DarkGrey; + border: solid 1px $border-color1; + -webkit-box-shadow: 3px 3px 10px $shadow-color1; + -moz-box-shadow: 3px 3px 10px $shadow-color1; + box-shadow: 3px 3px 10px $shadow-color1; } .titled-container-header { diff --git a/resources/scss/components/_dateRange.scss b/resources/scss/components/_dateRange.scss deleted file mode 100644 index 0f63fcb..0000000 --- a/resources/scss/components/_dateRange.scss +++ /dev/null @@ -1,40 +0,0 @@ -/** - * ============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. - */ - - -.date-range { - display: block; -} - -.date-range label { - margin: 5px 0px; - min-width: 70px; -} - -.date-input { - -} - -.date-input input { - padding: 3px 2px 2px 4px; -} diff --git a/resources/scss/components/_dateRangeSelector.scss b/resources/scss/components/_dateRangeSelector.scss deleted file mode 100644 index f580cd5..0000000 --- a/resources/scss/components/_dateRangeSelector.scss +++ /dev/null @@ -1,70 +0,0 @@ -/** - * ============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. - */ - - -.dateRangeSelector { - display: inline-block; - position: absolute; - margin-top: -1px; -} - -.dateRangeSelectorSearchButton span { - margin: 0px 10px; - font-weight: bold; - color: $black; -} - -#dateRangeSelectorPopover .popover-content { - padding: 5px; -} - -#dateRangeSelectorPopover li { - list-style: none; - margin: 5px 0px; - padding: 0px; - font-size: small; - font-weight: bold; - min-width: 200px; - box-sizing: content-box; -} - -#dateRangeSelectorPopover li a { - text-decoration: none; - background-color: $white; - display: block; - color: $dark-gray; - border-radius: 8px; - padding: 8px 5px 5px 8px; - border: solid 1px $tlv-gray; -} - -#dateRangeSelectorPopover li.active a, -#dateRangeSelectorPopover li a:hover { - background-color: $blue; - color: $white; -} - -.dateRangeSearchButton { - padding: 5px 5px 2px 5px; - margin: 5px 0px 0px 0px; -} diff --git a/resources/scss/components/_dropdownMultiSelect.scss b/resources/scss/components/_dropdownMultiSelect.scss index caa0db6..7c9e840 100644 --- a/resources/scss/components/_dropdownMultiSelect.scss +++ b/resources/scss/components/_dropdownMultiSelect.scss @@ -20,20 +20,19 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + .dropdown-multi-select { .Select { display: block; width: 100%; &.Select--multi { .Select-value { - color: $text-black; + color: $text-color1; background-color: transparent; - border-color: $light-gray; + border-color: $border-color5; } .Select-value-icon { - border-right-color: $light-gray; + border-right-color: $border-color5; } .Select-arrow-zone { vertical-align: top; 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; +} diff --git a/resources/scss/components/_inlineMessage.scss b/resources/scss/components/_inlineMessage.scss index afc1e51..283c0d7 100644 --- a/resources/scss/components/_inlineMessage.scss +++ b/resources/scss/components/_inlineMessage.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .inline-message-alert { padding: 5px; margin: 5px 0px 5px 0px; diff --git a/resources/scss/components/_inputOptions.scss b/resources/scss/components/_inputOptions.scss index ee0f86e..1851d14 100644 --- a/resources/scss/components/_inputOptions.scss +++ b/resources/scss/components/_inputOptions.scss @@ -21,14 +21,13 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .input-options { display: flex; - border: 1px solid $light-gray; + border: 1px solid $border-color5; border-radius: 2px; height: 30px; &:hover { - border-color: $gray; + border-color: $border-color6; } .input-options-select { float: left; @@ -53,11 +52,11 @@ height: 24px; margin-top: 2px; margin-bottom: 2px; - border:1px solid $light-gray; + border:1px solid $border-color5; } } .input-options.has-error { - border-color: #A94442; + border-color: $red; } diff --git a/resources/scss/components/_notifications.scss b/resources/scss/components/_notifications.scss index 871d682..8a6363a 100644 --- a/resources/scss/components/_notifications.scss +++ b/resources/scss/components/_notifications.scss @@ -20,8 +20,7 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + .notification-modal { .modal-content { @@ -45,7 +44,7 @@ &.warning { .modal-content .modal-header { - border-top: 3px solid $yellow; + border-top: 3px solid $border-color7; } } diff --git a/resources/scss/components/_progressBar.scss b/resources/scss/components/_progressBar.scss deleted file mode 100644 index 0755e68..0000000 --- a/resources/scss/components/_progressBar.scss +++ /dev/null @@ -1,48 +0,0 @@ -/** - * ============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. - */ - - -.progress-bar-view { - display: -webkit-box; - padding: 5px; - .progress-bar-outside { - display: flex; - width: 90%; - justify-content: space-between; - background-color: lightgray; - border-radius: 15px; - height: 10px; - .progress-bar-inside { - display: block; - border: 1px solid gainsboro; - background-color: #4faa39; - border-radius: inherit; - } - } - .progress-bar-view-label { - margin-right: -30px; - margin-top: -2px; - margin-left: 10px; - color: black; - } - } diff --git a/resources/scss/components/_punchOut.scss b/resources/scss/components/_punchOut.scss deleted file mode 100644 index f99d8af..0000000 --- a/resources/scss/components/_punchOut.scss +++ /dev/null @@ -1,36 +0,0 @@ -/** - * ============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. - */ - - -&.dox-ui-punch-out { - background-color: $background-gray; -} - -&.dox-ui-punch-out.dox-ui-punch-out-full-page { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow-y: auto; -} diff --git a/resources/scss/components/_slidePanel.scss b/resources/scss/components/_slidePanel.scss index e36b163..9eaddcd 100644 --- a/resources/scss/components/_slidePanel.scss +++ b/resources/scss/components/_slidePanel.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .slide-panel { transition: left .5s,right .5s; @@ -38,10 +37,10 @@ @extend .body-2; text-align: center; width: 100%; - color: $text-black; + color: $text-color1; } .collapse-double-icon { - color: $text-black; + color: $text-color1; cursor: pointer; } } diff --git a/resources/scss/components/_titledComponent.scss b/resources/scss/components/_titledComponent.scss index ca1bebf..20c7a2c 100644 --- a/resources/scss/components/_titledComponent.scss +++ b/resources/scss/components/_titledComponent.scss @@ -21,35 +21,34 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .dep-titled-container { - border: solid 1px $black; - -webkit-box-shadow: 3px 3px 10px $dark-gray; - -moz-box-shadow: 3px 3px 10px $dark-gray; - box-shadow: 3px 3px 10px $dark-gray; + border: solid 1px $border-color1; + -webkit-box-shadow: 3px 3px 10px $shadow-color1; + -moz-box-shadow: 3px 3px 10px $shadow-color1; + box-shadow: 3px 3px 10px $shadow-color1; border-radius: 0px 0px 5px 5px; margin: 20px 5px; .header { - border-bottom: solid 1px $black; + border-bottom: solid 1px $border-color1; padding: 5px; - background-color: $light-gray; + background-color: $background-color8; font-weight: bold; font-size: $heading-font-3; .toggle-visibility-button, .toggle-visibility-button:focus { float: right; - background-color: $light-gray; + background-color: $background-color8; border: none; margin-top: -2px; } .toggle-visibility-button:hover { - background-color: $light-gray; + background-color: $background-color8; border: none; .fa { - color: $black; + color: $text-color3; } } diff --git a/resources/scss/components/_toggleButtonGroup.scss b/resources/scss/components/_toggleButtonGroup.scss index 008b656..01fdc70 100644 --- a/resources/scss/components/_toggleButtonGroup.scss +++ b/resources/scss/components/_toggleButtonGroup.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .displayOptionButtons { float: right; } diff --git a/resources/scss/components/_toggleInput.scss b/resources/scss/components/_toggleInput.scss index 3401631..59c2058 100644 --- a/resources/scss/components/_toggleInput.scss +++ b/resources/scss/components/_toggleInput.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .toggle-input-wrapper { $toggle-width: 40px; $toggle-height: 20px; @@ -48,7 +47,7 @@ padding: 1px; width: $toggle-width; height: $toggle-height; - background-color: $dark-gray; + background-color: $background-color2; border-radius: $toggle-height; transition: background 0.4s; } @@ -63,7 +62,7 @@ left: 1px; bottom: 1px; right: 1px; - background-color: $white; + background-color: $primary-background-color; border-radius: $toggle-height; transition: background 0.4s; } @@ -72,15 +71,15 @@ left: 4px; bottom: 4px; width: $toggle-height - 8; - background-color: $dark-gray; + background-color: $background-color2; border-radius: $toggle-height - 8; transition: margin 0.4s, background 0.4s; } input.toggle-round-flat:checked + label { - background-color: $link-blue; + background-color: $background-color3; } input.toggle-round-flat:checked + label:after { margin-left: $toggle-height; - background-color: $link-blue; + background-color: $background-color3; } } diff --git a/resources/scss/components/_validationForm.scss b/resources/scss/components/_validationForm.scss index 020c5eb..686b9f1 100644 --- a/resources/scss/components/_validationForm.scss +++ b/resources/scss/components/_validationForm.scss @@ -20,8 +20,7 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + form { .validation-form-content { .validation-input-wrapper { @@ -68,6 +67,6 @@ form { .modal-body { .validation-buttons { padding: 20px 15px; - background-color: $tlv-gray; + background-color: $background-color12; } } |