| // 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. |
| |
| @import "theme"; |
| |
| .pf-sidebar { |
| --sidebar-padding-bottom: 40px; |
| --sidebar-timing: 0.15s; |
| |
| color: var(--pf-sidebar-on-surface); |
| grid-area: sidebar; |
| z-index: 4; |
| background-color: var(--pf-sidebar-surface); |
| overflow: hidden; |
| width: var(--sidebar-width); |
| display: flex; |
| position: relative; |
| flex-direction: column; |
| border-right: 1px solid var(--pf-sidebar-border); |
| transition: |
| margin-left var(--anim-easing) var(--sidebar-timing), |
| visibility linear var(--sidebar-timing); |
| > * { |
| border-bottom: 1px solid var(--pf-sidebar-border-secondary); |
| } |
| |
| input[type="file"] { |
| display: none; |
| } |
| > header { |
| font-family: var(--pf-font-compact); |
| font-weight: 700; |
| font-size: 24px; |
| height: var(--topbar-height); |
| line-height: var(--topbar-height); |
| vertical-align: middle; |
| padding: 0 12px; |
| color: var(--pf-sidebar-on-surface); |
| overflow: visible; |
| .pf-sidebar__brand { |
| height: 36px; |
| margin-top: 4px; |
| } |
| &::before { |
| z-index: 10; |
| } |
| &.pf-sidebar__channel--canary::before, |
| &.pf-sidebar__channel--autopush::before { |
| display: block; |
| position: absolute; |
| font-size: 10px; |
| line-height: 5px; |
| font-family: var(--pf-font); |
| top: 7px; |
| right: 48px; |
| } |
| &.pf-sidebar__channel--canary::before { |
| content: "CANARY"; |
| color: #ffd700; |
| } |
| &.pf-sidebar__channel--autopush::before { |
| content: "AUTOPUSH"; |
| color: #aed581; |
| } |
| } |
| |
| .pf-sidebar-button { |
| position: fixed; |
| z-index: 5; |
| height: var(--topbar-height); |
| left: calc(var(--sidebar-width) - 50px); |
| border-radius: 0; |
| border-bottom: inherit; |
| visibility: visible; // So stays visible when the sidebar is hidden. |
| transition: left var(--anim-easing) var(--sidebar-timing); |
| width: 50px; |
| overflow: hidden; |
| > button { |
| vertical-align: middle; |
| } |
| } |
| |
| &--hidden { |
| visibility: hidden; |
| margin-left: calc(var(--sidebar-width) * -1); |
| .pf-sidebar-button { |
| left: 0; |
| background-color: transparent; |
| border-radius: unset; |
| border-bottom: none; |
| color: #aaaaaa; |
| } |
| } |
| |
| &__scroll { |
| overflow-y: auto; |
| flex: 1; |
| |
| // Override scrollbar colors for the sidebar as it doesn't use the theme |
| // provided styles. |
| scrollbar-color: var(--pf-sidebar-border) |
| var(--pf-sidebar-surface-secondary); |
| |
| &::-webkit-scrollbar { |
| width: 0.5em; |
| } |
| &::-webkit-scrollbar-track { |
| background-color: var(--pf-sidebar-surface-secondary); |
| border-radius: 2px; |
| } |
| &::-webkit-scrollbar-thumb { |
| background: var(--pf-sidebar-border); |
| border-radius: 2px; |
| } |
| } |
| |
| &__scroll-container { |
| position: relative; |
| min-height: 100%; |
| padding-bottom: var(--sidebar-padding-bottom); |
| |
| > section { |
| padding: 12px 0 4px 0; |
| max-height: 60px; |
| .pf-sidebar__section-header { |
| cursor: pointer; |
| > h1, |
| > h2 { |
| letter-spacing: 0.25px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| margin: 0 12px; |
| } |
| > h1 { |
| font-size: 15px; |
| } |
| > h2 { |
| color: rgba(255, 255, 255, 0.5); |
| font-size: 12px; |
| margin-top: 8px; |
| font-weight: 400; |
| } |
| &:before { |
| @include material-icon("expand_more"); |
| float: right; |
| color: rgba(255, 255, 255, 0.3); |
| margin-right: 12px; |
| margin-top: -4px; |
| } |
| } |
| &:hover { |
| background: color-hover-surface(transparent, currentColor); |
| } |
| &.pf-sidebar__section--expanded { |
| background-color: var(--pf-sidebar-surface-secondary); |
| max-height: unset; |
| .pf-sidebar__section-header { |
| padding-bottom: 8px; |
| h2 { |
| display: none; |
| } |
| |
| &:before { |
| content: "expand_less"; |
| } |
| } |
| |
| .pf-sidebar__section-content { |
| pointer-events: inherit; |
| opacity: 1; |
| } |
| } |
| } |
| |
| .pf-sidebar__section-content { |
| pointer-events: none; |
| |
| opacity: 0; |
| color: var(--pf-sidebar-on-surface-muted); |
| a { |
| color: inherit; |
| } |
| ul { |
| list-style-type: none; |
| margin: 0; |
| padding: 0; |
| } |
| li { |
| a { |
| line-height: 24px; |
| font-size: 14px; |
| padding: 4px 12px; |
| text-decoration: none; |
| display: block; |
| &.pending { |
| color: rgba(255, 255, 255, 0.3); |
| &::after { |
| content: " "; |
| display: inline-block; |
| vertical-align: middle; |
| box-sizing: border-box; |
| width: 18px; |
| height: 18px; |
| margin-left: 10px; |
| border-radius: 50%; |
| border: 2px solid #b4b7ba; |
| border-color: #b4b7ba transparent; |
| animation: pending-spinner 1.25s linear infinite; |
| } |
| @keyframes pending-spinner { |
| 0% { |
| transform: rotate(0deg); |
| } |
| 100% { |
| transform: rotate(360deg); |
| } |
| } |
| } |
| &[disabled] { |
| text-decoration: line-through; |
| } |
| } |
| .pf-sidebar__button-icon { |
| margin-right: 10px; |
| font-size: 20px; |
| } |
| &:hover { |
| background: color-hover-surface(transparent, currentColor); |
| } |
| .pf-sidebar__trace-file-name { |
| white-space: break-spaces; |
| font-family: var(--pf-font-compact); |
| word-break: break-all; |
| font-weight: 300; |
| letter-spacing: 0; |
| margin-top: -2px; |
| } |
| } |
| } |
| } |
| |
| .pf-sidebar__footer { |
| position: absolute; |
| bottom: 0; |
| width: 100%; |
| padding: 2px 10px; |
| display: grid; |
| height: -var(--sidebar-padding-bottom); |
| grid-template-columns: repeat(4, min-content); |
| grid-gap: 10px; |
| |
| > button { |
| color: hsl(217, 39%, 94%); |
| i { |
| font-size: 24px; |
| } |
| |
| &:hover { |
| color: hsl(45, 100%, 48%); |
| } |
| } |
| |
| > .pf-sidebar__dbg-info-square { |
| font-family: var(--pf-font-compact); |
| width: 24px; |
| height: 24px; |
| line-height: 24px; |
| user-select: none; |
| display: flex; |
| justify-content: center; |
| flex-direction: column; |
| align-items: center; |
| margin: 1px 0; |
| background: var(--pf-sidebar-surface-secondary); |
| border-radius: $border-radius; |
| font-size: 12px; |
| text-align: center; |
| &--green { |
| background: var(--pf-color-success); |
| color: var(--pf-color-text-on-success); |
| } |
| &--amber { |
| background: var(--pf-color-warning); |
| color: var(--pf-color-text-on-warning); |
| } |
| &--red { |
| background: var(--pf-color-danger); |
| color: var(--pf-color-text-on-danger); |
| } |
| > div { |
| font-size: 10px; |
| line-height: 11px; |
| } |
| } |
| |
| .pf-sidebar__version { |
| position: absolute; |
| right: 8px; |
| bottom: 3px; |
| font-size: 12px; |
| font-family: var(--pf-font-compact); |
| a { |
| color: rgba(255, 255, 255, 0.5); |
| text-decoration: none; |
| } |
| margin-top: 11px; |
| } |
| } |
| } |
| |
| // Note: The hiring banner doesn't use theme colors. |
| .pf-hiring-banner { |
| font-size: 12px; |
| background: #db4634; |
| box-shadow: 0 0 3px var(--pf-color-box-shadow); |
| left: -65px; |
| letter-spacing: 1px; |
| line-height: 25px; |
| position: absolute; |
| text-align: center; |
| top: 20px; |
| transform: rotate(-45deg); |
| width: 200px; |
| z-index: 5; |
| |
| a { |
| color: white; |
| text-decoration: none; |
| } |
| } |
