From c49b1bd905a9a3afb99e82f8ebd005fdecc7d23b Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Thu, 29 Oct 2020 15:11:34 +0200
Subject: [PATCH] accordion improved styles
---
.../accordion-item/accordion-item.scss | 34 +++++++++++++------
.../accordion-item/accordion-item.tsx | 4 +--
2 files changed, 26 insertions(+), 12 deletions(-)
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index 615791f3..3ad45862 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -37,6 +37,7 @@
}
}
.hy-accordion__button {
+ @include font-size(22px, 28px);
align-items: center;
border: none;
background-color: var(--grayscale-background-box);
@@ -44,13 +45,11 @@
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
- font-size: 26px;
- line-height: 32px;
- letter-spacing: -0.82px;
- font-weight: 600;
+ font-weight: bold;
height: 100%;
justify-content: flex-start;
- padding: 0.75rem 1.75rem 0.75rem 1.25rem;
+ letter-spacing: -0.7px;
+ padding: 1.125rem 1rem 1.125rem 1rem;
transition: all 0.35s ease-in;
width: 100%;
@@ -58,10 +57,10 @@
cursor: pointer;
}
- @include breakpoint($medium) {
- font-size: 26px;
- letter-spacing: -0.82px;
- line-height: 32px;
+ @include breakpoint($narrow) {
+ @include font-size(26px, 32px);
+ letter-spacing: -0.8px;
+ padding: 1rem 2rem 1rem 1.25rem;
}
&[aria-expanded='true'] {
@@ -70,11 +69,20 @@
}
.hy-accordion--heading__icon {
- margin-right: 0.95rem;
+ margin-right: 0.5rem;
z-index: 0;
+ @include breakpoint($narrow) {
+ margin-right: 1rem;
+ }
+
svg {
fill: var(--brand-main);
+
+ @include breakpoint($narrow) {
+ height: 24px;
+ width: 24px;
+ }
}
}
}
@@ -89,4 +97,10 @@
&--inner-wrapper {
display: block;
}
+
+ hy-box {
+ @include breakpoint($narrow) {
+ padding: 0 2rem;
+ }
+ }
}
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index a2491da3..fada4423 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -3,7 +3,7 @@ import {Component, Listen, Prop, State, Element, h} from '@stencil/core';
@Component({
tag: 'hy-accordion-item',
styleUrl: 'accordion-item.scss',
- shadow: false
+ shadow: false,
})
export class AccordionItem {
@Element() el: HTMLElement;
@@ -208,7 +208,7 @@ export class AccordionItem {
aria-hidden="true"
style={{display: 'none'}}
>
- <hy-box pt="1.5" pb="3" pl="2" pr="2">
+ <hy-box pt="0" pb="0" pl="0.75" pr="0.75">
<div class="hy-accordion__content--inner-wrapper">
<slot></slot>
</div>
--
GitLab