Skip to content

Margin component

Vittorio Vittori edited this page Aug 5, 2014 · 1 revision

List of the available mixins

Mixin name Example Code
addMarginRule Gist example Source code
addMarginSelector Gist example Source code
setViewportsMargin Gist example Source code

####addMarginRule

Adds a CSS selector with a different margin property for every viewport

Param Default value Required
@selector none yes
@hdFullMargin 6em no
@hdReadyMargin 5em no
@tabletLandscapeMargin 4em no
@tabletPortraitMargin 3em no
@smartphoneLandscapeMargin 2em no
@smartphonePortraitMargin 1em no

Gist example

===

####addMarginSelector

Adds a list of CSS selectors for every margin state like name-margin, name-vertical-margin, name-horizontal-margin, name-top-margin, name-right-margin, name-bottom-margin, name-left-margin

Param Default value Required Comment
@selector false no
@verticalMargin @vertical-padding no Frontsize var from app.less
@horizontalMargin @horizontal-padding no Frontsize var from app.less

Gist example

===

####setViewportsMargin

Sets a different margin property for every viewport to a CSS selector

Param Default value Required
@hdFullMargin 6em no
@hdReadyMargin 5em no
@tabletLandscapeMargin 4em no
@tabletPortraitMargin 3em no
@smartphoneLandscapeMargin 2em no
@smartphonePortraitMargin 1em no

Gist example

Clone this wiki locally