2
0

_elements.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. *,
  2. ::before,
  3. ::after {
  4. // Reset border styles so tailwinds default border class works as expected
  5. // https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally
  6. border-width: 0;
  7. border-style: solid;
  8. // Set all elements to inherit their parent’s (border-box) box-sizing.
  9. box-sizing: inherit;
  10. }
  11. ::before,
  12. ::after {
  13. --tw-content: '';
  14. }
  15. // Default to LTR if `dir` is not set.
  16. :root,
  17. :host,
  18. [dir='ltr'] {
  19. // Flips the direction based on whether the UI is LTR or RTL. Used for:
  20. // - `transform` / `background-position` declarations for layout
  21. // - icons mirroring.
  22. // - Any other styles built with physical properties or values to mirror for RTL languages.
  23. --w-direction-factor: 1;
  24. }
  25. [dir='rtl'] {
  26. --w-direction-factor: -1;
  27. }
  28. html {
  29. height: 100%;
  30. // Set the whole admin to border-box by default.
  31. box-sizing: border-box;
  32. // Display viewport overscroll areas in a theme-appropriate color.
  33. background-color: theme('colors.surface-page');
  34. }
  35. body {
  36. overflow-x: hidden;
  37. position: relative;
  38. &:after {
  39. content: '';
  40. position: fixed;
  41. transition:
  42. visibility 0s linear 0s,
  43. opacity 0.2s ease-out;
  44. background: theme('colors.white-50');
  45. width: 100%;
  46. height: 100%;
  47. top: 0;
  48. inset-inline-start: 0;
  49. z-index: 5;
  50. opacity: 0;
  51. visibility: hidden;
  52. }
  53. }
  54. hr {
  55. border: 1px solid theme('colors.border-furniture');
  56. border-width: 1px 0 0;
  57. margin: 1.5em 0;
  58. }
  59. // general image style
  60. img {
  61. max-width: 100%;
  62. height: auto;
  63. }