Magento 2 - How to override LESS code from _extends.less?

Question

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

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?

Answer 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);
        }
    }
}