You are here

Home » API reference » GridStack 8.2

gridstack.library.css in GridStack 8.2

This is a modified version of the original GridStack library CSS.

Not needed by native CSS Grid, nor static Bootstrap/Foundation. This is a counterpart of gridstack.native.css. This file depends on gridstack.static.css so to re-use at Outlayer Isotope. This file is also loaded at admin UI pages, so beware to not break it.

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

See also

css/gridstack.css for details

File

css/gridstack.library.css
View source 
  1. /**

  2.  * @file

  3.  * This is a modified version of the original GridStack library CSS.

  4.  *

  5.  * Not needed by native CSS Grid, nor static Bootstrap/Foundation.

  6.  * This is a counterpart of gridstack.native.css.

  7.  * This file depends on gridstack.static.css so to re-use at Outlayer Isotope.

  8.  * This file is also loaded at admin UI pages, so beware to not break it.

  9.  *

  10.  * At most cases, no need to re-touch this file.

  11.  *

  12.  * @see css/gridstack.css for details

  13.  */

  14. 

  15. .is-gs-enabled.is-gs-layout > .box {

  16.   min-width: 8.3333333333%;

  17. }

  18. 

  19. .is-gs-enabled.is-gs-layout > .box[data-gs-x='1'] {

  20.   left: 8.3333333333%;

  21. }

  22. 

  23. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='1'] {

  24.   min-width: 8.3333333333%;

  25. }

  26. 

  27. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='1'] {

  28.   max-width: 8.3333333333%;

  29. }

  30. 

  31. .is-gs-enabled.is-gs-layout > .box[data-gs-x='2'] {

  32.   left: 16.6666666667%;

  33. }

  34. 

  35. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='2'] {

  36.   min-width: 16.6666666667%;

  37. }

  38. 

  39. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='2'] {

  40.   max-width: 16.6666666667%;

  41. }

  42. 

  43. .is-gs-enabled.is-gs-layout > .box[data-gs-x='3'] {

  44.   left: 25%;

  45. }

  46. 

  47. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='3'] {

  48.   min-width: 25%;

  49. }

  50. 

  51. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='3'] {

  52.   max-width: 25%;

  53. }

  54. 

  55. .is-gs-enabled.is-gs-layout > .box[data-gs-x='4'] {

  56.   left: 33.3333333333%;

  57. }

  58. 

  59. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='4'] {

  60.   min-width: 33.3333333333%;

  61. }

  62. 

  63. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='4'] {

  64.   max-width: 33.3333333333%;

  65. }

  66. 

  67. .is-gs-enabled.is-gs-layout > .box[data-gs-x='5'] {

  68.   left: 41.6666666667%;

  69. }

  70. 

  71. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='5'] {

  72.   min-width: 41.6666666667%;

  73. }

  74. 

  75. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='5'] {

  76.   max-width: 41.6666666667%;

  77. }

  78. 

  79. .is-gs-enabled.is-gs-layout > .box[data-gs-x='6'] {

  80.   left: 50%;

  81. }

  82. 

  83. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='6'] {

  84.   min-width: 50%;

  85. }

  86. 

  87. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='6'] {

  88.   max-width: 50%;

  89. }

  90. 

  91. .is-gs-enabled.is-gs-layout > .box[data-gs-x='7'] {

  92.   left: 58.3333333333%;

  93. }

  94. 

  95. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='7'] {

  96.   min-width: 58.3333333333%;

  97. }

  98. 

  99. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='7'] {

  100.   max-width: 58.3333333333%;

  101. }

  102. 

  103. .is-gs-enabled.is-gs-layout > .box[data-gs-x='8'] {

  104.   left: 66.6666666667%;

  105. }

  106. 

  107. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='8'] {

  108.   min-width: 66.6666666667%;

  109. }

  110. 

  111. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='8'] {

  112.   max-width: 66.6666666667%;

  113. }

  114. 

  115. .is-gs-enabled.is-gs-layout > .box[data-gs-x='9'] {

  116.   left: 75%;

  117. }

  118. 

  119. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='9'] {

  120.   min-width: 75%;

  121. }

  122. 

  123. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='9'] {

  124.   max-width: 75%;

  125. }

  126. 

  127. .is-gs-enabled.is-gs-layout > .box[data-gs-x='10'] {

  128.   left: 83.3333333333%;

  129. }

  130. 

  131. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='10'] {

  132.   min-width: 83.3333333333%;

  133. }

  134. 

  135. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='10'] {

  136.   max-width: 83.3333333333%;

  137. }

  138. 

  139. .is-gs-enabled.is-gs-layout > .box[data-gs-x='11'] {

  140.   left: 91.6666666667%;

  141. }

  142. 

  143. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='11'] {

  144.   min-width: 91.6666666667%;

  145. }

  146. 

  147. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='11'] {

  148.   max-width: 91.6666666667%;

  149. }

  150. 

  151. .is-gs-enabled.is-gs-layout > .box[data-gs-x='12'] {

  152.   left: 100%;

  153. }

  154. 

  155. .is-gs-enabled.is-gs-layout > .box[data-gs-min-width='12'] {

  156.   min-width: 100%;

  157. }

  158. 

  159. .is-gs-enabled.is-gs-layout > .box[data-gs-max-width='12'] {

  160.   max-width: 100%;

  161. }

  162. 

  163. .is-gs-enabled.is-gs-layout .box__content {

  164.   bottom: 0;

  165.   left: 8px;

  166.   right: 8px;

  167.   position: absolute;

  168.   width: auto;

  169.   z-index: 0;

  170. }

  171. 

  172. /* verticalMargin 10 / 2 = 5 */

  173. .is-gs-enabled.is-gs-layout[data-gs-vm="5"] .box__content {

  174.   left: 5px;

  175.   right: 5px;

  176. }

  177. 

  178. /* verticalMargin 20 / 2 = 10 */

  179. .is-gs-enabled.is-gs-layout[data-gs-vm="10"] .box__content {

  180.   left: 10px;

  181.   right: 10px;

  182. }

  183. 

  184. /* verticalMargin 30 / 2 = 15 */

  185. .is-gs-enabled.is-gs-layout[data-gs-vm="15"] .box__content {

  186.   left: 15px;

  187.   right: 15px;

  188. }

  189. 

  190. /* verticalMargin 0 + noMargin being enabled. Admin UI requires absolute. */

  191. .gridstack.is-gs-nomargin > .box > .box__content,

  192. .gridstack.is-gs-nomargin > .box > .placeholder-content {

  193.   left: 0;

  194.   right: 0;

  195. }

  196. 

  197. /* @todo re-check to use relative when having no margin. */

  198. /* Overrides default rules with over-specified. */

  199. .is-gs-disabled.is-gs-layout .box .box__content,

  200. .gridstack--gs.is-gs-nomargin .box__content {

  201.   left: auto;

  202.   position: relative;

  203.   right: auto;

  204.   width: 100%;

  205. }

  206. 

  207. /** Destroyed. */

  208. .is-gs-destroyed > .gridstack__box.box {

  209.   float: left;

  210.   left: auto;

  211.   position: relative;

  212. }

  213. 

  214. .is-gs-destroyed > .box  > .box__content,

  215. .gridstack--gs.is-gs-disabled .box__content {

  216.   position: relative;

  217. }