uikit3-extra-widths
Version:
Adds back in 7, 8, 9, 10 and 12 columns for UIkit 3
285 lines (217 loc) • 6.12 kB
text/less
// Name: Grid extended
// Description: Provides a responsive, fluid and nestable grid
//
// Component: `uk-width-*`
// `uk-push-*`
// `uk-pull-*`
//
// Modifiers: `uk-grid-width-*`
//
// ========================================================================
/*
@breakpoint-small: 480px;
@breakpoint-medium: 768px;
@breakpoint-large: 960px;
@breakpoint-xlarge: 1220px;
@breakpoint-mini-max: (@breakpoint-small - 1);
@breakpoint-small-max: (@breakpoint-medium - 1);
@breakpoint-medium-max: (@breakpoint-large - 1);
@breakpoint-large-max: (@breakpoint-xlarge - 1);
*/
/* ========================================================================
Component: Width extended
========================================================================== */
/* Mixins
========================================================================== */
.getProperty(@col: 1, @cols: 1, @val: ~'width')
{
@{val}: floor( @col * (100% / @cols) * 1000 ) / 1000;
}
.getCols (@cl, @i, @c, @val: ~'width') when (@i < @c)
{
.uk-@{cl}-@{i}-@{c} { .getProperty(@i, @c, @val); }
.getCols(@cl, @i + 1, @c, @val);
}
/* Even grid cell widths
========================================================================== */
.uk-grid-width-1-7 > * { .getProperty(1,7); }
.uk-grid-width-1-8 > * { .getProperty(1,8); }
.uk-grid-width-1-9 > * { .getProperty(1,9); }
.uk-grid-width-1-12 > * { .getProperty(1,12); }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.uk-grid-width-small-1-7 > * { .getProperty(1,7); }
.uk-grid-width-small-1-8 > * { .getProperty(1,8); }
.uk-grid-width-small-1-9 > * { .getProperty(1,9); }
.uk-grid-width-small-1-12 > * { .getProperty(1,12); }
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.uk-grid-width-medium-1-7 > * { .getProperty(1,7); }
.uk-grid-width-medium-1-8 > * { .getProperty(1,8); }
.uk-grid-width-medium-1-9 > * { .getProperty(1,9); }
.uk-grid-width-medium-1-12 > * { .getProperty(1,12); }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-grid-width-large-1-7 > * { .getProperty(1,7); }
.uk-grid-width-large-1-8 > * { .getProperty(1,8); }
.uk-grid-width-large-1-9 > * { .getProperty(1,9); }
.uk-grid-width-large-1-12 > * { .getProperty(1,12); }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.uk-grid-width-xlarge-1-7 > * { .getProperty(1,7); }
.uk-grid-width-xlarge-1-8 > * { .getProperty(1,8); }
.uk-grid-width-xlarge-1-9 > * { .getProperty(1,9); }
.uk-grid-width-xlarge-1-12 > * { .getProperty(1,12); }
}
/* Single Widths
========================================================================== */
.getCols(~'width', 1, 7);
.getCols(~'width', 1, 8);
.getCols(~'width', 1, 9);
.getCols(~'width', 1, 12);
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.getCols(~'width-small', 1, 7);
.getCols(~'width-small', 1, 8);
.getCols(~'width-small', 1, 9);
.getCols(~'width-small', 1, 12);
}
/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {
.getCols(~'width-medium', 1, 7);
.getCols(~'width-medium', 1, 8);
.getCols(~'width-medium', 1, 9);
.getCols(~'width-medium', 1, 12);
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.getCols(~'width-large', 1, 7);
.getCols(~'width-large', 1, 8);
.getCols(~'width-large', 1, 9);
.getCols(~'width-large', 1, 12);
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.getCols(~'width-xlarge', 1, 7);
.getCols(~'width-xlarge', 1, 8);
.getCols(~'width-xlarge', 1, 9);
.getCols(~'width-xlarge', 1, 12);
}
/* 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: @breakpoint-small)
{
.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: @breakpoint-medium)
{
.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: @breakpoint-large)
{
.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: @breakpoint-xlarge)
{
.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: @breakpoint-medium) {
.getCols(~'push', 1, 7, ~'left');
.getCols(~'push', 1, 8, ~'left');
.getCols(~'push', 1, 9, ~'left');
.getCols(~'push', 1, 12, ~'left');
.getCols(~'pull', 1, 7, ~'left');
.getCols(~'pull', 1, 8, ~'left');
.getCols(~'pull', 1, 9, ~'left');
.getCols(~'pull', 1, 12, ~'left');
}
// Hooks
// ========================================================================
.hook-grid-ex-misc;
.hook-grid-ex-misc() {}