@brightspace-ui/core 3.189.0 → 3.190.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.
|
@@ -49,11 +49,11 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
|
|
|
49
49
|
return [super.styles, buttonStyles, visibleOnAncestorStyles,
|
|
50
50
|
css`
|
|
51
51
|
:host {
|
|
52
|
-
--d2l-button-icon-background-color: transparent;
|
|
53
|
-
--d2l-button-icon-background-color-hover: var(--d2l-color-gypsum);
|
|
54
|
-
--d2l-button-icon-border-radius: 0.3rem;
|
|
55
|
-
--d2l-button-icon-min-height: calc(2rem + 2px);
|
|
56
|
-
--d2l-button-icon-min-width: calc(2rem + 2px);
|
|
52
|
+
--d2l-button-icon-background-color-default: transparent;
|
|
53
|
+
--d2l-button-icon-background-color-hover-default: var(--d2l-color-gypsum);
|
|
54
|
+
--d2l-button-icon-border-radius-default: 0.3rem;
|
|
55
|
+
--d2l-button-icon-min-height-default: calc(2rem + 2px);
|
|
56
|
+
--d2l-button-icon-min-width-default: calc(2rem + 2px);
|
|
57
57
|
--d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
|
|
58
58
|
display: inline-block;
|
|
59
59
|
line-height: 0;
|
|
@@ -62,28 +62,28 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
|
|
|
62
62
|
display: none;
|
|
63
63
|
}
|
|
64
64
|
:host([translucent]) {
|
|
65
|
-
--d2l-button-icon-background-color: rgba(0, 0, 0, 0.5);
|
|
66
|
-
--d2l-button-icon-background-color-hover: var(--d2l-color-celestine);
|
|
65
|
+
--d2l-button-icon-background-color-default: rgba(0, 0, 0, 0.5);
|
|
66
|
+
--d2l-button-icon-background-color-hover-default: var(--d2l-color-celestine);
|
|
67
67
|
--d2l-focus-ring-color: white;
|
|
68
68
|
--d2l-focus-ring-offset: -4px;
|
|
69
69
|
--d2l-button-icon-fill-color: white;
|
|
70
70
|
--d2l-button-icon-fill-color-hover: white;
|
|
71
71
|
}
|
|
72
72
|
:host([theme="dark"]) {
|
|
73
|
-
--d2l-button-icon-background-color: transparent;
|
|
74
|
-
--d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
|
|
73
|
+
--d2l-button-icon-background-color-default: transparent;
|
|
74
|
+
--d2l-button-icon-background-color-hover-default: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
|
|
75
75
|
--d2l-button-icon-fill-color: var(--d2l-color-sylvite);
|
|
76
76
|
--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
|
|
77
77
|
--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
button {
|
|
81
|
-
background-color: var(--d2l-button-icon-background-color);
|
|
81
|
+
background-color: var(--d2l-button-icon-background-color, var(--d2l-button-icon-background-color-default));
|
|
82
82
|
border-color: transparent;
|
|
83
|
-
border-radius: var(--d2l-button-icon-border-radius);
|
|
83
|
+
border-radius: var(--d2l-button-icon-border-radius, var(--d2l-button-icon-border-radius-default));
|
|
84
84
|
font-family: inherit;
|
|
85
|
-
min-height: var(--d2l-button-icon-min-height);
|
|
86
|
-
min-width: var(--d2l-button-icon-min-width);
|
|
85
|
+
min-height: var(--d2l-button-icon-min-height, var(--d2l-button-icon-min-height-default));
|
|
86
|
+
min-width: var(--d2l-button-icon-min-width, var(--d2l-button-icon-min-width-default));
|
|
87
87
|
padding: 0;
|
|
88
88
|
position: relative;
|
|
89
89
|
}
|
|
@@ -104,7 +104,7 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
|
|
|
104
104
|
button:focus:not([disabled]),
|
|
105
105
|
:host([active]) button:not([disabled]) {
|
|
106
106
|
--d2l-button-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
|
|
107
|
-
background-color: var(--d2l-button-icon-background-color-hover);
|
|
107
|
+
background-color: var(--d2l-button-icon-background-color-hover, var(--d2l-button-icon-background-color-hover-default));
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
d2l-icon,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# VisibleOnAncestorMixin
|
|
2
2
|
|
|
3
|
-
The `VisibleOnAncestorMixin` adds a behavior to a component so that it is initially hidden, and becomes visible when user hovers or focuses within an ancestor
|
|
3
|
+
The `VisibleOnAncestorMixin` adds a behavior to a component so that it is initially hidden, and becomes visible when a user hovers or focuses within an ancestor that sets `isVisibleOnAncestorTarget = true` or has the `d2l-visible-on-ancestor-target` class. It includes styles that must be included with the component. If the device does not support hovering, the element will be visible regardless of whether the user is hovering or focusing within the target.
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
@@ -125,9 +125,10 @@ export const VisibleOnAncestorMixin = superclass => class extends superclass {
|
|
|
125
125
|
if (!this.visibleOnAncestor) return;
|
|
126
126
|
|
|
127
127
|
this.__voaTarget = findComposedAncestor(this, (node) => {
|
|
128
|
-
if (!node || node.nodeType !==
|
|
129
|
-
return (node.classList.contains('d2l-visible-on-ancestor-target'));
|
|
128
|
+
if (!node || node.nodeType !== Node.ELEMENT_NODE) return false;
|
|
129
|
+
return (node.isVisibleOnAncestorTarget || node.classList.contains('d2l-visible-on-ancestor-target'));
|
|
130
130
|
});
|
|
131
|
+
|
|
131
132
|
if (!this.__voaTarget) {
|
|
132
133
|
this.__voaState = null;
|
|
133
134
|
return;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.190.0",
|
|
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",
|