apostrophe 4.3.3 → 4.4.1

package/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue

@@ -221,6 +221,7 @@ export default {
 <style lang="scss" scoped>
   .apos-button {
     @include type-base;
+
     position: relative;
     display: inline-block;
     overflow: hidden;
@@ -229,49 +230,53 @@ export default {
     color: var(--a-text-primary);
     border-radius: var(--a-border-radius);
     background-color: var(--a-base-9);
-    transition: all 0.2s ease;
+    transition: all 200ms ease;
     text-decoration: none;
 
     &:hover {
       cursor: pointer;
       background-color: var(--a-base-8);
     }
+
     &:active,
     &.apos-is-active {
       background-color: var(--a-base-7);
     }
+
     &:focus {
       box-shadow: 0 0 0 1px var(--a-base-7), 0 0 0 3px var(--a-base-8);
       outline: none;
       border: 1px solid var(--a-base-3);
     }
+
     &:hover:not([disabled]),
     &:focus:not([disabled]) {
       transform: translateY(-1px);
     }
+
     &[disabled],
     &.apos-button--disabled {
       background-color: var(--a-base-9);
       border: 1px solid var(--a-base-8);
       color: var(--a-base-5);
+
       &:hover {
         cursor: not-allowed;
       }
     }
+
     &[disabled].apos-button--busy {
       border: 1px solid var(--a-base-1);
     }
+
     .apos-spinner {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       margin: auto;
     }
 
     .apos-spinner.fade-enter-active, .fade-leave-active {
-      transition: all 0.2s ease;
+      transition: all 200ms ease;
     }
 
     .apos-spinner.fade-enter, .fade-leave-to {
@@ -297,6 +302,7 @@ export default {
     width: 100%;
     height: 100%;
   }
+
   .apos-button__color-preview,
   .apos-button__color-preview__swatch,
   .apos-button__color-preview__checkerboard {
@@ -311,9 +317,11 @@ export default {
     width: 100%;
     height: 100%;
   }
+
   .apos-button__color-preview__swatch {
     z-index: $z-index-default;
   }
+
   .apos-button__color-preview__checkerboard {
     z-index: $z-index-base;
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC');
@@ -329,6 +337,7 @@ export default {
     border: none;
     color: var(--a-primary);
     background-color: transparent;
+
     &:hover,
     &:active,
     &.apos-is-active,
@@ -337,20 +346,24 @@ export default {
       text-decoration: underline;
       color: var(--a-primary-dark-10);
     }
+
     &:focus {
       box-shadow: none;
       outline: none;
       border: none;
     }
+
     &[disabled] {
       background-color: transparent;
       border: none;
+
       &:hover {
         text-decoration: none;
         cursor: not-allowed;
         color: var(--a-base-5);
       }
     }
+
     .apos-button__label {
       line-height: var(--a-line-tall);
     }
@@ -359,6 +372,7 @@ export default {
   .apos-button--subtle {
     padding: 11px 10px; // extra pixel keeps them aligned with border'd buttons
     color: var(--a-text-primary);
+
     &:hover,
     &:focus,
     &:active {
@@ -370,7 +384,8 @@ export default {
 
   .apos-button--gradient-on-hover {
     z-index: $z-index-base;
-    &:after {
+
+    &::after {
       z-index: $z-index-default;
       content: '';
       position: absolute;
@@ -388,12 +403,14 @@ export default {
         var(--a-brand-green) 100%
       );
       opacity: 0;
-      transition: all 0.3s ease;
+      transition: all 300ms ease;
     }
-    &:hover:after {
+
+    &:hover::after {
       opacity: 0.4;
     }
-    &[disabled].apos-button--busy:after {
+
+    &[disabled].apos-button--busy::after {
       background-size: 400% 400%;
       opacity: 1;
     }
@@ -401,12 +418,15 @@ export default {
     &.apos-button[disabled].apos-button--busy {
       border: none;
     }
-    &[disabled].apos-button--busy:after {
-      animation: animateGradient 10s ease-in-out infinite;
+
+    &[disabled].apos-button--busy::after {
+      animation: animate-gradient 10000ms ease-in-out infinite;
     }
+
     .apos-button__label {
       position: relative;
     }
+
     .apos-button__label,
     .apos-spinner {
       z-index: calc(#{$z-index-default} + 1);
@@ -414,8 +434,8 @@ export default {
   }
 
   .apos-button--block {
-    box-sizing: border-box;
     display: block;
+    box-sizing: border-box;
     width: 100%;
   }
 
@@ -423,6 +443,7 @@ export default {
     .apos-button__content {
       flex-direction: row-reverse;
     }
+
     .apos-button__icon {
       margin-right: 0;
       margin-left: 5px;
@@ -433,18 +454,22 @@ export default {
     &:hover {
       background-color: var(--a-base-9);
     }
+
     &:active,
     &.apos-is-active {
       background-color: var(--a-base-8);
     }
+
     &:focus {
       box-shadow: 0 0 3px var(--a-base-2);
     }
+
     &[disabled] {
       border: 1px solid $input-color-disabled;
       color: $input-color-disabled;
       background-color: transparent;
     }
+
     &.apos-button--busy {
       color: var(--a-base-5);
     }
@@ -454,23 +479,28 @@ export default {
     border: 1px solid var(--a-primary-dark-10);
     color: var(--a-white);
     background: var(--a-primary);
+
     &:hover {
       background-color: var(--a-primary-dark-10);
     }
+
     &:active,
     &.apos-is-active {
       background-color: var(--a-primary-dark-15);
     }
+
     &:focus {
       box-shadow: 0 0 0 1px var(--a-base-7),
         0 0 0 3px var(--a-primary-light-40);
     }
+
     &[disabled],
     &.apos-button--disabled {
       border: 1px solid var(--a-primary-light-40);
       color: var(--a-white);
       background-color: var(--a-primary-light-40);
     }
+
     &[disabled].apos-button--busy {
       border: 1px solid var(--a-primary-light-40);
     }
@@ -480,20 +510,25 @@ export default {
     background-color: var(--a-base-1);
     color: var(--a-base-10);
     border-color: var(--a-base-4);
+
     &:hover {
       background-color: var(--a-base-1);
     }
+
     &:active,
     &.apos-is-active {
       background-color: var(--a-base-1);
     }
+
     &:focus {
       box-shadow: 0 0 0 1px var(--a-base-7), 0 0 0 3px var(--a-base-1);
     }
+
     &[disabled] {
       background-color: var(--a-base-4);
       color: var(--a-base-7);
     }
+
     &[disabled].apos-button--busy {
       border: 1px solid var(--a-base-1);
     }
@@ -503,28 +538,35 @@ export default {
     border: 1px solid var(--a-danger);
     color: var(--a-white);
     background-color: var(--a-danger);
+
     &:hover {
       background-color: var(--a-danger-button-hover);
     }
+
     &:active,
     &.apos-is-active {
       background-color: var(--a-danger-button-active);
     }
+
     &:focus {
       box-shadow: 0 0 0 1px var(--a-base-7),
         0 0 0 3px var(--a-danger-button-disabled);
     }
+
     &[disabled] {
       border: 1px solid var(--a-danger-button-disabled);
       color: var(--a-white);
       background-color: var(--a-danger-button-disabled);
     }
+
     &[disabled].apos-button--busy {
       border: 1px solid var(--a-danger-button-disabled);
     }
+
     &.apos-button--inline {
       color: var(--a-danger-button-active);
     }
+
     .apos-spinner__svg {
       color: var(--a-danger);
     }
@@ -534,6 +576,7 @@ export default {
     .apos-button__content {
       opacity: 0;
     }
+
     .apos-spinner {
       opacity: 1;
     }
@@ -541,6 +584,7 @@ export default {
 
   .apos-button--icon-only {
     padding: 10px;
+
     .apos-button__icon {
       margin-right: 0;
     }
@@ -562,7 +606,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: opacity 0.2s ease;
+    transition: opacity 200ms ease;
   }
 
   .apos-button__icon {
@@ -592,6 +636,7 @@ export default {
 
   .apos-button--inline {
     padding: 0;
+
     &, &[disabled], &:hover, &:active, &:focus {
       border: 0;
       background-color: transparent;
@@ -625,13 +670,15 @@ export default {
     display: block;
   }
 
-  @keyframes animateGradient {
+  @keyframes animate-gradient {
     0% {
       background-position: 0% 50%;
     }
+
     50% {
       background-position: 100% 50%;
     }
+
     100% {
       background-position: 0% 50%;
     }

package/modules/@apostrophecms/ui/ui/apos/components/AposButtonGroup.vue

@@ -55,9 +55,11 @@ export default {
   .apos-button-group :deep(.apos-button) {
     background-color: var(--a-background-primary);
     border: none;
+
     &:hover {
       background-color: var(--a-base-9);
     }
+
     &:focus {
       background-color: var(--a-base-8);
     }
@@ -97,13 +99,16 @@ export default {
       background-color: var(--a-background-inverted);
       color: var(--a-text-inverted);
     }
+
     &:deep(.apos-button) {
       border: none;
       background-color: var(--a-background-inverted);
       color: var(--a-text-inverted);
+
       &:hover {
         background-color: var(--a-base-2);
       }
+
       &:focus {
         background-color: var(--a-base-3);
       }
@@ -116,12 +121,15 @@ export default {
       border: 1px solid var(--a-primary-dark-10);
       color: var(--a-primary-dark-10);
     }
+
     &:deep(.apos-button) {
       background-color: var(--a-background-primary);
       color: var(--a-primary-dark-10);
+
       &:hover {
         background-color: var(--a-base-8);
       }
+
       &:focus {
         background-color: var(--a-base-9);
       }

package/modules/@apostrophecms/ui/ui/apos/components/AposButtonSplit.vue

@@ -182,18 +182,22 @@ function menuClose() {
   .apos-button-split__menu__dialog-item {
     @include apos-button-reset();
     @include apos-transition();
+
     padding: $spacing-base + $spacing-half $spacing-double $spacing-base + $spacing-half $spacing-quadruple;
     border-bottom: 1px solid var(--a-base-9);
+
     &:hover,
     &:focus,
     &:active,
     &.apos-is-selected {
       background-color: var(--a-base-9);
     }
+
     &:focus,
     &:active {
       outline: 1px solid var(--a-primary);
     }
+
     &:last-child {
       margin-bottom: 0;
       border-bottom: 0;
@@ -207,6 +211,7 @@ function menuClose() {
 
   .apos-button-split__menu__dialog-label {
     @include type-large;
+
     margin-bottom: $spacing-half;
   }
 
@@ -217,9 +222,9 @@ function menuClose() {
   }
 
   .apos-button-split__button :deep(.apos-button) {
-    padding-right: $spacing-quadruple + $spacing-base;
     margin-top: 0;
     margin-bottom: 0;
+    padding-right: $spacing-quadruple + $spacing-base;
   }
 
   .apos-button-split__menu {
@@ -233,12 +238,13 @@ function menuClose() {
     :deep(.apos-button__wrapper) {
       height: 100%;
     }
+
     :deep(.apos-button) {
       display: flex;
       box-sizing: border-box;
-      height: 100%;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      height: 100%;
       margin: 0;
       padding-top: 0;
       padding-bottom: 0;

package/modules/@apostrophecms/ui/ui/apos/components/AposCellContextMenu.vue

@@ -64,8 +64,10 @@ export default {
 <style lang="scss" scoped>
   .apos-table__cell-field--context-menu__content {
     @include apos-transition();
+
     display: inline-block;
     opacity: 0.3;
+
     &.apos-is-visible {
       opacity: 1;
     }

package/modules/@apostrophecms/ui/ui/apos/components/AposCellLabels.vue

@@ -92,6 +92,7 @@ export default {
     justify-content: flex-end;
     padding-right: 10px;
   }
+
   .apos-table__cell-field__label {
     margin-left: 5px;
   }

package/modules/@apostrophecms/ui/ui/apos/components/AposCloudUploadIcon.vue

@@ -15,11 +15,11 @@
         y2="20"
         gradientTransform="matrix(1.848483, 1.922034, -2.33985, 2.250314, 31.445274, -24.099256)"
       >
-        <stop offset="0" style="stop-color: rgb(50, 197, 255);" />
-        <stop offset="0.337" style="stop-color: rgb(182, 32, 224);" />
-        <stop offset="0.501" style="stop-color: rgb(182, 32, 224);" />
-        <stop offset="0.854" style="stop-color: rgb(247, 181, 0);" />
-        <stop offset="1" style="stop-color: rgb(247, 181, 0);" />
+        <stop offset="0" style="stop-color: rgb(50 197 255);" />
+        <stop offset="0.337" style="stop-color: rgb(182 32 224);" />
+        <stop offset="0.501" style="stop-color: rgb(182 32 224);" />
+        <stop offset="0.854" style="stop-color: rgb(247 181 0);" />
+        <stop offset="1" style="stop-color: rgb(247 181 0);" />
       </linearGradient>
     </defs>
     <path d="M 37.334 28 L 37.334 38.666 L 26.666 38.666 L 26.666 28 L 18.666 28 L 32 14.666 L 45.334 28 M 51.599 20.079 C 49.787 10.907 41.706 4 32 4 C 24.293 4 17.6 8.374 14.267 14.747 C 6.24 15.626 0 22.4 0 30.666 C 0 39.503 7.164 46.666 16 46.666 L 50.666 46.666 C 58.03 46.666 64 40.697 64 33.334 C 64 26.294 58.533 20.586 51.599 20.079 Z" />

package/modules/@apostrophecms/ui/ui/apos/components/AposCombo.vue

@@ -460,6 +460,7 @@ export default {
 
 .apos-combo__selected {
   @include type-base;
+
   display: flex;
   align-items: center;
   gap: 4px;
@@ -488,10 +489,10 @@ export default {
   left: 0;
   display: none;
   width: 100%;
+  margin: 0;
+  padding-left: 0;
   list-style: none;
   background-color: var(--a-white);
-  padding-left: 0;
-  margin: 0;
   max-height: 300px;
   overflow-y: auto;
   box-shadow: 0 0 3px var(--a-base-2);
@@ -503,8 +504,8 @@ export default {
   }
 
   &-typehead {
-    box-sizing: border-box;
     display: flex;
+    box-sizing: border-box;
     align-items: center;
   }
 }
@@ -521,14 +522,15 @@ export default {
 }
 
 .apos-combo__typehead {
+  @include type-base;
+
+  box-sizing: border-box;
   flex-grow: 1;
   margin: 0;
   padding: 10px 10px 10px 20px;
   border: none;
-  box-sizing: border-box;
   outline: none;
   background-color: transparent;
-  @include type-base;
 }
 
 .apos-combo__spinner {

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue

@@ -118,7 +118,8 @@ const dropdownContentStyle = ref({});
 const arrowEl = ref();
 
 defineExpose({
-  hide
+  hide,
+  setDropdownPosition
 });
 
 const popoverClass = computed(() => {
@@ -206,7 +207,7 @@ async function setDropdownPosition() {
   } = await computePosition(dropdown.value, dropdownContent.value, {
     placement: props.menuPlacement,
     middleware: [
-      offset(15),
+      offset(props.menuOffset),
       shift({ padding: 5 }),
       flip(),
       arrow({
@@ -259,7 +260,7 @@ async function setDropdownPosition() {
 .apos-context-menu__popup {
   display: inline-block;
   color: var(--a-text-primary);
-  transition: scale 0.15s ease, translatey 0.15s ease;
+  transition: scale 200ms ease, translatey 200ms ease;
 }
 
 .apos-context-menu__inner {
@@ -271,11 +272,13 @@ async function setDropdownPosition() {
 
 .apos-context-menu__pane {
   @include type-base;
+
   padding: 20px;
   border: 1px solid var(--a-base-8);
   border-radius: var(--a-border-radius);
   box-shadow: var(--a-box-shadow);
   background-color: var(--a-background-primary);
+
   &:focus {
     outline: none;
   }
@@ -283,12 +286,12 @@ async function setDropdownPosition() {
 
 .apos-context-menu__items {
   @include apos-list-reset();
+
   display: inline-block;
   list-style-type: none;
   width: max-content;
   margin: none;
-  margin-block-start: 0;
-  margin-block-end: 0;
+  margin-block: 0 0;
   padding: 10px 0;
 }
 </style>

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenuDialog.vue

@@ -113,7 +113,7 @@ function emitSetArrow(arrowEl) {
 .apos-context-menu__dialog {
   display: inline-block;
   color: var(--a-text-primary);
-  transition: scale 0.15s ease, translatey 0.15s ease;
+  transition: scale 200ms ease, translatey 200ms ease;
 }
 
 .apos-context-menu__inner {
@@ -125,6 +125,7 @@ function emitSetArrow(arrowEl) {
 
 .apos-context-menu__pane {
   @include type-base;
+
   padding: 20px;
   border: 1px solid var(--a-base-8);
   border-radius: var(--a-border-radius);
@@ -134,17 +135,18 @@ function emitSetArrow(arrowEl) {
 
 .apos-context-menu__items {
   @include apos-list-reset();
+
   display: inline-block;
   list-style-type: none;
   width: max-content;
   margin: none;
-  margin-block-start: 0;
-  margin-block-end: 0;
+  margin-block: 0 0;
   padding: 10px 0;
 }
 
 .apos-context-menu__dialog :deep(.apos-schema .apos-field) {
   margin-bottom: 20px;
+
   .apos-field__help {
     margin-top: 5px;
   }