_reset.scss 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. @use '../settings';
  2. @use '../tools';
  3. /*!
  4. * ress.css • v2.0.4
  5. * MIT License
  6. * github.com/filipelinhares/ress
  7. */
  8. @if (settings.$reset) {
  9. @include tools.layer('reset') {
  10. /* # =================================================================
  11. # Global selectors
  12. # ================================================================= */
  13. html {
  14. box-sizing: border-box;
  15. overflow-y: scroll; /* All browsers without overlaying scrollbars */
  16. -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
  17. word-break: normal;
  18. -moz-tab-size: 4;
  19. tab-size: 4;
  20. }
  21. *,
  22. ::before,
  23. ::after {
  24. background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  25. box-sizing: inherit;
  26. }
  27. ::before,
  28. ::after {
  29. text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  30. vertical-align: inherit;
  31. }
  32. * {
  33. padding: 0; /* Reset `padding` and `margin` of all elements */
  34. margin: 0;
  35. }
  36. /* # =================================================================
  37. # General elements
  38. # ================================================================= */
  39. hr {
  40. overflow: visible; /* Show the overflow in Edge and IE */
  41. height: 0; /* Add the correct box sizing in Firefox */
  42. }
  43. details,
  44. main {
  45. display: block; /* Render the `main` element consistently in IE. */
  46. }
  47. summary {
  48. display: list-item; /* Add the correct display in all browsers */
  49. }
  50. small {
  51. font-size: 80%; /* Set font-size to 80% in `small` elements */
  52. }
  53. [hidden] {
  54. display: none; /* Add the correct display in IE */
  55. }
  56. abbr[title] {
  57. border-bottom: none; /* Remove the bottom border in Chrome 57 */
  58. /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  59. text-decoration: underline;
  60. text-decoration: underline dotted;
  61. }
  62. a {
  63. background-color: transparent; /* Remove the gray background on active links in IE 10 */
  64. }
  65. a:active,
  66. a:hover {
  67. outline-width: 0; /* Remove the outline when hovering in all browsers */
  68. }
  69. code,
  70. kbd,
  71. pre,
  72. samp {
  73. font-family: monospace, monospace; /* Specify the font family of code elements */
  74. }
  75. pre {
  76. font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
  77. }
  78. b,
  79. strong {
  80. font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
  81. }
  82. /* https://gist.github.com/unruthless/413930 */
  83. sub,
  84. sup {
  85. font-size: 75%;
  86. line-height: 0;
  87. position: relative;
  88. vertical-align: baseline;
  89. }
  90. sub {
  91. bottom: -0.25em;
  92. }
  93. sup {
  94. top: -0.5em;
  95. }
  96. /* # =================================================================
  97. # Forms
  98. # ================================================================= */
  99. input {
  100. border-radius: 0;
  101. }
  102. /* Replace pointer cursor in disabled elements */
  103. [disabled] {
  104. cursor: default;
  105. }
  106. [type="number"]::-webkit-inner-spin-button,
  107. [type="number"]::-webkit-outer-spin-button {
  108. height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
  109. }
  110. [type="search"] {
  111. -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
  112. outline-offset: -2px; /* Correct the outline style in Safari */
  113. }
  114. [type="search"]::-webkit-search-cancel-button,
  115. [type="search"]::-webkit-search-decoration {
  116. -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
  117. }
  118. textarea {
  119. overflow: auto; /* Internet Explorer 11+ */
  120. resize: vertical; /* Specify textarea resizability */
  121. }
  122. button,
  123. input,
  124. optgroup,
  125. select,
  126. textarea {
  127. font: inherit; /* Specify font inheritance of form elements */
  128. }
  129. optgroup {
  130. font-weight: bold; /* Restore the font weight unset by the previous rule */
  131. }
  132. button {
  133. overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
  134. }
  135. button,
  136. select {
  137. text-transform: none; /* Firefox 40+, Internet Explorer 11- */
  138. }
  139. /* Apply cursor pointer to button elements */
  140. button,
  141. [type="button"],
  142. [type="reset"],
  143. [type="submit"],
  144. [role="button"] {
  145. cursor: pointer;
  146. color: inherit;
  147. }
  148. /* Remove inner padding and border in Firefox 4+ */
  149. button::-moz-focus-inner,
  150. [type="button"]::-moz-focus-inner,
  151. [type="reset"]::-moz-focus-inner,
  152. [type="submit"]::-moz-focus-inner {
  153. border-style: none;
  154. padding: 0;
  155. }
  156. /* Replace focus style removed in the border reset above */
  157. button:-moz-focusring,
  158. [type="button"]::-moz-focus-inner,
  159. [type="reset"]::-moz-focus-inner,
  160. [type="submit"]::-moz-focus-inner {
  161. outline: 1px dotted ButtonText;
  162. }
  163. button,
  164. html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
  165. [type="reset"],
  166. [type="submit"] {
  167. -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
  168. }
  169. /* Remove the default button styling in all browsers */
  170. button,
  171. input,
  172. select,
  173. textarea {
  174. background-color: transparent;
  175. border-style: none;
  176. }
  177. /* Style select like a standard input */
  178. select {
  179. -moz-appearance: none; /* Firefox 36+ */
  180. -webkit-appearance: none; /* Chrome 41+ */
  181. }
  182. select::-ms-expand {
  183. display: none; /* Internet Explorer 11+ */
  184. }
  185. select::-ms-value {
  186. color: currentColor; /* Internet Explorer 11+ */
  187. }
  188. legend {
  189. border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  190. color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  191. display: table; /* Correct the text wrapping in Edge and IE */
  192. max-width: 100%; /* Correct the text wrapping in Edge and IE */
  193. white-space: normal; /* Correct the text wrapping in Edge and IE */
  194. max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
  195. }
  196. ::-webkit-file-upload-button {
  197. /* Correct the inability to style clickable types in iOS and Safari */
  198. -webkit-appearance: button;
  199. color: inherit;
  200. font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
  201. }
  202. // Remove default password icon in EdgeHTML (#537)
  203. ::-ms-clear,
  204. ::-ms-reveal {
  205. display: none
  206. }
  207. /* # =================================================================
  208. # Specify media element style
  209. # ================================================================= */
  210. img {
  211. border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
  212. }
  213. /* Add the correct vertical alignment in Chrome, Firefox, and Opera */
  214. progress {
  215. vertical-align: baseline;
  216. }
  217. /* # =================================================================
  218. # Accessibility
  219. # ================================================================= */
  220. /* Hide content from screens but not screenreaders */
  221. @media screen {
  222. [hidden~="screen"] {
  223. display: inherit;
  224. }
  225. [hidden~="screen"]:not(:active):not(:focus):not(:target) {
  226. position: absolute !important;
  227. clip: rect(0 0 0 0) !important;
  228. }
  229. }
  230. /* Specify the progress cursor of updating elements */
  231. [aria-busy="true"] {
  232. cursor: progress;
  233. }
  234. /* Specify the pointer cursor of trigger elements */
  235. [aria-controls] {
  236. cursor: pointer;
  237. }
  238. /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
  239. [aria-disabled="true"] {
  240. cursor: default;
  241. }
  242. }
  243. }