Skip to content

Commit 4b8b83d

Browse files
Chaitya2108Chaitya2108
committed
changed borders to outlines
1 parent b298c7d commit 4b8b83d

File tree

1 file changed

+34
-40
lines changed

1 file changed

+34
-40
lines changed

‎src/components/button/button.css

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
display: inline-block;
1212
cursor: pointer;
1313
border: 0;
14-
border-radius: 3em;
1514
font-weight: 600; /* Keeps text bold across all buttons */
1615
letter-spacing: 0%; /* Ensures no unintended spacing differences */
1716

@@ -65,8 +64,8 @@
6564

6665
.storybook-button--desktop--medium {
6766
font-size: 19.2px;
68-
width: 161;
69-
height: 61;
67+
width: 161px;
68+
height: 61px;
7069
line-height: 28.8px;
7170

7271
border-radius: 48px;
@@ -114,16 +113,18 @@
114113
&:hover {
115114
background-color: #005CB8;
116115
}
117-
&:focus {
116+
&:focus-visible {
118117
background-color: #0073E6;
119-
border: 6px solid #002E5C;
118+
outline: 6px solid #002E5C;
119+
120120
}
121121
&:active {
122122
background-color: #00458A;
123+
123124
}
124125
&:disabled {
125126
background-color: #57ABFF;
126-
border: 4px solid #1F8FFF;
127+
outline: 4px solid #1F8FFF;
127128
}
128129

129130
}
@@ -132,22 +133,21 @@
132133
.storybook-button--secondary.storybook-button--light {
133134
background-color: #FFFFFF;
134135
color: #000000;
135-
border: 3px solid #000000;
136+
outline: 3px solid #000000;
136137
&:hover {
137138
background: var(--Buttons-CTA-Button-Secondary-secondary-hover, #D6D6D6);
138-
border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #000000);
139139
}
140-
&:focus {
140+
&:focus-visible {
141141
background: var(--Buttons-CTA-Button-Secondary-secondary-default, #FFFFFF);
142-
border: 6px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #000000);
142+
outline: 6px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #000000);
143143
}
144144
&:active {
145145
background: var(--Buttons-CTA-Button-Secondary-secondary-active, #ABABAB);
146-
border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #000000);
146+
147147
}
148148
&:disabled {
149149
background: var(--Buttons-CTA-Button-Secondary-secondary-default, #FFFFFF);
150-
border: 5px solid var(--Buttons-CTA-Button-Secondary-secondary-disabled-outline, #979797);
150+
outline: 5px solid var(--Buttons-CTA-Button-Secondary-secondary-disabled-outline, #979797);
151151
}
152152
}
153153
/* danger */
@@ -157,39 +157,37 @@
157157
&:hover {
158158
background: var(--Buttons-CTA-Button-Primary-Danger-primary-hover, #A11C29);
159159
}
160-
&:focus {
160+
&:focus-visible {
161161
background: var(--Buttons-CTA-Button-Primary-Danger-primary-default, #C82333);
162-
border: 6px solid var(--Buttons-CTA-Button-Primary-Danger-primary-active-border, #4E0E14);
162+
outline: 6px solid var(--Buttons-CTA-Button-Primary-Danger-primary-active-border, #4E0E14);
163163
}
164164
&:active {
165165
background: var(--Buttons-CTA-Button-Primary-Danger-primary-active, #7A151F);
166166
}
167167
&:disabled {
168168
background: var(--Buttons-CTA-Button-Primary-Danger-primary-disabled, #EC8E97);
169-
border: 4px solid var(--Buttons-CTA-Button-Primary-Danger-primary-disabled-border, #E36370);
169+
outline: 4px solid var(--Buttons-CTA-Button-Primary-Danger-primary-disabled-border, #E36370);
170170
}
171171
}
172172
/* secondary danger */
173173
.storybook-button--danger.storybook-button--secondary.storybook-button--light {
174-
background-color: #ffffff;
175-
border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
174+
175+
outline: 3px solid #C82333;
176176
color: #c82333;
177177
&:hover {
178178
background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-hover, #FBE9EB);
179-
border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
180179
}
181-
&:focus {
180+
&:focus-visible {
182181
background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-default, #FFFFFF);
183-
border: 6px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
182+
outline: 6px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
184183
}
185184
&:active {
186-
border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #C82333);
187185
background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-active, #F7CFD3);
188186

189187
}
190188
&:disabled {
191189
background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-default, #FFFFFF);
192-
border: 5px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-disabled-outline, #EC8E97);
190+
outline: 5px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-disabled-outline, #EC8E97);
193191
}
194192
}
195193

@@ -203,39 +201,37 @@
203201
&:hover {
204202
background: var(--Buttons-CTA-Button-Primary-primary-hover, #57ABFF);
205203
}
206-
&:focus {
204+
&:focus-visible {
207205
background: var(--Buttons-CTA-Button-Primary-primary-default, #1F8FFF);
208-
border: 6px solid var(--Buttons-CTA-Button-Primary-primary-active-border, #C7E3FF)
206+
outline: 6px solid var(--Buttons-CTA-Button-Primary-primary-active-border, #C7E3FF)
209207
}
210208
&:active {
211209
background: var(--Buttons-CTA-Button-Primary-primary-active, #8FC7FF);
212210

213211
}
214212
&:disabled {
215213
background: var(--Buttons-CTA-Button-Primary-primary-disabled, #005CB8);
216-
border: 4px solid var(--Buttons-CTA-Button-Primary-primary-disabled-border, #0073E6);
214+
outline: 4px solid var(--Buttons-CTA-Button-Primary-primary-disabled-border, #0073E6);
217215
}
218216
}
219217
/* secondary */
220218
.storybook-button--secondary.storybook-button--dark {
221219
background-color: #25262B;
222220
color: #ffffff;
223-
border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
221+
outline: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
224222
&:hover {
225223
background: var(--Buttons-CTA-Button-Secondary-secondary-hover, #42444D);
226-
border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
227224
}
228-
&:focus {
225+
&:focus-visible {
229226
background: var(--Buttons-CTA-Button-Secondary-secondary-default, #25262B);
230-
border: 6px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
227+
outline: 6px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
231228
}
232229
&:active {
233230
background: var(--Buttons-CTA-Button-Secondary-secondary-active, #656876);
234-
border: 3px solid var(--Buttons-CTA-Button-Secondary-secondary-outline, #FFFFFF);
235231
}
236232
&:disabled {
237233
background: var(--Buttons-CTA-Button-Secondary-secondary-default, #25262B);
238-
border: 5px solid var(--Buttons-CTA-Button-Secondary-secondary-disabled-outline, #797C8B);
234+
outline: 5px solid var(--Buttons-CTA-Button-Secondary-secondary-disabled-outline, #797C8B);
239235
}
240236
}
241237
/* danger */
@@ -245,39 +241,37 @@
245241
&:hover {
246242
background: var(--Buttons-CTA-Button-Primary-Danger-primary-hover, #EC8E97);
247243
}
248-
&:focus {
244+
&:focus-visible {
249245
background: var(--Buttons-CTA-Button-Primary-Danger-primary-default, #E36370);
250-
border: 6px solid var(--Buttons-CTA-Button-Primary-Danger-primary-active-border, #F7CFD3);
246+
outline: 6px solid var(--Buttons-CTA-Button-Primary-Danger-primary-active-border, #F7CFD3);
251247
}
252248
&:active {
253249
background: var(--Buttons-CTA-Button-Primary-Danger-primary-active, #F3AAB1);
254250

255251
}
256252
&:disabled {
257253
background: var(--Buttons-CTA-Button-Primary-Danger-primary-disabled, #A11C29);
258-
border: 4px solid var(--Buttons-CTA-Button-Primary-Danger-primary-disabled-border, #C82333);
254+
outline: 4px solid var(--Buttons-CTA-Button-Primary-Danger-primary-disabled-border, #C82333);
259255
}
260256
}
261257
/* secondary danger */
262258
.storybook-button--danger.storybook-button--secondary.storybook-button--dark {
263259
color: #e36370;
264260
background-color: #25262B;
265-
border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
261+
outline: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
266262
&:hover {
267263
background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-hover, #27070A);
268-
border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
269264
}
270-
&:focus {
265+
&:focus-visible {
271266
background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-default, #25262B);
272-
border: 6px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
267+
outline: 6px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
273268
}
274269
&:active {
275270
background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-active, #4E0E14);
276-
border: 3px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-outline, #E36370);
277271
}
278272
&:disabled {
279273
background: var(--Buttons-CTA-Button-Secondary-Danger-secondary-default, #25262B);
280-
border: 5px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-disabled-outline, #A11C29);
274+
outline: 5px solid var(--Buttons-CTA-Button-Secondary-Danger-secondary-disabled-outline, #A11C29);
281275
}
282276
}
283277

0 commit comments

Comments
 (0)