Add filled in checkboxes

aleksis/apps/alsijil/static/css/alsijil/person.css

@@ -22,4 +22,32 @@ span.input-field.inline > .select-wrapper .caret {
 
 #select_all_container {
     display: none;
+}
+
+#select_all_box:indeterminate + span:not(.lever):before {
+	top: -4px;
+	left: -6px;
+	width: 10px;
+	height: 12px;
+	border-top: none;
+	border-left: none;
+	border-right: white 2px solid;
+	border-bottom: none;
+	transform: rotate(90deg);
+	backface-visibility: hidden;
+	transform-origin: 100% 100%;
+
+}
+
+#select_all_box:indeterminate + span:not(.lever):after {
+    top: 0;
+    width: 20px;
+    height: 20px;
+    border: 2px solid currentColor;
+    background-color: currentColor;
+    z-index: 0;
+}
+
+#select_all_box_text {
+    color: #9e9e9e !important;
 }
\ No newline at end of file

aleksis/apps/alsijil/templates/alsijil/class_register/person.html

@@ -47,8 +47,10 @@
               <li class="collection-item row" id="title">
                   <label class="col s12 xl2" id="select_all_container">
                       <input type="checkbox" id="select_all_box"
-                             form="excuse-multiple-form"/>
-                      <span id="select_all_span" >Select all</span>
+                             form="excuse-multiple-form" class="filled-in"/>
+                      <span id="select_all_span" class="secondary-color-text">
+                          <span id="select_all_box_text">Select all</span>
+                      </span>
                   </label>
                   <div class="col s12 xl10">
                       <form method="POST" id="excuse-multiple-form" class="right">
@@ -77,7 +79,7 @@
                   {% if can_edit_personal_note %}
                       <label class="left">
                           <input type="checkbox" name="selected_notes" value="{{ note.pk }}"
-                                 form="excuse-multiple-form"/>
+                                 form="excuse-multiple-form" class="filled-in"/>
                           <span></span>
                       </label>
                       <form action="" method="post" class="right hide-on-small-only" style="margin-top: -7px;">