mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-30 18:34:40 +00:00
8aef7dca43
Instead of using static positioning which changes the behavior of absolutely positioned elements inside .mwe-popups (such as the footer and the pseudo-element pokey), use relative positioning but set the top, left, right, and bottom properties to zero. This more accurately simulates how the Popup actually behaves in production. Bug: T271763 Change-Id: I4b588667eaa761286a5381c4b31bee6a2aa427e8
57 lines
1.5 KiB
Plaintext
57 lines
1.5 KiB
Plaintext
/**
|
|
* 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;
|
|
}
|