Skip to content

Commit a9b406f

Browse files
bingggbinggg
authored
Merge pull request #250 from TencentCloudBase/feature/add-error-code-ide-helper
feat(docs): add error code IDE helper components
2 parents f688dc8 + 8f63ba0 commit a9b406f

7 files changed

Lines changed: 1443 additions & 252 deletions

‎doc/components/ErrorCodeIDEButton.module.css‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
/* Wrapper */
2+
.wrapper {
3+
margin: 1.5rem 0;
4+
}
5+
6+
/* Container */
7+
.container {
8+
position: relative;
9+
padding: 1rem;
10+
background: var(--ifm-color-emphasis-100);
11+
border: 1px solid var(--ifm-color-emphasis-200);
12+
border-radius: 8px;
13+
overflow: hidden;
14+
}
15+
16+
/* Bottom gradient overlay (like Vercel) - shown when collapsed */
17+
.containerCollapsed::after {
18+
content: '';
19+
position: absolute;
20+
bottom: 0;
21+
left: 0;
22+
right: 0;
23+
height: 40px;
24+
background: linear-gradient(
25+
to bottom,
26+
transparent,
27+
var(--ifm-color-emphasis-100)
28+
);
29+
pointer-events: none;
30+
}
31+
32+
/* Content */
33+
.content {
34+
display: flex;
35+
flex-direction: column;
36+
gap: 1rem;
37+
}
38+
39+
/* Header Content */
40+
.headerContent {
41+
display: flex;
42+
align-items: center;
43+
justify-content: space-between;
44+
gap: 1rem;
45+
}
46+
47+
/* IDE Icons */
48+
.ideIcons {
49+
display: flex;
50+
align-items: center;
51+
flex-shrink: 0;
52+
margin-right: 0.5rem;
53+
}
54+
55+
.ideIcon {
56+
width: 24px;
57+
height: 24px;
58+
border-radius: 50% !important;
59+
border: 2px solid var(--ifm-background-color);
60+
background: rgba(255, 255, 255, 0.5) !important;
61+
object-fit: cover;
62+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
63+
}
64+
65+
/* Description */
66+
.description {
67+
margin: 0;
68+
font-size: 0.875rem;
69+
color: var(--ifm-color-emphasis-700);
70+
line-height: 1.6;
71+
}
72+
73+
/* Button */
74+
.button {
75+
display: inline-flex;
76+
align-items: center;
77+
gap: 0.75rem;
78+
padding: 0.625rem 1rem;
79+
background: var(--ifm-background-color);
80+
border: 1px solid var(--ifm-color-emphasis-300);
81+
border-radius: 6px;
82+
color: var(--ifm-font-color-base);
83+
font-size: 0.875rem;
84+
font-weight: 500;
85+
cursor: pointer;
86+
transition: all 0.2s ease;
87+
text-decoration: none;
88+
flex-shrink: 0;
89+
}
90+
91+
.buttonLeft {
92+
display: flex;
93+
align-items: center;
94+
gap: 0.5rem;
95+
}
96+
97+
.button:hover {
98+
background: var(--ifm-color-emphasis-100);
99+
border-color: var(--ifm-color-primary);
100+
color: var(--ifm-font-color-base);
101+
text-decoration: none;
102+
transform: translateY(-1px);
103+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
104+
}
105+
106+
.button:active,
107+
.button:focus {
108+
transform: translateY(0);
109+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
110+
background: var(--ifm-color-emphasis-100);
111+
border-color: var(--ifm-color-emphasis-300);
112+
color: var(--ifm-font-color-base);
113+
outline: none;
114+
}
115+
116+
117+
.buttonText {
118+
line-height: 1.5;
119+
}
120+
121+
.buttonArrow {
122+
flex-shrink: 0;
123+
color: var(--ifm-color-emphasis-600);
124+
transition: transform 0.2s ease;
125+
}
126+
127+
.buttonArrowExpanded {
128+
transform: rotate(180deg);
129+
}
130+
131+
.button:hover .buttonArrow {
132+
color: var(--ifm-color-primary);
133+
}
134+
135+
.buttonExpanded {
136+
background: var(--ifm-color-emphasis-100);
137+
border-color: var(--ifm-color-primary);
138+
}
139+
140+
/* Expanded Content */
141+
.expandedContent {
142+
margin-top: 1rem;
143+
padding: 0 1.5rem;
144+
background: var(--ifm-background-color);
145+
border: 1px solid var(--ifm-color-emphasis-200);
146+
border-radius: 8px;
147+
animation: slideDown 0.3s ease;
148+
}
149+
150+
@keyframes slideDown {
151+
from {
152+
opacity: 0;
153+
transform: translateY(-10px);
154+
}
155+
to {
156+
opacity: 1;
157+
transform: translateY(0);
158+
}
159+
}
160+
161+
162+
/* IDE Selector Section */
163+
.ideSelectorSection {
164+
/* No additional styling needed, IDESelector has its own styles */
165+
}
166+
167+
/* Responsive */
168+
@media (max-width: 640px) {
169+
.container {
170+
padding: 0.875rem;
171+
}
172+
173+
.description {
174+
font-size: 0.8125rem;
175+
}
176+
177+
.button {
178+
font-size: 0.8125rem;
179+
padding: 0.5rem 0.875rem;
180+
}
181+
182+
.headerContent {
183+
flex-direction: column;
184+
align-items: stretch;
185+
gap: 1rem;
186+
}
187+
188+
.button {
189+
width: 100%;
190+
justify-content: space-between;
191+
}
192+
193+
.ideIcon {
194+
width: 20px;
195+
height: 20px;
196+
}
197+
}
198+

0 commit comments

Comments
 (0)