more style refactor

packages/common/src/main.css

@@ -1,6 +1,5 @@
 
 @import './styles/vars'; // the :root declaration for css variables
-@import './styles/constants'; // sass-like variables
 @import './styles/mixins';
 
 @import './styles/page-root';
@@ -16,7 +15,6 @@
 @import './styles/sticky';
 @import './styles/view-harness';
 @import './styles/col-header';
-@import './styles/divider';
 @import './styles/bg';
 @import './styles/event';
 @import './styles/h-event';

packages/common/src/styles/bg.css

@@ -34,6 +34,7 @@
     background: var(--fc-today-color); // for all themes. bootstrap didn't provide a good semi-transparent color for this
   }
 
+  & .fc-cell-shaded,
   & .fc-day-disabled {
     background: var(--fc-neutral-color);
   }

packages/common/src/styles/event.css

@@ -87,7 +87,7 @@ a.fc-event:hover {
 .fc-event-selected:after {
   content: "";
   position: absolute;
-  z-index: $event-dimmer-z;
+  z-index: 1; // TODO: var
   top: -1px; // overcome border
   left: -1px; // overcome border
   right: -1px; // overcome border

packages/common/src/styles/h-event.css

@@ -7,18 +7,18 @@ A HORIZONTAL event
 
   &.fc-event-main {
     position: relative; // specifically for the z-index
-    z-index: $event-main-z;
+    z-index: 2; // TODO: var
   }
 
   &.fc-event-resizer {
     position: absolute;
-    z-index: $event-resizer-z;
+    z-index: 3; // TODO: var
   }
 
   &.fc-event-resizable-mouse {
 
     & .fc-event-resizer {
-      width: $event-resizer-mouse-width;
+      width: var(--event-resizer-girth);
       top: -1px; // overcome border
       bottom: -1px; // overcome border
     }
@@ -36,7 +36,7 @@ A HORIZONTAL event
     & .fc-event-resizer {
       @include event-resizer-dot;
       top: 50%;
-      margin-top: calc($event-resizer-dot-total-width / -2);
+      margin-top: calc(var(--event-resizer-dot-total-width) / -2);
     }
 
   }
@@ -55,20 +55,20 @@ A HORIZONTAL event
 
 .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($event-resizer-mouse-width / -2);
+  left: calc(var(--event-resizer-girth) / -2);
 }
 
 .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($event-resizer-mouse-width / -2);
+  right: calc(var(--event-resizer-girth) / -2);
 }
 
 .fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-start,
 .fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-end {
-  left: calc($event-resizer-dot-total-width / -2);
+  left: calc(var(--event-resizer-dot-total-width) / -2);
 }
 
 .fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-end,
 .fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-start {
-  right: calc($event-resizer-dot-total-width / -2);
+  right: calc(var(--event-resizer-dot-total-width) / -2);
 }

packages/common/src/styles/mixins.css

@@ -9,10 +9,10 @@
 }
 
 @mixin event-resizer-dot {
-  border-radius: calc($event-resizer-dot-total-width / 2);
-  border-width: $event-resizer-dot-border-width;
-  width: $event-resizer-dot-total-width;
-  height: $event-resizer-dot-total-width;
+  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;

packages/common/src/styles/vars.css

@@ -12,11 +12,13 @@ NOTE: for old browsers, will need to start after changing a variable
 :root {
   --fc-theme-standard-border-color: #ddd; /* TODO: rename */
   --fc-theme-standard-muted-bg-color: #eee; /* TODO: rename */
+
   --fc-non-business-color: rgba(215, 215, 215, 0.3);
   --fc-bg-event-color: rgb(143, 223, 130, 0.3);
   --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-smaller-font-size: .85em;
 
   --fc-button-text-color: #fff;
@@ -27,4 +29,9 @@ NOTE: for old browsers, will need to start after changing a variable
   --fc-button-active-bg-color: #1a252f;
   --fc-button-active-border-color: #151e27;
 
+  --now-indicator-color: red;
+
+  --event-resizer-girth: 8px;
+  --event-resizer-dot-total-width: 8px;
+  --event-resizer-dot-border-width: 1px;
 }

packages/common/src/theme/StandardTheme.ts

@@ -5,6 +5,7 @@ export class StandardTheme extends Theme {
 
 StandardTheme.prototype.classes = {
   root: 'fc-theme-standard', // TODO: compute this off of registered theme name
+  tableCellShaded: 'fc-cell-shaded',
   buttonGroup: 'fc-button-group',
   button: 'fc-button fc-button-primary',
   buttonActive: 'fc-button-active'

packages/daygrid/src/main.css

@@ -1,5 +1,4 @@
 
-@import '../../common/src/styles/constants';
 @import '../../common/src/styles/mixins';
 
 @import './styles/popover';

packages/timegrid/src/TimeColsView.tsx

@@ -81,7 +81,7 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
         outerContent: ( // TODO: rename to cellContent so don't need to define <tr>?
           <tr className='fc-scrollgrid-section'>
             <td
-              className={'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
+              className={'fc-timegrid-divider ' + context.theme.getClass('tableCellShaded')}
             />
           </tr>
         )
@@ -182,7 +182,7 @@ export abstract class TimeColsView extends DateComponent<ViewProps> {
           <tr className='fc-scrollgrid-section'>
             <td
               colSpan={2}
-              className={'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded')}
+              className={'fc-timegrid-divider ' + context.theme.getClass('tableCellShaded')}
             />
           </tr>
         )

packages/timegrid/src/main.css

@@ -1,5 +1,4 @@
 
-@import '../../common/src/styles/constants';
 @import '../../common/src/styles/mixins';
 @import './styles/constants';
 

packages/timegrid/src/styles/timegrid-now-indicator.css

@@ -9,7 +9,7 @@
     left: 0;
     right: 0;
     border-style: solid;
-    border-color: $now-indicator-color;
+    border-color: var(--now-indicator-color);
     border-width: 1px 0 0;
   }
 
@@ -20,7 +20,7 @@
     z-index: $timegrid-now-indicator-z;
     margin-top: -5px; // vertically center on top coordinate
     border-style: solid;
-    border-color: $now-indicator-color;
+    border-color: var(--now-indicator-color);
   }
 
 }

packages/timegrid/src/styles/v-event.css

@@ -7,15 +7,15 @@ A VERTICAL event
 
   & .fc-event-main {
     position: relative; // specifically for the z-index
-    z-index: $event-main-z;
+    z-index: 2; // TODO: var
   }
 
 
   // resizer (mouse AND touch)
 
   & .fc-event-resizer {
     position: absolute;
-    z-index: $event-resizer-z;
+    z-index: 3; // TODO: var
   }
 
   & .fc-event-resizer-start {
@@ -30,17 +30,17 @@ A VERTICAL event
   // resizer for MOUSE
 
   &.fc-event-resizable-mouse .fc-event-resizer {
-    height: $event-resizer-mouse-width;
+    height: var(--event-resizer-girth);
     left: -1px; // overcome border
     right: -1px; // overcome border
   }
 
   &.fc-event-resizable-mouse .fc-event-resizer-start {
-    top: calc($event-resizer-mouse-width / -2);
+    top: calc(var(--event-resizer-girth) / -2);
   }
 
   &.fc-event-resizable-mouse .fc-event-resizer-end {
-    bottom: calc($event-resizer-mouse-width / -2);
+    bottom: calc(var(--event-resizer-girth) / -2);
   }
 
 
@@ -49,15 +49,15 @@ A VERTICAL event
   &.fc-event-selected .fc-event-resizer {
     @include event-resizer-dot;
     left: 50%;
-    margin-left: calc($event-resizer-dot-total-width / -2);
+    margin-left: calc(var(--event-resizer-dot-total-width) / -2);
   }
 
   &.fc-event-selected .fc-event-resizer-start {
-    top: calc($event-resizer-dot-total-width / -2);
+    top: calc(var(--event-resizer-dot-total-width) / -2);
   }
 
   &.fc-event-selected .fc-event-resizer-end {
-    bottom: calc($event-resizer-dot-total-width / -2);
+    bottom: calc(var(--event-resizer-dot-total-width) / -2);
   }