element-ui.scss 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. .el-dropdown-menu__item {
  2. font-size: 12px !important;
  3. line-height: 28px !important;
  4. }
  5. .el-card.is-always-shadow {
  6. box-shadow: none;
  7. border: none !important;
  8. }
  9. .el-scrollbar__view {
  10. height: 100%;
  11. }
  12. .el-menu--horizontal {
  13. border-bottom: none !important;
  14. }
  15. .el-menu {
  16. border-right: none !important;
  17. }
  18. .el-menu--display,
  19. .el-menu--display + .el-submenu__icon-arrow {
  20. display: none;
  21. }
  22. .el-message__icon,
  23. .el-message__content {
  24. display: inline-block;
  25. }
  26. .el-date-editor .el-range-input,
  27. .el-date-editor .el-range-separator {
  28. height: auto;
  29. overflow: hidden;
  30. }
  31. .el-dialog__wrapper {
  32. z-index: 2048;
  33. }
  34. .el-scrollbar__wrap {
  35. overflow-x: hidden;
  36. }
  37. // .el-col {
  38. // margin-bottom: 8px;
  39. // }
  40. .el-main {
  41. padding: 0 !important;
  42. }
  43. .el-dropdown-menu__item--divided:before,
  44. .el-menu,
  45. .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
  46. .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
  47. .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  48. background-color: transparent !important;
  49. }
  50. .el-menu--horizontal > .el-menu-item {
  51. height: 40px !important;
  52. line-height: 40px !important;
  53. }
  54. .el-card__header {
  55. padding: 6px 18px !important;
  56. }
  57. .el-color-picker__color {
  58. border: 1px solid #fff !important;
  59. }
  60. // ------------------- 老样式
  61. /*输入框共通样式,带校验*/
  62. .el-input--medium .el-input__inner {
  63. height: 32px;
  64. background-color: #fff;
  65. line-height: 32px;
  66. border-radius: 4px;
  67. }
  68. .el-form-item.is-success .el-input__inner,
  69. .el-form-item.is-success .el-input__inner:focus,
  70. .el-form-item.is-success .el-textarea__inner,
  71. .el-form-item.is-success .el-textarea__inner:focus {
  72. border-color: #ccc;
  73. }
  74. .el-form-item.is-error .el-input__inner,
  75. .el-form-item.is-error .el-input__inner:focus,
  76. .el-form-item.is-error .el-textarea__inner,
  77. .el-form-item.is-error .el-textarea__inner:focus {
  78. border-color: #ff4949 !important;
  79. }
  80. .el-tooltip__popper {
  81. max-width: 400px;
  82. }
  83. .el-input__inner:focus {
  84. outline: none;
  85. border-color: #ccc;
  86. }
  87. .el-select .el-input.is-focus .el-input__inner {
  88. border-color: #ccc;
  89. }
  90. .el-select .el-input__inner:focus {
  91. border-color: #ccc;
  92. }
  93. .el-select-dropdown__item.hover,
  94. .el-select-dropdown__item:hover {
  95. background-color: #f5f7fa;
  96. }
  97. /* 内容框禁止伸缩*/
  98. .el-textarea__inner {
  99. resize: none !important;
  100. }
  101. /*列表共通*/
  102. .el-tab-pane {
  103. .main-list {
  104. padding: 0;
  105. /deep/ .el-tag {
  106. background-color: #fffafa00;
  107. border-color: #d2e2fb00;
  108. }
  109. /deep/ .el-table__body-wrapper {
  110. min-height: auto;
  111. overflow-y: auto;
  112. }
  113. }
  114. }
  115. /*表格样式*/
  116. .el-table {
  117. thead {
  118. height: 40px;
  119. }
  120. td,
  121. th {
  122. padding: 0 !important;
  123. cursor: pointer;
  124. }
  125. th > .cell {
  126. line-height: 42px;
  127. font-size: 12px !important;
  128. }
  129. .cell {
  130. display: -webkit-box;
  131. -webkit-box-orient: vertical;
  132. -webkit-line-clamp: 2;
  133. overflow: hidden;
  134. max-height: 50px;
  135. font-size: 12px;
  136. // text-overflow: ellipsis;
  137. // overflow: hidden;
  138. // white-space: nowrap;
  139. .el-input {
  140. width: 95%;
  141. }
  142. }
  143. &__row {
  144. height: 50px;
  145. }
  146. &__header-wrapper,
  147. &__footer-wrapper {
  148. overflow: hidden;
  149. }
  150. &__empty-text {
  151. line-height: 60px;
  152. width: 50%;
  153. }
  154. }
  155. .el-popper[x-placement^='bottom'] {
  156. max-height: 500px;
  157. margin-top: 0px;
  158. }
  159. .el-dropdown-menu {
  160. overflow-y: auto;
  161. }
  162. .el-dropdown-menu[x-placement^='top'] {
  163. .popper__arrow {
  164. display: none;
  165. }
  166. overflow-y: unset;
  167. }
  168. /*表格样式结束*/
  169. // .el-table--striped .el-table__body tr.el-table__row--striped td {
  170. // background: #fff;
  171. // }
  172. /* 灰色input框*/
  173. /* 标题共通*/
  174. .label-box {
  175. display: block;
  176. clear: both;
  177. .label-title {
  178. font-size: 16px;
  179. color: #333;
  180. font-weight: bold;
  181. display: inline-block;
  182. padding: 15px;
  183. padding-left: 0;
  184. &::before {
  185. content: '|';
  186. font-size: 16px;
  187. border-left: 4px solid #1d6ced;
  188. color: #fff;
  189. }
  190. }
  191. }
  192. /*日期*/
  193. .el-date-editor .el-range-separator {
  194. padding: 0 16px !important;
  195. }
  196. .el-date-editor.el-input--medium {
  197. .el-input__suffix {
  198. right: 30px;
  199. top: -2px;
  200. }
  201. }
  202. /*按钮*/
  203. .left-button-container {
  204. width: 100%;
  205. // height: 50px;
  206. overflow: hidden;
  207. text-align: left;
  208. // padding: 0 25px;
  209. overflow: hidden;
  210. position: relative;
  211. // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  212. background-color: #fff;
  213. right: 0;
  214. z-index: 8;
  215. }
  216. // .el-button--primary {
  217. // background-color: $blue;
  218. // }
  219. .el-button--primary:hover,
  220. .el-button--primary:focus {
  221. background: $hoverBlue;
  222. border-color: $hoverBlue;
  223. color: #ffffff;
  224. }
  225. .el-button--default:hover,
  226. .el-button--default:focus {
  227. color: $blue;
  228. border-color: $borderBlue;
  229. background-color: #e8f0fd;
  230. }
  231. .el-button--medium.is-round {
  232. font-size: 12px;
  233. border-radius: 16px;
  234. }
  235. .small-button-container {
  236. height: 50px;
  237. text-align: right;
  238. padding-right: 10px;
  239. position: relative;
  240. width: -webkit-fill-available;
  241. width: -moz-available;
  242. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  243. background-color: #fff;
  244. right: 0;
  245. z-index: 8;
  246. .el-button {
  247. margin-top: 10px;
  248. }
  249. }
  250. .big-button-container {
  251. height: 50px;
  252. overflow: hidden;
  253. display: inline-block;
  254. text-align: right;
  255. padding-right: 10px;
  256. overflow: hidden;
  257. position: relative;
  258. width: -webkit-fill-available;
  259. -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  260. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  261. background-color: #fff;
  262. right: 0;
  263. z-index: 8;
  264. .el-button {
  265. margin-top: 10px;
  266. }
  267. }
  268. /* 确认提示框*/
  269. .el-message-box__btns {
  270. .el-button--primary {
  271. background-color: #1d6ced;
  272. color: #fff;
  273. }
  274. .el-button--small {
  275. padding: 9px 25px;
  276. }
  277. }
  278. /*inputnumber样式*/
  279. .el-input-number__increase,
  280. .el-input-number__decrease {
  281. height: 30px !important;
  282. line-height: 32px;
  283. }
  284. .el-input-number .el-input {
  285. line-height: 32px;
  286. }
  287. .el-input-number .el-input__inner {
  288. height: 32px;
  289. line-height: 32px;
  290. }
  291. .el-select {
  292. .el-input__inner {
  293. border: 1px solid #ccc !important;
  294. padding: 0 15px !important;
  295. font-size: 12px !important;
  296. }
  297. }
  298. .el-date-editor.el-input,
  299. .el-date-editor.el-input__inner,
  300. .el-input-number--small {
  301. width: 100% !important;
  302. }
  303. .el-picker-panel.el-date-picker.el-popper {
  304. .el-date-table {
  305. font-size: 14px !important;
  306. }
  307. }
  308. .el-form-item--small .el-form-item__label,
  309. .el-form-item--small .el-form-item__content {
  310. line-height: 40px !important;
  311. }
  312. .el-button--medium,
  313. .el-button--small {
  314. padding: 0px 20px !important;
  315. height: 32px;
  316. // line-height: 30px;
  317. font-size: 12px;
  318. border-radius: 4px;
  319. }
  320. .right {
  321. .el-dropdown {
  322. // font-size: 12px;
  323. // line-height: 20px;
  324. // height: 20px;
  325. .el-dropdown-link {
  326. font-size: 12px;
  327. }
  328. }
  329. .el-checkbox {
  330. margin-left: 10px;
  331. margin-right: 0;
  332. height: 20px;
  333. line-height: 20px;
  334. }
  335. }
  336. .el-tabs__header {
  337. margin: 0 !important;
  338. }
  339. .el-loading-mask {
  340. background-color: rgba(212, 212, 212, 0.3) !important;
  341. }
  342. .el-collapse-item__header{
  343. background-color: #eeeeee;
  344. padding: 0 10px;
  345. }