_elements.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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 of `transform` declarations, based on whether the UI is LTR or RTL.
  20. --w-direction-factor: 1;
  21. }
  22. [dir='rtl'] {
  23. --w-direction-factor: -1;
  24. }
  25. html {
  26. height: 100%;
  27. // Set the whole admin to border-box by default.
  28. box-sizing: border-box;
  29. // Display viewport overscroll areas in a theme-appropriate color.
  30. background-color: theme('colors.surface-page');
  31. }
  32. body {
  33. overflow-x: hidden;
  34. position: relative;
  35. &:after {
  36. content: '';
  37. position: fixed;
  38. transition:
  39. visibility 0s linear 0s,
  40. opacity 0.2s ease-out;
  41. background: theme('colors.white-50');
  42. width: 100%;
  43. height: 100%;
  44. top: 0;
  45. inset-inline-start: 0;
  46. z-index: 5;
  47. opacity: 0;
  48. visibility: hidden;
  49. }
  50. }
  51. hr {
  52. border: 1px solid theme('colors.border-furniture');
  53. border-width: 1px 0 0;
  54. margin: 1.5em 0;
  55. }
  56. // general image style
  57. img {
  58. max-width: 100%;
  59. height: auto;
  60. }