22

✏️ Editing: _import-template.scss

.import-template-page {
	.cbw-body__content {
		position: relative;
	}
}
.cbw-import-template {
	text-align: center;
	padding: 0;
	&__msg {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 32px;
		padding: 16px;
		text-align: center;
		font-weight: 500;
		font-size: 15px;
		line-height: 18px;
		margin: -30px -40px 40px;
		&--hidden {
			opacity: 0;
		}
		&--success {
			background: $color__success-light;
			color: $color__success;
			&:before {
				@include margin(0, 5px, 0, 0);
				content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi40MDI2OCAxNEwxOCAxLjk0NjE5TDE2LjE4NzkgMEw2LjQwMjY4IDEwLjE3MDRMMS44MTIwOCA1LjM5OTFMMCA3LjI4MjUxTDYuNDAyNjggMTRaIiBmaWxsPSIjNDZCNDUwIi8+PC9zdmc+);
			}
		}
		&--error {
			background: $color__error-light;
			color: $color__error;
		}
	}
	&__name {
		font-weight: 500;
		font-size: 24px;
		line-height: 140%;
		color: $color__heading;
		padding: 0 0 8px;
	}
	&__thumb {
		padding: 0 0 30px;
		img {
			border-radius: 4px;
			border: 1px solid $color__border-in-panel;
		}
	}
	&__controls {
		display: flex;
		justify-content: center;
		align-items: center;
		.cx-vui-button {
			@include margin(0, 0, 0, 10px);
		}
		.cx-vui-input {
			width: 330px;
			padding: 11px 17px;
		}
	}
	&__footer {
		text-align: getValueByDirection(left, right);
		padding: 60px 0 0 0;
	}
}

MR SKB