loon-bulma-react 2026.0.64 → 2026.0.65

package/dist/styles/bulma-box.scss

@@ -131,5 +131,9 @@ a.#{iv.$class-prefix}bulma-box {
     &.is-#{$name} {
       border-color: $color;
     }
+    &.is-border {
+      // gebruik de standaard border color!
+      border-color: cv.getVar('border');
+    }
   }
 }

package/dist/styles/calendar.scss

@@ -8,6 +8,8 @@
 $color: cv.getVar('text-strong') !default;
 $background-color: cv.getVar('scheme-main') !default;
 
+$hour-height: 60px !default;
+
 $cell-border-color: cv.getVar('border') !default;
 $cell-border-style: solid !default;
 $cell-border-width: 0 0 1px !default;
@@ -16,16 +18,25 @@ $cell-heading-color: cv.getVar('text-strong') !default;
 $cell-text-align: left !default;
 
 div.lbr-grid-container {
-  @extend %block;
-  padding: 3px;
-  border-radius: iv.$radius;
+  height: 100%;
   display: grid;
-  grid-template-rows: 30px repeat(6, minmax(170px, auto));
-  // TR: de columns van het grid worden inline geset!
-  justify-items: 'stretch';
-  align-items: 'stretch';
+  // TR: de rows en  columns van het grid worden inline geset als overschreven!
   color: $color;
+
+  &.is-week {
+    overflow-y: auto;
+  }
+}
+
+div.lbr-grid-container.is-week {
+  .calendar-header-cell {
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    background-color: cv.getVar('scheme-main');
+  }
 }
+
 .calendar-header-cell {
   text-align: center;
   border-bottom: thin solid $cell-border-color;
@@ -46,7 +57,7 @@ div.lbr-grid-container {
   text-align: center;
   font-size: 0.7em;
   padding-top: 1em;
-  height: 60px;
+  height: $hour-height;
   // border-top: thin solid $cell-border-color;
   border-bottom: thin solid $cell-border-color;
   border-right: thin solid $cell-border-color;
@@ -72,9 +83,13 @@ div.lbr-grid-container {
   text-align: center;
   color: $color;
   font-size: 1.1em;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
   &.is-not-current-period {
-    background-color: cv.getVar('scheme-main-ter');
+    // background-color: cv.getVar('scheme-main-ter');
     color: cv.getVar('text-weak');
   }
 
@@ -87,9 +102,16 @@ div.lbr-grid-container {
   }
 }
 
+.calendar-day-events {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .calendar-time-slot {
-  max-height: 60px;
-  overflow: clip;
+  position: relative;
+  max-height: $hour-height;
+  overflow: visible;
   border-bottom: thin solid $cell-border-color;
   border-right: thin solid $cell-border-color;
   border-left: thin solid $cell-border-color;
@@ -98,6 +120,12 @@ div.lbr-grid-container {
   flex-wrap: nowrap;
 }
 
+div.lbr-grid-container.is-week {
+  .calendar-time-slot > .event-base {
+    z-index: 20;
+  }
+}
+
 span.more-events-expander {
   display: inline-block;
   width: 0.9em;
@@ -141,12 +169,12 @@ div.kleurblok {
   transition:
     background-color 0.2s ease-in-out,
     color 0.2s ease-in-out;
-  height: 1.5em;
-  margin: 6px 3px;
+  height: 21px;
+  margin: 3px 3px;
   border-radius: 5px;
   text-align: start;
-  padding-left: 3px;
-  padding-right: 3px;
+  // padding-left: 3px;
+  // padding-right: 3px;
   overflow: clip;
   text-overflow: clip;
   color: $color;
@@ -155,10 +183,26 @@ div.kleurblok {
 
 .more-events {
   @extend .event-base;
-  background-color: transparent;
+
+  // background-color: transparent;
   color: $color;
   font-size: 0.75em;
   cursor: pointer;
+
+  &:hover {
+    background-color: cv.getVar('scheme-main-ter');
+  }
+}
+
+.calendar-more-events-overlay {
+  z-index: 1100;
+  background-color: cv.getVar('scheme-main');
+  box-shadow: cv.getVar('shadow');
+
+  .calendar-more-events-overlay-body {
+    flex: 0 0 auto;
+    overflow: visible;
+  }
 }
 
 // ##################################

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "loon-bulma-react",
   "private": false,
-  "version": "2026.0.64",
+  "version": "2026.0.65",
   "description": "Bulma & React componenten voor Loon Salarissoftware",
   "type": "module",
   "license": "MIT",