diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index a6ffbf0b82..e2c57f8b30 100644 --- a/app/views/admin/products_v3/_table.html.haml +++ b/app/views/admin/products_v3/_table.html.haml @@ -22,7 +22,7 @@ %col{ width:"5%", style: "max-width:5em" } %thead %tr - %th.align-left= t('admin.products_page.columns.name') + %th.align-left.with-input= t('admin.products_page.columns.name') %th.align-right= t('admin.products_page.columns.sku') %th.align-right= t('admin.products_page.columns.unit') %th.align-right= t('admin.products_page.columns.price') diff --git a/app/webpacker/css/admin/globals/variables.scss b/app/webpacker/css/admin/globals/variables.scss index 86fb56b7af..7ea08bbc7d 100644 --- a/app/webpacker/css/admin/globals/variables.scss +++ b/app/webpacker/css/admin/globals/variables.scss @@ -67,6 +67,8 @@ $color-sel-hover-text: $color-1 !default; $color-txt-brd: $color-border !default; $color-txt-text: $color-3 !default; $color-txt-hover-brd: $color-2 !default; +$vpadding-txt: 7px; +$hpadding-txt: 10px; // Modal colors $color-modal-close-btn: $color-5 !default; diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 688015bffe..5b5cb2fe9c 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -23,6 +23,12 @@ padding: 4px; border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows. + // Additional horizontal padding to align with input contents + thead th.with-input { + padding-left: $padding-tbl-cell + $hpadding-txt; + padding-right: $padding-tbl-cell + $hpadding-txt; + } + // Row hover tr:hover { td { diff --git a/app/webpacker/css/admin/shared/forms.scss b/app/webpacker/css/admin/shared/forms.scss index 4f11d677fc..da593e3300 100644 --- a/app/webpacker/css/admin/shared/forms.scss +++ b/app/webpacker/css/admin/shared/forms.scss @@ -8,7 +8,7 @@ input[type="number"], textarea, fieldset { @include border-radius($border-radius); - padding: 7px 10px; + padding: $vpadding-txt $hpadding-txt; border: 1px solid $color-txt-brd; color: $color-txt-text; font-size: 90%; diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index cf8fa70498..89a15caee4 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -33,9 +33,9 @@ $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; $color-tbl-border: $pale-blue !default; -$padding-tbl-cell: 12px 12px; +$padding-tbl-cell: 12px; $padding-tbl-cell-condensed: 10px 12px; -$padding-tbl-cell-relaxed: 16px 12px; +$padding-tbl-cell-relaxed: 12px 12px; // Button colors $color-btn-bg: $teal !default; @@ -70,10 +70,12 @@ $color-sel-text: $white !default; $color-sel-hover-bg: lighten($color-sel-bg, 2) !default; $color-sel-hover-text: $white !default; -// Text inputs colors +// Text inputs styles $color-txt-brd: $color-border !default; $color-txt-text: $near-black !default; $color-txt-hover-brd: $teal !default; +$vpadding-txt: 5px; +$hpadding-txt: 8px; // Modal colors $color-modal-close-btn: $color-5 !default;