Marcelo Puebla · Marcelo Puebla · Marcelo Puebla · Marcelo Puebla · Martin Macola · Martin Macola
Showing 5 changed files Show diff stats
index.html
src/sass/_contenedor.scss
src/sass/_grid.scss
src/sass/_login.scss
src/sass/_tabla.scss
@@ -117,10 +117,9 @@
             <foca-teclado
                 ng-show="usarTeclado && mostrarTeclado"
                 alfanumeric="true"
-                numeric="true"
-                >
+                numeric="true">
             </foca-teclado>
         </div>
     </body>
-    
+
 </html>
 body {
     background: linear-gradient(0deg, hsl(0, 0%, 70%),hsl(0, 0%, 90%));
+    height: 100vh;
 }
  
 .contenedor {
@@ -10,7 +10,7 @@
 .yellow {
   max-width: unset !important;
   >div {
-    background: yellow !important;
+    background: rgb(125, 152, 241) !important;
     font-weight: bold;
   }
 }
-.login {
-    background-color: #bdbdbd;
-    border: 1px solid #000000;
-    border-radius: 3px;
-    height: calc(193px + 1em);
-    left: calc(50% - 130px);
-    opacity: 0.7;
-    position: absolute;
-    text-align: center;
-    top: 190px;
-    width: 260px;
-    &-titulo {
-        border-bottom: 1px solid #ffffff;
-        padding: 5px 0;
-    }
-    &-campo {
-        label {
-            display: block;
-            font-size: 12px;
-            margin: 5px 0 0;
-        }
-        input {
-            -moz-border-radius: 10px;
-            -khtml-border-radius: 10px;
-            -webkit-border-radius: 10px;
-            -webkit-appearance: none;
-            padding-right: 5%;
-            padding-left: 5%;
-            border-radius: 10px;
-            outline: 0;
-            border-color: transparent;
-            &:focus {
-                border-color: #ff9900;
-            }
-        }
+.bg-gradient-login {
+    background: linear-gradient(0, #ffffff, #e6e6e6);
+}
+
+.login-small-text {
+    font-size: 12px;
+}
+
+@media (min-width: 768px) {
+    .img-login {
+        width: 211px;
     }
-    
-    &-button {
-        width: 80%;        
-        background-color: #2872AD;
-        color: white;
-        &:hover{
-            background-color: #a7743d;
-            color: white
-        }
-        &:focus{
-            color: white;
-        }
+}
+
+@media (max-width: 768px) {
+    .img-login {
+        width: 158px;
     }
+}
  
-    &-alerta-error {
-        width: 260px;
-        left: calc(50% - 130px);
-        top: calc(383px + 1.5em);
+.input-icon {
+    width: 100%;
+    pointer-events: none;
+    float: right;
+    position: absolute;
+    align-self: center;
+    z-index: 10;
+    div {
+        pointer-events: all;
+        float: right;
     }
 }
@@ -4,7 +4,7 @@
     }
     &-celda-total {
         color: #000000;
-        background-color: #FF9900;
+        background-color: #2872AD;
     }
     &-title{
         background-color: #67615e;
...	...	@@ -117,10 +117,9 @@
117	117	<foca-teclado
118	118	ng-show="usarTeclado && mostrarTeclado"
119	119	alfanumeric="true"
120		- numeric="true"
121		- >
	120	+ numeric="true">
122	121	</foca-teclado>
123	122	</div>
124	123	</body>
125		-
	124	+
126	125	</html>
1	1	body {
2	2	background: linear-gradient(0deg, hsl(0, 0%, 70%),hsl(0, 0%, 90%));
	3	+ height: 100vh;
3	4	}
4	5
5	6	.contenedor {
...	...	@@ -10,7 +10,7 @@
10	10	.yellow {
11	11	max-width: unset !important;
12	12	>div {
13		- background: yellow !important;
	13	+ background: rgb(125, 152, 241) !important;
14	14	font-weight: bold;
15	15	}
16	16	}
1		-.login {
2		- background-color: #bdbdbd;
3		- border: 1px solid #000000;
4		- border-radius: 3px;
5		- height: calc(193px + 1em);
6		- left: calc(50% - 130px);
7		- opacity: 0.7;
8		- position: absolute;
9		- text-align: center;
10		- top: 190px;
11		- width: 260px;
12		- &-titulo {
13		- border-bottom: 1px solid #ffffff;
14		- padding: 5px 0;
15		- }
16		- &-campo {
17		- label {
18		- display: block;
19		- font-size: 12px;
20		- margin: 5px 0 0;
21		- }
22		- input {
23		- -moz-border-radius: 10px;
24		- -khtml-border-radius: 10px;
25		- -webkit-border-radius: 10px;
26		- -webkit-appearance: none;
27		- padding-right: 5%;
28		- padding-left: 5%;
29		- border-radius: 10px;
30		- outline: 0;
31		- border-color: transparent;
32		- &:focus {
33		- border-color: #ff9900;
34		- }
35		- }
	1	+.bg-gradient-login {
	2	+ background: linear-gradient(0, #ffffff, #e6e6e6);
	3	+}
	4	+
	5	+.login-small-text {
	6	+ font-size: 12px;
	7	+}
	8	+
	9	+@media (min-width: 768px) {
	10	+ .img-login {
	11	+ width: 211px;
36	12	}
37		-
38		- &-button {
39		- width: 80%;
40		- background-color: #2872AD;
41		- color: white;
42		- &:hover{
43		- background-color: #a7743d;
44		- color: white
45		- }
46		- &:focus{
47		- color: white;
48		- }
	13	+}
	14	+
	15	+@media (max-width: 768px) {
	16	+ .img-login {
	17	+ width: 158px;
49	18	}
	19	+}
50	20
51		- &-alerta-error {
52		- width: 260px;
53		- left: calc(50% - 130px);
54		- top: calc(383px + 1.5em);
	21	+.input-icon {
	22	+ width: 100%;
	23	+ pointer-events: none;
	24	+ float: right;
	25	+ position: absolute;
	26	+ align-self: center;
	27	+ z-index: 10;
	28	+ div {
	29	+ pointer-events: all;
	30	+ float: right;
55	31	}
56	32	}
...	...	@@ -4,7 +4,7 @@
4	4	}
5	5	&-celda-total {
6	6	color: #000000;
7		- background-color: #FF9900;
	7	+ background-color: #2872AD;
8	8	}
9	9	&-title{
10	10	background-color: #67615e;