Fabrique branding [WIP]

src/Resources/public/javascript/bar.js

@@ -2,7 +2,7 @@
 (function() {
     'use strict';
     var loader = function() {
-        var logo_url = '/bundles/zichtadmin/images/zicht.png',
+        var logo_url = '/bundles/zichtadmin/images/fabrique.png',
             container = document.getElementById('zicht_admin_menu'),
             links = container.getElementsByTagName('a'),
             wrapper = document.createElement('div'),
@@ -17,6 +17,7 @@
         wrapper.style.display = 'none';
 
         logo.setAttribute('src', logo_url);
+        logo.classList.add('logo');
 
         if (links.length) {
             wrapper.setAttribute('id', 'zicht_admin_menu_wrapper');

src/Resources/public/style/admin-cms.css

@@ -1,13 +1,11 @@
 
 @font-face {
-    font-family: poppins;
+    font-family: "Fabrique Web";
     font-style: normal;
-    font-weight: 400;
+    font-weight: 700;
     src:
-        local("Poppins"),
-        local("Poppins-Regular"),
-        url("/bundles/zichtadmin/fonts/poppins/poppins-v5-latin-regular.woff2") format("woff2"),
-        url("/bundles/zichtadmin/fonts/poppins/poppins-v5-latin-regular.woff") format("woff");
+        url("/bundles/zichtadmin/fonts/fab/fab.woff2") format("woff2"),
+        url("/bundles/zichtadmin/fonts/fab/fab.woff") format("woff");
 }
 
 @media only screen and (min-width: 768px) {
@@ -31,7 +29,7 @@
 }
 
 .z-cms-admin span.cms-title {
-    font-family: poppins, sans-serif;
+    font-family: "Fabrique Web", Helvetica, sans-serif;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 1px;

src/Resources/public/style/bar.css

@@ -1,35 +1,19 @@
 #zicht_admin_menu_wrapper {
     cursor: pointer;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
     position: fixed;
-    z-index: 9999;
-    top: 5px;
-    left: 5px;
-    -webkit-border-radius: 30px 30px 0 0;
-    -moz-border-radius: 30px 30px 0 0;
-    -ms-border-radius: 30px 30px 0 0;
-}
-
-#zicht_admin_menu_wrapper.enabled {
-    background-color: rgba(0, 0, 0, 0.4);
-}
-
-#zicht_admin_menu_wrapper:not(.enabled) img {
-    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 999;
+    top: 1rem;
+    left: 1rem;
 }
 
 #zicht_admin_menu_wrapper img {
-    border: 6px solid rgba(0, 0, 0, 0.0);
-    border-radius: 28px;
     max-width: inherit !important;
+    width: 50px;
+    height: 50px;
 }
-
-#zicht_admin_menu_wrapper img.logo {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    margin-top: 1px;
-    cursor: pointer;
+#zicht_admin_menu_wrapper img:hover {
+    filter: brightness(1.05);
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
 #zicht_admin_menu_veil {
@@ -38,46 +22,38 @@
     top: 0;
     bottom: 0;
     right: 0;
-    z-index: 1000;
-
-    background-color: black;
+    z-index: 998;
+    background-color: rgb(0 0 0 / 0.5);
     opacity: 0;
-
     display: none
 }
 
 #zicht_admin_menu {
-    position: fixed;
-    top: 60px;
-    left: 5px;
+    position: absolute;
     overflow: visible;
-    z-index: 999;
-
+    width: 20rem;
     background-color: white;
-
-    -webkit-border-radius: 0 4px 4px 4px;
-    -moz-border-radius: 0 4px 4px 4px;
-    -ms-border-radius: 0 4px 4px 4px;
-
+    border: 2px solid #CCCCCC;
     -moz-box-shadow: 4px 4px 8px #000;
     -webkit-box-shadow: 4px 4px 8px #000;
-    box-shadow: 4px 4px 8px #000;
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
 #zicht_admin_menu ul,
 #zicht_admin_menu ul li {
     display: block;
     list-style-type: none;
     margin: 0;
-    padding:0;
+    padding: 0;
 }
 
 #zicht_admin_menu a {
     display: block;
     white-space: nowrap;
     border-bottom: 1px solid #eee;
-    padding: 14px;
-    font-size: 14px;
+    padding: 0.5rem 1rem;
+    font-family: "Helvetica Neue", Helvetica,Arial, sans-serif;
+    font-size: 16px;
     color: black;
 }
 
@@ -86,18 +62,7 @@
     text-decoration: none;
 }
 #zicht_admin_menu a:hover {
-    background-color: #eee;
-}
-
-#zicht_admin_menu li:first-child a {
-    -webkit-border-radius: 0 4px 0 0;
-    -moz-border-radius: 0 4px 0 0;
-    -ms-border-radius: 0 4px 0 0;
-}
-#zicht_admin_menu li:last-child a {
-    -webkit-border-radius: 0 0 4px 4px;
-    -moz-border-radius: 0 0 4px 4px;
-    -ms-border-radius: 0 0 4px 4px;
+    background-color: #F5F5F5;
 }
 
 #zicht_admin_menu li:last-child a {