loomio/loomio

//= depend_on "_variables.scss.erb"
@import 'variables';

.icon { width: 50px; vertical-align: top }
.light-discussion .icon img { width: 40px }
.light-discussion .activity-icon img{ width: 18px; height: 18px; margin-left: 22px;}
.light-discussion .description {margin-bottom: 1em;}
.activity-feed {margin-top: 1em;}
.light-proposal .icon img { width: 50px; padding-top: 10px }

table.stats-table {
  text-align: center;
}
table.stats-table th { font-weight: bold; color: #666; }

.content { width: 550px }
.light-discussion { width: 600px; margin-bottom: 3em;}
.light-proposal {margin-bottom: 2em;}
.motion-pie { float: right }
.footer { font-size: 12px; color: #666; }
img { max-width: 500px; height: auto }
img.emojione { width: 25px; vertical-align: bottom; }
body { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.mailer-tag {
  font-size: small;
  border: 1px solid #90CAF9;
  border-radius: 16px;
  padding: 4px 8px;
}

.mailer__header {
  text-align: center;
}

.mailer__header-logo-image {
  margin: 25px 0 20px 0;
  max-height: 48px;
  max-width: 400px;
  width: auto;
  height: auto;
}

.mailer__header-logo {
  margin: 0 10px;
}

.poll-meeting-chart__meeting-time {
  font-family: monospace;
}

pre {
  margin: 0;
  border: 0;
  font-weight: 400;
}

.base-mailer__avatar-initials {
  margin: 2px auto;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  font-size: 12px;
}

.base-mailer__avatar-image {
  border-radius: 50%;
  object-fit: cover;
}

.base-mailer__button {
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin: 16px;
  text-decoration: none;
  white-space: nowrap;
}

mark { color: #000; padding: 0.2em 0.3em; }
mark[data-color=red] { background-color: #EF5350; }
mark[data-color=pink] { background-color: #f48fb1; }
mark[data-color=purple] { background-color: #ce93d8; }
mark[data-color=blue] { background-color: #90CAF9; }
mark[data-color=green] { background-color: #A5D6A7; }
mark[data-color=yellow] { background-color: #fff59d; }
mark[data-color=orange] { background-color: #ffcc80; }
mark[data-color=brown] { background-color: #bcaaa4; }
mark[data-color=grey] { background-color: #e0e0e0; }

.base-mailer__button--primary {
  background-color: $primary-color;
  color: $text-on-primary-color;
}

.base-mailer__button--accent {
  background-color: $accent-color;
  color: $text-on-accent-color;
}

.user-mailer__start-decision-button {
  display: inline-block;
  padding: 12px 30px;
  min-width: 150px;
}

.invite-people-mailer__value-proposition {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 30px 0 0;
}

.invite-people-mailer__heart-icon {
  width: 30px;
}

.thread-mailer__list {
  padding: 0px;
  margin-top: 0px;
}

.thread-mailer__list-item {
  list-style-type: none;
  margin-left: 0px;
}

ul[data-type='taskList'] {
  list-style-type: none;
  padding-left: 16px
}

li[data-type='taskItem'] p {
  display: inline-block;
}

li[data-type='taskItem'] div {
  display: inline-block;
}

.email-checkbox {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 14px;
}

.thread-mailer__avatar-initials {
  margin-right: 10px;
  float: left;
  border: 1px solid #dcdcdc;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  width: 30px;
  height: 30px;
}

.thread-mailer__avatar-image {
  margin-right: 10px;
  float: left;
}

.thread-mailer__vote-buttons {
  margin-bottom: 15px;
}

.thread-mailer__vote-button {
  text-align: center;
  padding-right: 10px;
}

.thread-mailer__vote-button img {
  width: 55px;
}

.thread-mailer__vote-button-link {
  text-decoration: none;
}

.thread-mailer__vote-button-verb {
  text-decoration: underline;
}

.thread-mailer__vote {
  margin-bottom: 20px;
}

.thread-mailer__motion-pie-icon {
  float:left;
  margin: 0 10px 0 0;
  width: 50px;
  height: 50px;
}

.thread-mailer__vote-icon {
  float:left;
  margin: 0 10px 0 0;
  width: 24px;
}

.thread-mailer__body img {
  margin-top: 15px;
}

.thread-mailer__attachment-icon {
  vertical-align: -30%;
  margin-right: 5px;
}

.thread-mailer__footer {
  clear: both;
  color: #666;
  font-size: small;
}

.thread-mailer__footer-logo{
  height: 24px;
}

.user-mailer__contact-request-context {
  font-size: 14px;
  text-align: left;
  font-style: italic;
}

.user-mailer__contact-request {
  text-align: left;
  padding: 20px 0;
}

.user-mailer__message-container {
  margin: 40px 0;
}

.user-mailer__start-decision-option {
  list-style-type: none;
  margin: 25px 0;
}

.user-mailer__start-decision-helptext {
  margin: 8px 0;
  font-size: 14px;
}

.user-mailer__start-decision-logo {
  width: 20px;
  margin-right: 8px;
  vertical-align: bottom;
}

blockquote {
    background-color: rgba(0, 0, 0, 0.5);
    border-left: 4px solid #000;
}

.user-mailer__code {
  font-size: 36px;
  letter-spacing: 15px;
}


.poll-mailer-common-responses__poll-option {
  border-left: 5px solid;
  padding-left: 10px;
}

.poll-mailer-common__discussion-info {
  margin-top: 20px;
}

.poll-mailer-common__avatar {
  vertical-align: top;
}

.poll-mailer-common-avatar__initials {
  margin-right: 10px;
  border: 1px solid #dcdcdc;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  width: 30px;
  height: 30px;
}

.poll-mailer-common-avatar__image {
  margin-right: 10px;
  width: 30px;
  height: 30px;
  float: left;
}

.poll-mailer-common-footer {
  margin-top: 20px;
  clear: both;
  color: #666;
  font-size: small;
}

.poll-mailer-common-footer__text {
  margin-bottom: 20px;
}

.poll-mailer-count__option-icon {
  width: 18px;
}

.poll-mailer-count__option-icon--small {
  width: 18px;
}

.poll-mailer-proposal__option-icon {
  width: 55px;
}

.poll-mailer-proposal__option-icon--small {
  width: 24px;
}
.poll-mailer-count__poll-options .poll-mailer__poll-option,
.poll-mailer-proposal__poll-options .poll-mailer__poll-option {
  float: left;
  text-align: center;
  margin: 0 5px;
  td { display: block; }
}

.poll-meeting-chart {
  td {
    height: 24px;
    font-size: 0.8rem;
  }
}
.poll-meeting-chart__cell {
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 2px;
}

.poll-meeting-chart__cell--yes {
  background-color: #00D177
}

.poll-meeting-chart__cell--maybe{
  background-color: #F6A82B
}
.poll-mailer-meeting__option-icon {
  width:34px;
}