Updated to Drupal 8.5. Core Media not yet in use.

[yaffs-website] / web / core / profiles / demo_umami / themes / umami / css / components / navigation / menu-main / menu-main.css

diff --git a/web/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css b/web/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
new file mode 100644 (file)
index 0000000..ad67738
--- /dev/null
+++ b/web/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
@@ -0,0 +1,124 @@
+/**
+ * @file
+ * This file is used to style the main menu.
+ */
+
+.menu-main {
+  color: #000;
+  margin: 0;
+  list-style-type: none;
+  font-family: 'Scope One', Georgia, serif;
+  font-size: 1.266rem;
+  font-weight: 400;
+  line-height: 1.2;
+  max-height: 0;
+  overflow: hidden;
+  padding: 0;
+  transition: max-height 0.5s ease-in;
+}
+.menu-main--active {
+  /**
+   * An exact max-height value must be set to make possible to animate the menu display.
+   * It my not be much larger than the content because that would break the animation.
+   * See: https://css-tricks.com/using-css-transitions-auto-dimensions/
+   */
+  max-height: 18.75rem;
+  overflow-y: auto;
+}
+.menu-main-toggle {
+  width: 41px;
+  height: 41px;
+  line-height: 1;
+  /* the padding, margin & transparent border means the hamburger doesn't move on focus/hover */
+  padding: 0 6px;
+  margin-left: -9px;
+  border: 3px solid transparent;
+  border-radius: 0;
+  text-align: left;
+  background-color: transparent;
+}
+.menu-main-toggle:hover {
+  background-color: transparent;
+}
+.menu-main-toggle svg {
+  display: block;
+}
+.menu-main__item {
+  margin-top: 0.8em;
+  text-align: center;
+}
+.menu-main__link {
+  background-color: inherit;
+  display: inline-block;
+  padding-bottom: 0.15em;
+  text-decoration: none;
+  border-bottom: solid 0.15em transparent;
+  color: inherit;
+  transition: all 0.2s;
+}
+.menu-main__link:hover,
+.menu-main__link.is-active:hover,
+.menu-main__link:focus {
+  background-color: inherit;
+  text-decoration: none;
+  border-bottom-color: rgba(255, 97, 56, 0.3);
+  color: #da3c13;
+}
+.menu-main__link:active,
+.menu-main__link.is-active {
+  text-decoration: none;
+  border-bottom-color: #da3c13;
+}
+
+@media screen and (min-width: 48em) {
+  .menu-main {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    max-height: initial;
+    overflow: auto;
+  }
+  .menu-main-toggle {
+    display: none;
+  }
+  .menu-main__item {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .menu-main__item + .menu-main__item {
+    margin-left: 2.5em;
+  }
+}
+
+.menu-main-togglewrap {
+  flex: 0 1 30%;
+  order: 1;
+  padding-left: 1rem;
+}
+
+@media screen and (min-width: 48em) {
+  .menu-main-togglewrap {
+    display: none;
+  }
+}
+
+.menu-main__wrapper {
+  order: 4;
+  flex: 0 1 100%;
+  text-align: center;
+}
+
+@media screen and (min-width: 48em) {
+  .menu-main__wrapper {
+    order: 4;
+    flex: 0 1 calc(100% - 220px);
+    text-align: right;
+  }
+}
+
+@media screen and (min-width: 48em) {
+  .menu-main {
+    display: flex;
+    justify-content: flex-end;
+  }
+}