content/static/css/unit_meta.css

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

.UnitMeta {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  position: relative;
}
@media screen and (max-width: 51.9375rem), (min-width: 64rem) {
  .UnitMeta > div {
    padding-bottom: 0.75rem;
  }
  .UnitMeta > h2 {
    padding-bottom: 0.5rem;
  }
}
@media only screen and (min-width: 52rem) and (max-width: 63.9375rem) {
  .UnitMeta {
    align-items: baseline;
    display: grid;
    gap: 0.5rem 2.5rem;
    grid-auto-columns: auto 1fr auto;
    grid-template-areas:
      'a b c'
      'd e .'
      'f g .';
    justify-content: space-between;
    position: initial;
    word-break: break-word;
  }
  .UnitMeta-detailsTitle {
    grid-area: a;
  }
  .UnitMeta-details {
    grid-area: b;
  }
  .UnitMeta-learn {
    grid-area: c;
    position: initial;
    text-align: right;
  }
  .UnitMeta-repoTitle {
    grid-area: d;
  }
  .UnitMeta-repo {
    grid-area: e;
  }
  .UnitMeta-linksTitle {
    grid-area: f;
  }
  .UnitMeta-links {
    grid-area: g;
  }
}
.UnitMeta-learn {
  font-size: 0.875rem;
  position: absolute;
  right: 1rem;
}
@media only screen and (min-width: 52rem) and (max-width: 63.9375rem) {
  .UnitMeta-learn {
    padding-top: 0.25rem;
  }
}
.UnitMeta-repo a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.UnitMeta-detailsTitle,
.UnitMeta-linksTitle,
.UnitMeta-repoTitle {
  font-size: 1rem;
  margin: 0;
  white-space: nowrap;
}
.UnitMeta-links,
.UnitMeta-repo {
  width: 100%;
}
.UnitMeta-details ul,
.UnitMeta-links ul,
.UnitMeta-repo {
  color: var(--gray-4);
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  line-height: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 100%;
}
@media only screen and (min-width: 52rem) and (max-width: 63.9375rem) {
  .UnitMeta-details ul,
  .UnitMeta-links ul,
  .UnitMeta-repo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.125rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }
}
.UnitMeta-details li,
.UnitMeta-links li {
  overflow: hidden;
  padding-right: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.UnitMetaDetails-icon {
  height: auto;
  margin-right: 0.25rem;
  position: relative;
  top: 0.125rem;
  width: 0.875rem;
  z-index: -1;
}
.UnitMetaDetails-toggletip button {
  background: none;
  border: none;
  cursor: pointer;
  width: 1.625rem;
}
.UnitMetaDetails-toggletip [role='status'] {
  height: 0;
  position: absolute;
  width: 0;
}
.UnitMetaDetails-toggletipBubble {
  background: var(--white) 80%;
  border: 0.0625rem solid var(--gray-8);
  border-radius: 0.25rem;
  display: block;
  font-size: 0.75rem;
  left: -6rem;
  letter-spacing: 0.01875rem;
  line-height: 1rem;
  padding: 0.5rem;
  position: relative;
  top: 1.5rem;
  white-space: initial;
  width: 12rem;
}
@media only screen and (min-width: 64rem) {
  .UnitMetaDetails-toggletipBubble {
    left: -12rem;
  }
}
@media only screen and (min-width: 70rem) {
  .UnitMetaDetails-toggletipBubble {
    left: -12rem;
  }
}
@media only screen and (min-width: 82rem) {
  .UnitMetaDetails-toggletipBubble {
    left: -8rem;
  }
}