data-dashboard/src/web-app/+common/css/layout.less

A data-driven dashboard console for report widgets

// DataDashboard ~~ MIT License
// Dashboard -- Page layout for dashboard

@import "static/utility-box";

html {
   background-color: dimgray;
   }
body {
   max-width: none;
   padding: 0px;
   margin: 0px;
   >header {
      .TopHeaderBar();
      }
   >main {
      max-width: @layoutW;
      min-height: calc(100vh - 80px);
      padding: 100px 8px 20px @mobileGutter;
      margin: 0px auto;
      >web-app-panels {
         }
      }
   >footer {
      display: block;
      color: dimgray;
      background-color: gainsboro;
      i.font-icon {
         font-size: 2rem;
         padding: 0px 8px;
         }
      }
   >web-app-widget-templates {
      display: none;
      }
   }

.TopHeaderBar() {
   position: fixed;
   width: 100%;
   border-bottom: 1px solid dimgray;
   background-color: white;
   padding: 5px 0px;
   margin: 0px;
   z-index: @layerFixedPosition;
   >div {
      >figure {
         display: inline-block;
         width: 40px;
         padding-right: 4px;
         margin: 0px;
         .MobileMode({ width: 30px; });
         }
      >h1 {
         display: inline-block;
         vertical-align: top;
         font-size: 1.8rem;
         .MobileMode({ font-size: 1.4rem; });
         }
      }
   >nav {
      display: flex;
      justify-content: space-between;
      max-width: @layoutW;
      padding: 0px @mobileGutter;
      margin: 0px auto;
      >ul {
         .PanelMenuItems();
         }
      >div {
         white-space: nowrap;
         i.font-icon {
            font-size: 1.6rem;
            vertical-align: bottom;
            margin-left: 15px;
            .MobileMode({ font-size: 1.4rem; margin-left: 5px; });
            }
         }
      }
   }

.PanelMenuItems() {
   text-align: left;
   li {
      display: inline-block;
      font-size: 1.0rem;
      color: gray;
      border-bottom: 5px solid;
      padding: 2px 0px;
      margin-right: 15px;
      transition: all 400ms;
      .MobileMode({ font-size: 0.8rem; });
      }
   li.dna-selected,
   li:hover {
      border-color: darkorange;
      }
   li.dna-selected {
      color: black;
      cursor: default;
      }
   }