@brightspace-ui/core 1.222.0 → 1.222.1
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.
|
@@ -76,19 +76,11 @@ class CardFooterLink extends RtlMixin(LitElement) {
|
|
|
76
76
|
return [offscreenStyles, css`
|
|
77
77
|
:host {
|
|
78
78
|
display: inline-block;
|
|
79
|
-
left: 0.15rem;
|
|
80
|
-
margin-right: 0.3rem;
|
|
81
79
|
position: relative;
|
|
82
80
|
}
|
|
83
81
|
:host[hidden] {
|
|
84
82
|
display: none;
|
|
85
83
|
}
|
|
86
|
-
:host([dir="rtl"]) {
|
|
87
|
-
left: auto;
|
|
88
|
-
margin-left: 0.3rem;
|
|
89
|
-
margin-right: 0;
|
|
90
|
-
right: 0.15rem;
|
|
91
|
-
}
|
|
92
84
|
a {
|
|
93
85
|
box-sizing: border-box;
|
|
94
86
|
display: inline-block;
|
|
@@ -99,13 +91,6 @@ class CardFooterLink extends RtlMixin(LitElement) {
|
|
|
99
91
|
d2l-count-badge-icon {
|
|
100
92
|
text-align: initial;
|
|
101
93
|
}
|
|
102
|
-
::slotted(d2l-tooltip) {
|
|
103
|
-
left: calc(-50% + 11px) !important;
|
|
104
|
-
}
|
|
105
|
-
:host([dir="rtl"]) ::slotted(d2l-tooltip) {
|
|
106
|
-
left: 0;
|
|
107
|
-
right: calc(-50% + 11px) !important;
|
|
108
|
-
}
|
|
109
94
|
`];
|
|
110
95
|
}
|
|
111
96
|
|
|
@@ -29,27 +29,24 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
|
|
|
29
29
|
outline: none;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
.d2l-count-badge-wrapper {
|
|
33
|
-
display: inline-block;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
32
|
:host {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
padding-left:
|
|
42
|
-
padding-right: 0;
|
|
33
|
+
/* for long numbers, center the number on the icon */
|
|
34
|
+
--d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
|
|
35
|
+
display: inline-block;
|
|
36
|
+
/* symmetrical padding to prevent overflows for most numbers */
|
|
37
|
+
padding-left: 0.5rem;
|
|
38
|
+
padding-right: 0.5rem;
|
|
39
|
+
position: relative;
|
|
43
40
|
}
|
|
44
41
|
|
|
45
42
|
:host([size="large"]) {
|
|
46
|
-
--d2l-count-badge-icon-padding:
|
|
47
|
-
|
|
43
|
+
--d2l-count-badge-icon-padding-top: 0.7rem;
|
|
44
|
+
padding-top: var(--d2l-count-badge-icon-padding-top);
|
|
48
45
|
}
|
|
49
46
|
|
|
50
47
|
:host([size="small"]) {
|
|
51
|
-
--d2l-count-badge-icon-padding:
|
|
52
|
-
|
|
48
|
+
--d2l-count-badge-icon-padding-top: 0.55rem;
|
|
49
|
+
padding-top: var(--d2l-count-badge-icon-padding-top);
|
|
53
50
|
}
|
|
54
51
|
|
|
55
52
|
:host([icon*="tier1:"]) {
|
|
@@ -63,7 +60,7 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
|
|
|
63
60
|
}
|
|
64
61
|
|
|
65
62
|
d2l-tooltip[_open-dir="top"] {
|
|
66
|
-
margin-top: -
|
|
63
|
+
margin-top: calc(0px - var(--d2l-count-badge-icon-padding-top));
|
|
67
64
|
}
|
|
68
65
|
|
|
69
66
|
d2l-icon {
|
|
@@ -79,15 +76,30 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
|
|
|
79
76
|
}
|
|
80
77
|
|
|
81
78
|
render() {
|
|
82
|
-
|
|
83
|
-
const numberStyles = {
|
|
79
|
+
let numberStyles = {
|
|
84
80
|
border: '2px solid white',
|
|
85
|
-
position: '
|
|
86
|
-
|
|
87
|
-
right: this.dir === 'rtl' ? 'var(--d2l-count-badge-icon-padding)' : 0,
|
|
88
|
-
top: numberPadding,
|
|
89
|
-
visibility: this.skeleton ? 'hidden' : undefined
|
|
81
|
+
position: 'absolute',
|
|
82
|
+
visibility: this.skeleton ? 'hidden' : undefined,
|
|
90
83
|
};
|
|
84
|
+
|
|
85
|
+
// center long number strings to prevent overflow
|
|
86
|
+
const centerNumber = this.getNumberString().length >= 4;
|
|
87
|
+
|
|
88
|
+
if (centerNumber) {
|
|
89
|
+
const xPadding = 'var(--d2l-count-badge-icon-padding)';
|
|
90
|
+
numberStyles = {
|
|
91
|
+
... numberStyles,
|
|
92
|
+
transform: this.dir === 'rtl'
|
|
93
|
+
? `translateY(-50%) translateX(calc(0px - ${xPadding}))`
|
|
94
|
+
: `translateY(-50%) translateX(${xPadding})`
|
|
95
|
+
};
|
|
96
|
+
} else {
|
|
97
|
+
numberStyles = {
|
|
98
|
+
... numberStyles,
|
|
99
|
+
[this.dir === 'rtl' ? 'left' : 'right'] : '-0.1rem',
|
|
100
|
+
transform: 'translateY(-50%)'
|
|
101
|
+
};
|
|
102
|
+
}
|
|
91
103
|
const tabbable = (this.tabStop || this.hasTooltip) && !this.skeleton;
|
|
92
104
|
const innerHtml = html`
|
|
93
105
|
${this.renderCount(numberStyles)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "1.222.
|
|
3
|
+
"version": "1.222.1",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|