Skip to content
Mark Reeves edited this page Mar 21, 2018 · 4 revisions

The com.github.bordertech.wcomponents.Size enum is used to enforce consistent spaces between (using Margin) and amongst (see Theme intra component spacing) components.

The Size enum has the following settings:

  • ZERO represents a zero space (which may be used to remove theme based or inbuilt margins, for example);
  • SMALL represents a small space;
  • MEDIUM represents a medium sized space;
  • LARGE represents a large space; and
  • XL represents a very large space.

The actual dimensions (and units) of these spaces is determined by the theme and may vary with viewport size.

In the default theme with responsive design enabled and with reduced spaces for narrow viewports enabled the sizes are as shown in the table below.

enum value default size small viewport size
ZERO 0 0
SMALL 0.25rem 0.125rem
MEDIUM 0.5rem 0.25rem
LARGE 1rem 0.5rem
XL 1.5rem 0.75rem

Theme developers

To change these values use /src/main/sass/_theme-vars.scss or override /src/main/sass/vars/_space.scss NOTE though that if you do override /src/main/sass/vars/_space.scss do not change $wc-gap-suffix-list.

Further information

Clone this wiki locally