arreglos estilo para mobile

Nicolás Guarnieri
1 parent 4ce9fe3e7c
Showing 5 changed files with 30 additions and 4 deletions Show diff stats
index.html
src/sass/_acciones-mobile.scss
src/sass/_bootstrap.scss
src/sass/_contenedor.scss
src/sass/general.scss
@@ -50,7 +50,7 @@
         </style>
         <botonera-horizontal></botonera-horizontal>
         <div ng-view class="container contenedor"></div>
-        <div class="container contenedor-teclado">
+        <div class="container contenedor-teclado d-none d-sm-block">
             <div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado">
                 <label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}">
                     <input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
@@ -0,0 +1,5 @@
+.acciones-mobile {
+    line-height: 2.5em; 
+    color: orange;
+    font-size: 1.25em
+}
 \ No newline at end of file
@@ -9,4 +9,19 @@
     font-size: .8rem;
     line-height: 1.5;
     border-radius: .2rem;
+}
+.no-border-bottom {
+    border-bottom: 0 !important;
+}
+.no-border-top {
+    border-top: 0 !important;
+}
+.no-border {
+    border: 0 !important;
+}
+.margin-bottom-mobile {
+    margin-bottom: 2.5em !important;
+}
+.tamaño-boton {
+    width:44px;
 }
 \ No newline at end of file
@@ -4,8 +4,11 @@ body {
  
 .contenedor {
     background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
-    min-height: 600px;
-    min-width: 800px;
+    @media (min-width: 768px) {
+        min-height: 600px;
+        min-width: 800px;
+    }
+
 }
  
 .contenedor-teclado {
@@ -15,7 +18,9 @@ body {
  
 .grilla-articulo {
     background-color: rgba(0, 0, 0, 0.8);
-    height: 430px;
+    @media (min-width: 768px) {
+        height: 430px;
+    }
 }
  
 .crear-nota-pedido {
@@ -10,3 +10,4 @@
 @import 'tabla';
 @import 'teclado';
 @import 'tabla-articulos';
+@import 'acciones-mobile';
...	...	@@ -50,7 +50,7 @@
50	50	</style>
51	51	<botonera-horizontal></botonera-horizontal>
52	52	<div ng-view class="container contenedor"></div>
53		- <div class="container contenedor-teclado">
	53	+ <div class="container contenedor-teclado d-none d-sm-block">
54	54	<div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado">
55	55	<label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}">
56	56	<input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
...	...	@@ -0,0 +1,5 @@
	1	+.acciones-mobile {
	2	+ line-height: 2.5em;
	3	+ color: orange;
	4	+ font-size: 1.25em
	5	+}
0	6	\ No newline at end of file
...	...	@@ -9,4 +9,19 @@
9	9	font-size: .8rem;
10	10	line-height: 1.5;
11	11	border-radius: .2rem;
	12	+}
	13	+.no-border-bottom {
	14	+ border-bottom: 0 !important;
	15	+}
	16	+.no-border-top {
	17	+ border-top: 0 !important;
	18	+}
	19	+.no-border {
	20	+ border: 0 !important;
	21	+}
	22	+.margin-bottom-mobile {
	23	+ margin-bottom: 2.5em !important;
	24	+}
	25	+.tamaño-boton {
	26	+ width:44px;
12	27	}
13	28	\ No newline at end of file
...	...	@@ -4,8 +4,11 @@ body {
4	4
5	5	.contenedor {
6	6	background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
7		- min-height: 600px;
8		- min-width: 800px;
	7	+ @media (min-width: 768px) {
	8	+ min-height: 600px;
	9	+ min-width: 800px;
	10	+ }
	11	+
9	12	}
10	13
11	14	.contenedor-teclado {
...	...	@@ -15,7 +18,9 @@ body {
15	18
16	19	.grilla-articulo {
17	20	background-color: rgba(0, 0, 0, 0.8);
18		- height: 430px;
	21	+ @media (min-width: 768px) {
	22	+ height: 430px;
	23	+ }
19	24	}
20	25
21	26	.crear-nota-pedido {
...	...	@@ -10,3 +10,4 @@
10	10	@import 'tabla';
11	11	@import 'teclado';
12	12	@import 'tabla-articulos';
	13	+@import 'acciones-mobile';