CODEWITHSUNDEEP
angularless
LppEdd
LppEdd

Reputation: 21134

Override mixin in Less

I'm working on an Angular application which uses NG-ZORRO for components.
I need to customize the appearance of buttons, and I'd like to do it by customizing pre-defined Less functions/mixins.

For example, I need to override this mixin definition
node_modules/ng-zorro-antd/button/style/mixin.less

// Base styles of buttons
// --------------------------------------------------
.btn() {
  position: relative;
  display: inline-block;
  font-weight: @btn-font-weight;

  ...

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }

Specifically the &.disabled part.
I'm obviously able to import it using

@import '~ng-zorro-antd/button/style/mixin';

But I have no idea how to override it. Maybe it's dead simple!

Upvotes: 0

Views: 476

Answers (1)

LppEdd
LppEdd

Reputation: 21134

Maybe it's dead simple!

Well, apparently it's as simple as that

.btn() {
  &.disabled,
  &[disabled] {
    cursor: default;
  }
}

That's inside your custom .less file, which is also declared inside angular.json, e.g.

"styles": [
   ...
   "src/main/webapp/assets/css/styles_zorro.less"
],

Upvotes: 1

Related Questions