Fix form validation and link decoration (BS 5.3) (#14432)

src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationCollection.cshtml

@@ -1,8 +1,9 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 
 @model ShapeViewModel<UserNotificationCollectionViewModel>
-<li class="nav-item dropdown text-end">
-    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+<li class="nav-item">
+    <div class="dropdown">
+        <button type="button" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
         @if (Model.Value.TotalUnread > 0)
         {
             var notifications = T.Plural(Model.Value.TotalUnread, "notification", "notifications");
@@ -22,12 +23,12 @@
         {
             <i class="fa-regular fa-bell" aria-hidden="true" data-bs-toggle="tooltip" data-bs-original-title="@T["You have no unread notifications"]"></i>
         }
-    </a>
-    <div class="dropdown-menu dropdown-menu-end notification-navbar scrollable" style="max-width: 20rem;">
+    </button>
+        <ul class="dropdown-menu dropdown-menu-end notification-navbar scrollable position-absolute" style="max-width: 20rem;">
         @if (Model.Value.Notifications.Count > 0)
         {
             var maxCount = Math.Min(Model.Value.MaxVisibleNotifications, Model.Value.Notifications.Count);
-            <div style="max-height: 30rem; overflow-y: auto;">
+            <li style="max-height: 30rem; overflow-y: auto;">
                 @for (int i = 0; i < maxCount; i++)
                 {
                     var notification = Model.Value.Notifications[i];
@@ -36,10 +37,15 @@
                         @await DisplayAsync(notification)
                     </div>
                 }
-            </div>
-            <div><hr class="dropdown-divider"></div>
+            </li>
+            <li>
+                <hr class="dropdown-divider">
+            </li>
         }
-        <div><a class="dropdown-item fw-bold" asp-action="List" asp-controller="Admin" asp-area="OrchardCore.Notifications">@T["Notification Center"]</a></div>
+        <li>
+            <a class="dropdown-item fw-bold" asp-action="List" asp-controller="Admin" asp-area="OrchardCore.Notifications">@T["Notification Center"]</a>
+        </li>
+    </ul>
     </div>
 </li>
 

src/OrchardCore.Modules/OrchardCore.Users/Views/UserMenu.DetailAdmin.cshtml

@@ -1,11 +1,15 @@
+@if(Model.Header == null && Model.Content == null)
+{
+    return;
+}
+
 <div class="dropdown">
-    <a class="dropdown-toggle nav-link" id="navbarDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
+    <button type="button" class="dropdown-toggle nav-link" id="navbarDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
         @if (Model.Header != null)
         {
             @await DisplayAsync(Model.Header)
         }
-    </a>
-
+    </button>
     @if (Model.Content != null)
     {
         <ul class="dropdown-menu dropdown-menu-end position-absolute" aria-labelledby="navbarDropdown">

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_dropdown.scss

@@ -15,3 +15,10 @@
         scrollbar-width: thin;
     }
 }
+
+.dropdown-item {
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
+}

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_forms.scss

@@ -4,7 +4,7 @@
 
 .hint {
     font-size: 0.875em;
-    color: var(--bs-text-body-secondary) !important;
+    color: var(--bs-secondary) !important;
     @include word-wrap;
 }
 

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_validations.scss

@@ -28,9 +28,70 @@ span.field-validation-error {
 }
 
 .field-validation-error {
-    color: var(--bs-text-danger) !important;
+    color: var(--bs-danger) !important;
 }
 
 .field-validation-valid {
     display: none;
 }
+
+.input-validation-error {
+    border-color: var(--bs-form-invalid-border-color);
+    padding-right: calc(1.5em + 0.75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.input-validation-error:invalid:focus, .form-control.input-validation-error:focus {
+    border-color: var(--bs-form-invalid-border-color);
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+textarea.form-control.input-validation-error {
+    padding-right: calc(1.5em + 0.75rem);
+    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+}
+
+.form-select.input-validation-error {
+    border-color: var(--bs-form-invalid-border-color);
+}
+
+.form-select.input-validation-error:not([multiple])[size="1"] {
+    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    padding-right: 4.125rem;
+    background-position: right 0.75rem center, center right 2.25rem;
+    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.form-select.input-validation-error:focus {
+    border-color: var(--bs-form-invalid-border-color);
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+.form-control-color.input-validation-error {
+    width: calc(3rem + calc(1.5em + 0.75rem));
+}
+
+.form-check-input.input-validation-error {
+    border-color: var(--bs-form-invalid-border-color);
+}
+
+.form-check-input.input-validation-error:checked {
+    background-color: var(--bs-form-invalid-color);
+}
+
+.form-check-input.input-validation-error:focus {
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+.form-check-input.input-validation-error ~ .form-check-label {
+    color: var(--bs-form-invalid-color);
+}
+
+.input-group > .form-control:not(:focus).input-validation-error,
+.input-group > .form-select:not(:focus).input-validation-error,
+.input-group > .form-floating:not(:focus-within).input-validation-error {
+    z-index: 4;
+}

src/OrchardCore.Themes/TheAdmin/Assets/scss/main/_overrides.scss

@@ -5,3 +5,22 @@ a {
 a:hover {
     text-decoration: underline;
 }
+
+.btn {
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+.btn-link {
+    &:focus-visible {
+        text-decoration: none;
+    }
+}
+
+.navbar-brand {
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
+}

src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css

@@ -167,6 +167,18 @@ a:hover {
   text-decoration: underline;
 }
 
+.btn:hover, .button:hover {
+  text-decoration: none;
+}
+
+.btn-link:focus-visible {
+  text-decoration: none;
+}
+
+.navbar-brand:hover, .navbar-brand:focus {
+  text-decoration: none;
+}
+
 /* 
     IMPORTANT: Never import Bootstrap directly into the theme. 
     TheAdmin.css will depend on Bootstrap, but we never want to compile it. 
@@ -821,6 +833,10 @@ html[dir=rtl] .bootstrap-select .bs-ok-default:after {
   scrollbar-width: thin;
 }
 
+.dropdown-item:hover, .dropdown-item:focus {
+  text-decoration: none;
+}
+
 /* 
     IMPORTANT: Never import Bootstrap directly into the theme. 
     TheAdmin.css will depend on Bootstrap, but we never want to compile it. 
@@ -857,7 +873,7 @@ html[dir=rtl] .bootstrap-select .bs-ok-default:after {
 
 .hint {
   font-size: 0.875em;
-  color: var(--bs-text-body-secondary) !important;
+  color: var(--bs-secondary) !important;
   overflow-wrap: break-word;
   word-wrap: break-word;
   -ms-word-break: break-all;
@@ -9518,13 +9534,74 @@ span.field-validation-error {
 }
 
 .field-validation-error {
-  color: var(--bs-text-danger) !important;
+  color: var(--bs-danger) !important;
 }
 
 .field-validation-valid {
   display: none;
 }
 
+.input-validation-error {
+  border-color: var(--bs-form-invalid-border-color);
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.input-validation-error:invalid:focus, .form-control.input-validation-error:focus {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+textarea.form-control.input-validation-error {
+  padding-right: calc(1.5em + 0.75rem);
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+}
+
+.form-select.input-validation-error {
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.form-select.input-validation-error:not([multiple])[size="1"] {
+  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  padding-right: 4.125rem;
+  background-position: right 0.75rem center, center right 2.25rem;
+  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.form-select.input-validation-error:focus {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+.form-control-color.input-validation-error {
+  width: calc(3rem + 1.5em + 0.75rem);
+}
+
+.form-check-input.input-validation-error {
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.form-check-input.input-validation-error:checked {
+  background-color: var(--bs-form-invalid-color);
+}
+
+.form-check-input.input-validation-error:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+.form-check-input.input-validation-error ~ .form-check-label {
+  color: var(--bs-form-invalid-color);
+}
+
+.input-group > .form-control:not(:focus).input-validation-error,
+.input-group > .form-select:not(:focus).input-validation-error,
+.input-group > .form-floating:not(:focus-within).input-validation-error {
+  z-index: 4;
+}
+
 .vue-multiselect {
   color: var(--bs-body-color) !important;
   background-color: var(--bs-body-bg) !important;

src/OrchardCore.Themes/TheAdmin/wwwroot/css/login.css

@@ -38,9 +38,70 @@ span.field-validation-error {
 }
 
 .field-validation-error {
-  color: var(--bs-text-danger) !important;
+  color: var(--bs-danger) !important;
 }
 
 .field-validation-valid {
   display: none;
 }
+
+.input-validation-error {
+  border-color: var(--bs-form-invalid-border-color);
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.input-validation-error:invalid:focus, .form-control.input-validation-error:focus {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+textarea.form-control.input-validation-error {
+  padding-right: calc(1.5em + 0.75rem);
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+}
+
+.form-select.input-validation-error {
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.form-select.input-validation-error:not([multiple])[size="1"] {
+  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  padding-right: 4.125rem;
+  background-position: right 0.75rem center, center right 2.25rem;
+  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.form-select.input-validation-error:focus {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+.form-control-color.input-validation-error {
+  width: calc(3rem + 1.5em + 0.75rem);
+}
+
+.form-check-input.input-validation-error {
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.form-check-input.input-validation-error:checked {
+  background-color: var(--bs-form-invalid-color);
+}
+
+.form-check-input.input-validation-error:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+.form-check-input.input-validation-error ~ .form-check-label {
+  color: var(--bs-form-invalid-color);
+}
+
+.input-group > .form-control:not(:focus).input-validation-error,
+.input-group > .form-select:not(:focus).input-validation-error,
+.input-group > .form-floating:not(:focus-within).input-validation-error {
+  z-index: 4;
+}