mailymaily/src/scss/component.scss

$animation-speed: 0.4s;
$overlay-bg-color: rgba(0, 0, 0, 0.4);
$radius: 8px;
$success-bg-color: #1f9d55;
$success-color: #fff;

$modal-border-radius: $radius;
$modal-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

$modal-head-bg-color: #fff;
$modal-head-padding-x: 20px;
$modal-head-padding-y: 10px;

$modal-title-color: #303131;
$modal-title-font-family: sans-serif;
$modal-title-font-size: 120%;
$modal-title-font-weight: 700;

$modal-close-color-1: #aaa;
$modal-close-color-2: #000;
$modal-close-font-size: 38px;
$modal-close-top: -4px;

$modal-content-bg-color: #f1f5f8;
$modal-body-padding: 20px;

$button-bg-color: #fff;
$button-border-radius: $radius;
$button-border: none;
$button-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
$button-color: #333;
$button-margin-bottom: 20px;
$button-hover-bg-color: #555;
$button-hover-color: #fff;
$button-padding-x: 20px;
$button-padding-y: 15px;

$button-icon-height: 24px;
$button-icon-top: 0px;
$button-icon-width: 24px;

$button-copy-border: $button-border;

$email-bg-color: #d8dcdf;
$email-box-shadow: unset;
$email-color: #48494a;
$email-margin-top: 20px;

$brand-color: #888;
$brand-font-size: 80%;

.mailymaily-modal {
	background-color: #000;
	background-color: $overlay-bg-color;
	bottom: 0;
	color: #303131;
	display: none;
	height: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.mailymaily-modal-content {
	animation: mailymaily-appear $animation-speed;
	background-color: $modal-content-bg-color;
	border-radius: $modal-border-radius;
	bottom: auto;
	box-shadow: $modal-box-shadow;
	left: 50%;
	max-height: calc(100% - 100px);
	overflow: auto;
	padding: 0;
	position: fixed;
	right: -45%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.mailymaily-modal-content:focus,
.mailymaily-modal-content:hover {
	overflow-y: auto;
}

@media only screen and (min-width: 768px) {
	.mailymaily-modal-content {
		right: auto;
	}
}

.mailymaily-modal-head {
	align-items: center;
	background-color: $modal-head-bg-color;
	clear: both;
	display: flex;
	min-width: 0;
	padding: $modal-head-padding-y $modal-head-padding-x;
}

.mailymaily-modal-title {
	color: $modal-title-color;
	flex: 1;
	font-family: $modal-title-font-family;
	font-size: $modal-title-font-size;
	font-weight: $modal-title-font-weight;
	margin: 0;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mailymaily-modal-close {
	color: $modal-close-color-1;
	flex: initial;
	font-size: $modal-close-font-size;
	margin-left: 20px;
	position: relative;
	text-align: right;
	text-decoration: none;
	top: $modal-close-top;
}

.mailymaily-modal-close:focus,
.mailymaily-modal-close:hover {
	color: $modal-close-color-2;
	cursor: pointer;
	font-weight: 700;
	outline: 0;
}

.mailymaily-modal-body {
	height: 100%;
	padding: $modal-body-padding;
}

.mailymaily-button {
	color: $button-color;
	text-decoration: none;
}

.mailymaily-button:focus {
	outline: 0;
}

.mailymaily-button:focus .mailymaily-button-content {
	background-color: #555;
	color: #fff;
}

.mailymaily-button-content {
	background-color: $button-bg-color;
	border: $button-border;
	border-radius: $button-border-radius;
	box-shadow: $button-box-shadow;
	margin-bottom: $button-margin-bottom;
	overflow: hidden;
	padding: $button-padding-y $button-padding-x;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mailymaily-button-content:hover {
	background-color: $button-hover-bg-color;
	color: $button-hover-color;
}

.mailymaily-button:last-child .mailymaily-button-content {
	margin-bottom: 0;
}

.mailymaily-button-icon {
	display: inline-block;
	font-weight: 700;
	position: relative;
	top: $button-icon-top;
}

.mailymaily-button-icon svg {
	height: $button-icon-height;
	width: $button-icon-width;
}

.mailymaily-button-text {
	display: inline-block;
	margin-left: 0px;
	position: relative;
	top: -2px;
	vertical-align: sub;
}

.mailymaily-copy {
	border-radius: $button-border-radius;
	box-shadow: $button-box-shadow;
	height: 59px;
	margin-top: $email-margin-top;
	position: relative;
}

.mailymaily-button-copy {
	background-color: $button-bg-color;
	border: $button-copy-border;
	border-bottom-left-radius: $button-border-radius;
	border-top-left-radius: $button-border-radius;
	bottom: 21px;
	color: $button-color;
	font-size: 100%;
	height: 100%;
	left: 0;
	overflow: false;
	padding: 15px 20px;
	position: absolute;
	text-overflow: ellipsis;
	top: 0;
	white-space: nowrap;
	width: 130px;
}

.mailymaily-button-copy:focus,
.mailymaily-button-copy:hover {
	background-color: $button-hover-bg-color;
	color: $button-hover-color;
	cursor: pointer;
	outline: 0;
}

.mailymaily-button-copy-clicked,
.mailymaily-button-copy-clicked:focus,
.mailymaily-button-copy-clicked:hover {
	background-color: $success-bg-color;
	color: $success-color;
}

.mailymaily-button-copy-clicked .mailymaily-button-icon,
.mailymaily-button-copy-clicked:focus .mailymaily-button-icon,
.mailymaily-button-copy-clicked:hover .mailymaily-button-icon {
	display: none;
	visibility: hidden;
}

.mailymaily-button-copy-clicked .mailymaily-button-text,
.mailymaily-button-copy-clicked:focus .mailymaily-button-text,
.mailymaily-button-copy-clicked:hover .mailymaily-button-text {
	color: #fff;
	top: 2px;
}

.mailymaily-email-address {
	background-color: $email-bg-color;
	border: none;
	border-radius: $button-border-radius;
	box-shadow: $email-box-shadow;
	box-sizing: border-box;
	color: $email-color;
	font-size: 100%;
	height: 100%;
	overflow: hidden;
	padding: 20px 20px 20px 140px;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.mailymaily-brand {
	color: $brand-color;
	font-size: $brand-font-size;
	margin-top: 20px;
	text-align: center;
}

.mailymaily-brand a {
	color: $brand-color;
}

.mailymaily-brand a:focus,
.mailymaily-brand a:hover {
	font-weight: 700;
	outline: 0;
}

.mailymaily-no-scroll {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.mailymaily-is-hidden {
	display: none;
	visibility: hidden;
}

@keyframes mailymaily-appear {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0, 0);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1, 1);
	}
}