@mantine/schedule 9.0.0-alpha.3 → 9.0.0-alpha.5

package/styles.layer.css

@@ -104,6 +104,24 @@
     cursor: default;
   }
 
+  .m_1ac94670:where([data-resizing]) {
+    z-index: 10;
+  }
+
+  @media (hover: hover) {
+
+  .m_1ac94670:where([data-resizing]) .m_71699dc6:hover {
+        background-color: var(--event-bg);
+  }
+}
+
+  @media (hover: none) {
+
+  .m_1ac94670:where([data-resizing]) .m_71699dc6:active {
+        background-color: var(--event-bg);
+  }
+}
+
   .m_1ac94670:where([data-hanging='start'], [data-hanging='both'])::before {
       content: '';
       position: absolute;
@@ -213,6 +231,55 @@
     pointer-events: none;
   }
 
+.m_520128c {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40%;
+  max-width: calc(2.5rem * var(--mantine-scale));
+  height: calc(0.25rem * var(--mantine-scale));
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  cursor: ns-resize;
+  pointer-events: all;
+  z-index: 4;
+  touch-action: none;
+  background-color: var(--event-color);
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.m_520128c::before {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25rem * var(--mantine-scale)) calc(-0.375rem * var(--mantine-scale));
+  }
+
+.m_520128c:where([data-edge='top']) {
+    top: calc(-0.125rem * var(--mantine-scale));
+  }
+
+.m_520128c:where([data-edge='bottom']) {
+    bottom: calc(-0.125rem * var(--mantine-scale));
+  }
+
+.m_1ac94670:where(:hover, [data-resizing]) .m_520128c {
+    opacity: 0.5;
+  }
+
+@media (hover: hover) {
+
+  .m_520128c:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (hover: none) {
+
+  .m_520128c:active {
+    opacity: 0.8;
+  }
+}
+
 .m_c958249f {
   color: var(--mantine-color-dimmed);
   font-size: calc(0.8125rem * var(--mantine-scale));
@@ -282,6 +349,9 @@
   background: var(--mantine-color-default);
   font-size: var(--mantine-font-size-sm);
   font-weight: var(--mantine-font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
   .m_b366a0f3:where([data-interactive]) {
@@ -406,6 +476,11 @@
   }
 }
 
+.m_e106e12d {
+  display: flex;
+  gap: calc(0.25rem * var(--mantine-scale));
+}
+
 .m_9d44fc56 {
   --schedule-header-gap: calc(0.5rem * var(--mantine-scale));
 
@@ -460,11 +535,6 @@
 }
   }
 
-.m_e106e12d {
-  display: flex;
-  gap: calc(0.25rem * var(--mantine-scale));
-}
-
 .m_3c5fb2d5 {
   --slot-height: var(--day-view-slot-height, 64px); /* total height of 1 hour slot */
   --all-day-slot-height: var(--day-view-all-day-slot-height, 44px); /* height of all day slot */
@@ -496,13 +566,20 @@
   font-weight: var(--mantine-font-weight-medium);
 }
 
-.m_d5502881 {
+.m_f2eec5af {
   border: 1px solid var(--day-view-border-color);
-  display: flex;
   border-radius: var(--day-view-radius);
   overflow: hidden;
 }
 
+.m_f2eec5af :where(.mantine-ScrollArea-scrollbar) {
+    z-index: 4;
+  }
+
+.m_d5502881 {
+  display: flex;
+}
+
 .m_9389813 {
   position: relative;
 }
@@ -651,6 +728,19 @@
     pointer-events: none;
   }
 
+.m_c5cd9a77 {
+  position: absolute;
+  border-radius: 0;
+  pointer-events: none;
+  z-index: 2;
+  background-color: var(--bg-event-bg);
+  overflow: hidden;
+  font-size: calc(0.75rem * var(--mantine-scale));
+  font-weight: var(--mantine-font-weight-medium);
+  padding: calc(0.1875rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale));
+  color: var(--bg-event-color);
+}
+
 .m_c6f08d70 {
   position: relative;
   height: var(--all-day-slot-height);
@@ -970,7 +1060,7 @@
   --month-view-border: 1px solid var(--month-view-border-color);
   --month-view-radius: var(--schedule-radius, var(--mantine-radius-default));
   --day-base-color: var(--mantine-color-text);
-  --min-day-width: calc(3.375rem * var(--mantine-scale));
+  --min-day-width: calc(5.25rem * var(--mantine-scale));
 }
 
   .m_8eceba9d:where([data-with-week-numbers]) {
@@ -1091,7 +1181,7 @@
 .m_ab476fbf {
   min-width: var(--min-day-width);
   flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);
-  height: calc(6.25rem * var(--mantine-scale));
+  height: calc(52px + var(--month-view-max-events, 2) * 24px);
   padding: calc(0.25rem * var(--mantine-scale));
   font-weight: var(--mantine-font-weight-medium);
   border-block-start: var(--month-view-border);
@@ -1247,6 +1337,21 @@
     color: var(--mantine-primary-color-contrast);
   }
 
+.m_9e8509af {
+  position: absolute;
+  pointer-events: none;
+  z-index: 2;
+  border-radius: var(--month-view-radius);
+  background-color: var(--bg-event-bg);
+  top: 0;
+  bottom: calc(-1.3125rem * var(--mantine-scale));
+  overflow: hidden;
+  font-size: calc(0.75rem * var(--mantine-scale));
+  font-weight: var(--mantine-font-weight-medium);
+  padding: calc(0.1875rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale));
+  color: var(--bg-event-color);
+}
+
 .m_f0fa5e16 {
   position: absolute;
   inset-inline: 0;
@@ -1282,6 +1387,7 @@
 .m_6b2099af {
   border: 1px solid var(--week-view-border-color);
   border-radius: var(--week-view-radius);
+  overflow: hidden;
 }
 
 .m_f8734f29 {
@@ -1291,16 +1397,14 @@
 }
 
 .m_44818807 :where(.mantine-ScrollArea-scrollbar) {
-    z-index: 2;
+    z-index: 4;
   }
 
 .m_13bcfc1a {
   display: flex;
-  border-start-start-radius: var(--week-view-radius);
-  border-start-end-radius: var(--week-view-radius);
   position: sticky;
   top: 0;
-  z-index: 3;
+  z-index: 4;
   background-color: var(--mantine-color-body);
   border-bottom: 1px solid var(--week-view-border-color);
   margin-bottom: calc(-0.0625rem * var(--mantine-scale));
@@ -1326,7 +1430,6 @@
   flex: 0 0 var(--week-view-slots-label-width);
   min-width: var(--week-view-slots-label-width);
   background-color: var(--mantine-color-body);
-  border-end-start-radius: var(--week-view-radius);
 }
 
 .m_29f492e9 {
@@ -1425,6 +1528,19 @@
   text-transform: capitalize;
 }
 
+.m_41ce8f1f {
+  position: absolute;
+  pointer-events: none;
+  z-index: 2;
+  border-radius: var(--week-view-radius);
+  background-color: var(--bg-event-bg);
+  overflow: hidden;
+  font-size: calc(0.75rem * var(--mantine-scale));
+  font-weight: var(--mantine-font-weight-medium);
+  padding: calc(0.1875rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale));
+  color: var(--bg-event-color);
+}
+
 .m_cd58ae46 {
   position: relative;
 }
@@ -1589,7 +1705,8 @@
 
 .m_7301354d {
   --year-view-radius: var(--schedule-radius, var(--mantine-radius-default));
-  --year-view-font-size: clamp(6px, 1.5cqw, 22px);
+  --year-view-font-size: var(--mantine-font-size-sm);
+  container-type: inline-size;
 }
 
   :where([data-mantine-color-scheme='light']) .m_7301354d {
@@ -1601,41 +1718,44 @@
 }
 
 .m_8b7a61a0 {
-  container-type: inline-size;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
 }
 
-.m_c0efe49f {
-  display: flex;
+@container (width <= 850px) {
+
+.m_8b7a61a0 {
+    --year-view-font-size: calc(var(--mantine-font-size-sm) - 2px)
 }
+  }
 
-@container (width <= 500px) {
+@container (width <= 750px) {
 
-.m_c0efe49f {
-    flex-direction: column;
-    --year-view-font-size: clamp(6px, 3.5cqw, 22px)
+.m_8b7a61a0 {
+    grid-template-columns: repeat(2, 1fr);
+    --year-view-font-size: var(--mantine-font-size-xs)
 }
   }
 
-.m_c0efe49f:where(:first-of-type) :where(.m_3e4e4533:first-of-type) {
-    border-start-start-radius: var(--year-view-radius);
-  }
+@container (width <= 520px) {
 
-.m_c0efe49f:where(:first-of-type) :where(.m_3e4e4533:last-of-type) {
-    border-start-end-radius: var(--year-view-radius);
+.m_8b7a61a0 {
+    --year-view-font-size: calc(var(--mantine-font-size-xs) - 2px)
+}
   }
 
-.m_c0efe49f:where(:last-of-type) :where(.m_3e4e4533:first-of-type) {
-    border-end-start-radius: var(--year-view-radius);
-  }
+@container (width <= 420px) {
 
-.m_c0efe49f:where(:last-of-type) :where(.m_3e4e4533:last-of-type) {
-    border-end-end-radius: var(--year-view-radius);
+.m_8b7a61a0 {
+    grid-template-columns: 1fr;
+    --year-view-font-size: var(--mantine-font-size-xs)
+}
   }
 
 .m_3e4e4533 {
   --week-numbers-offset: 0rem;
   --day-base-color: var(--mantine-color-text);
-  --day-dimmed-color: color-mix(in srgb, var(--day-base-color), transparent 50%);
+  --day-dimmed-color: color-mix(in srgb, var(--day-base-color), transparent 65%);
 }
 
 .m_3e4e4533:where([data-with-week-numbers]) {
@@ -1644,46 +1764,57 @@
 
 .m_3e4e4533 {
 
-  flex: 1;
+  min-width: 0;
   border: 1px solid var(--year-view-border-color);
   padding: var(--mantine-spacing-md);
+  margin-top: calc(-0.0625rem * var(--mantine-scale));
+  margin-inline-start: calc(-0.0625rem * var(--mantine-scale));
 }
 
-@container (width <= 860px) {
+.m_3e4e4533:where(:nth-child(3n + 1)) {
+    margin-inline-start: 0;
+  }
+
+.m_3e4e4533:where(:nth-child(-n + 3)) {
+    margin-top: 0;
+  }
+
+.m_3e4e4533:where(:nth-child(1)) {
+    border-start-start-radius: var(--year-view-radius);
+  }
+
+.m_3e4e4533:where(:nth-child(3)) {
+    border-start-end-radius: var(--year-view-radius);
+  }
+
+.m_3e4e4533:where(:nth-last-child(3)) {
+    border-end-start-radius: var(--year-view-radius);
+  }
+
+.m_3e4e4533:where(:nth-last-child(1)) {
+    border-end-end-radius: var(--year-view-radius);
+  }
+
+@container (width <= 750px) {
 
 .m_3e4e4533 {
     border: 0;
-    padding: calc(0.5rem * var(--mantine-scale))
+    padding: calc(0.5rem * var(--mantine-scale));
+    margin: 0
 }
 
     .m_3e4e4533:where([data-with-week-numbers]) {
       --week-numbers-offset: calc(0.875rem * var(--mantine-scale));
     }
-
-    .m_3e4e4533:where(:first-of-type) {
-      padding-inline-start: 0;
-    }
-
-    .m_3e4e4533:where(:last-of-type) {
-      padding-inline-end: 0;
-    }
   }
 
-@container (width <= 480px) {
+@container (width <= 420px) {
 
 .m_3e4e4533 {
     padding: calc(0.375rem * var(--mantine-scale))
 }
   }
 
-.m_3e4e4533:where(:not(:last-of-type)) {
-    border-right: none;
-  }
-
-:where(.m_c0efe49f:not(:last-of-type)) .m_3e4e4533 {
-    border-bottom: none;
-  }
-
 .m_845972b8 {
   display: flex;
 }
@@ -1707,10 +1838,9 @@
   color: var(--day-dimmed-color);
 }
 
-@container (width <= 860px) {
+@container (width <= 750px) {
 
 .m_af51358a {
-    min-width: unset;
     padding: 0
 }
   }
@@ -1743,7 +1873,6 @@
 .m_e33cb11b {
   flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);
   height: calc(2.25rem * var(--mantine-scale));
-  min-width: calc(2.25rem * var(--mantine-scale));
   font-size: var(--year-view-font-size);
   font-weight: var(--mantine-font-weight-medium);
   text-align: center;
@@ -1756,12 +1885,11 @@
   color: var(--day-dimmed-color);
 }
 
-@container (width <= 860px) {
+@container (width <= 750px) {
 
 .m_e33cb11b {
-    min-width: unset;
     height: auto;
-    padding-block: 0.1cqw
+    padding-block: calc(0.125rem * var(--mantine-scale))
 }
   }
 
@@ -1770,7 +1898,6 @@
 }
 
 .m_399ab70f {
-  min-width: calc(2.25rem * var(--mantine-scale));
   flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);
   padding: calc(0.25rem * var(--mantine-scale));
   font-size: var(--year-view-font-size);
@@ -1785,10 +1912,9 @@
   position: relative;
 }
 
-@container (width <= 860px) {
+@container (width <= 750px) {
 
 .m_399ab70f {
-    min-width: calc(0.875rem * var(--mantine-scale));
     padding: 0
 }
   }
@@ -1852,24 +1978,16 @@
   }
 
 .m_950e3d33 {
-  padding-inline: calc(var(--week-numbers-offset) + calc(0.75rem * var(--mantine-scale)));
-  padding-block: 0.2cqw;
-  margin-bottom: 0.5cqw;
+  padding-inline: var(--mantine-spacing-sm);
+  width: 100%;
+  padding-block: calc(0.25rem * var(--mantine-scale));
+  margin-bottom: calc(0.25rem * var(--mantine-scale));
   font-size: var(--year-view-font-size);
   font-weight: var(--mantine-font-weight-medium);
   text-transform: capitalize;
   border-radius: var(--year-view-radius);
 }
 
-@container (width <= 860px) {
-
-.m_950e3d33 {
-    padding-inline: calc(0.25rem * var(--mantine-scale));
-    padding-block: calc(0.125rem * var(--mantine-scale));
-    width: 100%
-}
-  }
-
 @media (hover: hover) {
     :where([data-mantine-color-scheme='light']) .m_950e3d33:hover {
       background-color: var(--mantine-color-gray-0);
@@ -1897,20 +2015,13 @@
 
 .m_98250b3 {
   position: absolute;
-  bottom: calc(0.25rem * var(--mantine-scale));
+  bottom: 0;
   inset-inline: 0;
   display: flex;
   justify-content: center;
   padding-inline-start: calc(0.125rem * var(--mantine-scale));
 }
 
-@container (width <= 860px) {
-
-.m_98250b3 {
-    display: none
-}
-  }
-
 .m_10d2a7c0 {
   width: calc(0.5rem * var(--mantine-scale));
   height: calc(0.5rem * var(--mantine-scale));