www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/paragraphs/modules/paragraphs_demo/css/paragraphs_demo.css

   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 }