Now that we can dynamically generate our style.css file from SASS, we have an easy way of fixing some theme scoping issues. For example, try dragging some of the icons around in edit mode. Notice how they lag strangely (a behavior not seen on other Concrete CMS sites.) I strongly suspect styles like this in our theme are to blame:
These are greedy styles -- they’re adding a transition to all links, which is bleeding through to the <a> tag found inside the core Concrete panels.
How do we combat this? With SASS, it’s easy. We know that div.ccm-page wraps the entire content of the website, because its one of the classes that is output by the <?=$c->getPageWrapperClass()?> call that we added to our header. If we can make this link class apply just to <a> tags inside this class, our theme’s behavior should be unchanged, but the Concrete editing interface won’t be affected by it. With SASS, that’s as easy as opening style.scss and modifying the inclusion of the _common.scss to be wrapped by div.ccm-page:
Let’s open _common.scss. First, we see some <body> tag styles:
Let’s modify those so that the padding and margin apply to body, but the other styles apply to div.ccm-page:
Next, let’s take all the rest of the styles, including our problematic links style, and put them inside the div.ccm-page directive:
Rebuild our styles, and our problem is fixed!