www.aleph1.co.uk Git - yaffs-website/blob - web/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css

   1 /**
   2  * @file
   3  * This file is used to style the 'Promoted Items' view.
   4  */
   5
   6 .block-views-blockpromoted-items-block-1 {
   7   margin-top: 1rem;
   8 }
   9 /* Small */
  10 @media screen and (min-width: 30rem) { /* 480px */
  11   .block-views-blockpromoted-items-block-1 {
  12     margin-top: 2rem;
  13   }
  14 }
  15 /* Large */
  16 @media screen and (min-width: 60rem) { /* 960px */
  17   .block-views-blockpromoted-items-block-1 {
  18     margin-top: 3rem;
  19   }
  20 }
  21
  22 .view-promoted-items--single {
  23   padding: 1rem 14px 2rem;
  24 }
  25 /* Small */
  26 @media screen and (min-width: 30rem) { /* 480px */
  27   .view-promoted-items--single {
  28     padding-top: 2rem;
  29     padding-bottom: 3rem;
  30   }
  31 }
  32 /* Large */
  33 @media screen and (min-width: 60rem) { /* 960px */
  34   .view-promoted-items--single {
  35     display: flex;
  36   }
  37 }
  38 /* 77em == the max width of .container + 1em either side */
  39 @media screen and (min-width: 77em) {
  40   .view-promoted-items--single {
  41     padding-left: 0;
  42     padding-right: 0;
  43   }
  44 }
  45
  46 /* Large */
  47 @media screen and (min-width: 60rem) { /* 960px */
  48   .view-promoted-items--single > .view-content {
  49     flex: 0 0 50%;
  50     margin-right: 14px;
  51     display: flex;
  52   }
  53 }
  54
  55 .view-promoted-items--single > .view-content .views-row {
  56   margin-bottom: 14px;
  57 }
  58 /* Small */
  59 @media screen and (min-width: 30rem) { /* 480px */
  60   .view-promoted-items--single > .view-content .views-row {
  61     margin-bottom: 28px;
  62     display: flex;
  63   }
  64 }
  65 /* Large */
  66 @media screen and (min-width: 60rem) { /* 960px */
  67   .view-promoted-items--single > .view-content .views-row {
  68     margin-bottom: 0;
  69   }
  70 }
  71
  72 /* Large */
  73 @media screen and (min-width: 60rem) { /* 960px */
  74   .view-promoted-items--single > .attachment-after {
  75     margin-left: 14px;
  76     display: flex;
  77   }
  78 }
  79
  80 /* Large */
  81 @media screen and (min-width: 60rem) { /* 960px */
  82   .view-promoted-items--single .attachment-after .views-element-container {
  83     display: flex;
  84   }
  85 }
  86
  87 /* Large */
  88 @media screen and (min-width: 60rem) { /* 960px */
  89   .view-promoted-items--single .attachment-after .view-promoted-items--double {
  90     display: flex;
  91   }
  92 }
  93
  94 /* Small */
  95 @media screen and (min-width: 30rem) { /* 480px */
  96   .view-promoted-items--double {
  97     overflow-x: hidden;
  98   }
  99 }
 100
 101 /* Small */
 102 @media screen and (min-width: 30rem) { /* 480px */
 103   .view-promoted-items--double .view-content {
 104     display: flex;
 105     margin: 0 -14px;
 106   }
 107 }
 108
 109 /* Small */
 110 @media screen and (min-width: 30rem) { /* 480px */
 111   .view-promoted-items--double .views-row {
 112     display: flex;
 113     margin: 0 14px;
 114     width: calc(50% - 28px);
 115   }
 116 }