use css checkered backgrounds

etsaaron · etsaaron · commit 8cb5f6dbd374 · 2017-12-20T16:34:04.000-08:00
diff --git a/assets/styles/main.css b/assets/styles/main.css
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -74,8 +74,8 @@ header {
   position: absolute;
   top: 0;
   left: 0;
-  background: transparent url('/assets/img/tile-dark.jpg') 0 0 repeat;
-  background-size: 20px;
+  //background: transparent url('/assets/img/tile-dark.jpg') 0 0 repeat;
+  //background-size: 20px;
   border-right: solid 8px #24292e;
   p {
     color: #fafbfc;
@@ -169,8 +169,8 @@ header {
 
 .dropbox {
   border: solid 1px #E0E0E0;
-  background: transparent url('/assets/img/tile-light.jpg') 0 0 repeat;
-  background-size: 20px;
+  //background: transparent url('/assets/img/tile-light.jpg') 0 0 repeat;
+  //background-size: 20px;
   margin: 0 auto;
   float: left;
   position: relative;
@@ -254,3 +254,25 @@ textarea {
 .dimensions {
   font-size: 0.9em;
 }
+
+.dark-checkered {
+  background-color: #757575;
+  background-image:
+    linear-gradient(45deg, #424242 25%, transparent 25%),
+    linear-gradient(-45deg, #424242 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #424242 75%),
+    linear-gradient(-45deg, transparent 75%, #424242 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.light-checkered {
+  background-color: #f5f5f5;
+  background-image:
+    linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Responsive CSS Sprite Generator</title><meta name="description" content="A tool for generating responsive CSS sprites."><meta name="keywords" content="Responsive,CSS,Sprite,Generator,Generated,Tool"><meta name="author" content="Aaron Eivers"><link rel="icon" href="./favicon.ico?v=2"><link rel="manifest" href="/manifest.webmanifest"><style>/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
-html{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:'Roboto Condensed',sans-serif;color:#24292e}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}body,html{height:100%}canvas{vertical-align:middle}.page-wrap{padding-top:120px;position:relative;height:100%}header{height:120px;width:100%;min-width:1024px;background-color:#24292e;position:fixed;z-index:3;padding:8px 10px 0}header h1{font-size:2em;margin:0 0 2px;color:#fff;font-weight:400}header h2{font-size:.85em;color:rgba(255,255,255,.75);font-weight:400;margin:0 0 15px}header input{font-size:1em;padding:6px;font-family:'Roboto Condensed',sans-serif;background-color:rgba(255,255,255,.125);color:#fff;border:none;border-radius:2px}header input:last-child{width:30px;text-align:center}header input.path-input{width:400px}header label{color:rgba(255,255,255,.75);font-size:1em}.content{position:relative;min-height:100%}.file-list{width:200px;min-height:100%;position:absolute;top:0;left:0;background:transparent url(/assets/img/tile-dark.jpg) 0 0 repeat;background-size:20px;border-right:solid 8px #24292e}.file-list p{color:#fafbfc}.file-list ul{list-style:none;margin:0;padding:5px 5px 0}.file-list ul li{position:relative;padding:5px;margin:0 0 5px;min-height:29px;border:solid 1px transparent}.file-list ul li img{max-width:100%;height:auto;display:block}.file-list ul li span{position:absolute;bottom:5px;left:5px;background-color:#333;color:#fff;padding:3px;font-size:.8em;border-radius:5px;opacity:0}.file-list ul li:hover{border:dashed 1px #fff}.file-list ul li:hover span{opacity:1}.file-list ul li:hover .remove{opacity:1}.file-list .remove{position:absolute;top:3px;right:3px;width:24px;height:24px;background:transparent url(/assets/img/ic_clear_black_24px.svg) 0 0 no-repeat;cursor:pointer;opacity:.5;-webkit-filter:invert(1);filter:invert(1)}.file-list .remove:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.output{padding:10px 10px 10px 210px}.output b{font-size:1.1em}.add-files-btn{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:48px;height:48px;background:transparent url(/assets/img/ic_add_circle_black_48px.svg) center center no-repeat;cursor:pointer;display:none}.add-files-text{position:absolute;top:76px;left:0;right:0;bottom:0;margin:auto;width:175px;height:20px;text-align:center;cursor:pointer;display:none}.dropbox{border:solid 1px #e0e0e0;background:transparent url(/assets/img/tile-light.jpg) 0 0 repeat;background-size:20px;margin:0 auto;float:left;position:relative;min-width:100%;min-height:512px;cursor:pointer}.dropbox.is-empty .add-files-btn,.dropbox.is-empty .add-files-text{display:block}.fileSelect{display:block}.clear{width:100%;clear:both}.result{padding:10px 0 0 0}textarea{width:1024px;font-family:'Roboto Condensed',sans-serif;padding:10px 8px;background-color:#f5f5f5;-webkit-box-shadow:none;box-shadow:none;border:solid 1px #e0e0e0}.button{width:65px;height:65px;border-radius:5px;cursor:pointer;-webkit-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease}.button:hover{background-color:#00e5ff}.button span{display:block;position:absolute;left:0;bottom:100%;width:100%;font-size:.8em;color:rgba(255,255,255,.75);text-align:center;padding-bottom:5px}.download{position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.125) url(/assets/img/ic_file_download_white_48px.svg) center center no-repeat}.download-info{font-size:.9em;margin-bottom:2px}.copy{position:absolute;bottom:10px;right:85px;background:rgba(255,255,255,.125) url(/assets/img/ic_content_copy_white_48px.svg) center center no-repeat}.github{position:relative;left:10px;top:5px;display:inline-block;background:transparent url(/assets/img/GitHub-Mark-Light-32px.png) 0 0 no-repeat;width:32px;height:32px}.dimensions{font-size:.9em}</style></head><body><header><h1>Responsive CSS Sprite Generator<a class="github" href="https://github.com/eivers88/responsive-css-sprite-generator" target="_blank" rel="noopener"></a></h1><h2>A tool for generating CSS sprite sheets using percentage based background positions</h2><div id="download" class="download button"><span>Download</span></div><div id="copy" class="copy button" data-clipboard-target="#css"><span>Copy CSS</span></div><label for="prefix">Class Prefix:&nbsp;</label><input id="prefix" type="text" name="prefix" placeholder="class prefix" value=""><label for="path">&nbsp;Path:&nbsp;</label><input id="path" class="path-input" type="text" name="path" placeholder="path" value="sprite.png"><label for="padding">&nbsp;Padding (px):&nbsp;</label><input id="padding" type="text" name="padding" placeholder="padding" maxlength="2" value="2"></header><div class="page-wrap"><input type="file" id="fileElem" multiple="multiple" accept="image/*" style="display:none"><section class="content"><div id="fileList" class="file-list"></div><div class="output"><div><b>Generated Sprite</b>&nbsp;<span id="dimensions" class="dimensions"></span></div><div class="download-info">If the download button does not work, right click the sprite and select "Save Image As..."</div><div id="dropbox" class="dropbox is-empty"><canvas id="canvas" width="256" height="256"></canvas><div class="add-files-btn"></div><div class="add-files-text">Add some images!</div></div><div class="clear"></div><div class="result"><div><b>Generated CSS</b></div><textarea id="css" cols="120" rows="20" name="css"></textarea></div></div></section></div><script>(function (i, s, o, g, r, a, m) {
+html{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:'Roboto Condensed',sans-serif;color:#24292e}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}body,html{height:100%}canvas{vertical-align:middle}.page-wrap{padding-top:120px;position:relative;height:100%}header{height:120px;width:100%;min-width:1024px;background-color:#24292e;position:fixed;z-index:3;padding:8px 10px 0}header h1{font-size:2em;margin:0 0 2px;color:#fff;font-weight:400}header h2{font-size:.85em;color:rgba(255,255,255,.75);font-weight:400;margin:0 0 15px}header input{font-size:1em;padding:6px;font-family:'Roboto Condensed',sans-serif;background-color:rgba(255,255,255,.125);color:#fff;border:none;border-radius:2px}header input:last-child{width:30px;text-align:center}header input.path-input{width:400px}header label{color:rgba(255,255,255,.75);font-size:1em}.content{position:relative;min-height:100%}.file-list{width:200px;min-height:100%;position:absolute;top:0;left:0;border-right:solid 8px #24292e}.file-list p{color:#fafbfc}.file-list ul{list-style:none;margin:0;padding:5px 5px 0}.file-list ul li{position:relative;padding:5px;margin:0 0 5px;min-height:29px;border:solid 1px transparent}.file-list ul li img{max-width:100%;height:auto;display:block}.file-list ul li span{position:absolute;bottom:5px;left:5px;background-color:#333;color:#fff;padding:3px;font-size:.8em;border-radius:5px;opacity:0}.file-list ul li:hover{border:dashed 1px #fff}.file-list ul li:hover span{opacity:1}.file-list ul li:hover .remove{opacity:1}.file-list .remove{position:absolute;top:3px;right:3px;width:24px;height:24px;background:transparent url(/assets/img/ic_clear_black_24px.svg) 0 0 no-repeat;cursor:pointer;opacity:.5;-webkit-filter:invert(1);filter:invert(1)}.file-list .remove:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.output{padding:10px 10px 10px 210px}.output b{font-size:1.1em}.add-files-btn{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:48px;height:48px;background:transparent url(/assets/img/ic_add_circle_black_48px.svg) center center no-repeat;cursor:pointer;display:none}.add-files-text{position:absolute;top:76px;left:0;right:0;bottom:0;margin:auto;width:175px;height:20px;text-align:center;cursor:pointer;display:none}.dropbox{border:solid 1px #e0e0e0;margin:0 auto;float:left;position:relative;min-width:100%;min-height:512px;cursor:pointer}.dropbox.is-empty .add-files-btn,.dropbox.is-empty .add-files-text{display:block}.fileSelect{display:block}.clear{width:100%;clear:both}.result{padding:10px 0 0 0}textarea{width:1024px;font-family:'Roboto Condensed',sans-serif;padding:10px 8px;background-color:#f5f5f5;-webkit-box-shadow:none;box-shadow:none;border:solid 1px #e0e0e0}.button{width:65px;height:65px;border-radius:5px;cursor:pointer;-webkit-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease}.button:hover{background-color:#00e5ff}.button span{display:block;position:absolute;left:0;bottom:100%;width:100%;font-size:.8em;color:rgba(255,255,255,.75);text-align:center;padding-bottom:5px}.download{position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.125) url(/assets/img/ic_file_download_white_48px.svg) center center no-repeat}.download-info{font-size:.9em;margin-bottom:2px}.copy{position:absolute;bottom:10px;right:85px;background:rgba(255,255,255,.125) url(/assets/img/ic_content_copy_white_48px.svg) center center no-repeat}.github{position:relative;left:10px;top:5px;display:inline-block;background:transparent url(/assets/img/GitHub-Mark-Light-32px.png) 0 0 no-repeat;width:32px;height:32px}.dimensions{font-size:.9em}.dark-checkered{background-color:#757575;background-image:-o-linear-gradient(45deg,#424242 25%,transparent 25%),-o-linear-gradient(135deg,#424242 25%,transparent 25%),-o-linear-gradient(45deg,transparent 75%,#424242 75%),-o-linear-gradient(135deg,transparent 75%,#424242 75%);background-image:linear-gradient(45deg,#424242 25%,transparent 25%),linear-gradient(-45deg,#424242 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#424242 75%),linear-gradient(-45deg,transparent 75%,#424242 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.light-checkered{background-color:#f5f5f5;background-image:-o-linear-gradient(45deg,#e0e0e0 25%,transparent 25%),-o-linear-gradient(135deg,#e0e0e0 25%,transparent 25%),-o-linear-gradient(45deg,transparent 75%,#e0e0e0 75%),-o-linear-gradient(135deg,transparent 75%,#e0e0e0 75%);background-image:linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}</style></head><body><header><h1>Responsive CSS Sprite Generator<a class="github" href="https://github.com/eivers88/responsive-css-sprite-generator" target="_blank" rel="noopener"></a></h1><h2>A tool for generating CSS sprite sheets using percentage based background positions</h2><div id="download" class="download button"><span>Download</span></div><div id="copy" class="copy button" data-clipboard-target="#css"><span>Copy CSS</span></div><label for="prefix">Class Prefix:&nbsp;</label><input id="prefix" type="text" name="prefix" placeholder="class prefix" value=""><label for="path">&nbsp;Path:&nbsp;</label><input id="path" class="path-input" type="text" name="path" placeholder="path" value="sprite.png"><label for="padding">&nbsp;Padding (px):&nbsp;</label><input id="padding" type="text" name="padding" placeholder="padding" maxlength="2" value="2"></header><div class="page-wrap"><input type="file" id="fileElem" multiple="multiple" accept="image/*" style="display:none"><section class="content"><div id="fileList" class="file-list dark-checkered"></div><div class="output"><div><b>Generated Sprite</b>&nbsp;<span id="dimensions" class="dimensions"></span></div><div class="download-info">If the download button does not work, right click the sprite and select "Save Image As..."</div><div id="dropbox" class="dropbox is-empty light-checkered"><canvas id="canvas" width="256" height="256"></canvas><div class="add-files-btn"></div><div class="add-files-text">Add some images!</div></div><div class="clear"></div><div class="result"><div><b>Generated CSS</b></div><textarea id="css" cols="120" rows="20" name="css"></textarea></div></div></section></div><script>(function (i, s, o, g, r, a, m) {
     i['GoogleAnalyticsObject'] = r;
     i[r] = i[r] || function () {
       (i[r].q = i[r].q || []).push(arguments)
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "main": "gulpfile.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "gulp usemin",
     "start": "concurrently \"gulp watch\" \"webpack --watch\""
   },
   "repository": {
diff --git a/src/index.html b/src/index.html
@@ -42,14 +42,14 @@ <h2>A tool for generating CSS sprite sheets using percentage based background po
   <input type="file" id="fileElem" multiple accept="image/*" style="display:none">
 
   <section class="content">
-    <div id="fileList" class="file-list">
+    <div id="fileList" class="file-list dark-checkered">
     </div>
     <div class="output">
       <div><b>Generated Sprite</b>&nbsp;<span id="dimensions" class="dimensions"></span></div>
       <div class="download-info">If the download button does not work, right click the sprite and select "Save Image
         As..."
       </div>
-      <div id="dropbox" class="dropbox is-empty">
+      <div id="dropbox" class="dropbox is-empty light-checkered">
         <canvas id="canvas" width="256" height="256"></canvas>
         <div class="add-files-btn"></div>
         <div class="add-files-text">Add some images!</div>
