spacing.js

/**
 * Spacing utility styles with Bootstrap inspired naming.
 * All styles should be incremented by units of 4.
 *
 * https://getbootstrap.com/docs/5.0/utilities/spacing
 */
export default {
    m0: {
        margin: 0,
    },

    m2: {
        margin: 8,
    },

    m4: {
        margin: 16,
    },

    m5: {
        margin: 20,
    },

    mh0: {
        marginHorizontal: 0,
    },

    mh1: {
        marginHorizontal: 4,
    },

    mh2: {
        marginHorizontal: 8,
    },

    mh3: {
        marginHorizontal: 12,
    },

    mh4: {
        marginHorizontal: 16,
    },

    mh5: {
        marginHorizontal: 20,
    },

    mh8: {
        marginHorizontal: 32,
    },

    mhn5: {
        marginHorizontal: -20,
    },

    mv1: {
        marginVertical: 4,
    },

    mv2: {
        marginVertical: 8,
    },

    mv3: {
        marginVertical: 12,
    },

    mv4: {
        marginVertical: 16,
    },

    mv5: {
        marginVertical: 20,
    },

    mr0: {
        marginRight: 0,
    },

    mr1: {
        marginRight: 4,
    },

    mr2: {
        marginRight: 8,
    },

    mr3: {
        marginRight: 12,
    },

    mr4: {
        marginRight: 16,
    },

    mr5: {
        marginRight: 20,
    },

    mr8: {
        marginRight: 32,
    },

    mrn5: {
        marginRight: -20,
    },

    mrn8: {
        marginRight: -32,
    },

    mlAuto: {
        marginLeft: 'auto',
    },

    ml1: {
        marginLeft: 4,
    },

    ml2: {
        marginLeft: 8,
    },

    ml3: {
        marginLeft: 12,
    },

    ml4: {
        marginLeft: 16,
    },

    ml5: {
        marginLeft: 20,
    },

    ml6: {
        marginLeft: 24,
    },

    ml8: {
        marginLeft: 32,
    },

    ml10: {
        marginLeft: 40,
    },

    ml18: {
        marginLeft: 72,
    },

    mln5: {
        marginLeft: -20,
    },

    mln8: {
        marginLeft: -32,
    },

    mt1: {
        marginTop: 4,
    },

    mt2: {
        marginTop: 8,
    },

    mt3: {
        marginTop: 12,
    },

    mt4: {
        marginTop: 16,
    },

    mt5: {
        marginTop: 20,
    },

    mt6: {
        marginTop: 24,
    },

    mt8: {
        marginTop: 32,
    },

    mt11: {
        marginTop: 44,
    },

    mtAuto: {
        marginTop: 'auto',
    },

    mb0: {
        marginBottom: 0,
    },

    mb1: {
        marginBottom: 4,
    },

    mb2: {
        marginBottom: 8,
    },

    mb3: {
        marginBottom: 12,
    },

    mb4: {
        marginBottom: 16,
    },

    mb5: {
        marginBottom: 20,
    },

    mb6: {
        marginBottom: 24,
    },

    mb7: {
        marginBottom: 28,
    },

    mb8: {
        marginBottom: 32,
    },

    mb15: {
        marginBottom: 60,
    },

    mbn1: {
        marginBottom: -4,
    },

    p0: {
        padding: 0,
        paddingHorizontal: 0,
        paddingVertical: 0,
    },

    p1: {
        padding: 4,
    },

    p2: {
        padding: 8,
    },

    p3: {
        padding: 12,
    },

    p4: {
        padding: 16,
    },

    p5: {
        padding: 20,
    },
    p10: {
        padding: 40,
    },
    p20: {
        padding: 80,
    },

    pv0: {
        paddingTop: 0,
        paddingBottom: 0,
    },

    pv1: {
        paddingVertical: 4,
    },

    pv2: {
        paddingVertical: 8,
    },

    pv3: {
        paddingVertical: 12,
    },

    pv4: {
        paddingVertical: 16,
    },

    pv5: {
        paddingVertical: 20,
    },

    pv10: {
        paddingVertical: 40,
    },

    ph0: {
        paddingHorizontal: 0,
    },

    ph1: {
        paddingHorizontal: 4,
    },

    ph2: {
        paddingHorizontal: 8,
    },

    ph3: {
        paddingHorizontal: 12,
    },

    ph4: {
        paddingHorizontal: 16,
    },

    ph5: {
        paddingHorizontal: 20,
    },

    ph6: {
        paddingHorizontal: 24,
    },

    ph8: {
        paddingHorizontal: 32,
    },

    ph10: {
        paddingHorizontal: 40,
    },

    ph15: {
        paddingHorizontal: 60,
    },

    ph25: {
        paddingHorizontal: 100,
    },

    pr0: {
        paddingRight: 0,
    },

    pr1: {
        paddingRight: 4,
    },

    pr2: {
        paddingRight: 8,
    },

    pr4: {
        paddingRight: 16,
    },

    pr5: {
        paddingRight: 20,
    },

    pr9: {
        paddingRight: 32,
    },

    pr15: {
        paddingRight: 60,
    },

    pl0: {
        paddingLeft: 0,
    },

    pl1: {
        paddingLeft: 4,
    },

    pl2: {
        paddingLeft: 8,
    },

    pl5: {
        paddingLeft: 20,
    },

    pl6: {
        paddingLeft: 24,
    },

    pl10: {
        paddingLeft: 40,
    },

    pt0: {
        paddingTop: 0,
    },

    pt1: {
        paddingTop: 4,
    },

    pt2: {
        paddingTop: 8,
    },

    pt3: {
        paddingTop: 12,
    },

    pt4: {
        paddingTop: 16,
    },

    pt5: {
        paddingTop: 20,
    },

    pt10: {
        paddingTop: 40,
    },

    pt20: {
        paddingTop: 80,
    },

    pb1: {
        paddingBottom: 4,
    },

    pb2: {
        paddingBottom: 8,
    },

    pb3: {
        paddingBottom: 12,
    },

    pb4: {
        paddingBottom: 16,
    },

    pb5: {
        paddingBottom: 20,
    },

    pb8: {
        paddingBottom: 32,
    },

    pb20: {
        paddingBottom: 80,
    },

    pb10Percentage: {
        paddingBottom: '10%',
    },

    gap1: {
        gap: 4,
    },

    gap7: {
        gap: 28,
    },
};