extend-columns-block.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /* Full Bleed Columns */
  2. .wp-block-columns.is-style-full-bleed {
  3. }
  4. .wp-block-columns.is-style-full-bleed.alignfull {
  5. padding-left: 0;
  6. padding-right: 0;
  7. }
  8. .wp-block-columns.is-style-full-bleed .wp-block-column:not(:last-child) {
  9. margin-bottom: 0;
  10. }
  11. @media (min-width: 600px) {
  12. .wp-block-columns.is-style-full-bleed .wp-block-column {
  13. flex-basis: 50%;
  14. }
  15. .wp-block-columns.is-style-full-bleed .wp-block-column:nth-child(2n) {
  16. margin-left: 0;
  17. }
  18. }
  19. @media (min-width: 782px) {
  20. .wp-block-columns.is-style-full-bleed .wp-block-column:not(:first-child) {
  21. margin-left: 0;
  22. }
  23. }
  24. /* Remove gutters */
  25. [data-type="core/columns"][data-align=full] .wp-block-columns.is-style-full-bleed > .editor-inner-blocks {
  26. padding-left: 0;
  27. padding-right: 0;
  28. }
  29. @media (min-width: 600px) {
  30. [data-type="core/columns"][data-align=full] .wp-block-columns.is-style-full-bleed > .editor-inner-blocks {
  31. padding-left: 0;
  32. padding-right: 0;
  33. }
  34. }
  35. @media (min-width: 600px) {
  36. .wp-block-columns.is-style-full-bleed > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"]:nth-child(2n) {
  37. margin-left: 0;
  38. }
  39. }
  40. @media (min-width: 782px) {
  41. .wp-block-columns.is-style-full-bleed > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"]:not(:first-child) {
  42. margin-left: 0;
  43. }
  44. }
  45. @media (min-width: 600px) {
  46. .wp-block-columns.is-style-full-bleed > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] {
  47. flex-basis: calc(50% - 28px);
  48. margin-left: 14px;
  49. margin-right: 14px;
  50. }
  51. }
  52. /* Project */
  53. .wp-block-columns.is-style-project.alignfull {
  54. padding-left: 16px;
  55. padding-right: 16px;
  56. }
  57. @media (min-width: 600px) {
  58. .wp-block-columns.is-style-project.alignfull {
  59. padding-left: 32px;
  60. padding-right: 0;
  61. }
  62. .wp-block-columns.is-style-project > .wp-block-column:nth-child(2n) {
  63. margin-left: 0;
  64. }
  65. }
  66. @media (min-width: 1024px) {
  67. .wp-block-columns.is-style-project > .wp-block-column:first-child {
  68. padding-right: 32px;
  69. }
  70. .wp-block-columns.is-style-project > .wp-block-column:not(:first-child) {
  71. margin-left: 0;
  72. }
  73. .wp-block-columns.is-style-project > .wp-block-column,
  74. .wp-block-columns.is-style-project > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] {
  75. flex-basis: 100% !important;
  76. }
  77. .wp-block-columns.is-style-project > .wp-block-column:first-of-type,
  78. .wp-block-columns.is-style-project > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"]:first-of-type {
  79. flex-shrink: 0;
  80. flex-basis: auto !important;
  81. width: calc( 0.5 * (100vw - calc( 782px - 32px) - 64px)) !important;
  82. }
  83. }