@ebay/skin 14.0.4 → 14.1.0-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/.storybook/preview-head.html +374 -55
- package/_cdn/skin/v14.1.0-0/skin-default.min.css +6 -0
- package/_cdn/skin/v14.1.0-0/skin-full.min.css +6 -0
- package/_cdn/skin/v14.1.0-0/skin-headless.min.css +6 -0
- package/_cdn/skin/v14.1.0-0/skin-legacy.min.css +6 -0
- package/dist/drawer-dialog/drawer-dialog.css +2 -2
- package/dist/floating-label/floating-label.css +7 -8
- package/dist/fullscreen-dialog/fullscreen-dialog.css +17 -20
- package/dist/icon/direction.css +4 -0
- package/dist/icon/general.css +102 -2
- package/dist/icon/icon.css +169 -13
- package/dist/icon/interface.css +34 -2
- package/dist/icon/internal.css +4 -0
- package/dist/icon/large.css +6 -2
- package/dist/icon/photo.css +15 -3
- package/dist/icon/shipping.css +2 -2
- package/dist/icon/user.css +2 -2
- package/dist/lightbox-dialog/lightbox-dialog.css +8 -11
- package/dist/link/link.css +1 -1
- package/dist/page-notice/page-notice.css +35 -14
- package/dist/panel-dialog/panel-dialog.css +8 -21
- package/dist/progress-stepper/progress-stepper.css +21 -6
- package/dist/select/select.css +10 -10
- package/dist/svg/direction.svg +5 -0
- package/dist/svg/general.svg +181 -8
- package/dist/svg/icons.svg +374 -55
- package/dist/svg/interface.svg +75 -10
- package/dist/svg/internal.svg +160 -77
- package/dist/svg/large.svg +14 -2
- package/dist/svg/photo.svg +104 -35
- package/dist/svg/shipping.svg +79 -48
- package/dist/svg/social.svg +2 -13
- package/dist/svg/user.svg +45 -25
- package/dist/textbox/textbox.css +4 -4
- package/package.json +1 -1
- package/src/less/floating-label/floating-label.less +8 -12
- package/src/less/floating-label/stories/floating-label.stories.js +41 -0
- package/src/less/fullscreen-dialog/fullscreen-dialog.less +14 -14
- package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +33 -11
- package/src/less/gh/gh-mixins.less +51 -55
- package/src/less/icon/generated/direction.less +4 -0
- package/src/less/icon/generated/general.less +102 -2
- package/src/less/icon/generated/interface.less +34 -2
- package/src/less/icon/generated/internal.less +4 -0
- package/src/less/icon/generated/large.less +6 -2
- package/src/less/icon/generated/photo.less +15 -3
- package/src/less/icon/generated/shipping.less +2 -2
- package/src/less/icon/generated/user.less +2 -2
- package/src/less/lightbox-dialog/lightbox-dialog.less +7 -13
- package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +38 -10
- package/src/less/link/link.less +1 -1
- package/src/less/mixins/private/dialog-mixins.less +13 -10
- package/src/less/page-notice/page-notice.less +42 -14
- package/src/less/page-notice/stories/page-notice.stories.js +43 -0
- package/src/less/panel-dialog/panel-dialog.less +8 -18
- package/src/less/panel-dialog/stories/panel-dialog.stories.js +32 -10
- package/src/less/progress-stepper/progress-stepper.less +24 -6
- package/src/less/progress-stepper/stories/progress-stepper.stories.js +108 -17
- package/src/less/select/select.less +11 -11
- package/src/less/textbox/textbox.less +5 -5
- package/src/svg/direction.svg +5 -0
- package/src/svg/general.svg +181 -8
- package/src/svg/icons.svg +374 -55
- package/src/svg/interface.svg +75 -10
- package/src/svg/internal.svg +160 -77
- package/src/svg/large.svg +14 -2
- package/src/svg/photo.svg +104 -35
- package/src/svg/shipping.svg +79 -48
- package/src/svg/social.svg +2 -13
- package/src/svg/user.svg +45 -25
- package/svg.svg +374 -55
- package/_cdn/skin/v14.0.4/skin-default.min.css +0 -6
- package/_cdn/skin/v14.0.4/skin-full.min.css +0 -6
- package/_cdn/skin/v14.0.4/skin-headless.min.css +0 -6
- package/_cdn/skin/v14.0.4/skin-legacy.min.css +0 -6
package/dist/svg/shipping.svg
CHANGED
|
@@ -1,51 +1,82 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
3
|
+
<symbol id="icon-bag" viewBox="0 0 24 24">
|
|
4
|
+
<path
|
|
5
|
+
d="M17.9959 6.775C17.8776 3.5657 15.2384 1 12 1 8.6863 1 6 3.6863 6 7v2H4a1 1 0 00-.9864.8356l-2 12A1 1 0 002 23h20a.9998.9998 0 00.9864-1.1644l-2-12A1 1 0 0020 9h-2V7l-.0041-.225zM16 11v2l.0067.1166c.0578.4974.4805.8834.9933.8834.5523 0 1-.4477 1-1v-2h1.1529l1.6666 10H3.1805L4.847 11H6v2l.0067.1166C6.0645 13.614 6.4872 14 7 14c.5523 0 1-.4477 1-1v-2h8zm0-2H8V7l.0049-.1996C8.1089 4.684 9.8578 3 12 3c2.2091 0 4 1.7909 4 4v2z"
|
|
6
|
+
/>
|
|
7
|
+
</symbol>
|
|
8
|
+
<symbol id="icon-large-case" viewBox="0 0 24 24">
|
|
9
|
+
<path
|
|
10
|
+
d="M7.25 1C6.5596 1 6 1.5596 6 2.25V4H4.25C3.5596 4 3 4.5596 3 5.25v15.5c0 .6904.5596 1.25 1.25 1.25H5c0 .5523.4477 1 1 1s1-.4477 1-1h10c0 .5523.4477 1 1 1s1-.4477 1-1h.75c.6904 0 1.25-.5596 1.25-1.25V5.25C21 4.5596 20.4404 4 19.75 4H18V2.25C18 1.5596 17.4404 1 16.75 1h-9.5zM19 20H5v-2h14v2zM16 4H8V3h8v1zM5 8V6h14v2H5zm0 2h14v6H5v-6z"
|
|
11
|
+
/>
|
|
12
|
+
</symbol>
|
|
13
|
+
<symbol viewBox="0 0 22 16" id="icon-large-box">
|
|
14
|
+
<path
|
|
15
|
+
d="M22 5.015a.996.996 0 00-.2-.615l-3-4a.996.996 0 00-.816-.4H4a.999.999 0 00-.812.414L.21 4.387A.995.995 0 000 5V15a1 1 0 001 1h20a1 1 0 001-1V5.015zM20 14h-8V6h8v8zm-10 0H2V6h8v8zm2-10V2h5.5L19 4h-7zm-2-2v2H3l1.5-2H10z"
|
|
16
|
+
/>
|
|
17
|
+
</symbol>
|
|
18
|
+
<symbol viewBox="0 0 18 16" id="icon-medium-box">
|
|
19
|
+
<path
|
|
20
|
+
d="M17.796 4.395L14.805.406A.994.994 0 0013.984 0H4a.998.998 0 00-.809.412L.208 4.39A.997.997 0 000 5.01V15A1 1 0 001 16h16a1 1 0 001-1V5.01a.999.999 0 00-.204-.615zM16 14h-6V6h6v8zm-8 0H2V6h6v8zm2-10V2h3.5L15 4h-5zM8 2v2H3l1.5-2H8z"
|
|
21
|
+
/>
|
|
22
|
+
</symbol>
|
|
23
|
+
<symbol viewBox="0 0 22 20" id="icon-package">
|
|
24
|
+
<path
|
|
25
|
+
fill-rule="evenodd"
|
|
26
|
+
d="M22 5c-.005-.184-.054-.407-.16-.56l-3-4A.999.999 0 0018 0H4a1 1 0 00-.8.4l-3 4A1.37 1.37 0 000 5v14a1 1 0 001 1h20a1 1 0 001-1V5zm-3-1h-7V2h5.5L19 4zm-9-2H4.5L3 4h7V2zM2 6h8v12H2V6zm18 0h-8v12h8V6z"
|
|
27
|
+
/>
|
|
28
|
+
</symbol>
|
|
29
|
+
<symbol viewBox="0 0 22 17" id="icon-truck">
|
|
30
|
+
<path
|
|
31
|
+
d="M20 12h-1.766c-.015-.018-.036-.031-.052-.048a2.942 2.942 0 00-.28-.254c-.056-.047-.108-.096-.168-.139a3.092 3.092 0 00-.343-.203c-.061-.031-.118-.069-.18-.097a3.092 3.092 0 00-.414-.138c-.058-.017-.11-.04-.169-.053a2.938 2.938 0 00-1.21-.009c-.072.014-.139.041-.209.06-.113.031-.227.06-.333.103-.081.033-.155.077-.232.116-.089.045-.178.088-.261.141-.077.05-.148.108-.219.165-.054.042-.113.077-.164.122V5h3.562L20 8.612V12zm-4 3a1 1 0 01-1-1c0-.173.055-.327.132-.469a.978.978 0 01.701-.497c.057-.01.107-.034.167-.034a1 1 0 110 2zm-8-3h-.766c-.015-.017-.035-.029-.05-.045a2.818 2.818 0 00-.286-.26c-.054-.046-.105-.094-.164-.135a2.81 2.81 0 00-.343-.203c-.061-.032-.118-.07-.18-.098a3.065 3.065 0 00-.412-.138c-.058-.016-.112-.04-.171-.053A3.02 3.02 0 005 11a3.02 3.02 0 00-.628.068c-.06.013-.113.037-.171.053-.14.039-.28.08-.412.138-.062.028-.119.066-.18.098a2.81 2.81 0 00-.343.203c-.059.041-.11.09-.165.135a3.04 3.04 0 00-.285.259c-.015.017-.035.029-.05.046H2V2h10v10H8zm-3 3a1 1 0 110-2 1 1 0 110 2zm16.829-7.253L18.922 3.44a1 1 0 00-.828-.44H14V1a1 1 0 00-1-1H1a1 1 0 00-1 1v12a1 1 0 001 1h1a3 3 0 106 0h5a3 3 0 106 0h2a1 1 0 001-1V8.306a1 1 0 00-.171-.559z"
|
|
32
|
+
/>
|
|
33
|
+
</symbol>
|
|
34
|
+
<symbol viewBox="0 0 22 17" id="icon-fast-n-free">
|
|
35
|
+
<path
|
|
36
|
+
d="M20 12h-6V5h3.5L20 8.333V12zm1.8-4.6l-3-4A1 1 0 0018 3h-4V1a1 1 0 00-1-1H1a1 1 0 100 2h11v10H1a1 1 0 100 2h20a1 1 0 001-1V8a1 1 0 00-.2-.6zM6 14a1 1 0 01-2 0H2c0 1.654 1.346 3 3 3s3-1.346 3-3H6zm11 0a1 1 0 01-2 0h-2c0 1.654 1.346 3 3 3s3-1.346 3-3h-2zM1 6a1 1 0 110-2h8a1 1 0 110 2H1zm0 4a1 1 0 110-2h6a1 1 0 110 2H1z"
|
|
37
|
+
/>
|
|
38
|
+
</symbol>
|
|
39
|
+
<symbol viewBox="0 0 24 24" id="icon-small-letter">
|
|
40
|
+
<path
|
|
41
|
+
fill-rule="evenodd"
|
|
42
|
+
d="M5.6 5A2.6 2.6 0 0 0 3 7.6v8.8A2.6 2.6 0 0 0 5.6 19h12.8a2.6 2.6 0 0 0 2.6-2.6V7.6A2.6 2.6 0 0 0 18.4 5H5.6Zm13.393 2.506A.6.6 0 0 0 18.4 7H5.6a.6.6 0 0 0-.592.506l6.632 4.974a.6.6 0 0 0 .72 0l6.633-4.974ZM5 10v6.4a.6.6 0 0 0 .6.6h12.8a.6.6 0 0 0 .6-.6V10l-5.44 4.08a2.6 2.6 0 0 1-3.12 0L5 10Z"
|
|
43
|
+
clip-rule="evenodd"
|
|
44
|
+
/>
|
|
45
|
+
</symbol>
|
|
46
|
+
<symbol id="icon-small-box" viewBox="0 0 18 12">
|
|
47
|
+
<path
|
|
48
|
+
d="M17.796 4.395L14.805.406A.994.994 0 0013.984 0H4a.998.998 0 00-.809.412L.208 4.39A.997.997 0 000 5.01V11a1 1 0 001 1h16a1 1 0 001-1V5.01a.999.999 0 00-.204-.615zM16 10h-6V6h6v4zm-8 0H2V6h6v4zm2-6V2h3.5L15 4h-5zM8 2v2H3l1.5-2H8z"
|
|
49
|
+
/>
|
|
50
|
+
</symbol>
|
|
31
51
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
</
|
|
52
|
+
<symbol id="icon-envelope" viewBox="0 0 24 24">
|
|
53
|
+
<path
|
|
54
|
+
d="M5.25 2C4.55964 2 4 2.55964 4 3.25v17.5c0 .6904.55964 1.25 1.25 1.25h13.5c.6904 0 1.25-.5596 1.25-1.25V3.25C20 2.55964 19.4404 2 18.75 2H5.25zM6 5.34061V4h12v1.3406l-6 2.57143-6-2.57142zm0 2.17593l5.5076 2.3604c.3144.13476.6704.13476.9848 0L18 7.51654V20H6V7.51654z"
|
|
55
|
+
/>
|
|
56
|
+
</symbol>
|
|
57
|
+
<symbol id="icon-shoe-box" viewBox="0 0 24 24">
|
|
58
|
+
<path
|
|
59
|
+
d="M2.25 4C1.56 4 1 4.56 1 5.25v3.5c0 .605.43 1.11 1 1.225v8.775c0 .69.56 1.25 1.25 1.25h17.5c.69 0 1.25-.56 1.25-1.25V9.975c.57-.116 1-.62 1-1.225v-3.5C23 4.56 22.44 4 21.75 4H2.25zM20 10v8H4v-8h16zm1-2H3V6h18v2z"
|
|
60
|
+
/>
|
|
61
|
+
</symbol>
|
|
62
|
+
<symbol id="icon-suitcase" viewBox="0 0 24 24">
|
|
63
|
+
<path
|
|
64
|
+
d="M7 2a1 1 0 011-1h8a1 1 0 011 1v3h5a1 1 0 011 1v14a1 1 0 01-1 1h-3a1 1 0 11-2 0H7a1 1 0 11-2 0H2a1 1 0 01-1-1V6a1 1 0 011-1h5V2zm2 3h6V3H9v2zm8 2H7v12h10V7zm2 0v12h2V7h-2zM5 7H3v12h2V7z"
|
|
65
|
+
/>
|
|
66
|
+
</symbol>
|
|
67
|
+
<symbol viewBox="0 0 18 13" id="icon-fast-n-free-small">
|
|
68
|
+
<path
|
|
69
|
+
d="M16.71 5.29l-2-2A1 1 0 0014 3h-2V1a1 1 0 00-1-1H2a1 1 0 100 2h8v7H2a1 1 0 100 2 2 2 0 104 0h4a2 2 0 104 0h2a1 1 0 001-1V6a1 1 0 00-.29-.71zM13.59 5L15 6.41V9h-3V5h1.59zM6 4a1 1 0 110 2H2a1 1 0 110-2z"
|
|
70
|
+
/>
|
|
71
|
+
</symbol>
|
|
72
|
+
<symbol viewBox="0 0 16 13" id="icon-truck-small">
|
|
73
|
+
<path
|
|
74
|
+
d="M15.71 5.29l-2-2A1 1 0 0013 3h-2V1a1 1 0 00-1-1H1a1 1 0 00-1 1v9a1 1 0 001 1 2 2 0 104 0h4a2 2 0 104 0h2a1 1 0 001-1V6a1 1 0 00-.29-.71zM2 9V2h7v7H2zm12 0h-3V5h1.59L14 6.41V9z"
|
|
75
|
+
/>
|
|
76
|
+
</symbol>
|
|
77
|
+
<symbol id="icon-small-case" viewBox="0 0 24 24">
|
|
78
|
+
<path
|
|
79
|
+
d="M7 3.25C7 2.5596 7.5596 2 8.25 2h7.5c.6904 0 1.25.5596 1.25 1.25V5h.75c.6904 0 1.25.5596 1.25 1.25v12.5c0 .6047-.4294 1.1092-1 1.225V20c0 .5523-.4477 1-1 1s-1-.4477-1-1H8c0 .5523-.4477 1-1 1s-1-.4477-1-1v-.025c-.5706-.1158-1-.6203-1-1.225V6.25C5 5.5596 5.5596 5 6.25 5H7V3.25zM17 18v-5H7v5h10zM9 5h6V4H9v1zM7 7v4h10V7H7z"
|
|
80
|
+
/>
|
|
81
|
+
</symbol>
|
|
82
|
+
</svg>
|
package/dist/svg/social.svg
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg">
|
|
3
3
|
<symbol viewBox="0 0 24 24" id="icon-social-link">
|
|
4
|
-
<g clip-path="
|
|
4
|
+
<g clip-path="path('M0 0h24v24H0z')">
|
|
5
5
|
<path
|
|
6
6
|
d="M20.828 3.207c-1.574-1.575-3.95-1.66-5.61.025l-.014.014-4 3.964a1 1 0 1 1-1.408-1.42l3.994-3.96c2.472-2.51 6.124-2.366 8.453-.038 2.344 2.344 2.348 6.053-.027 8.44l-.012.013-4 3.964a1 1 0 0 1-1.408-1.42l3.996-3.96c1.612-1.615 1.595-4.065.036-5.623Z"
|
|
7
7
|
/>
|
|
@@ -12,9 +12,6 @@
|
|
|
12
12
|
d="M7.207 9.793a1 1 0 0 1 0 1.414l-4 4c-1.609 1.605-1.594 4.063-.035 5.622 1.557 1.557 4.005 1.577 5.611-.026l.01-.01 4-4a1 1 0 0 1 1.414 1.414l-3.999 3.999c-2.383 2.392-6.105 2.382-8.45.037-2.343-2.343-2.349-6.06.024-8.44l.01-.01 4-4a1 1 0 0 1 1.415 0Z"
|
|
13
13
|
/>
|
|
14
14
|
</g>
|
|
15
|
-
<defs>
|
|
16
|
-
<clipPath id="clip0_49833_77257"><path d="M0 0h24v24H0z" /></clipPath>
|
|
17
|
-
</defs>
|
|
18
15
|
</symbol>
|
|
19
16
|
<symbol viewBox="0 0 24 24" id="icon-social-discord">
|
|
20
17
|
<path
|
|
@@ -27,19 +24,11 @@
|
|
|
27
24
|
/>
|
|
28
25
|
</symbol>
|
|
29
26
|
<symbol id="icon-social-messenger" viewBox="0 0 24 24">
|
|
30
|
-
<g clip-path="
|
|
27
|
+
<g clip-path="path('M0 0h24v24H0z')">
|
|
31
28
|
<path
|
|
32
29
|
d="M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.521 3.769 8.61a.957.957 0 01.322.684l.066 2.136a.96.96 0 001.346.849l2.383-1.05a.958.958 0 01.64-.047c1.132.308 2.3.462 3.474.458 6.76 0 12-4.95 12-11.64S18.76 0 12 0zm7.206 8.956l-3.525 5.594a1.799 1.799 0 01-2.603.48l-2.803-2.103a.72.72 0 00-.868.003l-3.786 2.872c-.505.384-1.165-.221-.827-.758l3.525-5.593a1.8 1.8 0 012.603-.48l2.803 2.103a.72.72 0 00.868-.002l3.786-2.874c.505-.384 1.165.221.827.758z"
|
|
33
30
|
/>
|
|
34
31
|
</g>
|
|
35
|
-
<defs>
|
|
36
|
-
<clipPath id="clip0_41192_49714">
|
|
37
|
-
<path
|
|
38
|
-
fill="var(--color-social-icons-foreground, #fff)"
|
|
39
|
-
d="M0 0h24v24H0z"
|
|
40
|
-
/>
|
|
41
|
-
</clipPath>
|
|
42
|
-
</defs>
|
|
43
32
|
</symbol>
|
|
44
33
|
<symbol id="icon-social-pinterest" viewBox="0 0 24 24">
|
|
45
34
|
<g clip-path="url(#a)">
|
package/dist/svg/user.svg
CHANGED
|
@@ -1,28 +1,48 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="utf-8"?>
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
</
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
3
|
+
<symbol viewBox="0 0 40 40" id="icon-avatar-light" >
|
|
4
|
+
<g clip-path="path('M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20z')">
|
|
5
|
+
<path
|
|
6
|
+
d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20z"
|
|
7
|
+
fill="#F7F7F7"
|
|
8
|
+
/>
|
|
9
|
+
<ellipse cx="20" cy="41" rx="13.6" ry="12" fill="#707070"/>
|
|
10
|
+
<circle cx="20" cy="19.4" r="8.4" fill="#707070"/>
|
|
11
|
+
</g>
|
|
12
|
+
<path
|
|
13
|
+
d="M20 38c-9.941 0-18-8.059-18-18h-4c0 12.15 9.85 22 22 22v-4zm18-18c0 9.941-8.059 18-18 18v4c12.15 0 22-9.85 22-22h-4zM20 2c9.941 0 18 8.059 18 18h4C42 7.85 32.15-2 20-2v4zm0-4C7.85-2-2 7.85-2 20h4c0-9.941 8.059-18 18-18v-4z"
|
|
14
|
+
fill="#fff"
|
|
15
|
+
/>
|
|
16
|
+
</symbol>
|
|
17
|
+
<symbol id="icon-avatar-filled" viewBox="0 0 22 22">
|
|
18
|
+
<path
|
|
19
|
+
d="M4.075 19.547C4.57 16.409 7.483 14 11 14s6.429 2.409 6.925 5.547A10.954 10.954 0 0111 22c-2.625 0-5.034-.92-6.925-2.453zM15 9a4 4 0 11-8 0 4 4 0 018 0z"
|
|
20
|
+
/>
|
|
21
|
+
<path
|
|
22
|
+
d="M11 20a9 9 0 110-18 9 9 0 010 18zm0 2c6.075 0 11-4.925 11-11S17.075 0 11 0 0 4.925 0 11s4.925 11 11 11z"
|
|
23
|
+
/>
|
|
24
|
+
</symbol>
|
|
25
|
+
<symbol id="icon-avatar" viewBox="0 0 22 22">
|
|
26
|
+
<path
|
|
27
|
+
d="M15.596 18.74A8.958 8.958 0 0111 20c-1.68 0-3.25-.46-4.596-1.26C7.147 17.177 8.853 16 11 16c2.147 0 3.853 1.177 4.596 2.74zm1.62-1.232C16.05 15.424 13.704 14 11 14s-5.05 1.424-6.216 3.508a9 9 0 1112.432 0zm.575 2.146A10.98 10.98 0 0022 11c0-6.075-4.925-11-11-11S0 4.925 0 11c0 3.45 1.589 6.53 4.075 8.547l.005.004c.59.478 1.23.896 1.912 1.246l.02.01A10.954 10.954 0 0011 22a10.954 10.954 0 006.791-2.346zM11 11a2 2 0 110-4 2 2 0 010 4zm0 2a4 4 0 100-8 4 4 0 000 8z"
|
|
28
|
+
/>
|
|
29
|
+
</symbol>
|
|
30
|
+
<symbol id="icon-avatar-dark" fill="none" viewBox="0 0 22 22">
|
|
31
|
+
<g>
|
|
32
|
+
<path
|
|
33
|
+
fill="#fff"
|
|
34
|
+
d="M0 11C0 4.92487 4.92487 0 11 0c6.0751 0 11 4.92487 11 11 0 6.0751-4.9249 11-11 11-6.07513 0-11-4.9249-11-11Z"
|
|
35
|
+
/>
|
|
36
|
+
<path
|
|
37
|
+
fill="#333"
|
|
38
|
+
d="M0 11C0 4.92487 4.92487 0 11 0c6.0751 0 11 4.92487 11 11 0 6.0751-4.9249 11-11 11-6.07513 0-11-4.9249-11-11Z"
|
|
39
|
+
/>
|
|
40
|
+
<ellipse cx="11" cy="22.55" fill="gray" rx="7.48" ry="6.6" />
|
|
41
|
+
<circle cx="11" cy="10.67" r="4.62" fill="gray" />
|
|
42
|
+
</g>
|
|
43
|
+
<path
|
|
44
|
+
fill="#171717"
|
|
45
|
+
d="M11 20c-4.97056 0-9-4.0294-9-9h-4c0 7.1797 5.8203 13 13 13v-4Zm9-9c0 4.9706-4.0294 9-9 9v4c7.1797 0 13-5.8203 13-13h-4Zm-9-9c4.9706 0 9 4.02944 9 9h4c0-7.1797-5.8203-13-13-13v4Zm0-4C3.8203-2-2 3.8203-2 11h4c0-4.97056 4.02944-9 9-9v-4Z"
|
|
46
|
+
/>
|
|
47
|
+
</symbol>
|
|
28
48
|
</svg>
|
package/dist/textbox/textbox.css
CHANGED
|
@@ -64,7 +64,7 @@ textarea.textbox__control[disabled]:-ms-input-placeholder {
|
|
|
64
64
|
}
|
|
65
65
|
input.textbox__control[readonly],
|
|
66
66
|
textarea.textbox__control[readonly] {
|
|
67
|
-
color: var(--textbox-readonly-color, var(--color-foreground-
|
|
67
|
+
color: var(--textbox-readonly-color, var(--color-foreground-on-secondary));
|
|
68
68
|
}
|
|
69
69
|
input.textbox__control[aria-invalid="true"],
|
|
70
70
|
textarea.textbox__control[aria-invalid="true"] {
|
|
@@ -75,17 +75,17 @@ input.textbox__control:focus,
|
|
|
75
75
|
textarea.textbox__control:focus {
|
|
76
76
|
border-color: var(--textbox-focus-border-color, var(--color-stroke-default));
|
|
77
77
|
background-color: var(--textbox-focus-background-color, var(--color-background-primary));
|
|
78
|
-
color: var(--textbox-focus-foreground-color, var(--color-foreground-secondary));
|
|
78
|
+
color: var(--textbox-focus-foreground-color, var(--color-foreground-on-secondary));
|
|
79
79
|
outline: 0;
|
|
80
80
|
}
|
|
81
81
|
input.textbox__control::-webkit-input-placeholder,
|
|
82
82
|
textarea.textbox__control::-webkit-input-placeholder {
|
|
83
|
-
color: var(--textbox-placeholder-color, var(--color-foreground-secondary));
|
|
83
|
+
color: var(--textbox-placeholder-color, var(--color-foreground-on-secondary));
|
|
84
84
|
font-weight: 200;
|
|
85
85
|
}
|
|
86
86
|
input.textbox__control:-ms-input-placeholder,
|
|
87
87
|
textarea.textbox__control:-ms-input-placeholder {
|
|
88
|
-
color: var(--textbox-placeholder-color, var(--color-foreground-secondary));
|
|
88
|
+
color: var(--textbox-placeholder-color, var(--color-foreground-on-secondary));
|
|
89
89
|
font-weight: 200;
|
|
90
90
|
}
|
|
91
91
|
input.textbox__control::-ms-input-placeholder,
|
package/package.json
CHANGED
|
@@ -14,21 +14,25 @@ div.floating-label {
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
label.floating-label__label {
|
|
17
|
+
.background-color-token(floating-label-background-color, color-background-secondary);
|
|
17
18
|
.color-token(floating-label-color, color-foreground-primary);
|
|
18
19
|
display: inline-block;
|
|
19
20
|
left: 16px;
|
|
20
21
|
overflow: hidden;
|
|
22
|
+
padding-top: 3px;
|
|
21
23
|
pointer-events: none;
|
|
22
24
|
position: absolute;
|
|
23
25
|
text-overflow: ellipsis;
|
|
26
|
+
top: -3px;
|
|
24
27
|
transform: scale(0.75, 0.75) translate(0, 2px);
|
|
25
28
|
transform-origin: left;
|
|
26
29
|
white-space: nowrap;
|
|
27
|
-
width: calc(100% -
|
|
30
|
+
width: calc(100% - 40px);
|
|
28
31
|
z-index: 1;
|
|
29
32
|
}
|
|
30
33
|
|
|
31
34
|
label.floating-label__label--focus {
|
|
35
|
+
.background-color-token(floating-label-focus-background-color, color-background-primary);
|
|
32
36
|
color: var(--color-background-inverse);
|
|
33
37
|
}
|
|
34
38
|
|
|
@@ -51,11 +55,14 @@ label.floating-label__label--animate {
|
|
|
51
55
|
}
|
|
52
56
|
|
|
53
57
|
label.floating-label__label--disabled {
|
|
58
|
+
.background-color-token(floating-label-disabled-background-color, color-background-secondary);
|
|
54
59
|
.color-token(floating-label-disabled-color, color-foreground-disabled);
|
|
55
60
|
}
|
|
56
61
|
|
|
57
62
|
label.floating-label__label--invalid {
|
|
58
63
|
.color-token(floating-label-invalid-color, color-foreground-attention);
|
|
64
|
+
|
|
65
|
+
background-color: var(--color-red-1);
|
|
59
66
|
}
|
|
60
67
|
|
|
61
68
|
.floating-label .textbox__control,
|
|
@@ -72,12 +79,6 @@ label.floating-label__label--invalid {
|
|
|
72
79
|
padding-top: 23px;
|
|
73
80
|
}
|
|
74
81
|
|
|
75
|
-
// For select floating label
|
|
76
|
-
.floating-label .select {
|
|
77
|
-
// Reduce space given for floating-label so that it doesn't cover the chevron
|
|
78
|
-
margin-right: -24px;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
82
|
.floating-label .select select {
|
|
82
83
|
line-height: 52px;
|
|
83
84
|
}
|
|
@@ -85,8 +86,3 @@ label.floating-label__label--invalid {
|
|
|
85
86
|
.floating-label .select--large select {
|
|
86
87
|
line-height: 60px;
|
|
87
88
|
}
|
|
88
|
-
|
|
89
|
-
[dir="rtl"] .floating-label .select {
|
|
90
|
-
margin-left: -24px;
|
|
91
|
-
margin-right: 0;
|
|
92
|
-
}
|
|
@@ -108,6 +108,38 @@ export const selectInline = () => `
|
|
|
108
108
|
</span>
|
|
109
109
|
`;
|
|
110
110
|
|
|
111
|
+
export const selectInlineDoubled = () => `
|
|
112
|
+
<span class="floating-label">
|
|
113
|
+
<label class="floating-label__label floating-label__label--inline">Select Option long text with ellipsis</label>
|
|
114
|
+
<span class="select">
|
|
115
|
+
<select aria-label="Select demo" name="options">
|
|
116
|
+
<option value=""></option>
|
|
117
|
+
<option value="item1">Pick Option 1 (default)</option>
|
|
118
|
+
<option value="item2">Pick Option 2</option>
|
|
119
|
+
<option value="item3">Pick Option 3</option>
|
|
120
|
+
</select>
|
|
121
|
+
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
122
|
+
<use xlink:href="#icon-dropdown"></use>
|
|
123
|
+
</svg>
|
|
124
|
+
</span>
|
|
125
|
+
</span>
|
|
126
|
+
<span class="floating-label">
|
|
127
|
+
<label class="floating-label__label floating-label__label--inline">Select Option long text</label>
|
|
128
|
+
<span class="select">
|
|
129
|
+
<select aria-label="Select demo" name="options">
|
|
130
|
+
<option value=""></option>
|
|
131
|
+
<option value="item1">Pick Option 1 (default)</option>
|
|
132
|
+
<option value="item2">Pick Option 2</option>
|
|
133
|
+
<option value="item3">Pick Option 3</option>
|
|
134
|
+
</select>
|
|
135
|
+
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
136
|
+
<use xlink:href="#icon-dropdown"></use>
|
|
137
|
+
</svg>
|
|
138
|
+
</span>
|
|
139
|
+
</span>
|
|
140
|
+
|
|
141
|
+
`;
|
|
142
|
+
|
|
111
143
|
export const RTLSelectInline = () => `
|
|
112
144
|
<div dir="rtl">
|
|
113
145
|
<span class="floating-label">
|
|
@@ -126,3 +158,12 @@ export const RTLSelectInline = () => `
|
|
|
126
158
|
</span>
|
|
127
159
|
</div>
|
|
128
160
|
`;
|
|
161
|
+
|
|
162
|
+
export const TextArea = () => `
|
|
163
|
+
<span class="floating-label">
|
|
164
|
+
<label class="floating-label__label" for="first-name">Enter list of users</label>
|
|
165
|
+
<span class="textbox">
|
|
166
|
+
<textarea aria-label="Textbox demo" class="textbox__control"></textarea>
|
|
167
|
+
</span>
|
|
168
|
+
</span>
|
|
169
|
+
`;
|
|
@@ -37,12 +37,17 @@
|
|
|
37
37
|
.dialog-footer-content();
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
button.icon-btn.fullscreen-dialog__close {
|
|
41
|
+
height: 32px;
|
|
42
|
+
min-width: 32px;
|
|
43
|
+
width: 32px;
|
|
44
|
+
}
|
|
45
|
+
|
|
40
46
|
// inherits from .icon-btn
|
|
41
47
|
button.fullscreen-dialog__close,
|
|
42
48
|
button.fullscreen-dialog__back {
|
|
43
49
|
align-self: center;
|
|
44
50
|
border: 0;
|
|
45
|
-
outline-offset: -8px;
|
|
46
51
|
padding: 0;
|
|
47
52
|
position: relative;
|
|
48
53
|
z-index: 1;
|
|
@@ -62,7 +67,8 @@ button.fullscreen-dialog__back {
|
|
|
62
67
|
transition: opacity 0.16s ease-out;
|
|
63
68
|
}
|
|
64
69
|
|
|
65
|
-
.fullscreen-dialog__window--slide
|
|
70
|
+
.fullscreen-dialog__window--slide,
|
|
71
|
+
.fullscreen-dialog__window--slide-end {
|
|
66
72
|
transition: transform 0.32s ease-out;
|
|
67
73
|
}
|
|
68
74
|
}
|
|
@@ -85,6 +91,10 @@ button.fullscreen-dialog__back {
|
|
|
85
91
|
.fullscreen-dialog__window--slide {
|
|
86
92
|
transform: translateY(100%);
|
|
87
93
|
}
|
|
94
|
+
|
|
95
|
+
.fullscreen-dialog__window--slide-end {
|
|
96
|
+
transform: translateX(100%);
|
|
97
|
+
}
|
|
88
98
|
}
|
|
89
99
|
|
|
90
100
|
.fullscreen-dialog--show,
|
|
@@ -105,18 +115,8 @@ button.fullscreen-dialog__back {
|
|
|
105
115
|
.fullscreen-dialog__window--slide {
|
|
106
116
|
transform: translateX(0);
|
|
107
117
|
}
|
|
108
|
-
}
|
|
109
118
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
.dialog-header-content-large();
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.fullscreen-dialog__main {
|
|
116
|
-
.dialog-body-content-large();
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.fullscreen-dialog__footer {
|
|
120
|
-
.dialog-footer-content-large();
|
|
119
|
+
.fullscreen-dialog__window--slide-end {
|
|
120
|
+
transform: translateX(0);
|
|
121
121
|
}
|
|
122
122
|
}
|
|
@@ -4,12 +4,35 @@ export const closeButton = () => `
|
|
|
4
4
|
<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
|
|
5
5
|
<div class="fullscreen-dialog__window">
|
|
6
6
|
<div class="fullscreen-dialog__header">
|
|
7
|
+
<h2 id="fullscreen-dialog-title">Dialog Full</h2>
|
|
7
8
|
<button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
|
|
8
|
-
<svg class="icon icon--close" aria-hidden="true">
|
|
9
|
-
<use xlink:href="#icon-close"></use>
|
|
9
|
+
<svg class="icon icon--close-small" aria-hidden="true">
|
|
10
|
+
<use xlink:href="#icon-close-small"></use>
|
|
10
11
|
</svg>
|
|
11
12
|
</button>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="fullscreen-dialog__main">
|
|
15
|
+
<h3>Heading</h3>
|
|
16
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
17
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
18
|
+
<h3>Heading</h3>
|
|
19
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
20
|
+
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
`;
|
|
25
|
+
|
|
26
|
+
export const withFooter = () => `
|
|
27
|
+
<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
|
|
28
|
+
<div class="fullscreen-dialog__window">
|
|
29
|
+
<div class="fullscreen-dialog__header">
|
|
12
30
|
<h2 id="fullscreen-dialog-title">Dialog Full</h2>
|
|
31
|
+
<button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
|
|
32
|
+
<svg class="icon icon--close-small" aria-hidden="true">
|
|
33
|
+
<use xlink:href="#icon-close-small"></use>
|
|
34
|
+
</svg>
|
|
35
|
+
</button>
|
|
13
36
|
</div>
|
|
14
37
|
<div class="fullscreen-dialog__main">
|
|
15
38
|
<h3>Heading</h3>
|
|
@@ -19,6 +42,10 @@ export const closeButton = () => `
|
|
|
19
42
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
|
|
20
43
|
<p><a href="http://www.ebay.com">www.ebay.com</a></p>
|
|
21
44
|
</div>
|
|
45
|
+
<div class="fullscreen-dialog__footer">
|
|
46
|
+
<button class="btn btn--primary">Submit</button>
|
|
47
|
+
<button class="btn">Cancel</button>
|
|
48
|
+
</div>
|
|
22
49
|
</div>
|
|
23
50
|
</div>
|
|
24
51
|
`;
|
|
@@ -28,12 +55,12 @@ export const RTL = () => `
|
|
|
28
55
|
<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
|
|
29
56
|
<div class="fullscreen-dialog__window">
|
|
30
57
|
<div class="fullscreen-dialog__header">
|
|
58
|
+
<h2 id="fullscreen-dialog-title">Dialog Full</h2>
|
|
31
59
|
<button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
|
|
32
|
-
<svg class="icon icon--close" aria-hidden="true">
|
|
33
|
-
<use xlink:href="#icon-close"></use>
|
|
60
|
+
<svg class="icon icon--close-small" aria-hidden="true">
|
|
61
|
+
<use xlink:href="#icon-close-small"></use>
|
|
34
62
|
</svg>
|
|
35
63
|
</button>
|
|
36
|
-
<h2 id="fullscreen-dialog-title">Dialog Full</h2>
|
|
37
64
|
</div>
|
|
38
65
|
<div class="fullscreen-dialog__main">
|
|
39
66
|
<h3>Heading</h3>
|
|
@@ -52,12 +79,12 @@ export const backButton = () => `
|
|
|
52
79
|
<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
|
|
53
80
|
<div class="fullscreen-dialog__window">
|
|
54
81
|
<div class="fullscreen-dialog__header">
|
|
82
|
+
<h2 id="fullscreen-dialog-title">Fullscreen Dialog</h2>
|
|
55
83
|
<button class="icon-btn fullscreen-dialog__back" type="button" aria-label="Back">
|
|
56
84
|
<svg class="icon icon--back" aria-hidden="true">
|
|
57
85
|
<use xlink:href="#icon-back"></use>
|
|
58
86
|
</svg>
|
|
59
87
|
</button>
|
|
60
|
-
<h2 id="fullscreen-dialog-title">Fullscreen Dialog</h2>
|
|
61
88
|
</div>
|
|
62
89
|
<div class="fullscreen-dialog__main">
|
|
63
90
|
<h3>Heading</h3>
|
|
@@ -75,11 +102,6 @@ export const secondaryButton = () => `
|
|
|
75
102
|
<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
|
|
76
103
|
<div class="fullscreen-dialog__window">
|
|
77
104
|
<div class="fullscreen-dialog__header">
|
|
78
|
-
<button class="icon-btn fullscreen-dialog__back" type="button" aria-label="Back">
|
|
79
|
-
<svg class="icon icon--back" aria-hidden="true">
|
|
80
|
-
<use xlink:href="#icon-back"></use>
|
|
81
|
-
</svg>
|
|
82
|
-
</button>
|
|
83
105
|
<h2 id="fullscreen-dialog-title">Fullscreen Dialog</h2>
|
|
84
106
|
<button class="fake-link fullscreen-dialog__close" type="button">Reset</button>
|
|
85
107
|
</div>
|