Skip to content

Commit 743769c

Browse files
OhsweddOhswedd
committed
New Kroma Accordion options
1 parent 111ba0f commit 743769c

File tree

3 files changed

+97
-33
lines changed

3 files changed

+97
-33
lines changed

‎demo.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h2 class="font-lg text-primary my-4">Alert Component Showcase</h2>
7373
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
7474
<h2 class="font-lg text-primary my-4">Accordion Component Showcase</h2>
7575

76-
<div class="kroma-accordion-container" data-variant="secondary">
76+
<div class="kroma-accordion-container" data-variant="primary" data-responsive="auto" data-background="none">
7777
<div class="kroma-accordion-item" data-header="Primary Accordion - Item 1" data-content="This is the main content of the primary accordion item 1."></div>
7878
<div class="kroma-accordion-item" data-header="Primary Accordion - Item 2" data-content="This is the main content of the primary accordion item 2.">
7979
<div class="kroma-accordion-sub-item" data-header="Sub-Item 1" data-content="This is the content of sub-item 1 under primary accordion item 2."></div>

‎src/css/bundle.css‎

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -615,12 +615,22 @@ blockquote {
615615
/* --- accordion.css --- */
616616
/* Base Accordion Container */
617617
.kroma-accordion-container {
618+
display: flex;
619+
flex-direction: column;
618620
max-width: 100%;
619621
margin: auto;
620622
padding: var(--space-4);
621-
border-radius: var(--radius-md);
622-
box-shadow: var(--shadow-md);
623+
border-radius: var(--radius-lg);
624+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
623625
background-color: var(--neutral-50);
626+
transition: padding 0.3s ease, box-shadow 0.3s ease;
627+
}
628+
629+
.kroma-accordion-container[data-responsive="auto"] {
630+
margin: 2vw auto;
631+
padding: clamp(var(--space-3), 2vw, var(--space-6));
632+
display: flex;
633+
justify-content: center;
624634
}
625635

626636
/* Accordion Item */
@@ -637,31 +647,38 @@ blockquote {
637647
justify-content: space-between;
638648
align-items: center;
639649
width: 100%;
640-
padding: clamp(var(--space-3), 1vw + var(--space-2), var(--space-5));
650+
padding: clamp(var(--space-3), 1.5vw, var(--space-5));
641651
font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
642-
font-weight: 500;
652+
font-weight: 600;
643653
color: var(--neutral-700);
644654
cursor: pointer;
645655
background-color: var(--neutral-50);
646-
border: none;
647-
border-radius: var(--radius-md);
648-
transition: background-color var(--transition-colors), box-shadow var(--transition-all);
656+
border: 1px solid transparent;
657+
border-radius: var(--radius-lg);
658+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
649659
}
650660
.kroma-accordion-header:hover,
651661
.kroma-accordion-header:focus {
652662
background-color: var(--neutral-100);
663+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
653664
outline: none;
654665
}
666+
.kroma-accordion-header:focus-visible {
667+
border: 1px solid var(--focus-color);
668+
}
655669

656670
/* Accordion Content */
657-
.kroma-accordion-content,
658-
.kroma-accordion-sub-content {
671+
.kroma-accordion-content {
659672
height: 0;
660673
overflow: hidden;
661-
transition: height 0.4s ease;
674+
transition: height 0.4s ease, padding 0.3s ease;
662675
padding: 0 var(--space-3);
663676
background-color: var(--neutral-50);
664677
}
678+
.kroma-accordion-content[data-expanded="true"] {
679+
height: auto;
680+
padding: var(--space-3) var(--space-4);
681+
}
665682

666683
/* Sub-Item */
667684
.kroma-accordion-sub-item {
@@ -670,17 +687,17 @@ blockquote {
670687
transition: padding 0.3s ease;
671688
}
672689
.kroma-accordion-sub-header {
673-
padding: clamp(var(--space-2), 1vw + var(--space-1), var(--space-3));
690+
padding: clamp(var(--space-2), 1vw, var(--space-4));
674691
font-size: 0.9rem;
675-
font-weight: 400;
692+
font-weight: 500;
676693
color: var(--neutral-500);
677694
cursor: pointer;
678695
background: var(--neutral-50);
679696
border: none;
680697
text-align: left;
681698
width: 100%;
682-
border-radius: var(--radius-md);
683-
transition: background-color var(--transition-colors);
699+
border-radius: var(--radius-lg);
700+
transition: background-color 0.3s ease;
684701
}
685702
.kroma-accordion-sub-header:hover {
686703
background-color: var(--neutral-100);
@@ -700,14 +717,29 @@ blockquote {
700717
/* Responsive Design */
701718
@media (max-width: 768px) {
702719
.kroma-accordion-container {
703-
padding: var(--space-2);
720+
padding: var(--space-3);
721+
box-shadow: none;
704722
}
705723
.kroma-accordion-header,
706724
.kroma-accordion-sub-header {
707-
padding: var(--space-2);
725+
padding: var(--space-3);
708726
}
709727
}
710728

729+
/* Versione Senza Background */
730+
.kroma-accordion-container[data-background="none"] {
731+
background-color: transparent;
732+
box-shadow: none;
733+
}
734+
.kroma-accordion-container[data-background="none"] .kroma-accordion-header {
735+
background-color: transparent;
736+
border: none;
737+
box-shadow: none;
738+
}
739+
.kroma-accordion-container[data-background="none"] .kroma-accordion-content {
740+
background-color: transparent;
741+
}
742+
711743

712744
/* --- alert.css --- */
713745
/* Base Alert Styles */

‎src/css/components/accordion.css‎

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
/* Base Accordion Container */
22
.kroma-accordion-container {
3+
display: flex;
4+
flex-direction: column;
35
max-width: 100%;
46
margin: auto;
57
padding: var(--space-4);
6-
border-radius: var(--radius-md);
7-
box-shadow: var(--shadow-md);
8+
border-radius: var(--radius-lg);
9+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
810
background-color: var(--neutral-50);
11+
transition: padding 0.3s ease, box-shadow 0.3s ease;
12+
}
13+
14+
.kroma-accordion-container[data-responsive="auto"] {
15+
margin: 2vw auto;
16+
padding: clamp(var(--space-3), 2vw, var(--space-6));
17+
display: flex;
18+
justify-content: center;
919
}
1020

1121
/* Accordion Item */
@@ -22,31 +32,38 @@
2232
justify-content: space-between;
2333
align-items: center;
2434
width: 100%;
25-
padding: clamp(var(--space-3), 1vw + var(--space-2), var(--space-5));
35+
padding: clamp(var(--space-3), 1.5vw, var(--space-5));
2636
font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
27-
font-weight: 500;
37+
font-weight: 600;
2838
color: var(--neutral-700);
2939
cursor: pointer;
3040
background-color: var(--neutral-50);
31-
border: none;
32-
border-radius: var(--radius-md);
33-
transition: background-color var(--transition-colors), box-shadow var(--transition-all);
41+
border: 1px solid transparent;
42+
border-radius: var(--radius-lg);
43+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
3444
}
3545
.kroma-accordion-header:hover,
3646
.kroma-accordion-header:focus {
3747
background-color: var(--neutral-100);
48+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
3849
outline: none;
3950
}
51+
.kroma-accordion-header:focus-visible {
52+
border: 1px solid var(--focus-color);
53+
}
4054

4155
/* Accordion Content */
42-
.kroma-accordion-content,
43-
.kroma-accordion-sub-content {
56+
.kroma-accordion-content {
4457
height: 0;
4558
overflow: hidden;
46-
transition: height 0.4s ease;
59+
transition: height 0.4s ease, padding 0.3s ease;
4760
padding: 0 var(--space-3);
4861
background-color: var(--neutral-50);
4962
}
63+
.kroma-accordion-content[data-expanded="true"] {
64+
height: auto;
65+
padding: var(--space-3) var(--space-4);
66+
}
5067

5168
/* Sub-Item */
5269
.kroma-accordion-sub-item {
@@ -55,17 +72,17 @@
5572
transition: padding 0.3s ease;
5673
}
5774
.kroma-accordion-sub-header {
58-
padding: clamp(var(--space-2), 1vw + var(--space-1), var(--space-3));
75+
padding: clamp(var(--space-2), 1vw, var(--space-4));
5976
font-size: 0.9rem;
60-
font-weight: 400;
77+
font-weight: 500;
6178
color: var(--neutral-500);
6279
cursor: pointer;
6380
background: var(--neutral-50);
6481
border: none;
6582
text-align: left;
6683
width: 100%;
67-
border-radius: var(--radius-md);
68-
transition: background-color var(--transition-colors);
84+
border-radius: var(--radius-lg);
85+
transition: background-color 0.3s ease;
6986
}
7087
.kroma-accordion-sub-header:hover {
7188
background-color: var(--neutral-100);
@@ -85,10 +102,25 @@
85102
/* Responsive Design */
86103
@media (max-width: 768px) {
87104
.kroma-accordion-container {
88-
padding: var(--space-2);
105+
padding: var(--space-3);
106+
box-shadow: none;
89107
}
90108
.kroma-accordion-header,
91109
.kroma-accordion-sub-header {
92-
padding: var(--space-2);
110+
padding: var(--space-3);
93111
}
94112
}
113+
114+
/* Versione Senza Background */
115+
.kroma-accordion-container[data-background="none"] {
116+
background-color: transparent;
117+
box-shadow: none;
118+
}
119+
.kroma-accordion-container[data-background="none"] .kroma-accordion-header {
120+
background-color: transparent;
121+
border: none;
122+
box-shadow: none;
123+
}
124+
.kroma-accordion-container[data-background="none"] .kroma-accordion-content {
125+
background-color: transparent;
126+
}

0 commit comments

Comments
 (0)