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

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

A better view

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.

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.