Snippets

Kris Khoury SCSS/Compass Clean Table Style

Updated by Former user
View revision

File table.scss Modified

  • Ignore whitespace
  • Hide word diff 
         background: {
           color: $concrete2;
         }
+        vertical-align: middle;
         &:first-child {
           text-align: left;
           padding-left: 20px;
Updated by Former user
View revision

File table.scss Modified

  • Ignore whitespace
  • Hide word diff 
   margin: 20px;
   border: $concrete4 1px solid;
   box-shadow: 0 1px 2px $concrete4;
+  border-collapse: separate;
   a {
     &:link {
       color: $concrete7;
Created by Former user
View revision

File table.scss Added

  • Ignore whitespace
  • Hide word diff 
+$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;
+  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;
+        }
+        &: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;
+        }
+      }
+    }
+  }
+}
HTTPS SSH

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