Merge d082bc0 into 1839e9d

consuldemocracy · Jan 29, 2023 · aa0fdc7 · aa0fdc7
2 parents 1839e9d + d082bc0
commit aa0fdc7
Show file tree

Hide file tree

Showing 11 changed files with 212 additions and 252 deletions.
diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss
@@ -43,9 +43,7 @@
 @include foundation-table;
 @include foundation-tabs;
 @include foundation-thumbnail;
-@include foundation-title-bar;
 @include foundation-tooltip;
-@include foundation-top-bar;
 @include foundation-visibility-classes;
 @include foundation-float-classes;
 @include motion-ui-transitions;

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
@@ -550,6 +550,12 @@ body > header,
 
   .top-bar {
     @include background-with-text-contrast($main-header, [main-header, brand]);
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+
+    h1 {
+      line-height: $line-height;
+    }
   }
 }
 
@@ -562,90 +568,29 @@ body > header,
 }
 
 .top-bar {
-  background-color: inherit;
-  padding: 0;
-
-  @include breakpoint(medium) {
-    justify-content: flex-start;
-
-    .top-bar-title {
-      flex-grow: 1;
-    }
-  }
-
-  ul {
-    background: none;
-  }
-
-  .menu > li {
-    display: block;
-    width: 100%;
-
-    @include breakpoint(medium) {
-      width: auto;
-    }
-
-    a {
-      color: inherit;
-      line-height: inherit;
-      padding-left: 0;
-
-      @include breakpoint(medium) {
-        font-size: $small-font-size;
-        padding: rem-calc(8) rem-calc(16);
-      }
-    }
-
-    .button {
-      background: none;
-      text-align: left;
-
-      @include breakpoint(medium) {
-        @include brand-color;
-        background: $body-background;
-        text-align: center;
-      }
-    }
-  }
-
-  .has-submenu {
-
-    &.is-active a {
-      font-weight: bold;
-    }
-  }
+  align-items: center;
+  display: flex;
 
-  .menu {
+  @include breakpoint(small only) {
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
 
-    @include breakpoint(small only) {
-      border-bottom: 1px solid $border;
-      margin-bottom: $line-height;
-      margin-top: $line-height / 2;
-      padding-bottom: $line-height;
+    .responsive-menu {
+      width: 100%;
 
-      .submenu {
-        margin-top: 0;
+      a {
+        display: inline-block;
       }
     }
 
-    &.is-dropdown-submenu {
-      @extend %body-colors;
-      margin: 0;
-      margin-top: rem-calc(-12);
-      padding: 0;
-      z-index: 9;
-    }
-
-    .is-submenu-item {
-      display: block;
-      height: auto;
-      margin-bottom: 0;
+    [data-responsive-toggle] {
+      flex-grow: 1000;
     }
   }
 
-  .top-bar-title {
-    line-height: $line-height;
-    margin-right: 0;
+  h1 {
+    flex-grow: 1;
+    margin-bottom: 0;
 
     a img {
       height: rem-calc(48);
@@ -671,11 +616,6 @@ body > header,
   cursor: inherit;
 }
 
-.title-bar {
-  background: none;
-  float: right;
-}
-
 .dropdown.menu > li {
 
   a {
@@ -731,104 +671,6 @@ body > header,
   }
 }
 
-.subnavigation {
-  display: flex;
-  flex-direction: column;
-
-  @include breakpoint(medium) {
-    @include background-with-text-contrast($subnavigation, subnavigation);
-    flex-direction: row;
-    padding-bottom: 0;
-
-    > :first-child {
-      flex-grow: 1;
-    }
-  }
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-
-    li {
-      @include breakpoint(medium) {
-        display: inline-block;
-        margin-right: rem-calc(20);
-      }
-    }
-  }
-
-  a {
-    color: inherit;
-    display: inline-block;
-    padding-bottom: $line-height / 2;
-    padding-top: $line-height / 2;
-    position: relative;
-    text-align: left;
-    width: 100%;
-
-    @include breakpoint(medium) {
-      display: block;
-      font-weight: bold;
-      width: auto;
-
-      &:hover {
-        @include anchor-color;
-      }
-
-      &.is-active {
-        @include brand-color;
-        border-bottom: 2px solid;
-        margin-bottom: 1px;
-      }
-    }
-
-    &:focus {
-      z-index: 1;
-    }
-  }
-
-  .input-group {
-    padding-top: $line-height / 4;
-
-    @include breakpoint(medium) {
-      margin-bottom: 0;
-    }
-  }
-
-  .input-group-field {
-    margin-bottom: 0 !important;
-  }
-
-  .input-group-button {
-    line-height: $line-height * 1.5;
-    padding-bottom: 0;
-
-    button {
-      @include background-with-text-contrast($border);
-      border: 1px solid #ccc;
-      border-left: 0;
-      height: $line-height * 1.5;
-      line-height: $line-height * 1.5;
-      padding-top: 0;
-    }
-  }
-
-  input {
-    height: $line-height * 1.5 !important;
-    margin-bottom: 0;
-    margin-right: 0;
-    width: 100%;
-  }
-}
-
-.top-bar-right {
-
-  .is-active {
-    font-weight: bold;
-    text-decoration: underline;
-  }
-}
-
 .submenu {
   border-bottom: 1px solid $border;
   clear: both;

diff --git a/app/assets/stylesheets/layout/account_menu.scss b/app/assets/stylesheets/layout/account_menu.scss
@@ -0,0 +1,64 @@
+.account-menu.menu {
+
+  @include breakpoint(small only) {
+    margin-top: $line-height / 2;
+
+    &,
+    .menu {
+      border-bottom: 1px solid $border;
+      margin-bottom: $line-height;
+      padding-bottom: $line-height;
+    }
+  }
+
+  .is-dropdown-submenu {
+    @extend %body-colors;
+    margin: 0;
+    margin-top: rem-calc(-12);
+    padding: 0;
+    z-index: 9;
+  }
+
+  .is-submenu-item {
+    display: block;
+    margin-bottom: 0;
+  }
+
+  li {
+    display: block;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      width: auto;
+    }
+
+    a {
+      color: inherit;
+      line-height: inherit;
+      padding-left: 0;
+
+      @include breakpoint(medium) {
+        font-size: $small-font-size;
+        padding: rem-calc(8) rem-calc(16);
+      }
+    }
+
+    .button {
+      background: none;
+      text-align: left;
+
+      @include breakpoint(medium) {
+        @include brand-color;
+        background: $body-background;
+        text-align: center;
+      }
+    }
+  }
+
+  .has-submenu {
+
+    &.is-active a {
+      font-weight: bold;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/layout/admin_header.scss b/app/assets/stylesheets/layout/admin_header.scss
@@ -15,30 +15,23 @@
   }
 
   .top-bar {
-    height: auto;
     padding-top: $line-height / 2;
 
     @include breakpoint(small only) {
 
-      .top-bar-left ul {
-        display: inline-block;
-      }
-
-      .top-bar-right {
-
-        > ul {
-          border-bottom: 0;
-          padding-bottom: 0;
-          margin-bottom: 0;
-        }
-
-        .submenu {
-          position: initial;
-        }
+      .account-menu {
+        border-bottom: 0;
+        padding-bottom: 0;
+        margin-bottom: 0;
 
         a {
           font-weight: normal;
         }
+
+        .is-active {
+          font-weight: bold;
+          text-decoration: underline;
+        }
       }
 
       [class^="icon-"] {
@@ -52,7 +45,6 @@
 
     h1 {
       margin-top: $line-height / 2;
-      margin-bottom: 0;
 
       @include breakpoint(medium) {
         margin-top: 0;
@@ -73,17 +65,4 @@
       }
     }
   }
-
-  .top-bar .menu > li {
-
-    @include breakpoint(medium) {
-      height: auto !important;
-    }
-  }
-
-  .title-bar {
-    color: inherit;
-    position: absolute;
-    right: 12px;
-  }
 }