Borders
Borders help define space, establish hierarchy and structure content.
Separators
Separators are visual elements that break apart or contain space, i.e., rules between objects or outlines on objects.
Example
Variables
-
On White$mds-border-separator-defaultsolid 1px #e5e5e5
-
On Light$mds-border-separator-on-lightsolid 1px #cccccc
-
On Dark$mds-border-separator-on-darksolid 1px #333333
-
On Black$mds-border-separator-on-darksolid 1px #333333
Controls
Controls are a subset of UI components that facilitate interaction within the application, i.e., Secondary Buttons, Button Groups and the Search Field. Control borders are used to outline these components and are not intended for use as separators.
Example
Search Field
Variables
-
On White$mds-border-control-defaultsolid 1px #808080
-
On Light$mds-border-control-defaultsolid 1px #808080
-
On Dark$mds-border-control-defaultsolid 1px #808080
-
On Black$mds-border-control-defaultsolid 1px #808080