Merge branch 'w2p-132350_minor-css-fixes_contribute-7.6' into bootstrap-issues_contribute-9_x

Author: alexandrevryghem

src/app/breadcrumbs/breadcrumbs.component.scss

@@ -1,12 +1,12 @@
 .nav-breadcrumb {
-  background-color: var(--ds-breadcrumb-bg);
+  background-color: var(--ds-breadcrumb-bg) !important;
 }
 
 .breadcrumb {
   border-radius: 0;
   padding-bottom: calc(var(--ds-content-spacing) / 2);
   padding-top: calc(var(--ds-content-spacing) / 2);
-  background-color: var(--ds-breadcrumb-bg);
+  background-color: var(--ds-breadcrumb-bg) !important;
   padding-left: calc(var(--bs-spacer) *.75);
   padding-right: calc(var(--bs-spacer) *.75);
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html

@@ -24,38 +24,40 @@
 
 @if ((isHierarchicalVocabulary() | async) !== true) {
   <div class="position-relative right-addon">
-    @if (searching || loadingInitialValue) {
-      <i class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
-    }
-    @if (!searching && !loadingInitialValue) {
-      <i
-        dsAuthorityConfidenceState
-        class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0"
-        aria-hidden="true"
-        [authorityValue]="currentValue"
-      (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
-    }
+    <div class="authority-icons position-absolute d-flex align-items-center">
+      @if (searching || loadingInitialValue) {
+        <i class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary my-auto p-0" aria-hidden="true"></i>
+      }
+      @if (!searching && !loadingInitialValue) {
+        <i
+          dsAuthorityConfidenceState
+          class="far fa-circle fa-2x fa-fw my-auto p-0"
+          aria-hidden="true"
+          [authorityValue]="currentValue"
+          (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
+      }
+    </div>
     <input #instance="ngbTypeahead"
-      class="form-control"
-      [attr.aria-labelledby]="'label_' + model.id"
-      [attr.autoComplete]="model.autoComplete"
-      [attr.aria-label]="model.label | translate"
-      [class.is-invalid]="showErrorMessages"
-      [id]="model.id"
-      [inputFormatter]="formatter"
-      [name]="model.name"
-      [ngbTypeahead]="search"
-      [placeholder]="model.placeholder"
-      [readonly]="model.readOnly"
-      [disabled]="model.readOnly"
-      [resultTemplate]="rt"
-      [type]="model.inputType"
-      [(ngModel)]="currentValue"
-      (blur)="onBlur($event)"
-      (focus)="onFocus($event)"
-      (change)="onChange($event)"
-      (input)="onInput($event)"
-      (selectItem)="onSelectItem($event)">
+           class="form-control"
+           [attr.aria-labelledby]="'label_' + model.id"
+           [attr.autoComplete]="model.autoComplete"
+           [attr.aria-label]="model.label | translate"
+           [class.is-invalid]="showErrorMessages"
+           [id]="model.id"
+           [inputFormatter]="formatter"
+           [name]="model.name"
+           [ngbTypeahead]="search"
+           [placeholder]="model.placeholder"
+           [readonly]="model.readOnly"
+           [disabled]="model.readOnly"
+           [resultTemplate]="rt"
+           [type]="model.inputType"
+           [(ngModel)]="currentValue"
+           (blur)="onBlur($event)"
+           (focus)="onFocus($event)"
+           (change)="onChange($event)"
+           (input)="onInput($event)"
+           (selectItem)="onSelectItem($event)">
     @if (searchFailed) {
       <div class="invalid-feedback">Sorry, suggestions could not be loaded.</div>
     }
@@ -65,25 +67,25 @@
 @if ((isHierarchicalVocabulary() | async)) {
   <div class="position-relative right-addon">
     <i class="dropdown-toggle position-absolute tree-toggle" (click)="openTree($event)"
-    aria-hidden="true"></i>
+       aria-hidden="true"></i>
     <input class="form-control"
-      [attr.aria-labelledby]="'label_' + model.id"
-      [attr.autoComplete]="model.autoComplete"
-      [attr.aria-label]="model.label | translate"
-      [class.is-invalid]="showErrorMessages"
-      [class.tree-input]="!model.readOnly"
-      [id]="id"
-      [name]="model.name"
-      [placeholder]="model.placeholder"
-      [readonly]="true"
-      [disabled]="model.readOnly"
-      [type]="model.inputType"
-      [value]="currentValue?.display"
-      (focus)="onFocus($event)"
-      (change)="onChange($event)"
-      (click)="openTree($event)"
-      (keydown)="$event.preventDefault()"
-      (keypress)="$event.preventDefault()"
-      (keyup)="$event.preventDefault()">
+           [attr.aria-labelledby]="'label_' + model.id"
+           [attr.autoComplete]="model.autoComplete"
+           [attr.aria-label]="model.label | translate"
+           [class.is-invalid]="showErrorMessages"
+           [class.tree-input]="!model.readOnly"
+           [id]="id"
+           [name]="model.name"
+           [placeholder]="model.placeholder"
+           [readonly]="true"
+           [disabled]="model.readOnly"
+           [type]="model.inputType"
+           [value]="currentValue?.display"
+           (focus)="onFocus($event)"
+           (change)="onChange($event)"
+           (click)="openTree($event)"
+           (keydown)="$event.preventDefault()"
+           (keypress)="$event.preventDefault()"
+           (keyup)="$event.preventDefault()">
   </div>
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.scss

@@ -31,3 +31,9 @@
 .tree-input[readonly]{
   background-color: #fff;
 }
+
+.authority-icons {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%)
+}

src/styles/_custom_variables.scss

@@ -105,7 +105,7 @@
   --ds-home-news-link-hover-color: #{darken($ds-home-news-link-color, 15%)};
   --ds-home-news-background-color: #{$gray-200};
 
-  --ds-breadcrumb-bg: #{$gray-200} !important;
+  --ds-breadcrumb-bg: #{$gray-200};
   --ds-breadcrumb-link-color: #{$ds-breadcrumb-link-color};
   --ds-breadcrumb-link-active-color: #{darken($ds-breadcrumb-link-color, 30%)};
   --ds-breadcrumb-max-length: 200px;