search

mdbootstrap / mdb-angular-ui-kit

Angular 18 & Bootstrap 5 & Material Design UI KIT
https://mdbootstrap.com/docs/angular/
Other
1.12k stars 280 forks source link

_option.scss variables #159

Closed Dhanzs-chrome closed 1 year ago

Dhanzs-chrome commented 1 year ago

Hi guys!

In file assets/scss/pro/_option.scss it would be great to have variables available for .option as default for example $white: #fff !default; to be able to overwrite it with custom parameters.

Right now I use a custom.scss where I give values for default variables to be able to use custom ones, but for _option.scss the values is burnt in and not used via variables which could be overwritten.

So after adding custom and importing all the used scss from mdb-angular-ui-kit I need to overwrite the values via accessing the selector

.option {
  font-size: $custom-option-font-size !important;
  font-family: $custom-option-font-family;
}

Thanks and have a nice day!

idzark commented 1 year ago

I added this to our to-do list, we definitely need to provide a better way to customize these styles

idzark commented 1 year ago

@Dhanzs-chrome we added new SCSS variables (defined in assets/scss/pro/_variables.scss) for the mdb-option and mdb-option-group components. We also converted our components to CSS variables (you can find the definitions in the _options.scss file) which makes the dynamic styles customization much easier.

These changes were added as a part of the v.5.0.0 release. A list of these variables will also be available in our documentation in the near future.