Skip to content

Instantly share code, notes, and snippets.

@pixelwhip

pixelwhip/magic-padding.scss

Last active April 8, 2020 17:37
Download ZIP

Revisions

  1. pixelwhip revised this gist Jan 16, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion magic-padding.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@
    content: '';
    display: block;
    margin-top: $value;
    height: .0001em;
    height: .001em;
    }
    }

  2. pixelwhip revised this gist Jan 15, 2014. 1 changed file with 23 additions and 12 deletions.
    35 changes: 23 additions & 12 deletions magic-padding.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,31 @@
    //
    // @file
    // Magic Padding mixin.
    // Magic Padding mixins.
    //

    // Replaces bottom padding with an :after psuedo element with top margin, giving
    // the illusion of the bottom padding collapsing with the bottom margin of the
    // last child within the element.
    //
    // @param $value
    // Any CSS measurement.

    @mixin magic-padding-bottom($value) {
    &:after {
    content: '';
    display: block;
    margin-top: $value;
    height: .0001em;
    }
    }

    //
    // Adds padding to all four sides of an element. Replacing bottom padding with
    // an :after psuedo element with top margin, giving the illusion of the bottom
    // padding collapsing with the bottom margin of the last child within the
    // element.
    // an :after psuedo element with top margin.
    //
    // @params $values
    // @param $values
    // Same as CSS shorthand padding.
    // ---------------------------------------------------------------------------
    //

    @mixin magic-padding($values) {
    $length: length($values);
    @@ -37,10 +53,5 @@

    padding: $top $right 0 $left;

    &:after {
    content: '';
    display: block;
    margin-top: $bottom;
    height: .0001em;
    }
    @include magic-padding-bottom($bottom);
    }
  3. pixelwhip renamed this gist Jan 15, 2014. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → magic-padding.scss
    View file
    File renamed without changes.
  4. pixelwhip created this gist Jan 15, 2014.
    46 changes: 46 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    //
    // @file
    // Magic Padding mixin.
    //
    // Adds padding to all four sides of an element. Replacing bottom padding with
    // an :after psuedo element with top margin, giving the illusion of the bottom
    // padding collapsing with the bottom margin of the last child within the
    // element.
    //
    // @params $values
    // Same as CSS shorthand padding.
    // ---------------------------------------------------------------------------

    @mixin magic-padding($values) {
    $length: length($values);
    $top: nth($values, 1);
    $right: $top;
    $bottom: $top;
    $left: $top;

    @if $length == 2 {
    $right: nth($values, 2);
    $left: $right;
    }

    @else if $length == 3 {
    $right: nth($values, 2);
    $bottom: nth($values, 3);
    $left: $right;
    }

    @else if $length >= 4 {
    $right: nth($values, 2);
    $bottom: nth($values, 3);
    $left: nth($values, 4);
    }

    padding: $top $right 0 $left;

    &:after {
    content: '';
    display: block;
    margin-top: $bottom;
    height: .0001em;
    }
    }