LinkStack/assets/scss/_calendar.scss

189 lines
3.0 KiB
SCSS

// Calendar
.full-calendar {
position: relative;
.fc-header-toolbar {
margin: 30px;
line-height: 0;
@include media-breakpoint-up(xxl) {
margin: 30px 50px;
}
}
.fc-toolbar {
flex-direction: column;
align-items: flex-start;
@include media-breakpoint-up(md) {
flex-flow: wrap;
align-items: center;
}
}
.fc-left {
margin-bottom: 25px;
@include media-breakpoint-up(md) {
margin-bottom: 0;
}
h2 {
color: $dark;
font-size: 1.25125rem;
text-transform: capitalize;
margin-left: 0;
}
}
.fc-view-container {
background-color: $white;
border-radius: 0.25rem;
border: 1px solid #ddd;
margin: 30px;
@include media-breakpoint-up(xxl) {
margin: 30px 50px 50px;
}
}
thead tr {
background-color: transparent;
box-shadow: none;
}
.fc-day-header {
padding: 10px 0;
span {
color: $black;
font-size: 1rem;
}
}
.fc-time,
.fc-title {
color: $white;
}
.fc-day-number {
color: $black;
}
.fc-time {
font-weight: normal;
}
thead tr th:first-child {
border-top-left-radius: 10px;
}
.fc-event {
border: 1px solid transparent;
}
.fc-event, .fc-event-dot {
background-color: $primary;
cursor: pointer;
}
.fc-button-primary {
background-color: $white;
border-color: #ddd;
&:focus {
box-shadow: none !important;
}
&:hover {
background-color: transparent;
border-color: #ddd;
}
}
.fc-icon {
margin-top: -3px;
}
.fc-icon-chevron-left,
.fc-icon-chevron-right {
color: $secondary;
}
.fc-today-button {
color: $white;
background-color: $primary;
border-color: $primary;
text-transform: uppercase;
&:focus {
box-shadow: none !important;
}
&:hover {
color: $primary;
background-color: $white;
border-color: $primary;
}
}
.fc-button:disabled {
opacity: 1;
}
.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active {
background-color: transparent;
border-color: #ddd;
}
.fc td, .fc th {
border: 1px solid transparent;
}
.fc td {
border-right: 1px solid #ddd;
&:last-child {
border-right-color: transparent;
}
}
.fc-row .fc-bg {
border-top: 1px solid #ddd !important;
}
tbody tr {
border-bottom: 1px solid #ddd !important;
}
.fc th {
border: 1px solid #ddd;
}
.fc-past-event {
background-color: #bfbfc3
}
.fc-current-event {
.fc-time,
.fc-title {
font-size: 13px;
}
}
.fc-today {
.fc-day-number {
background-color: $primary;
color: $white;
border-radius: 50%;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
}
}
.fc-datepicker-header {
cursor: pointer;
}
.fc-unthemed td.fc-today {
background-color: rgba($primary, 0.3);
}
.ui-icon {
top: -4px;
left: -7px;
}