🚀 Big News:Socket Has Acquired Secure Annex.Learn More →
minimaly-css
Advanced tools
minimaly-css - npm Package Compare versions
+15
| grid { | ||
| display: grid; | ||
| gap: 1rem; | ||
| } | ||
| grid.cols-2 { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| } | ||
| grid.cols-3 { | ||
| grid-template-columns: repeat(3, 1fr); | ||
| } | ||
| @media (max-width: 768px) { | ||
| grid.cols-2, grid.cols-3 { | ||
| grid-template-columns: 1fr; | ||
| } | ||
| } |
+46
-389
@@ -1,421 +0,78 @@ | ||
| accordion { | ||
| display: block; | ||
| border-radius: 6px; | ||
| overflow: hidden; | ||
| border: 1px solid #ccc; | ||
| } | ||
| accordion section { | ||
| margin-bottom: 0; | ||
| } | ||
| alert { | ||
| display: block; | ||
| padding: 1rem; | ||
| border-radius: 0.4rem; | ||
| margin: 1rem 0; | ||
| } | ||
| alert[type="success"] { | ||
| background-color: #d4edda; | ||
| color: #155724; | ||
| } | ||
| alert[type="error"] { | ||
| background-color: #f8d7da; | ||
| color: #721c24; | ||
| } | ||
| alert[type="warning"] { | ||
| background-color: #fff3cd; | ||
| color: #856404; | ||
| }* { | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: system-ui, sans-serif; | ||
| box-sizing: border-box; | ||
| } | ||
| body { | ||
| font-family: sans-serif; | ||
| line-height: 1.5; | ||
| background-color: #f8f9fa; | ||
| color: #333; | ||
| }container, .container { | ||
| display: block; | ||
| max-width: 1200px; | ||
| padding: 1rem; | ||
| }button { | ||
| padding: clamp(0.4rem, 1vw, 0.8rem) clamp(1rem, 2vw, 2rem); | ||
| font-size: clamp(0.9rem, 1.2vw, 1.1rem); | ||
| background-color: #007bff; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 0.4rem; | ||
| cursor: pointer; | ||
| } | ||
| button:hover { | ||
| background-color: #0056b3; | ||
| }card { | ||
| margin: 0 auto; | ||
| }form-group { | ||
| display: block; | ||
| background: white; | ||
| padding: clamp(1rem, 2vw, 2rem); | ||
| border-radius: 0.5rem; | ||
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); | ||
| margin-bottom: 1rem; | ||
| }main, | ||
| section, | ||
| article { | ||
| max-width: 1200px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| padding-left: 1rem; | ||
| padding-right: 1rem; | ||
| } | ||
| @media (max-width: 768px) { | ||
| main, | ||
| section, | ||
| article { | ||
| padding-left: 0.75rem; | ||
| padding-right: 0.75rem; | ||
| } | ||
| } | ||
| @media (max-width: 480px) { | ||
| main, | ||
| section, | ||
| article { | ||
| padding-left: 0.5rem; | ||
| padding-right: 0.5rem; | ||
| } | ||
| } | ||
| dropdown { | ||
| position: relative; | ||
| display: inline-block; | ||
| } | ||
| dropdown toggle { | ||
| background: #007bff; | ||
| color: white; | ||
| padding: 0.5rem 1rem; | ||
| border-radius: 0.3rem; | ||
| cursor: pointer; | ||
| user-select: none; | ||
| display: inline-block; | ||
| } | ||
| dropdown menu { | ||
| display: none; | ||
| position: absolute; | ||
| top: 100%; | ||
| left: 0; | ||
| background: white; | ||
| box-shadow: 0 4px 10px rgba(0,0,0,0.1); | ||
| border-radius: 0.3rem; | ||
| min-width: 150px; | ||
| z-index: 10; | ||
| } | ||
| dropdown menu a { | ||
| form-group > label { | ||
| display: block; | ||
| padding: 0.5rem 1rem; | ||
| text-decoration: none; | ||
| color: #333; | ||
| margin-bottom: 0.25rem; | ||
| } | ||
| dropdown menu a:hover { | ||
| background-color: #f1f1f1; | ||
| } | ||
| dropdown:hover menu { | ||
| display: block; | ||
| }form { | ||
| form-group > input, | ||
| form-group > textarea { | ||
| width: 100%; | ||
| padding: 0.5rem; | ||
| border: 1px solid #ccc; | ||
| }grid { | ||
| display: grid; | ||
| gap: 1rem; | ||
| max-width: 600px; | ||
| margin: auto; | ||
| padding: 1rem; | ||
| background: #fff; | ||
| border-radius: 8px; | ||
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); | ||
| } | ||
| form > label { | ||
| margin-top: 0.5rem; | ||
| font-weight: 500; | ||
| grid.cols-2 { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| } | ||
| form > input, | ||
| form > textarea { | ||
| padding: 0.75rem 1rem; | ||
| border: 1px solid #ccc; | ||
| border-radius: 6px; | ||
| font-size: 14px; | ||
| resize: vertical; | ||
| grid.cols-3 { | ||
| grid-template-columns: repeat(3, 1fr); | ||
| } | ||
| form > button { | ||
| padding: 0.5rem 1.5rem; | ||
| background: #222; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 6px; | ||
| cursor: pointer; | ||
| margin-top: 0.5rem; | ||
| justify-self: end; | ||
| } | ||
| form > button:hover { | ||
| background: #444; | ||
| } | ||
| @media (max-width: 480px) { | ||
| form > button { | ||
| justify-self: center; | ||
| width: 100%; | ||
| } | ||
| } | ||
| body { | ||
| display: grid; | ||
| grid-template-rows: 80px auto 1fr auto 50px; | ||
| grid-template-columns: 1fr 4fr 1fr; | ||
| grid-template-areas: | ||
| "header header header" | ||
| "left banner right" | ||
| "left main right" | ||
| "left low right" | ||
| "footer footer footer"; | ||
| height: 100vh; | ||
| gap: 0.5rem; | ||
| } | ||
| header { | ||
| grid-area: header; | ||
| } | ||
| main { | ||
| grid-area: main; | ||
| } | ||
| footer { | ||
| grid-area: footer; | ||
| } | ||
| div:nth-of-type(1) { | ||
| grid-area: banner; | ||
| } | ||
| div:nth-of-type(2) { | ||
| grid-area: low; | ||
| } | ||
| aside:nth-of-type(1) { | ||
| grid-area: left; | ||
| } | ||
| aside:nth-of-type(2) { | ||
| grid-area: right; | ||
| } | ||
| @media (max-width: 678px) { | ||
| body { | ||
| grid-template-rows: repeat(7, auto); | ||
| @media (max-width: 768px) { | ||
| grid.cols-2, grid.cols-3 { | ||
| grid-template-columns: 1fr; | ||
| grid-template-areas: | ||
| "header" | ||
| "banner" | ||
| "left" | ||
| "main" | ||
| "right" | ||
| "low" | ||
| "footer"; | ||
| } | ||
| } | ||
| @import "./base.css"; | ||
| @import "./layout.css"; | ||
| @import "./card.css"; | ||
| @import "./container.css"; | ||
| @import "./button.css"; | ||
| @import "./dropdown.css"; | ||
| @import "./alert.css"; | ||
| @import "./modal.css"; | ||
| @import "./flex-layout.css"; | ||
| @import "./grid-layout.css"; | ||
| @import "./accordion.css"; | ||
| @import "./base.css"; | ||
| @import "./form.css"; | ||
| @import "./inputgroup.css"; | ||
| @import "./navbar.css"; | ||
| @import "./tabs.css"; | ||
| @import "./toast.css"; | ||
| @import "./tooltip.css"; | ||
| .input-group { | ||
| }navbar { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| border: 1px solid #ccc; | ||
| border-radius: 6px; | ||
| overflow: hidden; | ||
| width: 100%; | ||
| max-width: 300px; | ||
| padding: 1rem; | ||
| background: #f8f9fa; | ||
| border-bottom: 1px solid #dee2e6; | ||
| transition: background 0.3s ease; | ||
| } | ||
| .input-group input { | ||
| flex: 1; | ||
| padding: 8px 12px; | ||
| border: none; | ||
| outline: none; | ||
| font-size: 14px; | ||
| navbar[sticky] { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 999; | ||
| } | ||
| .input-addon { | ||
| padding: 8px 12px; | ||
| background: #f3f3f3; | ||
| border-left: 1px solid #ccc; | ||
| border-right: 1px solid #ccc; | ||
| font-size: 14px; | ||
| cursor: default; | ||
| user-select: none; | ||
| navbar nav { | ||
| display: flex; | ||
| gap: 1rem; | ||
| } | ||
| .input-group button.input-addon { | ||
| background: #222; | ||
| color: white; | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
| .input-group button.input-addon:hover { | ||
| background: #444; | ||
| } | ||
| container { | ||
| navbar nav a { | ||
| text-decoration: none; | ||
| color: #333; | ||
| }tabs { | ||
| display: block; | ||
| max-width: 1200px; | ||
| margin: auto; | ||
| padding: 1rem; | ||
| } | ||
| row { | ||
| tabs > menu { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 1rem; | ||
| border-bottom: 1px solid #ccc; | ||
| } | ||
| col { | ||
| flex: 1 1 100%; | ||
| } | ||
| @media (min-width: 600px) { | ||
| col.half { | ||
| flex: 1 1 48%; | ||
| } | ||
| }modal { | ||
| position: relative; | ||
| } | ||
| .modal-content { | ||
| position: fixed; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%) scale(0); | ||
| background: white; | ||
| padding: 2rem; | ||
| box-shadow: 0 4px 10px rgba(0,0,0,0.2); | ||
| border-radius: 0.5rem; | ||
| z-index: 1000; | ||
| transition: 0.3s ease; | ||
| } | ||
| .modal-content.active { | ||
| transform: translate(-50%, -50%) scale(1); | ||
| } | ||
| .modal-overlay { | ||
| position: fixed; | ||
| inset: 0; | ||
| background: rgba(0,0,0,0.5); | ||
| z-index: 999; | ||
| display: none; | ||
| } | ||
| .modal-overlay.active { | ||
| display: block; | ||
| }nav { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| flex-wrap: wrap; | ||
| padding: 1rem; | ||
| max-width: 1200px; | ||
| margin: auto; | ||
| } | ||
| nav > a { | ||
| font-size: 1.2rem; | ||
| font-weight: bold; | ||
| text-decoration: none; | ||
| } | ||
| nav > button { | ||
| font-size: 1.8rem; | ||
| tabs > menu > button { | ||
| background: none; | ||
| border: none; | ||
| display: none; | ||
| padding: 0.5rem 1rem; | ||
| cursor: pointer; | ||
| } | ||
| nav > ul { | ||
| display: flex; | ||
| gap: 1.5rem; | ||
| list-style: none; | ||
| transition: max-height 0.4s ease-in-out; | ||
| overflow: hidden; | ||
| tabs > section { | ||
| display: none; | ||
| } | ||
| nav > ul > li > a { | ||
| text-decoration: none; | ||
| } | ||
| /* Mobile responsiveness */ | ||
| @media (max-width: 768px) { | ||
| nav > button { | ||
| display: block; | ||
| } | ||
| nav > ul { | ||
| flex-direction: column; | ||
| width: 100%; | ||
| max-height: 0; | ||
| } | ||
| nav[aria-expanded="true"] > ul { | ||
| max-height: 400px; | ||
| } | ||
| } | ||
| tabs { | ||
| tabs > section[active] { | ||
| display: block; | ||
| border: 1px solid #ccc; | ||
| padding: 10px; | ||
| border-radius: 6px; | ||
| } | ||
| tab { | ||
| display: none; | ||
| } | ||
| .toast { | ||
| position: fixed; | ||
| bottom: 20px; | ||
| right: 20px; | ||
| background: #333; | ||
| color: white; | ||
| padding: 10px 16px; | ||
| border-radius: 6px; | ||
| margin-top: 8px; | ||
| z-index: 9999; | ||
| opacity: 0.9; | ||
| transition: opacity 0.5s ease; | ||
| font-size: 14px; | ||
| } | ||
| .toast-success { | ||
| background-color: #4caf50; | ||
| } | ||
| .toast-error { | ||
| background-color: #f44336; | ||
| } | ||
| .toast-info { | ||
| background-color: #2196f3; | ||
| } | ||
| .toast.fade-out { | ||
| opacity: 0; | ||
| } | ||
| .tooltip-bubble { | ||
| position: absolute; | ||
| bottom: 120%; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| background: #333; | ||
| color: #fff; | ||
| padding: 4px 8px; | ||
| border-radius: 4px; | ||
| white-space: nowrap; | ||
| font-size: 12px; | ||
| opacity: 0; | ||
| transition: opacity 0.3s ease; | ||
| pointer-events: none; | ||
| z-index: 1000; | ||
| } | ||
| } |
+11
-152
@@ -1,153 +0,12 @@ | ||
| // Minimaly.js | ||
| // A lightweight JavaScript library for creating UI components | ||
| //toast | ||
| window.showToast = function (message, type = "info", duration = 3000) { | ||
| const toast = document.createElement("div"); | ||
| toast.className = `toast toast-${type}`; | ||
| toast.textContent = message; | ||
| document.body.appendChild(toast); | ||
| setTimeout(() => { | ||
| toast.classList.add("fade-out"); | ||
| toast.addEventListener("transitionend", () => toast.remove()); | ||
| }, duration); | ||
| }; | ||
| //modal and tabs | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| document.querySelectorAll("modal").forEach((modal) => { | ||
| const toggleText = modal.getAttribute("toggle") || "Open"; | ||
| const btn = document.createElement("button"); | ||
| btn.textContent = toggleText; | ||
| modal.insertBefore(btn, modal.firstChild); | ||
| const content = document.createElement("div"); | ||
| content.className = "modal-content"; | ||
| content.innerHTML = modal.innerHTML; | ||
| modal.innerHTML = ""; | ||
| modal.appendChild(btn); | ||
| modal.appendChild(content); | ||
| const overlay = document.createElement("div"); | ||
| overlay.className = "modal-overlay"; | ||
| document.body.appendChild(overlay); | ||
| btn.addEventListener("click", () => { | ||
| content.classList.add("active"); | ||
| overlay.classList.add("active"); | ||
| }); | ||
| overlay.addEventListener("click", () => { | ||
| content.classList.remove("active"); | ||
| overlay.classList.remove("active"); | ||
| }); | ||
| document.querySelectorAll("tabs").forEach(tab => { | ||
| const buttons = tab.querySelectorAll("menu > button"); | ||
| const sections = tab.querySelectorAll("section"); | ||
| buttons.forEach((btn, i) => { | ||
| btn.onclick = () => { | ||
| buttons.forEach(b => b.removeAttribute("active")); | ||
| sections.forEach(s => s.removeAttribute("active")); | ||
| btn.setAttribute("active", ""); | ||
| sections[i].setAttribute("active", ""); | ||
| }; | ||
| }); | ||
| document.querySelectorAll("tabs").forEach((tabs) => { | ||
| const tabHeaders = document.createElement("div"); | ||
| tabHeaders.style.display = "flex"; | ||
| tabHeaders.style.gap = "10px"; | ||
| tabHeaders.style.marginBottom = "10px"; | ||
| const tabContents = Array.from(tabs.querySelectorAll("tab")); | ||
| tabContents.forEach((tab, index) => { | ||
| const title = tab.getAttribute("title") || `Tab ${index + 1}`; | ||
| const btn = document.createElement("button"); | ||
| btn.textContent = title; | ||
| btn.style.padding = "5px 10px"; | ||
| btn.style.cursor = "pointer"; | ||
| btn.style.border = "1px solid #ccc"; | ||
| btn.style.background = "#f0f0f0"; | ||
| if (index === 0) { | ||
| tab.style.display = "block"; | ||
| btn.style.background = "#ddd"; | ||
| } else { | ||
| tab.style.display = "none"; | ||
| } | ||
| btn.addEventListener("click", () => { | ||
| tabContents.forEach((t) => (t.style.display = "none")); | ||
| tabs | ||
| .querySelectorAll("button") | ||
| .forEach((b) => (b.style.background = "#f0f0f0")); | ||
| tab.style.display = "block"; | ||
| btn.style.background = "#ddd"; | ||
| }); | ||
| tabHeaders.appendChild(btn); | ||
| }); | ||
| tabs.prepend(tabHeaders); | ||
| }); | ||
| }); | ||
| //accordion | ||
| // This code creates an accordion component | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| document.querySelectorAll("accordion").forEach((acc) => { | ||
| const sections = acc.querySelectorAll("section"); | ||
| sections.forEach((section, index) => { | ||
| const title = section.getAttribute("title") || `Section ${index + 1}`; | ||
| const header = document.createElement("div"); | ||
| header.textContent = title; | ||
| header.style.cursor = "pointer"; | ||
| header.style.background = "#f9f9f9"; | ||
| header.style.padding = "8px"; | ||
| header.style.border = "1px solid #ddd"; | ||
| header.style.borderBottom = "none"; | ||
| header.style.fontWeight = "bold"; | ||
| const content = document.createElement("div"); | ||
| content.innerHTML = section.innerHTML; | ||
| content.style.border = "1px solid #ddd"; | ||
| content.style.borderTop = "none"; | ||
| content.style.padding = "10px"; | ||
| content.style.display = "none"; | ||
| header.addEventListener("click", () => { | ||
| const isVisible = content.style.display === "block"; | ||
| acc | ||
| .querySelectorAll("div[accordion-content]") | ||
| .forEach((c) => (c.style.display = "none")); | ||
| content.style.display = isVisible ? "none" : "block"; | ||
| }); | ||
| content.setAttribute("accordion-content", ""); | ||
| section.innerHTML = ""; | ||
| section.appendChild(header); | ||
| section.appendChild(content); | ||
| }); | ||
| }); | ||
| }); | ||
| //tooltip | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| document.querySelectorAll("[tooltip]").forEach((el) => { | ||
| const message = el.getAttribute("tooltip"); | ||
| const tooltip = document.createElement("div"); | ||
| tooltip.className = "tooltip-bubble"; | ||
| tooltip.textContent = message; | ||
| el.style.position = "relative"; | ||
| el.appendChild(tooltip); | ||
| el.addEventListener("mouseenter", () => { | ||
| tooltip.style.opacity = "1"; | ||
| }); | ||
| el.addEventListener("mouseleave", () => { | ||
| tooltip.style.opacity = "0"; | ||
| }); | ||
| }); | ||
| }); | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const nav = document.querySelector("nav"); | ||
| const toggle = nav.querySelector("button"); | ||
| toggle.addEventListener("click", () => { | ||
| const expanded = nav.getAttribute("aria-expanded") === "true"; | ||
| nav.setAttribute("aria-expanded", !expanded); | ||
| }); | ||
| }); | ||
| }); |
+1
-1
| { | ||
| "name": "minimaly-css", | ||
| "version": "1.2.7", | ||
| "version": "1.2.8", | ||
| "description": "Minimal, semantic, avtomatik responsiv va interaktiv CSS framework", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.css", |
+2
-8
@@ -1,12 +0,6 @@ | ||
| * { | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: system-ui, sans-serif; | ||
| box-sizing: border-box; | ||
| } | ||
| body { | ||
| font-family: sans-serif; | ||
| line-height: 1.5; | ||
| background-color: #f8f9fa; | ||
| color: #333; | ||
| padding: 1rem; | ||
| } |
+5
-26
@@ -1,27 +0,6 @@ | ||
| main, | ||
| section, | ||
| article { | ||
| container, .container { | ||
| display: block; | ||
| max-width: 1200px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| padding-left: 1rem; | ||
| padding-right: 1rem; | ||
| } | ||
| @media (max-width: 768px) { | ||
| main, | ||
| section, | ||
| article { | ||
| padding-left: 0.75rem; | ||
| padding-right: 0.75rem; | ||
| } | ||
| } | ||
| @media (max-width: 480px) { | ||
| main, | ||
| section, | ||
| article { | ||
| padding-left: 0.5rem; | ||
| padding-right: 0.5rem; | ||
| } | ||
| } | ||
| padding: 1rem; | ||
| margin: 0 auto; | ||
| } |
+11
-43
@@ -1,46 +0,14 @@ | ||
| form { | ||
| display: grid; | ||
| gap: 1rem; | ||
| max-width: 600px; | ||
| margin: auto; | ||
| padding: 1rem; | ||
| background: #fff; | ||
| border-radius: 8px; | ||
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); | ||
| form-group { | ||
| display: block; | ||
| margin-bottom: 1rem; | ||
| } | ||
| form > label { | ||
| margin-top: 0.5rem; | ||
| font-weight: 500; | ||
| form-group > label { | ||
| display: block; | ||
| margin-bottom: 0.25rem; | ||
| } | ||
| form > input, | ||
| form > textarea { | ||
| padding: 0.75rem 1rem; | ||
| form-group > input, | ||
| form-group > textarea { | ||
| width: 100%; | ||
| padding: 0.5rem; | ||
| border: 1px solid #ccc; | ||
| border-radius: 6px; | ||
| font-size: 14px; | ||
| resize: vertical; | ||
| } | ||
| form > button { | ||
| padding: 0.5rem 1.5rem; | ||
| background: #222; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 6px; | ||
| cursor: pointer; | ||
| margin-top: 0.5rem; | ||
| justify-self: end; | ||
| } | ||
| form > button:hover { | ||
| background: #444; | ||
| } | ||
| @media (max-width: 480px) { | ||
| form > button { | ||
| justify-self: center; | ||
| width: 100%; | ||
| } | ||
| } | ||
| } |
+11
-152
@@ -1,153 +0,12 @@ | ||
| // Minimaly.js | ||
| // A lightweight JavaScript library for creating UI components | ||
| //toast | ||
| window.showToast = function (message, type = "info", duration = 3000) { | ||
| const toast = document.createElement("div"); | ||
| toast.className = `toast toast-${type}`; | ||
| toast.textContent = message; | ||
| document.body.appendChild(toast); | ||
| setTimeout(() => { | ||
| toast.classList.add("fade-out"); | ||
| toast.addEventListener("transitionend", () => toast.remove()); | ||
| }, duration); | ||
| }; | ||
| //modal and tabs | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| document.querySelectorAll("modal").forEach((modal) => { | ||
| const toggleText = modal.getAttribute("toggle") || "Open"; | ||
| const btn = document.createElement("button"); | ||
| btn.textContent = toggleText; | ||
| modal.insertBefore(btn, modal.firstChild); | ||
| const content = document.createElement("div"); | ||
| content.className = "modal-content"; | ||
| content.innerHTML = modal.innerHTML; | ||
| modal.innerHTML = ""; | ||
| modal.appendChild(btn); | ||
| modal.appendChild(content); | ||
| const overlay = document.createElement("div"); | ||
| overlay.className = "modal-overlay"; | ||
| document.body.appendChild(overlay); | ||
| btn.addEventListener("click", () => { | ||
| content.classList.add("active"); | ||
| overlay.classList.add("active"); | ||
| }); | ||
| overlay.addEventListener("click", () => { | ||
| content.classList.remove("active"); | ||
| overlay.classList.remove("active"); | ||
| }); | ||
| document.querySelectorAll("tabs").forEach(tab => { | ||
| const buttons = tab.querySelectorAll("menu > button"); | ||
| const sections = tab.querySelectorAll("section"); | ||
| buttons.forEach((btn, i) => { | ||
| btn.onclick = () => { | ||
| buttons.forEach(b => b.removeAttribute("active")); | ||
| sections.forEach(s => s.removeAttribute("active")); | ||
| btn.setAttribute("active", ""); | ||
| sections[i].setAttribute("active", ""); | ||
| }; | ||
| }); | ||
| document.querySelectorAll("tabs").forEach((tabs) => { | ||
| const tabHeaders = document.createElement("div"); | ||
| tabHeaders.style.display = "flex"; | ||
| tabHeaders.style.gap = "10px"; | ||
| tabHeaders.style.marginBottom = "10px"; | ||
| const tabContents = Array.from(tabs.querySelectorAll("tab")); | ||
| tabContents.forEach((tab, index) => { | ||
| const title = tab.getAttribute("title") || `Tab ${index + 1}`; | ||
| const btn = document.createElement("button"); | ||
| btn.textContent = title; | ||
| btn.style.padding = "5px 10px"; | ||
| btn.style.cursor = "pointer"; | ||
| btn.style.border = "1px solid #ccc"; | ||
| btn.style.background = "#f0f0f0"; | ||
| if (index === 0) { | ||
| tab.style.display = "block"; | ||
| btn.style.background = "#ddd"; | ||
| } else { | ||
| tab.style.display = "none"; | ||
| } | ||
| btn.addEventListener("click", () => { | ||
| tabContents.forEach((t) => (t.style.display = "none")); | ||
| tabs | ||
| .querySelectorAll("button") | ||
| .forEach((b) => (b.style.background = "#f0f0f0")); | ||
| tab.style.display = "block"; | ||
| btn.style.background = "#ddd"; | ||
| }); | ||
| tabHeaders.appendChild(btn); | ||
| }); | ||
| tabs.prepend(tabHeaders); | ||
| }); | ||
| }); | ||
| //accordion | ||
| // This code creates an accordion component | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| document.querySelectorAll("accordion").forEach((acc) => { | ||
| const sections = acc.querySelectorAll("section"); | ||
| sections.forEach((section, index) => { | ||
| const title = section.getAttribute("title") || `Section ${index + 1}`; | ||
| const header = document.createElement("div"); | ||
| header.textContent = title; | ||
| header.style.cursor = "pointer"; | ||
| header.style.background = "#f9f9f9"; | ||
| header.style.padding = "8px"; | ||
| header.style.border = "1px solid #ddd"; | ||
| header.style.borderBottom = "none"; | ||
| header.style.fontWeight = "bold"; | ||
| const content = document.createElement("div"); | ||
| content.innerHTML = section.innerHTML; | ||
| content.style.border = "1px solid #ddd"; | ||
| content.style.borderTop = "none"; | ||
| content.style.padding = "10px"; | ||
| content.style.display = "none"; | ||
| header.addEventListener("click", () => { | ||
| const isVisible = content.style.display === "block"; | ||
| acc | ||
| .querySelectorAll("div[accordion-content]") | ||
| .forEach((c) => (c.style.display = "none")); | ||
| content.style.display = isVisible ? "none" : "block"; | ||
| }); | ||
| content.setAttribute("accordion-content", ""); | ||
| section.innerHTML = ""; | ||
| section.appendChild(header); | ||
| section.appendChild(content); | ||
| }); | ||
| }); | ||
| }); | ||
| //tooltip | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| document.querySelectorAll("[tooltip]").forEach((el) => { | ||
| const message = el.getAttribute("tooltip"); | ||
| const tooltip = document.createElement("div"); | ||
| tooltip.className = "tooltip-bubble"; | ||
| tooltip.textContent = message; | ||
| el.style.position = "relative"; | ||
| el.appendChild(tooltip); | ||
| el.addEventListener("mouseenter", () => { | ||
| tooltip.style.opacity = "1"; | ||
| }); | ||
| el.addEventListener("mouseleave", () => { | ||
| tooltip.style.opacity = "0"; | ||
| }); | ||
| }); | ||
| }); | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const nav = document.querySelector("nav"); | ||
| const toggle = nav.querySelector("button"); | ||
| toggle.addEventListener("click", () => { | ||
| const expanded = nav.getAttribute("aria-expanded") === "true"; | ||
| nav.setAttribute("aria-expanded", !expanded); | ||
| }); | ||
| }); | ||
| }); |
+13
-43
@@ -1,52 +0,22 @@ | ||
| nav { | ||
| navbar { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| flex-wrap: wrap; | ||
| padding: 1rem; | ||
| max-width: 1200px; | ||
| margin: auto; | ||
| background: #f8f9fa; | ||
| border-bottom: 1px solid #dee2e6; | ||
| transition: background 0.3s ease; | ||
| } | ||
| nav > a { | ||
| font-size: 1.2rem; | ||
| font-weight: bold; | ||
| text-decoration: none; | ||
| navbar[sticky] { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 999; | ||
| } | ||
| nav > button { | ||
| font-size: 1.8rem; | ||
| background: none; | ||
| border: none; | ||
| display: none; | ||
| cursor: pointer; | ||
| } | ||
| nav > ul { | ||
| navbar nav { | ||
| display: flex; | ||
| gap: 1.5rem; | ||
| list-style: none; | ||
| transition: max-height 0.4s ease-in-out; | ||
| overflow: hidden; | ||
| gap: 1rem; | ||
| } | ||
| nav > ul > li > a { | ||
| navbar nav a { | ||
| text-decoration: none; | ||
| } | ||
| /* Mobile responsiveness */ | ||
| @media (max-width: 768px) { | ||
| nav > button { | ||
| display: block; | ||
| } | ||
| nav > ul { | ||
| flex-direction: column; | ||
| width: 100%; | ||
| max-height: 0; | ||
| } | ||
| nav[aria-expanded="true"] > ul { | ||
| max-height: 400px; | ||
| } | ||
| } | ||
| color: #333; | ||
| } |
+15
-5
| tabs { | ||
| display: block; | ||
| border: 1px solid #ccc; | ||
| padding: 10px; | ||
| border-radius: 6px; | ||
| } | ||
| tab { | ||
| tabs > menu { | ||
| display: flex; | ||
| gap: 1rem; | ||
| border-bottom: 1px solid #ccc; | ||
| } | ||
| tabs > menu > button { | ||
| background: none; | ||
| border: none; | ||
| padding: 0.5rem 1rem; | ||
| cursor: pointer; | ||
| } | ||
| tabs > section { | ||
| display: none; | ||
| } | ||
| tabs > section[active] { | ||
| display: block; | ||
| } |
| accordion { | ||
| display: block; | ||
| border-radius: 6px; | ||
| overflow: hidden; | ||
| border: 1px solid #ccc; | ||
| } | ||
| accordion section { | ||
| margin-bottom: 0; | ||
| } |
| alert { | ||
| display: block; | ||
| padding: 1rem; | ||
| border-radius: 0.4rem; | ||
| margin: 1rem 0; | ||
| } | ||
| alert[type="success"] { | ||
| background-color: #d4edda; | ||
| color: #155724; | ||
| } | ||
| alert[type="error"] { | ||
| background-color: #f8d7da; | ||
| color: #721c24; | ||
| } | ||
| alert[type="warning"] { | ||
| background-color: #fff3cd; | ||
| color: #856404; | ||
| } |
| button { | ||
| padding: clamp(0.4rem, 1vw, 0.8rem) clamp(1rem, 2vw, 2rem); | ||
| font-size: clamp(0.9rem, 1.2vw, 1.1rem); | ||
| background-color: #007bff; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 0.4rem; | ||
| cursor: pointer; | ||
| } | ||
| button:hover { | ||
| background-color: #0056b3; | ||
| } |
| card { | ||
| display: block; | ||
| background: white; | ||
| padding: clamp(1rem, 2vw, 2rem); | ||
| border-radius: 0.5rem; | ||
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); | ||
| margin-bottom: 1rem; | ||
| } |
| dropdown { | ||
| position: relative; | ||
| display: inline-block; | ||
| } | ||
| dropdown toggle { | ||
| background: #007bff; | ||
| color: white; | ||
| padding: 0.5rem 1rem; | ||
| border-radius: 0.3rem; | ||
| cursor: pointer; | ||
| user-select: none; | ||
| display: inline-block; | ||
| } | ||
| dropdown menu { | ||
| display: none; | ||
| position: absolute; | ||
| top: 100%; | ||
| left: 0; | ||
| background: white; | ||
| box-shadow: 0 4px 10px rgba(0,0,0,0.1); | ||
| border-radius: 0.3rem; | ||
| min-width: 150px; | ||
| z-index: 10; | ||
| } | ||
| dropdown menu a { | ||
| display: block; | ||
| padding: 0.5rem 1rem; | ||
| text-decoration: none; | ||
| color: #333; | ||
| } | ||
| dropdown menu a:hover { | ||
| background-color: #f1f1f1; | ||
| } | ||
| dropdown:hover menu { | ||
| display: block; | ||
| } |
| body { | ||
| display: grid; | ||
| grid-template-rows: 80px auto 1fr auto 50px; | ||
| grid-template-columns: 1fr 4fr 1fr; | ||
| grid-template-areas: | ||
| "header header header" | ||
| "left banner right" | ||
| "left main right" | ||
| "left low right" | ||
| "footer footer footer"; | ||
| height: 100vh; | ||
| gap: 0.5rem; | ||
| } | ||
| header { | ||
| grid-area: header; | ||
| } | ||
| main { | ||
| grid-area: main; | ||
| } | ||
| footer { | ||
| grid-area: footer; | ||
| } | ||
| div:nth-of-type(1) { | ||
| grid-area: banner; | ||
| } | ||
| div:nth-of-type(2) { | ||
| grid-area: low; | ||
| } | ||
| aside:nth-of-type(1) { | ||
| grid-area: left; | ||
| } | ||
| aside:nth-of-type(2) { | ||
| grid-area: right; | ||
| } | ||
| @media (max-width: 678px) { | ||
| body { | ||
| grid-template-rows: repeat(7, auto); | ||
| grid-template-columns: 1fr; | ||
| grid-template-areas: | ||
| "header" | ||
| "banner" | ||
| "left" | ||
| "main" | ||
| "right" | ||
| "low" | ||
| "footer"; | ||
| } | ||
| } |
| @import "./base.css"; | ||
| @import "./layout.css"; | ||
| @import "./card.css"; | ||
| @import "./container.css"; | ||
| @import "./button.css"; | ||
| @import "./dropdown.css"; | ||
| @import "./alert.css"; | ||
| @import "./modal.css"; | ||
| @import "./flex-layout.css"; | ||
| @import "./grid-layout.css"; | ||
| @import "./accordion.css"; | ||
| @import "./base.css"; | ||
| @import "./form.css"; | ||
| @import "./inputgroup.css"; | ||
| @import "./navbar.css"; | ||
| @import "./tabs.css"; | ||
| @import "./toast.css"; | ||
| @import "./tooltip.css"; |
| .input-group { | ||
| display: flex; | ||
| align-items: center; | ||
| border: 1px solid #ccc; | ||
| border-radius: 6px; | ||
| overflow: hidden; | ||
| width: 100%; | ||
| max-width: 300px; | ||
| } | ||
| .input-group input { | ||
| flex: 1; | ||
| padding: 8px 12px; | ||
| border: none; | ||
| outline: none; | ||
| font-size: 14px; | ||
| } | ||
| .input-addon { | ||
| padding: 8px 12px; | ||
| background: #f3f3f3; | ||
| border-left: 1px solid #ccc; | ||
| border-right: 1px solid #ccc; | ||
| font-size: 14px; | ||
| cursor: default; | ||
| user-select: none; | ||
| } | ||
| .input-group button.input-addon { | ||
| background: #222; | ||
| color: white; | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
| .input-group button.input-addon:hover { | ||
| background: #444; | ||
| } |
| container { | ||
| display: block; | ||
| max-width: 1200px; | ||
| margin: auto; | ||
| padding: 1rem; | ||
| } | ||
| row { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 1rem; | ||
| } | ||
| col { | ||
| flex: 1 1 100%; | ||
| } | ||
| @media (min-width: 600px) { | ||
| col.half { | ||
| flex: 1 1 48%; | ||
| } | ||
| } |
| modal { | ||
| position: relative; | ||
| } | ||
| .modal-content { | ||
| position: fixed; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%) scale(0); | ||
| background: white; | ||
| padding: 2rem; | ||
| box-shadow: 0 4px 10px rgba(0,0,0,0.2); | ||
| border-radius: 0.5rem; | ||
| z-index: 1000; | ||
| transition: 0.3s ease; | ||
| } | ||
| .modal-content.active { | ||
| transform: translate(-50%, -50%) scale(1); | ||
| } | ||
| .modal-overlay { | ||
| position: fixed; | ||
| inset: 0; | ||
| background: rgba(0,0,0,0.5); | ||
| z-index: 999; | ||
| display: none; | ||
| } | ||
| .modal-overlay.active { | ||
| display: block; | ||
| } |
| .toast { | ||
| position: fixed; | ||
| bottom: 20px; | ||
| right: 20px; | ||
| background: #333; | ||
| color: white; | ||
| padding: 10px 16px; | ||
| border-radius: 6px; | ||
| margin-top: 8px; | ||
| z-index: 9999; | ||
| opacity: 0.9; | ||
| transition: opacity 0.5s ease; | ||
| font-size: 14px; | ||
| } | ||
| .toast-success { | ||
| background-color: #4caf50; | ||
| } | ||
| .toast-error { | ||
| background-color: #f44336; | ||
| } | ||
| .toast-info { | ||
| background-color: #2196f3; | ||
| } | ||
| .toast.fade-out { | ||
| opacity: 0; | ||
| } |
| .tooltip-bubble { | ||
| position: absolute; | ||
| bottom: 120%; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| background: #333; | ||
| color: #fff; | ||
| padding: 4px 8px; | ||
| border-radius: 4px; | ||
| white-space: nowrap; | ||
| font-size: 12px; | ||
| opacity: 0; | ||
| transition: opacity 0.3s ease; | ||
| pointer-events: none; | ||
| z-index: 1000; | ||
| } |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
4577
-82%- Number of package files
11
-52.17%- Lines of code
176
-83.33%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes