Server : Apache/2.4.52 (Ubuntu) System : Linux webserver 6.8.0-49-generic #49~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Nov 6 17:42:15 UTC 2 x86_64 User : www-data ( 33) PHP Version : 8.1.2-1ubuntu2.21 Disable Function : NONE Directory : /var/www/theprintave/wp-content/themes/pricom/assets/scss/elementor/ |
$root: '.haru-woo-product-variations';
#{$root} {
&__list {
}
#{$root}__item {
}
#{$root}__image {
}
// Layout
&--list {
max-width: 810px;
margin-left: auto;
margin-right: auto;
.variation-step {
text-align: center;
span {
background: rgba(17, 177, 150, 0.1);
border-radius: 3px;
color: #11B196;
display: inline-block;
font-size: 18px;
font-weight: $fw-bold;
padding: 3px 16px;
letter-spacing: .1em;
text-transform: uppercase;
@media screen and (max-width: $screen-lg-max) {
font-size: 16px;
padding: 2px 13px;
}
@media screen and (max-width: $screen-md-max) {
font-size: $fs-14;
padding: 1px 13px;
}
}
}
// Upload
.wc-dnd-file-upload {
font-size: 40px;
padding: 0 0 90px;
text-align: center;
@media screen and (max-width: $screen-lg-max) {
font-size: 32px;
padding: 10px 0 70px;
}
@media screen and (max-width: $screen-md-max) {
font-size: 28px;
padding: 10px 0 50px;
}
@media screen and (max-width: $screen-xs-max) {
font-size: 22px;
}
.codedropz-upload-wrapper {
padding-top: 30px;
@media screen and (max-width: $screen-lg-max) {
padding-top: 20px;
}
}
.codedropz-upload-handler {
border: 2px dashed $cl-border;
}
.codedropz-upload-container {
}
}
.codedropz-upload-handler {
.codedropz-upload-inner {
a.cd-upload-btn {
padding: 2px 25px;
}
.codedropz-label {
span.cd-icon {
font-size: 64px;
opacity: .3;
@media screen and (max-width: $screen-lg-max) {
font-size: 56px;
}
@media screen and (max-width: $screen-md-max) {
font-size: 48px;
}
}
}
}
}
.dnd-upload-status {
.dnd-upload-details {
.name,
.remove-file {
font-size: 18px;
@media screen and (max-width: $screen-xs-max) {
font-size: 16px;
}
}
span.has-error {
font-size: $fs-base;
}
}
}
.variation-row {
margin-bottom: 100px;
@media screen and (max-width: $screen-lg-max) {
margin-bottom: 80px;
}
@media screen and (max-width: $screen-md-max) {
margin-bottom: 60px;
}
&:nth-last-child(-n+2) {
margin-bottom: 60px;
@media screen and (max-width: $screen-lg-max) {
margin-bottom: 40px;
}
@media screen and (max-width: $screen-md-max) {
margin-bottom: 30px;
}
}
&:last-child {
margin-bottom: 30px;
label {
font-size: 0;
margin-bottom: 0;
}
}
label {
color: $cl-black;
font-size: 40px;
font-weight: $fw-semi-bold;
display: block;
margin-bottom: 40px;
text-align: center;
@media screen and (max-width: $screen-lg-max) {
font-size: 32px;
padding-top: 10px;
margin-bottom: 30px;
}
@media screen and (max-width: $screen-md-max) {
font-size: 28px;
}
@media screen and (max-width: $screen-xs-max) {
font-size: 22px;
}
}
.value {
text-align: center;
}
}
.reset_variations {
border: 1px solid $cl-border;
border-radius: $border-radius-small;
color: $cl-black;
display: inline-block;
font-size: $fs-base - 1px;
padding: 3px 15px;
transition: all .3s;
&:hover {
background-color: $cl-black;
border: 1px solid $cl-black;
color: $cl-white;
transition: all .3s;
}
&:before {
content: '\e937';
font-family: 'haruicons';
font-weight: $fw-bold;
display: inline-block;
margin-right: 5px;
position: relative;
bottom: -2px;
}
}
.haru-variation-select-box {
max-width: 560px;
}
// Attribute Image, Color, Label
.variable-attribute-wrap {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
// General
> li {
cursor: pointer;
display: flex;
align-items: flex-start;
position: relative;
&:hover {
.button-tooltip {
opacity: 1;
visibility: visible;
transform: translate(-50%, -5px);
transition: all 300ms ease-in-out 0s;
}
}
.button-tooltip {
padding: 3px 5px;
position: absolute;
text-transform: none;
min-width: 60px;
opacity: 0;
text-align: center;
visibility: hidden;
bottom: calc(100% + 5px);
left: 50%;
background: #555;
color: $cl-white;
font-size: $fs-base - 1px;
line-height: 20px;
font-weight: $fw-medium;
border-radius: $border-radius-small;
transform: translate(-50%, 0);
z-index: 2;
@media screen and (max-width: $screen-xs-max) {
bottom: calc(100% + 2px);
}
&:after {
width: 0;
height: 0;
position: absolute;
bottom: -6px;
left: 50%;
content: '';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #555;
transform: translate(-50%, 0);
}
}
}
// Color
&.color-attribute-wrap {
> li {
width: 48px;
height: 48px;
margin-right: 28px;
border-radius: 50%;
@media screen and (max-width: $screen-lg-max) {
width: 40px;
height: 40px;
}
@media screen and (max-width: $screen-xs-max) {
width: 28px;
height: 28px;
margin-right: 16px;
}
&:last-child {
margin-right: 0;
}
&.selected {
&:before {
border: 1px solid $cl-black;
}
&:after {
opacity: 1;
}
}
&:before {
content: '';
position: absolute;
width: 56px;
height: 56px;
border: 1px solid #e3e3e3;
top: -4px;
left: -4px;
border-radius: 50%;
@media screen and (max-width: $screen-lg-max) {
width: 48px;
height: 48px;
top: -4px;
left: -4px;
}
@media screen and (max-width: $screen-xs-max) {
width: 34px;
height: 34px;
top: -3px;
left: -3px;
}
}
&:after {
content: '\e925';
font-family: 'phosphor';
font-weight: $fw-bold;
display: inline-block;
color: $cl-white;
font-size: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
@media screen and (max-width: $screen-lg-max) {
font-size: 28px;
}
@media screen and (max-width: $screen-xs-max) {
font-size: 20px;
}
}
&[style="background-color:#ffffff;"] {
&:after {
color: $cl-primary;
}
}
}
}
// Label
&.label-attribute-wrap {
> li {
font-weight: $fw-semi-bold;
border: 1px solid $cl-border;
border-radius: 50%;
font-size: $fs-base;
margin-right: 30px;
// margin-bottom: 10px;
height: 48px;
line-height: 44px;
min-width: 48px;
padding: 0 5px;
justify-content: center;
transition: all .3s;
@media screen and (max-width: $screen-md-max) {
margin-right: 28px;
}
@media screen and (max-width: $screen-xs-max) {
height: 40px;
line-height: 36px;
min-width: 40px;
margin-right: 20px;
}
&:last-child {
margin-right: 0;
}
&.selected {
border: 1px solid $cl-black;
color: $cl-black;
font-weight: $fw-bold;
}
&:hover {
color: $cl-black;
transition: all .3s;
}
}
}
// Image
&.image-attribute-wrap {
align-items: flex-start;
> li {
max-width: 192px;
width: calc(25% - 18px);
margin-right: 24px;
padding: 10px 10px 0 10px;
border: 2px solid $cl-border;
border-radius: $border-radius-medium;
flex-direction: column;
align-items: center;
background-color: $cl-white;
@media screen and (max-width: $screen-xs-max) {
width: calc(50% - 8px);
margin-right: 16px;
}
&:nth-child(2n) {
@media screen and (max-width: $screen-xs-max) {
margin-right: 0;
}
}
&:nth-child(2n + 1) {
@media screen and (max-width: $screen-xs-max) {
margin-bottom: 10px;
}
}
&:last-child {
margin-right: 0;
}
&:nth-child(5n) {
margin-right: 0;
}
&.selected {
border: 2px solid $cl-white;
box-shadow: 0 20px 50px rgba($cl-black, .07);
.button-tooltip {
color: $cl-black;
}
}
img {
border-radius: $border-radius-medium;
width: 100%;
}
.button-tooltip {
position: relative;
opacity: 1;
visibility: visible;
bottom: auto;
left: auto;
transform: none;
display: block;
background: transparent;
color: $cl-text;
font-weight: $fw-semi-bold;
font-size: 18px;
padding: 16px 10px;
&:after {
display: none;
}
}
}
}
}
}
&--popup {
}
.product-variations-popup {
padding: 30px 30px 90px 30px;
position: relative;
border-radius: $border-radius;
max-width: 690px;
background: $cl-white;
margin: 20px auto;
@media screen and (max-width: $screen-xs-max) {
padding: 30px 20px 90px 20px;
}
.mfp-close {
font-size: 0;
width: 48px;
height: 48px;
top: -48px;
right: -15px;
opacity: 1;
&:hover {
opacity: .8;
transition: all .3s;
&:before {
color: $cl-white;
}
}
&:before {
content: '\e957';
font-family: 'phosphor';
font-size: 24px;
color: $cl-white;
transition: all .3s;
}
}
.variations {
> .variation-row {
display: none;
}
}
// Attribute Image, Color, Label
.variable-attribute-wrap {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
// General
> li {
cursor: pointer;
display: flex;
align-items: flex-start;
position: relative;
&:hover {
.button-tooltip {
opacity: 1;
visibility: visible;
transform: translate(-50%, -5px);
transition: all 300ms ease-in-out 0s;
}
}
.button-tooltip {
padding: 3px 5px;
position: absolute;
text-transform: none;
min-width: 60px;
opacity: 0;
text-align: center;
visibility: hidden;
bottom: calc(100% + 5px);
left: 50%;
background: #555;
color: $cl-white;
font-size: $fs-base - 1px;
line-height: 20px;
font-weight: $fw-medium;
border-radius: $border-radius-small;
transform: translate(-50%, 0);
@media screen and (max-width: $screen-xs-max) {
bottom: calc(100% + 2px);
}
&:after {
width: 0;
height: 0;
position: absolute;
bottom: -6px;
left: 50%;
content: '';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #555;
transform: translate(-50%, 0);
}
}
}
// Color
&.color-attribute-wrap {
> li {
width: 48px;
height: 48px;
margin-right: 28px;
border-radius: 50%;
@media screen and (max-width: $screen-lg-max) {
width: 40px;
height: 40px;
}
@media screen and (max-width: $screen-xs-max) {
width: 28px;
height: 28px;
margin-right: 16px;
}
&:last-child {
margin-right: 0;
}
&.selected {
&:before {
border: 1px solid $cl-black;
}
&:after {
opacity: 1;
}
}
&:before {
content: '';
position: absolute;
width: 56px;
height: 56px;
border: 1px solid #e3e3e3;
top: -4px;
left: -4px;
border-radius: 50%;
@media screen and (max-width: $screen-lg-max) {
width: 48px;
height: 48px;
top: -4px;
left: -4px;
}
@media screen and (max-width: $screen-xs-max) {
width: 34px;
height: 34px;
top: -3px;
left: -3px;
}
}
&:after {
content: '\e925';
font-family: 'phosphor';
font-weight: $fw-bold;
display: inline-block;
color: $cl-white;
font-size: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
@media screen and (max-width: $screen-lg-max) {
font-size: 28px;
}
@media screen and (max-width: $screen-xs-max) {
font-size: 20px;
}
}
&[style="background-color:#ffffff;"] {
&:after {
color: $cl-primary;
}
}
}
}
// Label
&.label-attribute-wrap {
> li {
font-weight: $fw-semi-bold;
border: 1px solid $cl-border;
border-radius: 50%;
font-size: $fs-base;
margin-right: 30px;
// margin-bottom: 10px;
height: 48px;
line-height: 44px;
min-width: 48px;
padding: 0 5px;
justify-content: center;
transition: all .3s;
@media screen and (max-width: $screen-md-max) {
margin-right: 28px;
}
@media screen and (max-width: $screen-xs-max) {
height: 40px;
line-height: 36px;
min-width: 40px;
margin-right: 20px;
}
&:last-child {
margin-right: 0;
}
&.selected {
border: 1px solid $cl-black;
color: $cl-black;
font-weight: $fw-bold;
}
&:hover {
color: $cl-black;
transition: all .3s;
}
}
}
// Image
&.image-attribute-wrap {
align-items: flex-start;
> li {
max-width: 192px;
width: calc(25% - 18px);
margin-right: 24px;
padding: 10px 10px 0 10px;
border: 2px solid $cl-border;
border-radius: $border-radius-medium;
flex-direction: column;
align-items: center;
background-color: $cl-white;
@media screen and (max-width: $screen-xs-max) {
width: calc(50% - 8px);
margin-right: 16px;
}
&:nth-child(2n) {
@media screen and (max-width: $screen-xs-max) {
margin-right: 0;
}
}
&:nth-child(2n + 1) {
@media screen and (max-width: $screen-xs-max) {
margin-bottom: 10px;
}
}
&:last-child {
margin-right: 0;
}
&:nth-child(5n) {
margin-right: 0;
}
&.selected {
border: 2px solid $cl-white;
box-shadow: 0 20px 50px rgba($cl-black, .07);
.button-tooltip {
color: $cl-black;
}
}
img {
border-radius: $border-radius-medium;
width: 100%;
}
.button-tooltip {
position: relative;
opacity: 1;
visibility: visible;
bottom: auto;
left: auto;
transform: none;
display: block;
background: transparent;
color: $cl-text;
font-weight: $fw-semi-bold;
font-size: 18px;
padding: 16px 10px;
&:after {
display: none;
}
}
}
}
}
.step-list {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
@media screen and (max-width: $screen-xs-max) {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
li {
width: 60px;
height: 60px;
display: inline-block;
margin: 0 25px;
position: relative;
@media screen and (max-width: $screen-xs-max) {
width: 48px;
height: 48px;
margin: 0 15px;
flex-shrink: 0;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
&:before {
display: none;
}
}
&:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 3px;
width: 120px;
background-color: $cl-border;
transform: translateY(-50%);
z-index: 1;
@media screen and (max-width: $screen-xs-max) {
height: 2px;
width: 90px;
}
}
span {
display: block;
z-index: 2;
background-color: $cl-white;
border-radius: 50%;
position: relative;
line-height: 54px;
border-radius: 50%;
border: 3px solid $cl-border;
background-color: $cl-white;
font-size: 18px;
font-weight: $fw-bold;
text-align: center;
@media screen and (max-width: $screen-xs-max) {
line-height: 44px;
border: 2px solid $cl-border;
font-size: 16px;
}
}
&.step-active {
span {
background-color: $cl-primary;
box-shadow: 0 9px 20px rgba($cl-black, .1);
color: $cl-white;
border: 3px solid $cl-primary;
@media screen and (max-width: $screen-xs-max) {
border: 2px solid $cl-primary;
}
}
}
}
}
.variation-step-control {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 15px 30px;
&:before {
content: '';
position: absolute;
top: 0;
left: 30px;
width: calc(100% - 60px);
height: 1px;
background-color: $cl-border;
}
}
.variation-step {
display: none;
}
.variation-slide-step {
display: none;
}
.variation-step-control {
display: flex;
align-items: center;
font-size: 16px;
font-weight: $fw-semi-bold;
color: $cl-black;
.variation-step-prev,
.variation-step-next {
cursor: pointer;
transition: all .3s;
&:hover {
opacity: .8;
transition: all .3s;
}
&.disable {
display: none;
cursor: auto;
}
}
.variation-step-prev {
margin-right: auto;
}
.variation-step-next {
margin-left: auto;
}
}
.reset_variations {
display: none;
}
// Upload
.wc-dnd-file-upload {
font-size: 40px;
padding-top: 20px;
text-align: center;
@media screen and (max-width: $screen-lg-max) {
font-size: 32px;
}
@media screen and (max-width: $screen-md-max) {
font-size: 28px;
}
@media screen and (max-width: $screen-xs-max) {
font-size: 22px;
}
.codedropz-upload-wrapper {
padding-top: 30px;
@media screen and (max-width: $screen-lg-max) {
padding-top: 20px;
}
}
.codedropz-upload-handler {
border: 2px dashed $cl-border;
}
.codedropz-upload-container {
}
}
// .wc-upload-wrap {
.codedropz-upload-handler {
.codedropz-upload-inner {
a.cd-upload-btn {
padding: 2px 25px;
}
.codedropz-label {
span.cd-icon {
font-size: 64px;
opacity: .3;
@media screen and (max-width: $screen-lg-max) {
font-size: 56px;
}
@media screen and (max-width: $screen-md-max) {
font-size: 48px;
}
}
}
}
}
.dnd-upload-status {
.dnd-upload-details {
.name,
.remove-file {
font-size: 18px;
@media screen and (max-width: $screen-xs-max) {
font-size: 16px;
}
}
span.has-error {
font-size: $fs-base;
}
}
}
.codedropz--preview {
.dnd-upload-image {
.preview {
padding-bottom: 100%;
}
}
}
.variation-row {
label {
color: $cl-black;
font-size: 40px;
font-weight: $fw-semi-bold;
display: block;
margin-bottom: 40px;
padding-top: 20px;
text-align: center;
@media screen and (max-width: $screen-lg-max) {
font-size: 32px;
margin-bottom: 30px;
}
@media screen and (max-width: $screen-md-max) {
font-size: 28px;
}
@media screen and (max-width: $screen-xs-max) {
font-size: 22px;
}
}
.value {
text-align: center;
}
}
.add-to-cart-notice {
color: $cl-black;
font-size: 40px;
font-weight: $fw-semi-bold;
padding-top: 20px;
margin-bottom: 40px;
text-align: center;
@media screen and (max-width: $screen-lg-max) {
font-size: 32px;
margin-bottom: 30px;
}
@media screen and (max-width: $screen-md-max) {
font-size: 28px;
}
@media screen and (max-width: $screen-xs-max) {
font-size: 22px;
}
}
}
// Copy from woocommerce/_single.scss
// Product variable
form.cart {
margin-top: 15px;
margin-bottom: 10px;
&:before,
&:after {
display: table;
content: '';
}
&:after {
clear: both;
}
.hide {
display: none;
}
table.variations {
border: none;
margin-bottom: 10px;
th,
td {
border: none;
}
.label {
width: 100px;
}
label {
color: $cl-black;
font-weight: $fw-semi-bold;
}
td {
padding: 5px 0 10px 0;
}
select {
}
tr {
&:last-child {
td {
padding: 0;
}
}
}
}
// Variation
.woocommerce-variation {
&.single_variation {
// height: 45px!important;
}
}
// Add to cart
.quantity {
float: left;
// background: transparent;
margin-right: 10px;
.screen-reader-text {
display: none;
}
.input-button {
height: $e-height-base - 2px;
padding: 0 15px;
font-size: 20px;
font-weight: $fw-medium;
}
input[type="number"] {
width: $e-height-base - 2px;
height: $e-height-base - 2px;
font-size: 18px;
font-weight: $fw-semi-bold;
color: $cl-black;
}
}
.single_variation_wrap {
max-width: 560px;
margin: 0 auto;
position: relative;
&:has(p),
&:has(.woocommerce-variation-add-to-cart-enabled) {
.woocommerce-variation-price-notice {
display: none;
}
}
}
.woocommerce-variation-price-notice {
position: absolute;
top: 10px;
right: 0;
width: calc(100% - 145px);
text-align: right;
@media screen and (max-width: $screen-xs-max) {
top: 0;
line-height: 1.6;
}
}
.woocommerce-variation.single_variation {
position: absolute;
right: 0;
top: 5px;
width: calc(100% - 145px);
&:has(p) {
top: -4px;
}
p {
display: -webkit-box;
-webkit-line-clamp: 2;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
overflow: hidden;
}
.woocommerce-variation-description {
display: none;
}
.woocommerce-variation-price {
text-align: right;
span.price {
font-size: 24px;
@media screen and (max-width: $screen-xs-max) {
font-size: 22px;
}
}
}
}
.single_add_to_cart_button {
float: none;
height: $e-height-base;
padding: 0 20px;
width: 100%;
max-width: none;
margin-top: 24px;
}
// Price after choose options
.woocommerce-variation-price {
margin-bottom: 0;
span.price {
border: none;
del {
margin-left: 6px;
font-size: 80%;
}
ins {
text-decoration: none;
}
}
}
}
// Wishlist, Compare
.product-button {
position: relative;
float: left;
margin-top: 12px;
// Tooltip button
a {
&:hover {
}
.button-tooltip {
font-size: 16px;
font-weight: $fw-semi-bold;
}
}
}
// Sold Individually
.sold-individually {
.single_variation_wrap {
padding-top: 48px;
}
form.cart {
.woocommerce-variation-price-notice {
width: 100%;
text-align: center;
}
.woocommerce-variation.single_variation {
width: 100%;
}
.woocommerce-variation.single_variation .woocommerce-variation-price {
text-align: center;
}
}
}
}
#{$dark-mode},
#{$background-dark} {
#{$root} {
#{$root}__item {
}
}
}