@spectrum-web-components/progress-bar 0.5.3-express.0 → 0.5.3
Sign up to get free protection for your applications and to get access to all the features.
package/custom-elements.json
CHANGED
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
{
|
|
170
170
|
"kind": "variable",
|
|
171
171
|
"name": "styles",
|
|
172
|
-
"default": "css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-s-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-m-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-m-side-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-l-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-xl-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-value-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(
|
|
172
|
+
"default": "css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-s-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-m-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-m-side-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-l-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-xl-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-value-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(--spectrum-progressbar-indeterminate-fill-width)*-1))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(var(--spectrum-progressbar-width)*-1))}}.fill{background:var(\n--spectrum-progressbar-m-track-fill-color,var(--spectrum-semantic-informative-color-default)\n)}.track{background-color:var(\n--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)\n)}:host([over-background]) .fill{background:var(\n--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)\n)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(\n--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)\n)}:host([over-background]) .track{background-color:var(\n--spectrum-progressbar-m-overbackground-track-color,var(--spectrum-alias-track-color-overbackground)\n)}:host([positive]) .fill{background:var(\n--spectrum-meter-m-positive-track-fill-color,var(--spectrum-semantic-positive-status-color)\n)}:host(.is-notice) .fill{background:var(\n--spectrum-meter-m-notice-track-fill-color,var(--spectrum-semantic-notice-status-color)\n)}:host(.is-negative) .fill{background:var(\n--spectrum-meter-m-negative-track-fill-color,var(--spectrum-semantic-negative-status-color)\n)}.label,.percentage{color:var(\n--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)\n)}.fill{transform-origin:left;width:100%}:host([dir=rtl]) .fill{transform-origin:right}\n`"
|
|
173
173
|
}
|
|
174
174
|
],
|
|
175
175
|
"exports": [
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
{
|
|
191
191
|
"kind": "variable",
|
|
192
192
|
"name": "styles",
|
|
193
|
-
"default": "css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-s-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-m-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-m-side-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-l-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-xl-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-value-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(
|
|
193
|
+
"default": "css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-s-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-m-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-m-side-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-l-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-xl-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-value-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(--spectrum-progressbar-indeterminate-fill-width)*-1))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(var(--spectrum-progressbar-width)*-1))}}.fill{background:var(\n--spectrum-progressbar-m-track-fill-color,var(--spectrum-semantic-informative-color-default)\n)}.track{background-color:var(\n--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)\n)}:host([over-background]) .fill{background:var(\n--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)\n)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(\n--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)\n)}:host([over-background]) .track{background-color:var(\n--spectrum-progressbar-m-overbackground-track-color,var(--spectrum-alias-track-color-overbackground)\n)}:host([positive]) .fill{background:var(\n--spectrum-meter-m-positive-track-fill-color,var(--spectrum-semantic-positive-status-color)\n)}:host(.is-notice) .fill{background:var(\n--spectrum-meter-m-notice-track-fill-color,var(--spectrum-semantic-notice-status-color)\n)}:host(.is-negative) .fill{background:var(\n--spectrum-meter-m-negative-track-fill-color,var(--spectrum-semantic-negative-status-color)\n)}.label,.percentage{color:var(\n--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)\n)}\n`"
|
|
194
194
|
}
|
|
195
195
|
],
|
|
196
196
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/progress-bar",
|
|
3
|
-
"version": "0.5.3
|
|
3
|
+
"version": "0.5.3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,17 +44,17 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/base": "^0.5.
|
|
48
|
-
"@spectrum-web-components/field-label": "^0.7.3
|
|
47
|
+
"@spectrum-web-components/base": "^0.5.1",
|
|
48
|
+
"@spectrum-web-components/field-label": "^0.7.3",
|
|
49
49
|
"tslib": "^2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@spectrum-css/progressbar": "
|
|
52
|
+
"@spectrum-css/progressbar": "^1.0.13"
|
|
53
53
|
},
|
|
54
54
|
"types": "./src/index.d.ts",
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
56
56
|
"sideEffects": [
|
|
57
57
|
"./sp-*.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "279380c6d72c0819fe224b405844af9ddcb87f8a"
|
|
60
60
|
}
|
package/src/progress-bar.css.js
CHANGED
|
@@ -81,7 +81,7 @@ const styles = css `
|
|
|
81
81
|
--spectrum-progressbar-indeterminate-animation-ease
|
|
82
82
|
);position:relative;width:var(
|
|
83
83
|
--spectrum-progressbar-indeterminate-fill-width
|
|
84
|
-
);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(
|
|
84
|
+
);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(--spectrum-progressbar-indeterminate-fill-width)*-1))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(var(--spectrum-progressbar-width)*-1))}}.fill{background:var(
|
|
85
85
|
--spectrum-progressbar-m-track-fill-color,var(--spectrum-semantic-informative-color-default)
|
|
86
86
|
)}.track{background-color:var(
|
|
87
87
|
--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.css.js","sourceRoot":"","sources":["progress-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 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([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-s-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-m-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-m-side-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-l-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-xl-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-value-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(
|
|
1
|
+
{"version":3,"file":"progress-bar.css.js","sourceRoot":"","sources":["progress-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 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([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-s-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-m-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-m-side-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-l-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-xl-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-value-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(--spectrum-progressbar-indeterminate-fill-width)*-1))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(var(--spectrum-progressbar-width)*-1))}}.fill{background:var(\n--spectrum-progressbar-m-track-fill-color,var(--spectrum-semantic-informative-color-default)\n)}.track{background-color:var(\n--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)\n)}:host([over-background]) .fill{background:var(\n--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)\n)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(\n--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)\n)}:host([over-background]) .track{background-color:var(\n--spectrum-progressbar-m-overbackground-track-color,var(--spectrum-alias-track-color-overbackground)\n)}:host([positive]) .fill{background:var(\n--spectrum-meter-m-positive-track-fill-color,var(--spectrum-semantic-positive-status-color)\n)}:host(.is-notice) .fill{background:var(\n--spectrum-meter-m-notice-track-fill-color,var(--spectrum-semantic-notice-status-color)\n)}:host(.is-negative) .fill{background:var(\n--spectrum-meter-m-negative-track-fill-color,var(--spectrum-semantic-negative-status-color)\n)}.label,.percentage{color:var(\n--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)\n)}.fill{transform-origin:left;width:100%}:host([dir=rtl]) .fill{transform-origin:right}\n`;\nexport default styles;"]}
|
|
@@ -81,7 +81,7 @@ const styles = css `
|
|
|
81
81
|
--spectrum-progressbar-indeterminate-animation-ease
|
|
82
82
|
);position:relative;width:var(
|
|
83
83
|
--spectrum-progressbar-indeterminate-fill-width
|
|
84
|
-
);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(
|
|
84
|
+
);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(--spectrum-progressbar-indeterminate-fill-width)*-1))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(var(--spectrum-progressbar-width)*-1))}}.fill{background:var(
|
|
85
85
|
--spectrum-progressbar-m-track-fill-color,var(--spectrum-semantic-informative-color-default)
|
|
86
86
|
)}.track{background-color:var(
|
|
87
87
|
--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-progress-bar.css.js","sourceRoot":"","sources":["spectrum-progress-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 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([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-s-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-m-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-m-side-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-l-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-xl-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-value-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(
|
|
1
|
+
{"version":3,"file":"spectrum-progress-bar.css.js","sourceRoot":"","sources":["spectrum-progress-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 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([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-s-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-m-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-m-side-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-l-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-progressbar-value-gap-y:var(\n--spectrum-progressbar-xl-value-gap-y,0px\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-value-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(--spectrum-progressbar-indeterminate-fill-width)*-1))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(var(--spectrum-progressbar-width)*-1))}}.fill{background:var(\n--spectrum-progressbar-m-track-fill-color,var(--spectrum-semantic-informative-color-default)\n)}.track{background-color:var(\n--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)\n)}:host([over-background]) .fill{background:var(\n--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)\n)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(\n--spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)\n)}:host([over-background]) .track{background-color:var(\n--spectrum-progressbar-m-overbackground-track-color,var(--spectrum-alias-track-color-overbackground)\n)}:host([positive]) .fill{background:var(\n--spectrum-meter-m-positive-track-fill-color,var(--spectrum-semantic-positive-status-color)\n)}:host(.is-notice) .fill{background:var(\n--spectrum-meter-m-notice-track-fill-color,var(--spectrum-semantic-notice-status-color)\n)}:host(.is-negative) .fill{background:var(\n--spectrum-meter-m-negative-track-fill-color,var(--spectrum-semantic-negative-status-color)\n)}.label,.percentage{color:var(\n--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)\n)}\n`;\nexport default styles;"]}
|