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;