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

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