1// Copyright (C) 2018 The Android Open Source Project
2//
3// Licensed under the Apache License, Version 2.0 (the "License");
4// you may not use this file except in compliance with the License.
5// You may obtain a copy of the License at
6//
7//      http://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS,
11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12// See the License for the specific language governing permissions and
13// limitations under the License.
14.sidebar {
15    grid-area: sidebar;
16    z-index: 4;
17    background-color: #262f3c;
18    overflow-y: auto;
19    >* {
20        border-bottom: 1px solid #404854;
21    }
22    input[type=file] { display:none; }
23    >header {
24        font-family: 'Raleway';
25        height: var(--topbar-height);
26        line-height: var(--topbar-height);
27        vertical-align: middle;
28        padding: 0 20px;
29        color: #fff;
30        font-weight: 400;
31        font-size: 24px;
32        letter-spacing: 0.5px;
33        &:before {
34            width: 32px;
35            height: 32px;
36            display: inline-block;
37            content: '';
38            vertical-align: middle;
39            background-image: url('assets/logo.png');
40            background-size: contain;
41            background-repeat: no-repeat;
42            margin-right: 15px;
43        }
44    }
45    >section {
46        @include transition();
47        padding: 20px 0;
48        max-height: 80px;
49        overflow: hidden;
50        .section-header {
51            cursor: pointer;
52            >h1,
53            >h2 {
54                font-family: 'Raleway';
55                letter-spacing: 0.25px;
56                overflow: hidden;
57                text-overflow: ellipsis;
58                white-space: nowrap;
59                margin: 0 24px;
60            }
61            >h1 {
62                color: #fff;
63                font-size: 15px;
64                font-weight: 500;
65            }
66            >h2 {
67                @include transition();
68                color: rgba(255, 255, 255, 0.5);
69                font-size: 12px;
70                margin-top: 8px;
71                font-weight: 400;
72            }
73        }
74        &:hover {
75            background-color: #373f4b;
76        }
77        &.expanded {
78            background-color: #19212b;
79            max-height: unset;
80            .section-header h2 {
81                opacity: 0;
82            }
83            .section-content {
84                pointer-events: inherit;
85                opacity: 1;
86            }
87        }
88    }
89    .section-content {
90        pointer-events: none;
91        @include transition();
92        opacity: 0;
93        color: #b4b7ba;
94        a {
95            color: #b4b7ba;
96        }
97        ul {
98            list-style-type: none;
99            margin: 0;
100            padding: 0;
101        }
102        li {
103            @include transition();
104            a {
105                line-height: 24px;
106                font-size: 14px;
107                font-weight: 400;
108                font-family: 'Raleway';
109                letter-spacing: 0.5px;
110                padding: 5px 24px;
111                text-decoration: none;
112                display: block;
113            }
114            .material-icons {
115                vertical-align: middle;
116                margin-right: 10px;
117            }
118            &:hover {
119                background-color: #373f4b;
120            }
121        }
122    }
123}
124