@mantine/schedule 9.6.1 → 9.6.2

package/styles.layer.css

@@ -984,9 +984,82 @@
   }
 }
 
-.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging]) .m_c5cd9a77 {
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_c5cd9a77:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_c5cd9a77:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+.m_cddb9413 {
+  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(--bg-event-color);
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.m_cddb9413::before {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25rem * var(--mantine-scale)) calc(-0.375rem * var(--mantine-scale));
+  }
+
+.m_cddb9413:where([data-edge='top']) {
+    top: 0;
+  }
+
+.m_cddb9413:where([data-edge='bottom']) {
+    bottom: 0;
+  }
+
+.m_c5cd9a77:where(:hover, [data-resizing]) .m_cddb9413 {
+    opacity: 0.5;
+  }
+
+@media (hover: hover) {
+
+  .m_cddb9413:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (hover: none) {
+
+  .m_cddb9413:active {
+    opacity: 0.8;
+  }
+}
+
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
+.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging])
+  .m_c5cd9a77:not([data-resizing]) {
   pointer-events: none;
 }
+.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging])
+  .m_c5cd9a77:not([data-resizing]) .m_cddb9413 {
+    pointer-events: none;
+    opacity: 0;
+  }
 
 .m_c6f08d70 {
   position: relative;
@@ -1864,11 +1937,82 @@
   }
 }
 
-.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f,
-.m_6b2099af:where([data-event-interaction]) .m_41ce8f1f,
-.m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f {
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_41ce8f1f:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_41ce8f1f:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+.m_b20accbb {
+  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(--bg-event-color);
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.m_b20accbb::before {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25rem * var(--mantine-scale)) calc(-0.375rem * var(--mantine-scale));
+  }
+
+.m_b20accbb:where([data-edge='top']) {
+    top: 0;
+  }
+
+.m_b20accbb:where([data-edge='bottom']) {
+    bottom: 0;
+  }
+
+.m_41ce8f1f:where(:hover, [data-resizing]) .m_b20accbb {
+    opacity: 0.5;
+  }
+
+@media (hover: hover) {
+
+  .m_b20accbb:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (hover: none) {
+
+  .m_b20accbb:active {
+    opacity: 0.8;
+  }
+}
+
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
+.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f:not([data-resizing]),
+.m_6b2099af:where([data-event-interaction]) .m_41ce8f1f:not([data-resizing]),
+.m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f:not([data-resizing]) {
   pointer-events: none;
 }
+.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f:not([data-resizing]) .m_b20accbb, .m_6b2099af:where([data-event-interaction]) .m_41ce8f1f:not([data-resizing]) .m_b20accbb, .m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f:not([data-resizing]) .m_b20accbb {
+    pointer-events: none;
+    opacity: 0;
+  }
 
 .m_cd58ae46 {
   position: relative;
@@ -2810,6 +2954,22 @@
   }
 }
 
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_9cc838bf:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_9cc838bf:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
 .m_d6d6dd52 {
   position: absolute;
   inset-inline: calc(0.0625rem * var(--mantine-scale));
@@ -2871,10 +3031,46 @@
   pointer-events: none;
 }
 
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
 .m_25154d8d:where([data-event-interaction], [data-slot-dragging])
-  .m_9cc838bf {
+  .m_9cc838bf:not([data-resizing]) {
   pointer-events: none;
 }
+.m_25154d8d:where([data-event-interaction], [data-slot-dragging])
+  .m_9cc838bf:not([data-resizing]) .m_97715629 {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+.m_9cc838bf .m_97715629 {
+    background-color: var(--bg-event-color);
+  }
+
+.m_9cc838bf .m_97715629:where([data-edge='start']) {
+      left: 0;
+    }
+
+.m_9cc838bf .m_97715629:where([data-edge='end']) {
+      right: 0;
+    }
+
+.m_9cc838bf:hover .m_97715629 {
+    opacity: 0.5;
+  }
+
+.m_9cc838bf .m_97715629:hover {
+    opacity: 0.8;
+  }
+
+.m_9cc838bf:where([data-resizing]) .m_97715629:where([data-active]) {
+    opacity: 0.8;
+  }
+
+.m_9cc838bf:where([data-resizing]) .m_97715629:not([data-active]) {
+    opacity: 0;
+    pointer-events: none;
+  }
 
 .m_25154d8d:where([data-resizing]) * {
     cursor: ew-resize !important;
@@ -3251,6 +3447,22 @@
   }
 }
 
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_3c19323d:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_3c19323d:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
 .m_682c45d0 {
   position: absolute;
   height: var(--resources-week-view-all-day-height);
@@ -3311,10 +3523,46 @@
   pointer-events: none;
 }
 
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
 .m_ed4c47cf:where([data-event-interaction], [data-slot-dragging])
-  .m_3c19323d {
+  .m_3c19323d:not([data-resizing]) {
   pointer-events: none;
 }
+.m_ed4c47cf:where([data-event-interaction], [data-slot-dragging])
+  .m_3c19323d:not([data-resizing]) .m_30c8fd6b {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+.m_3c19323d .m_30c8fd6b {
+    background-color: var(--bg-event-color);
+  }
+
+.m_3c19323d .m_30c8fd6b:where([data-edge='start']) {
+      left: 0;
+    }
+
+.m_3c19323d .m_30c8fd6b:where([data-edge='end']) {
+      right: 0;
+    }
+
+.m_3c19323d:hover .m_30c8fd6b {
+    opacity: 0.5;
+  }
+
+.m_3c19323d .m_30c8fd6b:hover {
+    opacity: 0.8;
+  }
+
+.m_3c19323d:where([data-resizing]) .m_30c8fd6b:where([data-active]) {
+    opacity: 0.8;
+  }
+
+.m_3c19323d:where([data-resizing]) .m_30c8fd6b:not([data-active]) {
+    opacity: 0;
+    pointer-events: none;
+  }
 
 .m_ed4c47cf:where([data-resizing]) * {
     cursor: ew-resize !important;