_reset.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /**
  2. * Reset specific elements to make them easier to style in other contexts.
  3. */
  4. html,
  5. body,
  6. p,
  7. ol,
  8. ul,
  9. li,
  10. dl,
  11. dt,
  12. dd,
  13. blockquote,
  14. figure,
  15. fieldset,
  16. form,
  17. legend,
  18. textarea,
  19. pre,
  20. iframe,
  21. hr,
  22. h1,
  23. h2,
  24. h3,
  25. h4,
  26. h5,
  27. h6 {
  28. padding: 0;
  29. margin: 0;
  30. -moz-osx-font-smoothing: grayscale;
  31. -webkit-font-smoothing: antialiased;
  32. }
  33. /**
  34. * Apply generic border-box to all elements.
  35. * See:
  36. * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  37. */
  38. /**
  39. * Apply border-box across the entire page.
  40. */
  41. html {
  42. box-sizing: border-box;
  43. }
  44. /**
  45. * Relax the definition a bit, to allow components to override it manually.
  46. */
  47. * {
  48. &,
  49. &::before,
  50. &::after {
  51. box-sizing: inherit;
  52. }
  53. }
  54. // HTML resets
  55. html {
  56. // Set mobile font-size to one step lower for mobile
  57. font-size: calc(var(--global--font-size-root) / var(--global--font-size-ratio)); /* #{$typescale-root / $typescale-ratio}; */
  58. font-family: var(--global--font-secondary);
  59. line-height: var(--global--line-height-body);
  60. // Set mobile and ^ font-size to normal root
  61. @include media(mobile) {
  62. font-size: var(--global--font-size-root);
  63. }
  64. }
  65. // body resets
  66. body {
  67. font-size: var(--global--font-size-base); /* #{$typescale-base}; */
  68. font-weight: normal;
  69. color: var(--global--color-foreground);
  70. text-align: left;
  71. background-color: var(--global--color-background);
  72. }
  73. // Links styles
  74. a {
  75. border-bottom: 1px solid var(--global--color-secondary);
  76. color: var(--global--color-primary);
  77. text-decoration: none;
  78. &:hover,
  79. &:focus {
  80. color: var(--global--color-primary-hover);
  81. }
  82. &:active {
  83. color: var(--global--color-primary);
  84. }
  85. }
  86. // Focus styles
  87. *:focus {
  88. outline-width: 1px;
  89. outline-style: dotted;
  90. outline-color: var(--global--color-secondary);
  91. }
  92. button,
  93. a {
  94. cursor: pointer;
  95. }