diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index e2c57f8b30..ff9c2e19d9 100644 --- a/app/views/admin/products_v3/_table.html.haml +++ b/app/views/admin/products_v3/_table.html.haml @@ -1,15 +1,16 @@ = form_with url: bulk_update_admin_products_v3_index_path, method: :patch, id: "products-form", html: {'data-reflex-serialize-form': true, 'data-reflex': 'submit->products#bulk_update'} do |form| - .container - .sixteen.columns.align-right - #fieldset + %fieldset.form-actions + .container + .status.ten.columns / = t('.products_modified', count: 'X') - = form.submit t('.reset'), type: :reset - = form.submit t('.save') - if defined?(error_msg) && error_msg.present? .error = error_msg + .form-buttons.six.columns + = form.submit t('.reset'), type: :reset, class: "medium" + = form.submit t('.save'), class: "medium" %table.products %col{ width:"15%" } %col{ width:"5%", style: "max-width:5em" } diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss index 8291e04147..9b77e318d2 100644 --- a/app/webpacker/css/admin_v3/components/buttons.scss +++ b/app/webpacker/css/admin_v3/components/buttons.scss @@ -12,7 +12,6 @@ button:not(.plain):not(.trix-button), background-color: $color-btn-bg; border: 1px solid $color-btn-bg; color: $color-btn-text; - text-transform: uppercase; line-height: $btn-regular-height - 2px; // remove 2px to compensate for border height: $btn-regular-height; font-weight: bold; @@ -113,6 +112,25 @@ button:not(.plain):not(.trix-button), } } +input[type="reset"] { + // Reset button looks like a link, but has a border the same as buttons when active. + background: none; + border: 1px solid transparent; + color: $color-link; + + &:active { + color: $color-link-active; + } + &:focus { + color: $color-link-focus; + } + &:hover { + color: $color-link-hover; + background: none; + border-color: transparent; + } +} + a.button { text-decoration: none; } diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss index da593e3300..9f5fe2ac58 100644 --- a/app/webpacker/css/admin_v3/shared/forms.scss +++ b/app/webpacker/css/admin_v3/shared/forms.scss @@ -236,6 +236,27 @@ fieldset { } } +.form-actions { + @include defaultBoxShadow; + background-color: $fair-pink; + border: none; + border-left: 4px solid $red; + border-radius: 4px; + margin: 0.5em 0; + padding: 0; + + .status { + font-size: 1rem; + font-weight: bold; + padding: 0.75em 1em; + } + + .form-buttons { + padding: 0.5em 1em; + text-align: right; + } +} + .form-buttons { text-align: center; }