diff --git a/imports/plugins/core/checkout/client/components/cartItems.js b/imports/plugins/core/checkout/client/components/cartItems.js index f64851f7e8e..087dcba1a3e 100644 --- a/imports/plugins/core/checkout/client/components/cartItems.js +++ b/imports/plugins/core/checkout/client/components/cartItems.js @@ -50,6 +50,7 @@ class CartItems extends Component { { "icon-only": true, "status-badge": true }); + } else if (otherProps.kind === "removeItem") { + buttonClassName = classnames({ + "icon-only": true, + "variant-edit": true, + "remove-item-aria-container": true + }); } else { buttonClassName = classnames({ "icon-only": true, diff --git a/imports/plugins/included/default-theme/client/styles/cart/cartItems.less b/imports/plugins/included/default-theme/client/styles/cart/cartItems.less index 8f308d58517..83e695c59d8 100644 --- a/imports/plugins/included/default-theme/client/styles/cart/cartItems.less +++ b/imports/plugins/included/default-theme/client/styles/cart/cartItems.less @@ -28,13 +28,18 @@ white-space: pre-wrap; } + .remove-item-aria-container { + position: absolute; + top: -8px; + .right(-8px); + } + .remove-cart-item { position: absolute; - top: 8px; - .right(8px); + top: 0px; + .right(0px); color: @gray; - background-color: @alert-warning-bg; - border: 2px solid @gray; + background-color: @black15; padding: 5px; border-radius: 50%; z-index: 99;