MAINHACK

Viewing / Editing File: notice.scss

$eps-box-notice-color: tints(500);
$eps-box-notice-dark-color: dark-tints(200);
$eps-box-notice-background-color: tints(100);
$eps-box-notice-dark-background-color: dark-tints(600);

$eps-notice-semantic-warning-color: theme-colors(warning);
$eps-notice-semantic-danger-color: theme-colors(danger);
$eps-notice-semantic-info-color: theme-colors(info);

$root: eps-notice;

.#{$root} {
	$parent: &;

--eps-box-notice-color: #{$eps-box-notice-color};
	--eps-box-notice-background-color: #{$eps-box-notice-background-color};

padding: spacing(10) spacing(16);
	box-shadow: $eps-box-shadow-1;
	background-color: var(--eps-box-notice-background-color);

&-semantic {
		border-inline-start: $eps-border-width-lg $border-style-solid var(--eps-notice-semantic-color);

#{$parent}__icon {
			color: var(--eps-notice-semantic-color);
			font-size: type(text,xl);
			margin-inline-end: spacing(12);
		}
	}

&--warning {
		--eps-notice-semantic-color: #{$eps-notice-semantic-warning-color};
	}

&--danger {
		--eps-notice-semantic-color: #{$eps-notice-semantic-danger-color};
	}

&--info {
		--eps-notice-semantic-color: #{$eps-notice-semantic-info-color};
	}

&__text {
		margin: 0;
		padding: 0;
		color: var(--eps-box-notice-color);
		font-style: italic;
	}

&__button-container {
		flex-shrink: 0;
		margin-left: spacing(20);
		width: auto;
	}
}

.eps-theme-dark {
	.#{$root} {
		--eps-box-notice-color: #{$eps-box-notice-dark-color};
		--eps-box-notice-background-color: #{$eps-box-notice-dark-background-color};
	}
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: notice.scss

Server Info

System Features