chattigo-webkit 1.28.0

.u-text-body [deprecated]

scss 
.u-text-body {
  @include use-font('body', 'regular');
  color: use-color('base', 'black');
}

Clase de ayuda para que el contenido tenga los atributos usados en los textos del tipo body.

DEPRECATED:

use .u-text__body instead.

Example

html 
<p class="u-text-body">
  Body Text
</p>

Requires

@mixin use-font()

.u-text--right-align [deprecated]

scss 
.u-text--right-align {
  text-align: right;
}

Clase de ayuda para alinear los textos a la derecha.

DEPRECATED:

use .u-text–align-right instead.

Example

html 
<p class="u-text--right-align">
  Right Align Text
</p>

Requires

@mixin use-font()

.u-text

scss 
.u-text {
  color: use-color('base', 'black');

  @include element('h3') {
    @include use-font('h3');
  }

  @include element('body') {
    @include use-font('body');
  }
  
  @include element('body-alt') {
    @include use-font('body-alt');
  }

  @include element('subheading') {
    @include use-font('subheading');
  }

  @include element('caption') {
    @include use-font('caption');
  }

  @include modifier('align-center') {
    text-align: center;
  }
  
  @include modifier('align-right') {
    text-align: right;
  }
  
  @include modifier('align-left') {
    text-align: left;
  }

  @include modifier('uppercase') {
    text-transform: uppercase;
  }

  @include modifier('hint') {
    color: use-color('grey', 'light');
    line-height: 14px;
    margin: 0;
  }

  @include modifier('bold') {
    font-weight: 600;
  }
  
  @include modifier('semibold') {
    font-weight: 500;
  }
}

El bloque u-text contiene elementos por cada tipo de fuente, junto a modificadores para alinear el contenido y estilos de texto.

  • fonts elements:
    • body
    • subheading
    • caption
  • align modifiers:
    • align-center
    • align-right
    • align-left
  • style modifier:
    • hint

Examples

html subheading 
<p class="u-text__subheading u-text--align-center">
  Subheading size - Center Align Text
</p>
html body - uppercase 
<p class="u-text__body u-text--align-left u-text--uppercase">
  Body size - Left Align Text
</p>
html caption - hint style 
<p class="u-text__caption u-text--hint">
  Caption size - hint style
</p>

Requires

@mixin use-font()

.u-word-counter

scss 
.u-word-counter {
  @include use-font('caption');
  align-self: flex-start;
  color: use-color('event', 'error');
  padding-left: 2px;
}

Estilos para contadores de letras en inputs.

Example

html 
<span class="u-word-counter">
  0/1500
</span>

.u-word-counter

scss 
.u-word-counter {
  @include use-font('caption');
  align-self: flex-start;
  color: use-color('event', 'error');
  padding-left: 2px;
}

Estilos para contadores de letras en inputs.

Example

html 
<span class="u-word-counter">
  0/1500
</span>

.u-icon

scss 
.u-icon {
  @include element('message-action') {
    color: use-color('secondary');
    font-size: 19px;
    text-decoration: none;
  }
}

Estilos para los iconos de acciones.

Example

html 
<div class="u-icon__message-action">
  <span class="icon-edit-font"></span>
</div>