From c8f0f8c0235172ee165cc239b248bd6d35625df7 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Fri, 12 Mar 2021 16:05:06 +0200
Subject: [PATCH] Update accordion style
---
.../accordion-item/accordion-item.scss | 69 +++++++++++--------
.../accordion-item/accordion-item.tsx | 2 +-
2 files changed, 40 insertions(+), 31 deletions(-)
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index 6d8b027c..037ca8cc 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -3,14 +3,10 @@
}
.hy-accordion__item {
- margin-bottom: 1rem;
+ margin-bottom: 12px;
&__is-open {
- border-bottom: 2px solid var(--grayscale-medium);
- border-left: 1px solid var(--grayscale-medium);
- border-right: 1px solid var(--grayscale-medium);
- border-top: 2px solid var(--grayscale-medium);
- box-shadow: 0 2px 12px 1px rgba(#000000, 10%);
+ border: 1px solid var(--grayscale-dark);
.hy-accordion--heading {
margin: 0 auto;
@@ -72,6 +68,7 @@
.hy-accordion__button {
@include font-size(18px, 22px);
+ @include font-weight($bold);
align-items: flex-start;
background-color: var(--grayscale-background-box);
border: none;
@@ -79,11 +76,10 @@
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
- font-weight: bold;
height: 100%;
justify-content: flex-start;
letter-spacing: -0.45px;
- padding: 1.125rem 1rem 1.125rem 1rem;
+ padding: 13px 20px 13px 16px;
transition: all 0.35s ease-in;
width: 100%;
@@ -105,6 +101,13 @@
@include font-size(20px, 24px);
letter-spacing: -0.5px;
}
+
+ .hy-accordion--heading__icon svg {
+ @include breakpoint($extrawide) {
+ height: 20px;
+ width: 20px;
+ }
+ }
}
&[aria-expanded='true'] {
@@ -120,33 +123,35 @@
position: relative;
&:after {
- background: linear-gradient(to right, var(--grayscale-medium), var(--grayscale-white));
+ background-color: var(--grayscale-medium-dark);
bottom: 0;
content: '';
- height: 2px;
- left: 0;
+ height: 1px;
+ left: 16px;
position: absolute;
- width: 100%;
+ right: 20px;
}
}
}
.hy-accordion--heading__icon {
- margin-right: 0.5rem;
- margin-top: 4px;
+ align-items: center;
+ display: inline-flex;
+ height: 22px; // Same as text line-height.
+ margin-right: 8px;
z-index: 0;
- @include breakpoint($narrow) {
- margin-right: 1rem;
- margin-top: 6px;
- }
-
svg {
fill: var(--brand-main);
@include breakpoint($narrow) {
- height: 24px;
- width: 24px;
+ height: 18px;
+ width: 18px;
+ }
+
+ @include breakpoint($xlarge) {
+ height: 20px;
+ width: 20px;
}
}
}
@@ -169,11 +174,12 @@
&[aria-expanded='true'] {
color: var(--grayscale-black);
-
margin-bottom: 20px;
+
@include breakpoint($narrow) {
margin-bottom: 28px;
}
+
@include breakpoint($wide) {
margin-bottom: 32px;
}
@@ -210,22 +216,25 @@
&--inner-wrapper {
display: block;
- padding: 20px 16px 0;
+ padding: 16px 12px;
+
@include breakpoint($narrow) {
- padding: 20px 24px 0;
+ padding: 15px 16px;
+ }
+
+ @include breakpoint($wide) {
+ padding: 16px;
}
+
@include breakpoint($extrawide) {
- // there is a sidebar
- &--common {
- padding: 20px 24px 0;
- }
// without sidebar
&--large {
- padding: 24px 32px 0;
+ padding: 24px 20px;
}
}
+
@include breakpoint($xlarge) {
- padding: 24px 32px 0;
+ padding: 24px 20px;
}
&--mini {
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 397959a5..2667e006 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -226,7 +226,7 @@ export class AccordionItem {
id={`${titleAsId}--title`}
>
<span class="hy-accordion--heading__icon">
- <hy-icon icon={'hy-icon-caret-down'} size={20} />
+ <hy-icon icon={'hy-icon-caret-down'} size={16} />
</span>
<span>{this.accordiontitle}</span>
</button>
--
GitLab