mediawiki-extensions-Popups/.storybook/mocks/custom.less

/**
 * These are custom styles designed to supplement styles produced
 * by ResourceLoad or MediaWiki-core.
 **/
@import './mediawiki.ui/components/icons.less';
@import './production-icons.less';

html,
body {
	height: 100%;
	font-family: sans-serif;
}

#root {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 50px;
	padding: 20px;
}

/**
 * Stopping the fade animation to avoid the animation appearing
 * whenever a user types into the "knob" fields and the popup rerenders.
 * NOTE: To test the animation, remove these rules.
 */
.mwe-popups-fade-in-up {
	-webkit-animation: none;
	animation: none;
}

.mwe-popups-fade-in-down {
	-webkit-animation: none;
	animation: none;
}

/* show popups by default */
.mwe-popups {
	display: block;
	// overrides the popups default "position:absolute" styling
	// so they align naturally within the flexbox parent. Use relative instead of
	// static so that absolutely positioned children elements can still accurately
	// position themselves.
	position: relative;
	// Override the top, left, bottom, right properties so that the absolute
	// positioning doesn't take effect in storybook.
	/* stylelint-disable-next-line  declaration-no-important */
	top: 0 !important;
	/* stylelint-disable-next-line  declaration-no-important */
	right: 0 !important;
	/* stylelint-disable-next-line  declaration-no-important */
	bottom: 0 !important;
	/* stylelint-disable-next-line  declaration-no-important */
	left: 0 !important;
}