Added new themes, added simplebar

css-ui · Jul 11, 2017 · 9633624 · 9633624
1 parent d4da677
commit 9633624
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 64 deletions.
diff --git a/src/css/simplebar.css b/src/css/simplebar.css
diff --git a/src/css/style.css b/src/css/style.css
@@ -10,6 +10,7 @@
 @import url(style.tables.css);
 @import url(style.modal.box.css);
 @import url(style.tooltip.css);
+@import url(simplebar.css);
 
 /*
  elements

diff --git a/src/css/style.dashboard.css b/src/css/style.dashboard.css
@@ -10,18 +10,6 @@
  height: 69px;
 }
 
-/*
- Notifications
-*/
-span.notifi {
- background-color: #10a2f1;
- border-radius: 3px;
- margin-left: 30px;
- font-size: smaller;
- padding: 0 5px 2px;
- color: #2b2e35;
-}
-
 /*
  dashboard header menu
 */

diff --git a/src/css/style.responsive.css b/src/css/style.responsive.css
@@ -6,7 +6,6 @@
  cursor: pointer;
  margin: 20px 10px 10px;
  float: right;
- color: white;
 }
 
 .nav .click .menu {
@@ -15,29 +14,32 @@
  padding: 8px 9px;
 }
 
-.nav .click .menu:hover {
- background-color: #202021;
-}
-
 .nav .responsive { display: none; }
 .nav .expand-responsive { display: block !important; }
 
 /*
  sidebar
 */
 .sidebar .title {
- background-color: #353637;
- font-size: 1.375em;
- padding: 17px 20px 0 25px;
- height: 69px;
- color: white;
+ font-size: 1.375em;
+ padding: 17px 20px 0 25px;
+ height: 69px;
+}
+
+/*
+ notifications
+*/
+.sidebar span.notifi {
+ border-radius: 3px;
+ margin-left: 30px;
+ font-size: smaller;
+ padding: 0 5px 2px;
 }
 
 .sidebar ul.menu {
- background-color: white;
- padding-bottom: 15px;
- list-style: none;
- margin: 0;
+ list-style: none;
+ height: 300px;
+ margin: 0;
 }
 
 .sidebar ul.menu ul {
@@ -49,7 +51,6 @@
  line-height: 38px;
  font-weight: 500;
  padding-top: 15px;
- color: #353637;
 }
 
 .sidebar ul.menu li ul li {
@@ -74,29 +75,21 @@
  text-decoration: none;
  padding-left: 25px;
  display: block;
- color: #858585;
-}
-
-.sidebar ul.menu li a:hover {
- background-color: #ececec;
- color: #353637;
-}
-
-.sidebar ul.menu li a.current {
- color: #0094e3;
 }
 
 @media only screen and (min-width: 768px) {
 
+ .sidebar ul.menu {
+ height: 660px;
+ }
  .nav .click { visibility: hidden; }
  .nav .responsive { display: block; }
 
  .sidebar {
- background-color: white;
- position: fixed;
- bottom: 0;
- width: 250px;
- top: 0;
+ position: fixed;
+ bottom: 0;
+ width: 250px;
+ top: 0;
  }
 
  .wrapping {

diff --git a/src/css/style.responsive.theme.css → src/css/theme/style.responsive.dark.css b/src/css/style.responsive.theme.css → src/css/theme/style.responsive.dark.css
@@ -1,6 +1,6 @@
 
 /*
- theme style sidebar menu
+ dark theme sidebar menu
 */
 .nav .click { color: #717377; }
 .nav .click .menu:hover { background-color: #272a30; }
@@ -23,10 +23,25 @@
  color: #10a2f1;
 }
 
+/*
+ notifications
+*/
+.sidebar span.notifi {
+ background-color: #10a2f1;
+ color: #2b2e35;
+}
+
 @media only screen and (min-width: 768px) {
 
  .sidebar {
  background-color: #2b2e35;
  }
 
 }
+
+/*
+ simplebar color
+*/
+.simplebar-scrollbar {
+ background: #858585;
+}
diff --git a/src/css/theme/style.responsive.light.css b/src/css/theme/style.responsive.light.css
@@ -0,0 +1,47 @@
+
+/*
+ light theme sidebar menu
+*/
+.nav .click { color: white; }
+.nav .click .menu:hover { background-color: #3dbbff; }
+
+.sidebar .title {
+ background-color: #10a2f1;
+ font-weight: 500;
+ color: white;
+}
+
+.sidebar ul.menu { background-color: white; }
+.sidebar ul.menu li { color: #bfbfbf; }
+.sidebar ul.menu li a { color: #7b7d7e; }
+.sidebar ul.menu li a:hover {
+ background-color: #fbfbfb;
+ color: #353637;
+}
+
+.sidebar ul.menu li a.current {
+ color: #0094e3;
+}
+
+/*
+ notifications
+*/
+.sidebar span.notifi {
+ background-color: #10a2f1;
+ color: white;
+}
+
+@media only screen and (min-width: 768px) {
+
+ .sidebar {
+ background-color: white;
+ }
+
+}
+
+/*
+ simplebar color
+*/
+.simplebar-scrollbar {
+ background: #c4c4c4;
+}
diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,10 @@
 
  <!-- CSS styles -->
  <link rel="stylesheet" href="css/style.css">
- <link rel="stylesheet" href="css/style.responsive.theme.css">
+
+ <!-- css sidebar themes -->
+ <!--<link rel="stylesheet" href="css/theme/style.responsive.light.css">-->
+ <link rel="stylesheet" href="css/theme/style.responsive.dark.css">
 </head>
 <body>
  <!-- navigation -->
@@ -25,23 +28,13 @@
 
  <!-- sidebar title -->
  <div class="title">
- <p>Simple Dashboard</p>
- </div>
-
- <!-- sidebar logged in user -->
- <div class="logged sidebar">
- <ul class="align center">
- <li class="gravatar"><img src="img/user.png" alt="user"></li>
- <li class="username">John Doe</li>
- <li><a href="#" class="button default primary">Logout</a></li>
- </ul>
+ <p>CSS UI - Menu</p>
  </div>
 
- <!-- responsive -->
  <div class="responsive">
 
- <!-- menu -->
- <ul class="menu">
+ <!-- sidebar menu -->
+ <ul class="menu" data-simplebar>
 
  <!-- languages -->
  <li>
@@ -80,7 +73,7 @@
  </ul>
  </li>
 
- <!-- mmmbers -->
+ <!-- members -->
  <li>
  <span class="clear">
  <span class="float left">Members</span>
@@ -91,6 +84,19 @@
  <li><a href="">Banned</a></li>
  </ul>
  </li>
+
+ <!-- gallery -->
+ <li>
+ <span class="clear">
+ <span class="float left">Gallery</span>
+ <span class="float right"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
+ </span>
+ <ul>
+ <li><a href="">Design</a></li>
+ <li><a href="">People</a></li>
+ <li><a href="">Cars</a></li>
+ </ul>
+ </li>
  </ul>
  </div>
  </div>
@@ -152,12 +158,13 @@ <h4>Sample</h4>
  </div>
 
  <!-- javascript libraries and plugins -->
- <script src="js/jquery.min.js"></script>
+ <script src="http:https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+ <script src="js/simplebar.js"></script>
  <script src="js/jquery.responsive.menu.js"></script>
  <script src="js/jquery.dropdown.menu.js"></script>
  <script src="js/nanobar.min.js"></script>
  <script>
  var nanobar = new Nanobar(); nanobar.go(100);
  </script>
 </body>
-</html>
+</html>
diff --git a/src/js/jquery.min.js b/src/js/jquery.min.js
diff --git a/src/js/simplebar.js b/src/js/simplebar.js