salix/front/core/styles/spacing.scss

/**
 * CSS spacing classes
 *
 * vn-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]
 *      T         D                     S
 * 
 * T - type
 *     - values: p (padding), m (margin)
 * 
 * D - direction
 *     - values:
 *             t (top), r (right), b (bottom), l (left),
 *             a (all), x (both left & right), y (both top & bottom)
 * 
 * S - size
 *     - values:
 *             none,
 *             auto (ONLY for specific margins: vn-ml-*, vn-mr-*, vn-mx-*),
 *             xs (extra small),
 *             sm (small),
 *             md (medium),
 *             lg (large),
 *             xl (extra large)
 */
 
 @import "./variables";

//++++++++++++++++++++++++++++++++++++++++++++++++ Padding

// None

.vn-pa-none {
    padding: 0;
}
.vn-pl-none {
    padding-left: 0;
}
.vn-pr-none {
    padding-right: 0;
}
.vn-pt-none {
    padding-top: 0;
}
.vn-pb-none {
    padding-bottom: 0;
}
.vn-py-none {
    padding-top: 0;
    padding-bottom: 0;
}
.vn-px-none {
    padding-left: 0;
    padding-right: 0;
}

// Extra small

.vn-pa-xs {
    padding: $spacing-xs;
}
.vn-pl-xs {
    padding-left: $spacing-xs;
}
.vn-pr-xs {
    padding-right: $spacing-xs;
}
.vn-pt-xs {
    padding-top: $spacing-xs;
}
.vn-pb-xs {
    padding-bottom: $spacing-xs;
}
.vn-py-xs {
    padding-top: $spacing-xs;
    padding-bottom: $spacing-xs;
}
.vn-px-xs {
    padding-left: $spacing-xs;
    padding-right: $spacing-xs;
}

// Small

.vn-pa-sm {
        padding: $spacing-sm;
}
.vn-pl-sm {
    padding-left: $spacing-sm;
}
.vn-pr-sm {
    padding-right: $spacing-sm;
}
.vn-pt-sm {
    padding-top: $spacing-sm;
}
.vn-pb-sm {
    padding-bottom: $spacing-sm;
}
.vn-py-sm {
    padding-top: $spacing-sm;
    padding-bottom: $spacing-sm;
}
.vn-px-sm {
    padding-left: $spacing-sm;
    padding-right: $spacing-sm;
}

// Medium

.vn-pa-md {
    padding: $spacing-md;
}
.vn-pl-md {
    padding-left: $spacing-md;
}
.vn-pr-md {
    padding-right: $spacing-md;
}
.vn-pt-md {
    padding-top: $spacing-md;
}
.vn-pb-md {
    padding-bottom: $spacing-md;
}
.vn-py-md {
    padding-top: $spacing-md;
    padding-bottom: $spacing-md;
}
.vn-px-md {
    padding-left: $spacing-md;
    padding-right: $spacing-md;
}

// Large

.vn-pa-lg {
    padding: $spacing-lg;
}
.vn-pl-lg {
    padding-left: $spacing-lg;
}
.vn-pr-lg {
    padding-right: $spacing-lg;
}
.vn-pt-lg {
    padding-top: $spacing-lg;
}
.vn-pb-lg {
    padding-bottom: $spacing-lg;
}
.vn-py-lg {
    padding-top: $spacing-lg;
    padding-bottom: $spacing-lg;
}
.vn-px-lg {
    padding-left: $spacing-lg;
    padding-right: $spacing-lg;
}

// Extra large

.vn-pa-xl {
    padding: $spacing-xl;
}
.vn-pl-xl {
    padding-left: $spacing-xl;
}
.vn-pr-xl {
    padding-right: $spacing-xl;
}
.vn-pt-xl {
    padding-top: $spacing-xl;
}
.vn-pb-xl {
    padding-bottom: $spacing-xl;
}
.vn-py-xl {
    padding-top: $spacing-xl;
    padding-bottom: $spacing-xl;
}
.vn-px-xl {
    padding-left: $spacing-xl;
    padding-right: $spacing-xl;
}

//++++++++++++++++++++++++++++++++++++++++++++++++ Margin

// None

.vn-ma-none {
    padding: 0;
}
.vn-ml-none {
    padding-left: 0;
}
.vn-mr-none {
    padding-right: 0;
}
.vn-mt-none {
    padding-top: 0;
}
.vn-mb-none {
    padding-bottom: 0;
}
.vn-my-none {
    padding-top: 0;
    padding-bottom: 0;
}
.vn-mx-none {
    padding-left: 0;
    padding-right: 0;
}

// Auto

.vn-ml-none {
    padding-left: auto;
}
.vn-mr-none {
    padding-right: auto;
}
.vn-mx-none {
    padding-left: auto;
    padding-right: auto;
}

// Extra small

.vn-ma-xs {
    margin: $spacing-xs;
}
.vn-mt-xs {
    margin-top: $spacing-xs;
}
.vn-ml-xs {
    margin-left: $spacing-xs;
}
.vn-mr-xs {
    margin-right: $spacing-xs;
}
.vn-mb-xs {
    margin-bottom: $spacing-xs;
}
.vn-my-xs {
    margin-top: $spacing-xs;
    margin-bottom: $spacing-xs;
}
.vn-mx-xs {
    margin-left: $spacing-xs;
    margin-right: $spacing-xs;
}

// Small

.vn-ma-sm {
    margin: $spacing-sm;
}
.vn-mt-sm {
    margin-top: $spacing-sm;
}
.vn-ml-sm {
    margin-left: $spacing-sm;
}
.vn-mr-sm {
    margin-right: $spacing-sm;
}
.vn-mb-sm {
    margin-bottom: $spacing-sm;
}
.vn-my-sm {
    margin-top: $spacing-sm;
    margin-bottom: $spacing-sm;
}
.vn-mx-sm {
    margin-left: $spacing-sm;
    margin-right: $spacing-sm;
}

// Medium

.vn-ma-md {
    margin: $spacing-md;
}
.vn-mt-md {
    margin-top: $spacing-md;
}
.vn-ml-md {
    margin-left: $spacing-md;
}
.vn-mr-md {
    margin-right: $spacing-md;
}
.vn-mb-md {
    margin-bottom: $spacing-md;
}
.vn-my-md {
    margin-top: $spacing-md;
    margin-bottom: $spacing-md;
}
.vn-mx-md {
    margin-left: $spacing-md;
    margin-right: $spacing-md;
}

// Large

.vn-ma-lg {
    margin: $spacing-lg;
}
.vn-mt-lg {
    margin-top: $spacing-lg;
}
.vn-ml-lg {
    margin-left: $spacing-lg;
}
.vn-mr-lg {
    margin-right: $spacing-lg;
}
.vn-mb-lg {
    margin-bottom: $spacing-lg;
}
.vn-my-lg {
    margin-top: $spacing-lg;
    margin-bottom: $spacing-lg;
}
.vn-mx-lg {
    margin-left: $spacing-lg;
    margin-right: $spacing-lg;
}

/* Extra large */

.vn-ma-xl {
    margin: $spacing-xl;
}
.vn-mt-xl {
    margin-top: $spacing-xl;
}
.vn-ml-xl {
    margin-left: $spacing-xl;
}
.vn-mr-xl {
    margin-right: $spacing-xl;
}
.vn-mb-xl {
    margin-bottom: $spacing-xl;
}
.vn-my-xl {
    margin-top: $spacing-xl;
    margin-bottom: $spacing-xl;
}
.vn-mx-xl {
    margin-left: $spacing-xl;
    margin-right: $spacing-xl;
}