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