www.aleph1.co.uk Git - yaffs-website/blob - web/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css

   1 /**
   2  * @file
   3  * This file is used to style the main menu.
   4  */
   5
   6 .menu-main {
   7   color: #000;
   8   margin: 0;
   9   list-style-type: none;
  10   font-family: 'Scope One', Georgia, serif;
  11   font-size: 1.266rem;
  12   font-weight: 400;
  13   line-height: 1.2;
  14   max-height: 0;
  15   overflow: hidden;
  16   padding: 0;
  17   transition: max-height 0.5s ease-in;
  18 }
  19 .menu-main--active {
  20   /**
  21    * An exact max-height value must be set to make possible to animate the menu display.
  22    * It my not be much larger than the content because that would break the animation.
  23    * See: https://css-tricks.com/using-css-transitions-auto-dimensions/
  24    */
  25   max-height: 18.75rem;
  26   overflow-y: auto;
  27 }
  28 .menu-main-toggle {
  29   width: 41px;
  30   height: 41px;
  31   line-height: 1;
  32   /* the padding, margin & transparent border means the hamburger doesn't move on focus/hover */
  33   padding: 0 6px;
  34   margin-right: -9px;
  35   border: 3px solid transparent;
  36   border-radius: 0;
  37   text-align: left;
  38   background-color: transparent;
  39 }
  40 .menu-main-toggle:hover {
  41   background-color: transparent;
  42 }
  43 .menu-main-toggle svg {
  44   display: block;
  45 }
  46 .menu-main__item {
  47   margin-top: 0.8em;
  48   text-align: center;
  49 }
  50 .menu-main__link {
  51   background-color: inherit;
  52   display: inline-block;
  53   padding-bottom: 0.15em;
  54   text-decoration: none;
  55   border-bottom: solid 0.15em transparent;
  56   color: inherit;
  57   transition: all 0.2s;
  58 }
  59 .menu-main__link:hover,
  60 .menu-main__link.is-active:hover,
  61 .menu-main__link:focus {
  62   background-color: inherit;
  63   text-decoration: none;
  64   border-bottom-color: rgba(255, 97, 56, 0.3);
  65   color: #da3c13;
  66 }
  67 .menu-main__link:active,
  68 .menu-main__link.is-active {
  69   text-decoration: none;
  70   border-bottom-color: #da3c13;
  71 }
  72
  73 @media screen and (min-width: 48em) {
  74   .menu-main {
  75     display: flex;
  76     justify-content: flex-end;
  77     flex-wrap: wrap;
  78     max-height: none;
  79     overflow: auto;
  80   }
  81   .menu-main-toggle {
  82     display: none;
  83   }
  84   .menu-main__item {
  85     margin-top: 0;
  86     margin-bottom: 0;
  87   }
  88   .menu-main__item + .menu-main__item {
  89     margin-left: 2.5em;
  90   }
  91 }
  92
  93 @media screen and (min-width: 48em) {
  94   .menu-main-togglewrap {
  95     display: none;
  96   }
  97 }
  98
  99 .menu-main__wrapper {
 100   flex: 0 1 100%;
 101   text-align: center;
 102 }
 103
 104 @media screen and (min-width: 48em) {
 105   .menu-main__wrapper {
 106     flex-grow: 0;
 107     flex-shrink: 1;
 108     flex-basis: calc(100% - 220px);
 109     text-align: right;
 110   }
 111 }
 112
 113 @media screen and (min-width: 48em) {
 114   .menu-main {
 115     display: flex;
 116     justify-content: flex-end;
 117   }
 118 }