Skip to content

Commit b7cc65c

Browse files
OhsweddOhswedd
committed
Modular Version
1 parent 6b9a5f5 commit b7cc65c

38 files changed

+2747
-2811
lines changed

‎css/base.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
html {
10+
line-height: 1.5;
11+
-webkit-text-size-adjust: 100%;
12+
font-family: var(--font-sans);
13+
scroll-behavior: smooth;
14+
}
15+
16+
body {
17+
min-height: 100vh;
18+
max-width: 100vw;
19+
margin: auto;
20+
background: var(--neutral-50);
21+
color: var(--neutral-900);
22+
text-rendering: optimizeSpeed;
23+
}
24+
25+
img,
26+
picture,
27+
video,
28+
canvas,
29+
svg {
30+
display: block;
31+
max-width: 100%;
32+
height: auto;
33+
}

‎css/components/accordion.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* Accordion Container */
2+
.accordion-container {
3+
max-width: 100%;
4+
margin: auto;
5+
padding: var(--space-4);
6+
border-radius: var(--radius-md);
7+
box-shadow: var(--shadow-md);
8+
background-color: var(--neutral-50);
9+
}
10+
11+
/* Accordion Item */
12+
.accordion-item {
13+
border-bottom: 1px solid var(--neutral-200);
14+
}
15+
.accordion-item:last-child {
16+
border-bottom: none;
17+
}
18+
19+
/* Accordion Header */
20+
.accordion-header {
21+
display: flex;
22+
justify-content: space-between;
23+
align-items: center;
24+
width: 100%;
25+
padding: clamp(0.75rem, 1vw, 1.25rem);
26+
font-size: 1rem;
27+
font-weight: 500;
28+
color: var(--neutral-700);
29+
cursor: pointer;
30+
background-color: var(--neutral-50);
31+
border: none;
32+
border-radius: var(--radius-md);
33+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
34+
}
35+
.accordion-header:hover,
36+
.accordion-header:focus {
37+
background-color: var(--neutral-100);
38+
outline: none;
39+
}
40+
41+
/* Accordion Content */
42+
.accordion-content, .accordion-sub-content {
43+
height: 0;
44+
overflow: hidden;
45+
transition: height 0.4s ease;
46+
padding: 0 var(--space-3);
47+
}
48+
49+
/* Sub-Item */
50+
.accordion-sub-item {
51+
border-top: 1px solid var(--neutral-200);
52+
padding-left: var(--space-4);
53+
transition: padding 0.3s ease;
54+
}
55+
.accordion-sub-header {
56+
padding: var(--space-2) var(--space-5);
57+
font-size: 0.9rem;
58+
font-weight: 400;
59+
color: var(--neutral-500);
60+
cursor: pointer;
61+
background: var(--neutral-50);
62+
border: none;
63+
text-align: left;
64+
width: 100%;
65+
border-radius: var(--radius-md);
66+
transition: background-color 0.3s ease;
67+
}
68+
.accordion-sub-header:hover {
69+
background-color: var(--neutral-100);
70+
}
71+
72+
/* Color Variants */
73+
.accordion-primary .accordion-header { background-color: var(--primary); color: white; }
74+
.accordion-secondary .accordion-header { background-color: var(--secondary); color: white; }
75+
.accordion-success .accordion-header { background-color: var(--success); color: white; }
76+
.accordion-danger .accordion-header { background-color: var(--danger); color: white; }
77+
.accordion-warning .accordion-header { background-color: var(--warning); color: white; }
78+
79+
/* Responsive Design */
80+
@media (max-width: 768px) {
81+
.accordion-container {
82+
padding: var(--space-2);
83+
}
84+
.accordion-header, .accordion-sub-header {
85+
padding: var(--space-2);
86+
}
87+
}

‎css/components/alert.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/* Base Alert Styles */
2+
.alert {
3+
display: flex;
4+
align-items: start;
5+
padding: var(--space-4);
6+
border-radius: var(--radius-lg);
7+
box-shadow: var(--shadow-md);
8+
font-size: 0.875rem;
9+
position: relative;
10+
transition: var(--transition-all);
11+
background-color: var(--neutral-50);
12+
color: var(--neutral-900);
13+
}
14+
15+
/* Icon */
16+
.alert-icon {
17+
margin-right: var(--space-3);
18+
font-size: 1.5rem;
19+
flex-shrink: 0;
20+
color: inherit; /* Inherit color from alert variant */
21+
}
22+
23+
/* Content and Title */
24+
.alert-content {
25+
flex: 1;
26+
}
27+
28+
.alert-title {
29+
font-weight: 600;
30+
font-size: 1rem;
31+
margin-bottom: 0.25rem;
32+
}
33+
34+
.alert-body {
35+
margin-top: 0.5rem;
36+
line-height: 1.4;
37+
}
38+
39+
.alert-footer {
40+
font-size: 0.75rem;
41+
color: var(--neutral-500);
42+
margin-top: var(--space-3);
43+
}
44+
45+
/* Close Button */
46+
.alert-close {
47+
position: absolute;
48+
top: var(--space-2);
49+
right: var(--space-2);
50+
background: none;
51+
border: none;
52+
font-size: 1.25rem;
53+
cursor: pointer;
54+
color: var(--neutral-500);
55+
transition: color 0.2s;
56+
}
57+
58+
.alert-close:hover {
59+
color: var(--neutral-700);
60+
}
61+
62+
/* Auto Icons (can replace with SVG icons if needed) */
63+
.alert-success .alert-icon::before { content: "✔"; color: var(--success); }
64+
.alert-warning .alert-icon::before { content: "⚠"; color: var(--warning); }
65+
.alert-danger .alert-icon::before { content: "✖"; color: var(--danger); }
66+
.alert-info .alert-icon::before { content: "ℹ"; color: var(--info); }
67+
68+
/* Alert Variants */
69+
.alert-success {
70+
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
71+
color: var(--success);
72+
}
73+
74+
.alert-warning {
75+
background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
76+
color: var(--warning);
77+
}
78+
79+
.alert-danger {
80+
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
81+
color: var(--danger);
82+
}
83+
84+
.alert-info {
85+
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
86+
color: var(--info);
87+
}
88+
89+
/* Outline Variants */
90+
.alert-outline {
91+
background-color: transparent;
92+
border: 1px solid currentColor;
93+
}
94+
95+
.alert-outline.alert-success { color: var(--success); }
96+
.alert-outline.alert-warning { color: var(--warning); }
97+
.alert-outline.alert-danger { color: var(--danger); }
98+
.alert-outline.alert-info { color: var(--info); }
99+
100+
/* Ghost Variants */
101+
.alert-ghost {
102+
background-color: transparent;
103+
color: var(--neutral-500);
104+
box-shadow: none;
105+
}
106+
107+
/* Dismissible Alert with Animation */
108+
.alert-dismissible {
109+
padding-right: var(--space-10);
110+
}
111+
112+
.alert-dismissible .alert-close {
113+
position: absolute;
114+
top: 0.75rem;
115+
right: 0.75rem;
116+
color: inherit;
117+
}
118+
119+
.alert-dismissible .alert-close:hover {
120+
color: var(--neutral-700);
121+
}
122+
123+
.alert-dismissible.fade-out {
124+
opacity: 0;
125+
transform: translateY(-10px);
126+
transition: opacity 0.4s, transform 0.4s;
127+
}
128+
129+
/* Compact Alert (Only Icon and Title) */
130+
.alert-compact {
131+
flex-direction: row;
132+
align-items: center;
133+
}
134+
135+
.alert-compact .alert-icon {
136+
font-size: 1.25rem;
137+
}
138+
139+
.alert-compact .alert-title {
140+
margin: 0;
141+
font-weight: 500;
142+
}
143+
144+
/* Large Alert */
145+
.alert-lg {
146+
padding: var(--space-6);
147+
font-size: 1rem;
148+
}
149+
150+
.alert-lg .alert-icon {
151+
font-size: 2rem;
152+
}
153+
154+
/* Responsive Adjustments */
155+
@media (max-width: 600px) {
156+
.alert {
157+
flex-direction: column;
158+
align-items: flex-start;
159+
}
160+
161+
.alert-icon {
162+
margin-bottom: var(--space-3);
163+
}
164+
165+
.alert-dismissible {
166+
padding-right: var(--space-4);
167+
}
168+
}

0 commit comments

Comments
 (0)