You are here

Home » API reference » GridStack 8

gridstack.admin.css in GridStack 8

File

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

  2.  * @file

  3.  */

  4. 

  5. .form--gridstack {

  6.   margin-left: auto;

  7.   margin-right: auto;

  8. }

  9. 

  10. .form--gridstack .details--settings {

  11.   background: #f9f9f9;

  12.   border: 1px solid #dbe1e9;

  13.   box-shadow: 0 0 0 4px #f9f9f9;

  14.   clear: both;

  15.   float: left;

  16.   overflow: visible;

  17.   position: relative;

  18.   margin: 30px auto;

  19.   width: 100%;

  20. }

  21. 

  22. .form--gridstack details.form-wrapper {

  23.   clear: both;

  24. }

  25. 

  26. .gridstack--ui {

  27.   background: lightgoldenrodyellow;

  28.   margin-bottom: 30px;

  29.   margin-top: 30px;

  30. }

  31. 

  32. .gridstack--ui .gridstack {

  33.   background: none;

  34.   margin: 0;

  35. }

  36. 

  37. .gridstack--ui .box__content {

  38.   color: #2c3e50;

  39.   text-align: center;

  40.   background-color: #18bc9c;

  41. }

  42. 

  43. .gridstack--ui .gridstack--nested .box__content {

  44.   background-color: #18bc9c;

  45.   background-color: rgba(24, 288, 156, .4);

  46. }

  47. 

  48. .gridstack--ui .gridstack--nested .gridstack .box__content {

  49.   background-color: #18bc9c;

  50.   background-color: rgba(24, 288, 156, .6);

  51. }

  52. 

  53. .gridstack-preview {

  54.   clear: both;

  55. }

  56. 

  57. .form--gridstack .gridstack-preview .form-type-textarea {

  58.   float: none;

  59.   width: 100% !important;

  60. }

  61. 

  62. .form--gridstack .gridstack-actions {

  63.   padding: 15px;

  64.   text-align: center;

  65. }

  66. 

  67. .form--gridstack .gridstack-actions .btn {

  68.   margin: 0 5px;

  69. }

  70. 

  71. .form--gridstack .box .btn-group {

  72.   display: block;

  73.   margin: 0;

  74.   left: 0;

  75.   position: absolute;

  76.   text-align: center;

  77.   top: 0;

  78.   width: 100%;

  79. }

  80. 

  81. .form--gridstack .box .btn {

  82.   display: block;

  83.   font-size: 22px;

  84.   padding: 0;

  85.   width: 28px;

  86. }

  87. 

  88. .form--gridstack .box .box__content .form-item {

  89.   width: auto;

  90. }

  91. 

  92. .form--gridstack .box .box__content .form-select {

  93.   border: 1px solid #dadada;

  94.   font-size: 13px;

  95.   font-weight: 400;

  96.   height: 28px;

  97.   max-width: 80px;

  98.   min-width: 80px;

  99.   position: relative;

  100.   text-indent: 12px;

  101.   -moz-appearance: none;

  102.   -webkit-appearance: none;

  103.   appearance: none;

  104.   text-indent: .01px;

  105.   text-overflow: "";

  106.   white-space: nowrap; /* Fix for Bartik */

  107. }

  108. 

  109. .form--gridstack .box .box__content .form-select,

  110. .form--gridstack .box .box__content .form-text {

  111.   display: inline-block;

  112.   float: none;

  113.   margin: 0 2px;

  114.   min-height: 32px;

  115.   visibility: hidden;

  116. }

  117. 

  118. .form--gridstack #edit-json .form-item {

  119.   width: 100%;

  120. }

  121. 

  122. .form--optionset .gridstack--nomargin > .gridstack__box > .box__content,

  123. .form--optionset .gridstack--nomargin > .gridstack__box > .placeholder-content {

  124.   -webkit-box-shadow: 0 0 1px 0 #fff inset;

  125.   box-shadow: 0 0 1px 0 #fff inset;

  126. }

  127. 

  128. .gridstack--ui .box::before,

  129. .gridstack--nested .box::before,

  130. .form--gridstack .box::after {

  131.   background: rgba(0, 0, 0, 0.8);

  132.   color: #fff;

  133.   display: block;

  134.   font-size: 13px;

  135.   line-height: 1.2;

  136.   left: 10px;

  137.   min-width: 28px;

  138.   padding: 5px 10px;

  139.   position: absolute;

  140.   text-align: center;

  141.   top: 0;

  142.   z-index: 8;

  143. }

  144. 

  145. .gridstack.gridstack--nested .box::before {

  146.   background: rgba(0, 0, 0, 0.6);

  147. }

  148. 

  149. .gridstack.gridstack--nested .box[data-gs-x="0"]:first-child::before {

  150.   left: 40px;

  151. }

  152. 

  153. .form--gridstack .gridstack--nested .box::after {

  154.   background: #777;

  155. }

  156. 

  157. .gridstack--ui .box::before,

  158. .gridstack--nested .box::before {

  159.   content: attr(data-ordinal);

  160.   pointer-events: none;

  161. }

  162. 

  163. .form--gridstack .box::after {

  164.   bottom: 0;

  165.   content: attr(data-dimension);

  166.   left: 50%;

  167.   padding: 5px;

  168.   top: auto;

  169.   transform: translateX(-50%);

  170.   visibility: hidden;

  171. }

  172. 

  173. .form--gridstack .box .btn--add,

  174. .form--gridstack .box .btn--nested,

  175. .form--gridstack .box .btn--remove {

  176.   position: absolute;

  177.   right: 10px;

  178.   top: 0;

  179.   z-index: 10;

  180. }

  181. 

  182. .form--gridstack .box .btn--add,

  183. .form--gridstack .box .btn--nested {

  184.   right: 40px;

  185. }

  186. 

  187. .form--gridstack .box:hover::after,

  188. .form--gridstack .box:hover .form-select,

  189. .form--gridstack .box:hover .form-text {

  190.   visibility: visible;

  191. }

  192. 

  193. .gridstack--ui .btn-group {

  194.   z-index: 9;

  195. }

  196. 

  197. .gridstack--ui .box .btn-group div {

  198.   background: none;

  199.   border: 0;

  200.   display: inline-block;

  201.   float: none;

  202.   min-height: 22px;

  203.   padding: 0;

  204.   width: auto;

  205. }

  206. 

  207. .form--optionset .gridstack--nomargin .box::before {

  208.   left: 0;

  209. }

  210. 

  211. .form--optionset .gridstack--nomargin .box .btn--remove {

  212.   right: 0;

  213. }

  214. 

  215. .form--gridstack #edit-add-grids {

  216.   display: block;

  217.   margin: 0 auto;

  218.   visibility: hidden;

  219. }

  220. 

  221. .form--gridstack .gridstack-preview .ajax-progress-throbber .throbber,

  222. .form--gridstack .gridstack-preview .ajax-progress-throbber .message {

  223.   display: inline-block;

  224.   float: none;

  225.   margin: 0 auto;

  226.   max-width: 210px;

  227. }

  228. 

  229. .form--gridstack .gridstack-preview .ajax-progress {

  230.   display: block;

  231.   margin-top: -40px;

  232.   text-align: center;

  233. }

  234. 

  235. .form--gridstack .gridstack-wrapper {

  236.   min-height: 210px;

  237.   overflow: auto;

  238.   padding: 20px;

  239. }

  240. 

  241. .form-wrapper--table-gridstack-responsive th:first-child {

  242.   text-align: right;

  243. }

  244. 

  245. .form-wrapper--table-gridstack-responsive th:last-child {

  246.   display: none;

  247. }

  248. 

  249. /**

  250.  * Canvas for dynamic icon/ screenshot.

  251.  *

  252.  * @todo use background: -moz-element(#gridstack-1), gray; when cross-browser.

  253.  */

  254. .form--gridstack .gridstack-screenshot {

  255.   background-color: #fff;

  256.   background-size: 100% auto;

  257.   background-repeat: no-repeat;

  258.   background-position: center center;

  259.   border: 1px solid #000;

  260.   display: block;

  261.   margin: 0 auto;

  262.   padding: 5px;

  263.   text-align: center;

  264.   width: 165px;

  265.   height: 232px;

  266.   z-index: 9;

  267. }

  268. 

  269. .form--gridstack #gridstack-canvas {

  270.   bottom: 0;

  271.   display: block;

  272.   height: 100%;

  273.   left: -100%;

  274.   line-height: 0;

  275.   margin: auto;

  276.   padding: 0;

  277.   position: absolute;

  278.   right: 0;

  279.   top: 0;

  280.   visibility: hidden;

  281.   width: 100%;

  282. }

  283. 

  284. .gridstack-list-form .media img {

  285.   height: auto;

  286.   max-width: 140px;

  287. }

  288. 

  289. .gridstack-list-form td:nth-child(3) {

  290.   text-transform: capitalize;

  291. }

  292. 

  293. .gridstack__box--placeholder > .placeholder-content {

  294.   border: 2px dashed #ccc;

  295.   background: red;

  296.   height: inherit;

  297. }

  298. 

  299. .gridstack__box .box__handle {

  300.   color: #fff;

  301.   cursor: grab;

  302.   display: block;

  303.   font-size: 22px;

  304.   left: 50%;

  305.   letter-spacing: 4px;

  306.   position: absolute;

  307.   text-align: center;

  308.   top: 50%;

  309.   transform: translate(-50%, -50%);

  310.   z-index: 9;

  311. }

  312. 

  313. /**

  314.  * Static grid with intentional !important to avoid issues with admin themes.

  315.  */

  316. .is-framework .form-wrapper-box,

  317. .is-framework .form-wrapper--gridstack-settings,

  318. .is-framework .form-item--image-style,

  319. .is-framework .form-item--column,

  320. .form--gridstack.is-framework .btn--clear,

  321. .form--gridstack.is-framework .btn--load,

  322. .form--optionset--default .gridstack-actions,

  323. .form--optionset--default .gridstack-screenshot,

  324. .form--gridstack.form--optionset .gridstack--nested .gridstack--nested,

  325. .form--gridstack.form--optionset .btn--nested,

  326. .form--gridstack.form--optionset .box .btn--add,

  327. .form--gridstack.form--optionset .gridstack--nested .btn--nested,

  328. .form--gridstack.form--optionset .vertical-tabs__menu-item-summary,

  329. .form--gridstack.is-framework .visible-js {

  330.   display: none !important;

  331. }

  332. 

  333. .form--gridstack.is-framework .gridstack--nested,

  334. .form--gridstack.is-framework .btn--nested,

  335. .form--gridstack.is-framework  .box .btn--add,

  336. .form--gridstack.form--optionset .gridstack--main .btn--content,

  337. .form--gridstack.form--optionset .gridstack--main > .box > .box__content > .btn-group > .btn--remove,

  338. .form--gridstack.is-framework .box .btn--content.btn--remove {

  339.   display: block !important;

  340. }

  341. 

  342. .form--gridstack.form--gridstack-js .gridstack .btn--content,

  343. .form--gridstack.form--gridstack-js .gridstack .btn--root.btn--add,

  344. /* .form--gridstack.form--optionset .gridstack.gridstack--nested .btn--add,

  345. .form--gridstack.form--optionset .gridstack.gridstack--nested .gridstack--nested .btn, */

  346. .form--gridstack.form--optionset .gridstack.gridstack--sub .box .btn,

  347. .form--gridstack.form--optionset .gridstack.gridstack--nested .box .btn--nested,

  348. .form--gridstack.form--optionset .gridstack.gridstack--main .box .btn--content.btn--add,

  349. .form--gridstack.form--optionset .gridstack-preview--sub.form-disabled .btn {

  350.   display: none !important;

  351. }

  352. 

  353. .form--gridstack.form--optionset .gridstack-preview--sub.form-disabled {

  354.   position: relative;

  355. }

  356. 

  357. .form--gridstack.form--optionset .gridstack-preview--sub.form-disabled::before {

  358.   content: '';

  359.   cursor: not-allowed;

  360.   display: block;

  361.   height: 100%;

  362.   left: 0;

  363.   position: absolute;

  364.   top: 0;

  365.   width: 100%;

  366.   z-index: 99;

  367. }

  368. 

  369. .form--gridstack.form--optionset .gridstack-preview--sub .btn--main {

  370.   left: -100%;

  371.   position: absolute;

  372.   visibility: hidden;

  373. }

  374. 

  375. /** Fix for Bootstrap vs. Seven too small font sizes.*/

  376. .form--slick.form--framework {

  377.   font-size: 16px;

  378. }

  379. 

  380. .form--framework .has-tooltip .form-item > .description,

  381. .form--framework .has-tooltip .form-composite > .fieldset-wrapper > .description {

  382.   font-size: 13px;

  383. }

  384. 

  385. .form--slick.form--framework small,

  386. .form--slick.form--framework .form-item,

  387. .form--slick.form--framework .form-item label,

  388. .form--slick.form--framework .form-item label.option,

  389. .form--slick.form--framework .form-item .form-text,

  390. .form--slick.form--framework .form-item .form-select,

  391. .form--slick.form--framework .form-item .form-textarea {

  392.   font-size: 14px;

  393. }

  394. 

  395. .form--slick.form--framework .form__title {

  396.   font-size: 22px;

  397. }

  398. 

  399. .form--gridstack.is-framework .form-item-options-use-framework {

  400.   float: none;

  401.   width: 100% !important;

  402. }

  403. 

  404. .form-item-options-use-framework label {

  405.   width: auto;

  406. }

  407. 

  408. .form-item-options-use-framework label span {

  409.   text-transform: capitalize;

  410. }

  411. 

  412. /**

  413.  * Nested grids.

  414.  */

  415. .gridstack.gridstack--nested {

  416.   min-height: 60px;

  417. }

  418. 

  419. .gridstack.gridstack--nested .btn {

  420.   background: #18bc9c;

  421. }

  422. 

  423. .gridstack.gridstack--nested .btn--remove {

  424.   border: 0;

  425.   left: 32px;

  426.   top: 26px;

  427. }

  428. 

  429. .is-framework .gridstack > .box > .box__content {

  430.   left: 0;

  431.   right: 0;

  432.   margin: 0 -8px;

  433.   position: relative;

  434. }

  435. 

  436. .is-framework .gridstack--nested > .box > .box__content {

  437.   margin: 0 auto;

  438. }

  439. 

  440. .is-framework .gridstack > .box,

  441. .is-framework .gridstack--nested > .box {

  442.   padding: 0 8px;

  443. }

  444. 

  445. .is-framework .gridstack > .box > .box__content {

  446.   box-shadow: 0 0 1px 0 #fff inset;

  447. }

  448. 

  449. .is-framework .gridstack--nested > .box > .box__content {

  450.   box-shadow: none;

  451. }

  452. 

  453. .form--gridstack.form--optionset .form-item-options-use-framework {

  454.   border: 0;

  455.   height: 42px;

  456.   position: absolute;

  457.   top: -48px;

  458.   left: 0;

  459.   min-height: 42px;

  460.   padding: 12px 0 0;

  461.   width: 80% !important;

  462.   z-index: 6;

  463. }

  464. 

  465. .form--gridstack.form--optionset .form-wrapper--gridstack-settings > .details-wrapper {

  466.   padding: 15px 0;

  467. }

  468. 

  469. /**

  470.  * Vertical tabs.

  471.  */

  472. .form--gridstack.form--optionset .form-type-vertical-tabs {

  473.   background: none;

  474.   border: 0;

  475.   padding: 0;

  476. }

  477. 

  478. .form--gridstack.form--optionset .vertical-tabs {

  479.   border: 0;

  480.   box-shadow: none;

  481.   margin-top: 0;

  482.   padding: 0;

  483. }

  484. 

  485. .form--gridstack.form--optionset .vertical-tabs__panes .form__title,

  486. .form--gridstack.form--optionset .vertical-tabs__panes details.form-wrapper,

  487. .form--gridstack.form--optionset .vertical-tabs__panes .form-actions,

  488. .form--gridstack.form--optionset .vertical-tabs__panes .gridstack-preview {

  489.   clear: none;

  490. }

  491. 

  492. .form--gridstack.form--optionset .vertical-tabs__panes .gridstack-preview {

  493.   float: left;

  494.   width: 100%;

  495. }

  496. 

  497. .form--gridstack.form--optionset .vertical-tabs__menu-item {

  498.   background: none;

  499. }

  500. 

  501. .form--gridstack.form--optionset .vertical-tabs__menu {

  502.   background: #ccc;

  503.   border: 0;

  504.   float: none;

  505.   margin: 0;

  506.   text-align: center;

  507.   text-transform: uppercase;

  508.   width: 100%;

  509. }

  510. 

  511. .form--gridstack.form--optionset .vertical-tabs__menu-item,

  512. .form--gridstack.form--optionset .vertical-tabs__menu-item.is-selected {

  513.   border: 0;

  514.   box-shadow: none;

  515.   display: inline-block;

  516.   float: none;

  517.   margin: 0;

  518.   vertical-align: top;

  519.   width: auto;

  520. }

  521. 

  522. .form--gridstack.form--optionset .vertical-tabs__menu-item a {

  523.   font-size: 22px;

  524. }

  525. 

  526. .form--gridstack.form--optionset .vertical-tabs__menu-item a,

  527. .form--gridstack.form--optionset .vertical-tabs__menu-item a:hover,

  528. .form--gridstack.form--optionset .vertical-tabs__menu-item a:focus {

  529.   background: none;

  530.   border: 0;

  531.   outline: 0;

  532. }

  533. 

  534. .form--gridstack.form--optionset .vertical-tabs__menu-item.is-selected a {

  535.   background: #f9f9f9;

  536. }

  537. 

  538. 

  539. .form--gridstack.form--optionset .vertical-tabs__panes {

  540.   background: #f9f9f9;

  541.   border: 0;

  542.   margin: 0;

  543.   padding: 0;

  544. }

  545. 

  546. .form--gridstack.form--optionset .vertical-tabs details.vertical-tabs__pane,

  547. .form--gridstack.form--optionset .vertical-tabs__panes .gridstack-wrapper,

  548. .form--gridstack.form--optionset .vertical-tabs__pane > .details-wrapper {

  549.   padding: 0;

  550. }

  551. 

  552. .form--gridstack.form--optionset.is-saving .vertical-tabs__pane {

  553.   display: block !important;

  554. }

  555. 

  556. .form--gridstack .gridstack--root {

  557.   transition: width 1s ease-in;

  558. }

  559. 

  560. .form-wrapper--icon img {

  561.   height: auto;

  562.   max-width: 100%;

  563. }

  564. 

  565. /** Prevents non-expandable box with too small size. */

  566. .form--gridstack .gridstack-preview--sub .gridstack--nested .box[data-gs-width="1"],

  567. .form--gridstack .gridstack-preview--sub .gridstack--nested .box[data-gs-width="2"] {

  568.   min-width: 60px;

  569. }

  570. 

  571. .layout-builder--layout .gridstack__box {

  572.   min-height: 64px;

  573. }

  574. 

  575. .layout-builder--layout .gridstack__box .gridstack__box {

  576.   outline: 1px dashed #2f91da;

  577. }

  578. 

  579. .gridstack-list-form [data-drupal-selector="edit-entities-default"] {

  580.   display: none;

  581. }

  582. 

  583. .form--slick .form-disabled.form-item-options-use-framework {

  584.   opacity: 1;

  585. }

  586. 

  587. @media screen and (min-width: 1024px) {

  588.   .form-wrapper.form-wrapper--inline {

  589.     display: inline-block;

  590.     float: none;

  591.     margin: 2px 0;

  592.     vertical-align: top;

  593.     width: 49%;

  594.   }

  595. 

  596.   .layout-builder-configure-section .form-wrapper.form-wrapper--inline {

  597.     width: 100%;

  598.   }

  599. 

  600.   .form--gridstack .gridstack-screenshot {

  601.     position: absolute;

  602.     right: 0;

  603.     top: -80px;

  604.   }

  605. 

  606.   .form--gridstack.form--optionset .form-item--width .description {

  607.     left: 0;

  608.     min-width: 480px;

  609.   }

  610. }

  611. 

  612. @media screen and (min-width: 1280px) {

  613.   .form--optionset .form-wrapper--gridstack-grid .form-item,

  614.   .toolbar-tray-open .form--optionset .form-wrapper--gridstack-grid  .form-item {

  615.     width: 20%;

  616.   }

  617. 

  618.   .form--optionset .form-wrapper--gridstack-grids .form-item  label {

  619.     width: 100px;

  620.   }

  621. 

  622.   .form--optionset .form-wrapper--gridstack-grids  .form-select {

  623.     max-width: 100px;

  624.     min-height: 28px;

  625.     min-width: 100px;

  626.   }

  627. 

  628.   .form--gridstack #edit-json .form-item {

  629.     width: 100%;

  630.   }

  631. }

  632. 

  633. @media screen and (min-width: 1400px) {

  634.   .form--gridstack {

  635.     max-width: 1400px;

  636.   }

  637. 

  638.   .form-wrapper.form-wrapper--inline {

  639.     width: 32%;

  640.   }

  641. 

  642.   .layout-builder-configure-section .form-wrapper.form-wrapper--inline {

  643.     width: 100%;

  644.   }

  645. }