common.scss

@import "compass/typography/text/force-wrap";

@import "reset";
@import 'base';

$sansFontFamily: "Source Sans Pro", $sansFontFamily;
$serifFontFamily: "Merriweather", $serifFontFamily;



//ELEMENT STYLES////////////////////////////////
a {
  color: $linkColor;
  &:hover { color: $linkColorHover; }
}

body {
  background-color: $bodyBackground;
  color: $textColor;
  font-smoothing: antialiased;
  line-height: 1.4;
}

p {
  margin: 1em 0;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

em { font-style: italic; }

html {
  font-size: $baseFontSize / 16 * 1em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $sansFontFamily;
  margin: 0 0 .4em;
  padding: 0 0 .1em;
  color: $gray;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1em;
  margin: 0;
}

h4 {
  font-size: 1.25em;
  margin: 0 0 .1em;
}

h5, h6 {
  font-size: 1em;
  margin: 0 0 .1em;
}

input, textarea {
  @include plainform;
}

select {
  @include plainform;
  padding: 0;
  text-decoration: underline;
  border: 0;
  &:focus {
    border: 0;
  }
}

label {
  @extend .visuallyhidden;
}



//MCRANDOM////////////////////////////////
.btn {
  @include sweetbutton;
}

.alert-block {
  span.errorMsgLbl { @extend .visuallyhidden; }
  span.errorMsg { @extend .visuallyhidden; }
}

//Candidate for cleanup
.btn-link {
  @include box-shadow(none);
  @include reset-box-model;
  background: none;
  background-color: transparent;
  text-decoration: underline;
  border: none;
  cursor: pointer;
  color: $linkColor;
  position: static;
  &:hover { color: $linkColorHover; }
}

.red {
  color: $hypothered;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}



//CLOSER////////////////////////////////
.close {
  float: right;
  @include icon("delete_1.png");
  width: 1em;
  height: 1em;
  opacity: .2;

  &:hover {
    cursor: pointer;
    opacity: .4;
  }
}



//FORM RELATED////////////////////////////////
.form-horizontal {
  display: inline-block;
  .controls, .control-group, div, fieldset,
  input, button, select, textarea {
    display: inline-block;
  }
  select, textarea, input, button {
    margin: .5em 0;
  }
}

.form-inline .control-group { margin-bottom: 0; }

.form-vertical {
  select, textarea, input, button {
    margin-top: .75em;
  }
}

.req {
  display: none;
}

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}



//CONTROLS////////////////////////////////
.annotator-controls {
  @include box-shadow(-1em 0 1em 0 #fff);
  background: #fff;
}

a {

  &.write {
    @include linkbutton;
    background-image: url("../images/pen_1.png");
  }

  &.fave {
    @include linkbutton;
    background-image: url("../images/fave_1.png");
  }

  &.flag {
    @include linkbutton;
    background-image: url("../images/flag_1.png");
  }

  &.annotator-save {
    @include linkbutton;
    background-image: url("../images/submit_1.png");
  }

  &.annotator-cancel {
    @include linkbutton;
    background-image: url("../images/delete_1.png");
  }
}



//EXCERPT////////////////////////////////
.excerpt {
  position: relative;
  margin-bottom: 1em;
  blockquote {
    margin-bottom: 0;
  }
  .more, .less {
    font-size: .9em;
    font-family: $sansFontFamily;
    display: block;
    text-align: right;
  }
}

blockquote {
  color: $gray;
  font-family: "Merriweather";
  font-size: 1em;
  margin-bottom: 1em;
  padding: 0 1em;

  &:before {
    color: rgba(150, 150, 150, .5);
    content: "\201C";
    font-family: "PT Serif";
    font-size: 6em;
    position: absolute;
    top: -.2em;
    left: -.15em;
  }

  &:after {
    color: rgba(150, 150, 150, .5);
    content: "\201E";
    font-family: "PT Serif";
    font-size: 5em;
    position: absolute;
    right: -.15em;
    bottom: -.1em;
  }
}



//DROPDOWNS////////////////////////////////
.dropdown {
  position: relative;
  span {
    cursor: pointer;
    &:hover {
      color: black;
    }
  }
}

.dropdown-menu {
  @include rotateX(90deg);
  @include smallshadow;
  background: $white;
  border: solid 1px $grayLighter;
  border-top: 0;
  left: 0;
  float: left;
  opacity: 0;
  pointer-events: none;
  position: absolute;

  li {
    line-height: 1.5;
    margin: .25em .5em;
    border-top: dotted 1px $grayLighter;
    &:hover {
      color: black;
    }
    &:first-child {
      border-top: 0;
    }
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  // Aligns the dropdown menu to right
  &.pull-right {
    right: -1px;
    left: auto;
    text-align: right;
  }
}

.open {
  & > .dropdown-menu {
    @include rotateX(0);
    opacity: 1;
    pointer-events: auto;
  }
}



//TABS////////////////////////////////
.nav-tabs {
  @include pie-clearfix;
  margin: 0 .5em;

  & > li > a {
    cursor: pointer;
    float: left;
    line-height: 1;
    padding: .5em 1em;
    padding-top: .25em;
    margin-right: -.5em;
    margin-bottom: 0px;
    position: relative;
    text-decoration: none;
    @include tabbox;
  }

  & > .active > a {
    @include box-shadow(none);
    color: #333;
    font-weight: bold;
    background: hsla(0, 0%, 100%, 1);
    z-index: 90;
  }
}

.tab-pane {
  background: $bodyBackground;
  border: solid thin $grayLighter;
  display: none;
  margin-top: -1px;  // Pull up and under tabs
  padding: 1em;
  position: relative;

  &.active {
    display: inherit !important;
  }

  footer > ul {
    text-align: right;
  }
}




//PAPER////////////////////////////////
//Provides the white background upon which items sit
.paper {
  @include border-radius(.2em);
  @include smallshadow;
  background: #fff;
  padding: 1em;
}



//ANNOTATION////////////////////////////////
//This is for everything that is formatted as an annotation.
.annotation {

  .user {
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: .25em;
  }

  .time {
    float: right;
    display: inline-block;
    line-height: 2em;
    @include tertiarytext;
  }

  .body {
    @include force-wrap;
  }

  .bottombar {
    @include pie-clearfix;
  }
}



//DETAIL////////////////////////////////
//This is specific to the detail view.
.detail {
  position: relative;
  .paper > .threadexp {
    display: none;
  }

  .annotator-controls {
    @include single-transition(opacity, .25s, ease-in-out);
    opacity: 0;
    position: absolute;
    right: 0;
    z-index: 1;
  }

  .replycount {
    @include tertiarytext;
  }

  .bottombar {
    margin-bottom: .25em;
  }

  //Threaded discussion specific
  .annotator-listing {
    border-left: 1px dotted $grayLight;

    .threadexp {
      height: $threadexp-width;
      width: $threadexp-width;
      position: absolute;
      top: .8em;
      left: -($threadexp-width / 2);
      outline: 1px dotted #aaa;
      @include icon("minus_1.png");
    }

    & > .detail, .writer {
      padding-left: $thread-padding;
      padding-top: .35em;
      &.squished {
        padding-left: 0;
      }
    }
  }

  &.hover {
    & > .annotator-controls {
      opacity: 1;
    }
  }

  //These are all the changes needed to collapse thread objects.
  &.collapsed {
    & > .body {
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      white-space: nowrap;
      font-style: italic;
      margin-top: 0;
      margin-bottom: 0;
    }
    & > .thread { overflow: hidden; }
    & > .user {
      display: run-in;
      margin-right: .25em;
    }
    & > .threadexp {
      background-image: url("../images/plus_1.png");
    }
  }
}



//SUMMARY////////////////////////////////
//This is specific to the summary view.
.summary {
  margin-bottom: 1em;
  position: relative;
  cursor: pointer;

  &:hover {
    @include smallshadow(2px, 3px, .1);
    bottom: 1px;
  }

  &:active {
    @include smallshadow(2px, 1px, .1);
    bottom: 0px;
  }
}



//EDITOR////////////////////////////////
//This is an input element to make annotations.
.writer {
  position: relative;
  padding-left: 1em;

  textarea {
    width: 100%;
    min-height: 8em;
  }

  .bottombar {
    margin-top: .25em;
    .btn {
      margin-right: .5em;
    }
  }
}