www.aleph1.co.uk Git - yaffs-website/blob - web/core/profiles/demo_umami/themes/umami/css/components/blocks/quicklinks/quicklinks.css

   1 /**
   2  * @file
   3  * This file is used to style the Quick Links block.
   4  */
   5
   6 .quicklinks {
   7   background-color: #fff;
   8 }
   9
  10 @media screen and (min-width: 60rem) { /* 960px */
  11   .quicklinks {
  12     padding: 2rem 0;
  13   }
  14 }
  15
  16 /* Small */
  17 @media screen and (min-width: 30rem) { /* 480px */
  18   .quicklinks__content {
  19     display: flex;
  20     flex-wrap: wrap;
  21   }
  22 }
  23 /* Large */
  24 @media screen and (min-width: 60rem) { /* 960px */
  25   .quicklinks__content {
  26     flex-wrap: nowrap;
  27   }
  28 }
  29
  30 .quicklinks__col {
  31   position: relative;
  32   min-height: 9rem;
  33   padding: 1.5rem 0.25rem;
  34   text-align: center;
  35 }
  36 /* Small */
  37 @media screen and (min-width: 30rem) { /* 480px */
  38   .quicklinks__col {
  39     flex-basis: 50%;
  40     padding-top: 1rem;
  41     padding-bottom: 1rem;
  42   }
  43 }
  44
  45 .quicklinks__col::after {
  46   position: absolute;
  47   display: block;
  48   bottom: 0;
  49   right: 10%;
  50   height: 1px;
  51   width: 80%;
  52   content: '';
  53   background-color: #e6eee0;
  54 }
  55 .quicklinks__col:last-child::after {
  56   display: none;
  57 }
  58 /* Small */
  59 @media screen and (min-width: 30rem) { /* 480px */
  60   .quicklinks__col:nth-child(3)::after {
  61     display: none;
  62   }
  63 }
  64 /* Large */
  65 @media screen and (min-width: 60rem) { /* 960px */
  66   .quicklinks__col::after {
  67     position: absolute;
  68     display: block;
  69     top: 0;
  70     right: 0;
  71     height: 100%;
  72     width: 1px;
  73     content: '';
  74     background-color: #e6eee0;
  75   }
  76   .quicklinks__col:nth-child(3)::after {
  77     display: block;
  78   }
  79 }
  80
  81 .quicklinks__img {
  82   margin-bottom: 1rem;
  83 }