@esportsplus/ui 0.42.8 → 0.42.9

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 (3) hide show
  1. package/build/components/select/scss/index.scss +1 -1
  2. package/package.json +1 -1
  3. package/src/components/select/scss/index.scss +7 -0
package/build/components/select/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--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-default:var(--background);--border-radius:var(--border-radius-400);--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);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.select:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding-vertical)calc(var(--padding-horizontal)*2 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;flex-wrap:wrap;width:100%;display:flex;position:relative}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--color);border-style:solid;border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
1
+ @layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--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-default:var(--background);--border-radius:var(--border-radius-400);--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);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.select:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding-vertical)calc(var(--padding-horizontal)*2 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;flex-wrap:wrap;width:100%;display:flex;position:relative}.select.--active .select-arrow{transform:translateY(calc(50% + var(--arrow-size)/3))rotate(-135deg)}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--color);border-style:solid;border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -45,7 +45,7 @@
45
45
  "private": false,
46
46
  "sideEffects": false,
47
47
  "type": "module",
48
- "version": "0.42.8",
48
+ "version": "0.42.9",
49
49
  "scripts": {
50
50
  "build": "run-s build:vite build:ts",
51
51
  "build:ts": "tsc && tsc-alias",
package/src/components/select/scss/index.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '/lib';
2
+ @use '/tokens';
2
3
  @use 'variables';
3
4
 
4
5
  .select {
@@ -20,6 +21,12 @@
20
21
  transform var(--transition-duration) ease-in-out;
21
22
  width: 100%;
22
23
 
24
+ @include tokens.state(active) {
25
+ .select-arrow {
26
+ transform: translateY(calc(50% + var(--arrow-size) / 3)) rotate(-135deg);
27
+ }
28
+ }
29
+
23
30
  &-arrow {
24
31
  @include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
25
32
  border-color: var(--color);