otf-frontend/client/src/app/layout/components/right-sidebar/right-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     display: none;\r
  20     font-size: 1em;\r
  21     border-radius: 0;\r
  22     position: fixed;\r
  23     z-index: 1000;\r
  24     top: 56px;\r
  25     right: 235px;\r
  26     width: 235px;\r
  27     margin-right: -235px;\r
  28     border: none;\r
  29     border-radius: 0;\r
  30     overflow-y: auto;\r
  31     background-color: $topnav-background-color;\r
  32     bottom: 43px;\r
  33     overflow-x: hidden;\r
  34     padding-bottom: 40px;\r
  35     -webkit-transition: all 0.2s ease-in-out;\r
  36     -moz-transition: all 0.2s ease-in-out;\r
  37     -ms-transition: all 0.2s ease-in-out;\r
  38     -o-transition: all 0.2s ease-in-out;\r
  39     transition: all 0.2s ease-in-out;\r
  40     // border-top: 1px solid rgba(255,255,255,0.3);\r
  41     .list-group {\r
  42         a.list-group-item {\r
  43             background: $topnav-background-color;\r
  44             border: 0;\r
  45             border-radius: 0;\r
  46             color: #999;\r
  47             text-decoration: none;\r
  48             .fa {\r
  49                 margin-right: 10px;\r
  50             }\r
  51         }\r
  52         a:hover {\r
  53             background: lighten($topnav-background-color, 10%);\r
  54             color: #fff;\r
  55         }\r
  56         a.router-link-active {\r
  57             background: lighten($topnav-background-color, 10%);\r
  58             color: #fff;\r
  59         }\r
  60         .header-fields {\r
  61             padding-top: 10px;\r
  62         \r
  63             > .list-group-item:first-child {\r
  64                 border-top: 1px solid rgba(255, 255, 255, 0.2);\r
  65             }\r
  66         }\r
  67     }\r
  68     .sidebar-dropdown {\r
  69         *:focus {\r
  70             border-radius: none;\r
  71             border: none;\r
  72         }\r
  73         .panel-title {\r
  74             font-size: 1rem;\r
  75             height: 50px;\r
  76             margin-bottom: 0;\r
  77             a {\r
  78                 color: #999;\r
  79                 text-decoration: none;\r
  80                 font-weight: 400;\r
  81                 background: $topnav-background-color;\r
  82                 span {\r
  83                     position: relative;\r
  84                     display: block;\r
  85                     padding: 0.75rem 1.5rem;\r
  86                     padding-top: 1rem;\r
  87                 }\r
  88             }\r
  89             a:hover,\r
  90             a:focus {\r
  91                 color: #fff;\r
  92                 outline: none;\r
  93                 outline-offset: -2px;\r
  94             }\r
  95         }\r
  96         .panel-title:hover {\r
  97             background: lighten($topnav-background-color, 10%);\r
  98         }\r
  99         .panel-collapse {\r
 100             border-radious: 0;\r
 101             border: none;\r
 102             .panel-body {\r
 103                 .list-group-item {\r
 104                     border-radius: 0;\r
 105                     background-color: $topnav-background-color;\r
 106                     border: 0 solid transparent;\r
 107                     a {\r
 108                         color: #999;\r
 109                     }\r
 110                     a:hover {\r
 111                         color: #fff;\r
 112                     }\r
 113                 }\r
 114                 .list-group-item:hover {\r
 115                     background: lighten($topnav-background-color, 10%);\r
 116                 }\r
 117             }\r
 118         }\r
 119     }\r
 120 }\r
 121 .nested-menu {\r
 122     .list-group-item {\r
 123         cursor: pointer;\r
 124     }\r
 125     .nested {\r
 126         list-style-type: none;\r
 127     }\r
 128     ul.submenu {\r
 129         display: none;\r
 130         height: 0;\r
 131     }\r
 132     & .expand {\r
 133         ul.submenu {\r
 134             display: block;\r
 135             list-style-type: none;\r
 136             height: auto;\r
 137             li {\r
 138                 a {\r
 139                     color: #fff;\r
 140                     padding: 10px;\r
 141                     display: block;\r
 142                 }\r
 143             }\r
 144         }\r
 145     }\r
 146 }\r
 147 @media screen and (max-width: 992px) {\r
 148     .sidebar {\r
 149         top: 54px;\r
 150         left: 0px;\r
 151     }\r
 152 }\r
 153 @media print {\r
 154     .sidebar {\r
 155         display: none !important;\r
 156     }\r
 157 }\r
 158 @media (min-width: 992px) {\r
 159     .header-fields {\r
 160         display: none;\r
 161     }\r
 162 }\r
 163 \r
 164 ::-webkit-scrollbar {\r
 165     width: 8px;\r
 166 }\r
 167 \r
 168 ::-webkit-scrollbar-track {\r
 169     -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);\r
 170     border-radius: 3px;\r
 171 }\r
 172 \r
 173 ::-webkit-scrollbar-thumb {\r
 174     border-radius: 3px;\r
 175     -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);\r
 176 }\r