Bladeren bron

move some styles to daygrid

Adam Shaw 6 jaren geleden
bovenliggende
commit
7f5ec405ca

+ 0 - 1
packages/core/src/main.scss

@@ -4,7 +4,6 @@
 @import './styles/utils';
 @import './styles/event';
 @import './styles/event-horizontal';
-@import './styles/event-limit';
 @import './styles/icons';
 @import './styles/button';
 @import './styles/button-group';

+ 0 - 42
packages/core/src/styles/_event-horizontal.scss

@@ -81,45 +81,3 @@
 .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 */
-}

+ 3 - 68
packages/daygrid/src/main.scss

@@ -1,69 +1,4 @@
 
-/* DayGridView
---------------------------------------------------------------------------------------------------*/
-
-/* day row structure */
-
-.fc-dayGridWeek-view .fc-content-skeleton,
-.fc-dayGridDay-view .fc-content-skeleton {
-  /* there may be week numbers in these views, so no padding-top */
-  padding-bottom: 1em; /* ensure a space at bottom of cell for user selecting/clicking */
-}
-
-.fc-dayGrid-view .fc-body .fc-row {
-  min-height: 4em; /* ensure that all rows are at least this tall */
-}
-
-/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
-
-.fc-row.fc-rigid {
-  overflow: hidden;
-}
-
-.fc-row.fc-rigid .fc-content-skeleton {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-/* week and day number styling */
-
-.fc-day-top.fc-other-month {
-  opacity: 0.3;
-}
-
-.fc-dayGrid-view .fc-week-number,
-.fc-dayGrid-view .fc-day-number {
-  padding: 2px;
-}
-
-.fc-dayGrid-view th.fc-week-number,
-.fc-dayGrid-view th.fc-day-number {
-  padding: 0 2px; /* column headers can't have as much v space */
-}
-
-.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number { float: right; }
-.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number { float: left; }
-
-.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number { float: left; border-radius: 0 0 3px 0; }
-.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number { float: right; border-radius: 0 0 0 3px; }
-
-.fc-dayGrid-view .fc-day-top .fc-week-number {
-  min-width: 1.5em;
-  text-align: center;
-  background-color: #f2f2f2;
-  color: #808080;
-}
-
-/* when week/day number have own column */
-
-.fc-dayGrid-view td.fc-week-number {
-  text-align: center;
-}
-
-.fc-dayGrid-view td.fc-week-number > * {
-  /* work around the way we do column resizing and ensure a minimum width */
-  display: inline-block;
-  min-width: 1.25em;
-}
+@import './styles/day-grid';
+@import './styles/event';
+@import './styles/event-limit';

+ 69 - 0
packages/daygrid/src/styles/_day-grid.scss

@@ -0,0 +1,69 @@
+
+/* DayGridView
+--------------------------------------------------------------------------------------------------*/
+
+/* day row structure */
+
+.fc-dayGridWeek-view .fc-content-skeleton,
+.fc-dayGridDay-view .fc-content-skeleton {
+  /* there may be week numbers in these views, so no padding-top */
+  padding-bottom: 1em; /* ensure a space at bottom of cell for user selecting/clicking */
+}
+
+.fc-dayGrid-view .fc-body .fc-row {
+  min-height: 4em; /* ensure that all rows are at least this tall */
+}
+
+/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
+
+.fc-row.fc-rigid {
+  overflow: hidden;
+}
+
+.fc-row.fc-rigid .fc-content-skeleton {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+/* week and day number styling */
+
+.fc-day-top.fc-other-month {
+  opacity: 0.3;
+}
+
+.fc-dayGrid-view .fc-week-number,
+.fc-dayGrid-view .fc-day-number {
+  padding: 2px;
+}
+
+.fc-dayGrid-view th.fc-week-number,
+.fc-dayGrid-view th.fc-day-number {
+  padding: 0 2px; /* column headers can't have as much v space */
+}
+
+.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number { float: right; }
+.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number { float: left; }
+
+.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number { float: left; border-radius: 0 0 3px 0; }
+.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number { float: right; border-radius: 0 0 0 3px; }
+
+.fc-dayGrid-view .fc-day-top .fc-week-number {
+  min-width: 1.5em;
+  text-align: center;
+  background-color: #f2f2f2;
+  color: #808080;
+}
+
+/* when week/day number have own column */
+
+.fc-dayGrid-view td.fc-week-number {
+  text-align: center;
+}
+
+.fc-dayGrid-view td.fc-week-number > * {
+  /* work around the way we do column resizing and ensure a minimum width */
+  display: inline-block;
+  min-width: 1.25em;
+}

+ 2 - 1
packages/core/src/styles/_event-limit.scss → packages/daygrid/src/styles/_event-limit.scss

@@ -1,5 +1,6 @@
 
-/* "more" link that represents hidden events */
+// the "more" link that represents hidden events
+// TODO: have fc-daygrid-popover be a subclass
 
 a.fc-more {
   margin: 1px 3px;

+ 41 - 0
packages/daygrid/src/styles/_event.scss

@@ -0,0 +1,41 @@
+
+/* 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 */
+}