Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updates Labels for forms and Alerts styles #872

Merged
merged 5 commits into from
Jun 26, 2024
Merged

Updates Labels for forms and Alerts styles #872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eed50c2
Updates Labels for forms and Alerts styles
coliff Jun 26, 2024
bf55de1
Update styles.scss
coliff Jun 26, 2024
e0c5dee
Update styles.md
coliff Jun 26, 2024
616073b
Update styles.md
coliff Jun 26, 2024
8e53a14
Update _index.md
coliff Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 16 additions & 0 deletions assets/styles/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,3 +120,19 @@ input[type="search"]::-webkit-search-cancel-button {
.nav-tabs {
--bs-nav-tabs-border-radius: 0.25rem;
}

[data-bs-theme="light"] .alert-danger i.modus-icons {
color: var(--bs-danger);
}

[data-bs-theme="light"] .alert-primary i.modus-icons {
color: var(--bs-primary);
}

[data-bs-theme="light"] .alert-success i.modus-icons {
color: var(--bs-success);
}

[data-bs-theme="light"] .alert-warning i.modus-icons {
color: var(--bs-warning);
}
10 changes: 6 additions & 4 deletions content/components/web/alerts/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,16 @@ Alerts display in direct response to a user action (e.g. clicking the Submit but
<tr>
<td style="line-height: 1.25" scope="row">
<div class="border">
<div class="alert alert-danger d-flex align-items-center mx-3 mt-3 mb-0" role="alert">
<i class="modus-icons alert-icon me-2" aria-hidden="true">warning</i>
<div class="alert alert-danger d-flex align-items-center mx-3 mt-3 mb-0 alert-dismissible fade show" role="alert">
<i class="modus-icons alert-icon me-2" aria-hidden="true">alert</i>
<div>Error! Your username and password were incorrect</div>
<button type="button" class="btn-close" aria-label="Close">
</button>
</div>
<div class="p-3">
<form>
<div class="form-group mb-3">
<label for="exampleInputEmail1">Email address</label>
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input
type="email"
class="form-control"
Expand All @@ -49,7 +51,7 @@ Alerts display in direct response to a user action (e.g. clicking the Submit but
/>
</div>
<div class="form-group mb-3">
<label for="exampleInputPassword1">Password</label>
<label for="exampleInputPassword1" class="form-label">Password</label>
<input
type="password"
class="form-control"
Expand Down
65 changes: 22 additions & 43 deletions content/components/web/alerts/styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,31 @@ popoverCSSInspector: true

## Specifications

- Container (Height: 56px; Radius: 2px; <span class="theme-l">background-color: white;</span> 1px border, 8px indicator line same color as border on the left; Padding: 16px; Margin: 16px) _required_
- Container (Height: 56px; Radius: 2px; 1px border, 12px indicator line same color as border on the left; Padding: 16px; Margin: 16px) _required_
- Alert text (Font: Open Sans Bold 14px) _required_
- Leading Non-Interactive Icon/ Charm (16x16px) _optional_
- Button (text only, right aligned) or trailing close icon (16px16px) _optional_
- Button (text only, right aligned) or trailing close icon (16px16px)
- Link (underlined, only one per alert) _optional_

<div class="p-5 my-3 pr-5 bg-dark bg-opacity-10">
<br />
<br />
<div
class="alert alert-success d-flex align-items-center bg-white"
class="alert alert-success d-flex align-items-center alert-dismissible fade show"
style="max-width: 460px; height: 56px"
role="alert"
data-bs-toggle="popover"
data-bs-placement="right"
data-bs-custom-class="popover-css-inspector"
data-css-inspector-hide="b-width margin width"
data-css-inspector-show="b-color b-width b-left-width "
data-bs-container="td">
data-css-inspector-show="b-color b-width b-left-width"
data-bs-container="main">
<i class="modus-icons notranslate alert-icon me-2" aria-hidden="true">
check_circle
</i>
<div>You have completed a task.</div>
<button type="button" class="btn-close" aria-label="Close">
</button>
</div>
<br />
</div>
Expand All @@ -65,77 +67,54 @@ document.addEventListener('DOMContentLoaded', function() {
### Examples

<style>
[data-bs-theme=light] .alert {
background-color: white !important;
}
.bg-light .alert {
max-width: 600px;
}
.css-max-width {
display: none;
}
[data-bs-theme=dark] .popover-body .theme-d {
[data-bs-theme="dark"] .popover-body .theme-d {
display: inline-block !important;
}
[data-bs-theme=dark] code {
[data-bs-theme="dark"] code {
filter: brightness(250%);
}
</style>

<div class="bg-secondary bg-opacity-10">
<div class="p-3 p-xl-4 px-xl-5 mx-4">
<div class="alert alert-primary d-flex align-items-center" role="alert">
<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
<i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">info</i>
<div>
An example alert with an icon
</div>
<button type="button" class="btn-close" aria-label="Close">
</button>
</div>
<div class="alert alert-secondary d-flex align-items-center py-2" role="alert">
<i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">help</i>
<div>A basic secondary alert with a button</div>
<div class="ms-auto">
<a href="#" class="btn-text-primary">Button</a>
</div>
</div>
<div class="alert alert-dark d-flex align-items-center" role="alert">
<i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">info</i>
<div>A basic dark alert with a <a href="#examples">link</a></div>
</div>
<div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
<i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">check_circle</i>
<div>Success! A basic success alert with a dismiss icon</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
<div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
<i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">warning</i>
<div> Error! A basic error alert with a dismiss icon</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<button type="button" class="btn-close" aria-label="Close">
</button>
</div>
<div class="alert alert-warning d-flex align-items-center alert-dismissible fade show" role="alert">
<i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">alert_outlined</i>
<i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">warning</i>
<div>Warning! A basic warning alert with a dismiss icon</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<button type="button" class="btn-close" aria-label="Close">
</button>
</div>
<div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
<i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">alert</i>
<div> Error! A basic error alert with a dismiss icon</div>
<button type="button" class="btn-close" aria-label="Close">
</button>
</div>
</div>
</div>

### Colors

<!-- prettier-ignore-start -->
| Element | Property | Color |
| --------- | ---------- | ---------------------------------------------------------------------------------- |
| Primary | Color | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD=" " hexD="#ffffff" >}} |
| | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#0063a380" >}} |
| | Border | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD=" " hexD="#019AEB" >}} |
| Secondary | Color | {{< color-preview nameL="Gray 6" hexL="#6a6e79" nameD=" " hexD="#ffffff" >}} |
| | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#6a6e7980" >}} |
| | Border | {{< color-preview nameL="Gray 8" hexL="#464B52" nameD=" " hexD="#6a6e79" >}} |
| Dark | Color | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD=" " hexD="#ffffff" >}} |
| | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#171c1e80" >}} |
| | Border | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD=" " hexD="#464b52" >}} |
| Success | Color | {{< color-preview nameL="Green Dark" hexL="#006638" nameD=" " hexD="#ffffff" >}} |
| | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#1e8a4480" >}} |
| | Border | {{< color-preview nameL="Green Dark" hexL="#006638" nameD=" " hexD="#1e8a44" >}} |
Expand All @@ -145,7 +124,7 @@ document.addEventListener('DOMContentLoaded', function() {
| Warning | Color | {{< color-preview nameL="Trimble Gray" hexL="#252A2E" nameD=" " hexD="#ffffff" >}} |
| | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#fbad2680" >}} |
| | Border | {{< color-preview nameL="Yellow Dark" hexL="#e49325" nameD=" " hexD="#fbad26" >}} |
{class="table table-sm table-bordered border border-opacity-50"}
{class="table table-sm table-bordered border border-opacity-50 d-none"}
<!-- prettier-ignore-end -->

### Behaviors
Expand Down
4 changes: 2 additions & 2 deletions content/components/web/rich-text-format-editor/styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,11 +169,11 @@ The modals consists of following elements:
</div>
<div class="modal-body">
<div class="form-group mb-3">
<label for="inputText">Text <span class="text-danger">*</span></label>
<label for="inputText" class="form-label">Text <span class="text-danger">*</span></label>
<input class="form-control my-1" placeholder="Enter text" type="text" id="inputText" required />
</div>
<div class="form-group mb-3">
<label for="inputUrl">URL <span class="text-danger">*</span></label>
<label for="inputUrl" class="form-label">URL <span class="text-danger">*</span></label>
<input class="form-control my-1" placeholder="Placeholder text" type="url" id="inputUrl" required />
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "6.0.0",
"@trimble-oss/modus-bootstrap": "2.0.0-alpha32",
"@trimble-oss/modus-bootstrap": "2.0.0-alpha33",
"@trimble-oss/modus-icons": "1.14.0",
"autoprefixer": "10.4.19",
"bootstrap-print-css": "1.0.1",
"cross-env": "7.0.3",
"htmlhint": "1.1.4",
"hugo-bin": "0.124.0",
"hugo-bin": "0.125.0",
"list.js": "2.3.1",
"npm-run-all": "4.1.5",
"popover-css-inspector": "1.0.0-beta14",
Expand Down