kebab added x1

IPSystemTOPC/EmployeeProdDB/static/css/emp_record.css

@@ -186,4 +186,112 @@ body {
 
 #year-padding {
     padding-left: 5px;
-}
+}
\ No newline at end of file
+
+/* kebab styling */
+.kebab {
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 0 16px;
+}
+
+.kebab figure {
+  width: 6px;
+  height: 6px;
+  border-radius: 5px;
+  background: white;
+  margin: 3px 0;
+}
+
+.middle {
+  transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
+  transform: scale(1);
+  position: relative;
+  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16),
+    0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
+  -webkit-filter: blur(0.1px);
+  filter: blur(0.1px);
+}
+
+.middle.active {
+  transform: scale(4.5);
+  transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);
+  box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16),
+    0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
+}
+
+.cross {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  margin-top: -1px;
+  color: white;
+  transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
+  font-size: 22px;
+  user-select: none;
+}
+
+.cross.active {
+  transform: translate(-50%, -50%) scale(1);
+  transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);
+  color: black;
+}
+
+h1 {
+  font-size: 26px;
+  background: white;
+  color: white;
+  padding: 40px 0 40px 20%;
+  margin-bottom: 50px;
+}
+
+a, li {
+  color: darken(grey, 20%);
+  text-decoration: none;
+}
+
+.dropdown {
+  position: absolute;
+  right: 0;
+  top: 3em;
+  transition: all 0.25s ease-out;
+  transform: scale(0);
+  transform-origin: 100% 0;
+  /* box-shadow: $shadow; */
+}
+
+
+.dropdown ul:hover {
+  transform: scale(1);
+}
+.dropdown li {
+  display: block;
+  width: 100%;
+}
+
+.dropdown li:hover {
+    background-color: #ddd;
+}
+
+.dropdown a {
+  width: 100%;
+  padding: 1em 18px;
+  display: inline-block;
+  white-space: pre;
+  box-sizing: border-box;
+  color: black;
+}
+.dropdown a:hover {
+  background: darken(grey, 30%);
+    text-decoration: none;
+}
+.dropdown.active {
+  transform: scale(1);
+  transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);
+  box-shadow:  2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
+  background-color: white;
+  padding: 0px;
+}

IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/emp_record.html

@@ -56,6 +56,18 @@
           <span class="bold"> 0912344567<!-- IMPORT INFO HERE --> </span>
         </h6>
       </div>
+      <div class="SBP">
+        <div class="kebab">
+          <figure></figure>
+          <figure class="middle"></figure>
+          <p class="cross">x</p>
+          <figure></figure>
+          <ul class="dropdown">
+            <li><a href="#">View all Productivity Reports</a></li>
+            <li><a href="#">Edit User Profile</a></li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -126,5 +138,17 @@
       </div>
     </div>
 
+    <script>
+      const kebab = document.querySelector('.kebab');
+      const middle = document.querySelector('.middle');
+      const cross = document.querySelector('.cross');
+      const dropdown = document.querySelector('.dropdown');
+  
+      kebab.addEventListener('click', () => {
+        middle.classList.toggle('active');
+        cross.classList.toggle('active');
+        dropdown.classList.toggle('active');
+      })
+    </script>
 </body>
 {% endblock %}