Cambiado clase css del teclado virtual para que aparezca siempre debajo de la pantalla.

Marcelo Puebla
1 parent 600926a0fe
Showing 1 changed file with 17 additions and 12 deletions Show diff stats
src/sass/_teclado.scss
@@ -6,16 +6,19 @@
     -ms-user-select: none;
     user-select: none;
     margin: auto;
-    width: 855px;
-    position: inherit;
+    width: 60%;
+    position: absolute;
     height: auto;
     border: 1px solid rgba(255, 128, 0, .4);
     background-color: rgba(0, 0, 0, .3);
     bottom: 5px;
+    z-index: 100000;
     table {
+        width: auto;
+        height: auto;
+        margin: 0px auto;
         border-spacing: 10px;
         border-collapse: separate;
-        z-index: 100000;
         td {
             touch-action: none;
         }
@@ -23,14 +26,15 @@
  
     .letter {
         background-color: #bdbdbd;
-        box-shadow: 2px 2px 3px #555555;
-        width: 47px;
-        height: 50px;
+        box-shadow: 2px 2px 3px #555555;        
+        padding: 10px;
+        width: auto;
+        height: auto;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
-        font-size: 22px;
+        font-size: 80%;
  
         &:hover {
             background-color: #fafafa;
@@ -43,13 +47,14 @@
     .number {
         background-color: #bdbdbd;
         box-shadow: 2px 2px 3px #555555;
-        width: 47px;
-        height: 35px;
+        padding: 10px;
+        width: auto;
+        height: auto;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
-        font-size: 22px;
+        font-size: 80%;
  
         &:hover {
             background-color: #fafafa;
@@ -61,7 +66,7 @@
     }
  
     .margin {
-        width: 40px;
-        height: 50px;
+        width: 5%;
+        height: 5%;
     }
 }
...	...	@@ -6,16 +6,19 @@
6	6	-ms-user-select: none;
7	7	user-select: none;
8	8	margin: auto;
9		- width: 855px;
10		- position: inherit;
	9	+ width: 60%;
	10	+ position: absolute;
11	11	height: auto;
12	12	border: 1px solid rgba(255, 128, 0, .4);
13	13	background-color: rgba(0, 0, 0, .3);
14	14	bottom: 5px;
	15	+ z-index: 100000;
15	16	table {
	17	+ width: auto;
	18	+ height: auto;
	19	+ margin: 0px auto;
16	20	border-spacing: 10px;
17	21	border-collapse: separate;
18		- z-index: 100000;
19	22	td {
20	23	touch-action: none;
21	24	}
...	...	@@ -23,14 +26,15 @@
23	26
24	27	.letter {
25	28	background-color: #bdbdbd;
26		- box-shadow: 2px 2px 3px #555555;
27		- width: 47px;
28		- height: 50px;
	29	+ box-shadow: 2px 2px 3px #555555;
	30	+ padding: 10px;
	31	+ width: auto;
	32	+ height: auto;
29	33	text-align: center;
30	34	font-family: "arial";
31	35	cursor: pointer;
32	36	color: #000;
33		- font-size: 22px;
	37	+ font-size: 80%;
34	38
35	39	&:hover {
36	40	background-color: #fafafa;
...	...	@@ -43,13 +47,14 @@
43	47	.number {
44	48	background-color: #bdbdbd;
45	49	box-shadow: 2px 2px 3px #555555;
46		- width: 47px;
47		- height: 35px;
	50	+ padding: 10px;
	51	+ width: auto;
	52	+ height: auto;
48	53	text-align: center;
49	54	font-family: "arial";
50	55	cursor: pointer;
51	56	color: #000;
52		- font-size: 22px;
	57	+ font-size: 80%;
53	58
54	59	&:hover {
55	60	background-color: #fafafa;
...	...	@@ -61,7 +66,7 @@
61	66	}
62	67
63	68	.margin {
64		- width: 40px;
65		- height: 50px;
	69	+ width: 5%;
	70	+ height: 5%;
66	71	}
67	72	}