Default Design properties (or designproperties removing MX classes)

Some of the css in mendix is pretty old, and in there to support legacy styling.

.mx-datagrid tbody tr:nth-child(2n+1) td{}

the amount of css “resetters” I need to write, with “!important” for something as trivial as changing a hover color is sometimes ridiculous.

I can imagine when you create new widgets you can select the default design properties (lets say striped datagrid, or default atlas datagrid).
This would add a class “mx-atlas” or something like that. This way the atlas theme is scoped to a modifier class.
This way the Atlas team can make amazing looking UI’s.

The other benefit, is that when a company has an established visual language, you can focus on creating your own css without having to worry about crazy selectors, important and other legacy features.

and until then, here is a handy listview resetter.
 

// -- remove styling from Listviews
.mx-listview>ul>li {
    -webkit-transition: all .3s 0s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all .3s 0s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all .3s 0s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all .3s 0s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: initial;
    padding: 0;
    border-width: 0;
    border-style: solid;
    border-color: rgba(0,0,1,0.0);
    background-color: inherit;
    &:last-child{
      border-bottom: 0px;
    }
}
.mx-listview>ul>li.selected:hover{
  background-color: inherit;
}
.mx-listview.mx-listview-clickable>ul>li{
  color: inherit;
}
.mx-listview li:nth-child(2n+1){
  background-color: inherit;
}

.mx-listview>ul>li:hover, .mx-listview>ul>li:focus, .mx-listview>ul>li:active{
  background-color: inherit;
}