header-button

assets/js/theme/design-system/mainMenu.js

@@ -12,7 +12,7 @@ class MainMenu {
     constructor (selector) {
         this.element = document.querySelector(selector);
         this.menu = this.element.querySelector('.menu');
-        this.mainButton = this.element.querySelector('button');
+        this.mainButton = this.element.querySelector('button.header-button');
         this.dropdownsButtons = this.element.querySelectorAll('.has-children [role="button"]');
 
         this.state = {
@@ -62,7 +62,7 @@ class MainMenu {
         const isMobile = window.innerWidth <= breakpoints.md;
         document.documentElement.style.setProperty('--header-height', this.element.offsetHeight + 'px');
         document.documentElement.style.setProperty('--header-menu-max-height', (window.innerHeight - this.element.offsetHeight) + 'px');
-        
+
         // is state changed ?
         if (this.state.isMobile === isMobile) {
             return null;
@@ -71,7 +71,6 @@ class MainMenu {
         this.state.isMobile = isMobile;
 
         this.closeEverything();
-        
     }
 
     toggleMainMenu (open = !this.state.isOpened) {
@@ -150,7 +149,7 @@ class MainMenu {
         if (y > this.state.previousScrollY + threshold && !isNearTop) {
             document.documentElement.classList.add(CLASSES.scrollingDown);
             hasChanged = true;
-        } else if (y < this.state.previousScrollY - threshold){
+        } else if (y < this.state.previousScrollY - threshold) {
             document.documentElement.classList.remove(CLASSES.scrollingDown);
             hasChanged = true;
         }

assets/sass/_theme/blocks/call_to_action.sass

@@ -39,7 +39,7 @@
                     --btn-hover-background: #{$block-call-to-action-button-hover-background}
                     --btn-hover-color: #{$block-call-to-action-button-hover-color}
                     --btn-border: none
-                    @extend .btn
+                    @extend .button
                 &:last-child
                     margin-bottom: 0
         * + .actions

assets/sass/_theme/design-system/button.sass

+.button, .btn
+    @include button-reset
+    font-family: var(--btn-font-family)
+    font-size: var(--btn-font-size)
+    font-weight: var(--btn-font-weight)
+    text-transform: var(--btn-text-transform)
+    text-decoration: none
+    color: var(--btn-color)
+    background: var(--btn-background)
+    border: var(--btn-border)
+    border-radius: var(--btn-border-radius)
+    padding: var(--btn-padding)
+    display: inline-block
+    transition: background .3s ease, color .3s ease
+    &:hover, &:focus, &:focus-visible
+        color: var(--btn-hover-color)
+        background: var(--btn-hover-background)
+
 .squared-button
     @include meta
     @include button-reset
@@ -22,7 +40,19 @@
             border-color: transparent
             color: var(--color-background)
     text-decoration: none
+
 button.squared-button
     @include icon-block(eye, before)
+
 a.squared-button
-    @include icon-block(download, before)
\ No newline at end of file
+    @include icon-block(download, before)
+
+.link-btn
+    @extend .button
+    @include media-breakpoint-up(desktop)
+        padding: $spacing-2
+    &[target="_blank"]:not(.icon)
+        display: flex
+        justify-content: space-between
+        align-items: center
+        @include icon-block(link-blank-block, after)

assets/sass/_theme/design-system/form.sass

@@ -20,6 +20,6 @@ form
     input[type="submit"], button
         --btn-background: $form-btn-background-color
         --btn-color: $form-btn-color
-        @extend .btn
+        @extend .button
     label + input
         margin-bottom: $spacing-5
\ No newline at end of file

assets/sass/_theme/design-system/header.sass

@@ -98,7 +98,7 @@ header#document-header
             display: flex
             flex-wrap: wrap
             justify-content: space-between
-        button[type="button"]:not(.pagefind-ui__button)
+        .header-button
             @include button-reset
             display: none
             border: 0

assets/sass/_theme/design-system/typography.sass

@@ -224,34 +224,6 @@ a,
     &.glightbox
         text-decoration: none
 
-.btn
-    @include button-reset
-    font-family: var(--btn-font-family)
-    font-size: var(--btn-font-size)
-    font-weight: var(--btn-font-weight)
-    text-transform: var(--btn-text-transform)
-    text-decoration: none
-    color: var(--btn-color)
-    background: var(--btn-background)
-    border: var(--btn-border)
-    border-radius: var(--btn-border-radius)
-    padding: var(--btn-padding)
-    display: inline-block
-    transition: background .3s ease, color .3s ease
-    &:hover, &:focus, &:focus-visible
-        color: var(--btn-hover-color)
-        background: var(--btn-hover-background)
-
-.link-btn
-    @extend .btn
-    @include media-breakpoint-up(desktop)
-        padding: $spacing-2
-    &[target="_blank"]:not(.icon)
-        display: flex
-        justify-content: space-between
-        align-items: center
-        @include icon-block(link-blank-block, after)
-
 .chip
     @include meta
     background: $chip-background

layouts/partials/header/button.html

 <button type="button"
     aria-controls="navigation"
     aria-expanded="false"
-    aria-label="{{ i18n "commons.menu.label" }}">
+    aria-label="{{ i18n "commons.menu.label" }}"
+    class="header-button"
+    >
   <span>{{ i18n "commons.menu.title" }}</span>
   <span></span>
 </button>

layouts/partials/programs/essential.html

@@ -26,7 +26,7 @@
     
     <div class="buttons">
       <div class="dropdown-share dropup">
-        <button type="button" id="shareProgram" data-bs-toggle="dropdown" aria-expanded="false">{{ i18n "commons.share" }}</button>
+        <button class="btn" type="button" id="shareProgram" data-bs-toggle="dropdown" aria-expanded="false">{{ i18n "commons.share" }}</button>
         <div class="dropdown-menu">
           {{ partial "commons/share.html" . }}
         </div>