@atlassian/aui 10.2.3 → 10.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@atlassian/aui",
3
3
  "description": "Atlassian User Interface library",
4
- "version": "10.2.3",
4
+ "version": "10.2.5",
5
5
  "author": "Atlassian Pty Ltd.",
6
6
  "homepage": "https://aui.atlassian.com",
7
7
  "license": "Apache-2.0",
@@ -41,7 +41,7 @@
41
41
  "@atlassian/fancy-file-input": "3.0.0",
42
42
  "@popperjs/core": "2.11.8",
43
43
  "backbone": "1.6.0",
44
- "dompurify": "^3.4.12",
44
+ "dompurify": "^3.4.13",
45
45
  "jquery-form": "4.3.0",
46
46
  "jquery-ui": "1.14.1",
47
47
  "skatejs": "0.13.17",
@@ -17,12 +17,11 @@ aui-header,
17
17
  justify-content: flex-end;
18
18
  }
19
19
 
20
- .aui-nav-images() {
20
+ .aui-nav-images(@max-height) {
21
21
  img,
22
22
  svg {
23
- max-height: calc(
24
- var(--aui-appheader-logo-height, var(--aui-appheader-item-height, 100%)) - 10px
25
- );
23
+ max-height: @max-height;
24
+ width: auto;
26
25
  display: inline-block;
27
26
  vertical-align: text-bottom;
28
27
  }
@@ -100,6 +99,11 @@ aui-header,
100
99
  --aui-appheader-item-height: 40px;
101
100
  --aui-appheader-item-border-radius: 0px;
102
101
  @section-gap: 20px;
102
+ @item-padding-y: var(--aui-appheader-item-padding-y, 5px);
103
+ @item-content-height: calc(
104
+ var(--aui-appheader-logo-height, var(--aui-appheader-item-height, 100%)) - @item-padding-y -
105
+ @item-padding-y
106
+ );
103
107
 
104
108
  box-sizing: border-box;
105
109
  padding: 7px @aui-grid 8px @aui-grid;
@@ -127,7 +131,7 @@ aui-header,
127
131
  white-space: nowrap;
128
132
 
129
133
  // Set styles for img/svg inside the header logo
130
- .aui-nav-images();
134
+ .aui-nav-images(@item-content-height);
131
135
 
132
136
  // Variant where logo is a CSS background-image
133
137
  .aui-header-logo-device {
@@ -167,9 +171,15 @@ aui-header,
167
171
  white-space: nowrap;
168
172
  display: inline-block;
169
173
 
170
- // Set styles for avatar images inside nav items
174
+ // Keep the avatar clipping box within the header content height while preserving
175
+ // the image's aspect ratio.
171
176
  > .aui-avatar {
172
- .aui-nav-images();
177
+ .aui-nav-images(100%);
178
+
179
+ .aui-avatar-inner {
180
+ max-height: @item-content-height;
181
+ max-width: @item-content-height;
182
+ }
173
183
  }
174
184
  }
175
185
  }
@@ -203,8 +213,7 @@ aui-header,
203
213
  border-radius: var(--aui-appheader-item-border-radius);
204
214
  box-sizing: border-box;
205
215
  height: var(--aui-appheader-item-height, auto);
206
- padding: var(--aui-appheader-item-padding-y, 5px)
207
- var(--aui-appheader-item-padding-x, 10px);
216
+ padding: @item-padding-y var(--aui-appheader-item-padding-x, 10px);
208
217
  color: var(--aui-lf-appheader-text-color);
209
218
  text-decoration: none;
210
219
  }
@@ -1,11 +1,19 @@
1
1
  @import (reference) './imports/global';
2
+ @import (reference) './imports/mixins/focus';
2
3
 
3
4
  /* LINK */
4
5
  a {
6
+ #aui.without-focus-outline();
7
+
5
8
  color: var(--atl-theme-link-text-color, var(--aui-link-color));
6
9
  text-decoration: var(--aui-link-decoration);
7
10
  }
8
11
 
12
+ // Keep the generic focus treatment weak so component focus styles can override it.
13
+ a:where(:focus-visible) {
14
+ #aui.with-focus-outline();
15
+ }
16
+
9
17
  a:hover {
10
18
  color: var(--atl-theme-link-active-text-color, var(--aui-link-hover-color));
11
19
  text-decoration: var(--aui-link-hover-decoration);
@@ -13,7 +21,7 @@ a:hover {
13
21
 
14
22
  a:focus,
15
23
  a:active {
16
- outline: var(--aui-link-focus-outline);
24
+ text-decoration: var(--aui-link-decoration);
17
25
  }
18
26
 
19
27
  a:active {