FileMaster

Edit File: calendar.less

@import "../common/_variables";
@import '~fullcalendar/dist/fullcalendar.min.css';
@import '~fullcalendar-scheduler/dist/scheduler.min.css';
@import "../backend/recurring.less";

.am-ebe {
  display: none;
}

.am-old-time, .am-new-time {
  padding: @padding-small @padding-big;
  display: inline-block;
  border: 1px solid @color-divider-gray;
  margin: @margin-small 0;

@media @less-then-small {
    padding: @padding-small @padding-medium;
  }
}

.am-old-time {
  margin-right: -1px;
  position: relative;

&:after {
    position: absolute;
    z-index: 1;
    top: 16px;
    right: -17px;
    font-family: element-icons !important;
    font-size: 14px;
    content: "\e6e0";
    line-height: 1;
    text-align: left;
    vertical-align: top;
    color: @color-text-second;
    background: #fff;
    border: 1px solid @color-divider-gray;
    border-radius: 50%;
    padding: 8px;
  }
}

#am-calendar {
  .am-page-header {
    .el-row {
      display: flex;
      align-items: center;
      @media @less-then-large {
        display: block;
      }
    }

.el-col {
      @media @less-then-large {
        width: 100%;
        float: none;
        text-align: left;
      }

.align-right {
        @media @less-then-large {
          text-align: left;
        }
      }
    }
  }

.am-section.am-calendar {
    padding-top: @padding-medium - 4px;

.am-spinner {
      position: absolute;
      top: 68px;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      background-color: @color-white;
      opacity: 0.7;

img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        margin: 0;
      }
    }
  }

.am-calendar-scroll {
    position: relative;
    @media @less-then-large {
      overflow: auto;
    }

#calendar.fc {
      min-width: 720px !important;

.fc-view-container {
        min-height: 150px;
      }
    }
  }

//overrides
  .fc-view, .fc-view > table {
    z-index: 10;
  }

.fc-ltr .fc-time-grid .fc-event-container {
    margin: 0;
  }

.fc-agenda-view .fc-day-grid {
    z-index: 1;
  }

.fc-time-grid .fc-event-container {
    z-index: auto;
  }

.fc-time-grid .fc-business-container {
    z-index: 0;
  }

.fc-head {
    line-height: 2.5;
  }

.fc-icon-right-single-arrow:after {
    font-family: element-icons !important;
    content: "\e6e0";
    font-size: 11px;
  }

.fc-icon-left-single-arrow:after {
    font-family: element-icons !important;
    content: "\e6de";
    font-size: 11px;
  }

.fc-toolbar {
    padding: @padding-medium;
    background-color: @color-white;
    margin-bottom: 0;

button {
      background-image: none;
      box-shadow: none;
      background-color: @color-white;
      border-color: @color-divider-gray;
      height: 36px;
      padding: 0 @padding-medium;
      text-transform: capitalize;
    }

.fc-button {
      &:hover, &.fc-state-active {
        color: @color-blue;
        border-color: @color-blue;
      }

&:focus {
        outline: none;
      }
    }

.fc-center {
      position: relative;
      cursor: pointer;
      padding-right: 28px;
      @media @less-then-medium {
        margin-top: @margin-medium;
      }

&.am-datepicker-active {
        &:after {
          transform: rotate(-180deg);
        }
      }

&:after {
        transition: all 0.3s ease;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 4px;
        right: 0;
        //content: url('../../img/calendar.svg');
        //background: url('../../img/calendar.svg') no-repeat center / cover;
        border: 1px solid @color-divider-gray;
        border-radius: 50%;
        background: @color-white;
        font-family: element-icons !important;
        font-size: @small-fs;
        line-height: 1.5;
        content: "\e790";
        cursor: pointer;
        color: @color-text-second;
      }

&:hover {
        &:after {
          background: @color-blue;
          color: @color-white;
        }
      }
    }
  }

.fc-scroller {
    height: auto !important;
    overflow: visible !important;
  }

.fc-timelineWeek-view, .fc-timelineDay-view {
    .fc-scroller {
      overflow: auto !important;
    }
  }

.fc-day-number {
    margin: 4px;
    padding: 5px 6px;

}

td.fc-today {
    background: none;
    //border-color: @color-red;
    .fc-day-number {
      //background-color: @color-blue;
      background-color: #FA2727;
      border-radius: 50%;
      color: @color-white;
      width: 16px;
      text-align: center;
    }
  }

.flexed-between {
    align-items: center;
  }

.fc-timeline {
    .fc-rows {
      padding-bottom: 200px;

.fc-event-container {
        z-index: auto;
        top: 0;
        height: 100% !important;
        padding-bottom: 0;
      }
    }

.fc-event {
      top: 0;
      bottom: 0;

.am-tooltip {
        left: 100%;
        top: 0;
        bottom: auto;
        width: 100%;
        margin-left: 4px;
        text-align: left;

&:after {
          left: 4px;
          bottom: auto;
          top: 10px;
        }
      }
    }
  }
  .fc-day-view,  fc-agendaWeek-view {

}
  .fc-event {
    border: none;
    margin: 0;
    padding: @padding-small;
    box-shadow: inset 0 2px 1px 0 rgba(255,255,255,0.2);

border-radius: 4px;
    overflow: hidden;

.am-tooltip {
      text-align: left;
      border: 1px solid @color-divider-gray;
      background: @color-white;
      bottom: 100%;
      color: #fff;
      display: block;
      left: -3px;
      opacity: 0;
      padding: @padding-medium;
      pointer-events: none;
      position: absolute;
      width: 100%;
      max-width: 320px;
      min-width: 175px;
      z-index: 2000;
      -webkit-transform: translateY(10px);
      -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
      -o-transform: translateY(10px);
      transform: translateY(10px);
      -webkit-transition: all .15s ease-out;
      -moz-transition: all .15s ease-out;
      -ms-transition: all .15s ease-out;
      -o-transition: all .15s ease-out;
      transition: all .15s ease-out;
      -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
      -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);

&:before {
        bottom: -20px;
        content: " ";
        display: block;
        height: 20px;
        left: 0;
        position: absolute;
        width: 100%;
      }

&:after {
        border-left: solid transparent 10px;
        border-right: solid transparent 10px;
        border-top: solid @color-white 10px;
        bottom: -10px;
        content: " ";
        height: 0;
        /*left: 50%;*/
        left: 25px;
        margin-left: -13px;
        position: absolute;
        width: 0;
      }

p {
        color: @color-text-second;
        font-size: @mini-fs;
        margin: 0 0 @margin-small;
      }

h4 {
        color: @color-text-prime;
        font-size: @small-fs;
        margin: 0 0 @margin-small;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;

img {
          width: 18px;
          height: 18px;
          margin-right: @margin-small/2;
          border-radius: 50%;
          vertical-align: sub;
        }
      }

.el-button {
        float: right;
      }

.am-tooltip-color {
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        right: 16px;
        top: 16px;
        border-radius: 3px;
      }

.am-tooltip-address {
        padding-left: 22px;
        position: relative;
        white-space: initial;

&:before {
          width: 18px;
          height: 18px;
          position: absolute;
          top: 1px;
          left: 0px;
          content: url('../../img/location.svg');
        }
      }

.am-calendar-status {
        margin-bottom: 2px;
        width: 16px;
        height: 16px;
        display: block;
        position: absolute;
        right: 16px;
        top: 46px;

&.pending {
          content: url("../../img/pending-payment.svg");
        }

&.approved {
          content: url("../../img/check-circle-green.svg");
        }
      }
    }

&:hover {
      overflow: visible;

.am-tooltip {
        display: block;
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
        text-align: left;
      }
    }
  }

.fc-agendaWeek-view, .fc-agendaDay-view, .fc-day-view, .fc-agenda-view, .fc-timelineWeek-view {
    .fc-event {
      &:hover {
        overflow: visible;
        z-index: 2000 !important;
        //min-height: 80px;
        /*bottom: auto !important;*/

}
    }
  }

.fc-agendaWeek-view, .fc-agendaDay-view, .fc-day-view {
    .fc-event:hover {
      /*min-height: 80px;*/
    }
  }

.fc-content {
    height: 100%;
    color: @color-text-prime;
    white-space: normal;
    position: relative;
    font-size: @mini-fs;
    line-height: 20px;

span {
      display: block;
      font-weight: @regular;
    }

.fc-title, .fc-time, .am-calendar-customer, .am-calendar-employee {
      font-weight: @medium;
      font-size: 12px;
      display: block;
      margin: @margin-small/2 0;
      width: 100%;
      white-space: nowrap;
      overflow: hidden !important;
      text-overflow: ellipsis;
      mix-blend-mode: luminosity;
      color: rgba(0, 0, 0, 0.65);
    }
    .fc-title, .am-calendar-customer {
      font-weight: 600;
      font-size: 12px;
    }

.am-calendar-employee {
      bottom: 8px;
      margin-bottom: 0;

img {
        width: 16px;
        height: 16px;
        margin-right: @margin-small/2;
        border-radius: 50%;
        vertical-align: sub;
      }
    }

.am-calendar-status {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: @margin-small/2;
      vertical-align: text-bottom;

&.pending {
        content: url("../../img/pending-payment.svg");
      }

&.approved {
        content: url("../../img/check-circle-green.svg");
      }
    }
  }

#am-calendar-event-infobox {
    background-color: @color-white;
    box-shadow: #dddddd;
    position: absolute;

span {
      display: block;
    }
  }

.am-calendar-picker {
    opacity: 0;
    z-index: 0;
    font-family: @roboto;
    position: absolute;
    left: 50%;
    top: 55px;
    margin-left: -215px;
    transition: opacity 0.3s;
    background: @color-white !important;
    @media @less-then-medium {
      top: 105px;
      margin-left: 0;
      left: 226px;
    }
  }

.am-calendar-employees {
    overflow-x: auto;
    white-space: nowrap;

.am-calendar-employee {
      transition: all .4s ease-out;
      cursor: pointer;
      position: relative;
      display: inline-block;
      min-width: 80px;
      max-width: 80px;
      overflow: hidden;
      text-align: center;
      padding: 0 @padding-small - 2px;

.am-calendar-employee-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.am-profile-photo {
        margin: 0 auto;
        border: 2px solid transparent;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        max-width: 50px;
        min-width: 50px;
        padding: @padding-small/2;

.am-all {
          border-radius: 50%;
          width: 100%;
          height: 100%;
          background-color: @color-blue;
          display: inline-block;
          vertical-align: middle;
          color: @color-white;
          line-height: 54px;
        }

img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
          display: inline-block;
          vertical-align: middle;
        }
      }

p {
        margin: @margin-small/2 0 @margin-small 0;
        font-size: @mini-fs;
        font-weight: @medium;
        white-space: nowrap;
        overflow-x: hidden;
      }

&:hover, &.active {
        .am-profile-photo {
          transition: border-color 0.4s ease-out;
          border-color: @color-blue;
        }
      }
    }
  }
  .fc-list-item {
    cursor: pointer;
    .am-calendar-list-customer-name {
      margin-left: @margin-big;
    }
    .am-calendar-employee {
      margin-left: @margin-big;
      margin-right: @margin-big;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        border-radius: 50%;
        vertical-align: sub;
      }
    }
    .am-calendar-status {
      width: 12px;
      height: 12px;
      display: inline;
      line-height: 1;

&.pending {
        content: url("../../img/pending-payment.svg");
      }

&.approved {
        content: url("../../img/check-circle-green.svg");
      }
    }
  }

.fc-time-grid-event {
    &.fc-short {
      padding: @padding-small/2;
      .fc-content {
        line-height: 16px;
        .fc-time {
          span {
            display: none;
          }

&:after {
            content: '';
          }
        }

.fc-title {
          /*margin-left: 3px;*/
          display: inline-block;
          width: 69%;
          white-space: nowrap;
          overflow: hidden !important;
          text-overflow: ellipsis;
        }
      }
    }
  }

.fc-nonbusiness {
    background-color: darken(@color-highlight, 3%);
  }
  .fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
    border-color: #F1F3F3;
  }
  .fc-time-grid .fc-slats td {
    height: 3.5em;
  }
  .fc-unthemed .fc-list-empty {
    padding: @padding-medium;
  }

.am-dialog-appointment {
    h3 {
      margin-bottom: 0;
      padding: 0 4px 0 0;
      height: 22px;
      width: fit-content;
      max-width: 95%;
      display: flex;
      align-items: center;
      border-radius: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

&.am-customer-name {
        padding: 0 4px 0 24px;
      }

&.am-no-show {
        &-gray {
          border: 1px solid #D1D5D7;
          background: #FBFBFB;
          &::before {
            content: url("../../img/am-user-single-no-show.svg");
          }
        }
        &-yellow {
          border: 1px solid #F7E4A2;
          background: #FDF9E8;
          &::before {
            content: url("../../img/am-user-double-no-show.svg");
          }
        }
        &-red {
          border: 1px solid #F1A29D;
          background: #FCE8E7;
          &::before {
            content: url("../../img/am-user-multiple-no-show.svg");
          }
        }
      }

&::before {
        height: 24px;
      }
    }
  }
}

Back