OCDE - Pattern Library v1.13.0

Distance Filter: Example 

<div class="distance-filter">
    <form class="distance-filter-x-form">
        <legend class="distance-filter-x-legend">Find Nearby Programs</legend>

        <div class="distance-filter-x-use-location">
            <button class="button button-secondary" type="button">Use My Location</button>
        </div>

        <div class="distance-filter-x-location">
            <div class="forminput forminput-is-error">
                <div class="u-display-flex u-flex-justify-content-between u-flex-align-items-baseline">
                    <label class="forminput-x-label" for="location">Or, enter city or ZIP Code in California</label>
                </div>
                <div class="forminput-x-input">
                    <input type="text" id="location" placeholder="Zip Code">
                    <div class="distance-filter-x-clear">
                        <button class="button button-secondary" type="button">Clear</button>
                    </div>
                </div>
                <p class="forminput-x-error">Please enter a zip code within California.</p>
            </div>
        </div>

        <div class="distance-filter-x-distance">
            <div class="forminput forminput-select-inline">
                <div class="u-display-flex u-flex-justify-content-between u-flex-align-items-baseline">
                    <label class="forminput-x-label" for="distance">Within</label>
                </div>
                <div class="forminput-x-input">
                    <select id="distance">
                        <option>10</option>
                        <option>25</option>
                        <option>50</option>
                        <option selected>75</option>
                        <option>100</option>
                    </select>
                    <svg aria-hidden="true">
                        <use xlink:href="#icon-triangle-down"></use>
                    </svg>
                </div>
            </div>
        </div>

        <div class="distance-filter-x-submit">
            <button class="button" type="submit">Apply</button>
        </div>

        <div class="distance-filter-x-success">
            <svg class="distance-filter-x-successicon">
                <use xlink:href="#icon-success"></use>
            </svg>
        </div>
    </form>
</div>
 
<div class="distance-filter">
  <form class="distance-filter-x-form">
    <legend class="distance-filter-x-legend">Find Nearby Programs</legend>

    <div class="distance-filter-x-use-location">
      <button class="button button-secondary" type="button">Use My Location</button>
    </div>

    <div class="distance-filter-x-location">
      <div class="forminput forminput-is-error">
        <div class="u-display-flex u-flex-justify-content-between u-flex-align-items-baseline">
          <label class="forminput-x-label" for="location">Or, enter city or ZIP Code in California</label>
        </div>
        <div class="forminput-x-input">
          <input type="text" id="location" placeholder="Zip Code">
          <div class="distance-filter-x-clear">
            <button class="button button-secondary" type="button">Clear</button>
          </div>
        </div>
        <p class="forminput-x-error">Please enter a zip code within California.</p>
      </div>
    </div>


    <div class="distance-filter-x-distance">
      {{render '@forminput--select-inline'}}
    </div>

    <div class="distance-filter-x-submit">
      <button class="button" type="submit">Apply</button>
    </div>

    <div class="distance-filter-x-success">
      <svg class="distance-filter-x-successicon"><use xlink:href="#icon-success"></use></svg>
    </div>
  </form>
</div>
 
/* No context defined. */
  • Content: 
    .distance-filter {
  background-color: $color-light2;
  border-top: 1px solid #e2e8fa;
  box-shadow: 0 4px 4px -2px rgba($color-dark2, 0.2);
  padding: ($gridspacing * 2) ($gridspacing * 3) ($gridspacing * 4);
  // allows the box-shadow to not be gobbled by overflow: hidden on parent
  position: relative;
  z-index: 1;

  @media (min-width: $media-desktop) {
    height: $height-distance-filter;
    padding: ($gridspacing * 2) ($gridspacing * 3) $gridspacing;
  }

  &-x-form {
    display: flex;
    flex-direction: column;
    gap: $gridspacing * 2;
    justify-content: flex-start;
    width: 100%;

    @media (min-width: $media-desktop) {
      align-items: center;
      flex-direction: row;
      gap: $gridspacing * 3;
    }

    .forminput {
      position: relative;

      .forminput-x-input {
        min-width: 12rem;

        & > input,
        & > select {
          background-color: $color-light1;
          border: 1px solid $color-dark4;
        }
      }
    }
  }

  &-x-location {
    padding-bottom: $gridspacing * 2;

    @media (min-width: $media-desktop) {
      padding-bottom: 0;
    }

    .forminput-x-input {
      align-items: center;
      display: flex;
      gap: $gridspacing;
      justify-content: flex-start;
    }
  }

  &-x-legend {
    @include textstyle-bodylargebold;
  }

  &-x-clear,
  &-x-use-location {
    & > .button {
      padding: 0;
    }
  }

  &-x-expand-button {
    @include textstyle-small;
    color: $color-interactive1;
    display: flex;
    align-items: center;
    margin-bottom: $gridspacing * 2;
  }

  &-x-filter-icon {
    fill: $color-interactive1;
    height: 15px;
    width: 16px;
    margin-right: 4px;
  }

  &-x-submit {
    text-align: right;

    button {
      display: block;
      width: 100%;

      @media (min-width: $media-tablet) {
        display: inline-block;
        transform: translateY($gridspacing);
        width: auto;
      }
    }
  }

  &-x-successicon {
    display: none;

    @media (min-width: $media-desktop) {
      display: inline-block;
      height: 32px;
      transform: translateY($gridspacing);
      width: 32px;
    }
  }

  .forminput-x-error {
    padding-top: $gridspacing / 2;
    position: absolute;
    top: 100%;
    left: 0;
  }
}
  • URL: /components/raw/distancefilter/_distance-filter.scss
  • Filesystem Path: src/scss/02-modules/distancefilter/_distance-filter.scss
  • Size: 2.3 KB

No notes defined.