@mixin pivotal_button_primary
+pivotal_button background-color: $pivotal_blue +box-shadow(0 2px 0 0 darken($pivotal_blue, 10%)) &:visited color: white &:hover background-color: darken($pivotal_blue,10%) +box-shadow(0 2px 0 0 darken($pivotal_blue, 20%)) &:active background-color: darken($pivotal_blue,15%) +box-shadow(0 2px 0 0 darken($pivotal_blue, 20%), 0 1px 2px rgba(0,0,0,.45) inset)
@mixin pivotal_button_danger
+pivotal_button background-color: $pivotal_red +box-shadow(0 2px 0 0 darken($pivotal_red, 10%)) &:visited color: white &:hover background-color: darken($pivotal_red,10%) +box-shadow(0 2px 0 0 darken($pivotal_red, 20%)) &:active background-color: darken($pivotal_red,15%) +box-shadow(0 2px 0 0 darken($pivotal_red, 20%), 0 1px 2px rgba(0,0,0,.45) inset)
@mixin pivotal_button
background-color: lighten($pivotal_dark_grey, 25%) color: white border: none font-family: $pivotal_font_family font-size: 12px padding: .5em .75em text-align: center text-decoration: none -webkit-font-smoothing: antialiased +single-transition(all, 400ms, cubic-bezier(0.19, 1, 0.22, 1)) +box-shadow(0 2px 0 0 $pivotal_dark_grey) &:visited color: white &:hover background-color: lighten($pivotal_dark_grey, 10%) +box-shadow(0 2px 0 0 darken($pivotal_dark_grey, 10%)) color: white text-decoration: none &:active background-color: $pivotal_dark_grey color: white text-decoration: none +box-shadow(0 2px 0 0 darken($pivotal_dark_grey, 10%), 0 1px 2px rgba(0,0,0,.45) inset)
@mixin pivotal_button_primary–large
// this should be depricated. Mix in the primary button and the large button if you want this style. background-color: $pivotal_blue color: white border: none font-family: $pivotal_font_family +pivotal_button--large text-align: center -webkit-font-smoothing: antialiased +single-transition(all, 400ms, cubic-bezier(0.19, 1, 0.22, 1)) +box-shadow(0 2px 0 0 darken($pivotal_blue, 10%)) &:visited color: white &:hover background-color: darken($pivotal_blue,10%) +box-shadow(0 2px 0 0 darken($pivotal_blue, 20%)) &:active background-color: darken($pivotal_blue,15%) +box-shadow(0 2px 0 0 darken($pivotal_blue, 20%), 0 1px 2px rgba(0,0,0,.45) inset)
@mixin pivotal_button–large
font-size: 16px padding: 1em 1.5em