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 @gray-lighter;
 130 }
 131
 132 .fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th> */
 133     background: @state-highlight-background;
 134 }
 135
 136 .fc-cell-overlay { /* semi-transparent rectangle while dragging */
 137     background: @cell-overlay-background;
 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: @gray-lighter;
 210     background-image: -moz-linear-gradient(top, @white, @gray-lighter);
 211     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@white), to(@gray-lighter));
 212     background-image: -webkit-linear-gradient(top, @white, @gray-lighter);
 213     background-image: -o-linear-gradient(top, @white, @gray-lighter);
 214     background-image: linear-gradient(to bottom, @white, @gray-lighter);
 215     background-repeat: repeat-x;
 216     border-color: @gray-lighter @gray-lighter @gray-light;
 217     border-color: @black-opacity-10 @black-opacity-10 @black-opacity-25;
 218     color: @gray-dark;
 219     text-shadow: 0 1px 1px @white-opacity-75;
 220     box-shadow: inset 0 1px 0 @white-opacity-20, 0 1px 2px @black-opacity-05;
 221 }
 222
 223 .fc-state-hover,
 224 .fc-state-down,
 225 .fc-state-active,
 226 .fc-state-disabled {
 227     color: @gray-dark;
 228     background-color: @gray-lighter;
 229 }
 230
 231 .fc-state-hover {
 232     color: @gray-dark;
 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: @gray-lighter;
 244     background-image: none;
 245     outline: 0;
 246     box-shadow: inset 0 2px 4px @black-opacity-15, 0 1px 2px @black-opacity-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 /* Global Event Styles
 258 ------------------------------------------------------------------------*/
 259
 260 .fc-event-container > * {
 261     z-index: 8;
 262 }
 263
 264 .fc-event-container > .ui-draggable-dragging,
 265 .fc-event-container > .ui-resizable-resizing {
 266     z-index: 9;
 267 }
 268
 269 .fc-event {
 270     border: 1px solid @brand-primary; /* default BORDER color */
 271     background-color: @brand-primary; /* default BACKGROUND color */
 272     color:@white;               /* default TEXT color */
 273     font-size: .85em;
 274     cursor: default;
 275 }
 276
 277 a.fc-event {
 278     text-decoration: none;
 279 }
 280
 281 a.fc-event,
 282 .fc-event-draggable {
 283     cursor: pointer;
 284 }
 285
 286 .fc-rtl .fc-event {
 287     text-align: right;
 288 }
 289
 290 .fc-event-inner {
 291     width: 100%;
 292     height: 100%;
 293     overflow: hidden;
 294 }
 295
 296 .fc-event-time,
 297 .fc-event-title {
 298     padding: 0 1px;
 299     overflow: hidden;
 300     white-space: nowrap;
 301 }
 302
 303 .fc .ui-resizable-handle {
 304     display: block;
 305     position: absolute;
 306     z-index: 99999;
 307     overflow: hidden; /* hacky spaces (IE6/7) */
 308     font-size: 300%;  /* */
 309     line-height: 50%; /* */
 310 }
 311
 312
 313 /* Horizontal Events
 314 ------------------------------------------------------------------------*/
 315
 316 .fc-event-hori {
 317     border-width: 1px 0;
 318     margin-bottom: 1px;
 319 }
 320
 321 .fc-ltr .fc-event-hori.fc-event-start,
 322 .fc-rtl .fc-event-hori.fc-event-end {
 323     border-left-width: 1px;
 324     border-top-left-radius: 3px;
 325     border-bottom-left-radius: 3px;
 326 }
 327
 328 .fc-ltr .fc-event-hori.fc-event-end,
 329 .fc-rtl .fc-event-hori.fc-event-start {
 330     border-right-width: 1px;
 331     border-top-right-radius: 3px;
 332     border-bottom-right-radius: 3px;
 333 }
 334
 335 /* resizable */
 336
 337 .fc-event-hori .ui-resizable-e {
 338     top: 0           !important; /* importants override pre jquery ui 1.7 styles */
 339     right: -3px      !important;
 340     width: 7px       !important;
 341     height: 100%     !important;
 342     cursor: e-resize;
 343 }
 344
 345 .fc-event-hori .ui-resizable-w {
 346     top: 0           !important;
 347     left: -3px       !important;
 348     width: 7px       !important;
 349     height: 100%     !important;
 350     cursor: w-resize;
 351 }
 352
 353 .fc-event-hori .ui-resizable-handle {
 354     _padding-bottom: 14px; /* IE6 had 0 height */
 355 }
 356
 357
 358
 359 /* Reusable Separate-border Table
 360 ------------------------------------------------------------*/
 361
 362 table.fc-border-separate {
 363     border-collapse: separate;
 364 }
 365
 366 .fc-border-separate th,
 367 .fc-border-separate td {
 368     border-width: 1px 0 0 1px;
 369 }
 370
 371 .fc-border-separate th.fc-last,
 372 .fc-border-separate td.fc-last {
 373     border-right-width: 1px;
 374 }
 375
 376 .fc-border-separate tr.fc-last th,
 377 .fc-border-separate tr.fc-last td {
 378     border-bottom-width: 1px;
 379 }
 380
 381 .fc-border-separate tbody tr.fc-first td,
 382 .fc-border-separate tbody tr.fc-first th {
 383     border-top-width: 0;
 384 }
 385
 386
 387
 388 /* Month View, Basic Week View, Basic Day View
 389 ------------------------------------------------------------------------*/
 390
 391 .fc-grid th {
 392     text-align: center;
 393 }
 394
 395 .fc .fc-week-number {
 396     width: 22px;
 397     text-align: center;
 398 }
 399
 400 .fc .fc-week-number div {
 401     padding: 0 2px;
 402 }
 403
 404 .fc-grid .fc-day-number {
 405     float: right;
 406     padding: 0 2px;
 407 }
 408
 409 .fc-grid .fc-other-month .fc-day-number {
 410     opacity: 0.3;
 411     filter: alpha(opacity=30); /* for IE */
 412     /* opacity with small font can sometimes look too faded
 413        might want to set the 'color' property instead
 414        making day-numbers bold also fixes the problem */
 415 }
 416
 417 .fc-grid .fc-day-content {
 418     clear: both;
 419     padding: 2px 2px 1px; /* distance between events and day edges */
 420 }
 421
 422 /* event styles */
 423
 424 .fc-grid .fc-event-time {
 425     font-weight: bold;
 426 }
 427
 428 /* right-to-left */
 429
 430 .fc-rtl .fc-grid .fc-day-number {
 431     float: left;
 432 }
 433
 434 .fc-rtl .fc-grid .fc-event-time {
 435     float: right;
 436 }
 437
 438
 439
 440 /* Agenda Week View, Agenda Day View
 441 ------------------------------------------------------------------------*/
 442
 443 .fc-agenda table {
 444     border-collapse: separate;
 445 }
 446
 447 .fc-agenda-days th {
 448     text-align: center;
 449 }
 450
 451 .fc-agenda .fc-agenda-axis {
 452     width: 50px;
 453     padding: 0 4px;
 454     vertical-align: middle;
 455     text-align: right;
 456     white-space: nowrap;
 457     font-weight: normal;
 458 }
 459
 460 .fc-agenda .fc-week-number {
 461     font-weight: bold;
 462 }
 463
 464 .fc-agenda .fc-day-content {
 465     padding: 2px 2px 1px;
 466 }
 467
 468 /* make axis border take precedence */
 469
 470 .fc-agenda-days .fc-agenda-axis {
 471     border-right-width: 1px;
 472 }
 473
 474 .fc-agenda-days .fc-col0 {
 475     border-left-width: 0;
 476 }
 477
 478 /* all-day area */
 479
 480 .fc-agenda-allday th {
 481     border-width: 0 1px;
 482 }
 483
 484 .fc-agenda-allday .fc-day-content {
 485     min-height: 34px; /* TODO: doesnt work well in quirksmode */
 486     _height: 34px;
 487 }
 488
 489 /* divider (between all-day and slots) */
 490
 491 .fc-agenda-divider-inner {
 492     height: 2px;
 493     overflow: hidden;
 494 }
 495
 496 .fc-widget-header .fc-agenda-divider-inner {
 497     background: @gray-lighter;
 498 }
 499
 500 /* slot rows */
 501
 502 .fc-agenda-slots th {
 503     border-width: 1px 1px 0;
 504 }
 505
 506 .fc-agenda-slots td {
 507     border-width: 1px 0 0;
 508     background: none;
 509 }
 510
 511 .fc-agenda-slots td div {
 512     height: 20px;
 513 }
 514
 515 .fc-agenda-slots tr.fc-slot0 th,
 516 .fc-agenda-slots tr.fc-slot0 td {
 517     border-top-width: 0;
 518 }
 519
 520 .fc-agenda-slots tr.fc-minor th,
 521 .fc-agenda-slots tr.fc-minor td {
 522     border-top-style: dotted;
 523 }
 524
 525 .fc-agenda-slots tr.fc-minor th.ui-widget-header {
 526     *border-top-style: solid; /* doesn't work with background in IE6/7 */
 527 }
 528
 529
 530
 531 /* Vertical Events
 532 ------------------------------------------------------------------------*/
 533
 534 .fc-event-vert {
 535     border-width: 0 1px;
 536 }
 537
 538 .fc-event-vert.fc-event-start {
 539     border-top-width: 1px;
 540     border-top-left-radius: 3px;
 541     border-top-right-radius: 3px;
 542 }
 543
 544 .fc-event-vert.fc-event-end {
 545     border-bottom-width: 1px;
 546     border-bottom-left-radius: 3px;
 547     border-bottom-right-radius: 3px;
 548 }
 549
 550 .fc-event-vert .fc-event-time {
 551     white-space: nowrap;
 552     font-size: 10px;
 553 }
 554
 555 .fc-event-vert .fc-event-inner {
 556     position: relative;
 557     z-index: 2;
 558 }
 559
 560 .fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay  */
 561     position: absolute;
 562     z-index: 1;
 563     top: 0;
 564     left: 0;
 565     width: 100%;
 566     height: 100%;
 567     background: @white;
 568     opacity: .25;
 569     filter: alpha(opacity=25);
 570 }
 571
 572 .fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */
 573 .fc-select-helper .fc-event-bg {
 574     display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
 575 }
 576
 577 /* resizable */
 578
 579 .fc-event-vert .ui-resizable-s {
 580     bottom: 0        !important; /* importants override pre jquery ui 1.7 styles */
 581     width: 100%      !important;
 582     height: 8px      !important;
 583     overflow: hidden !important;
 584     line-height: 8px !important;
 585     font-size: 11px  !important;
 586     font-family: monospace;
 587     text-align: center;
 588     cursor: s-resize;
 589 }
 590
 591 .fc-agenda .ui-resizable-resizing { /* TODO: better selector */
 592     _overflow: hidden;
 593 }
 594
 595