Fix checkboxes, make them easier for mobile

3 files changed, 90 insertions, 7 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;