@atlassian/aui 11.0.0 → 11.0.2
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/dist/aui/aui-prototyping-browserfocus.css.map +1 -1
- package/dist/aui/aui-prototyping.css +4 -4
- package/dist/aui/aui-prototyping.css.map +1 -1
- package/dist/aui/aui-prototyping.js +1 -1
- package/dist/aui/aui-prototyping.nodeps.css +4 -4
- package/dist/aui/aui-prototyping.nodeps.css.map +1 -1
- package/dist/aui/aui-prototyping.nodeps.js +1 -1
- package/package.json +1 -1
- package/src/less/aui-appheader.less +21 -8
- package/src/less/aui-link.less +11 -1
- package/src/less/imports/mixins/focus.less +2 -2
package/package.json
CHANGED
|
@@ -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:
|
|
24
|
-
|
|
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,14 @@ aui-header,
|
|
|
100
99
|
--aui-appheader-item-height: 32px;
|
|
101
100
|
--aui-appheader-item-border-radius: var(--ds-radius-medium, 6px);
|
|
102
101
|
@section-gap: 20px;
|
|
102
|
+
@logo-max-height: calc(
|
|
103
|
+
var(--aui-appheader-logo-height, var(--aui-appheader-item-height, 100%)) - 10px
|
|
104
|
+
);
|
|
105
|
+
@item-padding-y: var(--aui-appheader-item-padding-y, var(--ds-space-050, 4px));
|
|
106
|
+
@item-content-height: calc(
|
|
107
|
+
var(--aui-appheader-logo-height, var(--aui-appheader-item-height, 100%)) - @item-padding-y -
|
|
108
|
+
@item-padding-y
|
|
109
|
+
);
|
|
103
110
|
|
|
104
111
|
box-sizing: border-box;
|
|
105
112
|
padding: var(--ds-space-100, 8px) var(--ds-space-150, 12px)
|
|
@@ -128,7 +135,7 @@ aui-header,
|
|
|
128
135
|
white-space: nowrap;
|
|
129
136
|
|
|
130
137
|
// Set styles for img/svg inside the header logo
|
|
131
|
-
.aui-nav-images();
|
|
138
|
+
.aui-nav-images(@logo-max-height);
|
|
132
139
|
|
|
133
140
|
// Variant where logo is a CSS background-image
|
|
134
141
|
.aui-header-logo-device {
|
|
@@ -169,9 +176,15 @@ aui-header,
|
|
|
169
176
|
white-space: nowrap;
|
|
170
177
|
display: inline-block;
|
|
171
178
|
|
|
172
|
-
//
|
|
179
|
+
// Keep the avatar clipping box within the header content height while preserving
|
|
180
|
+
// the image's aspect ratio.
|
|
173
181
|
> .aui-avatar {
|
|
174
|
-
.aui-nav-images();
|
|
182
|
+
.aui-nav-images(100%);
|
|
183
|
+
|
|
184
|
+
.aui-avatar-inner {
|
|
185
|
+
max-height: @item-content-height;
|
|
186
|
+
max-width: @item-content-height;
|
|
187
|
+
}
|
|
175
188
|
}
|
|
176
189
|
}
|
|
177
190
|
}
|
|
@@ -205,7 +218,7 @@ aui-header,
|
|
|
205
218
|
border-radius: var(--aui-appheader-item-border-radius);
|
|
206
219
|
box-sizing: border-box;
|
|
207
220
|
height: var(--aui-appheader-item-height, auto);
|
|
208
|
-
padding:
|
|
221
|
+
padding: @item-padding-y
|
|
209
222
|
var(--aui-appheader-item-padding-x, var(--ds-space-050, 4px));
|
|
210
223
|
color: var(--aui-lf-appheader-text-color);
|
|
211
224
|
text-decoration: none;
|
package/src/less/aui-link.less
CHANGED
|
@@ -1,11 +1,21 @@
|
|
|
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(0);
|
|
15
|
+
// Use native outline geometry so Chromium encloses block content wrapped by an inline link.
|
|
16
|
+
outline-style: auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
9
19
|
a:hover {
|
|
10
20
|
color: var(--atl-theme-link-active-text-color, var(--aui-link-hover-color));
|
|
11
21
|
text-decoration: var(--aui-link-hover-decoration);
|
|
@@ -13,7 +23,7 @@ a:hover {
|
|
|
13
23
|
|
|
14
24
|
a:focus,
|
|
15
25
|
a:active {
|
|
16
|
-
|
|
26
|
+
text-decoration: var(--aui-link-decoration);
|
|
17
27
|
}
|
|
18
28
|
|
|
19
29
|
a:active {
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.with-focus-outline() {
|
|
18
|
+
.with-focus-outline(@offset: 2px) {
|
|
19
19
|
outline-width: 2px;
|
|
20
20
|
outline-style: solid;
|
|
21
21
|
outline-color: @aui-focus-ring-color;
|
|
22
|
-
outline-offset:
|
|
22
|
+
outline-offset: @offset;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.without-focus-outline() {
|