@3dverse/ui-lib 0.1.7 → 0.2.0

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.
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../sources/components/3dverse/AppIcon/AppIcon.module.css", "../sources/components/3dverse/GlowEffect/GlowEffect.module.css", "../sources/components/3dverse/Spinner/Spinner.module.css"],
4
- "sourcesContent": [".container {\n position: relative;\n overflow: hidden;\n display: block;\n width: 6rem;\n aspect-ratio: 1;\n\n background-image: linear-gradient(to top right, var(--gradient-from), var(--gradient-to));\n --border-radius: 30%;\n border-radius: var(--border-radius);\n corner-shape: squircle;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: -20%;\n left: 0px;\n width: 100%;\n height: 100%;\n\n background: #41c9e9aa;\n border-radius: inherit;\n corner-shape: inherit;\n filter: blur(200px);\n }\n}\n\n.inner {\n width: 100%;\n height: 100%;\n padding: 3%;\n}\n\n.innerShape {\n display: grid;\n grid-template-rows: repeat(2, minmax(0, 1fr));\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 10%;\n width: calc(100% - 6%);\n height: calc(100% - 6%);\n margin: 3%;\n padding: 10%;\n\n background-image: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to));\n border-radius: calc(var(--border-radius) + -3%);\n corner-shape: inherit;\n mix-blend-mode: overlay;\n overflow: hidden;\n}\n\n.shape {\n display: block;\n height: 100%;\n\n background-color: currentColor;\n border-color: currentColor;\n filter: brightness(1) hue-rotate(250deg) invert(1) saturate(1);\n}\n\n.shapeAlt {\n height: 200%;\n scale: 2;\n translate: 80% 0;\n}\n", ".glowEffect {\n position: relative;\n /* --color: var(--glow-color, #565c7e); */\n --color: var(--color-informative);\n\n &:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 400%;\n max-width: 13rem;\n aspect-ratio: 1 / 1;\n\n background-color: var(--color);\n border-radius: 100%;\n filter: blur(60px);\n opacity: 0.2;\n pointer-events: none;\n }\n}\n\n.glowEffectWide {\n &:before {\n max-width: 20rem;\n aspect-ratio: 1 / 0.6;\n filter: blur(60px);\n }\n}\n", ".spinnerLogo {\n position: relative;\n width: 40px;\n height: 40px;\n\n background-image: url(\"/app-launcher/images/3dverse-logo-shape.svg\");\n background-repeat: no-repeat;\n background-position: 0px 1px;\n color: var(--color-accent);\n filter: drop-shadow(0px 14px 5px color-mix(in srgb, var(--color-accent), black 90%));\n}\n\n.circle {\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n\n border-radius: 47%;\n corner-shape: superellipse(0.65);\n border: 1px solid currentColor;\n border-right-color: color-mix(in srgb, currentColor, transparent 70%);\n border-top-color: color-mix(in srgb, currentColor, transparent 40%);\n border-bottom-color: color-mix(in srgb, currentColor, transparent 40%);\n\n animation: loaderRotate 3s infinite linear;\n transition-property: opacity, scale;\n transition-duration: 0.4s;\n transition-timing-function: ease-in-out;\n\n @starting-style {\n opacity: 0;\n scale: 0.8;\n }\n}\n\n.circle:before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n\n border: inherit;\n border-radius: inherit;\n corner-shape: inherit;\n filter: blur(1px);\n\n rotate: 135deg;\n animation: loaderRotate 3s infinite ease-in-out;\n}\n.circle:after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n\n border: inherit;\n border-radius: inherit;\n corner-shape: inherit;\n filter: blur(1px);\n\n rotate: 90deg;\n animation: loaderRotate 4s infinite ease-in-out;\n}\n\n@keyframes loaderRotate {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(360deg);\n }\n}\n"],
3
+ "sources": ["../sources/components/3dverse/AppIcon/AppIcon.module.css", "../sources/components/3dverse/GlowEffect/GlowEffect.module.css", "../sources/components/3dverse/SpinnerLogo3dverse/SpinnerLogo3dverse.module.css"],
4
+ "sourcesContent": [".container {\n position: relative;\n overflow: hidden;\n display: block;\n width: 6rem;\n aspect-ratio: 1;\n\n background-image: linear-gradient(to top right, var(--gradient-from), var(--gradient-to));\n --border-radius: 30%;\n border-radius: var(--border-radius);\n corner-shape: squircle;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: -20%;\n left: 0px;\n width: 100%;\n height: 100%;\n\n background: #41c9e9aa;\n border-radius: inherit;\n corner-shape: inherit;\n filter: blur(200px);\n }\n}\n\n.inner {\n width: 100%;\n height: 100%;\n padding: 3%;\n}\n\n.innerShape {\n display: grid;\n grid-template-rows: repeat(2, minmax(0, 1fr));\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 10%;\n width: calc(100% - 6%);\n height: calc(100% - 6%);\n margin: 3%;\n padding: 10%;\n\n background-image: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to));\n border-radius: calc(var(--border-radius) + -3%);\n corner-shape: inherit;\n mix-blend-mode: overlay;\n overflow: hidden;\n}\n\n.shape {\n display: block;\n height: 100%;\n\n background-color: currentColor;\n border-color: currentColor;\n filter: brightness(1) hue-rotate(250deg) invert(1) saturate(1);\n}\n\n.shapeAlt {\n height: 200%;\n scale: 2;\n translate: 80% 0;\n}\n", ".glowEffect {\n position: relative;\n /* --color: var(--glow-color, #565c7e); */\n --color: var(--color-informative);\n\n &:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 400%;\n max-width: 13rem;\n aspect-ratio: 1 / 1;\n\n background-color: var(--color);\n border-radius: 100%;\n filter: blur(60px);\n opacity: 0.2;\n pointer-events: none;\n }\n}\n\n.glowEffectWide {\n &:before {\n max-width: 20rem;\n aspect-ratio: 1 / 0.6;\n filter: blur(60px);\n }\n}\n", ".spinnerLogo3dverse {\n position: relative;\n width: 40px;\n height: 40px;\n\n background-image: url(\"/app-launcher/images/3dverse-logo-shape.svg\");\n background-repeat: no-repeat;\n background-position: 0px 1px;\n color: var(--color-accent);\n filter: drop-shadow(0px 14px 5px color-mix(in srgb, var(--color-accent), black 90%));\n}\n\n.circle {\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n\n border-radius: 47%;\n corner-shape: superellipse(0.65);\n border: 1px solid currentColor;\n border-right-color: color-mix(in srgb, currentColor, transparent 70%);\n border-top-color: color-mix(in srgb, currentColor, transparent 40%);\n border-bottom-color: color-mix(in srgb, currentColor, transparent 40%);\n\n animation: loaderRotate 3s infinite linear;\n transition-property: opacity, scale;\n transition-duration: 0.4s;\n transition-timing-function: ease-in-out;\n\n @starting-style {\n opacity: 0;\n scale: 0.8;\n }\n}\n\n.circle:before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n\n border: inherit;\n border-radius: inherit;\n corner-shape: inherit;\n filter: blur(1px);\n\n rotate: 135deg;\n animation: loaderRotate 3s infinite ease-in-out;\n}\n.circle:after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n\n border: inherit;\n border-radius: inherit;\n corner-shape: inherit;\n filter: blur(1px);\n\n rotate: 90deg;\n animation: loaderRotate 4s infinite ease-in-out;\n}\n\n@keyframes loaderRotate {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(360deg);\n }\n}\n"],
5
5
  "mappings": "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",
6
- "names": ["container", "inner", "innerShape", "shape", "shapeAlt", "glowEffect", "glowEffectWide", "spinnerLogo", "circle", "loaderRotate"]
6
+ "names": ["container", "inner", "innerShape", "shape", "shapeAlt", "glowEffect", "glowEffectWide", "spinnerLogo3dverse", "circle", "loaderRotate"]
7
7
  }