From 95db8e184b378534db0ac08d14ae8500ee5090c3 Mon Sep 17 00:00:00 2001 From: Simon Rettberg Date: Thu, 28 Apr 2016 21:31:15 +0200 Subject: Implemented new menu, added logic for defining dependencies, move translation files around --- style/categories.json | 7 -- style/default.css | 299 +++++++++++++++++++++++++++++++------------------- 2 files changed, 184 insertions(+), 122 deletions(-) delete mode 100644 style/categories.json (limited to 'style') diff --git a/style/categories.json b/style/categories.json deleted file mode 100644 index 97b76eac..00000000 --- a/style/categories.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "cities":"tower", - "content":"th", - "settings":"cog", - "status":"tasks", - "users":"user" -} \ No newline at end of file diff --git a/style/default.css b/style/default.css index 72f82823..d845ec36 100644 --- a/style/default.css +++ b/style/default.css @@ -1,9 +1,9 @@ html { overflow-y: scroll; + height: 100%; } body { - padding-top: 70px; padding-bottom: 10px; } @@ -167,10 +167,6 @@ body { to { transform: scale( 1 ) rotate( 360deg ); } } -.slx-warning-badge { - color: #ff6; -} - .slx-footer { color: #999; padding: 5px; @@ -247,133 +243,206 @@ input[readonly] { padding: 19px; } - - -/* - * Base structure - */ - - - -/* - * Global add-ons - */ - -.sub-header { - padding-bottom: 10px; - border-bottom: 1px solid #eee; -} - -/* - * Top navigation - * Hide default border to remove 1px line. - */ -.navbar-fixed-top { - border: 0; -} - /* * Sidebar */ -/* Hide for mobile, show later */ -.sidebar { - display: none; -} -@media (min-width: 768px) { - .sidebar { - position: fixed; - top: 51px; - bottom: 0; - left: 0; - z-index: 1000; - display: block; - padding: 20px; - padding-top: 8px; - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ - background-color: #373d47; - } -} - -/* Sidebar navigation */ -.nav-sidebar { - margin-right: -21px; /* 20px padding + 1px border */ - margin-left: -20px; -} -.nav-sidebar > li > a { - padding: 7px; - padding-right: 20px; - padding-left: 20px; - color: #CCCCCC; -} -.nav-sidebar > .active > a, -.nav-sidebar > .active > a:hover, -.nav-sidebar > .active > a:focus { - color: #FFFFFF; - background-color: #24272d; -} -.nav-sidebar > li > a:hover, -.nav-sidebar > li > a:focus { - background-color: #2C323D; +nav.sidebar.navbar { + border-radius: 0px; } - -/* - * - * Dashboard custom - * - * Main content - */ - -.main { - padding: 20px; -} -@media (min-width: 768px) { - .main { - padding-right: 40px; - padding-left: 40px; - } +nav.sidebar, .main { + -webkit-transition: margin 200ms ease-out; + -moz-transition: margin 200ms ease-out; + -o-transition: margin 200ms ease-out; + transition: margin 200ms ease-out; } -.main .page-header { - margin-top: 0; -} - - -/* - * Placeholder dashboard ideas - */ -.placeholders { - margin-bottom: 30px; - text-align: center; +.sidebar-bg { + -webkit-transition: width 200ms ease-out; + -moz-transition: width 200ms ease-out; + -o-transition: width 200ms ease-out; + transition: width 200ms ease-out; } -.placeholders h4 { - margin-bottom: 0; -} -.placeholder { - margin-bottom: 20px; -} -.placeholder img { - display: inline-block; - border-radius: 50%; + +nav.sidebar li { + -webkit-transition: width 10ms linear; + -moz-transition: width 10ms linear; + -o-transition: width 10ms linear; + transition: width 10ms linear; } -.dash-header { - padding-top: 5px; - padding-left: 10px; - padding-bottom: 5px; - font-size: 17px; - margin-right: -21px; - margin-left: -20px; - color: #FFFFFF; +/* Add gap to nav and right windows.*/ +.main { + padding: 10px 10px 0 10px; + margin-top: 0px; +} + +.slx-topbar { + position: absolute; + top: 10px; + padding: 0px; + z-index: 100; +} + +.slx-topbar div { + margin-left: 225px; +} + +.sidebar-bg { + position: fixed; +} + +.sidebar-visible-inline, .sidebar-visible-block { + display: none; +} + +/* .....NavBar: Fully showing nav bar..... */ + +@media (min-width: 1200px) { + + .navbar-right { + float: left !important; + margin-top: 30px; + } + + .navbar-nav > li { + width: 100%; + } + + .slx-topbar + { + background:#F2DEDE; + width:100%; + } + + .main + { + float:right; + margin-left:240px; + margin-top:32px; + min-width:900px; + position:absolute; + width:calc(100%-200px); + } + + .navbar-inverse,.sidebar-bg + { + background-color:#373D47; + border:none; + } + + .sidebar-bg + { + height:5000px; + width:240px; + z-index:-10; + } + + .dropdown-menu-autoexpand, .sidebar-visible-block + { + display: block; + } + + .sidebar-visible-inline { + display: inline; + } + + .sidebar-hide, .dropdown-menu .divider + { + display: none; + } + + .dropdown-toggle + { + background-color: transparent !important; + color: #fff !important; + cursor: default !important; + padding-bottom: 0 !important; + padding-left: 8px !important; + font-size: 115%; + } + + nav.sidebar .navbar-brand,nav.sidebar .navbar-header + { + margin-left:0; + text-align:center; + width:100%; + } + + nav.sidebar a + { + padding-right:13px; + } + + nav.sidebar .navbar-nav .dropdown-menu + { + -webkit-box-shadow:none; + background-color:transparent; + border:0; + box-shadow:none; + float:none; + margin-top:0; + position:static; + width:auto; + } + + nav.sidebar .navbar-collapse,nav.sidebar .container-fluid + { + padding:0; + } + + .navbar-inverse .navbar-nav .dropdown-menu>li>a + { + color:#CCC; + } + + .navbar-inverse .navbar-nav .dropdown-menu > li.active > a { + background-color: #24272D; + } + + .navbar-inverse .navbar-nav li { + width: 100%; + } + + .navbar-inverse .navbar-nav li > span, .navbar-inverse .navbar-nav li > form { + color: #fff; + font-weight: bold; + margin: 2px 5px; + text-align: center; + } + + nav.sidebar + { + float: left; + height: 100%; + margin-bottom: 0; + margin-left: 0; + width: 240px; + } + + nav.sidebar .navbar-nav .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .dropdown-menu>li>a:focus { + background-color: #2C323D; + } + +} + +@media (min-width: 1440px) { + .main { + min-width: 1150px; + max-width: 1300px; + } +} + +section{ + padding-left: 15px; } /* * Sysconfig Module Editor */ -.mod-nav{ +.mod-nav { width: 250px; float: left; margin-right: 4px; -- cgit v1.2.3-55-g7522