1 files changed, 301 insertions, 0 deletions
diff --git a/apps/system/emergency-call/style/keypad.css b/apps/system/emergency-call/style/keypad.css
new file mode 100644
index 0000000..ea9fb90
--- /dev/null
+++ b/apps/system/emergency-call/style/keypad.css
@@ -0,0 +1,301 @@
+/*
+ *  The code is being shared between system/emergency-call/js/keypad.js
+ *  and dialer/js/keypad.js. Be sure to update both file when you commit!
+ *
+ */
+
+.keypad-text {
+  font-size: -moz-calc(6*0.226rem);
+  color: #96AAB4;
+}
+
+#keyboard-view {
+  width: 100%;
+  height: 100%;
+}
+
+#fake-phone-number-view {
+  position: absolute;
+  line-height: 0;
+  visibility: hidden;
+}
+
+#phone-number-view-container {
+  width: 100%;
+  height: -moz-calc(100% - 34.5rem);
+  background: #242B36;
+  text-align: center;
+  display: table;
+  table-layout: fixed;
+  border-spacing: 1.5rem 0rem;
+  font-family: 'MozTT';
+  font-weight: 300;
+}
+
+#phone-number-view-container.keypad-visible {
+  height: -moz-calc(100% - 35rem);
+  visibility: hidden;
+}
+
+#phone-number-view {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: none;
+  -moz-user-select: none;
+}
+
+#keypad-delete {
+  text-align: center;
+  width: 4rem;
+  visibility: hidden;
+}
+
+#keypad-delete:active {
+  opacity: 0.7;
+}
+
+#keypad-delete > div {
+  width: 3.8rem;
+  height: 2.8rem;
+  background: url('images/dialer_icon_delete.png') ;
+  background-size: 3.8rem 2.8rem;
+  background-repeat: no-repeat;
+}
+
+#keyboard-container {
+  width: 100%;
+  height: 34.5rem;
+}
+
+#keypad {
+  background: -moz-linear-gradient(top, #191E25 0%, #080B0D 100%);
+  height: -moz-calc(100% - 10rem);
+  width: 100%;
+  display: table;
+  table-layout: fixed;
+}
+
+.keypad-cell {
+  display: table-cell;
+  border-right: 1px solid #6F6F6F;
+  border-top: 1px solid #6F6F6F;;
+}
+
+.keypad-cell:last-child {
+  border-right: 0;
+}
+
+.keypad-key {
+  border: 0;
+  border-bottom: 1px solid #6F6F6F;
+  height: 7rem;
+  vertical-align: middle;
+  position: relative;
+}
+
+.keypad-key:active {
+  background: black;
+  opacity: 0.7;
+}
+
+.keypad-key-label-container {
+  width: 100%;
+  height: 100%;
+  display: table;
+}
+
+.keypad-key-label {
+  display: table-cell;
+  padding-left: 1.5rem;
+  vertical-align: middle;
+}
+
+.keypad-key-label *,
+#keypad-delete * {
+  pointer-events: none;
+}
+
+.keypad-key-label-centered {
+  padding-left: 0;
+  text-align: center;
+}
+
+.font-size-plus {
+  font-size: 2rem;
+}
+
+.keypad-subicon {
+  background-repeat: no-repeat;
+  background-position: center bottom;
+
+  -moz-user-select: none;
+  pointer-events: none;
+
+  position: absolute;
+  left: 3.75rem;
+  bottom: 0.75rem;
+
+  width: 3rem;
+  height: 3rem;
+}
+
+.voicemail {
+  background-image: url('images/voicemail.png');
+}
+
+.asterisk {
+  background-image: url('images/asterisk.png');
+  background-repeat: no-repeat;
+  height: 3rem;
+  width: 3rem;
+  background-size: 3rem 3rem;
+  background-position: center;
+  margin: auto;
+  pointer-events: none;
+}
+
+.sharp {
+  background-image: url('images/sharp.png');
+  background-repeat: no-repeat;
+  height: 3rem;
+  width: 3rem;
+  background-size: 3rem 3rem;
+  background-position: center;
+  margin: auto;
+  pointer-events: none;
+}
+
+#keypad-callbar {
+  background: black;
+  height: 6.5rem;
+  width: 100%;
+  display: table;
+  table-layout: fixed;
+  border-spacing: 1rem 1rem;
+}
+
+#keypad-callbar-add-contact,
+#keypad-callbar-cancel {
+  display: table-cell;
+  width: 9rem;
+  background: -moz-linear-gradient(top, #242b36 0%, #19191a 100%);
+  border: .1rem solid #242B36;
+  border-radius: .2rem;
+  vertical-align: middle;
+}
+
+#keypad-callbar-cancel {
+  width: 10rem;
+}
+
+#keypad-callbar-cancel:active {
+  opacity: 0.7;
+}
+
+#keypad-callbar-cancel > div {
+  text-align: center;
+  font: 2rem 'MozTT';
+}
+
+#keypad-callbar-call-action {
+  display: table-cell;
+  width: 100%;
+  background: #84c82c;
+  border: 0;
+  border-radius: .2rem;
+  background: -moz-linear-gradient(top, #84c82c 0%, #5f9b0a 100%);
+  vertical-align: middle;
+}
+
+#keypad-callbar-call-action:active {
+  opacity: 0.7;
+}
+
+.icon-add-contact {
+  margin: auto;
+  width: 4rem;
+  height: 4rem;
+  background-image: url("images/ActionIcon_40x40_addcontact.png");
+  background-repeat: no-repeat;
+  background-size: 4rem 4rem;
+  background-position: center;
+}
+
+#keypad-callbar-call-action > div {
+  margin: auto;
+  width: 4rem;
+  height: 4rem;
+  background-image: url("images/ActionIcon_40x40_pickup.png");
+  background-repeat: no-repeat;
+  background-size: 4rem 4rem;
+  background-position: center;
+}
+
+#keypad-hidebar {
+  background: rgba(0,0,0,.8);
+  opacity: 1.0;
+}
+
+#keypad-hidebar-hang-up-action-wrapper {
+  float: left;
+  height: 6.5rem;
+  width: 50%;
+}
+
+#keypad-hidebar-hide-keypad-action-wrapper {
+  height: 6.5rem;
+  width: 50%;
+}
+
+.keypad-hidebar-button {
+  height: 4rem;
+  border: 0;
+  border-radius:.3rem;
+  display: block;
+}
+
+#keypad-hidebar-hang-up-action {
+  background: -moz-linear-gradient(top, #ff0000 0%, #ce0000 100%);
+  opacity: 1.0;
+  margin: 1rem .5rem 1.5rem 1.5rem;
+}
+
+#keypad-hidebar-hang-up-action > div {
+  margin: 0 auto;
+  background-image: url('images/ActionIcon_40x40_hangup.png');
+  background-repeat: no-repeat;
+  background-size: 4rem 4rem;
+  background-position: center;
+  width: 4rem;
+  height: 4rem;
+}
+
+#keypad-hidebar-hide-keypad-action {
+  background: -moz-linear-gradient(top, #6A6A6A 0%, #3E3E3E 100%);
+  opacity: 1.0;
+  margin: 1rem 1.5rem 1.5rem .5rem;
+}
+
+#keypad-hidebar-hide-keypad-action > div {
+  margin: -moz-calc((4rem - 3rem)/2) auto;
+  background-image: url('images/ActionIcons_30x30_dismiss_keyboard.png');
+  background-repeat: no-repeat;
+  background-size: 3rem 3rem;
+  background-position: center;
+  width: 3rem;
+  height: 3rem;
+}
+
+.phone-number-font {
+  font-size:-moz-calc(18*0.226rem);
+  color: white;
+  font-family:'MozTT';
+}
+
+.keypad-number {
+  font-size: -moz-calc(25*0.226rem);
+  color: white;
+}
+