You are here

Home » API reference » Calendar 8.2

calendar.css in Calendar 8.2 

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 81, ../sass/_calendarstyles.scss */
div.views-element-container h3.calendar-header,
div.views-element-container h3.calendar-pager {
  font-size: 140%;
}
/* line 86, ../sass/_calendarstyles.scss */
div.views-element-container nav.pager ul {
  display: flex;
}
/* line 88, ../sass/_calendarstyles.scss */
div.views-element-container nav.pager ul li.pager__item {
  width: auto;
  margin: 0 1rem;
}
/* line 94, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar {
  width: 100%;
  border: 1px solid #bcbcbc;
  border-top: none;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
/* line 102, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-top: 2px solid #bcbcbc;
}
/* line 109, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .weekno {
  position: absolute;
  margin: .2rem;
  text-align: center;
  padding: .25rem;
  line-height: 1rem;
  font-size: 90%;
  background-color: #bcbcbc;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
}
/* line 114, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings,
div.views-element-container div.calendar .data .multidays,
div.views-element-container div.calendar .data .alldays,
div.views-element-container div.calendar .data .otherdays {
  display: flex;
  flex-direction: row;
}
/* line 120, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings .inner,
div.views-element-container div.calendar .data .multidays .inner,
div.views-element-container div.calendar .data .alldays .inner,
div.views-element-container div.calendar .data .otherdays .inner {
  padding-top: .1rem;
  min-height: .1rem;
}
/* line 124, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings .day,
div.views-element-container div.calendar .data .multidays .day,
div.views-element-container div.calendar .data .alldays .day,
div.views-element-container div.calendar .data .otherdays .day {
  flex: 0 0 14.28571%;
  box-sizing: border-box;
  border-left: 1px solid #cdcdcd;
  overflow: hidden;
}
/* line 129, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings .day:first-child,
div.views-element-container div.calendar .data .multidays .day:first-child,
div.views-element-container div.calendar .data .alldays .day:first-child,
div.views-element-container div.calendar .data .otherdays .day:first-child {
  border-left: none;
}
/* line 135, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings {
  text-align: center;
}
/* line 139, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings .day .labels {
  display: flex;
  flex-direction: column;
}
/* line 143, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings .day .labels .label {
  box-sizing: border-box;
  height: 1.54rem;
  border-top: 1px solid #f4f4f4;
}
/* line 150, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings .day .header {
  box-sizing: border-box;
  border-bottom: 1px solid #cdcdcd;
  padding: .2rem 0;
  background-color: #f4f4f4;
}
/* line 157, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings .day .date {
  box-sizing: border-box;
  padding: .2rem 0;
}
/* line 164, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .headings .day.prefix .date, div.views-element-container div.calendar .data .headings .day.suffix .date {
  color: #bcbcbc;
}
/* line 171, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .multidays {
  min-height: .3rem;
  display: block;
}
/* line 175, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .multidays .multiday {
  display: block;
}
/* line 35, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .multidays .multiday .inner {
  background-color: #018fe2;
  color: #fff;
  margin-bottom: .2rem;
}
/* line 39, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .multidays .multiday .inner a {
  padding: 0 0.3rem;
  color: #fff;
  text-decoration: none;
  border-bottom: none;
}
/* line 181, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .alldays .day {
  flex: 0 0 14.28571%;
  border-top: 1px solid #cdcdcd;
}
/* line 184, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .alldays .day .inner {
  background-color: #50b4ff;
  color: #fff;
  padding: 0 0.3rem;
  margin-bottom: .2rem;
}
/* line 53, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .alldays .day .inner a {
  color: #fff;
  text-decoration: none;
  border-bottom: none;
}
/* line 191, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .otherdays .day {
  flex: 0 0 100/7%;
}
/* line 195, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .otherdays .day .events .hour .inner {
  border-radius: .5rem;
  border: 1px solid #cdcdcd;
  background-color: #ffffcc;
  padding: .3rem;
  overflow: hidden;
}
/* line 204, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .otherdays .day .labels {
  display: flex;
  flex-direction: column;
}
/* line 207, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .otherdays .day .labels .label {
  box-sizing: border-box;
  height: 1.54rem;
  position: relative;
}
/* line 211, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .otherdays .day .labels .label:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-top: 1px solid #f4f4f4;
}
/* line 221, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .otherdays .day .labels .label .hour {
  position: relative;
  z-index: 100;
}
/* line 224, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar .data .otherdays .day .labels .label .hour .event {
  overflow: hidden;
}
/* line 234, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.month {
  flex-direction: column;
}
/* line 241, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.month .alldays .allday {
  width: 100%;
}
/* line 243, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.month .alldays .allday .inner {
  background-color: #50b4ff;
  color: #fff;
  padding: 0 0.3rem;
  margin-bottom: .2rem;
}
/* line 53, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.month .alldays .allday .inner a {
  color: #fff;
  text-decoration: none;
  border-bottom: none;
}
/* line 60, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.mini .multiday .inner,
div.views-element-container div.calendar.mini .allday .inner {
  margin-top: .2rem;
  height: .5rem;
}
/* line 63, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.mini .multiday .inner a,
div.views-element-container div.calendar.mini .allday .inner a {
  display: none;
}
/* line 69, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.mini .otherdays .day .events .hour .inner {
  margin: .2rem auto 0;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 50%;
  overflow: hidden;
}
/* line 75, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.mini .otherdays .day .events .hour .inner > div {
  display: none;
}
/* line 266, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.week > .labels {
  flex: 0 0 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 2px solid #bcbcbc;
}
/* line 272, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.week > .labels .weekno {
  margin: .2rem;
  text-align: center;
  padding: .25rem;
  line-height: 1rem;
  font-size: 90%;
  background-color: #bcbcbc;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
}
/* line 275, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.week > .labels .hour-label {
  display: flex;
  flex-direction: column;
}
/* line 278, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.week > .labels .hour-label .label {
  box-sizing: border-box;
  height: 1.54rem;
  border-top: 1px solid #f4f4f4;
}
/* line 282, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.week > .labels .hour-label .label:first-child {
  border-top: 1px solid #bcbcbc;
}
/* line 292, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.day > .data .headings {
  flex-direction: column;
}
/* line 295, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.day > .data .otherdays {
  flex-direction: column;
}
/* line 297, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.day > .data .otherdays .time {
  position: relative;
}
/* line 299, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.day > .data .otherdays .time .label {
  position: absolute;
  left: 5rem;
}
/* line 302, ../sass/_calendarstyles.scss */
div.views-element-container div.calendar.day > .data .otherdays .time .label h2 {
  margin: 0;
}

File

css/stylesheets/calendar.css
View source 
  1. /* Welcome to Compass.

  2.  * In this file you should write your main styles. (or centralize your imports)

  3.  * Import this file using the following HTML or equivalent:

  4.  *  */

  5. /* line 81, ../sass/_calendarstyles.scss */

  6. div.views-element-container h3.calendar-header,

  7. div.views-element-container h3.calendar-pager {

  8.   font-size: 140%;

  9. }

  10. /* line 86, ../sass/_calendarstyles.scss */

  11. div.views-element-container nav.pager ul {

  12.   display: flex;

  13. }

  14. /* line 88, ../sass/_calendarstyles.scss */

  15. div.views-element-container nav.pager ul li.pager__item {

  16.   width: auto;

  17.   margin: 0 1rem;

  18. }

  19. /* line 94, ../sass/_calendarstyles.scss */

  20. div.views-element-container div.calendar {

  21.   width: 100%;

  22.   border: 1px solid #bcbcbc;

  23.   border-top: none;

  24.   display: flex;

  25.   flex-direction: row;

  26.   box-sizing: border-box;

  27. }

  28. /* line 102, ../sass/_calendarstyles.scss */

  29. div.views-element-container div.calendar .data {

  30.   position: relative;

  31.   flex: 1 1 auto;

  32.   display: flex;

  33.   flex-direction: column;

  34.   border-top: 2px solid #bcbcbc;

  35. }

  36. /* line 109, ../sass/_calendarstyles.scss */

  37. div.views-element-container div.calendar .data .weekno {

  38.   position: absolute;

  39.   margin: .2rem;

  40.   text-align: center;

  41.   padding: .25rem;

  42.   line-height: 1rem;

  43.   font-size: 90%;

  44.   background-color: #bcbcbc;

  45.   width: 1.4rem;

  46.   height: 1.4rem;

  47.   border-radius: 50%;

  48. }

  49. /* line 114, ../sass/_calendarstyles.scss */

  50. div.views-element-container div.calendar .data .headings,

  51. div.views-element-container div.calendar .data .multidays,

  52. div.views-element-container div.calendar .data .alldays,

  53. div.views-element-container div.calendar .data .otherdays {

  54.   display: flex;

  55.   flex-direction: row;

  56. }

  57. /* line 120, ../sass/_calendarstyles.scss */

  58. div.views-element-container div.calendar .data .headings .inner,

  59. div.views-element-container div.calendar .data .multidays .inner,

  60. div.views-element-container div.calendar .data .alldays .inner,

  61. div.views-element-container div.calendar .data .otherdays .inner {

  62.   padding-top: .1rem;

  63.   min-height: .1rem;

  64. }

  65. /* line 124, ../sass/_calendarstyles.scss */

  66. div.views-element-container div.calendar .data .headings .day,

  67. div.views-element-container div.calendar .data .multidays .day,

  68. div.views-element-container div.calendar .data .alldays .day,

  69. div.views-element-container div.calendar .data .otherdays .day {

  70.   flex: 0 0 14.28571%;

  71.   box-sizing: border-box;

  72.   border-left: 1px solid #cdcdcd;

  73.   overflow: hidden;

  74. }

  75. /* line 129, ../sass/_calendarstyles.scss */

  76. div.views-element-container div.calendar .data .headings .day:first-child,

  77. div.views-element-container div.calendar .data .multidays .day:first-child,

  78. div.views-element-container div.calendar .data .alldays .day:first-child,

  79. div.views-element-container div.calendar .data .otherdays .day:first-child {

  80.   border-left: none;

  81. }

  82. /* line 135, ../sass/_calendarstyles.scss */

  83. div.views-element-container div.calendar .data .headings {

  84.   text-align: center;

  85. }

  86. /* line 139, ../sass/_calendarstyles.scss */

  87. div.views-element-container div.calendar .data .headings .day .labels {

  88.   display: flex;

  89.   flex-direction: column;

  90. }

  91. /* line 143, ../sass/_calendarstyles.scss */

  92. div.views-element-container div.calendar .data .headings .day .labels .label {

  93.   box-sizing: border-box;

  94.   height: 1.54rem;

  95.   border-top: 1px solid #f4f4f4;

  96. }

  97. /* line 150, ../sass/_calendarstyles.scss */

  98. div.views-element-container div.calendar .data .headings .day .header {

  99.   box-sizing: border-box;

  100.   border-bottom: 1px solid #cdcdcd;

  101.   padding: .2rem 0;

  102.   background-color: #f4f4f4;

  103. }

  104. /* line 157, ../sass/_calendarstyles.scss */

  105. div.views-element-container div.calendar .data .headings .day .date {

  106.   box-sizing: border-box;

  107.   padding: .2rem 0;

  108. }

  109. /* line 164, ../sass/_calendarstyles.scss */

  110. div.views-element-container div.calendar .data .headings .day.prefix .date, div.views-element-container div.calendar .data .headings .day.suffix .date {

  111.   color: #bcbcbc;

  112. }

  113. /* line 171, ../sass/_calendarstyles.scss */

  114. div.views-element-container div.calendar .data .multidays {

  115.   min-height: .3rem;

  116.   display: block;

  117. }

  118. /* line 175, ../sass/_calendarstyles.scss */

  119. div.views-element-container div.calendar .data .multidays .multiday {

  120.   display: block;

  121. }

  122. /* line 35, ../sass/_calendarstyles.scss */

  123. div.views-element-container div.calendar .data .multidays .multiday .inner {

  124.   background-color: #018fe2;

  125.   color: #fff;

  126.   margin-bottom: .2rem;

  127. }

  128. /* line 39, ../sass/_calendarstyles.scss */

  129. div.views-element-container div.calendar .data .multidays .multiday .inner a {

  130.   padding: 0 0.3rem;

  131.   color: #fff;

  132.   text-decoration: none;

  133.   border-bottom: none;

  134. }

  135. /* line 181, ../sass/_calendarstyles.scss */

  136. div.views-element-container div.calendar .data .alldays .day {

  137.   flex: 0 0 14.28571%;

  138.   border-top: 1px solid #cdcdcd;

  139. }

  140. /* line 184, ../sass/_calendarstyles.scss */

  141. div.views-element-container div.calendar .data .alldays .day .inner {

  142.   background-color: #50b4ff;

  143.   color: #fff;

  144.   padding: 0 0.3rem;

  145.   margin-bottom: .2rem;

  146. }

  147. /* line 53, ../sass/_calendarstyles.scss */

  148. div.views-element-container div.calendar .data .alldays .day .inner a {

  149.   color: #fff;

  150.   text-decoration: none;

  151.   border-bottom: none;

  152. }

  153. /* line 191, ../sass/_calendarstyles.scss */

  154. div.views-element-container div.calendar .data .otherdays .day {

  155.   flex: 0 0 100/7%;

  156. }

  157. /* line 195, ../sass/_calendarstyles.scss */

  158. div.views-element-container div.calendar .data .otherdays .day .events .hour .inner {

  159.   border-radius: .5rem;

  160.   border: 1px solid #cdcdcd;

  161.   background-color: #ffffcc;

  162.   padding: .3rem;

  163.   overflow: hidden;

  164. }

  165. /* line 204, ../sass/_calendarstyles.scss */

  166. div.views-element-container div.calendar .data .otherdays .day .labels {

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170. /* line 207, ../sass/_calendarstyles.scss */

  171. div.views-element-container div.calendar .data .otherdays .day .labels .label {

  172.   box-sizing: border-box;

  173.   height: 1.54rem;

  174.   position: relative;

  175. }

  176. /* line 211, ../sass/_calendarstyles.scss */

  177. div.views-element-container div.calendar .data .otherdays .day .labels .label:after {

  178.   content: '';

  179.   position: absolute;

  180.   top: 50%;

  181.   left: 50%;

  182.   transform: translate(-50%, -50%);

  183.   width: 100%;

  184.   height: 100%;

  185.   border-top: 1px solid #f4f4f4;

  186. }

  187. /* line 221, ../sass/_calendarstyles.scss */

  188. div.views-element-container div.calendar .data .otherdays .day .labels .label .hour {

  189.   position: relative;

  190.   z-index: 100;

  191. }

  192. /* line 224, ../sass/_calendarstyles.scss */

  193. div.views-element-container div.calendar .data .otherdays .day .labels .label .hour .event {

  194.   overflow: hidden;

  195. }

  196. /* line 234, ../sass/_calendarstyles.scss */

  197. div.views-element-container div.calendar.month {

  198.   flex-direction: column;

  199. }

  200. /* line 241, ../sass/_calendarstyles.scss */

  201. div.views-element-container div.calendar.month .alldays .allday {

  202.   width: 100%;

  203. }

  204. /* line 243, ../sass/_calendarstyles.scss */

  205. div.views-element-container div.calendar.month .alldays .allday .inner {

  206.   background-color: #50b4ff;

  207.   color: #fff;

  208.   padding: 0 0.3rem;

  209.   margin-bottom: .2rem;

  210. }

  211. /* line 53, ../sass/_calendarstyles.scss */

  212. div.views-element-container div.calendar.month .alldays .allday .inner a {

  213.   color: #fff;

  214.   text-decoration: none;

  215.   border-bottom: none;

  216. }

  217. /* line 60, ../sass/_calendarstyles.scss */

  218. div.views-element-container div.calendar.mini .multiday .inner,

  219. div.views-element-container div.calendar.mini .allday .inner {

  220.   margin-top: .2rem;

  221.   height: .5rem;

  222. }

  223. /* line 63, ../sass/_calendarstyles.scss */

  224. div.views-element-container div.calendar.mini .multiday .inner a,

  225. div.views-element-container div.calendar.mini .allday .inner a {

  226.   display: none;

  227. }

  228. /* line 69, ../sass/_calendarstyles.scss */

  229. div.views-element-container div.calendar.mini .otherdays .day .events .hour .inner {

  230.   margin: .2rem auto 0;

  231.   height: 1.6rem;

  232.   width: 1.6rem;

  233.   border-radius: 50%;

  234.   overflow: hidden;

  235. }

  236. /* line 75, ../sass/_calendarstyles.scss */

  237. div.views-element-container div.calendar.mini .otherdays .day .events .hour .inner > div {

  238.   display: none;

  239. }

  240. /* line 266, ../sass/_calendarstyles.scss */

  241. div.views-element-container div.calendar.week > .labels {

  242.   flex: 0 0 4rem;

  243.   display: flex;

  244.   flex-direction: column;

  245.   justify-content: space-between;

  246.   border-top: 2px solid #bcbcbc;

  247. }

  248. /* line 272, ../sass/_calendarstyles.scss */

  249. div.views-element-container div.calendar.week > .labels .weekno {

  250.   margin: .2rem;

  251.   text-align: center;

  252.   padding: .25rem;

  253.   line-height: 1rem;

  254.   font-size: 90%;

  255.   background-color: #bcbcbc;

  256.   width: 1.4rem;

  257.   height: 1.4rem;

  258.   border-radius: 50%;

  259. }

  260. /* line 275, ../sass/_calendarstyles.scss */

  261. div.views-element-container div.calendar.week > .labels .hour-label {

  262.   display: flex;

  263.   flex-direction: column;

  264. }

  265. /* line 278, ../sass/_calendarstyles.scss */

  266. div.views-element-container div.calendar.week > .labels .hour-label .label {

  267.   box-sizing: border-box;

  268.   height: 1.54rem;

  269.   border-top: 1px solid #f4f4f4;

  270. }

  271. /* line 282, ../sass/_calendarstyles.scss */

  272. div.views-element-container div.calendar.week > .labels .hour-label .label:first-child {

  273.   border-top: 1px solid #bcbcbc;

  274. }

  275. /* line 292, ../sass/_calendarstyles.scss */

  276. div.views-element-container div.calendar.day > .data .headings {

  277.   flex-direction: column;

  278. }

  279. /* line 295, ../sass/_calendarstyles.scss */

  280. div.views-element-container div.calendar.day > .data .otherdays {

  281.   flex-direction: column;

  282. }

  283. /* line 297, ../sass/_calendarstyles.scss */

  284. div.views-element-container div.calendar.day > .data .otherdays .time {

  285.   position: relative;

  286. }

  287. /* line 299, ../sass/_calendarstyles.scss */

  288. div.views-element-container div.calendar.day > .data .otherdays .time .label {

  289.   position: absolute;

  290.   left: 5rem;

  291. }

  292. /* line 302, ../sass/_calendarstyles.scss */

  293. div.views-element-container div.calendar.day > .data .otherdays .time .label h2 {

  294.   margin: 0;

  295. }