@red-unica/libreria-estilos-desempenio

v1.3.2

Published

6 days ago

Libreria para componentes de estilos de desempeño

0High
0Medium
0Low

red-unica

Librería de estilos genéricos Red Única

Archivos SASS genéricos de Red Única.

Instalación

  npm install --save @red-unica/libreria-estilos-desempenio

Uso

importar en el archivo principal del proyecto movil: import '../../node_modules/@red-unica/libreria-estilos-desempenio/src/principalMovil.scss';
importar en el archivo principal del proyecto de PC o tableta: import '../../node_modules/@red-unica/libreria-estilos-desempenio/src/principal.scss';

Clases

contenido-transicion: Clase que realiza la transicion de mostrar u ocultar bloques, como se muestra en el ejemplo.
- ejemplo:
  - .js
    - <div className={contenido-transicion ${desplegar ? 'mostrar' : 'ocultar'}}> {contenido} </div>
  - .scss
    - &>div{ &>. {scss de contenido} }

Encabezados (h)

| Nomenclatura | pixeles | Variante | |---------------|----------|----------| | h1 | 30px | bold | | h2 | 28px | bold | | h3 | 24px | bold | | h4 | 22px | bold | | h5 | 18px | bold | | h6 | 16px | bold |

Subtitulos (subtitulo)

| Nomenclatura | pixeles | Variante | |------------------|----------|-------------| | subtitulo-1 | 24px | Semibold | | subtitulo-2 | 22px | Semibold | | subtitulo-3 | 20px | Semibold | | subtitulo-4 | 18px | Semibold | | subtitulo-5 | 16px | Semibold | | subtitulo-6 | 14px | Semibold |

Cuerpo (cuerpo-upax)

| Nomenclatura | pixeles | Variante | |--------------------|----------|-------------| | cuerpo-upax-1 | 20px | bold/500 | | cuerpo-upax-2 | 18px | Medium | | cuerpo-upax-3 | 16px | Regular | | cuerpo-upax-4 | 14px | Regular | | cuerpo-upax-5 | 12px | Regular | | cuerpo-upax-3b | 16px | bold | | cuerpo-upax-4b | 14px | bold/400 | | cuerpo-upax-4c | 14px | bold | | cuerpo-upax-5b | 12px | bold/400 | | cuerpo-upax-5c | 12px | bold | | cuerpo-upax-5d | 12px | semibold | | cuerpo-upax-5e | 10px | medium |

Leyenda (leyenda)

| Nomenclatura | pixeles | Variante | |--------------------|----------|-------------| | leyenda-upax-1 | 12px | Medium | | leyenda-upax-2 | 12px | Regular |

Boton (button)

| Nomenclatura | pixeles | Variante | |-------------------|-----------|-----------------| | button-l | 14px | Semibold/500 | | button-m | 14px | Medium | | button-p | 14px | Regular/400 |

Colores

$color-1: #3AA925;
$color-2: #D1D1D1.
$color-3: #F9F9FD.
$color-4: #E8F1EE.
$color-5: #9F9CAB.
$color-6: #525F7F.
$color-7: #ECF1F8.
$color-8: #393648.
$color-9: #EEF9F3.
$color-10: #EAE9EB.
$color-11: #FFFFFE.
$color-12: #DA291C.
$color-13: #FFCE4F.
$color-14: #056341;
$color-15: #DFE5ED;
$color-16: #9AA3B2;
$color-17: #F6F8FB;
$color-18: #05B6B1;
$color-19: #BAC0C4;
$color-20: #EE9F1E;
$color-21: #0C9F6E;
$color-22: #E83F5A;
$color-23: #3FAF88;
$color-24: #E4B4B6;
$color-25: #91EF81;
$color-26: #F8E6CC;
$color-27: #D9D9D9;
$color-28: #E8C653;
$color-29: #3F57F1;
$color-30: #7B61FF;
$color-31: #088D5F;
$color-32: #C50202;
$color-33: #7D8797;
$color-34: #FFE6BD;
$color-35: #FDE6E6;
$color-36: #FBF8E4;
$color-37: #F3FBFF;
$color-38: #F6F9FD;
$color-39: #309D77;
$color-40: #E4CC34;
$color-41: #614AC9;
$color-42: #8BBE2C;
$color-43: #F2B500;
$color-44: #FF7B45;
$color-45: #0A79A8;
$color-46: #C8CBD5;
$color-47: #8C94A2;
$color-48: #439D9D;
$color-49: #4162E3;
$color-50: #B376BD;
$color-51: #E36F6C;
$color-52: #5BA63D;
$color-53: #C83B2B;
$color-54: #EBA634;
$color-55: #78A02D;
$color-56: #EE6E00;
$color-57: #7F88BD;
$color-58: #9080FF;
$color-59: #6754B8;
$color-60: #D31A15;
$color-61: #28665D;
$color-62: #609F93;
$color-63: #4D8BFF;
$color-64: #1A90A5;
$color-65: #0779A8;
$color-66: #164533;
$color-67: #44AF2D;
$color-68: #EFAAAF;
$color-69: #F68DAB;
$color-70: #892823;
$color-71: #69657B;
$color-72: #3FAE2A;
$color-73: #0B8C5E;
$color-74: #F0F0F0;
$color-75: #F8FBFA;
$color-76: #006341;
$color-77: #F7F9FC;
$color-78: #FFFFFF;
$color-79: #8EA29B;
$color-80: #3FAE2B;
$color-81: #016341;
$color-82: #00B6B1;
$color-83: #BE0B28;
$color-84: #CCCDCE;
$color-85: #E63422;
$color-86: #D8D8D8;
$color-87: #D7D7D8;
$color-88: #F6F6F6;

Fondo de colores

Para utilizar un fondo de color se debe poner el nombre "fondo" seguido de un guión "-" y del identificador del color a utilizar (basandose en el número asignado en el apartado colores), por ejemplo:

  <div className='fondo-1' />

Hay clases especiales para fondos que utilizan una configuración distinta a un color hexadecimal, los cuales se enlistan a continuación:

fondo-modal-eyd: rgba(0, 15, 8, 0.51);

Letra de colores

Para utilizar una letra de color se debe poner el nombre "letra" seguido de un guión "-" y del identificador del color a utilizar (basandose en el número asignado en el apartado colores), por ejemplo:

  <div className='letra-1' />

Borde de colores

Para utilizar un borde de color se debe poner el nombre "borde" seguido de un guión "-" y del identificador del color a utilizar (basandose en el número asignado en el apartado colores), por ejemplo:

  <div className='borde-1' />

Configuración que se agregara en el webpack.common de los proyectos que consuman la libreria

  {
    test: /\.(woff(2)?|ttf)$/,
    use: [
      {
        loader: 'file-loader', // or 'url-loader'
        options: {
          name: 'fonts/[name].[ext]', // Output path and filename for fonts
        },
      },
    ],
  },

Configuración de grids

cuadricula-primaria-movil-upax: Cuadricula que contendra 6 grids de 50.5px, con espacios de 8px entre cada uno de los grids internos y con margenes externos de 16px;
m-mide-1-upax: El espacio que tiene sera de un grid y asi hasta 4 grids de medidas.
m-inicia-1-upax: El grid donde iniciara.

Dependencias

"@red-unica/libreria-estilos-desempenio": "1.0.0"