Focus Field

1import "./focus-field.css";2
3export function FocusField() {4  return (5    <label className="demo-input">6      <span>Project name</span>7      <input placeholder="e.g. microkit-web" />8    </label>9  );10}

1.demo-input {2  width: 210px;3  display: block;4}5.demo-input span {6  display: block;7  margin: 0 0 7px;8  color: light-dark(#69727f,#9298a1);9  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;10}11.demo-input input {12  width: 100%;13  border: 1px solid light-dark(#cbd2dc,#363a42);14  border-radius: 5px;15  background: light-dark(#ffffff,#15171b);16  padding: 8px;17  color: light-dark(#262d38,#e8ebee);18  font-size: 11px;19  outline: 0;20  box-shadow: 0 0 0 0 #f9731600;21  transition: border-color .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s cubic-bezier(.22, 1, .36, 1);22}23.demo-input input:focus {24  border-color: #f97316;25  box-shadow: 0 0 0 3px #f9731625;26}27@media (prefers-reduced-motion: reduce) {28  .demo-input input {29  transition: none;30}31}