18F/18f.gsa.gov

// Layout
// ==========================

// Remove top margins from first item and bottom margins from last item
.usa-section,
.usa-grid,
.usa-width-one-whole,
.usa-width-one-half,
.usa-width-one-third,
.usa-width-two-thirds,
.usa-width-one-fourth,
.usa-width-three-fourths,
.usa-width-one-sixth,
.usa-width-five-sixths,
.usa-width-one-twelfth {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    &:first-child {
      margin-top: 0;
    }

    &:last-child:not(:only-child) {
      margin-bottom: 0;
    }
  }
}

.usa-grid-line {
  height: 1px;
}

.usa-grid-line-hww {
  border-top: 0.5rem solid;
  border-color: $color-medium;
  margin-top: $section-margins;
}

.usa-flex-baseline {
  align-items: baseline;
}

.usa-flex-end {
  align-items: flex-end;
}

.usa-spacer {
  margin-bottom: $theme-site-margins-width;

  > * {
    margin-bottom: $spacer-margins;
  }
}

.usa-flex-pull-right {
  > *:first-child {
    flex-grow: 1;
  }

  > *:last-child {
    margin-left: 0;
    min-width: 200px;
    text-align: left;
  }
}

.usa-flex-always {
  display: flex;
}

@include at-media('tablet') {
  .usa-flex {
    display: flex;
  }

  .usa-flex-wrap {
    flex-wrap: wrap;
  }

  .usa-flex-vertically-top {
    margin-bottom: $section-margins;
  }

  .usa-flex-pull-right {
    > *:last-child {
      float: right;
      margin-left: $theme-site-margins-width;
      text-align: right;
    }
  }

  .usa-flex-vertically-top {
    align-self: flex-start;
    flex-direction: column;
  }

  .usa-flex-vertically-bottom {
    align-self: flex-end;
    flex-direction: column;
  }
}

.usa-section {
  @include u-padding-y($theme-site-margins-width);

  @include at-media('tablet') {
    @include u-padding-y($section-margins);
  }

  .page-lead {
    margin-top: 0;
  }
}

.usa-section-bottom {
  @include u-padding-right($theme-site-margins-width);

  @include at-media('tablet') {
    @include u-padding-right($section-margins);
  }
}

.background-gray {
  background-color: color('gray-cool-5');
}

.background-medium {
  background-color: $color-medium;
}

.background-dark {
  background-color: $color-dark;
}

.background-medium,
.background-dark {
  color: color('white');
  -webkit-font-smoothing: antialiased;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    color: color('white');
  }

  .section-heading {
    color: $color-bright;
    letter-spacing: 0.5px;
  }

  h2 {
    letter-spacing: 0.5px;
    margin-bottom: 2rem;
  }

  a
   {
    color: $color-bright;

    &:hover {
      color: $color-bright-hover;
    }
  }

  .usa-search.usa-search-small [type="submit"] {
    background-image: url("../img/global/search-dark.png");
    background-image: url("../img/global/search-dark.svg");
  }

  input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="file"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  textarea,
  select {
    border-color: color('white');
  }
}

.header_border,
.single-post {
  header[role=banner] {
    border-bottom: 1px solid color('gray-cool-10');
  }
}

// Dark blue page intros
.section-intro {
  .section-heading {
    margin-bottom: 0;
  }

  .section-heading-alt {
    font-size: $h3-font-size;
  }

  h2 {
    display: inline;
    font-size: $h2-font-size;
    font-weight: $theme-font-weight-bold;
  }
}

.section-intro-header {
  max-width: 81.2rem; // Width of 10 columns

  @include at-media('tablet') {
    @include grid-col(9);
  }
}

// A list of sections separated with a light border
.section-list {
  border-bottom: $border-light;

  ul {
    margin-bottom: 0;
  }
}

.content-focus {
  @include u-margin-y(0);
  @include u-margin-x(auto);
  max-width: 64.063rem; // 8 column width at full screen
}

.usa-grid {
  &.content-focus {
    max-width: 70.563rem; // 64.063rem + 6rem (site margins)
  }
}

.content-focus.content-wide {
  max-width: $theme-site-max-width;
}