Refining some styling

I have been enjoying getting back into using Bootstrap and adopted the form-floating styles for my input fields because I preferred that over having an explicit label/input separation. One thing I noticed really quick, though, was the input fields were still rather quite large compared to the equivalent Material Design 3 input fields. Since I build the css file from the sass source, I was able to make some changes that get me closer to the Material Design 3 layout and decided to share it here for my future self in case I need it later.

// for textareas, let's not have the height fixed and for browsers that support the field-sizing, let's take advantage of it
.form-floating > textarea.form-control {
  height: inherit;
  field-sizing: content
}

// changing up the floating label behavior to be closer to material design. This closes up the UI gaps a bit
.form-floating {
  > .form-control,
  > .form-select,
  > textarea.form-control {
    padding: 0 0 0 1rem;
    height: inherit;
    min-height: inherit;
    line-height: 2.25rem;

    &:not(:placeholder-shown),
    &:focus {
      padding: 0 0 0 1rem;
    }

    &:not(:placeholder-shown) ~ label,
    &:focus ~ label {
      transform: scale(.85) translateY(-1.15rem) translateX(-0.15rem);
      height: inherit;
      background-color: white;
      padding: 0 0.25rem;
    }
  }

  > label {
    padding: 0;
    left: 1rem;
    top: .35rem;
  }
}

I am going to try and adopt this in more sites that I am creating because I do prefer the compactness of it. But I guess before I get too far, I should probably at least update this site first ;)

Got this site updated now, but looks like I still have some work to do around textareas, so guess I will be making an update to this post in the near future.