grid-layout.css

Same filename in this branch
  1. 8.x-1.x paragraphs_collection/modules/paragraphs_collection_demo/css/grid-layout.css
  2. 8.x-1.x paragraphs_collection/modules/paragraphs_collection_test/css/grid-layout.css
.paragraphs-collection-demo-behavior-grid-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.paragraphs-collection-demo-behavior-grid-row.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.paragraphs-collection-demo-behavior-grid-row.no-gutter > [class^="paragraphs-behavior-flexible-grid-col"] {
  padding-right: 0;
  padding-left: 0;
}

@media (min-width: 576px) {
  .paragraphs-collection-demo-behavior-grid-row.equal-cols {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
  }
}

.paragraphs-collection-demo-behavior-grid-row.equal-cols .paragraphs-behavior-flexible-grid-col {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  .paragraphs-collection-demo-behavior-grid-row.equal-cols .paragraphs-behavior-flexible-grid-col {
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}

[class^="paragraphs-behavior-flexible-grid-col"] {
  position: relative;
  box-sizing: border-box;
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  max-width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.paragraphs-behavior-flexible-grid-col-1-2 {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

@media (min-width: 576px) {
  .paragraphs-behavior-flexible-grid-col-1-2 {
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
}

.paragraphs-behavior-flexible-grid-col-1-4 {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

@media (min-width: 576px) {
  .paragraphs-behavior-flexible-grid-col-1-4 {
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
}

.paragraphs-behavior-flexible-grid-col-3-4 {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

@media (min-width: 576px) {
  .paragraphs-behavior-flexible-grid-col-3-4 {
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
}

.paragraphs-behavior-flexible-grid-col-1-3 {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

@media (min-width: 576px) {
  .paragraphs-behavior-flexible-grid-col-1-3 {
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
}

.paragraphs-behavior-flexible-grid-col-2-3 {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

@media (min-width: 576px) {
  .paragraphs-behavior-flexible-grid-col-2-3 {
    -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
}

File

paragraphs_collection/modules/paragraphs_collection_demo/css/grid-layout.css
View source
  1. .paragraphs-collection-demo-behavior-grid-row {

  2.   display: -webkit-flex;

  3.   display: -ms-flexbox;

  4.   display: flex;

  5.   -webkit-flex-wrap: wrap;

  6.       -ms-flex-wrap: wrap;

  7.           flex-wrap: wrap;

  8.   margin-right: -15px;

  9.   margin-left: -15px;

  10. }

  11. 

  12. .paragraphs-collection-demo-behavior-grid-row.no-gutter {

  13.   margin-right: 0;

  14.   margin-left: 0;

  15. }

  16. 

  17. .paragraphs-collection-demo-behavior-grid-row.no-gutter > [class^="paragraphs-behavior-flexible-grid-col"] {

  18.   padding-right: 0;

  19.   padding-left: 0;

  20. }

  21. 

  22. @media (min-width: 576px) {

  23.   .paragraphs-collection-demo-behavior-grid-row.equal-cols {

  24.     -webkit-flex-wrap: nowrap;

  25.         -ms-flex-wrap: nowrap;

  26.             flex-wrap: nowrap;

  27.   }

  28. }

  29. 

  30. .paragraphs-collection-demo-behavior-grid-row.equal-cols .paragraphs-behavior-flexible-grid-col {

  31.   -webkit-flex: 0 0 100%;

  32.       -ms-flex: 0 0 100%;

  33.           flex: 0 0 100%;

  34.   max-width: 100%;

  35. }

  36. 

  37. @media (min-width: 576px) {

  38.   .paragraphs-collection-demo-behavior-grid-row.equal-cols .paragraphs-behavior-flexible-grid-col {

  39.     -webkit-flex: 1 1 auto;

  40.         -ms-flex: 1 1 auto;

  41.             flex: 1 1 auto;

  42.   }

  43. }

  44. 

  45. [class^="paragraphs-behavior-flexible-grid-col"] {

  46.   position: relative;

  47.   box-sizing: border-box;

  48.   -webkit-flex-basis: 0;

  49.       -ms-flex-preferred-size: 0;

  50.           flex-basis: 0;

  51.   -webkit-flex-grow: 1;

  52.       -ms-flex-positive: 1;

  53.           flex-grow: 1;

  54.   width: 100%;

  55.   max-width: 100%;

  56.   min-height: 1px;

  57.   padding-right: 15px;

  58.   padding-left: 15px;

  59. }

  60. 

  61. .paragraphs-behavior-flexible-grid-col-1-2 {

  62.   -webkit-flex: 0 0 100%;

  63.       -ms-flex: 0 0 100%;

  64.           flex: 0 0 100%;

  65. }

  66. 

  67. @media (min-width: 576px) {

  68.   .paragraphs-behavior-flexible-grid-col-1-2 {

  69.     -webkit-flex: 0 0 50%;

  70.         -ms-flex: 0 0 50%;

  71.             flex: 0 0 50%;

  72.     max-width: 50%;

  73.   }

  74. }

  75. 

  76. .paragraphs-behavior-flexible-grid-col-1-4 {

  77.   -webkit-flex: 0 0 100%;

  78.       -ms-flex: 0 0 100%;

  79.           flex: 0 0 100%;

  80. }

  81. 

  82. @media (min-width: 576px) {

  83.   .paragraphs-behavior-flexible-grid-col-1-4 {

  84.     -webkit-flex: 0 0 25%;

  85.         -ms-flex: 0 0 25%;

  86.             flex: 0 0 25%;

  87.     max-width: 25%;

  88.   }

  89. }

  90. 

  91. .paragraphs-behavior-flexible-grid-col-3-4 {

  92.   -webkit-flex: 0 0 100%;

  93.       -ms-flex: 0 0 100%;

  94.           flex: 0 0 100%;

  95. }

  96. 

  97. @media (min-width: 576px) {

  98.   .paragraphs-behavior-flexible-grid-col-3-4 {

  99.     -webkit-flex: 0 0 75%;

  100.         -ms-flex: 0 0 75%;

  101.             flex: 0 0 75%;

  102.     max-width: 75%;

  103.   }

  104. }

  105. 

  106. .paragraphs-behavior-flexible-grid-col-1-3 {

  107.   -webkit-flex: 0 0 100%;

  108.       -ms-flex: 0 0 100%;

  109.           flex: 0 0 100%;

  110. }

  111. 

  112. @media (min-width: 576px) {

  113.   .paragraphs-behavior-flexible-grid-col-1-3 {

  114.     -webkit-flex: 0 0 33.33333%;

  115.         -ms-flex: 0 0 33.33333%;

  116.             flex: 0 0 33.33333%;

  117.     max-width: 33.33333%;

  118.   }

  119. }

  120. 

  121. .paragraphs-behavior-flexible-grid-col-2-3 {

  122.   -webkit-flex: 0 0 100%;

  123.       -ms-flex: 0 0 100%;

  124.           flex: 0 0 100%;

  125. }

  126. 

  127. @media (min-width: 576px) {

  128.   .paragraphs-behavior-flexible-grid-col-2-3 {

  129.     -webkit-flex: 0 0 66.66667%;

  130.         -ms-flex: 0 0 66.66667%;

  131.             flex: 0 0 66.66667%;

  132.     max-width: 66.66667%;

  133.   }

  134. }