Updated Brazos style in v3.17.0+



With Brazos UI 3.17.0, a new style was introduced to update and improve the look of Brazos coaches. In order to achieve this new style, an additional property, border-color, has been added to the Brazos UI Section control's Header css selectors. This change means that Brazos UI users who have customized their color scheme for Brazos UI Sections will want to update their custom CSS to add the border-color property with a value matching the background-color. The specific CSS selectors that have been impacted are detailed below.

How to update existing CSS Customizations

The process to updated your css style is simple. Simply add the border-color property, as highlighted in the example below, with a value matching the corresponding background-color property to the following 4 sections in your CSS: 


.Section .accordion-group .accordion-heading.collapsed {
  background-color: #666666;
  border-color: #666666;

/***Header hover*/
.Section .accordion-group .accordion-heading.collapsed:active,.Section .accordion-group .accordion-heading.collapsed:focus,.Section .accordion-group .accordion-heading.collapsed:hover {
  background-color: #444444;
  border-color: #444444;

/***Header expanded*/
.Section .accordion-group .accordion-heading {
  background-color: #f47920;
  border-color: #f47920;

/***Header expanded hover*/
.Section .accordion-group .accordion-heading:active,.Section .accordion-group .accordion-heading:focus,.Section .accordion-group .accordion-heading:hover {
  background-color: #d6691b;
  border-color: #d6691b;

Alternatively, you can use the CSS Generator included with the Brazos UI Examples Process App to regenerate your custom Brazos UI style sheet.

Have more questions? Submit a request


Powered by Zendesk