gridstack.debug.css in GridStack 8.2

Provides debug utilites, both front-end and Layout Builder pages.

File

css/admin/gridstack.debug.css

/**
 * @file
 * Provides debug utilites, both front-end and Layout Builder pages.
 */

/*
Bad for background.
.user-logged-in .is-gs-debug.row .box__content {
  position: relative;
}
*/

.user-logged-in .is-gs-debug .box__content::after,
.user-logged-in .is-gs-debug.row .box--empty::after {
  box-sizing: border-box; /* dups due to csslint ignoring inheritance */
  content: '';
  border: 1px dotted rgba(0, 0, 0, .2);
  display: block;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
  width: auto;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.user-logged-in .is-gs-debug .box__content[class*="bg-"]::after {
  display: none;
}

.user-logged-in .is-gs-debug.row .gridstack__box {
  min-height: 80px;
  position: relative;
}

.user-logged-in .gridstack.is-gs-debug .gridstack__box::before {
  box-sizing: border-box; /* dups due to csslint ignoring inheritance */
  background: rgba(0, 0, 0, .8);
  color: #fff;
  content: attr(data-gs-delta);
  display: block;
  font-size: 12px;
  height: 24px;
  line-height: 22px;
  position: absolute;
  left: 0;
  padding: 2px 0;
  text-align: center;
  top: 0;
  min-width: 24px;
  z-index: 9;
}

.user-logged-in .gridstack.is-gs-debug .gridstack__box.box--nested::before {
  min-width: 32px;
}

.user-logged-in .gridstack.row.is-gs-debug .gridstack__box::before,
.user-logged-in .gridstack.row.is-gs-lb .gridstack__box.box::before {
  left: 15px;
}

.user-logged-in .gridstack--gs.is-gs-debug .gridstack__box::before {
  left: 8px;
}

.user-logged-in .gridstack--js.is-gs-lb .gridstack__box::before {
  left: 0;
}

.user-logged-in .gridstack.is-gs-debug .gridstack__box .box:first-child::before,
.user-logged-in .gridstack.is-gs-debug .gridstack__box.box--nested:first-child::before {
  left: 40px;
}

.user-logged-in .gridstack.is-gs-lbux.row .gridstack__box::before {
  top: 10px;
}