sakana-element 2.2.0 → 2.4.0

package/dist/theme/Indicator.css

@@ -0,0 +1,159 @@
+/* Indicator Variables */
+.px-indicator[data-v-84fa8f8b] {
+  --px-indicator-bg-color: var(--px-color-primary);
+  --px-indicator-border-color: var(--px-color-primary-dark);
+  --px-indicator-shadow-color: var(--px-color-primary-dark);
+  --px-indicator-dot-size: 10px;
+  --px-indicator-offset-x: 0px;
+  --px-indicator-offset-y: 0px;
+}
+/* Base Container */
+.px-indicator[data-v-84fa8f8b] {
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+}
+.px-indicator.is-inline[data-v-84fa8f8b] {
+    display: inline-flex;
+}
+/* Indicator Item — absolutely positioned overlay */
+.px-indicator__item[data-v-84fa8f8b] {
+  position: absolute;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  pointer-events: auto;
+  transition: none;
+}
+/* ─── Shared 9-position grid for item & ping ─── */
+.px-indicator__item--top-start[data-v-84fa8f8b],
+.px-indicator__item--top-center[data-v-84fa8f8b],
+.px-indicator__item--top-end[data-v-84fa8f8b],
+.px-indicator__ping--top-start[data-v-84fa8f8b],
+.px-indicator__ping--top-center[data-v-84fa8f8b],
+.px-indicator__ping--top-end[data-v-84fa8f8b] {
+  top: 0;
+  --px-indicator-ty: -50%;
+}
+.px-indicator__item--middle-start[data-v-84fa8f8b],
+.px-indicator__item--middle-center[data-v-84fa8f8b],
+.px-indicator__item--middle-end[data-v-84fa8f8b],
+.px-indicator__ping--middle-start[data-v-84fa8f8b],
+.px-indicator__ping--middle-center[data-v-84fa8f8b],
+.px-indicator__ping--middle-end[data-v-84fa8f8b] {
+  top: 50%;
+  --px-indicator-ty: -50%;
+}
+.px-indicator__item--bottom-start[data-v-84fa8f8b],
+.px-indicator__item--bottom-center[data-v-84fa8f8b],
+.px-indicator__item--bottom-end[data-v-84fa8f8b],
+.px-indicator__ping--bottom-start[data-v-84fa8f8b],
+.px-indicator__ping--bottom-center[data-v-84fa8f8b],
+.px-indicator__ping--bottom-end[data-v-84fa8f8b] {
+  bottom: 0;
+  --px-indicator-ty: 50%;
+}
+.px-indicator__item--top-start[data-v-84fa8f8b],
+.px-indicator__item--middle-start[data-v-84fa8f8b],
+.px-indicator__item--bottom-start[data-v-84fa8f8b],
+.px-indicator__ping--top-start[data-v-84fa8f8b],
+.px-indicator__ping--middle-start[data-v-84fa8f8b],
+.px-indicator__ping--bottom-start[data-v-84fa8f8b] {
+  left: 0;
+  --px-indicator-tx: -50%;
+}
+.px-indicator__item--top-center[data-v-84fa8f8b],
+.px-indicator__item--middle-center[data-v-84fa8f8b],
+.px-indicator__item--bottom-center[data-v-84fa8f8b],
+.px-indicator__ping--top-center[data-v-84fa8f8b],
+.px-indicator__ping--middle-center[data-v-84fa8f8b],
+.px-indicator__ping--bottom-center[data-v-84fa8f8b] {
+  left: 50%;
+  --px-indicator-tx: -50%;
+}
+.px-indicator__item--top-end[data-v-84fa8f8b],
+.px-indicator__item--middle-end[data-v-84fa8f8b],
+.px-indicator__item--bottom-end[data-v-84fa8f8b],
+.px-indicator__ping--top-end[data-v-84fa8f8b],
+.px-indicator__ping--middle-end[data-v-84fa8f8b],
+.px-indicator__ping--bottom-end[data-v-84fa8f8b] {
+  right: 0;
+  --px-indicator-tx: 50%;
+}
+/* Apply transform with offset */
+.px-indicator__item[data-v-84fa8f8b],
+.px-indicator__ping[data-v-84fa8f8b] {
+  transform: translate(
+    calc(var(--px-indicator-tx, 0%) + var(--px-indicator-offset-x)),
+    calc(var(--px-indicator-ty, 0%) + var(--px-indicator-offset-y))
+  );
+}
+/* ─── Shared pixel staircase clip-path ─── */
+.px-indicator__item.is-dot[data-v-84fa8f8b],
+.px-indicator__ping[data-v-84fa8f8b] {
+  width: var(--px-indicator-dot-size);
+  height: var(--px-indicator-dot-size);
+  background: var(--px-indicator-bg-color);
+  clip-path: polygon(
+    0 2px, 2px 2px, 2px 0,
+    calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
+    100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
+    2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+  );
+}
+/* ─── Dot mode ─── */
+.px-indicator__item.is-dot[data-v-84fa8f8b] {
+  border: none;
+  filter: drop-shadow(1px 1px 0px var(--px-indicator-shadow-color));
+}
+/* ─── Processing ping animation ─── */
+.px-indicator__ping[data-v-84fa8f8b] {
+  position: absolute;
+  z-index: 0;
+  opacity: 0.75;
+  pointer-events: none;
+  animation: px-indicator-ping-84fa8f8b 1.5s steps(4, end) infinite;
+}
+@keyframes px-indicator-ping-84fa8f8b {
+0% {
+    scale: 1;
+    opacity: 0.75;
+}
+75%, 100% {
+    scale: 2;
+    opacity: 0;
+}
+}
+/* ─── Type color variants ─── */
+.px-indicator__item--primary[data-v-84fa8f8b],
+  .px-indicator__ping--primary[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-primary);
+    --px-indicator-border-color: var(--px-color-primary-dark);
+    --px-indicator-shadow-color: var(--px-color-primary-dark);
+}
+.px-indicator__item--success[data-v-84fa8f8b],
+  .px-indicator__ping--success[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-success);
+    --px-indicator-border-color: var(--px-color-success-dark);
+    --px-indicator-shadow-color: var(--px-color-success-dark);
+}
+.px-indicator__item--info[data-v-84fa8f8b],
+  .px-indicator__ping--info[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-info);
+    --px-indicator-border-color: var(--px-color-info-dark);
+    --px-indicator-shadow-color: var(--px-color-info-dark);
+}
+.px-indicator__item--warning[data-v-84fa8f8b],
+  .px-indicator__ping--warning[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-warning);
+    --px-indicator-border-color: var(--px-color-warning-dark);
+    --px-indicator-shadow-color: var(--px-color-warning-dark);
+}
+.px-indicator__item--danger[data-v-84fa8f8b],
+  .px-indicator__ping--danger[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-danger);
+    --px-indicator-border-color: var(--px-color-danger-dark);
+    --px-indicator-shadow-color: var(--px-color-danger-dark);
+}