src/components/common-style/card.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. */

@import "common-style/theme.css";
@import "common-style/sizes.css";

.item.card {
  box-sizing: border-box;
  background-color: var(--color-white);
  display: flex;
  flex-shrink: 1;
  flex-grow: 1;
  height: 2.5em;
  min-width: 15em;
  width: 30%;
  margin: 0.375em 0.75em;
  border-radius: 3px;
  position: relative;
  box-shadow: var(--shadow-all-around);
  border: var(--border);
}
.item .label, .item .drill {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.5em;
}
.item .label {
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.item .drill {
  width: 1.5em;
  background-color: var(--color-icon-button);
  border-left: var(--border);
}

.item.selected .drill {
  background-color: var(--color-bright);
}

.item.card .action-icon {
  align-self: center;
  padding-right: 0.5em;
}

.item.selected.card .action-icon {
  color: var(--color-text-primary-invert);
}

.item.selected.card {
  background-color: var(--color-bright);
  color: var(--color-text-primary-invert);
}

.item.selected.card .drill {
  border-color: var(--color-text-hint);
}

.item.card a:hover, .item.card .action-bar:hover paper-fab::shadow #icon {
  opacity: 0.7;
}

.item.card .action-bar {
  position: absolute;
  top: -10px;
  right: -10px;
  visibility: hidden;
  transition: visibility 0s;
}

.item.card .action-bar paper-fab {
  height: 20px;
  width: 20px;
  padding: 3px;
  background: var(--color-button-primary);
}

.item.card .action-bar paper-fab::shadow #icon {
  height: 14px;
  width: 14px;
  color: var(--color-button-primary-text);
}

.item.card:hover .action-bar, .item.selected.card .action-bar,
.item.card:focus .action-bar {
  visibility: visible;
  transition-delay: 0.5s; /* show after a short delay */
}