WebCompDev / COMPONENTS

:host {
  background: #fafafa;
}

a {
  color: black;
  text-decoration: none;
}

#container {
  background: #fafafa;
}

.paper-header [paper-drawer-toggle] {
  margin-left: 10px;
}

.paper-header {
  @apply(--layout-horizontal);
  @apply(--layout-center);
}

.paper-header h2 {
  margin-left: 20px;
  @apply(--layout-flex);
}

.paper-header .toggleViewButton {
  --paper-icon-button-ink-color: transparent;
}

.paper-header .cartButton {
  margin-right: 10px;
}

#content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px;
}

app-bar .menu-icon {
  margin-right: 15px;
}

.elements-title h2 {
  @apply(--paper-font-title);
  color: #424242;
}

.elements-title iron-icon, .elements-title cart-icon {
  cursor: pointer;
  margin-left: 16px;
}

.elements-title > [paper-drawer-toggle] {
  margin: 0 16px 0 0;
}

#package-heading .description {
  font-size: 16px;
  color: var(--paper-grey-600);
}

#element-cards, element-table, 
.elements-title, #package-heading {
  max-width: 920px;
  margin: 20px auto;
}

#package-heading {
  margin: 0px auto 16px;
}

[size=xs] > * {
  display: none;
}

responsive-element[size=xs].layout {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

[size=xs] app-sidebar {
  min-width: 100%;
  height: auto;
}

[size=xs] app-sidebar paper-toolbar /deep/ #topBar {
  padding: 0 16px;
}

app-sidebar paper-toolbar {
  --paper-toolbar-background: white;
  --paper-toolbar: {
    box-sizing: border-box;
  }
}

#package-tag {
  display: none;
}

#package-info {
  position: relative;
}

#package-header {
  position: relative;
  padding: 16px 24px 0 24px;
  overflow: hidden;
}

#package-header iron-icon {
  cursor: pointer;
}

#package-header package-symbol {
  display: inline-block;
  margin: 0;
  transform: translate(-50px, 0);
  opacity: 0;
  transition: var(--material-curve-320);
}

#package-title {
  @apply(--paper-font-title);
  margin: 0 0 20px;
  transform: translate(-50px, 0);
  opacity: 0;
  transition: var(--material-curve-320);
}

#package-tagline {
  margin: 0;
  padding-right: 80px;
  transform: translate(-50px, 0);
  opacity: 0;
  transition: var(--material-curve-320);
  font-size: 13px;
  line-height: 20px;
}

#package-version {
  position: absolute;
  top: 24px;
  right: 16px;
  transform: translate(50px, 0);
  opacity: 0;
  transition: var(--material-curve-320);
}

#package-desc {
  margin: 0;
}

[size=xs] #package-title {
  margin-bottom: 0;
}

[size=xs] #package-tagline {
  display: none;
}

[size=xs] #package-tagline {
  margin-top: 0;
}

.active #package-header package-symbol,
.active #package-title,
.active #package-tagline {
  transform: translate(0, 0);
  opacity: 1;
}

.active #package-version {
  transform: translate(0, 0);
  opacity: 0.6;
}

#search {
  height: 48px;
  line-height: 48px;
  margin-bottom: 12px;
  position: relative;
}

#search iron-icon {
  margin-left: 16px;
  margin-right: 8px;
  position: absolute;
  top: 12px;
  left: 2px;
}

#search input {
  height: 46px;
  -webkit-appearance: none;
  line-height: 46px;
  border: 0;
  margin: 0;
  padding-left: 50px;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  @apply(--paper-font-body1);
}

#search input:focus {
  outline: 0;
  background-color: #eceff1;
  border-color: #cfd8dc;
}

#search input::-webkit-search-cancel-button{
  position: relative;
  right: 15px;
}

#package-list {
  padding: 0 0 10px;
}

#package-list h5 {
  margin: 10px 0;
  padding: 0 16px;
  color: rgba(0,0,0,.54);
  font-weight: 500;
}

#package-list .package {
  display: block;
  padding: 9px 16px;
  font-weight: 500;
  color: rgba(0,0,0,.87);
  text-transform: none;
  cursor: pointer;
  border-width: 1px 0;
}

#package-list .package[active] {
  background: var(--paper-blue-grey-50);
}

#package-list .package .all-symbol {
  padding: 5px;
}

#package-list .package package-symbol, #package-list .package .all-symbol {
  margin-right: 15px;
}

#current-tag {
  background: #2196F3;
  color: rgba(255,255,255,0.87);
  padding: 12px;
  font-size: 16px;
}

#current-tag b {
  margin-right: 6px;
}

#current-tag span {
  text-transform: uppercase;
}

.tags tag-link:last-of-type + span {
  display: none;
}

[view=cards] element-table {
  display: none;
}

[view=table] #element-cards {
  display: none;
}