beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Updated grid definitions

Browse source 
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 2017-05-04 22:49:41 +03:00
parent 41328781d1
commit d0363e7b22
14 changed files with 248 additions and 307 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
dist/mini-dark.css vendored
View file

@ -227,37 +227,10 @@ figcaption {
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,
[class^='col-sm-'],
[class^='col-sm-offset-'] {
[class^='col-sm-offset-'],
.row[class*='cols-sm-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -425,7 +398,7 @@ figcaption {
@media screen and (min-width: 768px) {
.col-md,
[class^='col-md-'],
[class^='col-md-offset-'] {
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -566,7 +539,8 @@ figcaption {
@media screen and (min-width: 1280px) {
.col-lg,
[class^='col-lg-'],
[class^='col-lg-offset-'] {
[class^='col-lg-offset-'],
.row[class*='cols-lg-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;

2
dist/mini-dark.min.css vendored
View file

File diff suppressed because one or more lines are too long

36
dist/mini-default.css vendored
View file

@ -228,37 +228,10 @@ figcaption {
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,
[class^='col-sm-'],
[class^='col-sm-offset-'] {
[class^='col-sm-offset-'],
.row[class*='cols-sm-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -426,7 +399,7 @@ figcaption {
@media screen and (min-width: 768px) {
.col-md,
[class^='col-md-'],
[class^='col-md-offset-'] {
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -567,7 +540,8 @@ figcaption {
@media screen and (min-width: 1280px) {
.col-lg,
[class^='col-lg-'],
[class^='col-lg-offset-'] {
[class^='col-lg-offset-'],
.row[class*='cols-lg-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

36
dist/mini-lite.css vendored
View file

@ -226,37 +226,10 @@ figcaption {
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,
[class^='col-sm-'],
[class^='col-sm-offset-'] {
[class^='col-sm-offset-'],
.row[class*='cols-sm-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -424,7 +397,7 @@ figcaption {
@media screen and (min-width: 768px) {
.col-md,
[class^='col-md-'],
[class^='col-md-offset-'] {
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -565,7 +538,8 @@ figcaption {
@media screen and (min-width: 1280px) {
.col-lg,
[class^='col-lg-'],
[class^='col-lg-offset-'] {
[class^='col-lg-offset-'],
.row[class*='cols-lg-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;

2
dist/mini-lite.min.css vendored
View file

File diff suppressed because one or more lines are too long

36
dist/mini-nord.css vendored
View file

@ -232,37 +232,10 @@ figcaption {
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,
[class^='col-sm-'],
[class^='col-sm-offset-'] {
[class^='col-sm-offset-'],
.row[class*='cols-sm-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -430,7 +403,7 @@ figcaption {
@media screen and (min-width: 768px) {
.col-md,
[class^='col-md-'],
[class^='col-md-offset-'] {
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -571,7 +544,8 @@ figcaption {
@media screen and (min-width: 1280px) {
.col-lg,
[class^='col-lg-'],
[class^='col-lg-offset-'] {
[class^='col-lg-offset-'],
.row[class*='cols-lg-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;

2
dist/mini-nord.min.css vendored
View file

File diff suppressed because one or more lines are too long

36
dist/mini-sucroa.css vendored
View file

@ -234,37 +234,10 @@ figcaption {
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,
[class^='col-sm-'],
[class^='col-sm-offset-'] {
[class^='col-sm-offset-'],
.row[class*='cols-sm-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -432,7 +405,7 @@ figcaption {
@media screen and (min-width: 768px) {
.col-md,
[class^='col-md-'],
[class^='col-md-offset-'] {
[class^='col-md-offset-'], .row[class*='cols-md-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
@ -573,7 +546,8 @@ figcaption {
@media screen and (min-width: 1280px) {
.col-lg,
[class^='col-lg-'],
[class^='col-lg-offset-'] {
[class^='col-lg-offset-'],
.row[class*='cols-lg-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;

2
dist/mini-sucroa.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/v2/DEVLOG.md
View file

@ -1083,3 +1083,5 @@
- 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.
- 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.

2
src/flavors/mini-default.scss
View file

@ -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-back-color: $code-element-back-color; // Background color 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-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]

2
src/mini/_core.scss
View file

@ -240,7 +240,7 @@ pre {
@if $pre-element-padding != 0 {
padding: $pre-element-padding;
}
@if pre-element-margin != 0 {
@if $pre-element-margin != 0 {
margin: $pre-element-margin;
}
@if $add-pre-element-sidebar {

359
src/mini/_grid.scss
View file

@ -44,101 +44,102 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
flex-flow: row wrap;
}
// Basic definitions for rows defining column layouts.
@if $include-parent-layout {
@if $use-four-step-grid {
.#{$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;
}
@media screen and (min-width: #{$grid-small-breakpoint}){
.#{$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;
}
}
@media screen and (min-width: #{$grid-medium-breakpoint}){
.#{$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;
}
}
@media screen and (min-width: #{$grid-large-breakpoint}){
.#{$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;
}
}
}
@else {
.#{$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;
}
@media screen and (min-width: #{$grid-medium-breakpoint}){
.#{$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;
}
}
@media screen and (min-width: #{$grid-large-breakpoint}){
.#{$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;
}
}
}
}
// @if $include-parent-layout {
// @if $use-four-step-grid {
// .#{$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;
// }
// @media screen and (min-width: #{$grid-small-breakpoint}){
// .#{$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;
// }
// }
// @media screen and (min-width: #{$grid-medium-breakpoint}){
// .#{$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;
// }
// }
// @media screen and (min-width: #{$grid-large-breakpoint}){
// .#{$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;
// }
// }
// }
// @else {
// .#{$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;
// }
// @media screen and (min-width: #{$grid-medium-breakpoint}){
// .#{$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;
// }
// }
// @media screen and (min-width: #{$grid-large-breakpoint}){
// .#{$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;
// }
// }
// }
// }
// Legacy grid system definitions.
@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 {
// 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-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix} > * {
// Old syntax
@ -152,6 +153,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
}
}
@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} {
// Old syntax
-webkit-box-flex: 1;
@ -204,7 +218,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
-webkit-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;
order: 999;
}
@ -213,20 +227,21 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
@if $use-four-step-grid {
// Small screen 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 {
// 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-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
// Old syntax
@ -240,6 +255,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
}
}
@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} {
// Old syntax
-webkit-box-flex: 1;
@ -300,20 +328,21 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
}
// Non-legacy grid system definitions.
@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 {
// 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-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
// Old syntax
@ -327,6 +356,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
}
}
@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} {
// Old syntax
-webkit-box-flex: 1;
@ -387,20 +429,20 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
// The rest is mixed definitions.
// Medium screen 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 {
// 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-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix} > * {
// Old syntax
@ -414,6 +456,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
}
}
@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} {
// Old syntax
-webkit-box-flex: 1;
@ -473,20 +528,21 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
}
// Large screen 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 {
// 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-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix} > * {
// Old syntax
@ -500,6 +556,19 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
}
}
@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} {
// Old syntax
-webkit-box-flex: 1;