thirdparty-jquery-ui.less 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  1. .enable_plugin_jquery_ui() when(@enable-plugin-jquery-ui = true) {
  2. .ui-datepicker {
  3. background-color:#FFF;
  4. border:1px solid rgba(0, 0, 0, 0.2);
  5. .box-shadow(@dropdown-shadow);
  6. .ui-datepicker-prev , .ui-datepicker-next {
  7. height: 26px;
  8. min-width: 32px;
  9. max-width:32px;
  10. text-align: center;
  11. cursor:pointer;
  12. color:transparent;
  13. line-height:26px;
  14. .box-sizing(content-box);
  15. .ui-icon {
  16. color:transparent;
  17. visibility:hidden;
  18. }
  19. &:hover {
  20. background-color:#EEE;
  21. text-decoration:none;
  22. }
  23. &:before {
  24. display: inline;
  25. font-family: FontAwesome;
  26. font-size: @base-font-size + 1;
  27. content: "\f060";
  28. color: @text-color;
  29. }
  30. &-hover {
  31. top:2px;
  32. }
  33. }
  34. .ui-datepicker-next:before {
  35. content:"\f061";
  36. }
  37. .ui-datepicker-prev-hover {
  38. left: 2px;
  39. }
  40. .ui-datepicker-next-hover {
  41. right: 2px;
  42. }
  43. td {
  44. padding:0;
  45. > a , > span {
  46. display:inline-block;
  47. height: 22px;
  48. min-width: 24px;
  49. max-width:24px;
  50. text-align:center;
  51. color:@text-color;
  52. font-size:@base-font-size;
  53. .box-sizing(content-box);
  54. }
  55. > a {
  56. &:hover {
  57. background-color:#EEE;
  58. }
  59. &.ui-state-highlight {
  60. background-color:#D5E5EF;
  61. }
  62. &.ui-state-active{
  63. background-color:@datepicker-active-bg;
  64. color:#FFF;
  65. }
  66. &.ui-priority-secondary{
  67. color:#888;
  68. }
  69. }
  70. > span {
  71. color:#999;
  72. }
  73. .ui-datepicker-title select {
  74. height:24px;
  75. line-height:24px;
  76. padding:2px 3px;
  77. }
  78. .ui-datepicker-buttonpane {
  79. background-color:#DDD;
  80. height:1px;
  81. }
  82. }
  83. }
  84. /* dialog */
  85. .ui-widget-overlay {
  86. background:rgba(0,0,0,0.25);
  87. .opacity(1) !important;
  88. z-index: @zindex-modal - 1 !important;
  89. }
  90. .ui-dialog , .ui-jqdialog {
  91. z-index: @zindex-modal !important;
  92. background-color:#FFF;
  93. padding:0;
  94. border:1px solid #DDD;
  95. .box-shadow(~"0 2px 4px rgba(0, 0, 0, 0.2)");
  96. .ui-dialog-titlebar , .ui-jqdialog-titlebar {
  97. background-color: #F1F1F1;
  98. font-size: @base-font-size + 3;
  99. color: @widget-header-color;
  100. padding: 0;
  101. }
  102. .ui-dialog-title , .ui-jqdialog-title {
  103. float: none !important;//to override .RTL's
  104. width: auto;
  105. }
  106. .widget-header {
  107. margin:0;
  108. border-width:0 0 1px 0;
  109. }
  110. .ui-dialog-buttonpane , .ui-jqdialog-buttonpane {
  111. background-color:@modal-footer-bg;
  112. border-top:1px solid @modal-footer-border;
  113. button {
  114. font-size: @base-font-size + 1;
  115. }
  116. }
  117. .ui-dialog-titlebar-close , .ui-jqdialog-titlebar-close {
  118. border:none;
  119. background:transparent;
  120. opacity:0.4;
  121. color:@btn-danger;
  122. padding:0;
  123. top:50%;
  124. right:8px !important;
  125. text-align:center;
  126. &:before {
  127. content: "\f00d";
  128. display: inline;
  129. font-family: FontAwesome;
  130. font-size: @font-size-jquery-dialog-close;
  131. }
  132. &:hover {
  133. opacity:1;
  134. text-decoration:none;
  135. padding:0;
  136. }
  137. .ui-button-text {
  138. text-indent:0;
  139. visibility:hidden;
  140. }
  141. }
  142. .widget-header .ui-dialog-titlebar-close , .widget-header .ui-jqdialog-titlebar-close {
  143. right:10px !important;
  144. }
  145. }
  146. /* accordion */
  147. .ui-accordion {
  148. .ui-accordion-header {
  149. color:@accordion-header-text;
  150. font-weight:normal;
  151. background-color:#F9F9F9;
  152. border:1px solid @accordion-border;
  153. padding:8px 8px 9px 24px;
  154. &:hover {
  155. color:@accordion-header-text-hover;
  156. background-color:@accordion-header-hover-bg;
  157. }
  158. &.ui-state-active {
  159. color:@tab-hover-color;
  160. background-color:@accordion-active-bg;
  161. position:relative;
  162. font-weight:bold;
  163. }
  164. .ui-accordion-header-icon {
  165. text-indent: 0;
  166. margin-top: 0;
  167. position: absolute;
  168. left: 10px;
  169. top: 7px;
  170. &:before {
  171. display: inline;
  172. font-family: FontAwesome;
  173. font-size: @base-font-size + 2;
  174. content: "\f0da";
  175. }
  176. }
  177. &.ui-state-active .ui-accordion-header-icon:before {
  178. content:"\f0d7";
  179. font-weight:normal;
  180. }
  181. }
  182. .ui-accordion-content {
  183. border:1px solid @accordion-border;
  184. border-top-width:0;
  185. padding:11px 16px;
  186. }
  187. }
  188. /* tabs */
  189. .ui-tabs {
  190. .ui-tabs-nav {
  191. padding:0;
  192. border-bottom:1px solid #C5D0DC;
  193. li.ui-state-default > a{
  194. background-color: #F9F9F9;
  195. border: 1px solid #C5D0DC;
  196. border-bottom-width:0;
  197. color: #999;
  198. line-height: 16px;
  199. margin-right: -1px;
  200. position: relative;
  201. z-index: 11;
  202. padding:8px 12px;
  203. position:relative; top:2px;
  204. }
  205. li > a:focus {
  206. outline:none;
  207. }
  208. li.ui-tabs-active > a{
  209. background-color:#FFF;
  210. border:1px solid;
  211. border-color:#4C8FBD #C5D0DC transparent;
  212. border-top-width:2px;
  213. .box-shadow(~"0 -2px 3px 0 rgba(0, 0, 0, 0.15)");
  214. color:#576373;
  215. position:relative; top:1px;
  216. }
  217. }
  218. .ui-tabs-panel {
  219. border:1px solid #C5D0DC;
  220. border-top-width:0;
  221. margin:0;
  222. left:auto; right:auto;
  223. top:auto; bottom:auto;
  224. }
  225. }
  226. /* menu */
  227. .ui-menu {
  228. .box-sizing(content-box);
  229. width:150px;
  230. .box-shadow(@dropdown-shadow);
  231. background-color:#FFF;
  232. border:1px solid rgba(0, 0, 0, 0.2);
  233. padding:3px;
  234. .ui-state-focus, .ui-state-active {
  235. margin: auto;
  236. }
  237. .ui-menu-item {
  238. padding: 5px 10px 6px;
  239. color: #444;
  240. cursor: pointer;
  241. display: block;
  242. .box-sizing(inherit);
  243. }
  244. .ui-menu-item .ui-menu-icon {
  245. float: right;
  246. position: relative;
  247. //top: 2px;
  248. left: auto;
  249. right: 4px;
  250. bottom: auto;
  251. text-indent: 0;
  252. &:before {
  253. content: "\f105";
  254. font-family: FontAwesome;
  255. font-size: @base-font-size + 1;
  256. display: inline;
  257. }
  258. }
  259. .ui-menu-item:hover, .ui-state-focus , .ui-state-active {
  260. & , > .ui-menu-icon {
  261. text-decoration: none;
  262. background-color: @dropdown-menu;
  263. color: #FFF;
  264. margin: auto;
  265. font-weight: normal;
  266. .ui-menu-icon {
  267. color: #FFF;
  268. }
  269. }
  270. }
  271. .ui-state-disabled, .ui-state-disabled .ui-menu-icon {
  272. color: #999;
  273. cursor: default;
  274. }
  275. .ui-state-disabled:hover, .ui-state-disabled.ui-state-focus , .ui-state-disabled.ui-state-active {
  276. & , .ui-menu-icon {
  277. background-color: #FFF;
  278. color: #999;
  279. }
  280. }
  281. }
  282. /* auto complete */
  283. .ui-autocomplete {
  284. background-color:#FFF;
  285. border:1px solid rgba(0, 0, 0, 0.2);
  286. .box-shadow(@dropdown-shadow);
  287. }
  288. .ui-autocomplete-category {
  289. padding:6px;
  290. position:relative;
  291. background-color:@accordion-active-bg;
  292. color:@ace-blue;
  293. font-weight:bolder;
  294. border:1px solid #DAE6ED;
  295. border-width:1px 0;
  296. }
  297. // spinner
  298. .ui-spinner-button {
  299. border-width:0 !important;
  300. font-size: @font-size-jquery-spinner;
  301. height: 16px;
  302. line-height: 16px;
  303. padding: 0;
  304. width: 18px;
  305. color: #FFFFFF !important;
  306. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
  307. display:inline-block;
  308. position:absolute;
  309. text-align:center;
  310. padding:0;
  311. > .@{icon} {
  312. width:18px;
  313. display:inline-block;
  314. }
  315. }
  316. .ui-spinner-up {
  317. top:0;
  318. right:5px;
  319. }
  320. .ui-spinner-down {
  321. bottom:3px;
  322. right:5px;
  323. }
  324. .ui-spinner-input {
  325. margin-top: 0;
  326. padding: 5px;
  327. max-width: 100px;
  328. font-size: @font-size-text-input;
  329. }
  330. .ui-tooltip {
  331. background-color:#444;
  332. color:#FFF;
  333. }
  334. .ui-progressbar {
  335. background-color: @progress-bg;
  336. height:22px;
  337. .ui-progressbar-value {
  338. margin:0;
  339. &[class="progress-bar"] {
  340. background-color:@progress-color;
  341. }
  342. }
  343. }
  344. //selectmenu
  345. .ui-selectmenu-button {
  346. border: 1px solid #aaa;
  347. &[aria-expanded=true] {
  348. border-color: #4492C9;
  349. }
  350. span.ui-icon {
  351. text-indent: 0;
  352. margin-top: -10px;
  353. }
  354. .ui-icon:before {
  355. content: "\f0d7";
  356. display: inline-block;
  357. color: #888;
  358. font-family: FontAwesome;
  359. font-size: @base-font-size + 1;
  360. }
  361. }
  362. }
  363. .enable_plugin_jquery_ui();