reset.scss 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  1. $WinWitdh:1200px;
  2. $BaseC:#555;
  3. $LinkC:#06f;
  4. $HoverC:#f60;
  5. $FontSize:13px;
  6. $fontFamily: "Spurce Han Sans,Wah Kang font,Microsoft YaHei";
  7. $allColor: #333; //正文#333
  8. $color1: #666; //辅助文字#666
  9. $color2: #999; //#999
  10. $color3: #ccc; //失效文字#ccc
  11. $color4: #00A0E8; //链接文字
  12. $color5: #8E9CC1; //表头文字加粗
  13. $colorList: ( 1:$color1, 2:$color2, 3:$color3, 4:$color4, 5:$color5);
  14. $theme1: #5BA7FF;
  15. $theme2: #FFF;
  16. $theme3: #8E9CC1;
  17. $themeList: (1:$theme1, 2:$theme2, 3:$theme3);
  18. $auxiliary1: #548FF0; //辅助色彩
  19. $auxiliary2: #FF4121;
  20. $auxiliary3: #7ED321;
  21. $auxiliary4: #F5A623;
  22. $auxiliaryList: ( 1:$auxiliary1, 2:$auxiliary2, 3:$auxiliary3, 4:$auxiliary4);
  23. $borderColor1: #C2CEDB; //线条色彩
  24. $borderColor2: #DDD;
  25. $borderColorList: (1:$borderColor1, 2:$borderColor2);
  26. $bg1: #FFF;
  27. $bg2: #F2FBFF;
  28. $bg3: #EEFAFF;
  29. $bg4: #FFF5E4;
  30. $bg5: #E5F6D3;
  31. $bgList: ( 1:$bg1, 2:$bg2, 3:$bg3, 4:$bg4, 5:$bg5);
  32. $allSize: 14px; //正常文字大小
  33. $size1: 12px; //辅助文字大小
  34. // mixins
  35. @mixin dz($time:0.25s) {
  36. -webkit-transition: all $time ease-in-out;
  37. -moz-transition: all $time ease-in-out;
  38. -o-transition: all $time ease-in-out;
  39. transition: all $time ease-in-out;
  40. }
  41. // .el-dialog__headerbtn {
  42. // top: -24px;
  43. // right: -24px;
  44. // width: 24px;
  45. // height: 24px;
  46. // border-radius: 50%;
  47. // color: #8E9CC1;
  48. // background-color: #fff;
  49. // }
  50. .el-dialog__header {
  51. border-bottom: 1px solid #C2CEDB;
  52. box-sizing: border-box;
  53. .el-dialog__title {
  54. height: 20px;
  55. line-height: 20px;
  56. font-size: 14px;
  57. }
  58. }
  59. // .el-button--mini,
  60. // .el-button--mini.is-round {
  61. // padding: 5px 20px;
  62. // }
  63. // .el-button {
  64. // box-sizing: border-box;
  65. // border-color: $auxiliary1;
  66. // }
  67. // .el-button span {
  68. // color: $color4;
  69. // }
  70. // .el-button:focus,
  71. // .el-button:hover {
  72. // background-color: $bg1;
  73. // border-color: $auxiliary1;
  74. // }
  75. // .el-button span {
  76. // display: inline-block;
  77. // line-height: 20px;
  78. // height: 20px;
  79. // }
  80. // * {
  81. // font-family: $fontFamily;
  82. // font-size: $allSize;
  83. // color: $allColor;
  84. // }
  85. // .color {
  86. // color: $allColor;
  87. // }
  88. // .el-input__inner:hover{
  89. // border-color:
  90. // }
  91. //文字色
  92. @each $i,
  93. $color in $colorList {
  94. .color#{$i} {
  95. color: $color;
  96. }
  97. }
  98. //主题色
  99. @each $i,
  100. $theme in $themeList {
  101. .theme#{$i} {
  102. background-color: $theme;
  103. }
  104. }
  105. //辅助背景色
  106. @each $i,
  107. $auxiliary in $auxiliaryList {
  108. .auxiliary#{$i} {
  109. background-color: $auxiliary;
  110. }
  111. }
  112. //辅助色
  113. @each $i,
  114. $auxiliary in $auxiliaryList {
  115. .auxiliary-color#{$i} {
  116. color: $auxiliary;
  117. }
  118. }
  119. //线条色
  120. @each $i,
  121. $borderColor in $borderColorList {
  122. .border-color#{$i} {
  123. border-color: $borderColor;
  124. }
  125. }
  126. //背景色
  127. @each $i,
  128. $bg in $bgList {
  129. .bg#{$i} {
  130. background-color: $bg;
  131. }
  132. }
  133. @for $i from 1 to 51 {
  134. .border-radius#{$i} {
  135. border-radius: #{$i}px;
  136. }
  137. }
  138. @for $i from 1 to 11 {
  139. .border#{$i} {
  140. border-width: #{$i}px;
  141. border-style: solid;
  142. }
  143. }
  144. // .color2 {
  145. // color: $color2;
  146. // }
  147. // .color3 {
  148. // color: $color3;
  149. // }
  150. // .color4 {
  151. // color: $color4;
  152. // }
  153. // .color5 {
  154. // color: $color5
  155. // }
  156. // @charset "UTF-8";
  157. body,
  158. ul,
  159. ol,
  160. dl,
  161. dd,
  162. h1,
  163. h2,
  164. h3,
  165. h4,
  166. h5,
  167. h6,
  168. pre,
  169. form,
  170. fieldset,
  171. legend,
  172. input,
  173. button,
  174. textarea,
  175. p,
  176. blockquote,
  177. table,
  178. th,
  179. td,
  180. menu {
  181. margin: 0;
  182. padding: 0
  183. }
  184. html,
  185. body,
  186. #app {
  187. height: 100%;
  188. width: 100%;
  189. }
  190. table {
  191. border-collapse: collapse;
  192. border-spacing: 0;
  193. table-layout: fixed
  194. }
  195. ul,
  196. ol,
  197. menu {
  198. list-style: none
  199. }
  200. fieldset,
  201. img {
  202. border: none
  203. }
  204. img,
  205. object,
  206. select,
  207. input,
  208. textarea,
  209. button {
  210. vertical-align: middle
  211. }
  212. input,
  213. textarea,
  214. select,
  215. address,
  216. caption,
  217. cite,
  218. code,
  219. dfn,
  220. em,
  221. i,
  222. b,
  223. strong,
  224. small,
  225. th,
  226. var,
  227. abbr {
  228. font-size: 100%;
  229. font-style: normal
  230. }
  231. caption,
  232. th {
  233. text-align: left;
  234. }
  235. article,
  236. aside,
  237. footer,
  238. header,
  239. hgroup,
  240. nav,
  241. section,
  242. figure,
  243. figcaption {
  244. display: block;
  245. }
  246. code,
  247. kbd,
  248. pre,
  249. samp,
  250. tt {
  251. font-family: Consolas, "Courier New", Courier, monospace;
  252. }
  253. address,
  254. cite,
  255. dfn,
  256. em,
  257. var,
  258. i {
  259. font-style: normal;
  260. }
  261. blockquote,
  262. q {
  263. quotes: none;
  264. }
  265. blockquote:before,
  266. blockquote:after,
  267. q:before,
  268. q:after {
  269. content: "";
  270. content: none;
  271. }
  272. a {
  273. color: $LinkC;
  274. text-decoration: none;
  275. cursor: pointer;
  276. &:link,
  277. &:visited,
  278. &:active {
  279. color: $LinkC;
  280. }
  281. &:hover,
  282. &:focus {
  283. color: $HoverC;
  284. text-decoration: underline;
  285. outline: none;
  286. }
  287. &,
  288. span,
  289. i,
  290. em,
  291. u,
  292. strong,
  293. b,
  294. p,
  295. img,
  296. ul,
  297. li,
  298. div,
  299. dd,
  300. dt,
  301. dl,
  302. ol,
  303. table,
  304. th,
  305. td,
  306. h1,
  307. h2,
  308. h3,
  309. h4,
  310. h5,
  311. h6,
  312. input,
  313. textarea,
  314. button,
  315. small,
  316. select {
  317. cursor: pointer;
  318. @include dz;
  319. }
  320. }
  321. abbr[title],
  322. acronym[title] {
  323. border-bottom: 1px dotted;
  324. cursor: help;
  325. }
  326. // base by fungleo
  327. html {
  328. min-width: $WinWitdh;
  329. // overflow-y: scroll;
  330. }
  331. body {
  332. font-size: $FontSize;
  333. color: $BaseC;
  334. line-height: 2;
  335. }
  336. body,
  337. button,
  338. input,
  339. select,
  340. textarea {
  341. font-family: tahoma, Helvetica, Arial, "\5FAE\8F6F\96C5\9ED1";
  342. *font-family: "\5FAE\8F6F\96C5\9ED1";
  343. }
  344. h1 {
  345. font-size: $FontSize+10;
  346. }
  347. h2 {
  348. font-size: $FontSize+8;
  349. }
  350. h3 {
  351. font-size: $FontSize+6;
  352. }
  353. h4 {
  354. font-size: $FontSize+4;
  355. }
  356. h5 {
  357. font-size: $FontSize+2;
  358. }
  359. h6 {
  360. font-size: $FontSize;
  361. }
  362. hr {
  363. border: none;
  364. height: 1px;
  365. background: lighten($BaseC, 50%);
  366. }
  367. .fl {
  368. float: left;
  369. }
  370. .fr {
  371. float: right;
  372. }
  373. .tl {
  374. text-align: left;
  375. }
  376. .tr {
  377. text-align: right;
  378. }
  379. .tc {
  380. text-align: center;
  381. }
  382. .cf:before,
  383. .cf:after,
  384. .web:before,
  385. .web:after,
  386. .web_:before,
  387. .web_:after {
  388. content: "";
  389. display: table;
  390. }
  391. .cf:after,
  392. .web:after,
  393. .web_:after {
  394. clear: both;
  395. }
  396. .cf {
  397. zoom: 1;
  398. }
  399. .web {
  400. width: $WinWitdh;
  401. margin-left: auto;
  402. margin-right: auto;
  403. zoom: 1;
  404. }
  405. .web_ {
  406. min-width: $WinWitdh;
  407. width: 100%;
  408. zoom: 1;
  409. }
  410. .block {
  411. display: block;
  412. }
  413. .none {
  414. display: none
  415. }
  416. .clear {
  417. clear: both;
  418. }
  419. .fl {
  420. float: left;
  421. }
  422. .disIne {
  423. display: inline-block;
  424. }
  425. input::-webkit-outer-spin-button,
  426. input::-webkit-inner-spin-button {
  427. -webkit-appearance: none;
  428. }
  429. input[type="number"]{
  430. -moz-appearance: textfield;
  431. }