Add status for note

css/checkbox.css

@@ -0,0 +1,109 @@
+.checkbox__container {
+  position: relative;
+  width: 50px;
+}
+._checkbox {
+  display: none;
+}
+
+label {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  width: 40px;
+  height: 40px;
+  margin: 0 auto;
+  background-color: #f72414;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  box-shadow: 0 7px 10px #ffbeb8;
+  cursor: pointer;
+  transition: 0.2s ease transform, 0.2s ease background-color,
+    0.2s ease box-shadow;
+  overflow: hidden;
+  z-index: 1;
+  border: 2px solid rgba(0, 0, 0, 0.44);
+}
+
+label:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  width: 30px;
+  height: 30px;
+  margin: 0 auto;
+  background-color: #fff;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  box-shadow: inset 0 7px 10px #ffbeb8;
+  transition: 0.2s ease width, 0.2s ease height;
+}
+
+label:hover:before {
+  width: 55px;
+  height: 55px;
+  box-shadow: inset 0 7px 10px #ff9d96;
+}
+
+label:active {
+  transform: translateY(-50%) scale(0.9);
+}
+
+.tick_mark {
+  position: absolute;
+  top: 5px;
+  right: 0;
+  left: 0;
+  width: 26px;
+  height: 20px;
+  margin: 0 auto;
+  margin-left: 5px;
+  transform: rotateZ(-50deg);
+}
+
+.tick_mark:before,
+.tick_mark:after {
+  content: '';
+  position: absolute;
+  background-color: #fff;
+  border-radius: 2px;
+  opacity: 0;
+  transition: 0.2s ease transform, 0.2s ease opacity;
+}
+
+.tick_mark:before {
+  left: 0;
+  bottom: 0;
+  width: 5px;
+  height: 17px;
+  box-shadow: -2px 0 5px rgb(0 0 0 / 23%);
+  transform: translateY(-15px);
+}
+
+.tick_mark:after {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 5px;
+  box-shadow: 0 3px 5px rgb(0 0 0 / 23%);
+  transform: translateX(78px);
+}
+
+._checkbox:checked + label {
+  background-color: #07d410;
+  box-shadow: 0 7px 10px #92ff97;
+}
+
+._checkbox:checked + label:before {
+  width: 0;
+  height: 0;
+}
+
+._checkbox:checked + label .tick_mark:before,
+._checkbox:checked + label .tick_mark:after {
+  transform: translate(0);
+  opacity: 1;
+}

css/icofont.css

@@ -0,0 +1,242 @@
+@font-face {
+  font-family: 'IcoFont';
+  font-weight: normal;
+  font-style: 'Regular';
+  src: url('../fonts/icofont.woff2') format('woff2'),
+    url('../fonts/icofont.woff') format('woff');
+}
+
+[class^='icofont-'],
+[class*=' icofont-'] {
+  font-family: 'IcoFont' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.icofont-ui-copy:before {
+  content: '\ec51';
+}
+
+.icofont-ui-edit:before {
+  content: '\ec55';
+}
+
+.icofont-ui-delete:before {
+  content: '\ec53';
+}
+
+.icofont-xs {
+  font-size: 0.5em;
+}
+
+.icofont-sm {
+  font-size: 0.75em;
+}
+
+.icofont-md {
+  font-size: 1.25em;
+}
+
+.icofont-lg {
+  font-size: 1.5em;
+}
+
+.icofont-1x {
+  font-size: 1em;
+}
+
+.icofont-2x {
+  font-size: 2em;
+}
+
+.icofont-3x {
+  font-size: 3em;
+}
+
+.icofont-4x {
+  font-size: 4em;
+}
+
+.icofont-5x {
+  font-size: 5em;
+}
+
+.icofont-6x {
+  font-size: 6em;
+}
+
+.icofont-7x {
+  font-size: 7em;
+}
+
+.icofont-8x {
+  font-size: 8em;
+}
+
+.icofont-9x {
+  font-size: 9em;
+}
+
+.icofont-10x {
+  font-size: 10em;
+}
+
+.icofont-fw {
+  text-align: center;
+  width: 1.25em;
+}
+
+.icofont-ul {
+  list-style-type: none;
+  padding-left: 0;
+  margin-left: 0;
+}
+
+.icofont-ul > li {
+  position: relative;
+  line-height: 2em;
+}
+
+.icofont-ul > li .icofont {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.icofont-border {
+  border: solid 0.08em #f1f1f1;
+  border-radius: 0.1em;
+  padding: 0.2em 0.25em 0.15em;
+}
+
+.icofont-pull-left {
+  float: left;
+}
+
+.icofont-pull-right {
+  float: right;
+}
+
+.icofont.icofont-pull-left {
+  margin-right: 0.3em;
+}
+
+.icofont.icofont-pull-right {
+  margin-left: 0.3em;
+}
+
+.icofont-spin {
+  -webkit-animation: icofont-spin 2s infinite linear;
+  animation: icofont-spin 2s infinite linear;
+  display: inline-block;
+}
+
+.icofont-pulse {
+  -webkit-animation: icofont-spin 1s infinite steps(8);
+  animation: icofont-spin 1s infinite steps(8);
+  display: inline-block;
+}
+
+@-webkit-keyframes icofont-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes icofont-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.icofont-rotate-90 {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.icofont-rotate-180 {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.icofont-rotate-270 {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
+  -webkit-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.icofont-flip-horizontal {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)';
+  -webkit-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.icofont-flip-vertical {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
+  -webkit-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+
+.icofont-flip-horizontal.icofont-flip-vertical {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
+  -webkit-transform: scale(-1, -1);
+  transform: scale(-1, -1);
+}
+
+:root .icofont-rotate-90,
+:root .icofont-rotate-180,
+:root .icofont-rotate-270,
+:root .icofont-flip-horizontal,
+:root .icofont-flip-vertical {
+  -webkit-filter: none;
+  filter: none;
+  display: inline-block;
+}
+
+.icofont-inverse {
+  color: #fff;
+}
+
+.sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto;
+}