OCDE - Pattern Library v1.13.0

Mobile Map Pane: Empty (Example) 

<div class="mobilemappane mobilemappane-college ">

    <div class="brandvoice brandvoice-sidebar">
        <h3>Hospitality, Tourism, and Recreation</h3>
    </div>

    <div class="mobilemappane-x-empty sidebar-x-empty">
        <div class="sidebar-x-emptytext1 mobilemappane-x-emptytext1 l-flex">
            <img src="../../assets/images/thinking-face.png" alt="thinking face">
            <div class="sidebar-x-emptybody">
                <p>
                    <strong>
                        No results found for this location. Try searching in a wider area.
                    </strong>
                </p>
                <p>
                    Program Finder currently doesn’t cover every county, but we’re expanding across California! If you don’t see results for your area, check back soon.
                </p>
            </div>
        </div>
    </div>

</div>
 
<div class="{{render '@mobilemappane--college'}}">

  <div class="{{render '@brandvoice--sidebar'}}">
    <h3>Hospitality, Tourism, and Recreation</h3>
  </div>

  <div class="mobilemappane-x-empty sidebar-x-empty">
    <div class="sidebar-x-emptytext1 mobilemappane-x-emptytext1 l-flex">
      <img src="{{path '/assets/images/thinking-face.png'}}" alt="thinking face">
      <div class="sidebar-x-emptybody">
        <p>
          <strong>
            No results found for this location. Try searching in a wider area.
          </strong>
        </p>
        <p>
          Program Finder currently doesn’t cover every county, but we’re expanding across California! If you don’t see results for your area, check back soon.
        </p>
      </div>
    </div>
  </div>

</div>
 
/* No context defined. */
  • Content: 
    .mobilemappane {
  background-color: $color-light1;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  overflow: hidden;

  .mobilemappane-x-select {
    margin-bottom: $gridspacing * 3;
    padding: 0 $gridspacing;
  }

  .mobilemappane-x-heading {
    // This was moved to the container so the box-shadow doesnt get cut off.
    // margin-bottom: $gridspacing;
    padding: 0 ($gridspacing * 2.5);
  }

  .mobilemappane-x-map {
    pointer-events: none;
  }

  .mobilemappane-x-empty {
    padding: ($gridspacing * 2) ($gridspacing * 3) ($gridspacing * 6);
  }

  .mobilemappane-x-emptytext1 {
    gap: 1rem;

    img {
      height: $gridspacing * 3;
      position: relative;
      top: $gridspacing;
      width: $gridspacing * 3;
    }

    .sidebar-x-emptybody > * + * {
      margin-top: $gridspacing;
    }
  }

  .sidebar-x-emptybacklink {
    display: inline-block;
    margin-top: $gridspacing;
  }
}
  • URL: /components/raw/mobilemappane/_mobilemappane.scss
  • Filesystem Path: src/scss/02-modules/mobilemappane/_mobilemappane.scss
  • Size: 948 Bytes

No notes defined.