1 files changed, 86 insertions, 4 deletions
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;
 }