fix: QFab | QFabAction - Unset or incorrect Z-index quasarframework#938

rstoenescu · rstoenescu · commit f3c2e9d79c19 · 2017-09-29T11:29:04.000+03:00
diff --git a/dev/components/components/fab.vue b/dev/components/components/fab.vue
@@ -19,7 +19,7 @@
 
         <br>
 
-        <q-toggle v-model="toggle" class="z-absolute fixed-top" />
+        <q-toggle v-model="toggle" class="z-max fixed-top" />
         <q-fab v-model="toggle" icon="keyboard_arrow_left" direction="left">
           <q-fab-action @click="toast('mail')" icon="mail" />
           <q-fab-action @click="toast('alarm')" icon="alarm" />
diff --git a/dev/components/components/modal.vue b/dev/components/components/modal.vue
@@ -37,7 +37,7 @@
       </q-list>
     </div>
 
-    <q-toggle v-model="toggle" class="z-absolute fixed-top" />
+    <q-toggle v-model="toggle" class="z-max fixed-top" />
     <q-modal v-model="toggle" ref="basicModal" :content-css="{padding: '50px', minWidth: '50vw'}">
       <h4>Basic Modal</h4>
       <p v-for="n in 25">Scroll down to close</p>
diff --git a/dev/components/components/popover.vue b/dev/components/components/popover.vue
@@ -8,7 +8,7 @@
       </p>
 
       <div>
-        <q-toggle v-model="toggle" class="z-absolute fixed-top" />
+        <q-toggle v-model="toggle" class="z-max fixed-top" />
         <q-btn color="primary" icon="assignment">
           <q-popover v-model="toggle" ref="popover1">
             <q-list link separator class="scroll" style="min-width: 100px">
diff --git a/dev/components/components/tooltip.vue b/dev/components/components/tooltip.vue
@@ -17,7 +17,7 @@
         <q-tooltip :delay="1000">Quasar Rulz!</q-tooltip>
       </div>
 
-      <q-toggle v-model="toggle" class="z-absolute fixed-top" />
+      <q-toggle v-model="toggle" class="z-max fixed-top" />
       <p class="caption">With offset</p>
       <div class="group">
         <q-btn color="indigo" label="Hover">
diff --git a/src/components/ajax-bar/ajax-bar.ios.styl b/src/components/ajax-bar/ajax-bar.ios.styl
@@ -1,6 +1,6 @@
 .q-loading-bar
   position fixed
-  z-index $z-absolute
+  z-index $z-max
   transition all .2s cubic-bezier(0, 0, .2, 1)
 
   &.top
diff --git a/src/components/ajax-bar/ajax-bar.mat.styl b/src/components/ajax-bar/ajax-bar.mat.styl
@@ -1,6 +1,6 @@
 .q-loading-bar
   position fixed
-  z-index $z-absolute
+  z-index $z-max
   transition all .2s cubic-bezier(0, 0, .2, 1)
 
   &.top
diff --git a/src/components/carousel/carousel.ios.styl b/src/components/carousel/carousel.ios.styl
@@ -1,7 +1,7 @@
 .q-carousel
   overflow hidden
   &.fullscreen
-    z-index $z-absolute
+    z-index $z-max
 
 .q-carousel-inner
   position relative
diff --git a/src/components/carousel/carousel.mat.styl b/src/components/carousel/carousel.mat.styl
@@ -1,7 +1,7 @@
 .q-carousel
   overflow hidden
   &.fullscreen
-    z-index $z-absolute
+    z-index $z-max
 
 .q-carousel-inner
   position relative
diff --git a/src/components/editor/QEditor.js b/src/components/editor/QEditor.js
@@ -208,7 +208,7 @@ export default {
               disabled: this.disable,
               fullscreen: this.inFullscreen,
               column: this.inFullscreen,
-              'z-absolute': this.inFullscreen
+              'z-max': this.inFullscreen
             }
           },
           [
diff --git a/src/components/fab/QFab.vue b/src/components/fab/QFab.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="q-fab row inline justify-center"
+    class="q-fab z-fab row inline justify-center"
     :class="{'q-fab-opened': opened}"
   >
     <q-btn
diff --git a/src/components/fab/fab.ios.styl b/src/components/fab/fab.ios.styl
@@ -2,6 +2,9 @@
   position relative
   vertical-align middle
 
+.z-fab
+  z-index $z-fab
+
 .q-fab-opened
   .q-fab-actions
     opacity 1
diff --git a/src/components/fab/fab.mat.styl b/src/components/fab/fab.mat.styl
@@ -2,6 +2,9 @@
   position relative
   vertical-align middle
 
+.z-fab
+  z-index $z-fab
+
 .q-fab-opened
   .q-fab-actions
     opacity 1
diff --git a/src/components/loading/index.js b/src/components/loading/index.js
@@ -8,7 +8,7 @@ let
   timeout,
   props = {}
 
-const staticClass = 'q-loading animate-fade fullscreen column flex-center z-absolute'
+const staticClass = 'q-loading animate-fade fullscreen column flex-center z-max'
 
 function isActive () {
   return appIsInProgress
diff --git a/src/css/core.variables.styl b/src/css/core.variables.styl
@@ -405,11 +405,11 @@ max(value1, value2)
 
 $ios-statusbar-height ?= 20px
 
+$z-fab            ?= 990
 $z-side           ?= 1000
 $z-marginals      ?= 2000
 $z-fixed-side     ?= 3000
 $z-fixed          ?= 4000
-$z-fab            ?= 4100
 
 $z-modal          ?= 5000
 $z-popover        ?= 6000
@@ -418,7 +418,7 @@ $z-toast          ?= 8000
 $z-alert          ?= 8100
 
 $z-body-dimmed    ?= 10000
-$z-absolute       ?= 20000
+$z-max            ?= 20000
 
 $shadow-color ?= black
 $shadow-transition ?= box-shadow .28s cubic-bezier(.4, 0, .2, 1)
diff --git a/src/css/core/visibility.styl b/src/css/core/visibility.styl
@@ -57,8 +57,8 @@ body
   &.dimmed, &.light-dimmed
     &:after
       z-index $z-body-dimmed !important
-.z-absolute
-  z-index $z-absolute !important
+.z-max
+  z-index $z-max !important
 
 for type in desktop mobile cordova electron ios mat touch within-iframe platform-ios platform-android
   body:not(.{type}) .{type}-only,

Original file line number	Diff line number	Diff line change
`@@ -208,7 +208,7 @@ export default {`
`208`	`208`	`disabled: this.disable,`
`209`	`209`	`fullscreen: this.inFullscreen,`
`210`	`210`	`column: this.inFullscreen,`
`211`		`- 'z-absolute': this.inFullscreen`
	`211`	`+ 'z-max': this.inFullscreen`
`212`	`212`	`}`
`213`	`213`	`},`
`214`	`214`	`[`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<template>`
`2`	`2`	`<div`
`3`		`- class="q-fab row inline justify-center"`
	`3`	`+ class="q-fab z-fab row inline justify-center"`
`4`	`4`	`:class="{'q-fab-opened': opened}"`
`5`	`5`	`>`
`6`	`6`	`<q-btn`