colette/src/styl/_mixins/_spaces.styl

A CSS and JS starter kit for 20 Minutes web projects

// Spaces
//
// Spaces mixins return `margin` and `padding` properties based on a multiple of the `$grid-gutter` size.
// <br /> Note that `$grid-gutter` value is defined in Colette’s settings, but it can be overridden in your project stylus file.
//
// Styleguide: Mixins.Spaces

@require '_map'

_gutters(i)
    if typeof(i) == 'unit' && unit(i) == ''
        return i * _rem($grid-gutter)
    return i

// _p()
//
// Returns a `padding` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .one-argument
//     _p(1)
//
// .multiple-arguments
//     _p(1 2 3 4)
// ```
// will compile to
// ```css
// /* my_file.css */
// .one-argument {
//     padding: 1rem;
// }
//
// .multiple-arguments {
//     padding: 1rem 2rem 3rem 4rem;
// }
// ```
//
// args   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.pa
_p(values)
    if length(values) > 4
        warn('_p can only receive a list of 4 numbers max')
    padding map(values, _gutters)


// _pt()
//
// Returns a `padding-top` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .foo
//     _pt(1)
// ```
// will compile to
// ```css
// /* my_file.css */
// .foo {
//     padding-top: 1rem;
// }
// ```
//
// $i   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.pt
_pt(i)
    padding-top _gutters(i)


// _pr()
//
// Returns a `padding-right` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .foo
//     _pr(1)
// ```
// will compile to
// ```css
// /* my_file.css */
// .foo {
//     padding-right: 1rem;
// }
// ```
//
// $i   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.pr
_pr(i)
    padding-right _gutters(i)


// _pb()
//
// Returns a `padding-bottom` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .foo
//     _pb(1)
// ```
// will compile to
// ```css
// /* my_file.css */
// .foo {
//     padding-bottom: 1rem;
// }
// ```
//
// $i   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.pb
_pb(i)
    padding-bottom _gutters(i)


// _pl()
//
// Returns a `padding-left` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .foo
//     _pl(1)
// ```
// will compile to
// ```css
// /* my_file.css */
// .foo {
//     padding-left: 1rem;
// }
// ```
//
// $i   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.pl
_pl(i)
    padding-left _gutters(i)


// _m()
//
// Returns a `margin` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .one-argument
//     _m(1)
//
// .multiple-arguments
//     _m(1 2 3 4)
// ```
// will compile to
// ```css
// /* my_file.css */
// .one-argument {
//     margin: 1rem;
// }
//
// .multiple-arguments {
//     margin: 1rem 2rem 3rem 4rem;
// }
// ```
//
// args   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.ma
_m(values)
    if length(values) > 4
        warn('_m can only receive a list of 4 numbers max')
    margin map(values, _gutters)


// _mt()
//
// Returns a `margin-top` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .foo
//     _mt(1)
// ```
// will compile to
// ```css
// /* my_file.css */
// .foo {
//     margin-top: 1rem;
// }
// ```
//
// $i   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.mt
_mt(i)
    margin-top _gutters(i)


// _mr()
//
// Returns a `margin-right` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .foo
//     _mr(1)
// ```
// will compile to
// ```css
// /* my_file.css */
// .foo {
//     margin-right: 1rem;
// }
// ```
//
// $i   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.mr
_mr(i)
    margin-right _gutters(i)


// _mb()
//
// Returns a `margin-bottom` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .foo
//     _mb(1)
// ```
// will compile to
// ```css
// /* my_file.css */
// .foo {
//     margin-bottom: 1rem;
// }
// ```
//
// $i   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.mb
_mb(i)
    margin-bottom _gutters(i)


// _ml()
//
// Returns a `margin-left` based on `$grid-gutter` value.
// ```stylus
// /* my_file.styl */
// $grid-gutter = 16px // overrides colette’s default value
// .foo
//     _ml(1)
// ```
// will compile to
// ```css
// /* my_file.css */
// .foo {
//     margin-left: 2rem;
// }
// ```
//
// $i   - multiplier of `$grid-gutter`
//
// Styleguide: Mixins.Spaces.ml
_ml(i)
    margin-left _gutters(i)