assemblymade/coderwall

//Variables
$radius: 5px;
$transition-speed: all 0.2s ease-out;

//colors
$light-blue-grey: #bacbd8;
$mid-blue-grey: #6e8597;
$blue-grey: #48494e;

$red: #D75959;
$green: #52b327;
$orange: #f7ab28;
$dark-grey: #343131;
$mid-grey: #6d7174;
$light-grey: #a1a1a1;
$really-light-grey: #f9f9f9;

$new-green: #8cdd7f;

//$light-blue: #3e8dcc;
$light-blue: #358cce;

$level1: #2665ac;
$level2: #42a3d3;

@mixin new-logo {
  width: 210px;
  height: 31px;
  display: block;
  background: image-url("new-home/new-home-logo.png") no-repeat;
  background-size: 210px;

  span {
    display: none;
  }

  &:hover {
    opacity: 0.7;
  }
}

@mixin sign-up-btns {

  .sign-up-btn {
    //background: $new-green;
    background: #f35e39;
    color: white;
    display: block;
    float: left;
    width: 60%;
    padding: 0.8em 0;
    text-align: center;
    font-size: 1.9em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-family: "MuseoSans-100";
    @include border-radius(4px);
  }
  //sign-up-btn

  .join {
    text-align: center;
    color: #fff;
    font-family: "MuseoSans-300";
    font-size: 1.8em;
    line-height: 1.8em;
    margin-bottom: 1em;
  }

  .sign-btns {
    li {
      float: left;
      margin-left: 2em;

      &:first-child {
        margin-left: 0;
      }
    }

    .btn {
      background: #f35e39;
      //background: $light-blue;
      color: #fff;
      display: block;
      float: left;
      //width: 30%;
      padding: 0.8em 1.7em;
      text-align: center;
      font-size: 1.3em;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-family: "MuseoSans-100";
      @include border-radius(4px);

      &:hover {
        background: $dark-grey;
      }

      i.fa {
        font-size: 16px;
        margin-right: 5px;
      }
      //before


    }
    //btn
  }
  //sign-btns

}

@mixin icon-font {
  font-family: 'oli';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-smoothing: antialiased;
}

@mixin border-radius($radius) {
  border-radius: $radius;
}

@mixin subtle-box-shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

//Mixins
@mixin border-radius($radius) {
  border-radius: $radius;
}

@mixin border-radius-top($radius) {
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
}

@mixin border-radius-bottom($radius) {
  border-bottom-left-radius: $radius;
  border-bottom-right-radius: $radius;
}

@mixin transition-all {
  //text smoothing
  //text-shadow: 0 0 0 rgba(0,0,0,0);
  text-rendering: optimizeLegibility;
  font-smoothing: subpixel-antialiased;
  transition: $transition-speed;
}

@mixin text-shadow-one-px {
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
}

@mixin ts-top-black {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 1);
}

@mixin ts-top-blue {
  text-shadow: 0px -1px 0px rgba(32, 90, 135, 0.2);
}

@mixin ts-bottom-white {
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
}

@mixin hiring-ribbon {
  position: absolute;
  z-index: 100;
  width: 76px;
  height: 77px;
  top: -6px;
  right: -5px;
  background: image-url("team/hiring.png") no-repeat;

  span {
    display: none;
  }
}

@mixin blue-btn {
  display: block;
  height: 38px;
  line-height: 38px;
  text-align: center;
  color: #fff;
  font-family: "MuseoSans-500";
  font-size: 1.3em;
  text-transform: uppercase;
  background: #6ab3d9; /* Old browsers */
  background: linear-gradient(top, #6ab3d9 0%, #5cacd5 14%, #3d9cce 37%, #3095ca 51%, #2f95ca 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ab3d9', endColorstr='#2f95ca', GradientType=0); /* IE6-9 */
}

@mixin flat-blue-btn {
  display: block;
  height: 38px;
  line-height: 38px;
  text-align: center;
  color: #fff;
  font-family: "MuseoSans-500";
  font-size: 1.3em;
  text-transform: uppercase;
  background: $light-blue;
}

@mixin grey-btn {
  color: $light-grey;
  display: block;
  height: 27px;
  line-height: 27px;
  text-align: center;
  font-size: 1.4em;
  border: 1px solid #eaeaea;
  background: #ffffff; /* Old browsers */
  background: linear-gradient(top, #ffffff 3%, #e5e5e5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0); /* IE6-9 */
}

@mixin subtle-box-shadow-inset {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

@mixin paper-panel {
  box-shadow: inset 0px 0px 2px 2px #ffffff;
  background: image-url("paper-texture.jpg") repeat;
}

@mixin white-circle {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: solid 2px #fff;
  @include border-radius(100px);
}

@mixin signup-button {
  background: #dbe7f5; /* Old browsers */
  background: linear-gradient(top, #dbe7f5 0%, #f0f5fb 3%, #dae6f6 4%, #d8e4f2 10%, #d5e1ef 23%, #c8d4e2 52%, #afc1d5 87%, #a8bcd4 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbe7f5', endColorstr='#a8bcd4', GradientType=0); /* IE6-9 */
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 1.2em;
  padding: 0 15px;
  text-align: center;
  color: #4f607d;
  text-transform: uppercase;
  text-shadow: 0px 1px 0px #ffffff;
  border-top: 1px solid #f0f5fb;
  font-family: "MuseoSans-500";

}

@mixin protip-sub-button {
  display: inline-block;
  height: 23px;
  line-height: 23px;
  padding-right: 30px;
  color: #dfdfdf;
  text-transform: uppercase;
  float: right;
  font-size: 1.3em;
  @include ts-bottom-white;
  font-family: "MuseoSans-500";
}

@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin small-grey-btn {
  color: #555;
  display: inline-block;
  font-size: 1.2em;
  margin-top: 20px;
  padding: 5px 10px;
  background: #f9f9f9;
  @include border-radius(6px);
}

@mixin follow-team-button {

  &:hover {
    opacity: 0.8;
  }

  &:after {
    content: "Follow";
  }

  &:hover:after {
    content: "Start following";
  }

  &.following:after {
    content: "Following";
  }

  &.following:hover:after {
    content: "Stop following";
  }

}

@mixin blue-tx-shad {
  text-shadow: 0px -1px 0px #115F8B;
}

@mixin tip-grad {
  background: #ffffff; /* Old browsers */
  background: linear-gradient(top, #ffffff 0%, #fefefe 64%, #f5f5f5 86%, #eeeeee 96%, #e3e3e3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e3e3e3', GradientType=0); /* IE6-9 */
}

@mixin small-upvote {
  display: block;
  width: 36px;
  height: 44px;
  background: image-url("protips/small-upvote.png") no-repeat;
  color: #fff;
  line-height: 41px;
  text-align: center;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
  font-family: "MuseoSans-500";
}

@mixin new-signup-button {
  background: rgb(70, 152, 218); /* Old browsers */
  background: linear-gradient(to bottom, rgba(70, 152, 218, 1) 0%, rgba(62, 141, 204, 1) 31%, rgba(54, 127, 185, 1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4698da', endColorstr='#367fb9', GradientType=0); /* IE6-9 */
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 1.4em;
  padding: 0 15px;
  text-align: center;
  border: 2px solid #3e8dcc;
}

@mixin side-box-grad {
  background: rgb(221, 231, 235); /* Old browsers */
  background: linear-gradient(to bottom, rgba(221, 231, 235, 1) 0%, rgba(213, 225, 229, 1) 99%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dde7eb', endColorstr='#d5e1e5', GradientType=0); /* IE6-9 */
}

@mixin cleaner-text {
  text-rendering: optimizeLegibility;
  font-smoothing: subpixel-antialiased;
}

@mixin more-button {
  background: #dfdfdf;
  color: $mid-blue-grey;
  display: block;
  padding: 10px 0;
  vertical-align: middle;
  text-align: center;
  font-size: 1.4em;
  box-shadow: inset 0px 1px 1px 0px rgba(105, 135, 156, 0.4);
}

@mixin more-button-activity {
  background: #e0e0e0;
  color: #a1a1a1;
  display: block;
  padding: 10px 0;
  vertical-align: middle;
  text-align: center;
  font-size: 1.4em;
  box-shadow: inset 0px 1px 1px 0px rgba(105, 135, 156, 0.4);
}

@mixin more-button2 {
  background: $light-blue-grey;
  // color: $blue-grey;
  color: #72757f;
  text-shadow: 0px 1px 0px rgba(225, 225, 225, 1);
  display: block;
  padding: 13px 0 7px 0;
  vertical-align: middle;
  text-align: center;
  font-size: 1.4em;
  box-shadow: inset 0px 1px 1px 0px rgba(105, 135, 156, 0.4);

}

@mixin secondary-notice {
  margin-bottom: 20px;
  padding: 5px 0 5px 30px;
  background: image-url("info-icon-dark-blue.png") no-repeat left;
  @include ts-bottom-white;

  p {
    color: $mid-blue-grey;
    display: inline-block;
    padding-top: 3px;
  }
  a {
    //font-size: 1.4em;
    color: $light-blue;

    &:hover {
      border-bottom: 1px dashed $light-blue;
    }
  }

  li {
    //float: left;
    //margin-left: 20px;

    &:first-child {
      margin: 0;
    }
  }
}

@mixin new-more {
  height: 35px;
  line-height: 35px;
  text-align: center;
  display: block;
  font-size: 1.5em;
  @include border-radius(4px);
  padding: 0 20px;
  background: #aeaeae;
  color: #fff;

  &:hover {
    background: #bacbd8;
  }
}