npm - mljr-css - Versions diffs - 0.1.0 - Mend

mljr-css 0.1.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.

Files changed (53) hide show

package/README.md +299 -0
package/dist/mljr.css +12214 -0
package/dist/mljr.min.css +3 -0
package/dist/plugin.cjs +139 -0
package/dist/plugin.d.cts +73 -0
package/dist/plugin.d.ts +73 -0
package/dist/plugin.js +102 -0
package/package.json +60 -0
package/src/base/reset.css +210 -0
package/src/base/typography.css +286 -0
package/src/components/accordion.css +210 -0
package/src/components/alert.css +231 -0
package/src/components/avatar.css +222 -0
package/src/components/badge.css +315 -0
package/src/components/breadcrumb.css +100 -0
package/src/components/button.css +383 -0
package/src/components/card.css +319 -0
package/src/components/carousel.css +179 -0
package/src/components/checkbox.css +303 -0
package/src/components/chip.css +207 -0
package/src/components/divider.css +248 -0
package/src/components/drawer.css +242 -0
package/src/components/dropdown.css +246 -0
package/src/components/empty-state.css +216 -0
package/src/components/file-upload.css +262 -0
package/src/components/footer.css +231 -0
package/src/components/input.css +504 -0
package/src/components/modal.css +179 -0
package/src/components/pagination.css +143 -0
package/src/components/password.css +449 -0
package/src/components/popover.css +175 -0
package/src/components/progress.css +165 -0
package/src/components/radio.css +200 -0
package/src/components/select.css +165 -0
package/src/components/sidebar.css +236 -0
package/src/components/skeleton.css +161 -0
package/src/components/spinner.css +259 -0
package/src/components/stepper.css +257 -0
package/src/components/table.css +184 -0
package/src/components/tabs.css +219 -0
package/src/components/textarea.css +164 -0
package/src/components/toast.css +294 -0
package/src/components/tooltip.css +99 -0
package/src/index.css +54 -0
package/src/layout/container.css +181 -0
package/src/layout/footer.css +319 -0
package/src/layout/header.css +223 -0
package/src/layout/navbar.css +461 -0
package/src/layout/navigation.css +328 -0
package/src/layout/sidebar.css +334 -0
package/src/plugin.ts +130 -0
package/src/themes/variables.css +345 -0
package/src/utilities/utilities.css +598 -0

package/src/layout/navbar.css ADDED Viewed

@@ -0,0 +1,461 @@
+/* ============================================
+   MLJR CSS Framework - Navbar Component
+   Claymorphism: Soft elevated navigation bar
+   ============================================ */
+.mljr-navbar {
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  background: linear-gradient(145deg, var(--mljr-bg) 0%, var(--mljr-bg-secondary) 100%);
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6);
+  border-radius: 0 0 var(--mljr-radius-xl) var(--mljr-radius-xl);
+  margin: var(--mljr-space-2);
+  margin-top: 0;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-top: none;
+}
+.mljr-navbar-fixed {
+  position: fixed;
+}
+.mljr-navbar-sticky {
+  position: sticky;
+}
+.mljr-navbar-transparent {
+  background: rgba(var(--mljr-bg-rgb, 255, 255, 255), 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.05),
+    inset 0 1px 2px rgba(255, 255, 255, 0.4);
+}
+.mljr-navbar-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: var(--mljr-space-3) var(--mljr-space-6);
+  min-height: 64px;
+}
+/* Start Section */
+.mljr-navbar-start {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-3);
+  flex: 1;
+}
+/* Mobile Toggle Button - Enhanced Claymorphism */
+.mljr-navbar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg) 100%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: var(--mljr-radius-lg);
+  color: var(--mljr-text);
+  cursor: pointer;
+  box-shadow:
+    4px 4px 8px rgba(0, 0, 0, 0.08),
+    -2px -2px 6px rgba(255, 255, 255, 0.7),
+    inset 0 1px 2px rgba(255, 255, 255, 0.5);
+  transition: all var(--mljr-transition-fast);
+}
+.mljr-navbar-toggle:hover {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow:
+    6px 6px 12px rgba(0, 0, 0, 0.1),
+    -3px -3px 8px rgba(255, 255, 255, 0.8),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6);
+}
+.mljr-navbar-toggle:active {
+  transform: translateY(0);
+  box-shadow:
+    inset 3px 3px 6px rgba(0, 0, 0, 0.1),
+    inset -2px -2px 4px rgba(255, 255, 255, 0.5);
+}
+@media (min-width: 1024px) {
+  .mljr-navbar-toggle {
+    display: none;
+  }
+}
+/* Logo */
+.mljr-navbar-logo {
+  display: flex;
+  align-items: center;
+  font-size: var(--mljr-text-xl);
+  font-weight: 700;
+  color: var(--mljr-text);
+  text-decoration: none;
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg) 100%);
+  border-radius: var(--mljr-radius-lg);
+  box-shadow:
+    3px 3px 6px rgba(0, 0, 0, 0.06),
+    -2px -2px 4px rgba(255, 255, 255, 0.6),
+    inset 0 1px 2px rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+/* Center Section - Desktop Navigation */
+.mljr-navbar-center {
+  display: none;
+  flex: 2;
+  justify-content: center;
+}
+@media (min-width: 1024px) {
+  .mljr-navbar-center {
+    display: flex;
+  }
+}
+.mljr-navbar-menu {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-1);
+  list-style: none;
+  margin: 0;
+  padding: var(--mljr-space-2);
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg-tertiary) 100%);
+  border-radius: var(--mljr-radius-full);
+  box-shadow:
+    inset 3px 3px 6px rgba(0, 0, 0, 0.06),
+    inset -2px -2px 4px rgba(255, 255, 255, 0.5),
+    1px 1px 2px rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.mljr-navbar-item {
+  position: relative;
+}
+.mljr-navbar-link {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  padding: var(--mljr-space-2) var(--mljr-space-4);
+  color: var(--mljr-text-secondary);
+  text-decoration: none;
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  border-radius: var(--mljr-radius-full);
+  transition: all var(--mljr-transition-fast);
+  background: transparent;
+  box-shadow: none;
+  border: 1px solid transparent;
+}
+.mljr-navbar-link:hover {
+  color: var(--mljr-text);
+  background: linear-gradient(145deg, var(--mljr-bg) 0%, var(--mljr-bg-secondary) 100%);
+  box-shadow:
+    3px 3px 6px rgba(0, 0, 0, 0.06),
+    -2px -2px 4px rgba(255, 255, 255, 0.5),
+    inset 0 1px 2px rgba(255, 255, 255, 0.5);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-1px);
+}
+.mljr-navbar-link-active {
+  color: var(--mljr-primary-600);
+  background: linear-gradient(145deg, var(--mljr-primary-100) 0%, rgba(249, 115, 22, 0.1) 100%);
+  box-shadow:
+    2px 2px 4px rgba(249, 115, 22, 0.15),
+    -1px -1px 3px rgba(255, 255, 255, 0.5),
+    inset 0 0 0 1.5px var(--mljr-primary-300);
+  border-color: var(--mljr-primary-200);
+}
+.mljr-navbar-link-icon {
+  opacity: 0.7;
+}
+/* Dropdown - Enhanced Claymorphism */
+.mljr-navbar-dropdown {
+  position: absolute;
+  top: calc(100% + var(--mljr-space-2));
+  left: 0;
+  min-width: 200px;
+  padding: var(--mljr-space-2);
+  background: linear-gradient(145deg, var(--mljr-bg) 0%, var(--mljr-bg-secondary) 100%);
+  border-radius: var(--mljr-radius-xl);
+  box-shadow:
+    8px 8px 24px rgba(0, 0, 0, 0.12),
+    4px 4px 12px rgba(0, 0, 0, 0.06),
+    -2px -2px 8px rgba(255, 255, 255, 0.5),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all var(--mljr-transition-fast);
+  z-index: 100;
+}
+.mljr-navbar-item-has-children:hover .mljr-navbar-dropdown {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.mljr-navbar-dropdown-menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.mljr-navbar-dropdown-link {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+  color: var(--mljr-text-secondary);
+  text-decoration: none;
+  font-size: var(--mljr-text-sm);
+  border-radius: var(--mljr-radius-lg);
+  transition: all var(--mljr-transition-fast);
+  background: transparent;
+  border: 1px solid transparent;
+}
+.mljr-navbar-dropdown-link:hover {
+  color: var(--mljr-text);
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg) 100%);
+  box-shadow:
+    3px 3px 6px rgba(0, 0, 0, 0.05),
+    -2px -2px 4px rgba(255, 255, 255, 0.5),
+    inset 0 1px 2px rgba(255, 255, 255, 0.4);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateX(4px);
+}
+.mljr-navbar-dropdown-link-active {
+  color: var(--mljr-primary-600);
+  background: linear-gradient(145deg, var(--mljr-primary-50) 0%, rgba(249, 115, 22, 0.05) 100%);
+  box-shadow: inset 0 0 0 1.5px var(--mljr-primary-200);
+}
+/* End Section */
+.mljr-navbar-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mljr-space-3);
+  flex: 1;
+}
+.mljr-navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-2);
+  padding: var(--mljr-space-2);
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg-tertiary) 100%);
+  border-radius: var(--mljr-radius-full);
+  box-shadow:
+    inset 2px 2px 4px rgba(0, 0, 0, 0.05),
+    inset -2px -2px 4px rgba(255, 255, 255, 0.4),
+    1px 1px 2px rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+/* Mobile Menu - Enhanced Claymorphism */
+.mljr-navbar-mobile {
+  display: block;
+  padding: var(--mljr-space-4);
+  background: linear-gradient(145deg, var(--mljr-bg) 0%, var(--mljr-bg-secondary) 100%);
+  border-top: none;
+  border-radius: 0 0 var(--mljr-radius-xl) var(--mljr-radius-xl);
+  box-shadow:
+    inset 0 4px 8px rgba(0, 0, 0, 0.05),
+    0 8px 24px rgba(0, 0, 0, 0.08);
+  animation: navbarMobileSlideDown 0.3s ease;
+}
+@keyframes navbarMobileSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (min-width: 1024px) {
+  .mljr-navbar-mobile {
+    display: none;
+  }
+}
+.mljr-navbar-mobile-nav {
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+}
+.mljr-navbar-mobile-menu {
+  list-style: none;
+  margin: 0;
+  padding: var(--mljr-space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-2);
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg-tertiary) 100%);
+  border-radius: var(--mljr-radius-xl);
+  box-shadow:
+    inset 3px 3px 6px rgba(0, 0, 0, 0.05),
+    inset -2px -2px 4px rgba(255, 255, 255, 0.4),
+    1px 1px 2px rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+.mljr-navbar-mobile-link {
+  display: flex;
+  align-items: center;
+  gap: var(--mljr-space-3);
+  padding: var(--mljr-space-3) var(--mljr-space-4);
+  color: var(--mljr-text-secondary);
+  text-decoration: none;
+  font-size: var(--mljr-text-base);
+  font-weight: 500;
+  border-radius: var(--mljr-radius-lg);
+  transition: all var(--mljr-transition-fast);
+  background: linear-gradient(145deg, var(--mljr-bg) 0%, var(--mljr-bg-secondary) 100%);
+  box-shadow:
+    3px 3px 6px rgba(0, 0, 0, 0.05),
+    -2px -2px 4px rgba(255, 255, 255, 0.5),
+    inset 0 1px 2px rgba(255, 255, 255, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.mljr-navbar-mobile-link:hover {
+  color: var(--mljr-text);
+  transform: translateX(4px);
+  box-shadow:
+    5px 5px 10px rgba(0, 0, 0, 0.08),
+    -3px -3px 6px rgba(255, 255, 255, 0.6),
+    inset 0 1px 2px rgba(255, 255, 255, 0.5);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+.mljr-navbar-mobile-link-active {
+  color: var(--mljr-primary-600);
+  background: linear-gradient(145deg, var(--mljr-primary-100) 0%, rgba(249, 115, 22, 0.1) 100%);
+  box-shadow:
+    2px 2px 4px rgba(249, 115, 22, 0.1),
+    -1px -1px 3px rgba(255, 255, 255, 0.5),
+    inset 0 0 0 2px var(--mljr-primary-300);
+  border-color: var(--mljr-primary-200);
+}
+.mljr-navbar-mobile-submenu {
+  list-style: none;
+  margin: var(--mljr-space-2) 0 0 var(--mljr-space-4);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-1);
+}
+.mljr-navbar-mobile-sublink {
+  display: block;
+  padding: var(--mljr-space-2) var(--mljr-space-4);
+  color: var(--mljr-text-muted);
+  text-decoration: none;
+  font-size: var(--mljr-text-sm);
+  border-radius: var(--mljr-radius-md);
+  transition: all var(--mljr-transition-fast);
+  background: transparent;
+}
+.mljr-navbar-mobile-sublink:hover {
+  color: var(--mljr-text);
+  background: linear-gradient(145deg, var(--mljr-bg-tertiary) 0%, var(--mljr-bg-secondary) 100%);
+  padding-left: var(--mljr-space-6);
+  box-shadow:
+    inset 2px 2px 4px rgba(0, 0, 0, 0.03),
+    inset -1px -1px 3px rgba(255, 255, 255, 0.3);
+}
+.mljr-navbar-mobile-sublink-active {
+  color: var(--mljr-primary-600);
+  background: linear-gradient(145deg, var(--mljr-primary-50) 0%, rgba(249, 115, 22, 0.05) 100%);
+  box-shadow: inset 0 0 0 1.5px var(--mljr-primary-200);
+}
+/* Dark Mode - Enhanced Claymorphism */
+.dark .mljr-navbar,
+[data-theme="dark"] .mljr-navbar {
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg-tertiary) 100%);
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.2),
+    0 2px 8px rgba(0, 0, 0, 0.1),
+    inset 0 1px 2px rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.dark .mljr-navbar-menu,
+[data-theme="dark"] .mljr-navbar-menu,
+.dark .mljr-navbar-actions,
+[data-theme="dark"] .mljr-navbar-actions {
+  background: linear-gradient(145deg, var(--mljr-bg-tertiary) 0%, var(--mljr-bg) 100%);
+  box-shadow:
+    inset 3px 3px 6px rgba(0, 0, 0, 0.2),
+    inset -2px -2px 4px rgba(68, 64, 60, 0.3),
+    1px 1px 2px rgba(68, 64, 60, 0.2);
+  border-color: rgba(255, 255, 255, 0.05);
+}
+.dark .mljr-navbar-link:hover,
+[data-theme="dark"] .mljr-navbar-link:hover {
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg-tertiary) 100%);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.dark .mljr-navbar-mobile-menu,
+[data-theme="dark"] .mljr-navbar-mobile-menu {
+  background: linear-gradient(145deg, var(--mljr-bg-tertiary) 0%, var(--mljr-bg) 100%);
+  box-shadow:
+    inset 3px 3px 6px rgba(0, 0, 0, 0.2),
+    inset -2px -2px 4px rgba(68, 64, 60, 0.2);
+}
+.dark .mljr-navbar-mobile-link,
+[data-theme="dark"] .mljr-navbar-mobile-link {
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg-tertiary) 100%);
+  box-shadow:
+    3px 3px 6px rgba(0, 0, 0, 0.15),
+    -2px -2px 4px rgba(68, 64, 60, 0.2),
+    inset 0 1px 2px rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.05);
+}
+.dark .mljr-navbar-dropdown,
+[data-theme="dark"] .mljr-navbar-dropdown {
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg-tertiary) 100%);
+  box-shadow:
+    8px 8px 24px rgba(0, 0, 0, 0.3),
+    4px 4px 12px rgba(0, 0, 0, 0.15),
+    -2px -2px 8px rgba(68, 64, 60, 0.2),
+    inset 0 1px 2px rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+}