SPOS-541: Add styling profile dropdown

StadGent · Dec 18, 2024 · 1f1155e · 1f1155e
1 parent 9a39a74
commit 1f1155e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ All Notable changes to `StadGent/drupal_theme_gent-base`.
 ### Added
 
 - DMD09LEAFL-4: Add css for leaflet maps.
+- SPOS-541: Add styling profile dropdown
 
 ## [6.x]
 

diff --git a/gent_base.theme b/gent_base.theme
@@ -1071,7 +1071,7 @@ function gent_base_preprocess_oidc_menu_anonymous(&$variables) {
 function gent_base_preprocess_oidc_menu_authenticated(&$variables) {
   $variables['logout_link']->getUrl()->mergeOptions([
     'attributes' => [
-      'class' => ['button', 'button-small', 'button-primary'],
+      'class' => ['button', 'button-primary', 'icon-sign-out', 'icon-left'],
     ],
   ]);
 

diff --git a/source/package-lock.json b/source/package-lock.json
diff --git a/source/sass/31-molecules/oidc-menu/_oidc-menu.scss b/source/sass/31-molecules/oidc-menu/_oidc-menu.scss
@@ -4,7 +4,7 @@
 
 .oidc-menu--wrapper {
   display: flex;
-  position: relative;
+  position: static;
   justify-content: flex-end;
 
   .avatar {
@@ -89,22 +89,29 @@
     @include theme('background-color', 'color-none');
 
     position: absolute;
-    top: 100%;
-    right: 0;
+    top: calc(100% - 40px);
     width: calc(100vw - 2 * #{$gutter-width});
     max-width: $bp-mobile;
     margin-top: .5rem;
     transition: max-height .3s ease-in-out;
     border-radius: border-radius('radius-1');
     box-shadow: 0 0 20px 0 rgba(color('gray-medium'), 0.25);
     z-index: 6;
+
+    @media (max-width: 400px) {
+      left: -20px;
+      right: -20px;
+      width: calc(100vw + 40px);
+      max-width: 400px;
+      box-shadow: 0 10px 10px 0 rgba(color('gray-medium'), 0.25);
+    }
   }
 
   .content {
     padding: 1.2rem;
 
     h2 {
-      @extend %h3;
+      @extend %h4;
     }
 
     > h2 {
@@ -126,18 +133,28 @@
 
       .links {
         margin: 0;
+
+        a {
+          font-size: .8rem;
+        }
       }
     }
 
     .profile {
       display: flex;
-      padding-bottom: 20px;
+      padding-bottom: 25px;
       border-top: 0;
 
       &-info {
         span {
+          @include bold-text;
+
           display: block;
-          font-size: .7rem;
+          font-size: .9rem;
+        }
+
+        a {
+          font-size: .8rem;
         }
       }