application.css.scss

@import "bourbon";
@import "neat";
@import "set";

main {
  @include outer-container;
  padding: 1rem;
}

.is-hidden { display: none; }

.collect--getStarted a {
  @include buttonesque;

  margin: 1rem auto;
}

input.collect--submit {
  @include buttonesque;

  margin-top: 2rem;
}


header {
  background: $brand-primary;
  padding: 1rem 0;
}

.logo {
  background: url(asset_path('logo.png')) no-repeat center center;
  background-size: contain;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  text-indent: 100%;
  height: 20rem;
  white-space: nowrap;
}

footer {
  margin: 3rem auto;

  li { text-align: center; } //this is gross; I should namespace this
}

.footer-link {
  background: #fff url() no-repeat left center;
  background-size: contain;
  font-size: 1.2rem;
  letter-spacing: 1px;
  margin: 1rem auto;
  padding: 0 0 0 1.75rem;

  &.mail    { }
  &.conduct { }
  &.twitter { }
}

.content {
  background: $white;
  margin: .25rem 0 1rem;
  overflow: auto;
  padding: 1rem;
  width: 100%;
}

.user_nav {
  text-align: right;
}

.blind {
  border-bottom: 5px dashed $yellow;
  clear: both;
  overflow: auto;
  margin: 1rem 0;

  h4 {
    border-bottom: 1px solid $yellow;
    margin-bottom: 1rem;
  }
}

.info {
  clear: both;
  font-weight: 400;
  .required {
    color: $red;
  }
}

/*this is for editing events*/
.input {
  textarea{
    display:block;
    width:100%;
    height:25em;
  }
}

.errors {
  border: 2px solid $red;
  margin: 1rem;
  @include media(790px) {
    @include span-columns(10);
    @include shift(1);
  }
  h4 {
    background: $red;
    color: $white;
    margin: 0;
    padding: .5rem;
  }
  ul {
    padding: .5rem;
  }
  li {
    margin: .25rem 0;
    span { font-weight: 500; }
  }
}

.question {
  @include span-columns(12);
  margin-bottom: 2rem;

  @include media(790px) {
    &.other { @include span-columns(6); @include omega(2n); }
    &.large { @include span-columns(12); }
    &.small { @include span-columns(4.5); }
  }

  label {
    display: block;
    font-weight: 700;
    &.radio {
      font-weight: 300;
      float: left;
      margin: 0 1rem 0 0;
    }
    &.required::before {
      content: "* ";
      color: red;
    }
    input {
      height: auto;
      width: auto;
      margin: 0 .25rem 0 0;
    }
  }

  input {
    width: 100%;
    height: 2rem;
    padding: .25rem;
  }

  textarea {
    height: 10rem;
    width: 100%;
    padding: .25rem;
  }
}

.review_proposal {
  margin: 2rem 0;
  .blind { border: none; }
}

.response {
  @include media(790px) {
    @include span-columns(10);
    @include shift;
  }

  h5 {
    clear: both;
    a {
      font-size: .6rem;
    }
  }

  .value {
    clear: both;
    margin: 1rem;
    &.scrubbed {
      @include pad(1rem);
      border: 2px dashed green;
    }
  }
}

.event_info {
  @include media(790px) {
    @include span-columns(10);
    @include shift(1);
  }

  h3 {
    padding-top: 1rem;
  }

  ol {
    list-style: lower-roman outside;
    margin: 0 5rem 0 3rem;
  }

  .required { color: $red; }
}

.proposal_list {
  h4 { margin: 0 0 1rem; }

  table {
    width: 100%;

    th {
      text-align: left;
      border-bottom: 2px solid $color-text;
      cursor: pointer;

      &:before {
        content: '◆ ';
        font-size: 1rem;
      }

      &.headerSortUp:before {
        content: '▲ ';
        font-size: .75rem;
      }

      &.headerSortDown:before {
        content: '▼ ';
        font-size: .75rem;
      }
    }

    tbody {
      tr:hover { background: #eee; }
      td {
        border-bottom: 1px solid #ccc;
        padding: .5rem .75rem;
      }
    }

    p { margin-bottom: 0; }

  }

  .slug {
    @include type-code;
  }

  .destroy {
    font-style: italic;
  }

  .updated {
    color: #ccc;
  }

  .notes {
    font-style: italic;
  }
}

#notes {
  background: $white;
  position: fixed;
  right: 1rem;
  bottom: 0;
  border: 1px solid #222;
  width: 20rem;
  .submit {
    padding: .25rem;
    overflow: auto;
    background: #ccc;
  }
  h4 {
    background: $yellow;
    cursor: pointer;
    border-bottom: 2px solid #222;
    padding: .25rem;
  }
  textarea {
    width: 100%;
    display: block;
    height: 8rem;
    padding: .25rem;
  }
  input[type=submit] {
    display: block;
    float: right;
  }
  .status {
    float: left;
    width: 50%;
    font-size: .8rem;
    &.saving { color: $yellow; }
    &.error  { color: $red; }
    &.saved  { color: green; }
  }
}

.scrubber {
  @include span-columns(6);
  clear: both;
  display: none;

  &.is-visible { display: block; }

  input {
    @include span-columns(3);
  }
  textarea {
    @include span-columns(12);
  }
}