Fix checkboxes, make them easier for mobile

6 files changed, 111 insertions, 35 deletions

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index 1120184..5b9d9b6 100644
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -1263,7 +1263,9 @@ img{width:100%;}
 .no-line-height{line-height:0;}
 ul{margin:0; padding:0; list-style:none;}
 ul li{  padding:0 0 0 25px; position:relative; margin-top: 0.5rem;}
-ul li input{position: absolute; top:5px; left:0; opacity:0.5;}
+/*ul li input{
+  position: absolute; top:5px; left:0; min-height: 1rem; min-width: 1rem;
+}*/
 
 .bg-blue-tile{background: #007FFF url(../assets/tile.png); position:relative;}
 @media all and (min-width:40em){
@@ -1305,7 +1307,6 @@ a:hover .image{opacity:0.2;}
   .recipes .sm-col{border-bottom:3px solid white}
 }
 
-
 .title-shadow {
   text-shadow: 1px 1px 4px black;
 }
\ No newline at end of file
diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index 1a6943a..a9e08dc 100644
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -1,5 +1,87 @@
-.content {
-  .post-item {
-    font-size: 1.25rem;
-  }  
+.checkbox-container {
+  display: flex;
+  flex-flow: row nowrap;
+  padding-bottom: 1rem;
+}
+
+/* Styling Checkbox Starts */
+.checkbox-label {
+    display: block;
+    position: relative;
+    margin: 0 1rem 0 0;
+    cursor: pointer;
+    line-height: 28px;
+    min-height: 28px;
+    min-width: 28px;
+    clear: both;
+    float: left;
+}
+
+.checkbox-label input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+.checkbox-label .checkbox-custom {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 24px;
+    width: 24px;
+    border-radius: 5px;
+    border: 2px solid $blue;
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -ms-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+}
+
+
+.checkbox-label input:checked ~ .checkbox-custom {
+    background-color: $white;
+    border-radius: 5px;
+    border: 2px solid $blue;
+    -webkit-transform: rotate(0deg) scale(1);
+    -ms-transform: rotate(0deg) scale(1);
+    transform: rotate(0deg) scale(1);
+    opacity:1;
+}
+
+
+.checkbox-label .checkbox-custom::after {
+    position: absolute;
+    content: "";
+    left: 12px;
+    top: 12px;
+    height: 0px;
+    width: 0px;
+    border-radius: 5px;
+    border: solid $blue;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(0deg) scale(0);
+    -ms-transform: rotate(0deg) scale(0);
+    transform: rotate(0deg) scale(0);
+    opacity:1;
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -ms-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+}
+
+
+.checkbox-label input:checked ~ .checkbox-custom::after {
+  -webkit-transform: rotate(45deg) scale(1);
+  -ms-transform: rotate(45deg) scale(1);
+  transform: rotate(45deg) scale(1);
+  opacity:1;
+  left: 8px;
+  top: 2px;
+  width: 6px;
+  height: 12px;
+  border: solid $blue;
+  border-width: 0 3px 3px 0;
+  background-color: transparent;
+  border-radius: 0;
 }
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 673aaf9..fd5e3de 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -19,7 +19,7 @@ $lightestGray: #F8F8F8;
 $white: #fff;
 
 // Colors
-$blue: #0078e7;
+$blue: #007FFF;
 $bg-color: $white !default;
 $fg-color: $darkerGray !default;
 $alt-bg-color: #E0E0E0 !default;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 9f91902..6e4298c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -13,7 +13,6 @@
     <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" integrity="sha384-M86HUGbBFILBBZ9ykMAbT3nVb0+2C7yZlF8X2CiKNpDOQjKroMJqIeGZ/Le8N2Qp" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css" integrity="sha384-b92sF+wDNTHrfEtRaYo+EpcA8FUyHOSXrdxKc9XB9kaaX1rSQAgMevW6cYeE5Bdv" crossorigin="anonymous">
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
   {{ if .Site.IsServer }}
     {{ $cssOpts := (dict "targetPath" "css/gochowdown.css" "enableSourceMap" true ) }}
     {{ $styles := resources.Get "scss/gochowdown.scss" | resources.ExecuteAsTemplate "style.gochowdown.css" . | toCSS $cssOpts }}
diff --git a/layouts/partials/recipe_item.html b/layouts/partials/recipe_item.html
new file mode 100644
index 0000000..4a4a730
--- /dev/null
+++ b/layouts/partials/recipe_item.html
@@ -0,0 +1,7 @@
+<div class="checkbox-container">
+<label class="checkbox-label">
+  <input type="checkbox">
+  <span class="checkbox-custom rectangular"></span>
+</label>
+<div class="input-title">{{ . }}</div>
+
diff --git a/layouts/recipes/single.html b/layouts/recipes/single.html
index 4166ecf..54369dc 100644
--- a/layouts/recipes/single.html
+++ b/layouts/recipes/single.html
@@ -32,7 +32,9 @@
         <ul>
           <!-- list components that make up recipe -->
           {{ range . }}
-          <li>{{ . | markdownify}}</li>
+          <li>
+            {{ with ( . | markdownify) }}{{ partial "recipe_item.html" . }}{{ end }}
+          </li>
           {{ end }}
         </ul>
         {{ end }}
@@ -42,7 +44,9 @@
         <ul itemprop="ingredients">
           <!-- list ingredients that make up recipe -->
           {{ range . }}
-          <li itemprop="recipeIngredient">{{ . | markdownify }}</li>
+          <li itemprop="recipeIngredient">
+            {{ with ( . | markdownify) }}{{ partial "recipe_item.html" . }}{{ end }}
+          </li>
           {{ end }}
         </ul>
         {{ end }}
@@ -52,7 +56,8 @@
         <h4 class="blue mt0 mb2 xs-center">Directions</h4>
         <ul itemprop="recipeInstructions">
           {{ range .Params.Directions }}
-          <li>{{ . | markdownify }}</li>
+          <li>
+            {{ with ( . | markdownify) }}{{ partial "recipe_item.html" . }}{{ end }}</li>
           {{ end }}
         </ul>
       </div>
@@ -88,14 +93,18 @@
         <h4 class="blue regular xs-center">Ingredients</h4>
         <ul class="ingredients" itemprop="ingredients">
           {{ range .Params.Ingredients }}
-          <li itemprop="ingredient">{{ . | markdownify }}</li>
+          <li itemprop="ingredient">
+            {{ with ( . | markdownify) }}{{ partial "recipe_item.html" }}{{ end }}
+          </li>
           {{ end }}
         </ul>
         
         <h4 class="blue regular xs-center">Steps</h4>
         <ul itemprop="instructions">
           {{ range .Params.Directions }}
-          <li>{{ . | markdownify }}</li>
+          <li>
+            {{ with ( . | markdownify) }}{{ partial "recipe_item.html" }}{{ end }}
+          </li>
           {{ end }}
         </ul>
 
@@ -114,26 +123,4 @@
 
   </article>
 </div>
-
-<script type="text/javascript">
-  $( document ).ready(function() {
-    jQuery.fn.clickToggle = function(a,b) {
-      var ab=[b,a];
-      function cb(){ ab[this._tog^=1].call(this); }
-      return this.on("click", cb);
-    };
-    $("ul li").append('<input type="checkbox">');
-    $("ul li").clickToggle(function(){
-      $(this).children("input").prop('checked', true);
-      var height = $(this).height();
-      var y = $(window).scrollTop();
-      $('html, body').animate({scrollTop: y+height+16}, 200);
-    }, function(){
-      $(this).children("input").prop('checked', false);
-      var height = $(this).height();
-      var y = $(window).scrollTop();
-      $('html, body').animate({scrollTop: y-height-16}, 200);
-    });
-  });
-</script>
 {{ end }}