CSS variables

We’ve tried to harness the power of CSS variables in our booking flow, so if you want to make simple, general changes, then you can redeclare the CSS variable and see that change applied.

Here’s a non-exhaustive list of some of the CSS variables:

:root {
  --bliss-background: #F9F9F9;
  --bliss-btn__border: #333;

  --bliss-datepicker__background: #fff;

  --bliss-datepicker__cell--available: var(--bliss-datepicker__background);
  --bliss-datepicker__cell--available-hover: hsla(120, 50%, 97%, 1);
  --bliss-datepicker__cell--available-text: #fff;

  --bliss-datepicker__cell--inactive: #fff;
  --bliss-datepicker__cell--inactive-text: hsla(0, 0%, 80%, 1);

  --bliss-datepicker__cell--sold-out: hsla(0, 50%, 85%, 1);
  --bliss-datepicker__cell--sold-out-text: hsla(0, 50%, 50%, 1);
  --bliss-datepicker__color: hsla(0, 0%, 7%, 1);

  --bliss-enquiry__background: #fff;
  --bliss-enquiry__border: #999;
  --bliss-enquiry__border-radius: 5px;

  --bliss-enquiry__padding: 8px 12px;

  --bliss-enquiry__small-text: #999;
  --bliss-enquiry__small-text-font-size: 10px;
  --bliss-enquiry__small-text-letter-spacing: 1px;
  --bliss-enquiry__small-text-margin-bottom: 5px;

  --rates-table__background: #fdfdfd;
}

So, if you wanted to make things a bit more hot pink, you could add the following to your custom CSS file.

:root {
  --bliss-background: #ff0080;
}

You needn’t redeclare any variables you don’t want to change.

Of course, if you’ve sailed the CSS seas for many years, you’re welcome to target any combination of classes and elements to get those just right for your integration.

We’ll certainly do our best to avoid any regression in terms of element naming.