[Back] .weekday-schedules-w {
}
.weekday-schedule-w {
background-color: #fff;
border-bottom: 1px solid rgba(0,0,0,0.05);
&:last-child {
border-bottom: none;
}
&.day-off {
.ws-day-name {
color: #C45252;
&:after{
width: 100%;
}
}
.ws-head {
&:hover {
.ws-day-name {
border-bottom-color: transparent;
}
}
.ws-day-hours {
display: none;
}
.wp-edit-icon {
display: none;
}
}
.weekday-schedule-form {
display: none;
}
}
.ws-head-w {
display: flex;
align-items: center;
justify-content: flex-start;
}
.ws-head {
flex: 1;
margin-left: 15px;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
padding: 15px 0px;
.wp-edit-icon {
font-size: 14px;
color: $brand-primary;
position: absolute;
top: 56%;
right: 0px;
transform: translate(0%, -50%);
}
.os-toggler {
}
&:hover {
.ws-day-name {
border-bottom: 1px solid $body-color;
}
.wp-edit-icon {
}
}
}
.ws-day-name {
color: $body-color;
font-size: floor($font-size-base * 1.2);
font-weight: $body-font-weight-bold;
position: relative;
margin-right: 20px;
border-bottom: 1px solid transparent;
&:after{
width: 0%;
background-color: #C45252;
opacity: 0.7;
height: 2px;
top: 55%;
left: 0px;
position: absolute;
transform: translateY(-50%);
content: "";
display: block;
}
}
.ws-day-hours {
text-align: right;
color: $color-faded;
font-size: floor($font-size-base * 0.8);
font-weight: $body-font-weight-bold;
margin-left: auto;
cursor: pointer;
padding-right: 25px;
span {
display: inline-block;
vertical-align: middle;
&:hover {
color: $brand-primary;
}
}
span + span {
margin-left: 5px;
border-left: 1px solid rgba(0,0,0,0.05);
padding-left: 5px;
}
}
& + .weekday-schedule-w {
}
&.is-editing {
.weekday-schedule-form {
display: block;
}
}
}
.weekday-schedule-form {
padding-bottom: 20px;
padding-top: 5px;
text-align: center;
display: none;
&.active {
display: block;
}
.ws-period-add {
border: 2px dashed #E0E6EB;
display: block;
background-color: #fff;
box-shadow: none;
padding: 5px;
margin: 0px;
color: #738db3;
font-weight: $body-font-weight-bold;
outline: none;
cursor: pointer;
width: 100%;
display: flex;
align-items: center;
position: relative;
border-radius: $form-controls-border-radius;
&:hover {
border-color: $brand-primary;
color: $brand-primary;
}
.add-period-graphic-w {
width: 30px;
height: 30px;
position: relative;
.add-period-plus {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
height: 15px;
width: 15px;
transform: translate(-50%, -50%);
i {
position: absolute;
display: block;
top: 50%;
left: 50%;
font-size: 18px;
transform: translate(-50%, -50%);
}
}
}
.add-period-label {
color: $color-faded;
font-weight: $body-font-weight-bold;
font-size: $font-size-base * 1;
margin-left: 5px;
}
&.os-loading {
.latepoint-icon {
display: none!important;
}
&:after {
display: block;
content: "";
width: 14px;
height: 14px;
border-bottom: 2px solid $brand-primary;
border-left: 2px solid $brand-primary;
border-top: 2px solid $brand-primary;
border-right: 2px solid rgba(255,255,255,0);
border-radius: 20px;
position: absolute;
top: 50%;
left: 20px;
transform: translate(-50%, -50%);
animation: os-loading 700ms infinite linear;
}
}
}
}
.ws-period {
border: 1px solid #E0E6F0;
font-size: $font-size-base * 0.9;
align-items: center;
background-color: #fff;
position: relative;
margin-bottom: 15px;
border-radius: $form-controls-border-radius;
// Style for transparent form groups
&.os-period-transparent {
border: 1px solid #d6d6e1;
border-bottom-color: #aaacb9;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
input {
border: 1px solid #d6d6e2;
background-color: #ffffff;
border-radius: 4px;
min-height: 25px;
}
}
.os-time-group {
padding-right: 5px;
}
.ws-period-remove {
box-shadow: none;
margin: 0px;
padding: 3px;
border-radius: 20px;
border: 1px solid #e46666;
background-color: #fff;
line-height: 1;
text-align: center;
font-size: 10px;
position: absolute;
top: 50%;
left: 0px;
transform: translate(-50%, -50%);
height: 18px;
width: 18px;
cursor: pointer;
color: #e46666;
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:hover {
border-color: lighten(#d25656, 15%);
color: #d25656;
}
}
}
.weekday-schedule-slider {
display: none;
background-color: #F5F6FA;
padding: 30px;
border-radius: $border-radius;
.ws-slider-w {
background-color: #DEE6EF;
height: 6px;
border-radius: $border-radius-sm;
margin-bottom: 10px;
position: relative;
.ws-handle {
width: 10px;
height: 10px;
border-radius: $border-radius;
background-color: $brand-primary;
left: 30%;
top: 50%;
transform: translateY(-50%);
box-shadow: 0px 0px 0px 2px #fff;
position: absolute;
z-index: 2;
}
.ws-handle-trail {
background-color: lighten($brand-primary, 20%);
position: absolute;
top: 0px;
bottom: 0px;
left: 30%;
right: 20%;
z-index: 1;
}
}
.ws-marks {
display: flex;
.ws-mark {
text-align: center;
flex: 1;
color: #8590B3;
font-size: $font-size-base * 0.8;
}
}
}
.latepoint-settings-w {
.weekday-schedules-w {
margin-bottom: 20px;
}
.weekday-schedule-w {
padding: 0px;
}
.weekday-schedule-form {
padding-bottom: 10px;
}
}
.custom-day-year-header {
color: rgba(0,0,0,0.3);
font-size: 52px;
font-weight: $body-font-weight-bold;
margin-bottom: 20px;
margin-top: 0px;
line-height: 1;
text-align: center;
position: relative;
}
.custom-day-work-periods {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
& + .sub-level {
margin-top: 40px;
}
}
.custom-day-work-period {
width: 140px;
flex: 0 0 140px;
text-align: center;
margin: 0px 15px 15px 0px;
position: relative;
transition: all 0.2s ease;
&.is-range {
width: 250px;
flex: 0 0 250px;
}
.custom-day-work-period-i {
position: relative;
padding: 24px 20px;
border: 1px solid $border-color-main;
border-radius: $border-radius-lg;
background-color: #fff;
transition: all 0.2s ease;
&:before {
top: 50%;
left: 0px;
right: 0px;
background-color: rgba(0,0,0,0.05);
height: 1px;
position: absolute;
content: "";
}
}
.custom-day-number {
font-size: 46px;
font-weight: $body-font-weight-bold;
line-height: 1;
margin-bottom: 5px;
color: $brand-primary;
}
.remove-custom-day,
.edit-custom-day {
position: absolute;
top: 0px;
font-size: 14px;
padding: 10px;
text-decoration: none;
line-height: 1;
transition: all 0.2s ease;
opacity: 0;
z-index: 9999;
outline: none;
box-shadow: none;
&.os-loading {
opacity: 1;
color: transparent;
&:after {
@include loading-circle($brand-primary, 15px);
}
}
}
.remove-custom-day {
right: 0px;
color: #d24646;
transform: translateX(-10px);
}
.edit-custom-day {
left: 0px;
transform: translateX(10px);
}
&:hover {
transform: translateY(-5px);
.custom-day-work-period-i {
border-color: darken($border-color-main, 10%);
}
.remove-custom-day,
.edit-custom-day {
transform: translateX(0px);
opacity: 1;
}
}
.custom-day-periods {
padding-top: 10px;
.custom-day-period {
background-color: #f1f4fb;
color: $headings-color;
color: $color-faded;
padding: 4px;
border-radius: $border-radius-xs;
font-weight: $body-font-weight-bold;
font-size: floor($font-size-base * 0.9);
& + .custom-day-period {
margin-top: 10px;
}
}
}
.custom-day-month {
font-size: $font-size-base * 1.2;
line-height: 1;
color: #9DA8D5;
}
&.custom-day-off {
.custom-day-number {
color: #CD4949;
}
.custom-day-month {
color: #CF9797;
}
}
}
.add-custom-day-w {
border: 3px dotted rgba(0,0,0,0.1);
margin-right: 15px;
width: 140px;
flex: 0 0 140px;
text-align: center;
position: relative;
cursor: pointer;
display: block;
outline: none;
box-shadow: none;
min-height: 115px;
border-radius: $border-radius;
.add-custom-day-i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.add-day-graphic-w {
width: 60px;
height: 60px;
position: relative;
margin: 0px auto;
}
.add-day-plus {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
height: 24px;
width: 24px;
background-color: $brand-primary;
box-shadow: 0px 0px 0px 10px rgba(208, 213, 220, 0.3);
color: #fff;
transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(.25,1.4,.5,1.35);
i {
position: absolute;
display: block;
top: 50%;
left: 50%;
font-size: 10px;
transform: translate(-45%, -47%);
transition: all 0.2s ease;
}
}
&:hover {
border-color: $brand-primary;
border-style: solid;
.add-day-plus {
box-shadow: 0px 0px 0px 15px rgba(208, 213, 220, 0.3);
transform: translate(-50%, -50%) scale(1.2);
i {
}
}
.add-day-label {
transform: translateY(5px);
}
}
.add-day-label {
color: $headings-color;
font-weight: $body-font-weight-bold;
font-size: $body-font-size-s;
margin-top: 5px;
white-space: nowrap;
transition: all 0.2s cubic-bezier(.25,1.4,.5,1.35);
}
&.os-loading {
.add-day-plus {
color: rgba(255,255,255,0.4);
&:after {
@include loading-circle($brand-primary, 52px);
}
}
animation:animate_appointment_small_box 0.8s ease infinite;
}
}