paragraphs_demo.css

paragraph demo styles.

File

paragraphs/modules/paragraphs_demo/css/paragraphs_demo.css
View source
  1. /**

  2.  * @file

  3.  * paragraph demo styles.

  4.  */

  5. 

  6. /**

  7.  * 50/50 flex grid for image/text paragraph.

  8.  */

  9. @media (min-width: 560px) {

  10.   .paragraph--type--image-text {

  11.     display: flex;

  12.     flex-flow: row wrap;

  13.   }

  14.   .paragraph--type--image-text .field-type-image {

  15.     flex: 1 1 0px;

  16.     margin: 0;

  17.   }

  18.   .paragraph--type--image-text .field-name-field-text-demo {

  19.     flex: 1 1 0px;

  20.   }

  21. }

  22. 

  23. /**

  24.  * Flex row flow for images paragraph.

  25.  */

  26. .paragraph--type--images .field-items {

  27.   display: flex;

  28.   flex-direction: row;

  29.   flex-wrap: wrap;

  30. }

  31. .paragraph--type--images .field-item {

  32.   margin: 0 1em 1em 0;

  33. }

  34. 

  35. /**

  36.  *50/50 flex grid for image/text paragraph.

  37.  */

  38. @media (min-width: 560px) {

  39.   .paragraph--type--text-image {

  40.     display: flex;

  41.     flex-flow: row wrap;

  42.   }

  43.   .paragraph--type--text-image .field-name-field-text-demo {

  44.     flex: 1 1 0px;

  45.     margin: 0 1em 0 0;

  46.   }

  47.   .paragraph--type--text-image .field-type-image {

  48.     flex: 1 1 0px;

  49.   }

  50. }