diaspora/app/assets/stylesheets/ui.scss

//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
//   licensed under the Affero General Public License version 3 or later.  See
//   the COPYRIGHT file.

@import "_mixins.css.scss";

$button-border-color: #aaa;

.ui-autocomplete {
  left: -11px
}

.button {
  @include button-gradient($light-grey);
  box-shadow: 0 1px 1px #cfcfcf;
  @include transition(border);

  display: inline;

  font: {
    style: normal;
    size: 12px;
  }
  color: #505050;

  padding: 4px 9px;

  min-width: 90px;
  min-height: 10px;

  border: 1px solid $button-border-color;
  border-radius: 3px;

  cursor: pointer;
  white-space: nowrap;

  &:hover {
    @include button-gradient-hover-no-saturation($light-grey);
    color: #505050;
    text-decoration: none;
    border: 1px solid darken($button-border-color,15%);
  }

  &:active {
    @include linear-gradient(#acacac,#808080);
  }

  img {
    position: relative;
    height: 20px;
    width: 20px;
    top: 6px;
  }
}

/* fix for input height */
input.button {
  padding: 3px 9px {
    bottom: 4px
  }
}

.button .selected {
  @include linear-gradient(#f0f0f0,$highlight-white,29%,85%);

  border-top: 1px solid #aaa;
}

.button {
  &.delete {
    color: desaturate($red,10%);
  }

  &.in_aspects {
    @include button-gradient($green);
    &:hover {
      @include button-gradient-hover($green);
    }
  }

  &.creation {
    @include button-gradient($creation-blue);
    color: #fff;

    border: 1px solid darken($button-border-color,20%);

    &:hover {
      @include button-gradient-hover($creation-blue);
      border: 1px solid darken($button-border-color,35%);
    }
  }

  &.red_on_hover {
    &:hover {
      @include button-gradient(#F74427);
      color: #222;
    }
  }
}

.right {
  position: absolute;
  right: 0;
}

.dropdown {
  position: relative;
  display: inline-block;

  .button {
    width: 240px;
  }

  .wrapper {
    box-shadow: 0 2px 5px #666;
    @include transition(opacity);

    display: none;
    z-index: 20;
    position: absolute;
    width: 140px;
    margin-top: 2px;
    background-color: #fff;
    border: 1px solid $border-dark-grey;

    ul {
      @include user-select(none);
      font-size: normal;

      padding: 0 !important;
      margin: 0 !important;
      color: #000;

      > li {
        font-size: 11px !important;
        padding: 6px 2px {
          left: 24px; }
        position: relative;
        color: #222;
        list-style: none !important;

        &.selected {
          background: {
            image: image-url('icons/check_yes_ok.png');
            position: 3px 6px;
            repeat: no-repeat;
          }
        }

        &.selected:hover {
          background: {
            image: image-url('icons/check_yes_ok_white.png');
            position: 3px 4px;
          }
        }

        &.loading {
          background: {
            image: image-url('ajax-loader.gif');
            repeat: no-repeat;
            position: 4px 2px;
          }
        }

        &.loading:hover {
          background: {
            image: image-url('ajax-loader_inverted.gif');
            /* bump top position up 1px to compensate for the 1px added top border */
            position: 4px 1px;
          }
        }

        &.newItem {
          a {
            color: $text-grey;
            font-style: italic;

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

  &.hang_right {
    .wrapper {
      border-radius: 3px 0 3px 3px;
      right: 3px;
    }
  }

  &.hang_left {
    .wrapper {
      border-radius: 0 3px 3px 3px;
      left: 0px;
    }
  }

  .selected {
    font-weight: bold;
  }

  &.active {
    .wrapper {
      display: block;
    }

    .button {
      border-radius: 3px 3px 0 0;
      border: 1px solid #444;
    }

    .button {
      background: #666;
    }

    .button,
    .wrapper ul > li:hover {
      background-color: #666;
      color: #fff;
      text-shadow: none;
    }

    .wrapper ul > li:hover {
      border: {
        top: 1px solid #444;
        bottom: 1px solid #444;
      }
      padding: {
        top: 5px;
        bottom: 5px;
      }

      &.divider {
        padding-bottom: 3px;
      }

      a {
        color: #ccc;
      }
    }

    .wrapper ul > li,
    .wrapper ul > li * {
      cursor: pointer;
    }
  }
}