Redesign menu, new light and dark theme

Author: accgit

src/css/style.css

@@ -4,6 +4,7 @@
 */
 @import url(https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css);
 @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin-ext);
 @import url(https://css-ui.github.io/css/cssui.min.css);
 @import url(style.menu.css);
 @import url(simplebar.css);
@@ -13,4 +14,5 @@
 */
 body {
     background-color: #f2f2f2;
+         font-family: 'Open Sans', sans-serif;
 }

src/css/style.menu.css

@@ -3,15 +3,15 @@
     responsive menu
 */
 .nav .click {
-     cursor: pointer;
-     margin: 20px 10px 10px;
-      float: right;
+    cursor: pointer;
+    margin: 5px 20px 0 0;
+     float: right;
 }
 
 .nav .click .menu {
     border-radius: 30px;
         font-size: 14px;
-          padding: 8px 9px;
+          padding: 7px 8px;
 }
 
 .nav .responsive { display: none; }
@@ -21,9 +21,9 @@
     sidebar
 */
 .sidebar .title {
-    font-size: 1.375em;
-      padding: 17px 20px 0 25px;
-       height: 69px;
+    font-size: 1.125em;
+      padding: 5px 20px 0 25px;
+       height: 42px;
 }
 
 /*
@@ -32,7 +32,7 @@
 .sidebar span.notifi {
     border-radius: 3px;
       margin-left: 30px;
-        font-size: smaller;
+      font-weight: 600;
 	  padding: 0 5px 2px;
 }
 
@@ -48,14 +48,14 @@
 }
 
 .sidebar ul.menu li {
-    line-height: 38px;
-    font-weight: 600;
-    padding-top: 15px;
+    line-height: 33px;
+     margin-top: 15px;
+        padding: 0;
 }
 
 .sidebar ul.menu li ul li {
     padding-top: 0;
-      font-size: 1.125em;
+      font-size: 1em;
          margin: 0;
 }
 
@@ -82,18 +82,19 @@
     .sidebar ul.menu {
 	height: 660px;
     }
+
     .nav .click { visibility: hidden; }
     .nav .responsive { display: block; }
 
     .sidebar {
 	position: fixed;
 	  bottom: 0;
-	   width: 250px;
+	   width: 230px;
 	     top: 0;
     }
 
     .content-wrapper {
-	margin-left: 250px;
+	margin-left: 230px;
     }
 
 }

src/css/theme/style.menu.dark.css

@@ -1,40 +1,46 @@
 
 /*
-    dark theme sidebar menu
+    light theme sidebar menu
 */
-.nav .click { color: #717377; }
-.nav .click .menu:hover { background-color: #272a30; }
+.nav .click { color: white; }
+.nav .click .menu { color: #6f788d; }
+.nav .click .menu:hover {
+    background-color: #b2cddd;
+               color: white;
+}
 
 .sidebar .title {
-    background-color: #393c45;
+    background-color: #333c48;
          font-weight: 600;
-               color: white;
+               color: #e6e9ed;
 }
 
-.sidebar ul.menu { background-color: #2b2e35; }
-.sidebar ul.menu li { color: #646b7c; }
-.sidebar ul.menu li a { color: #a1abc2; }
+.sidebar ul.menu { background-color: #262a34; }
+.sidebar ul.menu li { color: #5e6776; }
+.sidebar ul.menu li a { color: #7d899c; }
 .sidebar ul.menu li a:hover {
-    background-color: #393c45;
-               color: #a1abc2;
+    background-color: #2e333e;
+         font-weight: 600;
+               color: #e95656;
 }
 
 .sidebar ul.menu li a.current {
-    color: white;
+    border-right: 2px solid #e95656;
+     font-weight: 600;
+           color: #e6e9ed;
 }
 
 /*
     notifications
 */
 .sidebar span.notifi {
-    background-color: #3bb9fe;
-	       color: #2b2e35;
+    color: #e95656;
 }
 
 @media only screen and (min-width: 768px) {
 
     .sidebar {
-	background-color: #2b2e35;
+	background-color: #262a34;
     }
 
 }
@@ -43,5 +49,6 @@
     simplebar
 */
 .simplebar-scrollbar {
-    background: #646b7c;
+    background: #596072;
+         width: 5px;
 }

src/css/theme/style.menu.light.css

@@ -3,32 +3,38 @@
     light theme sidebar menu
 */
 .nav .click { color: white; }
-.nav .click .menu:hover { background-color: #3dbbff; }
+.nav .click .menu { color: #b2cddd; }
+.nav .click .menu:hover {
+    background-color: #b2cddd;
+               color: white;
+}
 
 .sidebar .title {
-    background-color: #10a2f1;
+    background-color: #ebebeb;
          font-weight: 600;
-               color: white;
+               color: #3b3b3b;
 }
 
 .sidebar ul.menu { background-color: white; }
-.sidebar ul.menu li { color: #bfbfbf; }
-.sidebar ul.menu li a { color: #7b7d7e; }
+.sidebar ul.menu li { color: #a1a1a1; }
+.sidebar ul.menu li a { color: #7b7d7d; }
 .sidebar ul.menu li a:hover {
-    background-color: #e8e8e8;
-               color: #7b7d7e;
+    background-color: #f2f2f2;
+         font-weight: 600;
+               color: #e95656;
 }
 
 .sidebar ul.menu li a.current {
-    color: #0094e3;
+    border-right: 2px solid #e95656;
+     font-weight: 600;
+           color: #3b3b3b;
 }
 
 /*
     notifications
 */
 .sidebar span.notifi {
-    background-color: #10a2f1;
-	       color: white;
+    color: #e95656;
 }
 
 @media only screen and (min-width: 768px) {
@@ -44,4 +50,5 @@
 */
 .simplebar-scrollbar {
     background: #cacaca;
+         width: 5px;
 }

src/index.html

@@ -28,7 +28,7 @@
 
 			<!-- sidebar title -->
 			<div class="title">
-				<p>CSS UI - Menu</p>
+				<p>Responsive menu</p>
 			</div>
 
 			<div class="responsive">