diff --git a/gulpfile.js b/gulpfile.js index abaaa44..23b7f0c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,8 +1,8 @@ const gulp = require('gulp'), - connect = require('gulp-connect'), - less = require('gulp-less'), - cleanCSS = require('gulp-clean-css'), - rename = require('gulp-rename'); + connect = require('gulp-connect'), + sass = require('gulp-sass'), + cleanCSS = require('gulp-clean-css'), + rename = require('gulp-rename'); gulp.task('webserver', function() { connect.server({ @@ -10,17 +10,17 @@ gulp.task('webserver', function() { }); }); -gulp.task('less', function() { - gulp.src('src/styles.less') - .pipe(less()) +gulp.task('sass', function() { + gulp.src('src/styles.scss') + .pipe(sass.sync().on('error', sass.logError)) .pipe(cleanCSS({format: 'beautify'})) .pipe(rename('paper.css')) .pipe(gulp.dest('dist')) .pipe(connect.reload()); }); -gulp.task('watch', function() { - gulp.watch('src/*.less', ['less']); +gulp.task('watch', function () { + gulp.watch('src/*.scss', ['sass']); }); gulp.task('minify-css', () => { @@ -31,11 +31,11 @@ gulp.task('minify-css', () => { }); gulp.task('components', () => { - gulp.src('src/*.less') - .pipe(less()) + gulp.src('src/*.scss') + .pipe(sass.sync().on('error', sass.logError)) .pipe(cleanCSS({format: 'beautify'})) .pipe(gulp.dest('dist/components')); }); -gulp.task('default', ['less', 'webserver', 'watch']); -gulp.task('build', ['components', 'less', 'minify-css']); +gulp.task('default', ['sass', 'webserver', 'watch']); +gulp.task('build', ['components', 'sass', 'minify-css']); diff --git a/package-lock.json b/package-lock.json index 97ed924..d88fc41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "papercss", - "version": "1.3.0", + "version": "1.3.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -119,8 +119,7 @@ "amdefine": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", - "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", - "optional": true + "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=" }, "ansi-html": { "version": "0.0.7", @@ -239,11 +238,59 @@ } } }, + "aproba": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", + "dev": true + }, "archy": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=" }, + "are-we-there-yet": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz", + "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", + "dev": true, + "requires": { + "delegates": "1.0.0", + "readable-stream": "2.3.3" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz", + "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "1.0.0", + "process-nextick-args": "1.0.7", + "safe-buffer": "5.1.1", + "string_decoder": "1.0.3", + "util-deprecate": "1.0.2" + } + }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + } + } + }, "arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", @@ -409,6 +456,12 @@ "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=", "dev": true }, + "async-foreach": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz", + "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=", + "dev": true + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -527,6 +580,15 @@ "integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE=", "dev": true }, + "block-stream": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", + "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", + "dev": true, + "requires": { + "inherits": "2.0.3" + } + }, "bluebird": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz", @@ -1446,6 +1508,12 @@ "date-now": "0.1.4" } }, + "console-control-strings": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "dev": true + }, "constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -1550,6 +1618,28 @@ "sha.js": "2.4.9" } }, + "cross-spawn": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", + "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", + "dev": true, + "requires": { + "lru-cache": "4.1.1", + "which": "1.3.0" + }, + "dependencies": { + "lru-cache": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", + "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==", + "dev": true, + "requires": { + "pseudomap": "1.0.2", + "yallist": "2.1.2" + } + } + } + }, "cryptiles": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz", @@ -1722,6 +1812,12 @@ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, + "delegates": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", + "dev": true + }, "depd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz", @@ -2937,12 +3033,56 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, + "fstream": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", + "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11", + "inherits": "2.0.3", + "mkdirp": "0.5.1", + "rimraf": "2.6.2" + }, + "dependencies": { + "graceful-fs": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", + "dev": true + } + } + }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", "dev": true }, + "gauge": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", + "dev": true, + "requires": { + "aproba": "1.2.0", + "console-control-strings": "1.1.0", + "has-unicode": "2.0.1", + "object-assign": "4.1.1", + "signal-exit": "3.0.2", + "string-width": "1.0.2", + "strip-ansi": "3.0.1", + "wide-align": "1.1.2" + }, + "dependencies": { + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + } + } + }, "gaze": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.2.tgz", @@ -2951,6 +3091,21 @@ "globule": "0.1.0" } }, + "generate-function": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz", + "integrity": "sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=", + "dev": true + }, + "generate-object-property": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz", + "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=", + "dev": true, + "requires": { + "is-property": "1.0.2" + } + }, "get-caller-file": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz", @@ -3343,6 +3498,19 @@ "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz", "integrity": "sha1-OtRCh2PwXidk3sHGfYaNsnVoeBc=" }, + "gulp-sass": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-3.1.0.tgz", + "integrity": "sha1-U9xLaKH13f5EJKtMJHZVJpqLdLc=", + "dev": true, + "requires": { + "gulp-util": "3.0.8", + "lodash.clonedeep": "4.5.0", + "node-sass": "4.7.2", + "through2": "2.0.3", + "vinyl-sourcemaps-apply": "0.2.1" + } + }, "gulp-util": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz", @@ -3577,6 +3745,12 @@ "sparkles": "1.0.0" } }, + "has-unicode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", + "dev": true + }, "has-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz", @@ -3943,6 +4117,12 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, + "in-publish": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz", + "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=", + "dev": true + }, "indent-string": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz", @@ -4211,6 +4391,18 @@ "is-extglob": "2.1.1" } }, + "is-my-json-valid": { + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.17.1.tgz", + "integrity": "sha512-Q2khNw+oBlWuaYvEEHtKSw/pCxD2L5Rc1C+UQme9X6JdRDh7m5D7HkozA0qa3DUkQ6VzCnEm8mVIQPyIRkI5sQ==", + "dev": true, + "requires": { + "generate-function": "2.0.0", + "generate-object-property": "1.2.0", + "jsonpointer": "4.0.1", + "xtend": "4.0.1" + } + }, "is-npm": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz", @@ -4287,6 +4479,12 @@ "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=", "dev": true }, + "is-property": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz", + "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=", + "dev": true + }, "is-redirect": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz", @@ -4403,6 +4601,12 @@ } } }, + "js-base64": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz", + "integrity": "sha512-Wehd+7Pf9tFvGb+ydPm9TjYjV8X1YHOVyG8QyELZxEMqOhemVwGRmoG8iQ/soqI3n8v4xn59zaLxiCJiaaRzKA==", + "dev": true + }, "jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", @@ -4490,6 +4694,12 @@ "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=", "dev": true }, + "jsonpointer": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz", + "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=", + "dev": true + }, "jsprim": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", @@ -4978,6 +5188,12 @@ "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz", "integrity": "sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=" }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "dev": true + }, "lodash.defaults": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz", @@ -5035,6 +5251,12 @@ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.0.tgz", "integrity": "sha1-aYhLoUSsM/5plzemCG3v+t0PicU=" }, + "lodash.mergewith": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz", + "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU=", + "dev": true + }, "lodash.partialright": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/lodash.partialright/-/lodash.partialright-4.2.1.tgz", @@ -5619,6 +5841,12 @@ "duplexer2": "0.0.2" } }, + "nan": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.8.0.tgz", + "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo=", + "dev": true + }, "nanomatch": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.6.tgz", @@ -5674,6 +5902,294 @@ "integrity": "sha1-RjgRh59XPUUVWtap9D3ClujoXrw=", "dev": true }, + "node-gyp": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz", + "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=", + "dev": true, + "requires": { + "fstream": "1.0.11", + "glob": "7.1.2", + "graceful-fs": "4.1.11", + "minimatch": "3.0.4", + "mkdirp": "0.5.1", + "nopt": "3.0.6", + "npmlog": "4.1.2", + "osenv": "0.1.4", + "request": "2.83.0", + "rimraf": "2.6.2", + "semver": "5.3.0", + "tar": "2.2.1", + "which": "1.3.0" + }, + "dependencies": { + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.3.3", + "path-is-absolute": "1.0.1" + } + }, + "graceful-fs": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", + "dev": true + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + }, + "nopt": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", + "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=", + "dev": true, + "requires": { + "abbrev": "1.1.0" + } + }, + "semver": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", + "dev": true + } + } + }, + "node-sass": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.7.2.tgz", + "integrity": "sha512-CaV+wLqZ7//Jdom5aUFCpGNoECd7BbNhjuwdsX/LkXBrHl8eb1Wjw4HvWqcFvhr5KuNgAk8i/myf/MQ1YYeroA==", + "dev": true, + "requires": { + "async-foreach": "0.1.3", + "chalk": "1.1.3", + "cross-spawn": "3.0.1", + "gaze": "1.1.2", + "get-stdin": "4.0.1", + "glob": "7.1.2", + "in-publish": "2.0.0", + "lodash.assign": "4.2.0", + "lodash.clonedeep": "4.5.0", + "lodash.mergewith": "4.6.0", + "meow": "3.7.0", + "mkdirp": "0.5.1", + "nan": "2.8.0", + "node-gyp": "3.6.2", + "npmlog": "4.1.2", + "request": "2.79.0", + "sass-graph": "2.2.4", + "stdout-stream": "1.4.0", + "true-case-path": "1.0.2" + }, + "dependencies": { + "assert-plus": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", + "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=", + "dev": true + }, + "aws-sign2": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", + "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=", + "dev": true + }, + "boom": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", + "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", + "dev": true, + "requires": { + "hoek": "2.16.3" + } + }, + "caseless": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz", + "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=", + "dev": true + }, + "cryptiles": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", + "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", + "dev": true, + "requires": { + "boom": "2.10.1" + } + }, + "form-data": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", + "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", + "dev": true, + "requires": { + "asynckit": "0.4.0", + "combined-stream": "1.0.5", + "mime-types": "2.1.17" + } + }, + "gaze": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz", + "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=", + "dev": true, + "requires": { + "globule": "1.2.0" + } + }, + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.3.3", + "path-is-absolute": "1.0.1" + } + }, + "globule": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz", + "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=", + "dev": true, + "requires": { + "glob": "7.1.2", + "lodash": "4.17.4", + "minimatch": "3.0.4" + } + }, + "har-validator": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz", + "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=", + "dev": true, + "requires": { + "chalk": "1.1.3", + "commander": "2.11.0", + "is-my-json-valid": "2.17.1", + "pinkie-promise": "2.0.1" + } + }, + "hawk": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", + "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", + "dev": true, + "requires": { + "boom": "2.10.1", + "cryptiles": "2.0.5", + "hoek": "2.16.3", + "sntp": "1.0.9" + } + }, + "hoek": { + "version": "2.16.3", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", + "dev": true + }, + "http-signature": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", + "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", + "dev": true, + "requires": { + "assert-plus": "0.2.0", + "jsprim": "1.4.1", + "sshpk": "1.13.1" + } + }, + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", + "dev": true + }, + "lodash.assign": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", + "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=", + "dev": true + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + }, + "qs": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz", + "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=", + "dev": true + }, + "request": { + "version": "2.79.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz", + "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=", + "dev": true, + "requires": { + "aws-sign2": "0.6.0", + "aws4": "1.6.0", + "caseless": "0.11.0", + "combined-stream": "1.0.5", + "extend": "3.0.1", + "forever-agent": "0.6.1", + "form-data": "2.1.4", + "har-validator": "2.0.6", + "hawk": "3.1.3", + "http-signature": "1.1.1", + "is-typedarray": "1.0.0", + "isstream": "0.1.2", + "json-stringify-safe": "5.0.1", + "mime-types": "2.1.17", + "oauth-sign": "0.8.2", + "qs": "6.3.2", + "stringstream": "0.0.5", + "tough-cookie": "2.3.3", + "tunnel-agent": "0.4.3", + "uuid": "3.1.0" + } + }, + "sntp": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", + "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", + "dev": true, + "requires": { + "hoek": "2.16.3" + } + }, + "tunnel-agent": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz", + "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=", + "dev": true + } + } + }, "nodemon": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-1.11.0.tgz", @@ -9129,6 +9645,18 @@ } } }, + "npmlog": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "dev": true, + "requires": { + "are-we-there-yet": "1.1.4", + "console-control-strings": "1.1.0", + "gauge": "2.7.4", + "set-blocking": "2.0.0" + } + }, "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", @@ -9795,6 +10323,12 @@ "event-stream": "3.3.4" } }, + "pseudomap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", + "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", + "dev": true + }, "public-encrypt": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.0.tgz", @@ -10354,6 +10888,117 @@ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" }, + "sass-graph": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz", + "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=", + "dev": true, + "requires": { + "glob": "7.1.2", + "lodash": "4.17.4", + "scss-tokenizer": "0.2.3", + "yargs": "7.1.0" + }, + "dependencies": { + "camelcase": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", + "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", + "dev": true + }, + "cliui": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", + "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", + "dev": true, + "requires": { + "string-width": "1.0.2", + "strip-ansi": "3.0.1", + "wrap-ansi": "2.1.0" + } + }, + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.3.3", + "path-is-absolute": "1.0.1" + } + }, + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", + "dev": true + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + }, + "yargs": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", + "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", + "dev": true, + "requires": { + "camelcase": "3.0.0", + "cliui": "3.2.0", + "decamelize": "1.2.0", + "get-caller-file": "1.0.2", + "os-locale": "1.4.0", + "read-pkg-up": "1.0.1", + "require-directory": "2.1.1", + "require-main-filename": "1.0.1", + "set-blocking": "2.0.0", + "string-width": "1.0.2", + "which-module": "1.0.0", + "y18n": "3.2.1", + "yargs-parser": "5.0.0" + } + }, + "yargs-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz", + "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=", + "dev": true, + "requires": { + "camelcase": "3.0.0" + } + } + } + }, + "scss-tokenizer": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", + "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=", + "dev": true, + "requires": { + "js-base64": "2.4.0", + "source-map": "0.4.4" + }, + "dependencies": { + "source-map": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", + "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", + "dev": true, + "requires": { + "amdefine": "1.0.1" + } + } + } + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -11131,6 +11776,47 @@ "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" }, + "stdout-stream": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz", + "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=", + "dev": true, + "requires": { + "readable-stream": "2.3.3" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz", + "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "1.0.0", + "process-nextick-args": "1.0.7", + "safe-buffer": "5.1.1", + "string_decoder": "1.0.3", + "util-deprecate": "1.0.2" + } + }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + } + } + }, "stream-array": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/stream-array/-/stream-array-0.1.3.tgz", @@ -11437,6 +12123,17 @@ "acorn": "4.0.13" } }, + "tar": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", + "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", + "dev": true, + "requires": { + "block-stream": "0.0.9", + "fstream": "1.0.11", + "inherits": "2.0.3" + } + }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -11692,6 +12389,30 @@ "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=", "dev": true }, + "true-case-path": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.2.tgz", + "integrity": "sha1-fskRMJJHZsf1c74wIMNPj9/QDWI=", + "dev": true, + "requires": { + "glob": "6.0.4" + }, + "dependencies": { + "glob": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz", + "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=", + "dev": true, + "requires": { + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "2.0.10", + "once": "1.3.3", + "path-is-absolute": "1.0.1" + } + } + } + }, "tsscmp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.5.tgz", @@ -12355,6 +13076,15 @@ "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=", "dev": true }, + "wide-align": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", + "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", + "dev": true, + "requires": { + "string-width": "1.0.2" + } + }, "window-size": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", @@ -12451,6 +13181,12 @@ "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", "dev": true }, + "yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", + "dev": true + }, "yargs": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", diff --git a/package.json b/package.json index 36b50bb..5e6f7ad 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "devDependencies": { "browserify": "^14.1.0", "chai": "^4.1.2", + "gulp-sass": "^3.1.0", "http-server": "^0.9.0", "install": "0.10.1", "jake": "^8.0.15", diff --git a/src/_alerts.scss b/src/_alerts.scss new file mode 100644 index 0000000..b674aae --- /dev/null +++ b/src/_alerts.scss @@ -0,0 +1,22 @@ +@import './colors.less'; +@import './borders.less'; + +.alert{ + .border; + padding: 15px; + margin-bottom: 20px; + width: 100%; +} + +@mixin make-alert-color-classes($a: length($colors)) when ($a > 0) +{ + @include make-alert-color-classes($a - 1); + $color: extract($colors, $a); + .alert-${color} { + border-color: $$color; + color: $$color; + background-color: #{"${${color}-light}"}; + } +} + +@include make-alert-color-classes(); diff --git a/src/_colors.scss b/src/_colors.scss new file mode 100644 index 0000000..e47a8b2 --- /dev/null +++ b/src/_colors.scss @@ -0,0 +1,42 @@ +$primary: #41403E; +$secondary: #0071DE; + +$success: #86a361; +$warning: #ddcd45; +$danger: #a7342d; +$muted: #868e96; + +$primary-light: lighten($primary, 50%); +$secondary-light: lighten($secondary, 50%); +$success-light: lighten($success, 30%); +$warning-light: lighten($warning, 30%); +$danger-light: lighten($danger, 45%); +$muted-light: lighten($muted, 35%); + +$white-dark: rgba(black, 0.03); +$light-dark: rgba(black, 0.7); +$white: rgba(white, 1); +$main-background: rgba(white, 1); + +$primary-text: #FFF; +$secondary-text: $primary; +$success-text: $primary; +$warning-text: $primary; +$danger-text: $primary; +$muted-text: $primary; + +$colors: (primary, $primary, $primary-light), + (secondary, $secondary, $secondary-light), + (success, $success, $success-light), + (warning, $warning, $warning-light), + (danger, $danger, $danger-light), + (muted, $muted, $muted-light); + +@each $colorName, $color, $color-light in $colors { + .text-#{$colorName} { + color: #{$color}; + } + .background-#{$colorName} { + background-color: #{$color-light}; + } +} diff --git a/src/alerts.less b/src/alerts.less deleted file mode 100644 index 8a1c216..0000000 --- a/src/alerts.less +++ /dev/null @@ -1,21 +0,0 @@ -@import './colors.less'; -@import './borders.less'; - -.alert{ - .border; - padding: 15px; - margin-bottom: 20px; - width: 100%; -} - -.make-alert-color-classes(@a: length(@colors)) when (@a > 0) { - .make-alert-color-classes(@a - 1); - @color: extract(@colors, @a); - .alert-@{color} { - border-color: @@color; - color: @@color; - background-color: ~"@{@{color}-light}"; - } -} - -.make-alert-color-classes(); diff --git a/src/article.less b/src/article.scss similarity index 79% rename from src/article.less rename to src/article.scss index 9d84050..4c3b7ef 100644 --- a/src/article.less +++ b/src/article.scss @@ -7,14 +7,14 @@ article { .article-meta { font-size: 15px; - color: @muted; + color: $muted; a { - color: @muted-text; + color: $muted-text; background-image: none; &:hover { - color: @light-dark; + color: $light-dark; } } } diff --git a/src/badges.less b/src/badges.scss similarity index 53% rename from src/badges.less rename to src/badges.scss index beb257e..626d3ac 100644 --- a/src/badges.less +++ b/src/badges.scss @@ -12,17 +12,18 @@ text-align: center; white-space: nowrap; vertical-align: baseline; - background-color: @muted; + background-color: $muted; color: white; border-color: transparent; } -.make-badge-color-classes(@i: length(@colors)) when (@i > 0) { - .make-badge-color-classes(@i - 1); - @color: extract(@colors, @i); - .badge.@{color} { - background-color: @@color; +@mixin make-badge-color-classes($i: length($colors)) when ($i > 0) +{ + @include make-badge-color-classes($i - 1); + $color: extract($colors, $i); + .badge.${color} { + background-color: $$color; } } -.make-badge-color-classes(); +@include make-badge-color-classes(); diff --git a/src/borders.less b/src/borders.scss similarity index 82% rename from src/borders.less rename to src/borders.scss index 55163cc..3639396 100644 --- a/src/borders.less +++ b/src/borders.scss @@ -1,7 +1,7 @@ @import './colors.less'; .border { - border: 2px solid @primary; + border: 2px solid $primary; } .border, .border-1, .child-borders > *:nth-child(6n+1) { border-top-left-radius: 255px 15px; @@ -40,10 +40,10 @@ border-bottom-left-radius: 15px 225px; } .child-borders > * { - border: 2px solid @primary; + border: 2px solid $primary; } .border-white { - border-color: @white; + border-color: $white; } .border-dotted { border-style: dotted; @@ -55,12 +55,13 @@ border-width: 5px; } -.make-border-color-classes(@i: length(@colors)) when (@i > 0) { - .make-border-color-classes(@i - 1); - @color: extract(@colors, @i); - .border-@{color} { - border-color: @@color; +@mixin make-border-color-classes($i: length($colors)) when ($i > 0) +{ + @include make-border-color-classes($i - 1); + $color: extract($colors, $i); + .border-${color} { + border-color: $$color; } } -.make-border-color-classes(); +@include make-border-color-classes(); diff --git a/src/boxreset.less b/src/boxreset.scss similarity index 100% rename from src/boxreset.less rename to src/boxreset.scss diff --git a/src/buttons.less b/src/buttons.scss similarity index 61% rename from src/buttons.less rename to src/buttons.scss index a825509..31ecf70 100644 --- a/src/buttons.less +++ b/src/buttons.scss @@ -8,10 +8,10 @@ button, .paper-btn, [type="button"] { align-self:center; background:transparent; transition:all .5s ease, background-color .1s ease; - color: @primary; + color: $primary; display: inline; outline:none; - border:solid 2px @primary; + border:solid 2px $primary; .border; font-size: 1rem; padding: .75rem .75rem; @@ -36,7 +36,7 @@ button, .paper-btn, [type="button"] { .shadow-hover; } &:focus{ - border: 2px solid @secondary; + border: 2px solid $secondary; -webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3); -moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3); box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3); @@ -53,31 +53,32 @@ button, .paper-btn, [type="button"] { a { text-decoration: none; background-image: - linear-gradient(5deg, transparent 65%, @secondary 80%, transparent 90%), - linear-gradient(165deg, transparent 5%, @secondary 15%, transparent 25%), - linear-gradient(165deg, transparent 45%, @secondary 55%, transparent 65%), - linear-gradient(15deg, transparent 25%, @secondary 35%, transparent 50%); + linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), + linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), + linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), + linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%); background-repeat:repeat-x; background-size: 4px 3px; background-position:0 90%; &:visited { text-decoration: none; - color: @primary; + color: $primary; } } -.make-button-color-classes(@i: length(@colors)) when (@i > 0) { - .make-button-color-classes(@i - 1); - @color: extract(@colors, @i); - button.btn-@{color}, .paper-btn.btn-@{color}, [type="button"].btn-@{color} { - border-color: @@color; - background-color: ~"@{@{color}-light}"; - color: ~"@{@{color}-text}"; +@mixin make-button-color-classes($i: length($colors)) when ($i > 0) +{ + @include make-button-color-classes($i - 1); + $color: extract($colors, $i); + button.btn-${color}, .paper-btn.btn-${color}, [type="button"].btn-${color} { + border-color: $$color; + background-color: #{"${${color}-light}"}; + color: #{"${${color}-text}"}; &:hover:active{ - @darkcolour: ~"@{color}-light"; - background-color: darken(@@darkcolour, 10%); + $darkcolour: #{"${color}-light"}; + background-color: darken($$darkcolour, 10%); } } } -.make-button-color-classes(); +@include make-button-color-classes(); diff --git a/src/cards.less b/src/cards.scss similarity index 83% rename from src/cards.less rename to src/cards.scss index 027de80..203740e 100644 --- a/src/cards.less +++ b/src/cards.scss @@ -9,20 +9,20 @@ display: flex; flex-direction: column; word-wrap: break-word; - border: 2px solid @muted-light; + border: 2px solid $muted-light; .card-header, .card-footer { padding: .75rem 1.25rem; - background-color: @white-dark; + background-color: $white-dark; } .card-header { - border-bottom: 2px solid @muted-light; + border-bottom: 2px solid $muted-light; } .card-footer { - border-top: 2px solid @muted-light; + border-top: 2px solid $muted-light; } .card-body { diff --git a/src/code.less b/src/code.scss similarity index 69% rename from src/code.less rename to src/code.scss index 1b88aa4..bf71f6a 100644 --- a/src/code.less +++ b/src/code.scss @@ -3,15 +3,15 @@ code { padding: 2px 4px; font-size: 80%; - color: @secondary; - background-color: lighten(@primary, 70%); + color: $secondary; + background-color: lighten($primary, 70%); border-radius: 3px; } kbd { padding: 2px 4px; font-size: 80%; - color: @white; - background-color: @primary; + color: $white; + background-color: $primary; border-radius: 3px; } pre { @@ -19,11 +19,11 @@ pre { padding: 1em; font-size: 80%; line-height: 1.5; - color: @primary; + color: $primary; word-break: break-all; word-wrap: break-word; - background-color: lighten(@primary, 73%); - border: 1px solid lighten(@primary, 50%); + background-color: lighten($primary, 73%); + border: 1px solid lighten($primary, 50%); border-radius: 3px; overflow-x: auto; white-space: pre; diff --git a/src/colors.less b/src/colors.less deleted file mode 100644 index 1229720..0000000 --- a/src/colors.less +++ /dev/null @@ -1,41 +0,0 @@ -@primary: #41403E; -@secondary: #0071DE; - -@success: #86a361; -@warning: #ddcd45; -@danger: #a7342d; -@muted: #868e96; - -@primary-light: lighten(@primary, 50%); -@secondary-light: lighten(@secondary, 50%); -@success-light: lighten(@success, 30%); -@warning-light: lighten(@warning, 30%); -@danger-light: lighten(@danger, 45%); -@muted-light: lighten(@muted, 35%); - -@white-dark: rgba(0, 0, 0, 0.03); -@light-dark: rgba(0, 0, 0, 0.7); -@white: rgba(255, 255, 255, 1); -@main-background: rgba(255, 255, 255, 1); - -@primary-text: #FFF; -@secondary-text: @primary; -@success-text: @primary; -@warning-text: @primary; -@danger-text: @primary; -@muted-text: @primary; - -@colors: primary, secondary, success, warning, danger, muted; - -.make-text-color-classes(@i: length(@colors)) when (@i > 0) { - .make-text-color-classes(@i - 1); - @color: extract(@colors, @i); - .text-@{color} { - color: @@color; - } - .background-@{color}{ - background-color: ~"@{@{color}-light}"; - } -} - -.make-text-color-classes(); diff --git a/src/container.less b/src/container.scss similarity index 66% rename from src/container.less rename to src/container.scss index 11e6e2b..8b82c22 100644 --- a/src/container.less +++ b/src/container.scss @@ -1,25 +1,26 @@ @import './colors.less'; -@large-screen: ~"screen and (max-width: 1200px)"; -@medium-screen: ~"screen and (max-width: 992px)"; -@small-screen: ~"screen and (max-width: 768px)"; -@xsmall-screen: ~"screen and (max-width: 480px)"; +$large-screen: #{"screen and (max-width: 1200px)"}; +$medium-screen: #{"screen and (max-width: 992px)"}; +$small-screen: #{"screen and (max-width: 768px)"}; +$xsmall-screen: #{"screen and (max-width: 480px)"}; .container { width: 100%; max-width: 960px; position: relative; margin: 0 auto; - @media @medium-screen { + @media $medium-screen { width: 85%; } - @media @xsmall-screen { + @media $xsmall-screen { width: 90%; } } -.hr-after() { +@mixin hr-after() +{ text-align: center; - color: lighten(@primary, 30%); + color: lighten($primary, 30%); display: block; content: "~~~"; position: relative; @@ -41,15 +42,15 @@ hr:after { top: -.75rem; } .paper { - border: 1px solid @primary-light; - background-color: @main-background; + border: 1px solid $primary-light; + background-color: $main-background; padding: 2rem; margin-top: 1rem; margin-bottom: 1rem; -webkit-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2); -moz-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2); box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2); - @media @xsmall-screen { + @media $xsmall-screen { padding: 1rem; width: 100%; margin-top: 0; diff --git a/src/flexbox.less b/src/flexbox.scss similarity index 71% rename from src/flexbox.less rename to src/flexbox.scss index 9127c92..50a16d5 100644 --- a/src/flexbox.less +++ b/src/flexbox.scss @@ -1,39 +1,43 @@ -@columnNames: col, sm, md, lg; -@columnSizes: 0px, 768px, 992px, 1200px; +$columnNames: col, sm, md, lg; +$columnSizes: 0px, 768px, 992px, 1200px; -@numberOfColumns: 12; +$numberOfColumns: 12; -.make-column-class(@name, @size, @n, @p: 1) when (@p =< @n) { - @percent: (@p * 100% / @n); - .@{name}-@{p} { - .col-size(@percent); +@mixin make-column-class($name, $size, $n, $p: 1) when ($p =< $n) +{ + $percent: ($p * 100% / $n); + .${name}-${p} { + @include col-size($percent); } - .make-column-class(@name, @size, @n, (@p + 1)); + @include make-column-class($name, $size, $n, ($p + 1)); } -.make-column-classes(@n, @j: 1) when (@j =< length(@columnNames)) { - @columnName: extract(@columnNames, @j); - @columnSize: extract(@columnSizes, @j); - @media (min-width: @columnSize) { - .make-column-class(@columnName, @columnSize, @n); +@mixin make-column-classes($n, $j: 1) when ($j =< length($columnNames)) +{ + $columnName: extract($columnNames, $j); + $columnSize: extract($columnSizes, $j); + @media (min-width: $columnSize) { + @include make-column-class($columnName, $columnSize, $n); } - .make-column-classes(@n, @j + 1); + @include make-column-classes($n, $j + 1); } -.center-all() { +@mixin center-all() +{ -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } -.col-size(@percent) { +@mixin col-size($percent) +{ -webkit-box-flex: 0; - -webkit-flex: 0 0 @percent; - -ms-flex: 0 0 @percent; - flex: 0 0 @percent; - max-width: @percent; + -webkit-flex: 0 0 $percent; + -ms-flex: 0 0 $percent; + flex: 0 0 $percent; + max-width: $percent; } .row { margin-right: auto; @@ -94,14 +98,14 @@ padding: 1rem; @media (max-width: 767px) { // Stack for mobile - .col-size(100%); + @include col-size(100%); } } .col-fill { width: auto; flex: 1 1 0px; } -.make-column-classes(@numberOfColumns); +@include make-column-classes($numberOfColumns); .align-top { -webkit-align-self: flex-start; -ms-flex-item-align: start; diff --git a/src/fonts.less b/src/fonts.scss similarity index 65% rename from src/fonts.less rename to src/fonts.scss index 422a449..1a61bb3 100644 --- a/src/fonts.less +++ b/src/fonts.scss @@ -2,21 +2,21 @@ @import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC'); -@global-font-size: 20px; -@header-font: 'Patrick Hand SC'; -@body-font: 'Neucha'; -@font-color: @primary; +$global-font-size: 20px; +$header-font: 'Patrick Hand SC'; +$body-font: 'Neucha'; +$font-color: $primary; html { - font-size: @global-font-size; - font-family: @body-font, sans-serif; - color: @font-color; + font-size: $global-font-size; + font-family: $body-font, sans-serif; + color: $font-color; } p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option { - font-family: @body-font, sans-serif; + font-family: $body-font, sans-serif; } h1, h2, h3, h4, h5, h6 { - font-family: @header-font, sans-serif; + font-family: $header-font, sans-serif; font-weight: normal; } h1 { diff --git a/src/forms.less b/src/forms.scss similarity index 89% rename from src/forms.less rename to src/forms.scss index 752af26..e9df9f0 100644 --- a/src/forms.less +++ b/src/forms.scss @@ -3,7 +3,7 @@ input, select, textarea { display: block; background:transparent; - color:@primary; + color:$primary; outline:none; border-top-left-radius: 255px 15px; border-top-right-radius: 15px 225px; @@ -11,9 +11,9 @@ input, select, textarea { border-bottom-left-radius:15px 255px; font-size: 1rem; padding: .5rem .5rem; - border: 2px solid @primary; + border: 2px solid $primary; &:focus { - border: 2px solid @secondary; + border: 2px solid $secondary; } &.disabled, &[disabled]{ .disabled; @@ -68,7 +68,7 @@ input, select, textarea { position: relative; width: 1rem; height: 1rem; - border: 2px solid @primary; + border: 2px solid $primary; margin-right: 0.75em; vertical-align: -0.25em; } @@ -87,14 +87,14 @@ input, select, textarea { /* the checked style using the :checked pseudo class */ input[type="radio"]:checked + span:before { - @escaped-svg: escape(""); - @radio-fill: "data:image/svg+xml,@{escaped-svg}"; - background: url(@radio-fill) left center no-repeat; + $escaped-svg: escape(""); + $radio-fill: "data:image/svg+xml,${escaped-svg}"; + background: url($radio-fill) left center no-repeat; } input[type="checkbox"]:checked + span:before { - @escaped-svg: escape(""); - @check-fill: "data:image/svg+xml,@{escaped-svg}"; - background: url(@check-fill) left center no-repeat; + $escaped-svg: escape(""); + $check-fill: "data:image/svg+xml,${escaped-svg}"; + background: url($check-fill) left center no-repeat; } } } diff --git a/src/images.less b/src/images.scss similarity index 100% rename from src/images.less rename to src/images.scss diff --git a/src/lists.less b/src/lists.scss similarity index 78% rename from src/lists.less rename to src/lists.scss index 07b5078..5978aef 100644 --- a/src/lists.less +++ b/src/lists.scss @@ -13,9 +13,10 @@ ol { } } } -.li-bullet(@char) { +@mixin li-bullet($char) +{ li:before { - content: @char; + content: $char; } } ul { @@ -28,13 +29,13 @@ ul { position: relative; left: -7px; } - .li-bullet("-"); + @include li-bullet("-"); ul { - .li-bullet("+"); + @include li-bullet("+"); ul { - .li-bullet("~"); + @include li-bullet("~"); ul { - .li-bullet("⤍"); + @include li-bullet("⤍"); ul { .li-bullet("⁎") } diff --git a/src/modals.less b/src/modals.scss similarity index 61% rename from src/modals.less rename to src/modals.scss index 27d0224..3df1a3b 100644 --- a/src/modals.less +++ b/src/modals.scss @@ -2,16 +2,18 @@ @import './container.less'; @import './utilities.less'; -.translate(@x; @y) { - -webkit-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - transform: translate(@x, @y); +@mixin translate($x; $y) +{ + -webkit-transform: translate($x, $y); + -ms-transform: translate($x, $y); + transform: translate($x, $y); } -.transition-transform(@transition) { - -webkit-transition: -webkit-transform @transition; - -moz-transition: -moz-transform @transition; - -o-transition: -o-transform @transition; - transition: transform @transition; +@mixin transition-transform($transition) +{ + -webkit-transition: -webkit-transform $transition; + -moz-transition: -moz-transform $transition; + -o-transition: -o-transform $transition; + transition: transform $transition; } .modal{ @@ -31,7 +33,7 @@ display: flex; } .modal-body{ - .translate(0, 0); + @include translate(0, 0); top: 20%; } } @@ -39,31 +41,31 @@ .modal-body{ flex: 1 1 auto; padding: 1.25rem; - background: @white; - border: 2px solid @muted-light; + background: $white; + border: 2px solid $muted-light; word-wrap: break-word; position: fixed; z-index: 11; max-width: 960px; - @media @medium-screen { + @media $medium-screen { max-width: 85%; } - @media @xsmall-screen { + @media $xsmall-screen { max-width: 90%; } - .translate(0, -500%); - .transition-transform(~"0.3s ease-out"); + @include translate(0, -500%); + @include transition-transform(#{"0.3s ease-out"}); } .btn-close{ - color: @primary-light; + color: $primary-light; font-size: 30px; text-decoration: none; position: absolute; right: 0; top: 0; .margin; background: inherit; &:hover{ - color: @muted; + color: $muted; } } @@ -92,6 +94,6 @@ a button { text-decoration: none; - background: @white; + background: $white; } } diff --git a/src/popovers.less b/src/popovers.scss similarity index 97% rename from src/popovers.less rename to src/popovers.scss index d5603aa..53a0640 100644 --- a/src/popovers.less +++ b/src/popovers.scss @@ -27,8 +27,8 @@ min-width: 80px; font-size: 0.7em; text-align: center; - color: @white; - background: @light-dark; + color: $white; + background: $light-dark; transition: opacity .25s ease-out; transform: translateX(-50%) translateY(-100%); .border; diff --git a/src/reset.less b/src/reset.scss similarity index 100% rename from src/reset.less rename to src/reset.scss diff --git a/src/shadows.less b/src/shadows.less deleted file mode 100644 index 3627713..0000000 --- a/src/shadows.less +++ /dev/null @@ -1,39 +0,0 @@ -@shadow-color-regular: hsla(0,0%,0%,.2); -@shadow-color-hover: hsla(0,0%,0%,.3); - -@shadow-small: 10px 19px 17px -13px @shadow-color-regular; -@shadow-regular: 15px 28px 25px -18px @shadow-color-regular; -@shadow-large: 20px 38px 34px -26px @shadow-color-regular; -@shadow-hover: 2px 8px 8px -5px @shadow-color-hover; - -.shadow { - -webkit-box-shadow: @shadow-regular; - -moz-box-shadow: @shadow-regular; - box-shadow: @shadow-regular; - transition: all .5s ease; - &.shadow-large { - -webkit-box-shadow: @shadow-large; - -moz-box-shadow: @shadow-large; - box-shadow: @shadow-large; - } - &.shadow-small { - -webkit-box-shadow: @shadow-small; - -moz-box-shadow: @shadow-small; - box-shadow: @shadow-small; - } - &.shadow-hover { - &:hover{ - -webkit-box-shadow: @shadow-hover; - -moz-box-shadow: @shadow-hover; - box-shadow: @shadow-hover; - transform: translate(0, 2px); - } - } -} -.child-shadows > * { - .shadow; -} -.child-shadows-hover > * { - .shadow; - .shadow-hover; -} \ No newline at end of file diff --git a/src/shadows.scss b/src/shadows.scss new file mode 100644 index 0000000..3573780 --- /dev/null +++ b/src/shadows.scss @@ -0,0 +1,39 @@ +$shadow-color-regular: hsla(0,0%,0%,.2); +$shadow-color-hover: hsla(0,0%,0%,.3); + +$shadow-small: 10px 19px 17px -13px $shadow-color-regular; +$shadow-regular: 15px 28px 25px -18px $shadow-color-regular; +$shadow-large: 20px 38px 34px -26px $shadow-color-regular; +$shadow-hover: 2px 8px 8px -5px $shadow-color-hover; + +.shadow { + -webkit-box-shadow: $shadow-regular; + -moz-box-shadow: $shadow-regular; + box-shadow: $shadow-regular; + transition: all .5s ease; + &.shadow-large { + -webkit-box-shadow: $shadow-large; + -moz-box-shadow: $shadow-large; + box-shadow: $shadow-large; + } + &.shadow-small { + -webkit-box-shadow: $shadow-small; + -moz-box-shadow: $shadow-small; + box-shadow: $shadow-small; + } + &.shadow-hover { + &:hover{ + -webkit-box-shadow: $shadow-hover; + -moz-box-shadow: $shadow-hover; + box-shadow: $shadow-hover; + transform: translate(0, 2px); + } + } +} +.child-shadows > * { + .shadow; +} +.child-shadows-hover > * { + .shadow; + .shadow-hover; +} \ No newline at end of file diff --git a/src/styles.less b/src/styles.less deleted file mode 100644 index c473135..0000000 --- a/src/styles.less +++ /dev/null @@ -1,22 +0,0 @@ -@import (less) "./reset.less"; -@import (less) "./boxreset.less"; -@import (less) "./colors.less"; -@import (less) "./fonts.less"; -@import (less) "./borders.less"; -@import (less) "./shadows.less"; -@import (less) "./flexbox.less"; -@import (less) "./container.less"; -@import (less) "./buttons.less"; -@import (less) "./forms.less"; -@import (less) "./lists.less"; -@import (less) "./code.less"; -@import (less) "./tables.less"; -@import (less) "./images.less"; -@import (less) "./utilities.less"; -@import (less) "./popovers.less"; -@import (less) "./cards.less"; -@import (less) "./badges.less"; -@import (less) "./alerts.less"; -@import (less) "./tabs.less"; -@import (less) "./article.less"; -@import (less) "./modals.less"; diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..0d6bf1d --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,28 @@ +@media screen { + @import 'reset'; + @import 'boxreset'; + @import 'colors'; + @import 'fonts'; + @import 'borders'; + @import 'shadows'; + @import 'flexbox'; + @import 'container'; + @import 'buttons'; + @import 'forms'; + @import 'lists'; + @import 'code'; + @import 'tables'; + @import 'images'; + @import 'utilities'; + @import 'popovers'; + @import 'cards'; + @import 'badges'; + @import 'alerts'; + @import 'tabs'; + @import 'article'; + @import 'modals'; +} + +// @media print { +// @import 'print'; +// } diff --git a/src/tables.less b/src/tables.scss similarity index 83% rename from src/tables.less rename to src/tables.scss index b6768c0..7767827 100644 --- a/src/tables.less +++ b/src/tables.scss @@ -14,7 +14,7 @@ table { padding: 8px; line-height: 1.5; vertical-align: top; - border-top: 1px dashed lighten(@primary, 60%); + border-top: 1px dashed lighten($primary, 60%); } @media screen and (max-width:480px) { thead tr th { @@ -25,9 +25,9 @@ table { } } &.table-hover tbody tr:hover { - color: @secondary; + color: $secondary; } &.table-alternating tbody tr:nth-of-type(even) { - color: lighten(@primary, 25%); + color: lighten($primary, 25%); } } diff --git a/src/tabs.less b/src/tabs.scss similarity index 60% rename from src/tabs.less rename to src/tabs.scss index 5f2736e..4146f5a 100644 --- a/src/tabs.less +++ b/src/tabs.scss @@ -16,25 +16,26 @@ padding: 0.75rem 0.75rem; font-weight: 600; text-align: center; - color: @primary-light; + color: $primary-light; } label:hover { - color: @muted; + color: $muted; cursor: pointer; } input:checked+label { - color: @primary; - border-bottom: solid 3px @secondary; + color: $primary; + border-bottom: solid 3px $secondary; } - .loop(@num) when (@num > 0) { - .loop((@num - 1)); - input[id = ~"tab@{num}"]:checked~div[id = ~"content@{num}"]{ + @mixin loop($num) when ($num > 0) +{ + @include loop(($num - 1)); + input[id = #{"tab${num}"]:checked~div[id = ~"content${num}"}]{ display:block; } } - .loop(5); + @include loop(5); } diff --git a/src/utilities.less b/src/utilities.scss similarity index 56% rename from src/utilities.less rename to src/utilities.scss index 0df5620..ca6ea0d 100644 --- a/src/utilities.less +++ b/src/utilities.scss @@ -1,122 +1,122 @@ -@base: 1rem; -@large: 2rem; -@small: .5rem; +$base: 1rem; +$large: 2rem; +$small: .5rem; .margin { - margin: @base; + margin: $base; &-top { - margin-top: @base; + margin-top: $base; &-large { - margin-top: @large; + margin-top: $large; } &-small { - margin-top: @small; + margin-top: $small; } &-none { margin-top: 0; } } &-right { - margin-right: @base; + margin-right: $base; &-large { - margin-right: @large; + margin-right: $large; } &-small { - margin-right: @small; + margin-right: $small; } &-none { margin-right: 0; } } &-bottom { - margin-bottom: @base; + margin-bottom: $base; &-large { - margin-bottom: @large; + margin-bottom: $large; } &-small { - margin-bottom: @small; + margin-bottom: $small; } &-none { margin-bottom: 0; } } &-left { - margin-left: @base; + margin-left: $base; &-large { - margin-left: @large; + margin-left: $large; } &-small { - margin-left: @small; + margin-left: $small; } &-none { margin-left: 0; } } &-large { - margin: @large; + margin: $large; } &-small { - margin: @small; + margin: $small; } &-none { margin: 0; } } .padding { - padding: @base; + padding: $base; &-top { - padding-top: @base; + padding-top: $base; &-large { - padding-top: @large; + padding-top: $large; } &-small { - padding-top: @small; + padding-top: $small; } &-none { padding-top: 0; } } &-right { - padding-right: @base; + padding-right: $base; &-large { - padding-right: @large; + padding-right: $large; } &-small { - padding-right: @small; + padding-right: $small; } &-none { padding-right: 0; } } &-bottom { - padding-bottom: @base; + padding-bottom: $base; &-large { - padding-bottom: @large; + padding-bottom: $large; } &-small { - padding-bottom: @small; + padding-bottom: $small; } &-none { padding-bottom: 0; } } &-left { - padding-left: @base; + padding-left: $base; &-large { - padding-left: @large; + padding-left: $large; } &-small { - padding-left: @small; + padding-left: $small; } &-none { padding-left: 0; } } &-large { - padding: @large; + padding: $large; } &-small { - padding: @small; + padding: $small; } &-none { padding: 0;