<table class="Table Table--flippable Table--withBorder js-tableFlip u-text-r-xs">
    <caption class="u-hiddenVisually">est sunt est</caption>
    <thead>
        <tr class="">
            <th>Tab. 1</th>
            <th>Tab. 2</th>
            <th>Tab. 3</th>
            <th>Tab. 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
        </tr>
        <tr>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
        </tr>
        <tr>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
        </tr>
        <tr>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
            <td>Veniam amet officia aliquip sunt pariatur sit ea laboris duis laboris adipisicing cupidatat.</td>
        </tr>
    </tbody>
</table>
  • Content:
    /** @define Table; */
    
    /*
     *	Fork of suitcss-component-table:
     *
     * 		https://github.com/trunkclub/suitcss-components-table
     * 		Copyright (c) 2014 Trunk Club
     *
     *  alas, not included in npm registry.
     *
     */
    
    /** @define Table; weak; */
    
    :root {
      --Table-border-color: #d6dce3;
      --Table-cell-pad-h: 0.5em;
      --Table-cell-pad-v: 1em;
      --Table-hover-color: #e5f1fa;
      --Table-stripe-color: #f6f7f9;
    }
    
    .Table {
      border: 0;
      border-collapse: collapse;
      max-width: 100%;
      width: 100%;
    }
    
    /*
     *  [1] Don't extend utility class to make it overridable
     */
    
    .Table td,
    .Table th {
      @extend .u-padding-r-all;
    
      text-align: left; /* 1 */
    }
    
    .Table--fixed {
      table-layout: fixed;
    }
    
    /* Hover row modifiers
       ========================================================================== */
    
    .Table--hover > tbody > tr:hover > th,
    .Table--hover > tbody > tr:hover > td {
      background-color: var(--Table-hover-color);
    }
    
    /* Striped row modifiers
       ========================================================================== */
    
    /**
     * Remove top borders on all cells.
     */
    
    .Table--striped th,
    .Table--striped td {
      border-top: 0;
    }
    
    .Table--striped tbody tr:nth-child(odd) {
      background-color: var(--Table-stripe-color);
    }
    
    /* Border modifiers
       ========================================================================== */
    
    /**
     * Add border around table
     */
    
    .Table--withBorder tr {
      border-bottom: 1px var(--Table-border-color) solid;
    }
    
    .Table--withBorder th,
    .Table--withBorder td {
      border-top: 1px var(--Table-border-color) solid;
    }
    
    .Table--withBorder thead tr:first-child th,
    .Table--withBorder thead tr:first-child td {
      border-top: 0;
    }
    
    /* Compact layout modifier
       ========================================================================== */
    
    /**
     * Reduce vertical padding to match horizontal
     */
    
    .Table--compact td,
    .Table--compact th {
      padding: var(--Table-cell-pad-h);
    }
    
    /* Responsive layout modifier
     * 	http://dbushell.com/2016/03/04/css-only-responsive-tables/
       ========================================================================== */
    
    .Table--responsive {
    
      /*
       * IE needs inline-block to position scrolling shadows otherwise use:
       * display: block;
       * max-width: min-content;
      */
      border-collapse: collapse;
      border-spacing: 0;
      display: inline-block;
      max-width: 100%;
      overflow-x: auto;
      vertical-align: top;
    
      /* optional - looks better for small cell values */
      white-space: nowrap;
      width: auto;
    }
    
    .Table--responsive,
    .Table--flip tbody {
    
      /* scrolling shadows */
      background:
        radial-gradient(
          left,
          ellipse,
          rgba(0, 0, 0, 0.2) 0%,
          rgba(0, 0, 0, 0) 75%
        ) 0 center,
        radial-gradient(
          right,
          ellipse,
          rgba(0, 0, 0, 0.2) 0%,
          rgba(0, 0, 0, 0) 75%
        ) 100% center;
      background-attachment: scroll, scroll;
      background-repeat: no-repeat;
      background-size: 10px 100%, 10px 100%;
    
      /* optional - enable iOS momentum scrolling */
      -webkit-overflow-scrolling: touch;
    }
    
    .Table--responsive td:first-child,
    .Table--flip tbody tr:first-child {
      background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
      background-repeat: no-repeat;
      background-size: 20px 100%;
    }
    
    .Table--responsive td:last-child,
    .Table--flip tbody tr:last-child {
      background-image: linear-gradient(to left, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
      background-position: 100% 0;
      background-repeat: no-repeat;
      background-size: 20px 100%;
    }
    
    .Table--flip {
      background: none;
      display: flex;
      overflow: hidden;
    }
    
    .Table--flip > thead {
      display: flex;
      flex-shrink: 0;
      min-width: min-content;
    }
    
    .Table--flip > tbody {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
    }
    
    .Table--flip > tbody > tr {
      border-right: 1px solid var(--Table-border-color);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      min-width: min-content;
    }
    
    .Table--flip td,
    .Table--flip th {
      display: block;
    }
    
    .Table--flip td {
      background-image: none !important;
    }
    
    /* @FIXME */
    
    .Table--flip th {
      border-bottom: 0 !important;
      border-top: 1px solid var(--Table-border-color) !important;
    }
    
  • URL: /components/raw/table/index.css
  • Filesystem Path: src/components/table/index.css
  • Size: 4.2 KB
  • Content:
    import $ from 'jquery'
    import debounce from 'throttle-debounce/throttle'
    
    const defaultOpts = {
      responsiveTableSelector: '.js-tableFlip',
      responsiveTableClass: 'Table--flip',
      responsiveTableBreakpoint: 768,
    }
    
    const initResponsiveTables = function(opts) {
      $(document).ready(function() {
        if ($(opts.responsiveTableSelector).length > 0) {
          $(window).resize(debounce(250, function() {
            if ($(window).width() < opts.responsiveTableBreakpoint) {
              $(opts.responsiveTableSelector).addClass(opts.responsiveTableClass)
            } else {
              $(opts.responsiveTableSelector).removeClass(opts.responsiveTableClass)
            }
          }))
        }
      })
    }
    
    initResponsiveTables(defaultOpts)
    
    export default { defaultOpts, initResponsiveTables }
    
  • URL: /components/raw/table/index.js
  • Filesystem Path: src/components/table/index.js
  • Size: 763 Bytes

There are no notes for this item.