0

I try to remove the box-shadow of a button in the customer area.

enter image description here

I found the code in

vendor\magento\theme-frontend-luma\web\css\source\_extends.less:

//
//  Secondary button
//  ---------------------------------------------

& when (@media-common = true) {
    .abs-revert-to-action-secondary {
        &:extend(.abs-revert-secondary-color all);
        .lib-css(border-radius, @button__border-radius);

        &:not(:focus) {
            .lib-css(box-shadow, @button__shadow);
        }

        &:active {
            .lib-css(box-shadow, @button__shadow-active);
        }
    }
}

I added my override to a new file

THEME\web\css\source\lib\extend\_overrides.less

//
//  Secondary button
//  ---------------------------------------------

& when (@media-common = true) {
    .abs-revert-to-action-secondary {
        &:extend(.abs-revert-secondary-color all);
        .lib-css(border-radius, @button__border-radius);

        &:not(:focus) {
            .lib-css(box-shadow, false);
        }

        &:active {
            .lib-css(box-shadow, false);
        }
    }
}

I used false in lib-css() because in the Magento UI Library Documentation (lib/web/css/docs/utilities.html) it says:

The .lib-css() mixin is used to set any css property if there is a value passed to it by a variable. Also .lib-css() can add -ms-, -webkit- and -moz- prefixes if needed.

If the variable is set to false, the .lib-css() mixin will add nothing to the code.

Then I imported the file into

THEME\web\css\source\_extend.less

@import 'lib/extend/_overrides';

But the original code is still getting loaded from the following file and my override does not get applied:

/pub/static/frontend/hausfux/base/de_DE/css/source/_extends.less

Where do I have to add my override to make it work?

1

Please try with below code. Hopefully, it will resolve your problem.

THEME\web\css\source\lib\extend\_overrides.less

@button__shadow: false;

Alternative (not recommended):

& when (@media-common = true) {
    .abs-revert-to-action-secondary {
        &:extend(.abs-revert-secondary-color all);
        .lib-css(border-radius, @button__border-radius);
        &:not(:focus) {
            .lib-css(box-shadow, none);
        }
        &:active {
            .lib-css(box-shadow, none);
        }
    }
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.