portal-FE-os/src/app/layout/components/sidebar/sidebar.component.scss

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