material design theme

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script nonce="undefined" src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    * {
      --md-red: #f44336;
      --md-orange: #ff9800;
      --md-yellow: #ffeb3b;
      --md-green: #4caf50;
      --md-blue: #2196f3;
      --md-purple: #673ab7;
      --md-indigo: #3f51b5;
      --md-black: #000;
      --md-white: #FFF;
      font-family: 'Roboto', sans-serif;


      /* BOOTSTRAP COLORS*/
      /* Bootstrap 4 has some css variables exposes, mostly colors. */

      /* RE-USABLE ZINGGRID VARS
  ----------------------------------------------------- */
      /* BACKGROUND */
      --theme-background-color: var(--mdc-theme-background);
      --theme-background-zebra: var(--light);

      /* BORDER */
      --theme-border-color_alt: var(--light);
      --theme-border-color_alt2: var(--secondary);
      --zg-button-focus: var(--light);

      /* COLOR */
      --theme-color-primary: var(--md-indigo);

      /* FONT */
      --zg-caption-color: var(--md-black);
      --theme-font-family: initial;

      --theme-padding_x: 2rem;
      --theme-padding_y: 0.75rem;

      /* -------------------------------------------------- */


      /* ZG-GRID
  ----------------------------------------------------- */
      /* padding: var(--theme-padding_x) var(--theme-padding_y); */
      /* box-sizing: border-box; */
      --zing-grid-box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);

      /* ZG-BODY
  ----------------------------------------------------- */
      --zg-body-background: var(--white);
      --zg-body-card-background: transparent;

      /* Hover */
      --zg-row-body-color_even_hover: var(--zg-row-body-color);
      --zg-row-body-color_odd_hover: var(--zg-row-body-color);


      /* ZG-BUTTON
  ----------------------------------------------------- */
      --zg-button-opacity_disabled: .5;


      /* ZG-BUTTON-CUSTOM
  ----------------------------------------------------- */
      --zg-button-background_custom: var(--theme-color-primary);
      --zg-button-color: var(--white);
      --zg-button-border_custom: none;
      --zg-button-box-shadow_custom: none;
      --zg-button-border_custom_hover: none;
      --zg-button-background_custom_hover: #0069d9;

      /* ZG-CAPTION
  ----------------------------------------------------- */
      --zg-caption-background: var(--md-white);
      --zg-caption-border-bottom: 0;
      --zg-caption-color: var(--md-black);
      --zg-caption-icon-color: var(--md-black);

      /* ZG-CELL
  ----------------------------------------------------- */
      --zg-cell-background_sorted: rgba(62, 117, 167, .2);

      /* ZG-CONTROL-BAR
  ----------------------------------------------------- */
      --zg-control-bar-background: var(--md-white);
      --zg-control-bar-border-bottom: 0;


      /* ZG-EDITOR_ROW
  ----------------------------------------------------- */
      --zg-editor-row-input-background: var(--md-white);
      --zg-editor-row-input-color: var(--md-white);
      --zg-editor-row-input-background_focus: #00203d;
      --zg-editor-row-input-box-shadow_focus: none;

      /* ZG-FILTER
  ----------------------------------------------------- */

      --zg-filter-background: var(--light);
      --zg-filter-background_sorted: rgba(62, 117, 167, .2);
      --zg-filter-border: none;

      /* Input */
      --zg-filter-input-height: calc(1.5em + .75rem + 2px);
      --zg-filter-input-padding: .375rem .75rem .375rem .375rem;
      --zg-filter-input-border-radius: .25rem;
      --zg-filter-input-border: 1px solid #ced4da;
      --zg-filter-input-background: var(--md-white);
      --zg-filter-input-border-width: 1px;
      --zg-filter-input-margin: .375rem;


      /* ZG-FOCUS
  ----------------------------------------------------- */
      --zg-focus-border: 1px solid #80bdff;
      --zg-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
      --zg-focus-outline: 0;

      --zg-focus-bottom-transform: translateY(1px);
      --zg-focus-right-transform: translateX(1px);

      /* ZG-HEAD
  ----------------------------------------------------- */
      --zg-head-background: var(--md-white);


      /* ZG-MENUITEM
  ----------------------------------------------------- */
      --zg-menu-background: var(--md-black);

      /* ZG-INPUT
  ----------------------------------------------------- */
      --zg-input-color: #00549c;
      ;
      --zg-input-border-bottom: 1px solid var(--theme-border-color_alt);
      --zg-input-border-left: 1px solid var(--theme-border-color_alt);
      --zg-input-border-right: 1px solid var(--theme-border-color_alt);
      --zg-input-border-top: 1px solid var(--theme-border-color_alt);

      /* ZG-PAGER
  ----------------------------------------------------- */
      --zg-pager-background: transparent;
      --zg-pager-border-top: 0;
      --zg-pager-card-nonmobile-border-top: 1px solid var(--theme-background-color);
      --zg-pager-color: var(--zg-head-cell-color);

      /* ZG-ROW
  ----------------------------------------------------- */
      --zg-row-border: 1px solid var(--grey);

      /* Card */
      --zg-row-card-background: var(--zg-body-background);

      /* ZG-SOURCE
  ----------------------------------------------------- */
      --zg-source-background: #fbfbfb;
      --zg-source-border-bottom_top: 1px solid #f4f4f4;
      --zg-source-border-top_top: 1px solid #f4f4f4;
      --zg-source-border-top_bottom: 1px solid #f4f4f4;
      --zg-source-color: var(--theme-color-primary);

      /* ZG-WATERMARK
  ----------------------------------------------------- */
      --zg-watermark-background: transparent;
      --zg-watermark-border-bottom: 0;
      --zg-watermark-border-left: 0;
      --zg-watermark-border-right: 0;
      --zg-watermark-border-top: 0;
      --zg-watermark-font-size: 10px;
      --zg-watermark-padding: 0 var(--theme-padding_x);
    }

    .chip-primary {
      background: var(--md-indigo);
    }

    .chip-secondary {
      background: var(--md-gray);
    }

    .chip-success {
      background: var(--md-green);
    }

    .chip-danger {
      background: var(--md-red);
    }

    .chip-warning {
      background: var(--md-yellow);
    }

    .progress-wrapper {
      width: 200px;
    }

    .mdc-linear-progress__buffer-bar {
      height: 3px;
    }

    .mdc-linear-progress__buffer-dots {
      height: 3px;
    }

    zing-grid[loading] {
      height: 472px;
    }
  </style>
</head>

<body class="zg-body">
  <!-- Most features can be toggled on the toplevel zing-grid tag -->
  <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting data='[
        {
          "first": "Mark",
          "last": "Otto",
          "username": "@ZTfer",
          "category": "primary",
          "progress": "12"
        },
        {
          "first": "Jacob",
          "last": "Thorton",
          "username": "@jacobthorton",
          "category": "secondary",
          "progress": "62"
        },
        {
          "first": "Duncan",
          "last": "Mattheson",
          "username": "@dmattheson",
          "category": "danger",
          "progress": "84"
        },
        {
          "first": "David",
          "last": "Jose Perez",
          "username": "@djp",
          "category": "info",
          "progress": "45"
        },
        {
          "first": "Dave",
          "last": "Phillipson",
          "username": "@phillipson",
          "category": "warning",
          "progress": "30"
        }
      ]'>
    <zg-colgroup>
      <zg-column index="first">[[index.first]]</zg-column>
      <zg-column index="last">[[index.last]]</zg-column>
      <zg-column index="username">[[index.username]]</zg-column>
      <zg-column index="category">
        <div class="mdc-chip chip-[[index.category]]" role="row">
          <div class="mdc-chip__ripple"></div>
          <span role="gridcell">
            <span role="button" tabindex="0" class="mdc-chip__primary-action">
              <span class="mdc-chip__text">[[index.category]]</span>
            </span>
          </span>
        </div>
      </zg-column>
      <zg-column index="progress" renderer="progressBar">
        <div class="progress-wrapper">
          <div role="progressbar" class="mdc-linear-progress" aria-valuemin="0" aria-valuemax="1">
            <div class="mdc-linear-progress__buffer">
              <div class="mdc-linear-progress__buffer-bar"></div>
              <div class="mdc-linear-progress__buffer-dots">[[index.progress]]</div>
            </div>
          </div>
        </div>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    const primaryBar = 'linear-gradient(45deg, #4452B8, #65C7F7, #9CECFB)';
    const primaryDot = '#9CECFB';
    const secondaryBar = 'linear-gradient( 45deg, #edf6fa, #F6F6F6)';
    const secondaryDot = '#F6F6F6';
    const dangerBar = 'linear-gradient(45deg, #EA402F, #E25C4E, #E3928A, #E4B0AB)';
    const dangerDot = '#E4B0AB';
    const infoBar = 'linear-gradient(45deg, #777777, #9E9E9E, #CDCACA)';
    const infoDot = '#CDCACA';
    const warningBar = 'linear-gradient(45deg, #FCEA1B, #FFF688, #FFF9BA)';
    const warningDot = '#FFF9BA';
    window.progressBar = function(customIndex, domCell) {
      const bar = domCell.querySelector('.mdc-linear-progress__buffer-bar');
      const dots = domCell.querySelector('.mdc-linear-progress__buffer-dots');
      dots.style.width = `${dots.innerHTML}%`;
      const value = dots.innerHTML;
      if (value >= 80) {
        bar.style.background = dangerBar;
        dots.style.backgroundColor = dangerDot;
      } else if (value >= 60) {
        bar.style.background = secondaryBar;
        dots.style.backgroundColor = secondaryDot;
      } else if (value >= 40) {
        bar.style.background = infoBar;
        dots.style.backgroundColor = infoDot;
      } else if (value >= 20) {
        bar.style.background = warningBar;
        dots.style.backgroundColor = warningDot;
      } else {
        bar.style.background = primaryBar;
        dots.style.backgroundColor = primaryDot;
      }
    };
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body class="zg-body">
  <!-- Most features can be toggled on the toplevel zing-grid tag -->
  <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting data='[
        {
          "first": "Mark",
          "last": "Otto",
          "username": "@ZTfer",
          "category": "primary",
          "progress": "12"
        },
        {
          "first": "Jacob",
          "last": "Thorton",
          "username": "@jacobthorton",
          "category": "secondary",
          "progress": "62"
        },
        {
          "first": "Duncan",
          "last": "Mattheson",
          "username": "@dmattheson",
          "category": "danger",
          "progress": "84"
        },
        {
          "first": "David",
          "last": "Jose Perez",
          "username": "@djp",
          "category": "info",
          "progress": "45"
        },
        {
          "first": "Dave",
          "last": "Phillipson",
          "username": "@phillipson",
          "category": "warning",
          "progress": "30"
        }
      ]'>
    <zg-colgroup>
      <zg-column index="first">[[index.first]]</zg-column>
      <zg-column index="last">[[index.last]]</zg-column>
      <zg-column index="username">[[index.username]]</zg-column>
      <zg-column index="category">
        <div class="mdc-chip chip-[[index.category]]" role="row">
          <div class="mdc-chip__ripple"></div>
          <span role="gridcell">
            <span role="button" tabindex="0" class="mdc-chip__primary-action">
              <span class="mdc-chip__text">[[index.category]]</span>
            </span>
          </span>
        </div>
      </zg-column>
      <zg-column index="progress" renderer="progressBar">
        <div class="progress-wrapper">
          <div role="progressbar" class="mdc-linear-progress" aria-valuemin="0" aria-valuemax="1">
            <div class="mdc-linear-progress__buffer">
              <div class="mdc-linear-progress__buffer-bar"></div>
              <div class="mdc-linear-progress__buffer-dots">[[index.progress]]</div>
            </div>
          </div>
        </div>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
</body>

</html>

* {
  --md-red: #f44336;
  --md-orange: #ff9800;
  --md-yellow: #ffeb3b;
  --md-green: #4caf50;
  --md-blue: #2196f3;
  --md-purple: #673ab7;
  --md-indigo: #3f51b5;
  --md-black: #000;
  --md-white: #FFF;
  font-family: 'Roboto', sans-serif;


  /* BOOTSTRAP COLORS*/
  /* Bootstrap 4 has some css variables exposes, mostly colors. */

  /* RE-USABLE ZINGGRID VARS
  ----------------------------------------------------- */
  /* BACKGROUND */
  --theme-background-color: var(--mdc-theme-background);
  --theme-background-zebra: var(--light);

  /* BORDER */
  --theme-border-color_alt: var(--light);
  --theme-border-color_alt2: var(--secondary);
  --zg-button-focus: var(--light);

  /* COLOR */
  --theme-color-primary: var(--md-indigo);

  /* FONT */
  --zg-caption-color: var(--md-black);
  --theme-font-family: initial;

  --theme-padding_x: 2rem;
  --theme-padding_y: 0.75rem;

  /* -------------------------------------------------- */


  /* ZG-GRID
  ----------------------------------------------------- */
  /* padding: var(--theme-padding_x) var(--theme-padding_y); */
  /* box-sizing: border-box; */
  --zing-grid-box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);

  /* ZG-BODY
  ----------------------------------------------------- */
  --zg-body-background: var(--white);
  --zg-body-card-background: transparent;

  /* Hover */
  --zg-row-body-color_even_hover: var(--zg-row-body-color);
  --zg-row-body-color_odd_hover: var(--zg-row-body-color);


  /* ZG-BUTTON
  ----------------------------------------------------- */
  --zg-button-opacity_disabled: .5;


  /* ZG-BUTTON-CUSTOM
  ----------------------------------------------------- */
  --zg-button-background_custom: var(--theme-color-primary);
  --zg-button-color: var(--white);
  --zg-button-border_custom: none;
  --zg-button-box-shadow_custom: none;
  --zg-button-border_custom_hover: none;
  --zg-button-background_custom_hover: #0069d9;

  /* ZG-CAPTION
  ----------------------------------------------------- */
  --zg-caption-background: var(--md-white);
  --zg-caption-border-bottom: 0;
  --zg-caption-color: var(--md-black);
  --zg-caption-icon-color: var(--md-black);

  /* ZG-CELL
  ----------------------------------------------------- */
  --zg-cell-background_sorted: rgba(62, 117, 167, .2);

  /* ZG-CONTROL-BAR
  ----------------------------------------------------- */
  --zg-control-bar-background: var(--md-white);
  --zg-control-bar-border-bottom: 0;


  /* ZG-EDITOR_ROW
  ----------------------------------------------------- */
  --zg-editor-row-input-background: var(--md-white);
  --zg-editor-row-input-color: var(--md-white);
  --zg-editor-row-input-background_focus: #00203d;
  --zg-editor-row-input-box-shadow_focus: none;

  /* ZG-FILTER
  ----------------------------------------------------- */

  --zg-filter-background: var(--light);
  --zg-filter-background_sorted: rgba(62, 117, 167, .2);
  --zg-filter-border: none;

  /* Input */
  --zg-filter-input-height: calc(1.5em + .75rem + 2px);
  --zg-filter-input-padding: .375rem .75rem .375rem .375rem;
  --zg-filter-input-border-radius: .25rem;
  --zg-filter-input-border: 1px solid #ced4da;
  --zg-filter-input-background: var(--md-white);
  --zg-filter-input-border-width: 1px;
  --zg-filter-input-margin: .375rem;


  /* ZG-FOCUS
  ----------------------------------------------------- */
  --zg-focus-border: 1px solid #80bdff;
  --zg-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
  --zg-focus-outline: 0;

  --zg-focus-bottom-transform: translateY(1px);
  --zg-focus-right-transform: translateX(1px);

  /* ZG-HEAD
  ----------------------------------------------------- */
  --zg-head-background: var(--md-white);


  /* ZG-MENUITEM
  ----------------------------------------------------- */
  --zg-menu-background: var(--md-black);

  /* ZG-INPUT
  ----------------------------------------------------- */
  --zg-input-color: #00549c;
  ;
  --zg-input-border-bottom: 1px solid var(--theme-border-color_alt);
  --zg-input-border-left: 1px solid var(--theme-border-color_alt);
  --zg-input-border-right: 1px solid var(--theme-border-color_alt);
  --zg-input-border-top: 1px solid var(--theme-border-color_alt);

  /* ZG-PAGER
  ----------------------------------------------------- */
  --zg-pager-background: transparent;
  --zg-pager-border-top: 0;
  --zg-pager-card-nonmobile-border-top: 1px solid var(--theme-background-color);
  --zg-pager-color: var(--zg-head-cell-color);

  /* ZG-ROW
  ----------------------------------------------------- */
  --zg-row-border: 1px solid var(--grey);

  /* Card */
  --zg-row-card-background: var(--zg-body-background);

  /* ZG-SOURCE
  ----------------------------------------------------- */
  --zg-source-background: #fbfbfb;
  --zg-source-border-bottom_top: 1px solid #f4f4f4;
  --zg-source-border-top_top: 1px solid #f4f4f4;
  --zg-source-border-top_bottom: 1px solid #f4f4f4;
  --zg-source-color: var(--theme-color-primary);

  /* ZG-WATERMARK
  ----------------------------------------------------- */
  --zg-watermark-background: transparent;
  --zg-watermark-border-bottom: 0;
  --zg-watermark-border-left: 0;
  --zg-watermark-border-right: 0;
  --zg-watermark-border-top: 0;
  --zg-watermark-font-size: 10px;
  --zg-watermark-padding: 0 var(--theme-padding_x);
}

.chip-primary {
  background: var(--md-indigo);
}

.chip-secondary {
  background: var(--md-gray);
}

.chip-success {
  background: var(--md-green);
}

.chip-danger {
  background: var(--md-red);
}

.chip-warning {
  background: var(--md-yellow);
}

.progress-wrapper {
  width: 200px;
}

.mdc-linear-progress__buffer-bar {
  height: 3px;
}

.mdc-linear-progress__buffer-dots {
  height: 3px;
}

const primaryBar = 'linear-gradient(45deg, #4452B8, #65C7F7, #9CECFB)';
const primaryDot = '#9CECFB';
const secondaryBar = 'linear-gradient( 45deg, #edf6fa, #F6F6F6)';
const secondaryDot = '#F6F6F6';
const dangerBar = 'linear-gradient(45deg, #EA402F, #E25C4E, #E3928A, #E4B0AB)';
const dangerDot = '#E4B0AB';
const infoBar = 'linear-gradient(45deg, #777777, #9E9E9E, #CDCACA)';
const infoDot = '#CDCACA';
const warningBar = 'linear-gradient(45deg, #FCEA1B, #FFF688, #FFF9BA)';
const warningDot = '#FFF9BA';
window.progressBar = function(customIndex, domCell) {
  const bar = domCell.querySelector('.mdc-linear-progress__buffer-bar');
  const dots = domCell.querySelector('.mdc-linear-progress__buffer-dots');
  dots.style.width = `${dots.innerHTML}%`;
  const value = dots.innerHTML;
  if (value >= 80) {
    bar.style.background = dangerBar;
    dots.style.backgroundColor = dangerDot;
  } else if (value >= 60) {
    bar.style.background = secondaryBar;
    dots.style.backgroundColor = secondaryDot;
  } else if (value >= 40) {
    bar.style.background = infoBar;
    dots.style.backgroundColor = infoDot;
  } else if (value >= 20) {
    bar.style.background = warningBar;
    dots.style.backgroundColor = warningDot;
  } else {
    bar.style.background = primaryBar;
    dots.style.backgroundColor = primaryDot;
  }
};