epri-vtn_custom/app/assets/stylesheets/calendar.css.scss

$pixels-per-minute: 1px;
$date-label-height: 20px;

.week-nav {
  display: block;
  margin: 0px 0px 12px 0px;

  & > * {
    display: inline-block;
  }

  span {
    position: relative;
    top: 3px;
    margin-left: 6px;
    font-size: 1.3em;
  }

  .week-incrementer {
    padding: 1px 10px 3px 10px;
    font-size: 1.2em;
    font-weight: bold;
  }
}

.week {
  font-size: 0px; // Fix to remove width of single space character from between .day elements

  & > * {
    font-size: 1.3rem; // Restore font-size of immediate child (.day) elements
  }
}

fieldset.event-calendar {
  min-width: 850px;
}

.calendar-wrapper {
  margin-top: 30px;
  // margin-bottom: 90px;

  .date-label {
    position: absolute;
    width: 100%;
    top: -$date-label-height;
    height: $date-label-height;
    font-size: 1em;
    color: #333;
    text-align: center;
  }

  .calendar {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: $date-label-height, 0px, 0px, 0px;
    padding: 0px;
    text-align: left;
    overflow: visible;

    .day {
      position: relative;
      display: inline-block;
      height: $pixels-per-minute * 24 * 60;
      width: 12.75%; // 100% / 7, reduced a bit to give "wiggle" room w/o pushing last day to next "row"
      box-sizing: content-box;
      margin: 0px 0px;
      padding: 0px 0px 0px 0px;
      border-right: 1px solid #eee;
      text-align: left;
      // overflow-x: hidden;
      // overflow-y: hidden;
      // background-color: rgba(255, 255, 255, .75);

      transition: all .5s ease;

      &.today {
        background-color: rgba(#ddd, .2);

        .date-label {
          font-weight: bold;
        }
      }

      &.weekday {
        // width: 15%
      }

      &.weekend_day {
        // width: 7%;
      }

      &:first-child {
        margin-left: 3em;
        border-left: 1px solid #eee;
      }
    }

    .hour-grid {
      position: absolute;
      width: 100%;
      background-color: #fff;
      border: 1px solid #ddd;
      border-top: none;

      .current-time-line {
        position: absolute;
        top: 200px;
        width: 100%;
        height: 3px;
        border-top: 1px solid lighten($brand-danger, 25%);
      }

      .hour {
        position: relative;
        height: $pixels-per-minute * 60;
        text-align: left;
        color: #aaa;
        border-top: 1px solid #ededed;

        .hour-label {
          width: 3em;
          margin: 0px;
          padding: 1px 0px;
          font-size: .9em;
          color: #333;
          background-color: #fff;
          text-align: right;
        }

        .half-hour {
          position: absolute;
          bottom: 0px;
          display: block;
          width: 100%;
          height: $pixels-per-minute * 30;
          border-top: 1px dashed #eee;
        }
      }
    }
  }
}


.calendar-event {
  position: absolute;
  display: block;
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 5%;
  background-color: $brand-primary;
  border: 1px solid #fff;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);

  .event-data {
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    border-top: 2px solid rgba(0, 0, 0, .3);
    padding: 2.5%;

    a.link-to-object {
      float: right;
      display: block;
      margin: -2px 0px 0px 0px;

      img {
        width: 14px;
        height: 14px;
        text-decoration: none;
      }
    }

    .market-context {
      // Styles necessary to achieve ellipsis for long strings overrunning their parent's width
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .status {
      display: block;
      width: 100%;
      margin: 0px;
    }
  }

  & > * {
    // display: none;
  }

  &.trimmed_to_fit_beginning {
    // border-top: none;
  }

  &.trimmed_to_fit_end {
    // border-bottom: none;
  }
}