uikit3-extra-widths/uikit2/grid-ex.css

Adds back in 7, 8, 9, 10 and 12 columns for UIkit 3

/* ========================================================================
   Component: Width extended
 ========================================================================== */
/* Even grid cell widths
 ========================================================================== */
.uk-grid-width-1-7 > * {
  width: 14.285%;
}
.uk-grid-width-1-8 > * {
  width: 12.5%;
}
.uk-grid-width-1-9 > * {
  width: 11.111%;
}
.uk-grid-width-1-12 > * {
  width: 8.333%;
}
/* Phone landscape and bigger */
@media (min-width: 480px) {
  .uk-grid-width-small-1-7 > * {
    width: 14.285%;
  }
  .uk-grid-width-small-1-8 > * {
    width: 12.5%;
  }
  .uk-grid-width-small-1-9 > * {
    width: 11.111%;
  }
  .uk-grid-width-small-1-12 > * {
    width: 8.333%;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 768px) {
  .uk-grid-width-medium-1-7 > * {
    width: 14.285%;
  }
  .uk-grid-width-medium-1-8 > * {
    width: 12.5%;
  }
  .uk-grid-width-medium-1-9 > * {
    width: 11.111%;
  }
  .uk-grid-width-medium-1-12 > * {
    width: 8.333%;
  }
}
/* Desktop and bigger */
@media (min-width: 960px) {
  .uk-grid-width-large-1-7 > * {
    width: 14.285%;
  }
  .uk-grid-width-large-1-8 > * {
    width: 12.5%;
  }
  .uk-grid-width-large-1-9 > * {
    width: 11.111%;
  }
  .uk-grid-width-large-1-12 > * {
    width: 8.333%;
  }
}
/* Large screen and bigger */
@media (min-width: 1220px) {
  .uk-grid-width-xlarge-1-7 > * {
    width: 14.285%;
  }
  .uk-grid-width-xlarge-1-8 > * {
    width: 12.5%;
  }
  .uk-grid-width-xlarge-1-9 > * {
    width: 11.111%;
  }
  .uk-grid-width-xlarge-1-12 > * {
    width: 8.333%;
  }
}
/* Single Widths
 ========================================================================== */
.uk-width-1-7 {
  width: 14.285%;
}
.uk-width-2-7 {
  width: 28.571%;
}
.uk-width-3-7 {
  width: 42.857%;
}
.uk-width-4-7 {
  width: 57.142%;
}
.uk-width-5-7 {
  width: 71.428%;
}
.uk-width-6-7 {
  width: 85.714%;
}
.uk-width-1-8 {
  width: 12.5%;
}
.uk-width-2-8 {
  width: 25%;
}
.uk-width-3-8 {
  width: 37.5%;
}
.uk-width-4-8 {
  width: 50%;
}
.uk-width-5-8 {
  width: 62.5%;
}
.uk-width-6-8 {
  width: 75%;
}
.uk-width-7-8 {
  width: 87.5%;
}
.uk-width-1-9 {
  width: 11.111%;
}
.uk-width-2-9 {
  width: 22.222%;
}
.uk-width-3-9 {
  width: 33.333%;
}
.uk-width-4-9 {
  width: 44.444%;
}
.uk-width-5-9 {
  width: 55.555%;
}
.uk-width-6-9 {
  width: 66.666%;
}
.uk-width-7-9 {
  width: 77.777%;
}
.uk-width-8-9 {
  width: 88.888%;
}
.uk-width-1-12 {
  width: 8.333%;
}
.uk-width-2-12 {
  width: 16.666%;
}
.uk-width-3-12 {
  width: 25%;
}
.uk-width-4-12 {
  width: 33.333%;
}
.uk-width-5-12 {
  width: 41.666%;
}
.uk-width-6-12 {
  width: 50%;
}
.uk-width-7-12 {
  width: 58.333%;
}
.uk-width-8-12 {
  width: 66.666%;
}
.uk-width-9-12 {
  width: 75%;
}
.uk-width-10-12 {
  width: 83.333%;
}
.uk-width-11-12 {
  width: 91.666%;
}
/* Phone landscape and bigger */
@media (min-width: 480px) {
  .uk-width-small-1-7 {
    width: 14.285%;
  }
  .uk-width-small-2-7 {
    width: 28.571%;
  }
  .uk-width-small-3-7 {
    width: 42.857%;
  }
  .uk-width-small-4-7 {
    width: 57.142%;
  }
  .uk-width-small-5-7 {
    width: 71.428%;
  }
  .uk-width-small-6-7 {
    width: 85.714%;
  }
  .uk-width-small-1-8 {
    width: 12.5%;
  }
  .uk-width-small-2-8 {
    width: 25%;
  }
  .uk-width-small-3-8 {
    width: 37.5%;
  }
  .uk-width-small-4-8 {
    width: 50%;
  }
  .uk-width-small-5-8 {
    width: 62.5%;
  }
  .uk-width-small-6-8 {
    width: 75%;
  }
  .uk-width-small-7-8 {
    width: 87.5%;
  }
  .uk-width-small-1-9 {
    width: 11.111%;
  }
  .uk-width-small-2-9 {
    width: 22.222%;
  }
  .uk-width-small-3-9 {
    width: 33.333%;
  }
  .uk-width-small-4-9 {
    width: 44.444%;
  }
  .uk-width-small-5-9 {
    width: 55.555%;
  }
  .uk-width-small-6-9 {
    width: 66.666%;
  }
  .uk-width-small-7-9 {
    width: 77.777%;
  }
  .uk-width-small-8-9 {
    width: 88.888%;
  }
  .uk-width-small-1-12 {
    width: 8.333%;
  }
  .uk-width-small-2-12 {
    width: 16.666%;
  }
  .uk-width-small-3-12 {
    width: 25%;
  }
  .uk-width-small-4-12 {
    width: 33.333%;
  }
  .uk-width-small-5-12 {
    width: 41.666%;
  }
  .uk-width-small-6-12 {
    width: 50%;
  }
  .uk-width-small-7-12 {
    width: 58.333%;
  }
  .uk-width-small-8-12 {
    width: 66.666%;
  }
  .uk-width-small-9-12 {
    width: 75%;
  }
  .uk-width-small-10-12 {
    width: 83.333%;
  }
  .uk-width-small-11-12 {
    width: 91.666%;
  }
}
/* Tablet and bigger */
@media (min-width: 768px) {
  .uk-width-medium-1-7 {
    width: 14.285%;
  }
  .uk-width-medium-2-7 {
    width: 28.571%;
  }
  .uk-width-medium-3-7 {
    width: 42.857%;
  }
  .uk-width-medium-4-7 {
    width: 57.142%;
  }
  .uk-width-medium-5-7 {
    width: 71.428%;
  }
  .uk-width-medium-6-7 {
    width: 85.714%;
  }
  .uk-width-medium-1-8 {
    width: 12.5%;
  }
  .uk-width-medium-2-8 {
    width: 25%;
  }
  .uk-width-medium-3-8 {
    width: 37.5%;
  }
  .uk-width-medium-4-8 {
    width: 50%;
  }
  .uk-width-medium-5-8 {
    width: 62.5%;
  }
  .uk-width-medium-6-8 {
    width: 75%;
  }
  .uk-width-medium-7-8 {
    width: 87.5%;
  }
  .uk-width-medium-1-9 {
    width: 11.111%;
  }
  .uk-width-medium-2-9 {
    width: 22.222%;
  }
  .uk-width-medium-3-9 {
    width: 33.333%;
  }
  .uk-width-medium-4-9 {
    width: 44.444%;
  }
  .uk-width-medium-5-9 {
    width: 55.555%;
  }
  .uk-width-medium-6-9 {
    width: 66.666%;
  }
  .uk-width-medium-7-9 {
    width: 77.777%;
  }
  .uk-width-medium-8-9 {
    width: 88.888%;
  }
  .uk-width-medium-1-12 {
    width: 8.333%;
  }
  .uk-width-medium-2-12 {
    width: 16.666%;
  }
  .uk-width-medium-3-12 {
    width: 25%;
  }
  .uk-width-medium-4-12 {
    width: 33.333%;
  }
  .uk-width-medium-5-12 {
    width: 41.666%;
  }
  .uk-width-medium-6-12 {
    width: 50%;
  }
  .uk-width-medium-7-12 {
    width: 58.333%;
  }
  .uk-width-medium-8-12 {
    width: 66.666%;
  }
  .uk-width-medium-9-12 {
    width: 75%;
  }
  .uk-width-medium-10-12 {
    width: 83.333%;
  }
  .uk-width-medium-11-12 {
    width: 91.666%;
  }
}
/* Desktop and bigger */
@media (min-width: 960px) {
  .uk-width-large-1-7 {
    width: 14.285%;
  }
  .uk-width-large-2-7 {
    width: 28.571%;
  }
  .uk-width-large-3-7 {
    width: 42.857%;
  }
  .uk-width-large-4-7 {
    width: 57.142%;
  }
  .uk-width-large-5-7 {
    width: 71.428%;
  }
  .uk-width-large-6-7 {
    width: 85.714%;
  }
  .uk-width-large-1-8 {
    width: 12.5%;
  }
  .uk-width-large-2-8 {
    width: 25%;
  }
  .uk-width-large-3-8 {
    width: 37.5%;
  }
  .uk-width-large-4-8 {
    width: 50%;
  }
  .uk-width-large-5-8 {
    width: 62.5%;
  }
  .uk-width-large-6-8 {
    width: 75%;
  }
  .uk-width-large-7-8 {
    width: 87.5%;
  }
  .uk-width-large-1-9 {
    width: 11.111%;
  }
  .uk-width-large-2-9 {
    width: 22.222%;
  }
  .uk-width-large-3-9 {
    width: 33.333%;
  }
  .uk-width-large-4-9 {
    width: 44.444%;
  }
  .uk-width-large-5-9 {
    width: 55.555%;
  }
  .uk-width-large-6-9 {
    width: 66.666%;
  }
  .uk-width-large-7-9 {
    width: 77.777%;
  }
  .uk-width-large-8-9 {
    width: 88.888%;
  }
  .uk-width-large-1-12 {
    width: 8.333%;
  }
  .uk-width-large-2-12 {
    width: 16.666%;
  }
  .uk-width-large-3-12 {
    width: 25%;
  }
  .uk-width-large-4-12 {
    width: 33.333%;
  }
  .uk-width-large-5-12 {
    width: 41.666%;
  }
  .uk-width-large-6-12 {
    width: 50%;
  }
  .uk-width-large-7-12 {
    width: 58.333%;
  }
  .uk-width-large-8-12 {
    width: 66.666%;
  }
  .uk-width-large-9-12 {
    width: 75%;
  }
  .uk-width-large-10-12 {
    width: 83.333%;
  }
  .uk-width-large-11-12 {
    width: 91.666%;
  }
}
/* Large screen and bigger */
@media (min-width: 1220px) {
  .uk-width-xlarge-1-7 {
    width: 14.285%;
  }
  .uk-width-xlarge-2-7 {
    width: 28.571%;
  }
  .uk-width-xlarge-3-7 {
    width: 42.857%;
  }
  .uk-width-xlarge-4-7 {
    width: 57.142%;
  }
  .uk-width-xlarge-5-7 {
    width: 71.428%;
  }
  .uk-width-xlarge-6-7 {
    width: 85.714%;
  }
  .uk-width-xlarge-1-8 {
    width: 12.5%;
  }
  .uk-width-xlarge-2-8 {
    width: 25%;
  }
  .uk-width-xlarge-3-8 {
    width: 37.5%;
  }
  .uk-width-xlarge-4-8 {
    width: 50%;
  }
  .uk-width-xlarge-5-8 {
    width: 62.5%;
  }
  .uk-width-xlarge-6-8 {
    width: 75%;
  }
  .uk-width-xlarge-7-8 {
    width: 87.5%;
  }
  .uk-width-xlarge-1-9 {
    width: 11.111%;
  }
  .uk-width-xlarge-2-9 {
    width: 22.222%;
  }
  .uk-width-xlarge-3-9 {
    width: 33.333%;
  }
  .uk-width-xlarge-4-9 {
    width: 44.444%;
  }
  .uk-width-xlarge-5-9 {
    width: 55.555%;
  }
  .uk-width-xlarge-6-9 {
    width: 66.666%;
  }
  .uk-width-xlarge-7-9 {
    width: 77.777%;
  }
  .uk-width-xlarge-8-9 {
    width: 88.888%;
  }
  .uk-width-xlarge-1-12 {
    width: 8.333%;
  }
  .uk-width-xlarge-2-12 {
    width: 16.666%;
  }
  .uk-width-xlarge-3-12 {
    width: 25%;
  }
  .uk-width-xlarge-4-12 {
    width: 33.333%;
  }
  .uk-width-xlarge-5-12 {
    width: 41.666%;
  }
  .uk-width-xlarge-6-12 {
    width: 50%;
  }
  .uk-width-xlarge-7-12 {
    width: 58.333%;
  }
  .uk-width-xlarge-8-12 {
    width: 66.666%;
  }
  .uk-width-xlarge-9-12 {
    width: 75%;
  }
  .uk-width-xlarge-10-12 {
    width: 83.333%;
  }
  .uk-width-xlarge-11-12 {
    width: 91.666%;
  }
}
/* Auto-columns: `*-auto` and `*-expand`
 ========================================================================== */
.uk-width-auto,
.uk-grid-width-auto > * {
  width: auto;
}
.uk-width-expand,
.uk-grid-width-expand > * {
  width: 0;
  -flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}
/* Phone landscape and bigger */
@media (min-width: 480px) {
  .uk-width-small-auto,
  .uk-grid-width-small-auto > * {
    width: auto;
  }
  .uk-width-small-expand,
  .uk-grid-width-small-expand > * {
    width: 0;
    -flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
}
/* Tablet and bigger */
@media (min-width: 768px) {
  .uk-width-medium-auto,
  .uk-grid-width-medium-auto > * {
    width: auto;
    -flex: none;
    -webkit-flex: none;
    flex: none;
  }
  .uk-width-medium-expand,
  .uk-grid-width-medium-expand > * {
    width: 0;
    -flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .uk-width-medium-expand,
  .uk-grid-width-medium-expand > :not([class*='uk-width']) {
    min-width: 0;
  }
}
/* Desktop and bigger */
@media (min-width: 960px) {
  .uk-width-large-auto,
  .uk-grid-width-large-auto > * {
    width: auto;
  }
  .uk-width-large-expand,
  .uk-grid-width-large-expand > * {
    width: 0;
    -flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
}
/* Large screen and bigger */
@media (min-width: 1220px) {
  .uk-width-xlarge-auto,
  .uk-grid-width-xlarge-auto > * {
    width: auto;
  }
  .uk-width-xlarge-expand,
  .uk-grid-width-xlarge-expand > * {
    width: 0;
    -flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
}
/* Sub-object: `uk-push-*` and `uk-pull-*`
 ========================================================================== */
/*
 * Source ordering
 * Works only with `uk-width-medium-*`
 */
@media (min-width: 768px) {
  .uk-push-1-7 {
    left: 14.285%;
  }
  .uk-push-2-7 {
    left: 28.571%;
  }
  .uk-push-3-7 {
    left: 42.857%;
  }
  .uk-push-4-7 {
    left: 57.142%;
  }
  .uk-push-5-7 {
    left: 71.428%;
  }
  .uk-push-6-7 {
    left: 85.714%;
  }
  .uk-push-1-8 {
    left: 12.5%;
  }
  .uk-push-2-8 {
    left: 25%;
  }
  .uk-push-3-8 {
    left: 37.5%;
  }
  .uk-push-4-8 {
    left: 50%;
  }
  .uk-push-5-8 {
    left: 62.5%;
  }
  .uk-push-6-8 {
    left: 75%;
  }
  .uk-push-7-8 {
    left: 87.5%;
  }
  .uk-push-1-9 {
    left: 11.111%;
  }
  .uk-push-2-9 {
    left: 22.222%;
  }
  .uk-push-3-9 {
    left: 33.333%;
  }
  .uk-push-4-9 {
    left: 44.444%;
  }
  .uk-push-5-9 {
    left: 55.555%;
  }
  .uk-push-6-9 {
    left: 66.666%;
  }
  .uk-push-7-9 {
    left: 77.777%;
  }
  .uk-push-8-9 {
    left: 88.888%;
  }
  .uk-push-1-12 {
    left: 8.333%;
  }
  .uk-push-2-12 {
    left: 16.666%;
  }
  .uk-push-3-12 {
    left: 25%;
  }
  .uk-push-4-12 {
    left: 33.333%;
  }
  .uk-push-5-12 {
    left: 41.666%;
  }
  .uk-push-6-12 {
    left: 50%;
  }
  .uk-push-7-12 {
    left: 58.333%;
  }
  .uk-push-8-12 {
    left: 66.666%;
  }
  .uk-push-9-12 {
    left: 75%;
  }
  .uk-push-10-12 {
    left: 83.333%;
  }
  .uk-push-11-12 {
    left: 91.666%;
  }
  .uk-pull-1-7 {
    left: 14.285%;
  }
  .uk-pull-2-7 {
    left: 28.571%;
  }
  .uk-pull-3-7 {
    left: 42.857%;
  }
  .uk-pull-4-7 {
    left: 57.142%;
  }
  .uk-pull-5-7 {
    left: 71.428%;
  }
  .uk-pull-6-7 {
    left: 85.714%;
  }
  .uk-pull-1-8 {
    left: 12.5%;
  }
  .uk-pull-2-8 {
    left: 25%;
  }
  .uk-pull-3-8 {
    left: 37.5%;
  }
  .uk-pull-4-8 {
    left: 50%;
  }
  .uk-pull-5-8 {
    left: 62.5%;
  }
  .uk-pull-6-8 {
    left: 75%;
  }
  .uk-pull-7-8 {
    left: 87.5%;
  }
  .uk-pull-1-9 {
    left: 11.111%;
  }
  .uk-pull-2-9 {
    left: 22.222%;
  }
  .uk-pull-3-9 {
    left: 33.333%;
  }
  .uk-pull-4-9 {
    left: 44.444%;
  }
  .uk-pull-5-9 {
    left: 55.555%;
  }
  .uk-pull-6-9 {
    left: 66.666%;
  }
  .uk-pull-7-9 {
    left: 77.777%;
  }
  .uk-pull-8-9 {
    left: 88.888%;
  }
  .uk-pull-1-12 {
    left: 8.333%;
  }
  .uk-pull-2-12 {
    left: 16.666%;
  }
  .uk-pull-3-12 {
    left: 25%;
  }
  .uk-pull-4-12 {
    left: 33.333%;
  }
  .uk-pull-5-12 {
    left: 41.666%;
  }
  .uk-pull-6-12 {
    left: 50%;
  }
  .uk-pull-7-12 {
    left: 58.333%;
  }
  .uk-pull-8-12 {
    left: 66.666%;
  }
  .uk-pull-9-12 {
    left: 75%;
  }
  .uk-pull-10-12 {
    left: 83.333%;
  }
  .uk-pull-11-12 {
    left: 91.666%;
  }
}