_base.scss 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. /*!
  2. * ress.css • v4.0.0
  3. * MIT License
  4. * github.com/filipelinhares/ress
  5. */
  6. /* # =================================================================
  7. # Global selectors
  8. # ================================================================= */
  9. html {
  10. box-sizing: border-box;
  11. -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
  12. word-break: normal;
  13. -moz-tab-size: 4;
  14. tab-size: 4;
  15. }
  16. *,
  17. ::before,
  18. ::after {
  19. background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  20. box-sizing: inherit;
  21. }
  22. ::before,
  23. ::after {
  24. text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  25. vertical-align: inherit;
  26. }
  27. * {
  28. padding: 0; /* Reset `padding` and `margin` of all elements */
  29. margin: 0;
  30. }
  31. /* # =================================================================
  32. # General elements
  33. # ================================================================= */
  34. hr {
  35. overflow: visible; /* Show the overflow in Edge and IE */
  36. height: 0; /* Add the correct box sizing in Firefox */
  37. color: inherit; /* Correct border color in Firefox. */
  38. }
  39. details,
  40. main {
  41. display: block; /* Render the `main` element consistently in IE. */
  42. }
  43. summary {
  44. display: list-item; /* Add the correct display in all browsers */
  45. }
  46. small {
  47. font-size: 80%; /* Set font-size to 80% in `small` elements */
  48. }
  49. [hidden] {
  50. display: none; /* Add the correct display in IE */
  51. }
  52. abbr[title] {
  53. border-bottom: none; /* Remove the bottom border in Chrome 57 */
  54. /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  55. text-decoration: underline;
  56. text-decoration: underline dotted;
  57. }
  58. a {
  59. background-color: transparent; /* Remove the gray background on active links in IE 10 */
  60. }
  61. a:active,
  62. a:hover {
  63. outline-width: 0; /* Remove the outline when hovering in all browsers */
  64. }
  65. code,
  66. kbd,
  67. pre,
  68. samp {
  69. font-family: monospace, monospace; /* Specify the font family of code elements */
  70. }
  71. pre {
  72. font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
  73. }
  74. b,
  75. strong {
  76. font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
  77. }
  78. /* https://gist.github.com/unruthless/413930 */
  79. sub,
  80. sup {
  81. font-size: 75%;
  82. line-height: 0;
  83. position: relative;
  84. vertical-align: baseline;
  85. }
  86. sub {
  87. bottom: -0.25em;
  88. }
  89. sup {
  90. top: -0.5em;
  91. }
  92. table {
  93. border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
  94. text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
  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. user-select: none;
  106. }
  107. [type='number']::-webkit-inner-spin-button,
  108. [type='number']::-webkit-outer-spin-button {
  109. height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
  110. }
  111. [type='search'] {
  112. -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
  113. outline-offset: -2px; /* Correct the outline style in Safari */
  114. }
  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 #ccc;
  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. a:focus,
  178. button:focus,
  179. input:focus,
  180. select:focus,
  181. textarea:focus {
  182. outline-width: 0;
  183. }
  184. /* Style select like a standard input */
  185. select {
  186. -moz-appearance: none; /* Firefox 36+ */
  187. -webkit-appearance: none; /* Chrome 41+ */
  188. }
  189. select::-ms-expand {
  190. display: none; /* Internet Explorer 11+ */
  191. }
  192. select::-ms-value {
  193. color: currentColor; /* Internet Explorer 11+ */
  194. }
  195. legend {
  196. border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  197. color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  198. display: table; /* Correct the text wrapping in Edge and IE */
  199. max-width: 100%; /* Correct the text wrapping in Edge and IE */
  200. white-space: normal; /* Correct the text wrapping in Edge and IE */
  201. max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
  202. }
  203. ::-webkit-file-upload-button {
  204. /* Correct the inability to style clickable types in iOS and Safari */
  205. -webkit-appearance: button;
  206. color: inherit;
  207. font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
  208. }
  209. /* # =================================================================
  210. # Specify media element style
  211. # ================================================================= */
  212. img {
  213. border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
  214. }
  215. /* Add the correct vertical alignment in Chrome, Firefox, and Opera */
  216. progress {
  217. vertical-align: baseline;
  218. }
  219. /* # =================================================================
  220. # Accessibility
  221. # ================================================================= */
  222. /* Specify the progress cursor of updating elements */
  223. [aria-busy='true'] {
  224. cursor: progress;
  225. }
  226. /* Specify the pointer cursor of trigger elements */
  227. [aria-controls] {
  228. cursor: pointer;
  229. }
  230. /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
  231. [aria-disabled='true'] {
  232. cursor: default;
  233. }
  234. .disabled,
  235. :disabled{
  236. opacity: 0.3 !important;
  237. pointer-events: none !important;
  238. }
  239. .strengthen {
  240. box-shadow: inset 0 0 1px rgba(255,255,255,.5);
  241. border: 1px solid #000;
  242. }
  243. .strengthen-left {
  244. box-shadow: inset 0 0 1px rgba(255,255,255,.5);
  245. border-left: 1px solid #000;
  246. }
  247. .strengthen-right {
  248. box-shadow: inset 0 0 1px rgba(255,255,255,.5);
  249. border-right: 1px solid #000;
  250. }
  251. .strengthen-top {
  252. box-shadow: inset 0 0 1px rgba(255,255,255,.5);
  253. border-top: 1px solid #000;
  254. }
  255. .strengthen-bottom {
  256. box-shadow: inset 0 0 1px rgba(255,255,255,.5);
  257. border-bottom: 1px solid #000;
  258. }
  259. .fun-ctrl {
  260. transition: color .3s ease;
  261. cursor: pointer;
  262. color: rgba(255,255,255,0.6) !important;
  263. &:hover {
  264. color: rgba(255,255,255,1) !important;
  265. }
  266. &:active {
  267. color: var(--colors-primary-base) !important;
  268. }
  269. }
  270. .iconfont {
  271. font-weight: 400;
  272. }