Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Grid - using varibale in for loop when creating grid classes

Browse Source
This commit is contained in:
Alex Windett 2016-10-25 17:22:19 +01:00
parent c8cb4107e8
commit d7da99f87b
3 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/package.json
View File

@ -43,6 +43,7 @@
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",
"nyc": "^8.3.1", "nyc": "^8.3.1",
"param-case": "^2.1.0", "param-case": "^2.1.0",
"postcss-at-rules-variables": "0.0.25",
"postcss-cssnext": "^2.8.0", "postcss-cssnext": "^2.8.0",
"postcss-for": "^2.1.1", "postcss-for": "^2.1.1",
"postcss-loader": "^1.0.0", "postcss-loader": "^1.0.0",

8
ui/src/components/column/style.css
View File

@ -3,12 +3,12 @@
* https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
*/ */
@value half-gutter-width, grid-columns from "../../constants/sizes.css"; @value half-gutter-width from "../../constants/sizes.css";
@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css"; @value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
:root { :root {
--half-gutter-width: half-gutter-width; --half-gutter-width: half-gutter-width;
--grid-columns: 12; --grid-columns: 12; /* Cannot import values and use them within the loop */
} }
@define-mixin viewport $size { @define-mixin viewport $size {
@ -18,14 +18,14 @@
max-width: 100%; max-width: 100%;
} }
@for $i from 1 to 12 { @for $i from 1 to var(--grid-columns) {
&.$(size)-$i { &.$(size)-$i {
flex-basis: calc( ($i / var(--grid-columns)) * 100%); flex-basis: calc( ($i / var(--grid-columns)) * 100%);
max-width: calc( ($i / var(--grid-columns)) * 100%); max-width: calc( ($i / var(--grid-columns)) * 100%);
} }
} }
@for $i from 0 to 12 { @for $i from 0 to var(--grid-columns) {
&.$(size)-offset-$i { &.$(size)-offset-$i {
margin-left: calc( ($i / var(--grid-columns)) * 100%); margin-left: calc( ($i / var(--grid-columns)) * 100%);
} }

1
ui/webpack/base.js
View File

@ -12,6 +12,7 @@ const plugins = {
options: { options: {
postcss: { postcss: {
plugins: [ plugins: [
require('postcss-at-rules-variables')(),
require('postcss-modules-values'), require('postcss-modules-values'),
require('postcss-mixins')(), require('postcss-mixins')(),
require('postcss-for'), require('postcss-for'),