From 457685063fd4b960441e482cc8b88fa8c972a7d2 Mon Sep 17 00:00:00 2001 From: Nicholas Soteropoulos Date: Mon, 14 Sep 2020 17:19:10 -0400 Subject: Fix mod ui build issues Change-Id: I4d002645240852a3a5f1964d9ffa2cac11c45b47 Signed-off-by: Nicholas Soteropoulos Issue-ID: DCAEGEN2-2317 Signed-off-by: Nicholas Soteropoulos --- mod2/ui/src/app/app.component.css | 173 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 mod2/ui/src/app/app.component.css (limited to 'mod2/ui/src/app/app.component.css') diff --git a/mod2/ui/src/app/app.component.css b/mod2/ui/src/app/app.component.css new file mode 100644 index 0000000..0b9779a --- /dev/null +++ b/mod2/ui/src/app/app.component.css @@ -0,0 +1,173 @@ +/* + * # ============LICENSE_START======================================================= + * # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved. + * # ================================================================================ + * # 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========================================================= + */ + +.sidenav-container { + height: 100%; +} + +.sidenav { + width: 190px; + background: linear-gradient(to bottom, #1D2329 0%, #454B52 8%) +} + +.sidenav .mat-toolbar { + background: inherit; + color:rgb(225, 241, 247); +} + +.subMenuItem{ + color: white; + font-size: 14px; + font-weight: 400; + height: 6vh !important; + min-height: 35px !important; +} + +.mat-toolbar.mat-primary { + display: block; + position: sticky; + top: 0; + z-index: 1; + height: 33px; + position: fixed; + border-radius: 0%; + background: linear-gradient(to bottom, #1D2329 0%, #454B52 135%) +} + +.nav { + font-size: 16px; + font-weight: 500; + background-color: #454B52; + color:white; + height: 7vh !important; + min-height: 40px !important; +} + +*:focus { + outline: none !important; + border: 0 !important; +} + +.is-active{ + background-color: #EA712F !important; +} + +label { + cursor: pointer; +} + +.input{ + padding-top: 20px; +} + +.inputLabel { + font-weight: 600; + margin-left: 25px; + width: 160px; +} + +.inputFieldSm { + width: 200px; + height: 35px; + padding-left: 8px; +} +.inputFieldMed { + width: 300px; + height: 35px; + padding-left: 6px; +} +.inputFieldLg { + width: 400px; + height: 35px; + padding-left: 6px; +} + +/* B R E A D C R U M B S . . . . . . . . */ +.breadcrumb { + list-style: none; + overflow: hidden; + font: 12px Helvetica, Arial, Sans-Serif; + background: transparent; + margin-left: 5px; + margin-top: -3px; + padding: 0; +} +.breadcrumb li { + float: left; +} +.breadcrumb li a { + color: #1D2329; + font-weight: 700; + text-decoration: none; + padding: 6px 0 6px 45px; + background: brown; /* fallback color */ + background: hsla(21,82%,55%,1); + position: relative; + display: block; + float: left; +} +.breadcrumb li a:after { + content: " "; + display: block; + width: 0; + height: 0; + border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ + border-bottom: 50px solid transparent; + border-left: 30px solid hsla(21,82%,55%,1); + position: absolute; + top: 50%; + margin-top: -50px; + left: 100%; + z-index: 2; +} +.breadcrumb li a:before { + content: " "; + display: block; + width: 0; + height: 0; + border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ + border-bottom: 50px solid transparent; + border-left: 30px solid #b9bec4; + position: absolute; + top: 50%; + margin-top: -50px; + margin-left: 3px; + left: 100%; + z-index: 1; +} +.breadcrumb li:first-child a { + padding-left: 14px; +} +.breadcrumb li:nth-child(2) a { background: hsla(30,100%,50%,.95); } +.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(30,100%,50%,.95); } +.breadcrumb li:nth-child(3) a { background: hsla(38,100%,50%,.90); } +.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(38,100%,50%,.90); } +.breadcrumb li:nth-child(4) a { background: hsla(45,100%,50%,.85); } +.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(45,100%,50%,.85); } +.breadcrumb li:nth-child(5) a { background: hsla(52,100%,50%,.80); } +.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(52,100%,50%,.80); } +.breadcrumb li:last-child a { + background: transparent !important; + color: black; + pointer-events: none; + cursor: default; + margin-left: -10px; +} +.breadcrumb li:last-child a:after { border: 0; } +.breadcrumb li a:hover { background: rgba(102, 102, 102, 0.993); color: #e9fffd; cursor: pointer} +.breadcrumb li a:hover:after { border-left-color: hsla(0,0%,40%,1); color: #bbc9d8 !important; cursor: pointer} -- cgit 1.2.3-korg