ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / foreclass.com / wp-content / plugins / search-replace-for-elementor / assets / dev / sass

@import "variables/colors";
@import "variables/mixins";

elsnr-highlight {
  background-color: $color-highlight;
  padding: 3px;
}

.elemsnr-search-replace {
	
	.elemsnr-modal {
		align-items: center;
		background-color: transparent;
		display: flex;
		justify-content: center;
		left: calc((100vw - 640px) / 2);
		margin: 0 auto;
		position: fixed;
		top: 64px;
		width: 640px;
		z-index: 1;
		transition: all 400ms ease-in-out;

&-body {
			border-radius: 4px;
			box-shadow: 2px 8px 23px 3px $color-black;
			display: flex;
			flex-direction: column;
			min-width: 640px;
		}

&-header {
			position: relative;
			align-items: center;
			background-color: #26292c;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			color: $color-light-grey;
			cursor: move;
			display: flex;
			height: 52px;
			justify-content: space-between;
			padding: 12px;
		}

&-loading-bar {
			height: 2px;
			background-color: $color-pink-10;
			animation: elemsnr-loading 2s infinite;
			display: none;
			position: absolute;
			bottom: 0;
			left: 0;
		}

&-logo {
			display: block;
		}

&-title {
			cursor: move;
			font-size: 14px;
			font-weight: 700;
			line-height: 1;
			padding: 2px 8px;
			text-transform: uppercase;
		}

&-close,
		&-help {
			border-left: 1px solid rgba($color-white, 0.15);
			cursor: pointer;
			font-size: 18px;
			opacity: 0.15;
			padding: 4px 16px;
			transition: all 400ms ease-in-out;
	
			&:hover,
			&:active,
			&:focus {
				border-left: 1px solid rgba($color-white, 0.15);
				opacity: 1;
			}
		}

&-icons {
			display: flex;

.elemsnr-modal-help {
				border: 0;

&:hover,
				&:active,
				&:focus {
					border: 0;
				}
			}
		}

&-content {
			background-color: $color-dark-grey;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			padding: 8px;
		}

.elemsnr-media-modal {
			cursor: pointer;
		}

.elemsnr-button {
			background-color: $color-pink-5;
			border: 2px solid rgba($color-black, 0.15);
			border-radius: 4px;
			box-shadow: 2px 4px 16px 4px rgba($color-black, 0.15);
			color: $color-dark-grey;
			cursor: pointer;
			text-transform: uppercase;
			font-size: 11px;
			padding: 8px 16px;
			transition: all 200ms ease-in-out;

&:active {
				border: 2px inset $color-pink;
			}

&:hover,
			&:focus {
				box-shadow: 2px 4px 16px 4px rgba($color-black, 0.25);
				background-color: $color-pink-10;
			}
		}

&-button-group {
			display: flex;
			padding: 8px 16px 16px 16px;
	
			button {
	
				&:nth-child(1) {
					border-bottom-right-radius: 0;
					border-right: 1px solid rgba(	$color-black, 0.15);
					border-top-right-radius: 0;
				}
	
				&:nth-child(2) {
					background-color: $color-dark-grey;
					border: 0;
					color: $color-light-grey;
					border-bottom-left-radius: 0;
					border-top-left-radius: 0;

&:hover,
					&:focus {
						background-color: $color-black;
					}
				}
			}
		}
		
		.eicon-search-results {
			background: $color-pink;
			color: $color-dark-grey;
			border-radius: 50%;
			display: inline-block;
			line-height: 1;
			padding: 0.75em;
		}

.elemsnr-output-active {
			color: $color-light-grey;
			background-color: $color-black;
			border-radius: 8px;
			color: $color-light-grey;
			display: block;
			margin: 16px 12px 8px 12px;
			line-height: 24px;
			padding: 16px;

a {
				color: $color-pink;
				text-decoration: underline;
			}
		}

.elemsnr-row {
			display: flex;

.elemsnr-col {
				flex: 0 0 50%;
			}
		}

p {
			&.pro-note {
				border-top: 1px solid rgba($color-white, 0.15);
				margin-top: 12px;
				padding: 12px 16px;
				font-size: 13px;
				line-height: 20px;
				color: $color-light-grey;
				opacity: 0.5;

a {
					color: $color-white;
					text-decoration: underline;
				}
			}
		}

span {
			&.pro-only {
				&::after {
					content: 'PRO';
					font-size: 10px;
					margin: 0 2px;
					text-transform: uppercase;
					border-radius: 4px;
					background: $color-pink-10;
					color: $color-dark-grey;
					padding: 1px 4px;
					position: relative;
					top: -8px;
				}
			}
		}

label {
			align-items: center;
			cursor: pointer;
			display: flex;
			padding: 12px 16px;

&:hover,
			&:active,
			&:focus {
				opacity: 0.85;
			}

&[for="elemsnr-search-phrase"] {
				padding-bottom: 0;
				padding-top: 0;

.elemsnr-modal-button-group {
					button {
						padding: 6px 10px;
						font-size: 11px;

&:nth-child(1) {
							border-radius: 4px !important;
						}
					}
				}
			}

&[for="elemsnr-replace-with-phrase"] {
				padding-top: 0;
				padding-bottom: 0;
			}
			
			> div {
				display: flex;
				align-items: center;
			}
	
			i {
				font-size: 18px;
				margin-right: 8px;
				opacity: 0.15;
			}
	
			span {
				opacity: 0.75;
				transition: all 400ms ease-in-out;
				position: relative;
				display: flex;
				align-items: center;

&[data-tooltip] {
					opacity: 1;
				}

i {
					margin-left: 8px;
				}
			}
	
			input[type="checkbox"],
			input[type="radio"] {
				cursor: pointer;
				margin: 0 8px 0 0;
			}
	
			input[type="text"],
			input[type="url"] {
				background-color: $color-dark-grey;
				border-bottom: 2px solid transparent;
				padding: 16px 4px;
				border: 0;
				border-radius: 0;
				font-size: 14px;
	
				&::-webkit-input-placeholder,
				&::-moz-placeholder,
				&:-ms-input-placeholder,
				&::-ms-input-placeholder,
				&::placeholder {
					color: $color-light-grey;
					font-style: italic;
					opacity: 0.75;
				}
			}
		}

button[name="elemsnr-html-regexp-button"] {
			margin: 8px 16px 16px 16px;
			display: none;
		}

[data-tooltip] {
			position: relative;
			z-index: 9;
			cursor: pointer;
			text-align: center;

&:before,
			&:after {
				visibility: hidden;
				opacity: 0;
				pointer-events: none;
				position: absolute;
				z-index: 9;
				left: 0;
				bottom: 100%;
			}
		
			&:before {
				padding: 8px;
				border-radius: 4px;
				background-color: $color-black;
				color: $color-white;
				content: attr(data-tooltip);
				line-height: 1.4;
				font-size: 12px;
				text-align: left;
				width: 260px;
			}
		
			&:after {
				left: 18px;
				bottom: 90%;
				width: 0;
				border-top: 5px solid $color-black;
				border-right: 5px solid transparent;
				border-left: 5px solid transparent;
				content: " ";
				font-size: 0;
				line-height: 0;
			}
		
			&:hover:before,
			&:hover:after {
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

@keyframes elemsnr-loading {
	0% { width: 0; }
	10% { width: 10%; }
	20% { width: 20%; }
	30% { width: 30%; }
	40% { width: 40%; }
	50% { width: 50%; }
	60% { width: 60%; }
	70% { width: 70%; }
	80% { width: 80%; }
	90% { width: 90%; }
	100% { width: 100%; }
}

[+] ..
[-] elemsnr-search-replace.scss [edit]
[-] elemsnr-admin.scss [edit]
[+] variables