.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('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>