@atlassian/aui 9.12.6 → 9.12.7

package/src/less/aui-sidebar-config.less

@@ -7,10 +7,15 @@
 @aui-sidebar-gutter: @aui-grid; // the effective space between the edges and where boxes have to start in order for stuff to lay out according to the spec
 
 @aui-sidebar-nav-link-expected-height: 34px; // 34px makes room for 20px icon box sizes.
-@aui-sidebar-nav-link-inner-spacing: unit(((@aui-sidebar-nav-link-expected-height - @aui-sidebar-icon-size) / 2), px);
+@aui-sidebar-nav-link-inner-spacing: unit(
+    ((@aui-sidebar-nav-link-expected-height - @aui-sidebar-icon-size) / 2),
+    px
+);
 @aui-sidebar-nav-link-icon-spacing: @aui-sidebar-grid; // distance between the right edge of an icon and the left edge of text content
 
 @aui-sidebar-header-avatar-collapsed: @aui-avatar-size-medium; // resize header avatar to a smaller size
 @aui-sidebar-base-line-height: 20px; // pixel value of AUI line height
-@aui-sidebar-footer-height: (@aui-sidebar-base-line-height + (2 * @aui-sidebar-grid)); // footer height
+@aui-sidebar-footer-height: (
+    @aui-sidebar-base-line-height + (2 * @aui-sidebar-grid)
+); // footer height
 // end variables

package/src/less/aui-sidebar-grouping.less

@@ -14,7 +14,6 @@
 // Sidebar navigation grouping
 //
 .aui-sidebar {
-
     .aui-sidebar-group {
         // Note: these margins should collapse with those of aui-nav itself.
         margin-top: (@aui-sidebar-grid * 2);
@@ -26,11 +25,10 @@
         }
     }
 
-
     //-----------------------
     // Sidebar narrow state - add collapsed styles.
     //-----------------------
-    &[aria-expanded="false"] {
+    &[aria-expanded='false'] {
         // Replaces aui-nav with a default image to reflect nested content
         .aui-sidebar-group {
             // by default, groups collapse and are meant to look like clickable buttons.
@@ -78,12 +76,30 @@
                 background-size: @aui-sidebar-icon-size;
                 border: @aui-sidebar-group-actions-border-width solid transparent;
                 border-radius: 50%;
-                content: "";
+                content: '';
                 display: block;
                 height: @aui-icon-size-large;
                 left: 0;
-                margin-left: (((@aui-sidebar-collapsed-width - @aui-sidebar-header-avatar-collapsed - (@aui-sidebar-group-actions-border-width * 2)) / 2));
-                margin-right: (((@aui-sidebar-collapsed-width - @aui-sidebar-header-avatar-collapsed - (@aui-sidebar-group-actions-border-width * 2)) / 2));
+                margin-left: (
+                    (
+                        (
+                                @aui-sidebar-collapsed-width -
+                                    @aui-sidebar-header-avatar-collapsed -
+                                    (@aui-sidebar-group-actions-border-width * 2)
+                            ) /
+                            2
+                    )
+                );
+                margin-right: (
+                    (
+                        (
+                                @aui-sidebar-collapsed-width -
+                                    @aui-sidebar-header-avatar-collapsed -
+                                    (@aui-sidebar-group-actions-border-width * 2)
+                            ) /
+                            2
+                    )
+                );
                 position: absolute;
                 top: 0;
                 width: @aui-icon-size-large;

package/src/less/aui-sidebar-navigation.less

@@ -10,7 +10,6 @@
 
 .aui-sidebar,
 .aui-sidebar-submenu {
-
     //
     // Nav pattern integration
     //
@@ -35,7 +34,9 @@
             > .aui-nav-item {
                 #aui-nav.item-base(@aui-sidebar-nav-link-expected-height);
                 padding-left: @aui-sidebar-nav-link-inner-spacing;
-                padding-right: (@aui-icon-size-small + @aui-sidebar-nav-link-inner-spacing ); // room on the right for dropdown action menus
+                padding-right: (
+                    @aui-icon-size-small + @aui-sidebar-nav-link-inner-spacing
+                ); // room on the right for dropdown action menus
             }
         }
 
@@ -92,7 +93,8 @@
     .aui-navgroup-vertical .aui-nav > li[aria-expanded] {
         > .aui-nav-subtree-toggle {
             @box-size: @aui-sidebar-nav-link-expected-height; // that assumption in aui-navigation about the .aui-nav-item height? yeeeeah, it's invalid here.
-            @fake-icon-with-spacing: @aui-nav-subtree-toggle-icon-size + @aui-sidebar-nav-link-icon-spacing;
+            @fake-icon-with-spacing: @aui-nav-subtree-toggle-icon-size +
+                @aui-sidebar-nav-link-icon-spacing;
 
             top: (((@box-size - @aui-nav-subtree-toggle-icon-size) / 2));
             left: @aui-sidebar-nav-link-inner-spacing; // push it "inside" the .aui-nav-item, though the element actually adjacent to it.
@@ -123,7 +125,7 @@
 // Sidebar narrow state - add collapsed styles.
 //-----------------------
 .aui-sidebar {
-    &[aria-expanded="false"] {
+    &[aria-expanded='false'] {
         .aui-nav-heading {
             display: none;
         }
@@ -143,7 +145,7 @@
 
         .aui-nav-sortable > li > a:after {
             left: 0;
-            top: (@aui-sidebar-grid * .8);
+            top: (@aui-sidebar-grid * 0.8);
         }
 
         .aui-nav-item-actions {

package/src/less/aui-sidebar-skeleton.less

@@ -104,7 +104,8 @@
     }
 
     .aui-sidebar-header-large {
-        .aui-page-header-inner { // We want avatars to be prominent and thus take the spotlight
+        .aui-page-header-inner {
+            // We want avatars to be prominent and thus take the spotlight
             flex-direction: column;
         }
 
@@ -120,7 +121,8 @@
         }
 
         .aui-page-header-main {
-            h1, h2 {
+            h1,
+            h2 {
                 #aui.typography.h700();
                 padding-top: @aui-sidebar-grid;
 
@@ -142,7 +144,8 @@
         align-items: flex-start;
         align-content: flex-start;
 
-        h1, h2 {
+        h1,
+        h2 {
             #aui.typography.h500();
             #aui.text-truncate();
             line-height: @aui-sidebar-base-line-height;
@@ -161,7 +164,8 @@
     // optional handle to adjust the width of the sidebar
     .aui-sidebar-handle {
         @sidebar-handle-width: @aui-sidebar-grid;
-        background: @aui-panel-bg-color url(images/icons/sidebar/icon-handle.png) center center no-repeat;
+        background: @aui-panel-bg-color url(images/icons/sidebar/icon-handle.png) center center
+            no-repeat;
         cursor: col-resize;
         height: 100%;
         position: absolute;
@@ -213,12 +217,13 @@
     // Sidebar narrow state - add collapsed styles.
     // Note: the width is "automatically" shrunk thanks to the CSS variable.
     //-----------------------
-    &[aria-expanded="false"] {
+    &[aria-expanded='false'] {
         .aui-sidebar-body {
             overflow-x: hidden; // don't show horizontal scrollbar in collapsed state.
         }
 
-        .aui-page-header-inner, .aui-page-header-image {
+        .aui-page-header-inner,
+        .aui-page-header-image {
             align-content: center;
             display: flex;
             justify-content: center;
@@ -295,7 +300,7 @@
 //-----------------------
 
 // Page Layout + Sidebar integrations
-#content .aui-sidebar ~ [class^="aui-"],
+#content .aui-sidebar ~ [class^='aui-'],
 #content .aui-sidebar + section,
 #content .aui-sidebar + main,
 #content + #footer {

package/src/less/aui-skip-link.less

@@ -14,7 +14,8 @@ a.aui-skip-link {
     opacity: 0;
     transition: all 300ms;
 
-    &:focus, &:active {
+    &:focus,
+    &:active {
         top: 10px;
         opacity: 1;
         outline-offset: -2px;

package/src/less/aui-spinner.less

@@ -15,11 +15,11 @@ aui-spinner {
     width: @size;
     height: @size;
 
-    &[size="small"] {
+    &[size='small'] {
         --aui-spinner-size: @aui-spinner-size-small;
     }
 
-    &[size="large"] {
+    &[size='large'] {
         --aui-spinner-size: @aui-spinner-size-large;
     }
 

package/src/less/aui-toggle.less

@@ -24,7 +24,7 @@ aui-toggle {
     // because all content inside this control is absolute position, we need some text so that
     // the vertical alignment works
     &::before {
-        content: "\00a0"; // non-breaking space char
+        content: '\00a0'; // non-breaking space char
     }
 
     // invisible "overlay" which intercepts mouse clicks and provides the tint for the disabled/busy states
@@ -78,11 +78,15 @@ aui-toggle {
         }
 
         // integration with spinner element
-        .aui-icon aui-spinner[size="small"] {
+        .aui-icon aui-spinner[size='small'] {
             color: inherit;
             position: absolute;
-            top: ((@aui-toggle-icon-size - @aui-spinner-size-small) / 2); // because it is inside the icon.
-            left: ((@aui-toggle-icon-size - @aui-spinner-size-small) / 2); // because it is inside the icon.
+            top: (
+                (@aui-toggle-icon-size - @aui-spinner-size-small) / 2
+            ); // because it is inside the icon.
+            left: (
+                (@aui-toggle-icon-size - @aui-spinner-size-small) / 2
+            ); // because it is inside the icon.
         }
     }
 

package/src/less/aui-toolbar2.less

@@ -12,7 +12,7 @@
 .aui-toolbar2:after,
 .aui-toolbar2-group:after {
     clear: both;
-    content: "";
+    content: '';
     display: table;
 }
 

package/src/less/checkbox-multiselect.less

@@ -1,18 +1,18 @@
 .aui-checkbox-multiselect {
-  display: inline-block;
+    display: inline-block;
 
-  .aui-button {
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+    .aui-button {
+        max-width: 150px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
 .aui-checkbox-multiselect-dropdown {
-  .hidden {
-    display: none;
-  }
-  .aui-button-link {
-    margin-left: 10px;
-  }
-}
+    .hidden {
+        display: none;
+    }
+    .aui-button-link {
+        margin-left: 10px;
+    }
+}

package/src/less/dialog.less

@@ -5,8 +5,8 @@
 .aui-dialog-shadow-parent {
     position: fixed;
     overflow: hidden;
-    left:50%;
-    top:50%;
+    left: 50%;
+    top: 50%;
 }
 .aui-popup {
     background-color: @aui-dialog-bg-color;
@@ -77,7 +77,7 @@
 }
 .aui-dialog .dialog-page-menu li.page-menu-item button.item-button:hover,
 .aui-dialog .dialog-page-menu li.page-menu-item button.item-button:focus {
-    #aui-nav.item-style(hover)
+    #aui-nav.item-style(hover);
 }
 .aui-dialog .dialog-page-menu li.page-menu-item.selected button.item-button {
     #aui-nav.item-style(selected);

package/src/less/dialog2.less

@@ -27,12 +27,12 @@
 
 @dialog-container-border-radius: @aui-border-radius-medium;
 
-@dialog-overflow-with-both-buffers: (@header-footer-combined-height + 2*@layer-buffer-y);
+@dialog-overflow-with-both-buffers: (@header-footer-combined-height + 2 * @layer-buffer-y);
 
-@aui-dialog2-xlarge-width: (@dialog-width-xlarge + 2*@layer-buffer-x);
-@aui-dialog2-large-width: (@dialog-width-large + 2*@layer-buffer-x);
-@aui-dialog2-medium-width: (@dialog-width-medium + 2*@layer-buffer-x);
-@aui-dialog2-small-width: (@dialog-width-small + 2*@layer-buffer-x);
+@aui-dialog2-xlarge-width: (@dialog-width-xlarge + 2 * @layer-buffer-x);
+@aui-dialog2-large-width: (@dialog-width-large + 2 * @layer-buffer-x);
+@aui-dialog2-medium-width: (@dialog-width-medium + 2 * @layer-buffer-x);
+@aui-dialog2-small-width: (@dialog-width-small + 2 * @layer-buffer-x);
 
 .aui-dialog2 {
     #aui.shadow.z300();
@@ -115,7 +115,7 @@
         box-sizing: border-box;
         overflow: auto;
         padding: @aui-dialog2-padding;
-        max-height: calc(~"100vh" - @dialog-overflow-with-both-buffers);
+        max-height: calc(~'100vh' - @dialog-overflow-with-both-buffers);
 
         &:last-child {
             border-radius: 0 0 @dialog-container-border-radius @dialog-container-border-radius;
@@ -136,7 +136,8 @@
             vertical-align: middle;
         }
 
-        h2, h3 {
+        h2,
+        h3 {
             #aui.typography.h600();
         }
     }
@@ -219,7 +220,7 @@
         }
 
         .aui-dialog2-content {
-            height: calc(~"100vh" - @dialog-overflow-with-both-buffers);
+            height: calc(~'100vh' - @dialog-overflow-with-both-buffers);
             max-height: none;
             min-height: @dialog-content-height-small;
         }
@@ -235,7 +236,7 @@
         }
 
         .aui-dialog2-content {
-            height: calc(~"100vh" - @dialog-overflow-with-both-buffers);
+            height: calc(~'100vh' - @dialog-overflow-with-both-buffers);
             max-height: none;
             min-height: @dialog-content-height-small;
         }
@@ -259,7 +260,7 @@
 
             & .aui-dialog2-content {
                 height: calc(~"100vh" - @header-footer-combined-height);
-                max-height: none; // otherwise, the footer "creeps up" the dialog and takes up the available space.
+                max-height: none; // otherwise, the footer  creeps up  the dialog and takes up the available space.
             }
         }
     });

package/src/less/dropdown2-temp.css

@@ -1,12 +1,12 @@
 /* Storing these styles in a CSS file until LESS is upgraded to handle "2-" in a data attribute */
-.aui-dropdown2-tailed[data-dropdown2-alignment="left"]:before,
-.aui-dropdown2-tailed[data-dropdown2-alignment="left"]:after,
+.aui-dropdown2-tailed[data-dropdown2-alignment='left']:before,
+.aui-dropdown2-tailed[data-dropdown2-alignment='left']:after,
 .aui-dropdown2-tailed.aui-alignment-snap-left:before,
 .aui-dropdown2-tailed.aui-alignment-snap-left:after {
     left: 20px;
 }
-.aui-dropdown2-tailed[data-dropdown2-alignment="right"]:before,
-.aui-dropdown2-tailed[data-dropdown2-alignment="right"]:after,
+.aui-dropdown2-tailed[data-dropdown2-alignment='right']:before,
+.aui-dropdown2-tailed[data-dropdown2-alignment='right']:after,
 .aui-dropdown2-tailed.aui-alignment-snap-right:before,
 .aui-dropdown2-tailed.aui-alignment-snap-right:after {
     right: 20px;

package/src/less/dropdown2.less

@@ -138,7 +138,7 @@
     // Set disabled styles last, so that the cascade gives them a higher precedence.
     &:hover .aui-dropdown2-disabled,
     .aui-dropdown2-disabled,
-    [aria-disabled="true"],
+    [aria-disabled='true'],
     a.disabled {
         #aui-nav.item-style(disabled);
     }
@@ -189,7 +189,7 @@
         border-style: outset outset solid outset;
         border-width: @aui-dropdown2-tail-size;
         bottom: 100%;
-        content: "";
+        content: '';
         display: block;
         height: 0;
         position: absolute;
@@ -224,7 +224,7 @@
     });
 }
 
-.aui-dropdown2-trigger[aria-expanded="true"]:not(.aui-dropdown2-trigger-arrowless) {
+.aui-dropdown2-trigger[aria-expanded='true']:not(.aui-dropdown2-trigger-arrowless) {
     .dropdown-icon({
         transform: rotate(180deg);
     });
@@ -285,7 +285,7 @@ input.aui-button.aui-dropdown2-trigger,
         height: auto;
     }
 
-    &[data-popper-placement*="bottom"] {
+    &[data-popper-placement*='bottom'] {
         &.aui-dropdown2-tailed {
             margin-top: @aui-dropdown2-tail-size;
         }

package/src/less/flag.less

@@ -4,7 +4,7 @@
     @gutter: @aui-grid * 3;
     position: fixed;
     pointer-events: none;
-    top: @gutter + 55px;  // height of header plus some fudge.
+    top: @gutter + 55px; // height of header plus some fudge.
     width: 100%;
     z-index: @aui-z-flag-container;
 
@@ -75,4 +75,4 @@
             --aui-message-icolor: var(--aui-flag-success-color);
         }
     }
-}
+}

package/src/less/form-notification.less

@@ -5,28 +5,29 @@
     Icons.
 */
 //Order is important for display preference
-[data-aui-notification-info]+.aui-icon.aui-icon-notification {
+[data-aui-notification-info] + .aui-icon.aui-icon-notification {
     &:before {
         content: @aui-notification-info-icon;
     }
     color: @aui-notification-info-color;
 }
 
-[data-aui-notification-success]+.aui-icon.aui-icon-notification {
+[data-aui-notification-success] + .aui-icon.aui-icon-notification {
     &:before {
         content: @aui-notification-success-icon;
     }
     color: @aui-notification-success-color;
 }
 
-[data-aui-notification-error]+.aui-icon.aui-icon-notification {
+[data-aui-notification-error] + .aui-icon.aui-icon-notification {
     &:before {
         content: @aui-notification-error-icon;
     }
     color: @aui-notification-error-color;
 }
 
-[data-aui-notification-field].aui-form-notification-field-no-icon+.aui-icon.aui-icon-notification {
+[data-aui-notification-field].aui-form-notification-field-no-icon
+    + .aui-icon.aui-icon-notification {
     visibility: hidden;
 }
 
@@ -86,11 +87,14 @@ form.aui.aui-legacy-forms {
 }
 
 form.aui {
-   input[data-aui-validation-field] ~ aui-spinner {
+    input[data-aui-validation-field] ~ aui-spinner {
         margin-left: 0;
         margin-top: 0;
         position: relative;
-        right: (@aui-notification-icon-outside-field-width + @aui-notification-icon-outside-field-padding-right);
+        right: (
+            @aui-notification-icon-outside-field-width +
+                @aui-notification-icon-outside-field-padding-right
+        );
         top: @aui-notification-icon-outside-field-padding-top;
         vertical-align: top;
         display: inline-block;

package/src/less/forms-current.less

@@ -15,7 +15,8 @@ form.aui:not(.aui-legacy-forms) {
         font-size: @aui-font-size-medium;
         font-family: inherit;
 
-        &:hover {
+        &:hover,
+        &.hover {
             #aui-forms.aui-input-field-style(hover);
         }
 
@@ -29,7 +30,6 @@ form.aui:not(.aui-legacy-forms) {
             &::-webkit-contacts-auto-fill-button {
                 background: var(--aui-form-field-autofilled-text-color);
             }
-
         }
     }
 
@@ -38,21 +38,24 @@ form.aui:not(.aui-legacy-forms) {
         font-size: @aui-font-size-medium;
         font-family: inherit;
 
-        &:hover {
+        &:hover,
+        &.hover {
             #aui-forms.aui-select2-input-field-style(hover);
         }
     }
 
     .select,
     .multi-select {
-        &:hover {
+        &:hover,
+        &.hover {
             background-color: @aui-form-select-hover-bg-color;
-            border-color: @aui-form-select-hover-bg-color;
+            border-color: @aui-form-select-border-color;
         }
     }
 
     .aui-select2-container {
-        & > ul:hover {
+        & > ul:hover,
+        & > ul.hover {
             #aui-forms.aui-select2-input-field-style(hover);
         }
 
@@ -61,12 +64,6 @@ form.aui:not(.aui-legacy-forms) {
         }
     }
 
-    .multi-select {
-        &:hover > option {
-            #aui-forms.aui-select2-input-field-style(hover);
-        }
-    }
-
     .text,
     .password,
     .textarea,
@@ -149,8 +146,7 @@ form.aui:not(.aui-legacy-forms) {
         }
     }
     .select,
-    .multi-select
-    {
+    .multi-select {
         &:focus {
             #aui.with-focus-ring(@width: 1px, @inset: false, @set-border-color: true);
         }
@@ -175,7 +171,9 @@ form.aui:not(.aui-legacy-forms) {
 
     /* Placeholder form element styles */
 
-    .text, .password, .textarea {
+    .text,
+    .password,
+    .textarea {
         #aui.placeholder(@aui-form-placeholder-text-color);
 
         &[disabled] {
@@ -249,8 +247,8 @@ form.aui:not(.aui-legacy-forms) {
     }
 
     // both are @ak-color-N600
-    @chevron-dark:   url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
-    @chevron-light:  url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
+    @chevron-dark: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
+    @chevron-light: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
 
     select[disabled]:not([size]),
     .select:not([size]) {
@@ -282,7 +280,7 @@ form.aui:not(.aui-legacy-forms) {
         top: 7px;
 
         &::before {
-            content: "*";
+            content: '*';
             position: absolute;
             left: 0;
             top: 0;

package/src/less/forms-legacy.less

@@ -99,7 +99,9 @@ form.aui.aui-legacy-forms {
 
     /* Placeholder form element styles */
 
-    .text, .password, .textarea {
+    .text,
+    .password,
+    .textarea {
         #aui.placeholder(@aui-legacy-form-placeholder-text-color);
     }
 
@@ -155,7 +157,7 @@ form.aui.aui-legacy-forms {
         top: 5px;
 
         &::before {
-            content: "*";
+            content: '*';
             position: absolute;
             left: 0;
             top: 0;