breakfast-ui/src/components/TextBoxes/MaterialTextBox/MaterialTextBox.modules.css

Your tasty component library

.MaterialTextBox {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.MaterialTextBox label {
  position: absolute;
  bottom: 10%;
  margin: 0 0 0 .8rem;
  font-size: 1rem;
  pointer-events: none;
}

@-webkit-keyframes animUp {
  from {
    bottom: 10%;
    font-size: 1rem;
  }
  to {
    bottom: 67%;
    font-size: .8rem;
  }
}

@keyframes animUp {
  from {
    bottom: 10%;
    font-size: 1rem;
  }
  to {
    bottom: 67%;
    font-size: .8rem;
  }
}

@-webkit-keyframes animDown {
  from {
    bottom: 67%;
    font-size: .8rem;
  }
  to {
    bottom: 10%;
    font-size: 1rem;
  }
}

@keyframes animDown {
  from {
    bottom: 67%;
    font-size: .8rem;
  }
  to {
    bottom: 10%;
    font-size: 1rem;
  }
}

.MaterialTextBox input {
  width: 250px;
  padding: 1.8rem 1rem .5rem .7rem;
  display: block;
  margin: 0;
  font-size: 1.5rem;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #737373;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.MaterialTextBox input:focus {
  border-radius: .5rem;
  outline: none;
}

.MaterialTextBoxSection small {
  display: block;
  color: Red;
  font-size: 1rem;
  margin: .5rem .5rem;
}
/*# sourceMappingURL=MaterialTextBox.modules.css.map */