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; /* LTR */
  51     display: flex;
  52   }
  53   [dir=rtl] .view-promoted-items--single > .view-content {
  54     margin-right: 0;
  55     margin-left: 14px;
  56   }
  57 }
  58
  59 .view-promoted-items--single > .view-content .views-row {
  60   margin-bottom: 14px;
  61 }
  62 /* Small */
  63 @media screen and (min-width: 30rem) { /* 480px */
  64   .view-promoted-items--single > .view-content .views-row {
  65     margin-bottom: 28px;
  66     display: flex;
  67   }
  68 }
  69 /* Large */
  70 @media screen and (min-width: 60rem) { /* 960px */
  71   .view-promoted-items--single > .view-content .views-row {
  72     margin-bottom: 0;
  73   }
  74 }
  75
  76 /* Large */
  77 @media screen and (min-width: 60rem) { /* 960px */
  78   .view-promoted-items--single > .attachment-after {
  79     margin-left: 14px; /* LTR */
  80     display: flex;
  81   }
  82   [dir=rtl] .view-promoted-items--single > .attachment-after {
  83     margin-left: 0;
  84     margin-right: 14px;
  85   }
  86 }
  87
  88 /* Large */
  89 @media screen and (min-width: 60rem) { /* 960px */
  90   .view-promoted-items--single .attachment-after .views-element-container {
  91     display: flex;
  92   }
  93 }
  94
  95 /* Large */
  96 @media screen and (min-width: 60rem) { /* 960px */
  97   .view-promoted-items--single .attachment-after .view-promoted-items--double {
  98     display: flex;
  99   }
 100 }
 101
 102 /* Small */
 103 @media screen and (min-width: 30rem) { /* 480px */
 104   .view-promoted-items--double {
 105     overflow-x: hidden;
 106   }
 107 }
 108
 109 /* Small */
 110 @media screen and (min-width: 30rem) { /* 480px */
 111   .view-promoted-items--double .view-content {
 112     display: flex;
 113     margin: 0 -14px;
 114   }
 115 }
 116
 117 /* Small */
 118 @media screen and (min-width: 30rem) { /* 480px */
 119   .view-promoted-items--double .views-row {
 120     display: flex;
 121     margin: 0 14px;
 122     width: calc(50% - 28px);
 123   }
 124 }