From 79ee96dcf44cc78e378625c7776b98c510427493 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Fri, 20 Feb 2009 23:51:46 -0800 Subject: [PATCH] Polish the table scaffolding mixin and add the table borders mixins. --- examples/compass/stylesheets/utilities.sass | 6 +++- examples/compass/utilities.html.haml | 11 +++++-- .../compass/utilities/_tables.sass | 3 +- .../tables/_alternating_rows_and_columns.sass | 32 +++++++++++-------- .../compass/utilities/tables/_borders.sass | 27 ++++++++++++++++ .../utilities/tables/_scaffolding.sass | 8 ++--- 6 files changed, 63 insertions(+), 24 deletions(-) create mode 100644 frameworks/compass/stylesheets/compass/utilities/tables/_borders.sass diff --git a/examples/compass/stylesheets/utilities.sass b/examples/compass/stylesheets/utilities.sass index fd55d597..a5c3aa2c 100644 --- a/examples/compass/stylesheets/utilities.sass +++ b/examples/compass/stylesheets/utilities.sass @@ -38,6 +38,7 @@ h2 :border-color -moz-use-text-color :padding 2px :line-height 22px + :white-space nowrap #tag-cloud @@ -62,4 +63,7 @@ h2 +column(16) table.alternating :width 100% - +alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222) \ No newline at end of file + +alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222) + +table-scaffolding + +outer-table-borders(2px, #151A99) + +inner-table-borders(1px, #151A99) \ No newline at end of file diff --git a/examples/compass/utilities.html.haml b/examples/compass/utilities.html.haml index b4120435..c274e988 100644 --- a/examples/compass/utilities.html.haml +++ b/examples/compass/utilities.html.haml @@ -96,10 +96,15 @@ The first colors are the even/odd colors respectively and the last argument is a shade that is subtracted from those colors for the even columns. - %table.alternating + %p + The borders are created using + %code.mixin +outer-table-borders(2px, #151A99) + and + %code.mixin +inner-table-borders(1px, #151A99) + %table.alternating{:cellspacing => 0, :cellpadding => 0, :border => 0} %thead %tr - %td   + %th   %th.even Header #1 %th.odd Header #2 %th.even Header #3 @@ -123,7 +128,7 @@ %td.numeric.even 4.1 %td.numeric.odd 4.2 %td.numeric.even 4.3 - %tr.odd + %tr.odd.last %th Row #5 %td.numeric.even 5.1 %td.numeric.odd 5.2 diff --git a/frameworks/compass/stylesheets/compass/utilities/_tables.sass b/frameworks/compass/stylesheets/compass/utilities/_tables.sass index c4757027..2f22af4e 100644 --- a/frameworks/compass/stylesheets/compass/utilities/_tables.sass +++ b/frameworks/compass/stylesheets/compass/utilities/_tables.sass @@ -1,2 +1,3 @@ +@import tables/alternating_rows_and_columns.sass +@import tables/borders.sass @import tables/scaffolding.sass -@import tables/alternating_rows_and_columns.sass \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/utilities/tables/_alternating_rows_and_columns.sass b/frameworks/compass/stylesheets/compass/utilities/tables/_alternating_rows_and_columns.sass index a4534a43..67c7679e 100644 --- a/frameworks/compass/stylesheets/compass/utilities/tables/_alternating_rows_and_columns.sass +++ b/frameworks/compass/stylesheets/compass/utilities/tables/_alternating_rows_and_columns.sass @@ -1,16 +1,20 @@ -=alternating-rows-and-columns(!even_row_color, !odd_row_color, !dark_intersection) - thead - th.even - :background-color= #fff - !dark_intersection - tfoot - :font-size .9em - td.even - :background-color= #fff - !dark_intersection +=alternating-rows-and-columns(!even_row_color, !odd_row_color, !dark_intersection, !header_color = #FFF, !footer_color = #FFF) + th + :background-color= !header_color + &.even + :background-color= !header_color - !dark_intersection tr.odd - :background-color= !odd_row_color - td.even - :background-color= !odd_row_color - !dark_intersection + td + :background-color= !odd_row_color + &.even + :background-color= !odd_row_color - !dark_intersection tr.even - :background-color= !even_row_color - td.even - :background-color= !even_row_color - !dark_intersection + td + :background-color= !even_row_color + &.even + :background-color= !even_row_color - !dark_intersection + tfoot + th, td + :background-color= !footer_color + &.even + :background-color= !footer_color - !dark_intersection diff --git a/frameworks/compass/stylesheets/compass/utilities/tables/_borders.sass b/frameworks/compass/stylesheets/compass/utilities/tables/_borders.sass new file mode 100644 index 00000000..4073969c --- /dev/null +++ b/frameworks/compass/stylesheets/compass/utilities/tables/_borders.sass @@ -0,0 +1,27 @@ +=outer-table-borders(!width = 2px, !color = black) + :border= !width "solid" !color + thead + th + :border-bottom= !width "solid" !color + tfoot + th, td + :border-top= !width "solid" !color + th + &:first-child + :border-right= !width "solid" !color + +=inner-table-borders(!width = 2px, !color = black) + th, td + :border + :right= !width "solid" !color + :bottom= !width "solid" !color + :left-width 0px + :top-width 0px + &:last-child, + &.last + :border-right-width 0px + tbody, tfoot + tr:last-child, + tr.last + th, td + :border-bottom-width 0px diff --git a/frameworks/compass/stylesheets/compass/utilities/tables/_scaffolding.sass b/frameworks/compass/stylesheets/compass/utilities/tables/_scaffolding.sass index 79df1732..96093fc0 100644 --- a/frameworks/compass/stylesheets/compass/utilities/tables/_scaffolding.sass +++ b/frameworks/compass/stylesheets/compass/utilities/tables/_scaffolding.sass @@ -1,11 +1,9 @@ =table-scaffolding + th + :text-align center + :font-weight bold td, th :padding 2px &.numeric :text-align right - tbody - th - :text-align center - thead - :font-size .9em \ No newline at end of file