Contents

// =============
// EDGE BUTTON
// =============

$button-color: $main-color !default;

// ---------------
// BUTTON :hover
// ---------------
@mixin button-hover($color) {
  &:hover {
    // Darken background if background is light
    @if is_light($color) {
      background-color: darken($color, 5%);
    }
    // Lighten background if background is dark
    @else {
      background-color: lighten($color, 5%);
    }
  }
}

// -----------------
// BUTTON :active
// -----------------
@mixin button-active($color) {
  &:active {
    // Make it darker than hover state if background is light
    @if is_light($color) {
      background-color: darken($color, 10%);
    }
    // Darken background if background is dark
    @else {
      background-color: darken($color, 5%);
    }
  }
}

// ---------------
// BUTTON :focus
// ---------------
@mixin button-focus() {
  &:focus {
    outline: none;
  }
}

// -----------------
// BUTTON
//   Create button
// -----------------
@mixin button(
  $color    : $button-color,
  $for-base : false) {
  
  @if $for-base {
    display: inline-block;
    cursor: pointer;
    position: relative;

    border: 1px solid transparent;
    padding: 10px 20px;
    
    font-weight: 700;
  }
  
  background-color: $color;
  color: contrast-color($color, $body-font-color, white, 70%);
  
  @if $for-base {
    @include border-radius($g-radius);
    @include transition($g-transition);
    @include button-focus();
  }

  @include button-hover($color);
  @include button-active($color);
}

@if $include-button and not $external-call {
  
/* ---------------
EDGE Button
--------------- */
button,
.button,
input[type="submit"],
input[type="reset"] {
  @include button($for-base: true);
}

} // $include-button

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
edge_framework-1.1.0	assets/sass/edge/components/_button.scss
edge_framework-1.0.0	assets/sass/edge/components/_button.scss