Redesign simple administration templates

css-ui · Jul 11, 2017 · 29a08fc · 29a08fc
1 parent 4f24aa1
commit 29a08fc
Show file tree

Hide file tree

Showing 9 changed files with 310 additions and 403 deletions.
diff --git a/src/Dashboard/public_html/index.html b/src/Dashboard/public_html/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!--
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+-->
+<html>
+ <head>
+ <title>TODO supply a title</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ </head>
+ <body>
+ <div>TODO write content</div>
+ </body>
+</html>
diff --git a/src/css/style.css b/src/css/style.css
@@ -15,7 +15,7 @@
  elements
 */
 body {
- background-color: #f4f4f4;
+ background-color: white;
  font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
 }
 
@@ -31,7 +31,7 @@ body {
 
 .bar {
  transition: height .3s;
- background: #2976c6;
+ background: #393c45;
  height: 100%;
  width: 0;
 }
diff --git a/src/css/style.dashboard.css b/src/css/style.dashboard.css
@@ -3,56 +3,61 @@
  dashboard
 */
 .header {
- background-color: white;
+ background-color: #fefefe;
+ border-bottom: 1px solid #f4f4f4;
  display: none;
  padding: 15px 20px;
  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
 */
-.header ul.header-menu {
+.header ul.breadcrumb  {
  list-style: none;
  margin: 3px 0 0 15px;
 }
 
-.header ul.header-menu li {
+.header ul.breadcrumb li {
  display: inline-block;
- margin: 0 40px 0 0;
+ margin: 0 10px 0 0;
 }
 
-.header ul.header-menu li a i.fa {
- font-size: 1.5em;
- position: relative;
- top: 2px;
+.header ul.breadcrumb li a i.fa {
+ padding-right: 10px;
+ font-size: 1.25em;
+ position: relative;
+ top: 2px;
 }
 
-.header ul.header-menu li a span {
+.header ul.breadcrumb li a span {
  margin-left: 15px;
 }
 
-.header ul.header-menu li a span span.notifications {
- background-color: #ff7815;
- border-radius: 30px;
- margin-left: 15px;
- font-size: 0.75em;
- padding: 1px 6px 2px 6px;
- color: white;
-}
-
-.header ul.header-menu li a {
+.header ul.breadcrumb li a {
  text-decoration: none;
  color: #858585;
 }
 
-.header ul.header-menu li a:hover,
-.header ul.header-menu li a.current {
- color: #353637;
+.header ul.breadcrumb li a:hover,
+.header ul.breadcrumb li a.current {
+ color: #10a2f1;
 }
 
 /*
- user panel
+ user display in header
 */
 .user.panel {
  display: none;
@@ -79,22 +84,57 @@
  display: block;
 }
 
+/*
+ user logged display in sidebar
+*/
+.logged.sidebar {
+ display: block;
+}
+
+.logged.sidebar ul {
+ background-color: #272a30;
+ margin-bottom: 0;
+ padding: 30px 0 10px;
+ color: #717377;
+}
+
+.logged.sidebar li {
+ list-style: none;
+}
+
+.logged.sidebar li.username {
+ font-weight: 500;
+}
+
 /*
  content
 */
 .content {
  padding: 15px 25px;
 }
 
-.content-box {
- background-color: white;
+.content .box {
+ display: block;
+}
+
+.content .box .style {
+ background-color: #fefefe;
  border-radius: 3px;
  margin-bottom: 20px;
  padding: 10px 15px;
+ border: 1px solid #f4f4f4;
 }
 
+/*
+ content form style
+*/
 .content form fieldset {
- background-color: #f4f4f4;
+ background-color: #fefefe;
+ border-color: #f4f4f4;
+}
+
+.content form {
+ margin-bottom: 0;
 }
 
 /*
@@ -138,32 +178,25 @@ a.action-button.detail:hover {
  display: block;
  }
 
- .hidden.menu {
- display: none;
- }
-
  .content {
  padding: 15px 35px;
  }
 
-}
-
-@media only screen and (min-width: 1024px) {
-
  .user.panel {
  display: block;
  }
 
- .logged.in ul li.user {
+ .logged.in ul li.user,
+ .logged.sidebar {
  display: none;
  }
 
 }
 
-@media only screen and (min-width: 1170px) {
+@media only screen and (min-width: 1024px) {
 
  .logged.in ul li.user {
  display: block;
  }
 
-}
+}
diff --git a/src/css/style.dropdown.css b/src/css/style.dropdown.css
@@ -18,42 +18,43 @@
 }
 
 .dropdown .employ-toggle.click:hover {
- background-color: #d9d9d9;
+ background-color: #f4f4f4;
 }
 
 .dropdown ul.expand-dropdown {
- list-style: none;
- margin-top: 5px;
- position: absolute;
- display: none;
- right: 0;
- top: 100%;
+ border-bottom: 1px solid #f4f4f4;
+ border-right: 1px solid #f4f4f4;
+ border-left: 1px solid #f4f4f4;
+ list-style: none;
+ margin-top: 19px;
+ position: absolute;
+ display: none;
+ right: 0;
+ top: 100%;
 }
 
 .dropdown ul.expand-dropdown li {
  min-width: 110px;
  margin: 0;
 }
 
-.dropdown ul.expand-dropdown li a.top {
- border-top-right-radius: 3px;
- border-top-left-radius: 3px;
-}
-
-.dropdown ul.expand-dropdown li a.bottom {
+.dropdown .bottom {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
 }
 
 .dropdown ul.expand-dropdown li a {
- background-color: rgba(0, 0, 0, 0.40);
+ background-color: #fefefe;
  text-decoration: none;
  display: block;
- padding: 2px 10px;
- color: white;
+ padding: 5px 5px 5px 15px;
+ color: #858585;
+}
+
+.dropdown ul.expand-dropdown li a i.fa {
+ padding-right: 12px;
 }
 
 .dropdown ul.expand-dropdown li a:hover {
- background-color: rgba(0, 0, 0, 0.48);
- color: white;
+ background-color: #f9f9f9;
 }
diff --git a/src/css/style.responsive.blue.css b/src/css/style.responsive.blue.css
diff --git a/src/css/style.responsive.css b/src/css/style.responsive.css
@@ -35,6 +35,7 @@
 
 .sidebar ul.menu {
  background-color: white;
+ padding-bottom: 15px;
  list-style: none;
  margin: 0;
 }
@@ -46,23 +47,22 @@
 
 .sidebar ul.menu li {
  line-height: 38px;
- margin: 0;
+ font-weight: 500;
+ padding-top: 15px;
  color: #353637;
 }
 
 .sidebar ul.menu li ul li {
- font-size: 1.125em;
+ padding-top: 0;
+ font-size: 1.125em;
+ margin: 0;
 }
 
 .sidebar ul.menu li span span {
  padding: 0 15px 0 25px;
  display: block;
 }
 
-.sidebar ul.menu li.top {
- padding-top: 15px;
-}
-
 .sidebar ul.menu li .icon {
  margin-right: 10px;
  font-size: 12px;
@@ -93,14 +93,14 @@
 
  .sidebar {
  background-color: white;
- position: absolute;
+ position: fixed;
  bottom: 0;
- width: 230px;
+ width: 250px;
  top: 0;
  }
 
  .wrapping {
- margin-left: 230px;
+ margin-left: 250px;
  }
 
 }