Issue #3331821 by suhaib_hija: Fixes on bootstrap barrio component scss

scss/components/breadcrumb.scss

@@ -4,7 +4,7 @@
  */
 
 .breadcrumb {
-    font-size: 0.929em$font-size-sm;
+    font-size: $font-size-sm;
 }
 
 .region-breadcrumb {

scss/components/form.scss

@@ -9,9 +9,9 @@
     display: inline-block;
     background-image: url(../images/required.svg);
     background-repeat: no-repeat;
-    background-size: ($input-height / 2) ($input-height / 2);
-    width: ($input-height / 2);
-    height: ($input-height / 2);
+    background-size: calc($input-height * 0.5) calc($input-height * 0.5);
+    width: calc($input-height * 0.5 );
+    height: calc($input-height * 0.5 );
     margin: 0 0.3em;
 }
 

scss/components/user.scss

@@ -12,25 +12,29 @@
 }
 
 .password-strength__indicator {
-  background-color: theme-color("success");
+  background-color: map-get($theme-colors,"success");
   -webkit-transition: width 0.5s ease-out;
   transition: width 0.5s ease-out;
 }
 
 .password-strength__indicator.is-weak {
-    background-color: theme-color("danger");
+    background-color: map-get($theme-colors,"danger");
+
 }
 
 .password-strength__indicator.is-fair {
-  background-color: theme-color("warning");
+  background-color: map-get($theme-colors,"warning");
+
 }
 
 .password-strength__indicator.is-good {
-  background-color: theme-color("info");
+  background-color: map-get($theme-colors,"info");
+
 }
 
 .password-strength__indicator.is-strong {
-  background-color: theme-color("success");
+  background-color: map-get($theme-colors,"success");
+
 }
 
 .password-confirm,
@@ -69,12 +73,12 @@
 /* Styling for the status indicator of the passwords match test.  */
 
 .password-confirm .ok {
-  color: theme-color("success");
+  color: map-get($theme-colors,"success");
   font-weight: bold;
 }
 
 .password-confirm .error {
-  color: theme-color("danger");
+  color: map-get($theme-colors,"danger");
   font-weight: bold;
 }