0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-12-01 11:41:20 +01:00
wagtail/client/scss/elements/_elements.scss
Thibaud Colas e33cdbf8db
Set up CSS LTR-RTL direction variable and fix incorrect transforms (#9914). Fix #9800
- Fix Draftail block toolbar trigger overlay in RTL mode
- Fix switch component rendering in RTL mode
- Fix panel header positioning in RTL mode
- Remove unused 404 styles
- Fix comments positioning in RTL mode
- Fix sidebar sub-menus transition direction
- Fix form side panels in RTL mode
- Fix minimap positioning in RTL mode
- Fix Draftail tooltips positioning in RTL mode
- Fix page explorer transition direction in RTL mode
- Set up CSS LTR-RTL direction variable
2023-01-19 12:06:43 +00:00

65 lines
1.2 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

*,
::before,
::after {
// Reset border styles so tailwinds default border class works as expected
// https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally
border-width: 0;
border-style: solid;
// Set all elements to inherit their parents (border-box) box-sizing.
box-sizing: inherit;
}
::before,
::after {
--tw-content: '';
}
// Default to LTR if `dir` is not set.
:root,
:host,
[dir='ltr'] {
// Flips the direction of `transform` declarations, based on whether the UI is LTR or RTL.
--w-direction-factor: 1;
}
[dir='rtl'] {
--w-direction-factor: -1;
}
html {
height: 100%;
// Set the whole admin to border-box by default.
box-sizing: border-box;
}
body {
overflow-x: hidden;
position: relative;
&:after {
content: '';
position: fixed;
transition: visibility 0s linear 0s, opacity 0.2s ease-out;
background: theme('colors.white-50');
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
z-index: 5;
opacity: 0;
visibility: hidden;
}
}
hr {
border: 1px solid $color-grey-4;
border-width: 1px 0 0;
margin: 1.5em 0;
}
// general image style
img {
max-width: 100%;
height: auto;
}