jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1641 from Safelite/CSR-1887-update-dropdown-styles-payment-page

Browse source 
CSR-1887 update styling on dropdowns for payment page.
This commit is contained in:
bmauger 2023-12-15 10:27:50 -05:00 committed by GitHub
commit b2af82cb3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
public/css/hop-styling.css
View file

@ -39,27 +39,36 @@ body input,
body select { body select {
margin-top: 4px; margin-top: 4px;
} }
body input { body input,
body select {
border-radius: 8px; border-radius: 8px;
border: 1px solid #8E9292; border: 1px solid #8E9292;
padding: 16px; padding: 16px;
font-size: 16px; font-size: 16px;
color: #000; color: #000;
background-color: #fff;
} }
body input:focus, body input:focus-visible { body input:focus, body input:focus-visible,
body select:focus,
body select:focus-visible {
box-shadow: 0 0 0 2.5px #1574a1; box-shadow: 0 0 0 2.5px #1574a1;
border: none; border: 1px solid transparent;
outline: none; outline: none;
} }
body input:disabled, body input.disabled { body input:disabled, body input.disabled,
body select:disabled,
body select.disabled {
background-color: #f5f5f5; background-color: #f5f5f5;
filter: grayscale(100%); filter: grayscale(100%);
} }
body input:disabled:hover, body input.disabled:hover { body input:disabled:hover, body input.disabled:hover,
body select:disabled:hover,
body select.disabled:hover {
box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px transparent;
border: 1px solid #8e9292; border: 1px solid #8e9292;
} }
body input:hover { body input:hover,
body select:hover {
border: 1px solid #8e9292; border: 1px solid #8e9292;
box-shadow: 0 0 0 4px #9fcee6; box-shadow: 0 0 0 4px #9fcee6;
} }

6
public/scss/hop-styling.scss
View file

@ -48,16 +48,18 @@ body {
margin-top: 4px; margin-top: 4px;
} }
input { input,
select {
border-radius: 8px; border-radius: 8px;
border: 1px solid #8E9292; border: 1px solid #8E9292;
padding: 16px; padding: 16px;
font-size: 16px; font-size: 16px;
color: #000; color: #000;
background-color: #fff;
&:focus, &:focus,
&:focus-visible { &:focus-visible {
box-shadow: 0 0 0 2.5px #1574a1; box-shadow: 0 0 0 2.5px #1574a1;
border: none; border: 1px solid transparent;
outline: none; outline: none;
} }
&:disabled, &:disabled,