Pull merge.
[yaffs-website] / 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; /* LTR */
90   }
91   [dir="rtl"] .menu-main__item + .menu-main__item {
92     margin-left: 0;
93     margin-right: 2.5em;
94   }
95 }
96
97 @media screen and (min-width: 48em) {
98   .menu-main-togglewrap {
99     display: none;
100   }
101 }
102
103 .menu-main__wrapper {
104   flex: 0 1 100%;
105   text-align: center;
106 }
107
108 @media screen and (min-width: 48em) {
109   .menu-main__wrapper {
110     flex-grow: 0;
111     flex-shrink: 1;
112     flex-basis: calc(100% - 220px);
113     text-align: right;
114   }
115 }
116
117 @media screen and (min-width: 48em) {
118   .menu-main {
119     display: flex;
120     justify-content: flex-end;
121   }
122 }