mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-27 17:00:37 +00:00
a0754c8cf9
Provide containers for page previews examples In storybook we avoid position absolute but this deviation from how they behave in reality could lead to subtle differences that impact the rendering of previews. It also doesn't allow to see the preview in the context of the link which is an important part of visually verifying the position of the pokey arrow. This also allows us to rethink the broken RTL mode. We now scope LTR rules to a LTR class that is present on the container, and use the CSSJanus parsed stylesheet for RTL. Change-Id: I189019824ddd6aa759790fd162ffcd543619a953
64 lines
1.1 KiB
Plaintext
64 lines
1.1 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 */
|
|
.popups-storybook-example {
|
|
border: solid 1px #aaa;
|
|
padding: 8px;
|
|
display: flex;
|
|
width: 500px;
|
|
height: 550px;
|
|
position: relative;
|
|
|
|
&-tall {
|
|
width: 500px;
|
|
height: 300px;
|
|
}
|
|
|
|
&-flipped-y > .popups-storybook-link {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
&-flipped-x {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.mwe-popups {
|
|
display: block;
|
|
}
|
|
}
|