Y-SLD/assets/playkit/examples/scss/apps/calendar.scss

157 lines
2.4 KiB
SCSS
Raw Permalink Normal View History

2024-03-01 11:23:55 +00:00
@import 'base';
.calendar-panel {
margin-bottom: 3rem;
}
.fullcalendar,
#fullcalendar{
margin-bottom: 24px;
background: #fff;
padding: 24px 16px;
@include box-shadow;
}
.fc th.fc-day-header{
color: $brand-success;
padding: 12px 0;
border: none;
text-align: left;
font-size: 14px;
font-weight: 500;
}
.fc .fc-row.ui-widget-header,
.fc .fc-row.fc-week.ui-widget-content {
margin-right: 0 !important;
border-width: 0 !important;
}
.fc-day{
background-color: #fff;
}
.fc-basic-view .fc-day-number{
font-size: 16px;
color: gray;
padding-top: 8px !important;
padding-right: 16px !important;
display: none;
}
.fc-head > tr > td {
border: none;
}
.fc th, .fc td{
border-color: $border-color-default;
}
/* fullCalendar toolbar */
.fc-toolbar{
margin-bottom: 24px;
}
.fc-toolbar .fc-center h2{
font-size: 16px;
}
.fc-toolbar .ui-button{
border: none;
box-shadow: 0 0 2px #ccc;
background: #fff;
color: #6a6c6f;
height: 35px;
border-radius: 2px;
}
.fc-toolbar .ui-button:hover{
background: $body-bg;
}
.fc-toolbar .ui-state-disabled{
color: #ccc;
box-shadow: none;
border: 1px solid #eee;
}
.fc-toolbar .ui-state-disabled:hover{
background: #fff;
}
.fc-today-button{
width: 70px;
}
/* Event Styling*/
.fc-content-skeleton .fc-event-container{
padding: 12px;
}
.fc-event-container .fc-event{
padding: .5rem;
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
border-radius: 2px;
border: none;
color: #fff !important;
}
.external-events-wrap {
border: 1px solid $border-color-default;
padding: 1rem;
border-radius: $border-radius;
}
// darggable-events
.external-events{
display: flex;
flex-flow: row wrap;
.external-event {
flex-grow: 1;
flex-basis: 20%;
margin-right: 1.5rem;
color: #fff;
width: 100%;
padding: 8px 16px;
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
border-radius: 2px;
&:nth-child(4n),
&:last-child {
margin-right: 0;
}
&.ui-draggable-dragging{
z-index: 999;
}
cursor: move;
}
@media (max-width: map-get($grid-breakpoints, md)) {
.external-event {
flex-basis: 40%;
&:nth-child(2n) {
margin-right: 0;
}
}
}
@media (max-width: map-get($grid-breakpoints, sm)) {
flex-flow: column nowrap;
}
}
.new_event_cat_form {
.btn {
height: 40px;
}
.form-control {
height: 40px !important;
@media (max-width: map-get($grid-breakpoints, md)) {
margin-bottom: 1rem;
}
}
}