more style changes

fullcalendar · Jun 3, 2020 · c1311bc · c1311bc
1 parent 79d5cd2
commit c1311bc
Show file tree

Hide file tree

Showing 24 changed files with 493 additions and 406 deletions.
diff --git a/packages-premium b/packages-premium
diff --git a/packages/common/src/interactions/EventHovering.ts b/packages/common/src/interactions/EventHovering.ts
@@ -44,15 +44,13 @@ export class EventHovering extends Interaction {
 
   handleSegEnter = (ev: Event, segEl: HTMLElement) => {
     if (getElSeg(segEl)) { // TODO: better way to make sure not hovering over more+ link or its wrapper
-      segEl.classList.add('fc-event-resizable-mouse')
       this.currentSegEl = segEl
       this.triggerEvent('eventMouseEnter', ev, segEl)
     }
   }
 
   handleSegLeave = (ev: Event | null, segEl: HTMLElement) => {
     if (this.currentSegEl) {
-      segEl.classList.remove('fc-event-resizable-mouse')
       this.currentSegEl = null
       this.triggerEvent('eventMouseLeave', ev, segEl)
     }

diff --git a/packages/common/src/styles/event.css b/packages/common/src/styles/event.css
@@ -1,11 +1,17 @@
 
-// okay for event to be root precedence
+$event-selected-dimmer-z: 1;
+$event-main-z: 2;
+$event-selected-hit-z: 3;
+$event-resizer-z: 4;
+
 
 // link resets
+// ----------------------------------------------------------------------------------------------------
+
 a.fc-event {
   display: block;
-  text-decoration: none;
 }
+
 a.fc-event,
 a.fc-event:hover {
   text-decoration: none;
@@ -18,80 +24,113 @@ a.fc-event:hover {
 }
 
 
-// mirror
+// event text content
 // ----------------------------------------------------------------------------------------------------
 
-.fc-event-mirror {
-  z-index: 9999; // always above everything else
+.fc-event {
+  & .fc-event-main {
+    position: relative;
+    z-index: $event-main-z;
+  }
 }
 
 
 // dragging
 // ----------------------------------------------------------------------------------------------------
 
-.fc-event-dragging:not(.fc-event-selected) { // MOUSE
-  opacity: .75;
-}
+.fc-event-dragging {
+
+  &:not(.fc-event-selected) { // MOUSE
+    opacity: 0.75;
+  }
+
+  &.fc-event-selected { // TOUCH
+    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
+  }
 
-.fc-event-dragging.fc-event-selected { // TOUCH
-  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
 }
 
 
 // resizing
 // ----------------------------------------------------------------------------------------------------
+// (subclasses should hone positioning for touch and non-touch)
 
-.fc-event .fc-event-resizer {
-  display: none;
-}
+.fc-event {
+
+  & .fc-event-resizer {
+    display: none;
+    position: absolute;
+    z-index: $event-resizer-z;
+  }
 
-.fc-event-resizable-mouse .fc-event-resizer, // MOUSE
-.fc-event-selected .fc-event-resizer { // TOUCH
-  display: block;
 }
 
+.fc-event:hover, // MOUSE
+.fc-event-selected { // TOUCH
 
-// selecting (with TOUCH)
-// ----------------------------------------------------------------------------------------------------
+  & .fc-event-resizer {
+    display: block;
+  }
 
-// expand main hit area
-// event subclasses should expand it!
-// always use :before
-.fc-event-selected:before {
-  content: "";
-  position: absolute;
-  top: -1px; // overcome border
-  left: -1px; // overcome border
-  right: -1px; // overcome border
-  bottom: -1px; // overcome border
 }
 
-// expand resizer hit area
-.fc-event-selected .fc-event-resizer:before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 40px;
-  height: 40px;
-  margin-left: -20px;
-  margin-top: -20px;
+.fc-event-selected {
+
+  & .fc-event-resizer {
+    border-radius: calc(var(--event-resizer-dot-total-width) / 2);
+    border-width: var(--event-resizer-dot-border-width);
+    width: var(--event-resizer-dot-total-width);
+    height: var(--event-resizer-dot-total-width);
+    border-style: solid;
+    border-color: inherit;
+    background: var(--fc-base-bg-color);
+
+    // expand hit area
+    &:before {
+      content: '';
+      position: absolute;
+      top: -20px;
+      left: -20px;
+      right: -20px;
+      bottom: -20px;
+    }
+
+  }
+
 }
 
-// drop-shadow effect
+
+// selecting (always TOUCH)
+// ----------------------------------------------------------------------------------------------------
+
 .fc-event-selected {
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
 
-// background dimmer effect
-.fc-event-selected:after {
-  content: "";
-  position: absolute;
-  z-index: 1; // TODO: var
-  top: -1px; // overcome border
-  left: -1px; // overcome border
-  right: -1px; // overcome border
-  bottom: -1px; // overcome border
-  background: #000;
-  opacity: .25;
+  // expand hit area (subclasses should expand)
+  &:before {
+    content: "";
+    position: absolute;
+    z-index: $event-selected-hit-z;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  // dimmer effect
+  &:after {
+    content: "";
+    background: var(--event-selected-overlay-color);
+    position: absolute;
+    z-index: $event-selected-dimmer-z;
+
+    // assume there's a border on all sides. overcome it.
+    // sometimes there's NOT a border, in which case the dimmer will go over
+    // an adjacent border, which looks fine.
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+  }
+
 }
diff --git a/packages/common/src/styles/h-event.css b/packages/common/src/styles/h-event.css
@@ -3,64 +3,64 @@
 A HORIZONTAL event
 */
 
-.fc-h-event { // events allowed to be top-level precedence
+.fc-h-event { // allowed to be top-level
 
-  &.fc-event-main {
-    position: relative; // specifically for the z-index
-    z-index: 2; // TODO: var
-  }
+  border: 1px solid var(--event-bg-color);
+  background-color: var(--event-border-color);
 
-  &.fc-event-resizer {
-    position: absolute;
-    z-index: 3; // TODO: var
+  & .fc-event-main {
+    color: var(--event-text-color);
   }
 
-  &.fc-event-resizable-mouse {
-
-    & .fc-event-resizer {
-      width: var(--event-resizer-girth);
-      top: -1px; // overcome border
-      bottom: -1px; // overcome border
-    }
-
+  &.fc-event-selected:before {
+    // expand hit area
+    top: -10px;
+    bottom: -10px;
   }
 
-  &.fc-event-selected {
+}
 
-    // expand touch area for TOUCH (when event is "selected")
-    &:before {
-      top: -10px;
-      bottom: -10px;
-    }
+// adjust border and border-radius (if there is any) for non-start/end
 
-    & .fc-event-resizer {
-      @include event-resizer-dot;
-      top: 50%;
-      margin-top: calc(var(--event-resizer-dot-total-width) / -2);
-    }
+.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),
+.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left-width: 0;
+}
 
-  }
+.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),
+.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right-width: 0;
+}
 
+// resizers
+
+.fc-h-event:not(.fc-event-selected) .fc-event-resizer {
+  top: 0;
+  bottom: 0;
+  width: var(--event-resizer-girth);
 }
 
-.fc-direction-ltr .fc-h-event .fc-event-resizer-start,
-.fc-direction-rtl .fc-h-event .fc-event-resizer-end {
+.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start,
+.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end {
   cursor: w-resize;
+  left: calc(var(--event-resizer-girth) / -2);
 }
 
-.fc-direction-ltr .fc-h-event .fc-event-resizer-end,
-.fc-direction-rtl .fc-h-event .fc-event-resizer-start {
+.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end,
+.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start {
   cursor: e-resize;
+  right: calc(var(--event-resizer-girth) / -2);
 }
 
-.fc-direction-ltr .fc-h-event.fc-event-resizable-mouse .fc-event-resizer-start,
-.fc-direction-rtl .fc-h-event.fc-event-resizable-mouse .fc-event-resizer-end {
-  left: calc(var(--event-resizer-girth) / -2);
-}
+// resizers for TOUCH
 
-.fc-direction-ltr .fc-h-event.fc-event-resizable-mouse .fc-event-resizer-end,
-.fc-direction-rtl .fc-h-event.fc-event-resizable-mouse .fc-event-resizer-start {
-  right: calc(var(--event-resizer-girth) / -2);
+.fc-h-event.fc-event-selected .fc-event-resizer {
+  top: 50%;
+  margin-top: calc(var(--event-resizer-dot-total-width) / -2);
 }
 
 .fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-start,

diff --git a/packages/common/src/styles/mixins.css b/packages/common/src/styles/mixins.css
@@ -8,23 +8,13 @@
   left: 0;
 }
 
-@mixin event-resizer-dot {
-  border-radius: calc(var(--event-resizer-dot-total-width) / 2);
-  border-width: var(--event-resizer-dot-border-width);
-  width: var(--event-resizer-dot-total-width);
-  height: var(--event-resizer-dot-total-width);
-  border-style: solid;
-  border-color: inherit;
-  background: #fff;
-}
-
 @mixin clearfix {
   content: "";
   clear: both;
   display: table;
 }
 
-@mixin bg-z-indexes {
+@mixin bg-z-indexes { // TODO: kill
   & .fc-non-business { z-index: 1 }
   & .fc-bg-event { z-index: 2 }
   & .fc-highlight { z-index: 3 }

diff --git a/packages/common/src/styles/vars.css b/packages/common/src/styles/vars.css
@@ -18,6 +18,10 @@ NOTE: for old browsers, will need to start after changing a variable
   --fc-highlight-color: rgba(188, 232, 241, 0.3);
   --fc-today-color: rgba(255, 220, 40, 0.15);
   --fc-neutral-color: rgba(208, 208, 208, 0.3);
+  --fc-neutral-color-lighter: #f5f5f5; /* not really a great color */
+  --fc-neutral-text-color: #808080;
+
+  --fc-base-bg-color: #fff;
 
   --fc-smaller-font-size: .85em;
 
@@ -29,9 +33,20 @@ NOTE: for old browsers, will need to start after changing a variable
   --fc-button-active-bg-color: #1a252f;
   --fc-button-active-border-color: #151e27;
 
+  /* TODO: add fc- !!!! */
+
   --now-indicator-color: red;
 
   --event-resizer-girth: 8px;
   --event-resizer-dot-total-width: 8px;
   --event-resizer-dot-border-width: 1px;
+
+  --event-selected-overlay-color: rgba(0, 0, 0, 0.25);
+
+  --event-bg-color: #3788d8;
+  --event-border-color: #3788d8;
+  --event-text-color: #fff; /* only for colored backgrounds */
+
+  --event-dot-radius: 4px; /* TODO: rename to be about daygrid */
+  --list-event-dot-radius: 5px;
 }