Fix #242

sass/components/card.sass

@@ -43,7 +43,7 @@
     border-right: 1px solid $border
 
 .card
-  background: $white
+  background-color: $white
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
   color: $text
   max-width: 100%

sass/components/media.sass

@@ -1,5 +1,5 @@
 .media-number
-  background: $background
+  background-color: $background
   border-radius: 290486px
   display: inline-block
   font-size: $size-medium

sass/components/menu.sass

@@ -10,11 +10,11 @@
     display: block
     padding: 5px 10px
     &:hover
-      background: $background
+      background-color: $background
       color: $link
     // Modifiers
     &.is-active
-      background: $link
+      background-color: $link
       color: $link-invert
   li
     ul

sass/components/message.sass

@@ -6,7 +6,7 @@
     color: inherit
 
 .message-header
-  background: $text
+  background-color: $text
   border-radius: $radius $radius 0 0
   color: $text-invert
   padding: 7px 10px
@@ -18,7 +18,7 @@
 
 .message
   @extend .block
-  background: $background
+  background-color: $background
   border-radius: $radius
   // Colors
   @each $name, $pair in $colors
@@ -27,9 +27,9 @@
     $lightning: max((100% - lightness($color)) - 4%, 0%)
     $darkness: max(lightness($color) - 10%, lightness($color))
     &.is-#{$name}
-      background: lighten($color, $lightning)
+      background-color: lighten($color, $lightning)
       .message-header
-        background: $color
+        background-color: $color
         color: $color-invert
       .message-body
         border-color: $color

sass/components/modal.sass

@@ -1,6 +1,6 @@
 .modal-background
   +overlay
-  background: rgba($black, 0.86)
+  background-color: rgba($black, 0.86)
 
 .modal-content
   margin: 0 20px
@@ -25,7 +25,7 @@
 
 .modal-card
   @extend .modal-content
-  background: $white
+  background-color: $white
   border-radius: $radius-large
   display: flex
   flex-direction: column
@@ -35,7 +35,7 @@
 .modal-card-head,
 .modal-card-foot
   align-items: center
-  background: $background
+  background-color: $background
   display: flex
   flex-shrink: 0
   justify-content: flex-start

sass/components/nav.sass

@@ -52,7 +52,7 @@ a.nav-item
 .nav-menu
   // Responsiveness
   +mobile
-    background: $white
+    background-color: $white
     box-shadow: 0 4px 7px rgba($black, 0.1)
     left: 0
     display: none
@@ -91,7 +91,7 @@ a.nav-item
 
 .nav
   align-items: stretch
-  background: $white
+  background-color: $white
   display: flex
   min-height: $nav-height
   position: relative

sass/components/panel.sass

@@ -8,7 +8,7 @@
     line-height: inherit
 
 .panel-heading
-  background: $background
+  background-color: $background
   border-bottom: 1px solid $border
   border-radius: 4px 4px 0 0
   color: $text-strong
@@ -48,7 +48,7 @@
 
 a.panel-block
   &:hover
-    background: $background
+    background-color: $background
 
 .panel
   border: 1px solid $border

sass/components/tabs.sass

@@ -62,12 +62,12 @@
       padding-bottom: 5px
       padding-top: 5px
       &:hover
-        background: $background
+        background-color: $background
         border-bottom-color: $border
     li
       &.is-active
         a
-          background: $white
+          background-color: $white
           border-color: $border
           border-bottom-color: transparent !important
   &.is-fullwidth
@@ -81,7 +81,7 @@
       padding-top: 5px
       position: relative
       &:hover
-        background: $background
+        background-color: $background
         border-color: $border-hover
         z-index: 2
     li
@@ -93,7 +93,7 @@
         border-radius: 0 $radius $radius 0
       &.is-active
         a
-          background: $primary
+          background-color: $primary
           border-color: $primary
           color: $primary-invert
           z-index: 1