Marcelo Puebla / wrapper-demo

Commit 94ea56868934426af5f7e82992a86e2bcb421235

Authored by Eric Fernandez 2019-07-16 09:50:52 -0300

2 parents 08dcd17524 b1916f609f

Merge branch 'master' into 'develop'

Master(mpuebla)

See merge request !142

Showing 2 changed files Show diff stats

src/sass/_botonera-principal.scss

Diff comments View file @ 94ea568

 .botonera-principal {
     menuitem {
         display: inline-block;
         height: 130px;
         text-align: center;
         width: 180px;
         @media (max-width: 576px) {
             width: 100%;
         }
-        @media (min-width: 992px) and (max-width: 1200px){
+        @media (min-width: 992px) and (max-width: 1200px) {
             width: 150px;
         }
     }
     button {
-        background-image: url('../img/botonera.png');
+        cursor: pointer;
+        background-image: url("../img/botonera.png");
         border-radius: 12px;
         border-width: 0;
         height: 90px;
         position: relative;
         width: 90px;
         outline: 0;
         span {
             left: 0;
             position: absolute;
             text-align: center;
             top: 90px;
             width: 100%;
             font-size: 12px;
             color: #777777;
         }
         &:hover {
-            background-color:rgb(250,250,250);
+            background-color: rgb(250, 250, 250);
-            filter:drop-shadow(4px 4px 4px gray);
+            filter: drop-shadow(4px 4px 4px gray);
         }
         &:active {
             background-color: rgb(230, 230, 230);
-            filter:drop-shadow(4px 4px 4px gray);
+            filter: drop-shadow(4px 4px 4px gray);
+        }
+        &:focus {
+            background-color: rgb(250, 250, 250);
+            filter: drop-shadow(4px 4px 4px gray);
         }
     }
     &-menu {
         width: 100%;
         padding-left: 90px;
         @media (max-width: 576px) {
             padding: 0;
         }
     }
     &-logo {
         width: 100%;
         margin-left: 50%;
-        opacity: .8;
+        opacity: 0.8;
         @media (max-width: 576px) {
             width: 180%;
             margin-left: 20%;
         }
     }
     &-vacio {
         & button {
             background-position: -4380px 0;
             &:hover {
                 background-position: -4380px -90px;
             }
         }
     }
     &-abrir-turno {
         & button {
             background-position: 0 0;
             &:hover {
                 background-position: 0 -90px;
             }
         }
     }
     &-cerrar-turno {
         & button {
             background-position: -90px 0;
             &:hover {
                 background-position: -90px -90px;
             }
         }
     }
     &-caja {
         & button {
             background-position: -180px 0;
             &:hover {
                 background-position: -180px -90px;
             }
         }
     }
     &-estado-cisterna {
         & button {
-            background-image: url('../img/control_stock.png');
+            background-image: url("../img/control_stock.png");
             background-size: 90px 90px;
         }
     }
     &-logistica {
         & button {
-            background-image: url('../img/logistica.png');
+            background-image: url("../img/logistica.png");
             background-size: 90px 90px;
         }
     }
     &-facturador {
         & button {
             background-position: -270px 0px;
             &:hover {
                 background-position: -270px -90px;
             }
         }
     }
     &-nota-pedido {
         & button {
-            background-image: url('../img/notaPedido.png');
+            background-image: url("../img/notaPedido.png");
             background-size: 90px 90px;
         }
     }
     &-remito {
         & button {
-            background-image: url('../img/remito.png');
+            background-image: url("../img/remito.png");
             background-size: 90px 90px;
         }
     }
     &-hoja-ruta {
         & button {
-            background-image: url('../img/hoja-ruta.png');
+            background-image: url("../img/hoja-ruta.png");
             background-size: 86px 90px;
         }
     }
     &-activar-hoja-ruta {
         & button {
-            background-image: url('../img/activar_hoja.png');
+            background-image: url("../img/activar_hoja.png");
             background-size: 90px 90px;
         }
     }
     &-hoja-ruta-transportista {
         & button {
-            background-image: url('../img/hojaRutaVolante.png');
+            background-image: url("../img/hojaRutaVolante.png");
             background-size: 90px 90px;
         }
     }
     &-seguimiento {
         & button {
-            background-image: url('../img/seguimientoNotaPedido.png');
+            background-image: url("../img/seguimientoNotaPedido.png");
             background-size: 90px 90px;
         }
     }
     &-seguimiento-hoja-ruta {
         & button {
-            background-image: url('../img/seguimientoHojaRuta.png');
+            background-image: url("../img/seguimientoHojaRuta.png");
             background-size: 90px 90px;
         }
     }
     &-cobranzas {
         & button {
-            background-image: url('../img/cobranzas.png');
+            background-image: url("../img/cobranzas.png");
             background-size: 90px 90px;
         }
     }
     &-seguimiento-cobranzas {
         & button {
-            background-image: url('../img/seguimientoCobranza.png');
+            background-image: url("../img/seguimientoCobranza.png");
             background-size: 90px 90px;
         }
     }
     &-vehiculo {
         & button {
-            background-image: url('../img/abmVehiculos.png');
+            background-image: url("../img/abmVehiculos.png");
             background-size: 90px 90px;
         }
     }
     &-precio-condicion {
         & button {
-            background-image: url('../img/abmPrecios.png');
+            background-image: url("../img/abmPrecios.png");
             background-size: 90px 90px;
         }
     }
     &-chofer {
         & button {
-            background-image: url('../img/abmChofer.png');
+            background-image: url("../img/abmChofer.png");
             background-size: 90px 90px;
         }
     }
     &-agendar-visita {
         & button {
-            background-image: url('../img/agendarVisita.png');
+            background-image: url("../img/agendarVisita.png");
             background-size: 90px 90px;
         }
     }
     &-informes {
         & button {
-            background-image: url('../img/informes.png');
+            background-image: url("../img/informes.png");
             background-size: 90px 90px;
         }
     }
     &-vendedor-cobrador {
         & button {
-            background-image: url('../img/abmVendedorCobrador.png');
+            background-image: url("../img/abmVendedorCobrador.png");
             background-size: 90px 90px;
         }
     }
     &-autorizar-nota {
         & button {
-            background-image: url('../img/autorizarNota.png');
+            background-image: url("../img/autorizarNota.png");
             background-size: 90px 90px;
         }
     }
     &-cliente {
         & button {
-            background-image: url('../img/clientePrincipal.png');
+            background-image: url("../img/clientePrincipal.png");
             background-size: 90px 90px;
         }
     }
     &-parametros {
         & button {
-            background-image: url('../img/parametrizar.png');
+            background-image: url("../img/parametrizar.png");
             background-size: 90px 90px;
         }
     }
     .swiper-pagination {
         bottom: 0px !important;
     }
     .swiper-button-next {
-        background-image: url('../img/derecha.png');
+        background-image: url("../img/derecha.png");
-        &:hover{
+        &:hover {
-            filter:drop-shadow(4px 4px 4px gray);
+            filter: drop-shadow(4px 4px 4px gray);
         }
     }
     .swiper-button-prev {
-        background-image: url('../img/izquierda.png');
+        background-image: url("../img/izquierda.png");
-        &:hover{
+        &:hover {
-            filter:drop-shadow(4px 4px 4px gray);
+            filter: drop-shadow(4px 4px 4px gray);
         }
     }
-    @media (min-width: 992px){
+    @media (min-width: 992px) {
-        a{
+        a {
             margin-top: 2.5rem;
         }
     }
 }

src/sass/general.scss

Diff comments View file @ 94ea568

 @import "constants";
 @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";
 @import "logistica-pedido-ruta";
 @import "tabs";
 @import "grid";
 @import "paginador-abm";
 @import "table-autorizar-nota-pedido";
 //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;
     }
 }
 .btn-dashed {
     border-style: dashed !important;
     border-width: 3px;
     border-color: white;
     background-color: #dedfe0;
 }
 .marcador {
     position: absolute;
     right: 44.5%;
     bottom: -32%;
 }
 .informacion {
     position: absolute;
     right: 18px;
     bottom: 5px;
 }
 .flashit {
     -webkit-animation: flash linear 1s infinite;
     animation: flash linear 1s infinite;
 }
 @-webkit-keyframes flash {
     0% {
         opacity: 1;
     }
     50% {
         opacity: 0.6;
     }
     100% {
         opacity: 1;
     }
 }
 @keyframes flash {
     0% {
         opacity: 1;
     }
     50% {
         opacity: 0.6;
     }
     100% {
         opacity: 1;
     }
 }
 .btn-outline-debo {
     background-color: transparent;
     color: $primary;
     border-color: $primary;
     &:hover {
         color: #fff;
         border-color: transparent;
         background-color: $primary;
     }
     &:focus {
         box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
     }
     &:active {
         color: #fff;
         background-color: $primary !important;
         box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
     }
 }
 .input-group-append > button {
     &:focus {
         border-color: $primary !important;
         box-shadow: 0 0 5px $primary !important;
     }
     &:active {
         border-color: $primary !important;
         box-shadow: 0 0 5px $primary !important;
     }
 }
 .line-break {
     white-space: pre-wrap;
 }
 .input-group-append > button {
     &:focus {
         border-color: $primary !important;
         box-shadow: 0 0 5px $primary !important;
     }
     &:active {
         border-color: $primary !important;
         box-shadow: 0 0 5px $primary !important;
     }
 }
 .btn-login {
     box-shadow: none !important;
 }
 input[type="file"] {
     display: none;
 }
 .custom-file-upload {
     border: 1px solid #ccc;
     display: inline-block;
     padding: 6px 12px;
     cursor: pointer;
 }
 .btn-brown {
     background-color: $primary;
     -webkit-appearance: none;
     border-color: transparent;
     &:focus {
         outline: 0 !important;
         box-shadow: none;
     }
     .icon-white {
         color: white;
     }
 }
 .btn-Guardar {
     background-color: green;
     -webkit-appearance: none;
     border-color: transparent;
     &:focus {
         outline: 0 !important;
         box-shadow: none;
     }
     .icon-white {
         color: white;
     }
 }
 .page-item.active .page-link {
     z-index: 1;
     color: #fff;
     background-color: $primary;
     border-color: $primary;
 }
 .foca-input {
     &:focus {
         border-color: $primary;
         box-shadow: 0 0 5px $primary;
     }
     &:hover {
         border-color: $primary;
         box-shadow: 0 0 5px $primary;
     }
 }
 .btn-enviar {
     background-color: white;
     border-color: #cd9035;
     &:focus {
         box-shadow: none !important;
     }
     &:hover {
         border-color: $primaryTransparency !important;
         background-color: $primaryTransparency !important;
     }
     &:active {
         background-color: $primary !important;
         box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
     }
 }
 .btn-primary {
     background-color: $primary !important;
     border-color: $primary !important;
     &:focus {
         box-shadow: none !important;
     }
     &:hover {
         border-color: $primaryTransparency !important;
         background-color: $primaryTransparency !important;
     }
     &:active {
         background-color: $primary !important;
         box-shadow: 0px 0px 0px 3px $primaryTransparency !important;
     }
 }
 .input-group-text {
     &:focus {
         outline: none;
         border-color: $primary;
         box-shadow: 0 0 5px $primary;
     }
     &:hover {
         border-color: $primary;
         box-shadow: 0 0 5px $primary;
     }
     &:active {
         box-shadow: 0 0 5px $primary;
     }
 }
 .btn-default {
     color: #fff;
     background-color: $default !important;
     border-color: $default !important;
     &:focus {
         box-shadow: none !important;
     }
     &:hover {
         color: #fff;
         border-color: $defaultTransparency !important;
         background-color: $defaultTransparency !important;
     }
     &:active {
         background-color: $default !important;
         box-shadow: 0px 0px 0px 3px $defaultTransparency !important;
     }
 }
 .btn-danger {
     &:hover {
         color: #fff;
         border-color: $dangerTransparency !important;
         background-color: $dangerTransparency !important;
     }
 }
 .table-celda-total {
     background-color: $highlightedArea;
 }
 marquee {
     background-color: $highlightedArea;
 }
 .front-index {
     z-index: 9999;
 }
 .uib-daypicker {
     outline: 0;
 }
 .right-0 {
     right: 0;
 }
 .tabla-factura {
     word-wrap: break-word;
     table-layout: fixed;
 }
 .ladda-w-100 .ladda-label {
     width: 100%;
     float: right;
 }
 .btn-delete-image {
     height: 25px;
     width: 25px;
     top: -10px;
     right: 0;
 }
 button.clear-input {
     cursor: pointer;
     background: transparent;
     border: none;
     margin-left: -24px;
     z-index: 9;
     color: #a3a3a3;
     &:focus {
         outline: none;
     }
 }
 .custom-control-input {
     &:checked ~ .custom-control-label::before {
         border: none !important;
         color: $primary !important;
         background-color: $primary !important;
         box-shadow: 0px 0px 0px 2px $primaryTransparency !important;
     }
     &:active ~ .custom-control-label::before {
         border: none !important;
         color: $primary !important;
         background-color: $primary !important;
     }
     &:focus ~ .custom-control-label::before {
         border: none !important;
         box-shadow: 0px 0px 0px 2px $primaryTransparency !important;
     }
     &:focus:not(:checked) ~ .custom-control-label::before {
         border: none !important;
     }
     &:not(:disabled):active ~ .custom-control-label::before {
         border: none !important;
         color: $primary !important;
         box-shadow: 0px 0px 0px 2px $primaryTransparency !important;
     }
     &:hover ~ .custom-control-label::before {
         border: none !important;
         background-color: $primaryTransparency;
     }
 }
 .disable-selection {
     user-select: none;
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* Internet Explorer */
     -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
     -webkit-user-select: none; /* Chrome, Safari, and Opera */
     -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
 }
 .foca-text-success {
     color: $textSuccess !important;
 }
 .foca-text-danger {
     color: $textDanger !important;
 }
+.cover-spin {
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+    display: flex;
+    position: absolute;
+    background-color: rgba(255,255,255,0.6);
+    left: 0;
+    top: 0;
+    z-index: 9999;
+}