Updated grid definitions
Optimization to code generatio for grid module, makes pre-defined layouts less complicated and less costly in terms of space.
This commit is contained in:
Angelos Chalaris
parent
41328781d1
commit
d0363e7b22
36
dist/mini-dark.css
vendored
36
dist/mini-dark.css
vendored
|
|
@ -227,37 +227,10 @@ figcaption {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row[class*='cols-sm-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
.row[class*='cols-md-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1280px) {
|
|
||||||
.row[class*='cols-lg-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-sm,
|
.col-sm,
|
||||||
[class^='col-sm-'],
|
[class^='col-sm-'],
|
||||||
[class^='col-sm-offset-'] {
|
[class^='col-sm-offset-'],
|
||||||
|
.row[class*='cols-sm-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -425,7 +398,7 @@ figcaption {
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.col-md,
|
.col-md,
|
||||||
[class^='col-md-'],
|
[class^='col-md-'],
|
||||||
[class^='col-md-offset-'] {
|
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -566,7 +539,8 @@ figcaption {
|
||||||
@media screen and (min-width: 1280px) {
|
@media screen and (min-width: 1280px) {
|
||||||
.col-lg,
|
.col-lg,
|
||||||
[class^='col-lg-'],
|
[class^='col-lg-'],
|
||||||
[class^='col-lg-offset-'] {
|
[class^='col-lg-offset-'],
|
||||||
|
.row[class*='cols-lg-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
|
||||||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
36
dist/mini-default.css
vendored
36
dist/mini-default.css
vendored
|
|
@ -228,37 +228,10 @@ figcaption {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row[class*='cols-sm-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
.row[class*='cols-md-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1280px) {
|
|
||||||
.row[class*='cols-lg-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-sm,
|
.col-sm,
|
||||||
[class^='col-sm-'],
|
[class^='col-sm-'],
|
||||||
[class^='col-sm-offset-'] {
|
[class^='col-sm-offset-'],
|
||||||
|
.row[class*='cols-sm-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -426,7 +399,7 @@ figcaption {
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.col-md,
|
.col-md,
|
||||||
[class^='col-md-'],
|
[class^='col-md-'],
|
||||||
[class^='col-md-offset-'] {
|
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -567,7 +540,8 @@ figcaption {
|
||||||
@media screen and (min-width: 1280px) {
|
@media screen and (min-width: 1280px) {
|
||||||
.col-lg,
|
.col-lg,
|
||||||
[class^='col-lg-'],
|
[class^='col-lg-'],
|
||||||
[class^='col-lg-offset-'] {
|
[class^='col-lg-offset-'],
|
||||||
|
.row[class*='cols-lg-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
|
||||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
36
dist/mini-lite.css
vendored
36
dist/mini-lite.css
vendored
|
|
@ -226,37 +226,10 @@ figcaption {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row[class*='cols-sm-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
.row[class*='cols-md-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1280px) {
|
|
||||||
.row[class*='cols-lg-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-sm,
|
.col-sm,
|
||||||
[class^='col-sm-'],
|
[class^='col-sm-'],
|
||||||
[class^='col-sm-offset-'] {
|
[class^='col-sm-offset-'],
|
||||||
|
.row[class*='cols-sm-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -424,7 +397,7 @@ figcaption {
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.col-md,
|
.col-md,
|
||||||
[class^='col-md-'],
|
[class^='col-md-'],
|
||||||
[class^='col-md-offset-'] {
|
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -565,7 +538,8 @@ figcaption {
|
||||||
@media screen and (min-width: 1280px) {
|
@media screen and (min-width: 1280px) {
|
||||||
.col-lg,
|
.col-lg,
|
||||||
[class^='col-lg-'],
|
[class^='col-lg-'],
|
||||||
[class^='col-lg-offset-'] {
|
[class^='col-lg-offset-'],
|
||||||
|
.row[class*='cols-lg-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
|
||||||
2
dist/mini-lite.min.css
vendored
2
dist/mini-lite.min.css
vendored
File diff suppressed because one or more lines are too long
36
dist/mini-nord.css
vendored
36
dist/mini-nord.css
vendored
|
|
@ -232,37 +232,10 @@ figcaption {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row[class*='cols-sm-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
.row[class*='cols-md-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1280px) {
|
|
||||||
.row[class*='cols-lg-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-sm,
|
.col-sm,
|
||||||
[class^='col-sm-'],
|
[class^='col-sm-'],
|
||||||
[class^='col-sm-offset-'] {
|
[class^='col-sm-offset-'],
|
||||||
|
.row[class*='cols-sm-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -430,7 +403,7 @@ figcaption {
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.col-md,
|
.col-md,
|
||||||
[class^='col-md-'],
|
[class^='col-md-'],
|
||||||
[class^='col-md-offset-'] {
|
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -571,7 +544,8 @@ figcaption {
|
||||||
@media screen and (min-width: 1280px) {
|
@media screen and (min-width: 1280px) {
|
||||||
.col-lg,
|
.col-lg,
|
||||||
[class^='col-lg-'],
|
[class^='col-lg-'],
|
||||||
[class^='col-lg-offset-'] {
|
[class^='col-lg-offset-'],
|
||||||
|
.row[class*='cols-lg-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
|
||||||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
36
dist/mini-sucroa.css
vendored
36
dist/mini-sucroa.css
vendored
|
|
@ -234,37 +234,10 @@ figcaption {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row[class*='cols-sm-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
.row[class*='cols-md-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1280px) {
|
|
||||||
.row[class*='cols-lg-'] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-sm,
|
.col-sm,
|
||||||
[class^='col-sm-'],
|
[class^='col-sm-'],
|
||||||
[class^='col-sm-offset-'] {
|
[class^='col-sm-offset-'],
|
||||||
|
.row[class*='cols-sm-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -432,7 +405,7 @@ figcaption {
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.col-md,
|
.col-md,
|
||||||
[class^='col-md-'],
|
[class^='col-md-'],
|
||||||
[class^='col-md-offset-'] {
|
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
@ -573,7 +546,8 @@ figcaption {
|
||||||
@media screen and (min-width: 1280px) {
|
@media screen and (min-width: 1280px) {
|
||||||
.col-lg,
|
.col-lg,
|
||||||
[class^='col-lg-'],
|
[class^='col-lg-'],
|
||||||
[class^='col-lg-offset-'] {
|
[class^='col-lg-offset-'],
|
||||||
|
.row[class*='cols-lg-'] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-box-flex: 0;
|
-webkit-box-flex: 0;
|
||||||
-webkit-flex: 0 0 auto;
|
-webkit-flex: 0 0 auto;
|
||||||
|
|
|
||||||
2
dist/mini-sucroa.min.css
vendored
2
dist/mini-sucroa.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1083,3 +1083,5 @@
|
||||||
- Used *external flag* to make sure that `.close`s is stylized only if needed (`utility`).
|
- Used *external flag* to make sure that `.close`s is stylized only if needed (`utility`).
|
||||||
- Moved all mixin `@import` statements after each modules variables have been initialized.
|
- Moved all mixin `@import` statements after each modules variables have been initialized.
|
||||||
- After working on `:active` redefinition, the size is now `6.53KB` gzipped (previously `6.71KB` gzipped).
|
- After working on `:active` redefinition, the size is now `6.53KB` gzipped (previously `6.71KB` gzipped).
|
||||||
|
- Fixed a typo in `core`'s code, nothing was really affected, but it's nice to have it fixed.
|
||||||
|
- Optimized certain pieces of code in the `grid` module, including the pre-defined layouts in shared rules, actually saving a little bit of space. Size is now `6.50KB`, a noticeable improvement over the previous size.
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@ $pre-element-padding: 0.75rem; // Padding for <pre>
|
||||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||||
$pre-element-border-style: 0; // Border style for <pre>
|
$pre-element-border-style: 0; // Border style for <pre>
|
||||||
$pre-element-border-radius: 0 2px 2px 0;; // Border radius for <pre>
|
$pre-element-border-radius: 0 2px 2px 0;; // Border radius for <pre>
|
||||||
$pre-element-margin: 0.5rem; // Margin for <pre>
|
$pre-element-margin: 0.5rem; // Margin for <pre>
|
||||||
$pre-element-box-shadow: none; // Box shadow for <pre>
|
$pre-element-box-shadow: none; // Box shadow for <pre>
|
||||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||||
|
|
|
||||||
|
|
@ -240,7 +240,7 @@ pre {
|
||||||
@if $pre-element-padding != 0 {
|
@if $pre-element-padding != 0 {
|
||||||
padding: $pre-element-padding;
|
padding: $pre-element-padding;
|
||||||
}
|
}
|
||||||
@if pre-element-margin != 0 {
|
@if $pre-element-margin != 0 {
|
||||||
margin: $pre-element-margin;
|
margin: $pre-element-margin;
|
||||||
}
|
}
|
||||||
@if $add-pre-element-sidebar {
|
@if $add-pre-element-sidebar {
|
||||||
|
|
|
||||||
|
|
@ -44,101 +44,102 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
}
|
}
|
||||||
// Basic definitions for rows defining column layouts.
|
// Basic definitions for rows defining column layouts.
|
||||||
@if $include-parent-layout {
|
// @if $include-parent-layout {
|
||||||
@if $use-four-step-grid {
|
// @if $use-four-step-grid {
|
||||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-'] > *{
|
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-'] > *{
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
// Old syntax
|
// // Old syntax
|
||||||
-webkit-box-flex: 0;
|
// -webkit-box-flex: 0;
|
||||||
// New syntax
|
// // New syntax
|
||||||
-webkit-flex: 0 0 auto;
|
// -webkit-flex: 0 0 auto;
|
||||||
flex: 0 0 auto;
|
// flex: 0 0 auto;
|
||||||
padding: $grid-column-padding;
|
// padding: $grid-column-padding;
|
||||||
}
|
// }
|
||||||
@media screen and (min-width: #{$grid-small-breakpoint}){
|
// @media screen and (min-width: #{$grid-small-breakpoint}){
|
||||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
// Old syntax
|
// // Old syntax
|
||||||
-webkit-box-flex: 0;
|
// -webkit-box-flex: 0;
|
||||||
// New syntax
|
// // New syntax
|
||||||
-webkit-flex: 0 0 auto;
|
// -webkit-flex: 0 0 auto;
|
||||||
flex: 0 0 auto;
|
// flex: 0 0 auto;
|
||||||
padding: $grid-column-padding;
|
// padding: $grid-column-padding;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
@media screen and (min-width: #{$grid-medium-breakpoint}){
|
// @media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
|
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
// Old syntax
|
// // Old syntax
|
||||||
-webkit-box-flex: 0;
|
// -webkit-box-flex: 0;
|
||||||
// New syntax
|
// // New syntax
|
||||||
-webkit-flex: 0 0 auto;
|
// -webkit-flex: 0 0 auto;
|
||||||
flex: 0 0 auto;
|
// flex: 0 0 auto;
|
||||||
padding: $grid-column-padding;
|
// padding: $grid-column-padding;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
@media screen and (min-width: #{$grid-large-breakpoint}){
|
// @media screen and (min-width: #{$grid-large-breakpoint}){
|
||||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
|
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
// Old syntax
|
// // Old syntax
|
||||||
-webkit-box-flex: 0;
|
// -webkit-box-flex: 0;
|
||||||
// New syntax
|
// // New syntax
|
||||||
-webkit-flex: 0 0 auto;
|
// -webkit-flex: 0 0 auto;
|
||||||
flex: 0 0 auto;
|
// flex: 0 0 auto;
|
||||||
padding: $grid-column-padding;
|
// padding: $grid-column-padding;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
@else {
|
// @else {
|
||||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
// Old syntax
|
// // Old syntax
|
||||||
-webkit-box-flex: 0;
|
// -webkit-box-flex: 0;
|
||||||
// New syntax
|
// // New syntax
|
||||||
-webkit-flex: 0 0 auto;
|
// -webkit-flex: 0 0 auto;
|
||||||
flex: 0 0 auto;
|
// flex: 0 0 auto;
|
||||||
padding: $grid-column-padding;
|
// padding: $grid-column-padding;
|
||||||
}
|
// }
|
||||||
@media screen and (min-width: #{$grid-medium-breakpoint}){
|
// @media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
|
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
// Old syntax
|
// // Old syntax
|
||||||
-webkit-box-flex: 0;
|
// -webkit-box-flex: 0;
|
||||||
// New syntax
|
// // New syntax
|
||||||
-webkit-flex: 0 0 auto;
|
// -webkit-flex: 0 0 auto;
|
||||||
flex: 0 0 auto;
|
// flex: 0 0 auto;
|
||||||
padding: $grid-column-padding;
|
// padding: $grid-column-padding;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
@media screen and (min-width: #{$grid-large-breakpoint}){
|
// @media screen and (min-width: #{$grid-large-breakpoint}){
|
||||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
|
// .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
// Old syntax
|
// // Old syntax
|
||||||
-webkit-box-flex: 0;
|
// -webkit-box-flex: 0;
|
||||||
// New syntax
|
// // New syntax
|
||||||
-webkit-flex: 0 0 auto;
|
// -webkit-flex: 0 0 auto;
|
||||||
flex: 0 0 auto;
|
// flex: 0 0 auto;
|
||||||
padding: $grid-column-padding;
|
// padding: $grid-column-padding;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
// Legacy grid system definitions.
|
// Legacy grid system definitions.
|
||||||
@if $use-four-step-grid {
|
@if $use-four-step-grid {
|
||||||
// Grid column generic definitions for extra small screens.
|
|
||||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
// Old syntax
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
// New syntax
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: $grid-column-padding;
|
|
||||||
}
|
|
||||||
// Grid column specific definition for flexible column.
|
|
||||||
@if $include-parent-layout {
|
@if $include-parent-layout {
|
||||||
|
// Grid column generic definitions for extra small screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-column-offset-suffix}-'],
|
||||||
|
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-'] > * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
|
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
|
||||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix} > * {
|
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix} > * {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
|
|
@ -152,6 +153,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
|
// Grid column generic definitions for extra small screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix} {
|
.#{$grid-column-prefix}-#{$grid-extra-small-prefix} {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
|
|
@ -204,7 +218,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
-webkit-order: -999;
|
-webkit-order: -999;
|
||||||
order: -999;
|
order: -999;
|
||||||
}
|
}
|
||||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-lst-suffix} {
|
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-last-suffix} {
|
||||||
-webkit-order: 999;
|
-webkit-order: 999;
|
||||||
order: 999;
|
order: 999;
|
||||||
}
|
}
|
||||||
|
|
@ -213,20 +227,21 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
@if $use-four-step-grid {
|
@if $use-four-step-grid {
|
||||||
// Small screen breakpoint.
|
// Small screen breakpoint.
|
||||||
@media screen and (min-width: #{$grid-small-breakpoint}){
|
@media screen and (min-width: #{$grid-small-breakpoint}){
|
||||||
// Grid column generic definitions for small screens.
|
|
||||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
// Old syntax
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
// New syntax
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: $grid-column-padding;
|
|
||||||
}
|
|
||||||
// Grid column specific definition for flexible column.
|
|
||||||
@if $include-parent-layout {
|
@if $include-parent-layout {
|
||||||
|
// Grid column generic definitions for small screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'],
|
||||||
|
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
|
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
|
|
@ -240,6 +255,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
|
// Grid column generic definitions for small screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-small-prefix} {
|
.#{$grid-column-prefix}-#{$grid-small-prefix} {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
|
|
@ -300,20 +328,21 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
}
|
}
|
||||||
// Non-legacy grid system definitions.
|
// Non-legacy grid system definitions.
|
||||||
@else {
|
@else {
|
||||||
// Grid column generic definitions for small screens.
|
|
||||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
// Old syntax
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
// New syntax
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: $grid-column-padding;
|
|
||||||
}
|
|
||||||
// Grid column specific definition for flexible column.
|
|
||||||
@if $include-parent-layout {
|
@if $include-parent-layout {
|
||||||
|
// Grid column generic definitions for small screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'],
|
||||||
|
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
|
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
|
|
@ -327,6 +356,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
|
// Grid column generic definitions for small screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-small-prefix} {
|
.#{$grid-column-prefix}-#{$grid-small-prefix} {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
|
|
@ -387,20 +429,20 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
// The rest is mixed definitions.
|
// The rest is mixed definitions.
|
||||||
// Medium screen breakpoint.
|
// Medium screen breakpoint.
|
||||||
@media screen and (min-width: #{$grid-medium-breakpoint}){
|
@media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||||
// Grid column generic definitions for medium screens.
|
|
||||||
.#{$grid-column-prefix}-#{$grid-medium-prefix},
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
// Old syntax
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
// New syntax
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: $grid-column-padding;
|
|
||||||
}
|
|
||||||
// Grid column specific definition for flexible column.
|
|
||||||
@if $include-parent-layout {
|
@if $include-parent-layout {
|
||||||
|
// Grid column generic definitions for medium screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-medium-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'], .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-medium-prefix},
|
.#{$grid-column-prefix}-#{$grid-medium-prefix},
|
||||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix} > * {
|
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix} > * {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
|
|
@ -414,6 +456,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
|
// Grid column generic definitions for medium screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-medium-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-medium-prefix} {
|
.#{$grid-column-prefix}-#{$grid-medium-prefix} {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
|
|
@ -473,20 +528,21 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
}
|
}
|
||||||
// Large screen breakpoint.
|
// Large screen breakpoint.
|
||||||
@media screen and (min-width: #{$grid-large-breakpoint}){
|
@media screen and (min-width: #{$grid-large-breakpoint}){
|
||||||
// Grid column generic definitions for large screens.
|
|
||||||
.#{$grid-column-prefix}-#{$grid-large-prefix},
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
|
|
||||||
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
// Old syntax
|
|
||||||
-webkit-box-flex: 0;
|
|
||||||
// New syntax
|
|
||||||
-webkit-flex: 0 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: $grid-column-padding;
|
|
||||||
}
|
|
||||||
// Grid column specific definition for flexible column.
|
|
||||||
@if $include-parent-layout {
|
@if $include-parent-layout {
|
||||||
|
// Grid column generic definitions for large screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-large-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'],
|
||||||
|
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-large-prefix},
|
.#{$grid-column-prefix}-#{$grid-large-prefix},
|
||||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix} > * {
|
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix} > * {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
|
|
@ -500,6 +556,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
|
// Grid column generic definitions for large screens.
|
||||||
|
.#{$grid-column-prefix}-#{$grid-large-prefix},
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
|
||||||
|
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
// Old syntax
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
// New syntax
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: $grid-column-padding;
|
||||||
|
}
|
||||||
|
// Grid column specific definition for flexible column.
|
||||||
.#{$grid-column-prefix}-#{$grid-large-prefix} {
|
.#{$grid-column-prefix}-#{$grid-large-prefix} {
|
||||||
// Old syntax
|
// Old syntax
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue