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