refactor scss files, require from main.ts files

packages/bootstrap/src/main.ts

@@ -1,4 +1,5 @@
 import { Theme, createPlugin } from '@fullcalendar/core'
+import './main.scss'
 
 export class BootstrapTheme extends Theme {
 }

packages/core/src/_view.scss

@@ -1,37 +0,0 @@
-
-/* View Structure
---------------------------------------------------------------------------------------------------*/
-
-.fc {
-  display: flex;
-  flex-direction: column;
-}
-
-.fc-view-container {
-  flex-grow: 1;
-  position: relative;
-
-  display: flex;
-  flex-direction: column;
-
-  > * {
-    flex-grow: 1;
-  }
-}
-
-
-/* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
-/* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
-.fc-view-container *,
-.fc-view-container *:before,
-.fc-view-container *:after {
-  -webkit-box-sizing: content-box;
-     -moz-box-sizing: content-box;
-          box-sizing: content-box;
-}
-
-.fc-view, /* scope positioning and z-index's for everything within the view */
-.fc-view > table { /* so dragged elements can be above the view's main element */
-  position: relative;
-  z-index: 1;
-}

packages/core/src/common/_common.scss

@@ -1,550 +0,0 @@
-
-.fc {
-  direction: ltr;
-  text-align: left;
-}
-
-.fc-rtl {
-  text-align: right;
-}
-
-body .fc { /* extra precedence to overcome jqui */
-  font-size: 1em;
-}
-
-
-/* Colors
---------------------------------------------------------------------------------------------------*/
-
-
-.fc-highlight { /* when user is selecting cells */
-  background: #bce8f1;
-  opacity: .3;
-}
-
-.fc-bgevent { /* default look for background events */
-  background: rgb(143, 223, 130);
-  opacity: .3;
-}
-
-.fc-nonbusiness { /* default look for non-business-hours areas */
-  /* will inherit .fc-bgevent's styles */
-  background: #d7d7d7;
-}
-
-
-/* Popover
---------------------------------------------------------------------------------------------------*/
-
-.fc-popover {
-  position: fixed;
-  top: 0; // for when not positioned yet
-  box-shadow: 0 2px 6px rgba(0,0,0,.15);
-}
-
-.fc-popover .fc-header { /* TODO: be more consistent with fc-head/fc-body */
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2px 4px;
-}
-
-.fc-rtl .fc-popover .fc-header {
-  flex-direction: row-reverse;
-}
-
-.fc-popover .fc-header .fc-title {
-  margin: 0 2px;
-}
-
-.fc-popover .fc-header .fc-close {
-  cursor: pointer;
-  opacity: 0.65;
-  font-size: 1.1em;
-}
-
-
-/* Misc Reusable Components
---------------------------------------------------------------------------------------------------*/
-
-.fc-divider {
-  border-style: solid;
-  border-width: 1px;
-}
-
-hr.fc-divider {
-  height: 0;
-  margin: 0;
-  padding: 0 0 2px; /* height is unreliable across browsers, so use padding */
-  border-width: 1px 0;
-}
-
-.fc-bg,
-.fc-bgevent-skeleton,
-.fc-highlight-skeleton,
-.fc-mirror-skeleton {
-  /* these element should always cling to top-left/right corners */
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-.fc-bg {
-  bottom: 0; /* strech bg to bottom edge */
-}
-
-.fc-bg table {
-  height: 100%; /* strech bg to bottom edge */
-}
-
-
-/* Tables
---------------------------------------------------------------------------------------------------*/
-
-.fc table {
-  width: 100%;
-  box-sizing: border-box; /* fix scrollbar issue in firefox */
-  table-layout: fixed;
-  border-collapse: collapse;
-  border-spacing: 0;
-  font-size: 1em; /* normalize cross-browser */
-}
-
-.fc th {
-  text-align: center;
-}
-
-.fc th,
-.fc td {
-  border-style: solid;
-  border-width: 1px;
-  padding: 0;
-  vertical-align: top;
-}
-
-.fc td.fc-today {
-  border-style: double; /* overcome neighboring borders */
-}
-
-
-/* Internal Nav Links
---------------------------------------------------------------------------------------------------*/
-
-a[data-goto] {
-  cursor: pointer;
-}
-
-a[data-goto]:hover {
-  text-decoration: underline;
-}
-
-
-/* Fake Table Rows
---------------------------------------------------------------------------------------------------*/
-
-.fc .fc-row { /* extra precedence to overcome themes forcing a 1px border */
-  /* no visible border by default. but make available if need be (scrollbar width compensation) */
-  border-style: solid;
-  border-width: 0;
-}
-
-.fc-row table {
-  /* don't put left/right border on anything within a fake row.
-     the outer tbody will worry about this */
-  border-left: 0 hidden transparent;
-  border-right: 0 hidden transparent;
-
-  /* no bottom borders on rows */
-  border-bottom: 0 hidden transparent;
-}
-
-.fc-row:first-child table {
-  border-top: 0 hidden transparent; /* no top border on first row */
-}
-
-
-/* Day Row (used within the header and the DayGrid)
---------------------------------------------------------------------------------------------------*/
-
-.fc-row {
-  position: relative;
-}
-
-.fc-row .fc-bg {
-  z-index: 1;
-}
-
-/* highlighting cells & background event skeleton */
-
-.fc-row .fc-bgevent-skeleton,
-.fc-row .fc-highlight-skeleton {
-  bottom: 0; /* stretch skeleton to bottom of row */
-}
-
-.fc-row .fc-bgevent-skeleton table,
-.fc-row .fc-highlight-skeleton table {
-  height: 100%; /* stretch skeleton to bottom of row */
-}
-
-.fc-row .fc-highlight-skeleton td,
-.fc-row .fc-bgevent-skeleton td {
-  border-color: transparent;
-}
-
-.fc-row .fc-bgevent-skeleton {
-  z-index: 2;
-
-}
-
-.fc-row .fc-highlight-skeleton {
-  z-index: 3;
-}
-
-/*
-row content (which contains day/week numbers and events) as well as "mirror" (which contains
-temporary rendered events).
-*/
-
-.fc-row .fc-content-skeleton {
-  position: relative;
-  z-index: 4;
-  padding-bottom: 2px; /* matches the space above the events */
-}
-
-.fc-row .fc-mirror-skeleton {
-  z-index: 5;
-}
-
-.fc .fc-row .fc-content-skeleton table,
-.fc .fc-row .fc-content-skeleton td,
-.fc .fc-row .fc-mirror-skeleton td {
-  /* see-through to the background below */
-  /* extra precedence to prevent theme-provided backgrounds */
-  background: none; /* in case <td>s are globally styled */
-  border-color: transparent;
-}
-
-.fc-row .fc-content-skeleton td,
-.fc-row .fc-mirror-skeleton td {
-  /* don't put a border between events and/or the day number */
-  border-bottom: 0;
-}
-
-.fc-row .fc-content-skeleton tbody td, /* cells with events inside (so NOT the day number cell) */
-.fc-row .fc-mirror-skeleton tbody td {
-  /* don't put a border between event cells */
-  border-top: 0;
-}
-
-
-/* Scrolling Container
---------------------------------------------------------------------------------------------------*/
-
-.fc-scroller {
-  -webkit-overflow-scrolling: touch;
-}
-
-/* TODO: move to timegrid/daygrid */
-.fc-scroller > .fc-day-grid,
-.fc-scroller > .fc-time-grid {
-  position: relative; /* re-scope all positions */
-  width: 100%; /* hack to force re-sizing this inner element when scrollbars appear/disappear */
-}
-
-
-/* Global Event Styles
---------------------------------------------------------------------------------------------------*/
-
-.fc-event {
-  position: relative; /* for resize handle and other inner positioning */
-  display: block; /* make the <a> tag block */
-  font-size: .85em;
-  line-height: 1.4;
-  border-radius: 3px;
-  border: 1px solid #3788d8;
-}
-
-.fc-event,
-.fc-event-dot {
-  background-color: #3788d8; /* default BACKGROUND color */
-}
-
-.fc-event,
-.fc-event:hover {
-  color: #fff; /* default TEXT color */
-  text-decoration: none; /* if <a> has an href */
-}
-
-.fc-event[href],
-.fc-event.fc-draggable {
-  cursor: pointer; /* give events with links and draggable events a hand mouse pointer */
-}
-
-.fc-not-allowed, /* causes a "warning" cursor. applied on body */
-.fc-not-allowed .fc-event { /* to override an event's custom cursor */
-  cursor: not-allowed;
-}
-
-.fc-event .fc-content {
-  position: relative;
-  z-index: 2;
-}
-
-/* resizer (cursor AND touch devices) */
-
-.fc-event .fc-resizer {
-  position: absolute;
-  z-index: 4;
-}
-
-/* resizer (touch devices) */
-
-.fc-event .fc-resizer {
-  display: none;
-}
-
-.fc-event.fc-allow-mouse-resize .fc-resizer,
-.fc-event.fc-selected .fc-resizer {
-  /* only show when hovering or selected (with touch) */
-  display: block;
-}
-
-/* hit area */
-
-.fc-event.fc-selected .fc-resizer:before {
-  /* 40x40 touch area */
-  content: "";
-  position: absolute;
-  z-index: 9999; /* user of this util can scope within a lower z-index */
-  top: 50%;
-  left: 50%;
-  width: 40px;
-  height: 40px;
-  margin-left: -20px;
-  margin-top: -20px;
-}
-
-
-/* Event Selection (only for touch devices)
---------------------------------------------------------------------------------------------------*/
-
-.fc-event.fc-selected {
-  z-index: 9999 !important; /* overcomes inline z-index */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.fc-event.fc-selected:after {
-  content: "";
-  position: absolute;
-  z-index: 1; /* same z-index as fc-bg, behind text */
-  /* overcome the borders */
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
-  /* darkening effect */
-  background: #000;
-  opacity: .25;
-}
-
-
-/* Event Dragging
---------------------------------------------------------------------------------------------------*/
-
-.fc-event.fc-dragging.fc-selected {
-  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
-}
-
-.fc-event.fc-dragging:not(.fc-selected) {
-  opacity: .75;
-}
-
-
-/* Horizontal Events
---------------------------------------------------------------------------------------------------*/
-
-/* bigger touch area when selected */
-.fc-h-event.fc-selected:before {
-  content: "";
-  position: absolute;
-  z-index: 3; /* below resizers */
-  top: -10px;
-  bottom: -10px;
-  left: 0;
-  right: 0;
-}
-
-/* events that are continuing to/from another week. kill rounded corners and butt up against edge */
-
-.fc-ltr .fc-h-event.fc-not-start,
-.fc-rtl .fc-h-event.fc-not-end {
-  margin-left: 0;
-  border-left-width: 0;
-  padding-left: 1px; /* replace the border with padding */
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.fc-ltr .fc-h-event.fc-not-end,
-.fc-rtl .fc-h-event.fc-not-start {
-  margin-right: 0;
-  border-right-width: 0;
-  padding-right: 1px; /* replace the border with padding */
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/* resizer (cursor AND touch devices) */
-
-/* left resizer  */
-.fc-ltr .fc-h-event .fc-start-resizer,
-.fc-rtl .fc-h-event .fc-end-resizer {
-  cursor: w-resize;
-  left: -1px; /* overcome border */
-}
-
-/* right resizer */
-.fc-ltr .fc-h-event .fc-end-resizer,
-.fc-rtl .fc-h-event .fc-start-resizer {
-  cursor: e-resize;
-  right: -1px; /* overcome border */
-}
-
-/* resizer (mouse devices) */
-
-.fc-h-event.fc-allow-mouse-resize .fc-resizer {
-  width: 7px;
-  top: -1px; /* overcome top border */
-  bottom: -1px; /* overcome bottom border */
-}
-
-/* resizer (touch devices) */
-
-.fc-h-event.fc-selected .fc-resizer {
-  /* 8x8 little dot */
-  border-radius: 4px;
-  border-width: 1px;
-  width: 6px;
-  height: 6px;
-  border-style: solid;
-  border-color: inherit;
-  background: #fff;
-  /* vertically center */
-  top: 50%;
-  margin-top: -4px;
-}
-
-/* left resizer  */
-.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
-.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
-  margin-left: -4px; /* centers the 8x8 dot on the left edge */
-}
-
-/* right resizer */
-.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
-.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
-  margin-right: -4px; /* centers the 8x8 dot on the right edge */
-}
-
-
-/* DayGrid events
-----------------------------------------------------------------------------------------------------
-We use the full "fc-day-grid-event" class instead of using descendants because the event won't
-be a descendant of the grid when it is being dragged.
-*/
-
-.fc-day-grid-event {
-  margin: 1px 2px 0; /* spacing between events and edges */
-  padding: 0 1px;
-}
-
-tr:first-child > td > .fc-day-grid-event {
-  margin-top: 2px; /* a little bit more space before the first event */
-}
-.fc-mirror-skeleton tr:first-child > td > .fc-day-grid-event {
-  margin-top: 0; /* except for mirror skeleton */
-}
-
-.fc-day-grid-event .fc-content { /* force events to be one-line tall */
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.fc-day-grid-event .fc-time {
-  font-weight: bold;
-}
-
-/* resizer (cursor devices) */
-
-/* left resizer  */
-.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
-.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
-  margin-left: -2px; /* to the day cell's edge */
-}
-
-/* right resizer */
-.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
-.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
-  margin-right: -2px; /* to the day cell's edge */
-}
-
-
-/* Event Limiting
---------------------------------------------------------------------------------------------------*/
-
-/* "more" link that represents hidden events */
-
-a.fc-more {
-  margin: 1px 3px;
-  font-size: .85em;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-a.fc-more:hover {
-  text-decoration: underline;
-}
-
-.fc-limited { /* rows and cells that are hidden because of a "more" link */
-  display: none;
-}
-
-/* popover that appears when "more" link is clicked */
-
-.fc-day-grid .fc-row {
-  z-index: 1; /* make the "more" popover one higher than this */
-}
-
-.fc-more-popover {
-  z-index: 2;
-  width: 220px;
-}
-
-.fc-more-popover .fc-event-container {
-  padding: 10px;
-}
-
-
-/* Now Indicator
---------------------------------------------------------------------------------------------------*/
-
-.fc-now-indicator {
-  position: absolute;
-  border: 0 solid red;
-}
-
-
-/* Utilities
---------------------------------------------------------------------------------------------------*/
-
-.fc-unselectable {
-  -webkit-user-select: none;
-   -khtml-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}

packages/core/src/common/_print.scss

@@ -1,197 +0,0 @@
-
-.fc {
-  max-width: 100% !important;
-}
-
-
-/* Global Event Restyling
---------------------------------------------------------------------------------------------------*/
-
-.fc-event {
-  background: #fff !important;
-  color: #000 !important;
-  page-break-inside: avoid;
-}
-
-.fc-event .fc-resizer {
-  display: none;
-}
-
-
-/* Table & Day-Row Restyling
---------------------------------------------------------------------------------------------------*/
-
-.fc th,
-.fc td,
-.fc hr,
-.fc thead,
-.fc tbody,
-.fc-row {
-  border-color: #ccc !important;
-  background: #fff !important;
-}
-
-/* kill the overlaid, absolutely-positioned components */
-/* common... */
-.fc-bg,
-.fc-bgevent-skeleton,
-.fc-highlight-skeleton,
-.fc-mirror-skeleton,
-/* for timegrid. within cells within table skeletons... */
-.fc-bgevent-container,
-.fc-business-container,
-.fc-highlight-container,
-.fc-mirror-container {
-  display: none;
-}
-
-/* don't force a min-height on rows (for DayGrid) */
-.fc tbody .fc-row {
-  height: auto !important; /* undo height that JS set in distributeHeight */
-  min-height: 0 !important; /* undo the min-height from each view's specific stylesheet */
-}
-
-.fc tbody .fc-row .fc-content-skeleton {
-  position: static; /* undo .fc-rigid */
-  padding-bottom: 0 !important; /* use a more border-friendly method for this... */
-}
-
-.fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td { /* only works in newer browsers */
-  padding-bottom: 1em; /* ...gives space within the skeleton. also ensures min height in a way */
-}
-
-.fc tbody .fc-row .fc-content-skeleton table {
-  /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
-     making it look more like 3em. for other browers, it will already be this tall */
-  height: 1em;
-}
-
-
-/* Undo month-view event limiting. Display all events and hide the "more" links
---------------------------------------------------------------------------------------------------*/
-
-.fc-more-cell,
-.fc-more {
-  display: none !important;
-}
-
-.fc tr.fc-limited {
-  display: table-row !important;
-}
-
-.fc td.fc-limited {
-  display: table-cell !important;
-}
-
-.fc-popover {
-  display: none; /* never display the "more.." popover in print mode */
-}
-
-
-/* TimeGrid Restyling
---------------------------------------------------------------------------------------------------*/
-
-/* undo the min-height 100% trick used to fill the container's height */
-.fc-time-grid {
-  min-height: 0 !important;
-}
-
-/* don't display the side axis at all ("all-day" and time cells) */
-.fc-timeGrid-view .fc-axis {
-  display: none;
-}
-
-/* don't display the horizontal lines */
-.fc-slats,
-.fc-time-grid hr { /* this hr is used when height is underused and needs to be filled */
-  display: none !important; /* important overrides inline declaration */
-}
-
-/* let the container that holds the events be naturally positioned and create real height */
-.fc-time-grid .fc-content-skeleton {
-  position: static;
-}
-
-/* in case there are no events, we still want some height */
-.fc-time-grid .fc-content-skeleton table {
-  height: 4em;
-}
-
-/* kill the horizontal spacing made by the event container. event margins will be done below */
-.fc-time-grid .fc-event-container {
-  margin: 0 !important;
-}
-
-
-/* TimeGrid *Event* Restyling
---------------------------------------------------------------------------------------------------*/
-
-/* naturally position events, vertically stacking them */
-.fc-time-grid .fc-event {
-  position: static !important;
-  margin: 3px 2px !important;
-}
-
-/* for events that continue to a future day, give the bottom border back */
-.fc-time-grid .fc-event.fc-not-end {
-  border-bottom-width: 1px !important;
-}
-
-/* indicate the event continues via "..." text */
-.fc-time-grid .fc-event.fc-not-end:after {
-  content: "...";
-}
-
-/* for events that are continuations from previous days, give the top border back */
-.fc-time-grid .fc-event.fc-not-start {
-  border-top-width: 1px !important;
-}
-
-/* indicate the event is a continuation via "..." text */
-.fc-time-grid .fc-event.fc-not-start:before {
-  content: "...";
-}
-
-/* time */
-
-/* undo a previous declaration and let the time text span to a second line */
-.fc-time-grid .fc-event .fc-time {
-  white-space: normal !important;
-}
-
-/* hide the the time that is normally displayed... */
-.fc-time-grid .fc-event .fc-time span {
-  display: none;
-}
-
-/* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */
-.fc-time-grid .fc-event .fc-time:after {
-  content: attr(data-full);
-}
-
-
-/* Vertical Scroller & Containers
---------------------------------------------------------------------------------------------------*/
-
-/* kill the scrollbars and allow natural height */
-.fc-scroller,
-.fc-day-grid-container,    /* these divs might be assigned height, which we need to cleared */
-.fc-time-grid-container {  /* */
-  overflow: visible !important;
-  height: auto !important;
-}
-
-/* kill the horizontal border/padding used to compensate for scrollbars */
-.fc-row {
-  border: 0 !important;
-  margin: 0 !important;
-}
-
-
-/* Button Controls
---------------------------------------------------------------------------------------------------*/
-
-.fc-button-group,
-.fc button {
-  display: none; /* don't display any button-related controls */
-}

packages/core/src/common/_standard.scss

@@ -1,231 +0,0 @@
-
-/*
-TODO: more distinction between this file and common.css
-*/
-
-/* Colors
---------------------------------------------------------------------------------------------------*/
-
-.fc-unthemed th,
-.fc-unthemed td,
-.fc-unthemed thead,
-.fc-unthemed tbody,
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-row,
-.fc-unthemed .fc-content, /* for gutter border */
-.fc-unthemed .fc-popover,
-.fc-unthemed .fc-list-view,
-.fc-unthemed .fc-list-heading td {
-  border-color: #ddd;
-}
-
-.fc-unthemed .fc-popover {
-  background-color: #fff;
-}
-
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-popover .fc-header,
-.fc-unthemed .fc-list-heading td {
-  background: #eee;
-}
-
-.fc-unthemed td.fc-today {
-  background: #fcf8e3;
-}
-
-.fc-unthemed .fc-disabled-day {
-  background: #d7d7d7;
-  opacity: .3;
-}
-
-
-/* Icons
---------------------------------------------------------------------------------------------------
-from https://feathericons.com/ and built with IcoMoon
-*/
-
-@import './icons/icons';
-
-.fc-icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  text-align: center;
-}
-
-
-/* Buttons
---------------------------------------------------------------------------------------------------
-Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css
-*/
-
-/* reset */
-
-.fc-button {
-  border-radius: 0;
-  overflow: visible;
-  text-transform: none;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.fc-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-.fc-button {
-  -webkit-appearance: button;
-}
-
-.fc-button:not(:disabled) {
-  cursor: pointer;
-}
-
-.fc-button::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-/* theme */
-
-.fc-button {
-  display: inline-block;
-  font-weight: 400;
-  color: #212529;
-  text-align: center;
-  vertical-align: middle;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  background-color: transparent;
-  border: 1px solid transparent;
-  padding: 0.4em 0.65em;
-  font-size: 1em;
-  line-height: 1.5;
-  border-radius: 0.25em;
-}
-
-.fc-button:hover {
-  color: #212529;
-  text-decoration: none;
-}
-
-.fc-button:focus {
-  outline: 0;
-  -webkit-box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
-          box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
-}
-
-.fc-button:disabled {
-  opacity: 0.65;
-}
-
-/* "primary" coloring */
-
-.fc-button-primary {
-  color: #fff;
-  background-color: #2C3E50;
-  border-color: #2C3E50;
-}
-
-.fc-button-primary:hover {
-  color: #fff;
-  background-color: #1e2b37;
-  border-color: #1a252f;
-}
-
-.fc-button-primary:focus {
-  -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
-          box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
-}
-
-.fc-button-primary:disabled {
-  color: #fff;
-  background-color: #2C3E50;
-  border-color: #2C3E50;
-}
-
-.fc-button-primary:not(:disabled):active,
-.fc-button-primary:not(:disabled).fc-button-active {
-  color: #fff;
-  background-color: #1a252f;
-  border-color: #151e27;
-}
-
-.fc-button-primary:not(:disabled):active:focus,
-.fc-button-primary:not(:disabled).fc-button-active:focus {
-  -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
-          box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
-}
-
-/* icons within buttons */
-
-.fc-button .fc-icon {
-  vertical-align: middle;
-  font-size: 1.5em; // bump up the size (but don't make it bigger than line-height of button, which is 1.5em also)
-}
-
-
-/* Buttons Groups
---------------------------------------------------------------------------------------------------*/
-
-.fc-button-group {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.fc-button-group > .fc-button {
-  position: relative;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-}
-
-.fc-button-group > .fc-button:hover {
-  z-index: 1;
-}
-
-.fc-button-group > .fc-button:focus,
-.fc-button-group > .fc-button:active,
-.fc-button-group > .fc-button.fc-button-active {
-  z-index: 1;
-}
-
-.fc-button-group > .fc-button:not(:first-child) {
-  margin-left: -1px;
-}
-
-.fc-button-group > .fc-button:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.fc-button-group > .fc-button:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-
-
-/* Popover
---------------------------------------------------------------------------------------------------*/
-
-.fc-unthemed .fc-popover {
-  border-width: 1px;
-  border-style: solid;
-}
-
-
-/* List View
---------------------------------------------------------------------------------------------------*/
-
-.fc-unthemed .fc-list-item:hover td {
-  background-color: #f5f5f5;
-}

packages/core/src/main.scss

@@ -1,11 +1,16 @@
 
-@import './scrollgrid/main';
-
-@import './common/common';
-@import './common/standard';
-@import './toolbar';
-@import './view';
-
-@media print {
-  @import './common/print';
-}
+@import './styles/vars';
+@import './styles/resets';
+@import './styles/utils';
+@import './styles/event';
+@import './styles/event-horizontal';
+@import './styles/event-limit';
+@import './styles/icons/main';
+@import './styles/button';
+@import './styles/button-group';
+@import './styles/toolbar';
+@import './styles/popover';
+@import './styles/scroller';
+@import './styles/scrollgrid';
+@import './styles/view-structure';
+@import './styles/legacy';

packages/core/src/main.ts

@@ -1,3 +1,4 @@
+import './main.scss'
 
 // exports
 // --------------------------------------------------------------------------------------------------

packages/core/src/styles/_button-group.scss

@@ -0,0 +1,39 @@
+
+.fc-button-group {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.fc-button-group > .fc-button {
+  position: relative;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+}
+
+.fc-button-group > .fc-button:hover {
+  z-index: 1;
+}
+
+.fc-button-group > .fc-button:focus,
+.fc-button-group > .fc-button:active,
+.fc-button-group > .fc-button.fc-button-active {
+  z-index: 1;
+}
+
+.fc-button-group > .fc-button:not(:first-child) {
+  margin-left: -1px;
+}
+
+.fc-button-group > .fc-button:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.fc-button-group > .fc-button:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

packages/core/src/styles/_button.scss

@@ -0,0 +1,114 @@
+
+/*
+Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css
+*/
+
+/* reset */
+
+.fc-button {
+  border-radius: 0;
+  overflow: visible;
+  text-transform: none;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.fc-button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.fc-button {
+  -webkit-appearance: button;
+}
+
+.fc-button:not(:disabled) {
+  cursor: pointer;
+}
+
+.fc-button::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+/* theme */
+
+.fc-button {
+  display: inline-block;
+  font-weight: 400;
+  color: #212529;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.4em 0.65em;
+  font-size: 1em;
+  line-height: 1.5;
+  border-radius: 0.25em;
+}
+
+.fc-button:hover {
+  color: #212529;
+  text-decoration: none;
+}
+
+.fc-button:focus {
+  outline: 0;
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
+          box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
+}
+
+.fc-button:disabled {
+  opacity: 0.65;
+}
+
+/* "primary" coloring */
+
+.fc-button-primary {
+  color: #fff;
+  background-color: #2C3E50;
+  border-color: #2C3E50;
+}
+
+.fc-button-primary:hover {
+  color: #fff;
+  background-color: #1e2b37;
+  border-color: #1a252f;
+}
+
+.fc-button-primary:focus {
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
+          box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
+}
+
+.fc-button-primary:disabled {
+  color: #fff;
+  background-color: #2C3E50;
+  border-color: #2C3E50;
+}
+
+.fc-button-primary:not(:disabled):active,
+.fc-button-primary:not(:disabled).fc-button-active {
+  color: #fff;
+  background-color: #1a252f;
+  border-color: #151e27;
+}
+
+.fc-button-primary:not(:disabled):active:focus,
+.fc-button-primary:not(:disabled).fc-button-active:focus {
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
+          box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
+}
+
+/* icons within buttons */
+
+.fc-button .fc-icon {
+  vertical-align: middle;
+  font-size: 1.5em; // bump up the size (but don't make it bigger than line-height of button, which is 1.5em also)
+}

packages/core/src/styles/_event-horizontal.scss

@@ -0,0 +1,125 @@
+
+/* bigger touch area when selected */
+.fc-h-event.fc-selected:before {
+  content: "";
+  position: absolute;
+  z-index: 3; /* below resizers */
+  top: -10px;
+  bottom: -10px;
+  left: 0;
+  right: 0;
+}
+
+/* events that are continuing to/from another week. kill rounded corners and butt up against edge */
+
+.fc-ltr .fc-h-event.fc-not-start,
+.fc-rtl .fc-h-event.fc-not-end {
+  margin-left: 0;
+  border-left-width: 0;
+  padding-left: 1px; /* replace the border with padding */
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.fc-ltr .fc-h-event.fc-not-end,
+.fc-rtl .fc-h-event.fc-not-start {
+  margin-right: 0;
+  border-right-width: 0;
+  padding-right: 1px; /* replace the border with padding */
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* resizer (cursor AND touch devices) */
+
+/* left resizer  */
+.fc-ltr .fc-h-event .fc-start-resizer,
+.fc-rtl .fc-h-event .fc-end-resizer {
+  cursor: w-resize;
+  left: -1px; /* overcome border */
+}
+
+/* right resizer */
+.fc-ltr .fc-h-event .fc-end-resizer,
+.fc-rtl .fc-h-event .fc-start-resizer {
+  cursor: e-resize;
+  right: -1px; /* overcome border */
+}
+
+/* resizer (mouse devices) */
+
+.fc-h-event.fc-allow-mouse-resize .fc-resizer {
+  width: 7px;
+  top: -1px; /* overcome top border */
+  bottom: -1px; /* overcome bottom border */
+}
+
+/* resizer (touch devices) */
+
+.fc-h-event.fc-selected .fc-resizer {
+  /* 8x8 little dot */
+  border-radius: 4px;
+  border-width: 1px;
+  width: 6px;
+  height: 6px;
+  border-style: solid;
+  border-color: inherit;
+  background: #fff;
+  /* vertically center */
+  top: 50%;
+  margin-top: -4px;
+}
+
+/* left resizer  */
+.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
+.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
+  margin-left: -4px; /* centers the 8x8 dot on the left edge */
+}
+
+/* right resizer */
+.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
+.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
+  margin-right: -4px; /* centers the 8x8 dot on the right edge */
+}
+
+
+/* DayGrid events
+----------------------------------------------------------------------------------------------------
+We use the full "fc-day-grid-event" class instead of using descendants because the event won't
+be a descendant of the grid when it is being dragged.
+*/
+
+.fc-day-grid-event {
+  margin: 1px 2px 0; /* spacing between events and edges */
+  padding: 0 1px;
+}
+
+tr:first-child > td > .fc-day-grid-event {
+  margin-top: 2px; /* a little bit more space before the first event */
+}
+.fc-mirror-skeleton tr:first-child > td > .fc-day-grid-event {
+  margin-top: 0; /* except for mirror skeleton */
+}
+
+.fc-day-grid-event .fc-content { /* force events to be one-line tall */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.fc-day-grid-event .fc-time {
+  font-weight: bold;
+}
+
+/* resizer (cursor devices) */
+
+/* left resizer  */
+.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
+.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
+  margin-left: -2px; /* to the day cell's edge */
+}
+
+/* right resizer */
+.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
+.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
+  margin-right: -2px; /* to the day cell's edge */
+}

packages/core/src/styles/_event-limit.scss

@@ -0,0 +1,47 @@
+
+/* "more" link that represents hidden events */
+
+a.fc-more {
+  margin: 1px 3px;
+  font-size: .85em;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+a.fc-more:hover {
+  text-decoration: underline;
+}
+
+.fc-limited { /* rows and cells that are hidden because of a "more" link */
+  display: none;
+}
+
+.fc-more-popover {
+  z-index: 2;
+  width: 220px;
+}
+
+.fc-more-popover .fc-event-container {
+  padding: 10px;
+}
+
+
+@media print {
+
+  /* Undo month-view event limiting. Display all events and hide the "more" links
+  --------------------------------------------------------------------------------------------------*/
+
+  .fc-more-cell,
+  .fc-more {
+    display: none !important;
+  }
+
+  .fc tr.fc-limited {
+    display: table-row !important;
+  }
+
+  .fc td.fc-limited {
+    display: table-cell !important;
+  }
+
+}

packages/core/src/styles/_event.scss

@@ -0,0 +1,122 @@
+
+.fc-event {
+  position: relative; /* for resize handle and other inner positioning */
+  display: block; /* make the <a> tag block */
+  font-size: .85em;
+  line-height: 1.4;
+  border-radius: 3px;
+  border: 1px solid #3788d8;
+}
+
+.fc-event,
+.fc-event-dot {
+  background-color: #3788d8; /* default BACKGROUND color */
+}
+
+.fc-event,
+.fc-event:hover {
+  color: #fff; /* default TEXT color */
+  text-decoration: none; /* if <a> has an href */
+}
+
+.fc-event[href],
+.fc-event.fc-draggable {
+  cursor: pointer; /* give events with links and draggable events a hand mouse pointer */
+}
+
+.fc-not-allowed, /* causes a "warning" cursor. applied on body */
+.fc-not-allowed .fc-event { /* to override an event's custom cursor */
+  cursor: not-allowed;
+}
+
+.fc-event .fc-content {
+  position: relative;
+  z-index: 2;
+}
+
+/* resizer (cursor AND touch devices) */
+
+.fc-event .fc-resizer {
+  position: absolute;
+  z-index: 4;
+}
+
+/* resizer (touch devices) */
+
+.fc-event .fc-resizer {
+  display: none;
+}
+
+.fc-event.fc-allow-mouse-resize .fc-resizer,
+.fc-event.fc-selected .fc-resizer {
+  /* only show when hovering or selected (with touch) */
+  display: block;
+}
+
+/* hit area */
+
+.fc-event.fc-selected .fc-resizer:before {
+  /* 40x40 touch area */
+  content: "";
+  position: absolute;
+  z-index: 9999; /* user of this util can scope within a lower z-index */
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+}
+
+
+/* Event Selection (only for touch devices)
+--------------------------------------------------------------------------------------------------*/
+
+.fc-event.fc-selected {
+  z-index: 9999 !important; /* overcomes inline z-index */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.fc-event.fc-selected:after {
+  content: "";
+  position: absolute;
+  z-index: 1; /* same z-index as fc-bg, behind text */
+  /* overcome the borders */
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  /* darkening effect */
+  background: #000;
+  opacity: .25;
+}
+
+
+/* Event Dragging
+--------------------------------------------------------------------------------------------------*/
+
+.fc-event.fc-dragging.fc-selected {
+  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
+}
+
+.fc-event.fc-dragging:not(.fc-selected) {
+  opacity: .75;
+}
+
+
+/* For Print
+--------------------------------------------------------------------------------------------------*/
+
+@media print {
+
+  .fc-event {
+    background: #fff !important;
+    color: #000 !important;
+    page-break-inside: avoid;
+  }
+
+  .fc-event .fc-resizer {
+    display: none;
+  }
+
+}

packages/core/src/styles/_legacy.scss

@@ -0,0 +1,168 @@
+
+
+/* Misc Reusable Components
+--------------------------------------------------------------------------------------------------*/
+
+.fc-bg,
+.fc-bgevent-skeleton,
+.fc-highlight-skeleton,
+.fc-mirror-skeleton {
+  /* these element should always cling to top-left/right corners */
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.fc-bg {
+  bottom: 0; /* strech bg to bottom edge */
+}
+
+.fc-bg table {
+  height: 100%; /* strech bg to bottom edge */
+}
+
+
+/* Fake Table Rows
+--------------------------------------------------------------------------------------------------*/
+
+.fc .fc-row { /* extra precedence to overcome themes forcing a 1px border */
+  /* no visible border by default. but make available if need be (scrollbar width compensation) */
+  border-style: solid;
+  border-width: 0;
+}
+
+.fc-row table {
+  /* don't put left/right border on anything within a fake row.
+     the outer tbody will worry about this */
+  border-left: 0 hidden transparent;
+  border-right: 0 hidden transparent;
+
+  /* no bottom borders on rows */
+  border-bottom: 0 hidden transparent;
+}
+
+.fc-row:first-child table {
+  border-top: 0 hidden transparent; /* no top border on first row */
+}
+
+
+/* Day Row (used within the header and the DayGrid)
+--------------------------------------------------------------------------------------------------*/
+
+.fc-row {
+  position: relative;
+}
+
+.fc-row .fc-bg {
+  z-index: 1;
+}
+
+/* highlighting cells & background event skeleton */
+
+.fc-row .fc-bgevent-skeleton,
+.fc-row .fc-highlight-skeleton {
+  bottom: 0; /* stretch skeleton to bottom of row */
+}
+
+.fc-row .fc-bgevent-skeleton table,
+.fc-row .fc-highlight-skeleton table {
+  height: 100%; /* stretch skeleton to bottom of row */
+}
+
+.fc-row .fc-highlight-skeleton td,
+.fc-row .fc-bgevent-skeleton td {
+  border-color: transparent;
+}
+
+.fc-row .fc-bgevent-skeleton {
+  z-index: 2;
+
+}
+
+.fc-row .fc-highlight-skeleton {
+  z-index: 3;
+}
+
+/*
+row content (which contains day/week numbers and events) as well as "mirror" (which contains
+temporary rendered events).
+*/
+
+.fc-row .fc-content-skeleton {
+  position: relative;
+  z-index: 4;
+  padding-bottom: 2px; /* matches the space above the events */
+}
+
+.fc-row .fc-mirror-skeleton {
+  z-index: 5;
+}
+
+.fc .fc-row .fc-content-skeleton table,
+.fc .fc-row .fc-content-skeleton td,
+.fc .fc-row .fc-mirror-skeleton td {
+  /* see-through to the background below */
+  /* extra precedence to prevent theme-provided backgrounds */
+  background: none; /* in case <td>s are globally styled */
+  border-color: transparent;
+}
+
+.fc-row .fc-content-skeleton td,
+.fc-row .fc-mirror-skeleton td {
+  /* don't put a border between events and/or the day number */
+  border-bottom: 0;
+}
+
+.fc-row .fc-content-skeleton tbody td, /* cells with events inside (so NOT the day number cell) */
+.fc-row .fc-mirror-skeleton tbody td {
+  /* don't put a border between event cells */
+  border-top: 0;
+}
+
+
+/* popover that appears when "more" link is clicked */
+
+.fc-day-grid .fc-row {
+  z-index: 1; /* make the "more" popover one higher than this */
+}
+
+
+@media print {
+
+  /* kill the overlaid, absolutely-positioned components */
+  /* common... */
+  .fc-bg,
+  .fc-bgevent-skeleton,
+  .fc-highlight-skeleton,
+  .fc-mirror-skeleton,
+  /* for timegrid. within cells within table skeletons... */
+  .fc-bgevent-container,
+  .fc-business-container,
+  .fc-highlight-container,
+  .fc-mirror-container {
+    display: none;
+  }
+
+  /* don't force a min-height on rows (for DayGrid) */
+  .fc tbody .fc-row {
+    height: auto !important; /* undo height that JS set in distributeHeight */
+    min-height: 0 !important; /* undo the min-height from each view's specific stylesheet */
+  }
+
+  .fc tbody .fc-row .fc-content-skeleton {
+    position: static; /* undo .fc-rigid */
+    padding-bottom: 0 !important; /* use a more border-friendly method for this... */
+  }
+
+  .fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td { /* only works in newer browsers */
+    padding-bottom: 1em; /* ...gives space within the skeleton. also ensures min height in a way */
+  }
+
+  .fc tbody .fc-row .fc-content-skeleton table {
+    /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
+      making it look more like 3em. for other browers, it will already be this tall */
+    height: 1em;
+  }
+
+}

packages/core/src/styles/_popover.scss

@@ -0,0 +1,51 @@
+
+.fc-popover {
+  position: fixed;
+  top: 0; // for when not positioned yet
+  box-shadow: 0 2px 6px rgba(0,0,0,.15);
+}
+
+.fc-popover .fc-header { /* TODO: be more consistent with fc-head/fc-body */
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px 4px;
+}
+
+.fc-rtl .fc-popover .fc-header {
+  flex-direction: row-reverse;
+}
+
+.fc-popover .fc-header .fc-title {
+  margin: 0 2px;
+}
+
+.fc-popover .fc-header .fc-close {
+  cursor: pointer;
+  opacity: 0.65;
+  font-size: 1.1em;
+}
+
+
+.fc-unthemed {
+
+  .fc-popover {
+    border: 1px solid $unthemed-border-color;
+    background: #fff;
+
+    .fc-header {
+      background: $unthemed-muted-bg-color;
+    }
+  }
+
+}
+
+
+@media print {
+
+  .fc-popover {
+    display: none; /* never display the "more.." popover in print mode */
+  }
+
+}

packages/core/src/styles/_resets.scss

@@ -0,0 +1,64 @@
+
+.fc {
+  font-size: 1em;
+
+  &,
+  *,
+  *:before,
+  *:after {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+
+
+  table {
+    width: 100%;
+    box-sizing: border-box; /* fix scrollbar issue in firefox */
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 1em; /* normalize cross-browser */
+  }
+
+  th {
+    text-align: center;
+  }
+
+  th, td {
+    border: 1px solid $unthemed-border-color;
+    padding: 0;
+    vertical-align: top;
+  }
+
+
+  /* Internal Nav Links
+  --------------------------------------------------------------------------------------------------*/
+
+  a[data-goto] {
+    cursor: pointer;
+  }
+
+  a[data-goto]:hover {
+    text-decoration: underline;
+  }
+
+}
+
+
+.fc-unthemed {
+
+  td, th {
+    border: 1px solid $unthemed-border-color;
+  }
+
+}
+
+
+@media print {
+
+  .fc {
+    max-width: 100% !important;
+  }
+
+}

packages/core/src/styles/_scroller.scss

@@ -0,0 +1,15 @@
+
+.fc-scroller {
+  -webkit-overflow-scrolling: touch;
+}
+
+
+@media print {
+
+  /* kill the scrollbars and allow natural height */
+  .fc-scroller {
+    overflow: visible !important;
+    height: auto !important;
+  }
+
+}

packages/core/src/_toolbar.scss → packages/core/src/styles/_toolbar.scss

@@ -1,7 +1,4 @@
 
-/* Toolbar
---------------------------------------------------------------------------------------------------*/
-
 .fc-toolbar {
   display: flex;
   justify-content: space-between;
@@ -26,3 +23,15 @@
   font-size: 1.75em;
   margin: 0;
 }
+
+
+@media print {
+
+  // don't display any button-related controls
+  // TODO: better to put in _button/_button-group.scss ?
+  .fc-button-group,
+  .fc button {
+    display: none;
+  }
+
+}

packages/core/src/styles/_utils.scss

@@ -0,0 +1,60 @@
+
+hr.fc-divider {
+  height: 0;
+  margin: 0;
+  padding: 0 0 2px; /* height is unreliable across browsers, so use padding */
+  border-width: 1px 0;
+}
+
+td.fc-today {
+  border-style: double; /* overcome neighboring borders */
+}
+
+.fc-highlight { /* when user is selecting cells */
+  background: #bce8f1;
+  opacity: .3;
+}
+
+.fc-bgevent { /* default look for background events */
+  background: rgb(143, 223, 130);
+  opacity: .3;
+}
+
+.fc-nonbusiness { /* default look for non-business-hours areas */
+  /* will inherit .fc-bgevent's styles */
+  background: #d7d7d7;
+}
+
+.fc-now-indicator {
+  position: absolute;
+  border: 0 solid red;
+}
+
+.fc-unselectable {
+  -webkit-user-select: none;
+   -khtml-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+
+.fc-unthemed {
+
+  .fc-today {
+    background: #fcf8e3;
+  }
+
+  .fc-disabled-day {
+    background: #d7d7d7;
+    opacity: .3;
+  }
+
+  .fc-divider {
+    border: 1px solid $unthemed-border-color;
+    background: $unthemed-muted-bg-color;
+  }
+
+}

packages/core/src/styles/_vars.scss

@@ -0,0 +1,3 @@
+
+$unthemed-border-color: #ddd;
+$unthemed-muted-bg-color: #eee;

packages/core/src/styles/_view-structure.scss

@@ -0,0 +1,23 @@
+
+.fc {
+  display: flex;
+  flex-direction: column;
+}
+
+.fc-view-container {
+  flex-grow: 1;
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    flex-grow: 1;
+  }
+}
+
+.fc-view, /* scope positioning and z-index's for everything within the view */
+.fc-view > table { /* so dragged elements can be above the view's main element */
+  position: relative;
+  z-index: 1;
+}

packages/daygrid/src/main.ts

@@ -1,5 +1,6 @@
 import { createPlugin } from '@fullcalendar/core'
 import DayTableView from './DayTableView'
+import './main.scss'
 
 export { default as DayTable, DayTableSlicer } from './DayTable'
 export { default as Table, TableSeg } from './Table'

packages/list/src/main.ts

@@ -1,5 +1,6 @@
 import { createPlugin } from '@fullcalendar/core'
 import ListView from './ListView'
+import './main.scss'
 
 export { ListView }
 

packages/timegrid/src/main.scss

@@ -1,308 +1,4 @@
-
-/* TimeGridView all-day area
---------------------------------------------------------------------------------------------------*/
-
-.fc-timeGrid-view .fc-day-grid {
-  position: relative;
-  z-index: 2; /* so the "more.." popover will be over the time grid */
-}
-
-.fc-timeGrid-view .fc-day-grid .fc-row {
-  min-height: 3em; /* all-day section will never get shorter than this */
-}
-
-.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
-  padding-bottom: 1em; /* give space underneath events for clicking/selecting days */
-}
-
-
-/* TimeGrid axis running down the side (for both the all-day area and the slot area)
---------------------------------------------------------------------------------------------------*/
-
-.fc .fc-axis { /* .fc to overcome default cell styles */
-  vertical-align: middle;
-  padding: 0 4px;
-  white-space: nowrap;
-}
-
-.fc-ltr .fc-axis {
-  text-align: right;
-}
-
-.fc-rtl .fc-axis {
-  text-align: left;
-}
-
-
-/* TimeGrid Structure
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid-container, /* so scroll container's z-index is below all-day */
-.fc-time-grid { /* so slats/bg/content/etc positions get scoped within here */
-  position: relative;
-  z-index: 1;
-}
-
-.fc-time-grid {
-  min-height: 100%; /* so if height setting is 'auto', .fc-bg stretches to fill height */
-}
-
-.fc-time-grid table { /* don't put outer borders on slats/bg/content/etc */
-  border: 0 hidden transparent;
-}
-
-.fc-time-grid > .fc-bg {
-  z-index: 1;
-}
-
-.fc-time-grid .fc-slats,
-.fc-time-grid > hr { /* the <hr> TimeGridView injects when grid is shorter than scroller */
-  position: relative;
-  z-index: 2;
-}
-
-.fc-time-grid .fc-content-col {
-  position: relative; /* because now-indicator lives directly inside */
-}
-
-.fc-time-grid .fc-content-skeleton {
-  position: absolute;
-  z-index: 3;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-/* divs within a cell within the fc-content-skeleton */
-
-.fc-time-grid .fc-business-container {
-  position: relative;
-  z-index: 1;
-}
-
-.fc-time-grid .fc-bgevent-container {
-  position: relative;
-  z-index: 2;
-}
-
-.fc-time-grid .fc-highlight-container {
-  position: relative;
-  z-index: 3;
-}
-
-.fc-time-grid .fc-event-container {
-  position: relative;
-  z-index: 4;
-}
-
-.fc-time-grid .fc-now-indicator-line {
-  z-index: 5;
-}
-
-.fc-time-grid .fc-mirror-container { /* also is fc-event-container */
-  position: relative;
-  z-index: 6;
-}
-
-
-/* TimeGrid Slats (lines that run horizontally)
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid .fc-slats td {
-  height: 1.5em;
-  border-bottom: 0; /* each cell is responsible for its top border */
-}
-
-.fc-time-grid .fc-slats .fc-minor td {
-  border-top-style: dotted;
-}
-
-
-/* TimeGrid Highlighting Slots
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid .fc-highlight-container { /* a div within a cell within the fc-highlight-skeleton */
-  position: relative; /* scopes the left/right of the fc-highlight to be in the column */
-}
-
-.fc-time-grid .fc-highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  /* top and bottom will be in by JS */
-}
-
-
-/* TimeGrid Event Containment
---------------------------------------------------------------------------------------------------*/
-
-.fc-ltr .fc-time-grid .fc-event-container { /* space on the sides of events for LTR (default) */
-  margin: 0 2.5% 0 2px;
-}
-
-.fc-rtl .fc-time-grid .fc-event-container { /* space on the sides of events for RTL */
-  margin: 0 2px 0 2.5%;
-}
-
-.fc-time-grid .fc-event,
-.fc-time-grid .fc-bgevent {
-  position: absolute;
-  z-index: 1; /* scope inner z-index's */
-}
-
-.fc-time-grid .fc-bgevent {
-  /* background events always span full width */
-  left: 0;
-  right: 0;
-}
-
-
-/* TimeGrid Event Styling
-----------------------------------------------------------------------------------------------------
-We use the full "fc-time-grid-event" class instead of using descendants because the event won't
-be a descendant of the grid when it is being dragged.
-*/
-
-.fc-time-grid-event {
-  margin-bottom: 1px;
-}
-
-.fc-time-grid-event-inset {
-  -webkit-box-shadow: 0px 0px 0px 1px #fff;
-          box-shadow: 0px 0px 0px 1px #fff;
-}
-
-.fc-time-grid-event.fc-not-start { /* events that are continuing from another day */
-  /* replace space made by the top border with padding */
-  border-top-width: 0;
-  padding-top: 1px;
-
-  /* remove top rounded corners */
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.fc-time-grid-event.fc-not-end {
-  /* replace space made by the top border with padding */
-  border-bottom-width: 0;
-  padding-bottom: 1px;
-
-  /* remove bottom rounded corners */
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.fc-time-grid-event .fc-content {
-  overflow: hidden;
-  max-height: 100%;
-}
-
-.fc-time-grid-event .fc-time,
-.fc-time-grid-event .fc-title {
-  padding: 0 1px;
-}
-
-.fc-time-grid-event .fc-time {
-  font-size: .85em;
-  white-space: nowrap;
-}
-
-/* short mode, where time and title are on the same line */
-
-.fc-time-grid-event.fc-short .fc-content {
-  /* don't wrap to second line (now that contents will be inline) */
-  white-space: nowrap;
-}
-
-.fc-time-grid-event.fc-short .fc-time,
-.fc-time-grid-event.fc-short .fc-title {
-  /* put the time and title on the same line */
-  display: inline-block;
-  vertical-align: top;
-}
-
-.fc-time-grid-event.fc-short .fc-time span {
-  display: none; /* don't display the full time text... */
-}
-
-.fc-time-grid-event.fc-short .fc-time:before {
-  content: attr(data-start); /* ...instead, display only the start time */
-}
-
-.fc-time-grid-event.fc-short .fc-time:after {
-  content: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
-}
-
-.fc-time-grid-event.fc-short .fc-title {
-  font-size: .85em; /* make the title text the same size as the time */
-  padding: 0; /* undo padding from above */
-}
-
-/* resizer (cursor device) */
-
-.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 8px;
-  overflow: hidden;
-  line-height: 8px;
-  font-size: 11px;
-  font-family: monospace;
-  text-align: center;
-  cursor: s-resize;
-}
-
-.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
-  content: "=";
-}
-
-/* resizer (touch device) */
-
-.fc-time-grid-event.fc-selected .fc-resizer {
-  /* 10x10 dot */
-  border-radius: 5px;
-  border-width: 1px;
-  width: 8px;
-  height: 8px;
-  border-style: solid;
-  border-color: inherit;
-  background: #fff;
-  /* horizontally center */
-  left: 50%;
-  margin-left: -5px;
-  /* center on the bottom edge */
-  bottom: -5px;
-}
-
-
-/* Now Indicator
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid .fc-now-indicator-line {
-  border-top-width: 1px;
-  left: 0;
-  right: 0;
-}
-
-/* arrow on axis */
-
-.fc-time-grid .fc-now-indicator-arrow {
-  margin-top: -5px; /* vertically center on top coordinate */
-}
-
-.fc-ltr .fc-time-grid .fc-now-indicator-arrow {
-  left: 0;
-  /* triangle pointing right... */
-  border-width: 5px 0 5px 6px;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-}
-
-.fc-rtl .fc-time-grid .fc-now-indicator-arrow {
-  right: 0;
-  /* triangle pointing left... */
-  border-width: 5px 6px 5px 0;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-}
+@import '~@fullcalendar/core/styles/_vars.scss';
+@import './styles/time-grid';
+@import './styles/event';
+@import './styles/now-indicator';

packages/timegrid/src/main.ts

@@ -3,6 +3,7 @@ import TimeColsView from './TimeColsView'
 import DayTimeColsView, { buildDayTableModel } from './DayTimeColsView'
 import { TimeColsSeg } from './TimeCols'
 import { default as DayTimeCols, DayTimeColsSlicer, buildDayRanges } from './DayTimeCols'
+import './main.scss'
 
 export { DayTimeCols, DayTimeColsView, TimeColsView, buildDayTableModel, buildDayRanges, DayTimeColsSlicer, TimeColsSeg }
 export { default as TimeCols, TIME_COLS_NOW_INDICATOR_UNIT } from './TimeCols'

packages/timegrid/src/styles/_event.scss

@@ -0,0 +1,190 @@
+
+/* TimeGrid Event Containment
+--------------------------------------------------------------------------------------------------*/
+
+.fc-ltr .fc-time-grid .fc-event-container { /* space on the sides of events for LTR (default) */
+  margin: 0 2.5% 0 2px;
+}
+
+.fc-rtl .fc-time-grid .fc-event-container { /* space on the sides of events for RTL */
+  margin: 0 2px 0 2.5%;
+}
+
+.fc-time-grid .fc-event,
+.fc-time-grid .fc-bgevent {
+  position: absolute;
+  z-index: 1; /* scope inner z-index's */
+}
+
+.fc-time-grid .fc-bgevent {
+  /* background events always span full width */
+  left: 0;
+  right: 0;
+}
+
+
+/* TimeGrid Event Styling
+----------------------------------------------------------------------------------------------------
+We use the full "fc-time-grid-event" class instead of using descendants because the event won't
+be a descendant of the grid when it is being dragged.
+*/
+
+.fc-time-grid-event {
+  margin-bottom: 1px;
+}
+
+.fc-time-grid-event-inset {
+  -webkit-box-shadow: 0px 0px 0px 1px #fff;
+          box-shadow: 0px 0px 0px 1px #fff;
+}
+
+.fc-time-grid-event.fc-not-start { /* events that are continuing from another day */
+  /* replace space made by the top border with padding */
+  border-top-width: 0;
+  padding-top: 1px;
+
+  /* remove top rounded corners */
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.fc-time-grid-event.fc-not-end {
+  /* replace space made by the top border with padding */
+  border-bottom-width: 0;
+  padding-bottom: 1px;
+
+  /* remove bottom rounded corners */
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.fc-time-grid-event .fc-content {
+  overflow: hidden;
+  max-height: 100%;
+}
+
+.fc-time-grid-event .fc-time,
+.fc-time-grid-event .fc-title {
+  padding: 0 1px;
+}
+
+.fc-time-grid-event .fc-time {
+  font-size: .85em;
+  white-space: nowrap;
+}
+
+/* short mode, where time and title are on the same line */
+
+.fc-time-grid-event.fc-short .fc-content {
+  /* don't wrap to second line (now that contents will be inline) */
+  white-space: nowrap;
+}
+
+.fc-time-grid-event.fc-short .fc-time,
+.fc-time-grid-event.fc-short .fc-title {
+  /* put the time and title on the same line */
+  display: inline-block;
+  vertical-align: top;
+}
+
+.fc-time-grid-event.fc-short .fc-time span {
+  display: none; /* don't display the full time text... */
+}
+
+.fc-time-grid-event.fc-short .fc-time:before {
+  content: attr(data-start); /* ...instead, display only the start time */
+}
+
+.fc-time-grid-event.fc-short .fc-time:after {
+  content: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
+}
+
+.fc-time-grid-event.fc-short .fc-title {
+  font-size: .85em; /* make the title text the same size as the time */
+  padding: 0; /* undo padding from above */
+}
+
+/* resizer (cursor device) */
+
+.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 8px;
+  overflow: hidden;
+  line-height: 8px;
+  font-size: 11px;
+  font-family: monospace;
+  text-align: center;
+  cursor: s-resize;
+}
+
+.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
+  content: "=";
+}
+
+/* resizer (touch device) */
+
+.fc-time-grid-event.fc-selected .fc-resizer {
+  /* 10x10 dot */
+  border-radius: 5px;
+  border-width: 1px;
+  width: 8px;
+  height: 8px;
+  border-style: solid;
+  border-color: inherit;
+  background: #fff;
+  /* horizontally center */
+  left: 50%;
+  margin-left: -5px;
+  /* center on the bottom edge */
+  bottom: -5px;
+}
+
+
+@media print {
+
+  /* naturally position events, vertically stacking them */
+  .fc-time-grid .fc-event {
+    position: static !important;
+    margin: 3px 2px !important;
+  }
+
+  /* for events that continue to a future day, give the bottom border back */
+  .fc-time-grid .fc-event.fc-not-end {
+    border-bottom-width: 1px !important;
+  }
+
+  /* indicate the event continues via "..." text */
+  .fc-time-grid .fc-event.fc-not-end:after {
+    content: "...";
+  }
+
+  /* for events that are continuations from previous days, give the top border back */
+  .fc-time-grid .fc-event.fc-not-start {
+    border-top-width: 1px !important;
+  }
+
+  /* indicate the event is a continuation via "..." text */
+  .fc-time-grid .fc-event.fc-not-start:before {
+    content: "...";
+  }
+
+  /* time */
+
+  /* undo a previous declaration and let the time text span to a second line */
+  .fc-time-grid .fc-event .fc-time {
+    white-space: normal !important;
+  }
+
+  /* hide the the time that is normally displayed... */
+  .fc-time-grid .fc-event .fc-time span {
+    display: none;
+  }
+
+  /* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */
+  .fc-time-grid .fc-event .fc-time:after {
+    content: attr(data-full);
+  }
+
+}

packages/timegrid/src/styles/_now-indicator.scss

@@ -0,0 +1,28 @@
+
+.fc-time-grid .fc-now-indicator-line {
+  border-top-width: 1px;
+  left: 0;
+  right: 0;
+}
+
+/* arrow on axis */
+
+.fc-time-grid .fc-now-indicator-arrow {
+  margin-top: -5px; /* vertically center on top coordinate */
+}
+
+.fc-ltr .fc-time-grid .fc-now-indicator-arrow {
+  left: 0;
+  /* triangle pointing right... */
+  border-width: 5px 0 5px 6px;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.fc-rtl .fc-time-grid .fc-now-indicator-arrow {
+  right: 0;
+  /* triangle pointing left... */
+  border-width: 5px 6px 5px 0;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}

packages/timegrid/src/styles/_time-grid.scss

@@ -0,0 +1,169 @@
+
+/* TimeGridView all-day area
+--------------------------------------------------------------------------------------------------*/
+
+.fc-timeGrid-view .fc-day-grid {
+  position: relative;
+  z-index: 2; /* so the "more.." popover will be over the time grid */
+}
+
+.fc-timeGrid-view .fc-day-grid .fc-row {
+  min-height: 3em; /* all-day section will never get shorter than this */
+}
+
+.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
+  padding-bottom: 1em; /* give space underneath events for clicking/selecting days */
+}
+
+
+/* TimeGrid axis running down the side (for both the all-day area and the slot area)
+--------------------------------------------------------------------------------------------------*/
+
+.fc .fc-axis { /* .fc to overcome default cell styles */
+  vertical-align: middle;
+  padding: 0 4px;
+  white-space: nowrap;
+}
+
+.fc-ltr .fc-axis {
+  text-align: right;
+}
+
+.fc-rtl .fc-axis {
+  text-align: left;
+}
+
+
+/* TimeGrid Structure
+--------------------------------------------------------------------------------------------------*/
+
+.fc-time-grid-container, /* so scroll container's z-index is below all-day */
+.fc-time-grid { /* so slats/bg/content/etc positions get scoped within here */
+  position: relative;
+  z-index: 1;
+}
+
+.fc-time-grid {
+  min-height: 100%; /* so if height setting is 'auto', .fc-bg stretches to fill height */
+}
+
+.fc-time-grid table { /* don't put outer borders on slats/bg/content/etc */
+  border: 0 hidden transparent;
+}
+
+.fc-time-grid > .fc-bg {
+  z-index: 1;
+}
+
+.fc-time-grid .fc-slats,
+.fc-time-grid > hr { /* the <hr> TimeGridView injects when grid is shorter than scroller */
+  position: relative;
+  z-index: 2;
+}
+
+.fc-time-grid .fc-content-col {
+  position: relative; /* because now-indicator lives directly inside */
+}
+
+.fc-time-grid .fc-content-skeleton {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+/* divs within a cell within the fc-content-skeleton */
+
+.fc-time-grid .fc-business-container {
+  position: relative;
+  z-index: 1;
+}
+
+.fc-time-grid .fc-bgevent-container {
+  position: relative;
+  z-index: 2;
+}
+
+.fc-time-grid .fc-highlight-container {
+  position: relative;
+  z-index: 3;
+}
+
+.fc-time-grid .fc-event-container {
+  position: relative;
+  z-index: 4;
+}
+
+.fc-time-grid .fc-now-indicator-line {
+  z-index: 5;
+}
+
+.fc-time-grid .fc-mirror-container { /* also is fc-event-container */
+  position: relative;
+  z-index: 6;
+}
+
+
+/* TimeGrid Slats (lines that run horizontally)
+--------------------------------------------------------------------------------------------------*/
+
+.fc-time-grid .fc-slats td {
+  height: 1.5em;
+  border-bottom: 0; /* each cell is responsible for its top border */
+}
+
+.fc-time-grid .fc-slats .fc-minor td {
+  border-top-style: dotted;
+}
+
+
+/* TimeGrid Highlighting Slots
+--------------------------------------------------------------------------------------------------*/
+
+.fc-time-grid .fc-highlight-container { /* a div within a cell within the fc-highlight-skeleton */
+  position: relative; /* scopes the left/right of the fc-highlight to be in the column */
+}
+
+.fc-time-grid .fc-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* top and bottom will be in by JS */
+}
+
+
+@media print {
+
+  /* undo the min-height 100% trick used to fill the container's height */
+  .fc-time-grid {
+    min-height: 0 !important;
+  }
+
+  /* don't display the side axis at all ("all-day" and time cells) */
+  .fc-timeGrid-view .fc-axis {
+    display: none;
+  }
+
+  /* don't display the horizontal lines */
+  .fc-slats,
+  .fc-time-grid hr { /* this hr is used when height is underused and needs to be filled */
+    display: none !important; /* important overrides inline declaration */
+  }
+
+  /* let the container that holds the events be naturally positioned and create real height */
+  .fc-time-grid .fc-content-skeleton {
+    position: static;
+  }
+
+  /* in case there are no events, we still want some height */
+  .fc-time-grid .fc-content-skeleton table {
+    height: 4em;
+  }
+
+  /* kill the horizontal spacing made by the event container. event margins will be done below */
+  .fc-time-grid .fc-event-container {
+    margin: 0 !important;
+  }
+
+}