aqa-vaadin-grid.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../aqa-font/aqa-trirong-font.html">
<link rel="import" href="../aqa-font/aqa-mitr-font.html">
<dom-module id="aqa-vaadin-grid" theme-for="vaadin-grid">
  <template>
    <style>
      
      :host {
        /* height: 400px; */
        border: 1px solid #ddd;
      }
      :host [part~="cell"]:not([part~="details-cell"]) ::slotted(vaadin-grid-cell-content) {
        white-space: normal;
      }

      [part~="cell"] {
        color: #000;
        font-size: 1rem;
        padding:5px;
        border-right:1px solid #ddd;
        font-family: TrirongRegular;
        margin:0;
      }

      [part~="cell"]:last-child {
        border-right:0;
      }

      [part~="cell"]:focus {
        outline: none;
      }


      [part~="header-cell"],
      [part~="footer-cell"] {
        --lumo-font-size-m: 16px;
        color: white;
        /* font-size: 1rem; */
        /* background-color:#62a8ea; */
        /* font-weight: bolder; */
        background-image: linear-gradient(to bottom,#62a8ea 2%, #62a8ea 98%);
        padding: 0.5rem;
        text-align:center;
        height: 10px;
        font-family: MitrLight;
      }

      [part~="footer-cell"] {
        background-color:#EEE;
        color: #555;
      }


      [part~="body-cell"] {
        color: #000;
        font-size: 1rem;
        padding:5px;
        font-family: TrirongRegular;
        margin:0;
      }


      [part~="body-cell"],
      [part~="row"]:last-child [part~="header-cell"] {
        border-bottom: 1px solid #ddd;
      }

      [part~="row"]:nth-child(even) [part~="body-cell"] {
        background-color:#f3f7f9;
      }

      [part~="row"]:hover [part~="body-cell"] {
        background-color:#ECF9FA;
      }
      
    
    </style>
  </template>
</dom-module>