zhdk/madek

/**
 * ## Links `a`
 *
 * :hover   - Hovered link
 * :active  - Active link
 * .strong  - Enhanced link
 * .weak    - Secondary link
 *
 * Styleguide 3.1

.link,
a
  text-decoration: none
  cursor: pointer
  color: $main-color
  &:hover
    text-decoration: underline

a.strong
  font-weight: bold

a.weak
  color: $mono-strong
  text-decoration: none
  &:hover
    color: $mono-dark
    text-decoration: none

a.disabled
  color: $mono-mid !important

a:active
  color: $mono-strong

/**
 * ## Button `.button`
 *
 * :hover    - Hovered primary button
 * .active   - Active primary button
 * .block    - Primary button that takes the whole width
 * .small    - Small primary button
 * .large    - Large primary button
 * .disabled - Disabled link
 *
 * Styleguide 3.2

.button
  // Support for background gradients in IE9 through SVG
  $experimental-support-for-svg: true
  background-color: $mono-bright
  +background-image(linear-gradient($mono-bright, $mono-weak))
  +border-radius($border-radius-s)
  +box-shadow($lighten 0 1px 0 inset)
  +single-text-shadow(false, 1px, false, false, $lighten-more)
  border: 1px solid $mono-light
  color: $mono-dark
  cursor: pointer
  display: inline-block
  font-size: $font-m
  font-weight: 600
  line-height: $line-height-l
  min-height: 26px
  overflow: hidden
  padding: 0 $space-s
  position: relative
  text-align: center
  text-decoration: none
  white-space: nowrap
  vertical-align: middle
  &:hover
    text-decoration: none

.button:hover
  +background-image(linear-gradient(lighten($mono-bright, 3%), lighten($mono-weak, 3%)))
  +single-text-shadow(false, 1px, false, false, $lighten)
  background-color: lighten($mono-weak, 3%)
  border-color: darken($mono-light, 3%)
  color: $mono-dark

.button:active,
.button.active
  +background-image(linear-gradient(darken($mono-bright, 10%), darken($mono-weak, 10%)))
  +box-shadow($darken 0 1px 3px inset)
  border-color: darken($mono-light, 5%)
  color: $mono-mid
  outline: 0

.button.small
  font-size: $font-xs
  line-height: $line-height-s
  min-height: 18px
  padding-left: $space-x
  padding-right: $space-x

.button.normal
  font-size: $font-m
  line-height: $line-height-l
  min-height: 26px
  padding-left: $space-s
  padding-right: $space-s

.button.large
  font-size: $font-xl
  line-height: $line-height-xl
  min-height: 37px

.button.disabled,
.button.disabled:hover
  +background-image(linear-gradient(darken($mono-bright, 10%), darken($mono-weak, 10%)))
  +single-text-shadow(false, 1px, 0, false, $lighten)
  border-color: darken($mono-light, 5%)
  color: $mono-mid
  cursor: default
  &:active
    +box-shadow(none)

/* Icons within buttons
 *-----------------------------------------

.button i
  top: 2px
  position: relative

.button:active i,
.button.active i,
.button.disabled i
  opacity: 0.5

.button.small i

.button i.small
  top: 2px

.button.large i
  top: 1px

.button .stand-alone
  margin-left: $space-x
  margin-right: -3px
  position: relative
  padding-left: $space-x
  top: 2px
  &:after
    +position-top-left(0, -1px)
    bottom: 0
    content: " "
    display: block
    border-left: 1px solid $darken
    border-left: 1px solid $darken
    height: 100%
    z-index: 3
    background: $mono-light
.primary-button .stand-alone
  &:after
    border-left: 1px solid (darken($main-color, 5%)) // Extended buttons (most commonly featuring a dropdown icon)

.button.block i.stand-alone
  +position-top-right(50%, $space-x)
  display: inline-block
  margin: -8px 0 0 // must be equal to half of icons's size

/* Full width buttons
 *-----------------------------------------

.button.block
  display: block
  padding-left: 0
  padding-right: 0
  width: 100%
  // Explicit width for <button> elements

/**
 * ## Primary Button `.primary-button`
 *
 * :hover    - Hovered primary button
 * .active   - Active primary button
 * .block    - Primary button that takes the whole width
 * .small    - Small primary button
 * .large    - Large primary button
 *
 * Styleguide 3.3

.primary-button
  @extend .button
  +background-image(linear-gradient($main-color-light, $main-color))
  +single-text-shadow(false, 1px, 0, false, $darken)
  background-color: $main-color
  border: 1px solid $main-color-dark
  color: darken($white, 5%)

// Hover state
.primary-button:hover
  +background-image(linear-gradient(lighten($main-color-light, 3%), lighten($main-color, 3%)))
  +single-text-shadow(false, 1px, 0, false, $darken)
  background-color: lighten($main-color, 3%)
  border-color: darken($main-color-dark, 3%)
  color: $white

// Active state
.primary-button:active,
.primary-button.active
  +box-shadow($darken 0 1px 3px inset)
  +background-image(linear-gradient(darken($main-color-light, 10%), darken($main-color, 10%)))
  +single-text-shadow(false, -1px, 0, false, $darken)
  border-color: darken($main-color-dark, 5%)
  color: darken($white, 20%)
  outline: 0

.primary-button i
  @extend .bright

/**
 * ## Tertiary Buttons `.tertiary-button`
 *
 * :hover   - Hovered tag button
 * :active  - Active tag button
 * .block   - Tertiary button that takes the whole width
 * .small   - Small tertiary button
 * .large   - Large tertiary button
 *
 * Styleguide 3.4

.tertiary-button
  @extend .button
  +background-image(linear-gradient($mono-mid, $mono-strong))
  +single-text-shadow(false, 1px, 0, false, $darken)
  background-color: $mono-strong
  border: 1px solid $mono-dark
  color: $mono-bright

.tertiary-button:hover
  +background-image(linear-gradient(lighten($mono-mid, 3%), lighten($mono-strong, 3%)))
  +single-text-shadow(false, 1px, 0, false, $darken)
  background-color: lighten($mono-strong, 3%)
  border: 1px solid darken($mono-dark, 5%)
  color: $white

.tertiary-button:active,
.tertiary-button.active
  +background-image(linear-gradient(darken($mono-strong, 10%), darken($mono-dark, 10%)))
  +box-shadow($darken 0 1px 3px inset)
  +single-text-shadow(false, -1px, 0, false, $darken-more)
  border: 1px solid $black
  color: $white

.tertiary-button:active
  color: $mono-mid