Rework general page layout and improve responsiveness (references #9)

This commit is contained in:
Bernd Bestel
2018-05-12 14:25:21 +02:00
parent b607f188af
commit bbb5f1c7c7
28 changed files with 611 additions and 746 deletions

View File

@@ -4,82 +4,78 @@
}
.navbar-fixed-top {
border: 0;
background-color: #e5e5e5;
border-bottom: 2px solid;
border-color: #d6d6d6;
}
.sidebar {
display: none;
.navbar-brand {
font-weight: bold;
letter-spacing: -5px;
font-size: 2.2em;
color: #0b024c !important;
margin-left: 0 !important;
padding-left: 5px !important;
}
.navbar-fixed-side {
top: 51px;
padding-top: 20px;
margin-bottom: 20px;
background-color: #e5e5e5;
border-right: 2px solid #d6d6d6;
max-width: 260px;
border-left: 0;
}
#sidebar {
overflow-y: auto;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #e5e5e5;
border-right: 2px solid #d6d6d6;
min-width: 220px;
max-width: 260px;
}
#navbar-mobile {
display: none !important;
}
.nav-copyright {
padding-bottom: 100px;
}
}
.nav-sidebar {
margin-right: -21px;
margin-bottom: 20px;
margin-left: -20px;
@media (max-width: 768px) {
.navbar-brand {
margin-left: 25px !important;
}
}
.nav-sidebar > li > a {
.sidebar-nav > li > a {
padding-right: 20px;
padding-left: 20px;
transition: all 0.3s;
}
.nav-sidebar > li > a:hover {
.sidebar-nav > li > a:hover {
box-shadow: inset 5px 0 0 #337ab7;
transition: all 0.3s;
}
.nav-sidebar > li > a:focus {
.sidebar-nav > li > a:focus {
box-shadow: inset 5px 0 0 #ab2230;
transition: all 0.3s;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
.sidebar-nav > .active > a,
.sidebar-nav > .active > a:hover,
.sidebar-nav > .active > a:focus {
background-color: #d6d6d6;
box-shadow: inset 5px 0 0 #ab2230;
transition: all 0.3s;
}
.navbar-default {
background-color: #e5e5e5;
}
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
.nav > li.disabled > a,
.navbar-default .navbar-nav > .disabled > a {
color: #a7a7a7;
}
.nav-copyright {
@@ -88,6 +84,26 @@
text-align: center;
}
.nav-copyright > li > a {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.navbar-default .navbar-nav > .open > a {
background-color: #d6d6d6 !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #e5e5e5 !important;
}
.well {
background-color: #e5e5e5;
padding-right: 25px;
padding-left: 25px;
}
.discrete-link {
color: inherit !important;
transition: all 0.3s !important;
@@ -105,21 +121,6 @@ a.discrete-link:focus {
transition: all 0.3s !important;
}
.navbar-fixed-top {
border-bottom: 2px solid;
border-color: #d6d6d6;
}
.navbar-brand {
font-weight: bold;
letter-spacing: -5px;
font-size: 2.2em;
color: #0b024c !important;
margin-left: 0 !important;
padding-left: 5px !important;
}
.table td.fit-content,
.table th.fit-content {
white-space: nowrap;
@@ -144,6 +145,11 @@ a.discrete-link:focus {
margin-bottom: 2px;
}
.discrete-content-separator-2x {
padding-top: 10px;
padding-bottom: 10px;
}
.warning-bg {
background-color: #fcf8e3 !important;
}
@@ -156,44 +162,15 @@ a.discrete-link:focus {
background-color: #afd9ee !important;
}
.discrete-content-separator {
padding-top: 5px;
padding-bottom: 5px;
}
.discrete-content-separator-2x {
padding-top: 10px;
padding-bottom: 10px;
}
.well {
background-color: #e5e5e5;
}
.nav > li.disabled > a,
.navbar-default .navbar-nav > .disabled > a
{
color: #a7a7a7;
}
#toast-container > div {
opacity: 1;
filter: alpha(opacity=100);
}
.toast-success {
.toast-success {
background-color: #4c994c;
}
#toast-container > div {
box-shadow: none;
}
.navbar-default .navbar-nav > .open > a {
background-color: #d6d6d6 !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #e5e5e5 !important;
}