reset.less 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. @import "var";
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. }
  6. html {
  7. font-size: @baseFontSize+1;
  8. font-family: Helvetica, "Microsoft Yahei", Menlo, Monaco, Consolas, "Courier New", monospace;
  9. // make sure min font size
  10. -ms-text-size-adjust: 100%;
  11. -webkit-text-size-adjust: 100%;
  12. line-height: @baseLineHeight;
  13. color: @baseFontColor;
  14. background-color: @baseBgColor;
  15. }
  16. input,
  17. textarea,
  18. select,
  19. option,
  20. button {
  21. font-family: Helvetica, "Microsoft Yahei", Menlo, Monaco, Consolas, "Courier New", monospace;
  22. }
  23. // html5 block elements
  24. article,
  25. aside,
  26. details,
  27. figcaption,
  28. figure,
  29. footer,
  30. header,
  31. main,
  32. nav,
  33. section,
  34. summary,
  35. .block {
  36. display: block;
  37. }
  38. .inline {
  39. display: inline;
  40. }
  41. .inline-block {
  42. display: inline-block;
  43. }
  44. .dis-table {
  45. display: table;
  46. }
  47. .dis-table-cell {
  48. display: table-cell;
  49. }
  50. .dis-flex {
  51. display: flex;
  52. }
  53. // html5 media elements
  54. audio,
  55. canvas,
  56. progress,
  57. video {
  58. display: inline-block;
  59. vertical-align: baseline;
  60. }
  61. audio:not([controls]) {
  62. display: none;
  63. height: 0;
  64. }
  65. // display hidden elements
  66. [hidden],
  67. template
  68. .hidden {
  69. display: none;
  70. }
  71. .opacity {
  72. opacity: 0;
  73. }
  74. .opacity-half {
  75. opacity: .5;
  76. }
  77. // links element
  78. a,
  79. .text-link {
  80. color: @linkColor;
  81. text-decoration: none;
  82. &:hover {
  83. color: @linkHoverColor;
  84. text-decoration: none;
  85. }
  86. &:focus {
  87. outline: none;
  88. }
  89. }
  90. // stylus elements
  91. b,
  92. strong,
  93. .text-bold {
  94. font-weight: bold;
  95. }
  96. dfn,
  97. .text-italic {
  98. font-style: italic;
  99. }
  100. // headers elements
  101. h1,
  102. .text-h1 {
  103. font-size: 2em;
  104. margin-bottom: 0.67em;
  105. }
  106. h2,
  107. .text-h2 {
  108. font-size: 1.6em;
  109. margin-bottom: 0.625em;
  110. }
  111. h3,
  112. .text-h3 {
  113. font: 1.2em;
  114. margin-bottom: 0.5em;
  115. }
  116. h4,
  117. h5,
  118. h6,
  119. .text-h4,
  120. .text-h5,
  121. .text-h6 {
  122. font-size: 1em;
  123. margin-bottom: .3em;
  124. }
  125. // text elements
  126. small,
  127. .text-small {
  128. font-size: .8em;
  129. }
  130. sub,
  131. sup,
  132. .text-sup,
  133. .text-sub {
  134. font-size: .7em;
  135. line-height: 0;
  136. position: relative;
  137. vertical-align: baseline;
  138. }
  139. sup,
  140. .text-sup {
  141. top: -0.5em;
  142. }
  143. sub,
  144. .text-sub {
  145. bottom: -0.25em;
  146. }
  147. .figure,
  148. .blockquote {
  149. margin: 1em 1.5em;
  150. }
  151. pre {
  152. overflow: auto;
  153. margin: 0;
  154. padding: .4em 1em;
  155. }
  156. code,
  157. kbd,
  158. pre,
  159. samp {
  160. font-family: monospace, monospace;
  161. font-size: 1em;
  162. }
  163. .text-left {
  164. text-align: left;
  165. }
  166. .text-right {
  167. text-align: right;
  168. }
  169. .text-center {
  170. text-align: center;
  171. }
  172. .list-no-style {
  173. list-style: none;
  174. }
  175. // image elements
  176. img {
  177. border: none;
  178. }
  179. svg:not(:root) {
  180. overflow: hidden;
  181. }
  182. // form elements
  183. label {
  184. font-weight: bold;
  185. }
  186. input,
  187. .ipt {
  188. padding: .6em;
  189. line-height: normal;
  190. border: 1px solid @iptBorderColor;
  191. &:focus {
  192. background-color: @iptFocusColor;
  193. outline: none;
  194. }
  195. }
  196. button {
  197. overflow: visible;
  198. padding: .6em 1.2em;
  199. }
  200. button,
  201. select {
  202. text-transform: none;
  203. &:focus {
  204. outline: none;
  205. }
  206. }
  207. button,
  208. input[type="button"],
  209. input[type="reset"],
  210. input[type="submit"] {
  211. -webkit-appearance: button;
  212. -moz-appearance: button;
  213. cursor: pointer;
  214. background-color: @btnBgColor;
  215. color: @btnFontColor;
  216. border: none;
  217. &:hover {
  218. background-color: @btnHoverBgColor;
  219. color: @btnHoverFontColor;
  220. }
  221. }
  222. button[disabled],
  223. html input[disabled] {
  224. cursor: default;
  225. }
  226. button::-moz-focus-inner,
  227. input::-moz-focus-inner {
  228. border: 0;
  229. padding: 0;
  230. }
  231. input[type="checkbox"],
  232. input[type="radio"] {
  233. box-sizing: border-box;
  234. padding: 0;
  235. }
  236. input[type="search"] {
  237. -webkit-appearance: textfield;
  238. -moz-appearance: textfield;
  239. -moz-box-sizing: content-box;
  240. -webkit-box-sizing: content-box;
  241. box-sizing: content-box;
  242. }
  243. fieldset {
  244. border: 1px solid @iptBorderColor;
  245. margin: 0 2px;
  246. padding: 0.4em 0.8em 0.8em;
  247. }
  248. legend {
  249. border: 0;
  250. padding: 0;
  251. }
  252. textarea {
  253. overflow: auto;
  254. border: 1px solid @iptBorderColor;
  255. padding: .6em;
  256. &:focus {
  257. background-color: @iptFocusColor;
  258. outline: none;
  259. }
  260. }
  261. optgroup {
  262. font-weight: bold;
  263. }
  264. // table elements
  265. table {
  266. border-collapse: collapse;
  267. border-spacing: 0;
  268. }
  269. td,
  270. th {
  271. padding: 0;
  272. }
  273. // hr element
  274. hr {
  275. -moz-box-sizing: content-box;
  276. box-sizing: content-box;
  277. height: 0;
  278. border: none;
  279. border-bottom: 1px solid @hrColor;
  280. margin-bottom: .75em;
  281. }
  282. // code element
  283. p {
  284. code {
  285. color: @inlineCodeColor;
  286. }
  287. }
  288. // radius element
  289. .radius {
  290. border-radius: .25em;
  291. }
  292. // truncate element
  293. .text-truncate {
  294. overflow: hidden;
  295. text-overflow: ellipsis;
  296. white-space: nowrap;
  297. display: inline-block;
  298. vertical-align: top;
  299. }
  300. // code elements
  301. pre {
  302. line-height: 1.6;
  303. overflow: auto;
  304. padding: 0;
  305. }