gerrit.onap Code Review - portal/sdk.git/blob

   1 /*
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal SDK
   4  * ===================================================================
   5  * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
   6  * ===================================================================
   7  *
   8  * Unless otherwise specified, all software contained herein is licensed
   9  * under the Apache License, Version 2.0 (the "License");
  10  * you may not use this software except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *             http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  *
  21  * Unless otherwise specified, all documentation contained herein is licensed
  22  * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23  * you may not use this documentation except in compliance with the License.
  24  * You may obtain a copy of the License at
  25  *
  26  *             https://creativecommons.org/licenses/by/4.0/
  27  *
  28  * Unless required by applicable law or agreed to in writing, documentation
  29  * distributed under the License is distributed on an "AS IS" BASIS,
  30  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31  * See the License for the specific language governing permissions and
  32  * limitations under the License.
  33  *
  34  * ============LICENSE_END============================================
  35  *
  36  *
  37  */
  38  $topnav-background-color: #f2f2f2;
  39
  40  .siderbar-height-noHeader{
  41      top: 0px;
  42  }
  43
  44  .siderbar-height{
  45      top: 56px;
  46  }
  47
  48  .sidebar-list {
  49      border-radius: 0;
  50      position: fixed;
  51      z-index: 1000;
  52      left: 235px;
  53      width: 235px;
  54      //height: 100%;
  55      height: 76%;
  56      margin-left: -235px;
  57      //margin-bottom: 48px;
  58      margin-bottom: 0px;
  59      border: none;
  60      border-radius: 0;
  61      overflow-y: auto;
  62      background-color: $topnav-background-color;
  63      top: 7.2em;
  64      //top: 0em;
  65      overflow-x: hidden;
  66      //padding-bottom: 40px;
  67      padding-bottom: 5em;
  68      white-space: nowrap;
  69      -webkit-transition: all 0.2s ease-in-out;
  70      -moz-transition: all 0.2s ease-in-out;
  71      -ms-transition: all 0.2s ease-in-out;
  72      -o-transition: all 0.2s ease-in-out;
  73      transition: all 0.2s ease-in-out;
  74      .list-group {
  75          a.list-group-item {
  76              background: $topnav-background-color;
  77              border: 0;
  78              border-top: 1px solid #999;
  79              border-radius: 0;
  80              color: #0568ae;
  81              text-decoration: none;
  82              .fa {
  83                  margin-right: 10px;
  84                  color: #000;
  85              }
  86          }
  87          a:hover {
  88              background: darken($topnav-background-color, 5%);
  89              color: #fff;
  90          }
  91          a.router-link-active {
  92              background: darken($topnav-background-color, 5%);
  93              color: #fff;
  94          }
  95          .header-fields {
  96              padding-top: 10px;
  97
  98              > .list-group-item:first-child {
  99                  border-top: 1px solid rgba(255, 255, 255, 0.2);
 100              }
 101          }
 102      }
 103      .sidebar-dropdown {
 104          *:focus {
 105              border-radius: none;
 106              border: none;
 107          }
 108          .panel-title {
 109              font-size: 1rem;
 110              height: 50px;
 111              margin-bottom: 0;
 112              a {
 113                  color: #999;
 114                  text-decoration: none;
 115                  font-weight: 400;
 116                  background: $topnav-background-color;
 117                  span {
 118                      position: relative;
 119                      display: block;
 120                      padding: 0.75rem 1.5rem;
 121                      padding-top: 1rem;
 122                  }
 123              }
 124              a:hover,
 125              a:focus {
 126                  color: #fff;
 127                  outline: none;
 128                  outline-offset: -2px;
 129              }
 130          }
 131          .panel-title:hover {
 132              background: darken($topnav-background-color, 5%);
 133          }
 134          .panel-collapse {
 135              border-radious: 0;
 136              border: none;
 137              .panel-body {
 138                  .list-group-item {
 139                      border-radius: 0;
 140                      background-color: $topnav-background-color;
 141                      border: 0 solid transparent;
 142                      a {
 143                          color: #999;
 144                      }
 145                      a:hover {
 146                          color: #fff;
 147                      }
 148                  }
 149                  .list-group-item:hover {
 150                      background: darken($topnav-background-color, 5%);
 151                  }
 152              }
 153          }
 154      }
 155  }
 156
 157  .nested-menu {
 158      .list-group-item {
 159          cursor: pointer;
 160      }
 161      .nested {
 162          list-style-type: none;
 163      }
 164      ul.submenu {
 165          display: none;
 166          height: 0;
 167      }
 168      & .expand {
 169          ul.submenu {
 170              display: block;
 171              list-style-type: none;
 172              height: auto;
 173              li {
 174                  a {
 175                      color: #0568ae;
 176                      padding: 10px;
 177                      display: block;
 178                  }
 179              }
 180          }
 181      }
 182  }
 183  @media screen and (max-width: 992px) {
 184      .sidebar {
 185          top: 54px;
 186          left: 0px;
 187      }
 188  }
 189  @media print {
 190      .sidebar {
 191          display: none !important;
 192      }
 193  }
 194  @media (min-width: 992px) {
 195      .header-fields {
 196          display: none;
 197      }
 198  }
 199
 200  ::-webkit-scrollbar {
 201      width: 8px;
 202  }
 203
 204  ::-webkit-scrollbar-track {
 205      -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);
 206      border-radius: 3px;
 207  }
 208
 209  ::-webkit-scrollbar-thumb {
 210      border-radius: 3px;
 211      -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);
 212  }
 213  .sidebar{
 214      position: relative;
 215  }
 216  .toggle-button {
 217      position: fixed;
 218      width: 236px;
 219      cursor: pointer;
 220      padding: 12px;
 221      // bottom: 5.5em;
 222      top: 3.5em;
 223      left: 0;
 224      z-index: 1001;
 225      color: #000;;
 226      background: #f2f2f2;
 227      i {
 228          font-size: 23px;
 229      }
 230      &:hover {
 231          background: darken($topnav-background-color, 5%);
 232          color: #fff;
 233      }
 234      border-bottom: 1px solid #999;
 235      -webkit-transition: all 0.2s ease-in-out;
 236      -moz-transition: all 0.2s ease-in-out;
 237      -ms-transition: all 0.2s ease-in-out;
 238      -o-transition: all 0.2s ease-in-out;
 239      transition: all 0.2s ease-in-out;
 240  }
 241
 242  .collapsed {
 243      width: 60px;
 244      span {
 245          display: none;
 246      }
 247  }
 248