fix(ui): Sass fixes quasarframework#5049

Author: rstoenescu

ui/dev/app.js

@@ -10,10 +10,10 @@ import Quasar from 'quasar'
 /************************************************
  * Enable either Sass or Stylus -- but NEVER BOTH
  ************************************************/
-// import '../src/css/index.sass'
+import '../src/css/index.sass'
 // import '../src/css/flex-addon.sass'
 
-import '../src/css/index.styl'
+// import '../src/css/index.styl'
 // import '../src/css/flex-addon.styl'
 /************************************************/
 

ui/src/components/badge/QBadge.sass

@@ -1,7 +1,7 @@
 .q-badge
   background-color: $primary
   background-color: var(--q-color-primary)
-  color: white
+  color: #fff
   padding: 2px 6px
   border-radius: $generic-border-radius
   font-size: 12px

ui/src/components/banner/QBanner.sass

@@ -1,7 +1,7 @@
 .q-banner
   min-height: 54px
   padding: 8px 16px
-  background: white
+  background: #fff
 
   &--top-padding
     padding-top: 14px

ui/src/components/btn/QBtnGroup.sass

@@ -52,7 +52,7 @@
     align-self: stretch
   &--glossy
     > .q-btn-item
-      background-image: linear-gradient(to bottom, rgba(white, .3), rgba(white, 0) 50%, rgba(black, .12) 51%, rgba(black, .04)) !important
+      background-image: linear-gradient(to bottom, rgba(#fff, .3), rgba(#fff, 0) 50%, rgba(#000, .12) 51%, rgba(#000, .04)) !important
 
   &--spread
     > .q-btn-group

ui/src/components/card/QCard.sass

@@ -2,7 +2,7 @@
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
   vertical-align: top
-  background: white
+  background: #fff
   position: relative
 
   > div, > img
@@ -32,7 +32,7 @@
     border: 1px solid $separator-color
 
   &--dark
-    color: white
+    color: #fff
     border-color: $separator-dark-color
 
   &__section

ui/src/components/carousel/QCarousel.sass

@@ -10,7 +10,7 @@
     height: 100%
 
   &__control
-    color: white
+    color: #fff
 
   &__prev-arrow,
   &__next-arrow
@@ -53,7 +53,7 @@
       &:hover, &.q-carousel__thumbnail--active
         opacity: 1
       &.q-carousel__thumbnail--active
-        border-color: white
+        border-color: #fff
         cursor: default
 
   &.q-carousel--navigation .q-carousel__slide

ui/src/components/checkbox/QCheckbox.sass

@@ -27,7 +27,7 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
     padding-right: 4px
 
   &__check
-    color: white
+    color: #fff
 
     path
       stroke: currentColor
@@ -40,7 +40,7 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
     height: 0
     left: 0
     top: 50%
-    border-color: white
+    border-color: #fff
     border-width: 1px
     border-style: solid
     transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -280deg) scale3d(0, 0, 0)

ui/src/components/color/QColor.sass

@@ -1,6 +1,6 @@
 .q-color-picker
   overflow: hidden
-  background: white
+  background: #fff
   max-width: 350px
   vertical-align: top
 
@@ -27,13 +27,13 @@
 
   &__header-content
     position: relative
-    background: white
+    background: #fff
 
     &--light
-      color: black
+      color: #000
 
     &--dark
-      color: white
+      color: #fff
       .q-tab--inactive
         &:before
           content: ''
@@ -47,7 +47,7 @@
   &__header-banner
     height: 52px
   &__header-bg
-    background: white
+    background: #fff
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
 
   &__footer
@@ -64,15 +64,15 @@
     padding: 10px
 
   &__spectrum-white
-    background: linear-gradient(to right, white, rgba(255, 255, 255, 0))
+    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))
 
   &__spectrum-black
-    background: linear-gradient(to top, black, rgba(0, 0, 0, 0))
+    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0))
 
   &__spectrum-circle
     width: 10px
     height: 10px
-    box-shadow: 0 0 0 1.5px white, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4)
+    box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4)
     border-radius: 50%
     transform: translate(-5px, -5px)
 
@@ -81,10 +81,10 @@
     opacity: 1
 
   &__alpha .q-slider__track-container
-    color: white
+    color: #fff
     opacity: 1
     height: 8px
-    background-color: white
+    background-color: #fff
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
     &:after
       content: ''
@@ -161,7 +161,7 @@
   &--dark
 
     background: $grey-9
-    color: white
+    color: #fff
 
     .q-color-picker__tune-tab input
       border: 1px solid rgba(#fff, .3)

ui/src/components/datetime/QDate.sass

@@ -2,15 +2,15 @@
   display: inline-flex
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
-  background: white
+  background: #fff
   max-width: 100%
 
   .q-btn
     font-weight: normal
 
   &__header
     border-top-left-radius: inherit
-    color: white
+    color: #fff
     background-color: $primary
     background-color: var(--q-color-primary)
     padding: 16px
@@ -174,5 +174,5 @@
     width: 310px
 
   &--dark
-    color: white
+    color: #fff
     background: $grey-9

ui/src/components/datetime/QTime.sass

@@ -4,12 +4,12 @@
   max-width: 100%
   box-shadow: $shadow-2
   border-radius: $generic-border-radius
-  background: white
+  background: #fff
   outline: none
 
   &__header
     border-top-left-radius: inherit
-    color: white
+    color: #fff
     background-color: $primary
     background-color: var(--q-color-primary)
     padding: 16px
@@ -116,7 +116,7 @@
     &--active
       background-color: $primary
       background-color: var(--q-color-primary)
-      color: white
+      color: #fff
 
   @for $pos from 0 through 11
     $angle: (270 + 30 * $pos)
@@ -139,7 +139,7 @@
   &__now-button
     background-color: $primary
     background-color: var(--q-color-primary)
-    color: white
+    color: #fff
     top: 12px
     right: 12px
 
@@ -191,5 +191,5 @@
       margin-top: 12px
 
   &--dark
-    color: white
+    color: #fff
     background: $grey-9