From 01866fc36f472280e9426cff629e5d23af5b84a1 Mon Sep 17 00:00:00 2001
From: Filippo Maria Grilli
Date: Fri, 29 Nov 2024 15:50:36 +0100
Subject: [PATCH 01/12] sidebar - fixed colapsable without href causing error
---
src/js/bundle.js | 3 ++-
src/js/components/sidebar.js | 3 ++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/js/bundle.js b/src/js/bundle.js
index ea0769d..eed604d 100644
--- a/src/js/bundle.js
+++ b/src/js/bundle.js
@@ -1680,7 +1680,8 @@ class KromaSidebar {
for(var i = 0; i < this.pages.length; i++){
var li = document.createElement('li');
- li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent
+ //remove href from collapsable parent
+ if (li.querySelector('a') && element.hasAttribute('href')) {li.querySelector('a').removeAttribute('href');}
li.classList.add('no-selection');
//parent page
diff --git a/src/js/components/sidebar.js b/src/js/components/sidebar.js
index 8d67378..48d50c1 100644
--- a/src/js/components/sidebar.js
+++ b/src/js/components/sidebar.js
@@ -138,7 +138,8 @@ class KromaSidebar {
for(var i = 0; i < this.pages.length; i++){
var li = document.createElement('li');
- li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent
+ //remove href from collapsable parent
+ if (li.querySelector('a') && element.hasAttribute('href')) {li.querySelector('a').removeAttribute('href');}
li.classList.add('no-selection');
//parent page
From f42cd446a927b4e429c6a26cf0fed7ce4cff92cc Mon Sep 17 00:00:00 2001
From: Filippo Maria Grilli
Date: Fri, 29 Nov 2024 15:53:35 +0100
Subject: [PATCH 02/12] navbar - fixed avatar overflowing size
---
src/css/bundle.css | 4 ++++
src/css/components/navbar.css | 5 +++++
2 files changed, 9 insertions(+)
diff --git a/src/css/bundle.css b/src/css/bundle.css
index afe10ab..3a210d9 100644
--- a/src/css/bundle.css
+++ b/src/css/bundle.css
@@ -3775,6 +3775,10 @@ background: var(--variant-hover-bg);
color: var(--variant-hover);
}
+.kroma-navbar .kroma-avatar {
+ max-width: calc(var(--nav-size-base) / 1.5);
+ max-height: calc(var(--nav-size-base) / 1.5);
+}
/* --- pagination.css --- */
diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css
index 743405f..c2e7a23 100644
--- a/src/css/components/navbar.css
+++ b/src/css/components/navbar.css
@@ -188,3 +188,8 @@ background: var(--variant-hover-bg);
color: var(--variant-hover);
}
+.kroma-navbar .kroma-avatar {
+ max-width: calc(var(--nav-size-base) / 1.5);
+ max-height: calc(var(--nav-size-base) / 1.5);
+}
+
From b7dbb0de8ad52b25a0cffe5572cc4d2288411e1b Mon Sep 17 00:00:00 2001
From: Filippo Maria Grilli
Date: Fri, 29 Nov 2024 16:21:40 +0100
Subject: [PATCH 03/12] Revert "navbar - fixed avatar overflowing size"
This reverts commit f42cd446a927b4e429c6a26cf0fed7ce4cff92cc.
---
src/css/bundle.css | 4 ----
src/css/components/navbar.css | 5 -----
2 files changed, 9 deletions(-)
diff --git a/src/css/bundle.css b/src/css/bundle.css
index 3a210d9..afe10ab 100644
--- a/src/css/bundle.css
+++ b/src/css/bundle.css
@@ -3775,10 +3775,6 @@ background: var(--variant-hover-bg);
color: var(--variant-hover);
}
-.kroma-navbar .kroma-avatar {
- max-width: calc(var(--nav-size-base) / 1.5);
- max-height: calc(var(--nav-size-base) / 1.5);
-}
/* --- pagination.css --- */
diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css
index c2e7a23..743405f 100644
--- a/src/css/components/navbar.css
+++ b/src/css/components/navbar.css
@@ -188,8 +188,3 @@ background: var(--variant-hover-bg);
color: var(--variant-hover);
}
-.kroma-navbar .kroma-avatar {
- max-width: calc(var(--nav-size-base) / 1.5);
- max-height: calc(var(--nav-size-base) / 1.5);
-}
-
From b8cfc5f491616f2b8263919ce8374076d0e266af Mon Sep 17 00:00:00 2001
From: Filippo Maria Grilli
Date: Fri, 29 Nov 2024 16:21:50 +0100
Subject: [PATCH 04/12] Revert "sidebar - fixed colapsable without href causing
error"
This reverts commit 01866fc36f472280e9426cff629e5d23af5b84a1.
---
src/js/bundle.js | 3 +--
src/js/components/sidebar.js | 3 +--
2 files changed, 2 insertions(+), 4 deletions(-)
diff --git a/src/js/bundle.js b/src/js/bundle.js
index eed604d..ea0769d 100644
--- a/src/js/bundle.js
+++ b/src/js/bundle.js
@@ -1680,8 +1680,7 @@ class KromaSidebar {
for(var i = 0; i < this.pages.length; i++){
var li = document.createElement('li');
- //remove href from collapsable parent
- if (li.querySelector('a') && element.hasAttribute('href')) {li.querySelector('a').removeAttribute('href');}
+ li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent
li.classList.add('no-selection');
//parent page
diff --git a/src/js/components/sidebar.js b/src/js/components/sidebar.js
index 48d50c1..8d67378 100644
--- a/src/js/components/sidebar.js
+++ b/src/js/components/sidebar.js
@@ -138,8 +138,7 @@ class KromaSidebar {
for(var i = 0; i < this.pages.length; i++){
var li = document.createElement('li');
- //remove href from collapsable parent
- if (li.querySelector('a') && element.hasAttribute('href')) {li.querySelector('a').removeAttribute('href');}
+ li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent
li.classList.add('no-selection');
//parent page
From 480e509a0b6ea92e48a29a986e184a8d4004a459 Mon Sep 17 00:00:00 2001
From: Filippo Maria Grilli
Date: Fri, 29 Nov 2024 16:21:54 +0100
Subject: [PATCH 05/12] Revert "Fix bundles"
This reverts commit f84b52a0f0b5285e9654003eb469e67a8d36d137.
---
src/css/bundle.css | 214 +++++++++++++++++++++++++++++++++++++++------
src/js/bundle.js | 31 ++++---
2 files changed, 200 insertions(+), 45 deletions(-)
diff --git a/src/css/bundle.css b/src/css/bundle.css
index afe10ab..5cf4c20 100644
--- a/src/css/bundle.css
+++ b/src/css/bundle.css
@@ -3,7 +3,7 @@ Project: kromacss
Version: 1.0.2
Description: A modern, lightweight, and dependency-free CSS framework designed for simplicity, speed, and adaptability.
Author: Altxria Inc.
-License: CC BY-ND 4.0
+License: MIT
*/
/* --- design-tokens.css --- */
@@ -372,24 +372,22 @@ svg {
.inline-block { display: inline-block; }
.inline { display: inline; }
-
/*REMOVE HIGHLIGHT BACKGROUND*/
.no-selection::selection {
- background: transparent;
- color: inherit;
+ background: transparent;
+ color: inherit;
}
.no-selection::-moz-selection {
- background: transparent;
- color: inherit;
+ background: transparent;
+ color: inherit;
}
.no-selection {
- user-select: none;
+ user-select: none;
}
-
/* --- flexbox.css --- */
.flex { display: flex; gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }
@@ -2751,6 +2749,136 @@ blockquote {
}
+/* --- footer.css --- */
+/* Base Footer Styles */
+.kroma-footer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ padding: var(--space-6) var(--space-8);
+ background-color: var(--variant-bg, var(--neutral-900));
+ color: var(--variant-text, var(--neutral-50));
+ font-family: var(--font-sans);
+ gap: var(--space-4);
+ border-top: 1px solid var(--variant-border, var(--neutral-700));
+ transition: background-color var(--transition-colors), box-shadow var(--transition-all);
+ z-index: var(--z-10);
+ width: 100%;
+}
+
+/* Footer Position: Sticky Bottom */
+.kroma-footer[data-stick="bottom"] {
+ position: sticky;
+ bottom: 0;
+}
+
+/* Footer Position: Fixed Bottom */
+.kroma-footer[data-stick="fixed"] {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ box-shadow: var(--shadow-lg);
+}
+
+/* Footer Layouts */
+.kroma-footer[data-layout="center"] {
+ flex-direction: column;
+ text-align: center;
+ gap: var(--space-4);
+}
+
+.kroma-footer[data-layout="stacked"] {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: var(--space-6);
+}
+
+/* Footer Links */
+.kroma-footer-links {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: var(--space-4);
+}
+
+.kroma-footer-link {
+ color: inherit;
+ text-decoration: none;
+ font-size: clamp(0.875rem, 1vw, 1rem);
+ font-weight: 500;
+ transition: color var(--transition-colors);
+}
+
+.kroma-footer-link:hover,
+.kroma-footer-link:focus {
+ color: var(--variant-hover-bg, var(--neutral-300));
+ text-decoration: underline;
+}
+
+/* Footer Brand Section */
+.kroma-footer-brand {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+ font-weight: bold;
+}
+
+.kroma-footer-logo {
+ max-height: 50px;
+ object-fit: contain;
+}
+
+/* Footer Copyright Section */
+.kroma-footer-copyright {
+ font-size: clamp(0.75rem, 1vw, 0.875rem);
+ color: var(--neutral-400);
+ margin-top: var(--space-4);
+ text-align: center;
+ width: 100%;
+}
+
+/* Footer Social Links */
+.kroma-footer-social {
+ display: flex;
+ justify-content: center;
+ gap: var(--space-3);
+}
+
+.kroma-footer-social a {
+ font-size: 1.5rem;
+ color: inherit;
+ transition: color var(--transition-colors);
+}
+
+.kroma-footer-social a:hover,
+.kroma-footer-social a:focus {
+ color: var(--variant-hover-bg, var(--neutral-300));
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+ .kroma-footer {
+ flex-direction: column;
+ text-align: center;
+ gap: var(--space-6);
+ padding: var(--space-4);
+ }
+
+ .kroma-footer-links,
+ .kroma-footer-social {
+ justify-content: center;
+ gap: var(--space-3);
+ }
+
+ .kroma-footer-copyright {
+ margin-top: var(--space-6);
+ }
+}
+
+
/* --- form.css --- */
/* Base Form Group Styling */
.kroma-form-group {
@@ -3777,6 +3905,34 @@ color: var(--variant-hover);
+
+.kroma-navbar:not(.toggled-menu) .nav-menu {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.kroma-navbar:not(.toggled-menu) .nav-menu ul {
+ display: flex;
+ flex-direction: row;
+ list-style: none;
+ gap: calc(var(--nav-size-base) / 6);
+}
+
+.kroma-navbar:not(.toggled-menu) .nav-menu ul li a {
+ text-decoration: none;
+}
+
+.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover {
+ text-decoration: underline;
+}
+
+.kroma-navbar .kroma-avatar {
+ max-height: calc(var(--nav-size-base) / 1.5);
+ max-width: calc(var(--nav-size-base) / 1.5);
+}
+
/* --- pagination.css --- */
/* Pagination Container */
.kroma-pagination {
@@ -4374,7 +4530,7 @@ html:has(.kroma-navbar) .kroma-sidebar{
}
.kroma-sidebar.collapsed .sdb-logo:not(:has(img)):after {
- display: none;
+ display: none;
}
.kroma-sidebar .sdb-logo span {
@@ -4483,59 +4639,59 @@ html:has(.kroma-navbar) .kroma-sidebar{
.kroma-sidebar li{
- cursor:pointer;
-
- }
+ cursor:pointer;
+
+}
.kroma-sidebar:not(.collapsed) li[data-idparent] {
- padding-left: 10px;
- max-height: 100px;
- transition: 100ms;
+ padding-left: 10px;
+ max-height: 100px;
+ transition: 100ms;
}
.kroma-sidebar:not(.collapsed) li.parent a span:before {
- content: "\f054";
- margin-right: 10px;
- font-family: 'FontAwesome';
- display: inline-block;
+ content: "\f054";
+ margin-right: 10px;
+ font-family: 'FontAwesome';
+ display: inline-block;
}
.kroma-sidebar li[data-idparent].collapsed {
- max-height: 0;
- overflow: hidden;
+ max-height: 0;
+ overflow: hidden;
}
.kroma-sidebar li.parent:not(.collapsed) a span:before {
- transform: rotate(90deg);
- transform-origin: center;
+ transform: rotate(90deg);
+ transform-origin: center;
}
/*variants*/
.kroma-sidebar[data-variant]:before {
- background: var(--variant-bg);
- border-color: var(--variant-border);
+ background: var(--variant-bg);
+ border-color: var(--variant-border);
}
.kroma-sidebar[data-variant] .sdb-logo:after{
- background: var(--variant-border);
+ background: var(--variant-border);
}
.kroma-sidebar[data-variant] .sdb-logo span,
.kroma-sidebar[data-variant] .sdb-menu ul li i,
.kroma-sidebar[data-variant] .sdb-menu ul li span,
.kroma-sidebar[data-variant] .sdb-arrow{
- color: var(--variant-text);
+ color: var(--variant-text);
}
.kroma-sidebar[data-variant] .sdb-menu ul li a:hover:before{
- background: var(--variant-hover-bg);
+ background: var(--variant-hover-bg);
}
.kroma-sidebar[data-variant] .sdb-menu ul li a:hover > i,
.kroma-sidebar[data-variant] .sdb-menu ul li a:hover > span {
- color: var(--variant-hover);
+ color: var(--variant-hover);
}
/* --- skeleton.css --- */
diff --git a/src/js/bundle.js b/src/js/bundle.js
index ea0769d..74d055e 100644
--- a/src/js/bundle.js
+++ b/src/js/bundle.js
@@ -3,7 +3,7 @@ Project: kromacss
Version: 1.0.2
Description: A modern, lightweight, and dependency-free CSS framework designed for simplicity, speed, and adaptability.
Author: Altxria Inc.
-License: CC BY-ND 4.0
+License: MIT
*/
/* --- accordion.js --- */
@@ -181,7 +181,7 @@ function handleAlertClose(alert) {
/* --- calendar.js --- */
-function initializeCalendarComponents() {
+export function initializeCalendarComponents() {
document.querySelectorAll('.kroma-calendar').forEach(initCalendar);
}
@@ -370,7 +370,7 @@ document.addEventListener('DOMContentLoaded', () => {
initializeCodeblock(document);
});
-function initializeCodeblock() {
+export function initializeCodeblock() {
document.querySelectorAll('.kroma-code-block').forEach((block) => {
// Check if buttons are already rendered to avoid duplication
if (block.querySelector('.kroma-code-block-header')) return;
@@ -434,7 +434,7 @@ document.addEventListener('DOMContentLoaded', () => {
initializeCommandPalettes();
});
-function initializeCommandPalettes() {
+export function initializeCommandPalettes() {
// Select all command palettes on the page
const palettes = document.querySelectorAll('.kroma-command-palette');
@@ -615,7 +615,7 @@ function initializeCommandPalette(palette) {
/* --- datetime-picker.js --- */
-class DateTimePicker {
+export class DateTimePicker {
constructor(elementId, { format = 'YYYY-MM-DD HH:mm', includeTime = true, variant = 'primary' } = {}) {
this.container = document.getElementById(elementId);
this.format = format;
@@ -945,7 +945,7 @@ document.addEventListener('DOMContentLoaded', () => {
/* --- file-upload.js --- */
-function initializeKromaFileUploadComponents() {
+export function initializeKromaFileUploadComponents() {
document.querySelectorAll('.kroma-file-upload').forEach((fileUpload) => {
const dropzone = fileUpload.querySelector('.kroma-file-upload-dropzone');
const input = fileUpload.querySelector('.kroma-file-upload-input');
@@ -1017,7 +1017,7 @@ document.addEventListener('DOMContentLoaded', initializeKromaFileUploadComponent
/* --- hologram.js --- */
-function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) {
+export function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) {
// Remove any existing holograms and dim overlay
document.querySelectorAll('.kroma-hologram-overlay, .kroma-body-dim').forEach(el => el.remove());
@@ -1238,7 +1238,7 @@ document.addEventListener('DOMContentLoaded', () => {
/* --- navbar.js --- */
-class KromaNavbar {
+export class KromaNavbar {
/*
id (string) = navbar element id
@@ -1490,7 +1490,7 @@ document.addEventListener("DOMContentLoaded", () => {
});
/* --- rating.js --- */
-function initializeKromaRatingComponents() {
+export function initializeKromaRatingComponents() {
// Automatically initialize all rating components on the page
document.querySelectorAll('.kroma-rating').forEach(initializeRatingComponent);
}
@@ -1540,7 +1540,7 @@ document.addEventListener("DOMContentLoaded", initializeKromaRatingComponents);
/* --- sidebar.js --- */
-class KromaSidebar {
+export class KromaSidebar {
/*
id (string) = navbar element id
@@ -1680,7 +1680,6 @@ class KromaSidebar {
for(var i = 0; i < this.pages.length; i++){
var li = document.createElement('li');
- li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent
li.classList.add('no-selection');
//parent page
@@ -1729,6 +1728,7 @@ class KromaSidebar {
if(liChildren.length < 1){li.classList.remove('parent');}
else{
li.classList.add('collapsed');
+ li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent
li.addEventListener('click',function(){
var sdbId = this.closest('.kroma-sidebar').id;
@@ -1753,7 +1753,6 @@ class KromaSidebar {
li.classList.add('collapsed');
});
-
}
@@ -1782,7 +1781,7 @@ document.addEventListener("DOMContentLoaded", () => {
/* --- slideshow.js --- */
-class KromaSlideshow {
+export class KromaSlideshow {
/*
id (string) = slideshow element id
@@ -2084,7 +2083,7 @@ document.addEventListener("DOMContentLoaded", () => {
/* --- tabs.js --- */
-function toggleTabContent(event, contentId, containerId) {
+export function toggleTabContent(event, contentId, containerId) {
const container = document.getElementById(containerId);
const tabs = container.querySelectorAll('.kroma-tab');
const contents = container.querySelectorAll('.kroma-tab-content');
@@ -2104,7 +2103,7 @@ function toggleTabContent(event, contentId, containerId) {
/* --- toast.js --- */
-function initializeKromaToastComponents() {
+export function initializeKromaToastComponents() {
// Automatically initialize and track toast components
document.querySelectorAll('.kroma-toast').forEach((toast) => {
if (toast.dataset.autoDismiss === "true") {
@@ -2114,7 +2113,7 @@ function initializeKromaToastComponents() {
});
}
-function showKromaToast(message, {
+export function showKromaToast(message, {
variant = 'primary',
position = 'top-right',
autoDismiss = false,
From 0de61726ea31c222a25b4aafa7b44fe0ad80507b Mon Sep 17 00:00:00 2001
From: Filippo Maria Grilli
Date: Fri, 29 Nov 2024 16:21:59 +0100
Subject: [PATCH 06/12] Revert "Fix JS exports"
This reverts commit 279429a393490a8bce5fe8ec14b054d1169e9db9.
---
src/js/components/calendar.js | 2 +-
src/js/components/codeblock.js | 2 +-
src/js/components/command-palette.js | 2 +-
src/js/components/datetime-picker.js | 2 +-
src/js/components/file-upload.js | 2 +-
src/js/components/hologram.js | 2 +-
src/js/components/navbar.js | 2 +-
src/js/components/rating.js | 2 +-
src/js/components/sidebar.js | 2 +-
src/js/components/slideshow.js | 2 +-
src/js/components/tabs.js | 2 +-
src/js/components/toast.js | 4 ++--
12 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/src/js/components/calendar.js b/src/js/components/calendar.js
index a4bad91..ac5be36 100644
--- a/src/js/components/calendar.js
+++ b/src/js/components/calendar.js
@@ -1,4 +1,4 @@
-function initializeCalendarComponents() {
+export function initializeCalendarComponents() {
document.querySelectorAll('.kroma-calendar').forEach(initCalendar);
}
diff --git a/src/js/components/codeblock.js b/src/js/components/codeblock.js
index 1cc6381..4b05b0e 100644
--- a/src/js/components/codeblock.js
+++ b/src/js/components/codeblock.js
@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
initializeCodeblock(document);
});
-function initializeCodeblock() {
+export function initializeCodeblock() {
document.querySelectorAll('.kroma-code-block').forEach((block) => {
// Check if buttons are already rendered to avoid duplication
if (block.querySelector('.kroma-code-block-header')) return;
diff --git a/src/js/components/command-palette.js b/src/js/components/command-palette.js
index 9c382b1..d60cf0f 100644
--- a/src/js/components/command-palette.js
+++ b/src/js/components/command-palette.js
@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
initializeCommandPalettes();
});
-function initializeCommandPalettes() {
+export function initializeCommandPalettes() {
// Select all command palettes on the page
const palettes = document.querySelectorAll('.kroma-command-palette');
diff --git a/src/js/components/datetime-picker.js b/src/js/components/datetime-picker.js
index a875da9..e8f4fb0 100644
--- a/src/js/components/datetime-picker.js
+++ b/src/js/components/datetime-picker.js
@@ -1,4 +1,4 @@
-class DateTimePicker {
+export class DateTimePicker {
constructor(elementId, { format = 'YYYY-MM-DD HH:mm', includeTime = true, variant = 'primary' } = {}) {
this.container = document.getElementById(elementId);
this.format = format;
diff --git a/src/js/components/file-upload.js b/src/js/components/file-upload.js
index 19890d0..16ec634 100644
--- a/src/js/components/file-upload.js
+++ b/src/js/components/file-upload.js
@@ -1,4 +1,4 @@
-function initializeKromaFileUploadComponents() {
+export function initializeKromaFileUploadComponents() {
document.querySelectorAll('.kroma-file-upload').forEach((fileUpload) => {
const dropzone = fileUpload.querySelector('.kroma-file-upload-dropzone');
const input = fileUpload.querySelector('.kroma-file-upload-input');
diff --git a/src/js/components/hologram.js b/src/js/components/hologram.js
index 5c47737..e2d35ec 100644
--- a/src/js/components/hologram.js
+++ b/src/js/components/hologram.js
@@ -1,4 +1,4 @@
-function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) {
+export function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) {
// Remove any existing holograms and dim overlay
document.querySelectorAll('.kroma-hologram-overlay, .kroma-body-dim').forEach(el => el.remove());
diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js
index c19389c..1e53d9e 100644
--- a/src/js/components/navbar.js
+++ b/src/js/components/navbar.js
@@ -1,4 +1,4 @@
-class KromaNavbar {
+export class KromaNavbar {
/*
id (string) = navbar element id
diff --git a/src/js/components/rating.js b/src/js/components/rating.js
index 53c0b50..50f19cc 100644
--- a/src/js/components/rating.js
+++ b/src/js/components/rating.js
@@ -1,4 +1,4 @@
-function initializeKromaRatingComponents() {
+export function initializeKromaRatingComponents() {
// Automatically initialize all rating components on the page
document.querySelectorAll('.kroma-rating').forEach(initializeRatingComponent);
}
diff --git a/src/js/components/sidebar.js b/src/js/components/sidebar.js
index 8d67378..1d925dc 100644
--- a/src/js/components/sidebar.js
+++ b/src/js/components/sidebar.js
@@ -1,4 +1,4 @@
-class KromaSidebar {
+export class KromaSidebar {
/*
id (string) = navbar element id
diff --git a/src/js/components/slideshow.js b/src/js/components/slideshow.js
index c961768..2d5687d 100644
--- a/src/js/components/slideshow.js
+++ b/src/js/components/slideshow.js
@@ -1,4 +1,4 @@
-class KromaSlideshow {
+export class KromaSlideshow {
/*
id (string) = slideshow element id
diff --git a/src/js/components/tabs.js b/src/js/components/tabs.js
index 4b4cf4b..eafc678 100644
--- a/src/js/components/tabs.js
+++ b/src/js/components/tabs.js
@@ -1,4 +1,4 @@
-function toggleTabContent(event, contentId, containerId) {
+export function toggleTabContent(event, contentId, containerId) {
const container = document.getElementById(containerId);
const tabs = container.querySelectorAll('.kroma-tab');
const contents = container.querySelectorAll('.kroma-tab-content');
diff --git a/src/js/components/toast.js b/src/js/components/toast.js
index 7ec94be..d297f4f 100644
--- a/src/js/components/toast.js
+++ b/src/js/components/toast.js
@@ -1,4 +1,4 @@
-function initializeKromaToastComponents() {
+export function initializeKromaToastComponents() {
// Automatically initialize and track toast components
document.querySelectorAll('.kroma-toast').forEach((toast) => {
if (toast.dataset.autoDismiss === "true") {
@@ -8,7 +8,7 @@ function initializeKromaToastComponents() {
});
}
-function showKromaToast(message, {
+export function showKromaToast(message, {
variant = 'primary',
position = 'top-right',
autoDismiss = false,
From 5532c206e924aa788d635a3bd5c65a17d387c6b7 Mon Sep 17 00:00:00 2001
From: Filippo Maria Grilli
Date: Fri, 29 Nov 2024 16:22:02 +0100
Subject: [PATCH 07/12] Revert "navbar - added variants styling"
This reverts commit 1e4c785ac17025072df42d4b6bec4eb6cf0c24f8.
---
src/css/bundle.css | 40 +-------
src/css/components/navbar.css | 172 ++++++++++++++++------------------
2 files changed, 84 insertions(+), 128 deletions(-)
diff --git a/src/css/bundle.css b/src/css/bundle.css
index 5cf4c20..7a45e8f 100644
--- a/src/css/bundle.css
+++ b/src/css/bundle.css
@@ -3865,46 +3865,10 @@ nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
padding-bottom: calc(var(--nav-size-base) / 3);
}
-.kroma-navbar.toggled-menu .nav-menu ul li:hover
-,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current{
-background: var(--neutral-200);
+.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
+ background: var(--neutral-100);
}
-.kroma-navbar.toggled-menu .nav-menu ul li:hover a
-,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current a{
-color: var(--neutral-800);
-}
-
-.nav-menu ul li:hover a {
- background: transparent;
-}
-
-nav.kroma-navbar[data-variant]:before {
- background: var(--variant-bg);
- border-bottom-color: var(--variant-border);
-}
-
-nav.kroma-navbar[data-variant] .nav-logo span, nav.kroma-navbar[data-variant] .nav-menu ul li a {
- color: var(--variant-text);
-}
-
-
-.kroma-navbar[data-variant] span.nav-line {
- background: var(--variant-text);
-}
-
-.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover
-,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current{
-background: var(--variant-hover-bg);
-}
-
-.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover a
-,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current a{
-color: var(--variant-hover);
-}
-
-
-
.kroma-navbar:not(.toggled-menu) .nav-menu {
width: 100%;
diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css
index 743405f..bc17b51 100644
--- a/src/css/components/navbar.css
+++ b/src/css/components/navbar.css
@@ -9,37 +9,36 @@
}
.kroma-navbar .nav-logo {
- height: calc(var(--nav-size-base) / 1.5 );
- width: max-content;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: center;
- gap: calc(var(--nav-size-base) / 6);
- flex: auto;
+ height: calc(var(--nav-size-base) / 1.5 );
+ width: max-content;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: calc(var(--nav-size-base) / 6);
+ flex: auto;
}
nav.kroma-navbar {
- width: 100%;
- height: var(--nav-size-base);
- position: sticky;
- top: 0;
- left: 0;
- z-index: 3;
- display: flex;
- flex-direction: row;
- align-content: center;
- align-items: center;
- flex-wrap: nowrap;
- backdrop-filter: blur(4px);
- -webkit-backdrop-filter: blur(4px);
- justify-content: space-between;
- box-sizing: border-box;
- padding: calc(var(--nav-size-base) / 6);
- gap: calc(var(--nav-size-base) / 6);
+ width: 100%;
+ height: var(--nav-size-base);
+ position: sticky;
+ top: 0;
+ left: 0;
+ z-index: 3;
+ display: flex;
+ flex-direction: row;
+ align-content: center;
+ align-items: center;
+ flex-wrap: nowrap;
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
+ justify-content: space-between;
+ box-sizing: border-box;
+ padding: calc(var(--nav-size-base) / 6);
+ gap: calc(var(--nav-size-base) / 6);
}
-
nav.kroma-navbar:before {
content: "";
display: block;
@@ -83,108 +82,101 @@ nav.kroma-navbar:before {
}
nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
- display: none;
+ display: none;
}
.kroma-navbar .nav-toggle.show #nav-line-3 {
- opacity: 0;
- /* top: 20px; */
- height: 0;
+ opacity: 0;
+ /* top: 20px; */
+ height: 0;
}
.kroma-navbar .nav-toggle.show #nav-line-1 {
- transform: translate(0px, 50%) rotate(45deg);
- transform-origin: center;
+ transform: translate(0px, 50%) rotate(45deg);
+ transform-origin: center;
}
.kroma-navbar .nav-toggle.show #nav-line-2 {
- /* background: var(--neutral-700); */
- transform: translate(0px, -50%) rotate(-45deg);
- transform-origin: center;
+ /* background: var(--neutral-700); */
+ transform: translate(0px, -50%) rotate(-45deg);
+ transform-origin: center;
}
.kroma-navbar.toggled-menu .nav-menu {
- display: flex;
- position: absolute;
- top: 100%;
- right: 0;
- margin: calc(var(--nav-size-base) / 3);
- background: var(--neutral-50);
- border-radius: 10px;
- box-shadow: var(--shadow-sm);
- align-items: center;
- justify-content: center;
- /* min-width: 170px; */
- max-height: 0;
- opacity: 0;
- overflow: hidden;
- transition: opacity 100ms, max-height 2s 0ms;
+ display: flex;
+ position: absolute;
+ top: 100%;
+ right: 0;
+ margin: calc(var(--nav-size-base) / 3);
+ background: var(--neutral-50);
+ border-radius: 10px;
+ box-shadow: var(--shadow-sm);
+ align-items: center;
+ justify-content: center;
+ /* min-width: 170px; */
+ max-height: 0;
+ opacity: 0;
+ overflow: hidden;
+ transition: opacity 100ms, max-height 2s 0ms;
}
.kroma-navbar.toggled-menu .nav-menu ul li a {
- text-decoration: none;
- list-style: none;
- padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5);
- display: block;
+ text-decoration: none;
+ list-style: none;
+ padding: calc(var(--nav-size-base) / 6) calc(var(--nav-size-base) / 1.5);
+ display: block;
}
.kroma-navbar.toggled-menu .nav-menu ul {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
.kroma-navbar .nav-toggle.show ~ .nav-menu {
- max-height: 1000px;
- opacity: 1;
- transition: max-height 0s 0ms, opacity 100ms;
+ max-height: 1000px;
+ opacity: 1;
+ transition: max-height 0s 0ms, opacity 100ms;
}
.kroma-navbar.toggled-menu .nav-menu ul li:first-child a {
- padding-top: calc(var(--nav-size-base) / 3);
+ padding-top: calc(var(--nav-size-base) / 3);
}
.kroma-navbar.toggled-menu .nav-menu ul li:last-child a {
- padding-bottom: calc(var(--nav-size-base) / 3);
-}
-
-.kroma-navbar.toggled-menu .nav-menu ul li:hover
-,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current{
-background: var(--neutral-200);
+ padding-bottom: calc(var(--nav-size-base) / 3);
}
-.kroma-navbar.toggled-menu .nav-menu ul li:hover a
-,.kroma-navbar.toggled-menu .nav-menu ul li.nav-current a{
-color: var(--neutral-800);
+.kroma-navbar.toggled-menu .nav-menu ul li a.nav-current,.nav-menu ul li:hover a {
+ background: var(--neutral-100);
}
-.nav-menu ul li:hover a {
- background: transparent;
-}
-nav.kroma-navbar[data-variant]:before {
- background: var(--variant-bg);
- border-bottom-color: var(--variant-border);
-}
-
-nav.kroma-navbar[data-variant] .nav-logo span, nav.kroma-navbar[data-variant] .nav-menu ul li a {
- color: var(--variant-text);
+.kroma-navbar:not(.toggled-menu) .nav-menu {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
}
-
-.kroma-navbar[data-variant] span.nav-line {
- background: var(--variant-text);
+.kroma-navbar:not(.toggled-menu) .nav-menu ul {
+ display: flex;
+ flex-direction: row;
+ list-style: none;
+ gap: calc(var(--nav-size-base) / 6);
}
-.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover
-,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current{
-background: var(--variant-hover-bg);
+.kroma-navbar:not(.toggled-menu) .nav-menu ul li a {
+ text-decoration: none;
}
-.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover a
-,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current a{
-color: var(--variant-hover);
+.kroma-navbar:not(.toggled-menu) .nav-menu ul li a:hover {
+ text-decoration: underline;
}
+.kroma-navbar .kroma-avatar {
+ max-height: calc(var(--nav-size-base) / 1.5);
+ max-width: calc(var(--nav-size-base) / 1.5);
+}
\ No newline at end of file
From 5ba42437635cc83bdac8bed1bf5343a0875d0edb Mon Sep 17 00:00:00 2001
From: Filippo Maria Grilli
Date: Fri, 29 Nov 2024 16:23:57 +0100
Subject: [PATCH 08/12] sidebar - fixed colapsable without href causing error
---
src/js/components/sidebar.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/js/components/sidebar.js b/src/js/components/sidebar.js
index 1d925dc..eb6d646 100644
--- a/src/js/components/sidebar.js
+++ b/src/js/components/sidebar.js
@@ -138,7 +138,8 @@ export class KromaSidebar {
for(var i = 0; i < this.pages.length; i++){
var li = document.createElement('li');
- li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent
+ //remove href from collapsable parent
+ if (li.querySelector('a') && element.hasAttribute('href')) {li.querySelector('a').removeAttribute('href');}
li.classList.add('no-selection');
//parent page
From 0e45115803403189212baf5d4b3506544dfe1a06 Mon Sep 17 00:00:00 2001
From: Filippo Maria Grilli
Date: Fri, 29 Nov 2024 16:25:47 +0100
Subject: [PATCH 09/12] navbar - added variants styling
---
src/css/bundle.css | 26 ++++++++++++++++++++++++++
src/css/components/navbar.css | 28 +++++++++++++++++++++++++++-
2 files changed, 53 insertions(+), 1 deletion(-)
diff --git a/src/css/bundle.css b/src/css/bundle.css
index 7a45e8f..94c5b1f 100644
--- a/src/css/bundle.css
+++ b/src/css/bundle.css
@@ -3897,6 +3897,32 @@ nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
max-width: calc(var(--nav-size-base) / 1.5);
}
+
+nav.kroma-navbar[data-variant]:before {
+ background: var(--variant-bg);
+ border-bottom-color: var(--variant-border);
+}
+
+nav.kroma-navbar[data-variant] .nav-logo span, nav.kroma-navbar[data-variant] .nav-menu ul li a {
+ color: var(--variant-text);
+}
+
+
+.kroma-navbar[data-variant] span.nav-line {
+ background: var(--variant-text);
+}
+
+.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover
+,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current{
+background: var(--variant-hover-bg);
+}
+
+.kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover a
+,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current a{
+color: var(--variant-hover);
+}
+
+
/* --- pagination.css --- */
/* Pagination Container */
.kroma-pagination {
diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css
index bc17b51..c32b740 100644
--- a/src/css/components/navbar.css
+++ b/src/css/components/navbar.css
@@ -179,4 +179,30 @@ nav.kroma-navbar:not(.toggled-menu) .nav-toggle {
.kroma-navbar .kroma-avatar {
max-height: calc(var(--nav-size-base) / 1.5);
max-width: calc(var(--nav-size-base) / 1.5);
-}
\ No newline at end of file
+}
+
+
+nav.kroma-navbar[data-variant]:before {
+ background: var(--variant-bg);
+ border-bottom-color: var(--variant-border);
+ }
+
+ nav.kroma-navbar[data-variant] .nav-logo span, nav.kroma-navbar[data-variant] .nav-menu ul li a {
+ color: var(--variant-text);
+ }
+
+
+ .kroma-navbar[data-variant] span.nav-line {
+ background: var(--variant-text);
+ }
+
+ .kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover
+ ,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current{
+ background: var(--variant-hover-bg);
+ }
+
+ .kroma-navbar[data-variant].toggled-menu .nav-menu ul li:hover a
+ ,.kroma-navbar[data-variant].toggled-menu .nav-menu ul li.nav-current a{
+ color: var(--variant-hover);
+ }
+
\ No newline at end of file
From 1d5b96b68f928cfebed112c8500bc5777c69e1d7 Mon Sep 17 00:00:00 2001
From: Ohswedd
Date: Fri, 29 Nov 2024 16:47:19 +0100
Subject: [PATCH 10/12] JS Export Fix
---
src/js/components/calendar.js | 2 +-
src/js/components/codeblock.js | 2 +-
src/js/components/command-palette.js | 2 +-
src/js/components/datetime-picker.js | 2 +-
src/js/components/file-upload.js | 2 +-
src/js/components/hologram.js | 2 +-
src/js/components/navbar.js | 2 +-
src/js/components/rating.js | 2 +-
src/js/components/sidebar.js | 2 +-
src/js/components/slideshow.js | 2 +-
src/js/components/tabs.js | 2 +-
src/js/components/toast.js | 4 ++--
12 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/src/js/components/calendar.js b/src/js/components/calendar.js
index ac5be36..a4bad91 100644
--- a/src/js/components/calendar.js
+++ b/src/js/components/calendar.js
@@ -1,4 +1,4 @@
-export function initializeCalendarComponents() {
+function initializeCalendarComponents() {
document.querySelectorAll('.kroma-calendar').forEach(initCalendar);
}
diff --git a/src/js/components/codeblock.js b/src/js/components/codeblock.js
index 4b05b0e..1cc6381 100644
--- a/src/js/components/codeblock.js
+++ b/src/js/components/codeblock.js
@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
initializeCodeblock(document);
});
-export function initializeCodeblock() {
+function initializeCodeblock() {
document.querySelectorAll('.kroma-code-block').forEach((block) => {
// Check if buttons are already rendered to avoid duplication
if (block.querySelector('.kroma-code-block-header')) return;
diff --git a/src/js/components/command-palette.js b/src/js/components/command-palette.js
index d60cf0f..9c382b1 100644
--- a/src/js/components/command-palette.js
+++ b/src/js/components/command-palette.js
@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
initializeCommandPalettes();
});
-export function initializeCommandPalettes() {
+function initializeCommandPalettes() {
// Select all command palettes on the page
const palettes = document.querySelectorAll('.kroma-command-palette');
diff --git a/src/js/components/datetime-picker.js b/src/js/components/datetime-picker.js
index e8f4fb0..a875da9 100644
--- a/src/js/components/datetime-picker.js
+++ b/src/js/components/datetime-picker.js
@@ -1,4 +1,4 @@
-export class DateTimePicker {
+class DateTimePicker {
constructor(elementId, { format = 'YYYY-MM-DD HH:mm', includeTime = true, variant = 'primary' } = {}) {
this.container = document.getElementById(elementId);
this.format = format;
diff --git a/src/js/components/file-upload.js b/src/js/components/file-upload.js
index 16ec634..19890d0 100644
--- a/src/js/components/file-upload.js
+++ b/src/js/components/file-upload.js
@@ -1,4 +1,4 @@
-export function initializeKromaFileUploadComponents() {
+function initializeKromaFileUploadComponents() {
document.querySelectorAll('.kroma-file-upload').forEach((fileUpload) => {
const dropzone = fileUpload.querySelector('.kroma-file-upload-dropzone');
const input = fileUpload.querySelector('.kroma-file-upload-input');
diff --git a/src/js/components/hologram.js b/src/js/components/hologram.js
index e2d35ec..5c47737 100644
--- a/src/js/components/hologram.js
+++ b/src/js/components/hologram.js
@@ -1,4 +1,4 @@
-export function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) {
+function showHologram(titleText, subtitleText, variant = 'primary', intensity = 'medium', duration = 6000) {
// Remove any existing holograms and dim overlay
document.querySelectorAll('.kroma-hologram-overlay, .kroma-body-dim').forEach(el => el.remove());
diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js
index 1e53d9e..c19389c 100644
--- a/src/js/components/navbar.js
+++ b/src/js/components/navbar.js
@@ -1,4 +1,4 @@
-export class KromaNavbar {
+class KromaNavbar {
/*
id (string) = navbar element id
diff --git a/src/js/components/rating.js b/src/js/components/rating.js
index 50f19cc..53c0b50 100644
--- a/src/js/components/rating.js
+++ b/src/js/components/rating.js
@@ -1,4 +1,4 @@
-export function initializeKromaRatingComponents() {
+function initializeKromaRatingComponents() {
// Automatically initialize all rating components on the page
document.querySelectorAll('.kroma-rating').forEach(initializeRatingComponent);
}
diff --git a/src/js/components/sidebar.js b/src/js/components/sidebar.js
index eb6d646..48d50c1 100644
--- a/src/js/components/sidebar.js
+++ b/src/js/components/sidebar.js
@@ -1,4 +1,4 @@
-export class KromaSidebar {
+class KromaSidebar {
/*
id (string) = navbar element id
diff --git a/src/js/components/slideshow.js b/src/js/components/slideshow.js
index 2d5687d..c961768 100644
--- a/src/js/components/slideshow.js
+++ b/src/js/components/slideshow.js
@@ -1,4 +1,4 @@
-export class KromaSlideshow {
+class KromaSlideshow {
/*
id (string) = slideshow element id
diff --git a/src/js/components/tabs.js b/src/js/components/tabs.js
index eafc678..4b4cf4b 100644
--- a/src/js/components/tabs.js
+++ b/src/js/components/tabs.js
@@ -1,4 +1,4 @@
-export function toggleTabContent(event, contentId, containerId) {
+function toggleTabContent(event, contentId, containerId) {
const container = document.getElementById(containerId);
const tabs = container.querySelectorAll('.kroma-tab');
const contents = container.querySelectorAll('.kroma-tab-content');
diff --git a/src/js/components/toast.js b/src/js/components/toast.js
index d297f4f..7ec94be 100644
--- a/src/js/components/toast.js
+++ b/src/js/components/toast.js
@@ -1,4 +1,4 @@
-export function initializeKromaToastComponents() {
+function initializeKromaToastComponents() {
// Automatically initialize and track toast components
document.querySelectorAll('.kroma-toast').forEach((toast) => {
if (toast.dataset.autoDismiss === "true") {
@@ -8,7 +8,7 @@ export function initializeKromaToastComponents() {
});
}
-export function showKromaToast(message, {
+function showKromaToast(message, {
variant = 'primary',
position = 'top-right',
autoDismiss = false,
From 6617868cc0466758114c2db96b18788a50d54873 Mon Sep 17 00:00:00 2001
From: Ohswedd
Date: Fri, 29 Nov 2024 16:47:32 +0100
Subject: [PATCH 11/12] Update demo.html
---
demo.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/demo.html b/demo.html
index 590878b..6426716 100644
--- a/demo.html
+++ b/demo.html
@@ -1345,7 +1345,7 @@ Codeblock Component Showcase
-
+
// Wait for the DOM to load before setting up the event listener
document.addEventListener("DOMContentLoaded", () => {
From 231f234ab073c0b25f20afa6201bcb6a43790ece Mon Sep 17 00:00:00 2001
From: Ohswedd