@nordcode/ui 1.1.5 → 1.1.7

package/out/src/styles/components/notifications.css

@@ -0,0 +1,135 @@
+@layer components.notifications {
+    :root {
+        --_notification-max-width: var(--notifications-max-width, 20rem);
+        --_notification-gap: var(--notification-gap, var(--spacing-base));
+        --_notification-border-color: var(--notification-border-color, var(--color-border-base));
+        --_notification-center-background: var(--notification-center-background,
+                color-mix(in oklch, var(---color-surface-subtle), transparent 95%);
+            );
+    }
+
+    :where(.nc-notification-center, .nc-notification-output) {
+        position: fixed;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
+        inline-size: 100%;
+        block-size: 100%;
+        max-inline-size: var(--_notification-max-width);
+        padding-block: var(--_notification-gap);
+        pointer-events: none;
+    }
+
+    :where(.nc-notification-center) {
+        block-size: 100%;
+        backdrop-filter: blur(3px);
+        background-color: var(--_notification-center-background);
+        transform: translate(100%, 0);
+        transition: transform var(--transition-duration-base) ease-in-out;
+    }
+
+    :where(.nc-notification-output, .nc-notification-center-container) {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: var(--_notification-gap);
+        inline-size: 100%;
+        overflow-y: scroll;
+        max-block-size: 100%;
+        padding-inline: var(--_notification-gap);
+        min-inline-size: 0;
+        min-block-size: 100%;
+        flex-grow: 1;
+    }
+
+    :where(.nc-notification-center.-open) {
+        pointer-events: all;
+        transform: translate(0, 0);
+    }
+
+    :where(.nc-notification-center.-open:has(+ .nc-notification-output > .nc-notification)) {
+        opacity: 0.5;
+        filter: contrast(0.5);
+    }
+
+    :where(.nc-notification-center-header) {
+        display: flex;
+        align-items: center;
+        gap: var(--_notification-gap);
+        padding-inline: var(--_notification-gap);
+        margin-block-end: var(--_notification-gap);
+    }
+
+    :where(.nc-notification) {
+        padding: 0.5lh 2ch;
+        background: var(--color-surface-base);
+        border: var(--border-width-thin) solid var(--_notification-border-color);
+        display: flex;
+        flex-direction: column;
+        inline-size: 100%;
+        border-radius: var(--border-radius-small);
+        box-shadow: var(--shadow-far);
+        animation: pop-in var(--transition-duration-base) cubic-bezier(0, 0.6, 0.58, 1);
+        color: var(--color-text-base);
+        pointer-events: all;
+    }
+
+    :where(.nc-notification) p {
+        margin: 0;
+        padding: 0;
+    }
+
+    :where(.nc-notification-title) {
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-heading);
+    }
+
+    :where(.nc-notification-description) {
+        font-size: var(--font-size-small);
+    }
+
+    :where(.nc-notification-time) {
+        font-size: var(--font-size-small);
+        color: var(--color-text-subtle);
+    }
+
+    :where(.nc-notification-footer) {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        inline-size: 100%;
+        margin-block-start: 0.5ch;
+    }
+
+    :where(.nc-notification .nc-button, .nc-notification-center .nc-button) {
+        --button-height-base: 1em;
+        font-size: var(--font-size-small);
+    }
+
+    :where(.nc-notification.-closing) {
+        animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1) forwards;
+    }
+
+    @keyframes pop-in {
+        0% {
+            transform: translate(3vmin, -2vmin) scale(0.98);
+            opacity: 0;
+        }
+
+        50% {
+            transform: translate(0, -1vmin) scale(0.98);
+        }
+
+        100% {
+            transform: translate(0, 0) scale(1);
+            opacity: 1;
+        }
+    }
+
+    @keyframes remove-notification {
+        to {
+            transform: translate(0, 4vmin) scale(0.98);
+            opacity: 0;
+        }
+    }
+}

package/out/src/styles/components/tables.css

@@ -0,0 +1,7 @@
+@layer components.table {
+    :where(.nc-table) {
+        inline-size: 100%;
+        max-inline-size: 100%;
+        overflow-x: auto;
+    }
+}

package/out/src/styles/config/bundle.css

@@ -0,0 +1,2 @@
+@import "./config.css";
+@import "./extras.css";