Merge branch 'form-styles'

Author: smfeest

src/Buttercup.Web/Areas/Admin/Views/Users/New.cshtml

@@ -4,7 +4,7 @@
   ViewData["Title"] = Localizer["Title_NewUser"];
 }
 <h1>@Localizer["Title_NewUser"]</h1>
-<form method="post">
+<form class="form" method="post">
   @Html.EditorForModel()
   <div class="button-bar">
     <button class="push-button push-button--primary">@Localizer["Label_Add"]</button>

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

@@ -4,7 +4,7 @@
   ViewData["Title"] = Localizer["Title_ChangePassword"];
 }
 <h1>@Localizer["Title_ChangePassword"]</h1>
-<form method="post">
+<form class="form" method="post">
   <div class="form-field">
     <label class="form-field__label" asp-for="CurrentPassword">@Localizer["Label_CurrentPassword"]</label>
     <input class="input-box" asp-for="CurrentPassword" required>

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

@@ -5,7 +5,7 @@
   ViewData["Title"] = Localizer["Title_YourPreferences"];
 }
 <h1>@Localizer["Title_YourPreferences"]</h1>
-<form method="post">
+<form class="form" method="post">
   <div class="form-field">
     <label class="form-field__label" asp-for="TimeZone">@Localizer["Label_TimeZone"]</label>
     <select class="input-box" asp-for="TimeZone" asp-items="TimeZoneOptions.AllOptions().AsSelectListItems()" required>

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

@@ -4,7 +4,7 @@
   ViewData["Title"] = Localizer["Title_ResetPassword"];
 }
 <h1>@Localizer["Title_ResetPassword"]</h1>
-<form method="post">
+<form class="form" method="post">
   <div asp-validation-summary="ModelOnly"></div>
   <div class="form-field">
     <label class="form-field__label" asp-for="Email">@Localizer["Label_Email"]</label>

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

@@ -4,7 +4,7 @@
   ViewData["Title"] = Localizer["Title_ResetPassword"];
 }
 <h1>@Localizer["Title_ResetPassword"]</h1>
-<form method="post">
+<form class="form" method="post">
   <div class="form-field">
     <label class="form-field__label" asp-for="Password">@Localizer["Label_NewPassword"]</label>
     <input class="input-box" asp-for="Password" required>

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

@@ -4,7 +4,7 @@
   ViewData["Title"] = Localizer["Title_SignIn"];
 }
 <h1>@Localizer["Title_SignIn"]</h1>
-<form method="post">
+<form class="form" method="post">
   <div asp-validation-summary="ModelOnly"></div>
   <div class="form-field">
     <label class="form-field__label" asp-for="Email">@Localizer["Label_Email"]</label>

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

@@ -4,7 +4,7 @@
   ViewData["Title"] = Localizer["Title_EditRecipe", Model!.Attributes.Title];
 }
 <h1>@Localizer["Heading_EditRecipe"]</h1>
-<form method="post">
+<form class="form" method="post">
   @Html.EditorFor(m => m.Attributes)
   <input type="hidden" asp-for="BaseRevision">
   <div class="button-bar">

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

@@ -4,7 +4,7 @@
   ViewData["Title"] = Localizer["Title_NewRecipe"];
 }
 <h1>@Localizer["Title_NewRecipe"]</h1>
-<form method="post">
+<form class="form" method="post">
   @Html.EditorForModel()
   <button class="push-button push-button--primary">@Localizer["Label_Save"]</button>
 </form>

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

@@ -94,9 +94,9 @@
   {
     <partial name="_Comment" model="@commentViewModel" />
   }
-  <form class="new-comment-form" method="post" asp-action="AddComment" asp-route-id="@Model.Recipe.Id">
+  <form class="form form--compact 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">
+    <div class="form-field">
       <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>

src/Buttercup.Web/styles/form-fields.less src/Buttercup.Web/styles/form.lesssrc/Buttercup.Web/styles/form-fields.less renamed to src/Buttercup.Web/styles/form.less

@@ -1,15 +1,27 @@
-@form-horizontal-padding: 1em;
-@form-vertical-padding-large: 1.5em;
-@form-vertical-padding-small: 0.5em;
+@form-field-vertical-spacing: 0.5em;
+@form-validation-error-padding: 0.7em 1em;
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5em;
+
+  &.form--compact {
+    gap: 0.7em;
+  }
+
+  > button {
+    align-self: flex-start;
+  }
+}
 
 .form-field {
   display: flex;
   flex-direction: column;
-  margin-bottom: @form-vertical-padding-large;
 }
 
 .form-field__label {
-  margin-bottom: @form-vertical-padding-small;
+  margin-bottom: @form-field-vertical-spacing;
 }
 
 .form-field__optional-label {
@@ -22,23 +34,28 @@
 }
 
 .form-field__link {
-  margin-top: @form-vertical-padding-small;
+  margin-top: @form-field-vertical-spacing;
 }
 
 .field-validation-error,
 .validation-summary-errors {
   background-color: @color-red;
   color: @color-white;
   font-weight: bold;
-  padding: @form-vertical-padding-small @form-horizontal-padding;
 }
 
-.validation-summary-errors {
-  margin-bottom: @form-vertical-padding-large;
+.field-validation-error {
+  padding: @form-validation-error-padding;
+}
 
+.validation-summary-errors {
   > ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
+
+    > li {
+      margin: @form-validation-error-padding;
+    }
   }
 }