Moved from CSS to SASS with gulp

ketchalegend · Oct 11, 2016 · dd9d1a9 · dd9d1a9
1 parent 94a19f5
commit dd9d1a9
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,17 @@
 .vscode/
 
+# Gulp
+css
+
+# Build
+electronizr-linux-armv7l/
+electronizr-linux-ia32/
+electronizr-linux-x64/
+electronizr-win32-ia32/
+electronizr-win32-x64/
+electronizr-darwin-ia32/
+electronizr-darwin-x64/
+
 # Logs
 logs
 *.log

diff --git a/assets/scss/app.scss b/assets/scss/app.scss
@@ -0,0 +1,47 @@
+@import 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i';
+
+$background-color: transparentize(#ECEFF1, 0.05);
+$text-color: #212121;
+$highlight-color: #0277BD;
+
+body{
+	background-color: $background-color;
+	margin: 0;
+	padding: 0;
+
+	font-family: 'Roboto', 'Segoe UI', sans-serif;	
+}
+
+div.vertical-center{
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);	
+	width: 100%;
+
+	input{
+		width: 100%;
+		padding: 15px 0;
+		border: none;
+		outline: none;
+		text-align: center;
+		background-color: transparent;
+		color: $text-color;
+		font-size: 36px;		
+		font-weight: 600;
+	}
+
+	div.result-value{
+		width: 100%;
+		min-height: 40px;
+		text-align: center;
+		color: $highlight-color;
+		font-size: 24px;
+		font-weight: 400;
+	}
+
+	div.result-path{
+		width: 100%;
+		display: none;
+		text-align: center;
+	}
+}
diff --git a/css/styles.css b/css/styles.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,24 @@
+'use strict';
+
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var minifyCss = require('gulp-minify-css');
+
+var filesToWatch = [
+    './assets/scss/**/*.scss'
+];
+
+var sassFileToCompile = './assets/scss/app.scss';
+var sassDestFolder = './css';
+
+gulp.task('sass', function(){
+    return gulp
+        .src(sassFileToCompile)
+        .pipe(sass().on('error', sass.logError))
+        .pipe(minifyCss())
+        .pipe(gulp.dest(sassDestFolder));
+});
+
+gulp.task('watch', ['sass'], function(){
+    gulp.watch(filesToWatch, ['sass'])
+});
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>electronizr</title>    
-    <link rel="stylesheet" href="./css/styles.css">
+    <link rel="stylesheet" href="./css/app.css">
 </head>
 <body>
 

diff --git a/js/script.js b/js/script.js
@@ -135,9 +135,5 @@ $(function(){
             searchResultIndex++;
             DisplaySearchResult();
         }
-        if(e.keyCode === 38){
-            searchResultIndex--;
-            DisplaySearchResult;
-        }
     });
 });
diff --git a/package.json b/package.json
@@ -8,7 +8,10 @@
     "fast-levenshtein": "^2.0.5"
   },
   "devDependencies": {
-    "electron-prebuilt": "^0.35.2"
+    "electron-prebuilt": "^0.35.2",
+    "gulp": "^3.9.1",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-sass": "^2.3.2"
   },
   "scripts": {
     "start": "electron main.js"