chromium/chrome/browser/resources/pdf/elements/viewer_pdf_sidenav.css

/* Copyright 2024 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=./shared_vars.css.js
 * #import=./pdf_shared.css.js
 * #import=chrome://resources/cr_elements/cr_hidden_style_lit.css.js
 * #import=chrome://resources/cr_elements/cr_shared_style_lit.css.js
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #include=pdf-shared cr-hidden-style-lit cr-shared-style-lit
 * #css_wrapper_metadata_end */

:host {
  --sidenav-selected-tab-color: var(--google-blue-300);
  background-color: var(--viewer-side-background-color);
  display: flex;
  height: 100%;
  min-width: var(--viewer-pdf-sidenav-width);
  overflow: hidden;
  width: var(--viewer-pdf-sidenav-width);
}

#icons {
  display: flex;
  flex-direction: column;
  min-width: 64px;
}

/* These are dummy styles currently - replace with real content. */
#content {
  color: white;
  flex: 1;
  overflow-x: hidden;
}

#icons:not([hidden]) + #content {
  --viewer-thumbnail-bar-padding-inline-end: 28px;
}

.selected cr-icon-button {
  --cr-icon-button-fill-color: var(--sidenav-selected-tab-color);
}

.button-wrapper {
  --button-wrapper-height: 36px;
  --button-wrapper-margin: 12px;
  --button-wrapper-total-height: calc(
      var(--button-wrapper-height) + var(--button-wrapper-margin));
  align-items: center;
  display: flex;
  height: var(--button-wrapper-height);
  margin: var(--button-wrapper-margin) 0;
  width: 100%;
}

.cr-vertical-tab {
  --cr-vertical-tab-selected-color: var(--sidenav-selected-tab-color);
}

.cr-vertical-tab::before {
  transform: translateY(var(--button-wrapper-total-height));
  transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
}

.cr-vertical-tab.selected + .cr-vertical-tab::before {
  transform: translateY(calc(-1 * var(--button-wrapper-total-height)));
}

.cr-vertical-tab.selected::before {
  transform: translateY(0);
}

cr-icon-button {
  margin: 0 auto;
}