# All files / shorthands padding.js

100% Statements 1/1
100% Branches 0/0
100% Functions 1/1
100% Lines 1/1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32

    4x

     // @flow
    import directionalProperty from '../helpers/directionalProperty'

    /**
     * The padding shorthand accepts up to four values, including null to skip a value, and uses the directional-property mixin to map them to their respective directions.
     * @example
     * // Styles as object usage
     * const styles = {
     *   ...padding('12px', '24px', '36px', '48px')
     * }
     *
     * // styled-components usage
     * const div = styled.div`
     *   ${padding('12px', '24px', '36px', '48px')}
     * `
     *
     * // CSS as JS Output
     *
     * div {
     *   'padding-top': '12px',
     *   'padding-right': '24px',
     *   'padding-bottom': '36px',
     *   'padding-left': '48px'
     * }
     */

    function padding(...values: Array<?string>) {
      return directionalProperty('padding', ...values)
    }

    export default padding