Luigi / wrapper-demo

Browse Code »

Commit 7f8f75818926972ace67d46e6506396e44a6920c

Authored by Jose Pinto 2018-12-18 18:05:11 -0300

1 parent a3805326ef

Exists in master

foca-botonera-lateral y cambio de estilos

Showing 9 changed files with 93 additions and 40 deletions Show diff stats

index.html

Diff comments View file @ 7f8f758

 <html ng-app="appWrapperDemo">
     <head>
         <meta charset="UTF-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <base href="./">
         <!--CSS-->
         <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
         <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
         <link href="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.css" rel="stylesheet"/>
         <link href="./node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet"/>
         <link href="./node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/>
         <link href="./css/general.css" rel="stylesheet"/>
         <!--VENDOR JS-->
         <script src="./node_modules/jquery/dist/jquery.min.js"></script>
         <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
         <script src="./node_modules/angular/angular.min.js"></script>
         <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
         <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
         <script src="./node_modules/angular-route/angular-route.min.js"></script>
         <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
         <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
         <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
         <script src="./node_modules/ladda/dist/spin.min.js"></script>
         <script src="./node_modules/ladda/dist/ladda.min.js"></script>
         <script src="./node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
         <script src="./node_modules/leaflet/dist/leaflet.js"></script>
         <script src="./node_modules/ngstorage/ngStorage.min.js"></script>
         <script src="./vendor/cordovaGeolocationModule.min.js"></script>
         <script src="./node_modules/foca-abm-chofer/dist/foca-abm-chofer.min.js"></script>
         <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
         <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
         <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
         <script src="./node_modules/foca-admin-seguimiento/dist/foca-admin-seguimiento.min.js"></script>
-        <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
         <script src="./node_modules/foca-botonera-facturador/dist/foca-botonera-facturador.min.js"></script>
+        <script src="./node_modules/foca-botonera-lateral/dist/foca-botonera-lateral.min.js"></script>
+        <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
         <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
         <script src="./node_modules/foca-cabecera-facturador/dist/foca-cabecera-facturador.min.js"></script>
         <script src="./node_modules/foca-configuracion/dist/foca-configuracion.min.js"></script>
         <script src="./node_modules/foca-crear-cobranza/dist/foca-crear-cobranza.min.js"></script>
         <script src="./node_modules/foca-crear-hoja-ruta/dist/foca-crear-hoja-ruta.min.js"></script>
         <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>
         <script src="./node_modules/foca-crear-remito/dist/foca-crear-remito.min.js"></script>
         <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
         <script src="./node_modules/foca-filtros/dist/foca-filtros.min.js"></script>
         <script src="./node_modules/foca-hoja-ruta/dist/foca-hoja-ruta.min.js"></script>
         <script src="./node_modules/foca-login/dist/foca-login.min.js"></script>
         <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>
         <script src="./node_modules/foca-modal-banco/dist/foca-modal-banco.min.js"></script>
         <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>
         <script src="./node_modules/foca-modal-cheque/dist/foca-modal-cheque.min.js"></script>
         <script src="./node_modules/foca-modal-chofer/dist/foca-modal-chofer.min.js"></script>
         <script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script>
         <script src="./node_modules/foca-modal-detalle-hoja-ruta/dist/foca-modal-detalle-hoja-ruta.min.js"></script>
         <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>
         <script src="./node_modules/foca-modal-factura/dist/foca-modal-factura.min.js"></script>
         <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
         <script src="./node_modules/foca-modal-localidad/dist/foca-modal-localidad.min.js"></script>
         <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
         <script src="./node_modules/foca-modal-nota-pedido/dist/foca-modal-nota-pedido.min.js"></script>
         <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
         <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script>
         <script src="./node_modules/foca-modal-provincia/dist/foca-modal-provincia.min.js"></script>
         <script src="./node_modules/foca-modal-remito/dist/foca-modal-remito.min.js"></script>
         <script src="./node_modules/foca-modal-tarifa-flete/dist/foca-modal-tarifa-flete.min.js"></script>
         <script src="./node_modules/foca-modal-transportista/dist/foca-modal-transportista.min.js"></script>
         <script src="./node_modules/foca-modal-vehiculo/dist/foca-modal-vehiculo.min.js"></script>
         <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
         <script src="./node_modules/foca-nombre-empresa/dist/foca-nombre-empresa.min.js"></script>
         <script src="./node_modules/foca-seguimiento/dist/foca-seguimiento.min.js"></script>
         <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
         <script src="./node_modules/foca-abm-vehiculo/dist/foca-abm-vehiculo.min.js"></script>
         <script src="./node_modules/foca-modal-efectivo/dist/foca-modal-efectivo.min.js"></script>
         <script src="./node_modules/foca-modal-cobrador/dist/foca-modal-cobradores.min.js"></script>
         <script src="./node_modules/foca-modal-cobranza/dist/foca-modal-cobranza.min.js"></script>
         <script src="./src/js/app.js"></script>
         <script src="./src/js/controller.js"></script>
         <script src="./src/etc/develop.js"></script>
     </head>
     <body>
         <style>
         </style>
         <foca-nombre-empresa></foca-nombre-empresa>
         <div ng-view class="container contenedor"></div>
         <div ng-controller="appWrapperDemoController" class="teclado-container container d-none d-md-block ">
-            <div
+            <div class="container">
-                class="btn-group-toggle"
+                <div class="row">
-                data-toggle="buttons"
+                    <div class="col-auto my-2 col-lg-2 offset-lg-10 d-none d-md-flex" style="min-height: 176px">
-                ng-click="cambioUsoTeclado()">
+                        <div class="px-2 mt-auto">
-                <label
+                            <foca-botonera-lateral></foca-botonera-lateral>
-                    class="btn btn-secondary active boton-activar-teclado"
+                        </div>
-                    ng-class="{'teclado-activar': usarTeclado}">
+                    </div>
-                    <input
+                </div>
-                        type="checkbox"
-                        autocomplete="off"
-                        >
-                        Teclado
-                </label>
             </div>
             <foca-teclado
                 ng-show="usarTeclado && mostrarTeclado"
                 alfanumeric="true"
                 numeric="true"
                 >
             </foca-teclado>
         </div>
     </body>

package.json

Diff comments View file @ 7f8f758

 {
     "name": "wrapper-demo",
     "version": "0.0.1",
     "description": "",
     "main": "main.js",
     "scripts": {
         "initdev": "npm install gulp --global && npm install && npm install -g jshint",
         "gulp-pre-commit": "gulp pre-commit",
         "compile": "gulp uglify && gulp sass",
         "actualizar": "git pull origin master",
         "install-dev": "gulp pre-install && npm install && gulp post-install"
     },
     "pre-commit": [
         "gulp-pre-commit"
     ],
     "repository": {
         "type": "git",
         "url": "ssh://git@debonline.dyndns.org:npm/wrapper-demo.git"
     },
     "author": "Foca Software",
     "license": "ISC",
     "dependencies": {
         "angular": "^1.7.5",
         "angular-cookies": "^1.7.5",
         "angular-i18n": "^1.7.5",
         "angular-ladda": "^0.4.3",
         "angular-route": "^1.7.5",
         "angular-sanitize": "^1.7.5",
         "angular-ui-swiper": "^2.3.8",
         "bootstrap": "^4.1.3",
         "foca-abm-chofer": "git+ssh://git@debonline.dyndns.org:npm/foca-abm-chofer.git",
         "foca-abm-plazo-pago": "git+ssh://git@debonline.dyndns.org:npm/foca-abm-plazo-pago.git",
         "foca-abm-precios-condiciones": "git+ssh://git@debonline.dyndns.org:npm/foca-abm-precios-condiciones.git",
         "foca-abm-sectores": "git+ssh://git@debonline.dyndns.org:npm/foca-abm-sectores.git",
         "foca-abm-vehiculo": "git+ssh://git@debonline.dyndns.org:npm/foca-abm-vehiculo.git",
         "foca-admin-seguimiento": "git+ssh://git@debonline.dyndns.org:npm/foca-admin-seguimiento.git",
         "foca-botonera-principal": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-principal.git",
+        "foca-botonera-lateral": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-lateral.git",
         "foca-botonera-facturador": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-facturador.git",
         "foca-busqueda-cliente": "git+ssh://git@debonline.dyndns.org:npm/foca-busqueda-cliente.git",
         "foca-cabecera-facturador": "git+ssh://git@debonline.dyndns.org:npm/foca-cabecera-facturador.git",
         "foca-configuracion": "git+ssh://git@debonline.dyndns.org:npm/foca-configuracion.git",
         "foca-crear-cobranza": "git+ssh://git@debonline.dyndns.org:npm/foca-crear-cobranza.git",
         "foca-crear-hoja-ruta": "git+ssh://git@debonline.dyndns.org:npm/foca-crear-hoja-ruta.git",
         "foca-crear-nota-pedido": "git+ssh://git@debonline.dyndns.org:npm/foca-crear-nota-pedido.git",
         "foca-crear-remito": "git+ssh://git@debonline.dyndns.org:npm/foca-crear-remito.git",
         "foca-directivas": "git+ssh://git@debonline.dyndns.org:npm/foca-directivas.git",
         "foca-filtros": "git+ssh://git@debonline.dyndns.org:npm/foca-filtros.git",
         "foca-hoja-ruta": "git+ssh://git@debonline.dyndns.org:npm/foca-hoja-ruta.git",
         "foca-login": "git+ssh://git@debonline.dyndns.org:npm/foca-login.git",
         "foca-modal": "git+ssh://git@debonline.dyndns.org:npm/foca-modal.git",
         "foca-modal-banco": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-banco.git",
         "foca-modal-busqueda-productos": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-busqueda-productos.git",
         "foca-modal-cheque": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-cheque.git",
         "foca-modal-chofer": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-chofer.git",
         "foca-modal-cobrador": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-cobrador.git",
         "foca-modal-cobranza": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-cobranza.git",
         "foca-modal-cotizacion": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-cotizacion.git",
         "foca-modal-detalle-hoja-ruta": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-detalle-hoja-ruta.git",
         "foca-modal-domicilio": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-domicilio.git",
         "foca-modal-efectivo": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-efectivo.git",
         "foca-modal-factura": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-factura.git",
         "foca-modal-flete": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-flete.git",
         "foca-modal-localidad": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-localidad.git",
         "foca-modal-moneda": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-moneda.git",
         "foca-modal-nota-pedido": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-nota-pedido.git",
         "foca-modal-precio-condiciones": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-precio-condiciones.git",
         "foca-modal-proveedor": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-proveedor.git",
         "foca-modal-provincia": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-provincia.git",
         "foca-modal-remito": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-remito.git",
         "foca-modal-tarifa-flete": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-tarifa-flete.git",
         "foca-modal-transportista": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-transportista.git",
         "foca-modal-vehiculo": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-vehiculo.git",
         "foca-modal-vendedores": "git+ssh://git@debonline.dyndns.org:npm/foca-modal-vendedores.git",
         "foca-nombre-empresa": "git+ssh://git@debonline.dyndns.org:npm/foca-nombre-empresa.git",
         "foca-seguimiento": "git+ssh://git@debonline.dyndns.org:npm/foca-seguimiento.git",
         "foca-teclado": "git+ssh://git@debonline.dyndns.org:npm/foca-teclado.git",
         "font-awesome": "^4.7.0",
         "gulp-angular-templatecache": "^2.2.1",
         "gulp-htmlmin": "^5.0.1",
         "gulp-uglify": "^3.0.1",
         "gulp-uglify-es": "^1.0.4",
         "jquery": "^3.3.1",
         "ladda": "1.0.6",
         "leaflet": "1.3.4",
         "ngstorage": "^0.3.11",
         "node-sass": "^4.10.0",
         "uglify": "^0.1.5",
         "ui-bootstrap4": "^3.0.5"
     },
     "devDependencies": {
         "electron": "^3.0.2",
         "gulp": "^3.9.1",
         "gulp-clean": "^0.4.0",
         "gulp-concat": "^2.6.1",
         "gulp-connect": "^5.6.1",
         "gulp-jshint": "^2.1.0",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-sass": "^4.0.1",
         "gulp-uglify": "^1.0.4",
         "gulp-watch": "^5.0.1",
         "jasmine-core": "^3.2.1",
         "jshint": "^2.9.6",
         "pre-commit": "^1.2.2",
         "pump": "^3.0.0"
     }
 }

src/js/app.js

Diff comments View file @ 7f8f758

 angular.module('appWrapperDemo', [
     //EXTERNOS
     'angular-ladda',
     'cordovaGeolocationModule',
     'ngCookies',
     'ngRoute',
     'ngSanitize',
     'ngStorage',
     'onScreenKeyboard',
     'ui.bootstrap',
     'ui.swiper',
     // MODULOS FOCA
     'focaAbmPlazoPago',
     'focaAbmPreciosCondiciones',
     'focaAbmSectores',
     'focaAbmVehiculo',
     'focaAbmChofer',
     'focaAdminSeguimiento',
-    'focaBotoneraPrincipal',
     'focaBotoneraFacturador',
+    'focaBotoneraLateral',
+    'focaBotoneraPrincipal',
     'focaBusquedaCliente',
     'focaBusquedaProductos',
     'focaCabeceraFacturador',
     'focaConfiguracion',
     'focaCrearCobranza',
     'focaCrearHojaRuta',
     'focaCrearNotaPedido',
     'focaCrearRemito',
     'focaDirectivas',
     'focaFiltros',
     'focaHojaRuta',
     'focaLogin',
     'focaModal',
     'focaModalBanco',
     'focaModalCheque',
     'focaModalChofer',
     'focaModalCobradores',
     'focaModalCobranza',
     'focaModalCotizacion',
     'focaModalDetalleHojaRuta',
     'focaModalDomicilio',
     'focaModalEfectivo',
     'focaModalFactura',
     'focaModalFlete',
     'focaModalLocalidad',
     'focaModalMoneda',
     'focaModalNotaPedido',
     'focaModalPrecioCondicion',
     'focaModalProveedor',
     'focaModalProvincia',
     'focaModalRemito',
     'focaModalTarifaFlete',
     'focaModalTransportista',
     'focaModalVehiculo',
     'focaModalVendedores',
     'focaNombreEmpresa',
     'focaSeguimiento',
     'focaTeclado'
 ]);

src/sass/_botonera-lateral.scss

Diff comments View file @ 7f8f758

1	.botonera-lateral {	1	.botonera-lateral {
2	>.row {
3	height: 420px;
4	}
5		2
6	@media (min-width: 768px){	3	@media (min-width: 768px){
7	display: grid !important;	4	display: grid !important;
8	}	5	}
		6
		7	button{
		8	pointer-events: all;
		9	background-color: #DDD;
		10	}
		11
		12	.teclado-activar {
		13	background-color: #17d236 !important;
		14	color: #FFF !important;
		15	}
		16
		17	button, .btn-group-toggle{
		18	background-color: #DDD;
		19	color: #000;
		20	text-transform: uppercase;
		21	min-width: 109px;
		22	&:hover{
		23	color: #FFF;
		24	.boton-activar-teclado{
		25	color: #FFF;
		26	}
		27	background-color: #000;
		28	}
		29	}
		30
		31
		32	.btn-group-toggle{
		33	pointer-events: all;
		34	&.active{
		35	background-color: $primary-color;
		36	.boton-activar-teclado{
		37	color: #FFF;
		38	}
		39	}
		40
		41	.boton-activar-teclado{
		42	cursor: pointer;
		43	color: #000;
		44	background-color: transparent;
		45	}
		46
		47	input{
		48	display: none;
		49	}
		50	}
9	}	51	}
		52	.teclado-container > div{
		53	pointer-events: none;
		54	position: absolute;
		55	z-index: 100000;
		56	left: 0;
		57	right: 0;
		58	top: 449px;
		59	.row{
		60	margin: 0 !important;
		61	pointer-events: none;

src/sass/_botonera-secundaria.scss

Diff comments View file @ 7f8f758

 .botonera-secundaria {
     .row {
         border-radius: 5px;
         overflow: hidden;
     }
     .btn {
         display: grid;
         border-width: 3px !important;
         border-radius: .7rem !important;
         margin-right: 1px;
         width: calc(100% - 1px);
         margin-bottom: 1px;
         &:hover{
             background-color: #d8b07d;
             border-color: #e09125 !important;
         }
         &:focus{
             box-shadow: 0 0 0 0.2rem rgb(216, 176, 125);
         }
         img{
             width: 50%;
             margin: auto
         }
         span{
             font-size: 11px;
             margin-left: -.25rem;
             margin-right: -.25rem;
         }
     }
     @media(max-width: 992px){
         .btn{
             font-weight: 700;
         }
     }
+    @media(min-width: 1200px){
+        .btn{
+            min-height: 85px;
+        }
+    }
+    @media(min-width: 992px) and (max-width: 1200px){
+        .btn{
+            min-height: 73px;
+        }
+    }
+    @media(min-width: 768px) and (max-width: 992px){
+        .btn{
+            min-height: 62px;
+        }
+    }
 }

src/sass/_contenedor.scss

Diff comments View file @ 7f8f758

 body {
     @media (min-width: 768px) {
         background-color: #cccccc;
     }
-    @media (max-width: 768px) {
-        background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
-    }
 }
 .contenedor {
     @media (min-width: 768px) {
-        background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
         min-height: 600px;
         min-width: 800px;
     }
 }
 .grilla-articulo {
     @media (min-width: 768px) {
         height: 300px;
     }
 }

src/sass/_swiper.scss

Diff comments View file @ 7f8f758

1	.swiper {	1	.swiper {
2	&-container {	2	&-container {
3	height: 400px;	3	height: 300px;
4	}	4	}
5	&-slide {	5	&-slide {
6	background: transparent;	6	background: transparent;
7	height: 400px;	7	height: 400px;
8	text-align: unset;	8	text-align: unset;
9	-webkit-align-items: unset;	9	-webkit-align-items: unset;
10	align-items: unset;	10	align-items: unset;
11	}	11	}
12	}	12	}
13		13

src/sass/_teclado.scss

Diff comments View file @ 7f8f758

 .keyboard {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     margin: auto;
     width: 855px;
     position: inherit;
     height: auto;
     border: 1px solid rgba(255, 128, 0, .4);
     background-color: rgba(0, 0, 0, .3);
     bottom: 5px;
     table {
         border-spacing: 10px;
         border-collapse: separate;
         z-index: 100000;
         td {
             touch-action: none;
         }
     }
     .letter {
         background-color: #bdbdbd;
         box-shadow: 2px 2px 3px #555555;
         width: 47px;
         height: 50px;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
         font-size: 22px;
         &:hover {
             background-color: #fafafa;
         }
         &:active {
             background-color: #999;
             color: #fff;
         }
     }
     .number {
         background-color: #bdbdbd;
         box-shadow: 2px 2px 3px #555555;
         width: 47px;
         height: 35px;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
         font-size: 22px;
         &:hover {
             background-color: #fafafa;
         }
         &:active {
             background-color: #999;
             color: #fff;
         }
     }
     .margin {
         width: 40px;
         height: 50px;
     }
 }
-.teclado-container > div{
-    position: relative;
-}
-.teclado-activar {
-    background-color: #17d236;
-}
-.boton-activar-teclado {
-    top: -450px;
-    position: absolute;
-    z-index: 100000;
-    right: 1.6rem;
-    @media(min-width: 1200px){
-        right: 2.5rem !important;
-    }
-}

src/sass/general.scss

Diff comments View file @ 7f8f758

+$primary-color: #e09125;
 @import 'admin-seguimiento';
 @import 'bootstrap';
 @import 'botonera';
 @import 'botonera-lateral';
 @import 'botonera-principal';
 @import 'botonera-secundaria';
 @import 'contenedor';
 @import 'lista';
 @import 'login';
 @import 'panel-informativo';
 @import 'tabla';
 @import 'teclado';
 @import 'tabla-articulos';
 @import 'acciones-mobile';
 @import 'swiper';
 @import 'foca-crear';
 //OCULTA FLECHAS INPUT NUMBER
 input[type='number'] {
     -moz-appearance:textfield;
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
 .d-md-grid{
     @media (min-width: 768px) {
         display: grid !important;
     }
 }