File: /var/www/vhosts/uyarreklam.com.tr/httpdocs/add-to-wishlist.scss.tar
httpdocs/wp-content/plugins/yith-woocommerce-wishlist/assets/scss/frontend/add-to-wishlist.scss 0000644 00000045316 15155411417 0035573 0 ustar 00 var/www/vhosts/uyarreklam.com.tr $add-to-wishlist-icon-color : var(--add-to-wishlist-icon-color, #000);
$added-to-wishlist-icon-color : var(--added-to-wishlist-icon-color, #000);
$color-add-to-wishlist-background : var(--color-add-to-wishlist-background, #333333);
$color-add-to-wishlist-text : var(--color-add-to-wishlist-text, #ffffff);
$color-add-to-wishlist-border : var(--color-add-to-wishlist-border, #333333);
$color-add-to-wishlist-background-hover : var(--color-add-to-wishlist-background-hover, #4f4f4f);
$color-add-to-wishlist-text-hover : var(--color-add-to-wishlist-text-hover, #ffffff);
$color-add-to-wishlist-border-hover : var(--color-add-to-wishlist-border-hover, #4f4f4f);
$rounded-corners-radius : var(--rounded-corners-radius, 16px);
$tooltip-color-background : var(--tooltip-color-background, #333333e6);
$tooltip-color-text : var(--tooltip-color-text, #ffffff);
$modal-overlay : var(--modal-colors-overlay, #0000004d);
$modal-icon : var(--modal-colors-icon, #007565);
$modal-primary-button : var(--modal-colors-primary-button, #007565);
$modal-primary-button-text : var(--modal-colors-primary-button-text, #fff);
$modal-primary-button-hover : var(--modal-colors-primary-button-hover, #007565);
$modal-primary-button-text-hover : var(--modal-colors-primary-button-text-hover, #fff);
$modal-secondary-button : var(--modal-colors-secondary-button, #08a889);
$modal-secondary-button-text : var(--modal-colors-secondary-button-text, #fff);
$modal-secondary-button-hover : var(--modal-colors-secondary-button-hover, #08a889);
$modal-secondary-button-text-hover : var(--modal-colors-secondary-button-text-hover, #fff);
$feedback-duration : var(--feedback-duration, 2.5s);
svg.yith-wcwl-icon-svg {
width : 30px;
height : 30px;
}
.yith-add-to-wishlist-button-block {
display : flex;
align-items : center;
justify-content : center;
position : relative;
width : max-content;
margin : 7px auto;
&.yith-add-to-wishlist-button-block--single {
margin-inline : 0;
gap : 10px;
align-items : flex-start;
flex-direction : column;
}
a.yith-wcwl-add-to-wishlist-button__wrapper {
text-decoration : none;
}
}
.yith-wcwl-add-to-wishlist-button {
display : flex;
flex-direction : column;
align-items : center;
position : relative;
cursor : pointer;
font-size : 1rem;
& svg, img.yith-wcwl-custom-icon {
width : 30px;
height : 30px;
}
&:is(button) {
flex-direction : row;
gap : 5px;
padding : 6px 10px;
font-size : .9rem;
.yith-wcwl-icon-svg__wrapper {
display : flex;
&:is(span) {
display : inline-flex;
}
}
svg, img {
width : 22px;
height : 22px;
}
&:not( .yith-wcwl-theme-button-style ) {
background-color : $color-add-to-wishlist-background;
color : $color-add-to-wishlist-text;
border : 2px solid $color-add-to-wishlist-border;
border-radius : $rounded-corners-radius;
&:hover {
background-color : $color-add-to-wishlist-background-hover;
color : $color-add-to-wishlist-text-hover;
border : 2px solid $color-add-to-wishlist-border-hover;
}
}
}
&.yith-wcwl-add-to-wishlist-button--loading {
cursor : progress;
}
&.yith-wcwl-add-to-wishlist-button--custom-button {
text-decoration : none;
}
&.yith-wcwl-add-to-wishlist-button--pillow {
border-radius : 100px;
padding : 7px 14px;
font-size : .9rem;
}
&.yith-wcwl-add-to-wishlist-button--anchor {
flex-direction : row;
margin : auto;
justify-content : center;
gap : 7px;
&.yith-wcwl-add-to-wishlist--with-counter {
gap : 4px;
}
svg.yith-wcwl-icon-svg, img {
width : 30px;
color : currentColor;
max-width : 35px;
}
}
&.yith-wcwl-add-to-wishlist-button--icon-button {
flex-direction : column;
color : $add-to-wishlist-icon-color;
&.yith-wcwl-add-to-wishlist-button--added,
&.yith-wcwl-add-to-wishlist-button--added:hover,
&.yith-wcwl-add-to-wishlist-button--added .yith-wcwl-add-to-wishlist__counter {
color : $added-to-wishlist-icon-color;
}
&:hover,
.yith-wcwl-add-to-wishlist__counter {
color : $add-to-wishlist-icon-color;
}
&:is(button) {
gap : 5px;
background : none;
border : none;
&:hover {
background : none;
border : none;
}
svg.yith-wcwl-add-to-wishlist-button-icon {
width : 30px;
height : 30px;
}
.yith-wcwl-add-to-wishlist__counter {
line-height : 1;
}
}
}
&:not(.yith-wcwl-add-to-wishlist-button--single) {
.yith-wcwl-add-to-wishlist__counter {
font-weight : 500;
}
}
&.yith-wcwl-add-to-wishlist-button--single {
&.yith-wcwl-add-to-wishlist-button--anchor {
display : flex;
align-items : center;
margin-inline : 0;
justify-content : flex-start;
gap : 10px;
}
}
&.yith-wcwl-add-to-wishlist-button-over-image {
position : absolute;
display : flex;
margin : 10px;
z-index : 20;
&--top-left {
left : 0;
top : 0;
}
&--top-right {
right : 0;
top : 0;
}
&--bottom-left {
left : 0;
bottom : 0;
}
&--bottom-right {
right : 0;
bottom : 0;
}
&--hover {
opacity : 0;
transition : .2s;
&.yith-wcwl-add-to-wishlist-button--loading:not(.yith-wcwl-add-to-wishlist-button--first-loading) {
opacity : 1;
}
}
&.yith-wcwl-add-to-wishlist--dropdown-opened {
opacity : 1;
}
.yith-wcwl-icon {
width : 30px;
height : 30px;
}
}
}
.yith-wcwl-add-to-wishlist__feedback {
text-align : center;
padding : 10px 17px;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
background-color : rgba(255, 255, 255, .95);
font-size : .8em;
transition : opacity .5s ease-out;
opacity : 1;
text-wrap : balance;
animation : fade-in .3s, bounce .45s;
width : max-content;
max-width : 90%;
position : fixed;
z-index : 999;
&.yith-wcwl-add-to-wishlist__feedback-on-product-image {
position : absolute;
}
&.yith-wcwl-fade-out {
animation : fade-out .5s forwards;
}
}
div[data-block-name="woocommerce/product-image"],
div.wc-block-grid__product-image,
.woocommerce-loop-product__link [class*="image"],
.add-to-wishlist-before_image {
&:hover, &:focus, :has(*:focus) {
.yith-wcwl-add-to-wishlist-button-over-image--hover {
opacity : 1;
}
}
}
.yith-wcwl-feedback-messages-container {
display : flex;
flex-direction : column;
align-items : center;
position : fixed;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
width : fit-content;
height : fit-content;
z-index : 999;
transition : .3s;
max-width : 90%;
.yith-wcwl-add-to-wishlist__feedback {
position : relative;
transform : unset;
top : unset;
left : unset;
animation : fade-in .3s;
width : 300px;
max-width : 100%;
justify-content : center;
&.yith-wcwl-fade-out {
animation : fade-out .5s forwards;
}
&:not(:last-child) {
margin-bottom : 10px;
}
}
}
/* === AUTO GENERATED STYLE THAT WAS LOCALIZED === */
.woocommerce a.add_to_wishlist.button.alt:not( .yith-wcwl-theme-button-style ) {
background-color : $color-add-to-wishlist-background;
background : $color-add-to-wishlist-background;
color : $color-add-to-wishlist-text;
border-color : $color-add-to-wishlist-border;
border-radius : $rounded-corners-radius;
&:hover {
background-color : $color-add-to-wishlist-background-hover;
background : $color-add-to-wishlist-background-hover;
color : $color-add-to-wishlist-text-hover;
border-color : $color-add-to-wishlist-border-hover;
}
}
.yith-wcwl-tooltip,
.with-tooltip .yith-wcwl-tooltip:before,
.with-dropdown .with-tooltip .yith-wcwl-tooltip:before {
background-color : $tooltip-color-background;
border-bottom-color : $tooltip-color-background;
border-top-color : $tooltip-color-background;
color : $tooltip-color-text;
}
.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--themed-button) {
svg.yith-wcwl-add-to-wishlist-button-icon {
color : $add-to-wishlist-icon-color;
}
&.yith-wcwl-add-to-wishlist-button--added {
svg.yith-wcwl-add-to-wishlist-button-icon {
color : $added-to-wishlist-icon-color;
}
}
}
.yith-wcwl-add-to-wishlist-tooltip {
background-color : $tooltip-color-background;
color : $tooltip-color-text;
display : block;
$margin : 10px;
position : absolute;
top : 100%;
left : 50%;
transform : translateX(-50%);
z-index : 10;
width : 250px;
padding : 5px 10px;
border-radius : 5px;
margin-top : $margin;
max-width : max-content;
text-align : center;
font-size : 12px;
line-height : normal;
text-wrap : balance;
pointer-events : none;
cursor : initial;
opacity : 0;
animation : fade-in .3s .3s forwards, slide-down .3s .3s;
&--top {
top : unset;
bottom : 100%;
margin-block : 0 $margin;
}
}
.yith-wcwl-add-to-wishlist-dropdown {
position : absolute;
left : 0;
margin-top : 20px;
z-index : 99;
top : 100%;
background : rgba(255, 255, 255, .95);
padding : 10px;
border : 1px solid #ddd;
border-radius : 10px;
width : max-content;
min-width : 250px;
max-width : 350px;
display : flex;
flex-direction : column;
align-items : flex-start;
gap : 0;
animation : scale-up .3s;
-webkit-transform-origin : top left;-moz-transform-origin : top left;-ms-transform-origin : top left;-o-transform-origin : top left;transform-origin : top left;
&--bottom-left {
left : unset;
right : 0;
-webkit-transform-origin : top right;-moz-transform-origin : top right;-ms-transform-origin : top right;-o-transform-origin : top right;transform-origin : top right;
}
&--top-left {
left : unset;
right : 0;
top : unset;
bottom : 100%;
margin-block : 0 20px;
-webkit-transform-origin : bottom right;-moz-transform-origin : bottom right;-ms-transform-origin : bottom right;-o-transform-origin : bottom right;transform-origin : bottom right;
}
&--top-right {
top : unset;
bottom : 100%;
margin-block : 0 20px;
-webkit-transform-origin : bottom left;-moz-transform-origin : bottom left;-ms-transform-origin : bottom left;-o-transform-origin : bottom left;transform-origin : bottom left;
}
.yith-wcwl-add-to-wishlist-dropdown__option,
.yith-wcwl-add-to-wishlist-dropdown__view-more {
background : none;
border : none;
margin : 0;
width : 100%;
border-radius : 0;
font-size : 13px;
}
.yith-wcwl-add-to-wishlist-dropdown__option {
color : #222 !important;
max-width : 260px;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
text-decoration : none;
padding : 7px 20px 7px 0;
display : flex;
align-items : center;
gap : 7px;
text-align : left;
cursor : pointer;
border-radius : 0;
outline : none;
&:not(:last-of-type) {
border-bottom : 1px solid #eee;
}
&:hover {
color : var(--wp--preset--color--primary, #007565);
}
&:focus .yith-wcwl-add-to-wishlist-dropdown__option__text {
text-decoration : underline;
}
.yith-wcwl-add-to-wishlist-dropdown__option__text {
color : #222 !important;
flex : 1;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
}
.yith-wcwl-icon {
color : #222 !important;
}
}
.yith-wcwl-add-to-wishlist-dropdown__view-more {
color : var(--wp--preset--color--primary, #007565);
padding : 10px 0 10px 21px;
text-align : left;
outline : none;
&:focus {
text-decoration : underline;
}
}
}
@keyframes scale-up {
0% { transform : scale(0) }
100% { transform : scale(1) }
}
@keyframes fade-in {
0% { opacity : 0 }
100% { opacity : 1 }
}
@keyframes slide-down {
0% { transform : translate(-50%, -5px) scale(.7) }
100% { transform : translate(-50%, 0) scale(1) }
}
a.yith-wcwl-add-to-wishlist-button-anchor-wrapper {
text-decoration : none;
}
.yith-wcwl-modal {
.lapilliUI-Paper__root {
width : 450px;
border-radius : 15px;
box-shadow : rgba(24, 53, 62, 0.1) 0px 11px 15px -7px, rgba(24, 53, 62, 0.07) 0px 24px 38px 3px, rgba(24, 53, 62, 0.06) 0px 9px 46px 8px;
}
.lapilliUI-Backdrop__root {
background-color : $modal-overlay;
}
button.lapilliUI-Modal__close {
color : rgba(0, 0, 0, .5);
&:hover {
color : rgba(0, 0, 0, .5);
}
}
.yith-wcwl-modal__title {
display : flex;
flex-direction : column;
align-items : center;
gap : 25px;
padding : 50px 55px 0;
.yith-wcwl-modal__icon {
color : $modal-icon;
height : auto;
max-height : 90px;
&:not([id$="-light"]):not(.yith-wcwl-icon-svg--light) {
stroke-width : 1;
* {
stroke-width : 1;
}
}
}
}
div.yith-wcwl-modal__content {
padding : 20px 55px 0;
display : flex;
flex-direction : column;
gap : 20px;
}
div.yith-wcwl-modal__actions {
display : flex;
flex-direction : column;
align-items : unset;
gap : 10px;
padding : 20px 55px 50px;
* {
margin : unset;
}
}
.yith-wcwl-modal__primary-button {
transition : .2s;
background-color : $modal-primary-button;
color : $modal-primary-button-text;
border : none;
width : 100%;
box-sizing : border-box;
&--loading {
opacity : .5;
cursor : progress;
}
&:hover {
color : $modal-primary-button-text-hover;
background-color : $modal-primary-button-hover;
}
}
.yith-wcwl-modal__secondary-button {
transition : .2s;
border-radius : 5px;
background-color : $modal-secondary-button;
color : $modal-secondary-button-text;
border : none;
&:hover {
background-color : $modal-secondary-button-hover;
color : $modal-secondary-button-text-hover;
}
}
}
.yith-wcwl-add-to-wishlist-modal {
.yith-wcwl-add-to-wishlist-modal__title {
.yith-wcwl-add-to-wishlist-modal__type_selection {
display : flex;
width : 100%;
position : relative;
&::after {
content : "";
position : absolute;
left : 0;
width : 50%;
height : 3px;
background : $modal-primary-button;
bottom : 0;
transition : .2s;
}
&.yith-wcwl-add-to-wishlist-modal__type_selection--create::after {
left : 50%;
}
.yith-wcwl-add-to-wishlist-modal__type_option {
background : none;
text-decoration : none;
flex : 1;
cursor : default;
text-align : center;
border : none;
font-size : 16px;
font-weight : normal;
border-bottom : 3px solid transparent;
padding : 10px 0;
color : #333;
transition : .2s;
position : relative;
border-radius : 0;
&:before {
content : "";
position : absolute;
left : 0;
bottom : -3px;
width : 100%;
height : 3px;
transition : .2s;
background : #000;
opacity : 10%;
}
&:hover:before {
background : $modal-primary-button;
opacity : 30%;
}
&:not(.yith-wcwl-add-to-wishlist-modal__type_option--selected) {
color : #999;
cursor : pointer;
&:hover, &:focus {
color : #333;
}
}
&.yith-wcwl-add-to-wishlist-modal__type_option--selected {
color : inherit
}
}
}
}
.yith-wcwl-add-to-wishlist-modal__content {
padding-bottom : 0;
}
}
.yith-wcwl-modal__wishlist-select__create-option.lapilliUI-Select__option {
color : $modal-primary-button;
}
.yith-wcwl-move-to-another-wishlist-modal {
.yith-wcwl-move-to-another-wishlist-modal__content__desc {
text-align : center;
}
.yith-wcwl-move-to-another-wishlist-modal__remove-wrapper {
display : flex;
justify-content : center;
gap : .368em;
.yith-wcwl-move-to-another-wishlist-modal__remove {
text-align : center;
color : $modal-primary-button;
transition : .2s;
cursor : pointer;
&:hover {
color : $modal-primary-button-hover
}
}
}
}
@property --conic-gradient-loading-deg {
syntax : "<angle>";
inherits : false;
initial-value : 0deg;
}
.yith-wcwl-feedback-modal {
&.yith-wcwl-feedback-modal--no-animation {
.lapilliUI-Modal__paper,
.lapilliUI-Modal__backdrop {
animation : none;
position : absolute;
}
}
div.yith-wcwl-feedback-modal__message {
text-wrap : balance;
margin-block : 20px;
}
&:not(.yith-wcwl-feedback-modal--no-close) {
button.lapilliUI-Modal__close {
border : 3px solid transparent;
background : linear-gradient(white, white), conic-gradient(#d0d0d0 var(--conic-gradient-loading-deg), white 0deg);
border-radius : 100%;
background-origin : border-box;
background-clip : content-box, border-box;
animation : conic-gradient-loading $feedback-duration linear forwards;
outline : none;
box-shadow : none;
}
}
.lapilliUI-ModalTitle__root,
.lapilliUI-ModalContent__root {
text-align : center;
}
.yith-wcwl-feedback-modal__footer {
display : flex;
flex-direction : column;
align-items : unset;
gap : 10px;
a {
margin : 0;
text-align : center;
}
}
.yith-wcwl-feedback__product-name {
display : block;
}
}
@keyframes bounce {
0% {
transform : translate(-50%, -40%);
}
100% {
transform : translate(-50%, -50%);
}
}
@keyframes fade-in-out {
0% {opacity : 0}
15% {opacity : 1}
85% {opacity : 1}
100% {opacity : 0}
}
@keyframes fade-in {
0% {opacity : 0}
100% {opacity : 1}
}
@keyframes fade-out {
0% {opacity : 1}
100% {opacity : 0}
}
@keyframes conic-gradient-loading {
0% {
--conic-gradient-loading-deg : 0deg
}
90%, 100% {
--conic-gradient-loading-deg : 360deg
}
}