Copy environment

Status

Success 

<div class="status status--type-success">
    <span class="status__bullet"></span>
    <span class="status__text">Kinnitatud</span>
</div>
 
{% set BEM -%}
    status
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.type %} status--type-{{ data.type }}{% endif %}
{%- endset %}
<div class="{{ BEM }}">
    <span class="status__bullet"></span>
    <span class="status__text">{{ data.text }}</span>
</div>

{
  "language": "en-US",
  "data": {
    "text": "Kinnitatud",
    "type": "success"
  }
}
  • Content: 
    .status {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px 3px 9px;
    border-radius: 100px;
    border: 1px solid;
    max-width: 145px;
}

.status--type-success {
    background: $L-status-success-bg;
    border-color: $L-status-success-border;
}

.status--type-error {
    background: $L-status-error-bg;
    border-color: $L-status-error-border;
}

.status--type-info {
    background: $L-status-info-bg;
    border-color: $L-status-info-border;
}

.status--type-inactive {
    background: $L-status-inactive-bg;
    border-color: $L-status-inactive-border;
}

.status--type-pending {
    background: $L-status-pending-bg;
    border-color: $L-status-pending-border;
}

.status__bullet {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: $border-radius-round;

    .status--type-success & {
        background: $L-status-success-bullet;
    }

    .status--type-error & {
        background: $L-status-error-bullet;
    }

    .status--type-info & {
        background: $L-status-info-bullet;
    }

    .status--type-inactive & {
        background: $L-status-inactive-bullet;
    }

    .status--type-pending & {
        background: $L-status-pending-bullet;
    }
}

.status__text {
    color: $L-status-text;
    font-size: $font-size-small;
    font-weight: $font-weight-regular;
    letter-spacing: $letter-spacing-50;
    line-height: 1.14;
    text-align: left;
}
  • URL: /components/raw/status/status.scss
  • Filesystem Path: src/patterns/components/status/status.scss
  • Size: 1.5 KB
  • Handle: @status--success
  • Filesystem Path: src/patterns/components/status/status.twig

Error 

<div class="status status--type-error">
    <span class="status__bullet"></span>
    <span class="status__text">Kinnituse ootel</span>
</div>
 
{% set BEM -%}
    status
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.type %} status--type-{{ data.type }}{% endif %}
{%- endset %}
<div class="{{ BEM }}">
    <span class="status__bullet"></span>
    <span class="status__text">{{ data.text }}</span>
</div>

{
  "language": "en-US",
  "data": {
    "text": "Kinnituse ootel",
    "type": "error"
  }
}
  • Content: 
    .status {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px 3px 9px;
    border-radius: 100px;
    border: 1px solid;
    max-width: 145px;
}

.status--type-success {
    background: $L-status-success-bg;
    border-color: $L-status-success-border;
}

.status--type-error {
    background: $L-status-error-bg;
    border-color: $L-status-error-border;
}

.status--type-info {
    background: $L-status-info-bg;
    border-color: $L-status-info-border;
}

.status--type-inactive {
    background: $L-status-inactive-bg;
    border-color: $L-status-inactive-border;
}

.status--type-pending {
    background: $L-status-pending-bg;
    border-color: $L-status-pending-border;
}

.status__bullet {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: $border-radius-round;

    .status--type-success & {
        background: $L-status-success-bullet;
    }

    .status--type-error & {
        background: $L-status-error-bullet;
    }

    .status--type-info & {
        background: $L-status-info-bullet;
    }

    .status--type-inactive & {
        background: $L-status-inactive-bullet;
    }

    .status--type-pending & {
        background: $L-status-pending-bullet;
    }
}

.status__text {
    color: $L-status-text;
    font-size: $font-size-small;
    font-weight: $font-weight-regular;
    letter-spacing: $letter-spacing-50;
    line-height: 1.14;
    text-align: left;
}
  • URL: /components/raw/status/status.scss
  • Filesystem Path: src/patterns/components/status/status.scss
  • Size: 1.5 KB
  • Handle: @status--error
  • Filesystem Path: src/patterns/components/status/status.twig

Info 

<div class="status status--type-info">
    <span class="status__bullet"></span>
    <span class="status__text">Koostamisel</span>
</div>
 
{% set BEM -%}
    status
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.type %} status--type-{{ data.type }}{% endif %}
{%- endset %}
<div class="{{ BEM }}">
    <span class="status__bullet"></span>
    <span class="status__text">{{ data.text }}</span>
</div>

{
  "language": "en-US",
  "data": {
    "text": "Koostamisel",
    "type": "info"
  }
}
  • Content: 
    .status {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px 3px 9px;
    border-radius: 100px;
    border: 1px solid;
    max-width: 145px;
}

.status--type-success {
    background: $L-status-success-bg;
    border-color: $L-status-success-border;
}

.status--type-error {
    background: $L-status-error-bg;
    border-color: $L-status-error-border;
}

.status--type-info {
    background: $L-status-info-bg;
    border-color: $L-status-info-border;
}

.status--type-inactive {
    background: $L-status-inactive-bg;
    border-color: $L-status-inactive-border;
}

.status--type-pending {
    background: $L-status-pending-bg;
    border-color: $L-status-pending-border;
}

.status__bullet {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: $border-radius-round;

    .status--type-success & {
        background: $L-status-success-bullet;
    }

    .status--type-error & {
        background: $L-status-error-bullet;
    }

    .status--type-info & {
        background: $L-status-info-bullet;
    }

    .status--type-inactive & {
        background: $L-status-inactive-bullet;
    }

    .status--type-pending & {
        background: $L-status-pending-bullet;
    }
}

.status__text {
    color: $L-status-text;
    font-size: $font-size-small;
    font-weight: $font-weight-regular;
    letter-spacing: $letter-spacing-50;
    line-height: 1.14;
    text-align: left;
}
  • URL: /components/raw/status/status.scss
  • Filesystem Path: src/patterns/components/status/status.scss
  • Size: 1.5 KB
  • Handle: @status--info
  • Filesystem Path: src/patterns/components/status/status.twig

Inactive 

<div class="status status--type-inactive">
    <span class="status__bullet"></span>
    <span class="status__text">Tagasi lükatud</span>
</div>
 
{% set BEM -%}
    status
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.type %} status--type-{{ data.type }}{% endif %}
{%- endset %}
<div class="{{ BEM }}">
    <span class="status__bullet"></span>
    <span class="status__text">{{ data.text }}</span>
</div>

{
  "language": "en-US",
  "data": {
    "text": "Tagasi lükatud",
    "type": "inactive"
  }
}
  • Content: 
    .status {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px 3px 9px;
    border-radius: 100px;
    border: 1px solid;
    max-width: 145px;
}

.status--type-success {
    background: $L-status-success-bg;
    border-color: $L-status-success-border;
}

.status--type-error {
    background: $L-status-error-bg;
    border-color: $L-status-error-border;
}

.status--type-info {
    background: $L-status-info-bg;
    border-color: $L-status-info-border;
}

.status--type-inactive {
    background: $L-status-inactive-bg;
    border-color: $L-status-inactive-border;
}

.status--type-pending {
    background: $L-status-pending-bg;
    border-color: $L-status-pending-border;
}

.status__bullet {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: $border-radius-round;

    .status--type-success & {
        background: $L-status-success-bullet;
    }

    .status--type-error & {
        background: $L-status-error-bullet;
    }

    .status--type-info & {
        background: $L-status-info-bullet;
    }

    .status--type-inactive & {
        background: $L-status-inactive-bullet;
    }

    .status--type-pending & {
        background: $L-status-pending-bullet;
    }
}

.status__text {
    color: $L-status-text;
    font-size: $font-size-small;
    font-weight: $font-weight-regular;
    letter-spacing: $letter-spacing-50;
    line-height: 1.14;
    text-align: left;
}
  • URL: /components/raw/status/status.scss
  • Filesystem Path: src/patterns/components/status/status.scss
  • Size: 1.5 KB
  • Handle: @status--inactive
  • Filesystem Path: src/patterns/components/status/status.twig

Pending 

<div class="status status--type-pending">
    <span class="status__bullet"></span>
    <span class="status__text">Allkirja ootel</span>
</div>
 
{% set BEM -%}
    status
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.type %} status--type-{{ data.type }}{% endif %}
{%- endset %}
<div class="{{ BEM }}">
    <span class="status__bullet"></span>
    <span class="status__text">{{ data.text }}</span>
</div>

{
  "language": "en-US",
  "data": {
    "text": "Allkirja ootel",
    "type": "pending"
  }
}
  • Content: 
    .status {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px 3px 9px;
    border-radius: 100px;
    border: 1px solid;
    max-width: 145px;
}

.status--type-success {
    background: $L-status-success-bg;
    border-color: $L-status-success-border;
}

.status--type-error {
    background: $L-status-error-bg;
    border-color: $L-status-error-border;
}

.status--type-info {
    background: $L-status-info-bg;
    border-color: $L-status-info-border;
}

.status--type-inactive {
    background: $L-status-inactive-bg;
    border-color: $L-status-inactive-border;
}

.status--type-pending {
    background: $L-status-pending-bg;
    border-color: $L-status-pending-border;
}

.status__bullet {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: $border-radius-round;

    .status--type-success & {
        background: $L-status-success-bullet;
    }

    .status--type-error & {
        background: $L-status-error-bullet;
    }

    .status--type-info & {
        background: $L-status-info-bullet;
    }

    .status--type-inactive & {
        background: $L-status-inactive-bullet;
    }

    .status--type-pending & {
        background: $L-status-pending-bullet;
    }
}

.status__text {
    color: $L-status-text;
    font-size: $font-size-small;
    font-weight: $font-weight-regular;
    letter-spacing: $letter-spacing-50;
    line-height: 1.14;
    text-align: left;
}
  • URL: /components/raw/status/status.scss
  • Filesystem Path: src/patterns/components/status/status.scss
  • Size: 1.5 KB
  • Handle: @status--pending
  • Filesystem Path: src/patterns/components/status/status.twig