Contents

=button-generator

  /* =button-inverted($inverted-color)
      &--inverted
      background-color: rgba($inverted-color, 0)
      box-shadow: inset 0 0 0 $border-width $inverted-color
      color: $inverted-color
      &:active:enabled, &:focus:enabled, &:hover:enabled
        box-shadow: inset 0 0 0 $border-width darken($inverted-color, 8%), inset 0 -2.25em 0 0 darken($inverted-color, 8%)
        color: $color-inverted */


  .#{$button-name}
    background:
      color: $color-accent
      image: none
    box-shadow: inset 0 0 0 $color-accent
    border: none
    color: dynamic-text-lightness($color-accent)
    cursor: pointer
    display: inline-block
    font-size: 1em
    line-height: $line-height
    padding: $input-padding
    vertical-align: middle
    transition: box-shadow $transition-duration $transition-easing, color $transition-duration $transition-easing
    &:active:enabled, &:focus:enabled, &:hover:enabled
      box-shadow: inset 0 -2.25em 0 darken($color-accent, 8%)
    &--disabled, &:disabled
      cursor: default
      opacity: .5
    // +button-inverted($color-accent)

    $size: 70%
    @each $button-size in small, medium, large
      &--#{$button-size}
        font-size: $size
      $size: $size + 30%


    @each $name, $color in $all-function-colors
      &--#{$name}
        @if lightness($color) > 90%
          $color: darken($color, 5%)
        background-color: $color
        box-shadow: inset 0 0 0 $color
        color: dynamic-text-lightness($color)
        &:active:enabled, &:focus:enabled, &:hover:enabled
          box-shadow: inset 0 -2.25em 0 darken($color, 8%)
        // +button-inverted($color)

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
ceo-0.2.0	app/assets/stylesheets/admin/tools/button-generator.sass