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

}

Did this answer your question?