@spectrum-web-components/progress-bar 0.8.8-react.49 → 0.9.0
Sign up to get free protection for your applications and to get access to all the features.
- package/custom-elements.json +20 -3
- package/package.json +5 -5
- package/src/ProgressBar.d.ts +1 -0
- package/src/ProgressBar.dev.js +3 -0
- package/src/ProgressBar.dev.js.map +2 -2
- package/src/ProgressBar.js +5 -5
- package/src/ProgressBar.js.map +2 -2
- package/src/progress-bar.css.dev.js +119 -87
- package/src/progress-bar.css.dev.js.map +2 -2
- package/src/progress-bar.css.js +119 -87
- package/src/progress-bar.css.js.map +2 -2
- package/src/spectrum-config.js +14 -0
- package/src/spectrum-progress-bar.css.dev.js +119 -87
- package/src/spectrum-progress-bar.css.dev.js.map +2 -2
- package/src/spectrum-progress-bar.css.js +119 -87
- package/src/spectrum-progress-bar.css.js.map +2 -2
- package/stories/progress-bar.stories.js +10 -10
- package/stories/progress-bar.stories.js.map +2 -2
package/src/progress-bar.css.js
CHANGED
|
@@ -1,92 +1,124 @@
|
|
|
1
1
|
"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
|
|
2
|
-
:host
|
|
3
|
-
--spectrum-
|
|
4
|
-
);--spectrum-progressbar-
|
|
5
|
-
--spectrum-
|
|
6
|
-
);--spectrum-progressbar-indeterminate-
|
|
7
|
-
--spectrum-
|
|
8
|
-
);--spectrum-progressbar-
|
|
9
|
-
--spectrum-
|
|
10
|
-
);--spectrum-progressbar-
|
|
11
|
-
--spectrum-
|
|
12
|
-
);--spectrum-progressbar-
|
|
13
|
-
--spectrum-
|
|
14
|
-
)
|
|
15
|
-
--spectrum-
|
|
16
|
-
);--spectrum-progressbar-
|
|
17
|
-
--spectrum-
|
|
18
|
-
);--spectrum-progressbar-
|
|
19
|
-
--spectrum-
|
|
20
|
-
);--spectrum-progressbar-value-
|
|
21
|
-
--spectrum-
|
|
22
|
-
);--spectrum-progressbar-
|
|
23
|
-
--spectrum-progressbar-
|
|
24
|
-
);--spectrum-progressbar-
|
|
25
|
-
--spectrum-
|
|
26
|
-
);--spectrum-
|
|
27
|
-
--spectrum-
|
|
28
|
-
)}:host([size=
|
|
29
|
-
--spectrum-progressbar-
|
|
30
|
-
);--spectrum-progressbar-
|
|
31
|
-
--spectrum-
|
|
32
|
-
);--spectrum-progressbar-
|
|
33
|
-
--spectrum-
|
|
34
|
-
)
|
|
35
|
-
--spectrum-progressbar-
|
|
36
|
-
);--spectrum-progressbar-
|
|
37
|
-
--spectrum-
|
|
38
|
-
);--spectrum-progressbar-
|
|
39
|
-
--spectrum-
|
|
40
|
-
)}:host([size=xl]){--spectrum-progressbar-
|
|
41
|
-
--spectrum-progressbar-
|
|
42
|
-
);--spectrum-progressbar-
|
|
43
|
-
--spectrum-
|
|
44
|
-
);--spectrum-progressbar-
|
|
45
|
-
--spectrum-
|
|
46
|
-
);--
|
|
47
|
-
--
|
|
48
|
-
)
|
|
49
|
-
--
|
|
50
|
-
)
|
|
51
|
-
--
|
|
52
|
-
)
|
|
53
|
-
--spectrum-progressbar-
|
|
54
|
-
)}.label
|
|
55
|
-
--spectrum-
|
|
56
|
-
)
|
|
57
|
-
--spectrum-
|
|
58
|
-
)
|
|
59
|
-
--spectrum-progressbar-
|
|
60
|
-
)
|
|
61
|
-
--spectrum-
|
|
62
|
-
)}:
|
|
63
|
-
--spectrum-
|
|
64
|
-
)}
|
|
65
|
-
--spectrum-
|
|
66
|
-
)}
|
|
67
|
-
--
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
);
|
|
71
|
-
--
|
|
72
|
-
);
|
|
73
|
-
--
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
)}:host([over-background]) .fill{background:var(
|
|
77
|
-
--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)
|
|
78
|
-
)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(
|
|
79
|
-
--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)
|
|
80
|
-
)}:host([over-background]) .track{background-color:var(
|
|
81
|
-
--spectrum-progressbar-m-overbackground-track-color,var(--spectrum-alias-track-color-overbackground)
|
|
82
|
-
)}:host([positive]) .fill{background:var(
|
|
83
|
-
--spectrum-meter-m-positive-track-fill-color,var(--spectrum-semantic-positive-status-color)
|
|
2
|
+
:host{--spectrum-progressbar-animation-ease-in-out-indeterminate:var(
|
|
3
|
+
--spectrum-animation-ease-in-out
|
|
4
|
+
);--spectrum-progressbar-animation-duration-indeterminate:var(
|
|
5
|
+
--spectrum-animation-duration-2000
|
|
6
|
+
);--spectrum-progressbar-corner-radius:var(--spectrum-corner-radius-100);--spectrum-progressbar-fill-size-indeterminate:70%;--spectrum-progressbar-size-2400:192px;--spectrum-progressbar-size-2500:200px;--spectrum-progressbar-size-2800:224px;--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-progressbar-min-size:var(--spectrum-progress-bar-minimum-width);--spectrum-progressbar-max-size:var(--spectrum-progress-bar-maximum-width);--spectrum-progressbar-thickness:var(
|
|
7
|
+
--spectrum-progress-bar-thickness-medium
|
|
8
|
+
);--spectrum-progressbar-line-height:var(--spectrum-line-height-100);--spectrum-progressbar-spacing-label-to-progressbar:var(
|
|
9
|
+
--spectrum-spacing-75
|
|
10
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
11
|
+
--spectrum-component-top-to-text-100
|
|
12
|
+
);--spectrum-progressbar-spacing-label-to-text:var(--spectrum-spacing-200);--spectrum-progressbar-text-color:var(
|
|
13
|
+
--spectrum-neutral-content-color-default
|
|
14
|
+
);--spectrum-progressbar-track-color:var(--spectrum-gray-300);--spectrum-progressbar-fill-color:var(--spectrum-accent-color-900);--spectrum-progressbar-fill-color-positive:var(
|
|
15
|
+
--spectrum-positive-visual-color
|
|
16
|
+
);--spectrum-progressbar-fill-color-notice:var(
|
|
17
|
+
--spectrum-notice-visual-color
|
|
18
|
+
);--spectrum-progressbar-fill-color-negative:var(
|
|
19
|
+
--spectrum-negative-visual-color
|
|
20
|
+
);--spectrum-progressbar-label-and-value-white:var(--spectrum-white);--spectrum-progressbar-track-color-white:var(
|
|
21
|
+
--spectrum-transparent-white-300
|
|
22
|
+
);--spectrum-progressbar-fill-color-white:var(--spectrum-white)}:host([size=s]){--spectrum-progressbar-size-default:var(
|
|
23
|
+
--spectrum-progressbar-size-2400
|
|
24
|
+
);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(
|
|
25
|
+
--spectrum-progress-bar-thickness-small
|
|
26
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
27
|
+
--spectrum-component-top-to-text-75
|
|
28
|
+
)}:host([size=m]){--spectrum-progressbar-size-default:var(
|
|
29
|
+
--spectrum-progressbar-size-2400
|
|
30
|
+
);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(
|
|
31
|
+
--spectrum-progress-bar-thickness-large
|
|
32
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
33
|
+
--spectrum-component-top-to-text-75
|
|
34
|
+
)}:host([size=l]){--spectrum-progressbar-size-default:var(
|
|
35
|
+
--spectrum-progressbar-size-2500
|
|
36
|
+
);--spectrum-progressbar-font-size:var(--spectrum-font-size-100);--spectrum-progressbar-thickness:var(
|
|
37
|
+
--spectrum-progress-bar-thickness-large
|
|
38
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
39
|
+
--spectrum-component-top-to-text-200
|
|
40
|
+
)}:host([size=xl]){--spectrum-progressbar-size-default:var(
|
|
41
|
+
--spectrum-progressbar-size-2800
|
|
42
|
+
);--spectrum-progressbar-font-size:var(--spectrum-font-size-200);--spectrum-progressbar-thickness:var(
|
|
43
|
+
--spectrum-progress-bar-thickness-extra-large
|
|
44
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
45
|
+
--spectrum-component-top-to-text-300
|
|
46
|
+
)}@media (forced-colors:active){.track{--highcontrast-progressbar-fill-color:ButtonText;--highcontrast-progressbar-track-color:ButtonFace;border:1px solid ButtonText;forced-color-adjust:none}}:host{align-items:center;display:inline-flex;flex-flow:row wrap;font-size:var(
|
|
47
|
+
--mod-progressbar-font-size,var(--spectrum-progressbar-font-size)
|
|
48
|
+
);inline-size:var(
|
|
49
|
+
--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)
|
|
50
|
+
);justify-content:space-between;max-inline-size:var(
|
|
51
|
+
--mod-progressbar-max-size,var(--spectrum-progressbar-max-size)
|
|
52
|
+
);min-inline-size:var(
|
|
53
|
+
--mod-progressbar-min-size,var(--spectrum-progressbar-min-size)
|
|
54
|
+
);position:relative;vertical-align:top}.label,.percentage{color:var(
|
|
55
|
+
--mod-progressbar-text-color,var(--spectrum-progressbar-text-color)
|
|
56
|
+
);line-height:var(
|
|
57
|
+
--mod-progressbar-line-height,var(--spectrum-progressbar-line-height)
|
|
58
|
+
);margin-block-end:var(
|
|
59
|
+
--mod-progressbar-spacing-label-to-progressbar,var(--spectrum-progressbar-spacing-label-to-progressbar)
|
|
60
|
+
);margin-block-start:var(
|
|
61
|
+
--mod-progressbar-spacing-top-to-text,var(--spectrum-progressbar-spacing-top-to-text)
|
|
62
|
+
);text-align:start}.label:lang(ja),.label:lang(ko),.label:lang(zh),.percentage:lang(ja),.percentage:lang(ko),.percentage:lang(zh){line-height:var(
|
|
63
|
+
--mod-progressbar-line-height-cjk,var(--spectrum-progressbar-line-height-cjk)
|
|
64
|
+
)}.label{flex:1 1 0%}.percentage{align-self:flex-start;margin-inline-start:var(
|
|
65
|
+
--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)
|
|
66
|
+
)}.track{background:var(
|
|
67
|
+
--highcontrast-progressbar-track-color,var(
|
|
68
|
+
--mod-progressbar-track-color,var(--spectrum-progressbar-track-color)
|
|
69
|
+
)
|
|
70
|
+
);block-size:var(
|
|
71
|
+
--mod-progressbar-thickness,var(--spectrum-progressbar-thickness)
|
|
72
|
+
);border-radius:var(--spectrum-progressbar-corner-radius);inline-size:100%;overflow:hidden}:host([positive]) .fill{background:var(
|
|
73
|
+
--highcontrast-progressbar-fill-color,var(
|
|
74
|
+
--mod-progressbar-fill-color-positive,var(--spectrum-progressbar-fill-color-positive)
|
|
75
|
+
)
|
|
84
76
|
)}:host(.is-notice) .fill{background:var(
|
|
85
|
-
--
|
|
77
|
+
--highcontrast-progressbar-fill-color,var(
|
|
78
|
+
--mod-progressbar-fill-color-notice,var(--spectrum-progressbar-fill-color-notice)
|
|
79
|
+
)
|
|
86
80
|
)}:host(.is-negative) .fill{background:var(
|
|
87
|
-
--
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
)}
|
|
81
|
+
--highcontrast-progressbar-fill-color,var(
|
|
82
|
+
--mod-progressbar-fill-color-negative,var(--spectrum-progressbar-fill-color-negative)
|
|
83
|
+
)
|
|
84
|
+
)}.fill{background:var(
|
|
85
|
+
--highcontrast-progressbar-fill-color,var(
|
|
86
|
+
--mod-progressbar-fill-color,var(--spectrum-progressbar-fill-color)
|
|
87
|
+
)
|
|
88
|
+
);block-size:var(
|
|
89
|
+
--mod-progressbar-thickness,var(--spectrum-progressbar-thickness)
|
|
90
|
+
);border:none;transition:width 1s}:host([indeterminate]) .fill{animation-timing-function:var(
|
|
91
|
+
--mod-progressbar-animation-ease-in-out-indeterminate,var(--spectrum-progressbar-animation-ease-in-out-indeterminate)
|
|
92
|
+
);inline-size:var(
|
|
93
|
+
--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate)
|
|
94
|
+
);position:relative;will-change:transform}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between}:host([side-label]) .track{flex:1 1 var(
|
|
95
|
+
--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)
|
|
96
|
+
)}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(
|
|
97
|
+
--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)
|
|
98
|
+
)}:host([side-label]) .percentage{margin-block-end:0;margin-inline-start:var(
|
|
99
|
+
--mod-spacing-progressbar-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)
|
|
100
|
+
);order:3;text-align:end}:host([static=white]) .fill{background:var(
|
|
101
|
+
--mod-progressbar-fill-color-white,var(--spectrum-progressbar-fill-color-white)
|
|
102
|
+
);color:var(
|
|
103
|
+
--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white)
|
|
104
|
+
)}:host([static=white]) .label,:host([static=white]) .percentage{color:var(
|
|
105
|
+
--mode-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white)
|
|
106
|
+
)}:host([static=white]) .track{background-color:var(
|
|
107
|
+
--spectrum-progressbar-track-color-white
|
|
108
|
+
)}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(
|
|
109
|
+
--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate)
|
|
110
|
+
) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(
|
|
111
|
+
--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate)
|
|
112
|
+
) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(
|
|
113
|
+
--mod-progressbar-fill-size-indeterminate,
|
|
114
|
+
var(--spectrum-progressbar-fill-size-indeterminate)
|
|
115
|
+
)*-1))}to{transform:translate(var(
|
|
116
|
+
--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)
|
|
117
|
+
))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(
|
|
118
|
+
--mod-progressbar-size-default,var(--spectrum-progressbar-fill-size-indeterminate)
|
|
119
|
+
))}to{transform:translate(calc(var(
|
|
120
|
+
--mod-progressbar-size-default,
|
|
121
|
+
var(--spectrum-progressbar-size-default)
|
|
122
|
+
)*-1))}}.fill{transform-origin:left;width:100%}:host([dir=rtl]) .fill{transform-origin:right}
|
|
91
123
|
`;export default e;
|
|
92
124
|
//# sourceMappingURL=progress-bar.css.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["progress-bar.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-progressbar-animation-ease-in-out-indeterminate:var(\n--spectrum-animation-ease-in-out\n);--spectrum-progressbar-animation-duration-indeterminate:var(\n--spectrum-animation-duration-2000\n);--spectrum-progressbar-corner-radius:var(--spectrum-corner-radius-100);--spectrum-progressbar-fill-size-indeterminate:70%;--spectrum-progressbar-size-2400:192px;--spectrum-progressbar-size-2500:200px;--spectrum-progressbar-size-2800:224px;--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-progressbar-min-size:var(--spectrum-progress-bar-minimum-width);--spectrum-progressbar-max-size:var(--spectrum-progress-bar-maximum-width);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-medium\n);--spectrum-progressbar-line-height:var(--spectrum-line-height-100);--spectrum-progressbar-spacing-label-to-progressbar:var(\n--spectrum-spacing-75\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-progressbar-spacing-label-to-text:var(--spectrum-spacing-200);--spectrum-progressbar-text-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-progressbar-track-color:var(--spectrum-gray-300);--spectrum-progressbar-fill-color:var(--spectrum-accent-color-900);--spectrum-progressbar-fill-color-positive:var(\n--spectrum-positive-visual-color\n);--spectrum-progressbar-fill-color-notice:var(\n--spectrum-notice-visual-color\n);--spectrum-progressbar-fill-color-negative:var(\n--spectrum-negative-visual-color\n);--spectrum-progressbar-label-and-value-white:var(--spectrum-white);--spectrum-progressbar-track-color-white:var(\n--spectrum-transparent-white-300\n);--spectrum-progressbar-fill-color-white:var(--spectrum-white)}:host([size=s]){--spectrum-progressbar-size-default:var(\n--spectrum-progressbar-size-2400\n);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-small\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-75\n)}:host([size=m]){--spectrum-progressbar-size-default:var(\n--spectrum-progressbar-size-2400\n);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-large\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-75\n)}:host([size=l]){--spectrum-progressbar-size-default:var(\n--spectrum-progressbar-size-2500\n);--spectrum-progressbar-font-size:var(--spectrum-font-size-100);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-large\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-200\n)}:host([size=xl]){--spectrum-progressbar-size-default:var(\n--spectrum-progressbar-size-2800\n);--spectrum-progressbar-font-size:var(--spectrum-font-size-200);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-extra-large\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-300\n)}@media (forced-colors:active){.track{--highcontrast-progressbar-fill-color:ButtonText;--highcontrast-progressbar-track-color:ButtonFace;border:1px solid ButtonText;forced-color-adjust:none}}:host{align-items:center;display:inline-flex;flex-flow:row wrap;font-size:var(\n--mod-progressbar-font-size,var(--spectrum-progressbar-font-size)\n);inline-size:var(\n--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)\n);justify-content:space-between;max-inline-size:var(\n--mod-progressbar-max-size,var(--spectrum-progressbar-max-size)\n);min-inline-size:var(\n--mod-progressbar-min-size,var(--spectrum-progressbar-min-size)\n);position:relative;vertical-align:top}.label,.percentage{color:var(\n--mod-progressbar-text-color,var(--spectrum-progressbar-text-color)\n);line-height:var(\n--mod-progressbar-line-height,var(--spectrum-progressbar-line-height)\n);margin-block-end:var(\n--mod-progressbar-spacing-label-to-progressbar,var(--spectrum-progressbar-spacing-label-to-progressbar)\n);margin-block-start:var(\n--mod-progressbar-spacing-top-to-text,var(--spectrum-progressbar-spacing-top-to-text)\n);text-align:start}.label:lang(ja),.label:lang(ko),.label:lang(zh),.percentage:lang(ja),.percentage:lang(ko),.percentage:lang(zh){line-height:var(\n--mod-progressbar-line-height-cjk,var(--spectrum-progressbar-line-height-cjk)\n)}.label{flex:1 1 0%}.percentage{align-self:flex-start;margin-inline-start:var(\n--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)\n)}.track{background:var(\n--highcontrast-progressbar-track-color,var(\n--mod-progressbar-track-color,var(--spectrum-progressbar-track-color)\n)\n);block-size:var(\n--mod-progressbar-thickness,var(--spectrum-progressbar-thickness)\n);border-radius:var(--spectrum-progressbar-corner-radius);inline-size:100%;overflow:hidden}:host([positive]) .fill{background:var(\n--highcontrast-progressbar-fill-color,var(\n--mod-progressbar-fill-color-positive,var(--spectrum-progressbar-fill-color-positive)\n)\n)}:host(.is-notice) .fill{background:var(\n--highcontrast-progressbar-fill-color,var(\n--mod-progressbar-fill-color-notice,var(--spectrum-progressbar-fill-color-notice)\n)\n)}:host(.is-negative) .fill{background:var(\n--highcontrast-progressbar-fill-color,var(\n--mod-progressbar-fill-color-negative,var(--spectrum-progressbar-fill-color-negative)\n)\n)}.fill{background:var(\n--highcontrast-progressbar-fill-color,var(\n--mod-progressbar-fill-color,var(--spectrum-progressbar-fill-color)\n)\n);block-size:var(\n--mod-progressbar-thickness,var(--spectrum-progressbar-thickness)\n);border:none;transition:width 1s}:host([indeterminate]) .fill{animation-timing-function:var(\n--mod-progressbar-animation-ease-in-out-indeterminate,var(--spectrum-progressbar-animation-ease-in-out-indeterminate)\n);inline-size:var(\n--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate)\n);position:relative;will-change:transform}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between}:host([side-label]) .track{flex:1 1 var(\n--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)\n)}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(\n--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)\n)}:host([side-label]) .percentage{margin-block-end:0;margin-inline-start:var(\n--mod-spacing-progressbar-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)\n);order:3;text-align:end}:host([static=white]) .fill{background:var(\n--mod-progressbar-fill-color-white,var(--spectrum-progressbar-fill-color-white)\n);color:var(\n--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white)\n)}:host([static=white]) .label,:host([static=white]) .percentage{color:var(\n--mode-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white)\n)}:host([static=white]) .track{background-color:var(\n--spectrum-progressbar-track-color-white\n)}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(\n--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate)\n) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(\n--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate)\n) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(\n--mod-progressbar-fill-size-indeterminate,\nvar(--spectrum-progressbar-fill-size-indeterminate)\n)*-1))}to{transform:translate(var(\n--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)\n))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(\n--mod-progressbar-size-default,var(--spectrum-progressbar-fill-size-indeterminate)\n))}to{transform:translate(calc(var(\n--mod-progressbar-size-default,\nvar(--spectrum-progressbar-size-default)\n)*-1))}}.fill{transform-origin:left;width:100%}:host([dir=rtl]) .fill{transform-origin:right}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2Hf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/spectrum-config.js
CHANGED
|
@@ -47,6 +47,20 @@ const config = {
|
|
|
47
47
|
},
|
|
48
48
|
],
|
|
49
49
|
},
|
|
50
|
+
{
|
|
51
|
+
type: 'enum',
|
|
52
|
+
name: 'static',
|
|
53
|
+
values: [
|
|
54
|
+
{
|
|
55
|
+
name: 'black',
|
|
56
|
+
selector: '.spectrum-ProgressBar--staticBlack',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: 'white',
|
|
60
|
+
selector: '.spectrum-ProgressBar--staticWhite',
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
50
64
|
{
|
|
51
65
|
type: 'boolean',
|
|
52
66
|
selector: '.spectrum-ProgressBar--indeterminate',
|
|
@@ -1,95 +1,127 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import { css } from "@spectrum-web-components/base";
|
|
3
3
|
const styles = css`
|
|
4
|
-
:host
|
|
5
|
-
--spectrum-
|
|
6
|
-
);--spectrum-progressbar-
|
|
7
|
-
--spectrum-
|
|
8
|
-
);--spectrum-progressbar-indeterminate-
|
|
9
|
-
--spectrum-
|
|
10
|
-
);--spectrum-progressbar-
|
|
11
|
-
--spectrum-
|
|
12
|
-
);--spectrum-progressbar-
|
|
13
|
-
--spectrum-
|
|
14
|
-
);--spectrum-progressbar-
|
|
15
|
-
--spectrum-
|
|
16
|
-
)
|
|
17
|
-
--spectrum-
|
|
18
|
-
);--spectrum-progressbar-
|
|
19
|
-
--spectrum-
|
|
20
|
-
);--spectrum-progressbar-
|
|
21
|
-
--spectrum-
|
|
22
|
-
);--spectrum-progressbar-value-
|
|
23
|
-
--spectrum-
|
|
24
|
-
);--spectrum-progressbar-
|
|
25
|
-
--spectrum-progressbar-
|
|
26
|
-
);--spectrum-progressbar-
|
|
27
|
-
--spectrum-
|
|
28
|
-
);--spectrum-
|
|
29
|
-
--spectrum-
|
|
30
|
-
)}:host([size=
|
|
31
|
-
--spectrum-progressbar-
|
|
32
|
-
);--spectrum-progressbar-
|
|
33
|
-
--spectrum-
|
|
34
|
-
);--spectrum-progressbar-
|
|
35
|
-
--spectrum-
|
|
36
|
-
)
|
|
37
|
-
--spectrum-progressbar-
|
|
38
|
-
);--spectrum-progressbar-
|
|
39
|
-
--spectrum-
|
|
40
|
-
);--spectrum-progressbar-
|
|
41
|
-
--spectrum-
|
|
42
|
-
)}:host([size=xl]){--spectrum-progressbar-
|
|
43
|
-
--spectrum-progressbar-
|
|
44
|
-
);--spectrum-progressbar-
|
|
45
|
-
--spectrum-
|
|
46
|
-
);--spectrum-progressbar-
|
|
47
|
-
--spectrum-
|
|
48
|
-
);--
|
|
49
|
-
--
|
|
50
|
-
)
|
|
51
|
-
--
|
|
52
|
-
)
|
|
53
|
-
--
|
|
54
|
-
)
|
|
55
|
-
--spectrum-progressbar-
|
|
56
|
-
)}.label
|
|
57
|
-
--spectrum-
|
|
58
|
-
)
|
|
59
|
-
--spectrum-
|
|
60
|
-
)
|
|
61
|
-
--spectrum-progressbar-
|
|
62
|
-
)
|
|
63
|
-
--spectrum-
|
|
64
|
-
)}:
|
|
65
|
-
--spectrum-
|
|
66
|
-
)}
|
|
67
|
-
--spectrum-
|
|
68
|
-
)}
|
|
69
|
-
--
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
);
|
|
73
|
-
--
|
|
74
|
-
);
|
|
75
|
-
--
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
)}:host([over-background]) .fill{background:var(
|
|
79
|
-
--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)
|
|
80
|
-
)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(
|
|
81
|
-
--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)
|
|
82
|
-
)}:host([over-background]) .track{background-color:var(
|
|
83
|
-
--spectrum-progressbar-m-overbackground-track-color,var(--spectrum-alias-track-color-overbackground)
|
|
84
|
-
)}:host([positive]) .fill{background:var(
|
|
85
|
-
--spectrum-meter-m-positive-track-fill-color,var(--spectrum-semantic-positive-status-color)
|
|
4
|
+
:host{--spectrum-progressbar-animation-ease-in-out-indeterminate:var(
|
|
5
|
+
--spectrum-animation-ease-in-out
|
|
6
|
+
);--spectrum-progressbar-animation-duration-indeterminate:var(
|
|
7
|
+
--spectrum-animation-duration-2000
|
|
8
|
+
);--spectrum-progressbar-corner-radius:var(--spectrum-corner-radius-100);--spectrum-progressbar-fill-size-indeterminate:70%;--spectrum-progressbar-size-2400:192px;--spectrum-progressbar-size-2500:200px;--spectrum-progressbar-size-2800:224px;--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-progressbar-min-size:var(--spectrum-progress-bar-minimum-width);--spectrum-progressbar-max-size:var(--spectrum-progress-bar-maximum-width);--spectrum-progressbar-thickness:var(
|
|
9
|
+
--spectrum-progress-bar-thickness-medium
|
|
10
|
+
);--spectrum-progressbar-line-height:var(--spectrum-line-height-100);--spectrum-progressbar-spacing-label-to-progressbar:var(
|
|
11
|
+
--spectrum-spacing-75
|
|
12
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
13
|
+
--spectrum-component-top-to-text-100
|
|
14
|
+
);--spectrum-progressbar-spacing-label-to-text:var(--spectrum-spacing-200);--spectrum-progressbar-text-color:var(
|
|
15
|
+
--spectrum-neutral-content-color-default
|
|
16
|
+
);--spectrum-progressbar-track-color:var(--spectrum-gray-300);--spectrum-progressbar-fill-color:var(--spectrum-accent-color-900);--spectrum-progressbar-fill-color-positive:var(
|
|
17
|
+
--spectrum-positive-visual-color
|
|
18
|
+
);--spectrum-progressbar-fill-color-notice:var(
|
|
19
|
+
--spectrum-notice-visual-color
|
|
20
|
+
);--spectrum-progressbar-fill-color-negative:var(
|
|
21
|
+
--spectrum-negative-visual-color
|
|
22
|
+
);--spectrum-progressbar-label-and-value-white:var(--spectrum-white);--spectrum-progressbar-track-color-white:var(
|
|
23
|
+
--spectrum-transparent-white-300
|
|
24
|
+
);--spectrum-progressbar-fill-color-white:var(--spectrum-white)}:host([size=s]){--spectrum-progressbar-size-default:var(
|
|
25
|
+
--spectrum-progressbar-size-2400
|
|
26
|
+
);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(
|
|
27
|
+
--spectrum-progress-bar-thickness-small
|
|
28
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
29
|
+
--spectrum-component-top-to-text-75
|
|
30
|
+
)}:host([size=m]){--spectrum-progressbar-size-default:var(
|
|
31
|
+
--spectrum-progressbar-size-2400
|
|
32
|
+
);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(
|
|
33
|
+
--spectrum-progress-bar-thickness-large
|
|
34
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
35
|
+
--spectrum-component-top-to-text-75
|
|
36
|
+
)}:host([size=l]){--spectrum-progressbar-size-default:var(
|
|
37
|
+
--spectrum-progressbar-size-2500
|
|
38
|
+
);--spectrum-progressbar-font-size:var(--spectrum-font-size-100);--spectrum-progressbar-thickness:var(
|
|
39
|
+
--spectrum-progress-bar-thickness-large
|
|
40
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
41
|
+
--spectrum-component-top-to-text-200
|
|
42
|
+
)}:host([size=xl]){--spectrum-progressbar-size-default:var(
|
|
43
|
+
--spectrum-progressbar-size-2800
|
|
44
|
+
);--spectrum-progressbar-font-size:var(--spectrum-font-size-200);--spectrum-progressbar-thickness:var(
|
|
45
|
+
--spectrum-progress-bar-thickness-extra-large
|
|
46
|
+
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
47
|
+
--spectrum-component-top-to-text-300
|
|
48
|
+
)}@media (forced-colors:active){.track{--highcontrast-progressbar-fill-color:ButtonText;--highcontrast-progressbar-track-color:ButtonFace;border:1px solid ButtonText;forced-color-adjust:none}}:host{align-items:center;display:inline-flex;flex-flow:row wrap;font-size:var(
|
|
49
|
+
--mod-progressbar-font-size,var(--spectrum-progressbar-font-size)
|
|
50
|
+
);inline-size:var(
|
|
51
|
+
--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)
|
|
52
|
+
);justify-content:space-between;max-inline-size:var(
|
|
53
|
+
--mod-progressbar-max-size,var(--spectrum-progressbar-max-size)
|
|
54
|
+
);min-inline-size:var(
|
|
55
|
+
--mod-progressbar-min-size,var(--spectrum-progressbar-min-size)
|
|
56
|
+
);position:relative;vertical-align:top}.label,.percentage{color:var(
|
|
57
|
+
--mod-progressbar-text-color,var(--spectrum-progressbar-text-color)
|
|
58
|
+
);line-height:var(
|
|
59
|
+
--mod-progressbar-line-height,var(--spectrum-progressbar-line-height)
|
|
60
|
+
);margin-block-end:var(
|
|
61
|
+
--mod-progressbar-spacing-label-to-progressbar,var(--spectrum-progressbar-spacing-label-to-progressbar)
|
|
62
|
+
);margin-block-start:var(
|
|
63
|
+
--mod-progressbar-spacing-top-to-text,var(--spectrum-progressbar-spacing-top-to-text)
|
|
64
|
+
);text-align:start}.label:lang(ja),.label:lang(ko),.label:lang(zh),.percentage:lang(ja),.percentage:lang(ko),.percentage:lang(zh){line-height:var(
|
|
65
|
+
--mod-progressbar-line-height-cjk,var(--spectrum-progressbar-line-height-cjk)
|
|
66
|
+
)}.label{flex:1 1 0%}.percentage{align-self:flex-start;margin-inline-start:var(
|
|
67
|
+
--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)
|
|
68
|
+
)}.track{background:var(
|
|
69
|
+
--highcontrast-progressbar-track-color,var(
|
|
70
|
+
--mod-progressbar-track-color,var(--spectrum-progressbar-track-color)
|
|
71
|
+
)
|
|
72
|
+
);block-size:var(
|
|
73
|
+
--mod-progressbar-thickness,var(--spectrum-progressbar-thickness)
|
|
74
|
+
);border-radius:var(--spectrum-progressbar-corner-radius);inline-size:100%;overflow:hidden}:host([positive]) .fill{background:var(
|
|
75
|
+
--highcontrast-progressbar-fill-color,var(
|
|
76
|
+
--mod-progressbar-fill-color-positive,var(--spectrum-progressbar-fill-color-positive)
|
|
77
|
+
)
|
|
86
78
|
)}:host(.is-notice) .fill{background:var(
|
|
87
|
-
--
|
|
79
|
+
--highcontrast-progressbar-fill-color,var(
|
|
80
|
+
--mod-progressbar-fill-color-notice,var(--spectrum-progressbar-fill-color-notice)
|
|
81
|
+
)
|
|
88
82
|
)}:host(.is-negative) .fill{background:var(
|
|
89
|
-
--
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
)}
|
|
83
|
+
--highcontrast-progressbar-fill-color,var(
|
|
84
|
+
--mod-progressbar-fill-color-negative,var(--spectrum-progressbar-fill-color-negative)
|
|
85
|
+
)
|
|
86
|
+
)}.fill{background:var(
|
|
87
|
+
--highcontrast-progressbar-fill-color,var(
|
|
88
|
+
--mod-progressbar-fill-color,var(--spectrum-progressbar-fill-color)
|
|
89
|
+
)
|
|
90
|
+
);block-size:var(
|
|
91
|
+
--mod-progressbar-thickness,var(--spectrum-progressbar-thickness)
|
|
92
|
+
);border:none;transition:width 1s}:host([indeterminate]) .fill{animation-timing-function:var(
|
|
93
|
+
--mod-progressbar-animation-ease-in-out-indeterminate,var(--spectrum-progressbar-animation-ease-in-out-indeterminate)
|
|
94
|
+
);inline-size:var(
|
|
95
|
+
--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate)
|
|
96
|
+
);position:relative;will-change:transform}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between}:host([side-label]) .track{flex:1 1 var(
|
|
97
|
+
--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)
|
|
98
|
+
)}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(
|
|
99
|
+
--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)
|
|
100
|
+
)}:host([side-label]) .percentage{margin-block-end:0;margin-inline-start:var(
|
|
101
|
+
--mod-spacing-progressbar-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)
|
|
102
|
+
);order:3;text-align:end}:host([static=white]) .fill{background:var(
|
|
103
|
+
--mod-progressbar-fill-color-white,var(--spectrum-progressbar-fill-color-white)
|
|
104
|
+
);color:var(
|
|
105
|
+
--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white)
|
|
106
|
+
)}:host([static=white]) .label,:host([static=white]) .percentage{color:var(
|
|
107
|
+
--mode-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white)
|
|
108
|
+
)}:host([static=white]) .track{background-color:var(
|
|
109
|
+
--spectrum-progressbar-track-color-white
|
|
110
|
+
)}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(
|
|
111
|
+
--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate)
|
|
112
|
+
) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(
|
|
113
|
+
--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate)
|
|
114
|
+
) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(
|
|
115
|
+
--mod-progressbar-fill-size-indeterminate,
|
|
116
|
+
var(--spectrum-progressbar-fill-size-indeterminate)
|
|
117
|
+
)*-1))}to{transform:translate(var(
|
|
118
|
+
--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)
|
|
119
|
+
))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(
|
|
120
|
+
--mod-progressbar-size-default,var(--spectrum-progressbar-fill-size-indeterminate)
|
|
121
|
+
))}to{transform:translate(calc(var(
|
|
122
|
+
--mod-progressbar-size-default,
|
|
123
|
+
var(--spectrum-progressbar-size-default)
|
|
124
|
+
)*-1))}}
|
|
93
125
|
`;
|
|
94
126
|
export default styles;
|
|
95
127
|
//# sourceMappingURL=spectrum-progress-bar.css.dev.js.map
|