mirror of https://github.com/Budibase/budibase.git
nocodelowcodelow-codedockerdocker-composeinternal-projectinternal-toolinternal-toolslow-code-developmentlow-code-development-platformopensourceselfhostedweb-devweb-developmentweb-development-toolswebdevwebdevelopmentworkflow-automationautomationdeveloper-tools
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
3.9 KiB
86 lines
3.9 KiB
name: Status Light
|
|
SpectrumSiteSlug: https://spectrum.adobe.com/page/status-light/
|
|
sections:
|
|
- name: Migration Guide
|
|
description: |
|
|
### T-shirt sizing
|
|
Status Light now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-StatusLight--size*` class.
|
|
examples:
|
|
- id: statuslight
|
|
name: Sizing
|
|
status: Verified
|
|
markup: |
|
|
<div class="spectrum-Examples">
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
|
|
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--info">Small</div>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
|
|
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeM spectrum-StatusLight--info">Medium</div>
|
|
</div>
|
|
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
|
|
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeL spectrum-StatusLight--info">Large</div>
|
|
</div>
|
|
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
|
|
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeXL spectrum-StatusLight--info">Extra Large</div>
|
|
</div>
|
|
</div>
|
|
- id: statuslight
|
|
name: Colors
|
|
status: Verified
|
|
markup: |
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--celery">Celery Status</div>
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--yellow">Yellow Status</div>
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--fuchsia">Fuchsia Status</div>
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--indigo">Indigo Status</div>
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--seafoam">Seafoam Status</div>
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--chartreuse">Chartreuse Status</div>
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--magenta">Magenta Status</div>
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--purple">Purple Status</div>
|
|
- id: statuslight-neutral
|
|
name: Neutral
|
|
status: Verified
|
|
markup: |
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--neutral">Paused</div>
|
|
- id: statuslight-info
|
|
name: Info
|
|
status: Verified
|
|
markup: |
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--info">Active</div>
|
|
- id: statuslight-positive
|
|
name: Positive
|
|
status: Verified
|
|
markup: |
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--positive">Approved</div>
|
|
- id: statuslight-notice
|
|
name: Notice
|
|
status: Verified
|
|
markup: |
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--notice">Needs Approval</div>
|
|
- id: statuslight-negative
|
|
name: Negative
|
|
status: Verified
|
|
markup: |
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--negative">Rejected</div>
|
|
- id: statuslight
|
|
name: Disabled
|
|
status: Verified
|
|
description: The disabled state of Status Light.
|
|
markup: |
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS is-disabled">Disabled</div>
|
|
- id: statuslight-active
|
|
name: Active
|
|
status: Deprecated
|
|
details: Use the `info` variant instead
|
|
description: The active variant of Status Light
|
|
markup: |
|
|
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--active">Active</div>
|
|
|