data-dashboard/src/web-app/+page/css/panels.less

A data-driven dashboard console for report widgets

// DataDashboard ~~ MIT License
// Panels -- Main section styling

// Structure:
//    main
//       web-app-panels
//          web-app-panel
//             header
//                h2
//             web-app-widgets
//                web-app-widget
//                   header
//                      h2

@import "../../+common/css/static/utility-box";

web-app-panel {
   display: block;
   >header {
      h2 {
         font-size: 1.6rem;
         text-align: center;
         color: white;
         }
      }
   >web-app-widgets {
      display: block;
      web-app-widget {
         display: block;
         position: relative;
         text-align: left;
         background-color: white;
         margin-bottom: 30px;
         >header {
            color: white;
            background-color: cornflowerblue;
            padding: 5px 10px;
            margin: 0px;
            h2 {
               font-size: 1.2rem;
               margin: 0px;
               }
            }
         >web-app-widget-body {
            .WidgetBody();
            }
         >web-app-widget-spinner {
            position: absolute;
            top: 0px; left: 0px; bottom: 0px; right: 0px;
            text-align: center;
            i.fa-spin {
               font-size: 5rem;
               color: black;
               opacity: 0.6;
               }
            }
         }
      web-app-widget.waiting {
         web-app-widget-body {
            opacity: 0;
            transition: opacity 0s;
            }
         }
      }
   }

.WidgetBody() {
   display: block;
   min-height: 300px;
   padding: 20px 40px;
   opacity: 1;
   transition: opacity 1s;
   .MobileMode({ padding: 5px 10px; });
   figure {
      text-align: left;
      margin: 0px;
      }
   >figure {
      overflow: scroll;
      }
   }