Shipyard Statuses

X-Small Status Icons .status-xs

Useful in tight spaces where it’s still important to show status, but not important enough to compete for attention with other elements on the page.

<!-- Status: Skipped -->
<span class="status status-xs status-skipped">
  <%= icon :skipped, prefix: 'status-xs', class: 'status-icon' %>
</span>
<span class="text-skipped">Skipped</span>

<!-- Status: Waiting -->
<span class="status status-xs status-waiting">
  <%= icon :waiting, prefix: 'status-xs', class: 'status-icon' %>
</span>
<span class="text-waiting">Waiting</span>

<!-- Status: Running -->
<span class="status status-xs status-running">
  <%= icon :running, prefix: 'status-xs', class: 'status-icon' %>
</span>
<span class="text-running">Running</span>

<!-- Status: Success -->
<span class="status status-xs status-success">
  <%= icon :success, prefix: 'status-xs', class: 'status-icon' %>
</span>
<span class="text-success">Success</span>

<!-- Status: Paused -->
<span class="status status-xs status-paused">
  <%= icon :paused, prefix: 'status-xs', class: 'status-icon' %>
</span>
<span class="text-paused">Paused</span>

<!-- Status: Error -->
<span class="status status-xs status-error">
  <%= icon :error_xs, prefix: 'status-xs', class: 'status-icon' %>
</span>
<span class="text-error">Error</span>

<!-- Status: Fail -->
<span class="status status-xs status-fail">
  <%= icon :fail, prefix: 'status-xs', class: 'status-icon' %>
</span>
<span class="text-fail">Fail</span>

Small Status Icons .status-sm

Useful when next to standard text where where it’s important to show the status of a particular object.

<!-- Status: Skipped -->
<span class="status status-sm status-skipped">
  <%= icon :skipped, prefix: 'status-sm', class: 'status-icon' %>
</span>
<span class="text-skipped">Skipped</span>

<!-- Status: Waiting -->
<span class="status status-sm status-waiting">
  <%= icon :waiting, prefix: 'status-sm', class: 'status-icon' %>
</span>
<span class="text-waiting">Waiting</span>

<!-- Status: Running -->
<span class="status status-sm status-running">
  <%= icon :running, prefix: 'status-sm', class: 'status-icon' %>
</span>
<span class="text-running">Running</span>

<!-- Status: Success -->
<span class="status status-sm status-success">
  <%= icon :success, prefix: 'status-sm', class: 'status-icon' %>
</span>
<span class="text-success">Success</span>

<!-- Status: Paused -->
<span class="status status-sm status-paused">
  <%= icon :paused, prefix: 'status-sm', class: 'status-icon' %>
</span>
<span class="text-paused">Paused</span>

<!-- Status: Error -->
<span class="status status-sm status-error">
  <%= icon :error_xs, prefix: 'status-sm', class: 'status-icon' %>
</span>
<span class="text-error">Error</span>

<!-- Status: Fail -->
<span class="status status-sm status-fail">
  <%= icon :fail, prefix: 'status-sm', class: 'status-icon' %>
</span>
<span class="text-fail">Fail</span>

Medium Status Icons .status-md

Useful when next to standard text where where it’s important to show the status of a particular object.

<span class="status status-md status-skipped">
  <%= icon :skipped, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-md status-waiting">
  <%= icon :waiting, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-md status-running">
  <%= icon :running, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-md status-success">
  <%= icon :success, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-md status-paused">
  <%= icon :paused, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-md status-error">
  <%= icon :error, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-md status-fail">
  <%= icon :fail, prefix: 'status-md', class: 'status-icon' %>
</span>

Medium, Inverse Status Icons .status-inverse.status-md

Useful when next to standard text where where it’s important to show the status of a particular object.

<span class="status status-inverse status-md status-skipped">
  <%= icon :skipped, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-inverse status-md status-waiting">
  <%= icon :waiting, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-inverse status-md status-running">
  <%= icon :running, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-inverse status-md status-success">
  <%= icon :success, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-inverse status-md status-paused">
  <%= icon :paused, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-inverse status-md status-error">
  <%= icon :error, prefix: 'status-md', class: 'status-icon' %>
</span>

<span class="status status-inverse status-md status-fail">
  <%= icon :fail, prefix: 'status-md', class: 'status-icon' %>
</span>

Large Status Icons .status-lg

Useful when next to standard text where where it’s important to show the status of a particular object.

<span class="status status-lg status-skipped">
  <%= icon :skipped, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-lg status-waiting">
  <%= icon :waiting, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-lg status-running">
  <%= icon :running, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-lg status-success">
  <%= icon :success, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-lg status-paused">
  <%= icon :paused, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-lg status-error">
  <%= icon :error, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-lg status-fail">
  <%= icon :fail, prefix: 'status-lg', class: 'status-icon' %>
</span>

Large, Inverse Status Icons .status-inverse.status-lg

Useful when next to standard text where where it’s important to show the status of a particular object.

<span class="status status-inverse status-lg status-skipped">
  <%= icon :skipped, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-inverse status-lg status-waiting">
  <%= icon :waiting, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-inverse status-lg status-running">
  <%= icon :running, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-inverse status-lg status-success">
  <%= icon :success, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-inverse status-lg status-paused">
  <%= icon :paused, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-inverse status-lg status-error">
  <%= icon :error, prefix: 'status-lg', class: 'status-icon' %>
</span>

<span class="status status-inverse status-lg status-fail">
  <%= icon :fail, prefix: 'status-lg', class: 'status-icon' %>
</span>

X-Large Status Icons .status-xl

Useful when next to standard text where where it’s important to show the status of a particular object.

<span class="status status-xl status-skipped">
  <%= icon :skipped, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-xl status-waiting">
  <%= icon :waiting, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-xl status-running">
  <%= icon :running, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-xl status-success">
  <%= icon :success, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-xl status-paused">
  <%= icon :paused, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-xl status-error">
  <%= icon :error, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-xl status-fail">
  <%= icon :fail, prefix: 'status-xl', class: 'status-icon' %>
</span>

X-Large, Inverse Status Icons .status-inverse.status-xl

Useful when next to standard text where where it’s important to show the status of a particular object.

<span class="status status-inverse status-xl status-skipped">
  <%= icon :skipped, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-inverse status-xl status-waiting">
  <%= icon :waiting, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-inverse status-xl status-running">
  <%= icon :running, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-inverse status-xl status-success">
  <%= icon :success, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-inverse status-xl status-paused">
  <%= icon :paused, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-inverse status-xl status-error">
  <%= icon :error, prefix: 'status-xl', class: 'status-icon' %>
</span>

<span class="status status-inverse status-xl status-fail">
  <%= icon :fail, prefix: 'status-xl', class: 'status-icon' %>
</span>

Utility CSS

.status { top: -1px; position: relative; display: inline-block; color: #788594; border: 2px solid #788594; border-radius: 50%; vertical-align: middle; background-clip: border-box }
.status-skipped-bg { background-color: #788594 }
.status-waiting.status-xs::after,
.status-waiting.status-sm::after,
.status-running.status-xs::after,
.status-running.status-sm::after { top: -2px; left: -2px; right: -2px; bottom: -2px; content: ''; display: block; position: absolute; border-radius: 50%; border: 2px solid transparent; animation: fade 1s linear 0s infinite alternate }
.status-waiting { color: #1ca1e3; border-color: #1ca1e3 }
.status-waiting-bg { background-color: #1ca1e3 }
.status-waiting.status-md:not(.status-inverse) { color: #fff; background-color: #1ca1e3 }
.status-waiting.status-xs::after,
.status-waiting.status-sm::after { border-color: #a0d6f0 }
.status-running { color: #20a5a8; border-color: rgba(89,123,145,0.24) }
.status-running-bg { background-color: #20a5a8 }
.status-running.status-xs,
.status-running.status-sm { border-color: #6ab7b9 }
.status-running.status-xs::after,
.status-running.status-sm::after { background-color: #20a5a8 }
.status-running.status-inverse { color: #fff; border-color: rgba(255,255,255,0.3); background-color: transparent }
.status-paused { color: #e2a000; border-color: #e2a000 }
.status-paused-bg { background-color: #e2a000 }
.status-paused.status-md:not(.status-inverse) { color: #fff; background-color: #e2a000 }
.status-paused.status-xs,
.status-paused.status-sm { border-color: transparent; background-color: transparent }
.status-success { color: #33c474; border-color: #33c474 }
.status-success,
.status-success-bg { background-color: #33c474 }
.status-success.status-xs,
.status-success.status-sm { border-color: transparent; background-color: transparent }
.status-fail { color: #e06158; border-color: #e06158 }
.status-fail,
.status-fail-bg { background-color: #e06158 }
.status-fail.status-xs,
.status-fail.status-sm { border-color: transparent; background-color: transparent }
.status-error { color: #d6863f; border-color: #d6863f }
.status-error,
.status-error-bg { background-color: #d6863f }
.status-error.status-xs,
.status-error.status-sm { border-color: transparent; background-color: transparent }
.status-success.status-md:not(.status-inverse),
.status-fail.status-md:not(.status-inverse),
.status-error.status-md:not(.status-inverse) { color: #fff }
.status-inverse { border-color: #fff }
.status-inverse.status-md:not(.status-running) { background-color: #fff }
.status-inverse.status-lg,
.status-inverse.status-xl { color: #fff }
.status-xs { width: 6px; height: 6px }
.status-sm { width: 8px; height: 8px }
.status-md { width: 14px; height: 14px }
.status-lg { width: 22px; height: 22px; background-color: transparent }
.status-xl { width: 32px; height: 32px; background-color: transparent }
.status-icon { top: 50%; left: 50%; position: absolute }
.status-xs-icon { margin: -2px 0 0 -2px; width: 4px; height: 4px }
.status-xs-icon-skipped,
.status-xs-icon-waiting,
.status-xs-icon-running { display: none }
.status-xs-icon-error-xs { fill: #d6863f }
.status-sm-icon { margin: -3px 0 0 -3px; width: 6px; height: 6px }
.status-sm-icon-skipped,
.status-sm-icon-waiting,
.status-sm-icon-running { display: none }
.status-sm-icon-error-xs { fill: #d6863f }
.status-md-icon { margin: -2px 0 0 -2px; width: 4px; height: 4px }
.status-md-icon-skipped { margin-left: 0; transform: translatex(-0.8px) }
.status-md-icon-waiting { stroke-width: 1.5; width: 6px; height: 2px; margin: 0 0 0 -3px; transform: translatey(-0.5px) }
.status-md-icon-running { width: 12px; height: 12px; margin: -6px 0 0 -6px }
.status-md-icon-success { margin-top: 0; transform: translatey(-1.7px) }
.status-md-icon-error { width: 2px; height: 6px; margin: -3px 0 0 -1px }
.status-lg-icon { margin: -3px 0 0 -3px; width: 6px; height: 6px }
.status-lg-icon-skipped { width: 3px; margin-left: -1px }
.status-lg-icon-waiting { width: 10px; height: 2px; margin: -1px 0 0 -5px }
.status-lg-icon-running { width: 20px; height: 20px; margin: -10px 0 0 -10px }
.status-lg-icon-success { margin-top: -2px }
.status-lg-icon-error { width: 4px; height: 8px; margin: -4px 0 0 -1px }
.status-xl-icon { width: 8px; height: 8px; margin: -4px 0 0 -4px }
.status-xl-icon-skipped { width: 4px; margin-left: -1px }
.status-xl-icon-waiting { width: 12px; height: 2px; margin: -1px 0 0 -6px }
.status-xl-icon-running { width: 30px; height: 30px; margin: -15px 0 0 -15px }
.status-xl-icon-success { margin-top: -3px }
.status-xl-icon-error { width: 4px; height: 10px; margin: -5px 0 0 -1px }
.text-skipped { color: #788594 }
.text-waiting { color: #1ca1e3 }
.text-running { color: #20a5a8 }
.text-paused { color: #e2a000 }
.text-success { color: #33c474 }
.text-fail { color: #e06158 }
.text-error { color: #d6863f }