I have the following .scss files
Code:
.w-abstract-form-panel {
.w-form {
padding: 10px;
}
.w-docked-toolbar {
padding: 0 5px;
.x-btn {
margin: 10px 5px;
}
}
}
Code:
.w-abstract-form-window {
@extend .w-abstract-form-panel;
}
It has problems with the nested .x-btn on the selectors that extend it where it's putting the margin on the .w-docked-toolbar instead of .w-docked-toolbar .x-btn
Code:
.w-abstract-form-panel .w-docked-toolbar,
.w-abstract-form-window .w-docked-toolbar,
.w-base-form-abstractwizard .w-docked-toolbar {
padding: 0 5px;
}
.w-abstract-form-panel .w-docked-toolbar .x-btn,
.w-abstract-form-window .w-docked-toolbar, <- WRONG
.w-base-form-abstractwizard .w-docked-toolbar { <- WRONG
margin: 10px 5px;
}