Plantilla de estilos
Proceso de producción
| Categoría | Fuente | font-size | font-weight | text-transform | line-height |
|---|---|---|---|---|---|
H1 |
Roboto | 32px | 500 / medium | none | 2em |
H2 |
Roboto | 30px | 600 / bold | upercase | 2.1em |
H3 |
Roboto | 27px | 500 / medium | uppercase | 2.1em |
H4 |
Roboto | 24px | 500 / medium | none | 2.1em |
H5 |
Roboto | 21px | 500 / medium | none | 2.1em |
H6 |
Roboto | 18px | 500 / medium | none | 2.1em |
| Subtitulo 1 | Roboto | 20px | 500 / medium | none | 1.6em |
| Subtitulo 2 | Roboto | 18px | 300 / regular | none | 1.6em |
| Body | Roboto | 16px | 300 / regular | none | 1.6em |
| Body 2 | Roboto | 15px | 500 / medium | none | 1.6em |
| Boton | Roboto | 15px | 500 / medium | uppercase | 1.6em |
| Caption | Roboto | 13px | 300 / regular | none | 1.8em |
#64707a
Los textos de segunda importancia usan éste color. De manera que sean legibles mas no destaquen en su importancia.
Ejemplo:Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
#313c52
La mayoría de los textos o botones vivos usarán este color para que su alto contraste sea destacable de entre todos los colores de fondo. Cabe destacar que no se usará el color negro. Éste color debe considerarse como negro.
Ejemplo:Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
opacity: .5;
Los elementos deshabilitados o generalmente los textos de clase Caption usan este color. Son elementos en que el usuario debe notar que no están vivos. No denotan en alguna accion o su accion esta incapacitada por alguna razon
Ejemplo:Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
| Icono Nuevo | Icono Viejo | Icono App | Elemento | Fuente | Clase | Content |
|---|---|---|---|---|---|---|
| Actividades | Font Awesome | fa-check-square | \f14a | |||
| Almacenes | Font Awesome | fas fa-boxes | \f1cd | |||
| Agenda | Font Awesome | fas fa-calendar-day | \f783 | |||
| cajas y bancos | Font Awesome | fas fa-university | \f19c | |||
| campañas | Vtiger-icons | vicon-campaigns | \e60d | |||
| casos | Font Awesome | fas fa-ticket-alt | \f3ff | |||
| Catalogo | Font Awesome | fas fa-tags | \f02c | |||
| CFDIs Pagos | icomoon | vicon-treebespagoscfdi | \e900 | |||
| Compras | Font Awesome | fas fa-shopping-basket | \f788 | |||
| Configuración | Font Awesome | fas fa-cog | \f013 | |||
| account_circle | Contacto | Font Awesome | fas fa-user | \f007 | ||
| control tiempo | Font Awesome | fas fa-clock | \f017 | |||
| Cotizaciones | icomoon | vicon-quotes | \e909 | |||
| Cuenta | Font Awesome | fas fa-building | \f1ad | |||
| Documentos | Font Awesome | fas fa-folder-open | \f07c | |||
| Email Templates | Font Awesome | fas fa-envelope-open-text | \f658 | |||
| F. Traslado | icomoon | vicon-treebesftp | \e905 | |||
| factura | icomoon | vicon-treebesfacturas | \e907 | |||
| faqs | Font Awesome | fas fa-question-circle | \f059 | |||
| Finanzas | Font Awesome | fas fa-money-bill-wave | \f53a | |||
| flujo de efectivo | Font Awesome | fas fa-hand-holding-usd | \f4c0 | |||
| Herramientas | Font Awesome | fas fa-tools | \f7d9 | |||
| Importador de productos | Font Awesome | fas fa-upload | \f093 | |||
| Metas de proyectos | Vtiger-icons | vicon-projectmilestone | \e659 | |||
| Movimientos de almacen | Font Awesome | fas fa-dolly | \f472 | |||
| Nominas | icomoon | vicon-treebesnom | \e904 | |||
| Notas de crédito | icomoon | vicon-treebesndc | \e903 | |||
| nuestros sitios | Font Awesome | fas fa-globe | \f0ac | |||
| Operaciones | Font Awesome | fas fa-life-ring | \f1cd | |||
| Oportunidades | Font Awesome | fas fa-address-book | \f2b9 | |||
| Ordenes de compra | Vtiger-icons | vicon-purchaseorder | \e65b | |||
| Ordenes de venta | Vtiger-icons | vicon-salesorder | \e667 | |||
| Papelera | Font Awesome | fas fa-trash | \f1f8 | |||
| Polizas | Font Awesome | fas fa-file-alt | \f15c | |||
| Prospectos | Font Awesome | fas fa-id-card | \f2c2 | |||
| Proveedores | Font Awesome | fas fa-user-tag | \f507 | |||
| Proyectos | Font Awesome | fas fa-briefcase | \f0b1 | |||
| Reportes | Font Awesome | fas fa-chart-bar | \f080 | |||
| RSS | Vtiger-icons | icon-rss | \e666 | |||
| SAT | icomoon | vicon-treebessatcfdi | \e906 | |||
| SAT Productos | icomoon | vicon-treebessatproductos | \e90C | |||
| SAT Unidades | icomoon | vicon-treebessatunidades | \e90C | |||
| Servicios | Font Awesome | fas fa-hammer | \f6e3 | |||
| SMS Noti | Vtiger-icons | vicon-smsnotifier | \e672 | |||
| Soporte | Font Awesome | fas fa-headset | \f590 | |||
| speed | Tablero | Font Awesome | fas fa-tachometer-alt | \f3fd | ||
| Tareas de proyectos | Font Awesome | fas fa-clipboard-check | \f46c | |||
| Tipos de mano de obra | Font Awesome | fas fa-hard-hat | \f807 | |||
| Tipos de Soporte | Font Awesome | fas fa-clipboard-list | \f46d | |||
| Ventas | Font Awesome | fas fa-cash-register | \f788 | |||
| VGS Gantt | Font Awesome | fas fa-cocktail | \f007 |
var(--azul)
#23A1DB
var(--morado)
#8051A1
var(--rojo)
#F05B70
var(--amarillo)
#F7C379
var(--fondo)
#EFEFF4
var(--wBox)
#fff
var(--separador)
#C8C7CC
var(--blancoX)
#F6F6F7
var(--borde)
#E5E5E5
var(--standard)
#dfd8d845
.secondary-text
var(--texto)
#64707A
.primary-text
var(--negro)
#313C52
var(--azul)
#23A1DB
var(--morado)
#8051A1
var(--rojo)
#F05B70
var(--amarillo)
#F7C379
var(--fondo)
#202020
var(--wBox)
#171717
var(--separador)
#373833
var(--blancoX)
#1a1a1a
var(--borde)
#4b4b48
var(--standard)
#66666645
.secondary-text
var(--texto)
#c8c7cc
.primary-text
var(--negro)
#fff
| Nombre | Componente |
|---|---|
| Actividad |
Nombre de caso
4 Jul
15min
Ricardo Sanchez
|
| Advanced 1 |
Venta de mostrador
13 Feb 6:39am
$13,182.00
|
| Advanced 2 |
Venta de mostrador
13 Feb 6:39am
Lorem
1:00
|
| Advanced 3 |
Venta de mostrador
13 Feb 6:39am
$13,182.00
-$3,000
|
| Advanced 4 |
Tarjeta Credito
Santander
$1,295.72
13 Feb 6:39am
Efectivo
Caja chica
$95.00
29 Feb 9:05am
|
| Boton primario | |
| Boton secundario | |
| Boton standard | |
| Input Button | |
| Content Title |
Titulo de contenido
|
| Details 1 |
Label
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniamtation
|
| Estados |
- Selecciona un estado -
|
| Input | |
| Input complex | |
| Input Multiple |
Tipos de gasto:
CasetaComidaGasolinaHospedajeInsumosViaticos
|
| Modal Title | |
| Nav | |
| Producto | |
| Progress Bar | |
| Simple 1i |
Lorem Ipsum |
| Simple 1t |
LLorem Ipsum |
| Simple 2 heavy |
Lorem ipsum Dolor sit amet
|
| Simple 2 light |
Lorem ipsum Dolor sit amet
|
| Simple 3 |
Lorem ipsum
8
|
| Tabs |
|
| Timeline Element Top |
31 Jun 3:45am
Documento Vinculadoscreenshot-01.jpg
|
| Timeline Element Mid |
31 Jun 3:45am
Documento Vinculadoscreenshot-01.jpg
|
| Timeline Element Bottom |
31 Jun 3:45am
Documento Vinculadoscreenshot-01.jpg
|
| Timeline Single | |
| Titulo |
Resumen
|
| User Comment |
Beatriz Smith
4 Ago 10:05 am
Lorem ipsum dolor sit amet, conse ctetuer adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa.
|
| User Input |
![]() |
| Clase | Elemento |
|---|---|
| com container |
Contenedor responsivo de ancho medio. El contenedor se limitará a un máximo de 1250px.
<div class="com container">
|
| com container-fluid |
Contenedor de ancho completo. El contenedor se extenderá a lo ancho de la pantalla
<div class="com container-fluid">
|
| com row |
Elemento de fila. Gracias a éste elemento las columas funcionan.
<div class="com container">
.com.row
|
| com col-sm-12 |
.com.col-sm-12
|
| com col-sm-11 |
.com.col-sm-11
sm-1
|
| com col-sm-10 |
.com.col-sm-10
.col-sm-2
|
| com col-sm-9 |
.com.col-sm-9
.com.col-sm-3
|
| com col-sm-8 |
.com.col-sm-8
.com.col-sm-4
|
| com col-sm-7 |
.com.col-sm-7
.com.col-sm-5
|
| com col-sm-6 |
.com.col-sm-6
.com.col-sm-6
|
| com col-sm-5 |
.com.col-sm-5
.com.col-sm-3
.com.col-sm-4
|
| com col-sm-4 |
.com.col-sm-4
.com.col-sm-4
.com.col-sm-4
|
| com col-sm-3 |
.com.col-sm-3
.com.col-sm-3
.com.col-sm-3
.com.col-sm-3
|
| com col-sm-2 |
.col-sm-2
|
| com col-sm-1 |
sm-1
|
| [shotcode /] |