@esportsplus/ui 0.35.10 → 0.35.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/components/button/index.js +2 -2
  2. package/build/components/button/scss/index.scss +1 -1
  3. package/package.json +1 -1
  4. package/src/components/button/index.ts +2 -2
  5. package/src/components/button/scss/index.scss +1 -1
package/build/components/button/index.js CHANGED
@@ -9,7 +9,7 @@ const hold = template.factory(function (attributes, content) {
9
9
  });
10
10
  return html `
11
11
  <div
12
- class='button button--hold ${() => state.holding && '--active'}'
12
+ class='button button--hold ${() => state.complete && '--active'}'
13
13
  onanimationend='${(e) => {
14
14
  if (e.animationName === 'buttonHold') {
15
15
  state.complete = true;
@@ -27,7 +27,7 @@ const hold = template.factory(function (attributes, content) {
27
27
  }}'
28
28
  ${attributes}
29
29
  >
30
- ${content(state)}
30
+ ${() => content(state)}
31
31
  </div>
32
32
  `;
33
33
  });
package/build/components/button/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer components {.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--hold{--animation-duration:2.4s;--background-hold:var(--background-active)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--hold{overflow:hidden}.button--hold:after{box-shadow:unset;background:var(--background-hold);z-index:1;border-radius:0;width:110%;height:100%;display:block;transform:translate(-150%)}.button--hold.--active:after{animation:buttonHold var(--animation-duration)ease-in-out forwards}.button--hold.--active>*{animation:buttonContentPulse calc(var(--animation-duration)/3)infinite ease-in-out}@keyframes buttonHold{to{transform:translate(0%)}}@keyframes buttonContentPulse{0%,to{opacity:1}50%{opacity:.4}}.button--hold>*{z-index:2}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:buttonProcessing var(--animation-duration)infinite linear;border:var(--border-width)solid color-mix(in srgb,var(--processing-color),transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes buttonProcessing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration)ease-in-out infinite buttonSkeleton;background-image:linear-gradient(270deg,var(--background-pressed),var(--background-default),var(--background-default),var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes buttonSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + var(--line-height)/2)*-1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}}
1
+ @layer components {.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--hold{--animation-duration:2.4s;--background-hold:var(--background-active)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--hold{overflow:hidden}.button--hold:after{box-shadow:unset;background:var(--background-hold);z-index:1;border-radius:0;width:110%;height:100%;display:block;transform:translate(-100%)}.button--hold.--active:after{animation:buttonHold var(--animation-duration)ease-in-out forwards}.button--hold.--active>*{animation:buttonContentPulse calc(var(--animation-duration)/3)infinite ease-in-out}@keyframes buttonHold{to{transform:translate(0%)}}@keyframes buttonContentPulse{0%,to{opacity:1}50%{opacity:.4}}.button--hold>*{z-index:2}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:buttonProcessing var(--animation-duration)infinite linear;border:var(--border-width)solid color-mix(in srgb,var(--processing-color),transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes buttonProcessing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration)ease-in-out infinite buttonSkeleton;background-image:linear-gradient(270deg,var(--background-pressed),var(--background-default),var(--background-default),var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes buttonSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + var(--line-height)/2)*-1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -42,7 +42,7 @@
42
42
  "private": false,
43
43
  "sideEffects": false,
44
44
  "type": "module",
45
- "version": "0.35.10",
45
+ "version": "0.35.12",
46
46
  "scripts": {
47
47
  "build": "run-s build:vite build:ts",
48
48
  "build:ts": "tsc && tsc-alias",
package/src/components/button/index.ts CHANGED
@@ -13,7 +13,7 @@ const hold = template.factory(
13
13
 
14
14
  return html`
15
15
  <div
16
- class='button button--hold ${() => state.holding && '--active'}'
16
+ class='button button--hold ${() => state.complete && '--active'}'
17
17
  onanimationend='${(e: AnimationEvent) => {
18
18
  if (e.animationName === 'buttonHold') {
19
19
  state.complete = true;
@@ -31,7 +31,7 @@ const hold = template.factory(
31
31
  }}'
32
32
  ${attributes}
33
33
  >
34
- ${content(state)}
34
+ ${() => content(state)}
35
35
  </div>
36
36
  `;
37
37
  }
package/src/components/button/scss/index.scss CHANGED
@@ -51,7 +51,7 @@
51
51
  width: 110%;
52
52
  height: 100%;
53
53
  background: var(--background-hold);
54
- transform: translateX(-150%);
54
+ transform: translateX(-100%);
55
55
  z-index: 1;
56
56
  }
57
57