/* Copyright (c) 2019 AT&T Intellectual Property. # # # # 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. # ##############################################################################*/ $topnav-background-color: #000; .sidebar { display: none; font-size: 1em; border-radius: 0; position: fixed; z-index: 1000; top: 56px; right: 235px; width: 235px; margin-right: -235px; border: none; border-radius: 0; overflow-y: auto; background-color: $topnav-background-color; bottom: 43px; overflow-x: hidden; padding-bottom: 40px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; // border-top: 1px solid rgba(255,255,255,0.3); .list-group { a.list-group-item { background: $topnav-background-color; border: 0; border-radius: 0; color: #999; text-decoration: none; .fa { margin-right: 10px; } } a:hover { background: lighten($topnav-background-color, 10%); color: #fff; } a.router-link-active { background: lighten($topnav-background-color, 10%); color: #fff; } .header-fields { padding-top: 10px; > .list-group-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); } } } .sidebar-dropdown { *:focus { border-radius: none; border: none; } .panel-title { font-size: 1rem; height: 50px; margin-bottom: 0; a { color: #999; text-decoration: none; font-weight: 400; background: $topnav-background-color; span { position: relative; display: block; padding: 0.75rem 1.5rem; padding-top: 1rem; } } a:hover, a:focus { color: #fff; outline: none; outline-offset: -2px; } } .panel-title:hover { background: lighten($topnav-background-color, 10%); } .panel-collapse { border-radious: 0; border: none; .panel-body { .list-group-item { border-radius: 0; background-color: $topnav-background-color; border: 0 solid transparent; a { color: #999; } a:hover { color: #fff; } } .list-group-item:hover { background: lighten($topnav-background-color, 10%); } } } } } .nested-menu { .list-group-item { cursor: pointer; } .nested { list-style-type: none; } ul.submenu { display: none; height: 0; } & .expand { ul.submenu { display: block; list-style-type: none; height: auto; li { a { color: #fff; padding: 10px; display: block; } } } } } @media screen and (max-width: 992px) { .sidebar { top: 54px; left: 0px; } } @media print { .sidebar { display: none !important; } } @media (min-width: 992px) { .header-fields { display: none; } } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1); border-radius: 3px; } ::-webkit-scrollbar-thumb { border-radius: 3px; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1); }