Styling groupbox widget

0
Using css it's possible to change the styling of the groupbox widget, for example the color of the header when collapsed: .mx-groupbox.collapsed {     > .mx-groupbox-header {          background: green;} } However, when i want only some group box widget using this custom styling i can't get this working using a custom class like this: .mygrb {     .mx-groupbox.collapsed {          > .mx-groupbox-header {               background: green; }      } }   What is it i'm doing wrong?
asked
1 answers
1

This is the CSS that you are generating:

.mygrb .mx-groupbox.collapsed > .mx-groupbox-header {
  background: green;
}

However, ‘mygrb’ is generated on the same DOM node as the ‘mx-groupbox.collapsed’, therefore the selector isn’t working. The CSS should look like this:

.mygrb.mx-groupbox.collapsed > .mx-groupbox-header {
  background: green;
}

Try:

.mygrb {
    &.mx-groupbox.collapsed {
         > .mx-groupbox-header {
              background: green; }

     }

}

 

answered