Skip to content

Commit 022d4a7

Browse files
dustin-jwdustin-jw
committed
feat: nest selectors for higher specificity
1 parent 030d6a3 commit 022d4a7

File tree

3 files changed

+147
-143
lines changed

3 files changed

+147
-143
lines changed

‎src/styles/core.css‎

Lines changed: 99 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -39,124 +39,124 @@
3939
margin-block-start: 1em;
4040
}
4141
}
42-
}
4342

44-
.cv-panel {
45-
position: fixed;
46-
top: 0;
47-
left: 0;
48-
width: 18.75rem;
49-
height: 100vh;
50-
z-index: 999999;
51-
transform: translateX(-100%);
52-
transition: transform 0.3s ease;
53-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
54-
box-shadow: 0.125rem 0 0.625rem var(--cv-black);
55-
overflow-y: auto;
56-
}
43+
&.cv-panel {
44+
position: fixed;
45+
top: 0;
46+
left: 0;
47+
width: 18.75rem;
48+
height: 100vh;
49+
z-index: 999999;
50+
transform: translateX(-100%);
51+
transition: transform 0.3s ease;
52+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
53+
box-shadow: 0.125rem 0 0.625rem var(--cv-black);
54+
overflow-y: auto;
55+
}
5756

58-
.cv-panel--visible {
59-
transform: translateX(0);
60-
}
57+
&.cv-panel--visible {
58+
transform: translateX(0);
59+
}
6160

62-
/* Panel header */
63-
.cv-header {
64-
display: flex;
65-
gap: 1rem;
66-
align-items: center;
67-
padding: 1rem 1.5rem;
68-
/* TODO: The `border-bottom` color is equal to `--cv-color-gray-50` and should be replaced with the variable when implemented */
69-
border-bottom: 1px solid oklch(from oklch(50.0% 0.000 0) 50% calc(0 + (sin(0.6 * pi) * c)) h);
70-
background-color: var(--cv-white);
71-
}
61+
/* Panel header */
62+
.cv-header {
63+
display: flex;
64+
gap: 1rem;
65+
align-items: center;
66+
padding: 1rem 1.5rem;
67+
/* TODO: The `border-bottom` color is equal to `--cv-color-gray-50` and should be replaced with the variable when implemented */
68+
border-bottom: 1px solid oklch(from oklch(50.0% 0.000 0) 50% calc(0 + (sin(0.6 * pi) * c)) h);
69+
background-color: var(--cv-white);
70+
}
7271

73-
.cv-header__logo {
74-
--header-logo-dimensions: 2rem;
72+
.cv-header__logo {
73+
--header-logo-dimensions: 2rem;
7574

76-
width: var(--header-logo-dimensions);
77-
height: var(--header-logo-dimensions);
78-
}
75+
width: var(--header-logo-dimensions);
76+
height: var(--header-logo-dimensions);
77+
}
7978

80-
.cv-header__title {
81-
margin: 0;
82-
font-size: 1.125rem;
83-
font-weight: 600;
84-
color: var(--cv-black);
85-
}
79+
.cv-header__title {
80+
margin: 0;
81+
font-size: 1.125rem;
82+
font-weight: 600;
83+
color: var(--cv-black);
84+
}
8685

87-
/* Panel content */
88-
.cv-panel__content {
89-
padding: 1.5rem;
90-
}
86+
/* Panel content */
87+
.cv-panel__content {
88+
padding: 1.5rem;
89+
}
9190

92-
/* Features list & content */
93-
.cv-feature {
94-
display: flex;
95-
align-items: center;
96-
gap: 0.75rem;
97-
padding: 0.75rem;
98-
}
91+
/* Features list & content */
92+
.cv-feature {
93+
display: flex;
94+
align-items: center;
95+
gap: 0.75rem;
96+
padding: 0.75rem;
97+
}
9998

100-
.cv-feature__icon {
101-
font-size: 1.25rem;
102-
flex-shrink: 0;
103-
}
99+
.cv-feature__icon {
100+
font-size: 1.25rem;
101+
flex-shrink: 0;
102+
}
104103

105-
.cv-feature__text {
106-
color: var(--cv-white);
107-
font-weight: 500;
108-
}
104+
.cv-feature__text {
105+
color: var(--cv-white);
106+
font-weight: 500;
107+
}
109108

110-
/* Button */
111-
.cv-btn {
112-
width: 100%;
113-
padding: 1rem;
114-
border: none;
115-
border-radius: 0.5rem;
116-
font-size: 1rem;
117-
font-weight: 600;
118-
cursor: pointer;
119-
transition: all 0.2s ease;
120-
}
109+
/* Button */
110+
.cv-btn {
111+
width: 100%;
112+
padding: 1rem;
113+
border: none;
114+
border-radius: 0.5rem;
115+
font-size: 1rem;
116+
font-weight: 600;
117+
cursor: pointer;
118+
transition: all 0.2s ease;
119+
}
121120

122-
.cv-btn--primary {
123-
background: transparent;
124-
color: var(--cv-white);
125-
border: 2px solid var(--cv-white);
126-
}
121+
.cv-btn--primary {
122+
background: transparent;
123+
color: var(--cv-white);
124+
border: 2px solid var(--cv-white);
125+
}
127126

128-
.cv-btn--primary:hover {
129-
transform: translateY(-1px);
130-
box-shadow: 0 4px 12px var(--cv-black);
131-
}
127+
.cv-btn--primary:hover {
128+
transform: translateY(-1px);
129+
box-shadow: 0 4px 12px var(--cv-black);
130+
}
132131

133-
.cv-btn--primary:active {
134-
transform: translateY(0);
135-
}
132+
.cv-btn--primary:active {
133+
transform: translateY(0);
134+
}
136135

137-
.cv-btn:disabled {
138-
opacity: 0.6;
139-
cursor: not-allowed;
140-
transform: none;
141-
}
136+
.cv-btn:disabled {
137+
opacity: 0.6;
138+
cursor: not-allowed;
139+
transform: none;
140+
}
142141

143-
/* Responsive design */
144-
@media (max-width: 480px) {
145-
.cv-panel {
146-
width: 100%;
142+
/* Responsive design */
143+
@media (max-width: 480px) {
144+
.cv-panel {
145+
width: 100%;
146+
}
147147
}
148-
}
149148

150-
/* High contrast mode support */
151-
@media (prefers-contrast: more) {
152-
.cv-panel {
153-
border: 2px solid var(--cv-black);
149+
/* High contrast mode support */
150+
@media (prefers-contrast: more) {
151+
.cv-panel {
152+
border: 2px solid var(--cv-black);
153+
}
154154
}
155-
}
156155

157-
/* Reduced motion support */
158-
@media (prefers-reduced-motion) {
159-
.cv-panel {
160-
transition: none;
156+
/* Reduced motion support */
157+
@media (prefers-reduced-motion) {
158+
.cv-panel {
159+
transition: none;
160+
}
161161
}
162162
}

‎src/styles/results.css‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
11

22
/* Results panel variant styles */
33

4-
.cv-panel--results {
5-
text-align: center;
6-
background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
7-
color: var(--cv-white);
8-
}
4+
#carbon-visualizer-welcome-panel {
5+
&.cv-panel--results {
6+
text-align: center;
7+
background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
8+
color: var(--cv-white);
9+
}
910

10-
.cv-results__icon {
11-
font-size: 3rem;
12-
margin-bottom: 1rem;
13-
}
11+
.cv-results__icon {
12+
font-size: 3rem;
13+
margin-bottom: 1rem;
14+
}
1415

15-
.cv-results__title {
16-
margin: 0 0 1rem 0;
17-
font-size: 1.25rem;
18-
font-weight: 600;
19-
color: var(--cv-white);
20-
}
16+
.cv-results__title {
17+
margin: 0 0 1rem 0;
18+
font-size: 1.25rem;
19+
font-weight: 600;
20+
color: var(--cv-white);
21+
}
2122

22-
.cv-results__description {
23-
margin: 0 0 2rem 0;
24-
color: var(--cv-white);
25-
line-height: 1.5;
23+
.cv-results__description {
24+
margin: 0 0 2rem 0;
25+
color: var(--cv-white);
26+
line-height: 1.5;
27+
}
2628
}

‎src/styles/welcome.css‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11

22
/* Welcome panel variant styles */
33

4-
.cv-panel--welcome {
5-
text-align: center;
6-
background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
7-
color: var(--cv-white);
8-
}
4+
#carbon-visualizer-welcome-panel {
5+
&.cv-panel--welcome {
6+
text-align: center;
7+
background: linear-gradient(to bottom,var(--cv-primary-green-10), var(--cv-primary-green-70) 80%);
8+
color: var(--cv-white);
9+
}
910

10-
.cv-panel--welcome__icon {
11-
font-size: 3rem;
12-
margin-bottom: 1rem;
13-
}
11+
.cv-panel--welcome__icon {
12+
font-size: 3rem;
13+
margin-bottom: 1rem;
14+
}
1415

15-
.cv-panel--welcome__title {
16-
margin: 0 0 1rem 0;
17-
font-size: 1.25rem;
18-
font-weight: 600;
19-
color: var(--cv-white);
20-
}
16+
.cv-panel--welcome__title {
17+
margin: 0 0 1rem 0;
18+
font-size: 1.25rem;
19+
font-weight: 600;
20+
color: var(--cv-white);
21+
}
2122

22-
.cv-panel--welcome__description {
23-
margin: 0 0 2rem 0;
24-
color: var(--cv-white);
25-
line-height: 1.5;
26-
}
23+
.cv-panel--welcome__description {
24+
margin: 0 0 2rem 0;
25+
color: var(--cv-white);
26+
line-height: 1.5;
27+
}
2728

28-
.cv-panel--welcome__features {
29-
display: flex;
30-
flex-direction: column;
31-
gap: 0.75rem;
32-
margin-bottom: 2rem;
29+
.cv-panel--welcome__features {
30+
display: flex;
31+
flex-direction: column;
32+
gap: 0.75rem;
33+
margin-bottom: 2rem;
34+
}
3335
}

0 commit comments

Comments
 (0)