src/components/browse/index.css

/* Copyright 2015 The Vanadium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

/* TODO(aghassemi) move to some common CSS, ideally shared between apps */
@import "common-style/theme.css";
@import "common-style/sizes.css";

.layout-horizontal {
  display: flex;
  flex-direction: row;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.browse-toolbar {
  background-color: var(--color-grey-very-light);
  box-shadow: none;
  height: 50px;
}
.browse-toolbar div.browse-toolbar-layout {
  flex-basis: 100%;
  height: 35px;
}
.browse-details-sidebar::shadow #dropShadow {
  display: none;
  z-index: -1;
}
.browse-details-sidebar::shadow #mainContainer {
  background-color: var(--color-grey-very-light);
  border-left: solid 1px var(--color-divider);
  min-width: 250px;
}

.browse-main-wrapper paper-progress {
  position: absolute;
  opacity: 0.6;
}

.browse-main-wrapper core-tooltip {
  position: absolute;
  top: 0;
}

.browse-main-wrapper h2 {
  font-size: var(--size-font-xxlarge);
  color: var(--color-text-heading);
  padding: var(--size-space-small);
  padding-bottom: var(--size-space-xxsmall);
  text-decoration: none;
}

.browse-main-panel::shadow #mainContainer {
  overflow-x: auto;
}

.progress-tooltip {
  width: 100%;
}

.breadcrumbs-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  margin: 0 0 2px 0;
  padding-bottom: 1px;
  height: 39px;
}

.breadcrumbs {
  margin: 0px;
  padding: 0px;
  margin-top: 4px;
  list-style: none;
  white-space: nowrap;
}

.breadcrumb-item {
  font-size: var(--size-font-xsmall);
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.breadcrumb-item a {
  display: inline-block;
  color: var(--color-text-primary);
}

.breadcrumb-item-prefix a {
  color: var(--color-text-secondary);
}

.breadcrumb-item a:hover, .breadcrumbs li a:focus {
  color: var(--color-secondary-800);
}

.breadcrumb-item:before
{
  content: '/';
  padding: 0 var(--size-space-xxsmall);
  display: inline-block;
  color: var(--color-text-secondary);
}

.breadcrumb-item.relative-name:first-child:before
{
  display: none;
}

.namespace-box {
  background: var(--color-grey-very-light);
  font-size: var(--size-font-xsmall);
  padding: 0 var(--size-space-xsmall);
  margin-left: var(--size-space-large) !important;
  margin-right: var(--size-space-xxlarge) !important;
  border-radius: 1px;
}

.namespace-box /deep/ input {
  color: inherit
}

.namespace-box core-tooltip.icontooltip {
  margin-top: var(--size-space-xxsmall);
  align-self: center;
}

.namespace-box core-tooltip.nstooltip {
  width: 100%;
  margin-bottom: var(--size-space-xsmall);
}

.icon-group {
  white-space: nowrap;
}

.vertical-ruler {
  display: inline-block;
  width: 1px;
  background-color: var(--color-divider);
  margin:0 var(--size-space-xxsmall);
}

.icon-group paper-icon-button {
  vertical-align: middle;
  color: var(--color-text-secondary);
  padding: var(--size-space-xxsmall);
  margin:0 var(--size-space-xxsmall);
}

.icon-group paper-icon-button::shadow #ripple {
  color: var(--color-secondary-800);
}

.search-box {
  white-space: nowrap;
  width: var(--size-input-width-small);
  margin-left: var(--size-space-xxsmall);
}

.search-box core-tooltip {
  width: 100%;
}

.search-box .icon, .namespace-box .icon {
  /*align-self: flex-end;*/
  color: var(--color-text-secondary);
  margin-right: var(--size-space-xsmall);
}

.search-box .icon {
  margin-top: 4px;
}

.search-box .input {
  font-size: var(--size-font-xsmall);
}

/* Make space for the clear search icon */
.search-box .clear-search {
  margin-left: -25px;
}
.search-box paper-input::shadow /deep/ input {
  width: calc(100% - 25px);
}

.service-type-icon {
  transform: scale(0.7);
  padding-right: 0.75em;
}

.header-content {
  flex: 1;
}

paper-autocomplete {
  width: 100%;
}

paper-autocomplete::shadow #suggest-box {
  background-color: var(--color-grey-very-light);
}

paper-autocomplete::shadow #suggest-box {
  border: var(--border);
  box-shadow: var(--shadow-all-around);
}

/* Needed to have an extra class (.autocomplete) to have more CSS specificity
 * than the paper-autocomplete's default content style. */
paper-autocomplete.autocomplete paper-item.highlighted,
paper-autocomplete.autocomplete paper-item:hover {
  background-color: var(--color-bright);
}

paper-autocomplete.autocomplete paper-item {
  color: var(--color-text-primary);
}

paper-icon-button.selected,
paper-icon-button.selected:focus,
paper-icon-button.selected:hover {
  background-color: var(--color-button-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-all-around);
  border-radius: 999px; /* Any square with sufficiently rounded corner is indistinguishable from a circle */
}

.side-panel-toggle {
  position: absolute;
  z-index: 2;
  left: -18px;
  top: 28px;
  transform: scale(0.6);
  background-color: var(--color-button-secondary);
  color: var(--color-button-secondary-text);
}

.resize-handle {
  position: fixed;
  z-index: 1;
  left: -3px;
  width: 5px;
  height: 100000px;
  cursor: ew-resize;
}

.side-panel-toggle.collapsed {
  left: -24px;
}