energylink/public/less/grafana-responsive.less

@import "variables.dark.less";
@import "bootstrap/responsive.less";

@gridColumnWidth:         70px;
@gridGutterWidth:         10px;

@gridColumnWidth768:      52px;
@gridGutterWidth768:      10px;

@gridColumnWidth1200:     90px;
@gridGutterWidth1200:     10px;

// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);

@screen-xs: 320px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;

@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);

@breakpoint-xs-up:         ~"only screen and (min-width: @{screen-xs})";
@breakpoint-xs:            ~"only screen and (min-width: @{screen-xs}) and (max-width: @{screen-xs-max})";
@breakpoint-sm-up:         ~"only screen and (min-width: @{screen-sm})";
@breakpoint-sm:            ~"only screen and (min-width: @{screen-sm}) and (max-width: @{screen-sm-max})";
@breakpoint-md-up:         ~"only screen and (min-width: @{screen-md})";
@breakpoint-md:            ~"only screen and (min-width: @{screen-md}) and (max-width: @{screen-md-max})";
@breakpoint-lg:            ~"only screen and (min-width: @{screen-lg})";

.dashnav-back-to-dashboard  {
  display: none;
}

// Media queries
// ---------------------
@media @breakpoint-xs {
  div.panel {
    width: 100% !important;
    padding: 0px !important;
  }
  .panel-margin {
    margin-right: 0;
    margin-left: 0;
  }
  body {
    padding: 0;
  }
  .dashnav-dashboards-btn a {
    max-width: 200px;
  }
  .gf-timepicker-nav-btn {
    max-width: 120px;
  }
  .dashnav-zoom-out,
  .dashnav-action-icons {
    display: none;
  }
  .page-container {
    padding: 10px 20px;
  }
}

// form styles
@media @breakpoint-sm-up {
  .gf-size-m { width: 120px; }
  .gf-size-l { width: 150px; }
  .gf-size-xl { width: 200px; }
  .gf-size-xxl { width: 300px; }
  .gf-size-xxxl { width: 400px; }
}

@media @breakpoint-sm-up {
  .dashnav-dashboards-btn a {
    max-width: 200px;
  }
  .gf-timepicker-nav-btn {
    max-width: 120px;
  }
  .panel-in-fullscreen {
    .dashnav-action-icons {
      display: none;
    }
    .dashnav-back-to-dashboard  {
      display: block;
    }
  }
}

@media @breakpoint-md-up {
  .dashnav-dashboards-btn a {
    max-width: 290px;
  }
  .gf-timepicker-nav-btn {
    max-width: 250px;
  }
  .dashnav-zoom-out {
    display: block;
  }
}

@media @breakpoint-lg {
  .panel-in-fullscreen {
    .dashnav-action-icons {
      display: block;
    }
  }

  .dashnav-dashboards-btn a {
    max-width: none;
  }
  .gf-timepicker-nav-btn {
    max-width: none;
  }
}