test.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /** { box-sizing: border-box; }*/
  2. body {
  3. font-family: sans-serif;
  4. color: #333;
  5. }
  6. .gallery {
  7. border: 1px solid;
  8. width: 400px;
  9. margin-bottom: 40px;
  10. }
  11. .gallery .cell {
  12. width: 100%;
  13. height: 100px;
  14. background: #F09;
  15. font-size: 40px;
  16. color: white;
  17. }
  18. .variable-width .cell { width: 25%; } /* 100px */
  19. .variable-width .cell.width2 { width: 40%; background: #F90; } /* 160px */
  20. .variable-width .cell.width3 { width: 60%; background: #09F; } /* 240px */
  21. #position-cells.percent-margin .cell { margin: 0 2%; }
  22. #position-cells.pixel-margin .cell { margin: 0 10px; }
  23. /*#drag-wrap-around { position: fixed; top: 0;}*/
  24. .drag .cell { margin-right: 5%; }
  25. #watch.has-after:after {
  26. content: 'flickity';
  27. display: none;
  28. }
  29. #lazyload img {
  30. display: block;
  31. max-height: 100px;
  32. }
  33. /* ---- group-cells ---- */
  34. #group-cells .cell {
  35. width: 100px;
  36. /* border: 1px solid;*/
  37. }
  38. #group-cells .cell--width2 { width: 200px; }
  39. #group-cells .cell--width3 { width: 300px; }
  40. #group-cells .cell--width4 { width: 400px; }
  41. #group-cells.is-expanded { width: 600px; }
  42. #group-cells .cell:nth-child(2n) { background: #09F; }
  43. /* ---- adaptive-height ---- */
  44. #adaptive-height .cell { width: 33.33%; }
  45. #adaptive-height .cell--height2 { height: 200px; }
  46. #adaptive-height .cell--height3 { height: 300px; }
  47. #adaptive-height .cell--height4 { height: 400px; }
  48. #adaptive-height .cell:nth-child(2n) { background: #09F; }
  49. /* ---- select-cell ---- */
  50. #select-cell .cell { width: 33.33%; }