Mercurial > nebulaweb3
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 } |