_reset.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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. /**
  55. * HTML resets
  56. */
  57. html {
  58. // Set mobile font-size to one step lower for mobile
  59. font-size: #{map-deep-get($config-global, "font", "size", "root") / map-deep-get($config-global, "font", "size", "ratio")};
  60. @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
  61. line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
  62. // Set mobile and ^ font-size to normal root
  63. @include media(mobile) {
  64. font-size: #{map-deep-get($config-global, "font", "size", "root")};
  65. }
  66. }
  67. body {
  68. font-size: #{map-deep-get($config-global, "font", "size", "base")};
  69. font-weight: normal;
  70. color: #{map-deep-get($config-global, "color", "foreground", "default")};
  71. text-align: left;
  72. background-color: #{map-deep-get($config-global, "color", "background", "default")};
  73. }
  74. /**
  75. * Links styles
  76. */
  77. a {
  78. color: #{map-deep-get($config-global, "color", "primary", "default")};
  79. &:hover {
  80. color: #{map-deep-get($config-global, "color", "primary", "hover")};
  81. }
  82. .has-primary-background-color &:not(.has-text-color) {
  83. color: #{map-deep-get($config-global, "color", "background", "default")};
  84. }
  85. }
  86. button,
  87. a {
  88. cursor: pointer;
  89. }