Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/system/mobile_id/style/error_overlay.css

@@ -0,0 +1,45 @@
+#mobileid-error-overlay {
+  display: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 2rem;
+  background-color: rgba(51, 51, 51, 0.9);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+
+#mobileid-error-overlay.show {
+  display: flex;
+}
+
+form[role=dialog] {
+  display: none;
+}
+
+form[role=dialog].show {
+  display: block;
+}
+
+form[role="dialog"][data-type="confirm"]:before {
+  content: none;
+  width: 0;
+  height: 0;
+  margin: 0;
+  display: none;
+}
+
+#mobileid-error-overlay section{
+  position: relative;
+  height: 100%;
+  padding: 14rem 0 5rem 0;
+}
+
+form[role="dialog"][data-type="confirm"] p {
+  max-height: calc(100% - 9rem);
+  overflow: scroll;
+}

gaia/apps/system/mobile_id/style/mobile_id.css

@@ -0,0 +1,436 @@
+html, body {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  font-size: 10px;
+  overflow-x: hidden !important;
+  overflow-y: hidden !important;
+  font-family: 'MozTT', sans-serif;
+  position: absolute;
+}
+
+section[role="region"] {
+  height: 100%;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+}
+
+.disabled {
+  color: #ccc;
+  text-decoration: none !important;
+  pointer-events: none;
+}
+
+.disabled *{
+  text-decoration: none !important;
+  pointer-events: none;
+}
+
+
+/*
+ * We have a 'magic' button which translates with us through the
+ * proccess. This is called 'multistate-button' or 'msb'
+ */
+
+.multistate-button {
+  width: 200%;
+
+  overflow: hidden;
+  position: absolute;
+  bottom: 1rem;
+  padding: 0;
+  margin: 0;
+
+  transition: all .3s ease;
+  
+  border: none;
+  text-decoration: none;
+  outline: none;
+  background: white;
+}
+
+.msb-button-step {
+  height: 4rem;
+  width: calc(50% - 2rem);
+
+  float: left;
+  margin: 0 1rem;
+
+  background: #00AACC;
+  outline: none;
+  border: none;
+  border-radius: 2rem;
+  line-height: 4rem;
+  text-decoration: none;
+  font-size: 1.8rem;
+  font-style: italic;
+  color: white;
+}
+
+.msb-button-step progress {
+  margin-right: 1rem;
+}
+
+/*
+ * Some buttons which have different states
+ */
+
+.states-wrapper {
+  height: 12rem;
+  transform: translateY(-4rem);
+  transition: all .3s ease;
+}
+
+.state-resend .states-wrapper div span:first-child{
+  width: 3rem;
+  height: 3rem;
+  display: inline-block;
+  vertical-align: middle;
+  background: url(images/warning.png);
+  background-repeat: no-repeat;
+  background-position: center 0.5rem;
+}
+
+
+.state-allow .states-wrapper{
+  transform: translateY(0);
+}
+.state-connecting .states-wrapper{
+  transform: translateY(-4rem);
+}
+.state-resend .states-wrapper{
+  transform: translateY(0);
+}
+.state-verify .states-wrapper{
+  transform: translateY(-4rem);
+}
+.state-verifying .states-wrapper{
+  transform: translateY(-8rem);
+}
+.state-verified > .states-wrapper{
+  transform: translateY(-12rem);
+}
+
+.state-verified {
+  background: #5F9B0A;
+  color: white;
+}
+
+.state-resend {
+  background: #B90000 !important;
+  color: white !important;
+}
+
+
+
+/*
+  We will contain the three main panels of the Mobile ID flow:
+  - [1] Selection of the phone number
+  - [2] Add verification code (if required)
+  - [3] Feedback screen
+ */
+
+#verification-code-timer {
+  visibility: hidden;
+}
+
+#verification-code-timer.show {
+  visibility: visible;
+}
+
+.panels-container {
+  height: calc(100% - 11.3rem);
+  width: 400%;
+  overflow: hidden;
+
+  transition: all .6s ease;
+}
+
+.panel {
+  height: 100%;
+  width: 25%;
+
+  float: left;
+  overflow-x: hidden !important;
+  overflow-y: scroll;
+
+  background: white;
+}
+
+p.explanation {
+  font-size: 1.9rem;
+  font-weight: 300;
+  line-height: 2.2rem;
+}
+
+div, span, p, label {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+}
+
+/*
+  [1] Selection of the phone number
+ */
+
+.msisdn-selection-panel p.explanation {
+  padding: 2rem 1rem 1rem 2rem;
+  font-size: 1.9rem;
+  font-weight: 300;
+  line-height: 2.2rem;
+}
+
+.msisdn-overflow-shield {
+  width: 100%;
+  overflow: hidden;
+}
+
+.msisdn-selection-wrapper {
+  width: 200%;
+  transition: all .3s ease;
+}
+
+.msisdn-selection-wrapper div{
+  padding: 0 2rem 1rem 2rem;
+  box-sizing: border-box;
+  float: left;
+  width: 50%;
+}
+
+/*
+ * We can select one of the pre-popopulated MSISDN 
+ */
+
+ul.phone-options-list {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  list-style: none;
+  vertical-align: baseline;
+}
+
+ul.phone-options-list li {
+  height: 5rem;
+  position: relative;
+  
+  margin: 0;
+  padding: 0;
+  
+  vertical-align: baseline;
+  font-size: 1.7rem;
+  line-height: 5.5rem;
+  border-bottom: .1rem solid #ccc;
+}
+
+ul.phone-options-list li:last-child {
+  border: none;
+}
+
+ul.phone-options-list li input {
+  display: none;
+  float: right;
+}
+
+ul.phone-options-list li span.icon {
+  width: 3rem;
+  height: 3rem;
+  float: left;
+  margin-top: 1rem;
+  margin-right: 1rem;
+  
+  background-image: url(images/simcards.png);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+ul.phone-options-list li span.sim1 {
+  background-image: url(images/simcards.png);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+ul.phone-options-list li span.sim2 {
+  background-image: url(images/simcards.png);
+  background-position: 0 -3rem;
+  background-repeat: no-repeat;
+}
+
+ul.phone-options-list li span.primary {
+  background-image: url(images/Telf_tick.png);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+
+ul.phone-options-list li span.radio-mask {
+  width: 5rem;
+  height: 100%;
+  position: absolute;
+  right: 0;
+}
+
+ul.phone-options-list li input:checked + span.radio-mask {
+  background-image: url(images/checked.png);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+#add-msisdn {
+  width: 100%;
+  
+  margin-top: 2rem;
+  font-size: 1.5rem;
+  color: #858585;
+  text-decoration: underline;
+  font-style: italic;
+  text-align: center;
+  font-weight: 300;
+}
+
+/*
+  If we type the MSISDN manually
+*/
+
+#do-automatic-msisdn {
+  width: 100%;
+  
+  padding: 1rem;
+  box-sizing: border-box;
+  font-size: 1.5rem;
+  color: #858585;
+  text-decoration: underline;
+  font-style: italic;
+  text-align: center;
+  font-weight: 300;
+}
+
+ul.msisdn-form {
+  width: 100%;
+  
+  margin-top: 6rem;
+  padding: 0;
+}
+
+ul.msisdn-form li{
+  display: inline-block;
+  vertical-align: top;
+}
+
+ul.msisdn-form li{
+  display: inline-block;
+}
+
+ul.msisdn-form li button{
+  height: 4rem;
+  width: 5rem;
+  padding-right: 2rem;
+  text-align: center;
+  line-height: 4.2rem;
+}
+
+ul.msisdn-form li input{
+  height: 4rem;
+  font-size: 2.2rem;
+}
+
+ul.msisdn-form li:last-child{
+  width: calc(100% - 7.3rem);
+}
+
+.button-select-wrapper {
+  width: 7rem !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  overflow: hidden !important;
+  text-overflow: unset !important;
+}
+
+.button-select-wrapper select {
+  width: calc(100% + 1.9rem) !important;
+  font-size: 1.6rem;
+  text-align: left;
+  height: 100%;
+  background: none;
+  border: none;
+  padding-left: .6rem !important;
+  box-sizing: border-box;
+}
+
+/*
+  [2] Add verification code (if required)
+ */
+
+.verification-panel {
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.verification-panel p {
+  padding: 0;
+}
+
+#verification-code {
+  width: 100%;
+  height: 5rem;
+
+  margin-top: 4rem;
+  margin-bottom: 2rem;
+  font-size: 3rem;
+  text-align: center;
+}
+
+input.error {
+  border: .1rem solid #B90000;
+  animation: error-dance .5s;
+  animation-iteration-count: 2;
+}
+
+@keyframes error-dance {
+  0% { transform: rotate(0); }
+  25% { transform: rotate(1deg); }
+  50% { transform: rotate(0); }
+  75% { transform: rotate(1deg); }
+  100% { transform: rotate(0deg); }
+}
+
+
+
+#verification-timer {
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+/*
+  [3] Feedback screen
+ */
+
+.done-panel {
+  background-repeat: no-repeat;
+  background-size: 49%;
+  background-position: center 60%;
+}
+
+.done-panel-gif {
+  background-image: url(images/animation.gif);
+}
+
+.done-panel p {
+  padding: 2rem 1rem;
+  box-sizing: border-box;
+  font-size: 2.2rem;
+  text-align: center;
+  font-weight: 300;
+}
+
+#legend {
+  text-align: center;
+  display: block;
+  padding-top: 0.8rem;
+  padding-left: 1.3rem;
+}