scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: break out css variables

Browse Source
This commit is contained in:
Christel Westerberg
2024-11-18 15:30:12 +01:00
parent d5c6b6809c
commit bd0720dc0f
10 changed files with 63 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
View File

@@ -66,7 +66,7 @@ export default function SectionAccordion({
const textColor =
isComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
return (
<div className={styles.main} data-open={isOpen} data-step={step}>
<div className={styles.accordion} data-open={isOpen} data-step={step}>
<div className={styles.iconWrapper}>
<div className={styles.circle} data-checked={isComplete}>
{isComplete ? (

27
components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
View File

@@ -1,4 +1,7 @@
.main {
.accordion {
--header-height: 2.4em;
--circle-height: 24px;
gap: var(--Spacing-x3);
width: 100%;
padding-top: var(--Spacing-x3);
@@ -7,12 +10,12 @@
display: grid;
grid-template-areas: "circle header" "content content";
grid-template-columns: auto 1fr;
grid-template-rows: 2.4em 0fr;
grid-template-rows: var(--header-height) 0fr;
column-gap: var(--Spacing-x-one-and-half);
}
.main:last-child .main {
.accordion:last-child {
border-bottom: none;
}
@@ -52,8 +55,8 @@
}
.circle {
width: 24px;
height: 24px;
width: var(--circle-height);
height: var(--circle-height);
border-radius: 100px;
transition: background-color 0.4s;
border: 2px solid var(--Base-Border-Inverted);
@@ -66,16 +69,16 @@
background-color: var(--UI-Input-Controls-Fill-Selected);
}
.main[data-open="true"] .circle[data-checked="false"] {
.accordion[data-open="true"] .circle[data-checked="false"] {
background-color: var(--UI-Text-Placeholder);
}
.main[data-open="false"] .circle[data-checked="false"] {
.accordion[data-open="false"] .circle[data-checked="false"] {
background-color: var(--Base-Surface-Subtle-Hover);
}
.main[data-open="true"] {
grid-template-rows: 2.4em 1fr;
.accordion[data-open="true"] {
grid-template-rows: var(--header-height) 1fr;
gap: var(--Spacing-x3);
}
@@ -86,7 +89,7 @@
}
@media screen and (min-width: 768px) {
.main {
.accordion {
gap: var(--Spacing-x3);
grid-template-areas: "circle header" "circle content";
}
@@ -95,11 +98,11 @@
top: var(--Spacing-x1);
}
.main:not(:last-child) .iconWrapper::after {
.accordion:not(:last-child) .iconWrapper::after {
position: absolute;
left: 12px;
bottom: calc(0px - var(--Spacing-x7));
top: 24px;
top: var(--circle-height);
content: "";
border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);