| Current File : /home/kelaby89/public_html/wp/wp-content/themes/nexio/skins/default/plugins/booked/old/booked.scss |
/* Booked Appointments styles
----------------------------------------------------------------- */
@import "../../../../../css/_mixins.scss";
@import "../../../../../css/_theme-vars.scss";
@import "../../../css/_skin-vars.scss";
/* Buttons */
body #booked-profile-page input[type="submit"],
body #booked-profile-page input[type="submit"].button-primary,
body #booked-profile-page button,
body .booked-list-view input[type="submit"],
body .booked-list-view input[type="submit"].button-primary,
body .booked-list-view button,
body table.booked-calendar input[type="submit"],
body table.booked-calendar input[type="submit"].button-primary,
body table.booked-calendar button,
body .booked-modal input[type="submit"],
body .booked-modal input[type="submit"].button-primary,
body .booked-modal button {
@include theme_button_filled;
}
body #booked-profile-page .booked-fea-appt-list .appt-block button.button-primary:hover,
.booked-calendar-wrap .booked-calendar .booked-appt-list .timeslot .timeslot-people button:hover,
.booked-calendar-wrap .booked-calendar .booked-appt-list .timeslot .timeslot-people button:focus,
#booked-profile-page .booked-profile-appt-list .appt-block .booked-cal-buttons .google-cal-button > a:hover,
#booked-profile-page .booked-profile-appt-list .appt-block .booked-cal-buttons .google-cal-button > a:focus,
#booked-profile-page input[type="submit"]:hover,
#booked-profile-page input[type="submit"]:focus,
#booked-profile-page input[type="submit"].button-primary:hover,
#booked-profile-page input[type="submit"].button-primary:focus,
#booked-profile-page button:hover,
#booked-profile-page button:focus,
.booked-list-view input[type="submit"]:hover,
.booked-list-view input[type="submit"]:focus,
.booked-list-view input[type="submit"].button-primary:hover,
.booked-list-view input[type="submit"].button-primary:focus,
.booked-list-view button:hover,
.booked-list-view button:focus,
table.booked-calendar input[type="submit"]:hover,
table.booked-calendar input[type="submit"]:focus,
table.booked-calendar input[type="submit"].button-primary:hover,
table.booked-calendar input[type="submit"].button-primary:focus,
table.booked-calendar button:hover,
table.booked-calendar button:focus,
.booked-modal input[type="submit"]:hover,
.booked-modal input[type="submit"]:focus,
.booked-modal input[type="submit"].button-primary:hover,
.booked-modal input[type="submit"].button-primary:focus,
.booked-modal button:hover,
.booked-modal button:focus {
@include theme_button_colors_hover;
}
body #booked-profile-page input[type="submit"].button-primary {
border-color: var(--theme-color-text_link3) !important;
background: var(--theme-color-text_link3) !important;
}
body #booked-profile-page input[type="submit"].button-primary:hover {
border-color: var(--theme-color-text_hover3) !important;
background: var(--theme-color-text_hover3) !important;
}
body #booked-profile-page .booked-profile-appt-list .appt-block .cancel {
margin: 0 !important;
color: var(--theme-color-inverse_hover) !important;
border-color: var(--theme-color-text_dark) !important;
background: var(--theme-color-text_dark) !important;
@include transition(color .3s ease, border-color .3s ease, background-color .3s ease !important);
&:hover {
color: var(--theme-color-inverse_link) !important;
border-color: var(--theme-color-text_link3) !important;
background: var(--theme-color-text_link3) !important;
}
}
body #booked-profile-page input[type="submit"],
body #booked-profile-page input[type="submit"].button-primary{
@include font(15px !important, 20px !important);
padding: 14px 50px !important;
}
body #booked-profile-page .booked-profile-appt-list .appt-block .booked-cal-buttons {
@include flex;
@include flex-align-items(center);
}
body #booked-profile-page .appt-block .booked-cal-buttons .google-cal-button.addeventatc,
body #booked-profile-page .booked-profile-appt-list .appt-block .booked-cal-buttons a {
text-align: center;
@include font(15px !important, 20px !important);
padding: 10px 44px !important;
@include border-radius(30px);
border: none !important;
float: none;
@include box-shadow(none);
}
body #booked-profile-page .appt-block .booked-cal-buttons .google-cal-button.addeventatc,
body #booked-profile-page .appt-block .booked-cal-buttons .google-cal-button.addeventatc:active {
top: 0;
}
body #booked-profile-page .appt-block .booked-cal-buttons .google-cal-button.addeventatc {
color: var(--theme-color-inverse_link) !important;
border-color: var(--theme-color-text_link3) !important;
background: var(--theme-color-text_link3) !important;
@include transition-all(0.3s);
&:hover {
color: var(--theme-color-inverse_link) !important;
border-color: var(--theme-color-text_hover3) !important;
background: var(--theme-color-text_hover3) !important;
}
.addeventatc_icon {
display: none;
}
.addeventatc_dropdown {
margin-top: 0;
border: none;
@include border-radius(15px);
overflow: hidden;
@include box-shadow(0 2px 6px rgba(0,0,0,.15));
}
}
body #booked-profile-page h4:last-child {
margin: 0;
}
/* Text fields */
body #booked-page-form input[type="email"],
body #booked-page-form input[type="text"],
body #booked-page-form input[type="password"],
body #booked-page-form textarea,
.booked-upload-wrap,
.booked-upload-wrap input {
@include theme_field_colors;
}
body #booked-page-form input[type="email"]:focus,
body #booked-page-form input[type="email"].filled,
body #booked-page-form input[type="text"]:focus,
body #booked-page-form input[type="text"].filled,
body #booked-page-form input[type="password"]:focus,
body #booked-page-form input[type="password"].filled,
body #booked-page-form textarea:focus,
body #booked-page-form textarea.filled,
.booked-upload-wrap:hover,
.booked-upload-wrap input:focus,
.booked-upload-wrap input.filled {
@include theme_field_colors_hover;
}
/* Icons fix */
.booked-icon {
padding-left: 1px;
}
/* Calendar */
body table.booked-calendar th {
padding: 1.05rem 0 1.15rem !important;
}
body table.booked-calendar,
body table.booked-calendar thead,
body table.booked-calendar body {
background-color: transparent !important;
}
body table.booked-calendar,
body table.booked-calendar tr {
border-width: 0 !important;
}
body table.booked-calendar tr th,
body table.booked-calendar tr td {
border-width: 1px !important;
border-style: solid !important;
background-color: transparent !important;
@include transition-properties(color, border-color, background-color);
}
table.booked-calendar tr td .date,
table.booked-calendar tr td:hover .date,
table.booked-calendar tr td:hover .date span,
table.booked-calendar tr td.prev-date .date,
table.booked-calendar tr td.prev-date:hover .date,
table.booked-calendar tr td.prev-date:hover .date span,
table.booked-calendar tr td.today .date,
table.booked-calendar tr td.today .date span,
table.booked-calendar tr td.prev-month .date,
table.booked-calendar tr td.prev-month .date span,
table.booked-calendar tr td.next-month .date,
table.booked-calendar tr td.next-month .date span,
table.booked-calendar tr td .booked-appt-list {
color: inherit !important;
background: transparent !important;
}
body table.booked-calendar td:not([colspan="7"]) {
@include border-radius(4px);
&.active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
body table.booked-calendar td .date .number {
@include font(19px, 24px, 500);
@include box(auto, auto, normal);
@include border-radius(0);
@include transition(none);
}
body table.booked-calendar tr.week td.active .date .number {
color: inherit !important;
background: transparent !important;
border: none !important;
}
body table.booked-calendar td.today .date span {
border: none !important;
}
body table.booked-calendar td.today:hover .date span {
background: transparent !important;
color: var(--theme-color-inverse_link) !important;
}
body table.booked-calendar td.today.prev-date .date span,
body table.booked-calendar td.today.next-date .date span {
color: var(--theme-color-inverse_hover) !important;
}
body table.booked-calendar td.today.prev-date:hover .date span,
body table.booked-calendar td.today.next-date:hover .date span {
color: var(--theme-color-inverse_link) !important;
background: transparent !important;
}
body table.booked-calendar tr.days {
color: var(--theme-color-alter_dark) !important;
background: var(--theme-color-alter_bg_color) !important;
}
body table.booked-calendar thead tr.days th {
color: var(--theme-color-alter_dark) !important;
border-color: var(--theme-color-alter_bd_color) !important;
}
body table.booked-calendar tr.days th {
background: transparent !important;
text-transform: uppercase;
letter-spacing: 0;
}
table.booked-calendar thead tr {
background-color: var(--theme-color-text_link2) !important;
}
table.booked-calendar thead tr th:first-child {
border: 1px solid var(--theme-color-text_link2) !important;
}
table.booked-calendar thead tr th {
color: var(--theme-color-inverse_link) !important;
}
table.booked-calendar thead th i {
color: var(--theme-color-inverse_link) !important;
@include transition(opacity .3s ease);
}
body table.booked-calendar thead th .page-right,
body table.booked-calendar thead th .page-left {
@include font(12px, '', 400);
margin-top: -6px;
}
body table.booked-calendar th .page-left,
body table.booked-calendar th .page-left:hover {
left: 20px;
}
body table.booked-calendar th .page-right,
body table.booked-calendar th .page-right:hover {
right: 20px;
}
body table.booked-calendar th .page-left:hover i,
body table.booked-calendar th .page-right:hover i {
opacity: .8;
}
body table.booked-calendar thead th .page-right i:before,
body table.booked-calendar thead th .page-left i:before {
font-family: $theme_icons;
}
body table.booked-calendar thead th .page-left i:before {
content: '\EA07';
}
body table.booked-calendar thead th .page-right i:before {
content: '\E9DF';
}
body table.booked-calendar th .monthName {
@include font(19px, 1rem, 500);
letter-spacing: 0;
}
table.booked-calendar thead th .monthName a {
color: var(--theme-color-inverse_link);
@include transition(opacity .3s ease);
}
table.booked-calendar thead th .monthName a:hover {
color: var(--theme-color-inverse_link);
opacity: .8;
}
table.booked-calendar tbody tr {
background-color: var(--theme-color-bg_color) !important;
}
table.booked-calendar tbody tr td {
color: var(--theme-color-text_light) !important;
border-color: var(--theme-color-bd_color) !important;
}
table.booked-calendar tbody tr td.prev-month,
table.booked-calendar tbody tr td.next-month {
color: var(--theme-color-text_light) !important;
}
table.booked-calendar tbody tr td:not(.prev-date) .date {
color: var(--theme-color-text_dark) !important;
background-color: transparent !important;
@include transition(color .3s ease, background-color .3s ease, border-color .3s ease);
}
table.booked-calendar tbody tr td:not(.prev-date):hover .date {
color: var(--theme-color-inverse_link) !important;
background-color: var(--theme-color-text_link3) !important;
}
body table.booked-calendar tr td.today:not(.prev-date):hover .date,
body table.booked-calendar tr td.active:not(.prev-date) .date {
color: var(--theme-color-inverse_link) !important;
background-color: var(--theme-color-text_link3) !important;
}
body table.booked-calendar tr td.today .date {
color: var(--theme-color-inverse_hover) !important;
background-color: var(--theme-color-text_dark) !important;
}
body table.booked-calendar tr td.today:hover .date {
color: var(--theme-color-inverse_link) !important;
background-color: var(--theme-color-text_link3) !important;
}
body table.booked-calendar tr.entryBlock td {
padding: 0 !important;
}
body table.booked-calendar .booked-appt-list {
padding: 40px 32px;
@include box-shadow(none);
@include border-radius(0);
border: 20px solid var(--theme-color-text_link3);
}
body table.booked-calendar tr.week td.active .date,
body table.booked-calendar tr.week td.active:hover .date,
body table.booked-calendar tr.entryBlock {
background: var(--theme-color-bg_color);
}
body table.booked-calendar tr.entryBlock {
color: var(--theme-color-text);
}
body table.booked-calendar td.booked .date,
body table.booked-calendar td.booked .date span,
body table.booked-calendar td.booked:hover .date,
body table.booked-calendar td.booked:hover .date span {
color: var(--theme-color-alter_dark) !important;
background: var(--theme-color-alter_bg_color) !important;
}
.booked-calendar-wrap .booked-calendar .booked-appt-list h2 {
margin: 0 0 38px;
@include font(24px, 1.2em, 500);
letter-spacing: 0;
text-transform: uppercase;
color: var(--theme-color-text_dark);
strong {
font-weight: inherit;
}
}
body .booked-calendar-wrap {
margin: 0;
.booked-calendar .booked-appt-list .timeslot {
padding: 12px 0;
@include flex;
@include flex-align-items(center);
background: var(--theme-color-bg_color);
border-top: none;
+ .timeslot {
border-top: 1px solid var(--theme-color-bd_color);
}
&:last-child {
margin-bottom: 0;
}
&:hover {
background: var(--theme-color-bg_color);
}
.timeslot-title {
color: var(--theme-color-text_link3);
}
}
.booked-appt-list .timeslot .timeslot-people,
.booked-appt-list .timeslot .timeslot-time,
.booked-appt-list .timeslot.timeslot-count-hidden .timeslot-time {
color: var(--theme-color-text_dark);
padding: 0;
}
.booked-appt-list .timeslot .timeslot-time {
@include font(15px, 19px, 500);
}
.booked-appt-list .timeslot.timeslot-count-hidden .timeslot-people {
height: auto;
padding: 0;
}
.booked-appt-list .timeslot .timeslot-time i:before {
@include font(18px, '', 400);
font-family: $theme_icons;
content: '\EA00';
margin-right: 5px;
}
.booked-appt-list .timeslot .timeslot-time,
.booked-appt-list .timeslot.timeslot-count-hidden .timeslot-time,
.booked-appt-list .timeslot .timeslot-people {
height: auto;
}
.booked-appt-list .timeslot .spots-available {
padding-left: 33px;
padding-bottom: 0;
@include font(15px, 19px, 400);
text-transform: none;
color: var(--theme-color-text);
}
.booked-calendar .booked-appt-list .timeslot .timeslot-people button {
@include font(14px, 21px, 400);
padding: 17px 45px;
color: var(--theme-color-inverse_link) !important;
background: var(--theme-color-text_link3) !important;
border-color: var(--theme-color-text_link3) !important;
.button-timeslot {
font-weight: inherit;
letter-spacing: 0;
}
&:hover {
color: var(--theme-color-inverse_link) !important;
background: var(--theme-color-text_hover3) !important;
border-color: var(--theme-color-text_hover3) !important;
}
}
.booked-appt-list .timeslot .timeslot-people button[disabled],
.booked-appt-list .timeslot .timeslot-people button[disabled]:hover {
color: var(--theme-color-inverse_link) !important;
background: var(--theme-color-text_light) !important;
border-color: var(--theme-color-text_light) !important;
@include box-shadow(none !important);
}
}
/* Calendar Large */
.booked-calendar-wrap.large {
table.booked-calendar tr:not(.entryBlock) td:not(.prev-date),
table.booked-calendar tr.week td.active:not(.prev-date),
table.booked-calendar tr td.today {
overflow: visible;
}
table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):before,
table.booked-calendar tr.week td.active:not(.prev-date):before,
table.booked-calendar tr td.today:before,
table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):after,
table.booked-calendar tr.week td.active:not(.prev-date):after,
table.booked-calendar tr td.today:after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
@include transition(background-color .15s ease-out);
}
table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):before,
table.booked-calendar tr.week td.active:not(.prev-date):before,
table.booked-calendar tr td.today:before {
top: -1px;
bottom: auto;
}
table.booked-calendar tr td.today:before,
table.booked-calendar tr td.today:after {
background-color: var(--theme-color-text_dark) !important;
}
table.booked-calendar tr.week td.active:not(.prev-date):before,
table.booked-calendar tr.week td.active:not(.prev-date):after {
background-color: var(--theme-color-text_link3) !important;
}
table.booked-calendar tr td:not(.prev-date):hover:before,
table.booked-calendar tr td.today:hover:before,
table.booked-calendar tr td:not(.prev-date):hover:after,
table.booked-calendar tr td.today:hover:after {
background-color: var(--theme-color-text_link3) !important;
}
table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):before,
table.booked-calendar tr:not(.entryBlock) td:not(.prev-date):after {
@include transition(background-color .3s ease);
}
}
/* Calendar Small */
body .booked-calendar-wrap.small {
overflow: hidden;
padding: 20px 35px 35px !important;
@include content-box;
margin: 0;
background-color: var(--theme-color-alter_bg_color) !important;
@include border-radius(14px);
.entryBlock .booked-appt-list .timeslot,
.entryBlock .booked-appt-list .timeslot:hover {
background-color: var(--theme-color-alter_bg_color) !important;
}
.booked-appt-list {
max-height: 375px;
border: 7px solid var(--theme-color-alter_link2);
h2 {
@include font(16px, 1.2em);
letter-spacing: 0;
margin: 10px 0 8px;
}
.timeslot {
margin-bottom: 0;
.timeslot-people {
float: none;
button {
@include flex;
@include flex-direction(column);
@include flex-justify-content(center);
@include border-radius(40px);
.button-timeslot {
position: relative;
@include font(15px, 18px, 500);
letter-spacing: 0;
&:before {
font-family: $theme_icons;
content: '\EA00';
@include font(14px, '', 400);
margin-right: 8px;
}
}
}
}
}
.timeslot.timeslot-unavailable button .button-text {
display: block;
}
.timeslot.timeslot-unavailable button .spots-available {
display: none;
}
.timeslot button .spots-available {
padding: 2px 0 3px;
color: var(--theme-color-inverse_link);
opacity: .8;
}
}
table.booked-calendar {
border: none !important;
tbody {
position: relative;
tr {
background-color: var(--theme-color-alter_bg_color) !important;
}
&:before {
line-height:1em;
content:'\200C';
display:block;
}
}
thead .calendarSavingState {
position: relative;
top: 1px;
.booked-icon {
padding: 0;
&:before {
padding: 1px;
}
}
}
td .date {
color: var(--theme-color-alter_light) !important;
border-color: transparent !important;
background-color: transparent !important;
}
td .date,
.date span {
@include transition(color .3s ease, background-color .3s ease, border-color .3s ease);
}
td.booked .date,
td.booked .date span,
td.booked:hover .date,
td.booked:hover .date span {
color: var(--theme-color-text_dark) !important;
background: var(--theme-color-bg_color) !important;
}
td.today.prev-date:not(.booked) .date span,
td.today.next-date:not(.booked) .date span {
color: var(--theme-color-inverse_hover) !important;
}
td.today.prev-date:not(.booked):hover .date span,
td.today.next-date:not(.booked):hover .date span {
color: var(--theme-color-inverse_link) !important;
}
tbody tr td.prev-month .date,
tbody tr td.next-month .date {
color: var(--theme-color-alter_light) !important;
}
tbody tr td:not(.prev-date) .date {
color: var(--theme-color-alter_dark) !important;
background-color: transparent !important;
border-color: transparent !important;;
}
tbody tr td:not(.prev-date):hover .date {
color: var(--theme-color-inverse_link) !important;
background-color: var(--theme-color-alter_link2) !important;
}
tbody tr td.active:not(.prev-date) .date {
color: var(--theme-color-inverse_link) !important;
background-color: var(--theme-color-alter_link2) !important;
}
tbody tr td.today .date {
color: var(--theme-color-inverse_hover) !important;
background-color: var(--theme-color-alter_dark) !important;
}
tbody tr td.today:hover .date {
color: var(--theme-color-inverse_link) !important;
background-color: var(--theme-color-alter_link2) !important;
}
tr.week td.active .date,
td.today.active:hover .date span {
background-color: var(--theme-color-alter_link2) !important;
}
tr th, tr td {
border: none !important;
}
thead tr th {
padding: 0.3rem 0 1.5rem !important;
color: var(--theme-color-alter_dark) !important;
}
th .monthName {
@include flex;
@include flex-direction(column);
@include flex-justify-content(center);
@include flex-align-items(center);
height: 1.2em;
@include font(24px, 1em, 500);
a {
margin-top: 5px;
padding-left: 0;
display: inline-block;
@include font(12px, 1.1em);
top: 0;
color: var(--theme-color-alter_dark) !important;
}
}
thead tr {
background-color: var(--theme-color-alter_bg_color) !important;
&.days {
background-color: var(--theme-color-bg_color) !important;
th {
position: relative;
padding: 1rem 0 !important;
font-size: 14px;
&:first-child {
background-color: var(--theme-color-bg_color) !important;
&:after {
content: '';
position: absolute;
z-index: 0;
top: 0;
left: -35px;
@include box(35px, 100%);
background-color: inherit !important;
}
}
&:last-child {
background-color: var(--theme-color-bg_color) !important;
&:after {
content: '';
position: absolute;
z-index: 0;
top: 0;
right: -35px;
@include box(35px, 100%);
background-color: inherit !important;
}
}
}
}
}
thead tr th:first-child {
background-color: var(--theme-color-alter_bg_color) !important;
border-color: var(--theme-color-alter_bg_color) !important;
}
thead th i {
color: var(--theme-color-alter_dark) !important;
}
thead th {
height: 3.5rem;
}
thead th .page-right,
thead th .page-left {
@include font(12px, '', 400);
margin-top: -15px;
}
thead th .page-left,
thead th .page-left:hover {
left: 20px;
}
thead th .page-right,
thead th .page-right:hover {
right: 20px;
}
thead th .page-right i:before {
content: '\E9E6';
}
thead th .page-left i:before {
content: '\E9E5';
}
td .date .number {
@include font(14px, '', 400);
letter-spacing: 0;
@include transform(none);
}
tr.week td.active .date .number {
@include transform(none);
}
}
}
/* Calendar Small in Sidebar */
[class*="scheme_"].sidebar .booked-calendar-wrap.small {
margin-top: -1rem;
padding: 0 !important;
background-color: transparent !important;
table.booked-calendar thead tr:not(.days) th {
padding: 0 !important;
}
table.booked-calendar thead th .page-right,
table.booked-calendar thead th .page-left {
margin-top: -4px;
}
}
/* Booked form */
body .booked-form {
.field {
label.field-label {
@include font(16px ,24px, 500);
padding: 5px 0 5px;
color: var(--theme-color-text_dark);
.required-asterisk {
font-size: 10px;
margin: 5px 0 0 5px;
vertical-align: top;
color: var(--theme-color-text_link);
}
}
p.field-small-p {
margin: 0 0 5px;
@include font(16px, 24px, 400);
}
.checkbox-radio-block label {
padding-left: 1.6em;
top: 0;
}
.checkbox-radio-block label:before {
line-height: 15px;
top: 0.5em;
}
select,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
textarea {
width: 100%;
float: none;
@include font(16px, 1.5em, 400);
margin: 0;
padding: 13px 0;
border: none;
@include border-radius(0);
color: var(--theme-color-input_text);
background-color: var(--theme-color-input_bg_color);
border-bottom: 1px solid var(--theme-color-input_bd_color);
}
select:focus,
select.filled,
input[type="text"]:focus,
input[type="text"].filled,
input[type="password"]:focus,
input[type="password"].filled,
input[type="tel"]:focus,
input[type="tel"].filled,
input[type="email"]:focus,
input[type="email"].filled,
textarea:focus,
textarea.filled {
color: var(--theme-color-input_dark);
background-color: var(--theme-color-input_bg_hover);
border-color: var(--theme-color-input_bd_hover);
}
}
.cf-block {
select {
visibility: visible;
height: auto;
-webkit-appearance: auto;
}
.paid-variations {
width: 100%;
}
}
.booked-appointments {
margin: 0 0 5px;
@include border-radius(4px);
color: var(--theme-color-text);
background-color: var(--theme-color-bg_color) !important;
p.appointment-info {
margin-top: 8px;
@include font(15px, 19px, 400);
i {
position: relative;
top: -1px;
&:before{
font-family: $theme_icons;
content: '\E9B7';
color: var(--theme-color-text_link3);
}
}
}
}
}
body .booked-modal .bm-overlay {
background: rgba(0,0,0,.5);
}
body .booked-modal .bm-window {
padding: 54px 0 30px;
@include border-box;
@include border-radius(0);
@include box-shadow(1px 1px 15px rgba(0,0,0,.2));
background: none;
p {
@include font(16px, 24px, 400);
&.appointment-title {
font-weight: 500;
color: var(--theme-color-text_link3);
}
&.calendar-name {
font-weight: 500;
color: var(--theme-color-text_dark);
}
}
p.booked-title-bar {
margin: 0;
@include border-radius(0);
color: var(--theme-color-alter_dark) !important;
background-color: var(--theme-color-alter_bg_color) !important;
small {
@include font(17px, 24px, 500);
text-transform: none;
letter-spacing: 0;
}
}
.close {
font-size: 18px;
top: 18px;
right: 14px;
@include transition(transform .3s ease-out);
&:hover {
@include transform(rotate(180deg));
}
i {
color: var(--theme-color-alter_dark);
&:before {
font-weight: 400;
font-family: $theme_icons;
content: '\E9E1';
}
}
}
.booked-scrollable {
padding: 25px 30px 25px;
@include border-radius(0);
color: var(--theme-color-text);
background-color: var(--theme-color-bg_color) !important;
em {
color: var(--theme-color-text_dark);
font-style: normal;
}
}
.field:last-child {
width: 100%;
@include flex;
@include flex-justify-content(space-between);
@include flex-wrap(wrap);
&:after {
display: none;
}
}
.button.button-primary,
.button.booked-forgot-goback,
.button.cancel {
@include flex;
@include flex-justify-content(center);
text-align: center;
@include font(13px, 20px, 500);
padding: 14px 40px;
color: var(--theme-color-inverse_link) !important;
background: var(--theme-color-text_link3) !important;
border-color: var(--theme-color-text_link3) !important;
margin: 0;
float: none;
&:hover {
color: var(--theme-color-inverse_link) !important;
background: var(--theme-color-text_hover3) !important;
border-color: var(--theme-color-text_hover3) !important;
}
}
input[type="submit"].button:disabled {
@include box-shadow(none !important);
color: var(--theme-color-inverse_link) !important;
background: var(--theme-color-bd_color) !important;
border-color: var(--theme-color-bd_color) !important;
}
#customerChoices {
text-align: left;
padding: 5px 0 18px;
margin: 0;
margin-bottom: 14px;
@include flex;
@include flex-align-items(flex-start);
@include flex-justify-content(flex-start);
background-color: transparent;
border-color: var(--theme-color-bd_color);
&.bookedClearFix:after {
display: none;
}
.field {
margin: 0;
margin-right: 30px;
line-height: 1;
&:last-child {
width: auto;
margin-right: 0;
}
.checkbox-radio-block {
padding: 0;
label {
@include font(16px, 21px, 400);
}
}
}
}
#condition-current,
#condition-new {
padding-bottom: 20px;
}
#newAppointmentForm {
.field {
margin: 15px 0 0;
}
.bookings .field {
margin: 0;
}
p.status {
color: var(--theme-color-text);
}
}
}
/* Login form */
body .booked-form #ajaxlogin {
.field {
margin: 0;
}
.booked-forgot-password {
display: inline-block;
margin-top: 10px;
@include font(16px, 21px, 400);
color: var(--theme-color-text_link3);
&:hover {
color: var(--theme-color-text_hover3);
}
}
}
body #booked-page-form {
color: var(--theme-color-text);
border-color: var(--theme-color-bd_color);
.login-remember {
float: none;
margin: 0;
input {
display: inline;
vertical-align:middle;
}
}
.login-submit {
float: none;
margin-top: 15px;
}
}
/* User profile */
body #profile-login label,
#profile-register label,
#profile-forgot label {
@include font(15px, 1em, 500);
color: var(--theme-color-text_dark);
}
body #booked-profile-page {
.booked-profile-appt-list .appt-block {
@include font(16px, 28px, 400);
color: var(--theme-color-text);
border-color: var(--theme-color-bd_color);
&.approved {
color: var(--theme-color-text_dark);
> i.booked-icon {
color: var(--theme-color-text_dark);
}
}
.status-block {
padding: 6px 16px;
@include border-radius(30px);
@include font(15px, 20px, 500);
text-transform: capitalize;
background-color: var(--theme-color-text_light) !important;
color: var(--theme-color-inverse_link);
}
&.approved .status-block {
background-color: var(--theme-color-text_link3) !important;
color: var(--theme-color-inverse_link) !important;
}
> i.booked-icon {
color: var(--theme-color-text);
}
}
h4 {
@include font(1em, 1.2em, 500);
}
i.fa {
color: inherit;
}
div.booked-profile-header {
padding: 0 0 2em;
background-color: var(--theme-color-bg_color) !important;
border-color: transparent !important;
color: var(--theme-color-text);
.booked-logout-button {
color: var(--theme-color-text_link3);
margin-top: 10px;
}
.booked-logout-button:hover {
color: var(--theme-color-text_hover3);
}
}
div.booked-user-avatar {
float: none;
@include box(50px, 50px);
img {
@include border-round;
}
}
.booked-user {
* {
line-height: 1.3em;
}
@include flex;
@include flex-align-items(center);
h3 {
letter-spacing: 0 !important;
color: var(--theme-color-text_dark);
}
strong {
font-weight:400;
}
}
.booked-tabs {
border-width: 0;
background-color: var(--theme-color-bg_color) !important;
border-color: var(--theme-color-alter_bd_color) !important;
&.login {
border-top-width: 0;
}
li a {
border: 1px solid var(--theme-color-bd_color);
@include font(16px, '', 500);
background-color: var(--theme-color-bg_color);
color: var(--theme-color-text_dark);
}
li.active a {
border-bottom-color: transparent;
}
li a i {
color: inherit;
}
li.active a,
li.active a:hover,
li a:hover {
color: var(--theme-color-alter_dark) !important;
background-color: var(--theme-color-alter_bg_color) !important;
}
li:not(.edit-button) + li {
margin-left: -1px !important;
}
}
div.booked-tab-content {
margin-top: -1px !important;
border-top: 1px solid;
@include border-sharp;
background-color: var(--theme-color-alter_bg_color);
border-color: var(--theme-color-alter_bd_color);
.appt-block {
border-color: var(--theme-color-alter_bd_color);
> strong {
color: var(--theme-color-text_dark) !important;
}
}
}
#loginform .login-remember {
label {
padding-left: 1.8em;
position: relative;
@include font(14px !important, 22px !important, 400 !important);
color: var(--theme-color-text) !important;
input[type="checkbox"] {
position: static !important;
clip: auto;
width: 0;
outline: 0 !important;
-webkit-appearance: none;
-moz-appearance: none;
&:before {
content: '';
font-family: $theme_icons;
display: block;
text-align: center;
border: 1px solid var(--theme-color-bd_color);
font-size: 7px;
@include box(16px, 16px, 15px);
@include abs-lt(0, 0.45em);
@include border-box;
@include border-radius(4px);
color: var(--theme-color-text_dark);
cursor: pointer;
@include transition(all .3s ease);
}
&:checked:before {
content: '\e9f6';
}
}
&:hover input[type="checkbox"]:before {
border-color: var(--theme-color-text_dark) !important;
}
}
}
}
.ua_ie #booked-profile-page #loginform .login-remember {
label {
padding-left: 0;
}
input[type="checkbox"] {
width: auto;
&:before {
display: none;
}
}
}
/* User profile content */
.booked-calendarSwitcher.calendar,
.booked-calendarSwitcher.calendar select {
background-color: var(--theme-color-alter_bg_color) !important;
}
#booked-page-form #profile-register,
#booked-page-form #profile-login,
#booked-page-form #profile-forgot,
#profile-edit #booked-page-form {
label {
font-weight: 500;
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
border: none;
border-bottom: 1px solid;
padding: 0.6em 0;
}
}
#profile-edit #booked-page-form {
.form-table {
margin-bottom: 2em;
}
label {
@include font(15px, 1em, 500 !important);
color: var(--theme-color-text_dark);
}
body & .hint-p {
color: var(--theme-color-text_light);
}
body & p.form-submit {
margin-top: 10px;
margin-bottom: 0;
}
}
body .booked-upload-wrap {
span {
font-size: 15px;
}
}
body .booked-upload-wrap,
body .booked-upload-wrap input {
background: var(--theme-color-input_bg_color);
border-color: var(--theme-color-input_bd_color);
@include border-radius(0);
@include transition-colors;
}
body .booked-upload-wrap:hover {
background-color: var(--theme-color-input_bg_hover);
}
/* Booked icon */
.booked-icon-alert {
color: var(--theme-color-text_link) !important;
}
body #booked-profile-page p.booked-no-margin {
color: var(--theme-color-text);
}
/* Messages */
body #booked-plugin-page p.booked-form-notice,
body #booked-profile-page p.booked-form-notice {
border-color: var(--theme-color-text_link3);
background-color: transparent;
@include border-radius(0);
margin: 0 0 20px;
padding: 6px 12px;
}
body #booked-profile-page .booked-tabs li a > .counter {
display: inline-block;
margin-left: 5px;
}
// booked-list-view
body .booked-list-view.booked-calendar-wrap .booked-appt-list .timeslot {
padding: 15px 0;
margin: 0;
border-color: var(--theme-color-bd_color);
.timeslot-people button {
@include font(14px, 20px, 400);
padding: 14px 44px;
.button-timeslot {
font-weight: 400;
}
}
}
body .booked-list-view {
button.bb-small,
.booked-list-view-nav .booked-list-view-date-next {
padding: 4px 12px;
font-size: 15px;
line-height: 18px;
}
button:hover {
color: var(--theme-color-inverse_link);
background-color: var(--theme-color-text_hover);
}
}
// datepicker
body #ui-datepicker-div.booked_custom_date_picker {
@include border-radius(0);
.ui-datepicker-header {
.ui-datepicker-title {
@include font(13px, 1.7em, 500);
padding: 10px 0;
}
> a {
&[class*="ui-datepicker"] {
top: 6px;
font-size: 11px;
}
&:before {
font-family: $theme_icons;
font-weight: 400;
}
&.ui-datepicker-prev:before {
content: '\E9E5';
}
&.ui-datepicker-next:before {
content: '\E9E6';
}
}
}
table.ui-datepicker-calendar {
thead th {
background: var(--theme-color-alter_bg_color) !important;
color: var(--theme-color-alter_dark) !important;
}
tbody td a {
@include border-radius(0);
}
}
}