lemonmade / bigfoot

A jQuery plugin for creating exceptional footnotes.
http://www.bigfootjs.com
MIT License
936 stars 69 forks source link

Button styles not customisable in Sass #35

Closed d13r closed 5 years ago

d13r commented 9 years ago

In https://github.com/lemonmade/bigfoot/blob/master/src/scss/foundation/bigfoot-variables.scss all the $popover- variables have !default at the end, but none of the $button- ones do. As far as I can tell, this means it's not possible to customise them - e.g. this doesn't work:

$button-color: #5f604b;

@import '../../../../bower_components/bigfoot/dist/bigfoot-number.scss';

I replaced them with the following (in bigfoot-number.scss) and it works:

// KEY VARIABLES
// =============================================================================

$button-height:                         0.95em !default;                         // The total height of the button
$button-width:                          auto !default;                           // The total button width (applies only if $button-apply-dimensions is true)
$button-inner-circle-size:              0.25em !default;                         // Total height/width of the ellipsis circles
$button-border-radius:                  0.3em !default;                          // Border radius on the button itself
$button-left-margin:                    0.2em !default;                          // Margin between the button and the text to its left
$button-right-margin:                   0.1em !default;                          // Margin between the button and the text to its right
$button-vertical-adjust:                -0.1em !default;                         // Pushes the buttons along the vertical axis to align it with text as desired
$button-inner-circle-left-margin:       1*$button-inner-circle-size !default;    // Space between the ellipsis circles

$button-color:                          rgb(110, 110, 110) !default;             // Background color of the button
$button-hovered-color:                  $button-color !default;                  // Background color of the button when being hovered
$button-activating-color:               $button-color !default;                  // Background color of the button when being clicked
$button-active-color:                   $button-color !default;                  // Background color of the button when active
$button-standard-opacity:               0.2 !default;                            // Opacity for when the button is just sittin' there
$button-hovered-opacity:                0.5 !default;                            // Opacity for when the button is being hovered over
$button-activating-opacity:             $button-hovered-opacity !default;        // Opacity for when the button is being clicked
$button-active-opacity:                 1 !default;                              // Opacity for when the button is active
$button-active-style-delay:             0.1s !default;                           // Delay before applying .active styles; this can be used to match to the popover activation transition

$button-inner-circle-color:             white !default;                          // Background color of the ellipsis circle
$button-inner-circle-border:            none !default;                           // Border of the ellipsis circle

// OTHER VARIABLES
// =============================================================================

$button-total-padding:              $button-height - $button-inner-circle-size !default;
$button-per-side-padding:           0.5*$button-total-padding !default;
$button-transition-properties:      background-color !default;

Thanks!

lemonmade commented 9 years ago

Thanks for catching this — fix is in a4b7128dbf6aad5d93fa122f67d23595028c3c63.