Refactor Dashboard example. (#21140)

1 files changed, 33 insertions, 65 deletions

diff --git a/docs/examples/dashboard/dashboard.css b/docs/examples/dashboard/dashboard.css
index e7c6a21df..99f2962b5 100644
--- a/docs/examples/dashboard/dashboard.css
+++ b/docs/examples/dashboard/dashboard.css
@@ -7,96 +7,64 @@ body {
   padding-top: 50px;
 }
 
-
 /*
- * Global add-ons
+ * Typography
  */
 
-.sub-header {
-  padding-bottom: 10px;
+h1 {
+  margin-bottom: 20px;
+  padding-bottom: 9px;
   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;
-    overflow-x: hidden;
-    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-    background-color: #f5f5f5;
-    border-right: 1px solid #eee;
-  }
+  position: fixed;
+  top: 51px;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  padding: 20px;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+  border-right: 1px solid #eee;
 }
 
 /* Sidebar navigation */
-.nav-sidebar {
-  margin-right: -21px; /* 20px padding + 1px border */
-  margin-bottom: 20px;
-  margin-left: -20px;
-}
-.nav-sidebar > li > a {
-  padding-right: 20px;
-  padding-left: 20px;
-}
-.nav-sidebar > .active > a,
-.nav-sidebar > .active > a:hover,
-.nav-sidebar > .active > a:focus {
-  color: #fff;
-  background-color: #428bca;
+.sidebar {
+  padding-left: 0;
+  padding-right: 0;
 }
 
+.sidebar .nav {
+  margin-bottom: 20px;
+}
 
-/*
- * Main content
- */
-
-.main {
-  padding: 20px;
+.sidebar .nav-item {
+  width: 100%;
 }
-@media (min-width: 768px) {
-  .main {
-    padding-right: 40px;
-    padding-left: 40px;
-  }
+
+.sidebar .nav-item + .nav-item {
+  margin-left: 0;
 }
 
+.sidebar .nav-link {
+  border-radius: 0;
+}
 
 /*
- * Placeholder dashboard ideas
+ * Dashboard
  */
 
+ /* Placeholders */
 .placeholders {
-  margin-bottom: 30px;
-  text-align: center;
-}
-.placeholders h4 {
-  margin-bottom: 0;
-}
-.placeholder {
-  margin-bottom: 20px;
+  padding-bottom: 3rem;
 }
+
 .placeholder img {
-  display: inline-block;
-  border-radius: 50%;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
 }