popup.css

@import url('https://fonts.googleapis.com/css?family=Varela+Round');

body {
  margin: 0;
  padding: 0;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.status {
  position: relative;
  height: 1em;
  line-height: 1em;
  padding: .5em;
  padding-left: 2em;
  transition: color 500ms;
}
.status:before, .status:after {
  content: '';
  display: inline-block;
  position: absolute;
  transition: all 500ms;
}
.status.-pending {
  color: #666;
}
.status.-pending:before, .status.-pending:after {
  background: #888;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.status.-pending:before {
  width: .25em;
  height: .25em;
  top: .5em;
  left: .875em;
  border-radius: .125em;
  transform-origin: 50% .5em;
}
.status.-pending:after {
  width: .25em;
  height: .25em;
  top: 1.25em;
  left: .875em;
  border-radius: .125em;
  transform-origin: 50% -.25em;
}
.status.-success {
  color: #368;
}
.status.-success:before, .status.-success:after {
  background: #6cf;
  border-radius: .125em;
}
.status.-success:before {
  width: .25em;
  height: 1em;
  top: .5em;
  left: .875em;
  transform-origin: 50% .875em;
  transform: translate(-.177em, -.11em) rotate(.125turn);
}
.status.-success:after {
  width: .25em;
  height: .5em;
  top: 1em;
  left: .875em;
  transform-origin: 50% .375em;
  transform: translate(-.177em, -.11em) rotate(-.125turn);
}
.status.-failure {
  color: #802;
}
.status.-failure:before, .status.-failure:after {
  background: #f04;
  border-radius: .125em;
}
.status.-failure:before {
  width: .25em;
  height: 1em;
  top: .5em;
  left: .875em;
  transform: rotate(.125turn);
}
.status.-failure:after {
  width: .25em;
  height: 1em;
  top: .5em;
  left: .875em;
  transform: rotate(-.125turn);
}
.popup {
  font-family: 'Varela Round', sans-serif;
  font-size: 100%;
  background: #fff;
  color: #333;
  width: 550px;
  user-select: none;
}
header {
  padding: .5rem;
  position: relative;
}
header h1 {
  margin: 0;
  font-size: .75rem;
  text-align: center;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
}
main {
  background: #eee;
  padding: .5rem 1rem;
}
.form-field {
  display: flex;
  margin-bottom: .5rem;
  align-items: flex-top;
}
.form-field:last-child {
  margin-bottom: 0;
}
.form-field label {
  font-size: .875rem;
  padding-top: .25rem;
  margin-top: 1px;
  white-space: nowrap;
  position: relative;
}
.form-field label:first-of-type {
  flex-grow: 0;
  flex-basis: 8rem;
}
.form-field label.-required:before {
  content: '';
  position: absolute;
  left: -.5rem;
  top: 50%;
  margin-top: -.15rem;
  display: inline-block;
  background: #f60;
  width: .3rem;
  height: .3rem;
  border-radius: .15rem;
}
.form-field input, .form-field ._select-wrapper, .form-field textarea, .form-field ._filler, .form-field fieldset {
  flex-grow: 1;
}
.form-field ._filler {
  padding: .25em;
}
.form-field fieldset {
  margin: 0;
  border: none;
  padding: 0;
}
.form-field.-multi input, .form-field.-multi ._filler {
  width: 0;
  margin-right: .5rem;
}
.form-field.-multi label:not(:first-child) {
  width: 0;
  margin-right: .5rem;
  flex-grow: 1;
  left: .5rem;
}
.form-field.-multi input:last-child, .form-field.-multi ._filler:last-child {
  margin-right: 0;
}
.form-field input, .form-field select, .form-field textarea {
  font-size: .875rem;
  font-family: 'Varela Round', sans-serif;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: .25em;
  color: #333;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: #4af;
}
._select-wrapper {
  display: flex;
  position: relative;
}
._select-wrapper:before, ._select-wrapper:after {
  content: '';
  display: inline-block;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: .5rem;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  pointer-events: none;
}
._select-wrapper:before {
  margin-top: -3px;
  border-top-color: #333;
  opacity: .75;
}
._select-wrapper:after {
  margin-top: -5px;
  border-top-color: #fff;
}
._select-wrapper:hover:before {
  opacity: 1;
}
._select-wrapper select {
  width: 0;
  flex: 1;
  -webkit-appearance: none;
  border-radius: 0;
  position: relative;
  padding-right: 1.75rem;
  background: #fff;
}
._select-wrapper select:enabled {
  cursor: pointer;
}
._select-wrapper select:disabled {
  color: #aaa;
}
._checkbox-wrapper {
  position: relative;
}
._checkbox-wrapper input {
  position: absolute;
  left: -9999px;
}
._checkbox-wrapper label {
  cursor: pointer;
  display: flex;
  align-items: center;
}
._checkbox-wrapper label:before {
  content: '';
  background: #fff;
  transition: background-color 125ms;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: inline-block;
  width: 2rem;
  height: 1rem;
  border-radius: .5rem;
  margin-right: .25rem;
}
._checkbox-wrapper label:after {
  content: '';
  width: 1rem;
  height: 1rem;
  display: inline-block;
  border-radius: .5rem;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-sizing: border-box;
  background-color: #666;
  position: absolute;
  margin-top: 1px;
  left: 0;
  transition: left 125ms, background-color 125ms, opacity 125ms;
  opacity: .75;
}
._checkbox-wrapper label:hover:after {
  opacity: 1;
}
._checkbox-wrapper input:checked + label:before {
  background-color: #6cf;
  border-color: #6cf;
}
._checkbox-wrapper input:checked + label:after {
  left: 1rem;
  background-color: #008;
}
._checkbox-wrapper input:focus + label:before {
  border-color: #4af;
}
.form-message {
  font-size: .75rem;
  margin-left: 8rem;
  margin-bottom: .5rem;
  margin-top: -.25rem;
  position: relative;
  color: #f60;
}
.form-footnote {
  font-size: .75rem;
  color: #777;
  position: relative;
}
.form-footnote:before {
  content: '';
  position: absolute;
  left: -.5rem;
  top: 50%;
  margin-top: -.15rem;
  display: inline-block;
  background: #f60;
  width: .3rem;
  height: .3rem;
  border-radius: .15rem;
}
footer {
  padding: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
footer button {
  font-family: 'Varela Round', sans-serif;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid transparent;
  margin: 0;
  padding: .5rem 1rem;
  background: #6cf;
  color: #008;
  border-radius: .25rem;
  transition: background-color 250ms, color 250ms;
}
footer button:disabled {
  background: #eee;
  color: #aaa;
}
footer button:enabled {
  cursor: pointer;
}
footer button:enabled:hover {
  background: #8df;
  color: #00a;
}
footer button:focus {
  outline: none;
  border-color: #4af;
}
footer #status {
  position: absolute;
  left: .75rem;
  font-size: .75rem;
}