loon-bulma-react 2026.0.64 → 2026.0.66

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,26 @@ $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,
+  &.is-list {
+    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;
@@ -34,10 +46,14 @@ div.lbr-grid-container {
   font-weight: bold;
   // background-color: cv.getVar('scheme-main-ter');
 
-  &:first-child {
-    border-left: none;
-    border-top: none;
-    border-bottom: none;
+  &:first-child,
+  &.no-border {
+    border: none;
+  }
+
+  &.is-list {
+    border: thin solid $cell-border-color;
+    border-right: none;
   }
 }
 
@@ -46,7 +62,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;
@@ -71,13 +87,22 @@ div.lbr-grid-container {
   border-bottom: thin solid $cell-border-color;
   text-align: center;
   color: $color;
-  font-size: 1.1em;
+  font-size: 0.9em;
+  height: 100%;
+  min-height: 9em;
+  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');
   }
 
+  &.no-border {
+    border: none;
+  }
+
   .date {
     margin-bottom: 0.5em;
     margin-top: 0.25em;
@@ -87,9 +112,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 +130,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;
@@ -127,9 +165,10 @@ span.is-today {
   }
 }
 
-div.kleurblok {
-  width: 0.9em;
-  height: 0.9em;
+div.kleurblok,
+span.kleurblok {
+  width: 1em;
+  height: 1em;
   border-radius: 3px;
   margin-right: 0.5em;
   margin-bottom: -2px;
@@ -141,12 +180,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 +194,49 @@ 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;
+  }
+}
+
+.calendar-listitem-grid {
+  display: grid;
+  grid-template-columns: 10em auto;
+  grid-template-rows: repeat(auto-fill, 22px);
+  padding: 0.5em;
+  padding-left: 0.25em;
+  border: thin solid $cell-border-color;
+
+  .allday-evt-timespan,
+  .timed-evt-timespan {
+    vertical-align: baseline;
+
+    display: grid;
+    grid-template-columns: 1em 1fr 0.5em 1fr;
+    grid-template-rows: 1fr;
+  }
+
+  .allday-evt-description,
+  .timed-evt-description {
+    vertical-align: baseline;
+  }
 }
 
 // ##################################

package/dist/styles/mini-calendar.scss

@@ -5,9 +5,16 @@
 @use 'bulma/sass/utilities/mixins' as mx;
 @use 'bulma/sass/utilities/functions' as fn;
 
+$mini-cal-border-radius: 0.75rem;
+
+.mini-calendar {
+  min-width: 200px;
+  min-height: 222px;
+}
+
 .mini-calendar-header {
   text-align: center;
-  font-size: 1.2em;
+  font-size: 1em;
   font-weight: bold;
   margin-top: auto;
   margin-bottom: auto;
@@ -15,14 +22,23 @@
     font-weight: bold;
     color: dv.$info;
     padding: 0.25em;
-    padding-left: 1em;
-    padding-right: 1em;
-    border-radius: 0.75rem;
+
+    border-radius: $mini-cal-border-radius;
     transition: background-color 0.1s ease-in-out;
     &:hover {
       background-color: dv.$info;
       color: fn.bulmaFindColorInvert(dv.$info);
     }
+
+    &.is-left {
+      padding-left: 0.25em;
+      padding-left: 0.25em;
+    }
+
+    &.is-right {
+      padding-left: 0.25em;
+      padding-right: 0.25em;
+    }
   }
 }
 .mini-calendar-grid {
@@ -43,7 +59,7 @@
   .mini-calendar-slot {
     vertical-align: middle;
     text-align: center;
-    border-radius: 0.75rem;
+    border-radius: $mini-cal-border-radius;
     transition: background-color 0.1s ease-in-out;
     padding: 0.25em;
 
@@ -59,6 +75,7 @@
 
     &.is-other-month {
       color: dv.$text-weak;
+      font-weight: 200;
     }
 
     &:hover {

package/dist/styles/table.scss

@@ -345,9 +345,10 @@ table {
     td,
     th {
       padding: 0;
-      // border-top: thin solid $table-cell-border-color;
+      border-left: thin solid $table-cell-border-color;
       border-bottom: thin solid $table-cell-border-color;
       border-right: thin solid $table-cell-border-color;
+      min-width: 222px;
     }
 
     th.first-col,
@@ -368,6 +369,7 @@ table {
     th {
       padding: 0;
       border-bottom: thin solid $table-cell-border-color;
+      border-left: thin solid $table-cell-border-color;
       border-right: thin solid $table-cell-border-color;
     }
 
@@ -376,6 +378,7 @@ table {
       position: sticky;
       left: 0;
       padding: 2px;
+      border-left: none;
       // border-left: thin solid $table-cell-border-color;
       background-color: cv.getVar('scheme-main');
     }

package/package.json

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