Mailspring/internal_packages/events/stylesheets/events.less

@import "ui-variables";
@import "ui-mixins";

.event-wrapper {
  cursor: default;
  position: relative;
  font-size: @font-size-small;
  margin-top: @spacing-standard;
  box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.09);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
  border-radius: @border-radius-base;

  .event-header{
    border-bottom: 1px solid lighten(@border-color-divider, 6%);
    padding: 10px;

    img{
      margin-right: 20px;
    }

    .event-title-text{
      color: @text-color-very-subtle;
    }

    .event-title{
      color: @text-color;
    }
  }

  .event-body{
    padding: @padding-small-horizontal;

    .event-date{
      display: inline-block;
      width: 100%;

      .event-day{
        display: block;
        font-size: @font-size-large;
        color: @text-color-alert;
      }

      .event-time{
        display: inline-block;
        font-size: @font-size-h3;
        font-weight: @font-weight-blond;
      }
    }

    .event-actions {
      display: inline-block;
      float: right;

      z-index: 4;
      text-align: center;

      .btn-rsvp {
        float: left;
        padding: @spacing-three-quarters @spacing-sub-double @spacing-three-quarters @spacing-sub-double;
        line-height: 10px;
        color: @text-color;
        border-radius: 3px;
        background: @background-primary;
        box-shadow: @standard-shadow;
        margin: 0 7.5px 0 7.5px;
        &:active {background: transparent;}

        &.no{
          background: @error-color;
          color: @white;
        }

        &.yes{
          background: @success-color;
          color: @white;
        }

        &.maybe{
          background: @gray-light;
          color: @white;
        }
      }
    }
  }
}