Here is a full list of classes that you can use to style your frontoffice page:
// NAVBAR:
.navbar {
background-color: red;
}
.navbar-default {
border-color: black;
}
.navbar-default .navbar-nav>li>a {
color: white;
&:hover {
color: black;
}
}
// **************************
// BODY
#app {
background-color: white;
}
// **************************
// SETTINGS BAR (WHERE DATE & PAX PICKERS ARE LOCATED)
// normal state of the bar
.settings {
background-color: black;
}
// colour of bar when no date & guests are selected
.settings-alert {
background-color: red;
}
// **************************
// DATE PICKER
// start date text
.DateInput__display-text--focused {
background: red;
border-color: red;
color: white;
}
// selected date in calendar
.CalendarMonth__day--selected-start,
.CalendarMonth__day--selected-end,
.CalendarMonth__day--selected {
background: green;
color: white;
}
// span between selected start and range to cursor
.CalendarMonth__day--hovered-span {
background: purple;
color: white;
}
// span between selected start and selected end date
.CalendarMonth__day--selected-span {
background: yellow;
color: black;
}
// week calendar
.week-calendar .weekday-timeslot .timeslot.active {
&:hover {
background-color: yellow;
color: black;
}
&.selected {
background-color: yellow;
color: black;
}
}
// **************************
// BUTTONS
.btn-success {
background-color: yellow;
border-color: yellow;
color: black;
&:hover {
background-color: black;
border-color: black;
color: white;
}
}
// **************************
// FOOTER
.footer {
background-color: #f9f9f9;
border-top: 1px solid #939292
}