diff --git a/bower.json b/bower.json index 01ffc81..d968d66 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "paint", - "version": "0.7.15", + "version": "0.7.16", "homepage": "https://github.com/alphasights/paint", "authors": [ "Eugenio Depalo ", diff --git a/components/_table.scss b/components/_table.scss new file mode 100644 index 0000000..6d7875b --- /dev/null +++ b/components/_table.scss @@ -0,0 +1,105 @@ +$include-html-paint-table: true !default; + +$table-row-background-color: $white !default; +$table-odd-background-color: darken($white, 3%) !default; +$table-highlighted-row-background-color: lighten($primary-color, 47%) !default; +$table-highlighted-row-color: $jet !default; +$table-column-padding: $column-gutter / 2 !default; + +%table { + width: 100%; + + thead { + tr { + background-color: darken($table-row-background-color, 5%); + } + + th { + color: $small-font-color; + font-size: $small-font-size; + font-weight: $font-weight-bold; + padding: $table-column-padding; + text-align: left; + text-transform: uppercase; + } + } + + tbody { + tr { + background-color: $table-row-background-color; + border-bottom: 1px solid $table-odd-background-color; + + &:last-child { + border: 0; + } + + td { + line-height: $base-line-height; + padding: $table-column-padding; + } + } + } +} + +%table-stripped { + tr { + &:nth-of-type(2n) { + background-color: $table-odd-background-color; + } + } +} + +%table-highlighted-row { + background-color: $table-highlighted-row-background-color; + color: $table-highlighted-row-color; + + td { + border-bottom: 1px solid darken($table-highlighted-row-background-color, 7%); + border-top: 1px solid darken($table-highlighted-row-background-color, 7%); + font-weight: $font-weight-bold; + } +} + +%table-rounded { + border-radius: $global-radius; + + thead th { + &:first-child { + border-radius: $global-radius 0 0; + } + + &:last-child { + border-radius: 0 $global-radius 0 0; + } + } + + tbody tr:last-child td { + &:first-child { + border-radius: 0 0 0 $global-radius; + } + + &:last-child { + border-radius: 0 $global-radius 0 0; + } + } +} + +@include exports('paint-table') { + @if $include-html-paint-table { + .table { + @extend %table; + + &.stripped { + @extend %table-stripped; + } + + &.rounded { + @extend %table-rounded; + } + + .highlighted-row { + @extend %table-highlighted-row; + } + } + } +} diff --git a/paint.scss b/paint.scss index 613ec45..55ee129 100644 --- a/paint.scss +++ b/paint.scss @@ -15,6 +15,7 @@ @import 'components/icon'; @import 'components/label'; @import 'components/layout'; +@import 'components/table'; @import 'components/progress-bar'; @import 'components/side-panel'; @import 'components/vertical-align';