HannahCarney/till_tech_test

View on GitHub
public/css/tillScreen.css

Summary

Maintainability
Test Coverage
body {
  overflow-x: hidden;
  overflow-y: hidden;
}

select {
  width: 10em;
}

.x {
  padding-left:.2em;
  padding-right:.2em;
  padding-top:.1em;
  padding-bottom:.1em;
  font-size: .7em;
}

#tillNumbers {
  position:absolute;
  z-index:1;
  background: none;
  left:1%;
  top:35%;
  width:100%;
  height:100%;
  font-size: .7em;
}

#errorTill {
  position:absolute;
  z-index:1;
  background: none;
  left:1%;
  top:33%;
  width:100%;
  height:100%;
  font-size:.8em;
}

#totalPrice {
  position:absolute;
  z-index:1;
  background: none;
  left:1%;
  top:50%;
  width:100%;
  height:100%;
  font-size:1em;
}

#tax {
  position:absolute;
  z-index:1;
  background: none;
  left:1%;
  top:52%;
  width:100%;
  height:100%;
  font-size:1em;
}

#afterTax {
  position:absolute;
  z-index:1;
  background: none;
  left:1%;
  top:54%;
  width:100%;
  height:100%;
  font-size:1em;
}

.numberBox {
  width:100%;
  height:100%;
  text-align:center;
}


#background {
  position:absolute;
  z-index:0;
  left:0;
  top:0;
  width:100%;
  height:100%
}

#backgroundimage {
  width:100%;
  height:100%
}

.entryBox {
  width:100%;
  height:100%;
  text-align:center;
}

#entryTill {
  position:absolute;
  z-index:1;
  background: none;
  left:0;
  top:69%;
  left:0;
  width:100%;
  height:100%;
}

#shopperItem {
  width:2.5em;
}

#addToRecepit {
  position:absolute;
  z-index:1;
  background: none;
  left:0;
  top:76%;
  width:100%;
  height:100%;
}

#quantityInput {
  width: 2.1em;
}

.payForm {
  position:absolute;
  z-index:1;
  background: none;
  left:0;
  top:69%;
  width:100%;
  height:100%;
}

.nextCustomerForm {
  width:100%;
  height:100%;
  text-align:center;
}


#payInput {
  width: 5em;
}

@media (max-width: 600px) {
  #quantity {
    font-size:1px;
  }
  select {
    width: 5em;
  }
}

@media (max-width: 399px) {
   .btn-mini {
    width:4.5em;
  }
}

@media (max-height: 350px) {
   #addToRecepit {
    top:52%;
    font-size:10px;
  }
}

@-ms-viewport{
  width: device-width;
}