Decouple input and text area styles from form field block

Previously input and text area styles were applied through the
`form-field__input` element class. However the styles are occasionally
applied outside of a form field (e.g. the filter on the 'all recipes'
page) which violates the BEM rule that elements within a block have no
standalone meaning.

This commit therefore moves the input and text area styles into a
separate `input-box` block.

Author: smfeest

src/Buttercup.Web/Areas/Admin/Views/Users/EditorTemplates/NewUserAttributes.cshtml

@@ -4,17 +4,17 @@
 <div asp-validation-summary="ModelOnly"></div>
 <div class="form-field">
   <label class="form-field__label" asp-for="Name">@Localizer["Label_Name"]</label>
-  <input class="form-field__input" asp-for="Name" required>
+  <input class="input-box" asp-for="Name" required>
   <span asp-validation-for="Name"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="Email">@Localizer["Label_Email"]</label>
-  <input class="form-field__input" asp-for="Email" required>
+  <input class="input-box" asp-for="Email" required>
   <span asp-validation-for="Email"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="TimeZone">@Localizer["Label_TimeZone"]</label>
-  <select class="form-field__input" asp-for="TimeZone" asp-items="TimeZoneOptions.AllOptions().AsSelectListItems()" required>
+  <select class="input-box" asp-for="TimeZone" asp-items="TimeZoneOptions.AllOptions().AsSelectListItems()" required>
   </select>
   <span asp-validation-for="TimeZone"></span>
 </div>

src/Buttercup.Web/Views/Account/ChangePassword.cshtml

@@ -7,17 +7,17 @@
 <form method="post">
   <div class="form-field">
     <label class="form-field__label" asp-for="CurrentPassword">@Localizer["Label_CurrentPassword"]</label>
-    <input class="form-field__input" asp-for="CurrentPassword" required>
+    <input class="input-box" asp-for="CurrentPassword" required>
     <span asp-validation-for="CurrentPassword"></span>
   </div>
   <div class="form-field">
     <label class="form-field__label" asp-for="NewPassword">@Localizer["Label_NewPassword"]</label>
-    <input class="form-field__input" asp-for="NewPassword" required>
+    <input class="input-box" asp-for="NewPassword" required>
     <span asp-validation-for="NewPassword"></span>
   </div>
   <div class="form-field">
     <label class="form-field__label" asp-for="ConfirmNewPassword">@Localizer["Label_ConfirmNewPassword"]</label>
-    <input class="form-field__input" asp-for="ConfirmNewPassword" required>
+    <input class="input-box" asp-for="ConfirmNewPassword" required>
     <span asp-validation-for="ConfirmNewPassword"></span>
   </div>
   <div class="button-bar">

src/Buttercup.Web/Views/Account/Preferences.cshtml

@@ -8,7 +8,7 @@
 <form method="post">
   <div class="form-field">
     <label class="form-field__label" asp-for="TimeZone">@Localizer["Label_TimeZone"]</label>
-    <select class="form-field__input" asp-for="TimeZone" asp-items="TimeZoneOptions.AllOptions().AsSelectListItems()" required>
+    <select class="input-box" asp-for="TimeZone" asp-items="TimeZoneOptions.AllOptions().AsSelectListItems()" required>
     </select>
     <span asp-validation-for="TimeZone"></span>
   </div>

src/Buttercup.Web/Views/Authentication/RequestPasswordReset.cshtml

@@ -8,7 +8,7 @@
   <div asp-validation-summary="ModelOnly"></div>
   <div class="form-field">
     <label class="form-field__label" asp-for="Email">@Localizer["Label_Email"]</label>
-    <input class="form-field__input" asp-for="Email" required>
+    <input class="input-box" asp-for="Email" required>
     <span asp-validation-for="Email"></span>
   </div>
   <button class="push-button push-button--primary">@Localizer["Label_SendResetLink"]</button>

src/Buttercup.Web/Views/Authentication/ResetPassword.cshtml

@@ -7,12 +7,12 @@
 <form method="post">
   <div class="form-field">
     <label class="form-field__label" asp-for="Password">@Localizer["Label_NewPassword"]</label>
-    <input class="form-field__input" asp-for="Password" required>
+    <input class="input-box" asp-for="Password" required>
     <span asp-validation-for="Password"></span>
   </div>
   <div class="form-field">
     <label class="form-field__label" asp-for="ConfirmPassword">@Localizer["Label_ConfirmNewPassword"]</label>
-    <input class="form-field__input" asp-for="ConfirmPassword" required>
+    <input class="input-box" asp-for="ConfirmPassword" required>
     <span asp-validation-for="ConfirmPassword"></span>
   </div>
   <button class="push-button push-button--primary">@Localizer["Label_SetPassword"]</button>

src/Buttercup.Web/Views/Authentication/SignIn.cshtml

@@ -8,12 +8,12 @@
   <div asp-validation-summary="ModelOnly"></div>
   <div class="form-field">
     <label class="form-field__label" asp-for="Email">@Localizer["Label_Email"]</label>
-    <input class="form-field__input" asp-for="Email" required>
+    <input class="input-box" asp-for="Email" required>
     <span asp-validation-for="Email"></span>
   </div>
   <div class="form-field">
     <label class="form-field__label" asp-for="Password">@Localizer["Label_Password"]</label>
-    <input class="form-field__input" asp-for="Password" required>
+    <input class="input-box" asp-for="Password" required>
     <a class="form-field__link" asp-action="RequestPasswordReset">@Localizer["Label_ForgotPassword"]</a>
     <span asp-validation-for="Password"></span>
   </div>

src/Buttercup.Web/Views/Recipes/EditorTemplates/RecipeAttributes.cshtml

@@ -3,46 +3,46 @@
 <div asp-validation-summary="ModelOnly"></div>
 <div class="form-field">
   <label class="form-field__label" asp-for="Title">@Localizer["Label_Title"]</label>
-  <input class="form-field__input" asp-for="Title" required>
+  <input class="input-box" asp-for="Title" required>
   <span asp-validation-for="Title"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="PreparationMinutes">@Localizer["Label_PreparationTime"]</label>
-  <input class="form-field__input" asp-for="PreparationMinutes">
+  <input class="input-box" asp-for="PreparationMinutes">
   <span asp-validation-for="PreparationMinutes"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="CookingMinutes">@Localizer["Label_CookingTime"]</label>
-  <input class="form-field__input" asp-for="CookingMinutes">
+  <input class="input-box" asp-for="CookingMinutes">
   <span asp-validation-for="CookingMinutes"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="Servings">@Localizer["Label_Servings"]</label>
-  <input class="form-field__input" asp-for="Servings">
+  <input class="input-box" asp-for="Servings">
   <span asp-validation-for="Servings"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="Ingredients">@Localizer["Label_Ingredients"]</label>
-  <textarea class="form-field__input form-field__input--tall" asp-for="Ingredients" required></textarea>
+  <textarea class="input-box input-box--tall" asp-for="Ingredients" required></textarea>
   <span asp-validation-for="Ingredients"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="Method">@Localizer["Label_Method"]</label>
-  <textarea class="form-field__input form-field__input--tall" asp-for="Method" required></textarea>
+  <textarea class="input-box input-box--tall" asp-for="Method" required></textarea>
   <span asp-validation-for="Method"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="Suggestions">@Localizer["Label_Suggestions"]</label>
-  <textarea class="form-field__input" asp-for="Suggestions"></textarea>
+  <textarea class="input-box" asp-for="Suggestions"></textarea>
   <span asp-validation-for="Suggestions"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="Remarks">@Localizer["Label_Remarks"]</label>
-  <textarea class="form-field__input" asp-for="Remarks"></textarea>
+  <textarea class="input-box" asp-for="Remarks"></textarea>
   <span asp-validation-for="Remarks"></span>
 </div>
 <div class="form-field">
   <label class="form-field__label" asp-for="Source">@Localizer["Label_Source"]</label>
-  <input class="form-field__input" asp-for="Source">
+  <input class="input-box" asp-for="Source">
   <span asp-validation-for="Source"></span>
 </div>

src/Buttercup.Web/Views/Recipes/Index.cshtml

@@ -5,7 +5,7 @@
 }
 <div class="recipes-index__header">
   <h1>@Localizer["Title_AllRecipes"]</h1>
-  <input id="recipe-index__filter" class="form-field__input" placeholder="@Localizer["Label_FindRecipe"]" aria-label="@Localizer["Label_FindRecipe"]" />
+  <input id="recipe-index__filter" class="input-box" placeholder="@Localizer["Label_FindRecipe"]" aria-label="@Localizer["Label_FindRecipe"]" />
 </div>
 <table id="recipes-index__table" class="data-table">
   <colgroup>

src/Buttercup.Web/Views/Recipes/Show.cshtml

@@ -97,7 +97,7 @@
   <form class="new-comment-form" method="post" asp-action="AddComment" asp-route-id="@Model.Recipe.Id">
     <p class="new-comment-form__author">@User.Identity?.Name</p>
     <div class="new-comment-form__field form-field">
-      <textarea class="form-field__input" asp-for="NewCommentAttributes.Body" aria-label="@Localizer["Label_Comment"]" placeholder="@Localizer["Placeholder_Comment"]" required></textarea>
+      <textarea class="input-box" asp-for="NewCommentAttributes.Body" aria-label="@Localizer["Label_Comment"]" placeholder="@Localizer["Placeholder_Comment"]" required></textarea>
       <span asp-validation-for="NewCommentAttributes.Body"></span>
     </div>
     <button class="push-button push-button--primary">@Localizer["Label_Add"]</button>

src/Buttercup.Web/styles/form-fields.less

@@ -2,10 +2,6 @@
 @form-vertical-padding-large: 1.5em;
 @form-vertical-padding-small: 0.5em;
 
-@form-input-border-width: 1px;
-@form-input-height: 2.5em;
-@form-input-input-padding: 0.75em;
-
 .form-field {
   display: flex;
   flex-direction: column;
@@ -25,38 +21,6 @@
   }
 }
 
-.form-field__input {
-  background-color: @color-white;
-  border: @form-input-border-width solid @color-grey;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
-  box-sizing: border-box;
-  height: @form-input-height;
-  padding: 0 @form-input-input-padding;
-
-  &.input-validation-error {
-    border-color: @color-red;
-  }
-
-  &:focus {
-    border-color: @color-blue;
-    outline: 0;
-  }
-
-  textarea& {
-    @vertical-midpoint: calc(
-      (@form-input-height / 2) - @form-input-border-width
-    );
-
-    height: 6em;
-    padding: calc(@vertical-midpoint - 0.5em) @form-input-input-padding;
-    resize: vertical;
-
-    &.form-field__input--tall {
-      height: 10em;
-    }
-  }
-}
-
 .form-field__link {
   margin-top: @form-vertical-padding-small;
 }