Merge pull request #244 from Safelite/CSR-365-textbox-dropdown-styling
Update option copy. Update color. Deploy components.
This commit is contained in:
commit
562e5fe4e7
1 changed files with 2 additions and 2 deletions
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="dropdown-question">
|
<div class="dropdown-question">
|
||||||
<label :for="inputId" class="form-label">{{labelText}}</label>
|
<label :for="inputId" class="form-label">{{labelText}}</label>
|
||||||
<select class="form-select" aria-label="Default select example" :id="inputId" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
|
<select class="form-select" aria-label="Default select example" :id="inputId" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
|
||||||
<option selected>Open this select menu</option>
|
<option selected>Placeholder</option>
|
||||||
<option value="1">One</option>
|
<option value="1">One</option>
|
||||||
<option value="2">Two</option>
|
<option value="2">Two</option>
|
||||||
<option value="3">Three</option>
|
<option value="3">Three</option>
|
||||||
|
|
@ -30,6 +30,7 @@ export default {
|
||||||
margin-bottom: .25rem;
|
margin-bottom: .25rem;
|
||||||
}
|
}
|
||||||
.form-select {
|
.form-select {
|
||||||
|
color: $gray-500;
|
||||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||||
border: 1px solid $gray-500;
|
border: 1px solid $gray-500;
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
|
|
@ -46,7 +47,6 @@ export default {
|
||||||
&.disabled {
|
&.disabled {
|
||||||
background-color: $gray-100;
|
background-color: $gray-100;
|
||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
opacity: .65;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 0 0 0 4px transparent;
|
box-shadow: 0 0 0 4px transparent;
|
||||||
border: 1px solid $gray-500;
|
border: 1px solid $gray-500;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue