diff options
Diffstat (limited to 'resources')
58 files changed, 1116 insertions, 626 deletions
diff --git a/resources/images/icons/collapsible-sliding-panel-expander-icon.svg b/resources/images/icons/collapsible-sliding-panel-expander-icon.svg new file mode 100644 index 0000000..429b8bc --- /dev/null +++ b/resources/images/icons/collapsible-sliding-panel-expander-icon.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="4" height="9" viewBox="0 0 4 9"> + <defs> + <style> + .cls-1 { + fill: #fff; + fill-rule: evenodd; + } + </style> + </defs> + <path class="cls-1" d="M0,0H1V9H0V0ZM3,0H4V9H3V0Z"/> +</svg> diff --git a/resources/images/icons/collapsible-sliding-panel-expander-modified.svg b/resources/images/icons/collapsible-sliding-panel-expander-modified.svg new file mode 100644 index 0000000..0038af9 --- /dev/null +++ b/resources/images/icons/collapsible-sliding-panel-expander-modified.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#FFFFFF;} +</style> +<polygon class="st0" points="10,0 0,0 4,4 4,7 6,9 6,4 "/> +</svg> diff --git a/resources/images/icons/collapsible-sliding-panel-expander-not-modified.svg b/resources/images/icons/collapsible-sliding-panel-expander-not-modified.svg new file mode 100644 index 0000000..6a543ec --- /dev/null +++ b/resources/images/icons/collapsible-sliding-panel-expander-not-modified.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#63A7B5;} +</style> +<polygon class="st0" points="10,0 0,0 4,4 4,7 6,9 6,4 "/> +</svg> diff --git a/resources/images/icons/filter/calendar-icon-hover.svg b/resources/images/icons/filter/calendar-icon-hover.svg new file mode 100644 index 0000000..9a2294d --- /dev/null +++ b/resources/images/icons/filter/calendar-icon-hover.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 13 14" style="enable-background:new 0 0 13 14;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#01AFD1;} +</style> +<rect x="3" y="4" class="st0" width="1" height="9"/> +<rect x="6" y="4" class="st0" width="1" height="9"/> +<rect x="9" y="4" class="st0" width="1" height="9"/> +<rect x="1" y="10" class="st0" width="11" height="1"/> +<rect x="1" y="7" class="st0" width="11" height="1"/> +<path class="st0" d="M12,2h-1V1c0-0.6-0.4-1-1-1H9C8.4,0,8,0.4,8,1v1H5V1c0-0.6-0.4-1-1-1H3C2.4,0,2,0.4,2,1v1H1C0.4,2,0,2.4,0,3v10 + c0,0.6,0.4,1,1,1h11c0.6,0,1-0.4,1-1V3C13,2.4,12.6,2,12,2z M9,1h1v3H9V1z M3,1h1v3H3V1z M12,13H1V5h11V13z"/> +</svg> diff --git a/resources/images/icons/filter/calendar-icon.svg b/resources/images/icons/filter/calendar-icon.svg new file mode 100644 index 0000000..8637f8c --- /dev/null +++ b/resources/images/icons/filter/calendar-icon.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 13 14" style="enable-background:new 0 0 13 14;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#7C8388;} +</style> +<rect x="3" y="4" class="st0" width="1" height="9"/> +<rect x="6" y="4" class="st0" width="1" height="9"/> +<rect x="9" y="4" class="st0" width="1" height="9"/> +<rect x="1" y="10" class="st0" width="11" height="1"/> +<rect x="1" y="7" class="st0" width="11" height="1"/> +<path class="st0" d="M12,2h-1V1c0-0.6-0.4-1-1-1H9C8.4,0,8,0.4,8,1v1H5V1c0-0.6-0.4-1-1-1H3C2.4,0,2,0.4,2,1v1H1C0.4,2,0,2.4,0,3v10 + c0,0.6,0.4,1,1,1h11c0.6,0,1-0.4,1-1V3C13,2.4,12.6,2,12,2z M9,1h1v3H9V1z M3,1h1v3H3V1z M12,13H1V5h11V13z"/> +</svg> diff --git a/resources/images/icons/filter/collapse-filter.svg b/resources/images/icons/filter/collapse-filter.svg new file mode 100644 index 0000000..efcc3d5 --- /dev/null +++ b/resources/images/icons/filter/collapse-filter.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9"> + <defs> + <style> + .cls-1 { + fill: #404f5a; + fill-rule: evenodd; + } + </style> + </defs> + <path class="cls-1" d="M1.292,0.21l6.7,6.576,6.7-6.562A0.777,0.777,0,0,1,15.244,0,0.735,0.735,0,0,1,16,.7s0,0.008,0,.012a0.679,0.679,0,0,1-.164.44L8.58,8.732a0.787,0.787,0,0,1-1.185,0L0.163,1.149A0.679,0.679,0,0,1,.254.179,0.792,0.792,0,0,1,1.292.21Z"/> +</svg> diff --git a/resources/images/icons/filter/expand-filter.svg b/resources/images/icons/filter/expand-filter.svg new file mode 100644 index 0000000..81eca76 --- /dev/null +++ b/resources/images/icons/filter/expand-filter.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9"> + <defs> + <style> + .cls-1 { + fill: #404f5a; + fill-rule: evenodd; + } + </style> + </defs> + <path class="cls-1" d="M1.292,8.79l6.7-6.576,6.7,6.562A0.777,0.777,0,0,0,15.244,9,0.735,0.735,0,0,0,16,8.3s0-.008,0-0.012a0.679,0.679,0,0,0-.164-0.44L8.58,0.268a0.787,0.787,0,0,0-1.185,0L0.163,7.851a0.679,0.679,0,0,0,.091.971A0.792,0.792,0,0,0,1.292,8.79Z"/> +</svg> diff --git a/resources/images/icons/filter/filter-small.svg b/resources/images/icons/filter/filter-small.svg new file mode 100644 index 0000000..5e3fdbd --- /dev/null +++ b/resources/images/icons/filter/filter-small.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="12" height="11" viewBox="0 0 12 11"> + <defs> + <style> + .cls-1 { + fill: #01afd1; + fill-rule: evenodd; + } + </style> + </defs> + <path d="M11.992,1.092 L7.049,5.993 L7.049,9.630 L4.923,10.994 L4.923,5.993 L0.006,1.079 L0.006,0.006 L11.992,0.006 L11.992,1.092 Z" class="cls-1"/> +</svg> diff --git a/resources/images/icons/filter/selected-checkbox.svg b/resources/images/icons/filter/selected-checkbox.svg new file mode 100644 index 0000000..8857a2e --- /dev/null +++ b/resources/images/icons/filter/selected-checkbox.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="10" height="9" viewBox="0 0 10 9"> + <defs> + <style> + .cls-1 { + fill: #fff; + fill-rule: evenodd; + } + </style> + </defs> + <path class="cls-1" d="M3.7,9A0.7,0.7,0,0,1,3.18,8.756L0.213,5.416a0.911,0.911,0,0,1,0-1.181,0.685,0.685,0,0,1,1.049,0l2.4,2.7L8.691,0.3A0.687,0.687,0,0,1,9.737.2,0.909,0.909,0,0,1,9.82,1.379L4.269,8.707A0.714,0.714,0,0,1,3.734,9H3.7Z"/> +</svg> diff --git a/resources/views/customViews.json b/resources/overlays/overlaysDetails.json index 0d4f101..0d4f101 100644 --- a/resources/views/customViews.json +++ b/resources/overlays/overlaysDetails.json diff --git a/resources/scss/_common.scss b/resources/scss/_common.scss index 2444892..fa58b3e 100644 --- a/resources/scss/_common.scss +++ b/resources/scss/_common.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - @import "common/variables"; @import "common/typography"; @import "common/base"; diff --git a/resources/scss/_components.scss b/resources/scss/_components.scss index e76e3f2..882e1cc 100644 --- a/resources/scss/_components.scss +++ b/resources/scss/_components.scss @@ -21,22 +21,16 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - -@import "components/punchOut"; -@import "components/buttons"; @import "components/validationForm"; @import "components/slidePanel"; @import "components/toggleInput"; @import "components/notifications"; -@import "components/inputOptions"; -@import "components/progressBar"; @import "components/dropdownMultiSelect"; @import "components/inlineMessage"; -@import "components/dateRange"; -@import "components/dateRangeSelector"; @import "components/toggleButtonGroup"; @import "components/titledComponent"; @import "components/containerPanel"; +@import "components/filterBar"; %noselect { -webkit-touch-callout: none; @@ -69,12 +63,13 @@ flex: 1 1; margin: 0; } - .search-icon { + +.search-icon { position: relative; left: -20px; align-self: center; width: 0; - color: $dark-gray; + color: $background-color2; } } diff --git a/resources/scss/_modules.scss b/resources/scss/_modules.scss index d902d53..d2df043 100644 --- a/resources/scss/_modules.scss +++ b/resources/scss/_modules.scss @@ -21,12 +21,13 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - @import "header/layout"; -@import "audit-table/layout"; @import "visualizations/layout"; @import "tier-support/search"; @import "tier-support/selectedNodeDetails"; @import "tier-support/splitPane"; @import "d3/_forceDirectedGraph.scss"; @import "d3/_aggregationMap.scss"; +@import "setAttribute/editAttributeform.scss"; +@import "inventory/inventory.scss"; +@import "vnfSearch/vnfSearch.scss"; diff --git a/resources/scss/audit-table/_layout.scss b/resources/scss/audit-table/_layout.scss deleted file mode 100644 index ce92c17..0000000 --- a/resources/scss/audit-table/_layout.scss +++ /dev/null @@ -1,44 +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. - */ - - -.audit-table { - margin: 10px 20px 0px 20px; -} - -.audit-table td { - font-size: 12px; -} - -.notification { - font-size: 15px; -} - -.audit-pagination { - text-align: center; -} - -.table-column-json-blob{ - white-space: pre; - width: 20%; -} diff --git a/resources/scss/bootstrap-cust/_buttons.scss b/resources/scss/bootstrap-cust/_buttons.scss index 52bcb2e..92382aa 100644 --- a/resources/scss/bootstrap-cust/_buttons.scss +++ b/resources/scss/bootstrap-cust/_buttons.scss @@ -3,5 +3,5 @@ } .btn-info { - @include button-variant($text-black, $tlv-gray, $light-gray); + @include button-variant($text-color1, $background-color12, $text-color7); } diff --git a/resources/scss/bootstrap-cust/_forms.scss b/resources/scss/bootstrap-cust/_forms.scss index cb19964..4353521 100644 --- a/resources/scss/bootstrap-cust/_forms.scss +++ b/resources/scss/bootstrap-cust/_forms.scss @@ -5,7 +5,7 @@ &.required { label:before { content: "*"; - color: $red; + color: $text-color10; } } } @@ -17,7 +17,7 @@ @include box-shadow(none); } &:hover { - border-color: $gray; + border-color: $neutral-gray; } } @@ -47,7 +47,7 @@ input[type="radio"], input[type="checkbox"] { left: -1px; bottom: -1px; background-color: $white; - border: 1px solid $blue; + border: 1px solid $border-color3; } } @@ -69,7 +69,7 @@ input[type="radio"], input[type="checkbox"] { input[type=radio]:checked:before { content: "\2022"; - color: $blue; + color: $background-color5; font-size: 32px; text-align: center; line-height: 16px; @@ -78,7 +78,7 @@ input[type=radio]:checked:before { input[type=checkbox]:checked:before { content: "\2713"; font-size: 12px; - color: $blue; + color: $background-color5; text-align: center; line-height: 16px; } diff --git a/resources/scss/bootstrap-cust/_modals.scss b/resources/scss/bootstrap-cust/_modals.scss index 6bc6e46..e074d61 100644 --- a/resources/scss/bootstrap-cust/_modals.scss +++ b/resources/scss/bootstrap-cust/_modals.scss @@ -1,6 +1,6 @@ .modal-content { .modal-header { - border-top: 3px solid $blue; + border-top: 3px solid $border-color3; .modal-title { @extend .heading-2; } @@ -13,6 +13,6 @@ .modal-footer { padding: 15px; border-top: 0; - background-color: $tlv-gray; + background-color: $background-color12; } } diff --git a/resources/scss/bootstrap-cust/_navs.scss b/resources/scss/bootstrap-cust/_navs.scss index 7b9cff9..a00f3d1 100644 --- a/resources/scss/bootstrap-cust/_navs.scss +++ b/resources/scss/bootstrap-cust/_navs.scss @@ -7,14 +7,14 @@ } .nav-tabs { - @include box-shadow(0px 2px 1px -1px $gray); + @include box-shadow(0px 2px 1px -1px $neutral-gray); padding: 0 28px; > li { @extend .body-1; > a { - color: $dark-gray; + color: $background-color2; text-transform: uppercase; } @@ -23,7 +23,7 @@ &:hover, &:focus { @extend .body-1-medium; - border-bottom: 3px solid $blue; + border-bottom: 3px solid $border-color3; } } } diff --git a/resources/scss/bootstrap-cust/_scaffolding.scss b/resources/scss/bootstrap-cust/_scaffolding.scss new file mode 100644 index 0000000..559216b --- /dev/null +++ b/resources/scss/bootstrap-cust/_scaffolding.scss @@ -0,0 +1,154 @@ +// +// Scaffolding +// -------------------------------------------------- + +// Reset the box-sizing +// +// Heads up! This reset may cause conflicts with some third-party widgets. +// For recommendations on resolving such conflicts, see +// http://getbootstrap.com/getting-started/#third-box-sizing +* { + @include box-sizing(border-box); +} + +*:before, +*:after { + @include box-sizing(border-box); +} + +// Body reset + +html { + font-size: 10px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + font-family: $base-font-regular; + font-size: $font-size-base; + line-height: $line-height-base; + color: $text-color; + background-color: $body-bg; +} + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +// Links + +a { + color: $link-color; + text-decoration: none; + + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } + + &:focus { + @include tab-focus; + } +} + +// Figures +// +// We reset this here because previously Normalize had no `figure` margins. This +// ensures we don't break anyone's use of the element. + +figure { + margin: 0; +} + +// Images + +img { + vertical-align: middle; +} + +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + @include img-responsive; +} + +// Rounded corners +.img-rounded { + border-radius: $border-radius-large; +} + +// Image thumbnails +// +// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. +.img-thumbnail { + padding: $thumbnail-padding; + line-height: $line-height-base; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + @include transition(all .2s ease-in-out); + + // Keep them at most 100% wide + @include img-responsive(inline-block); +} + +// Perfect circle +.img-circle { + border-radius: 50%; // set radius in percents +} + +// Horizontal rules + +hr { + margin-top: $line-height-computed; + margin-bottom: $line-height-computed; + border: 0; + border-top: 1px solid $hr-border; +} + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +// Use in conjunction with .sr-only to only display content when it's focused. +// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// Credit: HTML5 Boilerplate + +.sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} + +// iOS "clickable elements" fix for role="button" +// +// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) +// for traditionally non-focusable elements with role="button" +// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +[role="button"] { + cursor: pointer; +} diff --git a/resources/scss/bootstrap-cust/_tables.scss b/resources/scss/bootstrap-cust/_tables.scss index dc2e0c2..cf0288c 100644 --- a/resources/scss/bootstrap-cust/_tables.scss +++ b/resources/scss/bootstrap-cust/_tables.scss @@ -18,23 +18,32 @@ > tbody + tbody { border-top: none; } + .table { + -webkit-border-horizontal-spacing: 0px !important; + -webkit-border-vertical-spacing:0px !important; + } } .table-striped { > tbody > tr:nth-of-type( odd ) { - background-color: $background-gray; + background-color: $background-color1; } } .table-striped { > tbody > tr:nth-of-type( even ) { - background-color: $gray; + background-color: $neutral-gray; } } .table-hover { > tbody > tr:hover { - background-color: $tlv-hover; + background-color: $background-color12; cursor: pointer; } } + +table { + -webkit-border-horizontal-spacing: 0px !important; + -webkit-border-vertical-spacing:0px !important; +} diff --git a/resources/scss/bootstrap-cust/_variables.scss b/resources/scss/bootstrap-cust/_variables.scss index 1623e72..3a5de51 100644 --- a/resources/scss/bootstrap-cust/_variables.scss +++ b/resources/scss/bootstrap-cust/_variables.scss @@ -3,32 +3,34 @@ // //## Gray and brand colors for use across Bootstrap. -$gray-darker: $dark-gray; -$gray-dark: $dark-gray; -$gray: $gray; -$gray-light: $light-gray; -$gray-lighter: $light-gray; +$gray-darker: $background-color2; +$gray-dark: $background-color2; +$gray: $background-color13; +$gray-light: $text-color7; +$gray-lighter: $text-color7; -$brand-primary: $blue; -$brand-success: $green; -$brand-info: $light-gray; -$brand-warning: $yellow; -$brand-danger: $red; +$brand-primary: $background-color5; +$brand-success: $background-color11; +$brand-info: $text-color7; +$brand-warning: $text-color9; +$brand-danger: $text-color10; //== Scaffolding // //## Settings for some of the most global styles. -$body-bg: $white; -$text-color: $text-black; -$link-color: $link-blue; -$link-hover-color: $blue; +$body-bg: $primary-background-color; +$text-color: $text-color1; +$link-color: $border-color11; +$link-hover-color: $border-color3; //== Typography // //## Font, line-height, and color for body text, headings, and more. - +// This variable never used. Maybe delete!!!! +$font-family-sans-serif: omnes-regular, "Omnes-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; +//$font-family-base: $font-family-sans-serif !default; $font-size-base: $body-font-2; $font-size-large: $body-font-1; $font-size-small: $body-font-3; @@ -53,10 +55,10 @@ $border-radius-small: 0; // $btn-font-weight: normal !default; $btn-default-color: $text-color; -$btn-default-bg: $white; -$btn-default-border: $light-gray; +$btn-default-bg: $primary-background-color; +$btn-default-border: $border-color5; -$btn-success-color: $white; +$btn-success-color: $primary-background-color; // Allows for customizing button radius independently from global border radius $btn-border-radius-base: 2px; @@ -65,19 +67,19 @@ $btn-border-radius-small: 2px; //== Dropdowns // -$dropdown-bg: $white; -$dropdown-border: $link-blue; -$dropdown-link-color: $text-black; +$dropdown-bg: $primary-background-color; +$dropdown-border: $background-color3; +$dropdown-link-color: $text-color1; $dropdown-divider-bg: $gray; //** Hover color for dropdown links. -$dropdown-link-hover-color: $black; +$dropdown-link-hover-color: $text-color3; //** Hover background for dropdown links. -$dropdown-link-hover-bg: $tlv-hover; +$dropdown-link-hover-bg: $background-color12; //** Active dropdown menu item text color. -$dropdown-link-active-color: $black; +$dropdown-link-active-color: $text-color3; //** Active dropdown menu item background color. -$dropdown-link-active-bg: $tlv-hover; +$dropdown-link-active-bg: $background-color12; //== Forms // @@ -85,16 +87,16 @@ $dropdown-link-active-bg: $tlv-hover; $form-group-margin-bottom: 24px; -$input-bg: $white; -$input-bg-disabled: $tlv-light-gray; -$input-color: $dark-gray; -$input-border: $light-gray; -$input-border-focus: $dark-blue; +$input-bg: $primary-background-color; +$input-bg-disabled: $background-color4; +$input-color:$text-color6; +$input-border: $text-color7; +$input-border-focus: $border-color4; //== Modals // //## -$modal-content-bg: $white; +$modal-content-bg: $primary-background-color; $modal-inner-padding: 0 15px; $modal-title-padding: 30px 25px 10px 25px; @@ -102,7 +104,7 @@ $modal-title-padding: 30px 25px 10px 25px; //== Close // //## -$close-color: $tlv-light-gray; +$close-color: $background-color4; //== Navs // @@ -116,11 +118,11 @@ $navbar-inverse-bg: $gray; $nav-tabs-border-color: transparent; $nav-tabs-link-hover-border-color: transparent; $nav-tabs-active-link-hover-bg: transparent; -$nav-tabs-active-link-hover-color: $text-black; +$nav-tabs-active-link-hover-color: $text-color1; $nav-tabs-active-link-hover-border-color: transparent; //== Popovers // //## -$popover-bg: $background-gray; +$popover-bg: $background-color1; diff --git a/resources/scss/bootstrap.scss b/resources/scss/bootstrap.scss index 19678b8..7751d1e 100644 --- a/resources/scss/bootstrap.scss +++ b/resources/scss/bootstrap.scss @@ -21,22 +21,26 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - -// DOX CORE +// ONAP CORE @import "common/variables"; + +// Import Typography Section @import "common/typography"; + + + // Core variables and mixins @import "bootstrap-cust/variables"; @import "bootstrap/variables"; @import "bootstrap/mixins"; // Reset and dependencies -@import "bootstrap/normalize"; +//@import "bootstrap/normalize"; //@import "bootstrap/print"; //@import "bootstrap/glyphicons"; // Core CSS -@import "bootstrap/scaffolding"; +@import "bootstrap-cust/scaffolding"; @import "bootstrap/type"; @import "bootstrap/code"; @import "bootstrap/grid"; diff --git a/resources/scss/bootstrap/_normalize.scss b/resources/scss/bootstrap/_normalize.scss index 9dddf73..3794158 100644 --- a/resources/scss/bootstrap/_normalize.scss +++ b/resources/scss/bootstrap/_normalize.scss @@ -7,7 +7,7 @@ // html { - font-family: sans-serif; // 1 + font-family: $base-font-regular; // 1 -ms-text-size-adjust: 100%; // 2 -webkit-text-size-adjust: 100%; // 2 } diff --git a/resources/scss/bootstrap/_scaffolding.scss b/resources/scss/bootstrap/_scaffolding.scss index 910afd5..559216b 100644 --- a/resources/scss/bootstrap/_scaffolding.scss +++ b/resources/scss/bootstrap/_scaffolding.scss @@ -24,7 +24,7 @@ html { } body { - font-family: $font-family-base; + font-family: $base-font-regular; font-size: $font-size-base; line-height: $line-height-base; color: $text-color; diff --git a/resources/scss/bootstrap/_variables.scss b/resources/scss/bootstrap/_variables.scss index 50b8781..8be9076 100644 --- a/resources/scss/bootstrap/_variables.scss +++ b/resources/scss/bootstrap/_variables.scss @@ -7,7 +7,7 @@ $bootstrap-sass-asset-helper: false !default; // //## Gray and brand colors for use across Bootstrap. -$gray-base: #000 !default; +$gray-base: $darkest !default; $gray-darker: lighten($gray-base, 13.5%) !default; // #222 $gray-dark: lighten($gray-base, 20%) !default; @@ -19,19 +19,19 @@ $gray-light: lighten($gray-base, 46.7%) !default; $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee -$brand-primary: darken(#428bca, 6.5%) !default; +$brand-primary: darken($dark-blue, 6.5%) !default; // #337ab7 -$brand-success: #5cb85c !default; -$brand-info: #5bc0de !default; -$brand-warning: #f0ad4e !default; -$brand-danger: #d9534f !default; +$brand-success: $lime-green !default; +$brand-info: $light-green !default; +$brand-warning: $amber !default; +$brand-danger: $red !default; //== Scaffolding // //## Settings for some of the most global styles. //** Background color for `<body>`. -$body-bg: #fff !default; +$body-bg: $white !default; //** Global text color on `<body>`. $text-color: $gray-dark !default; @@ -46,13 +46,13 @@ $link-hover-decoration: underline !default; // //## Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +$font-family-sans-serif: $base-font-regular !default; +$font-family-serif: $base-font-regular !default; //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. -$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +$font-family-monospace: $base-font-regular !default; $font-family-base: $font-family-sans-serif !default; -$font-size-base: 14px !default; +$font-size-base: $body-font-2 !default; $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-small: ceil(($font-size-base * 0.85)) !default; @@ -123,7 +123,7 @@ $border-radius-large: 6px !default; $border-radius-small: 3px !default; //** Global color for active items (e.g., navs or dropdowns). -$component-active-color: #fff !default; +$component-active-color: $white !default; //** Global background color for active items (e.g., navs or dropdowns). $component-active-bg: $brand-primary !default; @@ -144,13 +144,13 @@ $table-condensed-cell-padding: 5px !default; //** Default background color used for all tables. $table-bg: transparent !default; //** Background color used for `.table-striped`. -$table-bg-accent: #f9f9f9 !default; +$table-bg-accent: $light-gray !default; //** Background color used for `.table-hover`. -$table-bg-hover: #f5f5f5 !default; +$table-bg-hover: $neutral-gray !default; $table-bg-active: $table-bg-hover !default; //** Border color for table and cell borders. -$table-border-color: #ddd !default; +$table-border-color: $dark-gray !default; //== Buttons // @@ -158,27 +158,27 @@ $table-border-color: #ddd !default; $btn-font-weight: normal !default; -$btn-default-color: #333 !default; -$btn-default-bg: #fff !default; -$btn-default-border: #ccc !default; +$btn-default-color: $darkest !default; +$btn-default-bg: $white !default; +$btn-default-border: $neutral-gray !default; -$btn-primary-color: #fff !default; +$btn-primary-color: $white !default; $btn-primary-bg: $brand-primary !default; $btn-primary-border: darken($btn-primary-bg, 5%) !default; -$btn-success-color: #fff !default; +$btn-success-color: $white !default; $btn-success-bg: $brand-success !default; $btn-success-border: darken($btn-success-bg, 5%) !default; -$btn-info-color: #fff !default; +$btn-info-color: $white !default; $btn-info-bg: $brand-info !default; $btn-info-border: darken($btn-info-bg, 5%) !default; -$btn-warning-color: #fff !default; +$btn-warning-color: $white !default; $btn-warning-bg: $brand-warning !default; $btn-warning-border: darken($btn-warning-bg, 5%) !default; -$btn-danger-color: #fff !default; +$btn-danger-color: $white !default; $btn-danger-bg: $brand-danger !default; $btn-danger-border: darken($btn-danger-bg, 5%) !default; @@ -194,14 +194,14 @@ $btn-border-radius-small: $border-radius-small !default; //## //** `<input>` background color -$input-bg: #fff !default; +$input-bg: $white !default; //** `<input disabled>` background color $input-bg-disabled: $gray-lighter !default; //** Text color for `<input>`s $input-color: $gray !default; //** `<input>` border color -$input-border: #ccc !default; +$input-border: $neutral-gray !default; // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4 //** Default `.form-control` border radius @@ -213,10 +213,10 @@ $input-border-radius-large: $border-radius-large !default; $input-border-radius-small: $border-radius-small !default; //** Border color for inputs on focus -$input-border-focus: #66afe9 !default; +$input-border-focus: $t-blue-link !default; //** Placeholder text color -$input-color-placeholder: #999 !default; +$input-color-placeholder: $neutral-gray !default; //** Default `.form-control` height $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; @@ -229,7 +229,7 @@ $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-s $form-group-margin-bottom: 15px !default; $legend-color: $gray-dark !default; -$legend-border-color: #e5e5e5 !default; +$legend-border-color: $light-gray !default; //** Background color for textual input addons $input-group-addon-bg: $gray-lighter !default; @@ -244,20 +244,20 @@ $cursor-disabled: not-allowed !default; //## Dropdown menu container and contents. //** Background for the dropdown menu. -$dropdown-bg: #fff !default; +$dropdown-bg: $white !default; //** Dropdown menu `border-color`. $dropdown-border: rgba(0, 0, 0, .15) !default; //** Dropdown menu `border-color` **for IE8**. -$dropdown-fallback-border: #ccc !default; +$dropdown-fallback-border: $neutral-gray !default; //** Divider color for between dropdown items. -$dropdown-divider-bg: #e5e5e5 !default; +$dropdown-divider-bg: $light-gray !default; //** Dropdown link text color. $dropdown-link-color: $gray-dark !default; //** Hover color for dropdown links. $dropdown-link-hover-color: darken($gray-dark, 5%) !default; //** Hover background for dropdown links. -$dropdown-link-hover-bg: #f5f5f5 !default; +$dropdown-link-hover-bg: $very-light-gray !default; //** Active dropdown menu item text color. $dropdown-link-active-color: $component-active-color !default; @@ -271,7 +271,7 @@ $dropdown-link-disabled-color: $gray-light !default; $dropdown-header-color: $gray-light !default; //** Deprecated `$dropdown-caret-color` as of v3.1.0 -$dropdown-caret-color: #000 !default; +$dropdown-caret-color: $darkest !default; //-- Z-index master list // @@ -371,17 +371,17 @@ $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; $navbar-collapse-max-height: 340px !default; -$navbar-default-color: #777 !default; +$navbar-default-color: $dark-gray !default; $navbar-default-bg: #f8f8f8 !default; $navbar-default-border: darken($navbar-default-bg, 6.5%) !default; // Navbar links -$navbar-default-link-color: #777 !default; -$navbar-default-link-hover-color: #333 !default; +$navbar-default-link-color: $dark-gray !default; +$navbar-default-link-hover-color: $darkest !default; $navbar-default-link-hover-bg: transparent !default; -$navbar-default-link-active-color: #555 !default; +$navbar-default-link-active-color: $dark-gray !default; $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; -$navbar-default-link-disabled-color: #ccc !default; +$navbar-default-link-disabled-color: $neutral-gray !default; $navbar-default-link-disabled-bg: transparent !default; // Navbar brand label @@ -390,14 +390,14 @@ $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !def $navbar-default-brand-hover-bg: transparent !default; // Navbar toggle -$navbar-default-toggle-hover-bg: #ddd !default; -$navbar-default-toggle-icon-bar-bg: #888 !default; -$navbar-default-toggle-border-color: #ddd !default; +$navbar-default-toggle-hover-bg: $very-light-gray !default; +$navbar-default-toggle-icon-bar-bg: $neutral-gray !default; +$navbar-default-toggle-border-color: $very-light-gray !default; //=== Inverted navbar // Reset inverted navbar basics $navbar-inverse-color: lighten($gray-light, 15%) !default; -$navbar-inverse-bg: #222 !default; +$navbar-inverse-bg: $darkest !default; $navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default; // Inverted navbar links @@ -406,7 +406,7 @@ $navbar-inverse-link-hover-color: #fff !default; $navbar-inverse-link-hover-bg: transparent !default; $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default; $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default; -$navbar-inverse-link-disabled-color: #444 !default; +$navbar-inverse-link-disabled-color: $neutral-gray !default; $navbar-inverse-link-disabled-bg: transparent !default; // Inverted navbar brand label @@ -415,9 +415,9 @@ $navbar-inverse-brand-hover-color: #fff !default; $navbar-inverse-brand-hover-bg: transparent !default; // Inverted navbar toggle -$navbar-inverse-toggle-hover-bg: #333 !default; -$navbar-inverse-toggle-icon-bar-bg: #fff !default; -$navbar-inverse-toggle-border-color: #333 !default; +$navbar-inverse-toggle-hover-bg: $darkest !default; +$navbar-inverse-toggle-icon-bar-bg: $white !default; +$navbar-inverse-toggle-border-color: $darkest !default; //== Navs // @@ -431,7 +431,7 @@ $nav-disabled-link-color: $gray-light !default; $nav-disabled-link-hover-color: $gray-light !default; //== Tabs -$nav-tabs-border-color: #ddd !default; +$nav-tabs-border-color: $neutral-gray !default; $nav-tabs-link-hover-border-color: $gray-lighter !default; @@ -439,7 +439,7 @@ $nav-tabs-active-link-hover-bg: $body-bg !default; $nav-tabs-active-link-hover-color: $gray !default; $nav-tabs-active-link-hover-border-color: #ddd !default; -$nav-tabs-justified-link-border-color: #ddd !default; +$nav-tabs-justified-link-border-color: $neutral-gray !default; $nav-tabs-justified-active-link-border-color: $body-bg !default; //== Pills @@ -452,20 +452,20 @@ $nav-pills-active-link-hover-color: $component-active-color !default; //## $pagination-color: $link-color !default; -$pagination-bg: #fff !default; -$pagination-border: #ddd !default; +$pagination-bg: $white !default; +$pagination-border: $neutral-gray !default; $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-lighter !default; -$pagination-hover-border: #ddd !default; +$pagination-hover-border: $neutral-gray !default; -$pagination-active-color: #fff !default; +$pagination-active-color: $white !default; $pagination-active-bg: $brand-primary !default; $pagination-active-border: $brand-primary !default; $pagination-disabled-color: $gray-light !default; -$pagination-disabled-bg: #fff !default; -$pagination-disabled-border: #ddd !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border: $neutral-gray !default; //== Pager // @@ -497,20 +497,20 @@ $jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default; // //## Define colors for form feedback states and, by default, alerts. -$state-success-text: #3c763d !default; -$state-success-bg: #dff0d8 !default; +$state-success-text: $fern-green !default; +$state-success-bg: $hint-of-green !default; $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; -$state-info-text: #31708f !default; -$state-info-bg: #d9edf7 !default; +$state-info-text: $astral-blue !default; +$state-info-bg: $lavender-violet !default; $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; -$state-warning-text: #8a6d3b !default; -$state-warning-bg: #fcf8e3 !default; +$state-warning-text: $mckenzie-orange !default; +$state-warning-bg: $derby-yellow !default; $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; -$state-danger-text: #a94442 !default; -$state-danger-bg: #f2dede !default; +$state-danger-text: $roof-terracotta-red !default; +$state-danger-bg: $pale-rode-red !default; $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; //== Tooltips @@ -520,9 +520,9 @@ $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; //** Tooltip max width $tooltip-max-width: 200px !default; //** Tooltip text color -$tooltip-color: #fff !default; +$tooltip-color: $white !default; //** Tooltip background color -$tooltip-bg: #000 !default; +$tooltip-bg: $darkest !default; $tooltip-opacity: .9 !default; //** Tooltip arrow width @@ -535,13 +535,13 @@ $tooltip-arrow-color: $tooltip-bg !default; //## //** Popover body background color -$popover-bg: #fff !default; +$popover-bg: $white !default; //** Popover maximum width $popover-max-width: 276px !default; //** Popover border color $popover-border-color: rgba(0, 0, 0, .2) !default; //** Popover fallback border color -$popover-fallback-border-color: #ccc !default; +$popover-fallback-border-color: $neutral-gray !default; //** Popover title background color $popover-title-bg: darken($popover-bg, 3%) !default; @@ -576,9 +576,9 @@ $label-warning-bg: $brand-warning !default; $label-danger-bg: $brand-danger !default; //** Default label text color -$label-color: #fff !default; +$label-color: $white !default; //** Default text color of a linked label -$label-link-hover-color: #fff !default; +$label-link-hover-color: $white !default; //== Modals // @@ -593,18 +593,18 @@ $modal-title-padding: 15px !default; $modal-title-line-height: $line-height-base !default; //** Background color of modal content area -$modal-content-bg: #fff !default; +$modal-content-bg: $white !default; //** Modal content border color $modal-content-border-color: rgba(0, 0, 0, .2) !default; //** Modal content border color **for IE8** -$modal-content-fallback-border-color: #999 !default; +$modal-content-fallback-border-color: $dark-gray !default; //** Modal backdrop background color -$modal-backdrop-bg: #000 !default; +$modal-backdrop-bg: $darkest !default; //** Modal backdrop opacity $modal-backdrop-opacity: .5 !default; //** Modal header border color -$modal-header-border-color: #e5e5e5 !default; +$modal-header-border-color: $light-gray !default; //** Modal footer border color $modal-footer-border-color: $modal-header-border-color !default; @@ -641,9 +641,9 @@ $alert-danger-border: $state-danger-border !default; //## //** Background color of the whole progress component -$progress-bg: #f5f5f5 !default; +$progress-bg: $very-light-gray !default; //** Progress bar text color -$progress-bar-color: #fff !default; +$progress-bar-color: $white !default; //** Variable for setting rounded corners on progress bar. $progress-border-radius: $border-radius-base !default; @@ -663,14 +663,14 @@ $progress-bar-info-bg: $brand-info !default; //## //** Background color on `.list-group-item` -$list-group-bg: #fff !default; +$list-group-bg: $white !default; //** `.list-group-item` border color -$list-group-border: #ddd !default; +$list-group-border: $light-gray !default; //** List group border radius $list-group-border-radius: $border-radius-base !default; //** Background color of single list items on hover -$list-group-hover-bg: #f5f5f5 !default; +$list-group-hover-bg: $very-light-gray !default; //** Text color of active list items $list-group-active-color: $component-active-color !default; //** Background color of active list items @@ -687,29 +687,29 @@ $list-group-disabled-bg: $gray-lighter !default; //** Text color for content within disabled list items $list-group-disabled-text-color: $list-group-disabled-color !default; -$list-group-link-color: #555 !default; +$list-group-link-color: $dark-gray !default; $list-group-link-hover-color: $list-group-link-color !default; -$list-group-link-heading-color: #333 !default; +$list-group-link-heading-color: $darkest !default; //== Panels // //## -$panel-bg: #fff !default; +$panel-bg: $white !default; $panel-body-padding: 15px !default; $panel-heading-padding: 10px 15px !default; $panel-footer-padding: $panel-heading-padding !default; $panel-border-radius: $border-radius-base !default; //** Border color for elements within panels -$panel-inner-border: #ddd !default; -$panel-footer-bg: #f5f5f5 !default; +$panel-inner-border: $light-gray !default; +$panel-footer-bg: $very-light-gray !default; $panel-default-text: $gray-dark !default; -$panel-default-border: #ddd !default; -$panel-default-heading-bg: #f5f5f5 !default; +$panel-default-border: $light-gray !default; +$panel-default-heading-bg: $very-light-gray !default; -$panel-primary-text: #fff !default; +$panel-primary-text: $white !default; $panel-primary-border: $brand-primary !default; $panel-primary-heading-bg: $brand-primary !default; @@ -738,7 +738,7 @@ $thumbnail-padding: 4px !default; //** Thumbnail background color $thumbnail-bg: $body-bg !default; //** Thumbnail border color -$thumbnail-border: #ddd !default; +$thumbnail-border: $light-gray !default; //** Thumbnail border radius $thumbnail-border-radius: $border-radius-base !default; @@ -751,22 +751,22 @@ $thumbnail-caption-padding: 9px !default; // //## -$well-bg: #f5f5f5 !default; +$well-bg: $very-light-gray !default; $well-border: darken($well-bg, 7%) !default; //== Badges // //## -$badge-color: #fff !default; +$badge-color: $white !default; //** Linked badge text color on hover -$badge-link-hover-color: #fff !default; +$badge-link-hover-color: $white !default; $badge-bg: $gray-light !default; //** Badge text color in active nav link $badge-active-color: $link-color !default; //** Badge background color in active nav link -$badge-active-bg: #fff !default; +$badge-active-bg: $white !default; $badge-font-weight: bold !default; $badge-line-height: 1 !default; @@ -779,9 +779,9 @@ $badge-border-radius: 10px !default; $breadcrumb-padding-vertical: 8px !default; $breadcrumb-padding-horizontal: 15px !default; //** Breadcrumb background color -$breadcrumb-bg: #f5f5f5 !default; +$breadcrumb-bg: $very-light-gray !default; //** Breadcrumb text color -$breadcrumb-color: #ccc !default; +$breadcrumb-color: $neutral-gray !default; //** Text color of current page in the breadcrumb $breadcrumb-active-color: $gray-light !default; //** Textual separator for between breadcrumb elements @@ -793,37 +793,37 @@ $breadcrumb-separator: "/" !default; $carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, .6) !default; -$carousel-control-color: #fff !default; +$carousel-control-color: $white !default; $carousel-control-width: 15% !default; $carousel-control-opacity: .5 !default; $carousel-control-font-size: 20px !default; -$carousel-indicator-active-bg: #fff !default; -$carousel-indicator-border-color: #fff !default; +$carousel-indicator-active-bg: $white !default; +$carousel-indicator-border-color: $white !default; -$carousel-caption-color: #fff !default; +$carousel-caption-color: $white !default; //== Close // //## $close-font-weight: bold !default; -$close-color: #000 !default; +$close-color: $darkest !default; $close-text-shadow: 0 1px 0 #fff !default; //== Code // //## -$code-color: #c7254e !default; -$code-bg: #f9f2f4 !default; +$code-color: $red !default; +$code-bg: $light-gray !default; -$kbd-color: #fff !default; -$kbd-bg: #333 !default; +$kbd-color: $white !default; +$kbd-bg: $darkest !default; -$pre-bg: #f5f5f5 !default; +$pre-bg: $very-light-gray !default; $pre-color: $gray-dark !default; -$pre-border-color: #ccc !default; +$pre-border-color: $dark-gray !default; $pre-scrollable-max-height: 340px !default; //== Type diff --git a/resources/scss/common/_base.scss b/resources/scss/common/_base.scss index ab3756d..f7e3274 100644 --- a/resources/scss/common/_base.scss +++ b/resources/scss/common/_base.scss @@ -20,8 +20,7 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + html { font-size: 100%; height: 100%; @@ -31,10 +30,8 @@ body { /* scrollbar styling for Internet Explorer */ scrollbar-face-color: $scroll-bar-color; scrollbar-track-color: $scroll-bar-color; - height: 100%; - min-width: 1280px; - overflow-y: auto; - //@extend %noselect; + height: 100vh; + min-width: $minimum-application-width; } /* scrollbar styling for Google Chrome | Safari | Opera */ diff --git a/resources/scss/common/_layout.scss b/resources/scss/common/_layout.scss index 5f8d459..1c3bf66 100644 --- a/resources/scss/common/_layout.scss +++ b/resources/scss/common/_layout.scss @@ -20,8 +20,16 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + .hidden { display: none; } + +.main-app-container { + display: flex; + flex-direction: column; + height: 100vh; +} + +.view-container { +} diff --git a/resources/scss/common/_typography.scss b/resources/scss/common/_typography.scss index 3552f92..020fd7d 100644 --- a/resources/scss/common/_typography.scss +++ b/resources/scss/common/_typography.scss @@ -21,22 +21,20 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ +$base-font-regular: "Arial"; +$base-font-light: "Arial"; +$base-font-medium: "Arial"; +$base-font-bold: "Arial"; -/* Fonts */ - -$base-font-regular: Arial; -$base-font-light: Arial; -$base-font-medium: Arial; -$base-font-bold: Arial; - -$heading-font-1: 36px; -$heading-font-2: 24px; +$heading-font-1: 24px; +$heading-font-2: 20px; $heading-font-3: 18px; $heading-font-4: 16px; -$body-font-1: 14px; -$body-font-2: 13px; -$body-font-3: 12px; +$body-font-1: 16px; +$body-font-2: 14px; +$body-font-3: 13px; +$body-font-4: 12px; $focus-font-1: 55px; $focus-font-2: 50px; diff --git a/resources/scss/common/_utils.scss b/resources/scss/common/_utils.scss index 5f93c36..f50cea8 100644 --- a/resources/scss/common/_utils.scss +++ b/resources/scss/common/_utils.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - /* Prefix */ $box-sizing-prefix: webkit moz spec; diff --git a/resources/scss/common/_variables.scss b/resources/scss/common/_variables.scss index 43f75bd..e3ba93a 100644 --- a/resources/scss/common/_variables.scss +++ b/resources/scss/common/_variables.scss @@ -21,45 +21,149 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ +$minimum-application-width: 1000px; +$primary-header-height: 47px; +$secondary-header-height: 42px; +$total-header-height: $primary-header-height + $secondary-header-height; -// primary colors -$blue: #009fdb; -$dark-blue: #0568ae; -$light-blue: #71c5e8; -$green: #4ca90c; -$dark-green: #007a3e; -$light-green: #b5bd00; -$orange: #ea7400; -$yellow: #ffb81c; -$dark-purple: #702f8a; -$purple: #9063cd; -$light-purple: #caa2dd; -$black: #000000; -$dark-gray: #5a5a5a; -$gray: #959595; -$light-gray: #d2d2d2; -$white: #ffffff; - -// Secondary Colors -$red: #cf2a2a; -$background-gray: #f2f2f2; -$text-black: #191919; -$link-blue: #056bae; -$functional-green: #007a3e; -$functional-yellow: #ffb81c; -$tlv-gray: #f8f8f8; -$tlv-light-gray: #eaeaea; -$di-light-grey: #91a2ae; -$tlv-hover: #e6f6fb; +// primary colors: DO NOT USE these out side of this file +$turquoise-blue: #01afd1; +$dark-turquoise: #12798e; +$dark-blue: #004b68; +$darkest: #323b3f; +$white: #fff; +$very-light-gray: #eff2f3; +$pacific-blue: #009fdb; +$acadia-brown: #5a5a5a; +// Secondary Colors: DO NOT USE these out side of this file +$light-gray: #cfd6d9; +$light-gray-2: #d2d2d2; +$neutral-gray: #b7bfc3; +$dark-gray: #7c8388; +$t-blue: #0396b4; +$light-green: #d1de42; +$amber: #fab32b; +$red: #d03d3c; +$lime-green: #aadc1f; +$redish-orange: #fe7550; +$light-bluish-gray: #dbeaed; +$bluish-gray: #72848c; +$dark-bluish-gray: #404f5a; +$very-light-bluish-gray: #f3f6f6; +$nero-gray: #191919; +$derby-yellow: #faebcc; +$mckenzie-orange: #8a6d3b; +$fern-green: #3c763d; +$hint-of-green: #dff0d8; +$astral-blue: #31708f; +$lavender-violet: #d9edf7; +$roof-terracotta-red: #a94442; +$pale-rode-red: #f2dede; + + +// Variables: +// still investigate $background-gray: $very-light-gray; +$background-color1: $very-light-gray; +$background-header-color1: $pacific-blue; +$background-header-color2: $very-light-gray; +$search-background-color3: $very-light-gray; + +$text-color1: $acadia-brown; +$text-color2: $acadia-brown; +$text-color3: $acadia-brown; +$text-color4: $pacific-blue; +$text-color11: $white; +$border-color1: $acadia-brown; $scroll-bar-color: $dark-gray; +$border-color2: $dark-gray; +$shadow-color1: $dark-gray; +$background-color2: $dark-gray; +$graph-border-color1: $dark-gray; +$graph-background-color1: $dark-gray; +$search-background-color2: $dark-gray; + +//$t-blue-link: $t-blue; +$background-color3: $t-blue; +$border-color11: $t-blue; + +$background-color4: $very-light-bluish-gray; + +//$turquoise-blue +$background-color5: $pacific-blue; +$border-color3: $pacific-blue; +$graph-border-color2: $pacific-blue; +$graph-background-color2: $pacific-blue; +$search-background-color1: $pacific-blue; +$search-text-color1: $pacific-blue; +$selected-node-details-color1: $pacific-blue; + +// $dark-turquoise: #12798e; +$text-color5: $dark-turquoise; +$background-color6: $dark-turquoise; + +// $dark-blue +$text-color6: $dark-blue; +$background-color7: $dark-blue; +$border-color4: $dark-blue; + + +// $white: #fff; +$primary-background-color: $white; +$graph-background-color3: $white; +$graph-border-color3: $white; + + +//light-gray +$text-color7: $light-gray-2; +$background-color8: $light-gray-2; +$border-color5: $light-gray-2; +$graph-background-color4: $light-gray-2; + +//light-green +$text-color8: $light-green; + +// $neutral-gray + +$border-color6: $neutral-gray; +$search-border-color1: $neutral-gray; +$graph-border-color4: $neutral-gray; + +// $amber: #fab32b; +$border-color7: $amber; +$background-color9: $amber; +$text-color9: $amber; + + +// $red: +$background-color10: $red; +$text-color10: $red; +$border-color10: $red; + + +// $lime-green: #aadc1f; +$graph-background-color5: $lime-green; +$background-color11: $lime-green; + +// $redish-orange +$border-color12: $redish-orange; + + +//$light-bluish-gray: #dbeaed; +$background-color12: $light-bluish-gray; + +// $bluish-gray; +$background-color13: $bluish-gray; //responsive @media params $tablet-max-width: 1024px; $laptop-min-width: 1224px; $desktop-min-width: 1824px; +// light-gray-2 +$search-button-background-color: $light-gray-2; + /* Textures */ $images-folder-name: "../images"; $plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; 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/_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; } } diff --git a/resources/scss/audit/_layout.scss b/resources/scss/customViews.scss index 8d32c10..cebdb4b 100644 --- a/resources/scss/audit/_layout.scss +++ b/resources/scss/customViews.scss @@ -20,8 +20,4 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - -#audit-report-ui { - min-width: 1280px; -} +$extendedApps: "../../node_modules"; diff --git a/resources/scss/d3/_aggregationMap.scss b/resources/scss/d3/_aggregationMap.scss index a22e5a4..85ec34a 100644 --- a/resources/scss/d3/_aggregationMap.scss +++ b/resources/scss/d3/_aggregationMap.scss @@ -21,19 +21,18 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .land-features { - fill: $light-gray; + fill: $background-color8; } .boundary-mesh { fill: none; - stroke: $black; + stroke: $text-color3; stroke-width: 0.75; stroke-linejoin: round; stroke-linecap: round; } .plot-point { - fill: $blue; + fill: $background-color5; } diff --git a/resources/scss/d3/_forceDirectedGraph.scss b/resources/scss/d3/_forceDirectedGraph.scss index 1bb1c69..e08d576 100644 --- a/resources/scss/d3/_forceDirectedGraph.scss +++ b/resources/scss/d3/_forceDirectedGraph.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .ts-force-selected-graph { padding: 0px; -webkit-user-select: none; /* Chrome all / Safari all */ @@ -31,119 +30,119 @@ } .aai-entity-node{ - font-family: Arial; - font-size: 12px; - line-height: 14px; + font-family: $base-font-regular; + font-size: $body-font-4; + line-height: $body-font-2; text-anchor: middle; } .aai-entity-node > .id-type-label { - fill:#404f5a; + fill: $text-color1; font-weight: bold; } .aai-entity-node > .id-value-label { - fill:#8b9399; + fill: $background-color2; } .aai-entity-link { - stroke: #d9dada; + stroke: $graph-border-color4; stroke-width: 2px; } .general-node > .inner { - fill: #626668; + fill: $background-color2; } .general-node > .outer { - fill: #ffffff; - stroke: #009fdb; + fill: $graph-background-color3; + stroke: $graph-border-color2; stroke-width: 2px; } .search-node > .inner { - fill: #009fdb; + fill: $graph-background-color1; } .search-node > .outer { - fill: #ffffff; - stroke: #009fdb; + fill: $graph-background-color3; + stroke: $graph-border-color2; stroke-width: 2px; } .selected-node > .inner { - fill: #626668; + fill: $graph-background-color1; } .selected-node > .outer { - fill: #d9dada; - stroke: #009fdb; + fill: $graph-background-color4; + stroke: $graph-border-color2; stroke-width: 3px; filter: url(#selected-node-drop-shadow); } .selected-search-node > .inner { - fill: #009fdb; + fill: $border-color3; } .selected-search-node > .outer { - fill: #d9dada; - stroke: #009fdb; + fill: $graph-background-color4; + stroke: $graph-border-color2; stroke-width: 3px; filter: url(#selected-node-drop-shadow); } @-moz-document url-prefix() { .selected-search-node > .outer { - fill: #d9dada; - stroke: #009fdb; + fill: $graph-background-color4; + stroke: $graph-border-color2; stroke-width: 3px; filter: drop-shadow(-1px 1px 3px rgba(0,0,0,0.5)); } .selected-node > .outer { - fill: #d9dada; - stroke: #009fdb; + fill: $graph-background-color4; + stroke: $graph-border-color2; stroke-width: 3px; filter: drop-shadow(-1px 1px 3px rgba(0,0,0,0.5)); } } .background-unselected { - fill: #626668; + fill: $background-color2; } .background-selected { - fill: #009fdb; + fill: $graph-border-color2; } .ellipses-ellipse { - fill: #FFFFFF; + fill: $graph-background-color3; } .triangle-warning { - fill: #FFFFFF; + fill: $graph-background-color3; fill-rule: evenodd; } .icon_tick_circle{ - fill: #9DC742; + fill: $graph-background-color5; } .icon_tick_path { fill-rule: evenodd; - fill: #FFFFFF; - stroke: #FFFFFF; + fill: $graph-background-color3; + stroke: $graph-border-color3; strokeWidth: 0.8; } .icon_warning_circle{ - fill: #FF0000; + fill: $red; } .icon_warning_path { fill-rule: evenodd; - fill: #FFFFFF; - stroke: #FFFFFF; + fill: $graph-background-color3; + stroke: $graph-border-color3; strokeWidth: 0.5; } diff --git a/resources/scss/header/_layout.scss b/resources/scss/header/_layout.scss index e641f4b..fc52d04 100644 --- a/resources/scss/header/_layout.scss +++ b/resources/scss/header/_layout.scss @@ -20,15 +20,13 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + .header { - padding: 0px; - background-color: $blue; + background-color: $background-header-color1; //display: flex; align-items: center; margin: 0px; - padding: 5px 5px 1px 5px; + padding: 5px 0px 0px 0px; .dropdown-toggle { border: none; @@ -39,57 +37,75 @@ .application-title { font-size: $heading-font-1; - color: $white; + color: $text-color11; width: 127px; - height: 45px; margin-right: 20px; - margin-top: 5px; - margin-bottom: 5px; - padding: 2px 20px 0 20px; - border-right: solid 1px $light-gray; + padding: 2px 20px 0 10px; + border-right: solid 1px $border-color5; + } + + .data-integrity-search-bar-wrapper { + display: flex; + align-items: center; + .inline-message-alert { + padding: 0; + margin: 0 0 0 10px; + height: 32px; + } } } .secondary-header { - background-color: $tlv-light-gray; + background-color: $background-header-color2; margin: 0px; padding: 10px 20px 5px 20px; - border-top: solid 2px $light-gray; - border-bottom: solid 2px $light-gray; + border-top: solid 2px $border-color5; + border-bottom: solid 2px $border-color5; + width: 100%; .secondary-title { - color: $black; - font-size: $heading-font-2; + color: $text-color2; + font-size: $heading-font-3; + font-weight: bold; padding: 5px 20px 0px 0px; - border-right: solid 1px $light-gray; + border-right: solid 1px $border-color5; margin: 0px 25px 0px 0px; } } .toggle-view-button { - color: $white; + color: $text-color11; background-color: transparent; font-size: 20px; - padding: 10px 15px; + padding: 2px 5px; + margin-left: 10px; border: none; vertical-align: text-bottom; } -.toggle-view-button:hover, .toggle-view-button:focus { - color: #3C4143; +.toggle-view-button:hover { + color: $text-color3; + outline: none; +} + +.toggle-view-button:focus { + color: $primary-background-color; + outline: none; } .toggle-view-button-active { - color: $blue; - background-color: $white; + color: $text-color11; + background-color: transparent; font-size: 20px; - padding: 10px 15px; + padding: 2px 5px; + margin-left: 10px; + outline: none; border: none; vertical-align: text-bottom; } .modal { - top: 56px; + top: 43px; } .modal-backdrop.in{ @@ -107,7 +123,7 @@ .modal-content { height: 100%; box-shadow: none; - background-color: rgba(0, 0, 0, 0.7); + background-color: $background-color2; .modal-body { margin: 0px; @@ -127,7 +143,7 @@ .main-menu-button { background-color: transparent; border: none; - color: #F8F8F8; + color: $primary-background-color; font-size: 16px; line-height: 13px; width: 100%; @@ -148,7 +164,7 @@ } .main-menu-button:hover, .main-menu-button:focus { - color: $blue; + color: $text-color4; modal-backdrop.in .view-inspect-button-icon { background-image: url($icons-folder-path + '/binocularicon_hover.png'); @@ -164,9 +180,9 @@ } .main-menu-button-active { - background-color: $blue; + background-color: $turquoise-blue; border: none; - color: #3C4143; + color: $text-color3; font-size: 16px; line-height: 13px; width: 100%; diff --git a/resources/scss/inventory/_inventory.scss b/resources/scss/inventory/_inventory.scss index ddac3a1..67adff5 100644 --- a/resources/scss/inventory/_inventory.scss +++ b/resources/scss/inventory/_inventory.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .inventory-pane { padding: 5px; } diff --git a/resources/scss/setAttribute/_editAttributeform.scss b/resources/scss/setAttribute/_editAttributeform.scss new file mode 100644 index 0000000..d069a8c --- /dev/null +++ b/resources/scss/setAttribute/_editAttributeform.scss @@ -0,0 +1,122 @@ +/** + * ============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. + */ + +html { + font-family: $base-font-regular; +} + +form { + margin: 50px 20px 20px 20px; + font-size: $body-font-1; +} + +div.attribute-field, div.centre { + display: flex; + flex-flow: row; + justify-content: center; + margin: 10px 5px; +} + +form > div > h2, +div.centre > span.error-message{ + min-width: 550px; + margin: 15px 0px 5px 0px; +} + +div.attribute-field > label { + font-weight: bold; + margin-right: 10px; + min-width: 170px; + text-align: right; + padding: 6px 9px; +} + +div.attribute-field > div { + flex: 1; + max-width: 500px; + display: flex; + flex-flow: column; + position: relative; +} + +div.attribute-field > div > * { + flex: 1; + padding: 5px 8px; + border: solid 1px $border-color5; +} + +div.attribute-field > div > select { + min-height: 30px; +} + +div > span.error-message { + font-weight: bold; + color: $background-color10; + border: none; +} + +div > span.error-message:before { + display: inline-block; + text-rendering: auto; + content: '\F06A'; + margin-right: 5px; + font: normal normal normal 14px/1 FontAwesome; +} + +form > div > button { + margin: 10px; + border-radius: 5px; + padding: 10px 5px 5px 5px; + font-weight: bold; + font-size: $heading-font-3; +} + +form > div > button[type=submit] { + color: $primary-background-color; + background-image: linear-gradient($background-color12, $background-color5); + border: solid 1px $border-color3; +} + +form > div > button[type=submit]:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + text-rendering: auto; + content: '\F1D8'; + margin-right: 5px; +} + +form>div button[type=submit][disabled] { + opacity: .6; + cursor: not-allowed; +} + +form > div > button[type=button] { + color: $text-color3; + background-image: linear-gradient($primary-background-color, $background-color8); + border: solid 1px $border-color5; +} + +form>div button[type=button][disabled] { + opacity: .6; + cursor: not-allowed; +} diff --git a/resources/scss/style.scss b/resources/scss/style.scss index d8fa260..aa0c54d 100644 --- a/resources/scss/style.scss +++ b/resources/scss/style.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - @import "common"; @import "components"; @import "modules"; diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss index 6c349af..b65cb57 100644 --- a/resources/scss/tier-support/_search.scss +++ b/resources/scss/tier-support/_search.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .auto-complete-search { display: inline-block; vertical-align: text-bottom; @@ -31,9 +30,9 @@ float: left; } -.auto-complete-search-button-group{ - position: absolute; - width: 90px; +.auto-complete-search-button-group { + position: absolute !important; + padding-top: 3px; } .auto-complete-search input.form-control { @@ -41,36 +40,35 @@ } .auto-complete-search-button, .auto-complete-search-button:focus { - background-color: $light-gray; - padding-bottom: 8px; + background-color: $search-button-background-color; width: 45px; height: 30px; - border: solid 1px $gray; + border: solid 1px $search-border-color1; } .auto-complete-search button:hover { - background-color: $blue; + background-color: $search-background-color1; } .auto-complete-search .fa-lg { font-size: 1em; line-height: 1em; - background-color: $light-gray; + background-color: $search-button-background-color; } .auto-complete-search button:hover .fa-search { - color: $white; - background-color: $blue; + color: $primary-background-color; + background-color: $search-background-color1; } .auto-complete-search .btn-group .auto-complete-clear-button { border: none; - margin-left: -35px; - margin-top: 2px; - padding: 5px 12px 8px 12px; + margin-left: -35px !important; + height: 30px; + background-color: transparent; i { - color: #009fdb; + color: $search-text-color1; opacity: 0.3; filter: alpha(opacity=30); background-color: transparent; @@ -81,26 +79,28 @@ background-color: transparent; i.fa-times { - color: #009fdb; + color: $search-text-color1; opacity: 1; background-color: transparent; } } .auto-complete-search button:hover .fa-times { - color: $white; - background-color: $blue; + color: $primary-background-color; + background-color: $search-background-color1; } .react-autosuggest__container { display: inline-block; position: relative; + padding-top: 3px; } -.react-autosuggest__input{ +.react-autosuggest__input { width: 655px; height: 30px; display: inline-block; + padding-top: 10px; } .react-autosuggest__input:focus { @@ -117,20 +117,19 @@ overflow-y: scroll; height: 200px; border:1px ; - } -.react-autosuggest__suggestions-containerCopy{ +.react-autosuggest__suggestions-containerCopy { display: none; display: block; position: absolute; top: 30px; width: 655px; - border: 1px solid #aaa; - background-color: #fff; + border: 1px solid $search-border-color1; + background-color: $primary-background-color; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - z-index: 2; + z-index: 90; overflow-y: hidden; } @@ -139,11 +138,11 @@ position: absolute; top: 30px; width: 655px; - border: 1px solid #aaa; - background-color: #fff; + border: 1px solid $search-border-color1; + background-color: $primary-background-color; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - z-index: 2; + z-index: 99; overflow-x: hidden; } @@ -161,14 +160,14 @@ } .react-autosuggest__suggestion--focused { - background-color: #ddd; + background-color: $search-background-color3; } .react-autosuggest__section-title { padding: 10px 0 0 10px; font-size: 12px; - color: #777; - border-top: 1px dashed #ccc; + color: $search-background-color2; + border-top: 1px dashed $search-border-color1; } .react-autosuggest__section-container:first-child .react-autosuggest__section-title { @@ -185,10 +184,11 @@ flex: 20; } -.suggestionColumnTwo{ +.suggestionColumnTwo { flex: 80; } -.highlight{ + +.highlight { font-weight: bolder; background-color:inherit; padding: 0px; diff --git a/resources/scss/tier-support/_selectedNodeDetails.scss b/resources/scss/tier-support/_selectedNodeDetails.scss index 0532319..ec4798c 100644 --- a/resources/scss/tier-support/_selectedNodeDetails.scss +++ b/resources/scss/tier-support/_selectedNodeDetails.scss @@ -21,14 +21,13 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .ts-selected-node-details { padding: 20px; - color: $dark-gray; + color: $border-color2; font-family: $body-font-1; h1 { - color: $blue; + color: $selected-node-details-color1; font-size: $heading-font-2; margin-bottom: 5px; } @@ -40,7 +39,7 @@ margin-top: 15px; th { - color: $gray; + color: $border-color2; } td { @@ -49,14 +48,14 @@ .left-column-cell { padding: 7px 5px 5px 0px; - border-bottom: solid 1px $light-gray; - border-right: solid 1px $light-gray; + border-bottom: solid 1px $border-color5; + border-right: solid 1px $border-color5; width: 50%; } .right-column-cell { padding: 7px 5px 5px 15px; - border-bottom: solid 1px $light-gray; + border-bottom: solid 1px $border-color5; } } diff --git a/resources/scss/tier-support/_splitPane.scss b/resources/scss/tier-support/_splitPane.scss index db0770e..dc07be0 100644 --- a/resources/scss/tier-support/_splitPane.scss +++ b/resources/scss/tier-support/_splitPane.scss @@ -21,15 +21,13 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .SplitPane { - min-width: 1280px; - //108 is the height of the header in tsui - height: calc(100% - 108px) !important; + min-width: $minimum-application-width; + height: calc(100% - #{$total-header-height}) !important; } .Resizer { - background: #000; + background: $border-color1; opacity: .2; z-index: 1; -moz-box-sizing: border-box; @@ -48,28 +46,28 @@ .Resizer.horizontal { height: 11px; margin: -5px 0; - border-top: 5px solid rgba(255, 255, 255, 0); - border-bottom: 5px solid rgba(255, 255, 255, 0); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; cursor: row-resize; width: 100%; } .Resizer.horizontal:hover { - border-top: 5px solid rgba(0, 0, 0, 0.5); - border-bottom: 5px solid rgba(0, 0, 0, 0.5); + border-top: 5px solid $border-color2; + border-bottom: 5px solid $border-color2; } .Resizer.vertical { width: 11px; margin: 0 -5px; - border-left: 5px solid rgba(255, 255, 255, 0); - border-right: 5px solid rgba(255, 255, 255, 0); + border-left: 5px solid transparent; + border-right: 5px solid transparent; cursor: col-resize; } .Resizer.vertical:hover { - border-left: 5px solid rgba(0, 0, 0, 0.5); - border-right: 5px solid rgba(0, 0, 0, 0.5); + border-left: 5px solid $border-color2; + border-right: $border-color2; } Resizer.disabled { cursor: not-allowed; @@ -79,7 +77,7 @@ Resizer.disabled:hover { } .Pane2 { - background-color: $tlv-light-gray; - border-left: solid 2px $light-gray; - overflow: hidden; + background-color: $background-color4; + border-left: solid 2px $border-color5; + overflow: auto; } diff --git a/resources/scss/visualizations/_layout.scss b/resources/scss/visualizations/_layout.scss index 74d15f1..fa756f5 100644 --- a/resources/scss/visualizations/_layout.scss +++ b/resources/scss/visualizations/_layout.scss @@ -21,9 +21,8 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - #audit-visualizations { - padding: 10px; + padding: 0px 10px 10px 25px; } #visualization-violation-severities { @@ -31,24 +30,24 @@ } #visualization-severity-minor { - border: solid 2px $yellow; + border: solid 2px $border-color7; font-size: 14px; margin: 0px 10px; - padding: 6px 10px 0px 10px; + padding: 3px 10px; } #visualization-severity-major { - border: solid 2px $orange; + border: solid 2px $border-color12; font-size: 14px; margin: 0px 10px; - padding: 6px 10px 0px 10px; + padding: 3px 10px; } #visualization-severity-critical { - border: solid 2px $red; + border: solid 2px $border-color10; font-size: 14px; - margin: 10px 14px; - padding: 9px 10px 0px 10px; + margin: 0px 10px; + padding: 3px 10px; } .visualization-title { @@ -56,6 +55,14 @@ margin-bottom: 15px; } +.visualization-violation-count { + margin-bottom: 15px; +} + +.visualization-charts { + margin-top: 0px; +} + .visualization-chart-side-by-side { width: 50%; float: left; diff --git a/resources/scss/components/_dateRange.scss b/resources/scss/vnfSearch/_vnfSearch.scss index 0f63fcb..7dbe809 100644 --- a/resources/scss/components/_dateRange.scss +++ b/resources/scss/vnfSearch/_vnfSearch.scss @@ -20,21 +20,3 @@ * * 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/views/extensibleViews.json b/resources/views/extensibleViews.json new file mode 100644 index 0000000..0d4f101 --- /dev/null +++ b/resources/views/extensibleViews.json @@ -0,0 +1,2 @@ +[ +] |
