Merge pull request #39 from tuxmachine/modularize

Parameterise derived colours and update module resolution
mblode · Jan 10, 2019 · 80ee701 · 80ee701
2 parents 7f11145 + 551fda8
commit 80ee701
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 27 deletions.
diff --git a/css/marx.min.css.map b/css/marx.min.css.map
diff --git a/css/marx.styl.css b/css/marx.styl.css
diff --git a/css/marx.styl.min.css b/css/marx.styl.min.css
diff --git a/css/marx.styl.min.css.map b/css/marx.styl.min.css.map
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,4 +1,5 @@
 // Load plugins
+const path = require('path');
 const browsersync = require('browser-sync').create();
 const gulp = require('gulp');
 const autoprefixer = require('autoprefixer');
@@ -36,7 +37,7 @@ function scss() {
 		.src('./scss/**/[^_]*.scss')
 		.pipe(plumber())
 		.pipe(sourcemaps.init())
-		.pipe(sass())
+		.pipe(sass({ includePaths: [ path.resolve(__dirname, 'node_modules') ] }))
 		.pipe(postcss([autoprefixer(), cssnano()]))
 		.pipe(gulp.dest('css/'))
 		.pipe(rename({ suffix: '.min' }))

diff --git a/package.json b/package.json
@@ -62,7 +62,9 @@
     "url": "https://github.com/mblode/marx/issues"
   },
   "homepage": "https://github.com/mblode/marx",
-  "dependencies": {},
+  "dependencies": {
+    "sanitize.css": "^8.0.0"
+  },
   "devDependencies": {
     "autoprefixer": "^9.4.3",
     "browser-sync": "^2.26.3",
@@ -77,7 +79,6 @@
     "gulp-sass": "^4.0.2",
     "gulp-sourcemaps": "^2.6.4",
     "gulp-stylus": "^2.7.0",
-    "merge-stream": "^1.0.1",
-    "sanitize.css": "^8.0.0"
+    "merge-stream": "^1.0.1"
   }
 }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -30,17 +30,17 @@ input[type=submit]:hover,
 input[type=reset]:hover,
 input[type=button]:hover,
 button:hover {
-  background-color: #0069d9;
-  border-color: #0062cc;
+  background-color: darken($primary, 7.5%);
+  border-color: darken($primary, 10%);
   color: $white;
 }
 
 input[type=submit]:not(:disabled):active,
 input[type=reset]:not(:disabled):active,
 input[type=button]:not(:disabled):active,
 button:not(:disabled):active {
-  background-color: #0062cc;
-  border-color: #005cbf;
+  background-color: darken($primary, 10%);
+  border-color: darken($primary, 12.5%);
   color: $white;
 }
 
@@ -49,7 +49,7 @@ input[type=reset]:focus,
 input[type=button]:focus,
 button:focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.5);
+  box-shadow: 0 0 0 0.2rem fade_out($primary, 0.5);
 }
 
 input[type=submit]:disabled,

diff --git a/scss/_form.scss b/scss/_form.scss
@@ -66,16 +66,16 @@ input[type="color"]:focus,
 select:focus,
 textarea:focus {
   background-color: #fff;
-  border-color: #80bdff;
+  border-color: mix($primary, #fff);
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+  box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75);
 }
 
 input:not([type]):focus {
   background-color: #fff;
-  border-color: #80bdff;
+  border-color: mix($primary, #fff);
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+  box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75);
 }
 
 input[type="file"]:focus,

diff --git a/scss/marx.scss b/scss/marx.scss
@@ -1,6 +1,6 @@
 @charset 'utf-8';
 
-@import '../node_modules/sanitize.css/sanitize';
+@import 'sanitize.css/sanitize';
 
 /*! Marx v3.0.0 - The classless CSS reset (perfect for Communists) | MIT License | https://github.com/mblode/marx */
 @import 'variables';

diff --git a/styl/_buttons.styl b/styl/_buttons.styl
@@ -28,24 +28,24 @@ input[type=submit]:hover,
 input[type=reset]:hover,
 input[type=button]:hover,
 button:hover
-  background-color: #0069d9
-  border-color: #0062cc
+  background-color: darken($primary, 15%)
+  border-color: darken($primary, 20%)
   color: $white
 
 input[type=submit]:active,
 input[type=reset]:active,
 input[type=button]:active,
 button:active
-  background-color: #0062cc
-  border-color: #005cbf
+  background-color: darken($primary, 20%)
+  border-color: darken($primary, 25%)
   color: $white
 
 input[type=submit]:focus,
 input[type=reset]:focus,
 input[type=button]:focus,
 button:focus
   outline: 0
-  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.5)
+  box-shadow: 0 0 0 0.2rem alpha($primary, 0.5)
 
 input[type=submit]:disabled,
 input[type=reset]:disabled,

diff --git a/styl/_form.styl b/styl/_form.styl
@@ -63,15 +63,15 @@ input[type="color"]:focus,
 select:focus,
 textarea:focus
   background-color: #fff
-  border-color: #80bdff
+  border-color: mix($primary, #fff)
   outline: 0
-  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25)
+  box-shadow: 0 0 0 0.2rem alpha($primary, 0.25)
 
 input:not([type]):focus
   background-color: #fff
-  border-color: #80bdff
+  border-color: mix($primary, #fff)
   outline: 0
-  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25)
+  box-shadow: 0 0 0 0.2rem alpha($primary, 0.25)
 
 input[type="file"]:focus,
 input[type="radio"]:focus,