mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-03-13 16:59:39 +01:00
Initial commit of grid module
Dropped support for 4-step grid and the old flexbox syntax.
This commit is contained in:
Angelos Chalaris
parent
e54f940d67
commit
51f422c944
10
dist/mini-default.css
vendored
10
dist/mini-default.css
vendored
@ -13,11 +13,11 @@
|
||||
--fore-color: #111;
|
||||
--secondary-fore-color: #444;
|
||||
--back-color: #f8f8f8;
|
||||
--secondary-back-color: #e6e6e6;
|
||||
--secondary-back-color: #eee;
|
||||
--blockquote-color: #f57c00;
|
||||
--pre-color: #1565c0;
|
||||
--border-color: #acacac;
|
||||
--secondary-border-color: #c9c9c9;
|
||||
--border-color: #aaa;
|
||||
--secondary-border-color: #ddd;
|
||||
--heading-ratio: 1.19;
|
||||
--universal-margin: 0.5rem;
|
||||
--universal-padding: 0.5rem;
|
||||
@ -122,7 +122,7 @@ hr {
|
||||
border: 0;
|
||||
line-height: 1.25em;
|
||||
margin: var(--universal-margin);
|
||||
height: 0.03125rem;
|
||||
height: 0.0625rem;
|
||||
background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
|
||||
}
|
||||
|
||||
@ -208,7 +208,7 @@ figcaption {
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:link {
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
@ -1 +1 @@
|
||||
@charset "UTF-8";blockquote,details{display:block}code,pre{background:var(--secondary-back-color)}blockquote,hr,ol,p,pre,ul{margin:var(--universal-margin)}blockquote,figcaption{color:var(--secondary-fore-color)}:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#e6e6e6;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#acacac;--secondary-border-color:#c9c9c9;--heading-ratio:1.19;--universal-margin:0.5rem;--universal-padding:0.5rem;--universal-border-radius:0.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}*,html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Helvetica,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}ol,ul{padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;height:.03125rem;background:linear-gradient(to right,transparent,var(--border-color) 20%,var(--border-color) 80%,transparent)}blockquote{position:relative;font-style:italic;padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius)var(--universal-border-radius)0}code,kbd{border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding)/ 4) calc(var(--universal-padding)/ 2)}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo,Consolas,monospace;font-size:.85em}kbd{background:var(--fore-color);color:var(--back-color)}pre{overflow:auto;padding:calc(1.5 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius)var(--universal-border-radius)0}code,kbd,sub,sup{line-height:0;position:relative;vertical-align:baseline}figcaption,small,sub,sup{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}a,a:focus,a:hover{text-decoration:underline}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}
|
||||
:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#eee;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}
|
||||
|
||||
@ -61,3 +61,8 @@
|
||||
- Tweaked the splash screen, looks a bit better now and is easier to read.
|
||||
- Reverted the `hr` fix, as it caused problems.
|
||||
- Moved some of the documentation from the old website to the `/docs/v3` website.
|
||||
|
||||
## 20171024
|
||||
|
||||
- Copied `grid` module from the **Fermion** branch, removed 4-step system with `xs` screen size.
|
||||
- Removed legacy code from `grid`, specifically the one targeting `box-flex` (old syntax). - This trimmed the module size from `940bytes` down to `848bytes`.
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
// Use the old grid for a little bit - TODO: Replace when grid is done
|
||||
|
||||
@import '../_v2/mini/grid';
|
||||
@import '../mini/grid';
|
||||
|
||||
:not(.doc) {
|
||||
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
|
||||
|
||||
281
src/mini/_grid.scss
Normal file
281
src/mini/_grid.scss
Normal file
@ -0,0 +1,281 @@
|
||||
/*
|
||||
Definitions for the grid system.
|
||||
*/
|
||||
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
|
||||
$use-four-step-grid: false !default; // Flag for the grid system choice (`true`/`false`).
|
||||
$include-parent-layout: true !default; // Flag for rows defining column layouts (`true`/`false`).
|
||||
$grid-container-name: 'container' !default; // Class name for the grid system container.
|
||||
$grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only).
|
||||
$grid-row-name: 'row' !default; // Class name for the grid system rows.
|
||||
$grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents.
|
||||
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
|
||||
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
|
||||
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
|
||||
$grid-column-padding: 0 4px !default; // Padding for the columns of the grid.
|
||||
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
|
||||
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
|
||||
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
|
||||
$grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid (four-step-grid-only).
|
||||
$grid-small-breakpoint: 480px !default; // Small screen breakpoint for grid (four-step-grid-only).
|
||||
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
|
||||
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
|
||||
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
|
||||
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
|
||||
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
|
||||
// Fluid grid system container definition.
|
||||
.#{$grid-container-name} {
|
||||
margin: 0 auto;
|
||||
padding: 0 $grid-container-side-padding;
|
||||
}
|
||||
// Grid row definition.
|
||||
.#{$grid-row-name} {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
// Small screen grid definitions.
|
||||
@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;
|
||||
-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} > * {
|
||||
// max-width: 100%; -- TODO: Are we certain we don't need this?
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@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}-'] {
|
||||
-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} {
|
||||
// max-width: 100%; -- TODO: Are we certain we don't need this?
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * {
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for offset columns.
|
||||
@for $i from 0 through ($grid-column-count - 1) {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} {
|
||||
-webkit-order: -999;
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
|
||||
-webkit-order: 999;
|
||||
order: 999;
|
||||
}
|
||||
// Medium screen breakpoint.
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||
@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;
|
||||
-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} > * {
|
||||
// max-width: 100%; -- TODO: Are we certain we don't need this?
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@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;
|
||||
-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} {
|
||||
// max-width: 100%; -- TODO: Are we certain we don't need this?
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-#{$i} > * {
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i} {
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for offset columns.
|
||||
@for $i from 0 through ($grid-column-count - 1) {
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-first-suffix} {
|
||||
-webkit-order: -999;
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-last-suffix} {
|
||||
-webkit-order: 999;
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
// Large screen breakpoint.
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}){
|
||||
@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;
|
||||
-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} > * {
|
||||
// max-width: 100%; -- TODO: Are we certain we don't need this?
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@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;
|
||||
-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} {
|
||||
// max-width: 100%; -- TODO: Are we certain we don't need this?
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-#{$i} > * {
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i} {
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for offset columns.
|
||||
@for $i from 0 through ($grid-column-count - 1) {
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-first-suffix} {
|
||||
-webkit-order: -999;
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-last-suffix} {
|
||||
-webkit-order: 999;
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user