One of the challenges I am facing is with a class that is added to different sections of a website to indicate that they are editable. This class is called .editable.
Currently, when a user is logged in and hovers over an editable section, a red dashed border appears around it.
The current implementation looks like this:
.editable { /* add padding to act as clear border */
padding:1px;
}
.editable:hover { /* remove padding and add border */
padding:0px;
border:1px dashed red
}
To prevent the section from shifting when the border shows on hover, I add a 1px padding.
The issue arises when a section that needs to be edited already has padding applied, for example:
.sectionToBeEdited {
padding:10px;
}
When I apply the .editable class like
<div class="sectionToBeEdited editable">blah</div>QUESTION: Is there a way to inherit the padding setting and then add 1px to it? And then reduce the padding by 1px on hover?
I am aware that another approach would be to wrap the editable sections in separate divs and apply padding there, but that would require rewriting and adding many classes and divs.
Are there any other solutions to this problem?