_elements.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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. html {
  16. background: $color-grey-4;
  17. height: 100%;
  18. // Set the whole admin to border-box by default.
  19. box-sizing: border-box;
  20. }
  21. body {
  22. overflow-x: hidden;
  23. position: relative;
  24. &:after {
  25. content: '';
  26. position: fixed;
  27. transition: visibility 0s linear 0s, opacity 0.2s ease-out;
  28. background: theme('colors.white-50');
  29. width: 100%;
  30. height: 100%;
  31. top: 0;
  32. inset-inline-start: 0;
  33. z-index: 5;
  34. opacity: 0;
  35. visibility: hidden;
  36. }
  37. }
  38. hr {
  39. border: 1px solid $color-grey-4;
  40. border-width: 1px 0 0;
  41. margin: 1.5em 0;
  42. }
  43. // general image style
  44. img {
  45. max-width: 100%;
  46. height: auto;
  47. }
  48. // Reset border styles so tailwinds default border class works as expected
  49. // https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally
  50. *,
  51. ::before,
  52. ::after {
  53. border-width: 0;
  54. border-style: solid;
  55. }
  56. ::before,
  57. ::after {
  58. --tw-content: '';
  59. }