/* === Grid === */ .md { @cols: 5, 10, 15, 20, 25, 30, 100/3, 35, 40, 45, 50, 55, 60, 65, 100*(2/3), 70, 75, 80, 85, 90, 95, 100; .row { .-(@i: length(@cols)) when (@i > 0) { @divider: e(extract(@cols, @i)); @className: framework7_floor(@divider); @n: framework7_calculateN(@divider); @n-1: @n - 1; .col-@{className} { width: ~"@{divider}%"; width: ~"-webkit-calc((100% - 16px*@{n-1}) / @{n})"; width: ~"calc((100% - 16px*@{n-1}) / @{n})"; } &.no-gap { .col-@{className} { width: ~"@{divider}%"; } } .-((@i - 1)); } .-; .--(@j: 1) when (@j < length(@cols)) { .col:nth-last-child(@{j}), .col:nth-last-child(@{j}) ~ .col { @j-1: @j - 1; width: 100% / @j; width: ~"-webkit-calc((100% - 16px*@{j-1}) / @{j})"; width: ~"calc((100% - 16px*@{j-1}) / @{j})"; } &.no-gap { .col:nth-last-child(@{j}), .col:nth-last-child(@{j}) ~ .col { width: 100% / @j; } } .--((@j + 1)); } .--; } @media (min-width:768px) { .row { .-(@i: length(@cols)) when (@i > 0) { @divider: e(extract(@cols, @i)); @className: framework7_floor(@divider); @n: framework7_calculateN(@divider); @n-1: @n - 1; .tablet-@{className} { width: ~"@{divider}%"; width: ~"-webkit-calc((100% - 16px*@{n-1}) / @{n})"; width: ~"calc((100% - 16px*@{n-1}) / @{n})"; } &.no-gap { .tablet-@{className} { width: ~"@{divider}%"; } } .-((@i - 1)); } .-; .--(@j: 1) when (@j < length(@cols)) { .tablet-auto:nth-last-child(@{j}), .tablet-auto:nth-last-child(@{j}) ~ .tablet-auto { @j-1: @j - 1; width: 100% / @j; width: ~"-webkit-calc((100% - 16px*@{j-1}) / @{j})"; width: ~"calc((100% - 16px*@{j-1}) / @{j})"; } &.no-gap { .tablet-auto:nth-last-child(@{j}), .tablet-auto:nth-last-child(@{j}) ~ .tablet-auto { width: 100% / @j; } } .--((@j + 1)); } .--; } } @media (min-width:1025px) { .row { .-(@i: length(@cols)) when (@i > 0) { @divider: e(extract(@cols, @i)); @className: framework7_floor(@divider); @n: framework7_calculateN(@divider); @n-1: @n - 1; .desktop-@{className} { width: ~"@{divider}%"; width: ~"-webkit-calc((100% - 16px*@{n-1}) / @{n})"; width: ~"calc((100% - 16px*@{n-1}) / @{n})"; } &.no-gap { .desktop-@{className} { width: ~"@{divider}%"; } } .-((@i - 1)); } .-; .--(@j: 1) when (@j < length(@cols)) { .desktop-auto:nth-last-child(@{j}), .desktop-auto:nth-last-child(@{j}) ~ .desktop-auto { @j-1: @j - 1; width: 100% / @j; width: ~"-webkit-calc((100% - 16px*@{j-1}) / @{j})"; width: ~"calc((100% - 16px*@{j-1}) / @{j})"; } &.no-gap { .desktop-auto:nth-last-child(@{j}), .desktop-auto:nth-last-child(@{j}) ~ .desktop-auto { width: 100% / @j; } } .--((@j + 1)); } .--; } } }