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 {
  49     border-radius: 0;
  50     position: fixed;
  51     z-index: 1000;
  52     left: 235px;
  53     width: 235px;
  54     margin-left: -235px;
  55     margin-bottom: 48px;
  56     border: none;
  57     border-radius: 0;
  58     overflow-y: auto;
  59     background-color: $topnav-background-color;
  60     bottom: 0;
  61     overflow-x: hidden;
  62     padding-bottom: 40px;
  63     white-space: nowrap;
  64     -webkit-transition: all 0.2s ease-in-out;
  65     -moz-transition: all 0.2s ease-in-out;
  66     -ms-transition: all 0.2s ease-in-out;
  67     -o-transition: all 0.2s ease-in-out;
  68     transition: all 0.2s ease-in-out;
  69     .list-group {
  70         a.list-group-item {
  71             background: $topnav-background-color;
  72             border: 0;
  73             border-top: 1px solid #999;
  74             border-radius: 0;
  75             color: #0568ae;
  76             text-decoration: none;
  77             .fa {
  78                 margin-right: 10px;
  79                 color: #000;
  80             }
  81         }
  82         a:hover {
  83             background: darken($topnav-background-color, 5%);
  84             color: #fff;
  85         }
  86         a.router-link-active {
  87             background: darken($topnav-background-color, 5%);
  88             color: #fff;
  89         }
  90         .header-fields {
  91             padding-top: 10px;
  92
  93             > .list-group-item:first-child {
  94                 border-top: 1px solid rgba(255, 255, 255, 0.2);
  95             }
  96         }
  97     }
  98     .sidebar-dropdown {
  99         *:focus {
 100             border-radius: none;
 101             border: none;
 102         }
 103         .panel-title {
 104             font-size: 1rem;
 105             height: 50px;
 106             margin-bottom: 0;
 107             a {
 108                 color: #999;
 109                 text-decoration: none;
 110                 font-weight: 400;
 111                 background: $topnav-background-color;
 112                 span {
 113                     position: relative;
 114                     display: block;
 115                     padding: 0.75rem 1.5rem;
 116                     padding-top: 1rem;
 117                 }
 118             }
 119             a:hover,
 120             a:focus {
 121                 color: #fff;
 122                 outline: none;
 123                 outline-offset: -2px;
 124             }
 125         }
 126         .panel-title:hover {
 127             background: darken($topnav-background-color, 5%);
 128         }
 129         .panel-collapse {
 130             border-radious: 0;
 131             border: none;
 132             .panel-body {
 133                 .list-group-item {
 134                     border-radius: 0;
 135                     background-color: $topnav-background-color;
 136                     border: 0 solid transparent;
 137                     a {
 138                         color: #999;
 139                     }
 140                     a:hover {
 141                         color: #fff;
 142                     }
 143                 }
 144                 .list-group-item:hover {
 145                     background: darken($topnav-background-color, 5%);
 146                 }
 147             }
 148         }
 149     }
 150 }
 151
 152 .nested-menu {
 153     .list-group-item {
 154         cursor: pointer;
 155     }
 156     .nested {
 157         list-style-type: none;
 158     }
 159     ul.submenu {
 160         display: none;
 161         height: 0;
 162     }
 163     & .expand {
 164         ul.submenu {
 165             display: block;
 166             list-style-type: none;
 167             height: auto;
 168             li {
 169                 a {
 170                     color: #0568ae;
 171                     padding: 10px;
 172                     display: block;
 173                 }
 174             }
 175         }
 176     }
 177 }
 178 @media screen and (max-width: 992px) {
 179     .sidebar {
 180         top: 54px;
 181         left: 0px;
 182     }
 183 }
 184 @media print {
 185     .sidebar {
 186         display: none !important;
 187     }
 188 }
 189 @media (min-width: 992px) {
 190     .header-fields {
 191         display: none;
 192     }
 193 }
 194
 195 ::-webkit-scrollbar {
 196     width: 8px;
 197 }
 198
 199 ::-webkit-scrollbar-track {
 200     -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);
 201     border-radius: 3px;
 202 }
 203
 204 ::-webkit-scrollbar-thumb {
 205     border-radius: 3px;
 206     -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);
 207 }
 208
 209 .toggle-button {
 210     position: fixed;
 211     width: 236px;
 212     cursor: pointer;
 213     padding: 12px;
 214     bottom: 0;
 215     color: #000;;
 216     background: #f2f2f2;
 217     i {
 218         font-size: 23px;
 219     }
 220     &:hover {
 221         background: darken($topnav-background-color, 5%);
 222         color: #fff;
 223     }
 224     border-top: 1px solid #999;
 225     -webkit-transition: all 0.2s ease-in-out;
 226     -moz-transition: all 0.2s ease-in-out;
 227     -ms-transition: all 0.2s ease-in-out;
 228     -o-transition: all 0.2s ease-in-out;
 229     transition: all 0.2s ease-in-out;
 230 }
 231
 232 .collapsed {
 233     width: 60px;
 234     span {
 235         display: none;
 236     }
 237 }