From 832036f87da61c17761cb408b737edf066eddad0 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Mon, 26 Feb 2024 17:25:15 +0100
Subject: [PATCH] header-button
---
assets/js/theme/design-system/mainMenu.js | 7 ++--
assets/sass/_theme/blocks/call_to_action.sass | 2 +-
assets/sass/_theme/design-system/button.sass | 32 ++++++++++++++++++-
assets/sass/_theme/design-system/form.sass | 2 +-
assets/sass/_theme/design-system/header.sass | 2 +-
.../sass/_theme/design-system/typography.sass | 28 ----------------
layouts/partials/header/button.html | 4 ++-
layouts/partials/programs/essential.html | 2 +-
8 files changed, 41 insertions(+), 38 deletions(-)
diff --git a/assets/js/theme/design-system/mainMenu.js b/assets/js/theme/design-system/mainMenu.js
index 1612759f..cb24b4e1 100644
--- a/assets/js/theme/design-system/mainMenu.js
+++ b/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;
}
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index 898ed38f..8274674c 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/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
diff --git a/assets/sass/_theme/design-system/button.sass b/assets/sass/_theme/design-system/button.sass
index 24147661..c6a509e4 100644
--- a/assets/sass/_theme/design-system/button.sass
+++ b/assets/sass/_theme/design-system/button.sass
@@ -1,3 +1,21 @@
+.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)
diff --git a/assets/sass/_theme/design-system/form.sass b/assets/sass/_theme/design-system/form.sass
index 12aa0a03..cdf6dd84 100644
--- a/assets/sass/_theme/design-system/form.sass
+++ b/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
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index a2940aaa..911a376a 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/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
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 9f17153d..f9a48feb 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/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
diff --git a/layouts/partials/header/button.html b/layouts/partials/header/button.html
index 16d02d90..588ab280 100644
--- a/layouts/partials/header/button.html
+++ b/layouts/partials/header/button.html
@@ -1,7 +1,9 @@
<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>
diff --git a/layouts/partials/programs/essential.html b/layouts/partials/programs/essential.html
index f0e68908..9d35596d 100644
--- a/layouts/partials/programs/essential.html
+++ b/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>
--
GitLab