@oslokommune/punkt-css/dist/css/elements/section.css

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

/*
 * Section elements
 *
 */
.pkt-section {
  margin: 1rem 0;
}

.pkt-section--dark {
  color: white;
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: #2a2859;
  /*
  @if luminance($backgroundColor) < 0.4 {
    color: white;

    a:not([class^='ok-btn']) {
      color: white;
      text-decoration: underline;
    }
  }
  */
}
@media screen and (min-width: 35.938rem) {
  .pkt-section--dark {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--dark {
    padding: 1.5rem;
  }
}
.pkt-section--dark a.pkt-btn--ter {
  color: white;
}

.pkt-section--danger {
  color: black;
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: #ff8274;
  /*
  @if luminance($backgroundColor) < 0.4 {
    color: white;

    a:not([class^='ok-btn']) {
      color: white;
      text-decoration: underline;
    }
  }
  */
}
@media screen and (min-width: 35.938rem) {
  .pkt-section--danger {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--danger {
    padding: 1.5rem;
  }
}
.pkt-section--danger a.pkt-btn--ter {
  color: black;
}

.pkt-section--gray,
.pkt-section--grey {
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: #f2f2f2;
  /*
  @if luminance($backgroundColor) < 0.4 {
    color: white;

    a:not([class^='ok-btn']) {
      color: white;
      text-decoration: underline;
    }
  }
  */
}
@media screen and (min-width: 35.938rem) {
  .pkt-section--gray,
  .pkt-section--grey {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--gray,
  .pkt-section--grey {
    padding: 1.5rem;
  }
}

.pkt-section--success {
  color: black;
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: #43f8b6;
  /*
  @if luminance($backgroundColor) < 0.4 {
    color: white;

    a:not([class^='ok-btn']) {
      color: white;
      text-decoration: underline;
    }
  }
  */
}
@media screen and (min-width: 35.938rem) {
  .pkt-section--success {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--success {
    padding: 1.5rem;
  }
}
.pkt-section--success a.pkt-btn--ter {
  color: black;
}

.pkt-section--warning {
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: #f9c66b;
  /*
  @if luminance($backgroundColor) < 0.4 {
    color: white;

    a:not([class^='ok-btn']) {
      color: white;
      text-decoration: underline;
    }
  }
  */
}
@media screen and (min-width: 35.938rem) {
  .pkt-section--warning {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--warning {
    padding: 1.5rem;
  }
}

.pkt-section--info {
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: #b3f5ff;
  /*
  @if luminance($backgroundColor) < 0.4 {
    color: white;

    a:not([class^='ok-btn']) {
      color: white;
      text-decoration: underline;
    }
  }
  */
}
@media screen and (min-width: 35.938rem) {
  .pkt-section--info {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--info {
    padding: 1.5rem;
  }
}
.pkt-section--info a.pkt-btn--ter {
  color: black;
}

.pkt-section--frame {
  border: 1px solid #2c2c2c;
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: white;
  /*
  @if luminance($backgroundColor) < 0.4 {
    color: white;

    a:not([class^='ok-btn']) {
      color: white;
      text-decoration: underline;
    }
  }
  */
}
@media screen and (min-width: 35.938rem) {
  .pkt-section--frame {
    padding: 1rem;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-section--frame {
    padding: 1.5rem;
  }
}

[class*=ok-section-] > [class^=ok-title-] {
  margin-top: 0;
}

.pkt-section--margin-top {
  margin-top: 2.5rem;
}