npm - vanilla-jui - Versions diffs - 1.4.4 → 1.4.6 - Mend

vanilla-jui 1.4.4 → 1.4.6

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 (103) hide show

package/README.md +6 -0
package/dist/index.d.ts +1273 -1896
package/dist/index.js +1 -1
package/dist/index.umd.js +1 -1
package/dist/style.css +1 -1
package/package.json +22 -3
package/src/components/accordion.ts +297 -216
package/src/components/flow.ts +222 -258
package/src/components/form.ts +44 -102
package/src/components/menu.ts +268 -356
package/src/components/modal.ts +181 -641
package/src/components/offcanvas.ts +225 -106
package/src/components/pagination.ts +296 -326
package/src/components/sticky.ts +55 -54
package/src/components/swiper.ts +237 -247
package/src/components/tabs.ts +278 -271
package/src/components/toc.ts +42 -46
package/src/core/Component.ts +69 -47
package/src/css/accordion.css +2 -2
package/src/css/animation.css +1 -5
package/src/css/avatar.css +1 -1
package/src/css/badge.css +1 -1
package/src/css/breadcrumb.css +9 -10
package/src/css/button.css +1 -1
package/src/css/card.css +2 -2
package/src/css/color.css +974 -1002
package/src/css/color_p3.css +974 -1004
package/src/css/components.css +1 -1
package/src/css/content.css +72 -63
package/src/css/drop.css +1 -1
package/src/css/editor.css +14 -14
package/src/css/flow.css +4 -14
package/src/css/font.css +5 -4
package/src/css/form.css +76 -52
package/src/css/gradient.css +299 -222
package/src/css/icon.css +57 -57
package/src/css/index.css +1 -1
package/src/css/layout.css +13 -10
package/src/css/loading.css +60 -12
package/src/css/menu.css +262 -188
package/src/css/modal.css +1 -1
package/src/css/offcanvas.css +9 -13
package/src/css/pagination.css +5 -1
package/src/css/popup.css +1 -1
package/src/css/skeleton.css +3 -2
package/src/css/status.css +2 -3
package/src/css/swiper.css +1 -1
package/src/css/table.css +1 -1
package/src/css/tabs.css +12 -11
package/src/css/tag.css +1 -1
package/src/css/theme-palette.css +19 -5
package/src/css/themes/default/accordion.css +61 -61
package/src/css/themes/default/avatar.css +54 -54
package/src/css/themes/default/badge.css +62 -62
package/src/css/themes/default/breadcrumb.css +23 -23
package/src/css/themes/default/button.css +203 -203
package/src/css/themes/default/content.css +53 -53
package/src/css/themes/default/drop.css +10 -10
package/src/css/themes/default/editor.css +9 -9
package/src/css/themes/default/index.css +1 -1
package/src/css/themes/default/loading.css +26 -20
package/src/css/themes/default/menu.css +75 -11
package/src/css/themes/default/modal.css +32 -36
package/src/css/themes/default/pagination.css +7 -7
package/src/css/themes/default/popup.css +6 -6
package/src/css/themes/default/swiper.css +32 -32
package/src/css/themes/default/table.css +16 -16
package/src/css/themes/default/tabs.css +30 -30
package/src/css/themes/default/tag.css +71 -71
package/src/css/themes/default/theme-palette.css +11 -11
package/src/css/themes/default/tip.css +42 -42
package/src/css/themes/default/toast.css +60 -60
package/src/css/themes/default/toolbar.css +23 -29
package/src/css/themes/default/tooltip.css +43 -13
package/src/css/themes/index.css +1 -1
package/src/css/tip.css +2 -2
package/src/css/toast.css +3 -3
package/src/css/tokens.css +12 -17
package/src/css/toolbar.css +9 -10
package/src/css/tooltip.css +3 -2
package/src/index.ts +22 -19
package/src/{components → primitives}/drop.ts +58 -49
package/src/{components → primitives}/icons.ts +1 -1
package/src/primitives/loading.ts +23 -0
package/src/primitives/parabola.ts +388 -0
package/src/primitives/popup.ts +61 -0
package/src/{components → primitives}/theme.ts +88 -57
package/src/{components → primitives}/toast.ts +18 -25
package/src/{components → primitives}/tooltip.ts +100 -25
package/src/utilities/browser.ts +23 -49
package/src/utilities/class-name.ts +5 -0
package/src/utilities/dom.ts +14 -32
package/src/utilities/function.ts +4 -0
package/src/utilities/http.ts +7 -7
package/src/utilities/id.ts +57 -0
package/src/utilities/object.ts +5 -0
package/src/utilities/timer.ts +38 -0
package/src/utilities/types.ts +420 -0
package/src/{components → validation}/validator.ts +64 -53
package/src/components/parabola.ts +0 -335
package/src/utilities/cache.ts +0 -57
package/src/utilities/core.ts +0 -614
package/src/utilities/storage.ts +0 -46

package/src/css/themes/default/breadcrumb.css CHANGED Viewed

@@ -1,28 +1,28 @@
 @layer themes {
-    .j-breadcrumb {
-        --breadcrumb-font-size: var(--font-size-md);
-        --breadcrumb-fg: var(--ui-fg-muted);
-        --breadcrumb-icon-size: var(--font-size-md);
-        --breadcrumb-divider-fg: var(--ui-fg-soft);
-        --breadcrumb-link-fg: var(--tone-text);
-        --breadcrumb-item-padding: 0 var(--s2);
-    }
+  .j-breadcrumb {
+    --breadcrumb-font-size: var(--font-size-md);
+    --breadcrumb-fg: var(--ui-fg-muted);
+    --breadcrumb-icon-size: var(--font-size-md);
+    --breadcrumb-divider-fg: var(--ui-fg-soft);
+    --breadcrumb-link-fg: var(--tone-text);
+    --breadcrumb-item-padding: 0 var(--s2);
+  }
-    .j-breadcrumb.is-sm {
-        --breadcrumb-font-size: var(--font-size-sm);
-        --breadcrumb-icon-size: var(--font-size-sm);
-    }
+  .j-breadcrumb.is-sm {
+    --breadcrumb-font-size: var(--font-size-sm);
+    --breadcrumb-icon-size: var(--font-size-sm);
+  }
-    .j-breadcrumb.is-lg {
-        --breadcrumb-font-size: var(--font-size-lg);
-        --breadcrumb-icon-size: var(--font-size-lg);
-    }
+  .j-breadcrumb.is-lg {
+    --breadcrumb-font-size: var(--font-size-lg);
+    --breadcrumb-icon-size: var(--font-size-lg);
+  }
-    .j-breadcrumb a:hover {
-        --breadcrumb-link-fg: var(--tone-solid);
-    }
+  .j-breadcrumb a:hover {
+    --breadcrumb-link-fg: var(--tone-solid);
+  }
-    .j-breadcrumb li.is-active a {
-        --breadcrumb-link-fg: var(--ui-fg-muted);
-    }
-}
+  .j-breadcrumb li.is-active a {
+    --breadcrumb-link-fg: var(--ui-fg-muted);
+  }
+}

package/src/css/themes/default/button.css CHANGED Viewed

@@ -1,204 +1,204 @@
 @layer themes {
-    .j-button-group {
-        --btn-group-box-shadow: var(--shadow-sm);
-    }
-    .j-button {
-        --btn-gap: var(--space) calc(var(--space) * 1.5);
-        --btn-font-weight: var(--font-medium);
-        --btn-font-size: var(--font-size-md);
-        --btn-height: var(--el-height-md);
-        --btn-line-height: var(--line-height-self);
-        --btn-fg: inherit;
-        --btn-bg: transparent;
-        --btn-padding: 0 var(--s3);
-        --btn-border-width: 1px;
-        --btn-border-style: solid;
-        --btn-border-color: transparent;
-        --btn-border-radius: var(--radius-md);
-        --btn-box-shadow: var(--shadow-sm);
-    }
-    .j-button svg {
-        --btn-svg-size: var(--font-size-md);
-    }
-    .j-button.is-sm {
-        --btn-font-size: var(--font-size-sm);
-        --btn-height: var(--el-height-sm);
-        --btn-padding: var(--space) var(--s2);
-    }
-    .j-button.is-lg {
-        --btn-font-size: var(--font-size-lg);
-        --btn-height: var(--el-height-lg);
-        --btn-padding: var(--s3) var(--s4);
-    }
-    .j-button.is-default {
-        --btn-fg: var(--ui-fg);
-        --btn-bg: var(--ui-bg);
-        --btn-border-color: var(--ui-border);
-    }
-    .j-button.is-contrast {
-        --btn-fg: var(--ui-bg);
-        --btn-bg: var(--ui-fg);
-    }
-    .j-button.is-primary {
-        --btn-fg: var(--tone-fg);
-        --btn-bg: var(--tone-solid);
-    }
-    .j-button.is-secondary {
-        --btn-fg: var(--tone-text);
-        --btn-bg: var(--tone-soft);
-        --btn-border-color: transparent;
-    }
-    .j-button.is-outline {
-        --btn-bg: transparent;
-        --btn-border-color: var(--tone-solid);
-        --btn-fg: var(--tone-solid);
-    }
-    .j-button.is-ghost {
-        --btn-box-shadow: none;
-        transition-property: none;
-    }
-    .j-button.is-text {
-        --btn-border-color: transparent;
-        --btn-text-height: auto;
-        --btn-text-padding: 0;
-        --btn-box-shadow: none;
-    }
-    .j-button.is-icon {
-        aspect-ratio: var(--aspect-icon, 1);
-        --btn-padding: var(--icon-padding, 0);
-    }
-    .j-button.is-danger {
-        --btn-bg: var(--state-danger);
-        --btn-fg: var(--state-danger-fg);
-    }
-    .j-button.is-warning {
-        --btn-bg: var(--state-warning);
-        --btn-fg: var(--state-warning-fg);
-    }
-    .j-button.is-success {
-        --btn-bg: var(--state-success);
-        --btn-fg: var(--state-success-fg);
-    }
-    .j-button.is-error {
-        --btn-bg: var(--state-danger-subtle);
-        --btn-fg: var(--state-danger-text);
-    }
-    .j-button[class*='is-surface-'] {
-        --btn-border-color: var(--ui-border);
-        --btn-fg: var(--ui-fg);
-    }
-    .j-button.is-surface-sm {
-        --btn-bg: var(--ui-surface-subtle);
-    }
-    .j-button.is-surface-md {
-        --btn-bg: var(--ui-surface-muted);
-    }
-    .j-button.is-surface-lg {
-        --btn-bg: var(--ui-surface-active);
-    }
-    .j-button-group {
-        --btn-padding: 0 var(--s2);
-    }
-    /* disabled */
-    .j-button:disabled {
-        opacity: var(--opacity-disabled);
-    }
-    /* status */
-    .j-button:not(:disabled) {
-        cursor: pointer;
-    }
-    .j-button:not(:disabled):hover {
-        opacity: var(--opacity-hover);
-    }
-    .j-button:not(:disabled):active {
-        opacity: var(--opacity-active);
-    }
-    .j-button:not(:disabled).is-active {
-        --opacity: var(--opacity-active);
-        --btn-border-color: var(--tone-solid);
-    }
-    .j-button:not(:disabled):focus-visible {
-        outline-color: var(--btn-ring, var(--tone-solid));
-    }
-    .j-button.is-default:hover:not(:disabled) {
-        --btn-bg: var(--ui-surface-hover);
-    }
-    .j-button.is-outline:hover:not(:disabled),
-    .j-button.is-ghost:hover:not(:disabled) {
-        --btn-bg: var(--tone-subtle);
-    }
-    .j-button.is-text:not(:disabled):active,
-    .j-button.is-text:not(:disabled):focus-visible,
-    .j-button.is-text:not(:disabled).is-active {
-        outline: none;
-        --btn-fg: var(--tone-solid);
-        text-decoration: underline;
-        text-underline-offset: var(--space);
-    }
-    .j-button.is-success:not(:disabled):active,
-    .j-button.is-success:not(:disabled):focus-visible {
-        --btn-ring: var(--state-success);
-    }
-    .j-button.is-warning:not(:disabled):active,
-    .j-button.is-warning:not(:disabled):focus-visible {
-        --btn-ring: var(--state-warning);
-    }
-    .j-button.is-danger:not(:disabled):active,
-    .j-button.is-danger:not(:disabled):focus-visible {
-        --btn-ring: var(--state-danger);
-    }
-    .j-button.is-error:not(:disabled):active,
-    .j-button.is-error:not(:disabled):focus-visible {
-        --btn-ring: var(--state-danger-subtle);
-    }
-    .j-button-group .j-button {
-        --btn-box-shadow: none;
-    }
-    .j-button-group .j-button:active,
-    .j-button-group .j-button:focus-visible,
-    .j-button-group .j-button:focus-within {
-        outline: 0;
-        opacity: var(--opacity-active);
-        z-index: 1;
-    }
-    .j-button-group.is-vertical .j-button:focus-within {
-        z-index: auto
-    }
-}
+  .j-button-group {
+    --btn-group-box-shadow: var(--shadow-sm);
+  }
+  .j-button {
+    --btn-gap: var(--space) calc(var(--space) * 1.5);
+    --btn-font-weight: var(--font-medium);
+    --btn-font-size: var(--font-size-md);
+    --btn-height: var(--el-height-md);
+    --btn-line-height: var(--line-height-self);
+    --btn-fg: inherit;
+    --btn-bg: transparent;
+    --btn-padding: 0 var(--s3);
+    --btn-border-width: 1px;
+    --btn-border-style: solid;
+    --btn-border-color: transparent;
+    --btn-border-radius: var(--radius-md);
+    --btn-box-shadow: var(--shadow-sm);
+  }
+  .j-button svg {
+    --btn-svg-size: var(--font-size-md);
+  }
+  .j-button.is-sm {
+    --btn-font-size: var(--font-size-sm);
+    --btn-height: var(--el-height-sm);
+    --btn-padding: var(--space) var(--s2);
+  }
+  .j-button.is-lg {
+    --btn-font-size: var(--font-size-lg);
+    --btn-height: var(--el-height-lg);
+    --btn-padding: var(--s3) var(--s4);
+  }
+  .j-button.is-default {
+    --btn-fg: var(--ui-fg);
+    --btn-bg: var(--ui-bg);
+    --btn-border-color: var(--ui-border);
+  }
+  .j-button.is-reverse {
+    --btn-fg: var(--ui-bg);
+    --btn-bg: var(--ui-fg);
+  }
+  .j-button.is-primary {
+    --btn-fg: var(--tone-fg);
+    --btn-bg: var(--tone-solid);
+  }
+  .j-button.is-secondary {
+    --btn-fg: var(--tone-text);
+    --btn-bg: var(--tone-soft);
+    --btn-border-color: transparent;
+  }
+  .j-button.is-outline {
+    --btn-bg: transparent;
+    --btn-border-color: var(--tone-solid);
+    --btn-fg: var(--tone-solid);
+  }
+  .j-button.is-ghost {
+    --btn-box-shadow: none;
+    transition-property: none;
+  }
+  .j-button.is-text {
+    --btn-border-color: transparent;
+    --btn-text-height: auto;
+    --btn-text-padding: 0;
+    --btn-box-shadow: none;
+  }
+  .j-button.is-icon {
+    aspect-ratio: var(--aspect-icon, 1);
+    --btn-padding: var(--icon-padding, 0);
+  }
+  .j-button.is-danger {
+    --btn-bg: var(--state-danger);
+    --btn-fg: var(--state-danger-fg);
+  }
+  .j-button.is-warning {
+    --btn-bg: var(--state-warning);
+    --btn-fg: var(--state-warning-fg);
+  }
+  .j-button.is-success {
+    --btn-bg: var(--state-success);
+    --btn-fg: var(--state-success-fg);
+  }
+  .j-button.is-error {
+    --btn-bg: var(--state-danger-subtle);
+    --btn-fg: var(--state-danger-text);
+  }
+  .j-button[class*='ui-surface-'] {
+    --btn-border-color: var(--ui-border);
+    --btn-fg: var(--ui-fg);
+  }
+  .j-button.is-surface-sm {
+    --btn-bg: var(--ui-surface-subtle);
+  }
+  .j-button.is-surface-md {
+    --btn-bg: var(--ui-surface-muted);
+  }
+  .j-button.is-surface-lg {
+    --btn-bg: var(--ui-surface-active);
+  }
+  .j-button-group {
+    --btn-padding: 0 var(--s2);
+  }
+  /* disabled */
+  .j-button:disabled {
+    opacity: var(--opacity-disabled);
+  }
+  /* status */
+  .j-button:not(:disabled) {
+    cursor: pointer;
+  }
+  .j-button:not(:disabled):hover {
+    opacity: var(--opacity-hover);
+  }
+  .j-button:not(:disabled):active {
+    opacity: var(--opacity-active);
+  }
+  .j-button:not(:disabled).is-active {
+    --opacity: var(--opacity-active);
+    --btn-border-color: var(--tone-solid);
+  }
+  .j-button:not(:disabled):focus-visible {
+    outline-color: var(--btn-ring, var(--tone-solid));
+  }
+  .j-button.is-default:hover:not(:disabled) {
+    --btn-bg: var(--ui-surface-hover);
+  }
+  .j-button.is-outline:hover:not(:disabled),
+  .j-button.is-ghost:hover:not(:disabled) {
+    --btn-bg: var(--tone-subtle);
+  }
+  .j-button.is-text:not(:disabled):active,
+  .j-button.is-text:not(:disabled):focus-visible,
+  .j-button.is-text:not(:disabled).is-active {
+    outline: none;
+    --btn-fg: var(--tone-solid);
+    text-decoration: underline;
+    text-underline-offset: var(--space);
+  }
+  .j-button.is-success:not(:disabled):active,
+  .j-button.is-success:not(:disabled):focus-visible {
+    --btn-ring: var(--state-success);
+  }
+  .j-button.is-warning:not(:disabled):active,
+  .j-button.is-warning:not(:disabled):focus-visible {
+    --btn-ring: var(--state-warning);
+  }
+  .j-button.is-danger:not(:disabled):active,
+  .j-button.is-danger:not(:disabled):focus-visible {
+    --btn-ring: var(--state-danger);
+  }
+  .j-button.is-error:not(:disabled):active,
+  .j-button.is-error:not(:disabled):focus-visible {
+    --btn-ring: var(--state-danger-subtle);
+  }
+  .j-button-group .j-button {
+    --btn-box-shadow: none;
+  }
+  .j-button-group .j-button:active,
+  .j-button-group .j-button:focus-visible,
+  .j-button-group .j-button:focus-within {
+    outline: 0;
+    opacity: var(--opacity-active);
+    z-index: 1;
+  }
+  .j-button-group.is-vertical .j-button:focus-within {
+    z-index: auto;
+  }
+}

package/src/css/themes/default/content.css CHANGED Viewed

@@ -1,59 +1,59 @@
 @layer themes {
-    .j-content {
-        --content-outline: 0;
-        --content-font-size: var(--font-size-lg);
-        --content-line-height: 1.75;
-        --content-letter-space: 0.01em;
-        --content-word-space: 0.02em;
-        --content-paragraph-space: 1.25em;
-        --content-heading-space: 1.5em;
-        --content-block-space: 1.5em;
-        --content-list-space: 0.5em;
+  .j-content {
+    --content-outline: 0;
+    --content-font-size: var(--font-size-lg);
+    --content-line-height: 1.75;
+    --content-letter-space: 0.01em;
+    --content-word-space: 0.02em;
+    --content-paragraph-space: 1.25em;
+    --content-heading-space: 1.5em;
+    --content-block-space: 1.5em;
+    --content-list-space: 0.5em;
-        --content-heading-fg: var(--tone-heading);
-        --content-caption-fg: var(--tone-caption);
-        --content-ring: var(--tone-ring);
-        --content-border-tone: var(--tone-border);
-        --content-border-subtle: var(--ui-border-subtle);
-        --content-blockquote-bg: var(--tone-wash);
-        --content-blockquote-fg: var(--tone-subtitle);
-        --content-link: var(--tone-link);
-        --content-link-hover: var(--tone-link-hover);
-        --content-link-visited: var(--tone-link-visited);
-        --content-link-active: var(--tone-link-active);
-        --content-border: var(--ui-border);
-        --content-code-bg: var(--tone-code-bg);
-        --content-code-fg: var(--tone-code-fg);
-        --content-bg-subtle: var(--ui-bg-subtle);
-    }
+    --content-heading-fg: var(--tone-heading);
+    --content-caption-fg: var(--tone-caption);
+    --content-ring: var(--tone-ring);
+    --content-border-tone: var(--tone-border);
+    --content-border-subtle: var(--ui-border-subtle);
+    --content-blockquote-bg: var(--tone-wash);
+    --content-blockquote-fg: var(--tone-subtitle);
+    --content-link: var(--tone-link);
+    --content-link-hover: var(--tone-link-hover);
+    --content-link-visited: var(--tone-link-visited);
+    --content-link-active: var(--tone-link-active);
+    --content-border: var(--ui-border);
+    --content-code-bg: var(--tone-code-bg);
+    --content-code-fg: var(--tone-code-fg);
+    --content-bg-subtle: var(--ui-bg-subtle);
+  }
-    .j-content.is-sm {
-        --content-font-size: var(--font-size-md);
-        --content-line-height: 1.65;
-        --content-paragraph-space: 1em;
-        --content-heading-space: 1.25em;
-        --content-block-space: 1.25em;
-    }
+  .j-content.is-sm {
+    --content-font-size: var(--font-size-md);
+    --content-line-height: 1.65;
+    --content-paragraph-space: 1em;
+    --content-heading-space: 1.25em;
+    --content-block-space: 1.25em;
+  }
-    .j-content.is-lg {
-        --content-font-size: var(--font-size-xl);
-        --content-line-height: 1.8;
-        --content-paragraph-space: 1.5em;
-        --content-heading-space: 1.75em;
-        --content-block-space: 1.75em;
-    }
+  .j-content.is-lg {
+    --content-font-size: var(--font-size-xl);
+    --content-line-height: 1.8;
+    --content-paragraph-space: 1.5em;
+    --content-heading-space: 1.75em;
+    --content-block-space: 1.75em;
+  }
-    .j-content.is-xl {
-        --content-font-size: var(--font-size-2xl);
-        --content-line-height: 1.85;
-        --content-paragraph-space: 1.75em;
-        --content-heading-space: 2em;
-        --content-block-space: 2em;
-    }
+  .j-content.is-xl {
+    --content-font-size: var(--font-size-2xl);
+    --content-line-height: 1.85;
+    --content-paragraph-space: 1.75em;
+    --content-heading-space: 2em;
+    --content-block-space: 2em;
+  }
-    .j-radius-round .j-content {
-        --radius-sm: .75rem;
-        --radius-md: 1rem;
-        --radius-lg: 1.5rem;
-    }
-}
+  .j-radius-round .j-content {
+    --radius-sm: 0.75rem;
+    --radius-md: 1rem;
+    --radius-lg: 1.5rem;
+  }
+}

package/src/css/themes/default/drop.css CHANGED Viewed

@@ -1,11 +1,11 @@
 @layer themes {
-    .j-drop {
-        --drop-border-width: 1px;
-        --drop-border-style: solid;
-        --drop-border-color: var(--ui-border);
-        --drop-border-radius: var(--radius-md);
-        --drop-fg: var(--ui-fg);
-        --drop-bg: var(--ui-bg);
-        --drop-box-shadow: var(--shadow-sm);
-    }
-}
+  .j-drop {
+    --drop-border-width: 1px;
+    --drop-border-style: solid;
+    --drop-border-color: var(--ui-border);
+    --drop-border-radius: var(--radius-md);
+    --drop-fg: var(--ui-fg);
+    --drop-bg: var(--ui-bg);
+    --drop-box-shadow: var(--shadow-sm);
+  }
+}

package/src/css/themes/default/editor.css CHANGED Viewed

@@ -1,10 +1,10 @@
 @layer themes {
-    #j-editor {
-        --editor-max-width: 880px;
-        --editor-min-height: calc(100vh - 51px);
-        --editor-padding: 1.5rem 1.5rem 4rem;
-        --editor-border-width: 1px;
-        --editor-border-style: solid;
-        --editor-border-color: var(--ui-border);
-    }
-}
+  #j-editor {
+    --editor-max-width: 880px;
+    --editor-min-height: calc(100vh - 51px);
+    --editor-padding: 1.5rem 1.5rem 4rem;
+    --editor-border-width: 1px;
+    --editor-border-style: solid;
+    --editor-border-color: var(--ui-border);
+  }
+}

package/src/css/themes/default/index.css CHANGED Viewed

@@ -20,4 +20,4 @@
 @import url('./theme-palette.css');
 @import url('./table.css');
 @import url('./pagination.css');
-@import url('./menu.css');
+@import url('./menu.css');