MAINHACK

Viewing / Editing File: modal.scss

$eps-modal-background-color: theme-colors(light);
$eps-modal-width: px-to-rem(700);
$eps-modal-border-radius: $eps-radius;
$eps-modal-overlay: rgba(theme-colors(dark), $opacity-05);
$eps-modal-zindex: $eps-zindex-modal-backdrop;
$eps-modal-header-type: type(text, md);
$eps-modal-header-background-color: theme-colors(info);
$eps-modal-header-color: theme-colors(light);
$eps-modal-header-height: spacing(44);
$eps-modal-header-padding: spacing(10) spacing(16);
$eps-modal-header-border-radius: $eps-radius;
$eps-modal-icon-spacing: spacing(10);
$eps-modal-body-padding: spacing(30);
$eps-modal-close-button-spacing: spacing(16);
$eps-modal-close-button-border: solid 1px theme-colors(light);
$eps-modal-animation: $eps-pop-animation;
$eps-tip-padding-start: spacing(12);
$eps-tip-border-start: 3px solid theme-colors(info);
$eps-tip-margin-bottom: spacing(30);
$eps-tip-margin-top: spacing(30);

:root {
	--eps-modal-background-color: #{$eps-modal-background-color};
	--eps-modal-header-background-color: #{$eps-modal-header-background-color};
}

// Dark

$eps-dark-modal-background-color: dark-tints(700);
$eps-dark-modal-header-background-color: dark-theme-colors(info);

.eps-theme-dark {
	--eps-modal-background-color: #{$eps-dark-modal-background-color};
	--eps-modal-header-background-color: #{$eps-dark-modal-header-background-color};
}

/** ----------------------------------------------------------------
	EPS Modal
---------------------------------------------------------------- */

.#{$eps-prefix}modal {
	max-width: $eps-modal-width;
	background: var(--eps-modal-background-color);
	border-radius: $eps-modal-border-radius;
	animation: $eps-modal-animation;

&__overlay {
		background: $eps-modal-overlay;
		position: fixed;
		display: flex;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		z-index: $eps-modal-zindex;
	}

&__header {
		font-size: $eps-modal-header-type;
		background: var(--eps-modal-header-background-color);
		height: $eps-modal-header-height;
		padding: $eps-modal-header-padding;
		border-radius: $eps-modal-header-border-radius;

&,
		& .title {
			color: $eps-modal-header-color;
		}
	}

&__icon {
		margin-inline-end: $eps-modal-icon-spacing;
	}

&__body {
		padding: $eps-modal-body-padding;
	}

&__tip, .#{$eps-prefix}tip {
		padding-inline-start: $eps-tip-padding-start;
		border-inline-start: $eps-tip-border-start;
		&:not(:last-child) {
			margin-bottom: $eps-tip-margin-bottom;
		}

&:not(:first-child) {
			margin-top: $eps-tip-margin-top;
		}
	}

&__section:not(:first-child) {
		margin-top: spacing(30);
	}

&__close-wrapper {
		padding-inline-start: $eps-modal-close-button-spacing;
		border-inline-start: $eps-modal-close-button-border;
	}
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: modal.scss

Server Info

System Features