fix(QFab): scope the --opened class to actions and icon-holder to allow nested QFabs quasarframework#9973 (quasarframework#9981)

quasarframework#9973

Author: pdanpdan

ui/src/components/fab/QFab.js

@@ -66,6 +66,14 @@ export default Vue.extend({
         (this.showing === true ? ' q-fab--opened' : '')
     },
 
+    actionsClasses () {
+      return `q-fab__actions--${this.direction}` + (this.showing === true ? ' q-fab__actions--opened' : '')
+    },
+
+    iconHolderClasses () {
+      return this.showing === true ? 'q-fab__icon-holder--opened' : ''
+    },
+
     attrs () {
       return {
         'aria-expanded': this.showing === true ? 'true' : 'false',
@@ -89,7 +97,7 @@ export default Vue.extend({
     const child = []
 
     this.hideIcon !== true && child.push(
-      h('div', { staticClass: 'q-fab__icon-holder' }, [
+      h('div', { staticClass: 'q-fab__icon-holder', class: this.iconHolderClasses }, [
         h(QIcon, {
           staticClass: 'q-fab__icon absolute-full',
           props: { name: this.icon || this.$q.iconSet.fab.icon }
@@ -131,7 +139,7 @@ export default Vue.extend({
 
       h('div', {
         staticClass: 'q-fab__actions flex no-wrap inline',
-        class: `q-fab__actions--${this.direction}`
+        class: this.actionsClasses
       }, slot(this, 'default'))
     ])
   }

ui/src/components/fab/QFab.sass

@@ -13,18 +13,6 @@
   &--form-square
     border-radius: $generic-border-radius
 
-  &--opened
-    .q-fab__actions
-      opacity: 1
-      transform: scale(1) translate(0, 0)
-      pointer-events: all
-    .q-fab__icon
-      transform: rotate(180deg)
-      opacity: 0
-    .q-fab__active-icon
-      transform: rotate(0deg)
-      opacity: 1
-
   &__icon, &__active-icon
     transition: opacity .4s, transform .4s
   &__icon
@@ -91,6 +79,14 @@
     min-height: 24px
     position: relative
 
+    &--opened
+      .q-fab__icon
+        transform: rotate(180deg)
+        opacity: 0
+      .q-fab__active-icon
+        transform: rotate(0deg)
+        opacity: 1
+
   &__actions
     position: absolute
     opacity: 0
@@ -139,6 +135,11 @@
       left: 50%
       margin-left: -28px
 
+    &--opened
+      opacity: 1
+      transform: scale(1) translate(0, 0)
+      pointer-events: all
+
   &--align-left
     > .q-fab__actions
       &--up, &--down

ui/src/components/fab/QFab.styl

@@ -13,18 +13,6 @@
   &--form-square
     border-radius: $generic-border-radius
 
-  &--opened
-    .q-fab__actions
-      opacity: 1
-      transform: scale(1) translate(0, 0)
-      pointer-events: all
-    .q-fab__icon
-      transform: rotate(180deg)
-      opacity: 0
-    .q-fab__active-icon
-      transform: rotate(0deg)
-      opacity: 1
-
   &__icon, &__active-icon
     transition: opacity .4s, transform .4s
   &__icon
@@ -91,6 +79,14 @@
     min-height: 24px
     position: relative
 
+    &--opened
+      .q-fab__icon
+        transform: rotate(180deg)
+        opacity: 0
+      .q-fab__active-icon
+        transform: rotate(0deg)
+        opacity: 1
+
   &__actions
     position: absolute
     opacity: 0
@@ -139,6 +135,11 @@
       left: 50%
       margin-left: -28px
 
+    &--opened
+      opacity: 1
+      transform: scale(1) translate(0, 0)
+      pointer-events: all
+
   &--align-left
     > .q-fab__actions
       &--up, &--down