_reset.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. // ==========================================================================
  2. // RESET
  3. // ==========================================================================
  4. @use '../abstracts/variables' as v;
  5. @use 'sass:map';
  6. @use 'sass:color';
  7. // Box sizing, margins, and padding
  8. *, *::before, *::after {
  9. box-sizing: border-box;
  10. margin: 0;
  11. padding: 0;
  12. }
  13. // HTML and body
  14. html {
  15. font-size: 16px;
  16. -webkit-text-size-adjust: 100%;
  17. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  18. scroll-behavior: smooth;
  19. }
  20. body {
  21. margin: 0;
  22. font-family: v.$font-family-sans;
  23. font-size: map.get(v.$font-sizes, 'base');
  24. font-weight: map.get(v.$font-weights, 'regular');
  25. line-height: 1.6;
  26. color: v.$dark-gray;
  27. -webkit-font-smoothing: antialiased;
  28. -moz-osx-font-smoothing: grayscale;
  29. overflow-x: hidden;
  30. }
  31. // Links
  32. a {
  33. color: v.$primary;
  34. text-decoration: none;
  35. background-color: transparent;
  36. transition: v.$transition-base;
  37. &:hover {
  38. color: color.scale(v.$primary, $lightness: -15%);
  39. text-decoration: none;
  40. }
  41. }
  42. // Images
  43. img, svg {
  44. vertical-align: middle;
  45. max-width: 100%;
  46. height: auto;
  47. }
  48. // Lists
  49. ul, ol {
  50. list-style: none;
  51. padding: 0;
  52. margin: 0;
  53. }
  54. // Form elements
  55. button, input, optgroup, select, textarea {
  56. font-family: inherit;
  57. font-size: inherit;
  58. line-height: inherit;
  59. margin: 0;
  60. }
  61. button, input {
  62. overflow: visible;
  63. }
  64. button, select {
  65. text-transform: none;
  66. }
  67. // Buttons
  68. button,
  69. [type="button"],
  70. [type="reset"],
  71. [type="submit"] {
  72. cursor: pointer;
  73. }
  74. // Tables
  75. table {
  76. border-collapse: collapse;
  77. width: 100%;
  78. }
  79. // Focus outline
  80. :focus {
  81. outline: 0;
  82. }
  83. // Remove Chrome's autofill background
  84. input:-webkit-autofill,
  85. input:-webkit-autofill:hover,
  86. input:-webkit-autofill:focus,
  87. input:-webkit-autofill:active {
  88. transition: background-color 5000s ease-in-out 0s;
  89. }
  90. // Clearfix
  91. .clearfix::after {
  92. content: "";
  93. display: table;
  94. clear: both;
  95. }