grafana/public/less/grafana-responsive.scss

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

$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;
  }
}