Responsive push/pull for uikit

grid-push-pull.less

/* Small */
@media (max-width: @breakpoint-small-max) {

    [class*='uk-push-small-'],
    [class*='uk-pull-small-'] { position: relative; }

    /*
     * Push
     */

    /* Halves */
    .uk-push-small-1-2,
    .uk-push-small-2-4,
    .uk-push-small-3-6,
    .uk-push-small-5-10 { left: 50%; }

    /* Thirds */
    .uk-push-small-1-3,
    .uk-push-small-2-6 { left: 33.333%; }
    .uk-push-small-2-3,
    .uk-push-small-4-6 { left: 66.666%; }

    /* Quarters */
    .uk-push-small-1-4 { left: 25%; }
    .uk-push-small-3-4 { left: 75%; }

    /* Fifths */
    .uk-push-small-1-5,
    .uk-push-small-2-10 { left: 20%; }
    .uk-push-small-2-5,
    .uk-push-small-4-10 { left: 40%; }
    .uk-push-small-3-5,
    .uk-push-small-6-10 { left: 60%; }
    .uk-push-small-4-5,
    .uk-push-small-8-10 { left: 80%; }

    /* Sixths */
    .uk-push-small-1-6 { left: 16.666%; }
    .uk-push-small-5-6 { left: 83.333%; }

    /* Tenths */
    .uk-push-small-1-10 { left: 10%; }
    .uk-push-small-3-10 { left: 30%; }
    .uk-push-small-7-10 { left: 70%; }
    .uk-push-small-9-10 { left: 90%; }

    /*
     * Pull
     */

     /* Halves */
     .uk-pull-small-1-2,
     .uk-pull-small-2-4,
     .uk-pull-small-3-6,
     .uk-pull-small-5-10 { left: -50%; }

     /* Thirds */
     .uk-pull-small-1-3,
     .uk-pull-small-2-6 { left: -33.333%; }
     .uk-pull-small-2-3,
     .uk-pull-small-4-6 { left: -66.666%; }

     /* Quarters */
     .uk-pull-small-1-4 { left: -25%; }
     .uk-pull-small-3-4 { left: -75%; }

     /* Fifths */
     .uk-pull-small-1-5,
     .uk-pull-small-2-10 { left: -20%; }
     .uk-pull-small-2-5,
     .uk-pull-small-4-10 { left: -40%; }
     .uk-pull-small-3-5,
     .uk-pull-small-6-10 { left: -60%; }
     .uk-pull-small-4-5,
     .uk-pull-small-8-10 { left: -80%; }

     /* Sixths */
     .uk-pull-small-1-6 { left: -16.666%; }
     .uk-pull-small-5-6 { left: -83.333%; }

     /* Tenths */
     .uk-pull-small-1-10 { left: -10%; }
     .uk-pull-small-3-10 { left: -30%; }
     .uk-pull-small-7-10 { left: -70%; }
     .uk-pull-small-9-10 { left: -90%; }

}

/* Large */
@media (min-width: @breakpoint-large) {

    [class*='uk-push-large-'],
    [class*='uk-pull-large-'] { position: relative; }

    /*
     * Push
     */

    /* Halves */
    .uk-push-large-1-2,
    .uk-push-large-2-4,
    .uk-push-large-3-6,
    .uk-push-large-5-10 { left: 50%; }

    /* Thirds */
    .uk-push-large-1-3,
    .uk-push-large-2-6 { left: 33.333%; }
    .uk-push-large-2-3,
    .uk-push-large-4-6 { left: 66.666%; }

    /* Quarters */
    .uk-push-large-1-4 { left: 25%; }
    .uk-push-large-3-4 { left: 75%; }

    /* Fifths */
    .uk-push-large-1-5,
    .uk-push-large-2-10 { left: 20%; }
    .uk-push-large-2-5,
    .uk-push-large-4-10 { left: 40%; }
    .uk-push-large-3-5,
    .uk-push-large-6-10 { left: 60%; }
    .uk-push-large-4-5,
    .uk-push-large-8-10 { left: 80%; }

    /* Sixths */
    .uk-push-large-1-6 { left: 16.666%; }
    .uk-push-large-5-6 { left: 83.333%; }

    /* Tenths */
    .uk-push-large-1-10 { left: 10%; }
    .uk-push-large-3-10 { left: 30%; }
    .uk-push-large-7-10 { left: 70%; }
    .uk-push-large-9-10 { left: 90%; }

    /*
     * Pull
     */

     /* Halves */
     .uk-pull-large-1-2,
     .uk-pull-large-2-4,
     .uk-pull-large-3-6,
     .uk-pull-large-5-10 { left: -50%; }

     /* Thirds */
     .uk-pull-large-1-3,
     .uk-pull-large-2-6 { left: -33.333%; }
     .uk-pull-large-2-3,
     .uk-pull-large-4-6 { left: -66.666%; }

     /* Quarters */
     .uk-pull-large-1-4 { left: -25%; }
     .uk-pull-large-3-4 { left: -75%; }

     /* Fifths */
     .uk-pull-large-1-5,
     .uk-pull-large-2-10 { left: -20%; }
     .uk-pull-large-2-5,
     .uk-pull-large-4-10 { left: -40%; }
     .uk-pull-large-3-5,
     .uk-pull-large-6-10 { left: -60%; }
     .uk-pull-large-4-5,
     .uk-pull-large-8-10 { left: -80%; }

     /* Sixths */
     .uk-pull-large-1-6 { left: -16.666%; }
     .uk-pull-large-5-6 { left: -83.333%; }

     /* Tenths */
     .uk-pull-large-1-10 { left: -10%; }
     .uk-pull-large-3-10 { left: -30%; }
     .uk-pull-large-7-10 { left: -70%; }
     .uk-pull-large-9-10 { left: -90%; }

}

/* xLarge */
@media (min-width: @breakpoint-xlarge) {

    [class*='uk-push-xlarge-'],
    [class*='uk-pull-xlarge-'] { position: relative; }

    /*
     * Push
     */

    /* Halves */
    .uk-push-xlarge-1-2,
    .uk-push-xlarge-2-4,
    .uk-push-xlarge-3-6,
    .uk-push-xlarge-5-10 { left: 50%; }

    /* Thirds */
    .uk-push-xlarge-1-3,
    .uk-push-xlarge-2-6 { left: 33.333%; }
    .uk-push-xlarge-2-3,
    .uk-push-xlarge-4-6 { left: 66.666%; }

    /* Quarters */
    .uk-push-xlarge-1-4 { left: 25%; }
    .uk-push-xlarge-3-4 { left: 75%; }

    /* Fifths */
    .uk-push-xlarge-1-5,
    .uk-push-xlarge-2-10 { left: 20%; }
    .uk-push-xlarge-2-5,
    .uk-push-xlarge-4-10 { left: 40%; }
    .uk-push-xlarge-3-5,
    .uk-push-xlarge-6-10 { left: 60%; }
    .uk-push-xlarge-4-5,
    .uk-push-xlarge-8-10 { left: 80%; }

    /* Sixths */
    .uk-push-xlarge-1-6 { left: 16.666%; }
    .uk-push-xlarge-5-6 { left: 83.333%; }

    /* Tenths */
    .uk-push-xlarge-1-10 { left: 10%; }
    .uk-push-xlarge-3-10 { left: 30%; }
    .uk-push-xlarge-7-10 { left: 70%; }
    .uk-push-xlarge-9-10 { left: 90%; }

    /*
     * Pull
     */

     /* Halves */
     .uk-pull-xlarge-1-2,
     .uk-pull-xlarge-2-4,
     .uk-pull-xlarge-3-6,
     .uk-pull-xlarge-5-10 { left: -50%; }

     /* Thirds */
     .uk-pull-xlarge-1-3,
     .uk-pull-xlarge-2-6 { left: -33.333%; }
     .uk-pull-xlarge-2-3,
     .uk-pull-xlarge-4-6 { left: -66.666%; }

     /* Quarters */
     .uk-pull-xlarge-1-4 { left: -25%; }
     .uk-pull-xlarge-3-4 { left: -75%; }

     /* Fifths */
     .uk-pull-xlarge-1-5,
     .uk-pull-xlarge-2-10 { left: -20%; }
     .uk-pull-xlarge-2-5,
     .uk-pull-xlarge-4-10 { left: -40%; }
     .uk-pull-xlarge-3-5,
     .uk-pull-xlarge-6-10 { left: -60%; }
     .uk-pull-xlarge-4-5,
     .uk-pull-xlarge-8-10 { left: -80%; }

     /* Sixths */
     .uk-pull-xlarge-1-6 { left: -16.666%; }
     .uk-pull-xlarge-5-6 { left: -83.333%; }

     /* Tenths */
     .uk-pull-xlarge-1-10 { left: -10%; }
     .uk-pull-xlarge-3-10 { left: -30%; }
     .uk-pull-xlarge-7-10 { left: -70%; }
     .uk-pull-xlarge-9-10 { left: -90%; }

}