@atlassian/aui 9.3.21 → 9.3.23

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,24 @@
                 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
             }
         }
 
@@ -86,7 +87,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.
@@ -117,7 +119,7 @@
 // Sidebar narrow state - add collapsed styles.
 //-----------------------
 .aui-sidebar {
-    &[aria-expanded="false"] {
+    &[aria-expanded='false'] {
         .aui-nav-heading {
             display: none;
         }
@@ -137,7 +139,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

@@ -156,7 +156,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;
@@ -208,7 +209,7 @@
     // 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.
         }
@@ -290,7 +291,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,7 +78,7 @@ 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.

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,12 +136,13 @@
             vertical-align: middle;
         }
 
-        h2, h3 {
+        h2,
+        h3 {
             #aui.typography.h600();
         }
     }
 
-    &[data-aui-modal="true"] &-header-close {
+    &[data-aui-modal='true'] &-header-close {
         display: none;
     }
 
@@ -223,7 +224,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;
         }
@@ -239,7 +240,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;
         }
@@ -263,7 +264,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

@@ -140,7 +140,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);
     }
@@ -191,7 +191,7 @@
         border-style: outset outset solid outset;
         border-width: @aui-dropdown2-tail-size;
         bottom: 100%;
-        content: "";
+        content: '';
         display: block;
         height: 0;
         position: absolute;
@@ -275,7 +275,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/form-notification.less

@@ -4,28 +4,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;
 }
 
@@ -83,11 +84,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

@@ -29,7 +29,6 @@ form.aui:not(.aui-legacy-forms) {
             &::-webkit-contacts-auto-fill-button {
                 background: var(--aui-form-field-autofilled-text-color);
             }
-
         }
     }
 
@@ -169,7 +168,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] {
@@ -243,8 +244,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]) {
@@ -276,7 +277,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;

package/src/less/forms-radios-and-checkboxes.less

@@ -38,7 +38,6 @@
 @radio-disabled-border-color: var(--aui-form-glyph-disabled-fill-color);
 
 form.aui:not(.aui-legacy-forms) {
-
     .aui-checkbox-focus-size() {
         display: inline-block;
         width: @aui-form-button-size + @button-border-width;
@@ -52,7 +51,7 @@ form.aui:not(.aui-legacy-forms) {
     .aui-radio-position(iconfont) {
         @fudge: 2px; // the glyph renders in a slightly different position for font-related reasons.
         position: absolute;
-        left: @radio-offset-left - @fudge/2;
+        left: @radio-offset-left - @fudge / 2;
         top: @radio-offset-top - @fudge;
     }
     .aui-checkbox-position() {
@@ -100,12 +99,13 @@ form.aui:not(.aui-legacy-forms) {
     // Field styles
     //
 
-    .radio input[type="radio"],
-    .checkbox input[type="checkbox"] {
+    .radio input[type='radio'],
+    .checkbox input[type='checkbox'] {
         #aui.visually-hidden();
     }
 
-    .radio, .checkbox {
+    .radio,
+    .checkbox {
         padding: 0 0 0 @label-left-offset;
         margin: 5px 0 0;
         position: relative;
@@ -137,7 +137,7 @@ form.aui:not(.aui-legacy-forms) {
             // and if we move the entire label to the left, the content after it will
             // have a gap that looks awkward.
             &::before {
-                content: "";
+                content: '';
                 display: inline-block;
                 left: @label-left-offset * -1; // move the el to take up space in to the margin created for the glyph
                 position: absolute;
@@ -151,7 +151,6 @@ form.aui:not(.aui-legacy-forms) {
                 margin-left: @label-left-offset * -1;
             }
         }
-
     }
 
     .radio {
@@ -183,7 +182,7 @@ form.aui:not(.aui-legacy-forms) {
                     #aui-forms.aui-radio-checkbox-size();
                     .aui-radio-position();
 
-                    content: "";
+                    content: '';
 
                     border: @button-border-width solid @radio-unchecked-border-color;
                     background-color: @radio-unchecked-bg-color;
@@ -205,7 +204,7 @@ form.aui:not(.aui-legacy-forms) {
                 .aui-radio-focus-size();
                 .aui-radio-focus-position();
 
-                content: "";
+                content: '';
 
                 border: @button-focus-border;
                 border-radius: @aui-form-button-size;
@@ -254,7 +253,7 @@ form.aui:not(.aui-legacy-forms) {
                     #aui-forms.aui-radio-checkbox-size();
                     .aui-checkbox-position();
 
-                    content: "";
+                    content: '';
 
                     border: @button-border-width solid @checkbox-unchecked-border-color;
                     background-color: @checkbox-unchecked-bg-color;
@@ -291,5 +290,4 @@ form.aui:not(.aui-legacy-forms) {
         left: @radio-offset-left;
         top: @radio-offset-top - 1px;
     }
-
 }

package/src/less/forms.less

@@ -40,7 +40,7 @@ form.aui .checkbox[disabled] {
 }
 
 // Fixing Safari search fields (https://ecosystem.atlassian.net/browse/AUI-4062)
-form.aui .text[type=search] {
+form.aui .text[type='search'] {
     -webkit-appearance: textfield;
     outline-width: 5px;
     outline-offset: -2px;
@@ -81,7 +81,7 @@ form.aui .group:before,
 form.aui .group:after,
 form.aui .date-select:before,
 form.aui .date-select:after {
-    content: " ";
+    content: ' ';
     display: table;
 }
 
@@ -179,7 +179,6 @@ form.aui.long-label .date-select .field-group {
 
 /* End Long Labels */
 
-
 /* Top Labels
  * add top-label class to form eg: <form class="aui top-label">
  * display all forms with top-labels for screen sizes < 768px
@@ -227,7 +226,6 @@ form.aui.long-label .date-select .field-group {
     .buttons-container {
         padding-left: 0;
     }
-
 }
 
 form.aui.top-label {

package/src/less/iconfont-mixin.less

@@ -6,10 +6,13 @@
         @font-face {
             font-family: @family;
             src: url('~@atlassian/adg-server-iconfont/dist/fonts/@{filename}.eot');
-            src: url('~@atlassian/adg-server-iconfont/dist/fonts/@{filename}.eot?#iefix') format('embedded-opentype'),
-            url('~@atlassian/adg-server-iconfont/dist/fonts/@{filename}.woff') format('woff'),
-            url('~@atlassian/adg-server-iconfont/dist/fonts/@{filename}.ttf') format('truetype'),
-            url('~@atlassian/adg-server-iconfont/dist/fonts/@{filename}.svg#@{fontId}') format('svg');
+            src:
+                url('~@atlassian/adg-server-iconfont/dist/fonts/@{filename}.eot?#iefix')
+                    format('embedded-opentype'),
+                url('~@atlassian/adg-server-iconfont/dist/fonts/@{filename}.woff') format('woff'),
+                url('~@atlassian/adg-server-iconfont/dist/fonts/@{filename}.ttf') format('truetype'),
+                url('~@atlassian/adg-server-iconfont/dist/fonts/@{filename}.svg#@{fontId}')
+                    format('svg');
             font-weight: @weight;
             font-style: @style;
         }