mixings.scss

gistfile1.txt

@mixin clickable_div{
  position: relative;
  text-align: center;
  a{
    text-decoration: none;
    color: #fff;
    span{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }
}

@mixin color_fill($color){
  .right{
    background-color: $color;
    input{
      background-color: $color;
    }
  }
}

@mixin input_hint_img($position){
  .left{
    background-position: $position;
  }
}

@mixin blue_button($width, $height){
  width: $width;
  height: $height;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  background: url('blue-button.png') 0 0 repeat-x;
  color: #fff;
  border: 1px #57a7d1 solid;
  line-height: 30px;
  font-family: Arial;
  font-style: italic;
  font-size: 12px;
  cursor: pointer;
  @include clickable_div;

  &:hover{
    background-position: 0 -30px;
  }

  &:active{
    background-position: 0 -60px;
  }

  a span{
    line-height: $height;
  }
}

@mixin load_more_button($width, $height){
  background: url("load_more_bg.png") 0 0 repeat-x;
  //height: 32px;
  //width: 107px;
  height: $height;
  width: $width;
  line-height: 32px;
  text-align: center;
  font-family: Arial;
  font-size: 15px;
  font-style: italic;
  color: #566267;
  border-left: 1px #cad2d2 solid;
  border-right: 1px #cad2d2 solid;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  margin: 23px 0 0 0;
  cursor: pointer;

  &:hover{
    background-position: 0 -32px;
  }

  &:active{
    background-position: 0 -64px;
  }
}

@mixin hoverable_box($width, $top, $left){

  position: relative;

  .user_hover_hint_wrapper{
    display: none;
    top: $top;
    left: $left;
    border: 1px #DADADA solid;
    z-index: 2;
    background-color: #fff;
    position: absolute;
    padding: 0px 10px;
    width: $width;

    -moz-box-shadow: 4px 0px 17px -1px #CCC;
    -webkit-box-shadow: 4px 0px 17px -1px #CCC;
    box-shadow: 4px 0px 17px -1px #CCC;

    .user_hover_hint{
      background: url('papersheet-bg.png') #fff;
      padding: 7px 10px 11px 10px;

      .hover_hint_left, .hover_hint_right{
        float: left;
        font: {
          family: Arial;
          size: 13px;
        }
        line-height: 30px;
        color: #666;
      }

      .hover_hint_left{
        width: 39px;
        text-align: right;
        padding-right: 11px;
      }

      .hover_hint_right{
        color: #2750AC;
        width: 179px;
        overflow: hidden;
      }
    }
  }

  &:hover .user_hover_hint_wrapper{
    display: block;
  }
}

@mixin lesson_button($bg_image, $border_color, $width){
  cursor: pointer;
  float: left;
  width: $width;
  height: 29px;
  @include clickable_div;
  //margin: 0 20px 14px 33px;
  margin-top: 10px;
  line-height: 28px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;

  background-image: url($bg_image);
  border: 1px $border_color solid;

  &:hover{
    background-position: 0 -29px;
  }

  &:active{
    background-position: 0 -58px;
  }
}