diff --git a/Gruntfile.js b/Gruntfile.js index c437769..2c63d95 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -22,7 +22,7 @@ module.exports = function(grunt) { dist: { files: { - 'dist/gridle.css': 'grid/gridlecss.scss' + 'dist/css/gridle.css': 'sass/gridle.scss' } } }, @@ -30,15 +30,14 @@ module.exports = function(grunt) { postcss: { options: { map: false, + diff: true, processors: [ - require('autoprefixer-core')({ - browsers: ['last 5 versions', '> 15%', 'IE 10'] - }).postcss + require('autoprefixer') ({ browsers: ['last 5 versions', '> 15%', 'IE 10'] }) ] }, dist: { - src: ['dist/gridle.css'] + src: ['dist/css/gridle.css'] } }, @@ -49,31 +48,49 @@ module.exports = function(grunt) { dist: { files: { - 'dist/gridle.css': 'dist/gridle.css' + 'dist/css/gridle.css': 'dist/css/gridle.css' } } }, - cssbeautifier : { - files : ['dist/gridle.css'], - options : { - indent: ' ', - openbrace: 'end-of-line', - autosemicolon: true - } - }, - - cssmin: { - options: { - shorthandCompacting: false, - roundingPrecision: -1 + // cssbeautifier : { + // files : ['dist/css/gridle.css'], + // options : { + // indent: ' ', + // openbrace: 'end-of-line', + // autosemicolon: true + // } + // }, + + // cssmin: { + // options: { + // shorthandCompacting: false, + // roundingPrecision: -1 + // }, + + // target: { + // files: { + // 'dist/css/gridle.min.css': ['dist/css/gridle.css'] + // } + // } + // } + + copy: { + main: { + files: [ + // includes files within path + {expand: true, src: ['path/*'], dest: 'dest/', filter: 'isFile'}, + + // includes files within path and its sub-directories + {expand: true, src: ['path/**'], dest: 'dest/'}, + + // makes all src relative to cwd + {expand: true, cwd: 'path/', src: ['**'], dest: 'dest/'}, + + // flattens results to a single level + {expand: true, flatten: true, src: ['path/**'], dest: 'dest/', filter: 'isFile'}, + ], }, - - target: { - files: { - 'dist/gridle.min.css': ['dist/gridle.css'] - } - } } }); diff --git a/dist/css/gridle.css b/dist/css/gridle.css new file mode 100644 index 0000000..b76c4e8 --- /dev/null +++ b/dist/css/gridle.css @@ -0,0 +1,758 @@ +@charset "UTF-8"; +body:before { + background-color: #FCF8E3; + border-bottom: 1px solid #FBEED5; + border-left: 1px solid #FBEED5; + color: #C09853; + font: small-caption; + padding: 3px 6px; + pointer-events: none; + position: fixed; + right: 0; + top: 0; + z-index: 100; } + @media (min-width: 0em) { + body:before { + content: "xs ≥ 0 (0em)"; } } + @media (min-width: 40em) { + body:before { + content: "sm ≥ 40em (40em)"; } } + @media (min-width: 64em) { + body:before { + content: "md ≥ 64em (64em)"; } } + @media (min-width: 90em) { + body:before { + content: "lg ≥ 90em (90em)"; } } + +body:before { + background-color: #FCF8E3; + border-bottom: 1px solid #FBEED5; + border-left: 1px solid #FBEED5; + color: #C09853; + font: small-caption; + padding: 3px 6px; + pointer-events: none; + position: fixed; + right: 0; + top: 0; + z-index: 100; } + @media (min-width: 0em) { + body:before { + content: "xs ≥ 0 (0em)"; } } + @media (min-width: 40em) { + body:before { + content: "sm ≥ 40em (40em)"; } } + @media (min-width: 64em) { + body:before { + content: "md ≥ 64em (64em)"; } } + @media (min-width: 90em) { + body:before { + content: "lg ≥ 90em (90em)"; } } + +[class*="cell"] { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + +*, +*:before, +*:after { + box-sizing: border-box; } + +.grid, +.grid--fluid { + height: 100%; + margin-left: auto; + margin-right: auto; + width: 100%; } + +.row { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + .row--reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.cell-xs, +.cell-xs-1, +.cell-xs-offset-1, +.cell-xs-2, +.cell-xs-offset-2, +.cell-xs-3, +.cell-xs-offset-3, +.cell-xs-4, +.cell-xs-offset-4, +.cell-xs-5, +.cell-xs-offset-5, +.cell-xs-6, +.cell-xs-offset-6, +.cell-xs-7, +.cell-xs-offset-7, +.cell-xs-8, +.cell-xs-offset-8, +.cell-xs-9, +.cell-xs-offset-9, +.cell-xs-10, +.cell-xs-offset-10, +.cell-xs-11, +.cell-xs-offset-11, +.cell-xs-12, +.cell-xs-offset-12, .cell-sm, +.cell-sm-1, +.cell-sm-offset-1, +.cell-sm-2, +.cell-sm-offset-2, +.cell-sm-3, +.cell-sm-offset-3, +.cell-sm-4, +.cell-sm-offset-4, +.cell-sm-5, +.cell-sm-offset-5, +.cell-sm-6, +.cell-sm-offset-6, +.cell-sm-7, +.cell-sm-offset-7, +.cell-sm-8, +.cell-sm-offset-8, +.cell-sm-9, +.cell-sm-offset-9, +.cell-sm-10, +.cell-sm-offset-10, +.cell-sm-11, +.cell-sm-offset-11, +.cell-sm-12, +.cell-sm-offset-12, .cell-md, +.cell-md-1, +.cell-md-offset-1, +.cell-md-2, +.cell-md-offset-2, +.cell-md-3, +.cell-md-offset-3, +.cell-md-4, +.cell-md-offset-4, +.cell-md-5, +.cell-md-offset-5, +.cell-md-6, +.cell-md-offset-6, +.cell-md-7, +.cell-md-offset-7, +.cell-md-8, +.cell-md-offset-8, +.cell-md-9, +.cell-md-offset-9, +.cell-md-10, +.cell-md-offset-10, +.cell-md-11, +.cell-md-offset-11, +.cell-md-12, +.cell-md-offset-12, .cell-lg, +.cell-lg-1, +.cell-lg-offset-1, +.cell-lg-2, +.cell-lg-offset-2, +.cell-lg-3, +.cell-lg-offset-3, +.cell-lg-4, +.cell-lg-offset-4, +.cell-lg-5, +.cell-lg-offset-5, +.cell-lg-6, +.cell-lg-offset-6, +.cell-lg-7, +.cell-lg-offset-7, +.cell-lg-8, +.cell-lg-offset-8, +.cell-lg-9, +.cell-lg-offset-9, +.cell-lg-10, +.cell-lg-offset-10, +.cell-lg-11, +.cell-lg-offset-11, +.cell-lg-12, +.cell-lg-offset-12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + +.distribute-around { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } + +.distribute-between { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + +.align-center { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; } + +.align-right { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: flex-end; } + +.align-top { + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; } + +.align-middle { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +.align-bottom { + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; } + +.align-baseline { + -webkit-box-align: baseline; + -webkit-align-items: baseline; + -ms-flex-align: baseline; + align-items: baseline; } + +.align-stretch { + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +.hidden-xs { + display: none; } + +.visible-xs { + display: block; } + +.hidden-sm { + display: block; } + +.visible-sm { + display: none; } + +.hidden-md { + display: block; } + +.visible-md { + display: none; } + +.hidden-lg { + display: block; } + +.visible-lg { + display: none; } + +.cell-xs-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + +.cell-xs-offset-1 { + margin-left: 8.3333333333%; } + +.cell-xs-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + +.cell-xs-offset-2 { + margin-left: 16.6666666667%; } + +.cell-xs-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + +.cell-xs-offset-3 { + margin-left: 25%; } + +.cell-xs-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + +.cell-xs-offset-4 { + margin-left: 33.3333333333%; } + +.cell-xs-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + +.cell-xs-offset-5 { + margin-left: 41.6666666667%; } + +.cell-xs-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + +.cell-xs-offset-6 { + margin-left: 50%; } + +.cell-xs-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + +.cell-xs-offset-7 { + margin-left: 58.3333333333%; } + +.cell-xs-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + +.cell-xs-offset-8 { + margin-left: 66.6666666667%; } + +.cell-xs-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + +.cell-xs-offset-9 { + margin-left: 75%; } + +.cell-xs-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + +.cell-xs-offset-10 { + margin-left: 83.3333333333%; } + +.cell-xs-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + +.cell-xs-offset-11 { + margin-left: 91.6666666667%; } + +.cell-xs-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + +.cell-xs-offset-12 { + margin-left: 100%; } + +.cell-xs { + -webkit-box-flex: 1; + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; } + .cell-xs-order--first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + .cell-xs-order--last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + +@media (min-width: 40em) { + .grid { + width: 40em; } + .hidden-xs { + display: block; } + .visible-xs { + display: none; } + .hidden-sm { + display: none; } + .visible-sm { + display: block; } + .hidden-md { + display: block; } + .visible-md { + display: none; } + .hidden-lg { + display: block; } + .visible-lg { + display: none; } + .cell-sm-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-sm-offset-1 { + margin-left: 8.3333333333%; } + .cell-sm-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-sm-offset-2 { + margin-left: 16.6666666667%; } + .cell-sm-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-sm-offset-3 { + margin-left: 25%; } + .cell-sm-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-sm-offset-4 { + margin-left: 33.3333333333%; } + .cell-sm-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-sm-offset-5 { + margin-left: 41.6666666667%; } + .cell-sm-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-sm-offset-6 { + margin-left: 50%; } + .cell-sm-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-sm-offset-7 { + margin-left: 58.3333333333%; } + .cell-sm-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-sm-offset-8 { + margin-left: 66.6666666667%; } + .cell-sm-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-sm-offset-9 { + margin-left: 75%; } + .cell-sm-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-sm-offset-10 { + margin-left: 83.3333333333%; } + .cell-sm-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-sm-offset-11 { + margin-left: 91.6666666667%; } + .cell-sm-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-sm-offset-12 { + margin-left: 100%; } + .cell-sm { + -webkit-box-flex: 1; + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; } + .cell-sm-order--first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + .cell-sm-order--last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } } + +@media (min-width: 64em) { + .grid { + width: 64em; } + .hidden-xs { + display: block; } + .visible-xs { + display: none; } + .hidden-sm { + display: block; } + .visible-sm { + display: none; } + .hidden-md { + display: none; } + .visible-md { + display: block; } + .hidden-lg { + display: block; } + .visible-lg { + display: none; } + .cell-md-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-md-offset-1 { + margin-left: 8.3333333333%; } + .cell-md-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-md-offset-2 { + margin-left: 16.6666666667%; } + .cell-md-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-md-offset-3 { + margin-left: 25%; } + .cell-md-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-md-offset-4 { + margin-left: 33.3333333333%; } + .cell-md-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-md-offset-5 { + margin-left: 41.6666666667%; } + .cell-md-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-md-offset-6 { + margin-left: 50%; } + .cell-md-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-md-offset-7 { + margin-left: 58.3333333333%; } + .cell-md-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-md-offset-8 { + margin-left: 66.6666666667%; } + .cell-md-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-md-offset-9 { + margin-left: 75%; } + .cell-md-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-md-offset-10 { + margin-left: 83.3333333333%; } + .cell-md-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-md-offset-11 { + margin-left: 91.6666666667%; } + .cell-md-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-md-offset-12 { + margin-left: 100%; } + .cell-md { + -webkit-box-flex: 1; + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; } + .cell-md-order--first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + .cell-md-order--last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } } + +@media (min-width: 90em) { + .grid { + width: 90em; } + .hidden-xs { + display: block; } + .visible-xs { + display: none; } + .hidden-sm { + display: block; } + .visible-sm { + display: none; } + .hidden-md { + display: block; } + .visible-md { + display: none; } + .hidden-lg { + display: none; } + .visible-lg { + display: block; } + .cell-lg-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-lg-offset-1 { + margin-left: 8.3333333333%; } + .cell-lg-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-lg-offset-2 { + margin-left: 16.6666666667%; } + .cell-lg-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-lg-offset-3 { + margin-left: 25%; } + .cell-lg-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-lg-offset-4 { + margin-left: 33.3333333333%; } + .cell-lg-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-lg-offset-5 { + margin-left: 41.6666666667%; } + .cell-lg-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-lg-offset-6 { + margin-left: 50%; } + .cell-lg-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-lg-offset-7 { + margin-left: 58.3333333333%; } + .cell-lg-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-lg-offset-8 { + margin-left: 66.6666666667%; } + .cell-lg-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-lg-offset-9 { + margin-left: 75%; } + .cell-lg-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-lg-offset-10 { + margin-left: 83.3333333333%; } + .cell-lg-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-lg-offset-11 { + margin-left: 91.6666666667%; } + .cell-lg-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-lg-offset-12 { + margin-left: 100%; } + .cell-lg { + -webkit-box-flex: 1; + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; } + .cell-lg-order--first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + .cell-lg-order--last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } } \ No newline at end of file diff --git a/dist/css/gridle.css.diff b/dist/css/gridle.css.diff new file mode 100644 index 0000000..2a5c889 --- /dev/null +++ b/dist/css/gridle.css.diff @@ -0,0 +1,645 @@ +Index: dist/css/gridle.css +=================================================================== +--- dist/css/gridle.css ++++ dist/css/gridle.css +@@ -49,9 +49,11 @@ + body:before { + content: "lg ≥ 90em (90em)"; } } + + [class*="cell"] { +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + + *, + *:before, +@@ -65,13 +67,25 @@ + margin-right: auto; + width: 100%; } + + .row { ++ display: -webkit-box; ++ display: -webkit-flex; ++ display: -ms-flexbox; + display: flex; +- flex: 0 1 auto; +- flex-wrap: wrap; } ++ -webkit-box-flex: 0; ++ -webkit-flex: 0 1 auto; ++ -ms-flex: 0 1 auto; ++ flex: 0 1 auto; ++ -webkit-flex-wrap: wrap; ++ -ms-flex-wrap: wrap; ++ flex-wrap: wrap; } + .row--reverse { +- flex-direction: row-reverse; } ++ -webkit-box-orient: horizontal; ++ -webkit-box-direction: reverse; ++ -webkit-flex-direction: row-reverse; ++ -ms-flex-direction: row-reverse; ++ flex-direction: row-reverse; } + + .cell-xs, + .cell-xs-1, + .cell-xs-offset-1, +@@ -168,40 +182,76 @@ + .cell-lg-11, + .cell-lg-offset-11, + .cell-lg-12, + .cell-lg-offset-12 { ++ display: -webkit-box; ++ display: -webkit-flex; ++ display: -ms-flexbox; + display: flex; +- flex: 1 0 auto; +- flex-direction: column; } ++ -webkit-box-flex: 1; ++ -webkit-flex: 1 0 auto; ++ -ms-flex: 1 0 auto; ++ flex: 1 0 auto; ++ -webkit-box-orient: vertical; ++ -webkit-box-direction: normal; ++ -webkit-flex-direction: column; ++ -ms-flex-direction: column; ++ flex-direction: column; } + + .distribute-around { +- justify-content: space-around; } ++ -webkit-justify-content: space-around; ++ -ms-flex-pack: distribute; ++ justify-content: space-around; } + + .distribute-between { +- justify-content: space-between; } ++ -webkit-box-pack: justify; ++ -webkit-justify-content: space-between; ++ -ms-flex-pack: justify; ++ justify-content: space-between; } + + .align-center { +- justify-content: center; ++ -webkit-box-pack: center; ++ -webkit-justify-content: center; ++ -ms-flex-pack: center; ++ justify-content: center; + text-align: center; } + + .align-right { +- justify-content: flex-end; ++ -webkit-box-pack: end; ++ -webkit-justify-content: flex-end; ++ -ms-flex-pack: end; ++ justify-content: flex-end; + text-align: flex-end; } + + .align-top { +- align-items: flex-start; } ++ -webkit-box-align: start; ++ -webkit-align-items: flex-start; ++ -ms-flex-align: start; ++ align-items: flex-start; } + + .align-middle { +- align-items: center; } ++ -webkit-box-align: center; ++ -webkit-align-items: center; ++ -ms-flex-align: center; ++ align-items: center; } + + .align-bottom { +- align-items: flex-end; } ++ -webkit-box-align: end; ++ -webkit-align-items: flex-end; ++ -ms-flex-align: end; ++ align-items: flex-end; } + + .align-baseline { +- align-items: baseline; } ++ -webkit-box-align: baseline; ++ -webkit-align-items: baseline; ++ -ms-flex-align: baseline; ++ align-items: baseline; } + + .align-stretch { +- align-items: stretch; } ++ -webkit-box-align: stretch; ++ -webkit-align-items: stretch; ++ -ms-flex-align: stretch; ++ align-items: stretch; } + + .hidden-xs { + display: none; } + +@@ -226,97 +276,130 @@ + .visible-lg { + display: none; } + + .cell-xs-1 { +- flex-basis: 8.3333333333%; ++ -webkit-flex-basis: 8.3333333333%; ++ -ms-flex-preferred-size: 8.3333333333%; ++ flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + + .cell-xs-offset-1 { + margin-left: 8.3333333333%; } + + .cell-xs-2 { +- flex-basis: 16.6666666667%; ++ -webkit-flex-basis: 16.6666666667%; ++ -ms-flex-preferred-size: 16.6666666667%; ++ flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + + .cell-xs-offset-2 { + margin-left: 16.6666666667%; } + + .cell-xs-3 { +- flex-basis: 25%; ++ -webkit-flex-basis: 25%; ++ -ms-flex-preferred-size: 25%; ++ flex-basis: 25%; + max-width: 25%; } + + .cell-xs-offset-3 { + margin-left: 25%; } + + .cell-xs-4 { +- flex-basis: 33.3333333333%; ++ -webkit-flex-basis: 33.3333333333%; ++ -ms-flex-preferred-size: 33.3333333333%; ++ flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + + .cell-xs-offset-4 { + margin-left: 33.3333333333%; } + + .cell-xs-5 { +- flex-basis: 41.6666666667%; ++ -webkit-flex-basis: 41.6666666667%; ++ -ms-flex-preferred-size: 41.6666666667%; ++ flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + + .cell-xs-offset-5 { + margin-left: 41.6666666667%; } + + .cell-xs-6 { +- flex-basis: 50%; ++ -webkit-flex-basis: 50%; ++ -ms-flex-preferred-size: 50%; ++ flex-basis: 50%; + max-width: 50%; } + + .cell-xs-offset-6 { + margin-left: 50%; } + + .cell-xs-7 { +- flex-basis: 58.3333333333%; ++ -webkit-flex-basis: 58.3333333333%; ++ -ms-flex-preferred-size: 58.3333333333%; ++ flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + + .cell-xs-offset-7 { + margin-left: 58.3333333333%; } + + .cell-xs-8 { +- flex-basis: 66.6666666667%; ++ -webkit-flex-basis: 66.6666666667%; ++ -ms-flex-preferred-size: 66.6666666667%; ++ flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + + .cell-xs-offset-8 { + margin-left: 66.6666666667%; } + + .cell-xs-9 { +- flex-basis: 75%; ++ -webkit-flex-basis: 75%; ++ -ms-flex-preferred-size: 75%; ++ flex-basis: 75%; + max-width: 75%; } + + .cell-xs-offset-9 { + margin-left: 75%; } + + .cell-xs-10 { +- flex-basis: 83.3333333333%; ++ -webkit-flex-basis: 83.3333333333%; ++ -ms-flex-preferred-size: 83.3333333333%; ++ flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + + .cell-xs-offset-10 { + margin-left: 83.3333333333%; } + + .cell-xs-11 { +- flex-basis: 91.6666666667%; ++ -webkit-flex-basis: 91.6666666667%; ++ -ms-flex-preferred-size: 91.6666666667%; ++ flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + + .cell-xs-offset-11 { + margin-left: 91.6666666667%; } + + .cell-xs-12 { +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + + .cell-xs-offset-12 { + margin-left: 100%; } + + .cell-xs { +- flex: 1 0; } ++ -webkit-box-flex: 1; ++ -webkit-flex: 1 0; ++ -ms-flex: 1 0; ++ flex: 1 0; } + .cell-xs-order--first { +- order: -1; } ++ -webkit-box-ordinal-group: 0; ++ -webkit-order: -1; ++ -ms-flex-order: -1; ++ order: -1; } + .cell-xs-order--last { +- order: 1; } ++ -webkit-box-ordinal-group: 2; ++ -webkit-order: 1; ++ -ms-flex-order: 1; ++ order: 1; } + + @media (min-width: 40em) { + .grid { + width: 40em; } +@@ -336,73 +419,106 @@ + display: block; } + .visible-lg { + display: none; } + .cell-sm-1 { +- flex-basis: 8.3333333333%; ++ -webkit-flex-basis: 8.3333333333%; ++ -ms-flex-preferred-size: 8.3333333333%; ++ flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-sm-offset-1 { + margin-left: 8.3333333333%; } + .cell-sm-2 { +- flex-basis: 16.6666666667%; ++ -webkit-flex-basis: 16.6666666667%; ++ -ms-flex-preferred-size: 16.6666666667%; ++ flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-sm-offset-2 { + margin-left: 16.6666666667%; } + .cell-sm-3 { +- flex-basis: 25%; ++ -webkit-flex-basis: 25%; ++ -ms-flex-preferred-size: 25%; ++ flex-basis: 25%; + max-width: 25%; } + .cell-sm-offset-3 { + margin-left: 25%; } + .cell-sm-4 { +- flex-basis: 33.3333333333%; ++ -webkit-flex-basis: 33.3333333333%; ++ -ms-flex-preferred-size: 33.3333333333%; ++ flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-sm-offset-4 { + margin-left: 33.3333333333%; } + .cell-sm-5 { +- flex-basis: 41.6666666667%; ++ -webkit-flex-basis: 41.6666666667%; ++ -ms-flex-preferred-size: 41.6666666667%; ++ flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-sm-offset-5 { + margin-left: 41.6666666667%; } + .cell-sm-6 { +- flex-basis: 50%; ++ -webkit-flex-basis: 50%; ++ -ms-flex-preferred-size: 50%; ++ flex-basis: 50%; + max-width: 50%; } + .cell-sm-offset-6 { + margin-left: 50%; } + .cell-sm-7 { +- flex-basis: 58.3333333333%; ++ -webkit-flex-basis: 58.3333333333%; ++ -ms-flex-preferred-size: 58.3333333333%; ++ flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-sm-offset-7 { + margin-left: 58.3333333333%; } + .cell-sm-8 { +- flex-basis: 66.6666666667%; ++ -webkit-flex-basis: 66.6666666667%; ++ -ms-flex-preferred-size: 66.6666666667%; ++ flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-sm-offset-8 { + margin-left: 66.6666666667%; } + .cell-sm-9 { +- flex-basis: 75%; ++ -webkit-flex-basis: 75%; ++ -ms-flex-preferred-size: 75%; ++ flex-basis: 75%; + max-width: 75%; } + .cell-sm-offset-9 { + margin-left: 75%; } + .cell-sm-10 { +- flex-basis: 83.3333333333%; ++ -webkit-flex-basis: 83.3333333333%; ++ -ms-flex-preferred-size: 83.3333333333%; ++ flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-sm-offset-10 { + margin-left: 83.3333333333%; } + .cell-sm-11 { +- flex-basis: 91.6666666667%; ++ -webkit-flex-basis: 91.6666666667%; ++ -ms-flex-preferred-size: 91.6666666667%; ++ flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-sm-offset-11 { + margin-left: 91.6666666667%; } + .cell-sm-12 { +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + .cell-sm-offset-12 { + margin-left: 100%; } + .cell-sm { +- flex: 1 0; } ++ -webkit-box-flex: 1; ++ -webkit-flex: 1 0; ++ -ms-flex: 1 0; ++ flex: 1 0; } + .cell-sm-order--first { +- order: -1; } ++ -webkit-box-ordinal-group: 0; ++ -webkit-order: -1; ++ -ms-flex-order: -1; ++ order: -1; } + .cell-sm-order--last { +- order: 1; } } ++ -webkit-box-ordinal-group: 2; ++ -webkit-order: 1; ++ -ms-flex-order: 1; ++ order: 1; } } + + @media (min-width: 64em) { + .grid { + width: 64em; } +@@ -422,73 +538,106 @@ + display: block; } + .visible-lg { + display: none; } + .cell-md-1 { +- flex-basis: 8.3333333333%; ++ -webkit-flex-basis: 8.3333333333%; ++ -ms-flex-preferred-size: 8.3333333333%; ++ flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-md-offset-1 { + margin-left: 8.3333333333%; } + .cell-md-2 { +- flex-basis: 16.6666666667%; ++ -webkit-flex-basis: 16.6666666667%; ++ -ms-flex-preferred-size: 16.6666666667%; ++ flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-md-offset-2 { + margin-left: 16.6666666667%; } + .cell-md-3 { +- flex-basis: 25%; ++ -webkit-flex-basis: 25%; ++ -ms-flex-preferred-size: 25%; ++ flex-basis: 25%; + max-width: 25%; } + .cell-md-offset-3 { + margin-left: 25%; } + .cell-md-4 { +- flex-basis: 33.3333333333%; ++ -webkit-flex-basis: 33.3333333333%; ++ -ms-flex-preferred-size: 33.3333333333%; ++ flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-md-offset-4 { + margin-left: 33.3333333333%; } + .cell-md-5 { +- flex-basis: 41.6666666667%; ++ -webkit-flex-basis: 41.6666666667%; ++ -ms-flex-preferred-size: 41.6666666667%; ++ flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-md-offset-5 { + margin-left: 41.6666666667%; } + .cell-md-6 { +- flex-basis: 50%; ++ -webkit-flex-basis: 50%; ++ -ms-flex-preferred-size: 50%; ++ flex-basis: 50%; + max-width: 50%; } + .cell-md-offset-6 { + margin-left: 50%; } + .cell-md-7 { +- flex-basis: 58.3333333333%; ++ -webkit-flex-basis: 58.3333333333%; ++ -ms-flex-preferred-size: 58.3333333333%; ++ flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-md-offset-7 { + margin-left: 58.3333333333%; } + .cell-md-8 { +- flex-basis: 66.6666666667%; ++ -webkit-flex-basis: 66.6666666667%; ++ -ms-flex-preferred-size: 66.6666666667%; ++ flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-md-offset-8 { + margin-left: 66.6666666667%; } + .cell-md-9 { +- flex-basis: 75%; ++ -webkit-flex-basis: 75%; ++ -ms-flex-preferred-size: 75%; ++ flex-basis: 75%; + max-width: 75%; } + .cell-md-offset-9 { + margin-left: 75%; } + .cell-md-10 { +- flex-basis: 83.3333333333%; ++ -webkit-flex-basis: 83.3333333333%; ++ -ms-flex-preferred-size: 83.3333333333%; ++ flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-md-offset-10 { + margin-left: 83.3333333333%; } + .cell-md-11 { +- flex-basis: 91.6666666667%; ++ -webkit-flex-basis: 91.6666666667%; ++ -ms-flex-preferred-size: 91.6666666667%; ++ flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-md-offset-11 { + margin-left: 91.6666666667%; } + .cell-md-12 { +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + .cell-md-offset-12 { + margin-left: 100%; } + .cell-md { +- flex: 1 0; } ++ -webkit-box-flex: 1; ++ -webkit-flex: 1 0; ++ -ms-flex: 1 0; ++ flex: 1 0; } + .cell-md-order--first { +- order: -1; } ++ -webkit-box-ordinal-group: 0; ++ -webkit-order: -1; ++ -ms-flex-order: -1; ++ order: -1; } + .cell-md-order--last { +- order: 1; } } ++ -webkit-box-ordinal-group: 2; ++ -webkit-order: 1; ++ -ms-flex-order: 1; ++ order: 1; } } + + @media (min-width: 90em) { + .grid { + width: 90em; } +@@ -508,71 +657,102 @@ + display: none; } + .visible-lg { + display: block; } + .cell-lg-1 { +- flex-basis: 8.3333333333%; ++ -webkit-flex-basis: 8.3333333333%; ++ -ms-flex-preferred-size: 8.3333333333%; ++ flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-lg-offset-1 { + margin-left: 8.3333333333%; } + .cell-lg-2 { +- flex-basis: 16.6666666667%; ++ -webkit-flex-basis: 16.6666666667%; ++ -ms-flex-preferred-size: 16.6666666667%; ++ flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-lg-offset-2 { + margin-left: 16.6666666667%; } + .cell-lg-3 { +- flex-basis: 25%; ++ -webkit-flex-basis: 25%; ++ -ms-flex-preferred-size: 25%; ++ flex-basis: 25%; + max-width: 25%; } + .cell-lg-offset-3 { + margin-left: 25%; } + .cell-lg-4 { +- flex-basis: 33.3333333333%; ++ -webkit-flex-basis: 33.3333333333%; ++ -ms-flex-preferred-size: 33.3333333333%; ++ flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-lg-offset-4 { + margin-left: 33.3333333333%; } + .cell-lg-5 { +- flex-basis: 41.6666666667%; ++ -webkit-flex-basis: 41.6666666667%; ++ -ms-flex-preferred-size: 41.6666666667%; ++ flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-lg-offset-5 { + margin-left: 41.6666666667%; } + .cell-lg-6 { +- flex-basis: 50%; ++ -webkit-flex-basis: 50%; ++ -ms-flex-preferred-size: 50%; ++ flex-basis: 50%; + max-width: 50%; } + .cell-lg-offset-6 { + margin-left: 50%; } + .cell-lg-7 { +- flex-basis: 58.3333333333%; ++ -webkit-flex-basis: 58.3333333333%; ++ -ms-flex-preferred-size: 58.3333333333%; ++ flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-lg-offset-7 { + margin-left: 58.3333333333%; } + .cell-lg-8 { +- flex-basis: 66.6666666667%; ++ -webkit-flex-basis: 66.6666666667%; ++ -ms-flex-preferred-size: 66.6666666667%; ++ flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-lg-offset-8 { + margin-left: 66.6666666667%; } + .cell-lg-9 { +- flex-basis: 75%; ++ -webkit-flex-basis: 75%; ++ -ms-flex-preferred-size: 75%; +\ No newline at end of file ++ flex-basis: 75%; + max-width: 75%; } + .cell-lg-offset-9 { + margin-left: 75%; } + .cell-lg-10 { +- flex-basis: 83.3333333333%; ++ -webkit-flex-basis: 83.3333333333%; ++ -ms-flex-preferred-size: 83.3333333333%; ++ flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-lg-offset-10 { + margin-left: 83.3333333333%; } + .cell-lg-11 { +- flex-basis: 91.6666666667%; ++ -webkit-flex-basis: 91.6666666667%; ++ -ms-flex-preferred-size: 91.6666666667%; ++ flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-lg-offset-11 { + margin-left: 91.6666666667%; } + .cell-lg-12 { +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + .cell-lg-offset-12 { + margin-left: 100%; } + .cell-lg { +- flex: 1 0; } ++ -webkit-box-flex: 1; ++ -webkit-flex: 1 0; ++ -ms-flex: 1 0; ++ flex: 1 0; } + .cell-lg-order--first { +- order: -1; } ++ -webkit-box-ordinal-group: 0; ++ -webkit-order: -1; ++ -ms-flex-order: -1; ++ order: -1; } + .cell-lg-order--last { +- order: 1; } } +- +-/*# sourceMappingURL=gridle.css.map */ ++ -webkit-box-ordinal-group: 2; ++ -webkit-order: 1; ++ -ms-flex-order: 1; ++ order: 1; } } diff --git a/dist/css/gridle.css.map b/dist/css/gridle.css.map new file mode 100644 index 0000000..4d2ddfe --- /dev/null +++ b/dist/css/gridle.css.map @@ -0,0 +1,12 @@ +{ + "version": 3, + "file": "gridle.css", + "sources": [ + "../../sass/gridle.scss", + "../../sass/config.scss", + "../../sass/gridlecss/_media.scss", + "../../sass/gridlecss/mixins.scss" + ], + "mappings": "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", + "names": [] +} \ No newline at end of file diff --git a/dist/gridle.css b/dist/gridle.css deleted file mode 100644 index 9963f62..0000000 --- a/dist/gridle.css +++ /dev/null @@ -1,580 +0,0 @@ -:root { - --grid-sm-container: calc( 768px); - --grid-md-container: calc( 982px); - --grid-lg-container: calc( 1200px); - --grid-gutter: 0; - --grid-gutter-calc: calc( var(--grid-gutter) / 2); } - -*, -*:before, -*:after { - box-sizing: border-box; } - -.grid, -.grid--fluid { - margin-left: auto; - margin-right: auto; - width: 100%; - height: 100%; } - -.row, -.column { - display: flex; } - -.row { - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; - margin-left: -var(--grid-gutter-calc); - margin-right: -var(--grid-gutter-calc); } - .row--reverse { - flex-direction: row-reverse; } - -.column { - flex-direction: column; } - .column--reverse { - flex-direction: column-reverse; } - -.distribute-around { - justify-content: space-around; } - -.distribute-between { - justify-content: space-between; } - -.align-center { - justify-content: center; - text-align: center; } - -.align-right { - justify-content: flex-end; - text-align: flex-end; } - -.align-top { - align-items: flex-start; } - -.align-middle { - align-items: center; } - -.align-bottom { - align-items: flex-end; } - -.align-baseline { - align-items: baseline; } - -.align-stretch { - align-items: stretch; } - -.cell { - margin-left: var(--grid-gutter-calc); - margin-right: var(--grid-gutter-calc); - flex-basis: 100%; - max-width: 100%; } - .cell-order--first { - order: -1; } - .cell-order--last { - order: 1; } - .cell-align--center { - align-self: center; } - .cell-align--right { - align-self: flex-end; } - .cell-align--top { - align-self: flex-start; } - .cell-align--middle { - align-self: center; } - .cell-align--bottom { - align-self: flex-end; } - .cell-align--baseline { - align-self: baseline; } - .cell-align--stretch { - align-self: stretch; } - -.cell-xs, -.cell-xs-1, -.cell-xs-offset-1, .cell-xs-2, -.cell-xs-offset-2, .cell-xs-3, -.cell-xs-offset-3, .cell-xs-4, -.cell-xs-offset-4, .cell-xs-5, -.cell-xs-offset-5, .cell-xs-6, -.cell-xs-offset-6, .cell-xs-7, -.cell-xs-offset-7, .cell-xs-8, -.cell-xs-offset-8, .cell-xs-9, -.cell-xs-offset-9, .cell-xs-10, -.cell-xs-offset-10, .cell-xs-11, -.cell-xs-offset-11, .cell-xs-12, -.cell-xs-offset-12, .cell-sm, -.cell-sm-1, -.cell-sm-offset-1, .cell-sm-2, -.cell-sm-offset-2, .cell-sm-3, -.cell-sm-offset-3, .cell-sm-4, -.cell-sm-offset-4, .cell-sm-5, -.cell-sm-offset-5, .cell-sm-6, -.cell-sm-offset-6, .cell-sm-7, -.cell-sm-offset-7, .cell-sm-8, -.cell-sm-offset-8, .cell-sm-9, -.cell-sm-offset-9, .cell-sm-10, -.cell-sm-offset-10, .cell-sm-11, -.cell-sm-offset-11, .cell-sm-12, -.cell-sm-offset-12, .cell-md, -.cell-md-1, -.cell-md-offset-1, .cell-md-2, -.cell-md-offset-2, .cell-md-3, -.cell-md-offset-3, .cell-md-4, -.cell-md-offset-4, .cell-md-5, -.cell-md-offset-5, .cell-md-6, -.cell-md-offset-6, .cell-md-7, -.cell-md-offset-7, .cell-md-8, -.cell-md-offset-8, .cell-md-9, -.cell-md-offset-9, .cell-md-10, -.cell-md-offset-10, .cell-md-11, -.cell-md-offset-11, .cell-md-12, -.cell-md-offset-12, .cell-lg, -.cell-lg-1, -.cell-lg-offset-1, .cell-lg-2, -.cell-lg-offset-2, .cell-lg-3, -.cell-lg-offset-3, .cell-lg-4, -.cell-lg-offset-4, .cell-lg-5, -.cell-lg-offset-5, .cell-lg-6, -.cell-lg-offset-6, .cell-lg-7, -.cell-lg-offset-7, .cell-lg-8, -.cell-lg-offset-8, .cell-lg-9, -.cell-lg-offset-9, .cell-lg-10, -.cell-lg-offset-10, .cell-lg-11, -.cell-lg-offset-11, .cell-lg-12, -.cell-lg-offset-12 { - display: flex; - flex: 1 0 auto; - flex-direction: column; } - -@media only screen { - .grid { - width: var(--grid-xs-container); } - .distribute-xs-around { - justify-content: space-around; } - .distribute-xs-between { - justify-content: space-between; } - .align-xs-center { - justify-content: center; - text-align: center; } - .align-xs-right { - justify-content: flex-end; - text-align: flex-end; } - .align-xs-top { - align-items: flex-start; } - .align-xs-middle { - align-items: center; } - .align-xs-bottom { - align-items: flex-end; } - .align-xs-baseline { - align-items: baseline; } - .align-xs-stretch { - align-items: stretch; } - .cell-xs { - flex: 1 0; - flex-basis: 0; - max-width: 100%; } - .cell-xs-order--first { - order: -1; } - .cell-xs-order--last { - order: 1; } - .cell-xs-offset { - margin-left: 0 !important; } - .cell-xs-align--center { - align-self: center; } - .cell-xs-align--right { - align-self: flex-end; } - .cell-xs-align--top { - align-self: flex-start; } - .cell-xs-align--middle { - align-self: center; } - .cell-xs-align--bottom { - align-self: flex-end; } - .cell-xs-align--baseline { - align-self: baseline; } - .cell-xs-align--stretch { - align-self: stretch; } - .cell-xs-1 { - flex-basis: 8.3333333333%; - max-width: 8.3333333333%; } - .cell-xs-offset-1 { - margin-left: 8.3333333333% !important; } - .cell-xs-2 { - flex-basis: 16.6666666667%; - max-width: 16.6666666667%; } - .cell-xs-offset-2 { - margin-left: 16.6666666667% !important; } - .cell-xs-3 { - flex-basis: 25%; - max-width: 25%; } - .cell-xs-offset-3 { - margin-left: 25% !important; } - .cell-xs-4 { - flex-basis: 33.3333333333%; - max-width: 33.3333333333%; } - .cell-xs-offset-4 { - margin-left: 33.3333333333% !important; } - .cell-xs-5 { - flex-basis: 41.6666666667%; - max-width: 41.6666666667%; } - .cell-xs-offset-5 { - margin-left: 41.6666666667% !important; } - .cell-xs-6 { - flex-basis: 50%; - max-width: 50%; } - .cell-xs-offset-6 { - margin-left: 50% !important; } - .cell-xs-7 { - flex-basis: 58.3333333333%; - max-width: 58.3333333333%; } - .cell-xs-offset-7 { - margin-left: 58.3333333333% !important; } - .cell-xs-8 { - flex-basis: 66.6666666667%; - max-width: 66.6666666667%; } - .cell-xs-offset-8 { - margin-left: 66.6666666667% !important; } - .cell-xs-9 { - flex-basis: 75%; - max-width: 75%; } - .cell-xs-offset-9 { - margin-left: 75% !important; } - .cell-xs-10 { - flex-basis: 83.3333333333%; - max-width: 83.3333333333%; } - .cell-xs-offset-10 { - margin-left: 83.3333333333% !important; } - .cell-xs-11 { - flex-basis: 91.6666666667%; - max-width: 91.6666666667%; } - .cell-xs-offset-11 { - margin-left: 91.6666666667% !important; } - .cell-xs-12 { - flex-basis: 100%; - max-width: 100%; } - .cell-xs-offset-12 { - margin-left: 100% !important; } } - -@media only screen and (min-width: 768px) { - .grid { - width: var(--grid-sm-container); } - .distribute-sm-around { - justify-content: space-around; } - .distribute-sm-between { - justify-content: space-between; } - .align-sm-center { - justify-content: center; - text-align: center; } - .align-sm-right { - justify-content: flex-end; - text-align: flex-end; } - .align-sm-top { - align-items: flex-start; } - .align-sm-middle { - align-items: center; } - .align-sm-bottom { - align-items: flex-end; } - .align-sm-baseline { - align-items: baseline; } - .align-sm-stretch { - align-items: stretch; } - .cell-sm { - flex: 1 0; - flex-basis: 0; - max-width: 100%; } - .cell-sm-order--first { - order: -1; } - .cell-sm-order--last { - order: 1; } - .cell-sm-offset { - margin-left: 0 !important; } - .cell-sm-align--center { - align-self: center; } - .cell-sm-align--right { - align-self: flex-end; } - .cell-sm-align--top { - align-self: flex-start; } - .cell-sm-align--middle { - align-self: center; } - .cell-sm-align--bottom { - align-self: flex-end; } - .cell-sm-align--baseline { - align-self: baseline; } - .cell-sm-align--stretch { - align-self: stretch; } - .cell-sm-1 { - flex-basis: 8.3333333333%; - max-width: 8.3333333333%; } - .cell-sm-offset-1 { - margin-left: 8.3333333333% !important; } - .cell-sm-2 { - flex-basis: 16.6666666667%; - max-width: 16.6666666667%; } - .cell-sm-offset-2 { - margin-left: 16.6666666667% !important; } - .cell-sm-3 { - flex-basis: 25%; - max-width: 25%; } - .cell-sm-offset-3 { - margin-left: 25% !important; } - .cell-sm-4 { - flex-basis: 33.3333333333%; - max-width: 33.3333333333%; } - .cell-sm-offset-4 { - margin-left: 33.3333333333% !important; } - .cell-sm-5 { - flex-basis: 41.6666666667%; - max-width: 41.6666666667%; } - .cell-sm-offset-5 { - margin-left: 41.6666666667% !important; } - .cell-sm-6 { - flex-basis: 50%; - max-width: 50%; } - .cell-sm-offset-6 { - margin-left: 50% !important; } - .cell-sm-7 { - flex-basis: 58.3333333333%; - max-width: 58.3333333333%; } - .cell-sm-offset-7 { - margin-left: 58.3333333333% !important; } - .cell-sm-8 { - flex-basis: 66.6666666667%; - max-width: 66.6666666667%; } - .cell-sm-offset-8 { - margin-left: 66.6666666667% !important; } - .cell-sm-9 { - flex-basis: 75%; - max-width: 75%; } - .cell-sm-offset-9 { - margin-left: 75% !important; } - .cell-sm-10 { - flex-basis: 83.3333333333%; - max-width: 83.3333333333%; } - .cell-sm-offset-10 { - margin-left: 83.3333333333% !important; } - .cell-sm-11 { - flex-basis: 91.6666666667%; - max-width: 91.6666666667%; } - .cell-sm-offset-11 { - margin-left: 91.6666666667% !important; } - .cell-sm-12 { - flex-basis: 100%; - max-width: 100%; } - .cell-sm-offset-12 { - margin-left: 100% !important; } } - -@media only screen and (min-width: 982px) { - .grid { - width: var(--grid-md-container); } - .distribute-md-around { - justify-content: space-around; } - .distribute-md-between { - justify-content: space-between; } - .align-md-center { - justify-content: center; - text-align: center; } - .align-md-right { - justify-content: flex-end; - text-align: flex-end; } - .align-md-top { - align-items: flex-start; } - .align-md-middle { - align-items: center; } - .align-md-bottom { - align-items: flex-end; } - .align-md-baseline { - align-items: baseline; } - .align-md-stretch { - align-items: stretch; } - .cell-md { - flex: 1 0; - flex-basis: 0; - max-width: 100%; } - .cell-md-order--first { - order: -1; } - .cell-md-order--last { - order: 1; } - .cell-md-offset { - margin-left: 0 !important; } - .cell-md-align--center { - align-self: center; } - .cell-md-align--right { - align-self: flex-end; } - .cell-md-align--top { - align-self: flex-start; } - .cell-md-align--middle { - align-self: center; } - .cell-md-align--bottom { - align-self: flex-end; } - .cell-md-align--baseline { - align-self: baseline; } - .cell-md-align--stretch { - align-self: stretch; } - .cell-md-1 { - flex-basis: 8.3333333333%; - max-width: 8.3333333333%; } - .cell-md-offset-1 { - margin-left: 8.3333333333% !important; } - .cell-md-2 { - flex-basis: 16.6666666667%; - max-width: 16.6666666667%; } - .cell-md-offset-2 { - margin-left: 16.6666666667% !important; } - .cell-md-3 { - flex-basis: 25%; - max-width: 25%; } - .cell-md-offset-3 { - margin-left: 25% !important; } - .cell-md-4 { - flex-basis: 33.3333333333%; - max-width: 33.3333333333%; } - .cell-md-offset-4 { - margin-left: 33.3333333333% !important; } - .cell-md-5 { - flex-basis: 41.6666666667%; - max-width: 41.6666666667%; } - .cell-md-offset-5 { - margin-left: 41.6666666667% !important; } - .cell-md-6 { - flex-basis: 50%; - max-width: 50%; } - .cell-md-offset-6 { - margin-left: 50% !important; } - .cell-md-7 { - flex-basis: 58.3333333333%; - max-width: 58.3333333333%; } - .cell-md-offset-7 { - margin-left: 58.3333333333% !important; } - .cell-md-8 { - flex-basis: 66.6666666667%; - max-width: 66.6666666667%; } - .cell-md-offset-8 { - margin-left: 66.6666666667% !important; } - .cell-md-9 { - flex-basis: 75%; - max-width: 75%; } - .cell-md-offset-9 { - margin-left: 75% !important; } - .cell-md-10 { - flex-basis: 83.3333333333%; - max-width: 83.3333333333%; } - .cell-md-offset-10 { - margin-left: 83.3333333333% !important; } - .cell-md-11 { - flex-basis: 91.6666666667%; - max-width: 91.6666666667%; } - .cell-md-offset-11 { - margin-left: 91.6666666667% !important; } - .cell-md-12 { - flex-basis: 100%; - max-width: 100%; } - .cell-md-offset-12 { - margin-left: 100% !important; } } - -@media only screen and (min-width: 1200px) { - .grid { - width: var(--grid-lg-container); } - .distribute-lg-around { - justify-content: space-around; } - .distribute-lg-between { - justify-content: space-between; } - .align-lg-center { - justify-content: center; - text-align: center; } - .align-lg-right { - justify-content: flex-end; - text-align: flex-end; } - .align-lg-top { - align-items: flex-start; } - .align-lg-middle { - align-items: center; } - .align-lg-bottom { - align-items: flex-end; } - .align-lg-baseline { - align-items: baseline; } - .align-lg-stretch { - align-items: stretch; } - .cell-lg { - flex: 1 0; - flex-basis: 0; - max-width: 100%; } - .cell-lg-order--first { - order: -1; } - .cell-lg-order--last { - order: 1; } - .cell-lg-offset { - margin-left: 0 !important; } - .cell-lg-align--center { - align-self: center; } - .cell-lg-align--right { - align-self: flex-end; } - .cell-lg-align--top { - align-self: flex-start; } - .cell-lg-align--middle { - align-self: center; } - .cell-lg-align--bottom { - align-self: flex-end; } - .cell-lg-align--baseline { - align-self: baseline; } - .cell-lg-align--stretch { - align-self: stretch; } - .cell-lg-1 { - flex-basis: 8.3333333333%; - max-width: 8.3333333333%; } - .cell-lg-offset-1 { - margin-left: 8.3333333333% !important; } - .cell-lg-2 { - flex-basis: 16.6666666667%; - max-width: 16.6666666667%; } - .cell-lg-offset-2 { - margin-left: 16.6666666667% !important; } - .cell-lg-3 { - flex-basis: 25%; - max-width: 25%; } - .cell-lg-offset-3 { - margin-left: 25% !important; } - .cell-lg-4 { - flex-basis: 33.3333333333%; - max-width: 33.3333333333%; } - .cell-lg-offset-4 { - margin-left: 33.3333333333% !important; } - .cell-lg-5 { - flex-basis: 41.6666666667%; - max-width: 41.6666666667%; } - .cell-lg-offset-5 { - margin-left: 41.6666666667% !important; } - .cell-lg-6 { - flex-basis: 50%; - max-width: 50%; } - .cell-lg-offset-6 { - margin-left: 50% !important; } - .cell-lg-7 { - flex-basis: 58.3333333333%; - max-width: 58.3333333333%; } - .cell-lg-offset-7 { - margin-left: 58.3333333333% !important; } - .cell-lg-8 { - flex-basis: 66.6666666667%; - max-width: 66.6666666667%; } - .cell-lg-offset-8 { - margin-left: 66.6666666667% !important; } - .cell-lg-9 { - flex-basis: 75%; - max-width: 75%; } - .cell-lg-offset-9 { - margin-left: 75% !important; } - .cell-lg-10 { - flex-basis: 83.3333333333%; - max-width: 83.3333333333%; } - .cell-lg-offset-10 { - margin-left: 83.3333333333% !important; } - .cell-lg-11 { - flex-basis: 91.6666666667%; - max-width: 91.6666666667%; } - .cell-lg-offset-11 { - margin-left: 91.6666666667% !important; } - .cell-lg-12 { - flex-basis: 100%; - max-width: 100%; } - .cell-lg-offset-12 { - margin-left: 100% !important; } } - -/*# sourceMappingURL=gridle.css.map */ \ No newline at end of file diff --git a/dist/gridle.css.map b/dist/gridle.css.map deleted file mode 100644 index 77e62fd..0000000 --- a/dist/gridle.css.map +++ /dev/null @@ -1,12 +0,0 @@ -{ - "version": 3, - "file": "gridle.css", - "sources": [ - "../grid/gridlecss.scss", - "../grid/config.scss", - "../grid/gridlecss/mixins.scss" - ], - "sourcesContent": [], - "mappings": "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", - "names": [] -} \ No newline at end of file diff --git a/docs/.bowerrc b/docs/.bowerrc new file mode 100644 index 0000000..44491d3 --- /dev/null +++ b/docs/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "bower_components" +} diff --git a/docs/Gruntfile.js b/docs/Gruntfile.js new file mode 100644 index 0000000..1f2b9ed --- /dev/null +++ b/docs/Gruntfile.js @@ -0,0 +1,268 @@ +module.exports = function(grunt) { + + var appConfig = { + host: 'localhost', + port: 1338, + src_dir: '', + dist_dir: 'dist/' + }; + + require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); + + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + appConfig: appConfig, + + watch: { + grunt: { + files: 'Gruntfile.js' + }, + sass: { + files: ['<%= appConfig.src_dir %>css/**/*.scss'], + tasks: ['sass', 'postcss', 'cssnext'] + }, + uglify: { + files: ['<%= appConfig.src_dir %>js/**/*.js'], + tasks: ['uglify'] + }, + jade: { + files: ['<%= appConfig.src_dir %>**/*.jade'], + tasks: ['jade'] + } + }, + + browserSync: { + dev: { + bsFiles: { + src: [ + '<%= appConfig.dist_dir %>css/*.css', + '<%= appConfig.dist_dir %>js/*.js', + '<%= appConfig.dist_dir %>*.html', + '<%= appConfig.dist_dir %>img/*.jpg', + '<%= appConfig.dist_dir %>img/*.png', + ], + }, + + options: { + watchTask: true, + server: { + baseDir: appConfig.dist_dir + }, + debugInfo: true, + logConnections: true, + notify: true, + plugins: [ + { + module: 'bs-html-injector', + options: { + files: '<%= appConfig.dist_dir %>*.html' + } + } + ], + ghostMode: { + scroll: true, + links: true, + forms: true + } + }, + + bsReload: { + all: { + reload: true + } + } + } + }, + + clean: { + options: { + dot: true + }, + + dist: { + src: ['<%= appConfig.dist_dir %>'] + } + }, + + copy: { + src: { + files: [{ + expand: true, + dot: true, + flatten: true, + src: ['bower_components/font-awesome/fonts/*', '<%= appConfig.src_dir %>fonts/*'], + dest: '<%= appConfig.dist_dir %>fonts/', + filter: 'isFile' + }] + } + }, + + sass: { + options: { + sourceMap: true + }, + + dist: { + files: { + '<%= appConfig.dist_dir %>css/main.min.css': '<%= appConfig.src_dir %>css/main.scss' + } + } + }, + + postcss: { + options: { + map: false, + processors: [ + require('autoprefixer-core')({ + browsers: ['last 5 versions', '> 15%', 'IE 10'] + }) + ] + }, + + dist: { + src: ['<%= appConfig.dist_dir %>css/main.min.css'] + } + }, + + cssnext: { + options: { + sourcemap: false + }, + + dist: { + files: { + '<%= appConfig.dist_dir %>css/main.min.css': '<%= appConfig.dist_dir %>css/main.min.css' + } + } + }, + + cssbeautifier : { + files : ['<%= appConfig.dist_dir %>css/main.min.css'], + options : { + indent: ' ', + openbrace: 'end-of-line', + autosemicolon: true + } + }, + + cssmin: { + options: { + shorthandCompacting: false, + roundingPrecision: -1 + }, + + target: { + files: { + '<%= appConfig.dist_dir %>css/main.min.css': ['<%= appConfig.dist_dir %>css/main.min.css'], + } + } + }, + + uglify: { + dist: { + options: { + beautify: true + }, + + files: { + '<%= appConfig.dist_dir %>js/main.min.js': ['<%= appConfig.src_dir %>js/**/*.js'] + } + } + }, + + jade: { + html: { + files: { + '<%= appConfig.dist_dir %>': ['<%= appConfig.src_dir %>*.jade'] + }, + + options: { + client: false, + pretty: true + } + } + }, + + imagemin: { + png: { + options: { + optimizationLevel: 7 + }, + files: [ + { + expand: true, + cwd: '<%= appConfig.src_dir %>img/', + src: ['**/*.png'], + dest: '<%= appConfig.dist_dir %>img/', + ext: '.png' + } + ] + }, + + jpg: { + options: { + progressive: true + }, + files: [ + { + expand: true, + cwd: '<%= appConfig.src_dir %>img/', + src: ['**/*.jpg'], + dest: '<%= appConfig.dist_dir %>img/', + ext: '.jpg' + } + ] + } + }, + + svgmin: { + options: { + plugins: [ + { collapseGroups: false }, + { removeUnknownsAndDefaults: false } + ] + }, + dist: { + files: [{ + expand: true, + cwd: '<%= appConfig.src_dir %>img', + src: '{,*/}*.svg', + dest: '<%= appConfig.dist_dir %>img' + }] + } + } + }); + + grunt.registerTask('compile-css', [ + 'sass', + 'postcss', + 'cssnext', + 'imagemin', + 'svgmin', + 'copy' + ]); + + grunt.registerTask('compile-js', [ + 'uglify' + ]); + + grunt.registerTask('compile-html', [ + 'jade' + ]); + + grunt.registerTask('compile-theme', ['compile-css', 'compile-js', 'compile-html']); + + grunt.registerTask('prettify', [ + 'cssbeautifier', + 'cssmin' + ]); + + grunt.registerTask('preview', [ + 'compile-theme', + 'browserSync', + 'watch' + ]); + + grunt.registerTask('default', ['preview']); + grunt.registerTask('prepare', ['compile-theme', 'prettify']); +} diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..2ce7104 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,52 @@ +## GridleCSS Theme + +http://studio51.github.io/gridlecss/ + +A `test` theme for GridleCSS in order to test all the frameworks components. +This theme relies, heavily, on GridleCSS. Any changes, if any, made on the +framework will affect this theme. + +### Installation + +``` bash +$ git clone git@github.com:studio51/gridlecss.git +$ cd web +$ npm install +``` + +We use [Grunt.JS] as our Task Runner in order to compile the SASS files. +If you haven't used Grunt before, be sure to check out the Getting Started +guide, as it explains how to create a Gruntfile as well as install and use Grunt +plugins. + +`$ grunt` + +This is the default task which will `clean` the `dist` folder and `compile` the +all the theme files, such SASS, JS and JADE. + +It will also launch a server on `localhost:1337` so make sure the port is not in +use by any other service. The server comes with livereload in order to see +updates as they happen in your browser. + +`$ grunt compile` + +This will `clean` the `dist` folder and `compile` the all the theme files, such +SASS, JS and JADE. + +`$ grunt ship` + +If you make any changes to GridleCSS Theme and whish to make a pull request or +use it, use this task which will `clean`, `compile`, and `prettify` all the +resources used by the theme. + +### Open for pull requests + +Before making any pull requests, make sure the Theme looks as it should by using +the `$ grunt` task. + +### License + +MIT © [Studio51] + +[Studio51]:http://creative-studio51.co.uk +[Grunt.JS]:http://gruntjs.com diff --git a/docs/bower.json b/docs/bower.json new file mode 100644 index 0000000..291b176 --- /dev/null +++ b/docs/bower.json @@ -0,0 +1,21 @@ +{ + "name": "GridleCSS", + "version": "1.0.0", + "homepage": "https://github.com/studio51/framework-gridlex", + "authors": [ + "Vlad Radulescu " + ], + "description": "''", + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "devDependencies": { + "font-awesome": "~4.4.0", + "gridlecss": "*" + } +} diff --git a/docs/css/components/_buttons.scss b/docs/css/components/_buttons.scss new file mode 100644 index 0000000..1b91f4a --- /dev/null +++ b/docs/css/components/_buttons.scss @@ -0,0 +1,33 @@ +$buttons: green, blue, orange, yellow, red; +$color: $green, $blue, $orange, $yellow, $red; +$darker: $darkgreen, $darkblue, $darkorange, $darkyellow, $darkred; + +@mixin btn-shadow($color) { + box-shadow: 0 2px 0 rgba($color, .8); +} + +.btn { + border-radius: $theme-border--radius; + color: #fff; + display: inline-flex; + font-weight: 300; + line-height: $theme-spacing; + padding: ( $theme-spacing / 2 ) $theme-spacing; + + &--outline { + border: $theme-border--size solid $theme-border--color; + } + + @for $i from 1 through length($buttons) { + + &-#{ nth($buttons, $i )} { + background-color: saturate(nth($color, $i), 10%); + + @include btn-shadow(nth($darker, $i)); + + &:hover { + background-color: nth($color, $i); + } + } + } +} diff --git a/grid/config.scss b/docs/css/config.scss similarity index 63% rename from grid/config.scss rename to docs/css/config.scss index 03d198f..fa7af26 100644 --- a/grid/config.scss +++ b/docs/css/config.scss @@ -39,33 +39,39 @@ $grid-minimal: true !default; // $grid-columns: 12 !default; -// Grid breakpoints -// -// Options: [xs sm md lg] -// -$grid-breakpoints: "xs" "sm" "md" "lg"; +$mq-base-font-size: 16px !default; +$mq-responsive: true !default; +$mq-breakpoints: ( + xs: 0, + sm: 40em, + md: 64em, + lg: 90em +) !default; -// Grid breakpoints -// If you want to add more, just make sure you respect the naming convention: -// -// $grid-#{key}-min: #{value}; -// -// $grid-sm-min: 40.063em; -// $grid-md-min: 64.063em; -// $grid-lg-min: 90.063em; -// -$grid-sm-min: 768px; -$grid-md-min: 982px; -$grid-lg-min: 1200px; +$mq-static-breakpoint: desktop !default; +$mq-show-breakpoints: (xs, sm, md, lg) !default; +$mq-media-type: all !default; // Distribute the cells spacing around or between them // $flex-distribution: true !default; -$flex-distributions: "around" "between"; +$flex-distributions: 'around' 'between'; // Alignments for main axis (x): left, center, right // Alignments for cross axis (y): top, middle, bottom, baseline // $flex-alignment: true !default; -$flex-alignments: "x" ("center"("center"), "right"("flex-end")), - "y" ("top"("flex-start"), "middle"("center"), "bottom"("flex-end"), "baseline"("baseline"), "stretch"("stretch")); +$flex-alignments: 'x' ('center'('center'), 'right'('flex-end')), + 'y' ('top'('flex-start'), 'middle'('center'), 'bottom'('flex-end'), "baseline"("baseline"), "stretch"("stretch")); + +@import "gridlecss/media"; + +// By default, GridleCSS responds to the following media queries: xs (default), +// sm, md and lg. If $minimal-breakpoints it's set as true, then another breakp- +// oint will be added, xl . + +$minial-breakpoints: false; + +@if $minial-breakpoints { + @include mq-add-breakpoint(xl, 120em); +} diff --git a/docs/css/gridle.scss b/docs/css/gridle.scss new file mode 100644 index 0000000..83e5a7e --- /dev/null +++ b/docs/css/gridle.scss @@ -0,0 +1,126 @@ +@import "config"; + +@import "gridlecss/mixins"; +@import "gridlecss/media"; + + [class*="cell"] { + flex-basis: 100%; + max-width: 100%; + } + +*, +*:before, +*:after { + box-sizing: border-box; +} + +.grid, +.grid--fluid { + height: 100%; + margin-left: auto; + margin-right: auto; + width: 100%; +} + +.row { + display: flex; + flex: 0 1 auto; + flex-wrap: wrap; + + &--reverse { + flex-direction: row-reverse; + } +} + +%make-cell { + display: flex; + flex: 1 0 auto; + flex-direction: column; +} + +@if $flex-distribution { + @each $distribution in $flex-distributions { + + .distribute-#{ $distribution } { + justify-content: space-#{ $distribution }; + } + } +} + +@if $flex-alignment { + @each $alignment in $flex-alignments { + @include flex-alignments( ".align-", nth($alignment, 1), nth($alignment, 2), "parent"); + } +} + +@each $breakpoint in $mq-breakpoints { + + $break: nth($breakpoint, 1); + $size: nth($breakpoint, 2); + + @mixin grid { + @if $size == 0 { @content } @else { + @include mq($from: $break) { @content } + } + } + + @include grid { + + @if $size == 0 { } @else { + .grid { + width: $size; + } + } + + @each $breakpoint in $mq-breakpoints { + $b: nth($breakpoint, 1); + + @if $break == $b { + + .hidden-#{ $b } { display: none; } + .visible-#{ $b } { display: block; } + + } @else { + + .hidden-#{ $b } { display: block; } + .visible-#{ $b } { display: none; } + + } + } + + @for $i from 1 through $grid-columns { + + .cell-#{ $break }, + .cell-#{ $break }-#{ $i }, + .cell-#{ $break }-offset-#{ $i } { + @extend %make-cell; + } + } + + @for $i from 1 through $grid-columns { + $grid-column-width: (( 100 / $grid-columns ) * $i ) * 1%; + $grid-gutter-calc: $grid-gutter / ( $grid-gutter * 0 + 1 ); + + .cell-#{ $break }-#{ $i } { + flex-basis: $grid-column-width; + max-width: $grid-column-width; + } + + .cell-#{ $break }-offset-#{ $i } { + margin-left: $grid-column-width; + } + } + + .cell-#{ $break } { + flex: 1 0; + // flex-basis: 0; + // max-width: 100%; + + &-order { + + &--first { order: -1; } + &--last { order: 1; } + } + } + } +} diff --git a/docs/css/gridlecss/_media.scss b/docs/css/gridlecss/_media.scss new file mode 100644 index 0000000..658c8cf --- /dev/null +++ b/docs/css/gridlecss/_media.scss @@ -0,0 +1,106 @@ +@charset "UTF-8"; // https://github.com/sass-mq/sass-mq/blob/master/_mq.scss + +@function mq-px2em($px, $base-font-size: $mq-base-font-size) { + @if unitless($px) { + @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels."; + @return mq-px2em($px * 1px, $base-font-size); + } + @else if unit($px) == em { + @return $px; + } + @return $px / $base-font-size * 1em; +} + +@function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) { + @if map-has-key($breakpoints, $name) { + @return map-get($breakpoints, $name); + } + @else { + @warn "Breakpoint #{$name} wasn't found in $breakpoints."; + } +} + +@mixin mq($from: false, $until: false, $and: false, $media-type: $mq-media-type, $breakpoints: $mq-breakpoints, $responsive: $mq-responsive, $static-breakpoint: $mq-static-breakpoint) { + $min-width: 0; + $max-width: 0; + $media-query: ""; + // From: this breakpoint (inclusive) + @if $from { + @if type-of($from) == number { + $min-width: mq-px2em($from); + } + @else { + $min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints)); + } + } + // Until: that breakpoint (exclusive) + @if $until { + @if type-of($until) == number { + $max-width: mq-px2em($until); + } + @else { + $max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - 0.01em; + } + } + // Responsive support is disabled, rasterize the output outside @media blocks + // The browser will rely on the cascade itself. + @if $responsive == false { + $static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints); + $target-width: mq-px2em($static-breakpoint-width); + // Output only rules that start at or span our target width + @if $and == false and $min-width <= $target-width and ($until == false or $max-width >= $target-width) { + @content; + } + } + @else { + @if $min-width != 0 { + $media-query: "#{$media-query} and (min-width: #{$min-width})"; + } + @if $max-width != 0 { + $media-query: "#{$media-query} and (max-width: #{$max-width})"; + } + @if $and { + $media-query: "#{$media-query} and #{$and}"; + } + // Remove unnecessary media query prefix 'all and ' + @if $media-type == "all" and $media-query != "" { + $media-type: ""; + $media-query: str-slice(unquote($media-query), 6); + } + @media #{$media-type + $media-query} { + @content; + } + } +} + +@mixin mq-add-breakpoint($name, $width) { + $new-breakpoint: ($name: $width); + $mq-breakpoints: map-merge($mq-breakpoints, $new-breakpoint) !global; +} + +@mixin mq-show-breakpoints($show-breakpoints: $mq-show-breakpoints, $breakpoints: $mq-breakpoints) { + body:before { + background-color: #FCF8E3; + border-bottom: 1px solid #FBEED5; + border-left: 1px solid #FBEED5; + color: #C09853; + font: small-caption; + padding: 3px 6px; + pointer-events: none; + position: fixed; + right: 0; + top: 0; + z-index: 100; + // Loop through the breakpoints that should be shown + @each $show-breakpoint in $show-breakpoints { + $width: mq-get-breakpoint-width($show-breakpoint, $breakpoints); + @include mq($show-breakpoint, $breakpoints: $breakpoints) { + content: "#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})"; + } + } + } +} + +@if length($mq-show-breakpoints) > 0 { + @include mq-show-breakpoints; +} diff --git a/docs/css/gridlecss/mixins.scss b/docs/css/gridlecss/mixins.scss new file mode 100644 index 0000000..dd77dad --- /dev/null +++ b/docs/css/gridlecss/mixins.scss @@ -0,0 +1,30 @@ +// Generate Flex Alignments +// +@mixin flex-alignments( $parent, $axis, $class, $requester ) { + + @each $element in $class { + + $selector: nth($element, 1); + $rule: unquote(nth($element, 2)); + + #{ $parent }#{ $selector } { + + @if $axis == "x" { + + justify-content: $rule; + text-align: $rule; + + } @else if $axis == "y" { + + @if $requester == "parent" { + + align-items: $rule; + + } @else { + + align-self: $rule; + } + } + } + } +} diff --git a/docs/css/helpers/_animations.scss b/docs/css/helpers/_animations.scss new file mode 100644 index 0000000..3f04042 --- /dev/null +++ b/docs/css/helpers/_animations.scss @@ -0,0 +1,61 @@ +@keyframes rotate { + 0% { + background-position: 0% 18%; + } + + 50% { + background-position: 100% 83%; + } + + 100% { + background-position: 0% 18%; + } +} + +@keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + transform: translate3d(0, 25px, 0); + } + + 75% { + transform: translate3d(0, -10px, 0); + } + + 90% { + transform: translate3d(0, 5px, 0); + } + + 100% { + transform: none; + } +} + +@keyframes bounce { + 0%, 20%, 40%, 60%, 80%, 100% { + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + transform: translate3d(0, 15px, 0); + } +} + +.bounce { + animation-name: bounce; +} + +@mixin animated($animation-duration, $animation-iteration) { + animation-duration: $animation-duration; + animation-iteration-count: $animation-iteration; + animation-fill-mode: both; +} diff --git a/docs/css/helpers/_reset.scss b/docs/css/helpers/_reset.scss new file mode 100644 index 0000000..3c582a4 --- /dev/null +++ b/docs/css/helpers/_reset.scss @@ -0,0 +1,276 @@ +/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */ + +$root-box-sizing: border-box !default; +$root-cursor: default !default; +$root-font-family: sans-serif !default; +$root-font-size: 16px !default; +$root-line-height: 1.5 !default; +$root-text-rendering: optimizeLegibility !default; + +$html-background-color: #FFFFFF !default; +$anchor-text-decoration: none !default; +$form-element-background-color: transparent !default; +$form-element-min-height: if(unitless($root-line-height), #{$root-line-height}em, if(unit($root-line-height) != '%', $root-line-height, null)) !default; +$media-element-vertical-align: middle !default; +$monospace-font-family: monospace !default; +$nav-list-style: none !default; +$selection-background-color: #B3D4FC !default; +$selection-text-shadow: none !default; +$small-font-size: 75% !default; +$table-border-collapse: collapse !default; +$table-border-spacing: 0 !default; +$textarea-resize: vertical !default; + +/* + * Normalization + */ + +/* + + [0] IE11+ + [1] All browsers without overlaying scrollbars + [2] iOS8+ + [3] Chrome 40+, iOS 8+, Safari 8+ + [4] Firefox 36+, Internet Explorer 11+, Windows Phone 8.1+ + +*/ + +:root { + -ms-overflow-style: -ms-autohiding-scrollbar; /* [0] */ + overflow-y: scroll; /* [1] */ + text-size-adjust: 100%; /* [2] */ +} + +audio:not([controls]) { display: none; /* [3] */ } + +details, /* Android 4.3-, Internet Explorer 11+, Windows Phone 8.1+ */ +main, /* Firefox 36+, Internet Explorer 11+, Windows Phone 8.1+ */ +summary /* */ { + // display: block; +} + +details { display: block; /* [4] */ } + +input { + &[type="number"] { + width: auto; // Firefox 36+ + } + + &[type="search"] { + -webkit-appearance: textfield; // Safari 8+ + + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { + -webkit-appearance: none; // Safari 8+ + } + } +} + +pre { + overflow: auto; // Internet Explorer 11+ +} + +progress { + display: inline-block; // Internet Explorer 11+, Windows Phone 8.1+ +} + +small { + font-size: $small-font-size; // All browsers +} + +template { + display: none; // Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7-, Windows Phone 8.1+ +} + +textarea { + overflow: auto; // Internet Explorer 11+ +} + +[hidden] { + display: none; // Internet Explorer 10- +} + +[unselectable] { + user-select: none; // Android 4.4+, Chrome 40+, Firefox 36+, iOS 8+, Safari 8+ +} + + + +/* + * Universal inheritance + */ + +*, +::before, +::after { + box-sizing: inherit; +} + +* { + // font-size: inherit; + line-height: inherit; +} + +::before, +::after { + text-decoration: inherit; + vertical-align: inherit; +} + + + +/* + * Opinionated defaults + */ + +// specify solid border style of all elements + +*, +::before, +::after { + border-style: solid; + border-width: 0; +} + +// remove margin and padding of all elements + +* { + margin: 0; + padding: 0; +} + +// specify the root styles of the document + +:root { + box-sizing: $root-box-sizing; + cursor: $root-cursor; + font: #{$root-font-size}/#{$root-line-height} $root-font-family; + text-rendering: $root-text-rendering; +} + +// specify the html background color + +html { + background-color: $html-background-color; +} + +// specify the text decoration of anchors + +a { + text-decoration: $anchor-text-decoration; +} + +// specify media element style + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: $media-element-vertical-align; +} + +// specify the background color of form elements + +button, +input, +select, +textarea { + background-color: $form-element-background-color; +} + +// specify inheritance of form elements + +button, +input, +select, +textarea { + color: inherit; + font-family: inherit; + font-style: inherit; + font-weight: inherit; +} + +// specify the minimum height of form elements + +button, +input, +select, +textarea { + min-height: $form-element-min-height; +} + +// specify the font family of code elements + +code, +kbd, +pre, +samp { + font-family: $monospace-font-family, monospace; +} + +// specify the list style of nav lists + +nav ol, +nav ul { + list-style: $nav-list-style; +} + +// style select like a standard input + +select { + -moz-appearance: none; // Firefox 36+ + -webkit-appearance: none; // Chrome 41+ + + &::-ms-expand { + display: none; // Internet Explorer 11+ + } + + &::-ms-value { + color: currentColor; // Internet Explorer 11+ + } +} + +// specify the border styles of tables + +table { + border-collapse: $table-border-collapse; + border-spacing: $table-border-spacing; +} + +// specify textarea resizability + +textarea { + resize: $textarea-resize; +} + +// specify text selection background color and omit drop shadow + +::selection { + background-color: $selection-background-color; // required when declaring ::selection + text-shadow: $selection-text-shadow; +} + +// hide content from screens but not screenreaders + +@media screen { + [hidden~="screen"] { + display: inherit; + } + + [hidden~="screen"]:not(:active):not(:focus):not(:target) { + clip: rect(0 0 0 0) !important; + position: absolute !important; + } +} + +// a:not(.btn), +// li a { +// color: $blue; +// font-weight: 400; + +// &:hover { +// color: $darkblue; +// } +// } diff --git a/docs/css/helpers/_variables.scss b/docs/css/helpers/_variables.scss new file mode 100644 index 0000000..87f99da --- /dev/null +++ b/docs/css/helpers/_variables.scss @@ -0,0 +1,39 @@ +$green: #A0D468; +$lightgreen: #D5E1A3; +$darkgreen: #8CC152; +$blue: #42A2DC; +$lightblue: #4FC1E9; +$darkblue: #10689A; +$red: #DA564A; +$lightred: #ED5565; +$darkred: #DA4453; +$yellow: #FFCE54; +$darkyellow: #FCBB42; +$orange: #FC6E51; +$darkorange: #E9573F; +$purple: #AC92EC; +$darkpurple: #967ADC; +$white: #FFFFFF; +$gray: #F0F0F0; +$lightgray: #E5E5E5; +$darkgray: #999999; +$black: #333333; + +$color-facebook: #3b5998; +$color-twitter: #55acee; +$color-googleplus: #dd4b39; +$color-reddit: #ff4500; +$color-digg: #000000; +$color-pinterest: #cc2127; + +$animation-duration: 3s; + +$theme-border--color: $darkgray; +$theme-border--radius: 2px; +$theme-border--size: 3px; + +$theme-background-color: $gray; +$theme-box-color: $white; +$theme-box-shadow-color: #555555; + +$theme-spacing: 16px; diff --git a/docs/css/helpers/_visibility.scss b/docs/css/helpers/_visibility.scss new file mode 100644 index 0000000..a59a497 --- /dev/null +++ b/docs/css/helpers/_visibility.scss @@ -0,0 +1,43 @@ +// @include media('screen', 'xs') { +// .visible-sm, +// .visible-md, +// .visible-lg { display: none !important; } +// .visible-xs { +// display: block !important; +// } + +// .hidden-xs { +// display: none !important; +// } +// } + +// @include media('screen', 'sm') { +// .visible-xs, +// .visible-md, +// .visible-lg { display: none !important; } +// .visible-sm { +// display: block !important; +// } + +// .hidden-xs { +// display: block!important; +// } +// } + +// @include media('screen', 'md') { +// .visible-xs, +// .visible-sm, +// .visible-lg { display: none !important; } +// .visible-md { display: block !important; } + +// } + +// @include media('screen', 'lg') { + +// .visible-xs, +// .visible-sm, +// .visible-md { display: none !important; } +// .visible-lg { display: block !important; } + + +// } diff --git a/docs/css/main.scss b/docs/css/main.scss new file mode 100644 index 0000000..fafbf58 --- /dev/null +++ b/docs/css/main.scss @@ -0,0 +1,124 @@ +/* + + GridleCSS Theme v1.0.0 + + Author : Vlad Radulescu + Twitter : @pacMakaveli90 + Github : pacMakaveli90 + + Author URL : http://creative-studio51.co.uk/ + Project URL : https://github.com/studio51/gridlecss/tree/gh-pages + +*/ + +@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,200italic,400italic,700italic); + +// GridleCSS + +$grid-gutter: 2px !default; + +@import 'gridle'; + +.row, [class*='cell'] { + border: 1px solid red; + padding: 5px; + background-color: rgba(111, 111, 111, .2); +} + +// @import './bower_components/font-awesome/scss/font-awesome'; +// @import './bower_components/gridlecss/grid/gridlecss'; + +// // Variables + +// @import 'helpers/variables'; + +// // Helpers + +// @import 'helpers/reset'; + +// @import 'helpers/animations'; +// @import 'helpers/visibility'; + +// html, body { +// height: 100%; +// } + +// body { +// background-color: $theme-background-color; +// font-family: 'Source Sans Pro', sans-serif; +// font-size: 100%; +// } + +// // Components + +// @import 'components/buttons'; + +// // Theme Partials + +// @import 'partials/header'; +// @import 'partials/navigation'; +// @import 'partials/device'; + +// @import 'partials/theme'; +// @import 'partials/footer'; + +// /* + +// Just for showcasing GridleCSS Alignments features + +// */ + +// #grid-alignment.css { + +// .demo-alignment .row { +// height: 10em; + +// span { +// border-bottom: 1px dotted rgba($black, .4); +// } +// } + +// .demo-baseline { +// &-1 { +// span { +// font-size: 10em; +// } +// } + +// &-2 { +// span { +// font-size: 15em; +// } +// } +// } +// } + +// .text-center { +// text-align: center; +// } + + +// .module-section { + +// } + +// .module-title { +// font-family: 'Source Sans Pro', sans-serif; +// font-weight: 400; +// } + +// .margin { +// display: block; +// width: 1px; +// height: 1px; +// } + +// .mh16 { +// margin-bottom: $theme-spacing; +// margin-top: $theme-spacing; +// } + +// .mv16 { +// margin-left: $theme-spacing; +// margin-right: $theme-spacing; +// } diff --git a/docs/css/partials/_demos.scss b/docs/css/partials/_demos.scss new file mode 100644 index 0000000..96c65ca --- /dev/null +++ b/docs/css/partials/_demos.scss @@ -0,0 +1,74 @@ +.device { + &-demo { + &--content { + @extend .row; + + margin: 0; + width: 100%; + } + + &--side { + &-a, + &-b { + @extend .cell; + @extend .cell-xs-12; + @extend .cell-sm-6; + + @extend .align-center; + @extend .align-middle; + + margin: 0; + + .btn { + @include animated(15s, infinite); + @extend .bounce; + + border-radius: 100%; + color: #fff; + padding: 15px; + overflow: hidden; + text-align: center; + + .fa { + font-size: 2em; + position: relative; + width: 40px; + z-index: 1; + + &::after { + content: ""; + width: 74px; + height: 74px; + position: absolute; + top: 5px; + left: 10px; + z-index: -1; + } + } + } + + p { + color: #fff; + font-weight: 300; + margin-top: $theme-spacing * 2; + } + } + + &-a { + background-color: $yellow; + + .btn { + background-color: $darkyellow; + } + } + + &-b { + background-color: $purple; + + .btn { + background-color: $darkpurple; + } + } + } + } +} diff --git a/docs/css/partials/_device.scss b/docs/css/partials/_device.scss new file mode 100644 index 0000000..52feb9f --- /dev/null +++ b/docs/css/partials/_device.scss @@ -0,0 +1,383 @@ +// .device { +// @extend .cell-xs; + +// position: relative; + +// &-frame { + +// &--outter { +// background-color: #fff; +// border: 2px solid rgba(#C9CDC0, 1); +// border-bottom: none; +// border-top-left-radius: 38px; +// border-top-right-radius: 38px; +// display: flex; +// flex: 1; +// flex-direction: column; +// padding-left: 10px; +// padding-right: 10px; + +// @include media("screen", "sm") { +// padding-left: 25px; +// padding-right: 25px; +// } + +// @include media("screen", "md") { +// background-color: #000; +// padding-left: 50px; +// padding-right: 50px; +// } + +// @include media("screen", "lg") { +// border: none; +// } +// } + +// &--inner { +// background-color: #fff; +// border: 1px solid rgba(#C9CDC0, 1); +// border-bottom: none; +// border-top-left-radius: 2px; +// border-top-right-radius: 2px; +// display: flex; +// flex: 1; +// height: 100%; +// overflow: auto; +// position: relative; + +// @include media("screen", "md") { +// border: none; +// border-top-left-radius: 0; +// border-top-right-radius: 0; +// } +// } +// } + +// &-camera { +// align-self: center; +// background-color: #C9CDC0; +// border-radius: 100%; +// height: 6px; +// margin-top: 1em; +// width: 6px; + +// @include media("screen", "sm") { +// display: none; +// } + +// @include media("screen", "md") { +// background-color: rgba($green, 1); +// display: block; +// margin-bottom: 1.5em; +// margin-top: 1.5em; +// } + +// @include media("screen", "lg") { +// margin-bottom: 2em; +// margin-top: 1em; +// } +// } + +// &-speaker { +// align-self: center; +// background-color: #C9CDC0; +// border-radius: 50px; +// height: 4px; +// margin-bottom: 2.5em; +// margin-top: 1em; +// position: relative; +// width: 45px; + +// @include media("screen", "sm") { +// height: 10px; +// margin-bottom: 2em; +// margin-top: 2em; +// width: 10px; +// } + +// @include media("screen", "md") { +// display: none; +// } + +// &:before { +// background: #C9CDC0; +// border-radius: 100%; +// content: ''; +// height: 10px; +// left: -25px; +// position: absolute; +// top: -3px; +// width: 10px; + +// @include media("screen", "sm") { +// height: 5px; +// width: 5px; +// top: 2.5px; +// left: -15px; +// } +// } +// } +// } + +.column { + + // display: flex; + // justify-content: flex-end; + // align-items: flex-end; + justify-content: flex-end; +} + +.pca-hold { + width: 100%; +} + +.pca-hold .pca-main { + display: block; + background-color: #e7e7e7; + position: relative; + height: 100%; +} + + +// @include media("screen", "xs") { +// .pca-hold .pca-main { +// border: 15px solid #1d2d2d; +// border-top: 115px solid #1d2d2d; +// border-bottom: 118px solid #1d2d2d; +// border-radius: 56.5px; +// box-shadow: 0 0 0 5px #C6C7CA; +// } +// .pca-hold .pca-main:after { +// content: ''; +// position: absolute; +// top: -65px; +// left: 55%; +// transform: translate(-50%,0); +// width: 15px; +// height: 15px; +// background-color: #959595; +// border-radius: 100%; +// transform: translate(-90px,0); +// } +// .pca-hold .pca-main:before { +// content: ""; +// position: absolute; +// top: -25px; +// left: 55%; +// opacity: 1; +// width: 100px; +// height: 5px; +// transform: translate(-45px,-37.5px); +// border-radius: 5px; +// background-color: #959595; +// } +// .pca-hold .pca-inner { +// display: block; +// } +// .pca-hold .pca-sub { +// display: block; +// text-align: center; +// position: relative; +// height: 0; +// } +// .pca-hold .pca-sub .pca-bot { +// border-radius: 100%; +// width: 70px; +// height: 70px; +// display: block; +// margin: 0 auto; +// background-color: transparent; +// z-index: 2; +// box-shadow: 0 0 0 5.5px #636670; +// transform: translate(0,-94px); +// } +// } +// @include media("screen", "sm") { + +// .pca-hold .pca-main { +// border: 35px solid #1d2d2d; +// border-bottom: 50px solid #1d2d2d; +// border-radius: 25px; +// // height: 620px; +// } +// .pca-hold .pca-main:after { +// content: ''; +// position: absolute; +// top: -12px; +// left: 50%; +// transform: translate(-50%,0); +// width: 5.5px; +// height: 5.5px; +// background-color: #959595; +// border-radius: 100%; +// } +// .pca-hold .pca-inner { +// display: block; +// } +// .pca-hold .pca-sub { +// display: block; +// text-align: center; +// position: relative; +// height: 0; +// } +// .pca-hold .pca-sub .pca-bot { +// border-radius: 100%; +// width: 30px; +// height: 30px; +// display: block; +// background-color: transparent; +// z-index: 2; +// margin: -10px auto 0 auto; +// box-shadow: 0 0 0 1px rgba(255,255,255,0.6); +// transform: translate(0,-100%); +// } + +// } + +// // @include media("screen", "md") { +// // .pca-hold { +// // // margin: 0 62.5px; +// // width: 70%; +// // margin: 0 auto; +// // } +// // .pca-hold .pca-main { +// // border: 15px solid #2d2d2d; +// // // height: 100%; +// // border-top-left-radius: 15px; +// // border-top-right-radius: 15px; +// // } +// // .pca-hold .pca-main:after { +// // content: ''; +// // position: absolute; +// // top: -12px; +// // left: 50%; +// // transform: translate(-50%,0); +// // width: 5px; +// // height: 5px; +// // background-color: #959595; +// // border-radius: 100%; +// // } +// // .pca-hold .pca-inner { +// // display: block; +// // } +// // .pca-hold .pca-sub { +// // display: block; +// // text-align: center; +// // position: relative; +// // height: 25px; +// // } +// // .pca-hold .pca-sub .pca-top { +// // position: absolute; +// // bottom: 0; +// // left: -62.5px; +// // display: block; +// // width: calc(100% + ( 62.5px * 2 )); +// // height: 25px; +// // border-bottom-left-radius: 55px; +// // border-bottom-right-radius: 55px; +// // background-color: #e8e8e8; +// // opacity: 1; +// // z-index: 2; +// // } +// // .pca-hold .pca-sub .pca-bot { +// // display: block; +// // width: 200px; +// // height: 15px; +// // position: absolute; +// // top: 0; +// // left: 50%; +// // background-color: #B1B1B1; +// // border-radius: 0 0 225px 225px; +// // opacity: 1; +// // z-index: 2; +// // transform: translate(-50%,0); +// // } + +// // } + +// // @include media("screen", "lg") { +// // .pca-hold { +// // width: 70%; +// // } +// // .pca-hold .pca-main { +// // background-color: #dcdcdc; +// // // height: 100%; +// // border: 18px solid #2d2d2d; +// // border-radius: 0; +// // border-top-left-radius: 12px; +// // border-top-right-radius: 12px; +// // } +// // .pca-hold .pca-main:after { +// // content: ''; +// // position: absolute; +// // top: -13.5px; +// // left: 50%; +// // transform: translate(-50%,0); +// // width: 9.5px; +// // height: 9.5px; +// // background-color: #959595; +// // border-radius: 100%; +// // } +// // .pca-hold .pca-main:before { +// // content: ''; +// // opacity: 0; +// // } +// // .pca-hold .pca-inner { +// // display: block; +// // } +// // .pca-hold .pca-sub { +// // display: block; +// // text-align: center; +// // } +// // .pca-hold .pca-sub .pca-top { +// // position: relative; +// // display: block; +// // width: 100%; +// // left: 0; +// // height: 40px; +// // background-color: #e8e8e8; +// // border-bottom-left-radius: 12px; +// // border-bottom-right-radius: 12px; +// // opacity: 1; +// // z-index: 2; +// // } +// // .pca-hold .pca-sub .pca-top:after { +// // content: ''; +// // position: absolute; +// // width: 20px; +// // height: 20px; +// // top: 50%; +// // left: 50%; +// // transform: translate(-50%,-50%); +// // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAeUExURQAAADAsLiYiIycjJColJysmKC0mKjMtLykkJiMfIJJeh/oAAAAJdFJOUwAq68uOQmUTrzcLkcAAAADuSURBVCjPbZI7DwFREIVn41mugkSn8NpuEwnZTqskRHQqiQ6JfkMhSruI829Z99rMNXOKW3yZx5mZS8RUOpNQKUok3CKVgcBdwANwE3ACjAWMlJKVABcJ0f0D9SlRjfab6S5n3gkY+jQPgPaO9QX65+xFx7IquNYsMFf4G4/pZYoWHBib7BVniW/8OCWfJrAccWj3VAw4bFmoGPqzHmqRPa3mQ+tuT+f6tOY/5+YaGdh0YKotBN1vgbILk+/xPRfefWXzN61TrAz6M0qR3DLRTGY7pvJsM2ky4B8kCw3QXlLjitRn3+64yEb2Foa9AZ6l7piHRtOVAAAAAElFTkSuQmCC); +// // background-size: cover; +// // } +// // .pca-hold .pca-sub .pca-mid { +// // display: block; +// // text-align: center; +// // height: 40px; +// // width: 100%; +// // position: relative; +// // z-index: 1; +// // } +// // .pca-hold .pca-sub .pca-mid .pca-part { +// // display: block; +// // margin: 0 auto; +// // border-bottom: 50px solid #cdcdcd; +// // border-left: 25px solid transparent; +// // border-right: 25px solid transparent; +// // height: 0; +// // width: 150px; +// // } +// // .pca-hold .pca-sub .pca-bot { +// // position: relative; +// // display: block; +// // width: 200px; +// // height: 15px; +// // margin: 0 auto; +// // background-color: #e8e8e8; +// // border-radius: 10px 10px 0 0; +// // opacity: 1; +// // z-index: 2; +// // } +// // } diff --git a/docs/css/partials/_footer.scss b/docs/css/partials/_footer.scss new file mode 100644 index 0000000..d74f039 --- /dev/null +++ b/docs/css/partials/_footer.scss @@ -0,0 +1,53 @@ +.footer { + background-color: #fff; + color: $darkgray; + padding: ( $theme-spacing * 2 ) 0; + margin-top: $theme-spacing; + text-align: center; + + &-links { + display: flex; + flex: 1; + margin-left: -( $theme-spacing / 2 ); + margin-right: -( $theme-spacing / 2 ); + + li { + display: flex; + flex: 1 0 auto; + margin: 0 ( $theme-spacing / 2 ); + text-align: center; + + // @include media("screen", "sm") { + // flex: 0 1 auto; + // margin-right: $theme-spacing * 2; + // text-align: left; + // } + + a { + padding: $theme-spacing 0; + width: 100%; + } + } + } + + hr { + border: $theme-border--size solid $gray; + margin-bottom: $theme-spacing * 2; + margin-top: $theme-spacing; + } + + p { + font-weight: 300; + margin-bottom: ( $theme-spacing / 3 ); + } + + span { + color: $red; + margin: 0 3px; + } + + // @include media("screen", "sm") { + // &-copyright { text-align: left; } + // &-credits { text-align: right; } + // } +} diff --git a/docs/css/partials/_header.scss b/docs/css/partials/_header.scss new file mode 100644 index 0000000..a8247ec --- /dev/null +++ b/docs/css/partials/_header.scss @@ -0,0 +1,40 @@ +@mixin background-animation($color-list, $duration) { + + $size: 200 * length($color-list); + $size: unquote("#{ $size }%"); + + background: linear-gradient(105deg, $color-list); + background-size: $size $size; + animation: rotate #{ $duration }s ease infinite; +} + +.header { + @include background-animation( ($blue, $green, $yellow), 30 ); + + height: 100%; + overflow: hidden; + + .column { + height: 100%; + padding: $theme-spacing; + } + + .brand { + color: #fff; + font-size: 80%; + line-height: 1; + padding: $theme-spacing 0; + + // @include media('screen', 'sm') { font-size: 100%; } + + &-name { + margin-bottom: $theme-spacing / 4; + + &--pronunciation { + font-size: .7em; + font-weight: 100; + margin-left: $theme-spacing / 2; + } + } + } +} diff --git a/docs/css/partials/_navigation.scss b/docs/css/partials/_navigation.scss new file mode 100644 index 0000000..9630001 --- /dev/null +++ b/docs/css/partials/_navigation.scss @@ -0,0 +1,26 @@ +.nav-menu { + display: flex; +} + +.list-header { + display: flex; + padding: 16px 0 8px 0; + font-weight: 600; + color: #fff; + font-size: 1em; +} + +.list-item { + display: inline-flex; + + margin: 0 !important; + padding: 16px 32px; + background-color: #fff; + border-bottom: 1px solid #efefef; + font-size: .8em; + border-radius: 3px; +} + +.list-item:last-child { + border: none; +} diff --git a/docs/css/partials/_social.scss b/docs/css/partials/_social.scss new file mode 100644 index 0000000..3cd6b0a --- /dev/null +++ b/docs/css/partials/_social.scss @@ -0,0 +1,104 @@ +.row--social { + background-color: #fff; + box-shadow: 0 0 30px 0 rgba($black, .4); + padding: $theme-spacing 0; + position: relative; + z-index: 1; + + // @include media("screen", "md") { padding: ( $theme-spacing * 2 ) 0; } + + > .cell { + @extend .cell-align--center; + } + + &:before, + &:after { + background-color: #fff; + content: ''; + height: 100%; + position: absolute; + top: 0; + width: 100%; + } + + &:before { left: -100%; } + &:after { right: -100%; } + + ul { + @extend .row; + } +} + +.social { + + &-btn { + flex: 1; + margin-left: $theme-spacing / 2; + + .btn { + padding: 0; + width: 100%; + justify-content: center; + + /* TODO: Fix media queries to only apply to current viewport */ + + // @include media("screen", "sm") { padding: 10px; } + // @include media("screen", "lg") { padding: 0; } + + .fa { + align-self: center; + min-width: 40px; + text-align: center; + + &-googleplus:before { content: "\f0d5"; } + } + + $social-media-list: "facebook", "twitter", "googleplus", "pinterest", "reddit", "digg"; + $social-media-colors: $color-facebook, $color-twitter, $color-googleplus, $color-pinterest, $color-reddit, $color-digg; + + @for $i from 1 through length($social-media-list) { + + &--#{ nth($social-media-list, $i) } { + border-color: nth($social-media-colors, $i); + + .social-counter { background-color: nth($social-media-colors, $i); } + .fa { color: nth($social-media-colors, $i); } + + &:hover { + + .social-counter { + &:before { border-right-color: nth($social-media-colors, $i); } + } + } + } + } + } + } + + &-counter { + border-radius: 100%; + flex: 1; + font-size: .5em; + justify-content: center; + margin: $theme-spacing / 2; + padding: 3px 0; + position: relative; + text-align: center; + + /* TODO: Fix media queries to only apply to current viewport */ + + // @include media("screen", "sm") { display: none; } + // @include media("screen", "lg") { display: flex; } + + &:before { + border-bottom: 5px dashed transparent; + border-left: 5px dashed transparent; + border-right: 5px dashed transparent; + border-top: 5px dashed transparent; + content: ''; + left: -8px; + position: absolute; + top: 5px; + } + } +} diff --git a/docs/css/partials/_theme.scss b/docs/css/partials/_theme.scss new file mode 100644 index 0000000..ded2d5b --- /dev/null +++ b/docs/css/partials/_theme.scss @@ -0,0 +1,71 @@ +.main .cell:not(.unstyled) { + background-color: rgba($darkgray, .1); + font-size: 80%; + margin-top: 1px; + margin-bottom: 1px; + padding: $theme-spacing / 2; +} + +.cells-container { + padding: $theme-spacing / 2; + background-color: rgba($darkgray, .1); + border-radius: $theme-border--size; +} + +.module { + $module-box-shadow--size: 25px; + + &-content { + background-color: #fff; + padding: $theme-spacing * 2; + border-left: 1px solid rgba($darkgray, .15); + border-right: 1px solid rgba($darkgray, .15); + border-radius: $theme-border--size; + box-shadow: 0 $module-box-shadow--size 0 0 #fff, + 0 ( -$module-box-shadow--size ) 0 0 #fff, + 0 0 ( $module-box-shadow--size * 2 ) 0 rgba($darkgray, .1); + margin-bottom: $theme-spacing; + } + + &-section { + } + + &-title { + margin-bottom: $theme-spacing; + font-weight: 300 !important; + } + + &-description { + background-color: rgba($lightblue, 0.05); + border-radius: $theme-border--size; + border-left: $theme-border--size solid rgba($lightblue, 0.5); + color: #666; + font-size: 90%; + font-weight: 200; + line-height: 1.3; + margin-bottom: $theme-spacing; + padding: $theme-spacing; + + &::before { + border: $theme-border--size solid rgba($lightblue, 0.5); + border-radius: 100%; + color: rgba($lightblue, 0.5); + content: '\f129'; + display: inline-block; + font-family: 'FontAwesome'; + font-size: 80%; + margin-right: $theme-spacing / 2; + padding: ( $theme-spacing / 4 ) ( $theme-spacing / 2 + 2px ); + } + } +} + +.demo { + + &-alignment { + + &-cross { + height: 150px; + } + } +} diff --git a/docs/dictionary.jade b/docs/dictionary.jade new file mode 100644 index 0000000..9116cc9 --- /dev/null +++ b/docs/dictionary.jade @@ -0,0 +1,53 @@ +- var name = 'GridleCSS' +- var description = 'Yet another flex grid framework!' +- var version = '1.0.rc1' + +- var basic = 'GridleCSS' +- var basic_description = 'GridleCSS in all it\'s glory! Flexible cells, viewport specific rules and more..' + +- var responsive = 'Responsive' +- var responsive_description = 'Responsive modifiers enable specifing different column sizes, offsets alignment and distribution at certain viewport widths.' + +- var fluid = 'Fluid Layout' +- var fluid_description = 'Percent based widths allow fluid resizing of columns and rows' + +- var offset = 'Offsets' +- var offset_description = '' +- var offset_viewport = 'Offsets by viewport' +- var offset_viewport_description = 'You can also specify on which viewport the offset should apply' + +- var nested = 'Gridcellceptional!' +- var nested_description = 'A cell, inside a row, inside a cell, inside a row.. oh you get it!' + +- var auto = 'Auto GridleCSS' +- var auto_additional = 'Auto Width' +- var auto_additional_two = 'Auto Width on Viewport' +- var auto_description = '' +- var auto_additional_description = 'Add any number of auto sizing cells to a row. Let the grid figure it out' +- var auto_additional_two_description = 'You can also specify on which viewport the grid should figure it out whether or not it should apply it.' + +- var alignment = 'Alignments' +- var alignment_description = '' +- var alignment_additional = 'Alignments on Parent elements' +- var alignment_additional_description = 'This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.' +- var alignment_additional_two = '' +- var alignment_additional_two_description = 'Similar to the above except you can specify the behaviour of how flex-items are laid out along the cross axis, instead of main axis, of the current line.' +- var alignment_additional_three = 'Alignments on Child elements' +- var alignment_additional_three_description = 'This property will allow the default alignment, or the one specified on the parent to be overridden for indvidual flex items' +- var alignment_additional_four = 'Alignment by Viewport' +- var alignment_additional_four_description = 'You can also specify what alignment rule should be considered depending on the viewport by adding the viewport class' + +- var distribution = 'Distribution' +- var distribution_description = '' +- var distribution_between = '' +- var distribution_between_description = 'Flex items are displayed with equal spacing between them, first and last flex items are aligned to the edges of the flex container' +- var distribution_around = '' +- var distribution_around_description = 'Flex items are displayed with equal spacing around every flex item, even the first and the last flex items' +- var distribution_viewport = 'Distribution by Viewport' +- var distribution_viewport_description = 'You can also specify what distribution rule should be considered depending on the viewport by adding the viewport class' + +- var reversed = 'Reversing' +- var reversed_description = 'Add classes to reverse cells direction' + +- var reordered = 'Reordering' +- var reordered_description = 'Add classes to reorder cells' diff --git a/docs/dist/css/main.min.css b/docs/dist/css/main.min.css new file mode 100644 index 0000000..d8e053b --- /dev/null +++ b/docs/dist/css/main.min.css @@ -0,0 +1,779 @@ + +@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,200italic,400italic,700italic); + +@charset "UTF-8"; +/* + + GridleCSS Theme v1.0.0 + + Author : Vlad Radulescu + Twitter : @pacMakaveli90 + Github : pacMakaveli90 + + Author URL : http://creative-studio51.co.uk/ + Project URL : https://github.com/studio51/gridlecss/tree/gh-pages + +*/ +body:before { + background-color: #FCF8E3; + border-bottom: 1px solid #FBEED5; + border-left: 1px solid #FBEED5; + color: #C09853; + font: small-caption; + padding: 3px 6px; + pointer-events: none; + position: fixed; + right: 0; + top: 0; + z-index: 100; } + @media (min-width: 0em) { + body:before { + content: "xs ≥ 0 (0em)"; } } + @media (min-width: 40em) { + body:before { + content: "sm ≥ 40em (40em)"; } } + @media (min-width: 64em) { + body:before { + content: "md ≥ 64em (64em)"; } } + @media (min-width: 90em) { + body:before { + content: "lg ≥ 90em (90em)"; } } + +body:before { + background-color: #FCF8E3; + border-bottom: 1px solid #FBEED5; + border-left: 1px solid #FBEED5; + color: #C09853; + font: small-caption; + padding: 3px 6px; + pointer-events: none; + position: fixed; + right: 0; + top: 0; + z-index: 100; } + @media (min-width: 0em) { + body:before { + content: "xs ≥ 0 (0em)"; } } + @media (min-width: 40em) { + body:before { + content: "sm ≥ 40em (40em)"; } } + @media (min-width: 64em) { + body:before { + content: "md ≥ 64em (64em)"; } } + @media (min-width: 90em) { + body:before { + content: "lg ≥ 90em (90em)"; } } + +[class*="cell"] { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + +*, +*:before, +*:after { + box-sizing: border-box; } + +.grid, +.grid--fluid { + height: 100%; + margin-left: auto; + margin-right: auto; + width: 100%; } + +.row { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + .row--reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.cell-xs, +.cell-xs-1, +.cell-xs-offset-1, +.cell-xs-2, +.cell-xs-offset-2, +.cell-xs-3, +.cell-xs-offset-3, +.cell-xs-4, +.cell-xs-offset-4, +.cell-xs-5, +.cell-xs-offset-5, +.cell-xs-6, +.cell-xs-offset-6, +.cell-xs-7, +.cell-xs-offset-7, +.cell-xs-8, +.cell-xs-offset-8, +.cell-xs-9, +.cell-xs-offset-9, +.cell-xs-10, +.cell-xs-offset-10, +.cell-xs-11, +.cell-xs-offset-11, +.cell-xs-12, +.cell-xs-offset-12, .cell-sm, +.cell-sm-1, +.cell-sm-offset-1, +.cell-sm-2, +.cell-sm-offset-2, +.cell-sm-3, +.cell-sm-offset-3, +.cell-sm-4, +.cell-sm-offset-4, +.cell-sm-5, +.cell-sm-offset-5, +.cell-sm-6, +.cell-sm-offset-6, +.cell-sm-7, +.cell-sm-offset-7, +.cell-sm-8, +.cell-sm-offset-8, +.cell-sm-9, +.cell-sm-offset-9, +.cell-sm-10, +.cell-sm-offset-10, +.cell-sm-11, +.cell-sm-offset-11, +.cell-sm-12, +.cell-sm-offset-12, .cell-md, +.cell-md-1, +.cell-md-offset-1, +.cell-md-2, +.cell-md-offset-2, +.cell-md-3, +.cell-md-offset-3, +.cell-md-4, +.cell-md-offset-4, +.cell-md-5, +.cell-md-offset-5, +.cell-md-6, +.cell-md-offset-6, +.cell-md-7, +.cell-md-offset-7, +.cell-md-8, +.cell-md-offset-8, +.cell-md-9, +.cell-md-offset-9, +.cell-md-10, +.cell-md-offset-10, +.cell-md-11, +.cell-md-offset-11, +.cell-md-12, +.cell-md-offset-12, .cell-lg, +.cell-lg-1, +.cell-lg-offset-1, +.cell-lg-2, +.cell-lg-offset-2, +.cell-lg-3, +.cell-lg-offset-3, +.cell-lg-4, +.cell-lg-offset-4, +.cell-lg-5, +.cell-lg-offset-5, +.cell-lg-6, +.cell-lg-offset-6, +.cell-lg-7, +.cell-lg-offset-7, +.cell-lg-8, +.cell-lg-offset-8, +.cell-lg-9, +.cell-lg-offset-9, +.cell-lg-10, +.cell-lg-offset-10, +.cell-lg-11, +.cell-lg-offset-11, +.cell-lg-12, +.cell-lg-offset-12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + +.distribute-around { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } + +.distribute-between { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + +.align-center { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; } + +.align-right { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: flex-end; } + +.align-top { + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; } + +.align-middle { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +.align-bottom { + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; } + +.align-baseline { + -webkit-box-align: baseline; + -webkit-align-items: baseline; + -ms-flex-align: baseline; + align-items: baseline; } + +.align-stretch { + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +.hidden-xs { + display: none; } + +.visible-xs { + display: block; } + +.hidden-sm { + display: block; } + +.visible-sm { + display: none; } + +.hidden-md { + display: block; } + +.visible-md { + display: none; } + +.hidden-lg { + display: block; } + +.visible-lg { + display: none; } + +.cell-xs-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + +.cell-xs-offset-1 { + margin-left: 8.3333333333%; } + +.cell-xs-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + +.cell-xs-offset-2 { + margin-left: 16.6666666667%; } + +.cell-xs-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + +.cell-xs-offset-3 { + margin-left: 25%; } + +.cell-xs-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + +.cell-xs-offset-4 { + margin-left: 33.3333333333%; } + +.cell-xs-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + +.cell-xs-offset-5 { + margin-left: 41.6666666667%; } + +.cell-xs-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + +.cell-xs-offset-6 { + margin-left: 50%; } + +.cell-xs-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + +.cell-xs-offset-7 { + margin-left: 58.3333333333%; } + +.cell-xs-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + +.cell-xs-offset-8 { + margin-left: 66.6666666667%; } + +.cell-xs-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + +.cell-xs-offset-9 { + margin-left: 75%; } + +.cell-xs-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + +.cell-xs-offset-10 { + margin-left: 83.3333333333%; } + +.cell-xs-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + +.cell-xs-offset-11 { + margin-left: 91.6666666667%; } + +.cell-xs-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + +.cell-xs-offset-12 { + margin-left: 100%; } + +.cell-xs { + -webkit-box-flex: 1; + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; } + .cell-xs-order--first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + .cell-xs-order--last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + +@media (min-width: 40em) { + .grid { + width: 40em; } + .hidden-xs { + display: block; } + .visible-xs { + display: none; } + .hidden-sm { + display: none; } + .visible-sm { + display: block; } + .hidden-md { + display: block; } + .visible-md { + display: none; } + .hidden-lg { + display: block; } + .visible-lg { + display: none; } + .cell-sm-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-sm-offset-1 { + margin-left: 8.3333333333%; } + .cell-sm-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-sm-offset-2 { + margin-left: 16.6666666667%; } + .cell-sm-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-sm-offset-3 { + margin-left: 25%; } + .cell-sm-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-sm-offset-4 { + margin-left: 33.3333333333%; } + .cell-sm-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-sm-offset-5 { + margin-left: 41.6666666667%; } + .cell-sm-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-sm-offset-6 { + margin-left: 50%; } + .cell-sm-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-sm-offset-7 { + margin-left: 58.3333333333%; } + .cell-sm-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-sm-offset-8 { + margin-left: 66.6666666667%; } + .cell-sm-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-sm-offset-9 { + margin-left: 75%; } + .cell-sm-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-sm-offset-10 { + margin-left: 83.3333333333%; } + .cell-sm-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-sm-offset-11 { + margin-left: 91.6666666667%; } + .cell-sm-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-sm-offset-12 { + margin-left: 100%; } + .cell-sm { + -webkit-box-flex: 1; + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; } + .cell-sm-order--first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + .cell-sm-order--last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } } + +@media (min-width: 64em) { + .grid { + width: 64em; } + .hidden-xs { + display: block; } + .visible-xs { + display: none; } + .hidden-sm { + display: block; } + .visible-sm { + display: none; } + .hidden-md { + display: none; } + .visible-md { + display: block; } + .hidden-lg { + display: block; } + .visible-lg { + display: none; } + .cell-md-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-md-offset-1 { + margin-left: 8.3333333333%; } + .cell-md-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-md-offset-2 { + margin-left: 16.6666666667%; } + .cell-md-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-md-offset-3 { + margin-left: 25%; } + .cell-md-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-md-offset-4 { + margin-left: 33.3333333333%; } + .cell-md-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-md-offset-5 { + margin-left: 41.6666666667%; } + .cell-md-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-md-offset-6 { + margin-left: 50%; } + .cell-md-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-md-offset-7 { + margin-left: 58.3333333333%; } + .cell-md-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-md-offset-8 { + margin-left: 66.6666666667%; } + .cell-md-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-md-offset-9 { + margin-left: 75%; } + .cell-md-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-md-offset-10 { + margin-left: 83.3333333333%; } + .cell-md-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-md-offset-11 { + margin-left: 91.6666666667%; } + .cell-md-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-md-offset-12 { + margin-left: 100%; } + .cell-md { + -webkit-box-flex: 1; + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; } + .cell-md-order--first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + .cell-md-order--last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } } + +@media (min-width: 90em) { + .grid { + width: 90em; } + .hidden-xs { + display: block; } + .visible-xs { + display: none; } + .hidden-sm { + display: block; } + .visible-sm { + display: none; } + .hidden-md { + display: block; } + .visible-md { + display: none; } + .hidden-lg { + display: none; } + .visible-lg { + display: block; } + .cell-lg-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-lg-offset-1 { + margin-left: 8.3333333333%; } + .cell-lg-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-lg-offset-2 { + margin-left: 16.6666666667%; } + .cell-lg-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-lg-offset-3 { + margin-left: 25%; } + .cell-lg-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-lg-offset-4 { + margin-left: 33.3333333333%; } + .cell-lg-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-lg-offset-5 { + margin-left: 41.6666666667%; } + .cell-lg-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-lg-offset-6 { + margin-left: 50%; } + .cell-lg-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-lg-offset-7 { + margin-left: 58.3333333333%; } + .cell-lg-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-lg-offset-8 { + margin-left: 66.6666666667%; } + .cell-lg-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-lg-offset-9 { + margin-left: 75%; } + .cell-lg-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-lg-offset-10 { + margin-left: 83.3333333333%; } + .cell-lg-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-lg-offset-11 { + margin-left: 91.6666666667%; } + .cell-lg-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-lg-offset-12 { + margin-left: 100%; } + .cell-lg { + -webkit-box-flex: 1; + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; } + .cell-lg-order--first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + .cell-lg-order--last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } } + +.row, [class*='cell'] { + border: 1px solid red; + padding: 5px; + background-color: #6F6F6F; + background-color: rgba(111, 111, 111, 0.2); } \ No newline at end of file diff --git a/docs/dist/css/main.min.css.map b/docs/dist/css/main.min.css.map new file mode 100644 index 0000000..710ff65 --- /dev/null +++ b/docs/dist/css/main.min.css.map @@ -0,0 +1,13 @@ +{ + "version": 3, + "file": "main.min.css", + "sources": [ + "../../css/main.scss", + "../../css/gridle.scss", + "../../css/config.scss", + "../../css/gridlecss/_media.scss", + "../../css/gridlecss/mixins.scss" + ], + "mappings": "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", + "names": [] +} \ No newline at end of file diff --git a/docs/dist/dictionary.html b/docs/dist/dictionary.html new file mode 100644 index 0000000..e69de29 diff --git a/docs/dist/index.html b/docs/dist/index.html new file mode 100644 index 0000000..759b2ce --- /dev/null +++ b/docs/dist/index.html @@ -0,0 +1,681 @@ + + + + + + GridleCSS | Yet another flex grid framework! + + + + + +
+
+
+

Module: The Grid

+
+
+
+
+
+
+

GridleCSS

+

GridleCSS in all it's glory! Flexible cells, viewport specific rules and more..

+
+
+
+
+
auto-xs
+
auto-xscell-sm-3cell-md-7auto-lg
+
auto-xs
+
+
+
cell-xs-9cell-sm-7cell-md-5cell-lg-3
+
auto
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos + blanditiis odit et ratione, id laboriosam sapiente consequuntur + laborum officia, impedit eligendi natus quisquam dolor in at + aliquam, tempore maiores est. +
+
+
+
xs-auto
+
cell-xs-3
+
xs-auto
+
cel-xs-1
+
+
+
cell-xs-4
+
cell-xs-3
+
cell-xs-4
+
cell-xs-1
+
+
+
cell-xs-2
+
cell-xs-2
+
cell-xs-2
+
cell-xs-2
+
cell-xs-2
+
cell-xs-2
+
+
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
+
+
cell-xs-12
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Responsive

+

Responsive modifiers enable specifing different column sizes, offsets alignment and distribution at certain viewport widths.

+
+
+
+
+
cell-xs-5cell-sm-4cell-md-3cell-lg-2
+
cell-xs-2cell-sm-4cell-md-6cell-lg-8
+
cell-xs-5cell-sm-4cell-md-3cell-lg-2
+
+
+
cell-xs-3cell-sm-3cell-md-2cell-lg-2
+
cell-xs-9cell-sm-6cell-md-2cell-lg-2
+
cell-xscell-sm-3cell-md-8cell-lg
+
+
+
+
+
+
+
+
+
+
+
+
+

Fluid Layout

+

Percent based widths allow fluid resizing of columns and rows

+
+
+
+
+
auto-xs
+
+
+
cell-xs-1
+
cell-xs-11
+
+
+
cell-xs-2
+
cell-xs-10
+
+
+
cell-xs-3
+
cell-xs-9
+
+
+
cell-xs-4
+
cell-xs-8
+
+
+
cell-xs-5
+
cell-xs-7
+
+
+
cell-xs-6
+
cell-xs-6
+
+
+
+
+
+
+
+
+
+
+
+
+

Reversing

+

Add classes to reverse cells direction

+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+
+
+
+
+
+
+
+
+
+

Reordering

+

Add classes to reorder cells

+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
+
+
+
+
+
+
+
+
+
+
+
+

Auto Width

+

Add any number of auto sizing cells to a row. Let the grid figure it out

+
+
+
+
+
auto
+
auto
+
auto
+
auto
+
+
+
cell-xs-3
+
auto
+
cell-xs-2
+
auto
+
+
+
+
+
+
+
+
+
+

Auto Width on Viewport

+

You can also specify on which viewport the grid should figure it out whether or not it should apply it.

+
+
+
+
+
full-xsauto-smcell-md-3auto-lg
+
full-xsauto-smauto-mdauto-lg
+
full-xsauto-smcell-md-2auto-lg
+
full-xsauto-smauto-mdauto-lg
+
+
+
+
+
+
+
+
+
+
+
+

Gridcellceptional!

+

A cell, inside a row, inside a cell, inside a row.. oh you get it!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Module: Offsets

+
+
+
+
+
+
+
+
offset-11
+
+
+
offset-10
+
+
+
offset-9
+
+
+
offset-8
+
+
+
offset-7
+
+
+
offset-6
+
+
+
offset-5
+
+
+
offset-4
+
+
+
offset-3
+
+
+
offset-2
+
+
+
offset-1
+
+
+
no-offset
+
+
+
+
+
+
+
+
+
+

Offsets by viewport

+

You can also specify on which viewport the offset should apply

+
+
+
+
+
xs, cell-xs-3sm, cell-xs-3 cell-sm-offset-9md, cell-md-4 cell-md-offset-4lg, cell-lg-2 cell-lg-offset-4
+
+
+
xs, cell-xs-3 cell-xs-offset-3sm, cell-xs-3 cell-sm-offset-6md, cell-md-4 cell-md-offset-4lg, cell-lg-2 cell-lg-offset-5
+
+
+
xs, cell-xs-3 cell-xs-offset-6sm, cell-xs-3 cell-sm-offset-3md, cell-md-4 cell-md-offset-4lg, cell-lg-2 cell-lg-offset-6
+
+
+
xs, cell-xs-3 cell-xs-offset-9sm, cell-xs-3 cell-sm-offsetmd, cell-md-4 cell-md-offset-4lg, cell-lg-2 cell-lg-offset-7
+
+
+
+
+
+
+
+
+
+

Module: Aligments

+
+
+
+
+
+
+
+

Alignments on Parent elements

+

This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

+
+
+
+
+
+
+
align-left
+
+
+
+
+
align-center
+
+
+
+
+
align-right
+
+
+
+
+
+
+
+
+
+
+
+

Similar to the above except you can specify the behaviour of how flex-items are laid out along the cross axis, instead of main axis, of the current line.

+
+
+
+
+
+
+
align-stretch
+
+
+
+
+
.align-top
+
+
+
+
+
align-middle
+
+
+
+
+
align-bottom
+
+
+
+
+
+
+
baseline
+
baseline
+
baseline
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Saepe, reprehenderit ipsum atque distinctio ad, nihil + repudiandae ut omnis dignissimos suscipit non quos debitis + inventore fuga alias. Quod ut nesciunt aut. +
+
+
stretch
+
align-sm-top
+
align-md-middle
+
align-lg-bottom
+
+
+
stretch
+
align-sm-top
+
align-md-middle
+
align-lg-bottom
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Alignments on Child elements

+

This property will allow the default alignment, or the one specified on the parent to be overridden for indvidual flex items

+
+
+
+
+
cell-align--top
+
cell-align--middle
+
cell-align--bottom
+
cell-align--stretch
+
+
+
+
+
+
+
+
+
+

Alignment by Viewport

+

You can also specify what alignment rule should be considered depending on the viewport by adding the viewport class

+
+
+
+
+
+
cell-xs-align--stretch
+
cell-sm-align--middle
+
cell-md-align--stretch
+
cell-lg-align--top
+
+
+
cell-xs-align--stretch
+
cell-sm-align--middle
+
cell-md-align--bottom
+
cell-lg-align--middle
+
+
+
cell-xs-align--stretch
+
cell-sm-align--middle
+
cell-md-align--middle
+
cell-lg-align--bottom
+
+
+
cell-xs-align--stretch
+
cell-sm-align--middle
+
cell-md-align--top
+
cell-lg-align--stretch
+
+
+
+
+
+
+
+
+
+
+
+
+

Module: Distribution

+
+
+
+
+
+

Flex items are displayed with equal spacing between them, first and last flex items are aligned to the edges of the flex container

+
+
+
+
+
distribute-between
+
distribute-between
+
distribute-between
+
+
+
+
+
+
+
+
+
+

Flex items are displayed with equal spacing around every flex item, even the first and the last flex items

+
+
+
+
+
distribute-around
+
distribute-around
+
distribute-around
+
+
+
+
+
+
+
+
+
+
+
+

Distribution by Viewport

+

You can also specify what distribution rule should be considered depending on the viewport by adding the viewport class

+
+
+
+
+
+
distribute-xs-around
+
distribute-sm-between
+
distribute-md-around
+
distribute-lg-between
+
+
+
distribute-xs-around
+
distribute-sm-between
+
distribute-md-around
+
distribute-lg-between
+
+
+
distribute-xs-around
+
distribute-sm-between
+
distribute-md-around
+
distribute-lg-between
+
+
+
+
+
+
+
+
+
+
+
+ + +
hidden-md
+ +
visible-xs
+
visible-sm
+
visible-md
+
visible-lg
+
+
+ + + + + + + \ No newline at end of file diff --git a/docs/dist/js/main.min.js b/docs/dist/js/main.min.js new file mode 100644 index 0000000..553e9be --- /dev/null +++ b/docs/dist/js/main.min.js @@ -0,0 +1,347 @@ +$(document).ready(function() { + var a, b, c, d, e = 1e3; + a = setTimeout(function() { + $("#animated .pca-anim-wrap").addClass("macbook"); + }, 1 * e), b = setTimeout(function() { + $("#animated .pca-anim-wrap").addClass("ipad"); + }, 2 * e), c = setTimeout(function() { + $("#animated .pca-anim-wrap").addClass("iphone"); + }, 3 * e), d = setTimeout(function() { + $("#animated .pca-anim-wrap").removeClass("macbook ipad iphone"), responsiveAnimationTransform(); + }, 4 * e), $(".nav-menu a.btn").on("click", function(a) { + a.preventDefault(); + var b = $(this).data("target"); + $("html, body").stop().animate({ + scrollTop: $(b).offset().top + }, 1e3); + }), $(".show-css").on("click", function(a) { + a.preventDefault(); + var b = $(this).attr("href"), c = $("section" + b); + c.toggleClass("css"); + }), $(".social-buttons--container ul").sharegg({ + data: { + url: "http://studio51.github.io/gridlecss", + title: "GridleCSS, yet another flexbox grid!" + }, + buttons: { + googleplus: { + show: !0, + count: !0 + }, + twitter: { + show: !0, + count: !0 + }, + digg: { + show: !0, + count: !0 + } + } + }), $("#toggle-menu").on("click", function(a) { + a.preventDefault(), openItemInfo($(this).attr("href")); + var b = $(".nav-menu"); + $(b).toggleClass("open"), $(this).toggleClass("close"); + }); +}), function(a) { + "use strict"; + function b(a, b) { + var c = a.toString(); + return Object.keys(b).forEach(function(a) { + var d = new RegExp("\\{" + a + "\\}", "gm"); + c = c.replace(d, b[a]); + }), c; + } + function c(a) { + return /\/$/.test(a) ? a : a + "/"; + } + function d(b, d, e) { + a.ajax({ + url: c(a.fn.sharegg.defaults.apiUrl) + "stats/" + b + "?url=" + encodeURIComponent(d), + dataType: "json", + type: "GET" + }).complete(function(a) { + 200 === a.status ? e(a.responseJSON) : e(); + }); + } + function e(a, b, c) { + d(a, b, function(b) { + c("reddit" === a ? b ? b.score : 0 : "stumbleupon" === a ? b ? b.views : 0 : "pocket" === a || "vkontakte" === a ? b ? b.count : 0 : b ? b.shares : 0); + }); + } + function f(a) { + var b = l[a]; + if (!b) throw new Error("Invalid service name: " + a); + return b; + } + function g(a) { + return void 0 !== l[a]; + } + function h(a) { + var b = m[a]; + return b || (b = m.en_US, console.warn("Invalid locale: " + a)), b; + } + function i(c) { + var d = a(c), g = d.data("service-name"), h = f(g), i = d.closest(".sharegg-widget"), j = encodeURIComponent(i.data("url")), k = encodeURIComponent(i.data("title")), l = encodeURIComponent(i.data("description")), m = encodeURIComponent(i.data("image")), n = window.open(b(h.url, { + url: j, + title: k, + description: l, + image: m + }), "sharegg", b("width={width}, height={height}, resizable=1, scrollbars=1, top=0, left=0", h.screenSize)), o = setInterval(function() { + n.closed && (clearInterval(o), e(g, j, function(a) { + d.find("span").text(a); + })); + }, 600); + } + function j(b) { + var c; + c = b ? b.find("li.social-btn") : a("li.social-btn"), a.each(c, function() { + var b = a(this).find("a"); + e(b.data("service-name"), b.closest(".sharegg-widget").data("url"), function(a) { + b.find("span").text(a); + }); + }); + } + function k(b, c) { + c = a.extend({}, a.fn.sharegg.defaults, c), a.each(c.buttons, function(a) { + if (this.show === !0) { + var c = a.toString(); + if (!g(c)) throw new Error("Invalid service name: " + c); + var d = h("en_US").messages[c].title; + b.append('
    • '); + var e = b.find("." + c + "-btn"); + this.count === !0 ? e.parent().append('0') : e.addClass("social-no-counter"); + } + }); + } + var l = { + buffer: { + url: "https://bufferapp.com/add?url={url}&title={description}&source=button", + supportCount: !0, + screenSize: { + height: 350, + width: 800 + } + }, + delicious: { + url: "http://www.delicious.com/save?v=5&noui&jump=close&url={url}&title={title}", + supportCount: !1, + screenSize: { + height: 650, + width: 1024 + } + }, + digg: { + url: "http://digg.com/submit?url={url}", + supportCount: !1, + screenSize: { + height: 650, + width: 1024 + } + }, + facebook: { + url: "https://www.facebook.com/sharer/sharer.php?u={url}&display=popup&ref=plugin", + supportCount: !0, + screenSize: { + height: 306, + width: 650 + } + }, + googleplus: { + url: "https://plus.google.com/share?url={url}", + supportCount: !0, + screenSize: { + height: 620, + width: 620 + } + }, + linkedin: { + url: "http://www.linkedin.com/shareArticle?url={url}&title={title}&summary={description}&source=sharegg", + supportCount: !0, + screenSize: { + height: 650, + width: 1024 + } + }, + pinterest: { + url: "https://pinterest.com/pin/create/bookmarklet/?url={url}&description={description}&media={image}", + supportCount: !0, + screenSize: { + height: 650, + width: 1024 + } + }, + pocket: { + url: "https://getpocket.com/save?url={url}&title={title}", + supportCount: !1, + screenSize: { + height: 360, + width: 576 + } + }, + reddit: { + url: "http://reddit.com/submit?url={url}&title={title}", + supportCount: !0, + screenSize: { + height: 650, + width: 1024 + } + }, + stumbleupon: { + url: "http://www.stumbleupon.com/badge/?url={url}", + supportCount: !0, + screenSize: { + height: 602, + width: 480 + } + }, + tumblr: { + url: "http://www.tumblr.com/share/link?url={url}&name={title}&description={description}", + supportCount: !1, + screenSize: { + height: 650, + width: 1024 + } + }, + twitter: { + url: "https://twitter.com/share?url={url}&text={title}", + supportCount: !0, + screenSize: { + height: 420, + width: 550 + } + }, + vkontakte: { + url: "https://vk.com/share.php?url={url}", + supportCount: !0, + screenSize: { + height: 445, + width: 642 + } + } + }, m = { + en_US: { + name: "English (United States)", + alias: [ "en", "en-US" ], + messages: { + buffer: { + title: "Share on Buffer" + }, + delicious: { + title: "Share on Delicious" + }, + digg: { + title: "Share on Digg" + }, + facebook: { + title: "Share on Facebook" + }, + googleplus: { + title: "Share on Google Plus" + }, + linkedin: { + title: "Share on Linkedin" + }, + pinterest: { + title: "Share on Pinterest" + }, + pocket: { + title: "Share on Pocket" + }, + reddit: { + title: "Share on Reddit" + }, + stumbleupon: { + title: "Share on StumbleUpon" + }, + tumblr: { + title: "Share on Tumblr" + }, + twitter: { + title: "Share on Twitter" + }, + vkontakte: { + title: "Share on VK" + } + } + } + }; + a.fn.sharegg = function() { + var b; + if (0 === arguments.length) b = a.fn.sharegg.defaults; else { + if (1 !== arguments.length) throw new Error("Invalid number of arguments: " + arguments.length); + if ("string" == typeof arguments[0]) { + if ("count" === arguments[0]) return this.each(function() { + j(a(this)); + }); + throw new Error("Invalid arguments value: " + arguments[0]); + } + b = arguments[0]; + } + return this.each(function() { + var c = a(this); + c.addClass("sharegg-widget"), void 0 === c.data("url") && c.data("url", void 0 !== b.data && b.data.url ? b.data.url : "http://www.sharegg.org"), + void 0 === c.data("title") && c.data("title", void 0 !== b.data && b.data.title ? b.data.title : "Sharegg"), + void 0 === c.data("description") && c.data("description", void 0 !== b.data && b.data.description ? b.data.description : ""), + void 0 === c.data("image") && c.data("image", void 0 !== b.data && b.data.image ? b.data.image : ""), + k(a(".social-buttons--container ul"), b), j(c); + }); + }, a.fn.sharegg.defaults = { + apiUrl: "http://api.sharegg.org/", + buttons: { + buffer: { + show: !0, + count: !0 + }, + delicious: { + show: !0, + count: !0 + }, + digg: { + show: !0, + count: !0 + }, + facebook: { + show: !0, + count: !0 + }, + googleplus: { + show: !0, + count: !0 + }, + linkedin: { + show: !0, + count: !0 + }, + pinterest: { + show: !0, + count: !0 + }, + pocket: { + show: !0, + count: !0 + }, + reddit: { + show: !0, + count: !0 + }, + stumbleupon: { + show: !0, + count: !0 + }, + tumblr: { + show: !0, + count: !0 + }, + twitter: { + show: !0, + count: !0 + }, + vkontakte: { + show: !0, + count: !0 + } + } + }, window.sharegg = { + popup: i + }; +}(jQuery); \ No newline at end of file diff --git a/docs/index.jade b/docs/index.jade new file mode 100644 index 0000000..7f0d693 --- /dev/null +++ b/docs/index.jade @@ -0,0 +1,104 @@ +!!! 5 + +include dictionary + +html(lang="en") + head + + meta(charset='utf-8') + meta(http-equiv='X-UA-Compatible', content='IE=edge') + + title #{ name } | #{ description } + + meta(name='description', content='A simple to use 12/24 columns Grid created with CSS Flex in SASS. Crafted with love by Vlad Radulescu @ Studio51') + meta(name='viewport', content='width=device-width, initial-scale=1') + + link(rel='stylesheet', href='css/main.min.css') + + body.body + + //- header.header + + //- .grid + //- .row + //- .cell.cell-xs-10 + + //- .brand + //- h1.brand-name #{ name } + //- span.brand-name--pronunciation /ɡrɪd.lɛx/ + + //- p.brand-motto #{ description } + + //- .cell.cell-xs-2 + + //- .social-buttons--container + //- ul.social-buttons + + //- .row.column + //- .cell + + //- .pca-hold + //- .pca-main + //- .pca-inner + + //- include templates/device-content.jade + + //- .pca-sub + //- .pca-top + //- .pca-mid + //- .pca-part + + //- .pca-bot + + main.main + .grid + + include templates/module-grid.jade + include templates/module-offsets.jade + include templates/module-alignment.jade + include templates/module-distribution.jade + + + .grid + + .span.hidden-xs hidden-xs + .span.hidden-sm hidden-sm + .span.hidden-md hidden-md + .span.hidden-lg hidden-lg + + .span.visible-xs visible-xs + .span.visible-sm visible-sm + .span.visible-md visible-md + .span.visible-lg visible-lg + + footer.footer + + .grid + .row + .cell.cell-xs-12.cell-sm-3 + + ul.list-unstyled.footer-links + li + a(href="//github.com/studio51/gridlecss/blob/master/DOCUMENTATION.md") Documentation + li + a(href="//github.com/studio51/gridlecss/blob/master/CHANGELOG.md") Changelog + li + a(href="//github.com/studio51/gridlecss/releases/tag/v#{version}") #{ name } v#{version} + + .cell.cell-xs.cell-sm + + .row + .cell + +

    Crafted with ♥ by Vlad Radulescu and maintained by Studio51 + + .cell + + p.footer-copyright + © #{ name } 2015 + + script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js') + script(src='js/main.min.js') + script(src='http://localhost:48626/takana.js') + script. + takanaClient.run({host: 'localhost:48626'}); diff --git a/docs/js/main.js b/docs/js/main.js new file mode 100644 index 0000000..58a1f99 --- /dev/null +++ b/docs/js/main.js @@ -0,0 +1,72 @@ +$(document).ready(function() { + + + // var responsiveAnimationTransform = function() { + var macbook, ipad, iphone, imac; + var animTime = 1000; + + macbook = setTimeout(function() { + $('#animated .pca-anim-wrap').addClass('macbook'); + }, animTime * 1); + ipad = setTimeout(function() { + $('#animated .pca-anim-wrap').addClass('ipad'); + }, animTime * 2); + iphone = setTimeout(function() { + $('#animated .pca-anim-wrap').addClass('iphone'); + }, animTime * 3); + imac = setTimeout(function() { + $('#animated .pca-anim-wrap').removeClass('macbook ipad iphone'); + responsiveAnimationTransform(); + }, animTime * 4); + // }; + // responsiveAnimationTransform(); + + $('.nav-menu a.btn').on('click', function(e) { + e.preventDefault(); + var target = $(this).data('target'); + $('html, body').stop().animate({ + scrollTop: $(target).offset().top + }, 1000); + }); + + $('.show-css').on('click', function(e) { + e.preventDefault(); + + var target = $(this).attr('href'), + parent = $('section' + target); + + parent.toggleClass('css'); + }); + + $('.social-buttons--container ul').sharegg({ + data: { + url: 'http://studio51.github.io/gridlecss', + title: 'GridleCSS, yet another flexbox grid!' + }, + buttons: { + googleplus: { + show: true, + count: true + }, + twitter: { + show: true, + count: true + }, + digg: { + show: true, + count: true + } + } + }); + + /* open folding content */ + $('#toggle-menu').on('click', function(event){ + event.preventDefault(); + openItemInfo($(this).attr('href')); + var menu = $('.nav-menu'); + + $(menu).toggleClass('open'); + $(this).toggleClass('close'); + + }); +}); diff --git a/docs/js/sharegg.js b/docs/js/sharegg.js new file mode 100644 index 0000000..4053e72 --- /dev/null +++ b/docs/js/sharegg.js @@ -0,0 +1,398 @@ +// Slightly modified to support custom Theme styles and use FontAwesome social +// icons instead of old pngs +// + +(function($) { + "use strict"; + var services = { + buffer: { + url: 'https://bufferapp.com/add?url={url}&title={description}&source=button', + supportCount: true, + screenSize: { + height: 350, + width: 800 + } + }, + delicious: { + url: 'http://www.delicious.com/save?v=5&noui&jump=close&url={url}&title={title}', + supportCount: false, + screenSize: { + height: 650, + width: 1024 + } + }, + digg: { + url: 'http://digg.com/submit?url={url}', + supportCount: false, + screenSize: { + height: 650, + width: 1024 + } + }, + facebook: { + url: 'https://www.facebook.com/sharer/sharer.php?u={url}&display=popup&ref=plugin', + supportCount: true, + screenSize: { + height: 306, + width: 650 + } + }, + googleplus: { + url: 'https://plus.google.com/share?url={url}', + supportCount: true, + screenSize: { + height: 620, + width: 620 + } + }, + linkedin: { + url: 'http://www.linkedin.com/shareArticle?url={url}&title={title}&summary={description}&source=sharegg', + supportCount: true, + screenSize: { + height: 650, + width: 1024 + } + }, + pinterest: { + url: 'https://pinterest.com/pin/create/bookmarklet/?url={url}&description={description}&media={image}', + supportCount: true, + screenSize: { + height: 650, + width: 1024 + } + }, + pocket: { + url: 'https://getpocket.com/save?url={url}&title={title}', + supportCount: false, + screenSize: { + height: 360, + width: 576 + } + }, + reddit: { + url: 'http://reddit.com/submit?url={url}&title={title}', + supportCount: true, + screenSize: { + height: 650, + width: 1024 + } + }, + stumbleupon: { + url: 'http://www.stumbleupon.com/badge/?url={url}', + supportCount: true, + screenSize: { + height: 602, + width: 480 + } + }, + tumblr: { + url: 'http://www.tumblr.com/share/link?url={url}&name={title}&description={description}', + //url: 'http://www.tumblr.com/share/quote?quote={description}&source={url}', + //url: 'http://www.tumblr.com/share/photo?source={image}&clickthru={url}&caption={description}', + //url: 'http://www.tumblr.com/share/video?embed={url}&caption={description}', + supportCount: false, + screenSize: { + height: 650, + width: 1024 + } + }, + twitter: { + url: 'https://twitter.com/share?url={url}&text={title}', + supportCount: true, + screenSize: { + height: 420, + width: 550 + } + }, + vkontakte: { + url: 'https://vk.com/share.php?url={url}', + supportCount: true, + screenSize: { + height: 445, + width: 642 + } + } + }, + locales = { + 'en_US': { + name: 'English (United States)', + alias: ['en', 'en-US'], + messages: { + buffer: { + title: 'Share on Buffer' + }, + delicious: { + title: 'Share on Delicious' + }, + digg: { + title: 'Share on Digg' + }, + facebook: { + title: 'Share on Facebook' + }, + googleplus: { + title: 'Share on Google Plus' + }, + linkedin: { + title: 'Share on Linkedin' + }, + pinterest: { + title: 'Share on Pinterest' + }, + pocket: { + title: 'Share on Pocket' + }, + reddit: { + title: 'Share on Reddit' + }, + stumbleupon: { + title: 'Share on StumbleUpon' + }, + tumblr: { + title: 'Share on Tumblr' + }, + twitter: { + title: 'Share on Twitter' + }, + vkontakte: { + title: 'Share on VK' + } + } + } + }; + + function fmt(str, args) { + var s = str.toString(); + Object.keys(args).forEach(function(k) { + var re = new RegExp('\\{' + k + '\\}', 'gm'); + s = s.replace(re, args[k]); + }); + return s; + } + + function slash(url) { + if (!(/\/$/.test(url))) { + return url + '/'; + } + return url; + } + + function getStats(serviceName, url, callback) { + $.ajax({ + url: slash($.fn.sharegg.defaults.apiUrl) + 'stats/' + serviceName + '?url=' + encodeURIComponent(url), + dataType: 'json', + type: 'GET' + }).complete(function(xhr) { + if (xhr.status === 200) { + callback(xhr.responseJSON); + } else { + callback(); + } + }); + } + + function getShareCount(serviceName, url, callback) { + getStats(serviceName, url, function(data) { + if (serviceName === 'reddit') { + callback(data ? data.score : 0); + } else if (serviceName === 'stumbleupon') { + callback(data ? data.views : 0); + } else if (serviceName === 'pocket' || serviceName === 'vkontakte') { + callback(data ? data.count : 0); + } else { + callback(data ? data.shares : 0); + } + }); + } + + function getService(serviceName) { + var s = services[serviceName]; + if (!s) { + throw new Error('Invalid service name: ' + serviceName); + } + return s; + } + + function serviceExists(serviceName) { + return services[serviceName] !== undefined; + } + + function getLocale(locale) { + var l = locales[locale]; + if (!l) { + l = locales.en_US; + console.warn('Invalid locale: ' + locale); + } + return l; + } + + function registerLocale(id, info) { + locales[id] = info; + } + + function popup(elem) { + var e = $(elem), + serviceName = e.data('service-name'), + service = getService(serviceName), + parent = e.closest('.sharegg-widget'), + url = encodeURIComponent(parent.data('url')), + title = encodeURIComponent(parent.data('title')), + description = encodeURIComponent(parent.data('description')), + image = encodeURIComponent(parent.data('image')); + var w = window.open(fmt(service.url, { + url: url, + title: title, + description: description, + image: image + }), 'sharegg', fmt('width={width}, height={height}, resizable=1, scrollbars=1, top=0, left=0', service.screenSize)); + // FIX-ME: Find a better way to do this. + var timer = setInterval(function() { + if (w.closed) { + clearInterval(timer); + getShareCount(serviceName, url, function(count) { + e.find('span').text(count); + }); + } + }, 600); + } + + function loadCount(elem) { + var buttons; + if (elem) { + buttons = elem.find('li.social-btn'); + } else { + buttons = $('li.social-btn'); + } + $.each(buttons, function() { + var e = $(this).find('a'); + getShareCount(e.data('service-name'), e.closest('.sharegg-widget').data('url'), function(count) { + e.find('span').text(count); + }); + }); + } + + function createShareButtons(elem, opt) { + opt = $.extend({}, $.fn.sharegg.defaults, opt); + $.each(opt.buttons, function(item) { + if (this.show === true) { + var serviceName = item.toString(); + if (!serviceExists(serviceName)) { + throw new Error('Invalid service name: ' + serviceName); + } + var title = getLocale('en_US').messages[serviceName].title; + /* jshint multistr: true */ + elem.append('

  • \ + \ + \ + \ +
    • '); + var icon = elem.find('.' + serviceName + '-btn'); + if (this.count === true) { + icon.parent().append('0'); + } else { + icon.addClass('social-no-counter'); + } + } + }); + } + $.fn.sharegg = function() { + var opt; + if (arguments.length === 0) { + opt = $.fn.sharegg.defaults; + } else if (arguments.length === 1) { + if (typeof arguments[0] === 'string') { + if (arguments[0] === 'count') { + return this.each(function() { + loadCount($(this)); + }); + } + throw new Error('Invalid arguments value: ' + arguments[0]); + } + opt = arguments[0]; + } else { + throw new Error('Invalid number of arguments: ' + arguments.length); + } + return this.each(function() { + var e = $(this); + e.addClass('sharegg-widget'); + if (e.data('url') === undefined) { + e.data('url', (opt.data !== undefined && opt.data.url) ? opt.data.url : 'http://www.sharegg.org'); + } + if (e.data('title') === undefined) { + e.data('title', (opt.data !== undefined && opt.data.title) ? opt.data.title : 'Sharegg'); + } + if (e.data('description') === undefined) { + e.data('description', (opt.data !== undefined && opt.data.description) ? opt.data.description : ''); + } + if (e.data('image') === undefined) { + e.data('image', (opt.data !== undefined && opt.data.image) ? opt.data.image : ''); + } + createShareButtons($('.social-buttons--container ul'), opt); + loadCount(e); + }); + }; + $.fn.sharegg.defaults = { + apiUrl: 'http://api.sharegg.org/', + buttons: { + buffer: { + show: true, + count: true, + }, + delicious: { + show: true, + count: true, + }, + digg: { + show: true, + count: true, + }, + facebook: { + show: true, + count: true, + }, + googleplus: { + show: true, + count: true, + }, + linkedin: { + show: true, + count: true, + }, + pinterest: { + show: true, + count: true, + }, + pocket: { + show: true, + count: true, + }, + reddit: { + show: true, + count: true, + }, + stumbleupon: { + show: true, + count: true, + }, + tumblr: { + show: true, + count: true, + }, + twitter: { + show: true, + count: true, + }, + vkontakte: { + show: true, + count: true, + } + } + }; + window.sharegg = { + popup: popup + }; +}(jQuery)); diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 0000000..65b49c5 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,43 @@ +{ + "name": "GridleCSS-Theme", + "version": "1.0.0", + "description": "Yet another flexbox framework", + "repository": { + "type": "git", + "url": "https://github.com/studio51/gridlecss.git" + }, + "keywords": [ + "CSS", + "Grid", + "Flexbox", + "SASS", + "NPM" + ], + "author": "Vlad Radulescu", + "license": "MIT", + "bugs": { + "url": "https://github.com/studio51/gridlecss/issues" + }, + "homepage": "https://studio51.github.io/gridlecss", + "devDependencies": { + "autoprefixer-core": "^5.1.11", + "bower": "^1.4.1", + "bs-html-injector": "^2.0.4", + "cssnext": "^1.4.0", + "grunt": "^0.4.5", + "grunt-browser-sync": "^2.1.3", + "grunt-contrib-clean": "^0.6.0", + "grunt-contrib-cssmin": "^0.12.3", + "grunt-contrib-imagemin": "^0.9.4", + "grunt-contrib-uglify": "^0.9.1", + "grunt-contrib-watch": "^0.6.1", + "grunt-copy": "^0.1.0", + "grunt-cssbeautifier": "^0.1.2", + "grunt-cssnext": "^1.0.0", + "grunt-jade": "^0.5.1", + "grunt-postcss": "^0.4.0", + "grunt-sass": "^1.0.0", + "grunt-svgmin": "^2.0.1", + "matchdep": "^0.3.0" + } +} diff --git a/docs/templates/device-content.jade b/docs/templates/device-content.jade new file mode 100644 index 0000000..45984d8 --- /dev/null +++ b/docs/templates/device-content.jade @@ -0,0 +1,30 @@ +.grid + .row + .cell + + nav.nav-menu(role='navigation') + ul.list-unstyled + + - var nav_items = ['basic', 'responsive', 'fluid', 'offset', 'nested', 'auto', 'alignment', 'distribution', 'reversed', 'reordered'] + - var i = 1 + + each val in nav_items + + li(class="list-item animated-#{i++}") + a.btn.btn-sm.list-item-link(href="#", data-target="#grid-#{val}") #{val} + + .cell + + .device-demo--container + .device-demo--content.device-demo--side_a + a.btn.btn-round.btn-yellow(href="", title="Check out some Demos") + i.fa.fa-lightbulb-o + + p + | More demos will be made available soon. + + .device-demo--side.device-demo--side_b + a.btn.btn-round.btn-purple(href="https://github.com/studio51/gridlecss/archive/v#{version}.zip", title="GridleCSS v#{version}") + i.fa.fa-arrow-down + p + | Download GridleCSS v#{version} diff --git a/docs/templates/module-alignment.jade b/docs/templates/module-alignment.jade new file mode 100644 index 0000000..14a9326 --- /dev/null +++ b/docs/templates/module-alignment.jade @@ -0,0 +1,62 @@ +.module + h1.module-title Module: Aligments + + section.module-content#grid-alignment + + .row + .cell.cell-md.unstyled + + .row + .cell.unstyled + + section.module-section + header + h3.module-title #{alignment_additional} + p.module-description #{alignment_additional_description} + + article + + include modules/alignment-main + + .margin.mh16 + + .cell.unstyled + + section.module-section + header + //- h3.module-title #{alignment_additional_two} + p.module-description #{alignment_additional_two_description} + + article + + include modules/alignment-cross + + .margin.mv16 + + .cell.cell-md.unstyled + + .row + .cell.unstyled + + section.module-section + header + h3.module-title #{alignment_additional_three} + p.module-description #{alignment_additional_three_description} + + article + + include modules/alignment-child + + .margin.mh16 + + .cell.unstyled + + section.module-section + header + h3.module-title #{alignment_additional_four} + p.module-description #{alignment_additional_four_description} + + article + + include modules/alignment-viewport + diff --git a/docs/templates/module-distribution.jade b/docs/templates/module-distribution.jade new file mode 100644 index 0000000..3efb0c4 --- /dev/null +++ b/docs/templates/module-distribution.jade @@ -0,0 +1,43 @@ +.module + h1.module-title Module: Distribution + + section.module-content#grid-distribution + + .row + .cell.cell-sm.unstyled + + section.module-section + header + //- h3.module-title #{distribution_between} + p.module-description #{distribution_between_description} + + article + + include modules/distribution-between + + .margin.mv16 + + .cell.cell-sm.unstyled + + section.module-section + header + //- h3.module-title #{distribution_around} + p.module-description #{distribution_around_description} + + article + + include modules/distribution-around + + .margin.mh16 + + .row + .cell.unstyled + + section.module-section + header + h3.module-title #{distribution_viewport} + p.module-description #{distribution_viewport_description} + + article + + include modules/distribution-viewport diff --git a/docs/templates/module-grid.jade b/docs/templates/module-grid.jade new file mode 100644 index 0000000..ab1494c --- /dev/null +++ b/docs/templates/module-grid.jade @@ -0,0 +1,112 @@ +.module + h1.module-title Module: The Grid + section.module-content + + .row + .cell-sm + + #grid-basic + + section.module-section + header + h3.module-title #{basic} + p.module-description #{basic_description} + + article + + include modules/grid-gridlecss.jade + + .row + .cell-sm + + #grid-responsive + + section.module-section + header + h3.module-title #{responsive} + p.module-description #{responsive_description} + + article + + include modules/grid-responsive.jade + + .row + .cell-sm + + #grid-fluid + + section.module-section + header + h3.module-title #{fluid} + p.module-description #{fluid_description} + + article + + include modules/grid-fluid.jade + + .row + .cell-sm + + #grid-reversed + + section.module-section + header + h3.module-title #{reversed} + p.module-description #{reversed_description} + + article + + include modules/grid-reversed.jade + + .cell-sm-5 + + #grid-reordered + + section.module-section + header + h3.module-title #{reordered} + p.module-description #{reordered_description} + + article + + include modules/grid-reordered.jade + + .row + .cell-sm + + #grid-auto + + section.module-section + header + h3.module-title #{auto_additional} + p.module-description #{auto_additional_description} + + article + + include modules/grid-auto.jade + + .cell-sm + + section.module-section + header + h3.module-title #{auto_additional_two} + p.module-description #{auto_additional_two_description} + + article + + include modules/grid-auto-viewport.jade + + .row + .cell-sm + + #grid-nested + + section.module-section + + header + h2.module-title #{nested} + p.module-description #{nested_description} + + article + + include modules/grid-nested.jade diff --git a/docs/templates/module-offsets.jade b/docs/templates/module-offsets.jade new file mode 100644 index 0000000..c2e6a3f --- /dev/null +++ b/docs/templates/module-offsets.jade @@ -0,0 +1,25 @@ +.module + h1.module-title Module: Offsets + + section.module-content#grid-offset + + .row + .cell.cell-sm.unstyled + + section.module-section + article + + include modules/offsets-offsets + + .margin.mv16 + + .cell.cell-sm-6.cell-md-5.unstyled + + section.module-section + header + h3.module-title #{offset_viewport} + p.module-description #{offset_viewport_description} + + article + + include modules/offsets-viewport diff --git a/docs/templates/modules/alignment-child.jade b/docs/templates/modules/alignment-child.jade new file mode 100644 index 0000000..de30bf2 --- /dev/null +++ b/docs/templates/modules/alignment-child.jade @@ -0,0 +1,6 @@ +.cells-container.text-center + .row.demo-alignment-cross + .cell.cell-xs.cell-align--top cell-align--top + .cell.cell-xs.cell-align--middle cell-align--middle + .cell.cell-xs.cell-align--bottom cell-align--bottom + .cell.cell-xs.cell-align--stretch cell-align--stretch diff --git a/docs/templates/modules/alignment-cross.jade b/docs/templates/modules/alignment-cross.jade new file mode 100644 index 0000000..720ab25 --- /dev/null +++ b/docs/templates/modules/alignment-cross.jade @@ -0,0 +1,48 @@ +.cells-container.text-center + .row + .cell.cell-xs.unstyled + .row.demo-alignment-cross + .cell align-stretch + + .cell.cell-xs.unstyled + .row.align-top.demo-alignment-cross + .cell .align-top + + .cell.cell-xs.unstyled + .row.align-middle.demo-alignment-cross + .cell align-middle + + .cell.cell-xs.unstyled + .row.align-bottom.demo-alignment-cross + .cell align-bottom + + .row + .cell.unstyled + .row.demo-alignment-baseline + .cell.cell-xs.demo-alignment-baseline-1 + span baseline + .cell.cell-xs.demo-alignment-baseline-2 + span baseline + .cell.cell-xs + span baseline + + .row + .cell.unstyled + .row.align-sm-top.align-md-middle.align-lg-bottom + .cell.cell-xs + | Lorem ipsum dolor sit amet, consectetur adipisicing elit. + | Saepe, reprehenderit ipsum atque distinctio ad, nihil + | repudiandae ut omnis dignissimos suscipit non quos debitis + | inventore fuga alias. Quod ut nesciunt aut. + + .cell.cell-xs-3 + .visible-xs stretch + .visible-sm align-sm-top + .visible-md align-md-middle + .visible-lg align-lg-bottom + + .cell.cell-xs-3 + .visible-xs stretch + .visible-sm align-sm-top + .visible-md align-md-middle + .visible-lg align-lg-bottom diff --git a/docs/templates/modules/alignment-main.jade b/docs/templates/modules/alignment-main.jade new file mode 100644 index 0000000..219ebbc --- /dev/null +++ b/docs/templates/modules/alignment-main.jade @@ -0,0 +1,13 @@ +.cells-container.text-center + .row + .cell.cell-xs.unstyled + .row.align-left + .cell.cell-xs-7 align-left + + .cell.cell-xs.unstyled + .row.align-center + .cell.cell-xs-7 align-center + + .cell.cell-xs.unstyled + .row.align-right + .cell.cell-xs-7 align-right diff --git a/docs/templates/modules/alignment-viewport.jade b/docs/templates/modules/alignment-viewport.jade new file mode 100644 index 0000000..a551e02 --- /dev/null +++ b/docs/templates/modules/alignment-viewport.jade @@ -0,0 +1,25 @@ +.cells-container.text-center + .row.demo-alignment-cross + .cell.cell-xs.cell-xs-align--stretch.cell-sm-align--middle.cell-md-align--stretch.cell-lg-align--top + .visible-xs cell-xs-align--stretch + .visible-sm cell-sm-align--middle + .visible-md cell-md-align--stretch + .visible-lg cell-lg-align--top + + .cell.cell-xs.cell-xs-align--stretch.cell-sm-align--middle.cell-md-align--bottom.cell-lg-align--middle + .visible-xs cell-xs-align--stretch + .visible-sm cell-sm-align--middle + .visible-md cell-md-align--bottom + .visible-lg cell-lg-align--middle + + .cell.cell-xs.cell-xs-align--stretch.cell-sm-align--middle.cell-md-align--middle.cell-lg-align--bottom + .visible-xs cell-xs-align--stretch + .visible-sm cell-sm-align--middle + .visible-md cell-md-align--middle + .visible-lg cell-lg-align--bottom + + .cell.cell-xs.cell-xs-align--stretch.cell-sm-align--middle.cell-md-align--top.cell-lg-align--stretch + .visible-xs cell-xs-align--stretch + .visible-sm cell-sm-align--middle + .visible-md cell-md-align--top + .visible-lg cell-lg-align--stretch diff --git a/docs/templates/modules/distribution-around.jade b/docs/templates/modules/distribution-around.jade new file mode 100644 index 0000000..d8c264d --- /dev/null +++ b/docs/templates/modules/distribution-around.jade @@ -0,0 +1,5 @@ +.cells-container.text-center + .row.distribute-around + .cell.cell-xs-3 distribute-around + .cell.cell-xs-3 distribute-around + .cell.cell-xs-3 distribute-around diff --git a/docs/templates/modules/distribution-between.jade b/docs/templates/modules/distribution-between.jade new file mode 100644 index 0000000..be18dfd --- /dev/null +++ b/docs/templates/modules/distribution-between.jade @@ -0,0 +1,5 @@ +.cells-container.text-center + .row.distribute-between + .cell.cell-xs-3 distribute-between + .cell.cell-xs-3 distribute-between + .cell.cell-xs-3 distribute-between diff --git a/docs/templates/modules/distribution-viewport.jade b/docs/templates/modules/distribution-viewport.jade new file mode 100644 index 0000000..fd655a6 --- /dev/null +++ b/docs/templates/modules/distribution-viewport.jade @@ -0,0 +1,19 @@ +.cells-container.text-center + .row.distribute-around.distribute-sm-between.distribute-md-around.distribute-lg-between + .cell.cell-xs-3 + .visible-xs distribute-xs-around + .visible-sm distribute-sm-between + .visible-md distribute-md-around + .visible-lg distribute-lg-between + + .cell.cell-xs-3 + .visible-xs distribute-xs-around + .visible-sm distribute-sm-between + .visible-md distribute-md-around + .visible-lg distribute-lg-between + + .cell.cell-xs-3 + .visible-xs distribute-xs-around + .visible-sm distribute-sm-between + .visible-md distribute-md-around + .visible-lg distribute-lg-between diff --git a/docs/templates/modules/grid-auto-viewport.jade b/docs/templates/modules/grid-auto-viewport.jade new file mode 100644 index 0000000..8d457c4 --- /dev/null +++ b/docs/templates/modules/grid-auto-viewport.jade @@ -0,0 +1,25 @@ +.cells-container + .row + .cell.cell-sm.cell-md-3.cell-lg + span.visible-xs full-xs + span.visible-sm auto-sm + span.visible-md cell-md-3 + span.visible-lg auto-lg + + .cell.cell-sm.cell-md.cell-lg + span.visible-xs full-xs + span.visible-sm auto-sm + span.visible-md auto-md + span.visible-lg auto-lg + + .cell.cell-sm.cell-md-2.cell-lg + span.visible-xs full-xs + span.visible-sm auto-sm + span.visible-md cell-md-2 + span.visible-lg auto-lg + + .cell.cell-sm.cell-md.cell-lg + span.visible-xs full-xs + span.visible-sm auto-sm + span.visible-md auto-md + span.visible-lg auto-lg diff --git a/docs/templates/modules/grid-auto.jade b/docs/templates/modules/grid-auto.jade new file mode 100644 index 0000000..6069b45 --- /dev/null +++ b/docs/templates/modules/grid-auto.jade @@ -0,0 +1,12 @@ +.cells-container + .row + + - for( var i = 0; i < 4; ++i ) + + .cell.cell-xs auto + + .row + .cell.cell-xs-3 cell-xs-3 + .cell.cell-xs auto + .cell.cell-xs-2 cell-xs-2 + .cell.cell-xs auto diff --git a/docs/templates/modules/grid-fluid.jade b/docs/templates/modules/grid-fluid.jade new file mode 100644 index 0000000..f7afa0b --- /dev/null +++ b/docs/templates/modules/grid-fluid.jade @@ -0,0 +1,27 @@ +.cells-container + .row + .cell.cell-lg auto-xs + + .row + .cell.cell-xs-1 cell-xs-1 + .cell.cell-xs-11 cell-xs-11 + + .row + .cell.cell-xs-2 cell-xs-2 + .cell.cell-xs-10 cell-xs-10 + + .row + .cell.cell-xs-3 cell-xs-3 + .cell.cell-xs-9 cell-xs-9 + + .row + .cell.cell-xs-4 cell-xs-4 + .cell.cell-xs-8 cell-xs-8 + + .row + .cell.cell-xs-5 cell-xs-5 + .cell.cell-xs-7 cell-xs-7 + + .row + .cell.cell-xs-6 cell-xs-6 + .cell.cell-xs-6 cell-xs-6 diff --git a/docs/templates/modules/grid-gridlecss.jade b/docs/templates/modules/grid-gridlecss.jade new file mode 100644 index 0000000..8bb56c8 --- /dev/null +++ b/docs/templates/modules/grid-gridlecss.jade @@ -0,0 +1,52 @@ +.cells-container + .row + .cell-xs.cell-sm-1 auto-xs + .cell-xs.cell-sm-3.cell-md-7.cell-lg + span.visible-xs auto-xs + span.visible-sm cell-sm-3 + span.visible-md cell-md-7 + span.visible-lg auto-lg + + .cell-xs auto-xs + + .row + .cell-xs-9.cell-sm-7.cell-md-5.cell-lg-3 + span.visible-xs cell-xs-9 + span.visible-sm cell-sm-7 + span.visible-md cell-md-5 + span.visible-lg cell-lg-3 + + .cell-xs auto + + .row + .cell-xs + | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos + | blanditiis odit et ratione, id laboriosam sapiente consequuntur + | laborum officia, impedit eligendi natus quisquam dolor in at + | aliquam, tempore maiores est. + + .cell-sm-10 + .row + .cell-xs xs-auto + .cell-xs-3 cell-xs-3 + .cell-xs xs-auto + .cell-xs-1 cel-xs-1 + + .row + .cell-xs-4 cell-xs-4 + .cell-xs-3 cell-xs-3 + .cell-xs-4 cell-xs-4 + .cell-xs-1 cell-xs-1 + + .row + + - for( var i = 0; i < 6; ++i ) + .cell-xs-2 cell-xs-2 + + .row + + - for( var i = 0; i < 12; ++i ) + .cell-xs-1 cell-xs-1 + + .row + .cell-xs-12 cell-xs-12 diff --git a/docs/templates/modules/grid-nested.jade b/docs/templates/modules/grid-nested.jade new file mode 100644 index 0000000..1244f4b --- /dev/null +++ b/docs/templates/modules/grid-nested.jade @@ -0,0 +1,26 @@ +.cells-container + .row + .cell.cell-sm + + .row + .cell + + .row + + - for( var na = 0; na < 4; na++ ) + + .cell.cell-xs + .row + + - for( var nb = 0; nb < 3; nb++ ) + + .cell.cell-xs + + .cell.cell-sm + + .row + .cell + .row + .cell + .row + .cell diff --git a/docs/templates/modules/grid-reordered.jade b/docs/templates/modules/grid-reordered.jade new file mode 100644 index 0000000..793ce4b --- /dev/null +++ b/docs/templates/modules/grid-reordered.jade @@ -0,0 +1,7 @@ +.cells-container + .row + .cell.cell-xs.cell-order--last 1 + .cell.cell-xs 2 + .cell.cell-xs.cell-order--first 3 + .cell.cell-xs 4 + .cell.cell-xs 5 diff --git a/docs/templates/modules/grid-responsive.jade b/docs/templates/modules/grid-responsive.jade new file mode 100644 index 0000000..db1be66 --- /dev/null +++ b/docs/templates/modules/grid-responsive.jade @@ -0,0 +1,38 @@ +.cells-container + .row + .cell.cell-xs-5.cell-sm-4.cell-md-3.cell-lg-2 + span.visible-xs cell-xs-5 + span.visible-sm cell-sm-4 + span.visible-md cell-md-3 + span.visible-lg cell-lg-2 + + .cell.cell-xs-2.cell-sm-4.cell-md-6.cell-lg-8 + span.visible-xs cell-xs-2 + span.visible-sm cell-sm-4 + span.visible-md cell-md-6 + span.visible-lg cell-lg-8 + + .cell.cell-xs-5.cell-sm-4.cell-md-3.cell-lg-2 + span.visible-xs cell-xs-5 + span.visible-sm cell-sm-4 + span.visible-md cell-md-3 + span.visible-lg cell-lg-2 + + .row + .cell.cell-xs-3.cell-sm-3.cell-md-2.cell-lg-2 + span.visible-xs cell-xs-3 + span.visible-sm cell-sm-3 + span.visible-md cell-md-2 + span.visible-lg cell-lg-2 + + .cell.cell-xs-9.cell-sm-6.cell-md-2.cell-lg-2 + span.visible-xs cell-xs-9 + span.visible-sm cell-sm-6 + span.visible-md cell-md-2 + span.visible-lg cell-lg-2 + + .cell.cell-xs.cell-sm-3.cell-md-8.cell-lg + span.visible-xs cell-xs + span.visible-sm cell-sm-3 + span.visible-md cell-md-8 + span.visible-lg cell-lg diff --git a/docs/templates/modules/grid-reversed.jade b/docs/templates/modules/grid-reversed.jade new file mode 100644 index 0000000..7443cb8 --- /dev/null +++ b/docs/templates/modules/grid-reversed.jade @@ -0,0 +1,6 @@ +.cells-container + .row.row--reverse + + - for( var i = 1; i < 13; ++i ) + + .cell.cell-xs #{i} diff --git a/docs/templates/modules/offsets-offsets.jade b/docs/templates/modules/offsets-offsets.jade new file mode 100644 index 0000000..d90e660 --- /dev/null +++ b/docs/templates/modules/offsets-offsets.jade @@ -0,0 +1,10 @@ +.cells-container + + - for( var i = 1; i < 12; ++i ) + - var offset = (i - 12) + + .row + div(class="cell cell-xs-offset#{offset} cell-xs-#{i}") offset#{offset} + + .row + .cell.cell-xs-12 no-offset diff --git a/docs/templates/modules/offsets-viewport.jade b/docs/templates/modules/offsets-viewport.jade new file mode 100644 index 0000000..a5e4114 --- /dev/null +++ b/docs/templates/modules/offsets-viewport.jade @@ -0,0 +1,28 @@ +.cells-container.text-center + .row + .cell.cell-xs-3.cell-sm-offset-9.cell-md-4.cell-md-offset-4.cell-lg-2.cell-lg-offset-4 + span.visible-xs xs, cell-xs-3 + span.visible-sm sm, cell-xs-3 cell-sm-offset-9 + span.visible-md md, cell-md-4 cell-md-offset-4 + span.visible-lg lg, cell-lg-2 cell-lg-offset-4 + + .row + .cell.cell-xs-3.cell-xs-offset-3.cell-sm-offset-6.cell-md-4.cell-md-offset-4.cell-lg-2.cell-lg-offset-5 + span.visible-xs xs, cell-xs-3 cell-xs-offset-3 + span.visible-sm sm, cell-xs-3 cell-sm-offset-6 + span.visible-md md, cell-md-4 cell-md-offset-4 + span.visible-lg lg, cell-lg-2 cell-lg-offset-5 + + .row + .cell.cell-xs-3.cell-xs-offset-6.cell-sm-offset-3.cell-md-4.cell-md-offset-4.cell-lg-2.cell-lg-offset-6 + span.visible-xs xs, cell-xs-3 cell-xs-offset-6 + span.visible-sm sm, cell-xs-3 cell-sm-offset-3 + span.visible-md md, cell-md-4 cell-md-offset-4 + span.visible-lg lg, cell-lg-2 cell-lg-offset-6 + + .row + .cell.cell-xs-3.cell-xs-offset-9.cell-sm-offset.cell-md-4.cell-md-offset-4.cell-lg-2.cell-lg-offset-7 + span.visible-xs xs, cell-xs-3 cell-xs-offset-9 + span.visible-sm sm, cell-xs-3 cell-sm-offset + span.visible-md md, cell-md-4 cell-md-offset-4 + span.visible-lg lg, cell-lg-2 cell-lg-offset-7 diff --git a/grid/gridlecss.scss b/grid/gridlecss.scss deleted file mode 100644 index be5d6fc..0000000 --- a/grid/gridlecss.scss +++ /dev/null @@ -1,195 +0,0 @@ -@import "config"; - -:root { - --grid-xs-container: 100%; - --grid-sm-container: calc( #{ $grid-sm-min + $grid-gutter }); - --grid-md-container: calc( #{ $grid-md-min + $grid-gutter }); - --grid-lg-container: calc( #{ $grid-lg-min + $grid-gutter }); - --grid-gutter: $grid-gutter; - --grid-gutter-calc: calc( var(--grid-gutter) / 2); -} - -@import "gridlecss/mixins"; - -*, -*:before, -*:after { - box-sizing: border-box; -} - -.grid, -.grid--fluid { - margin-left: auto; - margin-right: auto; - width: 100%; - height: 100%; -} - - .row, - .column { - display: flex; - } - - .row { - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; - margin-left: -( var(--grid-gutter-calc)); - margin-right: -( var(--grid-gutter-calc)); - - &--reverse { - flex-direction: row-reverse; - } - } - - .column { - flex-direction: column; - - &--reverse { - flex-direction: column-reverse; - } - } - - @if $flex-distribution { - @each $distribution in $flex-distributions { - - .distribute-#{ $distribution } { - justify-content: space-#{ $distribution }; - } - } - } - - @if $flex-alignment { - @each $alignment in $flex-alignments { - @include flex-alignments( ".align-", nth($alignment, 1), nth($alignment, 2), "parent"); - } - } - - .cell { - margin-left: var(--grid-gutter-calc); - margin-right: var(--grid-gutter-calc); - flex-basis: 100%; - max-width: 100%; - - &-order { - &--first { - order: -1; - } - - &--last { - order: 1; - } - } - - @if $flex-alignment { - - &-align { - - @each $alignment in $flex-alignments { - @include flex-alignments( "&--", "y", nth($alignment, 2), "child"); - } - } - } - } - - %cell-styles { - display: flex; - flex: 1 0 auto; - flex-direction: column; - } - -@each $breakpoint in $grid-breakpoints { - - @include media("screen", $breakpoint) { - - .grid { - width: var(--grid-#{ $breakpoint }-container); - } - - // Compiles: distribute-* for each viewport - // - .distribute-#{ $breakpoint } { - - @if $flex-distribution { - @each $distribution-option in $flex-distributions { - - &-#{ $distribution-option } { - justify-content: space-#{ $distribution-option }; - } - } - } - } - - // Compiles: align-* for each viewport - // - .align-#{ $breakpoint } { - - @if $flex-alignment { - @each $align-option in $flex-alignments { - @include flex-alignments( "&-", nth($align-option, 1), nth($align-option, 2), "parent"); - } - } - } - - // Compiles: cell-*, cell-*-# and cell-*-offset-# for each viewport - // - @for $i from 1 through $grid-columns { - - .cell-#{ $breakpoint }, - .cell-#{ $breakpoint }-#{ $i }, - .cell-#{ $breakpoint }-offset-#{ $i } { - @extend %cell-styles; - } - } - - // Compiles: cell-* for each viewport - // - .cell-#{ $breakpoint } { - flex: 1 0; - flex-basis: 0; - max-width: 100%; - - &-order { - &--first { - order: -1; - } - - &--last { - order: 1; - } - } - - &-offset { - margin-left: $grid-gutter !important; - } - - @if $flex-alignment { - - &-align { - - @each $alignment in $flex-alignments { - @include flex-alignments( "&--", "y", nth($alignment, 2), "child"); - } - } - } - } - - @for $i from 1 through $grid-columns { - $grid-column-width: (( 100 / $grid-columns ) * $i ) * 1%; - $grid-gutter-calc: $grid-gutter / ( $grid-gutter * 0 + 1 ); - - // Compiles: cell-*-# for each viewport - // - .cell-#{ $breakpoint }-#{ $i } { - flex-basis: $grid-column-width - $grid-gutter-calc; - max-width: $grid-column-width; - } - - // Compiles: cell-*-offset-# for each viewport - // - .cell-#{ $breakpoint }-offset-#{ $i } { - margin-left: $grid-column-width !important; - } - } - } -} diff --git a/package.json b/package.json index c9f4d60..87dab06 100644 --- a/package.json +++ b/package.json @@ -20,15 +20,13 @@ }, "homepage": "https://studio51.github.io/gridlecss", "devDependencies": { - "autoprefixer-core": "^5.1.11", - "cssnext": "^1.4.0", + "autoprefixer": "^6.1.0", "grunt": "^0.4.5", - "grunt-contrib-clean": "^0.6.0", - "grunt-contrib-cssmin": "^0.12.3", - "grunt-cssbeautifier": "^0.1.2", + "grunt-contrib-clean": "^0.7.0", + "grunt-contrib-copy": "^0.8.2", "grunt-cssnext": "^1.0.0", - "grunt-postcss": "^0.4.0", - "grunt-sass": "^1.0.0", - "matchdep": "^0.3.0" + "grunt-postcss": "^0.7.1", + "grunt-sass": "^1.1.0", + "matchdep": "^1.0.0" } } diff --git a/sass/animations/_functions.scss b/sass/animations/_functions.scss new file mode 100644 index 0000000..65e6625 --- /dev/null +++ b/sass/animations/_functions.scss @@ -0,0 +1,3 @@ +@function delay($interval, $count, $index) { + @return ($index * $interval) - ($interval * $count); +} \ No newline at end of file diff --git a/sass/animations/_mixins.scss b/sass/animations/_mixins.scss new file mode 100644 index 0000000..7372b9b --- /dev/null +++ b/sass/animations/_mixins.scss @@ -0,0 +1,25 @@ +@mixin global-bg() { + background-color: $primary-color; +} + +@mixin global-animation() { + animation-fill-mode: both; +} + +@mixin balls() { + @include global-bg(); + + width: $ball-size; + height: $ball-size; + border-radius: 100%; + margin: $margin; +} + +@mixin lines() { + @include global-bg(); + + width: $line-width; + height: $line-height; + border-radius: 2px; + margin: $margin; +} \ No newline at end of file diff --git a/sass/animations/_variables.scss b/sass/animations/_variables.scss new file mode 100644 index 0000000..8190df2 --- /dev/null +++ b/sass/animations/_variables.scss @@ -0,0 +1,5 @@ +$primary-color: #fff !default; +$ball-size: 15px !default; +$margin: 2px !default; +$line-height: 35px !default; +$line-width: 4px !default; \ No newline at end of file diff --git a/sass/animations/animate.scss b/sass/animations/animate.scss new file mode 100644 index 0000000..5a049aa --- /dev/null +++ b/sass/animations/animate.scss @@ -0,0 +1,1579 @@ +@charset "UTF-8"; + +/*! + * animate.css -http://daneden.me/animate + * Version - 3.5.2 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2017 Daniel Eden + */ + +.animated { + animation-duration: 1s; + animation-fill-mode: both; +} + +.animated.infinite { + animation-iteration-count: infinite; +} + +.animated.hinge { + animation-duration: 2s; +} + +.animated.flipOutX, +.animated.flipOutY, +.animated.bounceIn, +.animated.bounceOut { + animation-duration: .75s; +} + +@keyframes bounce { + from, 20%, 53%, 80%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transform: translate3d(0,0,0); + } + + 40%, 43% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -30px, 0); + } + + 70% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -15px, 0); + } + + 90% { + transform: translate3d(0,-4px,0); + } +} + +.bounce { + animation-name: bounce; + transform-origin: center bottom; +} + +@keyframes flash { + from, 50%, to { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +.flash { + animation-name: flash; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes pulse { + from { + transform: scale3d(1, 1, 1); + } + + 50% { + transform: scale3d(1.05, 1.05, 1.05); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.pulse { + animation-name: pulse; +} + +@keyframes rubberBand { + from { + transform: scale3d(1, 1, 1); + } + + 30% { + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + transform: scale3d(.95, 1.05, 1); + } + + 75% { + transform: scale3d(1.05, .95, 1); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.rubberBand { + animation-name: rubberBand; +} + +@keyframes shake { + from, to { + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + transform: translate3d(10px, 0, 0); + } +} + +.shake { + animation-name: shake; +} + +@keyframes headShake { + 0% { + transform: translateX(0); + } + + 6.5% { + transform: translateX(-6px) rotateY(-9deg); + } + + 18.5% { + transform: translateX(5px) rotateY(7deg); + } + + 31.5% { + transform: translateX(-3px) rotateY(-5deg); + } + + 43.5% { + transform: translateX(2px) rotateY(3deg); + } + + 50% { + transform: translateX(0); + } +} + +.headShake { + animation-timing-function: ease-in-out; + animation-name: headShake; +} + +@keyframes swing { + 20% { + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + transform: rotate3d(0, 0, 1, -5deg); + } + + to { + transform: rotate3d(0, 0, 1, 0deg); + } +} + +.swing { + transform-origin: top center; + animation-name: swing; +} + +@keyframes tada { + from { + transform: scale3d(1, 1, 1); + } + + 10%, 20% { + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + } + + 30%, 50%, 70%, 90% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, 60%, 80% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.tada { + animation-name: tada; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes wobble { + from { + transform: none; + } + + 15% { + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + to { + transform: none; + } +} + +.wobble { + animation-name: wobble; +} + +@keyframes jello { + from, 11.1%, to { + transform: none; + } + + 22.2% { + transform: skewX(-12.5deg) skewY(-12.5deg); + } + + 33.3% { + transform: skewX(6.25deg) skewY(6.25deg); + } + + 44.4% { + transform: skewX(-3.125deg) skewY(-3.125deg); + } + + 55.5% { + transform: skewX(1.5625deg) skewY(1.5625deg); + } + + 66.6% { + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + + 77.7% { + transform: skewX(0.390625deg) skewY(0.390625deg); + } + + 88.8% { + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + } +} + +.jello { + animation-name: jello; + transform-origin: center; +} + +@keyframes bounceIn { + from, 20%, 40%, 60%, 80%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + + 20% { + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + transform: scale3d(.9, .9, .9); + } + + 60% { + opacity: 1; + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + transform: scale3d(.97, .97, .97); + } + + to { + opacity: 1; + transform: scale3d(1, 1, 1); + } +} + +.bounceIn { + animation-name: bounceIn; +} + +@keyframes bounceInDown { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + transform: translate3d(0, 25px, 0); + } + + 75% { + transform: translate3d(0, -10px, 0); + } + + 90% { + transform: translate3d(0, 5px, 0); + } + + to { + transform: none; + } +} + +.bounceInDown { + animation-name: bounceInDown; +} + +@keyframes bounceInLeft { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: translate3d(-3000px, 0, 0); + } + + 60% { + opacity: 1; + transform: translate3d(25px, 0, 0); + } + + 75% { + transform: translate3d(-10px, 0, 0); + } + + 90% { + transform: translate3d(5px, 0, 0); + } + + to { + transform: none; + } +} + +.bounceInLeft { + animation-name: bounceInLeft; +} + +@keyframes bounceInRight { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + from { + opacity: 0; + transform: translate3d(3000px, 0, 0); + } + + 60% { + opacity: 1; + transform: translate3d(-25px, 0, 0); + } + + 75% { + transform: translate3d(10px, 0, 0); + } + + 90% { + transform: translate3d(-5px, 0, 0); + } + + to { + transform: none; + } +} + +.bounceInRight { + animation-name: bounceInRight; +} + +@keyframes bounceInUp { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + from { + opacity: 0; + transform: translate3d(0, 3000px, 0); + } + + 60% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } + + 75% { + transform: translate3d(0, 10px, 0); + } + + 90% { + transform: translate3d(0, -5px, 0); + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.bounceInUp { + animation-name: bounceInUp; +} + +@keyframes bounceOut { + 20% { + transform: scale3d(.9, .9, .9); + } + + 50%, 55% { + opacity: 1; + transform: scale3d(1.1, 1.1, 1.1); + } + + to { + opacity: 0; + transform: scale3d(.3, .3, .3); + } +} + +.bounceOut { + animation-name: bounceOut; +} + +@keyframes bounceOutDown { + 20% { + transform: translate3d(0, 10px, 0); + } + + 40%, 45% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } + + to { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } +} + +.bounceOutDown { + animation-name: bounceOutDown; +} + +@keyframes bounceOutLeft { + 20% { + opacity: 1; + transform: translate3d(20px, 0, 0); + } + + to { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } +} + +.bounceOutLeft { + animation-name: bounceOutLeft; +} + +@keyframes bounceOutRight { + 20% { + opacity: 1; + transform: translate3d(-20px, 0, 0); + } + + to { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } +} + +.bounceOutRight { + animation-name: bounceOutRight; +} + +@keyframes bounceOutUp { + 20% { + transform: translate3d(0, -10px, 0); + } + + 40%, 45% { + opacity: 1; + transform: translate3d(0, 20px, 0); + } + + to { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } +} + +.bounceOutUp { + animation-name: bounceOutUp; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.fadeIn { + animation-name: fadeIn; +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInDown { + animation-name: fadeInDown; +} + +@keyframes fadeInDownBig { + from { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInDownBig { + animation-name: fadeInDownBig; +} + +@keyframes fadeInLeft { + from { + opacity: 0; + transform: translate3d(-100%, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInLeft { + animation-name: fadeInLeft; +} + +@keyframes fadeInLeftBig { + from { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInLeftBig { + animation-name: fadeInLeftBig; +} + +@keyframes fadeInRight { + from { + opacity: 0; + transform: translate3d(100%, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInRight { + animation-name: fadeInRight; +} + +@keyframes fadeInRightBig { + from { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInRightBig { + animation-name: fadeInRightBig; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translate3d(0, 100%, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInUp { + animation-name: fadeInUp; +} + +@keyframes fadeInUpBig { + from { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInUpBig { + animation-name: fadeInUpBig; +} + +@keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +.fadeOut { + animation-name: fadeOut; +} + +@keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, 100%, 0); + } +} + +.fadeOutDown { + animation-name: fadeOutDown; +} + +@keyframes fadeOutDownBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } +} + +.fadeOutDownBig { + animation-name: fadeOutDownBig; +} + +@keyframes fadeOutLeft { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(-100%, 0, 0); + } +} + +.fadeOutLeft { + animation-name: fadeOutLeft; +} + +@keyframes fadeOutLeftBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } +} + +.fadeOutLeftBig { + animation-name: fadeOutLeftBig; +} + +@keyframes fadeOutRight { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(100%, 0, 0); + } +} + +.fadeOutRight { + animation-name: fadeOutRight; +} + +@keyframes fadeOutRightBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } +} + +.fadeOutRightBig { + animation-name: fadeOutRightBig; +} + +@keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, -100%, 0); + } +} + +.fadeOutUp { + animation-name: fadeOutUp; +} + +@keyframes fadeOutUpBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } +} + +.fadeOutUpBig { + animation-name: fadeOutUpBig; +} + +@keyframes flip { + from { + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + animation-timing-function: ease-out; + } + + 40% { + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + animation-timing-function: ease-out; + } + + 50% { + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + animation-timing-function: ease-in; + } + + 80% { + transform: perspective(400px) scale3d(.95, .95, .95); + animation-timing-function: ease-in; + } + + to { + transform: perspective(400px); + animation-timing-function: ease-in; + } +} + +.animated.flip { + -webkit-backface-visibility: visible; + backface-visibility: visible; + animation-name: flip; +} + +@keyframes flipInX { + from { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + animation-timing-function: ease-in; + } + + 60% { + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + + 80% { + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + + to { + transform: perspective(400px); + } +} + +.flipInX { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + animation-name: flipInX; +} + +@keyframes flipInY { + from { + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + animation-timing-function: ease-in; + } + + 60% { + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + + 80% { + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + + to { + transform: perspective(400px); + } +} + +.flipInY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + animation-name: flipInY; +} + +@keyframes flipOutX { + from { + transform: perspective(400px); + } + + 30% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + + to { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} + +.flipOutX { + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; +} + +@keyframes flipOutY { + from { + transform: perspective(400px); + } + + 30% { + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + + to { + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } +} + +.flipOutY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + animation-name: flipOutY; +} + +@keyframes lightSpeedIn { + from { + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + + 60% { + transform: skewX(20deg); + opacity: 1; + } + + 80% { + transform: skewX(-5deg); + opacity: 1; + } + + to { + transform: none; + opacity: 1; + } +} + +.lightSpeedIn { + animation-name: lightSpeedIn; + animation-timing-function: ease-out; +} + +@keyframes lightSpeedOut { + from { + opacity: 1; + } + + to { + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } +} + +.lightSpeedOut { + animation-name: lightSpeedOut; + animation-timing-function: ease-in; +} + +@keyframes rotateIn { + from { + transform-origin: center; + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + + to { + transform-origin: center; + transform: none; + opacity: 1; + } +} + +.rotateIn { + animation-name: rotateIn; +} + +@keyframes rotateInDownLeft { + from { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + + to { + transform-origin: left bottom; + transform: none; + opacity: 1; + } +} + +.rotateInDownLeft { + animation-name: rotateInDownLeft; +} + +@keyframes rotateInDownRight { + from { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + transform-origin: right bottom; + transform: none; + opacity: 1; + } +} + +.rotateInDownRight { + animation-name: rotateInDownRight; +} + +@keyframes rotateInUpLeft { + from { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + transform-origin: left bottom; + transform: none; + opacity: 1; + } +} + +.rotateInUpLeft { + animation-name: rotateInUpLeft; +} + +@keyframes rotateInUpRight { + from { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + + to { + transform-origin: right bottom; + transform: none; + opacity: 1; + } +} + +.rotateInUpRight { + animation-name: rotateInUpRight; +} + +@keyframes rotateOut { + from { + transform-origin: center; + opacity: 1; + } + + to { + transform-origin: center; + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} + +.rotateOut { + animation-name: rotateOut; +} + +@keyframes rotateOutDownLeft { + from { + transform-origin: left bottom; + opacity: 1; + } + + to { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } +} + +.rotateOutDownLeft { + animation-name: rotateOutDownLeft; +} + +@keyframes rotateOutDownRight { + from { + transform-origin: right bottom; + opacity: 1; + } + + to { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.rotateOutDownRight { + animation-name: rotateOutDownRight; +} + +@keyframes rotateOutUpLeft { + from { + transform-origin: left bottom; + opacity: 1; + } + + to { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.rotateOutUpLeft { + animation-name: rotateOutUpLeft; +} + +@keyframes rotateOutUpRight { + from { + transform-origin: right bottom; + opacity: 1; + } + + to { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } +} + +.rotateOutUpRight { + animation-name: rotateOutUpRight; +} + +@keyframes hinge { + 0% { + transform-origin: top left; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + transform: rotate3d(0, 0, 1, 80deg); + transform-origin: top left; + animation-timing-function: ease-in-out; + } + + 40%, 80% { + transform: rotate3d(0, 0, 1, 60deg); + transform-origin: top left; + animation-timing-function: ease-in-out; + opacity: 1; + } + + to { + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +.hinge { + animation-name: hinge; +} + +@keyframes jackInTheBox { + from { + opacity: 0; + transform: scale(0.1) rotate(30deg); + transform-origin: center bottom; + } + + 50% { + transform: rotate(-10deg); + } + + 70% { + transform: rotate(3deg); + } + + to { + opacity: 1; + transform: scale(1); + } +} + +.jackInTheBox { + animation-name: jackInTheBox; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes rollIn { + from { + opacity: 0; + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + + to { + opacity: 1; + transform: none; + } +} + +.rollIn { + animation-name: rollIn; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes rollOut { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } +} + +.rollOut { + animation-name: rollOut; +} + +@keyframes zoomIn { + from { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + + 50% { + opacity: 1; + } +} + +.zoomIn { + animation-name: zoomIn; +} + +@keyframes zoomInDown { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInDown { + animation-name: zoomInDown; +} + +@keyframes zoomInLeft { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInLeft { + animation-name: zoomInLeft; +} + +@keyframes zoomInRight { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInRight { + animation-name: zoomInRight; +} + +@keyframes zoomInUp { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInUp { + animation-name: zoomInUp; +} + +@keyframes zoomOut { + from { + opacity: 1; + } + + 50% { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + + to { + opacity: 0; + } +} + +.zoomOut { + animation-name: zoomOut; +} + +@keyframes zoomOutDown { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + to { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutDown { + animation-name: zoomOutDown; +} + +@keyframes zoomOutLeft { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + } + + to { + opacity: 0; + transform: scale(.1) translate3d(-2000px, 0, 0); + transform-origin: left center; + } +} + +.zoomOutLeft { + animation-name: zoomOutLeft; +} + +@keyframes zoomOutRight { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + } + + to { + opacity: 0; + transform: scale(.1) translate3d(2000px, 0, 0); + transform-origin: right center; + } +} + +.zoomOutRight { + animation-name: zoomOutRight; +} + +@keyframes zoomOutUp { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + to { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutUp { + animation-name: zoomOutUp; +} + +@keyframes slideInDown { + from { + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInDown { + animation-name: slideInDown; +} + +@keyframes slideInLeft { + from { + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInLeft { + animation-name: slideInLeft; +} + +@keyframes slideInRight { + from { + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInRight { + animation-name: slideInRight; +} + +@keyframes slideInUp { + from { + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInUp { + animation-name: slideInUp; +} + +@keyframes slideOutDown { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, 100%, 0); + } +} + +.slideOutDown { + animation-name: slideOutDown; +} + +@keyframes slideOutLeft { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(-100%, 0, 0); + } +} + +.slideOutLeft { + animation-name: slideOutLeft; +} + +@keyframes slideOutRight { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(100%, 0, 0); + } +} + +.slideOutRight { + animation-name: slideOutRight; +} + +@keyframes slideOutUp { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, -100%, 0); + } +} + +.slideOutUp { + animation-name: slideOutUp; +} \ No newline at end of file diff --git a/sass/animations/loaders.scss b/sass/animations/loaders.scss new file mode 100644 index 0000000..03426d5 --- /dev/null +++ b/sass/animations/loaders.scss @@ -0,0 +1,1514 @@ +/** + * Copyright (c) 2016 Connor Atherton + * + * All animations must live in their own file + * in the animations directory and be included + * here. + * + */ +/** + * Styles shared by multiple animations + */ +/** + * Dots + */ +@-webkit-keyframes scale { + 0% { + transform: scale(1); + opacity: 1; } + 45% { + transform: scale(0.1); + opacity: 0.7; } + 80% { + transform: scale(1); + opacity: 1; } } +@keyframes scale { + 0% { + transform: scale(1); + opacity: 1; } + 45% { + transform: scale(0.1); + opacity: 0.7; } + 80% { + transform: scale(1); + opacity: 1; } } + +.ball-pulse > div:nth-child(1) { + animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } + +.ball-pulse > div:nth-child(2) { + animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } + +.ball-pulse > div:nth-child(3) { + animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } + +.ball-pulse > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; } + +@-webkit-keyframes ball-pulse-sync { + 33% { + transform: translateY(10px); } + 66% { + transform: translateY(-10px); } + 100% { + transform: translateY(0); } } + +@keyframes ball-pulse-sync { + 33% { + transform: translateY(10px); } + 66% { + transform: translateY(-10px); } + 100% { + transform: translateY(0); } } + +.ball-pulse-sync > div:nth-child(1) { + animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out; } + +.ball-pulse-sync > div:nth-child(2) { + animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out; } + +.ball-pulse-sync > div:nth-child(3) { + animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; } + +.ball-pulse-sync > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; } + +@-webkit-keyframes ball-scale { + 0% { + transform: scale(0); } + 100% { + transform: scale(1); + opacity: 0; } } + +@keyframes ball-scale { + 0% { + transform: scale(0); } + 100% { + transform: scale(1); + opacity: 0; } } + +.ball-scale > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + height: 60px; + width: 60px; + animation: ball-scale 1s 0s ease-in-out infinite; } + +@keyframes ball-scale { + 0% { + transform: scale(0); } + 100% { + transform: scale(1); + opacity: 0; } } + +.ball-scale > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + height: 60px; + width: 60px; + animation: ball-scale 1s 0s ease-in-out infinite; } + +.ball-scale-random { + width: 37px; + height: 40px; } + .ball-scale-random > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + display: inline-block; + height: 30px; + width: 30px; + animation: ball-scale 1s 0s ease-in-out infinite; } + .ball-scale-random > div:nth-child(1) { + margin-left: -7px; + animation: ball-scale 1s 0.2s ease-in-out infinite; } + .ball-scale-random > div:nth-child(3) { + margin-left: -2px; + margin-top: 9px; + animation: ball-scale 1s 0.5s ease-in-out infinite; } + +@-webkit-keyframes rotate { + 0% { + transform: rotate(0deg); } + 50% { + transform: rotate(180deg); } + 100% { + transform: rotate(360deg); } } + +@keyframes rotate { + 0% { + transform: rotate(0deg); } + 50% { + transform: rotate(180deg); } + 100% { + transform: rotate(360deg); } } + +.ball-rotate { + position: relative; } + .ball-rotate > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: relative; } + .ball-rotate > div:first-child { + animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; } + .ball-rotate > div:before, .ball-rotate > div:after { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + content: ""; + position: absolute; + opacity: 0.8; } + .ball-rotate > div:before { + top: 0px; + left: -28px; } + .ball-rotate > div:after { + top: 0px; + left: 25px; } + +@keyframes rotate { + 0% { + transform: rotate(0deg); } + 50% { + transform: rotate(180deg); } + 100% { + transform: rotate(360deg); } } + +.ball-clip-rotate > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + border: 2px solid #fff; + border-bottom-color: transparent; + height: 26px; + width: 26px; + background: transparent !important; + display: inline-block; + animation: rotate 0.75s 0s linear infinite; } + +@keyframes rotate { + 0% { + transform: rotate(0deg) scale(1); } + 50% { + transform: rotate(180deg) scale(0.6); } + 100% { + transform: rotate(360deg) scale(1); } } + +@keyframes scale { + 30% { + transform: scale(0.3); } + 100% { + transform: scale(1); } } + +.ball-clip-rotate-pulse { + position: relative; + transform: translateY(-15px); } + .ball-clip-rotate-pulse > div { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + top: 0px; + left: 0px; + border-radius: 100%; } + .ball-clip-rotate-pulse > div:first-child { + background: #fff; + height: 16px; + width: 16px; + top: 7px; + left: -7px; + animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } + .ball-clip-rotate-pulse > div:last-child { + position: absolute; + border: 2px solid #fff; + width: 30px; + height: 30px; + left: -16px; + top: -2px; + background: transparent; + border: 2px solid; + border-color: #fff transparent #fff transparent; + animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; + -webkit-animation-duration: 1s; + animation-duration: 1s; } + +@keyframes rotate { + 0% { + transform: rotate(0deg) scale(1); } + 50% { + transform: rotate(180deg) scale(0.6); } + 100% { + transform: rotate(360deg) scale(1); } } + +.ball-clip-rotate-multiple { + position: relative; } + .ball-clip-rotate-multiple > div { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + left: -20px; + top: -20px; + border: 2px solid #fff; + border-bottom-color: transparent; + border-top-color: transparent; + border-radius: 100%; + height: 35px; + width: 35px; + animation: rotate 1s 0s ease-in-out infinite; } + .ball-clip-rotate-multiple > div:last-child { + display: inline-block; + top: -10px; + left: -10px; + width: 15px; + height: 15px; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + border-color: #fff transparent #fff transparent; + -webkit-animation-direction: reverse; + animation-direction: reverse; } + +@-webkit-keyframes ball-scale-ripple { + 0% { + transform: scale(0.1); + opacity: 1; } + 70% { + transform: scale(1); + opacity: 0.7; } + 100% { + opacity: 0.0; } } + +@keyframes ball-scale-ripple { + 0% { + transform: scale(0.1); + opacity: 1; } + 70% { + transform: scale(1); + opacity: 0.7; } + 100% { + opacity: 0.0; } } + +.ball-scale-ripple > div { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + height: 50px; + width: 50px; + border-radius: 100%; + border: 2px solid #fff; + animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); } + +@-webkit-keyframes ball-scale-ripple-multiple { + 0% { + transform: scale(0.1); + opacity: 1; } + 70% { + transform: scale(1); + opacity: 0.7; } + 100% { + opacity: 0.0; } } + +@keyframes ball-scale-ripple-multiple { + 0% { + transform: scale(0.1); + opacity: 1; } + 70% { + transform: scale(1); + opacity: 0.7; } + 100% { + opacity: 0.0; } } + +.ball-scale-ripple-multiple { + position: relative; + transform: translateY(-25px); } + .ball-scale-ripple-multiple > div:nth-child(0) { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + .ball-scale-ripple-multiple > div:nth-child(1) { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; } + .ball-scale-ripple-multiple > div:nth-child(2) { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; } + .ball-scale-ripple-multiple > div:nth-child(3) { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; } + .ball-scale-ripple-multiple > div { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + top: -2px; + left: -26px; + width: 50px; + height: 50px; + border-radius: 100%; + border: 2px solid #fff; + animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); } + +@-webkit-keyframes ball-beat { + 50% { + opacity: 0.2; + transform: scale(0.75); } + 100% { + opacity: 1; + transform: scale(1); } } + +@keyframes ball-beat { + 50% { + opacity: 0.2; + transform: scale(0.75); } + 100% { + opacity: 1; + transform: scale(1); } } + +.ball-beat > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + animation: ball-beat 0.7s 0s infinite linear; } + .ball-beat > div:nth-child(2n-1) { + -webkit-animation-delay: -0.35s !important; + animation-delay: -0.35s !important; } + +@-webkit-keyframes ball-scale-multiple { + 0% { + transform: scale(0); + opacity: 0; } + 5% { + opacity: 1; } + 100% { + transform: scale(1); + opacity: 0; } } + +@keyframes ball-scale-multiple { + 0% { + transform: scale(0); + opacity: 0; } + 5% { + opacity: 1; } + 100% { + transform: scale(1); + opacity: 0; } } + +.ball-scale-multiple { + position: relative; + transform: translateY(-30px); } + .ball-scale-multiple > div:nth-child(2) { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; } + .ball-scale-multiple > div:nth-child(3) { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; } + .ball-scale-multiple > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + left: -30px; + top: 0px; + opacity: 0; + margin: 0; + width: 60px; + height: 60px; + animation: ball-scale-multiple 1s 0s linear infinite; } + +@-webkit-keyframes ball-triangle-path-1 { + 33% { + transform: translate(25px, -50px); } + 66% { + transform: translate(50px, 0px); } + 100% { + transform: translate(0px, 0px); } } + +@keyframes ball-triangle-path-1 { + 33% { + transform: translate(25px, -50px); } + 66% { + transform: translate(50px, 0px); } + 100% { + transform: translate(0px, 0px); } } + +@-webkit-keyframes ball-triangle-path-2 { + 33% { + transform: translate(25px, 50px); } + 66% { + transform: translate(-25px, 50px); } + 100% { + transform: translate(0px, 0px); } } + +@keyframes ball-triangle-path-2 { + 33% { + transform: translate(25px, 50px); } + 66% { + transform: translate(-25px, 50px); } + 100% { + transform: translate(0px, 0px); } } + +@-webkit-keyframes ball-triangle-path-3 { + 33% { + transform: translate(-50px, 0px); } + 66% { + transform: translate(-25px, -50px); } + 100% { + transform: translate(0px, 0px); } } + +@keyframes ball-triangle-path-3 { + 33% { + transform: translate(-50px, 0px); } + 66% { + transform: translate(-25px, -50px); } + 100% { + transform: translate(0px, 0px); } } + +.ball-triangle-path { + position: relative; + transform: translate(-29.994px, -37.50938px); } + .ball-triangle-path > div:nth-child(1) { + -webkit-animation-name: ball-triangle-path-1; + animation-name: ball-triangle-path-1; + -webkit-animation-delay: 0; + animation-delay: 0; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } + .ball-triangle-path > div:nth-child(2) { + -webkit-animation-name: ball-triangle-path-2; + animation-name: ball-triangle-path-2; + -webkit-animation-delay: 0; + animation-delay: 0; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } + .ball-triangle-path > div:nth-child(3) { + -webkit-animation-name: ball-triangle-path-3; + animation-name: ball-triangle-path-3; + -webkit-animation-delay: 0; + animation-delay: 0; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } + .ball-triangle-path > div { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + width: 10px; + height: 10px; + border-radius: 100%; + border: 1px solid #fff; } + .ball-triangle-path > div:nth-of-type(1) { + top: 50px; } + .ball-triangle-path > div:nth-of-type(2) { + left: 25px; } + .ball-triangle-path > div:nth-of-type(3) { + top: 50px; + left: 50px; } + +@-webkit-keyframes ball-pulse-rise-even { + 0% { + transform: scale(1.1); } + 25% { + transform: translateY(-30px); } + 50% { + transform: scale(0.4); } + 75% { + transform: translateY(30px); } + 100% { + transform: translateY(0); + transform: scale(1); } } + +@keyframes ball-pulse-rise-even { + 0% { + transform: scale(1.1); } + 25% { + transform: translateY(-30px); } + 50% { + transform: scale(0.4); } + 75% { + transform: translateY(30px); } + 100% { + transform: translateY(0); + transform: scale(1); } } + +@-webkit-keyframes ball-pulse-rise-odd { + 0% { + transform: scale(0.4); } + 25% { + transform: translateY(30px); } + 50% { + transform: scale(1.1); } + 75% { + transform: translateY(-30px); } + 100% { + transform: translateY(0); + transform: scale(0.75); } } + +@keyframes ball-pulse-rise-odd { + 0% { + transform: scale(0.4); } + 25% { + transform: translateY(30px); } + 50% { + transform: scale(1.1); } + 75% { + transform: translateY(-30px); } + 100% { + transform: translateY(0); + transform: scale(0.75); } } + +.ball-pulse-rise > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6); + animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6); + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-delay: 0; + animation-delay: 0; } + .ball-pulse-rise > div:nth-child(2n) { + -webkit-animation-name: ball-pulse-rise-even; + animation-name: ball-pulse-rise-even; } + .ball-pulse-rise > div:nth-child(2n-1) { + -webkit-animation-name: ball-pulse-rise-odd; + animation-name: ball-pulse-rise-odd; } + +@-webkit-keyframes ball-grid-beat { + 50% { + opacity: 0.7; } + 100% { + opacity: 1; } } + +@keyframes ball-grid-beat { + 50% { + opacity: 0.7; } + 100% { + opacity: 1; } } + +.ball-grid-beat { + width: 57px; } + .ball-grid-beat > div:nth-child(1) { + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + -webkit-animation-duration: 1.45s; + animation-duration: 1.45s; } + .ball-grid-beat > div:nth-child(2) { + -webkit-animation-delay: -0.02s; + animation-delay: -0.02s; + -webkit-animation-duration: 0.97s; + animation-duration: 0.97s; } + .ball-grid-beat > div:nth-child(3) { + -webkit-animation-delay: 0.66s; + animation-delay: 0.66s; + -webkit-animation-duration: 1.23s; + animation-duration: 1.23s; } + .ball-grid-beat > div:nth-child(4) { + -webkit-animation-delay: 0.64s; + animation-delay: 0.64s; + -webkit-animation-duration: 1.24s; + animation-duration: 1.24s; } + .ball-grid-beat > div:nth-child(5) { + -webkit-animation-delay: -0.19s; + animation-delay: -0.19s; + -webkit-animation-duration: 1.13s; + animation-duration: 1.13s; } + .ball-grid-beat > div:nth-child(6) { + -webkit-animation-delay: 0.69s; + animation-delay: 0.69s; + -webkit-animation-duration: 1.42s; + animation-duration: 1.42s; } + .ball-grid-beat > div:nth-child(7) { + -webkit-animation-delay: 0.58s; + animation-delay: 0.58s; + -webkit-animation-duration: 1.14s; + animation-duration: 1.14s; } + .ball-grid-beat > div:nth-child(8) { + -webkit-animation-delay: 0.21s; + animation-delay: 0.21s; + -webkit-animation-duration: 1.17s; + animation-duration: 1.17s; } + .ball-grid-beat > div:nth-child(9) { + -webkit-animation-delay: -0.18s; + animation-delay: -0.18s; + -webkit-animation-duration: 0.65s; + animation-duration: 0.65s; } + .ball-grid-beat > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + float: left; + -webkit-animation-name: ball-grid-beat; + animation-name: ball-grid-beat; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-delay: 0; + animation-delay: 0; } + +@-webkit-keyframes ball-grid-pulse { + 0% { + transform: scale(1); } + 50% { + transform: scale(0.5); + opacity: 0.7; } + 100% { + transform: scale(1); + opacity: 1; } } + +@keyframes ball-grid-pulse { + 0% { + transform: scale(1); } + 50% { + transform: scale(0.5); + opacity: 0.7; } + 100% { + transform: scale(1); + opacity: 1; } } + +.ball-grid-pulse { + width: 57px; } + .ball-grid-pulse > div:nth-child(1) { + -webkit-animation-delay: 0.22s; + animation-delay: 0.22s; + -webkit-animation-duration: 0.9s; + animation-duration: 0.9s; } + .ball-grid-pulse > div:nth-child(2) { + -webkit-animation-delay: 0.64s; + animation-delay: 0.64s; + -webkit-animation-duration: 1s; + animation-duration: 1s; } + .ball-grid-pulse > div:nth-child(3) { + -webkit-animation-delay: -0.15s; + animation-delay: -0.15s; + -webkit-animation-duration: 0.63s; + animation-duration: 0.63s; } + .ball-grid-pulse > div:nth-child(4) { + -webkit-animation-delay: -0.03s; + animation-delay: -0.03s; + -webkit-animation-duration: 1.24s; + animation-duration: 1.24s; } + .ball-grid-pulse > div:nth-child(5) { + -webkit-animation-delay: 0.08s; + animation-delay: 0.08s; + -webkit-animation-duration: 1.37s; + animation-duration: 1.37s; } + .ball-grid-pulse > div:nth-child(6) { + -webkit-animation-delay: 0.43s; + animation-delay: 0.43s; + -webkit-animation-duration: 1.55s; + animation-duration: 1.55s; } + .ball-grid-pulse > div:nth-child(7) { + -webkit-animation-delay: 0.05s; + animation-delay: 0.05s; + -webkit-animation-duration: 0.7s; + animation-duration: 0.7s; } + .ball-grid-pulse > div:nth-child(8) { + -webkit-animation-delay: 0.05s; + animation-delay: 0.05s; + -webkit-animation-duration: 0.97s; + animation-duration: 0.97s; } + .ball-grid-pulse > div:nth-child(9) { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-duration: 0.63s; + animation-duration: 0.63s; } + .ball-grid-pulse > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + float: left; + -webkit-animation-name: ball-grid-pulse; + animation-name: ball-grid-pulse; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-delay: 0; + animation-delay: 0; } + +@-webkit-keyframes ball-spin-fade-loader { + 50% { + opacity: 0.3; + transform: scale(0.4); } + 100% { + opacity: 1; + transform: scale(1); } } + +@keyframes ball-spin-fade-loader { + 50% { + opacity: 0.3; + transform: scale(0.4); } + 100% { + opacity: 1; + transform: scale(1); } } + +.ball-spin-fade-loader { + position: relative; + top: -10px; + left: -10px; } + .ball-spin-fade-loader > div:nth-child(1) { + top: 25px; + left: 0; + animation: ball-spin-fade-loader 1s -0.96s infinite linear; } + .ball-spin-fade-loader > div:nth-child(2) { + top: 17.04545px; + left: 17.04545px; + animation: ball-spin-fade-loader 1s -0.84s infinite linear; } + .ball-spin-fade-loader > div:nth-child(3) { + top: 0; + left: 25px; + animation: ball-spin-fade-loader 1s -0.72s infinite linear; } + .ball-spin-fade-loader > div:nth-child(4) { + top: -17.04545px; + left: 17.04545px; + animation: ball-spin-fade-loader 1s -0.6s infinite linear; } + .ball-spin-fade-loader > div:nth-child(5) { + top: -25px; + left: 0; + animation: ball-spin-fade-loader 1s -0.48s infinite linear; } + .ball-spin-fade-loader > div:nth-child(6) { + top: -17.04545px; + left: -17.04545px; + animation: ball-spin-fade-loader 1s -0.36s infinite linear; } + .ball-spin-fade-loader > div:nth-child(7) { + top: 0; + left: -25px; + animation: ball-spin-fade-loader 1s -0.24s infinite linear; } + .ball-spin-fade-loader > div:nth-child(8) { + top: 17.04545px; + left: -17.04545px; + animation: ball-spin-fade-loader 1s -0.12s infinite linear; } + .ball-spin-fade-loader > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; } + +@-webkit-keyframes ball-spin-loader { + 75% { + opacity: 0.2; } + 100% { + opacity: 1; } } + +@keyframes ball-spin-loader { + 75% { + opacity: 0.2; } + 100% { + opacity: 1; } } + +.ball-spin-loader { + position: relative; } + .ball-spin-loader > span:nth-child(1) { + top: 45px; + left: 0; + animation: ball-spin-loader 2s 0.9s infinite linear; } + .ball-spin-loader > span:nth-child(2) { + top: 30.68182px; + left: 30.68182px; + animation: ball-spin-loader 2s 1.8s infinite linear; } + .ball-spin-loader > span:nth-child(3) { + top: 0; + left: 45px; + animation: ball-spin-loader 2s 2.7s infinite linear; } + .ball-spin-loader > span:nth-child(4) { + top: -30.68182px; + left: 30.68182px; + animation: ball-spin-loader 2s 3.6s infinite linear; } + .ball-spin-loader > span:nth-child(5) { + top: -45px; + left: 0; + animation: ball-spin-loader 2s 4.5s infinite linear; } + .ball-spin-loader > span:nth-child(6) { + top: -30.68182px; + left: -30.68182px; + animation: ball-spin-loader 2s 5.4s infinite linear; } + .ball-spin-loader > span:nth-child(7) { + top: 0; + left: -45px; + animation: ball-spin-loader 2s 6.3s infinite linear; } + .ball-spin-loader > span:nth-child(8) { + top: 30.68182px; + left: -30.68182px; + animation: ball-spin-loader 2s 7.2s infinite linear; } + .ball-spin-loader > div { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + width: 15px; + height: 15px; + border-radius: 100%; + background: green; } + +@-webkit-keyframes ball-zig { + 33% { + transform: translate(-15px, -30px); } + 66% { + transform: translate(15px, -30px); } + 100% { + transform: translate(0, 0); } } + +@keyframes ball-zig { + 33% { + transform: translate(-15px, -30px); } + 66% { + transform: translate(15px, -30px); } + 100% { + transform: translate(0, 0); } } + +@-webkit-keyframes ball-zag { + 33% { + transform: translate(15px, 30px); } + 66% { + transform: translate(-15px, 30px); } + 100% { + transform: translate(0, 0); } } + +@keyframes ball-zag { + 33% { + transform: translate(15px, 30px); } + 66% { + transform: translate(-15px, 30px); } + 100% { + transform: translate(0, 0); } } + +.ball-zig-zag { + position: relative; + transform: translate(-15px, -15px); } + .ball-zig-zag > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + margin-left: 15px; + top: 4px; + left: -7px; } + .ball-zig-zag > div:first-child { + animation: ball-zig 0.7s 0s infinite linear; } + .ball-zig-zag > div:last-child { + animation: ball-zag 0.7s 0s infinite linear; } + +@-webkit-keyframes ball-zig-deflect { + 17% { + transform: translate(-15px, -30px); } + 34% { + transform: translate(15px, -30px); } + 50% { + transform: translate(0, 0); } + 67% { + transform: translate(15px, -30px); } + 84% { + transform: translate(-15px, -30px); } + 100% { + transform: translate(0, 0); } } + +@keyframes ball-zig-deflect { + 17% { + transform: translate(-15px, -30px); } + 34% { + transform: translate(15px, -30px); } + 50% { + transform: translate(0, 0); } + 67% { + transform: translate(15px, -30px); } + 84% { + transform: translate(-15px, -30px); } + 100% { + transform: translate(0, 0); } } + +@-webkit-keyframes ball-zag-deflect { + 17% { + transform: translate(15px, 30px); } + 34% { + transform: translate(-15px, 30px); } + 50% { + transform: translate(0, 0); } + 67% { + transform: translate(-15px, 30px); } + 84% { + transform: translate(15px, 30px); } + 100% { + transform: translate(0, 0); } } + +@keyframes ball-zag-deflect { + 17% { + transform: translate(15px, 30px); } + 34% { + transform: translate(-15px, 30px); } + 50% { + transform: translate(0, 0); } + 67% { + transform: translate(-15px, 30px); } + 84% { + transform: translate(15px, 30px); } + 100% { + transform: translate(0, 0); } } + +.ball-zig-zag-deflect { + position: relative; + transform: translate(-15px, -15px); } + .ball-zig-zag-deflect > div { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + margin-left: 15px; + top: 4px; + left: -7px; } + .ball-zig-zag-deflect > div:first-child { + animation: ball-zig-deflect 1.5s 0s infinite linear; } + .ball-zig-zag-deflect > div:last-child { + animation: ball-zag-deflect 1.5s 0s infinite linear; } + +/** + * Lines + */ +@-webkit-keyframes line-scale { + 0% { + transform: scaley(1); } + 50% { + transform: scaley(0.4); } + 100% { + transform: scaley(1); } } +@keyframes line-scale { + 0% { + transform: scaley(1); } + 50% { + transform: scaley(0.4); } + 100% { + transform: scaley(1); } } + +.line-scale > div:nth-child(1) { + animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } + +.line-scale > div:nth-child(2) { + animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } + +.line-scale > div:nth-child(3) { + animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } + +.line-scale > div:nth-child(4) { + animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } + +.line-scale > div:nth-child(5) { + animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } + +.line-scale > div { + background-color: #fff; + width: 4px; + height: 35px; + border-radius: 2px; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; } + +@-webkit-keyframes line-scale-party { + 0% { + transform: scale(1); } + 50% { + transform: scale(0.5); } + 100% { + transform: scale(1); } } + +@keyframes line-scale-party { + 0% { + transform: scale(1); } + 50% { + transform: scale(0.5); } + 100% { + transform: scale(1); } } + +.line-scale-party > div:nth-child(1) { + -webkit-animation-delay: 0.48s; + animation-delay: 0.48s; + -webkit-animation-duration: 0.54s; + animation-duration: 0.54s; } + +.line-scale-party > div:nth-child(2) { + -webkit-animation-delay: -0.15s; + animation-delay: -0.15s; + -webkit-animation-duration: 1.15s; + animation-duration: 1.15s; } + +.line-scale-party > div:nth-child(3) { + -webkit-animation-delay: 0.04s; + animation-delay: 0.04s; + -webkit-animation-duration: 0.77s; + animation-duration: 0.77s; } + +.line-scale-party > div:nth-child(4) { + -webkit-animation-delay: -0.12s; + animation-delay: -0.12s; + -webkit-animation-duration: 0.61s; + animation-duration: 0.61s; } + +.line-scale-party > div { + background-color: #fff; + width: 4px; + height: 35px; + border-radius: 2px; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + -webkit-animation-name: line-scale-party; + animation-name: line-scale-party; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-delay: 0; + animation-delay: 0; } + +@-webkit-keyframes line-scale-pulse-out { + 0% { + transform: scaley(1); } + 50% { + transform: scaley(0.4); } + 100% { + transform: scaley(1); } } + +@keyframes line-scale-pulse-out { + 0% { + transform: scaley(1); } + 50% { + transform: scaley(0.4); } + 100% { + transform: scaley(1); } } + +.line-scale-pulse-out > div { + background-color: #fff; + width: 4px; + height: 35px; + border-radius: 2px; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); } + .line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) { + -webkit-animation-delay: -0.4s !important; + animation-delay: -0.4s !important; } + .line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) { + -webkit-animation-delay: -0.2s !important; + animation-delay: -0.2s !important; } + +@-webkit-keyframes line-scale-pulse-out-rapid { + 0% { + transform: scaley(1); } + 80% { + transform: scaley(0.3); } + 90% { + transform: scaley(1); } } + +@keyframes line-scale-pulse-out-rapid { + 0% { + transform: scaley(1); } + 80% { + transform: scaley(0.3); } + 90% { + transform: scaley(1); } } + +.line-scale-pulse-out-rapid > div { + background-color: #fff; + width: 4px; + height: 35px; + border-radius: 2px; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + vertical-align: middle; + animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); } + .line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) { + -webkit-animation-delay: -0.25s !important; + animation-delay: -0.25s !important; } + .line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) { + -webkit-animation-delay: 0s !important; + animation-delay: 0s !important; } + +@-webkit-keyframes line-spin-fade-loader { + 50% { + opacity: 0.3; } + 100% { + opacity: 1; } } + +@keyframes line-spin-fade-loader { + 50% { + opacity: 0.3; } + 100% { + opacity: 1; } } + +.line-spin-fade-loader { + position: relative; + top: -10px; + left: -4px; } + .line-spin-fade-loader > div:nth-child(1) { + top: 20px; + left: 0; + animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out; } + .line-spin-fade-loader > div:nth-child(2) { + top: 13.63636px; + left: 13.63636px; + transform: rotate(-45deg); + animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out; } + .line-spin-fade-loader > div:nth-child(3) { + top: 0; + left: 20px; + transform: rotate(90deg); + animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out; } + .line-spin-fade-loader > div:nth-child(4) { + top: -13.63636px; + left: 13.63636px; + transform: rotate(45deg); + animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out; } + .line-spin-fade-loader > div:nth-child(5) { + top: -20px; + left: 0; + animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out; } + .line-spin-fade-loader > div:nth-child(6) { + top: -13.63636px; + left: -13.63636px; + transform: rotate(-45deg); + animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out; } + .line-spin-fade-loader > div:nth-child(7) { + top: 0; + left: -20px; + transform: rotate(90deg); + animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out; } + .line-spin-fade-loader > div:nth-child(8) { + top: 13.63636px; + left: -13.63636px; + transform: rotate(45deg); + animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out; } + .line-spin-fade-loader > div { + background-color: #fff; + width: 4px; + height: 35px; + border-radius: 2px; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + position: absolute; + width: 5px; + height: 15px; } + +/** + * Misc + */ +@-webkit-keyframes triangle-skew-spin { + 25% { + transform: perspective(100px) rotateX(180deg) rotateY(0); } + 50% { + transform: perspective(100px) rotateX(180deg) rotateY(180deg); } + 75% { + transform: perspective(100px) rotateX(0) rotateY(180deg); } + 100% { + transform: perspective(100px) rotateX(0) rotateY(0); } } +@keyframes triangle-skew-spin { + 25% { + transform: perspective(100px) rotateX(180deg) rotateY(0); } + 50% { + transform: perspective(100px) rotateX(180deg) rotateY(180deg); } + 75% { + transform: perspective(100px) rotateX(0) rotateY(180deg); } + 100% { + transform: perspective(100px) rotateX(0) rotateY(0); } } + +.triangle-skew-spin > div { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + width: 0; + height: 0; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-bottom: 20px solid #fff; + animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } + +@-webkit-keyframes square-spin { + 25% { + transform: perspective(100px) rotateX(180deg) rotateY(0); } + 50% { + transform: perspective(100px) rotateX(180deg) rotateY(180deg); } + 75% { + transform: perspective(100px) rotateX(0) rotateY(180deg); } + 100% { + transform: perspective(100px) rotateX(0) rotateY(0); } } + +@keyframes square-spin { + 25% { + transform: perspective(100px) rotateX(180deg) rotateY(0); } + 50% { + transform: perspective(100px) rotateX(180deg) rotateY(180deg); } + 75% { + transform: perspective(100px) rotateX(0) rotateY(180deg); } + 100% { + transform: perspective(100px) rotateX(0) rotateY(0); } } + +.square-spin > div { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + width: 50px; + height: 50px; + background: #fff; + animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } + +@-webkit-keyframes rotate_pacman_half_up { + 0% { + transform: rotate(270deg); } + 50% { + transform: rotate(360deg); } + 100% { + transform: rotate(270deg); } } + +@keyframes rotate_pacman_half_up { + 0% { + transform: rotate(270deg); } + 50% { + transform: rotate(360deg); } + 100% { + transform: rotate(270deg); } } + +@-webkit-keyframes rotate_pacman_half_down { + 0% { + transform: rotate(90deg); } + 50% { + transform: rotate(0deg); } + 100% { + transform: rotate(90deg); } } + +@keyframes rotate_pacman_half_down { + 0% { + transform: rotate(90deg); } + 50% { + transform: rotate(0deg); } + 100% { + transform: rotate(90deg); } } + +@-webkit-keyframes pacman-balls { + 75% { + opacity: 0.7; } + 100% { + transform: translate(-100px, -6.25px); } } + +@keyframes pacman-balls { + 75% { + opacity: 0.7; } + 100% { + transform: translate(-100px, -6.25px); } } + +.pacman { + position: relative; } + .pacman > div:nth-child(2) { + animation: pacman-balls 1s -0.99s infinite linear; } + .pacman > div:nth-child(3) { + animation: pacman-balls 1s -0.66s infinite linear; } + .pacman > div:nth-child(4) { + animation: pacman-balls 1s -0.33s infinite linear; } + .pacman > div:nth-child(5) { + animation: pacman-balls 1s 0s infinite linear; } + .pacman > div:first-of-type { + width: 0px; + height: 0px; + border-right: 25px solid transparent; + border-top: 25px solid #fff; + border-left: 25px solid #fff; + border-bottom: 25px solid #fff; + border-radius: 25px; + animation: rotate_pacman_half_up 0.5s 0s infinite; + position: relative; + left: 0; } + .pacman > div:nth-child(2) { + width: 0px; + height: 0px; + border-right: 25px solid transparent; + border-top: 25px solid #fff; + border-left: 25px solid #fff; + border-bottom: 25px solid #fff; + border-radius: 25px; + animation: rotate_pacman_half_down 0.5s 0s infinite; + margin-top: -50px; + position: relative; + left: 0; } + .pacman > div:nth-child(3), + .pacman > div:nth-child(4), + .pacman > div:nth-child(5), + .pacman > div:nth-child(6) { + background-color: #fff; + width: 15px; + height: 15px; + border-radius: 100%; + margin: 2px; + width: 10px; + height: 10px; + position: absolute; + transform: translate(0, -6.25px); + top: 25px; + left: 100px; } + + .pacman.-color-gray { + & > div:first-of-type { + border-top: 25px solid color(gray, light); + border-left: 25px solid color(gray, light); + border-bottom: 25px solid color(gray, light); + } + + & > div:nth-child(2) { + border-top: 25px solid color(gray, light); + border-left: 25px solid color(gray, light); + border-bottom: 25px solid color(gray, light); + } + + & > div:nth-child(3), + & > div:nth-child(4), + & > div:nth-child(5), + & > div:nth-child(6) { + background-color: color(gray, light); + } + } + +@-webkit-keyframes cube-transition { + 25% { + transform: translateX(50px) scale(0.5) rotate(-90deg); } + 50% { + transform: translate(50px, 50px) rotate(-180deg); } + 75% { + transform: translateY(50px) scale(0.5) rotate(-270deg); } + 100% { + transform: rotate(-360deg); } } + +@keyframes cube-transition { + 25% { + transform: translateX(50px) scale(0.5) rotate(-90deg); } + 50% { + transform: translate(50px, 50px) rotate(-180deg); } + 75% { + transform: translateY(50px) scale(0.5) rotate(-270deg); } + 100% { + transform: rotate(-360deg); } } + +.cube-transition { + position: relative; + transform: translate(-25px, -25px); } + .cube-transition > div { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + width: 10px; + height: 10px; + position: absolute; + top: -5px; + left: -5px; + background-color: #fff; + animation: cube-transition 1.6s 0s infinite ease-in-out; } + .cube-transition > div:last-child { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + +@-webkit-keyframes spin-rotate { + 0% { + transform: rotate(0deg); } + 50% { + transform: rotate(180deg); } + 100% { + transform: rotate(360deg); } } + +@keyframes spin-rotate { + 0% { + transform: rotate(0deg); } + 50% { + transform: rotate(180deg); } + 100% { + transform: rotate(360deg); } } + +.semi-circle-spin { + position: relative; + width: 35px; + height: 35px; + overflow: hidden; } + .semi-circle-spin > div { + position: absolute; + border-width: 0px; + border-radius: 100%; + animation: spin-rotate 0.6s 0s infinite linear; + background-image: linear-gradient(transparent 0%, transparent 70%, #fff 30%, #fff 100%); + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/sass/components/alerts.scss b/sass/components/alerts.scss new file mode 100644 index 0000000..398a886 --- /dev/null +++ b/sass/components/alerts.scss @@ -0,0 +1,115 @@ +$alert--opacity: .6; + +.alert { + border-radius: ui(border, radius); + display: flex; + + &-icon { + @extend .-padding_2; + + border-top-left-radius: ui(border, radius); + border-bottom-left-radius: ui(border, radius); + } + + &-content { + @extend .-padding_2; + + flex: 1; + border: ui(border, size) solid transparent; + border-left: none; + border-top-right-radius: ui(border, radius); + border-bottom-right-radius: ui(border, radius); + + .title { + @extend .-line-reset; + @extend .-weight-regular; + @extend .-size-normal; + @extend .-variation-uppercase; + } + + .message { + @extend .-margin-top_3; + @extend .-line-reset_3; + } + } + + &.-variation-popout { + .alert { + &-content { border: none; } + } + } + + &.-color { + &-blue { + .alert { + &-icon { + background-color: rgba(color(blue), $alert--opacity); + + svg, .gd { + color: color(blue); + fill: color(blue); + } + } + + &-content { border-color: rgba(color(blue), $alert--opacity); } + + &.-variation-popout { + .alert { + &-content { + background-color: rgba(color(blue), ($alert--opacity / 2)); + } + } + } + } + } + + &-orange { + .alert { + &-icon { + background-color: rgba(color(orange), $alert--opacity); + + svg, .gd { + color: color(orange); + fill: color(orange); + } + } + + &-content { border-color: rgba(color(orange), $alert--opacity); } + } + + &.-variation-popout { + .alert { + &-content { + background-color: rgba(color(orange), .1); + } + } + } + } + + &-gray { + .alert { + &-icon { + background-color: rgba(color(gray), $alert--opacity); + + svg, .gd { + color: color(gray); + fill: color(gray); + } + } + + &-content { border-color: rgba(color(gray), $alert--opacity); } + } + + &.-variation-popout { + .alert { + &-content { + background-color: rgba(color(gray), .1); + } + } + } + } + + &-red { } + &-green { } + } +} \ No newline at end of file diff --git a/sass/components/badges.scss b/sass/components/badges.scss new file mode 100644 index 0000000..3cd92b8 --- /dev/null +++ b/sass/components/badges.scss @@ -0,0 +1,61 @@ +.badge, +.badge-icon { + align-items: center; + border-radius: 250px; + display: flex; +} + +.badge { + @extend .badge.-size-medium; + + align-self: flex-start; + + &-icon { + @extend .-margin-right_4; + + justify-content: center; + } + + &-text { line-height: 1; } + + &.-color { + @each $color in $colors { + &-#{ $color } { + background-image: linear-gradient(140deg, color($color, light) 0%, color($color) 100%); + color: #fff; + + &.-variation-solid { + background-color: color($color); + background-image: none; + } + + &.-variation-empty { color: color($color); } + + // To be used with .-variation-solid otherwise it won't work + // + &_lighter { background-color: color($color, lighter); } + &_light { background-color: color($color, light); } + &_dark { background-color: color($color, dark); } + &_darker { background-color: color($color, darker); } + + .badge-icon { background-color: color($color); } + } + } + } + + &.-size { + &-medium { + .badge-icon { + height: 20px; + width: 20px; + } + + @extend .-padding-y_6; + @extend .-padding-left_6; + @extend .-padding-right_3; + + font-size: font-size(medium); + font-weight: font-weight(regular); + } + } +} \ No newline at end of file diff --git a/sass/components/buttons.scss b/sass/components/buttons.scss new file mode 100644 index 0000000..ad773da --- /dev/null +++ b/sass/components/buttons.scss @@ -0,0 +1,167 @@ +$button-sizes: ( + tiny: ((ui(spacing) / 4), .4), + small: ((ui(spacing) * 37.5 / 100), .5), + medium: ((ui(spacing) / 2), .6), + large: ((ui(spacing) * 63 / 100), .7), + big: ((ui(spacing) * 75 / 100), .8), + huge: ((ui(spacing) * 88 / 100), .9), + massive: (ui(spacing), 1) +); + +// olive: color(olive), +// violet: color(violet), +// pink: color(pink), +// brown: color(brown), + // teal: color(teal), +$button-colors: ('white', 'red', 'orange', 'yellow', 'teal', 'green', 'blue', 'purple', 'gray', 'black', 'psn', 'xbox', 'steam'); + +.btn { + align-items: center; + appearance: none; + background-color: transparent; + border: none; + cursor: pointer; + display: flex; + justify-content: center; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + @extend .btn.-variation-round; + @extend .btn.-color-purple; + @extend .btn.-size-large; + + @extend .-line-reset !optional; + @extend .-variation-reset !optional; + + &.-variation { + &-rounded { border-radius: ui(border, radius); } + &-round { border-radius: 250px; } + &-square { border-radius: 0; } + + &-solid { background-image: none !important; } + &-empty { + background-image: none !important; + background-color: transparent; + } + + &-outlined { @extend .btn.-variation-empty; } + &-diet { padding: 0 !important; } + } + + &.-icon { + @extend .btn.-icon-left; + + &-left { i.fa, i.gd { margin-right: ui(spacing) / 5; } } + &-right { + flex-direction: row-reverse; + + i.fa, i.gd { margin-left: ui(spacing) / 5; } + } + + &-only { + position: relative; + + i.fa, i.gd { + position: absolute; + margin: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + &-big { + i.fa, i.gd { font-size: 1.8em; } + } + + i.fa, i.gd { line-height: 0;} + } + + &.-state { + &-active { } + &-disabled, + &[disabled='disabled'], + &[disabled='true'] { + pointer-events: none; + + @extend .btn.-color-gray; + } + &-loading { } + } + + &.-color { + @each $color in $button-colors { + &-#{ $color } { + color: #fff; + + &.-variation { + &-solid { background-color: color($color); } + + &-outlined { + box-shadow: inset 0 0 0 1px color($color); + color: color($color) !important; + } + + &-empty { color: color($color); } + } + + background-image: linear-gradient(140deg, color($color, light) 0%, color($color) 100%); + + &:hover { background-image: linear-gradient(140deg, color($color, light) 0%, rgba(color($color), .8) 100%); } + &:active { background-image: linear-gradient(140deg, color($color) 0%, color($color) 100%); } + + &_lighter { background-color: color($color, lighter) !important; } + &_light { background-color: color($color, light) !important; } + &_dark { background-color: color($color, dark) !important; } + &_darker { background-color: color($color, darker) !important; } + + // } @else { + // @if $text { + // color: color($color); + // } + + // &_lighter { color: color($color, lighter); } + // &_light { color: color($color, light); } + // &_dark { color: color($color, dark); } + // &_darker { color: color($color, darker); } + // } + } + } + } + + &.-size { + @each $size, $attributes in $button-sizes { + $padding: nth($attributes, 1); + $font-size: nth($attributes, 2); + + &-#{ $size } { + font-size: #{ $font-size }em; + font-weight: font-weight(regular); + padding: $padding ($padding * 1.25); + + &.-icon { + &-only { padding: $padding; } + } + + &.-variation { + &-rounded { border-radius: #{ $padding * 1.5 / ui(border, radius) }px; } + } + } + } + } + + &-group { + .btn { + &:first-child { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + + &:last-child { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + } + } + } +} \ No newline at end of file diff --git a/sass/components/cards.scss b/sass/components/cards.scss new file mode 100644 index 0000000..7700f73 --- /dev/null +++ b/sass/components/cards.scss @@ -0,0 +1,67 @@ +.card { + &.-purpose { + &-informational { + border-radius: ui(border, radius); + color: #fff; + position: relative; + + .btn { + position: absolute; + top: 0; + right: 0; + box-shadow: 0 0 0 ui(border, radius) color(gray, darker); + } + + .card { + &-header, + &-body, + &-footer { background-color: transparent; } + } + } + + &-attraction { + border-radius: ui(border, radius); + color: #fff; + position: relative; + + .card { + &-header, + &-body, + &-footer { background-color: transparent; } + } + } + } + + &.-variation { + &-rounded { border-radius: ui(border, radius); } + &-square { border-radius: 0; } + } + + &.-color { + @each $color in $colors { + &-#{ $color } { + &.-purpose-attraction { background-image: linear-gradient(-140deg, color($color, light) 0%, color($color) 100%); } + } + } + } + + &-header { + background-color: color(gray, light); + + &.-variation-transparent { + background-color: transparent; + } + } + + &-body { + background-color: #fff; + + &.-variation { + &-rounded { border-radius: ui(border, radius); } + } + } + + &-footer { + background-color: color(gray, light) + } +} \ No newline at end of file diff --git a/sass/components/draggable.scss b/sass/components/draggable.scss new file mode 100644 index 0000000..121ce8b --- /dev/null +++ b/sass/components/draggable.scss @@ -0,0 +1,27 @@ +body.draggable--is-dragging { + [data-dropzone] { + border: ui(border, size) dotted color(gray, dark); + border-radius: ui(border, radius); + } +} + +[data-draggable-item] { user-select: none; } + +[data-droppable-item] { + &.draggable--over { + position: relative; + + &::before { + content: ''; + position: absolute; + width: 10px; + height: 10px; + border-radius: 250px; + left: -5px; + background-color: color(green); + box-shadow: 0 0 0 3px #F8F8FB; + top: 50%; + transform: translate(0, -50%); + } + } +} \ No newline at end of file diff --git a/sass/components/forms.scss b/sass/components/forms.scss new file mode 100644 index 0000000..0fc1de6 --- /dev/null +++ b/sass/components/forms.scss @@ -0,0 +1,317 @@ +.form { + select, + textarea { + appearance: none; + -webkit-appearance: none; + } + + textarea { + resize: none; + height: 100%; + } + + label { + &:hover { cursor: pointer; } + } + + &-control { + @extend .-padding_2; + + box-shadow: inset 0 0 0 ui(border, size) color(gray); + border: none; + border-radius: ui(border, radius); + outline: none; + width: 100%; + font-size: font-size(medium); + background: #fff; + color: color(gray, dark); + appearance: none; + -webkit-appearance: none; + + &:hover { box-shadow: inset 0 0 0 ui(border, size) color(gray, dark); } + + &:active, + &:focus { + color: color(black); + box-shadow: inset 0 0 0 ui(border, size) color(blue); + } + + &::placeholder { + color: color(gray, dark); + font-weight: font-weight(thin); + font-style: italic; + } + + &[disabled='disabled'] { + background-color: color(gray, light); + box-shadow: none; + } + + &[type='date'] { padding: 13.5px; } + + &.-no { + &-border { box-shadow: none; } + } + } + + &-group { + display: flex; + flex-direction: column; + + &-chained { + flex-direction: row; + } + + &-nested { + background-color: #fff; + box-shadow: inset 0 0 0 ui(border, size) color(gray); + border-radius: ui(border, radius); + display: flex; + flex-direction: row; + align-items: center; + + .input { + flex: 1; + + &.string, + &.email, + &.password { margin-top: 0; } + } + + button { } + + .form { + + &-control { + background-color: transparent; + box-shadow: none; + } + + .btn { + margin-right: ui(spacing) / 2; + display: flex; + align-self: center; + } + } + } + + @include mq($from: 'sm') { + + &:not(.form-group-nested) { + .input:first-child { margin-right: 3px; } + } + } + } + + .file { + &.dropzone { + @extend .-padding_2; + + border: ui(border, size) dotted color(gray); + background-color: color(gray, light); + border-radius: ui(border, radius); + color: color(black); + } + } + + .radio { + input { display: none; } + + &:not(.checked) { + label { + @extend .-color-gray; + } + } + + // z-index: 0; + // vertical-align: middle; + // display: flex; + + // $radio-size: 5px; + + // input { + // &[type="checkbox"], + // &[type="radio"] { + // position: absolute; + // opacity: 0; + // z-index: -1; + + // &:checked { + // + label { + // padding-left: $radio-size * 2; + // padding-right: $radio-size * 2; + // color: color(black); + + // &::before { + // top: 0; + // width: 100%; + // height: 100%; + // background-color: color(gray, light); + // } + // } + // } + // } + // } + + // label { + // position: relative; + // display: inline-block; + // cursor: pointer; + // padding-left: (ui(spacing) / 2) + ui(spacing) / 5; + // font-size: font-size(small); + + // &::before { + // content: " "; + // position: absolute; + // top: $radio-size; + // left: 0; + // display: block; + // width: ui(spacing) / 2; + // height: ui(spacing) / 2; + // border: ui(border, size) solid color(gray); + // z-index: -1; + // } + // } + + // label, + // input[type="radio"]:checked + label, + // input[type="checkbox"]:checked + label { + // padding-top: $radio-size; + // padding-bottom: $radio-size; + // } + } + + // input[type="radio"] + label::before { + // border-radius: 250px; + // } + + // label, + // label::before { + // transition: .25s all ease; + // } + + // Base Colors + $shade-10: color(indigo) !default; + $shade-1: color(indigo, light) !default; + $shade-0: color(indigo, lighter) !default; + $teal: color(indigo) !default; + + // Range Slider + + $range-handle-color: $shade-10 !default; + $range-handle-color-hover: $teal !default; + $range-handle-size: ui(spacing) - 1px !default; + + $range-track-color: $shade-1 !default; + $range-track-height: ui(spacing) / 3 !default; + + $range-label-color: $shade-10 !default; + + $range-border-radius: ui(border, size); + + .range-slider { + display: flex; + align-items: center; + width: 100%; + height: 100%; + position: relative; + } + + .range-slider__range { + appearance: none; + width: 100%; + height: $range-track-height; + border-radius: ui(border, radius); + background: $range-track-color; + border: $range-border-radius solid #fff; + outline: none; + padding: 0; + margin: 0; + z-index: 10; + position: relative; + + &::-webkit-slider-runnable-track { + margin-left: -(ui(spacing) / 4); + margin-right: -(ui(spacing) / 4); + } + + &::-webkit-slider-thumb { + appearance: none; + border: $range-border-radius solid #fff; + border-left: none; + width: $range-handle-size; + height: $range-handle-size; + border-radius: 250px; + background: $range-handle-color; + cursor: pointer; + transition: background .15s ease-in-out; + + &:hover, &:active { + background: $range-handle-color-hover; + width: $range-handle-size * 1.5; + height: $range-handle-size * 1.5; + } + } + + &:active::-webkit-slider-thumb { background: $range-handle-color-hover; } + } + + .range-slider__value { + display: inline-flex; + color: $shade-0; + border-radius: ui(border, radius); + background: $range-label-color; + margin-left: -(ui(spacing) / 4); + padding-left: ui(spacing) / 2 + (ui(spacing) / 4); + + @extend .-padding-y_4; + @extend .-padding-right_2; + } + + .rating { + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + margin: 0 (-(ui(spacing) / 6)); + + input { display: none; } + + label { + cursor: pointer; + font-size: 0; + display: flex; + padding: 0 (ui(spacing) / 6); + color: color(gray, dark); + + &:nth-child(4n+1) { margin-right: -23px; } + + &::before { + font-size: 25px; + font-family: FontAwesome; + content: "\f005"; + } + + &[for='pulse_reaction_rating_05'], + &[for='pulse_reaction_rating_15'], + &[for='pulse_reaction_rating_25'], + &[for='pulse_reaction_rating_35'], + &[for='pulse_reaction_rating_45'], + &[for='pulse_reaction_rating_55'], + &[for='pulse_reaction_rating_65'], + &[for='pulse_reaction_rating_75'], + &[for='pulse_reaction_rating_85'], + &[for='pulse_reaction_rating_95'] { + &::before { content: "\f089"; } + } + } + + & > input:checked ~ label, + &:not(:checked) > label:hover, + &:not(:checked) > label:hover ~ label { color: color(yellow, light); } + + & > input:checked + label:hover, + & > input:checked ~ label:hover, + & > label:hover ~ input:checked ~ label, + & > input:checked ~ label:hover ~ label { color: color(yellow); } + } +} \ No newline at end of file diff --git a/sass/components/gallery.scss b/sass/components/gallery.scss new file mode 100644 index 0000000..739f14f --- /dev/null +++ b/sass/components/gallery.scss @@ -0,0 +1,24 @@ +.gallery { + display: grid; + grid-gap: 1px; + grid-template-columns: 2fr 1fr 1fr 1fr 1fr; + + .gallery-item { + max-height: 125px; + + &--showcase { + max-height: 250px; + grid-column: 1; + grid-row: 1 / 3; + + img { object-fit: cover; } + } + + img { object-fit: cover; } + + &--hidden { + visibility: hidden; + display: none; + } + } +} \ No newline at end of file diff --git a/sass/components/lists.scss b/sass/components/lists.scss new file mode 100644 index 0000000..9354e68 --- /dev/null +++ b/sass/components/lists.scss @@ -0,0 +1,38 @@ +ul { + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + + &.-style { + &-menu { + @extend .-style-menu.horizontal; + + &.horizontal { flex-direction: row; } + &.vertical { flex-direction: column; } + } + + &-list { + flex-direction: column; + + // @extend .-margin-y_2; + // @extend .-padding-left_2; + } + } + + &.-variation { + &-circle { list-style-type: circle; } + &-disc { list-style-type: disc; } + &-square { list-style-type: square; } + &-decimal { list-style-type: decimal; } + &-decimal-leading-zero { list-style-type: decimal-leading-zero; } + &-lower-roman { list-style-type: lower-roman; } + &-upper-roman { list-style-type: upper-roman; } + &-lower-greek { list-style-type: lower-greek; } + &-lower-latin { list-style-type: lower-latin; } + &-upper-latin { list-style-type: upper-latin; } + &-armenian { list-style-type: armenian; } + &-georgian { list-style-type: georgian; } + &-lower-alpha { list-style-type: lower-alpha; } + } +} \ No newline at end of file diff --git a/sass/components/modals.scss b/sass/components/modals.scss new file mode 100644 index 0000000..3a90a7a --- /dev/null +++ b/sass/components/modals.scss @@ -0,0 +1,257 @@ +/* ----------------------------------------------------------- */ +/* == tingle v0.12.0 */ +/* ----------------------------------------------------------- */ + +.tingle-modal * { + box-sizing: border-box; +} + +.tingle-modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1000; + display: flex; + visibility: hidden; + flex-direction: column; + align-items: center; + overflow: hidden; + background: rgba(color(gray, lighter), .9); + opacity: 0; + cursor: pointer; + transition: transform .2s ease; + + & + .tingle-modal { z-index: 900 !important; } +} + +/* confirm and alerts +-------------------------------------------------------------- */ + +.tingle-modal--confirm .tingle-modal-box { + text-align: center; +} + +/* modal +-------------------------------------------------------------- */ + +.tingle-modal--noOverlayClose { + cursor: default; +} + +.tingle-modal--noClose .tingle-modal__close { + display: none; +} + +.tingle-modal__close { + position: fixed; + top: 10px; + right: 28px; + z-index: 1000; + padding: 0; + width: 5rem; + height: 5rem; + border: none; + background-color: transparent; + color: color(gray, dark); + font-size: 6rem; + font-family: monospace; + line-height: 1; + cursor: pointer; + transition: color .3s ease; +} + +.tingle-modal__closeLabel { + display: none; +} + +.tingle-modal__close:hover { + color: color(black); +} + +.tingle-modal-box { + position: relative; + flex-shrink: 0; + margin-top: auto; + margin-bottom: auto; + // width: 60%; + border-radius: 4px; + // background: #fff; + opacity: 1; + cursor: auto; + transition: transform .3s cubic-bezier(.175, .885, .32, 1.275); + transform: scale(.8); +} + +.tingle-modal-box__content { + // padding: 3rem 3rem; +} + + +.tingle-modal-box__footer { + padding: 1.5rem 2rem; + width: auto; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + background-color: #f5f5f5; + cursor: auto; +} + +.tingle-modal-box__footer::after { + display: table; + clear: both; + content: ""; +} + +.tingle-modal-box__footer--sticky { + position: fixed; + bottom: -200px; /* TODO : find a better way */ + z-index: 10001; + opacity: 1; + transition: bottom .3s ease-in-out .3s; +} + +/* state +-------------------------------------------------------------- */ + +.tingle-enabled { + overflow: hidden; + height: 100%; +} + +.tingle-modal--visible .tingle-modal-box__footer { + bottom: 0; +} + +.tingle-enabled .tingle-content-wrapper { + filter: blur(15px); +} + +.tingle-modal--visible { + visibility: visible; + opacity: 1; +} + +.tingle-modal--visible .tingle-modal-box { + transform: scale(1); +} + +.tingle-modal--overflow { + overflow-y: scroll; + padding-top: 8vh; +} + +/* btn +-------------------------------------------------------------- */ + +.tingle-btn { + display: inline-block; + margin: 0 .5rem; + padding: 1rem 2rem; + border: none; + background-color: grey; + box-shadow: none; + color: #fff; + vertical-align: middle; + text-decoration: none; + font-size: inherit; + font-family: inherit; + line-height: normal; + cursor: pointer; + transition: background-color .4s ease; +} + +.tingle-btn--primary { + background-color: #3498db; +} + +.tingle-btn--danger { + background-color: #e74c3c; +} + +.tingle-btn--default { + background-color: #34495e; +} + +.tingle-btn--pull-left { + float: left; +} + +.tingle-btn--pull-right { + float: right; +} + +/* responsive +-------------------------------------------------------------- */ + +@media (max-width : 540px) { + .tingle-modal { + top: 0px; + display: block; + padding-top: 60px; + width: 100%; + } + + .tingle-modal-box { + width: auto; + border-radius: 0; + } + + .tingle-modal-box__content { + overflow-y: scroll; + } + + .tingle-modal--noClose { + top: 0; + } + + .tingle-modal--noOverlayClose { + padding-top: 0; + } + + .tingle-modal-box__footer .tingle-btn { + display: block; + float: none; + margin-bottom: 1rem; + width: 100%; + } + + .tingle-modal__close { + top: 0; + right: 0; + left: 0; + display: block; + width: 100%; + height: 60px; + border: none; + background-color: #2c3e50; + box-shadow: none; + color: #fff; + line-height: 55px; + } + + .tingle-modal__closeLabel { + display: inline-block; + vertical-align: middle; + font-size: 1.5rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + } + + .tingle-modal__closeIcon { + display: inline-block; + margin-right: .5rem; + vertical-align: middle; + font-size: 4rem; + } +} + +.modal-header { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.modal-body { + border-top-left-radius: 0; + border-top-right-radius: 0; +} \ No newline at end of file diff --git a/sass/components/pagination.scss b/sass/components/pagination.scss new file mode 100644 index 0000000..ab759e0 --- /dev/null +++ b/sass/components/pagination.scss @@ -0,0 +1,69 @@ +.pagination { + &-info { color: color(gray, dark); } + + display: flex; + + span { + display: flex; + line-height: .5; + } + + a, + span.current, + span.gap { @extend .-padding_3; } + + a { + text-decoration: none; + display: flex; + flex-direction: column; + justify-content: center; + color: color(black); + + &::after { + display: block; + content: attr(title); + height: 0; + visibility: hidden; + } + + &:hover, + &::after { font-weight: font-weight(bold); } + } + + .page { + &.gap, + &.current { font-weight: font-weight(medium); } + + &.gap { + align-self: center; + margin-top: -8px; + } + + &.current { + border: ui(border, size) solid color(gray, dark); + color: color(gray, dark); + border-radius: 250px; + margin-bottom: -1px; + display: flex; + align-items: center; + } + } + + .next, + .prev { + a { + font-size: font-size(huge); + padding-top: 5px; + } + } + + .first, + .last { + a { + font-size: font-size(giant); + padding-top: 4px; + } + } + + .last { margin-right: -10px; } +} diff --git a/sass/components/pill.scss b/sass/components/pill.scss new file mode 100644 index 0000000..a9c16bb --- /dev/null +++ b/sass/components/pill.scss @@ -0,0 +1,31 @@ +.pill { + @extend .-color-white; + @extend .-variation-solid; + @extend .-variation-round; + + &.-color { + @each $color in $colors { + &-#{ $color } { + background-image: linear-gradient(140deg, color($color, light) 0%, color($color) 100%); + + &.-variation-solid { + background-image: none; + background-color: color($color); + } + + &.-variation-empty { color: color($color); } + + // To be used with .-variation-solid otherwise it won't work + // + &_lighter { background-color: color($color, lighter); } + &_light { background-color: color($color, light); } + &_dark { background-color: color($color, dark); } + &_darker { background-color: color($color, darker); } + } + } + } + + &.-variation-square { border-radius: 0; } + &.-variation-round { border-radius: ui(border, radius); } + &.-variation-rounded { border-radius: 250px; } +} \ No newline at end of file diff --git a/sass/components/placeholders.scss b/sass/components/placeholders.scss new file mode 100644 index 0000000..fa46cb0 --- /dev/null +++ b/sass/components/placeholders.scss @@ -0,0 +1,19 @@ +.placeholder { + width: 100%; + height: 100%; + border: ui(border, size) dashed color(gray, dark); + border-radius: ui(border, radius); + + @extend .column; + @extend .align-center; + @extend .align-middle; + @extend .-padding; + @extend .-text-center; + + .javascript-ready { + .loader { @extend .-margin-bottom_2; } + + &-title { text-transform: uppercase; } + &-text { @extend .-size-medium; } + } +} \ No newline at end of file diff --git a/sass/components/progress.scss b/sass/components/progress.scss new file mode 100644 index 0000000..2d2f3b5 --- /dev/null +++ b/sass/components/progress.scss @@ -0,0 +1,31 @@ +.progress { + @extend .-text-center; + + position: relative; + + &-line { + line-height: 0; + } + + &-circle { } + + &-semi-circle { + height: 100%; + } + + &-custom { + &--heart { } + } + + &_inner { } + + &.-size { + &-tiny { width: 30px; } + &-small { width: 60px; } + &-medium { width: 90px; } + &-normal { width: 120px; } + &-large { width: 150px; } + &-huge { width: 180px; } + &-full { width: 100%; } + } +} \ No newline at end of file diff --git a/sass/components/sticky.scss b/sass/components/sticky.scss new file mode 100644 index 0000000..d113d98 --- /dev/null +++ b/sass/components/sticky.scss @@ -0,0 +1,18 @@ +.sticky { + position: sticky; + width: 100%; + bottom: 0; + + &-container { + align-self: stretch; + position: relative; + } + + &-top { + top: 0; + padding-top: ui(spacing) !important; + margin-top: -32px; + } + + &-bottom { bottom: 0; } +} \ No newline at end of file diff --git a/sass/components/tabs.scss b/sass/components/tabs.scss new file mode 100644 index 0000000..76e10f8 --- /dev/null +++ b/sass/components/tabs.scss @@ -0,0 +1,153 @@ +$tabs--border-size: ui(border, size); +$tabs--border-color: color(gray); +$tabs--shadow-spread: ui(spacing) / 2; +$tabs--animation-duration: .2s; +$tabs--animation-type: ease-in; + +[data-tabs-pane]:not(.active) { display: none; } + +.tabs { + position: relative; + + .tab { + &-item { + border: $tabs--border-size solid $tabs--border-color; + display: flex; + margin-bottom: -$tabs--border-size; + } + + &-url { + @extend .-color-purple; + @extend .-line-reset_2; + @extend .-size-medium; + @extend .-variation-reset; + @extend .-variation-uppercase; + + display: flex; + flex: 1; + align-items: flex-start; + + &.icon { + @extend .-size-small; + + svg[data-prefix='fas'], .gd { font-size: 1.5em; } + + &-top { + @extend .align-middle; + + flex-direction: column; + + svg[data-prefix='fas'], .gd { @extend .-margin-bottom_3; } + } + + &-left { + svg[data-prefix='fas'], .gd { @extend .-margin-right_3; } + } + } + + &.active { color: color(black); } + } + } + + &:not(.-style-vertical) { + border-bottom: $tabs--border-size solid $tabs--border-color; + box-shadow: inset 0 -#{ $tabs--shadow-spread } #{ $tabs--shadow-spread } -#{ $tabs--shadow-spread / 2 } rgba($tabs--border-color, .3); + + &::before, + &::after { + background-color: $tabs--border-color; + bottom: -($tabs--border-size); + content: ''; + height: $tabs--border-size; + position: absolute; + width: 100%; + } + + &::before { left: -100%; } + &::after { right: -100%; } + + .tab { + &-item { + border-bottom: none; + border-top-left-radius: ui(border, radius); + border-top-right-radius: ui(border, radius); + margin-right: -$tabs--border-size; + position: relative; + transition: + all $tabs--animation-duration $tabs--animation-type, + background-color 0s $tabs--animation-type; + + &.active { + background-color: $background-color; + + &::before { + box-shadow: 0 0 #{ $tabs--shadow-spread / 2 } $tabs--border-size rgba(color(black), .1); + content: ''; + height: 60%; + top: 50%; + transform: translateY(-50%); + position: absolute; + width: 100%; + z-index: -1; + } + } + + &:hover:not(.active) { margin-top: -#{ ui(border, radius) / 2 }; } + } + + &-url { @extend .-padding_2; } + } + } + + &.-style-vertical { + flex-direction: column; + + .tab { + &-item { + border-right: none; + border-top-left-radius: ui(border, radius); + border-bottom-left-radius: ui(border, radius); + transition: all $tabs--animation-duration $tabs--animation-type; + + &.active { background-color: color(white); } + + &:hover:not(.active) { margin-left: -#{ ui(border, radius) / 2 }; } + } + + &-url { + position: relative; + + &::before, + &::after { + content: ''; + position: absolute; + z-index: -1; + right: 0; + } + + &::after { + border: $tabs--border-size solid $tabs--border-color; + border-right: none; + border-left: none; + height: calc(100% + 2px); + top: -1px; + width: 50%; + } + + &.active { + &::before { + background: linear-gradient(to bottom, rgba($tabs--border-color, 0) 0%, rgba($tabs--border-color, 1) 15%, rgba($tabs--border-color, 1) 50%, rgba($tabs--border-color, 1) 85%, rgba($tabs--border-color, 0) 100%); + height: calc(100% + #{ ui(spacing) * 2 }); + top: -(ui(spacing)); + width: $tabs--border-size; + } + + &::after { + background-color: #fff; + box-shadow: inset -#{ $tabs--shadow-spread } 0 #{ $tabs--shadow-spread } -#{ $tabs--shadow-spread } rgba(color(black), .1); + } + } + } + } + } +} \ No newline at end of file diff --git a/sass/config.scss b/sass/config.scss new file mode 100644 index 0000000..f0de08a --- /dev/null +++ b/sass/config.scss @@ -0,0 +1,137 @@ +////////////////////////////////////// +// +// Author: Vladut Radulescu @ Studio51 +// MIT LICENSE © 2015 Studio51 + +// Enable Bootstrap OR Foundation as your additional framework in order to +// provide a fallback for older browsers that don't support flexbox. +// Please note that this will change the way you write your grid, so please read +// the documentation before enabling any of these +// +// Options: [true / false] +// +// $grid-bootstrap: false; +// $grid-foundation: false; +// +// Milestone v2.0 + +// Grid gutters +// +// (!) *giggle* Your gutter will be automatically halfed once compiled. +// $grid-gutter: 10px will compile a gutter of 5px +// +$grid-gutter: 0 !default; + +// In order to minimze the compiled CSS, we've left out some rules that are +// default. +// If you experience any issues with the grid please let us know by opening an +// issue on Github and enable the following variable. +// +// Options: [true / false] +// +$grid-minimal: true !default; + +// The number of columns the grid will have +// GridleCSS supports up to 24 columns. Beyond that, it's up to you to make it +// work +// +// Options: [12 / 24] +// +$grid-columns: 12 !default; + +/// Base font size on the `` element +/// @type Number (unit) +$mq-base-font-size: 16px !default; + +/// Responsive mode +/// +/// Set to `false` to enable support for browsers that do not support @media queries, +/// (IE <= 8, Firefox <= 3, Opera <= 9) +/// +/// You could create a stylesheet served exclusively to older browsers, +/// where @media queries are rasterized +/// +/// @example scss +/// // old-ie.scss +/// $mq-responsive: false; +/// @import 'main'; // @media queries in this file will be rasterized up to $mq-static-breakpoint +/// // larger breakpoints will be ignored +/// +/// @type Boolean +/// @link https://github.com/sass-mq/sass-mq#responsive-mode-off Disabled responsive mode documentation + +$mq-responsive: true !default; + +/// Breakpoint list +/// +/// Name your breakpoints in a way that creates a ubiquitous language +/// across team members. It will improve communication between +/// stakeholders, designers, developers, and testers. +/// +/// @type Map +/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint Full documentation and examples + +$mq-breakpoints: ( + xs: 1px, + sm: 425px, + md: 768px, + lg: 1280px, + xl: 1440px +) !default; + +// $mq-breakpoints: ( +// mobile: 320px, +// tablet: 740px, +// desktop: 980px, +// wide: 1300px +// ) !default; + +/// Static breakpoint (for fixed-width layouts) +/// +/// Define the breakpoint from $mq-breakpoints that should +/// be used as the target width for the fixed-width layout +/// (i.e. when $mq-responsive is set to 'false') in a old-ie.scss +/// +/// @example scss +/// // tablet-only.scss +/// // +/// // Ignore all styles above tablet breakpoint, +/// // and fix the styles (e.g. layout) at tablet width +/// $mq-responsive: false; +/// $mq-static-breakpoint: tablet; +/// @import 'main'; // @media queries in this file will be rasterized up to tablet +/// // larger breakpoints will be ignored +/// +/// @type String +/// @link https://github.com/sass-mq/sass-mq#adding-custom-breakpoints Full documentation and examples +$mq-static-breakpoint: lg !default; + +/// Show breakpoints in the top right corner +/// +/// If you want to display the currently active breakpoint in the top +/// right corner of your site during development, add the breakpoints +/// to this list, ordered by width, e.g. (mobile, tablet, desktop). +/// +/// @type map +$mq-show-breakpoints: (xs, sm, md, lg) !default; + +/// Customize the media type (e.g. `@media screen` or `@media print`) +/// By default sass-mq uses an "all" media type (`@media all and …`) +/// +/// @type String +/// @link https://github.com/sass-mq/sass-mq#changing-media-type Full documentation and examples +$mq-media-type: all !default; + +// Distribute the cells spacing around or between them +// +$flex-distribution: true !default; +$flex-distributions: 'around' 'between'; + +// Alignments for main axis (x): left, center, right +// Alignments for cross axis (y): top, middle, bottom, baseline +// +$flex-alignment: true !default; +$flex-alignments: 'x' ('center'('center'), 'right'('flex-end'), 'left'('flex-start')), + 'y' ('top'('flex-start'), 'middle'('center'), 'bottom'('flex-end'), "baseline"("baseline"), "stretch"("stretch")); + +@import "gridlecss/media"; diff --git a/sass/config.scss.erb b/sass/config.scss.erb new file mode 100644 index 0000000..faa361b --- /dev/null +++ b/sass/config.scss.erb @@ -0,0 +1,281 @@ +$spacing: 32px; + +$sizes: ( + xxsmall: ( 0, ant, light ), + xsmall: ( $spacing / 6, tiny, light ), + small: ( $spacing / 5, small, light ), + medium: ( $spacing / 4, small, regular ), + large: ( ($spacing / 2) (($spacing / 2) + ($spacing / 4)), small, regular ), + xlarge: ( ($spacing / 1.7) (($spacing / 2) + ($spacing / 2)), nig, bold ), + xxlarge: ( $spacing, giant, bold ), +); + +$background-color: #F8F8FB; +$white: #fff; +$gray: #ecf0f1; +$black: #34495e; +$darkblue: ''; +$ink: ''; +$blue: #6DA9ED; +$green: #2ecc71; +$yellow: #f1c40f; +$orange: #e67e22; +$red: #e74c3c; +$purple: #9b59b6; +$teal: #1abc9c; +$indigo: ''; + +$colors: ('white', 'gray', 'black', 'darkblue', 'ink', 'blue', 'green', 'yellow', 'orange', 'red', 'purple', 'teal', 'indigo', 'psn', 'xbox', 'steam'); + +$config: ( + border: ( + size: 1px, + radius: 6px + ), + + typography: ( + size: ( + ant: .25em, + tiny: .5em, + small: .7em, + medium: .9em, + normal: 1em, + big: 1.2em, + huge: 1.5em, + giant: 2em, + + xxs: .25em, + xs: .5em, + sm: .7em, + md: .9em, + nm: 1em, + lg: 1.1em, + xl: 1.3em, + xxl: 2em + ), + + weight: ( + thin: 100, + light: 300, + regular: 400, + medium: 700, + bold: 900 + ) + ), + + palette: ( + brand: ( + primary: #8A9EF4, + secondary: #E4C7F9, + alternative: #D0DFEB, + bright: #CED3F6, + dark: #A6D2F2, + light: #FDFDFD + ), + + color: ( + "white": ( + base: #FFFFFF + ), + + "gray": ( + lighter: #f9fafb, + light: #f4f6f8, + base: #dfe3e8, + dark: #c4cdd5, + darker: #efefef + ), + + "black": ( + lightest: #919EAB, + lighter: #637381, + light: #454F5B, + base: #212B35 + ), + + "darkblue": ( + light: #B3B5CB, + base: #43467F, + dark: #1C2260, + darker: #00044C + ), + + "ink": ( + lightest: #919eab, + lighter: #637381, + light: #454f5b, + base: #212b36 + ), + + "blue": ( + lighter: #ebf5fa, + light: #ABDCFF, + base: $blue, + dark: darken($blue, 10%), + darker: darken($blue, 10%), + text: darken($blue, 10%) + ), + + "green": ( + lighter: #e3f1df, + light: #bbe5b3, + base: #50b83c, + dark: #108043, + darker: #173630, + text: #414f3e + ), + + "yellow": ( + lighter: #fcf1cd, + light: #ffea8a, + base: #eec200, + dark: #9c6f19, + darker: #573b00, + text: #595130 + ), + + "orange": ( + lighter: #fcebdb, + light: #FCCF31, + base: $orange, + dark: #c05717, + darker: #4a1504, + text: #594430 + ), + + "red": ( + lighter: #fbeae5, + light: #FEB692, + base: #EA5455, + dark: #bf0711, + darker: #330101, + text: #583c35 + ), + + "purple": ( + lighter: #f6f0fd, + light: #CE9FFC, + base: #7367F0, + dark: #50248f, + darker: #230051, + text: #50495a + ), + + "teal": ( + lighter: #e0f5f5, + light: #b7ecec, + base: #47c1bf, + dark: #00848e, + darker: #003135, + text: #405352 + ), + + "indigo": ( + lighter: #f4f5fa, + light: #b3bcf5, + base: #5c6ac4, + dark: #202e78, + darker: #000639, + text: #3e4155 + ), + + 'psn': ( + lighter: #1166ff, + light: #003087, + base: #003087, + dark: #003087, + darker: #003087, + text: #003087 + ), + + 'xbox': ( + lighter: #5bbb4c, + light: #52b043, + base: #52b043, + dark: #52b043, + darker: #52b043, + text: #52b043 + ), + + 'steam': ( + lighter: #03baff, + light: #00adee, + base: #00adee, + dark: #00adee, + darker: #00adee, + text: #00adee + ) + ), + + network: ( + psn: #003087, + xbox: #52b043, + steam: #00adee, + facebook: #3b5998, + twitter: #1da1f2, + google: #ea4335 + ) + ), + + spacing: $spacing +); + +@function config($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + + @return $map; +} + +// Helper Functions that itterate through the main Configuration map +// + +@function ui($keys...) { + @return config($config, $keys...); +} + +@function font-size($key) { + @return config($config, typography, size, $key); +} + +@function font-weight($key) { + @return config($config, typography, weight, $key); +} + +@function color($key, $saturation: base, $from: null) { + @if ($from) { + @return config($config, palette, $from, "#{ $key }"); + } @else { + @return config($config, palette, color, "#{ $key }", $saturation); + } +} + +// <% if Rails.env.development? %> +// $debug-breakpoints: false; +// <% end %> + +@import '../fonts/gamesDirectory.scss'; +@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900'); + +html { + height: 100%; + width: 100%; +} + +body { + display: flex; + flex-direction: column; + min-height: 100%; + background-color: $background-color; + color: color(black); + direction: ltr; + font: font-weight(light) 14px/1.6em 'Lato', sans-serif; + letter-spacing: .2px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1.5; + text-rendering: optimizelegibility; +} + +main { flex: 1; } \ No newline at end of file diff --git a/sass/gridle.scss b/sass/gridle.scss new file mode 100644 index 0000000..89b2314 --- /dev/null +++ b/sass/gridle.scss @@ -0,0 +1,122 @@ +@import "config"; + +@import "gridlecss/mixins"; +@import "gridlecss/media"; + + [class*="cell"] { + flex-basis: 100%; + max-width: 100%; + } + +*, +*:before, +*:after { + box-sizing: border-box; +} + +.grid, +.grid--fluid { + height: 100%; + margin-left: auto; + margin-right: auto; + width: 100%; +} + +.row { + display: flex; + flex: 0 1 auto; + flex-wrap: wrap; + + &--reverse { + flex-direction: row-reverse; + } +} + +%make-cell { + display: flex; + flex: 1 0 auto; + flex-direction: column; +} + +@if $flex-distribution { + @each $distribution in $flex-distributions { + + .distribute-#{ $distribution } { + justify-content: space-#{ $distribution }; + } + } +} + +@if $flex-alignment { + @each $alignment in $flex-alignments { + @include flex-alignments( ".align-", nth($alignment, 1), nth($alignment, 2), "parent"); + } +} + +@each $breakpoint in $mq-breakpoints { + + $break: nth($breakpoint, 1); + $size: nth($breakpoint, 2); + + + + @include grid { + + @if $size == 0 { } @else { + .grid { + width: $size; + } + } + + @each $breakpoint in $mq-breakpoints { + $b: nth($breakpoint, 1); + + @if $break == $b { + + .hidden-#{ $b } { display: none; } + .visible-#{ $b } { display: block; } + + } @else { + + .hidden-#{ $b } { display: block; } + .visible-#{ $b } { display: none; } + + } + } + + @for $i from 1 through $grid-columns { + + .cell-#{ $break }, + .cell-#{ $break }-#{ $i }, + .cell-#{ $break }-offset-#{ $i } { + @extend %make-cell; + } + } + + @for $i from 1 through $grid-columns { + $grid-column-width: (( 100 / $grid-columns ) * $i ) * 1%; + $grid-gutter-calc: $grid-gutter / ( $grid-gutter * 0 + 1 ); + + .cell-#{ $break }-#{ $i } { + flex-basis: $grid-column-width; + max-width: $grid-column-width; + } + + .cell-#{ $break }-offset-#{ $i } { + margin-left: $grid-column-width; + } + } + + .cell-#{ $break } { + flex: 1 0; + // flex-basis: 0; + // max-width: 100%; + + &-order { + + &--first { order: -1; } + &--last { order: 1; } + } + } + } +} diff --git a/sass/gridlecss-grid.scss b/sass/gridlecss-grid.scss new file mode 100644 index 0000000..f1bc69d --- /dev/null +++ b/sass/gridlecss-grid.scss @@ -0,0 +1,29 @@ +.display-grid { + display: grid; + grid-gap: 1px; + + &.grid { + &-row { + grid-column: 1; + + &-size { + &--1 { grid-template-columns: 1fr; } + &--2 { grid-template-columns: 1fr 1fr; } + &--3 { grid-template-columns: 1fr 1fr 1fr; } + &--4 { grid-template-columns: 1fr 1fr 1fr 1fr; } + &--5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } + &--6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } + &--7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } + &--8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } + &--9 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } + &--10 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } + &--11 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } + &--12 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } + } + } + } + + .grid { + &-cell { grid-row: 1; } + } +} \ No newline at end of file diff --git a/sass/gridlecss.scss b/sass/gridlecss.scss new file mode 100644 index 0000000..3d4c1e5 --- /dev/null +++ b/sass/gridlecss.scss @@ -0,0 +1,205 @@ +@import "config"; + +@import "gridlecss/mixins"; +@import "gridlecss/media"; + + [class*="cell"] { + flex-basis: 100%; + max-width: 100%; + } + +*, +*:before, +*:after { + box-sizing: border-box; +} + + +.grid, +.grid--fluid { + // height: 100%; + margin-left: auto; + margin-right: auto; + width: 100%; + display: flex; + flex-direction: column; +} + +.row { + display: flex; + flex: 1; + flex-wrap: wrap; + + &-auto { flex: 0 1 auto; } + + &--reverse { flex-direction: row-reverse; } +} + +.column { + display: flex; + flex-direction: column; + flex: 1; + flex-wrap: nowrap; + + &-auto { flex: 0 1 auto; } + + &--reverse { flex-direction: row-reverse; } +} + + +// + +$placeholders: (); + +@mixin placeholder($name) { + @if not index($placeholders, $name) { // 1 + $placeholders: append($placeholders, $name) !global; // 2 + + @at-root { + // @each $breakpoint, $value in $mq-breakpoints { // 3 + // @media (min-width: $value) { // 4 + // %#{$name}-#{$breakpoint} { // 5 + // @content; // 6 + // } + // } + // } + + %#{$name}-xs { // 7 + @content; + } + } + } + + @else { + @warn "Placeholder `#{$name}` already exists."; // 8 + } +} + +@mixin _($name) { + @extend %#{$name}-xs !optional; +} + +@include placeholder('make-cell') { + + display: flex; + flex: 1 0 auto; + flex-direction: column; +} + + +@mixin grid($size, $media) { + @if $size == '1px' { @content } @else { + @include mq($from: $media) { @content } + } +} + +@each $breakpoint in $mq-breakpoints { + + $break: nth($breakpoint, 1); + $size: nth($breakpoint, 2); + + @for $i from 1 through $grid-columns { + + .cell-#{ $break }, + .cell-#{ $break }-#{ $i }, + .cell-#{ $break }-offset-#{ $i } { + + @include _('make-cell'); + } + } + + .hidden { + @include mq($from: 'xs', $until: 'md') { + &-xs--sm { + display: none; + } + } + } + + @include grid($size, $break) { + + @if $size == 1px { } @else { + .grid { + width: $size; + } + } + + @each $breakpoint in $mq-breakpoints { + $b: nth($breakpoint, 1); + + @if $break == $b { + + .hidden-#{ $b } { display: none; } + .visible-#{ $b } { display: block; } + + } @else { + + .hidden-#{ $b } { display: block; } + .visible-#{ $b } { display: none; } + + } + } + + @for $i from 1 through $grid-columns { + $grid-column-width: (( 100 / $grid-columns ) * $i ) * 1%; + $grid-gutter-calc: $grid-gutter / ( $grid-gutter * 0 + 1 ); + + .cell-#{ $break }-#{ $i } { + flex-basis: $grid-column-width; + max-width: $grid-column-width; + } + + .cell-#{ $break }-offset-#{ $i } { + margin-left: $grid-column-width; + } + } + + .cell-#{ $break } { + flex: 1 0; + // flex-basis: 0; + // max-width: 100%; + + &-order { + + &--first { order: -1; } + &--last { order: 1; } + } + + &-auto { + flex: 0 1 auto; + } + } + + @if $flex-distribution { + @each $distribution in $flex-distributions { + + .distribute-#{$break}-#{ $distribution } { + display: flex; + justify-content: space-#{ $distribution }; + } + } + } + + @if $flex-alignment { + @each $alignment in $flex-alignments { + @include flex-alignments( ".align-#{ $break }-", nth($alignment, 1), nth($alignment, 2)); + } + } + } +} + +@if $flex-distribution { + @each $distribution in $flex-distributions { + + .distribute-#{ $distribution } { + display: flex; + justify-content: space-#{ $distribution }; + } + } +} + +@if $flex-alignment { + @each $alignment in $flex-alignments { + @include flex-alignments( ".align-", nth($alignment, 1), nth($alignment, 2)); + } +} diff --git a/sass/gridlecss/_media.scss b/sass/gridlecss/_media.scss new file mode 100644 index 0000000..63ecfbf --- /dev/null +++ b/sass/gridlecss/_media.scss @@ -0,0 +1,222 @@ +@charset "UTF-8"; // Fixes an issue where Ruby locale is not set properly + // See https://github.com/sass-mq/sass-mq/pull/10 + +/// Convert pixels to ems +/// +/// @param {Number} $px - value to convert +/// @param {Number} $base-font-size ($mq-base-font-size) - `` font size +/// +/// @example scss +/// $font-size-in-ems: mq-px2em(16px); +/// p { font-size: mq-px2em(16px); } +/// +/// @requires $mq-base-font-size +/// @returns {Number} +@function mq-px2em($px, $base-font-size: $mq-base-font-size) { + @if unitless($px) { + @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels."; + @return mq-px2em($px * 1px, $base-font-size); + } @else if unit($px) == em { + @return $px; + } + + @return ($px / $base-font-size) * 1em; +} + +/// Get a breakpoint's width +/// +/// @param {String} $name - Name of the breakpoint. One of $mq-breakpoints +/// +/// @example scss +/// $tablet-width: mq-get-breakpoint-width(tablet); +/// @media (min-width: mq-get-breakpoint-width(desktop)) {} +/// +/// @requires {Variable} $mq-breakpoints +/// +/// @returns {Number} Value in pixels +@function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) { + @if map-has-key($breakpoints, $name) { + @return map-get($breakpoints, $name); + } @else { + @warn "Breakpoint #{$name} wasn't found in $breakpoints."; + } +} + +/// Media Query mixin +/// +/// @param {String | Boolean} $from (false) - One of $mq-breakpoints +/// @param {String | Boolean} $until (false) - One of $mq-breakpoints +/// @param {String | Boolean} $and (false) - Additional media query parameters +/// @param {String} $media-type ($mq-media-type) - Media type: screen, print… +/// +/// @ignore Undocumented API, for advanced use only: +/// @ignore @param {Map} $breakpoints ($mq-breakpoints) +/// @ignore @param {String} $static-breakpoint ($mq-static-breakpoint) +/// +/// @content styling rules, wrapped into a @media query when $responsive is true +/// +/// @requires {Variable} $mq-media-type +/// @requires {Variable} $mq-breakpoints +/// @requires {Variable} $mq-static-breakpoint +/// @requires {function} mq-px2em +/// @requires {function} mq-get-breakpoint-width +/// +/// @link https://github.com/sass-mq/sass-mq#responsive-mode-on-default Full documentation and examples +/// +/// @example scss +/// .element { +/// @include mq($from: mobile) { +/// color: red; +/// } +/// @include mq($until: tablet) { +/// color: blue; +/// } +/// @include mq(mobile, tablet) { +/// color: green; +/// } +/// @include mq($from: tablet, $and: '(orientation: landscape)') { +/// color: teal; +/// } +/// @include mq(950px) { +/// color: hotpink; +/// } +/// @include mq(tablet, $media-type: screen) { +/// color: hotpink; +/// } +/// // Advanced use: +/// $my-breakpoints: (L: 900px, XL: 1200px); +/// @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) { +/// color: hotpink; +/// } +/// } +@mixin mq( + $from: false, + $until: false, + $and: false, + $media-type: $mq-media-type, + $breakpoints: $mq-breakpoints, + $responsive: $mq-responsive, + $static-breakpoint: $mq-static-breakpoint + +) { + + $min-width: 0; + $max-width: 0; + $media-query: ''; + + // From: this breakpoint (inclusive) + // + @if $from { + @if type-of($from) == number { + $min-width: mq-px2em($from); + } @else { + $min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints)); + } + } + + // Until: that breakpoint (exclusive) + // + @if $until { + @if type-of($until) == number { + $max-width: mq-px2em($until); + } @else { + $max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - .01em; + } + } + + // Responsive support is disabled, rasterize the output outside @media blocks + // The browser will rely on the cascade itself. + // + @if $responsive == false { + $static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints); + $target-width: mq-px2em($static-breakpoint-width); + + // Output only rules that start at or span our target width + @if ( + $and == false + and $min-width <= $target-width + and ( + $until == false or $max-width >= $target-width + ) + ) { + @content; + } + } + + // Responsive support is enabled, output rules inside @media queries + @else { + @if $min-width != 0 { $media-query: '#{$media-query} and (min-width: #{$min-width})'; } + @if $max-width != 0 { $media-query: '#{$media-query} and (max-width: #{$max-width})'; } + @if $and { $media-query: '#{$media-query} and #{$and}'; } + + // Remove unnecessary media query prefix 'all and ' + @if ($media-type == 'all' and $media-query != '') { + $media-type: ''; + $media-query: str-slice(unquote($media-query), 6); + } + + @media #{$media-type + $media-query} { + @content; + } + } +} + +/// Add a breakpoint +/// +/// @param {String} $name - Name of the breakpoint +/// @param {Number} $width - Width of the breakpoint +/// +/// @requires {Variable} $mq-breakpoints +/// +/// @example scss +/// @include mq-add-breakpoint(tvscreen, 1920px); +/// @include mq(tvscreen) {} +@mixin mq-add-breakpoint($name, $width) { + $new-breakpoint: ($name: $width); + $mq-breakpoints: map-merge($mq-breakpoints, $new-breakpoint) !global; +} + +/// Show the active breakpoint in the top right corner of the viewport +/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint +/// +/// @param {List} $show-breakpoints ($mq-show-breakpoints) - List of breakpoints to show in the top right corner +/// @param {Map} $breakpoints ($mq-breakpoints) - Breakpoint names and sizes +/// +/// @requires {Variable} $mq-breakpoints +/// @requires {Variable} $mq-show-breakpoints +/// +/// @example scss +/// // Show breakpoints using global settings +/// @include mq-show-breakpoints; +/// +/// // Show breakpoints using custom settings +/// @include mq-show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px)); +@mixin mq-show-breakpoints($show-breakpoints: $mq-show-breakpoints, $breakpoints: $mq-breakpoints) { + body:before { + background-color: #FCF8E3; + border-bottom: 1px solid #FBEED5; + border-left: 1px solid #FBEED5; + color: #C09853; + font: small-caption; + padding: 3px 6px; + pointer-events: none; + position: fixed; + right: 0; + top: 0; + z-index: 100; + + // Loop through the breakpoints that should be shown + @each $show-breakpoint in $show-breakpoints { + $width: mq-get-breakpoint-width($show-breakpoint, $breakpoints); + @include mq($show-breakpoint, $breakpoints: $breakpoints) { + content: "#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})"; + } + } + } +} + +@if variable-exists(debug-breakpoints) { + @if length($mq-show-breakpoints) > 0 { + @include mq-show-breakpoints; + } +} diff --git a/grid/gridlecss/mixins.scss b/sass/gridlecss/mixins.scss similarity index 62% rename from grid/gridlecss/mixins.scss rename to sass/gridlecss/mixins.scss index 738aa1b..4a71f14 100644 --- a/grid/gridlecss/mixins.scss +++ b/sass/gridlecss/mixins.scss @@ -6,9 +6,10 @@ $map: ( "screen": "only screen", "xs": " ", - "sm": " and (min-width: #{$grid-sm-min})", - "md": " and (min-width: #{$grid-md-min})", - "lg": " and (min-width: #{$grid-lg-min})" + "sm": "screen and (min-width: #{$grid-sm-min})", + "md": "screen and (min-width: #{$grid-md-min})", + "lg": "screen and (min-width: #{$grid-lg-min})" + // "xl": "screen and (min-width: #{$grid-xl-min})" ); @return map-get( $map, $condition ); @@ -26,7 +27,7 @@ // Generate Flex Alignments // -@mixin flex-alignments( $parent, $axis, $class, $requester ) { +@mixin flex-alignments( $parent, $axis, $class ) { @each $element in $class { @@ -37,19 +38,18 @@ @if $axis == "x" { + display: flex; + // flex: 1; justify-content: $rule; - text-align: $rule; } @else if $axis == "y" { - @if $requester == "parent" { - - align-items: $rule; - - } @else { + display: flex; + align-items: $rule; + } - align-self: $rule; - } + &--self { + align-self: $rule; } } } diff --git a/sass/helpers/image.scss b/sass/helpers/image.scss new file mode 100644 index 0000000..9bfa6aa --- /dev/null +++ b/sass/helpers/image.scss @@ -0,0 +1,56 @@ +img { + vertical-align: middle; + + &.-variation { + &-round { border-radius: 250px; } + &-rounded { border-radius: ui(border, radius); } + &-centered { + background-position: center; + background-size: cover; + object-fit: cover; + object-position: center; + } + + &-placeholder { + + // The following avoids missing images to stretch to full width due to their + // alt tag which in general has a long string + // + display: block; + overflow: hidden; + background-color: color(gray, dark); + } + } + + &.-size { + &_x100 { width: 100% } + &_x20 { width: 500px; } + &_x10 { width: 300px; } + &_x9 { width: 270px; } + &_x8 { width: 240px; } + &_x7 { width: 210px; } + &_x6 { width: 180px; } + &_x5 { width: 150px; } + &_x4 { width: 120px; } + &_x3 { width: 90px; } + &_x2 { width: 60px; } + &_x1 { width: 30px; } + + &-equal { + &.-size { + &_x100 { height: 100% } + &_x20 { height: 500px; } + &_x10 { height: 300px; } + &_x9 { height: 270px; } + &_x8 { height: 240px; } + &_x7 { height: 210px; } + &_x6 { height: 180px; } + &_x5 { height: 150px; } + &_x4 { height: 120px; } + &_x3 { height: 90px; } + &_x2 { height: 60px; } + &_x1 { height: 30px; } + } + } + } +} \ No newline at end of file diff --git a/sass/helpers/margin.scss b/sass/helpers/margin.scss new file mode 100644 index 0000000..38977cd --- /dev/null +++ b/sass/helpers/margin.scss @@ -0,0 +1,187 @@ +$margin_variations: ('', 'top', 'left', 'bottom', 'right'); +$margin_sizes: ('', 2, 3, 4, 5, 6, 'x2'); +$margin_size_values: ( + _: ui(spacing), + _2: ui(spacing) / 2, + _3: ui(spacing) / 4, + _4: ui(spacing) / 8, + _5: #{ ui(spacing) / ( ui(spacing) / 2 ) }px, + _6: #{ ui(spacing) / ui(spacing) }px, + _x2: ui(spacing) * 2 +); + +@function margin-size($key) { + @if map-has-key($margin_size_values, $key) { + @return map-get($margin_size_values, $key); + } + + @warn "Unknown variable '#{$key}'"; + @return null; +} + +@mixin margin($klass) { + @each $variation in $margin_variations { + $_variation: null; + + @if ($variation == '') { $_variation: $variation; } @else { $_variation: "-" + $variation; } + + .-#{ $klass }#{ $_variation }_reset { + margin#{ $_variation }: 0; + } + + @each $size in $margin_sizes { + $_size: null; + + @if ($size == '') { $_size: null; } @else { $_size: "_" + $size; } + + .-#{ $klass }#{ $_variation }#{ $_size } { + @if ($size == '') { $_size: '_'; } @else { $_size: "_" + $size; } + + margin#{ $_variation }: margin-size(#{ $_size }); + } + } + } +} + +@include margin("margin"); + +@each $breakpoint in $mq-breakpoints { + $break: nth($breakpoint, 1); + + @include mq($break) { + @include margin("margin-#{ $break }"); + } +} + +._margin-x { + margin-left: -(margin-size(_) / 2); + margin-right: -(margin-size(_) / 2); + + > [class*='cell'] { + margin-left: margin-size(_) / 2; + margin-right: margin-size(_) / 2; + } +} + +._margin-x_2 { + margin-left: -(margin-size(_2) / 2); + margin-right: -(margin-size(_2) / 2); + + > [class*='cell'] { + margin-left: margin-size(_2) / 2; + margin-right: margin-size(_2) / 2; + } +} + +._margin-x_3 { + margin-left: -(margin-size(_3) / 2); + margin-right: -(margin-size(_3) / 2); + + > [class*='cell'] { + margin-left: margin-size(_3) / 2; + margin-right: margin-size(_3) / 2; + } +} + +._margin-x_4 { + margin-left: -(margin-size(_4) / 2); + margin-right: -(margin-size(_4) / 2); + + > [class*='cell'] { + margin-left: margin-size(_4) / 2; + margin-right: margin-size(_4) / 2; + } +} + +._margin-x_5 { + margin-left: -(#{ ui(spacing) / ( ui(spacing) / 2 ) }px); + margin-right: -(#{ ui(spacing) / ( ui(spacing) / 2 ) }px); + + > [class*='cell'] { + margin-left: #{ ui(spacing) / ( ui(spacing) / 2 ) }px; + margin-right: #{ ui(spacing) / ( ui(spacing) / 2 ) }px; + } +} + +._margin-x_6 { + margin-left: -#{ ui(spacing) / ui(spacing) / 2 }px; + margin-right: -#{ ui(spacing) / ui(spacing) / 2 }px; + + > [class*='cell'] { + margin-left: #{ ui(spacing) / ui(spacing) / 2 }px; + margin-right: #{ ui(spacing) / ui(spacing) / 2 }px; + } +} + +.-margin-x_reset { + @extend .-margin-left_reset; + @extend .-margin-right_reset; +} + +.-margin-x { + @extend .-margin-left; + @extend .-margin-right; +} + +.-margin-x_2 { + @extend .-margin-left_2; + @extend .-margin-right_2; +} + +.-margin-x_3 { + @extend .-margin-left_3; + @extend .-margin-right_3; +} +.-margin-x_4 { + @extend .-margin-left_4; + @extend .-margin-right_4; +} + +.-margin-x_5 { + @extend .-margin-left_5; + @extend .-margin-right_5; +} +.-margin-x_6 { + @extend .-margin-left_6; + @extend .-margin-right_6; +} + +.-margin-y_reset { + @extend .-margin-top_reset; + @extend .-margin-bottom_reset; +} + +.-margin-y { + @extend .-margin-top; + @extend .-margin-bottom; +} + +.-margin-y_2 { + @extend .-margin-top_2; + @extend .-margin-bottom_2; +} + +.-margin-y_x2 { + @extend .-margin-top_x2; + @extend .-margin-bottom_x2; +} + +.-margin-y_3 { + @extend .-margin-top_3; + @extend .-margin-bottom_3; +} + +.-margin-y_4 { + @extend .-margin-top_4; + @extend .-margin-bottom_4; +} + +.-margin-y_5 { + @extend .-margin-top_5; + @extend .-margin-bottom_5; +} + +.-margin-y_6 { + @extend .-margin-top_6; + @extend .-margin-bottom_6; +} \ No newline at end of file diff --git a/sass/helpers/padding.scss b/sass/helpers/padding.scss new file mode 100644 index 0000000..40fbcd8 --- /dev/null +++ b/sass/helpers/padding.scss @@ -0,0 +1,127 @@ +$padding_variations: ('', 'top', 'left', 'bottom', 'right'); +$padding_sizes: ('', 2, 3, 4, 5, 6, 'x2'); +$padding_size_values: ( + _: ui(spacing), + _2: ui(spacing) / 2, + _3: ui(spacing) / 4, + _4: ui(spacing) / 8, + _5: #{ ui(spacing) / ( ui(spacing) / 2 ) }px, + _6: #{ ui(spacing) / ui(spacing) }px, + _x2: ui(spacing) * 2 +); + +@function padding-size($key) { + @if map-has-key($padding_size_values, $key) { + @return map-get($padding_size_values, $key); + } + + @warn "Unknown variable '#{$key}'"; + @return null; +} + +@mixin padding($klass) { + @each $variation in $padding_variations { + $_variation: null; + + @if ($variation == '') { $_variation: $variation; } @else { $_variation: "-" + $variation; } + + .-#{ $klass }#{ $_variation }_reset { + padding#{ $_variation }: 0; + } + + @each $size in $padding_sizes { + $_size: null; + + @if ($size == '') { $_size: null; } @else { $_size: "_" + $size; } + + .-#{ $klass }#{ $_variation }#{ $_size } { + @if ($size == '') { $_size: '_'; } @else { $_size: "_" + $size; } + + padding#{ $_variation }: padding-size(#{ $_size }); + } + } + } +} + +@include padding("padding"); + +@each $breakpoint in $mq-breakpoints { + $break: nth($breakpoint, 1); + + @include mq($break) { + @include padding("padding-#{ $break }"); + } +} + +.-padding-x_reset { + @extend .-padding-left_reset !optional; + @extend .-padding-right_reset !optional; +} + +.-padding-x { + @extend .-padding-left !optional; + @extend .-padding-right !optional; +} + +.-padding-x_2 { + @extend .-padding-left_2 !optional; + @extend .-padding-right_2 !optional; +} + +.-padding-x_3 { + @extend .-padding-left_3 !optional; + @extend .-padding-right_3 !optional; +} +.-padding-x_4 { + @extend .-padding-left_4 !optional; + @extend .-padding-right_4 !optional; +} + +.-padding-x_5 { + @extend .-padding-left_5 !optional; + @extend .-padding-right_5 !optional; +} +.-padding-x_6 { + @extend .-padding-left_6 !optional; + @extend .-padding-right_6 !optional; +} + +.-padding-y_reset { + @extend .-padding-top_reset !optional; + @extend .-padding-bottom_reset !optional; +} + +.-padding-y { + @extend .-padding-top !optional; + @extend .-padding-bottom !optional; +} + +.-padding-y_2 { + @extend .-padding-top_2 !optional; + @extend .-padding-bottom_2 !optional; +} + +.-padding-y_x2 { + @extend .-padding-top_x2 !optional; + @extend .-padding-bottom_x2 !optional; +} + +.-padding-y_3 { + @extend .-padding-top_3 !optional; + @extend .-padding-bottom_3 !optional; +} + +.-padding-y_4 { + @extend .-padding-top_4 !optional; + @extend .-padding-bottom_4 !optional; +} + +.-padding-y_5 { + @extend .-padding-top_5 !optional; + @extend .-padding-bottom_5 !optional; +} + +.-padding-y_6 { + @extend .-padding-top_6 !optional; + @extend .-padding-bottom_6 !optional; +} \ No newline at end of file diff --git a/sass/helpers/position.scss b/sass/helpers/position.scss new file mode 100644 index 0000000..fda6de7 --- /dev/null +++ b/sass/helpers/position.scss @@ -0,0 +1,10 @@ +.-position { + &-center { + position: absolute; + transform: translate(-50%, -50%); + margin-left: auto; + margin-right: auto; + top: 50%; + left: 50%; + } +} \ No newline at end of file diff --git a/sass/helpers/reset.scss b/sass/helpers/reset.scss new file mode 100644 index 0000000..8f142b0 --- /dev/null +++ b/sass/helpers/reset.scss @@ -0,0 +1,450 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +p { margin: 0; } + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; + vertical-align: middle; /* Remove margin added at the bottom */ +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + vertical-align: middle; + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} \ No newline at end of file diff --git a/sass/helpers/state.scss b/sass/helpers/state.scss new file mode 100644 index 0000000..169e5b9 --- /dev/null +++ b/sass/helpers/state.scss @@ -0,0 +1,39 @@ +.-state { + &-hidden { display: none; } + &-invisible { + visibility: hidden; + height: 0; + } + + &-title { + cursor: pointer; + + &.-color { + &-blue:hover { color: color(blue, darken) } + &-red:hover { color: color(red, darken) } + } + } + + &-pointer { + cursor: pointer; + } +} + +[hidden], [data-hidden='true'] { @extend .-state-hidden; } +[invisible], [data-invisible='true'] { @extend .-state-invisible; } + +a[hidden] { + position: absolute; + width: 100%; + height: 100%; +} + +.-show-on-hover { + &_parent { + &:hover { + .-show-on-hover_child { visibility: visible; } + } + } + + &_child { visibility: hidden; } +} \ No newline at end of file diff --git a/sass/helpers/typography.scss b/sass/helpers/typography.scss new file mode 100644 index 0000000..07b978e --- /dev/null +++ b/sass/helpers/typography.scss @@ -0,0 +1,82 @@ +div { + .-truncate_2 { max-height: 3em; } + .-truncate_3 { max-height: 5em; } + .-truncate_4 { max-height: 8em; } + .-truncate_6 { height: 12em; } + + .-truncate { + overflow: hidden; + position: relative; + } + + .-truncate:after{ + content: ''; + height: ui(spacing) * 1.5; + display: block; + width: 100%; + position: absolute; + background: linear-gradient(to bottom, rgba(color(black), 0) 0%, rgba(color(white), 1) 100%); + bottom: 0; + } +} + +div, +h1, h2, h3, h4, h5, h6, +a, +i, p, span, blockquote, strong, +ul, ol, li, +label { + &.-line-reset { line-height: .9; } + &.-line-reset_0 { line-height: 0; } + &.-line-reset_2 { line-height: 1; } + &.-line-reset_3 { line-height: 1.1; } + &.-line-reset_4 { line-height: 1.2; } + &.-line-reset_5 { line-height: 1.3; } +} + +h1, h2, h3, h4, h5, h6, +a, +i, p, span, blockquote, strong, +ul, ol, li, +label { + + &.-color { @include colorize(false); } + + &.-style { + &-italic { font-style: italic; } + } + + &.-weight { + &-thin { font-weight: font-weight(thin); } + &-light { font-weight: font-weight(light); } + &-regular { font-weight: font-weight(regular); } + &-medium { font-weight: font-weight(medium ); } + &-bold { font-weight: font-weight(bold); } + } + + &.-size { + &-ant { font-size: font-size(ant); } + &-tiny { font-size: font-size(tiny); } + &-small { font-size: font-size(small); } + &-medium { font-size: font-size(medium); } + &-normal { font-size: font-size(normal); } + &-big { font-size: font-size(big); } + &-huge { font-size: font-size(huge); } + &-giant { font-size: font-size(giant); } + } + + &.-variation { + &-uppercase { text-transform: uppercase; } + &-reset { text-decoration: none; } + } + + &.-align { + &-left { text-align: left; } + &-center { text-align: center; } + &-right { text-align: right; } + } +} + +.-text-left { text-align: left; } +.-text-center { text-align: center; } +.-text-right { text-align: right; } \ No newline at end of file diff --git a/sass/mixins/color.scss b/sass/mixins/color.scss new file mode 100644 index 0000000..029f9ea --- /dev/null +++ b/sass/mixins/color.scss @@ -0,0 +1,40 @@ +@mixin colorize($gradient: true, $text: true) { + @each $color in $colors { + &-#{ $color } { + + @if $gradient { + @if $text { + color: #fff; + } + + background-image: linear-gradient(140deg, color($color, light) 0%, color($color) 100%); + + &:hover { background-color: color($color); } + + &.-variation-solid { + background-image: none; + background-color: color($color); + } + + &.-variation-empty { color: color($color); } + + // To be used with .-variation-solid otherwise it won't work + // + &_lighter { background-color: color($color, lighter); } + &_light { background-color: color($color, light); } + &_dark { background-color: color($color, dark); } + &_darker { background-color: color($color, darker); } + + } @else { + @if $text { + color: color($color); + } + + &_lighter { color: color($color, lighter); } + &_light { color: color($color, light); } + &_dark { color: color($color, dark); } + &_darker { color: color($color, darker); } + } + } + } +} \ No newline at end of file diff --git a/sass/mixins/size.scss b/sass/mixins/size.scss new file mode 100644 index 0000000..e69de29 diff --git a/sass/plugins/calendar-heatmap.scss b/sass/plugins/calendar-heatmap.scss new file mode 100644 index 0000000..0a0763b --- /dev/null +++ b/sass/plugins/calendar-heatmap.scss @@ -0,0 +1,25 @@ +.react-calendar-heatmap text { + font-size: 10px; + fill: #aaa; +} + +.react-calendar-heatmap .react-calendar-heatmap-small-text { + font-size: 5px; +} + +.react-calendar-heatmap { + rect:hover { pointer: cursor; } + + .color-empty { fill: color(gray, darker); } + + $base-color: color(purple, light); + + .color-scale { + &-0 { fill: $base-color; } + &-25 { fill: darken($base-color, 10%); } + &-50 { fill: darken($base-color, 20%); } + &-75 { fill: darken($base-color, 25%); } + &-100 { fill: darken($base-color, 40%); } + &-101 { fill: darken($base-color, 50%); } + } +} diff --git a/sass/plugins/toc.js.scss b/sass/plugins/toc.js.scss new file mode 100644 index 0000000..ddb824a --- /dev/null +++ b/sass/plugins/toc.js.scss @@ -0,0 +1,49 @@ +// .toc-parent { +// position: relative; +// } + +// .toc { +// position: fixed; +// // left: 0; +// border: 1px solid red; +// // left: $menuPaddingLeft; +// // top: 1em; +// // padding: 1em; +// // width: $menuWidth; +// line-height: 2; + +// ul { +// list-style: none; +// padding: 0; +// margin: 0; +// } + +// ul ul { +// padding-left: 2em; +// } + +// li a { +// display: inline-block; +// color: #aaa; +// text-decoration: none; +// transition: all 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000); +// } + +// li.visible>a { +// color: #111; +// transform: translate( 5px ); +// } +// } + +// .toc-marker { +// position: absolute; +// top: 0; +// left: 0; +// width: 100%; +// height: 100%; +// z-index: -1; + +// path { +// transition: all 0.3s ease; +// } +// } \ No newline at end of file diff --git a/sass/tools/_decimal-round.scss b/sass/tools/_decimal-round.scss new file mode 100644 index 0000000..9fb0f9c --- /dev/null +++ b/sass/tools/_decimal-round.scss @@ -0,0 +1,79 @@ +// _decimal.scss | MIT License | gist.github.com/terkel/4373420 + +// Round a number to specified digits. +// +// @param {Number} $number A number to round +// @param {Number} [$digits:0] Digits to output +// @param {String} [$mode:round] (round|ceil|floor) How to round a number +// @return {Number} A rounded number +// @example +// decimal-round(0.333) => 0 +// decimal-round(0.333, 1) => 0.3 +// decimal-round(0.333, 2) => 0.33 +// decimal-round(0.666) => 1 +// decimal-round(0.666, 1) => 0.7 +// decimal-round(0.666, 2) => 0.67 +// +@function decimal-round ($number, $digits: 0, $mode: round) { + $n: 1; + // $number must be a number + @if type-of($number) != number { + @warn '#{ $number } is not a number.'; + @return $number; + } + // $digits must be a unitless number + @if type-of($digits) != number { + @warn '#{ $digits } is not a number.'; + @return $number; + } @else if not unitless($digits) { + @warn '#{ $digits } has a unit.'; + @return $number; + } + @for $i from 1 through $digits { + $n: $n * 10; + } + @if $mode == round { + @return round($number * $n) / $n; + } @else if $mode == ceil { + @return ceil($number * $n) / $n; + } @else if $mode == floor { + @return floor($number * $n) / $n; + } @else { + @warn '#{ $mode } is undefined keyword.'; + @return $number; + } +} + +// Ceil a number to specified digits. +// +// @param {Number} $number A number to round +// @param {Number} [$digits:0] Digits to output +// @return {Number} A ceiled number +// @example +// decimal-ceil(0.333) => 1 +// decimal-ceil(0.333, 1) => 0.4 +// decimal-ceil(0.333, 2) => 0.34 +// decimal-ceil(0.666) => 1 +// decimal-ceil(0.666, 1) => 0.7 +// decimal-ceil(0.666, 2) => 0.67 +// +@function decimal-ceil ($number, $digits: 0) { + @return decimal-round($number, $digits, ceil); +} + +// Floor a number to specified digits. +// +// @param {Number} $number A number to round +// @param {Number} [$digits:0] Digits to output +// @return {Number} A floored number +// @example +// decimal-floor(0.333) => 0 +// decimal-floor(0.333, 1) => 0.3 +// decimal-floor(0.333, 2) => 0.33 +// decimal-floor(0.666) => 0 +// decimal-floor(0.666, 1) => 0.6 +// decimal-floor(0.666, 2) => 0.66 +// +@function decimal-floor ($number, $digits: 0) { + @return decimal-round($number, $digits, floor); +} \ No newline at end of file