| // Copyright (C) 2018 The Android Open Source Project |
| // |
| // 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. |
| .sidebar { |
| grid-area: sidebar; |
| z-index: 4; |
| background-color: #262f3c; |
| overflow: visible; |
| width: var(--sidebar-width); |
| display: flex; |
| flex-direction: column; |
| >* { |
| border-bottom: 1px solid #404854; |
| } |
| input[type=file] { display:none; } |
| >header { |
| font-family: 'Raleway'; |
| height: var(--topbar-height); |
| line-height: var(--topbar-height); |
| vertical-align: middle; |
| padding: 0 20px; |
| color: #fff; |
| font-weight: 400; |
| font-size: 24px; |
| letter-spacing: 0.5px; |
| overflow: visible; |
| &:before { |
| width: 32px; |
| height: 32px; |
| display: inline-block; |
| content: ''; |
| vertical-align: middle; |
| background-image: url('assets/logo.png'); |
| background-size: contain; |
| background-repeat: no-repeat; |
| margin-right: 15px; |
| } |
| >.sidebar-button { |
| display: inline-block; |
| position: relative; |
| height: inherit; |
| background-color: #262f3c; |
| overflow: visible; |
| padding: 0 10px; |
| border-radius: 0 5px 5px 0; |
| border-bottom: inherit; |
| >button { |
| vertical-align: middle; |
| } |
| } |
| } |
| .sidebar-content { |
| overflow-y: auto; |
| flex: 1; |
| padding-bottom: 40px; |
| &::-webkit-scrollbar { |
| width: 0.5em; |
| } |
| &::-webkit-scrollbar-track { |
| background-color: #19212b; |
| border-radius: 2px; |
| } |
| &::-webkit-scrollbar-thumb { |
| background: #b4b7ba6e; |
| border-radius: 2px; |
| } |
| >section { |
| @include transition(); |
| padding: 20px 0; |
| max-height: 80px; |
| .section-header { |
| cursor: pointer; |
| >h1, |
| >h2 { |
| font-family: 'Raleway'; |
| letter-spacing: 0.25px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| margin: 0 24px; |
| } |
| >h1 { |
| color: #fff; |
| font-size: 15px; |
| font-weight: 500; |
| } |
| >h2 { |
| @include transition(); |
| color: rgba(255, 255, 255, 0.5); |
| font-size: 12px; |
| margin-top: 8px; |
| font-weight: 400; |
| } |
| } |
| &:hover { |
| background-color: #373f4b; |
| } |
| &.expanded { |
| background-color: #19212b; |
| max-height: unset; |
| .section-header h2 { |
| opacity: 0; |
| } |
| .section-content { |
| pointer-events: inherit; |
| opacity: 1; |
| } |
| } |
| } |
| .section-content { |
| pointer-events: none; |
| @include transition(); |
| opacity: 0; |
| color: #b4b7ba; |
| a { |
| color: #b4b7ba; |
| } |
| ul { |
| list-style-type: none; |
| margin: 0; |
| padding: 0; |
| } |
| li { |
| @include transition(); |
| a { |
| line-height: 24px; |
| font-size: 14px; |
| font-weight: 400; |
| font-family: 'Raleway'; |
| letter-spacing: 0.5px; |
| padding: 5px 24px; |
| text-decoration: none; |
| display: block; |
| &[disabled] { |
| text-decoration: line-through; |
| } |
| } |
| .material-icons { |
| vertical-align: middle; |
| margin-right: 10px; |
| } |
| &:hover { |
| background-color: #373f4b; |
| } |
| } |
| } |
| } |
| } |
| |
| .hide-sidebar { |
| margin-left: calc(var(--sidebar-width) * -1); |
| .sidebar-button { |
| left: 96px; |
| } |
| } |
| |
| .show-sidebar .sidebar-button { |
| left: 46px; |
| } |
| |
| .keycap { |
| background-color: #fafbfc; |
| border: 1px solid #d1d5da; |
| border-bottom-color: #c6cbd1; |
| border-radius: 3px; |
| box-shadow: inset 0 -1px 0 #c6cbd1; |
| color: #444d56; |
| display: inline-block; |
| font-family: var(--monospace-font); |
| vertical-align: middle; |
| |
| line-height: 20px; |
| padding: 3px 7px; |
| } |
