Responsive push/pull for uikit

grid-push-pull.less

/* Small */
@media (min-width: 480px) {

    [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%; }

}
/* Medium */
@media (min-width: 768px) {

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

    /*
     * Push
     */

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

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

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

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

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

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

    /*
     * Pull
     */

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

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

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

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

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

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

}

/* Large */
@media (min-width: 960px) {

    [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: 1220px) {

    [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%; }

}