diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index 21021df320..b582da532f 100644 --- a/app/views/admin/products_v3/_table.html.haml +++ b/app/views/admin/products_v3/_table.html.haml @@ -22,7 +22,7 @@ %th.align-left= t('admin.inherits_properties') %th.align-right= t('admin.available_on') - products.each do |product| - %tbody + %tbody.relaxed %tr %td.align-left.header .line-clamp-1= product.name @@ -49,7 +49,7 @@ %td.align-right .line-clamp-1= product.available_on&.strftime('%F') - product.variants.each do |variant| - %tr + %tr.condensed %td.align-left .line-clamp-1= variant.display_name %td.align-right diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 1e0fd44683..7050cd9983 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -30,6 +30,36 @@ td { background-color: $color-tbl-cell-bg; } + + // "Relaxed" row groups, containing condensed rows. + // + // `display:table` enforces strict rules and won't allow border styles on tbody. + // So we emulate group styles on the cells themselves. + .relaxed { + th, + td { + padding: $padding-tbl-cell-relaxed; + } + + td { + border-bottom: 2px solid $color-tbl-bg; + } + + tr:first-child td { + border-top: 4px solid $color-tbl-bg; + } + tr:last-child td { + border-bottom: 1px solid $color-tbl-cell-shadow; + } + } + + // "Condensed" rows + .condensed { + td, + th { + padding: $padding-tbl-cell-condensed; + } + } } #no-products { diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index 494cb9ed5b..434042f31f 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -6,7 +6,7 @@ //-------------------------------------------------------------- $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; -// Colors +// Styles //-------------------------------------------------------------- // Body base colors @@ -28,9 +28,12 @@ $color-error: $red !default; // Table styles $color-tbl-bg: $light-grey !default; $color-tbl-cell-bg: $white !default; +$color-tbl-cell-shadow: rgb(0, 0, 0, 0.15) !default; $color-tbl-thead-txt: $color-headers !default; $color-tbl-thead-bg: $light-grey !default; $padding-tbl-cell: 12px 12px; +$padding-tbl-cell-condensed: 10px 12px; +$padding-tbl-cell-relaxed: 16px 12px; // Button colors $color-btn-bg: $teal !default;