_fullcalendar.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. //
  2. // Plugin: Full Calendar
  3. //
  4. // Buttons
  5. .fc-button {
  6. background: $gray-100;
  7. background-image: none;
  8. border-bottom-color: #ddd;
  9. border-color: #ddd;
  10. color: $gray-700;
  11. &:hover,
  12. &:active,
  13. &.hover {
  14. background-color: #e9e9e9;
  15. }
  16. }
  17. // Calendar title
  18. .fc-header-title h2 {
  19. color: #666;
  20. font-size: 15px;
  21. line-height: 1.6em;
  22. margin-left: 10px;
  23. }
  24. .fc-header-right {
  25. padding-right: 10px;
  26. }
  27. .fc-header-left {
  28. padding-left: 10px;
  29. }
  30. // Calendar table header cells
  31. .fc-widget-header {
  32. background: #fafafa;
  33. }
  34. .fc-grid {
  35. border: 0;
  36. width: 100%;
  37. }
  38. .fc-widget-header:first-of-type,
  39. .fc-widget-content:first-of-type {
  40. border-left: 0;
  41. border-right: 0;
  42. }
  43. .fc-widget-header:last-of-type,
  44. .fc-widget-content:last-of-type {
  45. border-right: 0;
  46. }
  47. .fc-toolbar,
  48. .fc-toolbar.fc-header-toolbar {
  49. margin: 0;
  50. padding: 1rem;
  51. }
  52. @include media-breakpoint-down(xs) {
  53. .fc-toolbar {
  54. flex-direction: column;
  55. .fc-left {
  56. order: 1;
  57. margin-bottom: .5rem;
  58. }
  59. .fc-center {
  60. order: 0;
  61. margin-bottom: .375rem;
  62. }
  63. .fc-right {
  64. order: 2;
  65. }
  66. }
  67. }
  68. .fc-day-number {
  69. font-size: 20px;
  70. font-weight: 300;
  71. padding-right: 10px;
  72. }
  73. .fc-color-picker {
  74. list-style: none;
  75. margin: 0;
  76. padding: 0;
  77. > li {
  78. float: left;
  79. font-size: 30px;
  80. line-height: 30px;
  81. margin-right: 5px;
  82. .fa,
  83. .fas,
  84. .far,
  85. .fab,
  86. .fal,
  87. .fad,
  88. .svg-inline--fa,
  89. .ion {
  90. transition: transform linear .3s;
  91. &:hover {
  92. @include rotate(30deg);
  93. }
  94. }
  95. }
  96. }
  97. #add-new-event {
  98. transition: all linear .3s;
  99. }
  100. .external-event {
  101. @include box-shadow($card-shadow);
  102. border-radius: $border-radius;
  103. cursor: move;
  104. font-weight: 700;
  105. margin-bottom: 4px;
  106. padding: 5px 10px;
  107. &:hover {
  108. @include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2));
  109. }
  110. }