I'm trying to change the color of the topbar in my Rails app. I've modified foundation_and_overrides.scss and can successfully change the main topbar background. But the buttons and links remain in the default black. Here's the relevent section of the file.
Can someone tell me what I am missing?
// My color scheme
$color-1 : #B2E166;
$color-2 : #E5F279;
$color-3 : #99FFFF;
// Background color for the top bar
$topbar-bg-color: $color-3;
$topbar-bg: $topbar-bg-color;
// Height and margin
// $topbar-height: rem-calc(45);
// $topbar-margin-bottom: 0;
// Controlling the styles for the title in the top bar
// $topbar-title-weight: $font-weight-normal;
// $topbar-title-font-size: rem-calc(17);
// Set the link colors and styles for top-level nav
// $topbar-link-color: $white;
// $topbar-link-color-hover: $white;
// $topbar-link-color-active: $white;
// $topbar-link-color-active-hover: $white;
// $topbar-link-weight: $font-weight-normal;
// $topbar-link-font-size: rem-calc(13);
// $topbar-link-hover-lightness: -10%; // Darken by 10%
$topbar-link-bg: $topbar-bg;
// $topbar-link-bg-hover: $jet;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family;
// $topbar-link-text-transform: none;
// $topbar-link-padding: ($topbar-height / 3);
// $topbar-back-link-size: rem-calc(18);
// $topbar-link-dropdown-padding: rem-calc(20);
// $topbar-button-font-size: .75rem;
// $topbar-button-top: 7px;
// Style the top bar dropdown elements
$topbar-dropdown-bg: $topbar-bg;
// $topbar-dropdown-link-color: $white;
// $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
$topbar-dropdown-link-bg: $topbar-bg;
// $topbar-dropdown-link-bg-hover: $jet;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: .4;
// $topbar-dropdown-label-color: $monsoon;
$topbar-dropdown-label-color: $topbar-bg;
// $topbar-dropdown-label-text-transform: uppercase;
// $topbar-dropdown-label-font-weight: $font-weight-bold;
// $topbar-dropdown-label-font-size: rem-calc(10);
// $topbar-dropdown-label-bg: $oil;
UPDATE I edited the Ruby21\lib\ruby\gems\2.1.0\gems\foundation-rails-5.5.2.1\vendor\assets\stylesheets\foundation\components_top-bar.scss file to see what would happen. The bg color of the links changed to white (#FFFFFF). Why does the lib file work and the local file doesn't?
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import 'global';
@import 'grid';
@import 'buttons';
@import 'forms';
//
// Top Bar Variables
//
$include-html-top-bar-classes: $include-html-classes !default;
// Background color for the top bar
$topbar-bg-color: $oil !default;
$topbar-bg: $topbar-bg-color !default;
// Height and margin
$topbar-height: rem-calc(45) !default;
$topbar-margin-bottom: 0 !default;
// Controlling the styles for the title in the top bar
$topbar-title-weight: $font-weight-normal !default;
$topbar-title-font-size: rem-calc(17) !default;
// Set the link colors and styles for top-level nav
$topbar-link-color: $white !default;
$topbar-link-color-hover: $white !default;
$topbar-link-color-active: $white !default;
$topbar-link-color-active-hover: $white !default;
$topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size: rem-calc(13) !default;
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
$topbar-link-bg: #FFFFFF !default;
I figured it out. The problem was in my application.sccs file.
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
@import "foundation_and_overrides";
I removed 'require_tree .' and added 'require foundation_and_overrides'
Here's the file that works:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require foundation_and_overrides
*= require_self
*/
In one of the SCSS file in my tree I had reimported:
@import "foundation/components/buttons";