Be explicit with the background color property (#2834)

build/scss/_alerts.scss

@@ -26,7 +26,7 @@
 @each $color, $value in $theme-colors {
   .alert-#{$color} {
     color: color-yiq($value);
-    background: $value;
+    background-color: $value;
     border-color: darken($value, 5%);
   }
 

build/scss/_buttons.scss

@@ -21,7 +21,7 @@
     position: relative;
 
     > input[type="file"] {
-      background: $white;
+      background-color: $white;
       cursor: inherit;
       display: block;
       font-size: 100px;
@@ -80,7 +80,7 @@
   }
 
   &:hover {
-    background: $button-default-background-color;
+    background-color: $button-default-background-color;
     border-color: darken($button-default-border-color, 20%);
     color: $button-default-color;
   }

build/scss/_cards.scss

@@ -251,7 +251,7 @@ html.maximized-card {
 
 // Box Tools Buttons
 .btn-tool {
-  background: transparent;
+  background-color: transparent;
   color: $gray-500;
   font-size: $font-size-sm;
   margin: -(($card-spacer-y / 2) * 2) 0;
@@ -323,7 +323,7 @@ html.maximized-card {
 
 // Comment Box
 .card-comments {
-  background: $gray-100;
+  background-color: $gray-100;
 
   .card-comment {
     @include clearfix ();
@@ -375,7 +375,7 @@ html.maximized-card {
   // Todo list element
   > li {
     @include border-radius(2px);
-    background: $gray-100;
+    background-color: $gray-100;
     border-left: 2px solid $gray-200;
     color: $gray-700;
     margin-bottom: 2px;
@@ -431,7 +431,7 @@ html.maximized-card {
       }
 
       .badge {
-        background: $gray-500 !important;
+        background-color: $gray-500 !important;
       }
     }
   }

build/scss/_control-sidebar.scss

@@ -95,7 +95,7 @@ body.text-sm {
 
 // Dark skin
 .control-sidebar-dark {
-  background: $sidebar-dark-bg;
+  background-color: $sidebar-dark-bg;
 
   &,
   a,
@@ -168,6 +168,6 @@ body.text-sm {
   color: lighten($sidebar-light-color, 10%);
 
   //  Background
-  background: $sidebar-light-bg;
+  background-color: $sidebar-light-bg;
   border-left: $main-header-bottom-border;
 }

build/scss/_direct-chat.scss

@@ -56,7 +56,7 @@
     @include border-radius($border-radius-lg);
   }
 
-  background: $direct-chat-default-msg-bg;
+  background-color: $direct-chat-default-msg-bg;
   border: 1px solid $direct-chat-default-msg-border-color;
   color: $direct-chat-default-font-color;
   margin: 5px 0 0 50px;
@@ -135,7 +135,7 @@
 
 .direct-chat-contacts {
   @include translate(101%, 0);
-  background: $dark;
+  background-color: $dark;
   bottom: 0;
   color: $white;
   height: 250px;
@@ -146,7 +146,7 @@
 }
 
 .direct-chat-contacts-light {
-  background: $light;
+  background-color: $light;
 
   .contacts-list-name {
     color: $gray-700;

build/scss/_dropdown.scss

@@ -169,7 +169,7 @@
         right: 5%;
         left: auto;
         border: 1px solid #ddd;
-        background: $white;
+        background-color: $white;
       }
     }
   }
@@ -229,7 +229,7 @@
 
       a {
         @include media-breakpoint-up(sm) {
-          background: $white !important;
+          background-color: $white !important;
           color: $gray-700 !important;
         }
       }

build/scss/_info-box.scss

@@ -6,7 +6,7 @@
   @include box-shadow($card-shadow);
   @include border-radius($border-radius);
 
-  background: $white;
+  background-color: $white;
   display: flex;
   margin-bottom: map-get($spacers, 3);
   min-height: 80px;

build/scss/_layout.scss

@@ -479,7 +479,7 @@ body:not(.sidebar-mini-md) {
 }
 
 .content-wrapper {
-  background: $main-bg;
+  background-color: $main-bg;
 
   > .content {
     padding: $content-padding-y $content-padding-x;
@@ -573,7 +573,7 @@ body:not(.sidebar-mini-md) {
 }
 
 .main-footer {
-  background: $main-footer-bg;
+  background-color: $main-footer-bg;
   border-top: $main-footer-border-top;
   color: lighten($gray-700, 25%);
   padding: $main-footer-padding;
@@ -601,7 +601,7 @@ body:not(.sidebar-mini-md) {
   }
 
   .breadcrumb {
-    background: transparent;
+    background-color: transparent;
     line-height: 1.8rem;
     margin-bottom: 0;
     padding: 0;

build/scss/_main-sidebar.scss

@@ -225,13 +225,13 @@
     }
 
     .status {
-      background: $sidebar-light-hover-bg;
+      background-color: $sidebar-light-hover-bg;
       color: $sidebar-light-color;
 
       &:hover,
       &:focus,
       &:active {
-        background: darken($sidebar-light-hover-bg, 3%);
+        background-color: darken($sidebar-light-hover-bg, 3%);
         color: $sidebar-light-hover-color;
       }
     }
@@ -274,13 +274,13 @@
 
     // First Level Submenu
     > .nav-treeview {
-      background: $sidebar-light-submenu-bg;
+      background-color: $sidebar-light-submenu-bg;
     }
   }
 
   // Section Heading
   .nav-header {
-    background: inherit;
+    background-color: inherit;
     color: darken($sidebar-light-color, 5%);
   }
 
@@ -348,13 +348,13 @@
     }
 
     .status {
-      background: $sidebar-dark-hover-bg;
+      background-color: $sidebar-dark-hover-bg;
       color: $sidebar-dark-color;
 
       &:hover,
       &:focus,
       &:active {
-        background: darken($sidebar-dark-hover-bg, 3%);
+        background-color: darken($sidebar-dark-hover-bg, 3%);
         color: $sidebar-dark-hover-color;
       }
     }
@@ -397,13 +397,13 @@
 
     // First Level Submenu
     > .nav-treeview {
-      background: $sidebar-dark-submenu-bg;
+      background-color: $sidebar-dark-submenu-bg;
     }
   }
 
   // Section Heading
   .nav-header {
-    background: inherit; //darken($sidebar-dark-bg, 3%);
+    background-color: inherit; //darken($sidebar-dark-bg, 3%);
     color: lighten($sidebar-dark-color, 5%);
   }
 
@@ -644,7 +644,7 @@
   &.nav-sidebar > .nav-item {
     .nav-treeview,
     > .nav-treeview {
-      background: rgba($white, .05);
+      background-color: rgba($white, .05);
 
       .nav-item {
         > .nav-link {
@@ -676,7 +676,7 @@
   &.nav-sidebar > .nav-item {
     > .nav-link {
       &.active {
-        background: inherit;
+        background-color: inherit;
         border-left: 3px solid transparent;
         box-shadow: none;
 
@@ -783,7 +783,7 @@
     &.nav-sidebar > .nav-item {
       .nav-treeview,
       > .nav-treeview {
-        background: rgba($white, .05);
+        background-color: rgba($white, .05);
       }
 
       > .nav-link.active {
@@ -795,7 +795,7 @@
       &.active,
       &:focus,
       &:hover {
-        background: none;
+        background-color: transparent;
         color: $sidebar-dark-active-color;
       }
     }
@@ -805,7 +805,7 @@
     &.nav-sidebar > .nav-item {
       .nav-treeview,
       > .nav-treeview {
-        background: rgba($black, .05);
+        background-color: rgba($black, .05);
       }
 
       > .nav-link.active {
@@ -817,7 +817,7 @@
       &.active,
       &:focus,
       &:hover {
-        background: none;
+        background-color: transparent;
         color: $sidebar-light-active-color;
       }
     }
@@ -885,7 +885,7 @@
 [class*="sidebar-dark"] {
   .form-control-sidebar,
   .btn-sidebar {
-    background: lighten($sidebar-dark-bg, 5%);
+    background-color: lighten($sidebar-dark-bg, 5%);
     border: 1px solid lighten($sidebar-dark-bg, 15%);
     color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
   }
@@ -896,18 +896,18 @@
   }
 
   .btn-sidebar:hover {
-    background: lighten($sidebar-dark-bg, 7.5%);
+    background-color: lighten($sidebar-dark-bg, 7.5%);
   }
 
   .btn-sidebar:focus {
-    background: lighten($sidebar-dark-bg, 10%);
+    background-color: lighten($sidebar-dark-bg, 10%);
   }
 }
 
 [class*="sidebar-light"] {
   .form-control-sidebar,
   .btn-sidebar {
-    background: darken($sidebar-light-bg, 5%);
+    background-color: darken($sidebar-light-bg, 5%);
     border: 1px solid darken($sidebar-light-bg, 15%);
     color: color-yiq(darken($sidebar-light-bg, 5%));
   }
@@ -918,11 +918,11 @@
   }
 
   .btn-sidebar:hover {
-    background: darken($sidebar-light-bg, 7.5%);
+    background-color: darken($sidebar-light-bg, 7.5%);
   }
 
   .btn-sidebar:focus {
-    background: darken($sidebar-light-bg, 10%);
+    background-color: darken($sidebar-light-bg, 10%);
   }
 }
 

build/scss/_miscellaneous.scss

@@ -52,7 +52,7 @@
 }
 
 .list-seperator {
-  background: $card-border-color;
+  background-color: $card-border-color;
   height: 1px;
   margin: 15px 0 9px;
 }
@@ -216,7 +216,7 @@
 
 // General attachemnt block
 .attachment-block {
-  background: $gray-100;
+  background-color: $gray-100;
   border: 1px solid $card-border-color;
   margin-bottom: 10px;
   padding: 5px;
@@ -259,7 +259,7 @@
   .overlay {
     @include border-radius($border-radius);
     align-items: center;
-    background: rgba($white, .7);
+    background-color: rgba($white, .7);
     display: flex;
     justify-content: center;
     z-index: 50;
@@ -273,7 +273,7 @@
     }
 
     &.dark {
-      background: rgba($black, .5);
+      background-color: rgba($black, .5);
 
       > .fa,
       > .fas,
@@ -391,13 +391,13 @@ pre {
 
 // Blockquotes styles
 blockquote {
-  background: $white;
+  background-color: $white;
   border-left: .7rem solid $primary;
   margin: 1.5em .7rem;
   padding: .5em .7rem;
 
   .box & {
-    background: $gray-200;
+    background-color: $gray-200;
   }
 
   p:last-child {

build/scss/_products.scss

@@ -14,7 +14,7 @@
       @include border-radius($border-radius);
     }
 
-    background: $white;
+    background-color: $white;
     padding: 10px 0;
   }
 

build/scss/_small-box.scss

@@ -16,7 +16,7 @@
   }
 
   > .small-box-footer {
-    background: rgba($black, .1);
+    background-color: rgba($black, .1);
     color: rgba($white, .8);
     display: block;
     padding: 3px 0;
@@ -26,7 +26,7 @@
     z-index: 10;
 
     &:hover {
-      background: rgba($black, .15);
+      background-color: rgba($black, .15);
       color: $white;
     }
   }

build/scss/_timeline.scss

@@ -9,7 +9,7 @@
   // The line
   &::before {
     @include border-radius($border-radius);
-    background: $gray-300;
+    background-color: $gray-300;
     bottom: 0;
     content: "";
     left: 31px;
@@ -33,7 +33,7 @@
     > .timeline-item {
       @include box-shadow($card-shadow);
       @include border-radius($border-radius);
-      background: $white;
+      background-color: $white;
       color: $gray-700;
       margin-left: 60px;
       margin-right: 15px;
@@ -89,7 +89,7 @@
     > .far,
     > .fab,
     > .ion {
-      background: $gray-500;
+      background-color: $gray-500;
       border-radius: 50%;
       font-size: 15px;
       height: 30px;
@@ -117,7 +117,7 @@
   > div {
     > .timeline-item {
       @include box-shadow(none);
-      background: $gray-100;
+      background-color: $gray-100;
       border: 1px solid $gray-300;
 
       > .timeline-header {

build/scss/mixins/_accent.scss

@@ -22,14 +22,14 @@
     .dropdown-item {
       &:active,
       &.active {
-        background: $color;
+        background-color: $color;
         color: color-yiq($color);
       }
     }
 
     .custom-control-input:checked ~ .custom-control-label {
       &::before {
-        background: $color;
+        background-color: $color;
         border-color: darken($color, 20%);
       }
 

build/scss/mixins/_cards.scss

@@ -63,7 +63,7 @@
       table td.hour:hover,
       table td.minute:hover,
       table td.second:hover {
-        background: darken($color, 8%);
+        background-color: darken($color, 8%);
         color: color-yiq($color);
       }
 
@@ -73,7 +73,7 @@
 
       table td.active,
       table td.active:hover {
-        background: lighten($color, 10%);
+        background-color: lighten($color, 10%);
         color: color-yiq($color);
       }
     }

build/scss/mixins/_custom-forms.scss

@@ -6,7 +6,7 @@
 @mixin custom-switch-variant($name, $color) {
   &.custom-switch-off-#{$name} {
     & .custom-control-input ~ .custom-control-label::before {
-      background: #{$color};
+      background-color: #{$color};
       border-color: darken($color, 20%);
     }
 
@@ -15,13 +15,13 @@
     }
 
     & .custom-control-input ~ .custom-control-label::after {
-      background: darken($color, 25%);
+      background-color: darken($color, 25%);
     }
   }
 
   &.custom-switch-on-#{$name} {
     & .custom-control-input:checked ~ .custom-control-label::before {
-      background: #{$color};
+      background-color: #{$color};
       border-color: darken($color, 20%);
     }
 
@@ -30,7 +30,7 @@
     }
 
     & .custom-control-input:checked ~ .custom-control-label::after {
-      background: lighten($color, 30%);
+      background-color: lighten($color, 30%);
     }
   }
 }

build/scss/mixins/_direct-chat.scss

@@ -5,7 +5,7 @@
 // Direct Chat Variant
 @mixin direct-chat-variant($bg-color, $color: $white) {
   .right > .direct-chat-text {
-    background: $bg-color;
+    background-color: $bg-color;
     border-color: $bg-color;
     color: color-yiq($bg-color);
 

build/scss/mixins/_miscellaneous.scss

@@ -26,7 +26,7 @@
 
 // Gradient background
 @mixin gradient($color: #f5f5f5, $start: #eee, $stop: $white) {
-  background: $color;
-  background: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
+  background-color: $color;
+  background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
 }
 

build/scss/mixins/_navbar.scss

@@ -17,7 +17,7 @@
   .nav .open > a:hover,
   .nav .open > a:focus,
   .nav > .active > a {
-    background: $hover-bg;
+    background-color: $hover-bg;
     color: $hover-color;
   }
 
@@ -27,7 +27,7 @@
 
     &:hover,
     &:focus {
-      background: $hover-bg;
+      background-color: $hover-bg;
       color: $hover-color;
     }
   }

build/scss/mixins/_toasts.scss

@@ -5,7 +5,7 @@
 // Toast Variant
 @mixin toast-variant($name, $color) {
   &.bg-#{$name} {
-    background: rgba($color, .9) !important;
+    background-color: rgba($color, .9) !important;
     @if (color-yiq($color) == $yiq-text-light) {
 
       .close {
@@ -15,7 +15,7 @@
     }
 
     .toast-header {
-      background: rgba($color, .85);
+      background-color: rgba($color, .85);
       color: color-yiq($color);
     }
   }

build/scss/pages/_invoice.scss

@@ -3,7 +3,7 @@
 //
 
 .invoice {
-  background: $white;
+  background-color: $white;
   border: 1px solid $card-border-color;
   position: relative;
 }

build/scss/pages/_lockscreen.scss

@@ -4,7 +4,7 @@
 
 // ADD THIS CLASS TO THE <BODY> TAG
 .lockscreen {
-  background: $gray-200;
+  background-color: $gray-200;
 
   // User name [optional]
   .lockscreen-name {
@@ -34,7 +34,7 @@
 // Will contain the image and the sign in form
 .lockscreen-item {
   @include border-radius(4px);
-  background: $white;
+  background-color: $white;
   margin: 10px auto 30px;
   padding: 0;
   position: relative;
@@ -44,7 +44,7 @@
 // User image
 .lockscreen-image {
   @include border-radius(50%);
-  background: $white;
+  background-color: $white;
   left: -10px;
   padding: 5px;
   position: absolute;

build/scss/pages/_login_and_register.scss

@@ -17,7 +17,7 @@
 .login-page,
 .register-page {
   align-items: center;
-  background: $gray-200;
+  background-color: $gray-200;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -36,7 +36,7 @@
 
 .login-card-body,
 .register-card-body {
-  background: $white;
+  background-color: $white;
   border-top: 0;
   color: #666;
   padding: 20px;

build/scss/pages/_mailbox.scss

@@ -63,7 +63,7 @@
 }
 
 .mailbox-attachment-info {
-  background: $gray-100;
+  background-color: $gray-100;
   padding: 10px;
 }