From aed594e0d1c5ff50a894c8a8cb3f7bdbb368cf8f Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Thu, 11 Mar 2021 09:41:22 +0200
Subject: [PATCH] Update button text style to "Liftup title" spec
---
.../accordion-item/accordion-item.scss | 20 ++++++++++++++-----
.../accordion-item/accordion-item.tsx | 2 +-
2 files changed, 16 insertions(+), 6 deletions(-)
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index c74122a0..6d8b027c 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -71,10 +71,10 @@
}
.hy-accordion__button {
- @include font-size(22px, 28px);
+ @include font-size(18px, 22px);
align-items: flex-start;
- border: none;
background-color: var(--grayscale-background-box);
+ border: none;
color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row;
@@ -82,7 +82,7 @@
font-weight: bold;
height: 100%;
justify-content: flex-start;
- letter-spacing: -0.7px;
+ letter-spacing: -0.45px;
padding: 1.125rem 1rem 1.125rem 1rem;
transition: all 0.35s ease-in;
width: 100%;
@@ -92,11 +92,21 @@
}
@include breakpoint($narrow) {
- @include font-size(26px, 32px);
- letter-spacing: -0.8px;
padding: 1rem 2rem 1rem 1.25rem;
}
+ @include breakpoint($xlarge) {
+ @include font-size(20px, 24px);
+ letter-spacing: -0.5px;
+ }
+
+ &--large {
+ @include breakpoint($extrawide) {
+ @include font-size(20px, 24px);
+ letter-spacing: -0.5px;
+ }
+ }
+
&[aria-expanded='true'] {
background: none;
}
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 7a68ff6d..397959a5 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -222,7 +222,7 @@ export class AccordionItem {
<button
aria-expanded="false"
aria-controls={`${titleAsId}--content`}
- class="hy-accordion__button"
+ class={`hy-accordion__button hy-accordion__button--${this.headerstyle}`}
id={`${titleAsId}--title`}
>
<span class="hy-accordion--heading__icon">
--
GitLab