OCDE - Pattern Library v1.13.0

Tablerow: Default (Example) 

<div class="tablerow">
    <div class="tablerow-x-cell">
        <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
        <div class="tablerow-x-columns">
            <div class="tablerow-x-col1">
                <app-map>
                    <div id="tablerow-x-map1" class="tablerow-x-map"></div>
                </app-map>
            </div>
            <div class="tablerow-x-col2">
                <div class="tablerow-x-subsection">
                    <a class="tablerow-x-title" href="#">Anaheim High School</a>
                    <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                </div>
                <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
                <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
                <div class="tablerow-x-phone">714-559-7925</div>
            </div>
        </div>
    </div>
    <div class="tablerow-x-cell">
        <div class="tablerow-x-mobileheader">PATHWAY</div>
        <div class="tablerow-x-pathway">Service & Hospitality</div>
    </div>
    <div class="tablerow-x-cell">
        <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY</div>
        <div class="tablerow-x-studentcount">134</div>
    </div>
</div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<script>
    var mymap = L.map('tablerow-x-map1').setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(mymap);
</script>
 
<div class="tablerow{{#if modifier}} {{modifier}}{{/if}}">
  <div class="tablerow-x-cell">
    <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
    <div class="tablerow-x-columns">
      <div class="tablerow-x-col1">
        <app-map>
          <div id="tablerow-x-map1" class="tablerow-x-map"></div>
        </app-map>
      </div>
      <div class="tablerow-x-col2">
        <div class="tablerow-x-subsection">
          <a class="tablerow-x-title" href="#">Anaheim High School</a>
          <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
        </div>
        <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
        <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
        <div class="tablerow-x-phone">714-559-7925</div>
      </div>
    </div>
  </div>
  <div class="tablerow-x-cell">
    <div class="tablerow-x-mobileheader">PATHWAY</div>
    <div class="tablerow-x-pathway">Service & Hospitality</div>
  </div>
  <div class="tablerow-x-cell">
    <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY</div>
    <div class="tablerow-x-studentcount">134</div>
  </div>
</div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
        integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
        crossorigin=""></script>


<script>
  var mymap = L.map('tablerow-x-map1').setView([33.6412, -117.9188], 10);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
  }).addTo(mymap);

</script>
 
/* No context defined. */
  • Content: 
    .tablerow {
  // attributes
  // &::psuedo elements
  // elements
  // .module-x-selector
  // &:psuedo
  // &.module-is-state
  // @media selectors

  border-top: 2px solid rgba($color-interactive1, .08);
  padding: ($gridspacing * 3) 0;

  .tablerow-x-subsection {
    margin-bottom: $gridspacing * 2;
  }

  .tablerow-x-cell {
    &:not(:last-child) {
      margin-bottom: $gridspacing * 2;
    }
  }

  .tablerow-x-mobileheader {
    @include textstyle-smallbold;

    span {
      font-weight: normal;
    }
  }

  .tablerow-x-mobileheader1 {
    margin-bottom: $gridspacing / 2;
  }

  .tablerow-x-title {
    @include textstyle-h2-compact;
    color: $color-interactive1;

    &:hover {
      text-decoration: underline;
    }
  }

  .tablerow-x-address {
    color: $color-dark3;
  }

  .tablerow-x-name {
    color: $color-dark3;

    span {
      @include textstyle-small;
      margin-left: $gridspacing;
    }
  }

  .tablerow-x-link {
    color: $color-interactive1;
  }

  .tablerow-x-phone {
    color: $color-dark3;
  }

  .tablerow-x-pathway {
    color: $color-dark3;
  }

  .tablerow-x-studentcount {
    color: $color-dark3;
  }

  .tablerow-x-col1 {
    display: none;
  }

  .tablerow-x-map {
    border-radius: $border-radius;
    height: $gridspacing * 18;
    width: $gridspacing * 18;
    pointer-events: none;

    * {
      cursor: default;
    }
  }

  @media (min-width: $media-desktop) {

    border-top: none;
    display: table-row;
    padding: 0;

    .tablerow-x-mobileheader {
      display: none;
    }

    .tablerow-x-cell {
      border-top: 2px solid rgba($color-interactive1, .08);
      display: table-cell;
      padding: ($gridspacing * 2) 0;
      vertical-align: top;

      &:nth-child(2) {
        padding-right: $gridspacing * 2;
        padding-left: $gridspacing * 2;
      }
    }

    .tablerow-x-columns {
      display: flex;
    }

    .tablerow-x-col1 {
      display: block;
      margin-right: $gridspacing * 2;
    }
  }

  @media print {
    page-break-inside: avoid;
    width: 50%;

    a {
      color: $color-dark2 !important;
    }

    .tablerow-x-title {
      font-size: 20px;
    }
  }
}
  • URL: /components/raw/tablerow/_tablerow.scss
  • Filesystem Path: src/scss/02-modules/tablerow/_tablerow.scss
  • Size: 2.2 KB
  • Handle: @tablerow--defaultexample
  • Preview:
  • Filesystem Path: src/scss/02-modules/tablerow/tablerow--example.hbs

No notes defined.