FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
latepoint
/
lib
/
assets
/
stylesheets
/
admin
Edit File: _quick_availability.scss
.quick-availability-per-day-w .os-availability-prev-w + .ma-day .agent-day-availability-w { .agent-timeslot { .agent-timeslot-label { } &:hover { .agent-timeslot-label { } } } } .quick-availability-per-day-w.side-sub-panel-wrapper { width: 740px; background-color: #fff; z-index: 9999; border-right: 1px solid rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; border-radius: $side-panel-border-radius 0 0 $side-panel-border-radius; .os-form-header { border-top-left-radius: $side-panel-border-radius; } .separate-timeslots-w { display: flex; justify-content: space-between; position: relative; padding-left: 80px; padding-right: 20px; height: 45px; .separate-timeslot { flex-grow: 1; position: relative; .separate-timeslot-tick { position: absolute; display: block; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: $font-size-base * 0.6; text-align: center; color: rgba(0, 0, 0, 0.4); text-transform: uppercase; line-height: 1.4; font-weight: $body-font-weight-bold; strong { display: block; color: rgba(0, 0, 0, 1); font-size: $font-size-base * 0.8; line-height: 1; } } &.with-tick { &:after { display: block; content: ""; position: absolute; width: 1px; left: 50%; height: 4px; bottom: 4px; background-color: rgba(0, 0, 0, 0.2); } } } } .os-form-header { padding: (15px + calc($side-panel-offset/2)) $side-panel-padding-x; display: flex; align-items: center; h2 { } select { display: block; margin-left: 5px; min-height: 28px; } } .latepoint-quick-availability-close { font-size: 18px; color: #333; text-decoration: none; display: block; transition: all 0.6s ease; outline: none; box-shadow: none; z-index: 3; line-height: 1; &:focus { outline: none; } } .ma-month-label { color: $brand-primary; font-size: floor($font-size-base * 1.3); padding: 5px 0px; font-weight: $body-font-weight-bold; margin-bottom: 20px; margin-top: 15px; padding-left: 20px; border-bottom: 2px dotted $brand-primary; position: sticky; top: -5px; background: #fff; z-index: 9; } .ma-day { display: flex; border-bottom: 1px solid #eee; padding: 4px 20px; &:hover { box-shadow: 0px -1px 0px 0px rgba($brand-primary, 0.5); border-bottom-color: rgba($brand-primary, 0.5) !important; .ma-day-number { color: $brand-primary; transform: scale(1.2); } } &.ma-day-number-6, &.ma-day-number-7 { background-color: #f7f7fb; } &.ma-day-number-7 { border-bottom-color: #ddd; } .agent-day-availability-w { flex: 1; margin: 0px; padding: 0px; .agent-timeslot { border-left: 1px solid #fff; border-right: 1px solid #fff; height: 20px; border-radius: $border-radius; &.selected { background-color: #25c765; .agent-timeslot-label { display: block; padding-left: 25px; transition: none; &:before { @include latepointfont_admin("\e904"); position: absolute; left: 5px; font-size: 14px; color: #55ad0d; top: 48%; transform: translateY(-50%); display: block; } } } .agent-timeslot-label { border: 1px solid #000; border-radius: $tooltip-border-radius; left: 50%; top: -2px; transform: translate(-50%, -100%); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), 0px 2px 6px rgba(0, 0, 0, 0.1); .at-sub-value { font-size: $body-font-size-xs; } .at-main-value { font-size: $body-font-size-s; } } } .agent-timeslot-tick { display: none; } .agent-timeslot.with-tick:after { display: none; } } .ma-day-info { flex: 0 0 60px; padding-left: 5px; font-weight: $body-font-weight-bold; .ma-day-number { display: inline-block; vertical-align: middle; transition: all 0.2s ease; } .ma-day-weekday { color: $color-faded; font-size: $font-size-base * 0.7; margin-left: 5px; text-transform: uppercase; letter-spacing: 1px; display: inline-block; vertical-align: middle; } } } .os-availability-days { overflow: auto; height: 100%; padding-bottom: 15px; flex: 1; border-bottom-left-radius: $side-panel-border-radius; } .os-availability-next-w, .os-availability-prev-w { .latepoint-btn { padding: 5px 12px; } } .os-availability-next-w { padding: 5px 20px 0px; } .os-availability-prev-w { padding: 0px 20px 5px; } .os-availability-controls { position: absolute; bottom: 10px; left: -10px; transform: translateX(-100%); a { background-color: rgba(255, 255, 255, 0.6); display: block; padding: 4px 5px; text-decoration: none; color: $body-color; font-size: 16px; & + a { margin-top: 10px; } &:hover { background-color: #fff; color: $brand-primary; } } } } .agent-availability-timeslots-for-period { padding: 10px; .ma-month-label { color: $brand-primary; font-size: floor($font-size-base * 1.3); padding: 10px 0px; font-weight: $body-font-weight-bold; margin-bottom: 10px; margin-top: 10px; padding-left: 20px; border-bottom: 1px dashed $brand-primary; } .ma-day { display: flex; border-bottom: 1px solid #eee; padding: 7px 5px 7px 15px; &:last-child { border-bottom-color: transparent; } &:hover { box-shadow: 0px -1px 0px 0px rgba($brand-primary, 0.5); border-bottom-color: rgba($brand-primary, 0.5) !important; .ma-day-number { color: $brand-primary; transform: scale(1.2); } } &.ma-day-number-6, &.ma-day-number-7 { } &.ma-day-number-7 { } .agent-day-availability-w { flex: 1; margin: 0px; padding: 0px; .agent-timeslot { border-left: 1px solid #fff; border-right: 1px solid #fff; height: 21px; &.selected { background-color: #25c765; } .agent-timeslot-label { border-radius: 0px; left: 0px; top: 0px; transform: translate(0%, -100%); } } .agent-timeslot-tick { display: none; } .agent-timeslot.with-tick:after { display: none; } } .ma-day-info { flex: 0 0 60px; font-weight: $body-font-weight-bold; .ma-day-number { display: inline-block; vertical-align: middle; transition: all 0.2s ease; } .ma-day-weekday { color: $color-faded; font-size: $font-size-base * 0.7; margin-left: 5px; text-transform: uppercase; letter-spacing: 1px; display: inline-block; vertical-align: middle; } } } }
Save
Back