From e47fb40ff250a82bcd24577e0073ce8aa147ef0f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Apr 2018 18:14:07 -0700 Subject: 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 --- docs/4.0/examples/dashboard/dashboard.css | 22 ++++++++++++++++++---- docs/4.0/examples/dashboard/index.html | 8 ++++---- 2 files changed, 22 insertions(+), 8 deletions(-) (limited to 'docs') diff --git a/docs/4.0/examples/dashboard/dashboard.css b/docs/4.0/examples/dashboard/dashboard.css index ef40fe78ff..3918097399 100644 --- a/docs/4.0/examples/dashboard/dashboard.css +++ b/docs/4.0/examples/dashboard/dashboard.css @@ -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 */ diff --git a/docs/4.0/examples/dashboard/index.html b/docs/4.0/examples/dashboard/index.html index d5df44f849..d96d2d8d9d 100644 --- a/docs/4.0/examples/dashboard/index.html +++ b/docs/4.0/examples/dashboard/index.html @@ -17,7 +17,7 @@ -