gridstack.theme.css in GridStack 8

.gridstack: module defined classes to abide its namespace. .grid-stack: JS defined classes, or managed by JS dynamically.

File

css/gridstack.theme.css

/**
 * @file
 *
 * .gridstack: module defined classes to abide its namespace.
 * .grid-stack: JS defined classes, or managed by JS dynamically.
 */

.gridstack--js {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  min-height: 210px;
  position: relative;
}

.gridstack--js.grid-stack-rtl {
  direction: ltr;
}

.gridstack--js.grid-stack-rtl > .box {
  direction: rtl;
}

.gridstack--js .media,
.gridstack--js .box__content,
.gridstack--js .box__caption,
.gridstack--js .blazy__caption {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

.gridstack--js .box__content > a,
.gridstack--js .media,
.gridstack--js .box__content {
  display: block;
  height: 100%;
}

.gridstack--js .slide__media .media {
  position: relative;
}

.gridstack--js > .box > .box__content {
  left: 10px;
  right: 10px;
  bottom: 0;
  width: auto;
  z-index: 0 !important;
}

.gridstack--js,
.gridstack--js .box {
  -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
}

.gridstack--js .box,
.gridstack--js .box__content {
  background-position: center center;
  background-size: cover;
}

.gridstack--js .box {
  min-height: 40px;
}

.gridstack--js .box img {
  height: auto;
}

.gridstack--js .box img,
.gridstack--js .box iframe {
  display: block;
  max-width: 100%;
  width: 100%;
}

.gridstack--nomargin > .box > .box__content,
.gridstack--nomargin > .box > .placeholder-content {
  left: 0;
  right: 0;
}

.gridstack--js .media--loading::before,
.gridstack--js .media--loading .box__caption {
  opacity: 0;
}

.gridstack--js .b-loaded .box__caption,
.grid-stack-static .media--loading::before,
.grid-stack-static .media--loading .box__content {
  opacity: 1;
}

.grid-stack-static .media--loading .box__content {
  background-color: #333;
}

/**
 * Gridstack is disabled by default at 768.
 */
.gridstack--disabled {
  height: auto !important;
}

/** Needed !important to override JS, or unexpected overrides. */
.gridstack--js.gridstack--disabled > .box {
  float: left;
  height: auto !important;
  position: relative !important;
  /* width: auto !important; */
  left: 0 !important;
  top: auto !important;
  margin-bottom: 0;
}

.gridstack--js.gridstack--disabled > .box > .box__content {
  left: auto;
  position: relative;
  right: auto;
}

.gridstack--js.gridstack--disabled > .box--background > .box__content {
  min-height: 320px;
}

/**
 * @todo rework this temporary fix for the mess.
 */
.gridstack--js.gridstack--disabled.grid-stack-1 > .box {
  width: 100%;
}

.gridstack--js.gridstack--disabled.grid-stack-2 > .box {
  width: 50%;
}

.gridstack--js.gridstack--disabled.grid-stack-3 > .box {
  width: 33.3333333333%;
}

.gridstack--js.gridstack--disabled.grid-stack-4 > .box {
  width: 25%;
}

.gridstack--js.gridstack--disabled.grid-stack-5 > .box {
  width: 20%;
}

.gridstack--js.gridstack--disabled.grid-stack-6 > .box {
  width: 16.6666666667%;
}

.gridstack--js.gridstack--disabled.grid-stack-7 > .box {
  width: 14.2857142857%;
}

.gridstack--js.gridstack--disabled.grid-stack-8 > .box {
  width: 12.5%;
}

.gridstack--js.gridstack--disabled.grid-stack-9 > .box {
  width: 11.1111111111%;
}

.gridstack--js.gridstack--disabled.grid-stack-10 > .box {
  width: 10%;
}

.gridstack--js.gridstack--disabled.grid-stack-10 > .box {
  width: 9.0909090909%;
}