Skip to content

Commit

Permalink
Merge pull request #863 from trimble-oss/dependabot/npm_and_yarn/trim…
Browse files Browse the repository at this point in the history 
…ble-oss/modus-bootstrap-2.0.0-alpha25

Update Modus Text Inputs (form controls CSS and guide)
  • Loading branch information
@coliff
coliff committed May 30, 2024
2 parents bb559ea + e63192f commit e2bcba3
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 164 deletions.
13 changes: 7 additions & 6 deletions content/components/web/inputs/_index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,21 @@ Input fields or text fields allow users to enter text into a UI. They typically

<form class="mb-3" style="max-width: 500px;">
<div class="form-group mb-3">
<label for="RegularInput">Regular Input</label>
<label for="RegularInput" class="form-label">Regular Input</label>
<div class="form-text">Optional help text for providing additional information</div>
<input class="form-control" id="RegularInput">
</div>
<div class="form-group mb-3">
<label for="Input3">Input with icon on left</label>
<label for="Input3" class="form-label">Input with icon on left</label>
<div class="form-control-with-icon">
<input class="form-control" id="Input3">
<div class="form-control-icon ps-1">
<i class="modus-icons notranslate mx-1 small" aria-hidden="true" style="font-size: 20px;">search</i>
</div>
</div>
</div>
<div class="form-group mb-3">
<label for="Input4">Input with a button</label>
<div class="form-group mb-3" hidden>
<label for="Input4" class="form-label">Input with a button</label>
<div class="input-group">
<input class="form-control" id="Input4">
<div class="input-group-append">
Expand All @@ -46,7 +47,7 @@ Input fields or text fields allow users to enter text into a UI. They typically
</div>
</div>
<div class="form-group mb-3">
<label for="exampleFormControlSelect">Select</label>
<label for="exampleFormControlSelect" class="form-label">Select</label>
<select class="form-select" id="exampleFormControlSelect">
<option>Option 1</option>
<option>Option 2</option>
Expand All @@ -56,7 +57,7 @@ Input fields or text fields allow users to enter text into a UI. They typically
</select>
</div>
<div class="form-group mb-3">
<label for="Textarea">Text Area</label>
<label for="Textarea" class="form-label">Text Area</label>
<textarea class="form-control" id="Textarea">Some Text</textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
Expand Down
38 changes: 21 additions & 17 deletions content/components/web/inputs/styles.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ There are two sizes of input fields defined:
<tr>
<th scope="row">Default</th>
<td style="height:185px">
<div style="padding-left: 198px; margin-top: 50px;" class="pt-4 vertical-align">
<div style="padding-left: 198px; margin-top: 20px;" class="pt-4 vertical-align">
<label for="defaultInput" class="form-label">Default Input</label>
<input
class="form-control mb-5 pe-none"
aria-label="Example input"
Expand All @@ -44,14 +45,16 @@ There are two sizes of input fields defined:
data-bs-custom-class="popover-css-inspector"
data-css-inspector-hide="margin"
data-css-inspector-show=""
id="defaultInput"
/>
<div>
</td>
</tr>
<tr>
<th scope="row">Large</th>
<td style="height:185px">
<div style="padding-left: 198px; margin-top: 50px;" class="pt-2">
<div style="padding-left: 198px; margin-top: 30px;" class="pt-2">
<label for="defaultInput" class="form-label">Large Input</label>
<input
class="form-control form-control-lg anatomy-display-static mb-5 pe-none"
aria-label="Example large input"
Expand All @@ -62,6 +65,7 @@ There are two sizes of input fields defined:
data-bs-custom-class="popover-css-inspector"
data-css-inspector-hide="margin"
data-css-inspector-show=""
id="largeInput"
/>
</div>
</td>
Expand All @@ -79,13 +83,13 @@ There are two sizes of input fields defined:
class="form-control focus pe-none"
id="focusInput"
placeholder="In focus"
style="border-bottom-style: solid; border-bottom-width: 2px; border-color: var(--bs-primary) !important; border-bottom-color: var(--bs-primary) !important;"
style="border-color: var(--bs-primary) !important; border-width: 2px;"
data-bs-toggle="popover"
data-bs-placement="right"
data-bs-container="main"
data-bs-custom-class="popover-css-inspector"
data-css-inspector-hide="bg-color b-radius b-width border-bottom-color color font-size height padding width"
data-css-inspector-show="b-color b-bottom-width"
data-css-inspector-hide="bg-color b-radius color font-size height padding width b-width"
data-css-inspector-show="b-color"
/>
<small class="text-muted">Helper Text</small>
</div>
Expand All @@ -99,8 +103,8 @@ There are two sizes of input fields defined:
data-bs-placement="right"
data-bs-container="main"
data-bs-custom-class="popover-css-inspector"
data-css-inspector-hide="bg-color b-radius b-bottom-color b-width color font-size height padding width"
data-css-inspector-show="b-color b-bottom-width"
data-css-inspector-hide="bg-color b-radius b-bottom-color color font-size height padding width b-width"
data-css-inspector-show="b-color"
/>
<div class="valid-feedback">Valid Feedback</div>
</div>
Expand All @@ -114,8 +118,8 @@ There are two sizes of input fields defined:
data-bs-placement="right"
data-bs-container="body"
data-bs-custom-class="popover-css-inspector"
data-css-inspector-hide="bg-color b-radius b-width color font-size height padding width"
data-css-inspector-show="b-color b-bottom-width"
data-css-inspector-hide="bg-color b-radius color font-size height padding width b-width"
data-css-inspector-show="b-color"
/>
<div class="invalid-feedback">Invalid Feedback</div>
</div>
Expand All @@ -129,8 +133,8 @@ There are two sizes of input fields defined:
data-bs-placement="right"
data-bs-container="body"
data-bs-custom-class="popover-css-inspector"
data-css-inspector-hide="b-radius b-width font-size height padding width"
data-css-inspector-show="b-bottom-color b-bottom-width"/>
data-css-inspector-hide="b-radius font-size height padding width b-width"
data-css-inspector-show=""/>
</div>
<div class="form-group mb-4">
<label for="ReadonlyInput">Readonly Input</label>
Expand All @@ -142,8 +146,8 @@ There are two sizes of input fields defined:
data-bs-placement="right"
data-bs-container="body"
data-bs-custom-class="popover-css-inspector"
data-css-inspector-hide="b-radius b-width font-size height padding width"
data-css-inspector-show="b-bottom-color b-bottom-width"
data-css-inspector-hide="b-radius font-size height padding width b-width"
data-css-inspector-show=""
/>
</div>
</div>
Expand Down Expand Up @@ -187,10 +191,10 @@ There are two sizes of input fields defined:
| | Placeholder | {{< color-preview nameL=" " hexL="#b7b9c3" nameD=" " hexD="#7d808d" >}} |
| | Background | {{< color-preview nameL=" " hexL="#ffffff" nameD=" " hexD="#171c1e" >}} |
| | Border | {{< color-preview nameL=" " hexL="#e0e1e9" nameD=" " hexD="#464b52" >}} |
| | Border (Bottom 2px) | {{< color-preview nameL=" " hexL="#6a6e79" nameD=" " hexD="#6a6e79" >}} |
| Input (Focus) | Border (Bottom 2px) | {{< color-preview nameL=" " hexL="#217cbb" nameD=" " hexD="#019AEB" >}} |
| Input (Valid) | Border (Bottom 2px) | {{< color-preview nameL=" " hexL="#006638" nameD=" " hexD="#1e8a44" >}} |
| Input (Invalid) | Border (Bottom 2px) | {{< color-preview nameL=" " hexL="#da212c" nameD=" " hexD="#da212c" >}} |
| | Border | {{< color-preview nameL=" " hexL="#6a6e79" nameD=" " hexD="#6a6e79" >}} |
| Input (Focus) | Border | {{< color-preview nameL=" " hexL="#217cbb" nameD=" " hexD="#019AEB" >}} |
| Input (Valid) | Border | {{< color-preview nameL=" " hexL="#006638" nameD=" " hexD="#1e8a44" >}} |
| Input (Invalid) | Border | {{< color-preview nameL=" " hexL="#da212c" nameD=" " hexD="#da212c" >}} |
| Input (Disabled) | Background (40% opacity) | {{< color-preview nameL=" " hexL="#f1f1f6" nameD=" " hexD="#171c1e" >}} |
| Input (Readonly) | Background | {{< color-preview nameL=" " hexL="#e0e1e9" nameD=" " hexD="#353a40" >}} |
{class="table table-sm table-bordered border border-opacity-50" id="table-colors"}
Expand Down

0 comments on commit e2bcba3

Please sign in to comment.