/* -------------------------- */ /* Standard horizontal spacing */ /* -------------------------- */ .moon-hspacing { & { white-space: nowrap; } & > * { display: inline-block; vertical-align: middle; margin: 0 @moon-grid-gutter-width/2; } &.top > * { vertical-align: top; } & > :first-child, & > :first-child.moon-contextual-popup-decorator :first-child { margin-left: 0; } .enyo-locale-right-to-left & > :first-child { margin-left: @moon-grid-gutter-width/2; margin-right: 0; } & > :last-child, & > :last-child.moon-contextual-popup-decorator :first-child { margin-right: 0; } .enyo-locale-right-to-left & > :last-child { margin-right: @moon-grid-gutter-width/2; margin-left: 0; } } /* -------------------------- */ /* Standard vertical spacing */ /* -------------------------- */ .moon-vspacing { & > * { display: block; margin: @moon-grid-gutter-width/2 0; } & > :first-child { margin-top: 0; } & > :last-child { margin-bottom: 0; } } /* -------------------------- */ /* Variable vertical spacing */ /* -------------------------- */ .moon-vspacing-mixin(@size) { > .moon-item:not(.moon-formcheckbox-item), > .moon-expandable-list-item:not(.open) .moon-item, > .moon-expandable-list-item.open { padding-bottom: @size; } > .moon-button, > .moon-input-decorator, > .moon-formcheckbox-item { margin-top: @size/2; margin-bottom: @size; } } .moon-vspacing-s { .moon-vspacing-mixin(9px); } .moon-vspacing-m { .moon-vspacing-mixin(18px); } .moon-vspacing-l { .moon-vspacing-mixin(42px); }