fui.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540
  1. /**
  2. * 所有构件样式规则
  3. **/
  4. /**
  5. * FUI 通用样式定义
  6. */
  7. /*------------ var*/
  8. /*------------ mixin*/
  9. .fui-widget {
  10. -webkit-user-select: none;
  11. -khtml-user-select: none;
  12. -moz-user-select: none;
  13. -ms-user-select: none;
  14. user-select: none;
  15. -webkit-user-drag: none;
  16. color: #000000;
  17. line-height: 1.5;
  18. font-size: 12px;
  19. font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  20. -webkit-font-smoothing: antialiased;
  21. outline: none;
  22. display: inline-block;
  23. vertical-align: top;
  24. position: relative;
  25. top: 0;
  26. left: 0;
  27. }
  28. .fui-widget.fui-selectable {
  29. -webkit-user-select: text;
  30. -khtml-user-select: text;
  31. -moz-user-select: text;
  32. -ms-user-select: text;
  33. user-select: text;
  34. -webkit-user-drag: text;
  35. }
  36. .fui-widget * {
  37. -webkit-user-select: none;
  38. -khtml-user-select: none;
  39. -moz-user-select: none;
  40. -ms-user-select: none;
  41. user-select: none;
  42. -webkit-user-drag: none;
  43. }
  44. .fui-widget.fui-disabled {
  45. opacity: 0.3!important;
  46. }
  47. .fui-widget.fui-hide {
  48. display: none!important;
  49. }
  50. .fui-widget.fui-mask-animate {
  51. -webkit-transition: all 0.2s;
  52. }
  53. .fui-widget.fui-mask-hint {
  54. -webkit-transform: perspective(600px) translateZ(30px);
  55. }
  56. /**
  57. * 容器类通用样式
  58. **/
  59. /**
  60. * FUI 通用样式定义
  61. */
  62. /*------------ var*/
  63. /*------------ mixin*/
  64. .fui-container {
  65. overflow: hidden;
  66. position: relative;
  67. top: 0;
  68. left: 0;
  69. }
  70. .fui-container.fui-disabled {
  71. opacity: 1!important;
  72. }
  73. /**
  74. * FUI 通用样式定义
  75. */
  76. /*------------ var*/
  77. /*------------ mixin*/
  78. .fui-button-menu {
  79. border: 1px solid white;
  80. }
  81. .fui-button-menu:HOVER {
  82. border-color: #d5e1f2;
  83. }
  84. .fui-button-menu.fui-button-active {
  85. border-color: #d5e1f2;
  86. background: #d5e1f2;
  87. }
  88. .fui-button-menu.fui-button-active .fui-button {
  89. background: #d5e1f2;
  90. }
  91. .fui-button-menu.fui-layout-top,
  92. .fui-button-menu.fui-layout-bottom {
  93. text-align: center;
  94. }
  95. .fui-button-menu.fui-layout-top .fui-open-btn,
  96. .fui-button-menu.fui-layout-bottom .fui-open-btn {
  97. display: block;
  98. }
  99. /**
  100. * 通用button
  101. */
  102. /**
  103. * FUI 通用样式定义
  104. */
  105. /*------------ var*/
  106. /*------------ mixin*/
  107. .fui-button {
  108. overflow: hidden;
  109. cursor: default;
  110. font-size: 0;
  111. }
  112. .fui-button ._layout .fui-label {
  113. display: block;
  114. }
  115. .fui-button ._layout .fui-icon {
  116. display: block;
  117. }
  118. .fui-button .fui-icon {
  119. display: inline-block;
  120. vertical-align: middle;
  121. }
  122. .fui-button .fui-label {
  123. display: inline-block;
  124. vertical-align: middle;
  125. }
  126. .fui-button.fui-button-layout-top .fui-label {
  127. display: block;
  128. }
  129. .fui-button.fui-button-layout-top .fui-icon {
  130. display: block;
  131. }
  132. .fui-button.fui-button-layout-bottom .fui-label {
  133. display: block;
  134. }
  135. .fui-button.fui-button-layout-bottom .fui-icon {
  136. display: block;
  137. }
  138. .fui-button:HOVER {
  139. background-color: #d5e1f2 !important;
  140. color: #000000 !important;
  141. }
  142. .fui-button:ACTIVE {
  143. background-color: #87a9da !important;
  144. color: #000000 !important;
  145. }
  146. .fui-button.fui-disabled:HOVER {
  147. background-color: #ffffff !important;
  148. color: #000000 !important;
  149. }
  150. .fui-button.fui-disabled:ACTIVE {
  151. background-color: #ffffff !important;
  152. color: #000000 !important;
  153. }
  154. /**
  155. * FUI 通用样式定义
  156. */
  157. /*------------ var*/
  158. /*------------ mixin*/
  159. .fui-colorpicker {
  160. background-color: #fff;
  161. }
  162. .fui-colorpicker-container {
  163. border: 1px solid #d3d3d3;
  164. }
  165. .fui-colorpicker-container .fui-colorpicker-title {
  166. background: #eee;
  167. padding: 2px 4px;
  168. }
  169. .fui-colorpicker-container .fui-colorpicker-colors {
  170. margin: 0;
  171. padding: 0;
  172. font-size: 0;
  173. line-height: 0;
  174. }
  175. .fui-colorpicker-container .fui-colorpicker-colors-line0 {
  176. margin-bottom: 3px;
  177. }
  178. .fui-colorpicker-container .fui-colorpicker-item {
  179. display: inline-block;
  180. margin: 0 2px;
  181. width: 13px;
  182. height: 13px;
  183. border-style: solid;
  184. border-width: 1px;
  185. }
  186. .fui-colorpicker-container .fui-colorpicker-commoncolor,
  187. .fui-colorpicker-container .fui-colorpicker-standardcolor {
  188. margin: 4px 3px;
  189. white-space: nowrap;
  190. }
  191. .fui-colorpicker-container .fui-colorpicker-toolbar {
  192. margin: 4px;
  193. height: 27px;
  194. }
  195. .fui-colorpicker-container .fui-colorpicker-toolbar .fui-colorpicker-preview {
  196. display: inline-block;
  197. height: 25px;
  198. line-height: 25px;
  199. width: 120px;
  200. border: 1px solid #d3d3d3;
  201. }
  202. .fui-colorpicker-container .fui-colorpicker-toolbar .fui-colorpicker-clear {
  203. display: inline-block;
  204. height: 25px;
  205. line-height: 25px;
  206. width: 60px;
  207. border: 1px solid #d3d3d3;
  208. font-size: 12px;
  209. text-align: center;
  210. position: absolute;
  211. right: 5px;
  212. cursor: pointer;
  213. }
  214. /**
  215. * FUI 通用样式定义
  216. */
  217. /*------------ var*/
  218. /*------------ mixin*/
  219. /**
  220. * 通用button
  221. */
  222. /**
  223. * FUI 通用样式定义
  224. */
  225. /*------------ var*/
  226. /*------------ mixin*/
  227. .fui-dialog {
  228. position: fixed;
  229. top: -1000000px;
  230. left: -100000px;
  231. border: 1px solid #B1B1B1;
  232. background: #fff;
  233. }
  234. .fui-dialog .fui-panel-content {
  235. width: auto!important;
  236. height: auto!important;
  237. padding: 2px;
  238. }
  239. .fui-dialog .fui-dialog-caption {
  240. margin: 0;
  241. padding: 5px;
  242. font-size: 16px;
  243. font-weight: normal;
  244. line-height: 1;
  245. display: inline-block;
  246. }
  247. .fui-dialog .fui-dialog-head .fui-close-button {
  248. float: right;
  249. }
  250. .fui-dialog .fui-dialog-head .fui-close-button .fui-close-button-icon {
  251. width: 16px;
  252. height: 16px;
  253. background: url("images/close.png") no-repeat 0 0;
  254. }
  255. /**
  256. * FUI 通用样式定义
  257. */
  258. /*------------ var*/
  259. /*------------ mixin*/
  260. .fui-drop-panel {
  261. border: 1px solid #d3d3d3;
  262. overflow: hidden;
  263. position: relative;
  264. }
  265. .fui-drop-panel .fui-drop-panel-content {
  266. display: inline-block;
  267. }
  268. .fui-drop-panel .fui-drop-panel-placeholder {
  269. display: none;
  270. }
  271. .fui-drop-panel .fui-drop-panel-button {
  272. border-left: 1px solid #d3d3d3;
  273. visibility: visible;
  274. }
  275. .fui-drop-panel .fui-drop-panel-button:HOVER {
  276. border-color: #d5e1f2;
  277. }
  278. .fui-drop-panel .fui-drop-panel-button:ACTIVE {
  279. border-color: #87a9da;
  280. }
  281. .fui-drop-panel:HOVER {
  282. border-color: #d5e1f2;
  283. }
  284. .fui-drop-panel:HOVER .fui-drop-panel-button {
  285. border-left-color: #d5e1f2;
  286. }
  287. .fui-drop-panel:ACTIVE {
  288. border-color: #87a9da;
  289. }
  290. .fui-drop-panel:ACTIVE .fui-drop-panel-button {
  291. border-left-color: #d5e1f2;
  292. }
  293. .fui-drop-panel.fui-drop-panel-open {
  294. overflow: visible;
  295. }
  296. .fui-drop-panel.fui-drop-panel-open .fui-drop-panel-content {
  297. border: 1px solid #d3d3d3;
  298. position: absolute;
  299. top: -1px;
  300. left: -1px;
  301. }
  302. .fui-drop-panel.fui-drop-panel-open .fui-drop-panel-button {
  303. visibility: hidden;
  304. }
  305. .fui-drop-panel.fui-drop-panel-open .fui-drop-panel-placeholder {
  306. display: inline-block;
  307. }
  308. .fui-drop-panel-popup {
  309. border: 1px solid #d3d3d3;
  310. }
  311. .fui-drop-panel-popup:HOVER {
  312. border-color: #d5e1f2;
  313. }
  314. .fui-drop-panel-popup:HOVER .fui-drop-panel-button {
  315. border-left-color: #d5e1f2;
  316. }
  317. .fui-drop-panel-popup:ACTIVE {
  318. border-color: #87a9da;
  319. }
  320. .fui-drop-panel-popup:ACTIVE .fui-drop-panel-button {
  321. border-left-color: #d5e1f2;
  322. }
  323. .fui-icon {
  324. text-align: center;
  325. font-size: 0;
  326. }
  327. .fui-icon img {
  328. display: inline-block;
  329. }
  330. /**
  331. * FUI 通用样式定义
  332. */
  333. /*------------ var*/
  334. /*------------ mixin*/
  335. .fui-input-button {
  336. border: 1px solid #ababab;
  337. }
  338. .fui-input-button .fui-input {
  339. vertical-align: middle;
  340. border: none!important;
  341. }
  342. .fui-input-button .fui-button {
  343. vertical-align: middle;
  344. }
  345. .fui-input-button:HOVER {
  346. border-color: #87a9da;
  347. }
  348. .fui-input-button:ACTIVE {
  349. border-color: #87a9da;
  350. }
  351. /**
  352. * FUI 通用样式定义
  353. */
  354. /*------------ var*/
  355. /*------------ mixin*/
  356. .fui-input {
  357. border: 1px solid #d3d3d3;
  358. padding: 1px;
  359. margin: 0;
  360. }
  361. .fui-input:HOVER,
  362. .fui-input:FOCUS {
  363. border-color: #4d90fe!important;
  364. }
  365. /**
  366. * FUI 通用样式定义
  367. */
  368. /*------------ var*/
  369. /*------------ mixin*/
  370. .fui-item {
  371. font-size: 0;
  372. }
  373. .fui-item .fui-icon {
  374. vertical-align: middle;
  375. }
  376. .fui-item .fui-label {
  377. vertical-align: middle;
  378. }
  379. .fui-item.fui-item-selected {
  380. background: #87a9da;
  381. }
  382. /**
  383. * FUI 通用样式定义
  384. */
  385. /*------------ var*/
  386. /*------------ mixin*/
  387. .fui-label-panel .fui-label-panel-label {
  388. width: 100%;
  389. color: #666;
  390. }
  391. .fui-label-panel.fui-no-position .fui-label-panel-label {
  392. position: static!important;
  393. }
  394. .fui-label-panel.fui-layout-bottom .fui-label-panel-label {
  395. position: absolute;
  396. bottom: 0;
  397. left: 0;
  398. top: auto;
  399. z-index: 2;
  400. }
  401. .fui-label {
  402. cursor: default;
  403. display: inline-block;
  404. white-space: nowrap;
  405. }
  406. /**
  407. * 通用button
  408. */
  409. .fui-mask {
  410. position: fixed;
  411. z-index: 99998;
  412. }
  413. /**
  414. * FUI 通用样式定义
  415. */
  416. /*------------ var*/
  417. /*------------ mixin*/
  418. .fui-menu {
  419. background-color: #fff;
  420. border: 1px solid #d3d3d3;
  421. }
  422. .fui-menu .fui-item {
  423. padding: 2px 5px;
  424. display: block!important;
  425. }
  426. .fui-menu .fui-item:HOVER {
  427. background: #d5e1f2;
  428. }
  429. /**
  430. * 通用button
  431. */
  432. /**
  433. * FUI 通用样式定义
  434. */
  435. /*------------ var*/
  436. /*------------ mixin*/
  437. .fui-panel {
  438. display: inline-block;
  439. vertical-align: top;
  440. overflow-y: auto;
  441. overflow-x: hidden;
  442. }
  443. .fui-panel .fui-panel-content {
  444. position: relative;
  445. top: 0;
  446. left: 0;
  447. }
  448. .fui-panel .fui-panel-content {
  449. width: 100%;
  450. height: 100%;
  451. }
  452. .fui-panel.fui-container-column {
  453. font-size: 0;
  454. }
  455. .fui-panel.fui-container-column .fui-column {
  456. display: block;
  457. }
  458. /**
  459. * 通用button
  460. */
  461. .fui-ppanel::-webkit-scrollbar {
  462. width: 15px;
  463. }
  464. .fui-ppanel::-webkit-scrollbar-button:start:decrement,
  465. .fui-ppanel::-webkit-scrollbar-button:end:decrement,
  466. .fui-ppanel::-webkit-scrollbar-button:start:increment,
  467. .fui-ppanel::-webkit-scrollbar-button:end:increment,
  468. .fui-ppanel::-webkit-scrollbar-thumb {
  469. border: 1px solid #e7e7e7;
  470. }
  471. .fui-ppanel.fui-ppanel-position {
  472. position: fixed;
  473. z-index: 99999;
  474. }
  475. /**
  476. * FUI 通用样式定义
  477. */
  478. /*------------ var*/
  479. /*------------ mixin*/
  480. .fui-separator {
  481. background: #6d6d6d;
  482. }
  483. /**
  484. * Spin-button
  485. */
  486. .fui-spin-button .fui-spin-up-btn .fui-icon,
  487. .fui-spin-button .fui-spin-down-btn .fui-icon {
  488. width: 16px;
  489. height: 9px;
  490. background: url("images/up.png") no-repeat 3px 1.5px;
  491. }
  492. .fui-spin-button .fui-spin-down-btn .fui-icon {
  493. background-image: url("images/down.png");
  494. }
  495. /**
  496. * 通用button
  497. */
  498. /**
  499. * FUI 通用样式定义
  500. */
  501. /*------------ var*/
  502. /*------------ mixin*/
  503. .fui-tabs .fui-selected {
  504. background-color: #d5e1f2;
  505. }
  506. /**
  507. * 可切换Button (ToggleButton)
  508. */
  509. /**
  510. * FUI 通用样式定义
  511. */
  512. /*------------ var*/
  513. /*------------ mixin*/
  514. .fui-toggle-button.fui-button-pressed {
  515. background-color: #aec5e6;
  516. }
  517. .fui-toggle-button.fui-button-pressed.fui-disabled {
  518. background-color: #aec5e6 !important;
  519. }