mod2/ui/src/app/app.component.css

   1 /*
   2  *  # ============LICENSE_START=======================================================
   3  *  # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
   4  *  # ================================================================================
   5  *  # Licensed under the Apache License, Version 2.0 (the "License");
   6  *  # you may not use this file except in compliance with the License.
   7  *  # You may obtain a copy of the License at
   8  *  #
   9  *  #      http://www.apache.org/licenses/LICENSE-2.0
  10  *  #
  11  *  # Unless required by applicable law or agreed to in writing, software
  12  *  # distributed under the License is distributed on an "AS IS" BASIS,
  13  *  # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *  # See the License for the specific language governing permissions and
  15  *  # limitations under the License.
  16  *  # ============LICENSE_END=========================================================
  17  */
  18
  19 .sidenav-container {
  20   height: 100%;
  21 }
  22
  23 .sidenav {
  24   width: 190px;
  25   background: linear-gradient(to bottom, #1D2329 0%, #454B52 8%)
  26 }
  27
  28 .sidenav .mat-toolbar {
  29   background: inherit;
  30   color:rgb(225, 241, 247);
  31 }
  32
  33 .subMenuItem{
  34   color: white;
  35   font-size: 14px;
  36   font-weight: 400;
  37   height: 6vh !important;
  38   min-height: 35px !important;
  39 }
  40
  41 .mat-toolbar.mat-primary {
  42   display: block;
  43   position: sticky;
  44   top: 0;
  45   z-index: 1;
  46   height: 33px;
  47   position: fixed;
  48   border-radius: 0%;
  49   background: linear-gradient(to bottom, #1D2329 0%, #454B52 135%)
  50 }
  51
  52 .nav {
  53   font-size: 16px;
  54   font-weight: 500;
  55   background-color: #454B52;
  56   color:white;
  57   height: 7vh !important;
  58   min-height: 40px !important;
  59 }
  60
  61 *:focus {
  62     outline: none !important;
  63     border: 0 !important;
  64 }
  65
  66 .is-active{
  67   background-color: #EA712F !important;
  68 }
  69
  70 label {
  71   cursor: pointer;
  72 }
  73
  74 .input{
  75   padding-top: 20px;
  76 }
  77
  78 .inputLabel {
  79   font-weight: 600;
  80   margin-left: 25px;
  81   width: 160px;
  82 }
  83
  84 .inputFieldSm {
  85   width: 200px;
  86   height: 35px;
  87   padding-left: 8px;
  88 }
  89 .inputFieldMed {
  90   width: 300px;
  91   height: 35px;
  92   padding-left: 6px;
  93 }
  94 .inputFieldLg {
  95   width: 400px;
  96   height: 35px;
  97   padding-left: 6px;
  98 }
  99
 100 /*  B R E A D C R U M B S .  .  .  .  .  .  .  .  */
 101 .breadcrumb {
 102   list-style: none;
 103   overflow: hidden;
 104   font: 12px Helvetica, Arial, Sans-Serif;
 105   background: transparent;
 106   margin-left: 5px;
 107   margin-top: -3px;
 108   padding: 0;
 109 }
 110 .breadcrumb li {
 111   float: left;
 112 }
 113 .breadcrumb li a {
 114   color: #1D2329;
 115   font-weight: 700;
 116   text-decoration: none;
 117   padding: 6px 0 6px 45px;
 118   background: brown; /* fallback color */
 119   background: hsla(21,82%,55%,1);
 120   position: relative;
 121   display: block;
 122   float: left;
 123 }
 124 .breadcrumb li a:after {
 125   content: " ";
 126   display: block;
 127   width: 0;
 128   height: 0;
 129   border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
 130   border-bottom: 50px solid transparent;
 131   border-left: 30px solid hsla(21,82%,55%,1);
 132   position: absolute;
 133   top: 50%;
 134   margin-top: -50px;
 135   left: 100%;
 136   z-index: 2;
 137 }
 138 .breadcrumb li a:before {
 139   content: " ";
 140   display: block;
 141   width: 0;
 142   height: 0;
 143   border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
 144   border-bottom: 50px solid transparent;
 145   border-left: 30px solid #b9bec4;
 146   position: absolute;
 147   top: 50%;
 148   margin-top: -50px;
 149   margin-left: 3px;
 150   left: 100%;
 151   z-index: 1;
 152 }
 153 .breadcrumb li:first-child a {
 154   padding-left: 14px;
 155 }
 156 .breadcrumb li:nth-child(2) a       { background:        hsla(30,100%,50%,.95); }
 157 .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(30,100%,50%,.95); }
 158 .breadcrumb li:nth-child(3) a       { background:        hsla(38,100%,50%,.90); }
 159 .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(38,100%,50%,.90); }
 160 .breadcrumb li:nth-child(4) a       { background:        hsla(45,100%,50%,.85); }
 161 .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(45,100%,50%,.85); }
 162 .breadcrumb li:nth-child(5) a       { background:        hsla(52,100%,50%,.80); }
 163 .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(52,100%,50%,.80); }
 164 .breadcrumb li:last-child a {
 165   background: transparent !important;
 166   color: black;
 167   pointer-events: none;
 168   cursor: default;
 169   margin-left: -10px;
 170 }
 171 .breadcrumb li:last-child a:after { border: 0; }
 172 .breadcrumb li a:hover { background: rgba(102, 102, 102, 0.993); color: #e9fffd; cursor: pointer}
 173 .breadcrumb li a:hover:after { border-left-color: hsla(0,0%,40%,1); color: #bbc9d8 !important; cursor: pointer}