Magento – Magento 2 How to correctly change style in less

custom-themeless-cssmagento-2.1styles

Example

I creat my theme, same as luma, parent Blank.

I try change style for search (add background-color and change opticaly.
I see in less file: app\design\frontend\Vendor\default\Magento_CatalogSearch\web\css\source\_module.less only this code (need make changes here):

.action.search {
    display: inline-block;
    .lib-button-icon(
    @_icon-font-content: @icon-search,
    @_icon-font-size: 24px,
    @_icon-font-text-hide: true,
    @_icon-font-color: @header-icons-color,
    @_icon-font-color-hover: @header-icons-color-hover,
    @_icon-font-line-height: 24px
    );
    .lib-button-reset();
    position: absolute;
    right: @indent__s;
    top: 0;
    z-index: 1;

I found .lib-button-reset(); on magento\lib\web\css\source\lib\_buttons.less

.lib-button-reset() {
    background-image: none; // Reset unusual Firefox-on-Android default style
    background: none; // >>> Need change <<<
    -moz-box-sizing: content-box; // Hack: fix Firefox button line-height problem
    border: 0;
    box-shadow: none;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-shadow: none;
    .lib-css(font-weight, @font-weight__regular);

    &:focus,
    &:active {
        background: none;
        border: none;
    }

    &:hover {
        background: none;
        border: none;
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        cursor: not-allowed;
        pointer-events: none; // Disabling of clicks
        .lib-css(opacity, @button__disabled__opacity); // >>> Need change <<<
        // >>> Need add z-index: -1; <<<
    }
}

So, to correctly add background, change opticaly and add z-index in app\design\frontend\Vendor\default\Magento_CatalogSearch\web\css\source\_module.less?

Best Answer

You don't say if you are using a theme or a module where you need this change made, so i will assume that you need this in a theme as it's a little more straight forward. You want to make a file in your theme here: app/design/frontend/{{vendor_namespace}}/{{theme_name}}/web/css/source/_extend.less The code you are looking for is: 

.block-search .action.search {
  .lib-button(
    @_button-background: tomato;
  );
}

.block-search .action.search[disabled] {
  opacity: 1;
}

This will change the background color and set the disabled state to a full opacity. This button is greyed out by default until there is text is in the search. This is to prevent people from searching a null value. But this code will override that appearance. As you will see, the background for this element will change the layout a bit, as the button was not designed to have one, but you can play with the values till you get the right results.

enter image description here

For more info on the ui library, you can read here:

http://magento2-demo.nexcess.net/pub/static/frontend/Magento/blank/en_US/css/docs/buttons.html