fix(ui): Sass fixes #5049

quasarframework · Sep 11, 2019 · e42e9cc · e42e9cc
1 parent 84292ec
commit e42e9cc
Show file tree

Hide file tree

Showing 37 changed files with 108 additions and 98 deletions.
diff --git a/ui/dev/app.js b/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'
 /************************************************/
 

diff --git a/ui/src/components/badge/QBadge.sass b/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

diff --git a/ui/src/components/banner/QBanner.sass b/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

diff --git a/ui/src/components/btn/QBtnGroup.sass b/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

diff --git a/ui/src/components/card/QCard.sass b/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

diff --git a/ui/src/components/carousel/QCarousel.sass b/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

diff --git a/ui/src/components/checkbox/QCheckbox.sass b/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)

diff --git a/ui/src/components/color/QColor.sass b/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)

diff --git a/ui/src/components/datetime/QDate.sass b/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
diff --git a/ui/src/components/datetime/QTime.sass b/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
diff --git a/ui/src/components/dialog-bottom-sheet/BottomSheet.sass b/ui/src/components/dialog-bottom-sheet/BottomSheet.sass
@@ -3,7 +3,7 @@
 
   &--dark
     background: $grey-9
-    color: white
+    color: #fff
 
   &__avatar
     border-radius: 50%

diff --git a/ui/src/components/dialog-plugin/DialogPlugin.sass b/ui/src/components/dialog-plugin/DialogPlugin.sass
@@ -3,4 +3,4 @@
 
   &--dark
     background: $grey-9
-    color: white
+    color: #fff
diff --git a/ui/src/components/field/QField.sass b/ui/src/components/field/QField.sass
@@ -237,7 +237,7 @@ $field-transition: .36s cubic-bezier(.4,0,.2,1)
         border: 1px solid rgba(0,0,0,.24)
         transition: border-color $field-transition
       &:hover:before
-        border-color: black
+        border-color: #000
 
       &:after
         height: inherit
@@ -266,7 +266,7 @@ $field-transition: .36s cubic-bezier(.4,0,.2,1)
         transition: border-color $field-transition
 
       &:hover:before
-        border-color: black
+        border-color: #000
 
       &:after
         height: 2px
@@ -292,10 +292,10 @@ $field-transition: .36s cubic-bezier(.4,0,.2,1)
       border-color: rgba(255, 255, 255, .6)
 
     .q-field__control:hover:before
-      border-color: white
+      border-color: #fff
 
     .q-field__native, .q-field__prefix, .q-field__suffix, .q-select__input
-      color: white
+      color: #fff
 
     &:not(.q-field--focused) .q-field__label, .q-field__marginal, .q-field__bottom
       color: rgba(255, 255, 255, .7)
@@ -322,9 +322,9 @@ $field-transition: .36s cubic-bezier(.4,0,.2,1)
     &.q-field--focused
       .q-field__control
         box-shadow: $shadow-2
-        background: black
+        background: #000
       .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
-        color: white
+        color: #fff
 
     &.q-field--readonly
       .q-field__control:before
@@ -339,9 +339,9 @@ $field-transition: .36s cubic-bezier(.4,0,.2,1)
           background: rgba(255, 255, 255, .07)
       &.q-field--focused
         .q-field__control
-          background: white
+          background: #fff
         .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__prepend, .q-field__append, .q-select__input
-          color: black
+          color: #000
       &.q-field--readonly
         .q-field__control:before
           border-color: rgba(255, 255, 255, .24)

diff --git a/ui/src/components/layout/QLayout.sass b/ui/src/components/layout/QLayout.sass
@@ -28,7 +28,7 @@
 .q-layout__section--marginal
   background-color: $primary
   background-color: var(--q-color-primary)
-  color: white
+  color: #fff
 
 .q-header
 
@@ -59,7 +59,7 @@
   position: absolute
   top: 0
   bottom: 0
-  background: white
+  background: #fff
   z-index: $z-side
 
   &--on-top

diff --git a/ui/src/components/list/QList.sass b/ui/src/components/list/QList.sass
@@ -100,7 +100,7 @@
     border-top-color: $separator-dark-color
 
 .q-list--dark, .q-item--dark
-  color: white
+  color: #fff
   border-color: $separator-dark-color
 
   .q-item__section--side:not(.q-item__section--avatar)

diff --git a/ui/src/components/pull-to-refresh/QPullToRefresh.sass b/ui/src/components/pull-to-refresh/QPullToRefresh.sass
@@ -7,7 +7,7 @@
     height: 40px
     color: $primary
     color: var(--q-color-primary)
-    background: white
+    background: #fff
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .3)
 
     &--animating

diff --git a/ui/src/components/scroll-area/QScrollArea.sass b/ui/src/components/scroll-area/QScrollArea.sass
@@ -2,7 +2,7 @@
   position: relative
 
 .q-scrollarea__thumb
-  background: black
+  background: #000
   opacity: .2
   transition: opacity .3s
 

diff --git a/ui/src/components/select/QSelect.sass b/ui/src/components/select/QSelect.sass
@@ -36,7 +36,7 @@
     width: 90vw !important
     max-width: 90vw !important
     max-height: calc(100vh - 70px) !important
-    background: white
+    background: #fff
     display: flex
     flex-direction: column
 
@@ -45,7 +45,7 @@
       background: inherit
 
   &__menu--dark
-    color: white
+    color: #fff
     background: $grey-9
 
 // addressbar always gets shown, so need to slim this down

diff --git a/ui/src/components/slider/QSlider.sass b/ui/src/components/slider/QSlider.sass
@@ -18,7 +18,7 @@
     background: currentColor
 
   &__track-markers
-    color: black
+    color: #000
     background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, transparent 0, transparent)
 
     &:after
@@ -76,7 +76,7 @@
 
     &-text
       position: relative
-      color: white
+      color: #fff
       font-size: 12px
       white-space: nowrap
 
@@ -137,7 +137,7 @@
     .q-slider__track-container
       background: rgba(#fff, .3)
     .q-slider__track-markers
-      color: white
+      color: #fff
 
   &--dense
     height: 20px