Contents

// Customization of foundation's buttons.
// They can not be done directly with configuration variables.
// Instead of a flag background color, we use a sublte gradient
// The colors are based on the $primary-color
$light-primary: lighten($primary-color, $button-function-factor)
$dark-primary: darken($primary-color, $button-function-factor)
$light-secondary: lighten($secondary-color, $button-function-factor)
$dark-secondary: darken($secondary-color, $button-function-factor)

button, .button
  @include background(linear-gradient($primary-color, $dark-primary))
  box-shadow: none

  &:active, &:focus, &:hover
    @include background(linear-gradient($light-primary, $primary-color))

  // custom mix of inline and pre/post fix classes so the button
  // does not take full width but still has the same height as form elements
  &.inline-prefix,
  &.inline-postfix
    @include button-size
    @include prefix-postfix-base
    width: auto

  &:disabled,
  &.disabled,
  &[disabled=disabled]
    background-image: none
    @include button-style(#bfbfbf, $disabled:true)

  &.secondary
    @include background(linear-gradient($secondary-color, $dark-secondary))

    &, &.disabled
      color: #171717

    &:active, &:focus, &:hover
      color: #171717
      @include background(linear-gradient($light-secondary, $secondary-color))

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
reimagine2-2.0.28	app/assets/stylesheets/reimagine2/foundation/extensions/_buttons.sass