Keine Beschreibung
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

fullcalendar.scss 9.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. @import "../../scss/_bootstrap-extended/include";
  2. $fullcalendar-event-padding-y: .25rem !default;
  3. $fullcalendar-event-padding-x: .5rem !default;
  4. $fullcalendar-event-margin-top: .625rem !default;
  5. $fullcalendar-event-font-size: $font-size-sm !default;
  6. $fullcalendar-event-font-weight: $font-weight-medium !default;
  7. $fullcalendar-toolbar-btn-padding: $btn-padding-y - .059 $input-btn-padding-x !default;
  8. $fullcalendar-fc-popover-z-index: 1090 !default;
  9. $fullcalendar-event-border-radius: $border-radius-sm !default;
  10. /* Calendar */
  11. .fc {
  12. --fc-neutral-bg-color: color-mix(in sRGB, var(--#{$prefix}base-color) 6%, var(--#{$prefix}card-bg));
  13. --fc-today-bg-color: color-mix(in sRGB, var(--#{$prefix}base-color) 6%, var(--#{$prefix}card-bg));
  14. --fc-border-color: var(--#{$prefix}border-color);
  15. .private-event {
  16. .fc-event-time,
  17. .fc-event-title {
  18. color: var(--#{$prefix}danger);
  19. }
  20. }
  21. .fc-scrollgrid-section {
  22. block-size: 0;
  23. }
  24. a[data-navlink]:hover {
  25. text-decoration: none;
  26. }
  27. .fc-timegrid-slot {
  28. block-size: 4em;
  29. }
  30. .fc-timeGridWeek-view {
  31. .fc-timegrid-slot-minor {
  32. border-block-start-style: none;
  33. }
  34. }
  35. .fc-timeGridDay-view {
  36. .fc-timegrid-slot-minor {
  37. border-block-start-style: solid;
  38. }
  39. }
  40. .fc-col-header-cell-cushion {
  41. color: var(--#{$prefix}heading-color);
  42. padding-block: 8.7px;
  43. }
  44. .fc-toolbar {
  45. flex-wrap: wrap;
  46. .fc-prev-button,
  47. .fc-next-button {
  48. display: inline-block;
  49. border-color: transparent;
  50. background-color: transparent;
  51. .fc-icon {
  52. color: var(--#{$prefix}heading-color);
  53. }
  54. &:hover,
  55. &:active,
  56. &:focus {
  57. border-color: transparent;
  58. background-color: transparent;
  59. box-shadow: none !important;
  60. }
  61. }
  62. .fc-button {
  63. @include border-radius($border-radius);
  64. &:not(.fc-next-button):not(.fc-prev-button) {
  65. padding: $fullcalendar-toolbar-btn-padding;
  66. &:active,
  67. &:focus {
  68. box-shadow: none;
  69. }
  70. }
  71. }
  72. > * > :not(:first-child) {
  73. margin-inline-start: 0;
  74. }
  75. .fc-toolbar-chunk {
  76. display: flex;
  77. align-items: center;
  78. }
  79. .fc-button-group {
  80. .fc-button {
  81. text-transform: capitalize;
  82. &:not(.fc-prev-button):not(.fc-next-button) {
  83. &:not(.fc-button-active, :first-child) {
  84. border-inline-start: $input-btn-border-width solid color-mix(in sRGB, var(--#{$prefix}paper-bg) #{$btn-label-group-border-shade-amount}, var(--fc-button-active-border-color));
  85. }
  86. &:not(.fc-button-active, .fc-sidebarToggle-button):hover {
  87. border-color: var(--fc-button-active-border-color);
  88. }
  89. }
  90. }
  91. & + div {
  92. display: flex;
  93. flex-wrap: wrap;
  94. align-items: center;
  95. }
  96. }
  97. .fc--button:empty,
  98. .fc-toolbar-chunk:empty {
  99. display: none;
  100. }
  101. .fc-sidebarToggle-button + div {
  102. margin-inline-start: 0;
  103. }
  104. }
  105. table.fc-scrollgrid {
  106. .fc-col-header {
  107. .fc-col-header-cell {
  108. border-inline-start: none;
  109. }
  110. }
  111. }
  112. .fc-view-harness {
  113. margin-block: 0;
  114. margin-inline: -1.5rem;
  115. min-block-size: 650px;
  116. .fc-daygrid-body {
  117. .fc-daygrid-day {
  118. .fc-daygrid-day-top {
  119. flex-direction: row;
  120. .fc-daygrid-day-number {
  121. padding: .5rem;
  122. }
  123. }
  124. .fc-daygrid-day-bottom .fc-daygrid-more-link {
  125. margin-block-start: .625rem;
  126. }
  127. }
  128. }
  129. .fc-event {
  130. border: 0;
  131. @include border-radius($fullcalendar-event-border-radius);
  132. font-size: $fullcalendar-event-font-size;
  133. font-weight: $fullcalendar-event-font-weight;
  134. padding-block: $fullcalendar-event-padding-y;
  135. padding-inline: $fullcalendar-event-padding-x;
  136. .fc-event-title {
  137. font-weight: $font-weight-medium;
  138. }
  139. }
  140. .fc-daygrid-event-harness {
  141. /*
  142. ! week & day events are using this style for all day only, not for other events */
  143. .fc-event {
  144. &.private-event {
  145. border-color: transparent !important;
  146. background-color: transparent !important;
  147. }
  148. }
  149. }
  150. .fc-event .fc-daygrid-event-dot {
  151. display: none;
  152. }
  153. .fc-timegrid-event .fc-event-time {
  154. font-size: .6875rem;
  155. }
  156. .fc-v-event .fc-event-title {
  157. font-size: $fullcalendar-event-font-size;
  158. font-weight: $fullcalendar-event-font-weight;
  159. padding-block-start: .2rem;
  160. }
  161. .fc-timegrid-event .fc-event-main {
  162. padding-block: $fullcalendar-event-padding-y 0;
  163. padding-inline: $fullcalendar-event-padding-x;
  164. }
  165. }
  166. .fc-daygrid-day-events {
  167. .fc-event,
  168. .fc-more-link {
  169. margin-inline: .5rem;
  170. }
  171. @include media-breakpoint-down(md) {
  172. .fc-daygrid-day-bottom {
  173. overflow: hidden;
  174. white-space: nowrap;
  175. }
  176. .fc-more-link {
  177. margin-inline: 0;
  178. }
  179. }
  180. }
  181. /* To fix firefox thead border issue */
  182. .fc-day-today {
  183. background-clip: padding-box;
  184. &:not(.fc-col-header-cell) {
  185. .fc-popover-body {
  186. background-color: var(--#{$prefix}paper-bg);
  187. }
  188. }
  189. }
  190. .fc-divider {
  191. border-color: var(--#{$prefix}border-color);
  192. background: var(--#{$prefix}border-color);
  193. }
  194. .fc-day-disabled {
  195. --fc-neutral-bg-color: color-mix(in sRGB, var(--#{$prefix}base-color) 16%, var(--#{$prefix}card-bg));
  196. }
  197. /* To overwrite white color of event text */
  198. .fc-h-event .fc-event-main,
  199. .fc-v-event .fc-event-main {
  200. color: inherit;
  201. }
  202. .fc-daygrid-block-event .fc-event-time,
  203. .fc-daygrid-dot-event .fc-event-title {
  204. font-weight: $fullcalendar-event-font-weight;
  205. }
  206. .fc-daygrid-body-natural {
  207. .fc-daygrid-day-events {
  208. margin-block: .94rem;
  209. }
  210. }
  211. .fc-daygrid-event-harness + .fc-daygrid-event-harness .fc-daygrid-event {
  212. margin-block-start: $fullcalendar-event-margin-top;
  213. }
  214. .fc-timegrid {
  215. .fc-timegrid-divider {
  216. display: none;
  217. }
  218. .fc-timegrid-event {
  219. @include border-radius(0);
  220. box-shadow: none;
  221. padding-block-start: $fullcalendar-event-padding-x;
  222. @include media-breakpoint-down(md) {
  223. overflow: hidden;
  224. white-space: nowrap;
  225. }
  226. .fc-event-time {
  227. font-size: inherit;
  228. }
  229. }
  230. }
  231. .fc-daygrid-event-harness-abs .fc-event {
  232. margin-block-end: .625rem;
  233. }
  234. .fc-timegrid-slot-label-frame {
  235. text-align: center;
  236. }
  237. .fc-timegrid-axis-cushion,
  238. .fc-timegrid-slot-label-cushion {
  239. font-size: $font-size-sm;
  240. }
  241. .fc-timegrid-axis-cushion {
  242. color: var(--#{$prefix}secondary-color);
  243. padding-block: .5rem;
  244. padding-inline: .4375rem;
  245. text-transform: capitalize;
  246. }
  247. .fc-timegrid-slot-label-cushion {
  248. padding: $fullcalendar-event-padding-x;
  249. color: var(--#{$prefix}heading-color);
  250. text-transform: uppercase;
  251. }
  252. .fc-list-day-cushion,
  253. .fc-list-table td {
  254. padding-inline: 1rem;
  255. }
  256. .fc-popover {
  257. z-index: $fullcalendar-fc-popover-z-index;
  258. border: 0;
  259. background-color: var(--#{$prefix}paper-bg);
  260. .fc-popover-header {
  261. padding: .566rem;
  262. background-color: var(--#{$prefix}body-bg);
  263. }
  264. }
  265. .fc-list {
  266. .fc-list-table {
  267. border-block-end: 1px solid;
  268. th {
  269. border: 0;
  270. background: var(--#{$prefix}body-bg);
  271. color: var(--#{$prefix}heading-color);
  272. }
  273. .fc-list-event {
  274. background-color: transparent !important;
  275. cursor: pointer;
  276. td {
  277. color: var(--#{$prefix}body-color);
  278. }
  279. &:hover {
  280. td {
  281. background-color: color-mix(in sRGB, var(--#{$prefix}base-color) 1.5%, var(--#{$prefix}paper-bg));
  282. }
  283. .fc-list-day {
  284. th {
  285. color: var(--#{$prefix}heading-color);
  286. }
  287. }
  288. tbody > tr:first-child th {
  289. border-block-start: 1px solid var(--#{$prefix}border-color);
  290. }
  291. }
  292. }
  293. tbody > tr:first-child th {
  294. border-block-start: 1px solid var(--#{$prefix}border-color);
  295. }
  296. /* FC day */
  297. .fc-timegrid-axis-cushion.fc-scrollgrid-shrink-cushion {
  298. color: var(--#{$prefix}secondary-color);
  299. }
  300. /* FC table list disabled bg */
  301. .fc-day-disabled {
  302. background-color: rgba(var(--#{$prefix}base-color-rgb), .16);
  303. }
  304. .fc-day-other {
  305. .fc-daygrid-day-top {
  306. color: var(--#{$prefix}secondary-color);
  307. }
  308. }
  309. }
  310. .fc-list-empty {
  311. background-color: var(--#{$prefix}body-bg);
  312. }
  313. }
  314. &.fc-theme-standard {
  315. .fc-list {
  316. border: none;
  317. }
  318. }
  319. .fc-day-other {
  320. .fc-daygrid-day-top {
  321. color: var(--#{$prefix}secondary-color);
  322. opacity: 1;
  323. }
  324. }
  325. }
  326. /* Media Queries */
  327. @include media-breakpoint-down(sm) {
  328. .fc {
  329. .fc-header-toolbar {
  330. .fc-toolbar-chunk + .fc-toolbar-chunk {
  331. margin-block-start: 1rem;
  332. }
  333. }
  334. }
  335. }
  336. /* scss-docs-start calendar-modifiers */
  337. /* Generate contextual modifier classes for colorizing the calendar */
  338. @each $state in map-keys($theme-colors) {
  339. .app-calendar-wrapper {
  340. .bg-label-#{$state} {
  341. .fc-list-event-dot {
  342. --fc-event-border-color: var(--#{$prefix}#{$state});
  343. }
  344. }
  345. .fc-button-#{$state}:not(.fc-prev-button):not(.fc-next-button) {
  346. --fc-button-bg-color: color-mix(in sRGB, var(--#{$prefix}paper-bg) #{$btn-label-tint-amount}, var(--#{$prefix}#{$state}));
  347. --fc-button-border-color: color-mix(in sRGB, var(--#{$prefix}paper-bg) #{$btn-label-tint-amount}, var(--#{$prefix}#{$state}));
  348. --fc-button-text-color: var(--#{$prefix}#{$state});
  349. --fc-button-active-bg-color: var(--#{$prefix}#{$state});
  350. --fc-button-active-border-color: var(--#{$prefix}#{$state});
  351. --fc-button-hover-bg-color: var(--#{$prefix}#{$state});
  352. --fc-button-hover-border-color: var(--#{$prefix}#{$state});
  353. &:hover,
  354. &.fc-button-active {
  355. --fc-button-text-color: var(--#{$prefix}#{$state}-contrast);
  356. }
  357. }
  358. }
  359. }
  360. /* scss-docs-end calendar-modifiers */