@oslokommune/punkt-css/dist/css/components/breadcrumbs.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

/* 
 * Breadcrumbs component
 */
.pkt-breadcrumbs {
  position: relative;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.pkt-breadcrumbs__list {
  display: flex;
  flex-direction: column;
  height: auto;
  list-style-type: none;
  border-bottom: 1px solid transparent;
  transition: all 0.4s ease-in-out;
}
@media screen and (min-width: 35.938rem) {
  .pkt-breadcrumbs__list {
    flex-direction: row;
    border-bottom-color: transparent !important;
  }
}
.pkt-breadcrumbs__item {
  position: relative;
  display: none;
  width: 100%;
  text-decoration: underline;
}
@media screen and (min-width: 35.938rem) {
  .pkt-breadcrumbs__item {
    display: block;
    width: auto;
  }
}
.pkt-breadcrumbs__item:last-child {
  display: block;
  text-decoration: none;
}
@media screen and (min-width: 48rem) {
  .pkt-breadcrumbs__item:last-child {
    max-width: 300px;
  }
}
.pkt-breadcrumbs__item:last-child .pkt-breadcrumbs__text {
  max-width: 200px;
}
.pkt-breadcrumbs__label {
  display: flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}
.pkt-breadcrumbs__text {
  display: block;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 300;
}
@media screen and (min-width: 35.938rem) {
  .pkt-breadcrumbs__text {
    max-width: 120px;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-breadcrumbs__text {
    max-width: 200px;
  }
}
@media screen and (min-width: 64rem) {
  .pkt-breadcrumbs__text {
    max-width: 300px;
  }
}
.pkt-breadcrumbs__icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
}
.pkt-breadcrumbs--desktop {
  display: none !important;
}
@media screen and (min-width: 35.938rem) {
  .pkt-breadcrumbs--desktop {
    display: inline-flex !important;
  }
}
.pkt-breadcrumbs--mobile {
  display: inline-flex !important;
}
@media screen and (min-width: 35.938rem) {
  .pkt-breadcrumbs--mobile {
    display: none !important;
  }
}