Florencia Cazzola / wrapper-demo

Download as
Browse Code ยป

Commit 96bf0b9a03f2e73cc8b22b11b94c9e44b4a967fd

Authored by Pablo Marco del Pont
2 parents 935689feff 3db0aec2ac
Exists in master and in 1 other branch develop

Merge branch 'master' into 'master' 

Master

See merge request Wrappers/wrapper-demo!42
Showing 1 changed file   Show diff stats
src/sass/_teclado.scss
Diff comments   View file @ 96bf0b9
1 .keyboard { 1 .keyboard {
2 -webkit-touch-callout: none; 2 -webkit-touch-callout: none;
3 -webkit-user-select: none; 3 -webkit-user-select: none;
4 -khtml-user-select: none; 4 -khtml-user-select: none;
5 -moz-user-select: none; 5 -moz-user-select: none;
6 -ms-user-select: none; 6 -ms-user-select: none;
7 user-select: none; 7 user-select: none;
8 width: 62%; 8 margin: auto;
9 width: 855px;
10 position: inherit;
9 height: auto; 11 height: auto;
10 margin-left: 13%;
11 margin-top: -19%;
12 position: absolute;
13 border: 1px solid rgba(255, 128, 0, .4); 12 border: 1px solid rgba(255, 128, 0, .4);
14 background-color: rgba(0, 0, 0, .3); 13 background-color: rgba(0, 0, 0, .3);
15 bottom: 5px; 14 bottom: 5px;
16 table { 15 table {
17 border-spacing: 10px; 16 border-spacing: 10px;
18 border-collapse: separate; 17 border-collapse: separate;
19 z-index: 100000; 18 z-index: 100000;
20 td { 19 td {
21 touch-action: none; 20 touch-action: none;
22 } 21 }
23 } 22 }
24 23
25 .letter { 24 .letter {
26 background-color: #bdbdbd; 25 background-color: #bdbdbd;
27 box-shadow: 2px 2px 3px #555555; 26 box-shadow: 2px 2px 3px #555555;
28 width: 47px; 27 width: 47px;
29 height: 50px; 28 height: 50px;
30 text-align: center; 29 text-align: center;
31 font-family: "arial"; 30 font-family: "arial";
32 cursor: pointer; 31 cursor: pointer;
33 color: #000; 32 color: #000;
34 font-size: 22px; 33 font-size: 22px;
35 34
36 &:hover { 35 &:hover {
37 background-color: #fafafa; 36 background-color: #fafafa;
38 } 37 }
39 &:active { 38 &:active {
40 background-color: #999; 39 background-color: #999;
41 color: #fff; 40 color: #fff;
42 } 41 }
43 } 42 }
44 .number { 43 .number {
45 background-color: #bdbdbd; 44 background-color: #bdbdbd;
46 box-shadow: 2px 2px 3px #555555; 45 box-shadow: 2px 2px 3px #555555;
47 width: 47px; 46 width: 47px;
48 height: 35px; 47 height: 35px;
49 text-align: center; 48 text-align: center;
50 font-family: "arial"; 49 font-family: "arial";
51 cursor: pointer; 50 cursor: pointer;
52 color: #000; 51 color: #000;
53 font-size: 22px; 52 font-size: 22px;
54 53
55 &:hover { 54 &:hover {
56 background-color: #fafafa; 55 background-color: #fafafa;
57 } 56 }
58 &:active { 57 &:active {
59 background-color: #999; 58 background-color: #999;
60 color: #fff; 59 color: #fff;
61 } 60 }
62 } 61 }
63 62
64 .margin { 63 .margin {
65 width: 40px; 64 width: 40px;
66 height: 50px; 65 height: 50px;
67 } 66 }
68 } 67 }
69 .teclado-activar { 68 .teclado-activar {
70 background-color: #17d236; 69 background-color: #17d236;
71 } 70 }
72 .boton-activar-teclado { 71 .boton-activar-teclado {
73 margin-top: -10%; 72 margin-top: -10%;
74 position: absolute; 73 position: absolute;
75 z-index: 100000; 74 z-index: 100000;