427e2f4c395f96a2210c714e77738cc58a31d6ea
[it/otf.git] / 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