vendor/assets/stylesheets/fullcalendar.css in fullcalendar-wrapper-rails-2.6.0 vs vendor/assets/stylesheets/fullcalendar.css in fullcalendar-wrapper-rails-2.9.1
- old
+ new
@@ -1,9 +1,9 @@
/*!
- * FullCalendar v2.6.0 Stylesheet
- * Docs & License: http://fullcalendar.io/
- * (c) 2015 Adam Shaw
+ * <%= meta.title %> v<%= meta.version %> Stylesheet
+ * Docs & License: <%= meta.homepage %>
+ * (c) <%= meta.copyright %>
*/
.fc {
direction: ltr;
@@ -26,10 +26,11 @@
.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 {
border-color: #ddd;
}
.fc-unthemed .fc-popover {
@@ -70,11 +71,10 @@
/* Icons (inline elements with styled text that mock arrow icons)
--------------------------------------------------------------------------------------------------*/
.fc-icon {
display: inline-block;
- width: 1em;
height: 1em;
line-height: 1em;
font-size: 1em;
text-align: center;
overflow: hidden;
@@ -97,27 +97,24 @@
NOTE: use percentage font sizes or else old IE chokes
*/
.fc-icon:after {
position: relative;
- margin: 0 -1em; /* ensures character will be centered, regardless of width */
}
.fc-icon-left-single-arrow:after {
content: "\02039";
font-weight: bold;
font-size: 200%;
top: -7%;
- left: 3%;
}
.fc-icon-right-single-arrow:after {
content: "\0203A";
font-weight: bold;
font-size: 200%;
top: -7%;
- left: -3%;
}
.fc-icon-left-double-arrow:after {
content: "\000AB";
font-size: 160%;
@@ -132,18 +129,16 @@
.fc-icon-left-triangle:after {
content: "\25C4";
font-size: 125%;
top: 3%;
- left: -2%;
}
.fc-icon-right-triangle:after {
content: "\25BA";
font-size: 125%;
top: 3%;
- left: 2%;
}
.fc-icon-down-triangle:after {
content: "\25BC";
font-size: 125%;
@@ -370,10 +365,11 @@
/* 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 */
}
@@ -489,19 +485,19 @@
/* Scrolling Container
--------------------------------------------------------------------------------------------------*/
-.fc-scroller { /* this class goes on elements for guaranteed vertical scrollbars */
- overflow-y: scroll;
- overflow-x: hidden;
+.fc-scroller {
+ -webkit-overflow-scrolling: touch;
}
-.fc-scroller > * { /* we expect an immediate inner element */
+/* TODO: move to agenda/basic */
+.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 */
- overflow: hidden; /* don't let negative margins or absolute positioning create further scroll */
}
/* Global Event Styles
--------------------------------------------------------------------------------------------------*/
@@ -545,19 +541,72 @@
.fc-event .fc-content {
position: relative;
z-index: 2;
}
+/* resizer (cursor AND touch devices) */
+
.fc-event .fc-resizer {
position: absolute;
- z-index: 3;
+ 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.fc-dragging {
+ box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
+}
+
+
/* 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;
@@ -574,43 +623,63 @@
padding-right: 1px; /* replace the border with padding */
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
-/* resizer */
+/* resizer (cursor AND touch devices) */
-.fc-h-event .fc-resizer { /* positioned it to overcome the event's borders */
- top: -1px;
- bottom: -1px;
- left: -1px;
- right: -1px;
- width: 5px;
-}
-
/* left resizer */
.fc-ltr .fc-h-event .fc-start-resizer,
-.fc-ltr .fc-h-event .fc-start-resizer:before,
-.fc-ltr .fc-h-event .fc-start-resizer:after,
-.fc-rtl .fc-h-event .fc-end-resizer,
-.fc-rtl .fc-h-event .fc-end-resizer:before,
-.fc-rtl .fc-h-event .fc-end-resizer:after {
- right: auto; /* ignore the right and only use the left */
+.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-ltr .fc-h-event .fc-end-resizer:before,
-.fc-ltr .fc-h-event .fc-end-resizer:after,
-.fc-rtl .fc-h-event .fc-start-resizer,
-.fc-rtl .fc-h-event .fc-start-resizer:before,
-.fc-rtl .fc-h-event .fc-start-resizer:after {
- left: auto; /* ignore the left and only use the right */
+.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.
*/
@@ -618,27 +687,49 @@
.fc-day-grid-event {
margin: 1px 2px 0; /* spacing between events and edges */
padding: 0 1px;
}
+.fc-day-grid-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;
+ filter: alpha(opacity=25); /* for IE */
+}
.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;
}
-.fc-day-grid-event .fc-resizer { /* enlarge the default hit area */
- left: -3px;
- right: -3px;
- width: 7px;
+/* 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 */
@@ -679,10 +770,24 @@
.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);
+}
+
/* Toolbar
--------------------------------------------------------------------------------------------------*/
.fc-toolbar {
text-align: center;
@@ -1029,10 +1134,24 @@
.fc-time-grid-event {
overflow: hidden; /* don't let the bg flow over rounded corners */
}
+.fc-time-grid-event.fc-selected {
+ /* need to allow touch resizers to extend outside event's bounding box */
+ /* common fc-selected styles hide the fc-bg, so don't need this anyway */
+ overflow: visible;
+}
+
+.fc-time-grid-event.fc-selected .fc-bg {
+ display: none; /* hide semi-white background, to appear darker */
+}
+
+.fc-time-grid-event .fc-content {
+ overflow: hidden; /* for when .fc-selected */
+}
+
.fc-time-grid-event .fc-time,
.fc-time-grid-event .fc-title {
padding: 0 1px;
}
@@ -1070,13 +1189,13 @@
.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 */
+/* resizer (cursor device) */
-.fc-time-grid-event .fc-resizer {
+.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
left: 0;
right: 0;
bottom: 0;
height: 8px;
overflow: hidden;
@@ -1085,11 +1204,29 @@
font-family: monospace;
text-align: center;
cursor: s-resize;
}
-.fc-time-grid-event .fc-resizer:after {
+.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
--------------------------------------------------------------------------------------------------*/