Add new standard definitions and mixins for working with boxes.
Review Request #10659 — Created Aug. 15, 2019 and submitted
Boxes are one of our earliest components in our CSS library. We've had
it since early in the 1.0 timeframe. They were used more for
presentation, and over time, we've reduced usage of the actual classes
and moved to repeated definitions within other CSS files.
This change makes this a bit easier. We now have a namespaced set of
variables that can be used instead of the older global ones (which are
now marked deprecated, but still widely used).
There's also a few functions for adding box styles to an element.
#rb-ns-ui.boxes.make-box()will add the standard rules.
.make-box-at-screen-gte()will add them only at certain screen sizes
(useful for desktop-only views).
.unmake-box()will zero out the
styles used for a box, which is going to be useful for some admin UI
work (which isn't namespaced in super consistent and useful ways).
These will be used in upcoming admin UI changes.
Used these new mixins and variable in upcoming changes.
Split out the box shadow components into individual variables, so they can be referenced in other size calculations.
Revision 2 (+134 -26)