implementación de teclado

Eric Fernandez
1 parent e05577ac08
Showing 1 changed file with 68 additions and 0 deletions Show diff stats
src/sass/_teclado.scss
@@ -0,0 +1,68 @@
+
+.keyboard {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    width: 70%;
+    height: 60%;
+    margin: auto;
+	margin-top: -6%;
+    table {
+        border-spacing: 10px;
+        border-collapse: separate;
+        z-index: 100000;
+        td{
+            touch-action: none;
+        }
+    }
+
+    .letter {
+        background-color: #bdbdbd;
+        box-shadow: 2px 2px 3px #555555;
+        width: 47px;
+        height: 50px;
+        text-align: center;
+        font-family: "arial";
+        cursor: pointer;
+        color: #000;
+        font-size: 22px;
+
+        &:hover{
+            background-color: #fafafa;
+        }
+        &:active {
+            background-color: #999;
+            color: #fff;
+        }
+    }
+    .number {
+        background-color: #bdbdbd;
+        box-shadow: 2px 2px 3px #555555;
+        width: 47px;
+        height: 35px;
+        text-align: center;
+        font-family: "arial";
+        cursor: pointer;
+        color: #000;
+        font-size: 22px;
+
+        &:hover{
+            background-color: #fafafa;
+        }
+        &:active {
+            background-color: #999;
+            color: #fff;
+        }
+    }
+
+    .margin {
+        width: 40px;
+        height: 50px;
+    }
+}
+.teclado-activar {
+    background-color: #17d236 !important;
+}
 \ No newline at end of file
...	...	@@ -0,0 +1,68 @@
	1	+
	2	+.keyboard {
	3	+ -webkit-touch-callout: none;
	4	+ -webkit-user-select: none;
	5	+ -khtml-user-select: none;
	6	+ -moz-user-select: none;
	7	+ -ms-user-select: none;
	8	+ user-select: none;
	9	+ width: 70%;
	10	+ height: 60%;
	11	+ margin: auto;
	12	+ margin-top: -6%;
	13	+ table {
	14	+ border-spacing: 10px;
	15	+ border-collapse: separate;
	16	+ z-index: 100000;
	17	+ td{
	18	+ touch-action: none;
	19	+ }
	20	+ }
	21	+
	22	+ .letter {
	23	+ background-color: #bdbdbd;
	24	+ box-shadow: 2px 2px 3px #555555;
	25	+ width: 47px;
	26	+ height: 50px;
	27	+ text-align: center;
	28	+ font-family: "arial";
	29	+ cursor: pointer;
	30	+ color: #000;
	31	+ font-size: 22px;
	32	+
	33	+ &:hover{
	34	+ background-color: #fafafa;
	35	+ }
	36	+ &:active {
	37	+ background-color: #999;
	38	+ color: #fff;
	39	+ }
	40	+ }
	41	+ .number {
	42	+ background-color: #bdbdbd;
	43	+ box-shadow: 2px 2px 3px #555555;
	44	+ width: 47px;
	45	+ height: 35px;
	46	+ text-align: center;
	47	+ font-family: "arial";
	48	+ cursor: pointer;
	49	+ color: #000;
	50	+ font-size: 22px;
	51	+
	52	+ &:hover{
	53	+ background-color: #fafafa;
	54	+ }
	55	+ &:active {
	56	+ background-color: #999;
	57	+ color: #fff;
	58	+ }
	59	+ }
	60	+
	61	+ .margin {
	62	+ width: 40px;
	63	+ height: 50px;
	64	+ }
	65	+}
	66	+.teclado-activar {
	67	+ background-color: #17d236 !important;
	68	+}
0	69	\ No newline at end of file