gridstack.layout.css in GridStack 8.2

This file is loaded for Layout Builder integration.

The provided rules are not available at CSS framework, internal utilities.

At most cases, might need to re-touch this file.

File

css/gridstack.layout.css

/**
 * @file
 * This file is loaded for Layout Builder integration.
 *
 * The provided rules are not available at CSS framework, internal utilities.
 *
 * At most cases, might need to re-touch this file.
 */

/* Vertical margin rules. */
.vm-xs .box {
  margin-bottom: 5px;
  margin-top: 5px;
}

.vm-sm .box {
  margin-bottom: 10px;
  margin-top: 10px;
}

.vm-md .box {
  margin-bottom: 15px;
  margin-top: 15px;
}

.vm-lg .box {
  margin-bottom: 20px;
  margin-top: 20px;
}

.vm-xl .box {
  margin-bottom: 30px;
  margin-top: 30px;
}

/* Padding rules. */
/* Stick to a CSS framework, at least Bootstrap, for left and right padding. */
.p-xs {
  padding: 15px;
}

.p-sm {
  padding: 30px 15px;
}

.p-md {
  padding: 60px 15px;
}

.p-lg {
  padding: 120px 15px 60px;
}

.p-xl {
  padding: 210px 15px 60px;
}

/**
 * Min height to fix collapsed containers with contentless or edge to edge
 * due to background absolute position.
 * Media element (IMG, IFRAME, VIDEO) has class is-gs-media.
 * The min-height is configurable via Layout Builder UI, hence just basic.
 */
.b-gs,
.is-gs-media {
  min-height: 120px;
}

/* Ensures configurable options respected, put after the above. */
.mh-xs {
  min-height: 240px;
}

.mh-sm {
  min-height: 320px;
}

.mh-md {
  min-height: 480px;
}

.mh-lg {
  min-height: 640px;
}

.mh-xl {
  min-height: 720px;
}

/* XS < 576px, SM >= 576px, MD >= 768px, LG >= 992px, XL >= 1200px */
@media screen and (min-width: 768px) {
  .mh-md-xs {
    min-height: 240px;
  }

  .mh-md-sm {
    min-height: 320px;
  }

  .mh-md-md {
    min-height: 480px;
  }

  .mh-md-lg {
    min-height: 640px;
  }

  .mh-md-xl {
    min-height: 720px;
  }
}

@media screen and (min-width:1200px) {
  .mh-lg-xs {
    min-height: 240px;
  }

  .mh-lg-sm {
    min-height: 320px;
  }

  .mh-lg-md {
    min-height: 480px;
  }

  .mh-lg-lg {
    min-height: 640px;
  }

  .mh-lg-xl {
    min-height: 720px;
  }
}

/* BG position. */
.bg-bottom .b-bg {
  background-position: bottom;
}

.bg-left .b-bg {
  background-position: left;
}

.bg-right .b-bg {
  background-position: right;
}

.bg-top .b-bg {
  background-position: top;
}

.bg-bottom-left .b-bg {
  background-position: bottom left;
}

.bg-bottom-right .b-bg {
  background-position: bottom right;
}

.bg-top-left .b-bg {
  background-position: top left;
}

.bg-top-right .b-bg {
  background-position: top right;
}

/* Bg dark with opacity */
.bg-dark-20 {
  background-color: rgba(0, 0, 0, .2);
}

.bg-dark-40 {
  background-color: rgba(0, 0, 0, .4);
}

.bg-dark-60 {
  background-color: rgba(0, 0, 0, .6);
}

.bg-dark-80 {
  background-color: rgba(0, 0, 0, .8);
}

.bg-dark-90 {
  background-color: rgba(0, 0, 0, .9);
}

/* Be careful, breaking layout. */
.row [class*="rounded"] { /* csslint allow: unqualified-attributes */
  position: relative;
  overflow: hidden;
}

.row [class*="rounded"] .box__bg { /* csslint allow: unqualified-attributes */
  padding-left: 0;
  padding-right: 0;
}