apostrophe 4.6.0 → 4.7.0

package/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue

@@ -237,20 +237,22 @@ export default {
   @include apos-button-reset();
   @include type-base;
 
-  position: relative;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 60px;
-  padding: 25px 10px;
-  border-bottom: 1px solid var(--a-base-7);
-  color: var(--a-text-primary);
-  text-align: left;
-  transition: all 200ms ease;
-  background-color: var(--a-base-9);
-  cursor: pointer;
+  & {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 60px;
+    padding: 25px 10px;
+    border-bottom: 1px solid var(--a-base-7);
+    color: var(--a-text-primary);
+    text-align: left;
+    transition: all 200ms ease;
+    background-color: var(--a-base-9);
+    cursor: pointer;
+  }
 
   @include media-up(lap) {
     padding: 25px 10px 25px 20px;

package/modules/@apostrophecms/notification/ui/apos/components/AposNotification.vue

@@ -7,10 +7,7 @@
         :icon-size="notification.icon ? 16 : 12"
       />
     </span>
-    <span
-      ref="label"
-      class="apos-notification__label"
-    >
+    <span ref="label" class="apos-notification__label">
       {{ localize(notification.message) }}
       <!-- OK to use index as key because buttons are constant for the lifetime of the notification -->
       <button
@@ -24,10 +21,7 @@
         {{ localize(button.label) }}
       </button>
     </span>
-    <div
-      v-if="job && job.total"
-      class="apos-notification__progress"
-    >
+    <div v-if="job && job.total" class="apos-notification__progress">
       <div class="apos-notification__progress-bar">
         <div
           class="apos-notification__progress-now"
@@ -69,7 +63,7 @@ export default {
     }
   },
   emits: [ 'close' ],
-  data () {
+  data() {
     return {
       job: this.notification.job && this.notification.job._id ? {
         route: `${apos.modules['@apostrophecms/job'].action}/${this.notification.job._id}`,
@@ -107,7 +101,7 @@ export default {
 
       return classes.join(' ');
     },
-    iconComponent () {
+    iconComponent() {
       if (this.notification.icon) {
         return this.notification.icon;
       } else {
@@ -175,7 +169,7 @@ export default {
       }
       return result;
     },
-    async pollJob () {
+    async pollJob() {
       if (!this.job?.total) {
         return;
       }
@@ -210,9 +204,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .apos-notification {
-    @include apos-transition();
+.apos-notification {
+  @include apos-transition();
 
+  & {
     position: relative;
     display: inline-flex;
     overflow: hidden;
@@ -225,52 +220,54 @@ export default {
     max-width: 500px;
     border-radius: 200px;
     box-shadow: var(--a-box-shadow);
-
-    & + .apos-notification {
-      margin-top: 8px;
-    }
-
-    &:hover {
-      transform: translateY(-1px);
-    }
-  }
-
-  .apos-notification--hidden {
-    display: none;
-  }
-
-  .apos-notification--long {
-    border-radius: 10px;
-  }
-
-  .apos-notification__indicator {
-    position: relative;
-    display: inline-flex;
-    margin-right: 10px;
-    padding: 5px;
-    color: var(--a-base-1);
-    border-radius: 50%;
-    background-color: var(--a-base-1);
-  }
-
-  .apos-notification--warning .apos-notification__indicator {
-    background-color: var(--a-warning-fade);
-    color: var(--a-warning);
   }
 
-  .apos-notification--success .apos-notification__indicator {
-    background-color: var(--a-success-fade);
-    color: var(--a-success);
+  &+.apos-notification {
+    margin-top: 8px;
   }
 
-  .apos-notification--danger .apos-notification__indicator {
-    background-color: var(--a-danger-fade);
-    color: var(--a-danger);
+  &:hover {
+    transform: translateY(-1px);
   }
-
-  .apos-notification__button {
-    @include apos-transition(all);
-
+}
+
+.apos-notification--hidden {
+  display: none;
+}
+
+.apos-notification--long {
+  border-radius: 10px;
+}
+
+.apos-notification__indicator {
+  position: relative;
+  display: inline-flex;
+  margin-right: 10px;
+  padding: 5px;
+  color: var(--a-base-1);
+  border-radius: 50%;
+  background-color: var(--a-base-1);
+}
+
+.apos-notification--warning .apos-notification__indicator {
+  background-color: var(--a-warning-fade);
+  color: var(--a-warning);
+}
+
+.apos-notification--success .apos-notification__indicator {
+  background-color: var(--a-success-fade);
+  color: var(--a-success);
+}
+
+.apos-notification--danger .apos-notification__indicator {
+  background-color: var(--a-danger-fade);
+  color: var(--a-danger);
+}
+
+.apos-notification__button {
+  @include apos-transition(all);
+
+  & {
     position: absolute;
     right: 2px;
     display: flex;
@@ -281,55 +278,60 @@ export default {
     border: none;
     color: var(--a-text-inverted);
     background-color: transparent;
-
-    &:hover {
-      cursor: pointer;
-    }
   }
 
-  .apos-notification__close-icon {
-    height: 12px;
+  &:hover {
+    cursor: pointer;
   }
+}
 
-  .apos-notification__label,
-  .apos-notification__progress-value {
-    @include type-base;
+.apos-notification__close-icon {
+  height: 12px;
+}
 
+.apos-notification__label,
+.apos-notification__progress-value {
+  @include type-base;
+
+  & {
     color: var(--a-text-inverted);
-    line-height: var(--a-line-tallest);
+   line-height: var(--a-line-tallest);
   }
+}
 
-  .apos-notification__label :deep(button) {
-    @include apos-button-reset();
+.apos-notification__label :deep(button) {
+  @include apos-button-reset();
 
+  & {
     text-decoration: underline;
     text-decoration-color: var(--a-success);
     text-underline-offset: 3px;
     padding: 0 3px;
   }
-
-  .apos-notification__progress {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-  }
-
-  .apos-notification__progress-bar {
-    width: 70px;
-    height: 4px;
-    margin-left: 20px;
-    border-width: 0;
-    background-color: var(--a-progress-bg);
-  }
-
-  .apos-notification__progress-now {
-    height: 100%;
-    background-color: var(--a-brand-green);
-    background-image: linear-gradient(46deg, var(--a-brand-gold) 0%, var(--a-brand-red) 26%, var(--a-brand-magenta) 47%, var(--a-brand-blue) 76%, var(--a-brand-green) 100%);
-    transition: width 500ms ease-out;
-  }
-
-  .apos-notification__progress-value {
-    margin-left: 20px;
-  }
+}
+
+.apos-notification__progress {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.apos-notification__progress-bar {
+  width: 70px;
+  height: 4px;
+  margin-left: 20px;
+  border-width: 0;
+  background-color: var(--a-progress-bg);
+}
+
+.apos-notification__progress-now {
+  height: 100%;
+  background-color: var(--a-brand-green);
+  background-image: linear-gradient(46deg, var(--a-brand-gold) 0%, var(--a-brand-red) 26%, var(--a-brand-magenta) 47%, var(--a-brand-blue) 76%, var(--a-brand-green) 100%);
+  transition: width 500ms ease-out;
+}
+
+.apos-notification__progress-value {
+  margin-left: 20px;
+}
 </style>