Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Info

File path:

apq-c3-custom\css\scss\_custom-variables.scss

  • Custom Color Scheme

Code Block
languagesass
// // Custom Colour Scheme 2: Inverse Color Scheme

$navbar-pf-navbar-border-color: $color-pf-black-150 !default;
$apq-c3-name: $color-pf-black-600 !default; 
$apq-c3-name-hover:$color-pf-black-700 !default;
$brand-primary: rgb(219,51,31) !default;                                                
$brand-secondary: white !default;

$btn-primary-bg: darken($brand-primary, 10%) !default;
$btn-primary-border: darken($brand-primary, 20%) !default;

...

  • Background colors

Code Block
languagesass
// // Masthead background colours.
$navbar-pf-bg-color: $brand-secondary !default;
$navbar-pf-bg-color-start: $navbar-pf-bg-color !default;
$navbar-pf-bg-color-stop: $navbar-pf-bg-color !default;

...

  • App top border

Code Block
languagesass
// // Colour of the top border in the page 
$navbar-pf-border-color: $brand-primary !default;

...

  • Appbar colors

Code Block
languagesass
// // Start and stop colour of appbar
$navbar-pf-navbar-primary-bg-color-start: darken($navbar-pf-bg-color, 1.5%) !default;
$navbar-pf-navbar-primary-bg-color-stop: $navbar-pf-bg-color !default;

...

Code Block
languagesass
// // Appbar border colour
$navbar-pf-navbar-border-color: darken($navbar-pf-bg-color, 1.5%) !default;
$navbar-pf-navbar-header-border-color: darken($navbar-pf-bg-color, 1.5%) !default;

...

  • Hover color utility menu

Code Block
languagesass
// // Hover colour of utitity menu at top right of page
$navbar-pf-navbar-utility-hover-bg-color: darken($navbar-pf-bg-color, 10.5%) !default;

...

  • Hover color appbar

Code Block
languagesass
// // Start and stop colour of appbar hovered item
$navbar-pf-navbar-primary-hover-bg-color-start: lighten($navbar-pf-bg-color, 8%) !default;
$navbar-pf-navbar-primary-hover-bg-color-stop: lighten($navbar-pf-bg-color, 2%) !default;

...

  • Top widget boarder

Code Block
languagesass
// // Colour of border on top of widget cards
$card-pf-accented-border-top-color: $navbar-pf-border-color !default;

...

  • Dropdown menu colours

Code Block
languagesass
// // Dropdown menu colours of active and hovered items.
$dropdown-menu-active-border-color: lighten($navbar-pf-border-color, 20%) !default;
$dropdown-menu-active-background-color: lighten($navbar-pf-border-color, 35%) !default;
$dropdown-link-hover-bg: $dropdown-menu-active-background-color !default;
$dropdown-link-hover-border-color: $dropdown-menu-active-background-color !default;
$dropdown-link-active-bg: $navbar-pf-border-color !default;
$dropdown-link-active-border-color: $dropdown-link-active-bg !default;

...