@brightspace-ui/core 3.129.1 → 3.131.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/components/description-list/description-list-wrapper.js +1 -1
- package/components/inputs/input-checkbox.js +10 -2
- package/components/inputs/input-color.js +2 -1
- package/components/inputs/input-inline-help.js +1 -1
- package/components/inputs/input-label-styles.js +7 -2
- package/components/inputs/input-radio-styles.js +6 -1
- package/components/inputs/input-select-styles.js +9 -3
- package/components/inputs/input-styles.js +9 -1
- package/components/inputs/input-text.js +5 -2
- package/components/typography/styles.js +207 -75
- package/components/typography/typography.js +21 -135
- package/components/typography/typography.scss +0 -10
- package/helpers/prism.js +7 -1
- package/helpers/svg-to-css.js +5 -0
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
|
5
5
|
|
|
6
6
|
export const descriptionListStyles = [
|
|
7
7
|
_generateLabelStyles('d2l-dl-wrapper > dl > dt'),
|
|
8
|
-
_generateBodyCompactStyles('d2l-dl-wrapper > dl > dd'),
|
|
8
|
+
_generateBodyCompactStyles('d2l-dl-wrapper > dl > dd', true),
|
|
9
9
|
css`
|
|
10
10
|
d2l-dl-wrapper {
|
|
11
11
|
--d2l-dl-wrapper-dt-min-width: min-content;
|
|
@@ -9,6 +9,14 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
9
9
|
import { InputInlineHelpMixin } from './input-inline-help.js';
|
|
10
10
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
11
11
|
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
12
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
13
|
+
|
|
14
|
+
export const inputCheck = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
15
|
+
<path fill="#494C4E" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
|
|
16
|
+
</svg>`);
|
|
17
|
+
export const inputCheckIndeterminate = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
18
|
+
<path fill="#494C4E" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
|
|
19
|
+
</svg>`);
|
|
12
20
|
|
|
13
21
|
export const cssSizes = {
|
|
14
22
|
inputBoxSize: 1.2,
|
|
@@ -35,10 +43,10 @@ export const checkboxStyles = css`
|
|
|
35
43
|
width: ${cssSizes.inputBoxSize}rem;
|
|
36
44
|
}
|
|
37
45
|
input[type="checkbox"].d2l-input-checkbox:checked {
|
|
38
|
-
background-image:
|
|
46
|
+
background-image: ${inputCheck};
|
|
39
47
|
}
|
|
40
48
|
input[type="checkbox"].d2l-input-checkbox:indeterminate {
|
|
41
|
-
background-image:
|
|
49
|
+
background-image: ${inputCheckIndeterminate};
|
|
42
50
|
}
|
|
43
51
|
input[type="checkbox"].d2l-input-checkbox,
|
|
44
52
|
input[type="checkbox"].d2l-input-checkbox:hover:disabled {
|
|
@@ -15,6 +15,7 @@ import { inputLabelStyles } from './input-label-styles.js';
|
|
|
15
15
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
16
16
|
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
|
17
17
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
18
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
18
19
|
|
|
19
20
|
const DEFAULT_VALUE = '#000000';
|
|
20
21
|
const DEFAULT_VALUE_BG = '#FFFFFF';
|
|
@@ -194,7 +195,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
|
|
|
194
195
|
height: 1rem;
|
|
195
196
|
}
|
|
196
197
|
.swatch-transparent {
|
|
197
|
-
background-image:
|
|
198
|
+
background-image: ${svgToCSS(SWATCH_TRANSPARENT)};
|
|
198
199
|
background-position-y: -1.5px;
|
|
199
200
|
background-size: cover;
|
|
200
201
|
}
|
|
@@ -3,7 +3,7 @@ import { _generateBodySmallStyles } from '../typography/styles.js';
|
|
|
3
3
|
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
4
4
|
|
|
5
5
|
export const inlineHelpStyles = [
|
|
6
|
-
_generateBodySmallStyles('.d2l-input-inline-help'),
|
|
6
|
+
_generateBodySmallStyles('.d2l-input-inline-help', true),
|
|
7
7
|
css`
|
|
8
8
|
.d2l-input-inline-help {
|
|
9
9
|
margin-top: 0.3rem !important;
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
3
|
+
|
|
4
|
+
const requiredIcon = svgToCSS(`<svg width="5" height="6" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M2.38 5.141V3.86c0-.093.006-.184.018-.273.011-.089.031-.173.059-.252a.927.927 0 0 1-.182.175c-.07.051-.145.103-.224.154l-1.106.644-.413-.7 1.113-.644c.084-.051.167-.093.248-.126.082-.033.167-.056.256-.07a.816.816 0 0 1-.256-.07 2.356 2.356 0 0 1-.248-.133L.532 1.914l.406-.7 1.113.658c.08.051.155.104.228.157a.966.966 0 0 1 .185.179 1.002 1.002 0 0 1-.066-.252 2.091 2.091 0 0 1-.018-.273V.388h.826v1.281c0 .098-.006.192-.017.283a1.003 1.003 0 0 1-.067.256c.051-.065.112-.125.182-.179.07-.053.147-.106.231-.157l1.106-.644.413.7-1.113.637a1.954 1.954 0 0 1-.248.13 1.07 1.07 0 0 1-.256.073c.159.028.327.093.504.196l1.113.651-.406.7-1.113-.651a3.307 3.307 0 0 1-.231-.154 1.122 1.122 0 0 1-.189-.175c.06.15.091.322.091.518v1.288H2.38z" fill="#494C4E" fill-rule="evenodd"/>
|
|
6
|
+
</svg>`);
|
|
2
7
|
|
|
3
8
|
export const inputLabelStyles = css`
|
|
4
9
|
.d2l-input-label {
|
|
@@ -14,7 +19,7 @@ export const inputLabelStyles = css`
|
|
|
14
19
|
}
|
|
15
20
|
:host([required]) .d2l-input-label::after,
|
|
16
21
|
.d2l-input-label-required::after {
|
|
17
|
-
background-image:
|
|
22
|
+
background-image: ${requiredIcon};
|
|
18
23
|
bottom: 0.25rem;
|
|
19
24
|
content: "";
|
|
20
25
|
display: inline-block;
|
|
@@ -42,7 +47,7 @@ export const inputLabelStyles = css`
|
|
|
42
47
|
.d2l-input-label-required::after {
|
|
43
48
|
background-color: FieldText;
|
|
44
49
|
background-image: none;
|
|
45
|
-
mask-image:
|
|
50
|
+
mask-image: ${requiredIcon};
|
|
46
51
|
}
|
|
47
52
|
}
|
|
48
53
|
`;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css } from 'lit';
|
|
3
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
4
|
+
|
|
5
|
+
const radioCheck = svgToCSS(`<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
6
|
+
<circle cx="5" cy="5" r="5" fill="#494c4e"></circle>
|
|
7
|
+
</svg>`);
|
|
3
8
|
|
|
4
9
|
export const radioStyles = css`
|
|
5
10
|
.d2l-input-radio,
|
|
@@ -23,7 +28,7 @@ export const radioStyles = css`
|
|
|
23
28
|
.d2l-input-radio[aria-checked="true"],
|
|
24
29
|
.d2l-input-radio:checked,
|
|
25
30
|
.d2l-input-radio-label > input[type="radio"]:checked {
|
|
26
|
-
background-image:
|
|
31
|
+
background-image: ${radioCheck};
|
|
27
32
|
}
|
|
28
33
|
.d2l-input-radio,
|
|
29
34
|
.d2l-input-radio:hover:disabled,
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, unsafeCSS } from 'lit';
|
|
3
3
|
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
4
|
+
import { invalidIcon } from './input-styles.js';
|
|
5
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
4
6
|
|
|
5
7
|
const focusClass = unsafeCSS(getFocusPseudoClass());
|
|
6
8
|
|
|
9
|
+
const chevron = svgToCSS(`<svg width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg">
|
|
10
|
+
<path d="M1 2l4.5 4M10 2L5.5 6" stroke="#565A5C" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
|
|
11
|
+
</svg>`);
|
|
12
|
+
|
|
7
13
|
export const selectStyles = css`
|
|
8
14
|
.d2l-input-select {
|
|
9
15
|
-webkit-appearance: none;
|
|
10
16
|
-moz-appearance: none;
|
|
11
17
|
appearance: none;
|
|
12
18
|
background-color: #ffffff;
|
|
13
|
-
background-image:
|
|
19
|
+
background-image: ${chevron};
|
|
14
20
|
background-origin: border-box;
|
|
15
21
|
background-position: center right 17px;
|
|
16
22
|
background-repeat: no-repeat;
|
|
@@ -45,7 +51,7 @@ export const selectStyles = css`
|
|
|
45
51
|
outline-offset: -2px;
|
|
46
52
|
}
|
|
47
53
|
.d2l-input-select[aria-invalid="true"] {
|
|
48
|
-
background-image:
|
|
54
|
+
background-image: ${chevron}, ${invalidIcon};
|
|
49
55
|
background-position: center right 17px, center right calc(1px + 11px + 17px);
|
|
50
56
|
background-repeat: no-repeat, no-repeat;
|
|
51
57
|
background-size: 11px 7px, 0.8rem 0.8rem;
|
|
@@ -88,7 +94,7 @@ export const selectStyles = css`
|
|
|
88
94
|
}
|
|
89
95
|
|
|
90
96
|
.d2l-input-select[aria-invalid="true"] {
|
|
91
|
-
background-image:
|
|
97
|
+
background-image: ${invalidIcon};
|
|
92
98
|
background-position: center right calc(1px + 11px + 17px);
|
|
93
99
|
background-repeat: no-repeat;
|
|
94
100
|
background-size: 0.8rem 0.8rem;
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, unsafeCSS } from 'lit';
|
|
3
3
|
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
4
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
4
5
|
|
|
5
6
|
const focusClass = unsafeCSS(getFocusPseudoClass());
|
|
6
7
|
|
|
8
|
+
export const invalidIcon = svgToCSS(`<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
|
9
|
+
<path fill="#cd2026" d="M17.79 15.11l-7-14a2 2 0 0 0-3.58 0l-7 14a1.975 1.975 0 0 0 .09 1.94A2 2 0 0 0 2 18h14a1.994 1.994 0 0 0 1.7-.95 1.967 1.967 0 0 0 .09-1.94zM9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
|
|
10
|
+
<path fill="#FFF" d="M9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
|
|
11
|
+
</svg>`);
|
|
12
|
+
|
|
7
13
|
export const inputStyles = css`
|
|
8
14
|
.d2l-input {
|
|
9
15
|
background-color: var(--d2l-input-background-color, #ffffff);
|
|
@@ -85,12 +91,13 @@ export const inputStyles = css`
|
|
|
85
91
|
padding-block: calc(0.5rem - 1px);
|
|
86
92
|
}
|
|
87
93
|
textarea.d2l-input[aria-invalid="true"] {
|
|
88
|
-
background-image:
|
|
94
|
+
background-image: ${invalidIcon};
|
|
89
95
|
background-position: top 12px right 18px;
|
|
90
96
|
background-repeat: no-repeat;
|
|
91
97
|
background-size: 0.8rem 0.8rem;
|
|
92
98
|
padding-inline-end: calc(18px + 0.8rem);
|
|
93
99
|
}
|
|
100
|
+
textarea.d2l-input-focus[aria-invalid="true"],
|
|
94
101
|
textarea.d2l-input[aria-invalid="true"]:hover,
|
|
95
102
|
textarea.d2l-input[aria-invalid="true"]:${focusClass} {
|
|
96
103
|
background-position: top calc(12px - 1px) right calc(18px - 1px);
|
|
@@ -99,6 +106,7 @@ export const inputStyles = css`
|
|
|
99
106
|
:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"] {
|
|
100
107
|
background-position: top 12px left 18px;
|
|
101
108
|
}
|
|
109
|
+
:host([dir="rtl"]) textarea.d2l-input-focus[aria-invalid="true"],
|
|
102
110
|
:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:${focusClass},
|
|
103
111
|
:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:hover {
|
|
104
112
|
background-position: top calc(12px - 1px) left calc(18px - 1px);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import '../tooltip/tooltip.js';
|
|
3
3
|
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
+
import { inputStyles, invalidIcon } from './input-styles.js';
|
|
4
5
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
6
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
|
6
7
|
import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
|
|
@@ -9,7 +10,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
|
9
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
11
|
import { InputInlineHelpMixin } from './input-inline-help.js';
|
|
11
12
|
import { inputLabelStyles } from './input-label-styles.js';
|
|
12
|
-
import { inputStyles } from './input-styles.js';
|
|
13
13
|
import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
|
|
14
14
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
15
15
|
import { PerfMonitor } from '../../helpers/perfMonitor.js';
|
|
@@ -258,7 +258,10 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
|
|
|
258
258
|
opacity: 0.5;
|
|
259
259
|
}
|
|
260
260
|
.d2l-input-text-invalid-icon {
|
|
261
|
-
background-image:
|
|
261
|
+
background-image: ${invalidIcon};
|
|
262
|
+
background-position: center center;
|
|
263
|
+
background-repeat: no-repeat;
|
|
264
|
+
background-size: 0.8rem 0.8rem;
|
|
262
265
|
display: flex;
|
|
263
266
|
height: 22px;
|
|
264
267
|
position: absolute;
|
|
@@ -1,20 +1,47 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, unsafeCSS } from 'lit';
|
|
3
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
3
4
|
|
|
4
5
|
export const _isValidCssSelector = (selector) => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
const partIsValid = (part) => {
|
|
7
|
+
const re = /([a-zA-Z0-9-_ >.#]+)(\[[a-zA-Z0-9-_]+\])?([a-zA-Z0-9-_ >.#]+)?/g;
|
|
8
|
+
if (part === ':host') return true;
|
|
9
|
+
const match = part.match(re);
|
|
10
|
+
const isValid = !!match && match.length === 1 && match[0].length === part.length;
|
|
11
|
+
if (!isValid) {
|
|
12
|
+
console.warn(`Invalid CSS selector: "${part}"`);
|
|
13
|
+
}
|
|
14
|
+
return isValid;
|
|
15
|
+
};
|
|
8
16
|
|
|
9
|
-
|
|
17
|
+
const parts = selector.split(',');
|
|
18
|
+
const allValid = parts.every(part => partIsValid(part));
|
|
19
|
+
return allValid;
|
|
10
20
|
};
|
|
11
21
|
|
|
22
|
+
/**
|
|
23
|
+
* A private helper method that should not be used by general consumers
|
|
24
|
+
*/
|
|
25
|
+
export const _generateBodyStandardStyles = (selector) => {
|
|
26
|
+
if (!_isValidCssSelector(selector)) return;
|
|
27
|
+
|
|
28
|
+
selector = unsafeCSS(selector);
|
|
29
|
+
return css`
|
|
30
|
+
${selector} {
|
|
31
|
+
font-size: 0.95rem;
|
|
32
|
+
font-weight: 400;
|
|
33
|
+
line-height: 1.4rem;
|
|
34
|
+
}
|
|
35
|
+
@media (max-width: 615px) {
|
|
36
|
+
${selector} {
|
|
37
|
+
font-size: 0.8rem;
|
|
38
|
+
line-height: 1.2rem;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
};
|
|
12
43
|
export const bodyStandardStyles = css`
|
|
13
|
-
.d2l-body-standard
|
|
14
|
-
font-size: 0.95rem;
|
|
15
|
-
font-weight: 400;
|
|
16
|
-
line-height: 1.4rem;
|
|
17
|
-
}
|
|
44
|
+
${_generateBodyStandardStyles('.d2l-body-standard')}
|
|
18
45
|
:host([skeleton]) .d2l-body-standard.d2l-skeletize::before {
|
|
19
46
|
bottom: 0.35rem;
|
|
20
47
|
top: 0.3rem;
|
|
@@ -29,10 +56,6 @@ export const bodyStandardStyles = css`
|
|
|
29
56
|
max-height: 7rem;
|
|
30
57
|
}
|
|
31
58
|
@media (max-width: 615px) {
|
|
32
|
-
.d2l-body-standard {
|
|
33
|
-
font-size: 0.8rem;
|
|
34
|
-
line-height: 1.2rem;
|
|
35
|
-
}
|
|
36
59
|
:host([skeleton]) .d2l-body-standard.d2l-skeletize::before {
|
|
37
60
|
bottom: 0.3rem;
|
|
38
61
|
top: 0.3rem;
|
|
@@ -72,16 +95,11 @@ export const _generateResetStyles = (selector) => {
|
|
|
72
95
|
/**
|
|
73
96
|
* A private helper method that should not be used by general consumers
|
|
74
97
|
*/
|
|
75
|
-
export const _generateBodyCompactStyles = (selector) => {
|
|
98
|
+
export const _generateBodyCompactStyles = (selector, includeSkeleton = true) => {
|
|
76
99
|
if (!_isValidCssSelector(selector)) return;
|
|
77
100
|
|
|
78
101
|
selector = unsafeCSS(selector);
|
|
79
|
-
|
|
80
|
-
${selector} {
|
|
81
|
-
font-size: 0.8rem;
|
|
82
|
-
font-weight: 400;
|
|
83
|
-
line-height: 1.2rem;
|
|
84
|
-
}
|
|
102
|
+
const skeletonStyles = includeSkeleton ? css`
|
|
85
103
|
:host([skeleton]) ${selector}.d2l-skeletize::before {
|
|
86
104
|
bottom: 0.3rem;
|
|
87
105
|
top: 0.3rem;
|
|
@@ -95,26 +113,27 @@ export const _generateBodyCompactStyles = (selector) => {
|
|
|
95
113
|
:host([skeleton]) ${selector}.d2l-skeletize-paragraph-5 {
|
|
96
114
|
max-height: 6rem;
|
|
97
115
|
}
|
|
116
|
+
` : unsafeCSS('');
|
|
117
|
+
return css`
|
|
118
|
+
${selector} {
|
|
119
|
+
font-size: 0.8rem;
|
|
120
|
+
font-weight: 400;
|
|
121
|
+
line-height: 1.2rem;
|
|
122
|
+
}
|
|
123
|
+
${skeletonStyles}
|
|
98
124
|
`;
|
|
99
125
|
};
|
|
100
126
|
|
|
101
|
-
export const bodyCompactStyles = _generateBodyCompactStyles('.d2l-body-compact');
|
|
127
|
+
export const bodyCompactStyles = _generateBodyCompactStyles('.d2l-body-compact', true);
|
|
102
128
|
|
|
103
129
|
/**
|
|
104
130
|
* A private helper method that should not be used by general consumers
|
|
105
131
|
*/
|
|
106
|
-
export const _generateBodySmallStyles = (selector) => {
|
|
132
|
+
export const _generateBodySmallStyles = (selector, includeSkeleton = true) => {
|
|
107
133
|
if (!_isValidCssSelector(selector)) return;
|
|
108
134
|
|
|
109
135
|
selector = unsafeCSS(selector);
|
|
110
|
-
|
|
111
|
-
${selector} {
|
|
112
|
-
color: var(--d2l-color-tungsten);
|
|
113
|
-
font-size: 0.7rem;
|
|
114
|
-
font-weight: 400;
|
|
115
|
-
line-height: 0.9rem;
|
|
116
|
-
margin: auto;
|
|
117
|
-
}
|
|
136
|
+
const skeletonStyles = includeSkeleton ? css`
|
|
118
137
|
:host([skeleton]) ${selector}.d2l-skeletize::before {
|
|
119
138
|
bottom: 0.25rem;
|
|
120
139
|
top: 0.2rem;
|
|
@@ -142,19 +161,46 @@ export const _generateBodySmallStyles = (selector) => {
|
|
|
142
161
|
:host([skeleton]) ${selector}.d2l-skeletize-paragraph-5 {
|
|
143
162
|
max-height: 4.5rem;
|
|
144
163
|
}
|
|
164
|
+
}` : unsafeCSS('');
|
|
165
|
+
return css`
|
|
166
|
+
${selector} {
|
|
167
|
+
color: var(--d2l-color-tungsten);
|
|
168
|
+
font-size: 0.7rem;
|
|
169
|
+
font-weight: 400;
|
|
170
|
+
line-height: 0.9rem;
|
|
171
|
+
margin: auto;
|
|
145
172
|
}
|
|
173
|
+
${skeletonStyles}
|
|
146
174
|
`;
|
|
147
175
|
};
|
|
148
176
|
|
|
149
|
-
export const bodySmallStyles = _generateBodySmallStyles('.d2l-body-small');
|
|
177
|
+
export const bodySmallStyles = _generateBodySmallStyles('.d2l-body-small', true);
|
|
150
178
|
|
|
179
|
+
/**
|
|
180
|
+
* A private helper method that should not be used by general consumers
|
|
181
|
+
*/
|
|
182
|
+
export const _generateHeading1Styles = (selector) => {
|
|
183
|
+
if (!_isValidCssSelector(selector)) return;
|
|
184
|
+
|
|
185
|
+
selector = unsafeCSS(selector);
|
|
186
|
+
return css`
|
|
187
|
+
${selector} {
|
|
188
|
+
font-size: 2rem;
|
|
189
|
+
font-weight: 400;
|
|
190
|
+
line-height: 2.4rem;
|
|
191
|
+
margin: 1.5rem 0 1.5rem 0;
|
|
192
|
+
}
|
|
193
|
+
@media (max-width: 615px) {
|
|
194
|
+
${selector} {
|
|
195
|
+
font-size: 1.5rem;
|
|
196
|
+
line-height: 1.8rem;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
}
|
|
200
|
+
`;
|
|
201
|
+
};
|
|
151
202
|
export const heading1Styles = css`
|
|
152
|
-
.d2l-heading-1
|
|
153
|
-
font-size: 2rem;
|
|
154
|
-
font-weight: 400;
|
|
155
|
-
line-height: 2.4rem;
|
|
156
|
-
margin: 1.5rem 0 1.5rem 0;
|
|
157
|
-
}
|
|
203
|
+
${_generateHeading1Styles('.d2l-heading-1')}
|
|
158
204
|
:host([skeleton]) .d2l-heading-1.d2l-skeletize {
|
|
159
205
|
height: 2.4rem;
|
|
160
206
|
overflow: hidden;
|
|
@@ -164,10 +210,6 @@ export const heading1Styles = css`
|
|
|
164
210
|
top: 0.45rem;
|
|
165
211
|
}
|
|
166
212
|
@media (max-width: 615px) {
|
|
167
|
-
.d2l-heading-1 {
|
|
168
|
-
font-size: 1.5rem;
|
|
169
|
-
line-height: 1.8rem;
|
|
170
|
-
}
|
|
171
213
|
:host([skeleton]) .d2l-heading-1.d2l-skeletize {
|
|
172
214
|
height: 1.8rem;
|
|
173
215
|
}
|
|
@@ -178,13 +220,32 @@ export const heading1Styles = css`
|
|
|
178
220
|
}
|
|
179
221
|
`;
|
|
180
222
|
|
|
223
|
+
/**
|
|
224
|
+
* A private helper method that should not be used by general consumers
|
|
225
|
+
*/
|
|
226
|
+
export const _generateHeading2Styles = (selector) => {
|
|
227
|
+
if (!_isValidCssSelector(selector)) return;
|
|
228
|
+
|
|
229
|
+
selector = unsafeCSS(selector);
|
|
230
|
+
return css`
|
|
231
|
+
${selector} {
|
|
232
|
+
font-size: 1.5rem;
|
|
233
|
+
font-weight: 400;
|
|
234
|
+
line-height: 1.8rem;
|
|
235
|
+
margin: 1.5rem 0 1.5rem 0;
|
|
236
|
+
}
|
|
237
|
+
@media (max-width: 615px) {
|
|
238
|
+
${selector} {
|
|
239
|
+
font-size: 1rem;
|
|
240
|
+
font-weight: 700;
|
|
241
|
+
line-height: 1.5rem;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
}
|
|
245
|
+
`;
|
|
246
|
+
};
|
|
181
247
|
export const heading2Styles = css`
|
|
182
|
-
.d2l-heading-2
|
|
183
|
-
font-size: 1.5rem;
|
|
184
|
-
font-weight: 400;
|
|
185
|
-
line-height: 1.8rem;
|
|
186
|
-
margin: 1.5rem 0 1.5rem 0;
|
|
187
|
-
}
|
|
248
|
+
${_generateHeading2Styles('.d2l-heading-2')}
|
|
188
249
|
:host([skeleton]) .d2l-heading-2.d2l-skeletize {
|
|
189
250
|
height: 1.8rem;
|
|
190
251
|
overflow: hidden;
|
|
@@ -194,11 +255,6 @@ export const heading2Styles = css`
|
|
|
194
255
|
top: 0.35rem;
|
|
195
256
|
}
|
|
196
257
|
@media (max-width: 615px) {
|
|
197
|
-
.d2l-heading-2 {
|
|
198
|
-
font-size: 1rem;
|
|
199
|
-
font-weight: 700;
|
|
200
|
-
line-height: 1.5rem;
|
|
201
|
-
}
|
|
202
258
|
:host([skeleton]) .d2l-heading-2.d2l-skeletize {
|
|
203
259
|
height: 1.5rem;
|
|
204
260
|
}
|
|
@@ -209,13 +265,31 @@ export const heading2Styles = css`
|
|
|
209
265
|
}
|
|
210
266
|
`;
|
|
211
267
|
|
|
268
|
+
/**
|
|
269
|
+
* A private helper method that should not be used by general consumers
|
|
270
|
+
*/
|
|
271
|
+
export const _generateHeading3Styles = (selector) => {
|
|
272
|
+
if (!_isValidCssSelector(selector)) return;
|
|
273
|
+
|
|
274
|
+
selector = unsafeCSS(selector);
|
|
275
|
+
return css`
|
|
276
|
+
${selector} {
|
|
277
|
+
font-size: 1rem;
|
|
278
|
+
font-weight: 700;
|
|
279
|
+
line-height: 1.5rem;
|
|
280
|
+
margin: 1.5rem 0 1.5rem 0;
|
|
281
|
+
}
|
|
282
|
+
@media (max-width: 615px) {
|
|
283
|
+
${selector} {
|
|
284
|
+
font-size: 0.8rem;
|
|
285
|
+
line-height: 1.2rem;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
}
|
|
289
|
+
`;
|
|
290
|
+
};
|
|
212
291
|
export const heading3Styles = css`
|
|
213
|
-
.d2l-heading-3
|
|
214
|
-
font-size: 1rem;
|
|
215
|
-
font-weight: 700;
|
|
216
|
-
line-height: 1.5rem;
|
|
217
|
-
margin: 1.5rem 0 1.5rem 0;
|
|
218
|
-
}
|
|
292
|
+
${_generateHeading3Styles('.d2l-heading-3')}
|
|
219
293
|
:host([skeleton]) .d2l-heading-3.d2l-skeletize {
|
|
220
294
|
height: 1.5rem;
|
|
221
295
|
overflow: hidden;
|
|
@@ -225,10 +299,6 @@ export const heading3Styles = css`
|
|
|
225
299
|
top: 0.35rem;
|
|
226
300
|
}
|
|
227
301
|
@media (max-width: 615px) {
|
|
228
|
-
.d2l-heading-3 {
|
|
229
|
-
font-size: 0.8rem;
|
|
230
|
-
line-height: 1.2rem;
|
|
231
|
-
}
|
|
232
302
|
:host([skeleton]) .d2l-heading-3.d2l-skeletize {
|
|
233
303
|
height: 1.2rem;
|
|
234
304
|
}
|
|
@@ -239,13 +309,24 @@ export const heading3Styles = css`
|
|
|
239
309
|
}
|
|
240
310
|
`;
|
|
241
311
|
|
|
312
|
+
/**
|
|
313
|
+
* A private helper method that should not be used by general consumers
|
|
314
|
+
*/
|
|
315
|
+
export const _generateHeading4Styles = (selector) => {
|
|
316
|
+
if (!_isValidCssSelector(selector)) return;
|
|
317
|
+
|
|
318
|
+
selector = unsafeCSS(selector);
|
|
319
|
+
return css`
|
|
320
|
+
${selector} {
|
|
321
|
+
font-size: 0.8rem;
|
|
322
|
+
font-weight: 700;
|
|
323
|
+
line-height: 1.2rem;
|
|
324
|
+
margin: 1.5rem 0 1.5rem 0;
|
|
325
|
+
}
|
|
326
|
+
`;
|
|
327
|
+
};
|
|
242
328
|
export const heading4Styles = css`
|
|
243
|
-
.d2l-heading-4
|
|
244
|
-
font-size: 0.8rem;
|
|
245
|
-
font-weight: 700;
|
|
246
|
-
line-height: 1.2rem;
|
|
247
|
-
margin: 1.5rem 0 1.5rem 0;
|
|
248
|
-
}
|
|
329
|
+
${_generateHeading4Styles('.d2l-heading-4')}
|
|
249
330
|
:host([skeleton]) .d2l-heading-4.d2l-skeletize {
|
|
250
331
|
height: 1.2rem;
|
|
251
332
|
overflow: hidden;
|
|
@@ -259,10 +340,16 @@ export const heading4Styles = css`
|
|
|
259
340
|
/**
|
|
260
341
|
* A private helper method that should not be used by general consumers
|
|
261
342
|
*/
|
|
262
|
-
export const _generateLabelStyles = (selector) => {
|
|
343
|
+
export const _generateLabelStyles = (selector, includeSkeleton = true) => {
|
|
263
344
|
if (!_isValidCssSelector(selector)) return;
|
|
264
345
|
|
|
265
346
|
selector = unsafeCSS(selector);
|
|
347
|
+
const skeletonStyles = includeSkeleton ? css`
|
|
348
|
+
:host([skeleton]) ${selector}.d2l-skeletize::before {
|
|
349
|
+
bottom: 0.25rem;
|
|
350
|
+
top: 0.15rem;
|
|
351
|
+
}
|
|
352
|
+
` : unsafeCSS('');
|
|
266
353
|
return css`
|
|
267
354
|
${selector} {
|
|
268
355
|
font-size: 0.7rem;
|
|
@@ -270,14 +357,20 @@ export const _generateLabelStyles = (selector) => {
|
|
|
270
357
|
letter-spacing: 0.2px;
|
|
271
358
|
line-height: 0.9rem;
|
|
272
359
|
}
|
|
273
|
-
|
|
274
|
-
bottom: 0.25rem;
|
|
275
|
-
top: 0.15rem;
|
|
276
|
-
}
|
|
360
|
+
${skeletonStyles}
|
|
277
361
|
`;
|
|
278
362
|
};
|
|
363
|
+
export const labelStyles = _generateLabelStyles('.d2l-label-text', true);
|
|
279
364
|
|
|
280
|
-
|
|
365
|
+
const quoteIcon = svgToCSS(`<svg width="11" height="11" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
366
|
+
<defs>
|
|
367
|
+
<path id="a" d="M0 0h24v24H0z"/>
|
|
368
|
+
</defs>
|
|
369
|
+
<g transform="translate(-1 -1)" fill="none" fill-rule="evenodd">
|
|
370
|
+
<mask id="b" fill="#fff"><use xlink:href="#a"/></mask>
|
|
371
|
+
<path d="M6 22.667A4.667 4.667 0 0 0 10.667 18c0-1.227-.559-2.5-1.334-3.333C8.481 13.75 7.35 13.333 6 13.333c-.411 0 1.333-6.666 3-9 1.667-2.333 1.333-3 .333-3C8 1.333 5.253 4.586 4 7.255 1.773 12 1.333 15.392 1.333 18A4.667 4.667 0 0 0 6 22.667zm12 0A4.667 4.667 0 0 0 22.667 18c0-1.227-.559-2.5-1.334-3.333-.852-.917-1.983-1.334-3.333-1.334-.411 0 1.333-6.666 3-9 1.667-2.333 1.333-3 .333-3-1.333 0-4.08 3.253-5.333 5.922C13.773 12 13.333 15.392 13.333 18A4.667 4.667 0 0 0 18 22.667z" fill="#D3D9E3" mask="url(#b)"/>
|
|
372
|
+
</g>
|
|
373
|
+
</svg>`);
|
|
281
374
|
|
|
282
375
|
/**
|
|
283
376
|
* A private helper method that should not be used by general consumers
|
|
@@ -298,7 +391,7 @@ export const _generateBlockquoteStyles = (selector) => {
|
|
|
298
391
|
position: relative;
|
|
299
392
|
}
|
|
300
393
|
${selector}::before {
|
|
301
|
-
content:
|
|
394
|
+
content: ${quoteIcon};
|
|
302
395
|
inset-block-start: 0;
|
|
303
396
|
inset-inline-start: 0;
|
|
304
397
|
position: absolute;
|
|
@@ -407,3 +500,42 @@ export const fontFacesCss = `@font-face {
|
|
|
407
500
|
url(${new URL(`${fonts.BCSansBoldItalic}.woff2`, importUrl)}) format('woff2'),
|
|
408
501
|
url(${new URL(`${fonts.BCSansBoldItalic}.woff`, importUrl)}) format('woff');
|
|
409
502
|
}`;
|
|
503
|
+
|
|
504
|
+
export const baseTypographyStyles = css`
|
|
505
|
+
${unsafeCSS(fontFacesCss)}
|
|
506
|
+
html {
|
|
507
|
+
--d2l-document-direction: ltr;
|
|
508
|
+
--d2l-mirror-transform: none;
|
|
509
|
+
}
|
|
510
|
+
html[dir="rtl"] {
|
|
511
|
+
--d2l-document-direction: rtl;
|
|
512
|
+
--d2l-mirror-transform: scale(-1, 1);
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
.d2l-typography {
|
|
516
|
+
color: var(--d2l-color-ferrite);
|
|
517
|
+
display: block;
|
|
518
|
+
font-family: "Lato", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
519
|
+
letter-spacing: 0.01rem;
|
|
520
|
+
}
|
|
521
|
+
${_generateBodyStandardStyles('.d2l-typography', false)}
|
|
522
|
+
.d2l-typography p {
|
|
523
|
+
margin: 1rem 0;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.d2l-typography:lang(ar), .d2l-typography :lang(ar) {
|
|
527
|
+
font-family: "Segoe UI", "Geeza Pro", sans-serif;
|
|
528
|
+
}
|
|
529
|
+
.d2l-typography:lang(ja), .d2l-typography :lang(ja) {
|
|
530
|
+
font-family: "Hiragino Kaku Gothic Pro", "Meiyro", sans-serif;
|
|
531
|
+
}
|
|
532
|
+
.d2l-typography:lang(ko), .d2l-typography :lang(ko) {
|
|
533
|
+
font-family: "Apple SD Gothic Neo", Dotum, sans-serif;
|
|
534
|
+
}
|
|
535
|
+
.d2l-typography:lang(th), .d2l-typography :lang(th), .d2l-typography:lang(tha), .d2l-typography :lang(tha) {
|
|
536
|
+
font-family: "Noto Sans Thai", system-ui, Tahoma;
|
|
537
|
+
}
|
|
538
|
+
.d2l-typography:lang(zh), .d2l-typography :lang(zh) {
|
|
539
|
+
font-family: "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
|
|
540
|
+
}
|
|
541
|
+
`;
|
|
@@ -1,144 +1,30 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import {
|
|
2
|
+
_generateBlockquoteStyles,
|
|
3
|
+
_generateBodyCompactStyles,
|
|
4
|
+
_generateBodySmallStyles,
|
|
5
|
+
_generateBodyStandardStyles,
|
|
6
|
+
_generateHeading1Styles,
|
|
7
|
+
_generateHeading2Styles,
|
|
8
|
+
_generateHeading3Styles,
|
|
9
|
+
_generateHeading4Styles,
|
|
10
|
+
_generateLabelStyles,
|
|
11
|
+
baseTypographyStyles
|
|
12
|
+
} from './styles.js';
|
|
3
13
|
|
|
4
14
|
if (!document.head.querySelector('#d2l-typography-font-face')) {
|
|
5
15
|
const style = document.createElement('style');
|
|
6
16
|
style.id = 'd2l-typography-font-face';
|
|
7
17
|
style.textContent = `
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
${fontFacesCss}
|
|
19
|
-
|
|
20
|
-
.d2l-typography {
|
|
21
|
-
color: var(--d2l-color-ferrite);
|
|
22
|
-
display: block;
|
|
23
|
-
font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
|
|
24
|
-
letter-spacing: 0.01rem;
|
|
25
|
-
font-size: 0.95rem;
|
|
26
|
-
font-weight: 400;
|
|
27
|
-
line-height: 1.4rem;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.d2l-typography .d2l-body-standard {
|
|
31
|
-
font-size: 0.95rem;
|
|
32
|
-
font-weight: 400;
|
|
33
|
-
line-height: 1.4rem;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.d2l-typography .d2l-body-compact {
|
|
37
|
-
font-size: 0.8rem;
|
|
38
|
-
font-weight: 400;
|
|
39
|
-
line-height: 1.2rem;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.d2l-typography .d2l-body-small {
|
|
43
|
-
color: var(--d2l-color-tungsten);
|
|
44
|
-
font-size: 0.7rem;
|
|
45
|
-
font-weight: 400;
|
|
46
|
-
line-height: 0.9rem;
|
|
47
|
-
margin: auto;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.d2l-typography .d2l-label-text {
|
|
51
|
-
font-size: 0.7rem;
|
|
52
|
-
line-height: 0.9rem;
|
|
53
|
-
font-weight: 700;
|
|
54
|
-
letter-spacing: 0.2px;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.d2l-typography p {
|
|
58
|
-
margin: 1rem 0;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.d2l-typography:lang(ar),
|
|
62
|
-
.d2l-typography :lang(ar) {
|
|
63
|
-
font-family: 'Segoe UI', 'Geeza Pro', sans-serif;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.d2l-typography:lang(zh),
|
|
67
|
-
.d2l-typography :lang(zh) {
|
|
68
|
-
font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.d2l-typography:lang(ko),
|
|
72
|
-
.d2l-typography :lang(ko) {
|
|
73
|
-
font-family: 'Apple SD Gothic Neo', Dotum, sans-serif;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.d2l-typography:lang(ja),
|
|
77
|
-
.d2l-typography :lang(ja) {
|
|
78
|
-
font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.d2l-typography:lang(th),
|
|
82
|
-
.d2l-typography :lang(th),
|
|
83
|
-
.d2l-typography:lang(tha),
|
|
84
|
-
.d2l-typography :lang(tha) {
|
|
85
|
-
font-family: 'Noto Sans Thai', system-ui, Tahoma;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.d2l-typography .d2l-heading-1 {
|
|
89
|
-
font-size: 2rem;
|
|
90
|
-
font-weight: 400;
|
|
91
|
-
line-height: 2.4rem;
|
|
92
|
-
margin: 1.5rem 0 1.5rem 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.d2l-typography .d2l-heading-2 {
|
|
96
|
-
font-size: 1.5rem;
|
|
97
|
-
font-weight: 400;
|
|
98
|
-
line-height: 1.8rem;
|
|
99
|
-
margin: 1.5rem 0 1.5rem 0;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.d2l-typography .d2l-heading-3 {
|
|
103
|
-
font-size: 1rem;
|
|
104
|
-
font-weight: 700;
|
|
105
|
-
line-height: 1.5rem;
|
|
106
|
-
margin: 1.5rem 0 1.5rem 0;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.d2l-typography .d2l-heading-4 {
|
|
110
|
-
font-size: 0.8rem;
|
|
111
|
-
font-weight: 700;
|
|
112
|
-
line-height: 1.2rem;
|
|
113
|
-
margin: 1.5rem 0 1.5rem 0;
|
|
114
|
-
}
|
|
115
|
-
|
|
18
|
+
${baseTypographyStyles}
|
|
19
|
+
${_generateBodyStandardStyles('.d2l-typography .d2l-body-standard', false)}
|
|
20
|
+
${_generateBodyCompactStyles('.d2l-typography .d2l-body-compact', false)}
|
|
21
|
+
${_generateBodySmallStyles('.d2l-typography .d2l-body-small', false)}
|
|
22
|
+
${_generateLabelStyles('.d2l-typography .d2l-label-text', false)}
|
|
23
|
+
${_generateHeading1Styles('.d2l-typography .d2l-heading-1')}
|
|
24
|
+
${_generateHeading2Styles('.d2l-typography .d2l-heading-2')}
|
|
25
|
+
${_generateHeading3Styles('.d2l-typography .d2l-heading-3')}
|
|
26
|
+
${_generateHeading4Styles('.d2l-typography .d2l-heading-4')}
|
|
116
27
|
${_generateBlockquoteStyles('.d2l-typography .d2l-blockquote')}
|
|
117
|
-
|
|
118
|
-
@media (max-width: 615px) {
|
|
119
|
-
|
|
120
|
-
.d2l-typography .d2l-body-standard {
|
|
121
|
-
font-size: 0.8rem;
|
|
122
|
-
line-height: 1.2rem;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.d2l-typography .d2l-heading-1 {
|
|
126
|
-
font-size: 1.5rem;
|
|
127
|
-
line-height: 1.8rem;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.d2l-typography .d2l-heading-2 {
|
|
131
|
-
font-size: 1rem;
|
|
132
|
-
font-weight: 700;
|
|
133
|
-
line-height: 1.5rem;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.d2l-typography .d2l-heading-3 {
|
|
137
|
-
font-size: 0.8rem;
|
|
138
|
-
line-height: 1.2rem;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
}
|
|
142
28
|
`;
|
|
143
29
|
document.head.appendChild(style);
|
|
144
30
|
}
|
|
@@ -140,10 +140,6 @@
|
|
|
140
140
|
font-size: 0.8rem;
|
|
141
141
|
font-weight: 400;
|
|
142
142
|
line-height: 1.2rem;
|
|
143
|
-
@media (max-width: 615px) {
|
|
144
|
-
font-size: 0.8rem;
|
|
145
|
-
line-height: 1.2rem;
|
|
146
|
-
}
|
|
147
143
|
}
|
|
148
144
|
|
|
149
145
|
@mixin d2l-body-small {
|
|
@@ -161,7 +157,6 @@
|
|
|
161
157
|
margin: 1.5rem 0 1.5rem 0;
|
|
162
158
|
@media (max-width: 615px) {
|
|
163
159
|
font-size: 1.5rem;
|
|
164
|
-
font-weight: 400;
|
|
165
160
|
line-height: 1.8rem;
|
|
166
161
|
}
|
|
167
162
|
}
|
|
@@ -195,11 +190,6 @@
|
|
|
195
190
|
font-weight: 700;
|
|
196
191
|
line-height: 1.2rem;
|
|
197
192
|
margin: 1.5rem 0 1.5rem 0;
|
|
198
|
-
@media (max-width: 615px) {
|
|
199
|
-
font-size: 0.8rem;
|
|
200
|
-
font-weight: 700;
|
|
201
|
-
line-height: 1.2rem;
|
|
202
|
-
}
|
|
203
193
|
}
|
|
204
194
|
|
|
205
195
|
@mixin d2l-label-text {
|
package/helpers/prism.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import { svgToCSS } from './svg-to-css.js';
|
|
2
3
|
|
|
3
4
|
const prismLocation = 'https://s.brightspace.com/lib/prismjs/1.28.0';
|
|
4
5
|
//const prismLocation = '/node_modules/prismjs'; // for local debugging
|
|
@@ -145,6 +146,11 @@ const generateColorVariables = (mode, theme) => {
|
|
|
145
146
|
`;
|
|
146
147
|
};
|
|
147
148
|
|
|
149
|
+
const transparentIcon = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
|
150
|
+
<path fill="gray" d="M0 0h2v2H0z"/>
|
|
151
|
+
<path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
|
152
|
+
</svg>`);
|
|
153
|
+
|
|
148
154
|
export const codeStyles = css`
|
|
149
155
|
|
|
150
156
|
${unsafeCSS(generateColorVariables(colorModes.LIGHT))}
|
|
@@ -301,7 +307,7 @@ export const codeStyles = css`
|
|
|
301
307
|
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
|
302
308
|
* </svg>
|
|
303
309
|
*/
|
|
304
|
-
background:
|
|
310
|
+
background: ${transparentIcon};
|
|
305
311
|
/* Prevent visual glitches where one pixel from the repeating pattern could be seen */
|
|
306
312
|
background-position: center;
|
|
307
313
|
background-size: 110%;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.131.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",
|