react-toast-master 2.1.3 → 2.1.4

package/src/components/footer/LoadFooter.jsx

@@ -1,22 +0,0 @@
-import "../styles/textColor.css";
-import "../styles/breakPoints.css";
-
-const LoadFooter = ({ toastAlignment, toastBG, loadFooter }) => (
-	<div className={`_footer toast_width reveal_ani ${toastAlignment} ${toastBGClasses[toastBG]}`}>
-		{loadFooter}
-	</div>
-);
-
-const toastBGClasses = {
-	dark: "footer_dark",
-	warning: "footer_dark",
-	white: "footer_white",
-	info: "footer_info",
-	error: "footer_error",
-	success: "footer_success",
-	gray: "footer_success",
-	glass: "footer_success",
-	transparent: "footer_success",
-};
-
-export default LoadFooter;

package/src/components/functions/animation.js

@@ -1,41 +0,0 @@
-/**
- * Returns the animation that should be used when hiding a toast, based on the
- * current animation and position of the toast.
- *
- * @param {String} toastAnimation The animation that is currently being used to show the toast.
- * @param {String} toastPG The position of the toast (top/bottom/topFull/bottomFull).
- * @returns {String} The animation that should be used to hide the toast.
- */
-export const getAnimation = (toastAnimation, toastPG) => {
-	let animation;
-
-	switch (toastAnimation) {
-		case "ani_top":
-			animation = "ani_slide_out_up";
-			break;
-		case "ani_down":
-			animation = "ani_slide_out_down";
-			break;
-		case "ani_left":
-			animation = "ani_slide_out_left";
-			break;
-		case "ani_right":
-			animation = "ani_slide_out_right";
-			break;
-		case "ani_jelly":
-			animation = "ani_jelly_out";
-			break;
-		case "ani_zoom":
-			animation = "ani_zoom_out";
-			break;
-		default:
-			animation = "ani_fade_out";
-	}
-
-	// Check if the toast is full and apply the appropriate animation
-	if (toastPG === "bottomFull" || toastPG === "topFull") {
-		animation = "ani_fade_out_full";
-	}
-
-	return animation;
-};

package/src/components/styles/animation.css

@@ -1,256 +0,0 @@
-.outer_container {
-	position: fixed;
-	display: flex;
-	width: 100%;
-	pointer-events: none;
-}
-
-.inner_container {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	pointer-events: all;
-}
-
-/* 
-	     		reveal animation css 
-*/
-.outer_container.ani_down {
-	animation: slide_down 0.5s ease forwards;
-}
-.outer_container.ani_top {
-	animation: slide_up 0.5s ease forwards;
-}
-.outer_container.ani_left {
-	animation: slide_left 0.5s ease forwards;
-}
-.outer_container.ani_right {
-	animation: slide_right 0.5s ease forwards;
-}
-.outer_container.ani_fade {
-	animation: fade_in 0.5s ease forwards;
-}
-.outer_container.ani_zoom {
-	animation: zoom_in 0.8s ease forwards;
-}
-.outer_container.ani_jelly {
-	animation: jelly 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.475) forwards;
-}
-
-/* 
-	     		reveal animation 
-*/
-@keyframes slide_down {
-	from {
-		transform: translateY(-150%);
-	}
-	to {
-		transform: translateY(0);
-	}
-}
-
-@keyframes slide_up {
-	from {
-		transform: translateY(150%);
-	}
-	to {
-		transform: translateY(0);
-	}
-}
-
-@keyframes slide_left {
-	from {
-		transform: translateX(-100%);
-	}
-	to {
-		transform: translateX(0);
-	}
-}
-
-@keyframes slide_right {
-	from {
-		transform: translateX(100%);
-	}
-	to {
-		transform: translateX(0);
-	}
-}
-
-@keyframes fade_in {
-	from {
-		scale: 0.975;
-		opacity: 0.2;
-	}
-	to {
-		opacity: 1;
-		scale: 1;
-	}
-}
-
-@keyframes zoom_in {
-	from {
-		scale: 0.9;
-		opacity: 0;
-	}
-	to {
-		scale: 1;
-		scale: 1;
-	}
-}
-@keyframes jelly {
-	from {
-		transform: rotateX(90deg);
-		scale: 0.93;
-	}
-	to {
-		transform: rotateX(0deg);
-		scale: 1;
-	}
-}
-
-/* 
-	     		closing animation css
-*/
-.outer_container.ani_fade_out {
-	animation: fade_out 0.5s ease forwards;
-}
-.outer_container.ani_zoom_out {
-	animation: zoom_out 0.5s ease-out forwards;
-}
-.outer_container.ani_slide_out_down {
-	animation: slide_out_down 0.5s ease forwards;
-}
-.outer_container.ani_slide_out_up {
-	animation: slide_out_up 0.5s ease forwards;
-}
-.outer_container.ani_slide_out_left {
-	animation: slide_out_left 0.5s ease forwards;
-}
-.outer_container.ani_slide_out_right {
-	animation: slide_out_right 0.5s ease forwards;
-}
-.outer_container.ani_jelly_out {
-	animation: jelly_out 0.5s ease forwards;
-}
-
-/* 
-	     		closing animation 
-*/
-
-@keyframes slide_out_down {
-	from {
-		transform: translateY(0);
-	}
-	to {
-		transform: translateY(-200%);
-	}
-}
-
-@keyframes slide_out_up {
-	from {
-		transform: translateY(0);
-	}
-	to {
-		transform: translateY(200%);
-	}
-}
-
-@keyframes slide_out_left {
-	from {
-		transform: translateX(0);
-	}
-	to {
-		transform: translateX(-100%);
-	}
-}
-
-@keyframes slide_out_right {
-	from {
-		transform: translateX(0);
-	}
-	to {
-		transform: translateX(100%);
-	}
-}
-
-@keyframes fade_out {
-	from {
-		opacity: 1;
-		scale: 1;
-	}
-	to {
-		opacity: 0;
-		scale: 0.95;
-	}
-}
-
-@keyframes zoom_out {
-	from {
-		scale: 1;
-		opacity: 1;
-	}
-	to {
-		scale: 0.9;
-		opacity: 0;
-	}
-}
-
-@keyframes jelly_out {
-	from {
-		transform: rotateX(0deg);
-		scale: 1;
-		opacity: 1;
-	}
-	to {
-		transform: rotateX(40deg);
-		scale: 0.95;
-		opacity: 0;
-	}
-}
-
-/* 
-	this css style is used when the toast is using full width "bottomFull" ||"topFull" 
-*/
-.outer_container.ani_fade_out_full {
-	animation: fade_out_full 0.5s ease forwards;
-}
-
-@keyframes fade_out_full {
-	from {
-		opacity: 1;
-	}
-	to {
-		opacity: 0;
-	}
-}
-
-.reveal_ani {
-	animation: revealFooter 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
-}
-
-@keyframes revealFooter {
-	from {
-		opacity: 0;
-		transform: translateY(-150%);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-.overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: glass;
-	transition: background-color 0.35s ease-in-out;
-	z-index: 9997;
-	backdrop-filter: blur(0.7px);
-}
-
-.overlay.show {
-	background-color: rgba(12, 12, 12, 0.63);
-}

package/src/components/styles/background.css

@@ -1,52 +0,0 @@
-/* background */
-.bg_white {
-	background-color: #ffffff;
-	border: 1px solid #dddddd;
-}
-.bg_error {
-	background-color: #dc2626;
-	border: 1px solid #d14f4f;
-}
-.bg_dark {
-	background-color: #141318;
-	border: 1px solid #35383d;
-}
-.bg_gray {
-	background-color: #495668;
-	border: 1px solid #97a5b9;
-}
-.bg_glass {
-	background: #ffffff38 !important;
-	backdrop-filter: blur(7px) !important;
-	-webkit-backdrop-filter: blur(7px) !important;
-	border: 1px solid rgba(255, 255, 255, 0.18) !important;
-}
-.bg_success {
-	background-color: #07bc0c;
-	border: 1px solid #007e33;
-}
-
-.bg_warning {
-	background-color: #edc319;
-	border: 1px solid #ff8800;
-}
-
-.bg_info {
-	background-color: #007fff;
-	border: 1px solid #146fb9;
-}
-
-.bg_transparent {
-	background-color: transparent;
-	border: 1px solid #ffffff;
-}
-
-.bg_darker {
-	color: rgb(231, 231, 231);
-}
-.bg_whiter {
-	color: #536075;
-}
-.bg_glass_close {
-	color: #ffffff;
-}

package/src/components/styles/border.css

@@ -1,44 +0,0 @@
-/* border radius */
-.rounded_none {
-	border-radius: 0rem;
-}
-.rounded_md {
-	border-radius: 0.375rem;
-}
-.rounded_sm {
-	border-radius: 0.125rem;
-}
-.rounded_lg {
-	border-radius: 0.5rem;
-}
-.rounded_xl {
-	border-radius: 0.75rem;
-}
-.rounded_2xl {
-	border-radius: 1rem;
-}
-.rounded_full {
-	border-radius: 9999px;
-}
-
-.border_white {
-	border: 1px solid #fff;
-}
-.border_dark {
-	border: 1px solid #141318;
-}
-.border_success {
-	border: 1px solid #22c55e;
-}
-.border_error {
-	border: 1px solid #dc2626;
-}
-.border_warning {
-	border: 1px solid #edc319;
-}
-.border_info {
-	border: 1px solid #2196f3;
-}
-.border_neutral {
-	border: 1px solid rgba(136, 136, 136, 0.651);
-}

package/src/components/styles/breakPoints.css

@@ -1,237 +0,0 @@
-/* xl */
-@media screen and (min-width: 1280px) and (max-width: 5120px) {
-	.toast_width {
-		padding: 0.725rem 2.3rem;
-	}
-	.max_width {
-		width: 475px;
-		overflow: hidden;
-	}
-	.toast_width_confirm {
-		padding: 1.1rem 1.5rem;
-	}
-	.toast_message {
-		align-items: center;
-		font-size: 1.04rem;
-		line-height: 1.3rem;
-		font-weight: 600;
-		white-space: normal;
-		column-gap: 1rem;
-	}
-
-	/* footer */
-	._footer {
-		white-space: break-spaces;
-		display: flex;
-		border-top-width: 1px;
-		border-top-style: solid;
-		font-weight: 400;
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-		padding: 0.325rem 2.3rem;
-	}
-
-	.confirm_div {
-		font-size: 1rem;
-		line-height: 1.5rem;
-		display: flex;
-		align-items: center;
-		margin-top: 0.75rem;
-		color: #374151;
-		font-weight: 500;
-		column-gap: 0.75rem;
-	}
-
-	/* 
-	     		this css is being used in the InnerFooter component 
-	*/
-	.innerFooter {
-		white-space: break-spaces;
-		display: flex;
-		font-weight: 400;
-		font-size: 0.875rem;
-		padding: 0.625rem 0rem;
-		line-height: 1.25rem;
-	}
-}
-
-/* medium display */
-@media screen and (min-width: 768px) and (max-width: 1279px) {
-	.toast_message {
-		flex-direction: row;
-		column-gap: 0.8rem;
-		font-size: 1rem;
-		line-height: 1.3rem;
-		font-weight: 600;
-		align-items: center;
-	}
-	.toast_width {
-		padding: 0.425rem 2rem;
-	}
-	.toast_width_confirm {
-		padding: 1rem 1.5rem;
-	}
-	.max_width {
-		width: 445px;
-		overflow: hidden;
-	}
-	/* footer */
-	._footer {
-		white-space: break-spaces;
-		display: flex;
-		border-top-width: 1px;
-		border-top-style: solid;
-
-		font-weight: 400;
-		font-size: 0.8rem;
-		line-height: 1.25rem;
-		padding: 0.325rem 2rem;
-	}
-
-	.confirm_div {
-		font-size: 1rem;
-		line-height: 1.5rem;
-		display: flex;
-		align-items: center;
-		margin-top: 0.75rem;
-		color: #374151;
-		font-weight: 500;
-		column-gap: 0.75rem;
-	}
-
-	/* 
-	     		this css is being used in the InnerFooter component 
-	*/
-	.innerFooter {
-		white-space: break-spaces;
-		display: flex;
-		font-weight: 400;
-		font-size: 0.8rem;
-		line-height: 1.25rem;
-		padding: 0.6rem 0rem;
-	}
-}
-
-/* small display */
-@media screen and (min-width: 481px) and (max-width: 767px) {
-	.toast_message {
-		flex-direction: row;
-		font-size: 17px;
-		line-height: 1.4rem;
-		font-weight: 500;
-		gap: 0rem 0.75rem;
-		align-items: center;
-	}
-	.toast_width {
-		padding: 0.425rem 2.2rem;
-	}
-	.toast_width_confirm {
-		padding: 1rem 1.5rem;
-	}
-	.max_width {
-		width: 390px;
-		overflow: hidden;
-	}
-	/* footer */
-	._footer {
-		white-space: break-spaces;
-		display: flex;
-		border-top-width: 1px;
-		border-top-style: solid;
-
-		font-weight: 400;
-		font-size: 13px;
-		line-height: 1.2rem;
-		padding: 0.35rem 2.2rem;
-	}
-	.confirm_div {
-		font-size: 1rem;
-		line-height: 1.5rem;
-		display: flex;
-		align-items: center;
-		margin-top: 0.75rem;
-		color: #374151;
-		font-weight: 500;
-		column-gap: 0.75rem;
-	}
-
-	/* 
-	     		this css is being used in the InnerFooter component 
-	*/
-	.innerFooter {
-		font-size: 14px;
-		letter-spacing: -0.4px;
-		padding: 0.625rem 0rem;
-	}
-}
-
-@media screen and (min-width: 120px) and (max-width: 480px) {
-	.toast_width {
-		padding: 0.425rem 1.1rem;
-	}
-	.toast_width_confirm {
-		padding: 0.925rem 0.875rem;
-	}
-	.max_width {
-		width: 95vw;
-		overflow: hidden;
-	}
-	/* footer */
-	._footer {
-		white-space: break-spaces;
-		display: flex;
-		border-top-width: 1px;
-		border-top-style: solid;
-		font-weight: 400;
-		font-size: 13px;
-		line-height: 1.1rem;
-		padding: 0.325rem 0.575rem;
-		letter-spacing: -0.5px;
-	}
-	.toast_message {
-		flex-direction: row;
-		align-items: center;
-		gap: 0rem 0.6rem;
-		font-size: 16px;
-		line-height: 1.25rem;
-		font-weight: 500;
-		letter-spacing: -0.4px;
-	}
-
-	/* confirm toast component styles */
-	.confirm_div {
-		display: flex;
-		flex-direction: column-reverse;
-		align-items: center;
-		margin-top: 0.75rem;
-		color: #374151;
-		font-weight: 500;
-		row-gap: 0.37rem;
-		font-size: 13.5px;
-		line-height: 1.25rem;
-		width: 100%;
-	}
-
-	/* 
-	     		this css is being used in the InnerFooter component 
-	*/
-	.innerFooter {
-		font-size: 13.5px;
-		letter-spacing: -0.6px;
-		padding: 0.725rem 0rem;
-	}
-}
-
-.toast_message {
-	display: flex;
-	position: relative;
-}
-
-/* Reset styles for <p> tags inside the .toast component */
-p {
-	margin-block-start: 0;
-	margin-block-end: 0;
-	margin-inline-start: 0;
-	margin-inline-end: 0;
-	unicode-bidi: initial;
-}