@atlassian/aui 9.7.2 → 9.8.0
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 +257 -516
- package/dist/aui/aui-prototyping-darkmode.css +5 -267
- package/dist/aui/aui-prototyping-design-tokens-api.js +1 -1
- package/dist/aui/aui-prototyping.css +9 -9
- package/dist/aui/aui-prototyping.css.map +1 -1
- package/dist/aui/aui-prototyping.js +6 -6
- package/dist/aui/aui-prototyping.js.map +1 -1
- package/dist/aui/aui-prototyping.nodeps.css +9 -9
- package/dist/aui/aui-prototyping.nodeps.css.map +1 -1
- package/dist/aui/aui-prototyping.nodeps.js +2 -2
- package/dist/aui/aui-prototyping.nodeps.js.map +1 -1
- package/entry/styles/aui.page.reset.js +0 -1
- package/package.json +1 -1
- package/src/js/aui/avatar-group.js +99 -86
- package/src/js/aui/banner.js +41 -33
- package/src/js/aui/dialog2.js +2 -2
- package/src/js/aui/flag.js +14 -15
- package/src/less/aui-appheader.less +1 -1
- package/src/less/aui-avatars.less +34 -34
- package/src/less/aui-banner.less +24 -16
- package/src/less/aui-dark-mode.less +2 -3
- package/src/less/aui-reset.less +1 -6
- package/src/less/aui-sidebar-navigation.less +10 -4
- package/src/less/aui-sidebar-skeleton.less +2 -1
- package/src/less/flag.less +28 -19
- package/src/less/imports/aui-theme/components/flag.less +3 -1
- package/src/less/imports/aui-theme/components/navigation.less +0 -1
- package/src/less/imports/aui-theme/components/sidebar.less +0 -1
- package/src/less/imports/aui-theme/core/colors.less +251 -237
- package/src/less/imports/aui-theme/core/spaces.less +14 -0
- package/src/less/imports/aui-theme/core-variables.less +1 -0
- package/src/less/imports/aui-theme/theme.less +14 -0
- package/src/less/imports/mixins/shadows.less +9 -0
- package/entry/styles/aui.page.design-tokens-mode.js +0 -1
- package/src/less/themes/themes.less +0 -2
|
@@ -39,6 +39,16 @@
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
.aui-nav-selected {
|
|
43
|
+
> .aui-nav-item {
|
|
44
|
+
#aui-nav.item-style(selected);
|
|
45
|
+
|
|
46
|
+
> .aui-icon {
|
|
47
|
+
color: var(--aui-item-selected-text);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
42
52
|
// Actions
|
|
43
53
|
.aui-nav-item-actions {
|
|
44
54
|
@actions-button-size: @aui-icon-size-small;
|
|
@@ -55,10 +65,6 @@
|
|
|
55
65
|
}
|
|
56
66
|
}
|
|
57
67
|
|
|
58
|
-
.aui-navgroup-vertical .aui-nav .aui-nav-selected > .aui-nav-item {
|
|
59
|
-
#aui-nav.item-style(selected);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
68
|
.aui-nav {
|
|
63
69
|
> li {
|
|
64
70
|
position: relative;
|
|
@@ -44,13 +44,14 @@
|
|
|
44
44
|
//
|
|
45
45
|
.aui-sidebar-wrapper {
|
|
46
46
|
#aui.box-sizing();
|
|
47
|
-
border-right: 0;
|
|
48
47
|
border-color: @aui-sidebar-border-color;
|
|
49
48
|
background-color: @aui-sidebar-background-color;
|
|
50
49
|
display: flex;
|
|
51
50
|
flex-direction: column;
|
|
52
51
|
width: var(--aui-sidebar-width);
|
|
53
52
|
|
|
53
|
+
border-inline-end: @aui-border-width @aui-border-type var(--aui-border);
|
|
54
|
+
|
|
54
55
|
// The sidebar sits within its container in fun ways.
|
|
55
56
|
position: absolute;
|
|
56
57
|
top: 0;
|
package/src/less/flag.less
CHANGED
|
@@ -2,22 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
#aui-flag-container {
|
|
4
4
|
@gutter: @aui-grid * 3;
|
|
5
|
-
pointer-events: none; // so that users can click through the margin of the flag.
|
|
6
5
|
position: fixed;
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
pointer-events: none;
|
|
7
|
+
top: @gutter + 55px; // height of header plus some fudge.
|
|
8
|
+
width: 100%;
|
|
9
9
|
z-index: @aui-z-flag-container;
|
|
10
|
+
|
|
11
|
+
@media (min-width: 600px) {
|
|
12
|
+
right: @gutter;
|
|
13
|
+
width: auto;
|
|
14
|
+
}
|
|
10
15
|
}
|
|
11
16
|
|
|
12
17
|
.aui-flag {
|
|
13
|
-
// should always be displayed, even when not "open", so it can be animated
|
|
14
18
|
display: block;
|
|
15
|
-
left: 0;
|
|
16
|
-
max-height: 300px; //We need to set an explicit value to be able to animate the property
|
|
17
|
-
opacity: 0;
|
|
18
19
|
position: relative;
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
opacity: 0;
|
|
21
|
+
max-height: 300px;
|
|
22
|
+
margin-inline: @aui-space-200;
|
|
23
|
+
|
|
21
24
|
#aui.transition(opacity @aui-flag-fade-in-time);
|
|
22
25
|
#aui.transition(top @aui-flag-slide-in-time);
|
|
23
26
|
|
|
@@ -27,8 +30,7 @@
|
|
|
27
30
|
opacity: 0;
|
|
28
31
|
overflow: hidden;
|
|
29
32
|
top: 0;
|
|
30
|
-
|
|
31
|
-
// when the flag disappears, but not when it appears initially.
|
|
33
|
+
|
|
32
34
|
#aui.transition(max-height @aui-flag-stack-shrink-time @aui-flag-stack-shrink-delay);
|
|
33
35
|
#aui.transition(margin-bottom @aui-flag-stack-shrink-time @aui-flag-stack-shrink-delay);
|
|
34
36
|
#aui.transition(opacity @aui-flag-fade-out-time);
|
|
@@ -36,23 +38,30 @@
|
|
|
36
38
|
}
|
|
37
39
|
|
|
38
40
|
&[open] {
|
|
39
|
-
|
|
40
|
-
margin-bottom: @aui-flag-padding; // it's on the bottom so there's less clunky animation when flags in a stack disappear
|
|
41
|
+
margin-bottom: @aui-flag-gap-mobile;
|
|
41
42
|
opacity: 1;
|
|
42
43
|
top: 0;
|
|
43
44
|
left: 0;
|
|
45
|
+
|
|
46
|
+
@media (min-width: 600px) {
|
|
47
|
+
margin-bottom: @aui-flag-gap-desktop;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@media (min-width: 600px) {
|
|
52
|
+
width: 400px;
|
|
44
53
|
}
|
|
45
54
|
|
|
46
55
|
.aui-message {
|
|
56
|
+
background-color: var(--aui-flag-bg-color);
|
|
57
|
+
color: inherit;
|
|
58
|
+
border-width: 0;
|
|
59
|
+
pointer-events: auto;
|
|
60
|
+
|
|
47
61
|
--aui-message-icolor: var(--aui-flag-info-color);
|
|
48
62
|
--aui-message-padding: @aui-flag-padding;
|
|
49
63
|
|
|
50
|
-
background-color: var(--aui-flag-bg-color);
|
|
51
|
-
color: inherit; // this avoids text colours being inherited for what are meant to contrast with solid blocks of colour in both light and dark modes
|
|
52
|
-
|
|
53
64
|
#aui.shadow.z500();
|
|
54
|
-
pointer-events: auto; // to allow normal interaction with messages inside flags
|
|
55
|
-
border-width: 0;
|
|
56
65
|
|
|
57
66
|
&.aui-message-warning {
|
|
58
67
|
--aui-message-icolor: var(--aui-flag-warning-color);
|
|
@@ -66,4 +75,4 @@
|
|
|
66
75
|
--aui-message-icolor: var(--aui-flag-success-color);
|
|
67
76
|
}
|
|
68
77
|
}
|
|
69
|
-
}
|
|
78
|
+
}
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
|
|
7
7
|
@aui-sidebar-width: (@aui-font-size-medium * 20); // 280px - expanded sidebar width
|
|
8
8
|
@aui-sidebar-collapsed-width: (@aui-font-size-medium * 4); // 56px - collapsed sidebar width
|
|
9
|
-
@aui-sidebar-border-width: @aui-border-width;
|
|
10
9
|
@aui-sidebar-border-color: @aui-sidebar-background-color; // to appear borderless
|
|
11
10
|
@aui-sidebar-background-color: var(--aui-sidebar-bg-color);
|
|
12
11
|
@aui-sidebar-dropdown-arrow-color: var(--aui-sidebar-dropdown-arrow-color);
|