@brightspace-ui/core 3.143.0 → 3.143.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.
- package/components/button/button-add.js +13 -7
- package/components/card/card.js +11 -15
- package/components/count-badge/count-badge-icon.js +4 -9
- package/components/count-badge/count-badge.js +4 -10
- package/components/demo/demo-snippet.js +1 -1
- package/components/scroll-wrapper/scroll-wrapper.js +6 -7
- package/components/switch/switch-mixin.js +3 -2
- package/components/table/table-col-sort-button.js +3 -7
- package/components/tabs/demo/tab-custom.js +1 -1
- package/components/tabs/tab-internal.js +4 -7
- package/components/tabs/tabs.js +2 -4
- package/helpers/demo/prism.html +17 -35
- package/helpers/focus.js +1 -1
- package/lang/ar.js +0 -1
- package/lang/cy.js +0 -1
- package/lang/da.js +0 -1
- package/lang/de.js +0 -1
- package/lang/en-gb.js +0 -1
- package/lang/en.js +0 -1
- package/lang/es-es.js +0 -1
- package/lang/es.js +0 -1
- package/lang/fr-fr.js +0 -1
- package/lang/fr.js +0 -1
- package/lang/haw.js +0 -1
- package/lang/hi.js +0 -1
- package/lang/ja.js +0 -1
- package/lang/ko.js +0 -1
- package/lang/mi.js +0 -1
- package/lang/nl.js +0 -1
- package/lang/pt.js +0 -1
- package/lang/sv.js +0 -1
- package/lang/tr.js +0 -1
- package/lang/zh-cn.js +0 -1
- package/lang/zh-tw.js +0 -1
- package/package.json +1 -1
- package/templates/primary-secondary/primary-secondary.js +2 -6
@@ -1,10 +1,10 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
2
|
import '../tooltip/tooltip.js';
|
3
3
|
import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
|
4
|
+
import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
|
4
5
|
import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
|
5
6
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
6
7
|
import { getFlag } from '../../helpers/flags.js';
|
7
|
-
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
8
8
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
9
9
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
10
10
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
@@ -105,12 +105,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
|
|
105
105
|
0% { position: absolute; }
|
106
106
|
100% { position: static; }
|
107
107
|
}
|
108
|
-
|
109
|
-
button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
|
110
|
-
background-color: white;
|
111
|
-
border-radius: 0.3rem;
|
112
|
-
box-shadow: 0 0 0 2px var(--d2l-button-add-hover-focus-color);
|
113
|
-
}
|
108
|
+
${getFocusRingStyles(pseudoClass => `button:${pseudoClass} d2l-button-add-icon-text`, { extraStyles: css`background-color: white; border-radius: 0.3rem;` })}
|
114
109
|
/* remove when GAUD-7495-add-button-white-background is cleaned up */
|
115
110
|
:host(:not([_white-background-add-button])) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
|
116
111
|
background-color: transparent;
|
@@ -160,6 +155,15 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
|
|
160
155
|
}
|
161
156
|
}
|
162
157
|
}
|
158
|
+
@media (prefers-contrast: more) {
|
159
|
+
.line {
|
160
|
+
background-color: ButtonBorder;
|
161
|
+
}
|
162
|
+
button:hover .line,
|
163
|
+
button:focus .line {
|
164
|
+
background-color: Highlight !important;
|
165
|
+
}
|
166
|
+
}
|
163
167
|
`;
|
164
168
|
}
|
165
169
|
|
@@ -215,6 +219,8 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
|
|
215
219
|
static get styles() {
|
216
220
|
return [visibleOnAncestorStyles, css`
|
217
221
|
:host {
|
222
|
+
--d2l-focus-ring-offset: 0;
|
223
|
+
--d2l-focus-ring-color: var(--d2l-button-add-hover-focus-color);
|
218
224
|
--d2l-button-add-icon-text-color: var(--d2l-color-galena);
|
219
225
|
align-items: center;
|
220
226
|
display: flex;
|
package/components/card/card.js
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
2
|
import { css, html, LitElement, nothing } from 'lit';
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
4
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
4
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
5
6
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
6
7
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
@@ -176,23 +177,17 @@ class Card extends LitElement {
|
|
176
177
|
|
177
178
|
:host([subtle]) {
|
178
179
|
border: none;
|
180
|
+
}
|
181
|
+
:host([subtle][href]) {
|
179
182
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
|
180
183
|
}
|
181
|
-
:host(:hover) {
|
184
|
+
:host([href]:not([_active]):hover) {
|
182
185
|
box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06);
|
183
186
|
}
|
184
|
-
:host([subtle]:hover) {
|
187
|
+
:host([subtle][href]:not([_active]):hover) {
|
185
188
|
box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06);
|
186
189
|
}
|
187
|
-
:host([_active]) {
|
188
|
-
border-color: transparent;
|
189
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
190
|
-
}
|
191
|
-
:host([_active]:hover),
|
192
|
-
:host([subtle][_active]:hover) {
|
193
|
-
border-color: transparent;
|
194
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
195
|
-
}
|
190
|
+
${getFocusRingStyles(() => ':host([_active])', { 'extraStyles': css`border-color: transparent;` })}
|
196
191
|
/* .d2l-card-link-container-hover is used to only color/underline when
|
197
192
|
hovering the anchor; these styles are not applied when hovering actions */
|
198
193
|
:host([href]) .d2l-card-link-container-hover,
|
@@ -208,15 +203,16 @@ class Card extends LitElement {
|
|
208
203
|
:host([_dropdown-action-open]) {
|
209
204
|
z-index: 2;
|
210
205
|
}
|
211
|
-
:host(:not([href])),
|
212
|
-
:host([subtle]:not([href])) {
|
213
|
-
box-shadow: none;
|
214
|
-
}
|
215
206
|
@media (prefers-reduced-motion: no-preference) {
|
216
207
|
:host {
|
217
208
|
transition: box-shadow 0.2s;
|
218
209
|
}
|
219
210
|
}
|
211
|
+
@media (prefers-contrast: more) {
|
212
|
+
:host([subtle]) {
|
213
|
+
border: 1px solid var(--d2l-color-gypsum);
|
214
|
+
}
|
215
|
+
}
|
220
216
|
`];
|
221
217
|
}
|
222
218
|
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
2
|
import '../icons/icon.js';
|
3
|
-
import { css, html, LitElement
|
3
|
+
import { css, html, LitElement } from 'lit';
|
4
4
|
import { CountBadgeMixin } from './count-badge-mixin.js';
|
5
5
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
6
|
-
import {
|
6
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
7
7
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
8
8
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
9
9
|
|
@@ -24,13 +24,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
|
|
24
24
|
|
25
25
|
static get styles() {
|
26
26
|
return [super.styles, css`
|
27
|
-
|
28
|
-
:host(:${unsafeCSS(getFocusPseudoClass())}) d2l-icon,
|
29
|
-
d2l-icon:${unsafeCSS(getFocusPseudoClass())} {
|
30
|
-
box-shadow: 0 0 0 2px var(--d2l-color-celestine);
|
31
|
-
outline: none;
|
32
|
-
}
|
33
|
-
|
27
|
+
${getFocusRingStyles(pseudoClass => `:host([focus-ring]) d2l-icon, d2l-icon:${pseudoClass}`)}
|
34
28
|
:host {
|
35
29
|
/* for long numbers, center the number on the icon */
|
36
30
|
--d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
|
@@ -66,6 +60,7 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
|
|
66
60
|
}
|
67
61
|
|
68
62
|
d2l-icon {
|
63
|
+
--d2l-focus-ring-offset: 0;
|
69
64
|
border: 2px solid transparent;
|
70
65
|
border-radius: 6px;
|
71
66
|
}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
|
-
import { css, html, LitElement
|
2
|
+
import { css, html, LitElement } from 'lit';
|
3
3
|
import { CountBadgeMixin } from './count-badge-mixin.js';
|
4
4
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
5
|
-
import {
|
5
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
6
6
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
7
7
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
8
8
|
|
@@ -10,24 +10,18 @@ class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
|
|
10
10
|
|
11
11
|
static get styles() {
|
12
12
|
return [super.styles, css`
|
13
|
-
|
14
|
-
:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-count-badge-wrapper,
|
15
|
-
.d2l-count-badge-wrapper:${unsafeCSS(getFocusPseudoClass())} {
|
16
|
-
box-shadow: 0 0 0 2px var(--d2l-color-celestine);
|
17
|
-
}
|
18
|
-
|
13
|
+
${getFocusRingStyles(pseudoClass => `:host([focus-ring]) .d2l-count-badge-wrapper, .d2l-count-badge-wrapper:${pseudoClass}`)}
|
19
14
|
.d2l-count-badge-wrapper {
|
15
|
+
--d2l-focus-ring-offset: 0;
|
20
16
|
border: 2px solid transparent;
|
21
17
|
}
|
22
18
|
|
23
19
|
:host([size="small"]) .d2l-count-badge-wrapper {
|
24
20
|
border-radius: 0.65rem;
|
25
|
-
outline: none;
|
26
21
|
}
|
27
22
|
|
28
23
|
:host([size="large"]) .d2l-count-badge-wrapper {
|
29
24
|
border-radius: 0.8rem;
|
30
|
-
outline: none;
|
31
25
|
}
|
32
26
|
`];
|
33
27
|
}
|
@@ -78,7 +78,7 @@ class DemoSnippet extends LitElement {
|
|
78
78
|
d2l-dropdown.settings-dropdown {
|
79
79
|
background-color: white;
|
80
80
|
border-radius: 6px;
|
81
|
-
|
81
|
+
outline: 1px solid var(--d2l-color-celestine-minus-1);
|
82
82
|
position: fixed;
|
83
83
|
right: 1rem;
|
84
84
|
top: -0.25rem;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
2
|
import '../icons/icon.js';
|
3
|
-
import { css, html, LitElement
|
4
|
-
import {
|
3
|
+
import { css, html, LitElement } from 'lit';
|
4
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
5
5
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
6
6
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
7
7
|
|
@@ -13,11 +13,10 @@ let focusStyleSheet;
|
|
13
13
|
function getFocusStyleSheet() {
|
14
14
|
if (!focusStyleSheet) {
|
15
15
|
focusStyleSheet = new CSSStyleSheet();
|
16
|
-
focusStyleSheet.replaceSync(
|
17
|
-
|
18
|
-
box-shadow: 0 0 0 2px #ffffff, 0
|
19
|
-
|
20
|
-
}`);
|
16
|
+
focusStyleSheet.replaceSync(getFocusRingStyles(
|
17
|
+
'.d2l-scroll-wrapper-focus',
|
18
|
+
{ extraStyles: css`box-shadow: 0 0 0 2px #ffffff, 0 2px 12px 0 rgba(0, 0, 0, 0.15);` }
|
19
|
+
));
|
21
20
|
}
|
22
21
|
return focusStyleSheet;
|
23
22
|
}
|
@@ -150,8 +150,9 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
|
|
150
150
|
display: none;
|
151
151
|
}
|
152
152
|
.d2l-switch-inner:hover, .switch-hover {
|
153
|
-
border-color:
|
154
|
-
|
153
|
+
border-color: transparent;
|
154
|
+
outline: 2px solid var(--d2l-color-celestine);
|
155
|
+
outline-offset: -2px;
|
155
156
|
}
|
156
157
|
@media (prefers-reduced-motion: reduce) {
|
157
158
|
.d2l-switch-toggle,
|
@@ -3,10 +3,10 @@ import '../dropdown/dropdown.js';
|
|
3
3
|
import '../dropdown/dropdown-menu.js';
|
4
4
|
import '../icons/icon.js';
|
5
5
|
import '../menu/menu.js';
|
6
|
-
import { css, html, LitElement, nothing
|
6
|
+
import { css, html, LitElement, nothing } from 'lit';
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
8
8
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
9
|
-
import {
|
9
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
10
10
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
11
11
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
12
12
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
@@ -116,11 +116,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
|
|
116
116
|
button:hover {
|
117
117
|
background-color: var(--d2l-color-gypsum);
|
118
118
|
}
|
119
|
-
button:
|
120
|
-
button:${unsafeCSS(getFocusPseudoClass())} {
|
121
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
122
|
-
outline-style: none;
|
123
|
-
}
|
119
|
+
${getFocusRingStyles('button', { extraStyles: css`box-shadow: 0 0 0 2px #ffffff;` })}
|
124
120
|
d2l-icon {
|
125
121
|
margin-inline-start: 0.6rem;
|
126
122
|
}
|
@@ -18,7 +18,7 @@ class TabCustom extends TabMixin(LitElement) {
|
|
18
18
|
}
|
19
19
|
${getFocusRingStyles(
|
20
20
|
pseudoClass => `:host(:${pseudoClass}) .d2l-tab-custom-content`,
|
21
|
-
{ extraStyles:
|
21
|
+
{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
|
22
22
|
)}
|
23
23
|
`];
|
24
24
|
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
|
-
import { css, html, LitElement
|
2
|
+
import { css, html, LitElement } from 'lit';
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
4
|
-
import {
|
4
|
+
import { getFocusRingStyles } from '../../helpers/focus.js';
|
5
5
|
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
6
6
|
|
7
7
|
const keyCodes = {
|
@@ -32,6 +32,7 @@ class Tab extends SkeletonMixin(LitElement) {
|
|
32
32
|
vertical-align: middle;
|
33
33
|
}
|
34
34
|
.d2l-tab-text {
|
35
|
+
--d2l-focus-ring-offset: 0;
|
35
36
|
margin: 0.5rem;
|
36
37
|
overflow: hidden;
|
37
38
|
padding: 0.1rem;
|
@@ -67,11 +68,7 @@ class Tab extends SkeletonMixin(LitElement) {
|
|
67
68
|
margin-inline-start: 0;
|
68
69
|
width: calc(100% - 0.6rem);
|
69
70
|
}
|
70
|
-
|
71
|
-
border-radius: 0.3rem;
|
72
|
-
box-shadow: 0 0 0 2px var(--d2l-color-celestine);
|
73
|
-
color: var(--d2l-color-celestine);
|
74
|
-
}
|
71
|
+
${getFocusRingStyles(pseudoClass => `:host(:${pseudoClass}) > .d2l-tab-text`, { extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` })}
|
75
72
|
:host([aria-selected="true"]:focus) {
|
76
73
|
text-decoration: none;
|
77
74
|
}
|
package/components/tabs/tabs.js
CHANGED
@@ -4,10 +4,10 @@ import '../../helpers/queueMicrotask.js';
|
|
4
4
|
import './tab-internal.js';
|
5
5
|
import { css, html, LitElement, unsafeCSS } from 'lit';
|
6
6
|
import { cssEscape, findComposedAncestor, getOffsetParent } from '../../helpers/dom.js';
|
7
|
+
import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
|
7
8
|
import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
|
8
9
|
import { bodyCompactStyles } from '../typography/styles.js';
|
9
10
|
import { classMap } from 'lit/directives/class-map.js';
|
10
|
-
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
11
11
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
12
12
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
13
13
|
import { repeat } from 'lit/directives/repeat.js';
|
@@ -159,9 +159,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
159
159
|
.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
|
160
160
|
background-color: var(--d2l-color-gypsum);
|
161
161
|
}
|
162
|
-
.d2l-tabs-scroll-button
|
163
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
164
|
-
}
|
162
|
+
${getFocusRingStyles('.d2l-tabs-scroll-button')}
|
165
163
|
:host([skeleton]) .d2l-tabs-scroll-button {
|
166
164
|
visibility: hidden;
|
167
165
|
}
|
package/helpers/demo/prism.html
CHANGED
@@ -1860,16 +1860,19 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
|
|
1860
1860
|
position: relative;
|
1861
1861
|
}
|
1862
1862
|
.d2l-card-link-container {
|
1863
|
-
border-radius: 6px;
|
1864
1863
|
flex-basis: auto;
|
1865
1864
|
flex-grow: 1;
|
1866
1865
|
flex-shrink: 1;
|
1867
|
-
overflow: hidden;
|
1868
1866
|
width: 100%; /* required for Legacy-Edge and FF when align-items: flex-start is specified */
|
1869
1867
|
}
|
1870
1868
|
.d2l-card-link-text {
|
1871
1869
|
display: inline-block;
|
1872
1870
|
}
|
1871
|
+
.d2l-card-header {
|
1872
|
+
border-start-end-radius: 6px;
|
1873
|
+
border-start-start-radius: 6px;
|
1874
|
+
overflow: hidden;
|
1875
|
+
}
|
1873
1876
|
|
1874
1877
|
a {
|
1875
1878
|
bottom: -1px;
|
@@ -1906,22 +1909,14 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
|
|
1906
1909
|
padding-bottom: 1.2rem;
|
1907
1910
|
}
|
1908
1911
|
.d2l-card-actions {
|
1912
|
+
inset-inline-end: 0.6rem;
|
1909
1913
|
position: absolute;
|
1910
|
-
right: 0.6rem;
|
1911
1914
|
top: 0.6rem;
|
1912
1915
|
/* this must be higher than footer z-index so dropdowns will be on top */
|
1913
1916
|
z-index: 3;
|
1914
1917
|
}
|
1915
|
-
:host([dir="rtl"]) .d2l-card-actions {
|
1916
|
-
left: 0.6rem;
|
1917
|
-
right: auto;
|
1918
|
-
}
|
1919
1918
|
.d2l-card-actions ::slotted(*) {
|
1920
|
-
margin-
|
1921
|
-
}
|
1922
|
-
:host([dir="rtl"]) .d2l-card-actions ::slotted(*) {
|
1923
|
-
margin-left: 0;
|
1924
|
-
margin-right: 0.3rem;
|
1919
|
+
margin-inline-start: 0.3rem;
|
1925
1920
|
}
|
1926
1921
|
.d2l-card-badge {
|
1927
1922
|
line-height: 0;
|
@@ -1950,23 +1945,17 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
|
|
1950
1945
|
|
1951
1946
|
:host([subtle]) {
|
1952
1947
|
border: none;
|
1948
|
+
}
|
1949
|
+
:host([subtle][href]) {
|
1953
1950
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
|
1954
1951
|
}
|
1955
|
-
:host(:hover) {
|
1952
|
+
:host([href]:not([_active]):hover) {
|
1956
1953
|
box-shadow: 0 2px 14px 1px rgba(0, 0, 0, 0.06);
|
1957
1954
|
}
|
1958
|
-
:host([subtle]:hover) {
|
1955
|
+
:host([subtle][href]:not([_active]):hover) {
|
1959
1956
|
box-shadow: 0 4px 18px 2px rgba(0, 0, 0, 0.06);
|
1960
1957
|
}
|
1961
|
-
:host([_active]) {
|
1962
|
-
border-color: transparent;
|
1963
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
1964
|
-
}
|
1965
|
-
:host([_active]:hover),
|
1966
|
-
:host([subtle][_active]:hover) {
|
1967
|
-
border-color: transparent;
|
1968
|
-
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
1969
|
-
}
|
1958
|
+
${getFocusRingStyles(() => ':host([_active])', {'extraStyles': css`border-color: transparent;`})}
|
1970
1959
|
/* .d2l-card-link-container-hover is used to only color/underline when
|
1971
1960
|
hovering the anchor; these styles are not applied when hovering actions */
|
1972
1961
|
:host([href]) .d2l-card-link-container-hover,
|
@@ -1982,21 +1971,14 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
|
|
1982
1971
|
:host([_dropdown-action-open]) {
|
1983
1972
|
z-index: 2;
|
1984
1973
|
}
|
1985
|
-
:host(:not([href])),
|
1986
|
-
:host([subtle]:not([href])) {
|
1987
|
-
box-shadow: none;
|
1988
|
-
transform: none;
|
1989
|
-
}
|
1990
1974
|
@media (prefers-reduced-motion: no-preference) {
|
1991
1975
|
:host {
|
1992
|
-
transition:
|
1976
|
+
transition: box-shadow 0.2s;
|
1993
1977
|
}
|
1994
|
-
|
1995
|
-
|
1996
|
-
:host([subtle]
|
1997
|
-
|
1998
|
-
:host([subtle][_active]:hover) {
|
1999
|
-
transform: translateY(-4px);
|
1978
|
+
}
|
1979
|
+
@media (prefers-contrast: more) {
|
1980
|
+
:host([subtle]) {
|
1981
|
+
border: 1px solid var(--d2l-color-gypsum);;
|
2000
1982
|
}
|
2001
1983
|
}
|
2002
1984
|
`];
|
package/helpers/focus.js
CHANGED
package/lang/ar.js
CHANGED
package/lang/cy.js
CHANGED
package/lang/da.js
CHANGED
package/lang/de.js
CHANGED
package/lang/en-gb.js
CHANGED
package/lang/en.js
CHANGED
package/lang/es-es.js
CHANGED
package/lang/es.js
CHANGED
package/lang/fr-fr.js
CHANGED
package/lang/fr.js
CHANGED
package/lang/haw.js
CHANGED
package/lang/hi.js
CHANGED
package/lang/ja.js
CHANGED
package/lang/ko.js
CHANGED
package/lang/mi.js
CHANGED
package/lang/nl.js
CHANGED
package/lang/pt.js
CHANGED
package/lang/sv.js
CHANGED
package/lang/tr.js
CHANGED
package/lang/zh-cn.js
CHANGED
package/lang/zh-tw.js
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.143.
|
3
|
+
"version": "3.143.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",
|
@@ -3,9 +3,9 @@ import '../../components/icons/icon-custom.js';
|
|
3
3
|
import '../../components/icons/icon.js';
|
4
4
|
import '../../components/offscreen/offscreen.js';
|
5
5
|
import { css, html, LitElement, unsafeCSS } from 'lit';
|
6
|
+
import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
|
6
7
|
import { classMap } from 'lit/directives/class-map.js';
|
7
8
|
import { formatPercent } from '@brightspace-ui/intl';
|
8
|
-
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
9
9
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
10
10
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
11
11
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
@@ -939,11 +939,7 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
939
939
|
color: white;
|
940
940
|
display: block;
|
941
941
|
}
|
942
|
-
|
943
|
-
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.2rem var(--d2l-color-celestine);
|
944
|
-
right: 0.2rem;
|
945
|
-
}
|
946
|
-
|
942
|
+
${getFocusRingStyles(pseudoClass => `.d2l-template-primary-secondary-divider:${pseudoClass} .d2l-template-primary-secondary-divider-handle-mobile`, { extraStyles: css`right: 0.2rem; box-shadow: 0 0 0 2px #ffffff;` })}
|
947
943
|
.d2l-template-primary-secondary-divider-shadow {
|
948
944
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
|
949
945
|
display: block;
|