2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-02 16:04:07 +03:00

Dashboard updates (#26179)

* Update Dashboard example

- Replaces .sticky-top on .navbar with .fixed-top
- Adjusts padding on main content area and sidebar to account for fixed navbar
- Move to padding in sidebar instead of top: 48px; fixes Firefox rendering issue
- Adds new .shadow utility for a little extra cherry on top
- Moves sticky styles to separate feature query ruleset to avoid IE rendering issues

* Add .w-100 to chart to fix IE horizontal scroll from label that extended past viewport
This commit is contained in:
Mark Otto
2018-04-01 18:14:07 -07:00
committed by GitHub
parent a0c7473a34
commit e47fb40ff2
2 changed files with 22 additions and 8 deletions
+18 -4
View File
@@ -18,20 +18,26 @@ body {
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 0;
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
top: 48px; /* Height of navbar */
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
@@ -56,6 +62,14 @@ body {
text-transform: uppercase;
}
/*
* Content
*/
[role="main"] {
padding-top: 48px; /* Space for fixed navbar */
}
/*
* Navbar
*/