@brightspace-ui/core 3.338.2 → 3.340.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/README.md +1 -1
- package/components/icons/README.md +1 -1
- package/components/icons/catalogue.md +38 -38
- package/components/icons/images/tier1/asset-library.svg +12 -0
- package/components/icons/images/tier2/asset-library.svg +13 -0
- package/components/icons/images/tier3/asset-library.svg +13 -0
- package/generated/icons/presetIconLoader.js +6 -0
- package/generated/icons/tier1/asset-library.js +14 -0
- package/generated/icons/tier2/asset-library.js +15 -0
- package/generated/icons/tier3/asset-library.js +15 -0
- package/package.json +2 -4
- package/components/inputs/sass/radio.scss +0 -38
- package/components/inputs/sass/text.scss +0 -64
- package/components/inputs/sass/textarea.scss +0 -37
package/README.md
CHANGED
|
@@ -84,7 +84,7 @@ npm install @brightspace-ui/core
|
|
|
84
84
|
|
|
85
85
|
After cloning the repo, run `npm install` to install dependencies.
|
|
86
86
|
|
|
87
|
-
Run `npm run build` once, or any time icon
|
|
87
|
+
Run `npm run build` once, or any time icon files are changed.
|
|
88
88
|
|
|
89
89
|
### Running the demos
|
|
90
90
|
|
|
@@ -84,7 +84,7 @@ When contributing changes to icons, the SVG files should be properly formatted.
|
|
|
84
84
|
- color of SVG elements should be "tungsten" (`#494c4e`)
|
|
85
85
|
|
|
86
86
|
The best way to have most of these rules applied for you automatically is to put the icon through [SVGOMG](https://jakearchibald.github.io/svgomg/) with these options selected:
|
|
87
|
-
* `Prettify
|
|
87
|
+
* `Prettify markup` - ON
|
|
88
88
|
* `Remove viewBox` - OFF
|
|
89
89
|
* `Remove <title>` - ON
|
|
90
90
|
|
|
@@ -39,27 +39,28 @@ Size: `18px` x `18`px
|
|
|
39
39
|
|
|
40
40
|
| Icon | Name | | Icon | Name | | Icon | Name |
|
|
41
41
|
| :---: | :--- | --- | :---: | :--- | --- | :---: | :--- |
|
|
42
|
-
|  | accelerator | |  | access-special | |  | accessibility | |  | add-file | |  | add-message | |  | add-to-lor | |  | add-user | |  | add | |  | ai | |  | alarmbell | |  | alert | |  | arrow-collapse-small | |  | arrow-collapse | |  | arrow-expand-small | |  | arrow-expand | |  | arrow-thin-down | |  | arrow-thin-left | |  | arrow-thin-right | |  | arrow-thin-up | |  | arrow-toggle-down | |  | folder | |  | arrow-toggle-up | |  | accelerator | |  | enable | |  | plus-default |
|
|
43
|
+
|  | access-special | |  | enrollment | |  | plus-large-thick |
|
|
44
|
+
|  | accessibility | |  | eportfolio | |  | plus-large |
|
|
45
|
+
|  | add-file | |  | event-log | |  | preview |
|
|
46
|
+
|  | add-message | |  | exemption-add | |  | print |
|
|
47
|
+
|  | add-to-lor | |  | exemption-remove | |  | profile-default |
|
|
48
|
+
|  | add-user | |  | export | |  | profile-pic |
|
|
49
|
+
|  | add | |  | external | |  | publish-to-lor |
|
|
50
|
+
|  | ai | |  | feed | |  | quicklink |
|
|
51
|
+
|  | alarmbell | |  | feedback | |  | quizzing |
|
|
52
|
+
|  | alert | |  | file-archive | |  | read-unread |
|
|
53
|
+
|  | arrow-collapse-small | |  | file-audio | |  | read |
|
|
54
|
+
|  | arrow-collapse | |  | file-document | |  | reading |
|
|
55
|
+
|  | arrow-expand-small | |  | file-image | |  | redo |
|
|
56
|
+
|  | arrow-expand | |  | file-presentation | |  | reflection |
|
|
57
|
+
|  | arrow-thin-down | |  | file-video | |  | refresh |
|
|
58
|
+
|  | arrow-thin-left | |  | filter | |  | release-conditions |
|
|
59
|
+
|  | arrow-thin-right | |  | flag-filled | |  | remove-user |
|
|
60
|
+
|  | arrow-thin-up | |  | flag-hollow | |  | reorder |
|
|
61
|
+
|  | arrow-toggle-down | |  | folder-up-level | |  | repeat |
|
|
62
|
+
|  | arrow-toggle-up | |  | folder | |  | replied |
|
|
63
|
+
|  | asset-library | |  | forms | |  | reply |
|
|
63
64
|
|  | assignments | |  | forward | |  | reporting |
|
|
64
65
|
|  | attach | |  | fullscreen | |  | reports |
|
|
65
66
|
|  | attendance | |  | game | |  | resize-left |
|
|
@@ -116,7 +117,6 @@ Size: `18px` x `18`px
|
|
|
116
117
|
|  | edit | |  | pin-filled | |  | zoom-in |
|
|
117
118
|
|  | email-read | |  | pin-hollow | |  | zoom-out |
|
|
118
119
|
|  | email | |  | play | | | |
|
|
119
|
-
|  | enable | |  | plus-default | | | |
|
|
120
120
|
|
|
121
121
|
## tier2
|
|
122
122
|
|
|
@@ -124,17 +124,18 @@ Size: `24px` x `24`px
|
|
|
124
124
|
|
|
125
125
|
| Icon | Name | | Icon | Name | | Icon | Name |
|
|
126
126
|
| :---: | :--- | --- | :---: | :--- | --- | :---: | :--- |
|
|
127
|
-
|  | accelerator | |  | accessibility | |  | add-file | |  | add-message | |  | add-to-lor | |  | add-user | |  | add | |  | ai | |  | alarmbell | |  | alert | |  | arrow-collapse | |  | accelerator | |  | email | |  | print |
|
|
128
|
+
|  | accessibility | |  | eportfolio | |  | profile-default |
|
|
129
|
+
|  | add-file | |  | evaluate-all | |  | profile-pic |
|
|
130
|
+
|  | add-message | |  | external | |  | project |
|
|
131
|
+
|  | add-to-lor | |  | feedback | |  | publish-all |
|
|
132
|
+
|  | add-user | |  | file-archive | |  | publish-to-lor |
|
|
133
|
+
|  | add | |  | file-audio | |  | quicklink |
|
|
134
|
+
|  | ai | |  | file-document | |  | quiz-submissions |
|
|
135
|
+
|  | alarmbell | |  | file-image | |  | quizzing |
|
|
136
|
+
|  | alert | |  | file-presentation | |  | read-unread |
|
|
137
|
+
|  | arrow-collapse | |  | file-video | |  | read |
|
|
138
|
+
|  | asset-library | |  | filter | |  | reading |
|
|
138
139
|
|  | assignments | |  | flag-fill | |  | reflection |
|
|
139
140
|
|  | attach | |  | flag-hollow | |  | refresh |
|
|
140
141
|
|  | attendance | |  | folder | |  | release-conditions |
|
|
@@ -179,7 +180,6 @@ Size: `24px` x `24`px
|
|
|
179
180
|
|  | edit-not-editable | |  | pin-filled | |  | volume-muted |
|
|
180
181
|
|  | edit | |  | pin-hollow | |  | volume |
|
|
181
182
|
|  | email-open | |  | preview | |  | wizard |
|
|
182
|
-
|  | email | |  | print | | | |
|
|
183
183
|
|
|
184
184
|
## tier3
|
|
185
185
|
|
|
@@ -187,9 +187,10 @@ Size: `30px` x `30`px
|
|
|
187
187
|
|
|
188
188
|
| Icon | Name | | Icon | Name | | Icon | Name |
|
|
189
189
|
| :---: | :--- | --- | :---: | :--- | --- | :---: | :--- |
|
|
190
|
-
|  | accessibility | |  | ai | |  | alert | |  | email | |  | accessibility | |  | discussions | |  | menu |
|
|
191
|
+
|  | ai | |  | download | |  | news |
|
|
192
|
+
|  | alert | |  | email-open | |  | notification-bell |
|
|
193
|
+
|  | asset-library | |  | email | |  | pause-borderless |
|
|
193
194
|
|  | assignments | |  | evaluate-all | |  | pause |
|
|
194
195
|
|  | bookmark | |  | export | |  | pic |
|
|
195
196
|
|  | bullseye | |  | external | |  | play-borderless |
|
|
@@ -209,5 +210,4 @@ Size: `30px` x `30`px
|
|
|
209
210
|
|  | course-progress-complete | |  | lock-unlocked | |  | upload |
|
|
210
211
|
|  | course-progress-in-progress | |  | lock | |  | view-submission-list |
|
|
211
212
|
|  | course-progress-not-started | |  | menu-hamburger | | | |
|
|
212
|
-
|  | discussions | |  | menu | | | |
|
|
213
213
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18">
|
|
2
|
+
<g fill="#494c4e" clip-path="url(#a)">
|
|
3
|
+
<path d="M0 7.333C0 6.187.75 5.5 2 5.5v6.668a2.5 2.5 0 0 0 2.499 2.5L15 14.676c0 1.136-.75 1.824-2 1.824H3.008a3.007 3.007 0 0 1-3.004-3.009C.005 11.495 0 9.736 0 7.333"/>
|
|
4
|
+
<path fill-rule="evenodd" d="M16 2a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5.496a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm-5.568 2.485a1.14 1.14 0 0 0-1.484.152 1.26 1.26 0 0 0-.146 1.546c.129.201.312.358.527.451s.451.117.68.07c.228-.048.437-.164.602-.335a1.24 1.24 0 0 0 .322-.627 1.27 1.27 0 0 0-.067-.708 1.2 1.2 0 0 0-.434-.55m1.521 6.682H5.302L6.796 8.87a1 1 0 0 1 1.416-.27l1.713 1.212.964-.873 2.638-1.745a1.005 1.005 0 0 1 1.51.535c.368 1.153.894 2.772 1.158 3.437h-4.241" clip-rule="evenodd"/>
|
|
5
|
+
<path d="m9.925 9.813 2.028 1.354h2.18L10.888 8.94z"/>
|
|
6
|
+
</g>
|
|
7
|
+
<defs>
|
|
8
|
+
<clipPath id="a">
|
|
9
|
+
<path fill="#fff" d="M0 0h18v18H0z"/>
|
|
10
|
+
</clipPath>
|
|
11
|
+
</defs>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
2
|
+
<g fill="#494c4e" clip-path="url(#a)">
|
|
3
|
+
<path d="M2 11a2 2 0 0 1 .5-1.324V7.29A4 4 0 0 0 0 11v5.5A4.5 4.5 0 0 0 4.5 21H16a4 4 0 0 0 3.708-2.496h-2.39A2 2 0 0 1 16 19H4.5A2.5 2.5 0 0 1 2 16.5z"/>
|
|
4
|
+
<path d="M22 7a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zm2 6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4z"/>
|
|
5
|
+
<path d="M13.002 6.5a1.502 1.502 0 1 1 0 3.003 1.502 1.502 0 0 1 0-3.003"/>
|
|
6
|
+
<path d="m8.696 10.362-3.614 3.543 1.36 1.332h15.293l.937-2.267-2.399-4.131a1.67 1.67 0 0 0-2.328-.579l-5.125 3.2-2.056-1.312a1.67 1.67 0 0 0-2.068.215"/>
|
|
7
|
+
</g>
|
|
8
|
+
<defs>
|
|
9
|
+
<clipPath id="a">
|
|
10
|
+
<path fill="#fff" d="M0 0h24v24H0z"/>
|
|
11
|
+
</clipPath>
|
|
12
|
+
</defs>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 30 30">
|
|
2
|
+
<g fill="#494c4e" clip-path="url(#a)">
|
|
3
|
+
<path d="M2 13.195a2 2 0 0 1 1-1.732V9.321c-1.725.444-3 2.01-3 3.874v9a4 4 0 0 0 4 4h17a4 4 0 0 0 3.918-3.191H22.83A2 2 0 0 1 21 24.195H4a2 2 0 0 1-2-2z"/>
|
|
4
|
+
<path d="M28 8a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h17a2 2 0 0 0 2-2zm2 9a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h17a4 4 0 0 1 4 4z"/>
|
|
5
|
+
<path d="M22.479 10.146c.37-.23.87-.411 1.421-.27.544.14.893.53 1.11.902l4.346 7.206-1.712 1.033-4.268-7.076-7.019 4.293-1.042-1.707z"/>
|
|
6
|
+
<path d="M11.956 12.044c.408-.042.774.073 1.075.247l.125.077.031.023 9.399 6.798-1.172 1.622-9.25-6.694-4.948 5.081-1.432-1.396 5.058-5.193.004-.003c.273-.277.643-.514 1.11-.562M15 7.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4"/>
|
|
7
|
+
</g>
|
|
8
|
+
<defs>
|
|
9
|
+
<clipPath id="a">
|
|
10
|
+
<path fill="#fff" d="M0 0h30v30H0z"/>
|
|
11
|
+
</clipPath>
|
|
12
|
+
</defs>
|
|
13
|
+
</svg>
|
|
@@ -153,6 +153,8 @@ export function loadSvg(icon) {
|
|
|
153
153
|
return import(/* webpackChunkName: "icon-arrow-toggle-down" */'./tier1/arrow-toggle-down.js');
|
|
154
154
|
case 'tier1:arrow-toggle-up':
|
|
155
155
|
return import(/* webpackChunkName: "icon-arrow-toggle-up" */'./tier1/arrow-toggle-up.js');
|
|
156
|
+
case 'tier1:asset-library':
|
|
157
|
+
return import(/* webpackChunkName: "icon-asset-library" */'./tier1/asset-library.js');
|
|
156
158
|
case 'tier1:assignments':
|
|
157
159
|
return import(/* webpackChunkName: "icon-assignments" */'./tier1/assignments.js');
|
|
158
160
|
case 'tier1:attach':
|
|
@@ -597,6 +599,8 @@ export function loadSvg(icon) {
|
|
|
597
599
|
return import(/* webpackChunkName: "icon-alert" */'./tier2/alert.js');
|
|
598
600
|
case 'tier2:arrow-collapse':
|
|
599
601
|
return import(/* webpackChunkName: "icon-arrow-collapse" */'./tier2/arrow-collapse.js');
|
|
602
|
+
case 'tier2:asset-library':
|
|
603
|
+
return import(/* webpackChunkName: "icon-asset-library" */'./tier2/asset-library.js');
|
|
600
604
|
case 'tier2:assignments':
|
|
601
605
|
return import(/* webpackChunkName: "icon-assignments" */'./tier2/assignments.js');
|
|
602
606
|
case 'tier2:attach':
|
|
@@ -915,6 +919,8 @@ export function loadSvg(icon) {
|
|
|
915
919
|
return import(/* webpackChunkName: "icon-ai" */'./tier3/ai.js');
|
|
916
920
|
case 'tier3:alert':
|
|
917
921
|
return import(/* webpackChunkName: "icon-alert" */'./tier3/alert.js');
|
|
922
|
+
case 'tier3:asset-library':
|
|
923
|
+
return import(/* webpackChunkName: "icon-asset-library" */'./tier3/asset-library.js');
|
|
918
924
|
case 'tier3:assignments':
|
|
919
925
|
return import(/* webpackChunkName: "icon-assignments" */'./tier3/assignments.js');
|
|
920
926
|
case 'tier3:bookmark':
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// auto-generated
|
|
2
|
+
export const val = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18">
|
|
3
|
+
<g fill="#494c4e" clip-path="url(#a)">
|
|
4
|
+
<path d="M0 7.333C0 6.187.75 5.5 2 5.5v6.668a2.5 2.5 0 0 0 2.499 2.5L15 14.676c0 1.136-.75 1.824-2 1.824H3.008a3.007 3.007 0 0 1-3.004-3.009C.005 11.495 0 9.736 0 7.333"/>
|
|
5
|
+
<path fill-rule="evenodd" d="M16 2a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5.496a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm-5.568 2.485a1.14 1.14 0 0 0-1.484.152 1.26 1.26 0 0 0-.146 1.546c.129.201.312.358.527.451s.451.117.68.07c.228-.048.437-.164.602-.335a1.24 1.24 0 0 0 .322-.627 1.27 1.27 0 0 0-.067-.708 1.2 1.2 0 0 0-.434-.55m1.521 6.682H5.302L6.796 8.87a1 1 0 0 1 1.416-.27l1.713 1.212.964-.873 2.638-1.745a1.005 1.005 0 0 1 1.51.535c.368 1.153.894 2.772 1.158 3.437h-4.241" clip-rule="evenodd"/>
|
|
6
|
+
<path d="m9.925 9.813 2.028 1.354h2.18L10.888 8.94z"/>
|
|
7
|
+
</g>
|
|
8
|
+
<defs>
|
|
9
|
+
<clipPath id="a">
|
|
10
|
+
<path fill="#fff" d="M0 0h18v18H0z"/>
|
|
11
|
+
</clipPath>
|
|
12
|
+
</defs>
|
|
13
|
+
</svg>
|
|
14
|
+
`;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// auto-generated
|
|
2
|
+
export const val = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
3
|
+
<g fill="#494c4e" clip-path="url(#a)">
|
|
4
|
+
<path d="M2 11a2 2 0 0 1 .5-1.324V7.29A4 4 0 0 0 0 11v5.5A4.5 4.5 0 0 0 4.5 21H16a4 4 0 0 0 3.708-2.496h-2.39A2 2 0 0 1 16 19H4.5A2.5 2.5 0 0 1 2 16.5z"/>
|
|
5
|
+
<path d="M22 7a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zm2 6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4z"/>
|
|
6
|
+
<path d="M13.002 6.5a1.502 1.502 0 1 1 0 3.003 1.502 1.502 0 0 1 0-3.003"/>
|
|
7
|
+
<path d="m8.696 10.362-3.614 3.543 1.36 1.332h15.293l.937-2.267-2.399-4.131a1.67 1.67 0 0 0-2.328-.579l-5.125 3.2-2.056-1.312a1.67 1.67 0 0 0-2.068.215"/>
|
|
8
|
+
</g>
|
|
9
|
+
<defs>
|
|
10
|
+
<clipPath id="a">
|
|
11
|
+
<path fill="#fff" d="M0 0h24v24H0z"/>
|
|
12
|
+
</clipPath>
|
|
13
|
+
</defs>
|
|
14
|
+
</svg>
|
|
15
|
+
`;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// auto-generated
|
|
2
|
+
export const val = `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 30 30">
|
|
3
|
+
<g fill="#494c4e" clip-path="url(#a)">
|
|
4
|
+
<path d="M2 13.195a2 2 0 0 1 1-1.732V9.321c-1.725.444-3 2.01-3 3.874v9a4 4 0 0 0 4 4h17a4 4 0 0 0 3.918-3.191H22.83A2 2 0 0 1 21 24.195H4a2 2 0 0 1-2-2z"/>
|
|
5
|
+
<path d="M28 8a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h17a2 2 0 0 0 2-2zm2 9a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h17a4 4 0 0 1 4 4z"/>
|
|
6
|
+
<path d="M22.479 10.146c.37-.23.87-.411 1.421-.27.544.14.893.53 1.11.902l4.346 7.206-1.712 1.033-4.268-7.076-7.019 4.293-1.042-1.707z"/>
|
|
7
|
+
<path d="M11.956 12.044c.408-.042.774.073 1.075.247l.125.077.031.023 9.399 6.798-1.172 1.622-9.25-6.694-4.948 5.081-1.432-1.396 5.058-5.193.004-.003c.273-.277.643-.514 1.11-.562M15 7.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4"/>
|
|
8
|
+
</g>
|
|
9
|
+
<defs>
|
|
10
|
+
<clipPath id="a">
|
|
11
|
+
<path fill="#fff" d="M0 0h30v30H0z"/>
|
|
12
|
+
</clipPath>
|
|
13
|
+
</defs>
|
|
14
|
+
</svg>
|
|
15
|
+
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.340.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",
|
|
@@ -12,9 +12,8 @@
|
|
|
12
12
|
"build:clean": "node ./cli/clean.js",
|
|
13
13
|
"build:icons": "node ./cli/icon-generator.js",
|
|
14
14
|
"build:illustrations": "node ./cli/state-illustration-generator.js",
|
|
15
|
-
"build:sass": "sass ./test/sass.scss > ./test/sass.output.css",
|
|
16
15
|
"build:wca": "node ./cli/wca.js \"{components,mixins,templates}/**/*.js\"",
|
|
17
|
-
"build": "npm run build:clean && npm run build:icons && npm run build:illustrations && npm run build:
|
|
16
|
+
"build": "npm run build:clean && npm run build:icons && npm run build:illustrations && npm run build:wca",
|
|
18
17
|
"build-static": "rollup -c ./rollup/rollup.config.js",
|
|
19
18
|
"lint": "npm run lint:eslint && npm run lint:style",
|
|
20
19
|
"lint:eslint": "eslint .",
|
|
@@ -67,7 +66,6 @@
|
|
|
67
66
|
"rollup": "^4",
|
|
68
67
|
"rollup-plugin-copy": "^3",
|
|
69
68
|
"rollup-plugin-delete": "^3",
|
|
70
|
-
"sass": "^1",
|
|
71
69
|
"sinon": "^22",
|
|
72
70
|
"stylelint": "^17",
|
|
73
71
|
"web-component-analyzer": "^2"
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
@mixin d2l-input-radio() {
|
|
2
|
-
-webkit-appearance: none;
|
|
3
|
-
-moz-appearance: none;
|
|
4
|
-
appearance: none;
|
|
5
|
-
background-position: center center;
|
|
6
|
-
background-repeat: no-repeat;
|
|
7
|
-
background-size: 0.5rem 0.5rem;
|
|
8
|
-
border-radius: 50%;
|
|
9
|
-
border-style: solid;
|
|
10
|
-
box-sizing: border-box;
|
|
11
|
-
display: inline-block;
|
|
12
|
-
height: 1.2rem;
|
|
13
|
-
margin: 0;
|
|
14
|
-
padding: 0;
|
|
15
|
-
vertical-align: middle;
|
|
16
|
-
width: 1.2rem;
|
|
17
|
-
&:checked {
|
|
18
|
-
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%225%22%20fill%3D%22%23494c4e%22%3E%3C/circle%3E%0A%3C/svg%3E");
|
|
19
|
-
}
|
|
20
|
-
&,
|
|
21
|
-
&:hover:disabled {
|
|
22
|
-
background-color: var(--d2l-color-regolith);
|
|
23
|
-
border-color: var(--d2l-color-galena);
|
|
24
|
-
border-width: 1px;
|
|
25
|
-
}
|
|
26
|
-
&:hover,
|
|
27
|
-
&:focus {
|
|
28
|
-
border-color: var(--d2l-color-celestine);
|
|
29
|
-
border-width: 2px;
|
|
30
|
-
outline: none;
|
|
31
|
-
}
|
|
32
|
-
&[aria-invalid="true"] {
|
|
33
|
-
border-color: var(--d2l-color-cinnabar);
|
|
34
|
-
}
|
|
35
|
-
&:disabled {
|
|
36
|
-
opacity: 0.5;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
@mixin d2l-input-text(
|
|
2
|
-
$include-pseudo-classes: true,
|
|
3
|
-
$line-height: 1.2rem,
|
|
4
|
-
$padding: 0.4rem 0.75rem,
|
|
5
|
-
$padding-focus: calc(0.4rem - 1px) calc(0.75rem - 1px)
|
|
6
|
-
) {
|
|
7
|
-
background-color: #ffffff;
|
|
8
|
-
border-radius: 0.3rem;
|
|
9
|
-
border-style: solid;
|
|
10
|
-
border-width: 1px;
|
|
11
|
-
box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2), /* corundum */;
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
color: var(--d2l-color-ferrite);
|
|
14
|
-
display: inline-block;
|
|
15
|
-
font-family: inherit;
|
|
16
|
-
font-size: 0.8rem;
|
|
17
|
-
font-weight: 400;
|
|
18
|
-
height: auto;
|
|
19
|
-
letter-spacing: 0.02rem;
|
|
20
|
-
line-height: $line-height;
|
|
21
|
-
margin: 0;
|
|
22
|
-
min-width: calc(2rem + 1em);
|
|
23
|
-
position: relative;
|
|
24
|
-
vertical-align: middle;
|
|
25
|
-
width: 100%;
|
|
26
|
-
&::placeholder,
|
|
27
|
-
&::-ms-input-placeholder {
|
|
28
|
-
color: var(--d2l-color-galena);
|
|
29
|
-
font-size: 0.8rem;
|
|
30
|
-
font-weight: 400;
|
|
31
|
-
opacity: 1; /* Firefox has non-1 default */
|
|
32
|
-
}
|
|
33
|
-
&:hover,
|
|
34
|
-
&:focus {
|
|
35
|
-
border-color: var(--d2l-color-celestine);
|
|
36
|
-
border-width: 2px;
|
|
37
|
-
outline: none;
|
|
38
|
-
padding: $padding-focus;
|
|
39
|
-
}
|
|
40
|
-
&[aria-invalid="true"] {
|
|
41
|
-
border-color: var(--d2l-color-cinnabar);
|
|
42
|
-
}
|
|
43
|
-
&,
|
|
44
|
-
&:hover:disabled,
|
|
45
|
-
&[aria-invalid="true"]:disabled {
|
|
46
|
-
border-color: var(--d2l-color-galena);
|
|
47
|
-
border-width: 1px;
|
|
48
|
-
padding: $padding;
|
|
49
|
-
}
|
|
50
|
-
&:disabled {
|
|
51
|
-
opacity: 0.5;
|
|
52
|
-
}
|
|
53
|
-
@if $include-pseudo-classes {
|
|
54
|
-
&::-webkit-search-cancel-button,
|
|
55
|
-
&::-webkit-search-decoration {
|
|
56
|
-
display: none;
|
|
57
|
-
}
|
|
58
|
-
&::-ms-clear {
|
|
59
|
-
display: none;
|
|
60
|
-
height: 0;
|
|
61
|
-
width: 0;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
@use "./text.scss";
|
|
2
|
-
|
|
3
|
-
@mixin d2l-input-textarea() {
|
|
4
|
-
overflow: auto;
|
|
5
|
-
@include text.d2l-input-text(
|
|
6
|
-
$include-pseudo-classes: false,
|
|
7
|
-
$line-height: normal,
|
|
8
|
-
$padding: 0.5rem 0.75rem,
|
|
9
|
-
$padding-focus: calc(0.5rem - 1px) calc(0.75rem - 1px)
|
|
10
|
-
);
|
|
11
|
-
&[aria-invalid="true"] {
|
|
12
|
-
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
|
|
13
|
-
background-position: top 12px right 18px;
|
|
14
|
-
background-repeat: no-repeat;
|
|
15
|
-
background-size: 0.8rem 0.8rem;
|
|
16
|
-
padding-right: calc(18px + 0.8rem);
|
|
17
|
-
&:hover,
|
|
18
|
-
&:focus {
|
|
19
|
-
background-position: top calc(12px - 1px) right calc(18px - 1px);
|
|
20
|
-
padding-right: calc(18px + 0.8rem - 1px);
|
|
21
|
-
}
|
|
22
|
-
&:disabled {
|
|
23
|
-
background-image: none;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
[dir="rtl"] &[aria-invalid="true"] {
|
|
27
|
-
background-position: top 12px left 18px;
|
|
28
|
-
padding-left: calc(18px + 0.8rem);
|
|
29
|
-
padding-right: 0.75rem;
|
|
30
|
-
&:hover,
|
|
31
|
-
&:focus {
|
|
32
|
-
background-position: top calc(12px - 1px) left calc(18px - 1px);
|
|
33
|
-
padding-left: calc(18px + 0.8rem - 1px);
|
|
34
|
-
padding-right: calc(0.75rem - 1px);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|