# Vartheme Varbase Bootstrap Paragraphs colors theme.
vbp-colors:
  css:
    theme:
      css/theme/vbp-colors.theme.css: {}
// Background colours;
// -----------------------------------------------------------------------------
// vbp_color_01: Blue
// vbp_color_02: Madison
// vbp_color_03: Dark Gray
// vbp_color_04: Light Gray
// vbp_color_05: Red

@vbp_color_01: #338ec7; // Blue
@vbp_color_02: #2c3e50; // Madison
@vbp_color_03: #a4a4a4; // Dark Gray
@vbp_color_04: #d3d3d3; // Light Gray
@vbp_color_05: #cc3c2d; // Red

// Foreground colours:
// -----------------------------------------------------------------------------
// vbp_foreground_color_01: White for background vbp_color_01 color.
// vbp_foreground_color_02: White for background vbp_color_02 color.
// vbp_foreground_color_03: White for background vbp_color_03 color.
// vbp_foreground_color_04: Black for background vbp_color_04 color.
// vbp_foreground_color_05: White for background vbp_color_05 color.

@vbp_foreground_color_01: #ffffff; // White
@vbp_foreground_color_02: #ffffff; // White
@vbp_foreground_color_03: #ffffff; // White
@vbp_foreground_color_04: #000000; // Black
@vbp_foreground_color_05: #ffffff; // White

.vbp_color_01 {
  background-color: @vbp_color_01;
  color: @vbp_foreground_color_01;
  
  a {
    color: @vbp_foreground_color_01;
    
    &:hover,
    &:focus,
    &:active,
    &.is-active {
      color: @vbp_foreground_color_01;
    }
  }
}
.vbp_color_02 {
  background-color: @vbp_color_02;
  color: @vbp_foreground_color_02;
  
  a {
    color: @vbp_foreground_color_02;
    
    &:hover,
    &:focus,
    &:active,
    &.is-active {
      color: @vbp_foreground_color_02;
    }
  }
}
.vbp_color_03 {
  background-color: @vbp_color_03;
  color: @vbp_foreground_color_03;
  
  a {
    color: @vbp_foreground_color_03;
    
    &:hover,
    &:focus,
    &:active,
    &.is-active {
      color: @vbp_foreground_color_03;
    }
  }
}
.vbp_color_04 {
  background-color: @vbp_color_04;
  color: @vbp_foreground_color_04;
  
  a {
    color: @vbp_foreground_color_04;
    
    &:hover,
    &:focus,
    &:active,
    &.is-active {
      color: @vbp_foreground_color_04;
    }
  }
}
.vbp_color_05 {
  background-color: @vbp_color_05;
  color: @vbp_foreground_color_05;
  
  a {
    color: @vbp_foreground_color_05;
    
    &:hover,
    &:focus,
    &:active,
    &.is-active {
      color: @vbp_foreground_color_05;
    }
  }
}

Comments

RajabNatshah created an issue. See original summary.

  • RajabNatshah committed 7772c60 on 8.x-5.x
    Issue #2987365: Changed [Vartheme][vbp-colors] paragraphs colors to use...
rajab natshah’s picture

Assigned: rajab natshah » mohammed j. razem
Issue summary: View changes
Status: Active » Needs review
Issue tags: +varbase-8.5.0-alpha4
rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
rajab natshah’s picture

Status: Needs review » Fixed
rajab natshah’s picture

Status: Fixed » Closed (fixed)
rajab natshah’s picture

Title: Changed [Vartheme][vbp-colors] paragraphs colors to use background-color » Change [Vartheme][vbp-colors] paragraphs colors to use background-color