Search code examples
javascriptcsszurb-foundationzurb-foundation-5

How to control the CSS on an Active/Focused button in Foundation 5

I have created a CMS based on the Foundation 5 front end platform. In it I have created a CSS generator which basically allows for a SASS type control over the entire stylesheet through administration on a live site.

The system works great, however, I cannot find how to control the box shadow style which appears on an active/focused button. This is the code which generates the styles for a focused button in my generator which was taken straight from Foundation Stylesheet:

$code .= 'button:hover, button:focus, .button:hover, .button:focus{';
    $code .= 'background-color: '.changeColor($primary, $primary_hover_percent).';';
    $code .= 'border-color: '.changeColor($primary, $primary_border_percent_hovered).';';
    $code .= 'color: '.$primary_font_color_hovered.';';
    $code .= '}';

By default Foundation applies the Primary Color as a box shadow on a focused button. My problem is I cannot find where this is taking place. As the box shadow property is not in this section of their stylesheet I am assuming that it is controlled by javascript.

I have searched the through the javascript but can't seem to find any code controlling the addition of the box shadow. Though I am sure it is a pretty simple solution, the answer alludes me. any assistance is greatly appreciated.

Sample

enter image description here

The right button is the active/focused button... if you look closely you can see the blue box shadow.

A better view

enter image description here

Update

I have isolated the hexcode for the blue color and have conducted a search for the color on both the stylesheet to no avail and have searched all js files hoping to find an addClass() with a class such as .active and the like to no avail as well. Again, any thoughts on the matter are greatly welcomed.

Solution

  • Learn something new every day...Come to find out this issue had nothing to do with any Foundation 5 code. The Blue shadow was a browser setting in Chrome set on:focus for accessibility reasons. In Firefox the browser applies a dashed border.

    Information concerning this issue can be found here:

    http://outlinenone.com/

    Resolution:

    The CSS Property is: outline

    To resolve the issue I simply added outline-style: none; to the code above.