fluent-svelte-extra 1.8.6 → 1.8.7

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/Flyout/FlyoutWrapper.scss +5 -0
  2. package/Flyout/FlyoutWrapper.svelte +1 -1
  3. package/package.json +1 -1
package/Flyout/FlyoutWrapper.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  animation: flyout-in var(--control-normal-duration) var(--control-fast-out-slow-in-easing);
31
31
  transform: var(--flyout-transform);
32
32
  &.placement- {
33
+ --flyout-transform: translateX(0%);
33
34
  &top {
34
35
  bottom: calc(100% + var(--flyout-offset));
35
36
  --flyout-transition-offset: translateY(12px);
@@ -51,9 +52,11 @@
51
52
  &.alignment- {
52
53
  &start {
53
54
  inset-inline-start: 0;
55
+ --flyout-transform: translateX(0%);
54
56
  }
55
57
  &end {
56
58
  inset-inline-end: 0;
59
+ --flyout-transform: translateX(0%);
57
60
  }
58
61
  &center {
59
62
  inset-inline-start: 50%;
@@ -66,9 +69,11 @@
66
69
  &.alignment- {
67
70
  &start {
68
71
  inset-block-start: 0;
72
+ --flyout-transform: translateY(0%);
69
73
  }
70
74
  &end {
71
75
  inset-block-end: 0;
76
+ --flyout-transform: translateY(0%);
72
77
  }
73
78
  &center {
74
79
  inset-block-start: 50%;
package/Flyout/FlyoutWrapper.svelte CHANGED
@@ -110,4 +110,4 @@ Flyouts represent a control that displays lightweight UI that is either informat
110
110
  {/if}
111
111
  </div>
112
112
 
113
- <style >@-webkit-keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}@keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}.flyout-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.flyout-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.flyout-anchor{-webkit-animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);position:absolute;transform:var(--fds-flyout-transform);z-index:10000}.flyout-anchor.placement-top{--fds-flyout-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom{--fds-flyout-transition-offset:translateY(-12px);top:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-left{--fds-flyout-transition-offset:translateX(12px);right:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-right{--fds-flyout-transition-offset:translateX(-12px);left:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom.alignment-start,.flyout-anchor.placement-top.alignment-start{inset-inline-start:0}.flyout-anchor.placement-bottom.alignment-end,.flyout-anchor.placement-top.alignment-end{inset-inline-end:0}.flyout-anchor.placement-bottom.alignment-center,.flyout-anchor.placement-top.alignment-center{--fds-flyout-transform:translateX(-50%);inset-inline-start:50%}.flyout-anchor.placement-left.alignment-start,.flyout-anchor.placement-right.alignment-start{inset-block-start:0}.flyout-anchor.placement-left.alignment-end,.flyout-anchor.placement-right.alignment-end{inset-block-end:0}.flyout-anchor.placement-left.alignment-center,.flyout-anchor.placement-right.alignment-center{--fds-flyout-transform:translateY(-50%);inset-block-start:50%}</style>
113
+ <style >@-webkit-keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}@keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}.flyout-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.flyout-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.flyout-anchor{-webkit-animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);position:absolute;transform:var(--fds-flyout-transform);z-index:10000}.flyout-anchor.placement-{--fds-flyout-transform:translateX(0%)}.flyout-anchor.placement-top{--fds-flyout-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom{--fds-flyout-transition-offset:translateY(-12px);top:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-left{--fds-flyout-transition-offset:translateX(12px);right:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-right{--fds-flyout-transition-offset:translateX(-12px);left:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom.alignment-start,.flyout-anchor.placement-top.alignment-start{--fds-flyout-transform:translateX(0%);inset-inline-start:0}.flyout-anchor.placement-bottom.alignment-end,.flyout-anchor.placement-top.alignment-end{--fds-flyout-transform:translateX(0%);inset-inline-end:0}.flyout-anchor.placement-bottom.alignment-center,.flyout-anchor.placement-top.alignment-center{--fds-flyout-transform:translateX(-50%);inset-inline-start:50%}.flyout-anchor.placement-left.alignment-start,.flyout-anchor.placement-right.alignment-start{--fds-flyout-transform:translateY(0%);inset-block-start:0}.flyout-anchor.placement-left.alignment-end,.flyout-anchor.placement-right.alignment-end{--fds-flyout-transform:translateY(0%);inset-block-end:0}.flyout-anchor.placement-left.alignment-center,.flyout-anchor.placement-right.alignment-center{--fds-flyout-transform:translateY(-50%);inset-block-start:50%}</style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluent-svelte-extra",
3
- "version": "1.8.6",
3
+ "version": "1.8.7",
4
4
  "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
5
5
  "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
6
6
  "license": "MIT",