sidebar.component.scss

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 $topnav-background-color: #000;\r
  18 .sidebar {\r
  19     font-size: 1em;\r
  20     border-radius: 0;\r
  21     position: fixed;\r
  22     z-index: 1000;\r
  23     top: 56px;\r
  24     left: 235px;\r
  25     width: 235px;\r
  26     margin-left: -235px;\r
  27     border: none;\r
  28     border-radius: 0;\r
  29     overflow-y: auto;\r
  30     background-color: $topnav-background-color;\r
  31     bottom: 0;\r
  32     overflow-x: hidden;\r
  33     padding-bottom: 40px;\r
  34     -webkit-transition: all 0.2s ease-in-out;\r
  35     -moz-transition: all 0.2s ease-in-out;\r
  36     -ms-transition: all 0.2s ease-in-out;\r
  37     -o-transition: all 0.2s ease-in-out;\r
  38     transition: all 0.2s ease-in-out;\r
  39     // border-top: 1px solid rgba(255,255,255,0.3);\r
  40     .list-group {\r
  41         a.list-group-item {\r
  42             background: $topnav-background-color;\r
  43             border: 0;\r
  44             border-radius: 0;\r
  45             color: #999;\r
  46             text-decoration: none;\r
  47             .fa {\r
  48                 margin-right: 10px;\r
  49             }\r
  50         }\r
  51         a:hover {\r
  52             background: lighten($topnav-background-color, 10%);\r
  53             color: #fff;\r
  54         }\r
  55         a.router-link-active {\r
  56             background: lighten($topnav-background-color, 10%);\r
  57             color: #fff;\r
  58         }\r
  59         .header-fields {\r
  60             padding-top: 10px;\r
  61         \r
  62             > .list-group-item:first-child {\r
  63                 border-top: 1px solid rgba(255, 255, 255, 0.2);\r
  64             }\r
  65         }\r
  66     }\r
  67     .sidebar-dropdown {\r
  68         *:focus {\r
  69             border-radius: none;\r
  70             border: none;\r
  71         }\r
  72         .panel-title {\r
  73             font-size: 1rem;\r
  74             height: 50px;\r
  75             margin-bottom: 0;\r
  76             a {\r
  77                 color: #999;\r
  78                 text-decoration: none;\r
  79                 font-weight: 400;\r
  80                 background: $topnav-background-color;\r
  81                 span {\r
  82                     position: relative;\r
  83                     display: block;\r
  84                     padding: 0.75rem 1.5rem;\r
  85                     padding-top: 1rem;\r
  86                 }\r
  87             }\r
  88             a:hover,\r
  89             a:focus {\r
  90                 color: #fff;\r
  91                 outline: none;\r
  92                 outline-offset: -2px;\r
  93             }\r
  94         }\r
  95         .panel-title:hover {\r
  96             background: lighten($topnav-background-color, 10%);\r
  97         }\r
  98         .panel-collapse {\r
  99             border-radious: 0;\r
 100             border: none;\r
 101             .panel-body {\r
 102                 .list-group-item {\r
 103                     border-radius: 0;\r
 104                     background-color: $topnav-background-color;\r
 105                     border: 0 solid transparent;\r
 106                     a {\r
 107                         color: #999;\r
 108                     }\r
 109                     a:hover {\r
 110                         color: #fff;\r
 111                     }\r
 112                 }\r
 113                 .list-group-item:hover {\r
 114                     background: lighten($topnav-background-color, 10%);\r
 115                 }\r
 116             }\r
 117         }\r
 118     }\r
 119 }\r
 120 .nested-menu {\r
 121     .list-group-item {\r
 122         cursor: pointer;\r
 123     }\r
 124     .nested {\r
 125         list-style-type: none;\r
 126     }\r
 127     ul.submenu {\r
 128         display: none;\r
 129         height: 0;\r
 130     }\r
 131     & .expand {\r
 132         ul.submenu {\r
 133             display: block;\r
 134             list-style-type: none;\r
 135             height: auto;\r
 136             li {\r
 137                 a {\r
 138                     color: #fff;\r
 139                     padding: 10px;\r
 140                     display: block;\r
 141                 }\r
 142             }\r
 143         }\r
 144     }\r
 145 }\r
 146 @media screen and (max-width: 992px) {\r
 147     .sidebar {\r
 148         top: 54px;\r
 149         left: 0px;\r
 150     }\r
 151 }\r
 152 @media print {\r
 153     .sidebar {\r
 154         display: none !important;\r
 155     }\r
 156 }\r
 157 @media (min-width: 992px) {\r
 158     .header-fields {\r
 159         display: none;\r
 160     }\r
 161 }\r
 162 \r
 163 ::-webkit-scrollbar {\r
 164     width: 8px;\r
 165 }\r
 166 \r
 167 ::-webkit-scrollbar-track {\r
 168     -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);\r
 169     border-radius: 3px;\r
 170 }\r
 171 \r
 172 ::-webkit-scrollbar-thumb {\r
 173     border-radius: 3px;\r
 174     -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);\r
 175 }\r