132350: Fixed some SASS variables not being overridable in the themes

Also fixed the authority icons not being totally centered in the onebox submission fields

Author: alexandrevryghem

src/app/breadcrumbs/breadcrumbs.component.scss

@@ -1,13 +1,13 @@
 .nav-breadcrumb {
-  background-color: var(--ds-breadcrumb-bg);
+  background-color: var(--ds-breadcrumb-bg) !important;
 }
 
 .breadcrumb {
   border-radius: 0;
   margin-top: calc(-1 * var(--ds-content-spacing));
   padding-bottom: var(--ds-content-spacing / 3);
   padding-top: var(--ds-content-spacing / 3);
-  background-color: var(--ds-breadcrumb-bg);
+  background-color: var(--ds-breadcrumb-bg) !important;
 }
 
 li.breadcrumb-item {

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

@@ -21,13 +21,15 @@
 </ng-template>
 
 <div *ngIf="!(isHierarchicalVocabulary() | async)" class="position-relative right-addon">
-  <i *ngIf="searching" class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
-  <i *ngIf="!searching"
-     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">
+    <i *ngIf="searching" class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary my-auto p-0" aria-hidden="true"></i>
+    <i *ngIf="!searching"
+       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"

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

@@ -29,8 +29,8 @@
   --ds-navbar-link-color: #{$cyan};
   --ds-navbar-link-color-hover: #{darken($cyan, 15%)};
 
-  $admin-sidebar-bg: darken(#2B4E72, 17%);
-  $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
+  $admin-sidebar-bg: darken(#2B4E72, 17%) !default;
+  $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%) !default;
   --ds-admin-sidebar-bg: #{$admin-sidebar-bg};
   --ds-admin-sidebar-active-bg: #{$admin-sidebar-active-bg};
   --ds-admin-sidebar-header-bg: #{darken($admin-sidebar-bg, 7%)};
@@ -71,12 +71,12 @@
   --ds-footer-padding-bottom: 0;
   --ds-footer-logo-height: 50px;
 
-  $home-news-link-color: $cyan;
+  $home-news-link-color: $cyan !default;
   --ds-home-news-link-color: #{$home-news-link-color};
   --ds-home-news-link-hover-color: #{darken($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: #{$cyan};
   --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
   --ds-breadcrumb-max-length: 200px;