git.roojs.org Git - roojs1/blob - less/roojs-bootstrap/calendar.less

   1 /*!
   2  * FullCalendar v1.6.4 Stylesheet
   3  * Docs & License: http://arshaw.com/fullcalendar/
   4  * (c) 2013 Adam Shaw
   5  *
   6  * When taken - was MIT licence (18/Feb/2014)
   7  */
   8
   9 .fc {
  10     direction: ltr;
  11     text-align: left;
  12     margin: 0;
  13     font-family: Lucida Sans,Arial,sans-serif;
  14 }
  15
  16 .fc table {
  17     border-collapse: collapse;
  18     border-spacing: 0;
  19 }
  20
  21 html .fc,
  22 .fc table {
  23     font-size: 1em;
  24 }
  25
  26 .fc td,
  27 .fc th {
  28     padding: 0;
  29     vertical-align: top;
  30     -moz-user-select: -moz-none;
  31     -khtml-user-select: none;
  32     -webkit-user-select: none;
  33     -o-user-select: none;
  34     user-select: none;
  35 }
  36
  37
  38
  39 /* Header
  40 ------------------------------------------------------------------------*/
  41
  42 .fc-header td {
  43     white-space: nowrap;
  44 }
  45
  46 .fc-header-left {
  47     width: 25%;
  48     text-align: left;
  49 }
  50
  51 .fc-header-center {
  52     text-align: center;
  53 }
  54
  55 .fc-header-right {
  56     width: 25%;
  57     text-align: right;
  58 }
  59
  60 .fc-header-title {
  61     display: inline-block;
  62     vertical-align: top;
  63 }
  64
  65 .fc-header-title h2 {
  66     margin-top: 0;
  67     white-space: nowrap;
  68     font-size: 1.5em;
  69     font-family: Lucida Sans,Arial,sans-serif;
  70     font-weight: bold;
  71     line-height: normal;;
  72     margin:0;
  73 }
  74
  75 .fc .fc-header-space {
  76     padding-left: 10px;
  77 }
  78
  79 .fc-header .fc-button {
  80     margin-bottom: 1em;
  81     vertical-align: top;
  82 }
  83
  84 /* buttons edges butting together */
  85
  86 .fc-header .fc-button {
  87     margin-right: -1px;
  88 }
  89
  90 .fc-header .fc-corner-right,  /* non-theme */
  91 .fc-header .ui-corner-right { /* theme */
  92     margin-right: 0; /* back to normal */
  93 }
  94
  95 /* button layering (for border precedence) */
  96
  97 .fc-header .fc-state-hover,
  98 .fc-header .ui-state-hover {
  99     z-index: 2;
 100 }
 101
 102 .fc-header .fc-state-down {
 103     z-index: 3;
 104 }
 105
 106 .fc-header .fc-state-active,
 107 .fc-header .ui-state-active {
 108     z-index: 4;
 109 }
 110
 111 /* Content
 112 ------------------------------------------------------------------------*/
 113
 114 .fc-content {
 115     clear: both;
 116     zoom: 1; /* for IE7, gives accurate coordinates for [un]freezeContentHeight */
 117 }
 118
 119 .fc-view {
 120     width: 100%;
 121     overflow: hidden;
 122 }
 123
 124 /* Cell Styles
 125 ------------------------------------------------------------------------*/
 126
 127 .fc-widget-header,    /* <th>, usually */
 128 .fc-widget-content {  /* <td>, usually */
 129     border: 1px solid #ddd;
 130 }
 131
 132 .fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th> */
 133     background: #fcf8e3;
 134 }
 135
 136 .fc-cell-overlay { /* semi-transparent rectangle while dragging */
 137     background: #bce8f1;
 138     opacity: .3;
 139     filter: alpha(opacity=30); /* for IE */
 140 }
 141
 142 /* Buttons
 143 ------------------------------------------------------------------------*/
 144
 145 .fc-button {
 146     position: relative;
 147     display: inline-block;
 148     padding: 0 .6em;
 149     overflow: hidden;
 150     height: 1.9em;
 151     line-height: 1.9em;
 152     white-space: nowrap;
 153     cursor: pointer;
 154 }
 155
 156 .fc-state-default { /* non-theme */
 157     border: 1px solid;
 158 }
 159
 160 .fc-state-default.fc-corner-left { /* non-theme */
 161     border-top-left-radius: 4px;
 162     border-bottom-left-radius: 4px;
 163 }
 164
 165 .fc-state-default.fc-corner-right { /* non-theme */
 166     border-top-right-radius: 4px;
 167     border-bottom-right-radius: 4px;
 168 }
 169
 170 /*
 171         Our default prev/next buttons use HTML entities like &lsaquo; &rsaquo; &laquo; &raquo;
 172         and we'll try to make them look good cross-browser.
 173 */
 174
 175 .fc-text-arrow {
 176     margin: 0 .1em;
 177     font-size: 2em;
 178     font-family: "Courier New", Courier, monospace;
 179     vertical-align: baseline; /* for IE7 */
 180 }
 181
 182 .fc-button-prev .fc-text-arrow,
 183 .fc-button-next .fc-text-arrow { /* for &lsaquo; &rsaquo; */
 184     font-weight: bold;
 185 }
 186
 187 /* icon (for jquery ui) */
 188
 189 .fc-button .fc-icon-wrap {
 190     position: relative;
 191     float: left;
 192     top: 50%;
 193 }
 194
 195 .fc-button .ui-icon {
 196     position: relative;
 197     float: left;
 198     margin-top: -50%;
 199     *margin-top: 0;
 200     *top: -50%;
 201 }
 202
 203 /*
 204   button states
 205   borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
 206 */
 207
 208 .fc-state-default {
 209     background-color: @white-smoke;
 210     background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
 211     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
 212     background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
 213     background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
 214     background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
 215     background-repeat: repeat-x;
 216     border-color: #e6e6e6 #e6e6e6 #bfbfbf;
 217     border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 218     color: #333;
 219     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 220     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 221 }
 222
 223 .fc-state-hover,
 224 .fc-state-down,
 225 .fc-state-active,
 226 .fc-state-disabled {
 227     color: #333333;
 228     background-color: #e6e6e6;
 229 }
 230
 231 .fc-state-hover {
 232     color: #333333;
 233     text-decoration: none;
 234     background-position: 0 -15px;
 235     -webkit-transition: background-position 0.1s linear;
 236     -moz-transition: background-position 0.1s linear;
 237     -o-transition: background-position 0.1s linear;
 238     transition: background-position 0.1s linear;
 239 }
 240
 241 .fc-state-down,
 242 .fc-state-active {
 243     background-color: #cccccc;
 244     background-image: none;
 245     outline: 0;
 246     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 247 }
 248
 249 .fc-state-disabled {
 250     cursor: default;
 251     background-image: none;
 252     opacity: 0.65;
 253     filter: alpha(opacity=65);
 254     box-shadow: none;
 255 }
 256
 257
 258
 259 /* Global Event Styles
 260 ------------------------------------------------------------------------*/
 261
 262 .fc-event-container > * {
 263     z-index: 8;
 264 }
 265
 266 .fc-event-container > .ui-draggable-dragging,
 267 .fc-event-container > .ui-resizable-resizing {
 268     z-index: 9;
 269 }
 270
 271 .fc-event {
 272     border: 1px solid #3a87ad; /* default BORDER color */
 273     background-color: #3a87ad; /* default BACKGROUND color */
 274     color: #fff;               /* default TEXT color */
 275     font-size: .85em;
 276     cursor: default;
 277 }
 278
 279 a.fc-event {
 280     text-decoration: none;
 281 }
 282
 283 a.fc-event,
 284 .fc-event-draggable {
 285     cursor: pointer;
 286 }
 287
 288 .fc-rtl .fc-event {
 289     text-align: right;
 290 }
 291
 292 .fc-event-inner {
 293     width: 100%;
 294     height: 100%;
 295     overflow: hidden;
 296 }
 297
 298 .fc-event-time,
 299 .fc-event-title {
 300     padding: 0 1px;
 301     overflow: hidden;
 302     white-space: nowrap;
 303 }
 304
 305 .fc .ui-resizable-handle {
 306     display: block;
 307     position: absolute;
 308     z-index: 99999;
 309     overflow: hidden; /* hacky spaces (IE6/7) */
 310     font-size: 300%;  /* */
 311     line-height: 50%; /* */
 312 }
 313
 314
 315
 316 /* Horizontal Events
 317 ------------------------------------------------------------------------*/
 318
 319 .fc-event-hori {
 320     border-width: 1px 0;
 321     margin-bottom: 1px;
 322 }
 323
 324 .fc-ltr .fc-event-hori.fc-event-start,
 325 .fc-rtl .fc-event-hori.fc-event-end {
 326     border-left-width: 1px;
 327     border-top-left-radius: 3px;
 328     border-bottom-left-radius: 3px;
 329 }
 330
 331 .fc-ltr .fc-event-hori.fc-event-end,
 332 .fc-rtl .fc-event-hori.fc-event-start {
 333     border-right-width: 1px;
 334     border-top-right-radius: 3px;
 335     border-bottom-right-radius: 3px;
 336 }
 337
 338 /* resizable */
 339
 340 .fc-event-hori .ui-resizable-e {
 341     top: 0           !important; /* importants override pre jquery ui 1.7 styles */
 342     right: -3px      !important;
 343     width: 7px       !important;
 344     height: 100%     !important;
 345     cursor: e-resize;
 346 }
 347
 348 .fc-event-hori .ui-resizable-w {
 349     top: 0           !important;
 350     left: -3px       !important;
 351     width: 7px       !important;
 352     height: 100%     !important;
 353     cursor: w-resize;
 354 }
 355
 356 .fc-event-hori .ui-resizable-handle {
 357     _padding-bottom: 14px; /* IE6 had 0 height */
 358 }
 359
 360
 361
 362 /* Reusable Separate-border Table
 363 ------------------------------------------------------------*/
 364
 365 table.fc-border-separate {
 366     border-collapse: separate;
 367 }
 368
 369 .fc-border-separate th,
 370 .fc-border-separate td {
 371     border-width: 1px 0 0 1px;
 372 }
 373
 374 .fc-border-separate th.fc-last,
 375 .fc-border-separate td.fc-last {
 376     border-right-width: 1px;
 377 }
 378
 379 .fc-border-separate tr.fc-last th,
 380 .fc-border-separate tr.fc-last td {
 381     border-bottom-width: 1px;
 382 }
 383
 384 .fc-border-separate tbody tr.fc-first td,
 385 .fc-border-separate tbody tr.fc-first th {
 386     border-top-width: 0;
 387 }
 388
 389
 390
 391 /* Month View, Basic Week View, Basic Day View
 392 ------------------------------------------------------------------------*/
 393
 394 .fc-grid th {
 395     text-align: center;
 396 }
 397
 398 .fc .fc-week-number {
 399     width: 22px;
 400     text-align: center;
 401 }
 402
 403 .fc .fc-week-number div {
 404     padding: 0 2px;
 405 }
 406
 407 .fc-grid .fc-day-number {
 408     float: right;
 409     padding: 0 2px;
 410 }
 411
 412 .fc-grid .fc-other-month .fc-day-number {
 413     opacity: 0.3;
 414     filter: alpha(opacity=30); /* for IE */
 415     /* opacity with small font can sometimes look too faded
 416        might want to set the 'color' property instead
 417        making day-numbers bold also fixes the problem */
 418 }
 419
 420 .fc-grid .fc-day-content {
 421     clear: both;
 422     padding: 2px 2px 1px; /* distance between events and day edges */
 423 }
 424
 425 /* event styles */
 426
 427 .fc-grid .fc-event-time {
 428     font-weight: bold;
 429 }
 430
 431 /* right-to-left */
 432
 433 .fc-rtl .fc-grid .fc-day-number {
 434     float: left;
 435 }
 436
 437 .fc-rtl .fc-grid .fc-event-time {
 438     float: right;
 439 }
 440
 441
 442
 443 /* Agenda Week View, Agenda Day View
 444 ------------------------------------------------------------------------*/
 445
 446 .fc-agenda table {
 447     border-collapse: separate;
 448 }
 449
 450 .fc-agenda-days th {
 451     text-align: center;
 452 }
 453
 454 .fc-agenda .fc-agenda-axis {
 455     width: 50px;
 456     padding: 0 4px;
 457     vertical-align: middle;
 458     text-align: right;
 459     white-space: nowrap;
 460     font-weight: normal;
 461 }
 462
 463 .fc-agenda .fc-week-number {
 464     font-weight: bold;
 465 }
 466
 467 .fc-agenda .fc-day-content {
 468     padding: 2px 2px 1px;
 469 }
 470
 471 /* make axis border take precedence */
 472
 473 .fc-agenda-days .fc-agenda-axis {
 474     border-right-width: 1px;
 475 }
 476
 477 .fc-agenda-days .fc-col0 {
 478     border-left-width: 0;
 479 }
 480
 481 /* all-day area */
 482
 483 .fc-agenda-allday th {
 484     border-width: 0 1px;
 485 }
 486
 487 .fc-agenda-allday .fc-day-content {
 488     min-height: 34px; /* TODO: doesnt work well in quirksmode */
 489     _height: 34px;
 490 }
 491
 492 /* divider (between all-day and slots) */
 493
 494 .fc-agenda-divider-inner {
 495     height: 2px;
 496     overflow: hidden;
 497 }
 498
 499 .fc-widget-header .fc-agenda-divider-inner {
 500     background: #eee;
 501 }
 502
 503 /* slot rows */
 504
 505 .fc-agenda-slots th {
 506     border-width: 1px 1px 0;
 507 }
 508
 509 .fc-agenda-slots td {
 510     border-width: 1px 0 0;
 511     background: none;
 512 }
 513
 514 .fc-agenda-slots td div {
 515     height: 20px;
 516 }
 517
 518 .fc-agenda-slots tr.fc-slot0 th,
 519 .fc-agenda-slots tr.fc-slot0 td {
 520     border-top-width: 0;
 521 }
 522
 523 .fc-agenda-slots tr.fc-minor th,
 524 .fc-agenda-slots tr.fc-minor td {
 525     border-top-style: dotted;
 526 }
 527
 528 .fc-agenda-slots tr.fc-minor th.ui-widget-header {
 529     *border-top-style: solid; /* doesn't work with background in IE6/7 */
 530 }
 531
 532
 533
 534 /* Vertical Events
 535 ------------------------------------------------------------------------*/
 536
 537 .fc-event-vert {
 538     border-width: 0 1px;
 539 }
 540
 541 .fc-event-vert.fc-event-start {
 542     border-top-width: 1px;
 543     border-top-left-radius: 3px;
 544     border-top-right-radius: 3px;
 545 }
 546
 547 .fc-event-vert.fc-event-end {
 548     border-bottom-width: 1px;
 549     border-bottom-left-radius: 3px;
 550     border-bottom-right-radius: 3px;
 551 }
 552
 553 .fc-event-vert .fc-event-time {
 554     white-space: nowrap;
 555     font-size: 10px;
 556 }
 557
 558 .fc-event-vert .fc-event-inner {
 559     position: relative;
 560     z-index: 2;
 561 }
 562
 563 .fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay  */
 564     position: absolute;
 565     z-index: 1;
 566     top: 0;
 567     left: 0;
 568     width: 100%;
 569     height: 100%;
 570     background: #fff;
 571     opacity: .25;
 572     filter: alpha(opacity=25);
 573 }
 574
 575 .fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */
 576 .fc-select-helper .fc-event-bg {
 577     display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
 578 }
 579
 580 /* resizable */
 581
 582 .fc-event-vert .ui-resizable-s {
 583     bottom: 0        !important; /* importants override pre jquery ui 1.7 styles */
 584     width: 100%      !important;
 585     height: 8px      !important;
 586     overflow: hidden !important;
 587     line-height: 8px !important;
 588     font-size: 11px  !important;
 589     font-family: monospace;
 590     text-align: center;
 591     cursor: s-resize;
 592 }
 593
 594 .fc-agenda .ui-resizable-resizing { /* TODO: better selector */
 595     _overflow: hidden;
 596 }
 597
 598