Below is a list of components with common CSS styles for our websites that we want to keep standard. This allows for fast and efficient development of the website, as it eliminates extra coding the programmers need to adjust.

These are already standardized in our master template file to follow these specs, but is useful as a reference for how these styles are connected, in the case that we need to make some adjustments.

@table-header-size; @table-header-weight; @table-header-font-family;
@calendar-header-size; @calendar-header-weight; @calendar-day-size; @calendar-day-weight; 
@mobile-header-font-family; @mobile-header-font-weight; @mobile-header-font-size
@mobile-solid-border; @mobile-header-bg-color; @mobile-header-text-color; @mobile-list-bg-color; @mobile-list-bg-color-active; (hover bg for table and mobile list should be the same)

 
@default-border-color; @table-border-color; @box-background; @table-header-bg; @table-header-color; @table-text-color; 
@small-box-title-size; @small-box-title-weight; @small-box-title-text-transform; @small-box-title-font-family; 
@calendar-header-bg; @calendar-header-color; @calendar-border-color; 

NOTE: @small-box-background (dept widgets) might be different from the table bg and @small-box-border might not be present.

@title-color; @title-size; @title-weight; @title-font-family; @title-transform; 
HP Headings should have the same font-family

 @page-subtitle-color; @page-subtitle-size; @page-subtitle-weight; 

@subtitle-color; @subtitle-size; @subtitle-weight;

@default-text-color; @default-text-size; @default-line-height; @default-font-family; @mobile-header-font-family; @@calendar-day-size;

Homepage Content: Same font-family. Color and size might be different.

@small-box-main-font-family; @small-box-sub-font-size; 
@table-text-size; 
@calendar-time-color;

Important Notice: same text-size and font-family.

@small-box-main-font-size; @sidenav-font-size should be 110% of @small-box-sub-font-size;

@breadcrumb-size; @title-right-size should be 90% of @small-box-sub-font-size;

@default-link-decoration; @default-link-decoration-hover; @default-link-color; @breadcrumb-decoration; @title-right-decoration; 
@table-link-color; @table-link-hover-color; @table-text-hover-color; --> Table Links

@breadcrumb-decoration-hover; @title-right-decoration-hover; --> Breadcrumb and title right links (Font size, share...) will have the same decoration but not the same color.

@calendar-prev-next-color; @calendar-link-color; @mobile-list-link-color; @mobile-list-link-color-active; --> Links for the list in Mobile

@small-box-more-weight; @small-box-more-transform; @small-box-more-arrow; @small-box-more-font-family;

More Widget buttons inherit styles from Homepage More CTA’s but reduced to 60%.

Button width should resize depending on containing text.

@mobile-menu-bg; @mobile-menu-color; @mobile-menu-border; @mobile-menu-color-level2; @mobile-menu-color-level3; 
@mega-dropdown-bg; @mega-dropdown-header-color; @mega-dropdown-color; @mega-dropdown-inner-border; 

Dropdown menu, classic flyout menu should inherit the megamenu style

@mobile-menu-icon-color = Main nav text color

Hamburger bg color = Main nav bg color