comparison default/assets/scss/components/_fullcalendar.scss @ 0:1d038bc9b3d2 default tip

Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // main: ../style.scss
2
3 /* Fullcalendar
4 ========================*/
5 .custom-fullcalendar {
6 @extend .row;
7 justify-content: flex-end;
8
9 .fc-toolbar {
10 @extend .col-12;
11 height: rem(110);
12 display: flex;
13 align-items: center;
14 justify-content: space-evenly;
15 padding: 0 rem(20);
16 margin-bottom: 0;
17 border-bottom: 1px solid $theme-border-color;
18 .fc-left { order: 0 }
19 .fc-center { order: 1; flex: 1; display: flex; justify-content: center; }
20 .fc-right { order: 2 }
21
22 @include mobile {
23 flex-direction: column;
24 height: auto;
25 padding: rem(20) rem(20);
26
27 .fc-center {
28 margin: em(15) 0;
29 }
30 }
31
32 h2 {
33 font-size: em(30);
34 }
35 .fc-icon {
36 opacity: 0;
37 visibility: hidden;
38 }
39 .fc-next-button::after {
40 content: '\e92a';
41 font-family: 'feather';
42 font-size: em(20);
43 @include position(absolute, 50% 50% null null);
44 transform: translateX(50%) translateY(-50%);
45 color: $text-muted;
46 }
47
48 .fc-prev-button::after {
49 content: '\e929';
50 font-size: em(20);
51 font-family: 'feather';
52 @include position(absolute, 50% 50% null null);
53 transform: translateX(50%) translateY(-50%);
54 color: $text-muted;
55 }
56 .fc-today-button {
57 font-family: $headings-font-family;
58 @include padding( null #{$spacer * 1.25});
59 }
60 }
61
62 .fc-view-container {
63 @extend .col-md-9;
64 border-left: 1px solid $theme-border-color;
65 padding: 0;
66 }
67
68 &-sidebar {
69 top: rem(110);
70 z-index: 2;
71 }
72
73 .fc-button { height: rem(30) }
74
75 .fc-view > table {
76 tbody > tr > td:first-child {
77 border-left: 00;
78 }
79 }
80
81 .fc-other-month {
82 background-image: repeating-linear-gradient(
83 45deg,
84 #f9f9f9,
85 #f9f9f9 8px,
86 transparent 8px,
87 transparent 16px
88 );
89 }
90
91 td,
92 tbody {
93 border-color: $theme-border-color;
94 }
95
96 .fc-week table td {
97 &:first-child {
98 border-left: 0;
99 }
100 &:last-child{
101 border-right: 0;
102 }
103 }
104
105 .fc-view > table > thead td { border-top: 0 }
106
107 .fc-toolbar .fc-button {
108 background: transparent;
109 border-color: rgba($theme-border-color, 0.7);
110 border-radius: 0;
111 padding: em(10) em(10);
112 box-shadow: none;
113 height: auto;
114 z-index: 1;
115 font-family: $headings-font-family;
116 &.fc-state-active {
117 @extend .bg-color-scheme-contrast;
118 color: $color-scheme;
119 }
120 &.fc-state-disabled { opacity: 0.4 }
121 }
122
123 .fc-event {
124 font-size: rem(12);
125 border-radius: 0;
126 @include margin( null 0px 0px);
127 @include padding(em(5,12));
128 text-align: center;
129 color: #fff !important;
130 transition: background 0.3s ease, color 0.3s ease;
131 font-family: $headings-font-family;
132 }
133
134 .fc-widget-header {
135 border-left: 0;
136 border-right: 0;
137 }
138
139 .fc-head .fc-axis,
140 .fc-day-header {
141 font-weight: normal;
142 font-size: em(12);
143 letter-spacing: 0.1em;
144 opacity: 0.6;
145 border: 0;
146 padding: em(20, 12) em(10,12);
147 text-transform: uppercase;
148 a { color: #fff }
149 }
150 .fc-body .fc-axis { background: #eee }
151 .fc-day-top {
152 font-size: 1em;
153 a { color: $body-color }
154 }
155 }
156
157 .fullcalendar-events {
158 .fc-event {
159 background: transparent !important;
160 border: 0 !important;
161 color: $headings-color;
162 cursor: pointer;
163 padding: em(10) em(20);
164 font-size: $font-size-base;
165 font-family: $headings-font-family;
166 display: flex;
167 align-items: center;
168 &:hover{
169 background: $dropdown-link-hover-bg !important;
170 }
171 }
172 .fc-event-text {
173 flex: 1;
174 }
175 i {
176 @include size(em(30));
177 text-align: center;
178 line-height: em(30);
179 border-radius: 3px;
180 margin-right: $spacer * 1.25;
181 background: inherit;
182 }
183 body.rtl & {
184 i {
185 margin-right: 0;
186 margin-left: $spacer * 1.25;
187 }
188 }
189 }