Color picker menu can now be toggled

docs/assets/css/style.css

@@ -297,20 +297,40 @@ header {
 .colorPicker {
   height: 0.8em;
   width: 0.8em;
+  border-radius: 50%;
+}
+
+.colorPicker:hover {
+  cursor: pointer;
+  border: 1px solid whitesmoke;
 }
 
 .colorPickerMenu {
   position: absolute;
-  display: inline-block;
   font-size: 1rem;
   background-color: var(--primaryColor);
   border-radius: 1em;
   border: 2px solid var(--grey);
   transform: translate(0, -30%);
   padding: 0.5em;
+  padding-top: 0;
   margin-left: 1em;
   font-weight: normal;
   z-index: 1;
+  display: none;
+}
+
+.colorPickerMenuCloseBtn {
+  color: red;
+  font-weight: bold;
+  margin-top: 0;
+  margin-right: 0.25em;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.colorPickerMenuCloseBtn > span:hover {
+  cursor: pointer;
 }
 
 .colorPickerResetBtn {
@@ -330,12 +350,20 @@ header {
   top: 0.2em;
 }
 
-input[type='color'] {
+.checkerboardInput:hover {
+  cursor: pointer;
+}
+
+#colorInput {
   width: 1.25em;
   height: 1.25em;
   padding: 0;
 }
 
+#colorInput:hover {
+  cursor: pointer;
+}
+
 /** Copy Btn */
 
 .copyBtn {

docs/assets/js/script.js

@@ -202,6 +202,15 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
       }, 50)
     }, 2000)
   }
+
+  /**
+   * Display the color picker.
+   * @param {String} id - id of the menu we are showing.
+   */
+  $scope.toggleColorPickerMenu = function(id) {
+    let menu = document.getElementById(id)
+    menu.style.display = menu.style.display == "none" || menu.style.display == "" ? "inherit" : "none"
+  }
 });
 
 /*================ End of "Devicons controller" ================*/

docs/index.html

@@ -63,19 +63,20 @@
         <li>
           <h4>
             Font versions 
-            <img src="./assets/img/color_wheel.png" class='colorPicker'>
+            <span>
-            <span class='colorPickerMenu'>
+              <img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('fontColorPickerMenu')">
-              <span>
+              <span class='colorPickerMenu' id='fontColorPickerMenu'>
-                <input type='color' value='#60be86' ng-model="fontBackground">
+                <div class='colorPickerMenuCloseBtn' ng-click="toggleColorPickerMenu('fontColorPickerMenu')"><span>X</span></div>
-                Background Color 
+                <div>
+                  <input type='color' value='#60be86' ng-model="fontBackground" id='colorInput'>
+                  Background Color 
+                </div>
+                <div>
+                  <input type='checkbox' id='checkboardInput' class='checkerboardInput'>
+                  <label for='checkboardInput' >Checkerboard</label>
+                </div>
+                <button class='colorPickerResetBtn'>Reset</button>
               </span>
-              <br>
-              <span>
-                <input type='checkbox' id='checkboardInput' class='checkerboardInput'>
-                <label for='checkboardInput' >Checkerboard</label>
-              </span>
-              <br>
-              <button class='colorPickerResetBtn'>Reset</button>
             </span>
           </h4>
           <p>