Feature/checklist

working-on/.gitignore

@@ -0,0 +1,58 @@
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+### Other ###
+# Temporary folders
+tmp/
+temp/

working-on/checklist/checkbox.scss

@@ -0,0 +1,126 @@
+.provisional {
+  [role="checkbox"] {
+    /* (0,2,0) */
+    cursor: default;
+    display: inline-block;
+    padding-left: 30px;
+    position: relative;
+
+    &::before, &::after {
+      /* (0,2,1) */
+      left: 0;
+      position: absolute;
+      top: 0;
+      transform: translate(-50%, -50%);
+    }
+
+    &::before {
+      /* (0,2,1) */
+      border: 2px solid hsl(0, 0%, 15%);
+      content: "";
+      height: 36px;
+      width: 36px;
+    }
+
+    &::after {
+      /* (0,2,1) */
+      content: none;
+    }
+
+    &:focus {
+      /* (0,3,0) */
+      outline: none;
+    }
+
+    &:checked::after {
+      /* (0,3,1) */
+      content: "";
+    }
+
+    &:active::before,
+    &[aria-checked="false"]:hover::before {
+      /* (0,3,1) */
+      background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%);
+    }
+
+    &[aria-checked="true"]::after {
+      /* (0,3,1) */
+      border-color: #333;
+      border-style: solid;
+      border-width: 0 5px 5px 0;
+      content: "";
+      display: inline-block;
+      height: 26px;
+      left: -4px;
+      top: 1px;
+      width: 13px;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+
+    &:focus::before {
+      /* (0,3,1) */
+      box-shadow: 0 0 3pt 2pt rgb(59, 153, 252);
+      box-sizing: content-box;
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  ul.wb-chcklst {
+    /* (0,2,1) */
+    font-size: 20px;
+    margin-left: 0;
+    padding-top: 6px;
+  }
+
+  .lst-none ul li {
+    /* (0,2,2) */
+    list-style-type: disc;
+  }
+
+  ul.wb-chcklst.sm-chcklst {
+    /* (0,3,1) */
+    font-size: 17px;
+  }
+
+  .sm-chcklst [role="checkbox"]::before {
+    /* (0,3,1) */
+    height: 24px;
+    left: 10px;
+    top: 11px;
+    width: 24px;
+  }
+
+  ul.wb-chcklst {
+    &.sm-chcklst > li {
+      /* (0,3,2) */
+      line-height: 23px;
+      margin-bottom: 25px;
+      margin-top: 10px;
+    }
+
+    [role="checkbox"][aria-checked="true"] {
+      &::before {
+        /* (0,4,2) */
+        background-color: #318000;
+      }
+
+      &::after {
+        /* (0,4,2) */
+        border-color: white;
+        border-width: 0 4px 4px 0;
+      }
+    }
+  }
+
+  .sm-chcklst [role="checkbox"][aria-checked="true"]::after {
+    /* (0,4,1) */
+    border-width: 0 4px 4px 0;
+    height: 16px;
+    left: 6px;
+    top: 1px;
+    width: 9px;
+  }
+}

working-on/checklist/checklist.css

@@ -0,0 +1,165 @@
+/********
+ ********
+ ** Heydron Pickering example
+ ** October 15, 2014
+ ** Replacing radio buttons without replacing radio buttons
+ ** https://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/
+ ********
+ ********/
+
+ /* One input per line */
+.provisional label { /* (0,1,1) */
+  cursor: pointer;
+  display: block;
+  font-size: 20px;
+  line-height: 2;
+}
+
+.provisional [role="checkbox"] { /* (0,2,0) */
+  cursor: pointer;
+  display: inline-block;
+  padding-left: 15px;
+  position: relative;
+}
+
+.provisional fieldset.chkbxrdio-grp legend { /* (0,2,2) */
+  float: none;
+  font-weight: 400;
+  font-size: 22px;
+  margin-bottom: 15px;
+  margin-top: 0;
+}
+
+.provisional [type="radio"],
+.provisional [type="checkbox"] { /* (0,2,0) */
+  border: 0; 
+  clip: rect(0 0 0 0); 
+  height: 1px;
+  margin: -1px; 
+  padding: 0; 
+  position: absolute; 
+  overflow: hidden; 
+  width: 1px;
+}
+
+.provisional [type="radio"] + span,
+.provisional [type="checkbox"] + span,
+.provisional [type="radio"] + label,
+.provisional [type="checkbox"] + label { /* (0,2,1) */
+  display: block;
+  margin-left: 36px;
+}
+
+.provisional [role="checkbox"]::before,
+.provisional [role="checkbox"]::after { /* (0,2,1) */
+  content: "";
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: translate(-100%, 0%);
+}
+
+.provisional .wb-checklist.wb-checklist-sm { /* (0,3,0) */
+  font-size: 17px;
+}
+
+/* the basic, unchecked style */
+.provisional [role="checkbox"]::before { /* (0,2,1) */
+  border: 4px solid #fff;
+  box-shadow: 0 0 0 2px #000;
+  display: inline-block;
+  height: 36px;
+  width: 36px;
+}
+
+.provisional .wb-checklist-sm [role="checkbox"]::before { /* (0,3,1) */
+  border-width: 3px;
+  height: 24px;
+  transform: translate(-100%, 20%);
+  width: 24px;
+}
+
+.provisional [type="radio"] + span::before,
+.provisional [type="radio"] + label::before,
+.provisional [type="checkbox"] + span::before,
+.provisional [type="checkbox"] + label::before { /* (0,2,2) */
+  border: 4px solid #fff;
+  box-shadow: 0 0 0 2px #000;
+  content: "";
+  display: inline-block;
+  height: 36px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 36px;
+}
+
+.provisional [type="radio"] + span::before,
+.provisional [type="radio"] + label::before { /* (0,2,2) */
+  border-radius: 50%;
+}
+
+/* hover styling */
+.provisional [type="radio"]:hover + span::before,
+.provisional [type="radio"] + label:hover::before,
+.provisional [type="checkbox"]:hover + span::before,
+.provisional [type="checkbox"] + label:hover::before, /* (0,3,2) */
+.provisional [role="checkbox"][aria-checked="false"]:hover::before { /* (0,3,1) */
+  background-image: linear-gradient(to bottom, hsl(10, 0%, 90%), hsl(10, 0%, 100%) 50%);
+}
+
+/* focus styling */
+.provisional [role="checkbox"]:focus { /* (0,3,0) */
+  outline: none;
+}
+
+.provisional [type="radio"]:focus + span::before,
+.provisional [type="radio"]:focus + label::before,
+.provisional [type="checkbox"]:focus + span::before,
+.provisional [type="checkbox"]:focus + label::before,
+.provisional [role="checkbox"]:focus::before { /* (0,3,2) */
+  box-shadow: 0 0 0 2px #000, 0 0 8px 4px rgb(59, 153, 252);
+}
+
+/* the checked style using the :checked pseudo class and aria-checked=true attribute */
+.provisional [role="checkbox"][aria-checked="true"]::before { /* (0,3,1) */
+  background-color: #318000;
+  border: none;
+}
+
+.provisional [role="checkbox"][aria-checked="true"]::after { /* (0,3,1) */
+  border-color: white;
+  border-style: solid;
+  border-width: 0 5px 5px 0;
+  display: inline-block;
+  height: 26px;
+  width: 13px;
+  transform: translate(-185%, 10%) rotate(45deg);
+}
+
+.provisional .wb-checklist-sm [role="checkbox"][aria-checked="true"]::after { /* (0,3,1) */
+  border-width: 0 4px 4px 0;
+  height: 16px;
+  width: 9px;
+  transform: translate(-185%, 40%) rotate(45deg);
+}
+
+.provisional [type="radio"]:checked + span::before,
+.provisional [type="radio"]:checked + label::before { /* (0,3,2) */
+  background: #444;
+}
+
+.provisional [type="checkbox"]:checked + span::after,
+.provisional [type="checkbox"]:checked + label::after { /* (0,3,2) */
+  border-color: #333;
+  border-style: solid;
+  border-width: 0 5px 5px 0;
+  content: "";
+  display: inline-block;
+  height: 26px;
+  left: 12px;
+  position: absolute;
+  top: 2px;
+  transform: rotate(45deg);
+  width: 13px;
+}