Styles nuevo diseño responsive

Jose Pinto
1 parent 68f0df5669
Showing 4 changed files with 34 additions and 0 deletions Show diff stats
index.html
src/sass/_botonera-secundaria.scss
src/sass/_foca-crear.scss
src/sass/_tabla-articulos.scss
@@ -35,6 +35,7 @@
         <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-busqueda-cliente/dist/foca-busqueda-cliente.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>
@@ -15,6 +15,9 @@
             background-color: #d8b07d;
             border-color: #e09125 !important;
         }
+        &:focus{
+            box-shadow: 0 0 0 0.2rem rgb(216, 176, 125);
+        }
         img{
             width: 50%;
             margin: auto
@@ -25,4 +28,9 @@
             margin-right: -.25rem;
         }
     }
+    @media(max-width: 992px){
+        .btn{
+            font-weight: 700;
+        }
+    }
 }
@@ -11,6 +11,19 @@
             margin: auto;
             margin-right: 0;
         }
+
+        @media(max-width: 992px){
+            border-top: none !important;
+            border-right: none !important;
+            border-left: none !important;
+            border-bottom: 2px solid #FFF !important;
+            &:last-child{
+                border-left: 2px solid #FFF !important;
+            }
+            &:first-child{
+                border-top: 2px solid #FFF !important;
+            }
+        }
     }
  
     @media(min-width: 992px){
@@ -17,4 +17,16 @@
     thead > tr > th {
         line-height: 30px
     }
+
+    @media(max-width: 992px){
+        tr{
+            display: block;
+            span{
+                line-height: 35px;
+            }
+        }
+        tfoot tr{
+            display: flex;
+        }
+    }
 }
...	...	@@ -35,6 +35,7 @@
35	35	<script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
36	36	<script src="./node_modules/foca-admin-seguimiento/dist/foca-admin-seguimiento.min.js"></script>
37	37	<script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
	38	+ <script src="./node_modules/foca-botonera-facturador/dist/foca-botonera-facturador.min.js"></script>
38	39	<script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
39	40	<script src="./node_modules/foca-configuracion/dist/foca-configuracion.min.js"></script>
40	41	<script src="./node_modules/foca-crear-cobranza/dist/foca-crear-cobranza.min.js"></script>
...	...	@@ -15,6 +15,9 @@
15	15	background-color: #d8b07d;
16	16	border-color: #e09125 !important;
17	17	}
	18	+ &:focus{
	19	+ box-shadow: 0 0 0 0.2rem rgb(216, 176, 125);
	20	+ }
18	21	img{
19	22	width: 50%;
20	23	margin: auto
...	...	@@ -25,4 +28,9 @@
25	28	margin-right: -.25rem;
26	29	}
27	30	}
	31	+ @media(max-width: 992px){
	32	+ .btn{
	33	+ font-weight: 700;
	34	+ }
	35	+ }
28	36	}
...	...	@@ -11,6 +11,19 @@
11	11	margin: auto;
12	12	margin-right: 0;
13	13	}
	14	+
	15	+ @media(max-width: 992px){
	16	+ border-top: none !important;
	17	+ border-right: none !important;
	18	+ border-left: none !important;
	19	+ border-bottom: 2px solid #FFF !important;
	20	+ &:last-child{
	21	+ border-left: 2px solid #FFF !important;
	22	+ }
	23	+ &:first-child{
	24	+ border-top: 2px solid #FFF !important;
	25	+ }
	26	+ }
14	27	}
15	28
16	29	@media(min-width: 992px){
...	...	@@ -17,4 +17,16 @@
17	17	thead > tr > th {
18	18	line-height: 30px
19	19	}
	20	+
	21	+ @media(max-width: 992px){
	22	+ tr{
	23	+ display: block;
	24	+ span{
	25	+ line-height: 35px;
	26	+ }
	27	+ }
	28	+ tfoot tr{
	29	+ display: flex;
	30	+ }
	31	+ }
20	32	}