diff --git a/src/Dashboard/public_html/index.html b/src/Dashboard/public_html/index.html new file mode 100644 index 0000000..ee9b5f1 --- /dev/null +++ b/src/Dashboard/public_html/index.html @@ -0,0 +1,16 @@ + + + + + TODO supply a title + + + + +
TODO write content
+ + diff --git a/src/css/style.css b/src/css/style.css index f44d700..6c97ead 100644 --- 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 index 1e0c859..7fd0fcd 100644 --- 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,6 +84,28 @@ 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 */ @@ -86,15 +113,28 @@ 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; } -} \ No newline at end of file +} diff --git a/src/css/style.dropdown.css b/src/css/style.dropdown.css index eb325ca..566bb07 100644 --- a/src/css/style.dropdown.css +++ b/src/css/style.dropdown.css @@ -18,16 +18,19 @@ } .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 { @@ -35,25 +38,23 @@ 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 deleted file mode 100644 index 2abaa58..0000000 --- a/src/css/style.responsive.blue.css +++ /dev/null @@ -1,56 +0,0 @@ - -/* - blue style sidebar menu -*/ -.nav .click { color: #353637; } -.nav .click .menu:hover { background-color: #dfdfdf; } - -.sidebar .title { - background-color: white; - font-weight: 500; - color: #246eba; -} - -.sidebar ul.menu { background-color: #246eba; } -.sidebar ul.menu li { color: white; } -.sidebar ul.menu li a { color: #75b5f6; } - -.sidebar li.logged { background-color: #ebebeb; } -.sidebar li.logged span { color: #6e6e6e; } -.sidebar li.logged ul li a { color: #6e6e6e; } -.sidebar li.logged ul li a:hover { - background-color: white; - color: #6e6e6e; -} - -.sidebar li.logged span.truncate { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - width: 220px; -} - -.sidebar ul.menu li a:hover { - background-color: #2164aa; - color: #75b5f6; -} - -.sidebar ul.menu li a.current { - color: white; -} - -@media only screen and (min-width: 400px) { - - .sidebar li.logged span.truncate { - width: 320px; - } - -} - -@media only screen and (min-width: 768px) { - - .sidebar { - background-color: #246eba; - } - -} diff --git a/src/css/style.responsive.css b/src/css/style.responsive.css index 1a3030c..91a52e0 100644 --- 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,12 +47,15 @@ .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 { @@ -59,10 +63,6 @@ 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; } } diff --git a/src/css/style.responsive.green.css b/src/css/style.responsive.green.css deleted file mode 100644 index af2d954..0000000 --- a/src/css/style.responsive.green.css +++ /dev/null @@ -1,33 +0,0 @@ - -/* - green style sidebar menu -*/ -.nav .click { color: #353637; } -.nav .click .menu:hover { background-color: #dfdfdf; } - -.sidebar .title { - background-color: white; - font-weight: 500; - color: #1ea143; -} - -.sidebar ul.menu { background-color: #1ea143; } -.sidebar ul.menu li { color: white; } -.sidebar ul.menu li a { color: #7ae999; } - -.sidebar ul.menu li a:hover { - background-color: #1c943e; - color: #7ae999; -} - -.sidebar ul.menu li a.current { - color: white; -} - -@media only screen and (min-width: 768px) { - - .sidebar { - background-color: #1ea143; - } - -} diff --git a/src/css/style.responsive.theme.css b/src/css/style.responsive.theme.css new file mode 100644 index 0000000..c0fe595 --- /dev/null +++ b/src/css/style.responsive.theme.css @@ -0,0 +1,32 @@ + +/* + theme style sidebar menu +*/ +.nav .click { color: #717377; } +.nav .click .menu:hover { background-color: #272a30; } + +.sidebar .title { + background-color: #393c45; + font-weight: 500; + color: white; +} + +.sidebar ul.menu { background-color: #2b2e35; } +.sidebar ul.menu li { color: #717377; } +.sidebar ul.menu li a { color: #dfe1e7; } +.sidebar ul.menu li a:hover { + background-color: #393c45; + color: white; +} + +.sidebar ul.menu li a.current { + color: #10a2f1; +} + +@media only screen and (min-width: 768px) { + + .sidebar { + background-color: #2b2e35; + } + +} diff --git a/src/index.html b/src/index.html index fc68648..4808f6d 100644 --- a/src/index.html +++ b/src/index.html @@ -1,249 +1,163 @@ - - - - - - - - CSS UI - Dashboard - - - - - - - - -
- - -
- -
- - -
- - -
-

CSS UI - Menu

-
- -
- - - -
-
-
- - -
-
-
- - -
- -
- - -
- - -
-
    -
  • You login as John Doe Master
    • -
  • user
    • -
-
- - -
-
- - -
- - - -
- - - -
-
-
-
-
- - -
-
-

Dashboard

-
-
- Form style -
-
- - This one help text. -
-
- - This one help text. -
-
-
-
- -
-
-
- -
-

Table style

- - - - - - - - - - - - - - - - - - - - - - - - - -
#UsernameEmailAction
1Rootroot@domain.com - - - -
2Adminadmin@domain.com - - - -
3Useruser@domain.com - - - -
- - - - - -
-
-
- - - - - - - - + + + + + + + + CSS UI - Dashboard + + + + + + + +
+ + +
+ +
+ + +
+ + +
+

Simple Dashboard

+
+ + +
+ +
+ + +
+ + + +
+
+
+ + +
+
+
+ + +
+ +
+ + +
+ + +
+
    +
  • You login as John Doe
    • +
  • user
    • +
+
+ + +
+
+ + +
+ + + +
+ + + +
+
+
+
+
+ + +
+
+

Sample

+ Content... +
+
+
+ + + + + + + + \ No newline at end of file