You are here

Home » API reference » GridStack 8.2

gridstack.theme.css in GridStack 8.2

Same filename and directory in other branches
  1. 8 css/gridstack.theme.css

Provides basic theme to avoid broken display OOTB for js-driven layouts.

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

See also

css/gridstack.css for details

File

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

  2.  * @file

  3.  * Provides basic theme to avoid broken display OOTB for js-driven layouts.

  4.  *

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

  6.  *

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

  8.  */

  9. 

  10. /* .gridstack--js .media, .gridstack--js .blazy__caption */

  11. .gridstack--js .box__caption,

  12. .gridstack--js .box__category,

  13. .is-gs-enabled .box__content {

  14.   margin: 0;

  15.   top: 0;

  16. }

  17. 

  18. .gridstack--js .box__category,

  19. .gridstack--js .box__caption {

  20.   position: absolute;

  21. }

  22. 

  23. .gridstack--js .box__caption {

  24.   width: 100%;

  25. }

  26. 

  27. .gridstack--js .box__category {

  28.   left: auto;

  29.   padding: 5px 15px;

  30.   right: 0;

  31.   text-align: right;

  32.   width: auto;

  33. }

  34. 

  35. .gridstack--js .box--stamp .box__content {

  36.   background-color: rgba(0, 0, 0, .8);

  37.   color: #fff;

  38. }

  39. 

  40. .gridstack--js .box__stamp > * {

  41.   padding: 15px;

  42. }

  43. 

  44. /**

  45.  * When gridstack is packing/ preparing its layout for ~100ms.

  46.  * Do not use display: none. Use visibility, or opacity, and some transitions.

  47.  * This assumes a theme which outputs .js class on HTML element, else useless.

  48.  */

  49. .js .is-gs-packing:not(.ungridstack) {

  50.   opacity: 0;

  51.   visibility: hidden;

  52. }