CSR-365 text input and select input components.
This commit is contained in:
parent
45f61fc2f1
commit
c114e4b004
2 changed files with 12 additions and 11 deletions
|
|
@ -38,7 +38,8 @@ export default {
|
||||||
color: $gray-500;
|
color: $gray-500;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus,
|
||||||
|
&:focus-visible {
|
||||||
box-shadow: 0 0 0 2px $blue;
|
box-shadow: 0 0 0 2px $blue;
|
||||||
}
|
}
|
||||||
&:disabled,
|
&:disabled,
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
labelText="Text Input"
|
labelText="Text Input Label"
|
||||||
placeholderText="Placeholder"
|
placeholderText="Placeholder"
|
||||||
inputID="test-text-input"
|
inputID="test-text-input"
|
||||||
/>
|
/>
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h6 class="my-4">Disabled</h6>
|
<h6 class="my-4">Disabled</h6>
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
labelText="Text Input"
|
labelText="Text Input Label"
|
||||||
placeholderText="Disabled"
|
placeholderText="Disabled"
|
||||||
inputID="test-text-input"
|
inputID="test-text-input"
|
||||||
isDisabled
|
isDisabled
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h6 class="my-4">With Error (class="has-error"):</h6>
|
<h6 class="my-4">With Error (class="has-error"):</h6>
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
labelText="Text Input"
|
labelText="Text Input Label"
|
||||||
placeholderText="Placeholder"
|
placeholderText="Placeholder"
|
||||||
inputID="test-text-input"
|
inputID="test-text-input"
|
||||||
class="has-error"
|
class="has-error"
|
||||||
|
|
@ -38,14 +38,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row my-4">
|
<div class="row my-4">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h4 class="m-0 p-2 bg-light rounded">Dropdown Input (select)</h4>
|
<h4 class="m-0 p-2 bg-light rounded">Dropdown Input (Select)</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<dropdownQuestion
|
<dropdownQuestion
|
||||||
labelText="Text Input"
|
labelText="Dropdown Label"
|
||||||
inputID="test-text-input"
|
inputID="test-dropdown-input-1"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -53,8 +53,8 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h6 class="my-4">Disabled</h6>
|
<h6 class="my-4">Disabled</h6>
|
||||||
<dropdownQuestion
|
<dropdownQuestion
|
||||||
labelText="Text Input"
|
labelText="Dropdown Label"
|
||||||
inputID="test-text-input"
|
inputID="test-dropdown-input-2"
|
||||||
isDisabled
|
isDisabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -63,8 +63,8 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h6 class="my-4">With Error (class="has-error"):</h6>
|
<h6 class="my-4">With Error (class="has-error"):</h6>
|
||||||
<dropdownQuestion
|
<dropdownQuestion
|
||||||
labelText="Text Input"
|
labelText="Dropdown Label"
|
||||||
inputID="test-text-input"
|
inputID="test-dropdown-input-3"
|
||||||
class="has-error"
|
class="has-error"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue