availability_calendar.base.css in Availability Calendars 7.5
/*
* Styling your calendar:
* - This file contains some basic calendar styling.
* - Visit admin/config/content/availability-calendar/styling to define some more styling.
* - Finally resort to your theme style sheets to define any requested styling.
*
* A calendar is rendered as follows:
* div#cal-{cid}.cal
* div.cal-viewport ? optional when the viewport functionality is enabled
* div.cal-viewport-inner ? optional
* div#cal-{cid}-{year}-{month}.cal-month * repeated for each month
* table
* caption contains month name
* thead
* tr
* th.cal-weekno-header ? optional, if week notes are enabled, contains 'Nr.'
* th * repeated 7 times, containing short names of the days
* tbody
* tr[.cal-empty] * repeated 6 times, class cal-empty only if row does not contain day cells (can only be the last or last 2 rows)
* th ? optional, only rendered if week notes are enabled, contains the week note
* td.{state} * repeated 7 times, representing a day in the month, class defines state(s) of that day
* div ? optional only with no split days, contains day number
* span ? optional only with split days
* span contains day number
*/
.cal-month {
float: left; /* LTR */
margin: 0 6px 6px;
}
/* - Some themes set the width to 100% and browsers will honor that above the
* width of individual columns when using fixed table-layout.
* - IE7 will always honor that, even without fixed table-layout.
* So we use both and assure that each column gets its width in the first row.
*/
.cal table {
table-layout: fixed;
width: auto;
}
.cal table, .cal th, .cal td {
margin: 0;
padding: 0;
}
.cal caption {
margin: 6px 6px 0;
padding: 0;
border-bottom: 1px solid #555;
}
/*
* Settings to get day number and coloring according to state for split days.
* - border-width will be defined in the generated css.
* - border-color will be overruled based on the defined availability states.
*/
.cal td > span {
display: block;
position: relative; /* Allows to position inner span w.r.t this span. */
border-style: solid;
border-color: transparent;
}
.cal td > span > span {
position: absolute;
z-index: 1;
}
/* Allows to highlight a border on hovering (without disturbing the lay-out). */
.cal td > div, .cal td > span > span {
border: 1px solid transparent;
}
/*
* Special statuses:
* cal-other: cells from another month, at the start of end of a calendar month.
* cal-pastdate: cell for days in the past.
* cal-today: cell for the current day.
* cal-selectable: cells that are selectable.
* cal-selected: cell that has been selected.
* cal-empty: cell (with colspan=7) for an empty 6th week.
* cal-error: selectable cell that may not be clicked because a non-clickable
* date is between.
*/
/* these selectors need to be stronger than those for the availability states.
*/
.cal th,
.cal .cal-other, .cal .cal-other > div, .cal .cal-other > span,
.cal .cal-pastdate, .cal .cal-pastdate div, .cal .cal-pastdate > span {
background-color: transparent;
border-color: transparent;
}
.cal td > span {
border-color: transparent;
}
.cal-other {
color: #aaa;
}
.cal-today {
font-weight: bolder;
}
.cal-selected {
font-weight: bolder;
font-size: larger;
}
.cal .cal-selected > div, .cal .calselected > span > span {
border-color: #555;
}
.cal-selectable {
cursor: pointer;
}
/* Table cells and spans cannot get :focus, so no need to define that pseudo
* class.
*/
.cal-selectable:hover > div, .cal-selectable:hover > span > span {
border-color: #555;
}
.cal-error > div, .cal-error > span > span {
cursor: default;
background-image: url(icon-error.png);
background-position: center center;
background-repeat: no-repeat;
}
/*
* Key
*/
.keystatus {
padding-left: 2px; /* LTR */
}
.cal td.keystatus div {
width: auto;
}
/*
* View calendar through a viewport, also see availability_calendar.view.js.
*/
.cal-viewport {
position: relative;
overflow: hidden;
}
.cal-viewport-inner {
position: relative;
top: 0;
left: 0; /* LTR */
overflow: visible;
}
File
availability_calendar.base.css
View source
- /*
- * Styling your calendar:
- * - This file contains some basic calendar styling.
- * - Visit admin/config/content/availability-calendar/styling to define some more styling.
- * - Finally resort to your theme style sheets to define any requested styling.
- *
- * A calendar is rendered as follows:
- * div#cal-{cid}.cal
- * div.cal-viewport ? optional when the viewport functionality is enabled
- * div.cal-viewport-inner ? optional
- * div#cal-{cid}-{year}-{month}.cal-month * repeated for each month
- * table
- * caption contains month name
- * thead
- * tr
- * th.cal-weekno-header ? optional, if week notes are enabled, contains 'Nr.'
- * th * repeated 7 times, containing short names of the days
- * tbody
- * tr[.cal-empty] * repeated 6 times, class cal-empty only if row does not contain day cells (can only be the last or last 2 rows)
- * th ? optional, only rendered if week notes are enabled, contains the week note
- * td.{state} * repeated 7 times, representing a day in the month, class defines state(s) of that day
- * div ? optional only with no split days, contains day number
- * span ? optional only with split days
- * span contains day number
- */
- .cal-month {
- float: left; /* LTR */
- margin: 0 6px 6px;
- }
-
- /* - Some themes set the width to 100% and browsers will honor that above the
- * width of individual columns when using fixed table-layout.
- * - IE7 will always honor that, even without fixed table-layout.
- * So we use both and assure that each column gets its width in the first row.
- */
- .cal table {
- table-layout: fixed;
- width: auto;
- }
-
- .cal table, .cal th, .cal td {
- margin: 0;
- padding: 0;
- }
-
- .cal caption {
- margin: 6px 6px 0;
- padding: 0;
- border-bottom: 1px solid #555;
- }
-
- /*
- * Settings to get day number and coloring according to state for split days.
- * - border-width will be defined in the generated css.
- * - border-color will be overruled based on the defined availability states.
- */
- .cal td > span {
- display: block;
- position: relative; /* Allows to position inner span w.r.t this span. */
- border-style: solid;
- border-color: transparent;
- }
-
- .cal td > span > span {
- position: absolute;
- z-index: 1;
- }
-
- /* Allows to highlight a border on hovering (without disturbing the lay-out). */
- .cal td > div, .cal td > span > span {
- border: 1px solid transparent;
- }
-
-
- /*
- * Special statuses:
- * cal-other: cells from another month, at the start of end of a calendar month.
- * cal-pastdate: cell for days in the past.
- * cal-today: cell for the current day.
- * cal-selectable: cells that are selectable.
- * cal-selected: cell that has been selected.
- * cal-empty: cell (with colspan=7) for an empty 6th week.
- * cal-error: selectable cell that may not be clicked because a non-clickable
- * date is between.
- */
-
- /* these selectors need to be stronger than those for the availability states.
- */
- .cal th,
- .cal .cal-other, .cal .cal-other > div, .cal .cal-other > span,
- .cal .cal-pastdate, .cal .cal-pastdate div, .cal .cal-pastdate > span {
- background-color: transparent;
- border-color: transparent;
- }
-
- .cal td > span {
- border-color: transparent;
- }
-
- .cal-other {
- color: #aaa;
- }
-
- .cal-today {
- font-weight: bolder;
- }
-
- .cal-selected {
- font-weight: bolder;
- font-size: larger;
- }
-
- .cal .cal-selected > div, .cal .calselected > span > span {
- border-color: #555;
- }
-
- .cal-selectable {
- cursor: pointer;
- }
-
- /* Table cells and spans cannot get :focus, so no need to define that pseudo
- * class.
- */
- .cal-selectable:hover > div, .cal-selectable:hover > span > span {
- border-color: #555;
- }
-
- .cal-error > div, .cal-error > span > span {
- cursor: default;
- background-image: url(icon-error.png);
- background-position: center center;
- background-repeat: no-repeat;
- }
-
- /*
- * Key
- */
- .keystatus {
- padding-left: 2px; /* LTR */
- }
-
- .cal td.keystatus div {
- width: auto;
- }
-
- /*
- * View calendar through a viewport, also see availability_calendar.view.js.
- */
- .cal-viewport {
- position: relative;
- overflow: hidden;
- }
-
- .cal-viewport-inner {
- position: relative;
- top: 0;
- left: 0; /* LTR */
- overflow: visible;
- }