oxabs-tables/app.css

OA tables in elm!

/* FROM MAIN APP START*/

/*[][][][][][][][][][][][][][][][][][][][][][][][][][][][][]

    ~ Custom Resets ~
  [][][][][][][][][][][][][][][][][][][][][][][][][][][][][]*/

/* Edited version of:
   http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
html {
  font-size: 16px;
  min-height: 100%;
  font-size: 1rem;
  min-height: 100vh;
  background-color: #f4f4f6;
}
body {
  line-height: 1;
  font-family: 'Roboto', Helvetica, Ariel, sans-serif;
  font-weight: 400;
  background-color: #ffffff;
}

blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input {
  line-height: normal;
}
textarea {
  font-family: sans-serif;
}
caption, tbody, tfoot, thead, tr, th, td {}
p {
  margin-bottom: 1rem;
}
strong {}
a {
    text-decoration: underline;
}
  a:hover {
    color: initial;
  }

pre {
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  text-align: left;
}

/*[][][][][][][][][][][][][][][][][][][][][][][][][][][][][]

    ~ Custom Fonts ~
  [][][][][][][][][][][][][][][][][][][][][][][][][][][][][]*/

@import 'https://fonts.googleapis.com/css?family=Raleway|Roboto:300,500,400,700';

/* FROM MAIN APP END*/

/* TABLE */
  .table__wrapper{
    margin:0 4rem;
  }

  .table__tab{
    line-height: 2.5rem;
    background-color: #e7e6e6;
    display: inline-block;
    padding: 0 1.75rem;
    border: 1px solid #979797;
    border-bottom: none;
    font-family: 'Roboto', Helvetica, Ariel, sans-serif;
    cursor: pointer;
  }

      .table__tab--active{
        background-color: #ffffff;
        -webkit-box-shadow:0px 2px 0px -1px #ffffff;
        -moz-box-shadow:0px 2px 0px -1px #ffffff;
        box-shadow: 0px 2px 0px -1px #ffffff;
      }


  .table__controls-wrapper{
    border: 1px solid #979797;
    border-bottom: none;
  }

  .table__search{
    display: inline-block;
    height: 2rem;
    width: 32rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.25rem 1rem;
    margin: 0.75rem 1.5rem;
    font-size: 1rem;
    border: 1px solid #bdbdbd;
    border-radius: 3px;
  }

.table {
  min-width: 100%;
  border: solid 1px #979797;
  background-color: #ffffff;
}
  .table-bar__toggle-input {
    display: none;
  }
      .table-bar__toggle-input:checked ~ .bar--table {
        height: auto;
        margin-bottom: 1.125rem;
        padding: 0.625rem 1rem 0;
      }
      .table-bar__toggle-input:checked ~ .table-bar__toggle-button {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAAXNSR0IArs4c6QAAANpJREFUOBFjYCAO1ACVKRCnlLAqDaCSn0C8mbBS4lTsAyr7D8UBxGnBrSoayTCQoQ+BmBu3cvwy/EDpF0AMcx2M7sSvDbfsFCyGgQz9BcTauLVhlzEGCv8FYpir0OmD2LVhF2UCCp/CYxjM8Hjs2jFFs4gwDGToKyAWxNSOKiIG5L4HYpgrCNEzULVj8haTYBjIMlA4m2EaAxFxAFKEXIRN/hxQHzPECATJCmReA2JsGogRy0UYBWFVUGAYyMKPQCwJMYqBQR7I+ArExLgEn5plMAM3UsEwmEXOAGbkm/bVMZcxAAAAAElFTkSuQmCC)
      }

  .table__button-dropdown{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    float:right;
    padding: 0.5rem 2.5rem;
    margin: 0.75rem 1.5rem;
    font-size: 0.8125rem;
    background: none;
    border: none;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAgCAYAAAB+ZAqzAAAAAXNSR0IArs4c6QAAAVhJREFUWAnNkK8vRWEch49hNpsgCIoiSZIm+hNEURQEURRFURTF20RNkiRFUWyCzYYZnod7bcxx7jnvr/Nsn3vfe877/Xyf3aqqqgF571l0qpbJU4/EdNHpkwM++/Kv6fLNLKcbUlpOB11+sMmv0mI6/MkZT0vJubuWFd68kNxy7nT3vxzyNreYOxuZ48YtySXnLneOxRa3com5qxXn3E4t547WrDLxSlLJ2e2OThwxlUrM7s7MM3lHYsvZaXcQ20zHFrMzmAkaLkgsObvsjMIaLW8kVM4Ou6JyTFuomB3RWaDxnnSVc9aOJOzQ2lXM2WRM0nxJ2so542xS1mlvK+ZMFk7YMq6cd7OxyKYH0iTnHe9mZY9tTWLeyc40G69InZzvvFOEDbbWifmuKKds/y3ns+IsYfBIRnKefdYL9rEYiXnuDTOYXA/jOZip4Iavgme+doddnoP5AEOdX53zUZ1XAAAAAElFTkSuQmCC);
    background-size: 0.625rem 0.5rem; /* 10px 8px */
    background-repeat: no-repeat;
    background-position: 95%;
    cursor: pointer;
  }

      .table__button-dropdown--active{
        border-bottom: solid 2px #003066;
      }

  .table__button-dropdown:active,
  .table__button-dropdown:focus{
    outline:none;
  }

  .table__page-display{
    text-align: right;
    display: inline-block;
    min-width: 8rem;
  }
/* TABLE HEADER */
.table-header{
  text-align:left;
  padding: 0.25rem;

}

    .table-header--control{
      background-color: #E5F6EF;
    }

  .table-header__sort-wrapper{
    margin-bottom: 0.5rem;
    padding-right: 1.875rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAAXNSR0IArs4c6QAAAblJREFUOBGtUblKA1EUvXcSNxC01jIu4JYUamGlbcBKm8QZCQEXon6BTRr/wQVETUwqty+wEFRciowBQcVKEKwiWmV73hOdMMwETeGDx9x33zln3j2HdSO8oZSaJ6L3Bi+P7OykHqWue0Ui4e5CUV0LoY2ZN7UuX88KMV+gUSzScSwWa61XDVhwwIUGtLR4PJ7nFm2KiV8Vqb73j9yuvJj/EgWmghUOuNCAlgdE89b8DAQGzpUiQ44Dh8cHhTsze/ab6NPzwyopWhJM3qNRMLGduge+Iogik8m+BPxDb4poUrwY9/sHb0zzrqafhhEOEvGW0FhjjiUS6RNoYLlGmzFCm/LnORHNeT006gwJIRRLdCUjtwt7az+RRqDVpVWrn6Lb17sMg0EolNSRPSTU6H2L8UUF6xBwCcLYpobmaRgtL+23QrJCQA93wADr0HOPbAF0XR9TVDqVc6MYtYq+Kqs1+eSZPBPJZPIcPedyeWgH6LOhBVWmdfGzjL68UmONFpN76Q07zl5XU7Y3rdrMZG+H/IOdMuaw9GTSSghx677W1+WhEwTjRekSu1YITnxd52g02oFdF/i/QV9berja4gg4oQAAAABJRU5ErkJggg==);
    background-size: 0.625rem 0.5rem;
    background-repeat: no-repeat;
    background-position: right 0.625rem top 50%;
    cursor: pointer;
  }

  .table-header__name{
    font-weight: normal;
    font-size: 0.8125rem;
    text-transform: capitalize;
  }

  .table-header__icon{
    margin-left: 0.5rem;
    width: 0.625rem;
    height: 0.5rem;
    background-size: cover;
    display: none;
  }

      .table-header__icon--asc{
        display: inline-block;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAAXNSR0IArs4c6QAAAVRJREFUOBFjYCACmJqahoEwEUoZGAkpsrKyEvv58+dVkDp2dnbtY8eOvcKnhwmfJEju169f04GUCAhD2SBhnIAZpwxQwsTEJPL///81SGo0paWlbz179uwKkhgKE6eXgWEmATTsChALI+tgZGR8C8Q6p0+ffoEsDmPj9DLQoBnohoE0gcRAcjAD0GmsXga6LgaoqRJdMRJfQ0ZG5i7Q65eQxMBMDC8bGxtLAmVAsSqIrhiN/x7I1z579uxzZHFsXp4FVEDIMJAZIDUgtSgAxctAryYAvVqGogI/R01KSurB8+fPL8KUwb1saWkpDUxnoOQgAJMkkv7Axsamc/z48acg9XAv//79ezaQT6phIDMEoHpBbAawl4EJOBno1WKwCHmEKjDBPwHG+nlGYLjJAg0DJWA+8syC6AIm9k+gBM8CNKgFKPQNyPlGiYEgvVCzKDUGVT8Af8J469uthh4AAAAASUVORK5CYII=);
      }

      .table-header__icon--desc{
        display: inline-block;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAgCAYAAAB+ZAqzAAAAAXNSR0IArs4c6QAAAVhJREFUWAnNkK8vRWEch49hNpsgCIoiSZIm+hNEURQEURRFURTF20RNkiRFUWyCzYYZnod7bcxx7jnvr/Nsn3vfe877/Xyf3aqqqgF571l0qpbJU4/EdNHpkwM++/Kv6fLNLKcbUlpOB11+sMmv0mI6/MkZT0vJubuWFd68kNxy7nT3vxzyNreYOxuZ48YtySXnLneOxRa3com5qxXn3E4t547WrDLxSlLJ2e2OThwxlUrM7s7MM3lHYsvZaXcQ20zHFrMzmAkaLkgsObvsjMIaLW8kVM4Ou6JyTFuomB3RWaDxnnSVc9aOJOzQ2lXM2WRM0nxJ2so542xS1mlvK+ZMFk7YMq6cd7OxyKYH0iTnHe9mZY9tTWLeyc40G69InZzvvFOEDbbWifmuKKds/y3ns+IsYfBIRnKefdYL9rEYiXnuDTOYXA/jOZip4Iavgme+doddnoP5AEOdX53zUZ1XAAAAAElFTkSuQmCC);
      }
  .table-header__bool-filter{
    font-size: 0.75rem;
    cursor: pointer
  }
/* TABLE CELL */
.table-cell {
  background-color: #F0F0F0;
  padding: 0.25rem;
  font-size: 0.875rem;
  position:relative;
}
    .table-cell--data{}

    .table-cell--control{
      background-color: #E5F6EF;
    }

  .table-cell__data{}

   .table-cell__link {
     text-decoration: none;
     color: black;
     height: 100%;
     width: 100%;
     display: inline-block;
     line-height: 2rem;
     min-height: 2rem;
   }

  .table-cell__control{
    display: block;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 1rem; /* 16px */
    /* Triangle pointing Downwards to indicate dropdown */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAgCAYAAAB+ZAqzAAAAAXNSR0IArs4c6QAAAVhJREFUWAnNkK8vRWEch49hNpsgCIoiSZIm+hNEURQEURRFURTF20RNkiRFUWyCzYYZnod7bcxx7jnvr/Nsn3vfe877/Xyf3aqqqgF571l0qpbJU4/EdNHpkwM++/Kv6fLNLKcbUlpOB11+sMmv0mI6/MkZT0vJubuWFd68kNxy7nT3vxzyNreYOxuZ48YtySXnLneOxRa3com5qxXn3E4t547WrDLxSlLJ2e2OThwxlUrM7s7MM3lHYsvZaXcQ20zHFrMzmAkaLkgsObvsjMIaLW8kVM4Ou6JyTFuomB3RWaDxnnSVc9aOJOzQ2lXM2WRM0nxJ2so542xS1mlvK+ZMFk7YMq6cd7OxyKYH0iTnHe9mZY9tTWLeyc40G69InZzvvFOEDbbWifmuKKds/y3ns+IsYfBIRnKefdYL9rEYiXnuDTOYXA/jOZip4Iavgme+doddnoP5AEOdX53zUZ1XAAAAAElFTkSuQmCC);
    background-size: 0.625rem 0.5rem; /* 10px 8px */
    background-repeat: no-repeat;
    background-position: 95%;
    background-color: #ffffff;
    text-decoration: none;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border-radius: 3px;
    border: solid 1px #808080;
    font-size: 0.8125rem;
    box-sizing: border-box;
  }
  .table-cell__menu{
    position: absolute;
    z-index: 10;
    background-color: white;
    cursor: pointer;
    list-style-type: none;
    width: 100%;
    -webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5);
    border: solid 1px #808080;
  }
      .table-cell__menu--sub{
        top: 0;
        left: 100%;
      }

  .table-cell__checkbox-label{
    display:block;
    cursor:pointer;
    padding:0.5rem;
  }
  .table-cell__menu-item{
    position:relative;
    line-height: 2.5rem;
    padding: 0 0.5rem;
  }

  .table-cell__menu-item:hover{
    background-color: #f0f0f0;
  }

      .table-cell__menu-item--with-children{
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAW5JREFUOBFjYACChIQog+TkZCEQm1zABNL4+y+jw4+f32/GxkYl////n5Ecw8AGQTT+F/n3//+c2NjoYyAXkmoYkkFQ4xj+W/z+8/9MbGzkpLS0NH5iDcQwCKqR+d9/htyv3z6DvBtLjGG4DILpFQd6d1F0TNTB2NhYHZggNpqQQVA9/+3+/f9zPjo2sicpKYmXAoPAWlkY/jMU//z1/UZcXHQ4umFEughFm9Tff/9WxMRE7YlJilGHyZBjEFjvf4b/zsAEeBgYdoogAbINAqbaJSzM7HqLFy++DzKIBUSQBBgZrgJtz168ePlBZH2kuOgLIwNjqaqyugG6ISADiXIR0BurmJhYixYtWvQU2RXIbLwGAV1wk4mJIWfRomV7kDVhY2P1GiMj4zdGJsZqFRU1PWIMARmM4SKgIRvY2RgK5s5d9hCbzbjEkAxivMfEyJC7ePGybbgU4xMHG8TK/H8rAwPbjAULFvzAp5gucgBskm2t6l95sQAAAABJRU5ErkJggg==);
        background-size:  0.5rem 0.625rem; /* 8px  10px */
        background-repeat: no-repeat;
        background-position: 95%;
      }

      .table-cell--select-checkbox__label{
        padding:0.5rem;
        cursor:pointer;
      }

      /*[][][][][][][][][][][][][][][][][][][][][][][][][][][][][]

          Buttons
        [][][][][][][][][][][][][][][][][][][][][][][][][][][][][]*/

      .button {
          display: inline-block;
          position: relative;
          padding: 0 0.5rem;
          z-index: 1;

          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;

          -webkit-appearance: none;
          -moz-appearance: none;
          appearance:  none; /* Removes NATIVE styling (esp. when .button is an input)*/

          border-width: 1px;
          border-style: solid;
          -webkit-box-shadow:
              inset 0px -1px 2px 0px rgba(0,0,0,0.50),
              inset 0px 1px 2px 0px rgba(255,255,255,0.5);
          -moz-box-shadow:
              inset 0px -1px 2px 0px rgba(0,0,0,0.50),
              inset 0px 1px 2px 0px rgba(255,255,255,0.5);
          box-shadow:
              inset 0px -1px 2px 0px rgba(0,0,0,0.50),
              inset 0px 1px 2px 0px rgba(255,255,255,0.5);
          border-radius: 3px;
          /* label: */
          font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 400;
          font-size: 0.875rem;
          line-height: 2.4;
          letter-spacing: 0.4px;
          text-decoration: none;
          text-transform: capitalize;
          text-align: center;
          color: #000000;
      }

      .button:visited {}

      .button:hover {
          cursor: pointer;
          color: #000000;
          text-decoration: none;
      }
      .button:focus {
          text-decoration: initial;
      }

        .button--primary {
            background-color: #00AA61;
            border-color: #333333;
            /* label: */
            color: #FFFFFF;
        }
            .button--primary:hover {
                color: #ffffff;
            }
        .button--secondary {
            background-color: #DBDBDB;
            border-color: #808080;
        }
        .button--tertiary {
            background-color: #B2E3CE; /* light green */
            border-color: #808080;
        }

.bar {
  display: block;
  margin: auto;
  padding: 0 1rem;
  max-width: 64rem;
  text-align: left;
  font-size: 1rem;
}
    .bar--table{
      max-width: initial;
      padding: 0.5rem 1.5rem;
    }

  .bar__toggle {
    display: inline-block;
    font-weight: 500;
    padding: 0.5rem;
    cursor: pointer;
    margin: 0 0.125rem 0.625rem;
    font-size: 0.875rem;
  }
      .bar__toggle--active {
        text-decoration: none;
        color: #ffffff;
        background-color: #003066;
      }
      .bar__toggle--active:hover {
        color: #ffffff;
      }

/*---------------------------------*/
/*    Font-Awesome                 */
/*---------------------------------*/

.icon {
  font-size: 1.125rem;
}
    .icon--table {
      display: block;
      font-size:3rem;
      margin-left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    .icon--table.icon--success {
      color:#00AA61;
    }
    .icon--table.icon--failure {
      color: #9c2c00;
    }
    .icon--delete {
      color: #444444;
    }
    .icon--with-input { /* paired with form__input--with-icon */
      display: inline-block;
      float: left;
      width: 1rem;
      margin: 0.75rem 0.5rem;
    }
    .icon--next, .icon--previous {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAAXNSR0IArs4c6QAAAblJREFUOBGtUblKA1EUvXcSNxC01jIu4JYUamGlbcBKm8QZCQEXon6BTRr/wQVETUwqty+wEFRciowBQcVKEKwiWmV73hOdMMwETeGDx9x33zln3j2HdSO8oZSaJ6L3Bi+P7OykHqWue0Ui4e5CUV0LoY2ZN7UuX88KMV+gUSzScSwWa61XDVhwwIUGtLR4PJ7nFm2KiV8Vqb73j9yuvJj/EgWmghUOuNCAlgdE89b8DAQGzpUiQ44Dh8cHhTsze/ab6NPzwyopWhJM3qNRMLGduge+Iogik8m+BPxDb4poUrwY9/sHb0zzrqafhhEOEvGW0FhjjiUS6RNoYLlGmzFCm/LnORHNeT006gwJIRRLdCUjtwt7az+RRqDVpVWrn6Lb17sMg0EolNSRPSTU6H2L8UUF6xBwCcLYpobmaRgtL+23QrJCQA93wADr0HOPbAF0XR9TVDqVc6MYtYq+Kqs1+eSZPBPJZPIcPedyeWgH6LOhBVWmdfGzjL68UmONFpN76Q07zl5XU7Y3rdrMZG+H/IOdMuaw9GTSSghx677W1+WhEwTjRekSu1YITnxd52g02oFdF/i/QV9berja4gg4oQAAAABJRU5ErkJggg==);;
      width: 1.5rem;
      height: 1.5rem;
      display: inline-block;
      background-size: 1.25rem 1rem;
      background-repeat: no-repeat;
      border: solid 1px grey;
      border-radius: 3px;
      background-position: 2px 6px;
      margin: 0.125rem;
      cursor: pointer;

    }

    .icon--next {
      transform: rotate(270deg);
    }

    .icon--previous {
      transform: rotate(90deg);
    }

  .icon__wrapper {
    margin-top: 0.75rem;
    display:inline-block;
    position: absolute;
  }