Snippets
Created by
Kris Khoury
last modified
Kris Khoury
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | $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)
You can clone a snippet to your computer for local editing. Learn more.