Snippets

Kris Khoury SCSS/Compass Clean Table Style

Created by Kris Khoury last modified Kris Khoury
$font-arial:  'Arial';
$white:        #ffffff;
$offwhite:     #f6f6f6;
$concrete:     #f2f2f2;
$concrete2:    #ededed;
$concrete3:    #e0e0e0;
$concrete4:    #cccccc;
$concrete5:    #eaebec;
$concrete6:    #999999;
$concrete7:    #666666;
$alabaster:    #fafafa;
$tuscany:      #bd5a35;

table.tabular {
  @include border-radius(3px);
  font:{
    family: $font-arial;
    size: 12px;
  }
  color: $concrete7;
  text-shadow: 1px 1px 0 $white;
  background: {
    color: $concrete5;
  }
  margin: 20px;
  border: $concrete4 1px solid;
  box-shadow: 0 1px 2px $concrete4;
  border-collapse: separate;
  a {
    &:link {
      color: $concrete7;
      font-weight: bold;
      text-decoration: none;
    }
    &:visited {
      color: $concrete6;
      font-weight: bold;
      text-decoration: none;
    }
    &:active {
      color: $tuscany;
      text-decoration: underline;
    }
    &:hover {
      color: $tuscany;
      text-decoration: underline;
    }
  }
  >tbody{
    >tr {
      text-align: center;
      padding-left: 20px;
      &:first-child th {
        &:first-child {
          @include border-bottom-right-radius(3px);
        }
        &:last-child {
          @include border-bottom-right-radius(3px);
        }
      }
      &.even td {
        background: {
          color: $offwhite;
        }
      }
      &:last-child td {
        border-bottom: 0;
        &:first-child {
          @include border-bottom-right-radius(3px);
        }
        &:last-child {
          @include border-bottom-right-radius(3px);
        }
      }
      &:hover td {
        background: {
          color: $concrete;
        }
      }
      >th {
        padding: 21px 25px 22px;
        border:{
          top: 1px solid $alabaster;
          bottom: 1px solid $concrete3;
        };
        background: {
          color: $concrete2;
        }
        vertical-align: middle;
        &:first-child {
          text-align: left;
          padding-left: 20px;
        }
      }
      >td {
        padding: 10px;
        border:{
          top: 1px solid $white;
          bottom: 1px solid $concrete3;
          left: 1px solid $concrete3;
        }
        background: {
          color: $alabaster;
        }
        &:first-child {
          text-align: left;
          padding-left: 20px;
          border-left: 0;
        }
      }
    }
  }
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.