_elements.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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: visibility 0s linear 0s, opacity 0.2s ease-out;
  39. background: theme('colors.white-50');
  40. width: 100%;
  41. height: 100%;
  42. top: 0;
  43. inset-inline-start: 0;
  44. z-index: 5;
  45. opacity: 0;
  46. visibility: hidden;
  47. }
  48. }
  49. hr {
  50. border: 1px solid theme('colors.border-furniture');
  51. border-width: 1px 0 0;
  52. margin: 1.5em 0;
  53. }
  54. // general image style
  55. img {
  56. max-width: 100%;
  57. height: auto;
  58. }