it3s/meppit

@mixin sprite-image($map, $sprite) {
  display: inline-block;
  background: $map no-repeat;
  @include sprite($map, $sprite, true);
}

@mixin modal() {
  display: none;
  min-width: 400px;
  min-height: 200px;
  background-color: $meppit-light-blue;
  border-radius: 8px;
}

@mixin meppit-box-shadow() {
  box-shadow: 1px 1px 3px 1px $medium-grey;
}

@mixin inline-pane($size) {
  display: inline-block;
  margin-left: 20px;
  width: $size;
  vertical-align: top;
}

@mixin button($bg: $ultra-soft-grey, $bg-hover: $grey , $fg: $text-color, $fg-hover: $white, $border: $grey) {
  @include button-color($bg, $fg, $bg-hover, $fg-hover, $border);

  cursor: pointer;
  display: inline-block;
  border: 1px solid $border;
  border-radius: 4px;
  padding: 12px 14px;

  text-decoration: none;
  font-weight: bold;

  &.big {
    vertical-align: bottom;
    border-radius: 12px;
    padding: 0.5em 1em;
  }

  &:active, &:hover {
    text-decoration: none;
  }

  &[disabled], &[disabled]:hover {
    text-decoration: none;
    opacity: 0.6;
    cursor: default;
  }
}

@mixin button-color($bg: $ultra-soft-grey, $fg: $text-color, $bg-hover: "", $fg-hover: "", $border: "") {
  @if $bg-hover == "" { $bg-hover: darken($bg, 10%);  }
  @if $fg-hover == "" { $fg-hover: $fg;              }
  @if $border   == "" { $border: darken($bg, 15%); }

  background-color: $bg;
  color: $fg;
  border-color: $border;

  &:active, &:hover {
    background: $bg-hover;
    color: $fg-hover;
  }

  &[disabled], &[disabled]:hover {
    background: $bg;
    color: $fg;
  }
}

@mixin map-view() {
  clear: both;
  width: 100%;
  margin: 10px 0;

  .map-container {
    width: 100%;
    height: 100%;
    border: 1px solid $grey;
  }

  .map { height: 250px; }
  .placeholder  { max-height: 50px; width: 100%; }
  .overlay-message { margin-top: 20px; }
}