sdc-workflow-designer-ui/src/app/paletx/assets/themes/common.less

   1 ///////\r
   2 \r
   3 .plx-breadcrumb {\r
   4   margin: 0;\r
   5   padding: 5px 10px;\r
   6   font-size: 12px;\r
   7   li {\r
   8     display: inline-block;\r
   9   }\r
  10   a {\r
  11     color: @light-text-color;\r
  12     text-decoration: none;\r
  13     &:hover {\r
  14       color: @primary-color;\r
  15     }\r
  16   }\r
  17   .plx-breadcrumb-separator {\r
  18     color: @unselected-text-color;\r
  19     padding: 0 5px;\r
  20     vertical-align: 1px;\r
  21   }\r
  22   .plx-breadcrumb-collapse {\r
  23     padding-left: 6px;\r
  24     padding-right: 6px;\r
  25     cursor: pointer;\r
  26     circle {\r
  27       fill: @fonticon-color;\r
  28     }\r
  29     &:hover circle {\r
  30       fill: @primary-color;\r
  31     }\r
  32   }\r
  33   .plx-breadcrumb-active {\r
  34     vertical-align: 1px;\r
  35     a {\r
  36       font-size: 20px;\r
  37       color: @title-text-color;\r
  38       cursor: text;\r
  39     }\r
  40   }\r
  41 }
  42 ///////
  43 ///////
  44 ///////
  45
  46 .owl-dateTime {
  47   display: inline-block;
  48   position: relative;
  49   width: 100%;
  50   font-family: @font-family;
  51   font-size: @font-size;
  52   background: @component-bg;
  53   color: @text-color;
  54 }
  55
  56 .owl-dateTime input {
  57   .plx-input;
  58 }
  59
  60 .owl-dateTime input:-ms-input-placeholder {
  61   color: @unselected-text-color !important;
  62 }
  63 .owl-dateTime input::-webkit-input-placeholder {
  64   color: @unselected-text-color !important;
  65 }
  66
  67 .owl-dateTime-input {
  68   width: 100%;
  69   padding-right: 1.5em; }
  70
  71 .owl-dateTime-cancel {
  72   position: absolute;
  73   top: 50%;
  74   right: .1em;
  75   border-radius: 50%;
  76   transform: translateY(-50%);
  77   cursor: pointer;
  78   color: inherit; }
  79
  80 .owl-dateTime-inputWrapper {
  81   position: relative; }
  82
  83 .owl-dateTime-customTemp {
  84   display: inline-block;
  85   position: relative; }
  86
  87 .owl-dateTime-dialog {
  88   padding:  0px;
  89   position: absolute; }
  90
  91 .owl-dateTime-dialogHeader {
  92   display: flex;
  93   justify-content: center;
  94   align-items: center;
  95   width: 100%; }
  96
  97 .owl-calendar-wrapper,
  98 .owl-timer-wrapper {
  99   position: relative;
 100   width: 100%;
 101   padding: .2em .5em; }
 102
 103 .owl-calendar-control {
 104   display: flex;
 105   justify-content: space-around;
 106   width: 100%;
 107   height: 2em; }
 108   .owl-calendar-control .owl-calendar-controlNav {
 109     position: relative;
 110     cursor: pointer;
 111     width: 12.5%; }
 112   .owl-calendar-control .owl-calendar-controlContent {
 113     display: flex;
 114     justify-content: center;
 115     align-items: center;
 116     width: 75%;
 117     height: 100%; }
 118
 119 .owl-calendar {
 120   position: relative;
 121   min-height: 13.7em; }
 122   .owl-calendar table {
 123     width: 100%;
 124     border-collapse: collapse; }
 125   .owl-calendar tbody td {
 126     position: relative;
 127     text-align: center; }
 128     .owl-calendar tbody td a {
 129       display: block;
 130       width: 100%;
 131       height: 100%;
 132       text-decoration: none;
 133       color: inherit;
 134       font-size:12px;
 135        }
 136   .owl-calendar .owl-calendar-yearArrow {
 137     position: absolute;
 138     top: 50%;
 139     width: 1.5em;
 140     height: 1.5em;
 141     transform: translateY(-50%);
 142     cursor: pointer; }
 143     .owl-calendar .owl-calendar-yearArrow.left {
 144       left: -.5em; }
 145     .owl-calendar .owl-calendar-yearArrow.right {
 146       right: -.5em; }
 147
 148 .owl-timer-wrapper {
 149   position: relative;
 150   display: flex;
 151   justify-content: center; }
 152   .owl-timer-wrapper .owl-timer {
 153     position: relative;
 154     display: flex;
 155     flex-direction: column;
 156     justify-content: center;
 157     align-items: center;
 158     width: 25%;
 159     height: 100%; }
 160   .owl-timer-wrapper .owl-timer-control {
 161     display: flex;
 162     justify-content: center;
 163     align-items: center;
 164     height: 30%;
 165     width: 100%;
 166     cursor: pointer; }
 167     .owl-timer-wrapper .owl-timer-control .icon:before {
 168       margin: 0; }
 169   .owl-timer-wrapper .owl-timer-input {
 170     width: 60%;
 171     height: 100%; }
 172
 173 /*# sourceMappingURL=picker.component.css.map */
 174 .font-face {
 175   font-weight: normal;
 176   font-style: normal; }
 177
 178 [class^="paletx-datepicker-icon-"]:before, [class*="paletx-datepicker-icon-"]:before {
 179   font-family: "fontello";
 180   font-style: normal;
 181   font-weight: normal;
 182   speak: none;
 183   display: inline-block;
 184   text-decoration: inherit;
 185   width: 1em;
 186   margin-right: .2em;
 187   text-align: center;
 188   /* opacity: .8; */
 189   /* For safety - reset parent styles, that can break glyph codes*/
 190   font-variant: normal;
 191   text-transform: none;
 192   /* fix buttons height, for twitter bootstrap */
 193   line-height: 1em;
 194   /* Animation center compensation - margins should be symmetric */
 195   /* remove if not needed */
 196   margin-left: .2em;
 197   /* you can be more comfortable with increased icons size */
 198   /* font-size: 120%; */
 199   /* Font smoothing. That was taken from TWBS */
 200   -webkit-font-smoothing: antialiased;
 201   -moz-osx-font-smoothing: grayscale;
 202   /* Uncomment for 3D effect */
 203   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
 204
 205 .paletx-datepicker-icon-cancel:before {
 206   content: '\e802'; }
 207
 208 /* '' */
 209 .paletx-datepicker-icon-up-open:before {
 210   content: '\e805'; }
 211
 212 /* '' */
 213 .paletx-datepicker-icon-down-open:before {
 214   content: '\e80b'; }
 215
 216 /* '' */
 217 .paletx-datepicker-icon-left-open:before {
 218   content: '\e817'; }
 219
 220 /* '' */
 221 .paletx-datepicker-icon-right-open:before {
 222   content: '\e818'; }
 223
 224 /* '' */
 225 .owl-widget,
 226 .owl-widget * {
 227   box-sizing: border-box; }
 228
 229 .owl-widget {
 230   font-size: 1em; }
 231 .owl-padding{
 232   padding: 0px;
 233 }
 234 .owl-corner-all {
 235   border-radius: 3px; }
 236
 237 .owl-corner-top {
 238   border-top-left-radius: 3px;
 239   border-top-right-radius: 3px; }
 240
 241 .owl-state-default {
 242   border: 1px solid @border-color-base;
 243   background: @component-bg;
 244   color: @text-color; }
 245
 246 .owl-inputtext {
 247   margin: 0;
 248   outline: medium none;
 249   transition: .2s; }
 250
 251
 252   .owl-dateTime.owl-dateTime-inline {
 253     width: auto; }
 254     .owl-dateTime.owl-dateTime-inline .owl-dateTime-dialog {
 255       position: relative;
 256       z-index: auto; }
 257
 258 .owl-dateTime-dialog {
 259   width: 300px;
 260   user-select: none;
 261   z-index: 99999; }
 262
 263 .owl-dateTime-dialogHeader {
 264   height: 2.5em;
 265   padding: .25em;
 266   background-color: @component-bg;
 267   overflow-y: auto; }
 268
 269 .owl-calendar-control .owl-calendar-controlNav .nav-prev,
 270 .owl-calendar-control .owl-calendar-controlNav .nav-next {
 271   position: absolute;
 272   top: 50%;
 273   right: auto;
 274   bottom: auto;
 275   left: 50%;
 276   transform: translate(-50%, -50%);
 277 }
 278
 279 .owl-cal-header{
 280   background: @selected-bg-color;
 281   //color: @form-label;
 282   height: 35px;
 283   //width: 105%;
 284   //margin-left: -7px;
 285 }
 286   .owl-calendar-control .owl-calendar-controlNav .nav-prev:before,
 287   .owl-calendar-control .owl-calendar-controlNav .nav-next:before {
 288     //content: "";
 289     border-top: .5em solid transparent;
 290     border-bottom: .5em solid transparent;
 291     border-right: 0.75em solid #000000;
 292     width: 0;
 293     height: 0;
 294     display: block;
 295     margin: 0 auto; }
 296 .owl-calendar-control .owl-calendar-controlNav .nav-next:before {
 297   border-right: 0;
 298   border-left: 0.75em solid #000000; }
 299 .owl-calendar-control .owl-calendar-controlContent .month-control,
 300 .owl-calendar-control .owl-calendar-controlContent .year-control {
 301   color: @unselected-text-color;
 302   display: inline-block;
 303   cursor: pointer;
 304   transition: transform 200ms ease; }
 305   .owl-calendar-control .owl-calendar-controlContent .month-control:hover,
 306   .owl-calendar-control .owl-calendar-controlContent .year-control:hover {
 307    // transform: scale(1.2); }
 308     color: @guide-color; }
 309 .owl-calendar-control .owl-calendar-controlContent .month-control {
 310   font-size: @font-size-title-group;
 311   margin-right: .8rem;
 312 }
 313 .owl-calendar-control .owl-calendar-controlContent .year-control {
 314   font-size: @font-size-title-group;
 315 }
 316
 317 .owl-calendar tbody td.owl-calendar-selected {
 318   background-color: @guide-color;
 319   color: @component-bg }
 320 .owl-calendar tbody td.owl-calendar-invalid {
 321   color: @disabled-text-color }
 322 .owl-calendar tbody td.owl-calendar-outFocus {
 323   color: @unselected-text-color; }
 324 .owl-calendar tbody td.owl-calendar-hidden {
 325   visibility: hidden; }
 326   /**
 327 .owl-calendar tbody td:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
 328   background-color: @hover-bg-color;
 329   color: @shadow-color }
 330 **/
 331 .owl-years td.owl-year,
 332 .owl-years td.owl-month,
 333 .owl-months td.owl-year,
 334 .owl-months td.owl-month {
 335   font-size: 1.2em;
 336   height: 2.5em;
 337   width: 33.33%;
 338   line-height: 2.5em;
 339   border-radius: 60px;
 340   }
 341
 342 .owl-weekdays th.owl-weekday {
 343   height: 1em;
 344   line-height: 2em;
 345   text-align: center;
 346   font-weight: normal;
 347   font-size: @font-size;
 348   /**color: @unselected-text-color; **/
 349   }
 350
 351 .owl-days td.owl-day {
 352   border-radius: 30px;
 353   height: 2em;
 354   width: calc(100% / 7);
 355   line-height: 2em; }
 356   .owl-days td.owl-day.owl-day-today:before {
 357     content: '';
 358     display: block;
 359     position: absolute;
 360     right: 2px;
 361     top: 2px;
 362     color: @primary-color;
 363     border-top: 0.5em solid @primary-color-hover;
 364     border-left: .5em solid transparent;
 365   }
 366
 367 .owl-timer-wrapper {
 368   height: 5.4em;
 369   background-color: @shadow-color; }
 370   .owl-timer-wrapper .owl-timer-text {
 371     display: flex;
 372     justify-content: center;
 373     align-items: center;
 374     width: 100%;
 375     height: 40%;
 376     font-size: 1.5em; }
 377   .owl-timer-wrapper .owl-meridian-btn {
 378     font-size: .8em;
 379     color: @guide-color;
 380     background-image: none;
 381     background-color: transparent;
 382     border-color: @guide-color; }
 383     .owl-timer-wrapper .owl-meridian-btn:hover {
 384       color: @scene-textcolor;
 385       background-color: @guide-color;
 386       border-color: @guide-color; }
 387
 388 .owl-timer-divider {
 389   display: inline-block;
 390   align-self: flex-end;
 391   position: absolute;
 392   width: .6em;
 393   height: 100%;
 394   left: -.3em; }
 395   .owl-timer-divider .owl-timer-dot {
 396     display: block;
 397     width: .3em;
 398     height: .3em;
 399     position: absolute;
 400     left: 50%;
 401     border-radius: 50%;
 402     transform: translateX(-50%); }
 403     .owl-timer-divider .owl-timer-dot.dot-top {
 404       top: 38%; }
 405     .owl-timer-divider .owl-timer-dot.dot-bottom {
 406       bottom: 38%; }
 407 .owl-icon{
 408   position: absolute;
 409   top: 50%;
 410   right: .1em;
 411   border-radius: 50%;
 412   -webkit-transform: translateY(-50%);
 413   transform: translateY(-50%);
 414   cursor: pointer;
 415   color: @fonticon-color;
 416 }
 417
 418 .oes-time-control{
 419   color: @text-color !important;
 420 }
 421 .owl-calendar-selected {
 422   background-color: @guide-color;
 423   color: #fff;
 424   border-radius: 50%;
 425 }
 426 .owl-calendar tbody td div.day:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
 427   background-color: @hover-bg-color;
 428   color:#000;
 429   border-radius: 50%; }
 430 .oes-time-control{
 431   font-size: @font-size;
 432 }
 433 .owl-calendar-year-part{
 434   width: 42px;
 435   margin-left: 30px;
 436   text-align: center;
 437 }
 438 .owl-calendar-year-part:hover{
 439   background-color: @hover-bg-color;
 440   color:#000;
 441   border-radius: 50%;
 442 }
 443 .owl-calendar-year-selected{
 444   background-color: @guide-color;
 445   color: #fff;
 446   border-radius: 50%;
 447 }
 448 .owl-calendar-year-selected:hover{
 449   background-color: @guide-color;
 450   color: #fff;
 451   border-radius: 50%;
 452 }
 453 .owl-calendar-month-part{
 454   width: 42px;
 455   margin-left: 30px;
 456   text-align: center;
 457 }
 458 .owl-calendar-month-part:hover{
 459   background-color: @hover-bg-color;
 460   color:#000;
 461   border-radius: 50%;
 462 }
 463 .owl-calendar-month-selected{
 464   background-color: @guide-color;
 465   color: #fff;
 466   border-radius: 50%;
 467 }
 468 .owl-calendar-month-selected:hover{
 469   background-color: @guide-color;
 470   color: #fff;
 471   border-radius: 50%;
 472 }
 473
 474 /*# sourceMappingURL=picker.css.map */
 475
 476
 477 ///////
 478 ///////
 479 ///////
 480 .oes-time-table .chevron::before {
 481   border-style: solid;
 482   border-width: 0.29em 0.29em 0 0;
 483   content: '';
 484   display: inline-block;
 485   height: 0.69em;
 486   left: 0.05em;
 487   position: relative;
 488   top: 0.15em;
 489   transform: rotate(-45deg);
 490   -webkit-transform: rotate(-45deg);
 491   -ms-transform: rotate(-45deg);
 492   vertical-align: middle;
 493   width: 0.71em;
 494 }
 495
 496 .oes-time-table .chevron.bottom:before {
 497   top: -.3em;
 498   -webkit-transform: rotate(135deg);
 499   -ms-transform: rotate(135deg);
 500   transform: rotate(135deg);
 501 }
 502
 503 .oes-time-table .btn-link {
 504   border: none!important;
 505   cursor: pointer;
 506   outline: 0;
 507   display: block;
 508 }
 509
 510 .oes-time-table .btn-link.disabled {
 511   cursor: not-allowed;
 512   opacity: .65;
 513 }
 514
 515 .oes-time-control {
 516   text-align: center;
 517 }
 518
 519 .datapicker-form-control {
 520    width: auto !important;
 521    display: inline-block;
 522 }
 523
 524 .oes-time-table .ict-stretch{
 525
 526     font-size: 8px;
 527 }
 528
 529 .oes-time-table .ict-shrink{
 530    font-size: 8px;
 531 }
 532 .time-pick-bk{
 533     background-color: #fff;
 534 }
 535
 536 .btn-link:focus, .btn-link:hover{
 537    text-decoration: none;
 538 }
 539 .oes-time-control{
 540   border: 0;
 541   width: 30px !important;
 542   padding: 3px 0;
 543   margin: 0;
 544   font-size: @font-size;
 545 }
 546
 547 .oes-time-control:hover{
 548   background-color: #e6e6e6;
 549   color:#000;
 550   cursor: pointer;
 551 }
 552
 553
 554 .oes-time-control-foucs-bk{
 555  background-color: #00abff !important;
 556  color:#fff!important;
 557
 558 }
 559
 560 .oes-time-separator{
 561     margin: 0 -5px;
 562 }
 563 .oes-time-group,.oes-time-group:hover{
 564
 565      border-bottom:  1px solid #ccc;
 566      border-left:  1px solid #ccc;
 567      border-top:  1px solid #ccc;
 568      border-radius: 0.2em;
 569  }
 570  .oes-time-btns,.oes-time-btns:hover{
 571
 572      border-bottom:  1px solid #ccc;
 573      border-right:  1px solid #ccc;
 574      border-top:  1px solid #ccc;
 575      border-radius: 0.2em;
 576      padding: 0 0 7px 0 !important;
 577
 578  }
 579
 580  .oes-time-btns-wrapper {
 581     margin-top:-3px;
 582      transform:scale(0.6,0.6);
 583  }
 584
 585  .i18nTimeDes,.i18nTimeDes:hover{
 586
 587      padding:  0 5px 0px 0;
 588
 589  }
 590
 591  .oes-time-btn{
 592
 593    height: 5px;
 594  }
 595
 596
 597  .oes-time-table{
 598     margin-bottom: 10px;
 599  }
 600
 601 .hour-table{
 602
 603     font-size:12px;
 604 }
 605
 606 .hour-table td{
 607
 608     padding: 5px;
 609     padding-top: 3px;
 610     padding-bottom: 3px;
 611     cursor: pointer;
 612 }
 613 .oes-time-btn-shrink{
 614   position: relative;
 615   top:-5px;
 616   left:0px;
 617   color:#CCC;
 618 }
 619
 620 .oes-time-btn-stretch{
 621   position: relative;
 622   left:0px;
 623   color:#CCC;
 624 }
 625 .owl-calendar-timer-invalid{
 626   color: #acacac;
 627 }
 628 .owl-calendar-timer-selected{
 629   background-color: #00abff;
 630   color: #FFFFFF;
 631   border-radius: 1.2em;
 632 }
 633 .hour-table td:not(.owl-calendar-timer-selected):not(.owl-calendar-timer-invalid):hover {
 634   background-color: #ebf6fd;
 635   color: #000000;
 636   border-radius: 1.2em;
 637 }
 638
 639
 640
 641 \r
 642 ///////\r
 643 \r
 644 .icon {\r
 645         color: @fonticon-color;\r
 646         vertical-align: text-bottom;\r
 647         margin-left:5px;\r
 648         font-size: 20px;\r
 649 }\r
 650
 651 ///////\r
 652 \r
 653 \r
 654 .plx-input-password {\r
 655         display: inline-block;\r
 656         line-height: @input-height - 2px;\r
 657         width: 40px;\r
 658         text-align: center;\r
 659         vertical-align: middle;\r
 660         margin-top: -2px;\r
 661         background-color: @common-color;\r
 662         border-top: 1px solid @border-color-base;\r
 663         border-right: 1px solid @border-color-base;\r
 664         border-bottom: 1px solid @border-color-base;\r
 665         border-bottom-right-radius: @radius;\r
 666         border-top-right-radius: @radius;\r
 667         cursor: pointer;\r
 668         &:focus,\r
 669         &:hover {\r
 670                 background-color: @common-color-hover;\r
 671         }\r
 672         &:active {\r
 673                 background-color: @common-color-click;\r
 674         }\r
 675         &.ict-eye-closed, &.ict-eye {\r
 676                  color: @fonticon-color;\r
 677         }\r
 678 }\r
 679 \r
 680 \r
 681 .plx-input-password-disabled {\r
 682         cursor: not-allowed;\r
 683         &:focus,\r
 684         &:hover,\r
 685         &:active{\r
 686                 background-color: @common-color;\r
 687         }\r
 688 }\r
 689 \r
 690 .plx-input-password-sm {\r
 691         line-height: @input-height-sm - 2px;\r
 692 }
 693 ///////
 694
 695 @-moz-keyframes three-quarters-loader {
 696         0% {
 697                 -moz-transform: rotate(0deg);
 698                 transform: rotate(0deg);
 699         }
 700         100% {
 701                 -moz-transform: rotate(360deg);
 702                 transform: rotate(360deg);
 703         }
 704 }
 705
 706 @-webkit-keyframes three-quarters-loader {
 707         0% {
 708                 -webkit-transform: rotate(0deg);
 709                 transform: rotate(0deg);
 710         }
 711         100% {
 712                 -webkit-transform: rotate(360deg);
 713                 transform: rotate(360deg);
 714         }
 715 }
 716
 717 @keyframes three-quarters-loader {
 718         0% {
 719                 -moz-transform: rotate(0deg);
 720                 -ms-transform: rotate(0deg);
 721                 -webkit-transform: rotate(0deg);
 722                 transform: rotate(0deg);
 723         }
 724         100% {
 725                 -moz-transform: rotate(360deg);
 726                 -ms-transform: rotate(360deg);
 727                 -webkit-transform: rotate(360deg);
 728                 transform: rotate(360deg);
 729         }
 730 }
 731
 732 .plx-loading-max:not(:required) {
 733         .plx-loading;
 734         width: 72px;
 735         height: 72px;
 736         border: 5px solid @primary-color;
 737         border-right-color: @component-bg;
 738         border-radius: 36px;
 739 }
 740
 741 .plx-loading-medium:not(:required) {
 742         .plx-loading;
 743         width: 36px;
 744         height: 36px;
 745         border: 4px solid @primary-color;
 746         border-right-color: @component-bg;
 747         border-radius: 18px;
 748 }
 749
 750 .plx-loading-min:not(:required) {
 751         .plx-loading;
 752         width: 18px;
 753         height: 18px;
 754         border: 2px solid @primary-color;
 755         border-right-color: @component-bg;
 756         border-radius: 9px;
 757 }
 758
 759 .plx-loading-default:not(:required) {
 760         margin-left: 100px;
 761         margin-top: 100px;
 762         box-sizing: border-box;
 763         display: inline-block;
 764         position: relative;
 765         overflow: hidden;
 766         text-indent: -9999px;
 767         width: 36px;
 768         height: 36px;
 769         border: 4px solid @primary-color;
 770         border-right-color: @component-bg;
 771         border-radius: 18px;
 772 }
 773
 774 .plx-loading-xs:not(:required) {
 775         .plx-loading;
 776         width: 12px;
 777         height: 12px;
 778         border: 2px solid @primary-color;
 779         border-right-color: @component-bg;
 780         border-radius: 6px;
 781 }
 782
 783 .plx-loading {
 784         -moz-animation: three-quarters-loader 1500ms infinite linear;
 785         -webkit-animation: three-quarters-loader 1500ms infinite linear;
 786         animation: three-quarters-loader 1500ms infinite linear;
 787         box-sizing: border-box;
 788         display: inline-block;
 789         position: relative;
 790         overflow: hidden;
 791         text-indent: -9999px;
 792 }
 793
 794 .plx-loading-white:not(:required) {
 795     .plx-loading;
 796     width: 12px;
 797     height: 12px;
 798     border: 2px solid @component-bg;
 799     border-right-color: @primary-color;
 800     border-radius: 6px;
 801 }
 802
 803 .plx-loading-gray:not(:required) {
 804     .plx-loading;
 805     width: 12px;
 806     height: 12px;
 807     border: 2px solid @disabled-text-color;
 808     border-right-color: @component-bg;
 809     border-radius: 6px;
 810 }
 811
 812 ///////
 813 .message{
 814     width: 400px;
 815     right:10px;
 816     position: fixed;
 817     z-index: 99999;
 818     font-family: @font-family;
 819     font-weight: 400;
 820     font-style: normal;
 821     font-size:14px;
 822     color: @title-text-color;
 823 }
 824 .message>p{
 825     width: 100%;
 826     margin: 10px 0 16px;
 827     padding: 0 25px ;
 828     border:1px solid @border-color-split;
 829     box-shadow: 1px 3px 9px @shadow-color;
 830     line-height: 36px;
 831     background: @component-bg;
 832     font-size: @font-size !important;
 833     color: @text-color;
 834 }
 835 .message>p>span{
 836     float: right;
 837     cursor: pointer;
 838     font-weight: 400;
 839     font-style: normal;
 840     color: #108EE9;
 841     text-align: center;
 842     &:hover{
 843         text-decoration: underline;
 844      }
 845 }
 846 .message>div{
 847     width: 100%;
 848     margin-bottom: 16px;
 849     border:1px solid ;
 850     line-height: 62px;
 851     border:1px solid @border-color-split;
 852     box-shadow: 1px 4px 9px @shadow-color;
 853     border-radius: 5px;
 854     background: @component-bg;
 855     position: relative;
 856 }
 857 .message>div>span{
 858     display: inline-block;
 859     font-size:24px !important;
 860     margin-left:12px;
 861     margin-right: 3px;
 862     vertical-align: middle;
 863 }
 864 .message>div.success{
 865     border-left:4px solid @success-color;
 866 }
 867 .message>div.success>span{
 868     color: @success-color;
 869 }
 870 .message>div.error{
 871     border-left:4px solid @error-color;
 872 }
 873 .message>div.error>span{
 874     color: @error-color;
 875 }
 876
 877 .message>div.warning{
 878     border-left:4px solid @warning-color;
 879 }
 880 .message>div.warning>span{
 881     color: @warning-color;
 882 }
 883 .message>div.info{
 884     border-left:4px solid @primary-color;
 885 }
 886 .message>div.info>span{
 887     color:@primary-color;
 888 }
 889 // .message>div.info>span{
 890 //     color: @info-color;
 891 // }
 892 .message>div>i{
 893     float:right;
 894     width: 20px;
 895     height: 20px;
 896     margin-top:21px;
 897     line-height: 20px;
 898     border-radius: 50%;
 899     margin-right: 20px;
 900     cursor: pointer;
 901     text-align: center;
 902     font-size: 16px;
 903     &:hover{
 904         background: @hover-bg-color;
 905     }
 906 }
 907
 908 .message>div>p{
 909     position: relative;
 910     top:-3px;
 911     margin: 0;
 912     padding: 0 20px 16px 43px;
 913     font-size: @font-size !important;
 914     color: @text-color;
 915     line-height: 18px;
 916     position: relative;
 917 }
 918 .message>div>p>span{
 919     color: @primary-color;
 920     cursor:pointer;
 921     &:hover{
 922        text-decoration: underline;
 923     }
 924 }
 925 .message>div>div{
 926     padding-left:45px ;
 927     padding-bottom:19px;
 928     font-size: @font-size;
 929     color: @primary-color;
 930     line-height: 18px;
 931     cursor: pointer;
 932     &:hover{
 933         text-decoration: underline;
 934      }
 935 }
 936 #plxMessageMeasure{
 937     position: fixed;
 938     top:-12px;
 939     opacity: 0;
 940     white-space: nowrap;
 941     margin: 0;
 942     padding:0;
 943    // background: red;
 944     font-size: @font-size !important;
 945     line-height: @font-size;
 946     z-index:-9999;
 947 }
 948 .stack>span{
 949     display: inline-block;
 950     position: absolute;
 951     bottom:16px;
 952     right:25px;
 953 }
 954 ///////\r
 955 \r
 956 plx-modal-window {\r
 957   .modal {\r
 958     position: fixed;\r
 959     top: 0;\r
 960     right: 0;\r
 961     bottom: 0;\r
 962     left: 0;\r
 963     display: none;\r
 964     outline: 0;\r
 965     z-index: 10000;\r
 966   }\r
 967   .modal-dialog {\r
 968     position: relative;\r
 969     max-width: 600px;\r
 970     margin: 30px auto;\r
 971     &.modal-sm {\r
 972       max-width: 600px;\r
 973     }\r
 974     &.modal-lg {\r
 975       max-width: 1000px;\r
 976     }\r
 977   }\r
 978   .modal-content {\r
 979     position: relative;\r
 980     display: flex;\r
 981     -webkit-box-orient: vertical;\r
 982     -webkit-box-direction: normal;\r
 983     -ms-flex-direction: column;\r
 984     flex-direction: column;\r
 985     background-color: @component-bg;\r
 986     background-clip: padding-box;\r
 987     border-radius: @radius;\r
 988     box-shadow: 0 5px 15px @shadow-color;\r
 989     outline: 0;\r
 990     .modal-header {\r
 991       border-bottom: 0;\r
 992       display: flex;\r
 993       -webkit-box-align: center;\r
 994       -ms-flex-align: center;\r
 995       align-items: center;\r
 996       -webkit-box-pack: justify;\r
 997       -ms-flex-pack: justify;\r
 998       justify-content: space-between;\r
 999       padding: 15px;\r
1000     }\r
1001     .modal-body {\r
1002       .form-group:last-child, form:last-child {\r
1003         margin-bottom: 0;\r
1004       }\r
1005     }\r
1006     .modal-footer {\r
1007       display: block;\r
1008       border-top: 0;\r
1009       margin-top: 0;\r
1010       padding: 0 15px 15px 15px;\r
1011     }\r
1012     .modal-title {\r
1013       font-size: @font-size-title-level1;\r
1014       margin-bottom: 0;\r
1015       line-height: 1.5;\r
1016     }\r
1017     .modal-btn {\r
1018       text-align: center;\r
1019       font-size: 0;\r
1020     }\r
1021   }\r
1022   .close {\r
1023     color: @fonticon-color;\r
1024     font-size: @font-size-title-level2;\r
1025     text-shadow: none;\r
1026     width: 24px;\r
1027     height: 24px;\r
1028     background: @scene-textcolor;\r
1029     border-radius: 20px;\r
1030     padding-bottom: 2px;\r
1031     outline: none;\r
1032     &:hover {\r
1033       color: @fonticon-color;\r
1034       background: @fonticon-bg-color-hover;\r
1035     }\r
1036   }\r
1037   .alert-modal {\r
1038     &.row {\r
1039       margin-left: 100px;\r
1040       margin-bottom: 30px;\r
1041       text-align: left;\r
1042       .tip-img {\r
1043         display: inline-block;\r
1044         width: 52px;\r
1045         height: 52px;\r
1046         border-radius: 50px;\r
1047         font-size: 45px;\r
1048         text-align: center;\r
1049         line-height: 1;\r
1050         margin-top: -5px;\r
1051         margin-right: 15px;\r
1052         &::before {\r
1053           content: "!";\r
1054         }\r
1055       }\r
1056       .tip-info {\r
1057         width: 300px;\r
1058         .alert-title {\r
1059           font-size: @font-size-title-level2;\r
1060           color: @title-text-color;\r
1061         }\r
1062         .alert-result {\r
1063           margin-top: 5px;\r
1064           font-size: @font-size;\r
1065           color: @unselected-text-color;\r
1066         }\r
1067       }\r
1068       .warning {\r
1069         border: 3px solid @warning-color;\r
1070         color: @warning-color;\r
1071       }\r
1072       .error {\r
1073         border: 3px solid @error-color;\r
1074         color: @error-color;\r
1075       }\r
1076     }\r
1077   }\r
1078 }
1079 ///////\r
1080 \r
1081 \r
1082 @popover-arrow-border-width: 6px;\r
1083 @popover-arrow-border-width-before: 7px;\r
1084 @popover-arrow-border-height: @popover-arrow-border-width-before - @popover-arrow-border-width;\r
1085 @popover-arrow-away: 10px;\r
1086 @popover-arrow-background-color: #fff;\r
1087 @popover-arrow-border-color: #ccc;\r
1088 @popover-away-host: 3px;\r
1089 \r
1090 ngb-popover-window.plx-popover.show {\r
1091     color: #333;\r
1092     border: 1px solid @border-color-base;\r
1093 }\r
1094 \r
1095 .plx-popover {\r
1096     position: absolute;\r
1097     top: 0;\r
1098     left: 0;\r
1099     z-index: 10001;\r
1100     display: block;\r
1101     padding: 1px;\r
1102     font-style: normal;\r
1103     font-weight: normal;\r
1104     letter-spacing: normal;\r
1105     line-break: auto;\r
1106     line-height: 1.5;\r
1107     text-align: left;\r
1108     text-decoration: none;\r
1109     text-shadow: none;\r
1110     text-transform: none;\r
1111     white-space: normal;\r
1112     word-break: normal;\r
1113     word-spacing: normal;\r
1114     word-wrap: break-word;\r
1115     -webkit-background-clip: padding-box;\r
1116     background-clip: padding-box;\r
1117     max-width: 400px;\r
1118     min-width: 200px;\r
1119     background-color: @component-bg;\r
1120     font-family: @font-family;\r
1121     font-size: @font-size;\r
1122     border: 1px solid @border-color-base;\r
1123     border-radius: @radius;\r
1124     .shadow;\r
1125     &::before,\r
1126     &::after {\r
1127         content: "";\r
1128         position: absolute;\r
1129         display: block;\r
1130         width: 0;\r
1131         height: 0;\r
1132         border: solid transparent;\r
1133     }\r
1134     &::before {\r
1135         border-width: @popover-arrow-border-width-before;\r
1136     }\r
1137     &::after {\r
1138         border-width: @popover-arrow-border-width;\r
1139     }\r
1140 }\r
1141 \r
1142 .plx-popover-top-common {\r
1143     margin-top: -(@popover-arrow-border-width + @popover-away-host);\r
1144     &::before {\r
1145         border-top-color: @popover-arrow-border-color;\r
1146         border-bottom-width: 0;\r
1147         bottom: -@popover-arrow-border-width-before;\r
1148     }\r
1149     &::after {\r
1150         border-top-color: @popover-arrow-background-color;\r
1151         border-bottom-width: 0;\r
1152         bottom: -@popover-arrow-border-width;\r
1153     }\r
1154 }\r
1155 .plx-popover-top {\r
1156     .plx-popover-top-common;\r
1157     &::before {\r
1158         left: 50%;\r
1159         margin-left: -@popover-arrow-border-width-before;\r
1160     }\r
1161     &::after {\r
1162         left: 50%;\r
1163         margin-left: -@popover-arrow-border-width;\r
1164     }\r
1165 }\r
1166 .plx-popover.plx-popover-top-left {\r
1167     .plx-popover-top-common;\r
1168     &::before {\r
1169         left: @popover-arrow-away;\r
1170     }\r
1171     &::after {\r
1172         left: @popover-arrow-away + @popover-arrow-border-height;\r
1173     }\r
1174 }\r
1175 .plx-popover.plx-popover-top-right {\r
1176     .plx-popover-top-common;\r
1177     &::before {\r
1178         right: @popover-arrow-away;\r
1179     }\r
1180     &::after {\r
1181         right: @popover-arrow-away + @popover-arrow-border-height;\r
1182     }\r
1183 }\r
1184 \r
1185 .plx-popover-right-common {\r
1186     margin-left: @popover-arrow-border-width + @popover-away-host;\r
1187     &::before {\r
1188         border-right-color: @popover-arrow-border-color;\r
1189         border-left-width: 0;\r
1190         left: -@popover-arrow-border-width-before;\r
1191     }\r
1192     &::after {\r
1193         border-right-color: @popover-arrow-background-color;\r
1194         border-left-width: 0;\r
1195         left: -@popover-arrow-border-width;\r
1196     }\r
1197 }\r
1198 .plx-popover.plx-popover-right {\r
1199     .plx-popover-right-common;\r
1200     &::before {\r
1201         top: 50%;\r
1202         margin-top: -@popover-arrow-border-width-before;\r
1203     }\r
1204     &::after {\r
1205         top: 50%;\r
1206         margin-top: -@popover-arrow-border-width;\r
1207     }\r
1208 }\r
1209 .plx-popover.plx-popover-right-top {\r
1210     .plx-popover-right-common;\r
1211     &::before {\r
1212         top: @popover-arrow-away;\r
1213     }\r
1214     &::after {\r
1215         top: @popover-arrow-away + @popover-arrow-border-height;\r
1216     }\r
1217 }\r
1218 .plx-popover.plx-popover-right-bottom {\r
1219     .plx-popover-right-common;\r
1220     &::before {\r
1221         bottom: @popover-arrow-away;\r
1222     }\r
1223     &::after {\r
1224         bottom: @popover-arrow-away + @popover-arrow-border-height;\r
1225     }\r
1226 }\r
1227 \r
1228 .plx-popover-bottom-common {\r
1229     margin-top: @popover-arrow-border-width + @popover-away-host;\r
1230     &::before {\r
1231         border-bottom-color: @popover-arrow-border-color;\r
1232         border-top-width: 0;\r
1233         top: -@popover-arrow-border-width-before;\r
1234     }\r
1235     &::after {\r
1236         border-bottom-color: @popover-arrow-background-color;\r
1237         border-top-width: 0;\r
1238         top: -@popover-arrow-border-width;\r
1239     }\r
1240 }\r
1241 .plx-popover.plx-popover-bottom {\r
1242     .plx-popover-bottom-common;\r
1243     &::before {\r
1244         left: 50%;\r
1245         margin-left: -@popover-arrow-border-width-before;\r
1246     }\r
1247     &::after {\r
1248         left: 50%;\r
1249         margin-left: -@popover-arrow-border-width;\r
1250     }\r
1251 }\r
1252 .plx-popover.plx-popover-bottom-left {\r
1253     .plx-popover-bottom-common;\r
1254     &::before {\r
1255         left: @popover-arrow-away;\r
1256     }\r
1257     &::after {\r
1258         left: @popover-arrow-away + @popover-arrow-border-height;\r
1259     }\r
1260 }\r
1261 .plx-popover.plx-popover-bottom-right {\r
1262     .plx-popover-bottom-common;\r
1263     &::before {\r
1264         right: @popover-arrow-away;\r
1265     }\r
1266     &::after {\r
1267         right: @popover-arrow-away + @popover-arrow-border-height;\r
1268     }\r
1269 }\r
1270 \r
1271 .plx-popover-left-common {\r
1272     margin-left: -(@popover-arrow-border-width + @popover-away-host);\r
1273     &::before {\r
1274         border-left-color: @popover-arrow-border-color;\r
1275         border-right-width: 0;\r
1276         right: -@popover-arrow-border-width-before;\r
1277     }\r
1278     &::after {\r
1279         border-left-color: @popover-arrow-background-color;\r
1280         border-right-width: 0;\r
1281         right: -@popover-arrow-border-width;\r
1282     }\r
1283 }\r
1284 \r
1285 .plx-popover.plx-popover-left {\r
1286     .plx-popover-left-common;\r
1287     &::before {\r
1288         top: 50%;\r
1289         margin-top: -@popover-arrow-border-width-before;\r
1290     }\r
1291     &::after {\r
1292         top: 50%;\r
1293         margin-top: -@popover-arrow-border-width;\r
1294     }\r
1295 }\r
1296 \r
1297 .plx-popover.plx-popover-left-top {\r
1298     .plx-popover-left-common;\r
1299     &::before {\r
1300         top: @popover-arrow-away;\r
1301     }\r
1302     &::after {\r
1303         top: @popover-arrow-away + @popover-arrow-border-height;\r
1304     }\r
1305 }\r
1306 .plx-popover.plx-popover-left-bottom {\r
1307     .plx-popover-left-common;\r
1308     &::before {\r
1309         bottom: @popover-arrow-away;\r
1310     }\r
1311     &::after {\r
1312         bottom: @popover-arrow-away + @popover-arrow-border-height;\r
1313     }\r
1314 }\r
1315 \r
1316 .plx-popover .plx-popover-title {\r
1317     padding: 8px 14px;\r
1318     margin-bottom: 0;\r
1319     font-size: @font-size-title-level2;\r
1320     background-color: @component-bg;\r
1321     border-bottom: 1px solid @border-color-base;\r
1322     &:empty {\r
1323         display: none;\r
1324     }\r
1325 }\r
1326 \r
1327 .plx-popover .plx-popover-content {\r
1328     padding: 9px 14px;\r
1329     background-color: @component-bg;\r
1330 }\r
1331 \r
1332 .plx-popover .ict-warning {\r
1333     color: @error-color;\r
1334     font-size: 24px;\r
1335     margin-right: 5px;\r
1336 }\r
1337 \r
1338 //.popover .popo {\r
1339 //    text-align: center;\r
1340 //}\r
1341 //\r
1342 //.popover .pop-btn {\r
1343 //    float: right;\r
1344 //    margin-top: 10px;\r
1345 //    margin-bottom: 10px;\r
1346 //    font-size: 0;\r
1347 //}\r
1348 //\r
1349 //.popover .pop-btn .btn-s {\r
1350 //    margin-left: 10px;\r
1351 //}\r
1352 //\r
1353 //.popover .tip-info span {\r
1354 //    vertical-align: middle;\r
1355 //}\r
1356 //\r
1357 //.popover .tip-info .content {\r
1358 //    font-size: 14px;\r
1359 //}\r
1360 \r
1361 .popover-template {\r
1362     padding: 10px 0px;\r
1363     min-width: 220px;\r
1364     .popover-template-content {\r
1365         padding: 10px 10px;\r
1366     }\r
1367     .popover-template-footer {\r
1368         padding: 10px 10px 5px 10px;\r
1369         text-align: center;\r
1370     }\r
1371     .popover-template-icon {\r
1372         display: inline-block;\r
1373         max-width: 30px;\r
1374         float: left;\r
1375     }\r
1376     .popover-template-icon-area {\r
1377         display: inline-block;\r
1378         height: 100%;\r
1379         vertical-align: middle;\r
1380     }\r
1381     .popover-template-msg {\r
1382         display: inline-block;\r
1383         max-width: 300px;\r
1384         margin-left: 10px;\r
1385         margin-top: 1px;\r
1386     }\r
1387 }
1388 ///////
1389
1390
1391 .plx-progress {
1392         display: inline-block;
1393         margin: 0 10px 1px 0;
1394         border-radius: @radius-lg;
1395         overflow: hidden;
1396         background-color: #eee;
1397
1398         .plx-progress-bar {
1399                 width: 0;
1400                 height: 8px;
1401                 transition: width 0.8s ease-in-out;
1402                 opacity: 1;
1403         }
1404
1405         .plx-progress-bar-info {
1406                 position: relative;
1407                 background-color: lighten(@primary-color, 10%);
1408                 &::before {
1409                         background-color: @primary-color;
1410                         content: '';
1411                         position: absolute;
1412                         top: 0;
1413                         left: 0;
1414                         width: 0;
1415                         height: 8px;
1416                         animation: plx-progress-bar-stripes 0.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
1417                 }
1418         }
1419
1420         .plx-progress-bar-info.plx-progress-bar-reset {
1421         transition: none;
1422         }
1423
1424         .plx-progress-bar-warning {
1425                 background-color: @error-color;
1426         }
1427
1428         .plx-progress-bar-success,
1429         .plx-progress-bar-info.plx-progress-bar-success {
1430                 background-color: @primary-color;
1431         }
1432 }
1433
1434 .plx-progress-info {
1435     display: inline-block;
1436         .fp-exclamation-circle {
1437                 color: @error-color;
1438         }
1439 }
1440
1441 @keyframes plx-progress-bar-stripes {
1442   from {width: 0;}
1443   to {width: 100%;}
1444 }
1445
1446 :host(.plx-progressbar-sm) {
1447     .plx-progressbar-sm-common;
1448 }
1449
1450 .plx-progressbar-sm {
1451     .plx-progressbar-sm-common;
1452  }
1453
1454 .plx-progressbar-sm-common {
1455     font-size: 12px;
1456     .plx-progress-bar {
1457         height: 2px;
1458     }
1459     .fp-exclamation-circle {
1460         vertical-align: middle;
1461         font-size: 12px;
1462     }
1463     .plx-progress-info span {
1464         vertical-align: middle;
1465     }
1466 }
1467
1468 ///////
1469 ///////
1470
1471 .search-input {
1472     position: relative;
1473     background: @component-bg;
1474     color: @text-color;
1475   }
1476
1477   .search-input input {
1478     .plx-input;
1479     width: 100%;
1480     font-family: @font-family;
1481     font-size: @font-size;
1482     color: @text-color;
1483   }
1484
1485   .search-input-sm {
1486     height: @input-height-sm !important;
1487   }
1488
1489   .search-img {
1490     color: @disabled-text-color;
1491     position: absolute;
1492     right: 8px;
1493     top: 8px;
1494     list-style: none;
1495     font-size: 16px;
1496   }
1497
1498   .search-img-confirm {
1499     color: @primary-color-click;
1500     cursor: pointer;
1501   }
1502
1503
1504     // placeholder
1505 ::-webkit-input-placeholder {
1506   color: @unselected-text-color !important;
1507 }
1508 :-moz-placeholder {
1509   /* Mozilla Firefox 4 to 18 */
1510   color: @unselected-text-color !important;
1511 }
1512 ::-moz-placeholder {
1513   /* Mozilla Firefox 19+ */
1514   color:@unselected-text-color !important;
1515 }
1516 input:-ms-input-placeholder {
1517   color: @unselected-text-color !important;
1518 }
1519 input::-webkit-input-placeholder {
1520   color:@unselected-text-color !important;
1521 }
1522 ///////\r
1523 \r
1524 select-dropdown {\r
1525   box-sizing: border-box;\r
1526   font-family: @font-family;\r
1527   font-size: @font-size;\r
1528   outline: none;\r
1529   & > div {\r
1530     background-color: @component-bg;\r
1531     position: absolute;\r
1532     z-index: 9999;\r
1533     &.select-sm .filter {\r
1534       input {\r
1535         height: @input-height-sm + 2;\r
1536       }\r
1537       .toggle {\r
1538         top: 13px;\r
1539       }\r
1540     }\r
1541     .filter {\r
1542       width: 100%;\r
1543       input {\r
1544         border: 1px solid @primary-color;\r
1545         border-radius: @radius;\r
1546         padding: 0 10px;\r
1547         width: 100%;\r
1548         height: @input-height + 2;\r
1549       }\r
1550       .toggle {\r
1551         display: block;\r
1552         position: absolute;\r
1553         top: 15px;\r
1554         right: 10px;\r
1555         width: 0;\r
1556         height: 0;\r
1557         border-left: 4px solid transparent;\r
1558         border-right: 4px solid transparent;\r
1559         border-top: 4px solid lighten(@fonticon-color, 5%);\r
1560       }\r
1561     }\r
1562     .options {\r
1563       border: 1px solid @border-color-base;\r
1564       border-top: none;\r
1565       border-radius: @radius;\r
1566       max-height: 160px;\r
1567       overflow-y: auto;\r
1568       ul {\r
1569         list-style: none;\r
1570         margin: 0;\r
1571         padding: 0;\r
1572         li {\r
1573           color: @text-color;\r
1574           height: 30px;\r
1575           line-height: 18px;\r
1576           padding: 6px 20px 6px 8px;\r
1577           position: relative;\r
1578           cursor: pointer;\r
1579           user-select: none;\r
1580           &.single-selected {\r
1581             background-color: @selected-bg-color;\r
1582           }\r
1583           &.highlighted {\r
1584             background-color: @hover-bg-color;\r
1585             color: @text-color;\r
1586           }\r
1587           &.disabled {\r
1588             background-color: @component-bg;\r
1589             color: @disabled-text-color;\r
1590             cursor: default;\r
1591             pointer-events: none;\r
1592           }\r
1593           &.plx-select-message {\r
1594             white-space: nowrap;\r
1595             overflow: hidden;\r
1596             text-overflow: ellipsis;\r
1597           }\r
1598           .option-label {\r
1599             display: inline-block;\r
1600             width: 100%;\r
1601             white-space: nowrap;\r
1602             overflow: hidden;\r
1603             text-overflow: ellipsis;\r
1604           }\r
1605           .option-tick {\r
1606             display: inline-block;\r
1607             position: absolute;\r
1608             right: 5px;\r
1609             top: 5px;\r
1610           }\r
1611           .tick {\r
1612             fill: none;\r
1613             stroke: @success-color;\r
1614             stroke-width: 2;\r
1615             stroke-linecap: round;\r
1616             stroke-linejoin: round;\r
1617             stroke-miterlimit: 10;\r
1618           }\r
1619         }\r
1620       }\r
1621     }\r
1622   }\r
1623 }\r
1624
1625 ///////\r
1626 \r
1627 @option-bg-color: #f8f8f8;\r
1628 @option-border-color: #e6e6e6;\r
1629 @deselect-option-color-hover: #555;\r
1630 \r
1631 plx-select {\r
1632   display: inline-block;\r
1633   margin: 0;\r
1634   position: relative;\r
1635   vertical-align: middle;\r
1636   width: 100%;\r
1637   &.ng-untouched:not(form).ng-untouched:not(fieldset) {\r
1638     border: 0;\r
1639   }\r
1640   & * {\r
1641     box-sizing: border-box;\r
1642     font-family: @font-family;\r
1643     font-size: @font-size;\r
1644     outline: none;\r
1645   }\r
1646   & > div {\r
1647     border: 1px solid @border-color-base;\r
1648     border-radius: @radius;\r
1649     cursor: pointer;\r
1650     user-select: none;\r
1651     width: 100%;\r
1652     &.disabled {\r
1653       background-color: @input-bg-color-disabled;\r
1654       color: @disabled-text-color;\r
1655       cursor: not-allowed;\r
1656       //pointer-events: none;\r
1657     }\r
1658     &.focus-border {\r
1659       border: 1px solid @primary-color !important;\r
1660     }\r
1661     &.select-sm {\r
1662       .value, .placeholder {\r
1663         height: @input-height-sm !important;\r
1664         line-height: @input-height-sm !important;\r
1665       }\r
1666       .toggle {\r
1667         top: 13px;\r
1668       }\r
1669       div.option {\r
1670         height: 20px !important;\r
1671         line-height: 14px !important;\r
1672       }\r
1673       input {\r
1674         height: @input-height-sm;\r
1675         line-height: @input-height-sm;\r
1676       }\r
1677     }\r
1678     input {\r
1679       background-color: transparent;\r
1680       border: none;\r
1681       border-radius: @radius;\r
1682       cursor: pointer;\r
1683       height: @input-height;\r
1684       line-height: @input-height;\r
1685     }\r
1686     .toggle {\r
1687       display: block;\r
1688       position: absolute;\r
1689       top: 15px;\r
1690       right: 10px;\r
1691       width: 0;\r
1692       height: 0;\r
1693       border-left: 4px solid transparent;\r
1694       border-right: 4px solid transparent;\r
1695       border-top: 4px solid lighten(@fonticon-color, 5%);\r
1696     }\r
1697     .single {\r
1698       display: flex;\r
1699       width: 100%;\r
1700       .value, .placeholder {\r
1701         color: @text-color;\r
1702         flex: 1;\r
1703         height: @input-height;\r
1704         line-height: @input-height;\r
1705         overflow: hidden;\r
1706         padding: 0 10px;\r
1707         white-space: nowrap;\r
1708         span {\r
1709           display: inline-block;\r
1710           white-space: nowrap;\r
1711           overflow: hidden;\r
1712           text-overflow: ellipsis;\r
1713           max-width: 100%;\r
1714         }\r
1715       }\r
1716       .placeholder {\r
1717         color: @unselected-text-color;\r
1718       }\r
1719       input {\r
1720         flex: 1;\r
1721         padding: 1px 10px 0 10px;\r
1722       }\r
1723     }\r
1724     .multiple {\r
1725       display: flex;\r
1726       flex-flow: row wrap;\r
1727       //min-height: @input-height;\r
1728       padding: 0 10px;\r
1729       width: 100%;\r
1730       .placeholder {\r
1731         flex: 1;\r
1732         color: @unselected-text-color;\r
1733         height: @input-height;\r
1734         line-height: @input-height;\r
1735         overflow: hidden;\r
1736         white-space: nowrap;\r
1737       }\r
1738       input {\r
1739         padding: 0;\r
1740         margin-right: 10px;\r
1741       }\r
1742       div.option {\r
1743         background-color: @option-bg-color;\r
1744         border: 1px solid @option-border-color;\r
1745         border-radius: @radius-sm;\r
1746         color: @text-color;\r
1747         cursor: default;\r
1748         display: inline-block;\r
1749         flex-shrink: 0;\r
1750         height: 24px;\r
1751         line-height: 18px;\r
1752         margin: 4px 10px 4px 0;\r
1753         padding: 2px 30px 2px 10px;\r
1754         max-width: 100%;\r
1755         position: relative;\r
1756         span {\r
1757           display: inline-block;\r
1758           white-space: nowrap;\r
1759           overflow: hidden;\r
1760           text-overflow: ellipsis;\r
1761           max-width: 100%;\r
1762         }\r
1763         .deselect-option {\r
1764           color: darken(@border-color-base, 10%);\r
1765           cursor: pointer;\r
1766           font-size: 8px;\r
1767           position: absolute;\r
1768           top: 2px;\r
1769           right: 8px;\r
1770           &:hover {\r
1771             color: @deselect-option-color-hover;\r
1772           }\r
1773         }\r
1774       }\r
1775     }\r
1776   }\r
1777 }
1778 ///////
1779
1780 @plx-steps-circle-width: 24px;
1781 @plx-steps-height: 40px;
1782
1783 .plx-ui-steps {
1784   height: @plx-steps-height;
1785 }
1786
1787 .plx-ui-horizon-ul-horizon {
1788   display:flex;
1789   box-orient: horizontal;
1790   padding: 0;
1791   font-size: @font-size;
1792   font-family: @font-family;
1793 }
1794
1795 .plx-ui-steps-li {
1796   list-style: none;
1797   position: relative;
1798   height: 24px;
1799   line-height: 24px;
1800   float: left;
1801   margin-right: 0;
1802 }
1803
1804 .plx-ui-steps-number-active {
1805         color: @component-bg;
1806         background-color: @primary-color;
1807   width: 24px;
1808   height: 24px;
1809   border-radius: 50%;
1810   display: inline-block;
1811   margin-right: 10px;
1812   float: left;
1813   text-align: center;
1814 }
1815 .plx-ui-steps-number-passive {
1816         background-color: #D7D7D7;
1817         color: @component-bg;
1818   width: @plx-steps-circle-width;
1819   height: @plx-steps-circle-width;
1820   border-radius: 50%;
1821   display: inline-block;
1822   margin-right: 10px;
1823   float: left;
1824   text-align: center;
1825 }
1826 .plx-rapire-steps {
1827   position: relative;
1828 }
1829 .plx-ui-steps-number-visited {
1830   width: @plx-steps-circle-width;
1831   height: @plx-steps-circle-width;
1832   border-radius: 50%;
1833   display: inline-block;
1834   margin-right: 10px;
1835   float: left;
1836   position: relative;
1837   color: @primary-color;
1838   background-color: @body-bg;
1839   border: 2px solid @primary-color;
1840 }
1841 .plx-ui-menuitem-div-passive {
1842   position: absolute;
1843   top:50%;
1844   left:50%;
1845   -webkit-transform: translate(-50%, -50%);
1846   -moz-transform: translate(-50%, -50%);
1847   -ms-transform: translate(-50%, -50%);
1848   -o-transform: translate(-50%, -50%);
1849   transform: translate(-50%, -50%);
1850 }
1851
1852 .plx-ui-menuitem-div-active {
1853   position: absolute;
1854   top:50%;
1855   left:50%;
1856   -webkit-transform: translate(-50%, -50%);
1857   -moz-transform: translate(-50%, -50%);
1858   -ms-transform: translate(-50%, -50%);
1859   -o-transform: translate(-50%, -50%);
1860   transform: translate(-50%, -50%);
1861 }
1862
1863 .plx-ui-menuitem-div-passive {
1864   position: absolute;
1865   top:50%;
1866   left:50%;
1867   -webkit-transform: translate(-50%, -50%);
1868   -moz-transform: translate(-50%, -50%);
1869   -ms-transform: translate(-50%, -50%);
1870   -o-transform: translate(-50%, -50%);
1871   transform: translate(-50%, -50%);
1872 }
1873 .plx-ui-menuitem-div-visited {
1874   position: absolute;
1875   top:50%;
1876   left:50%;
1877   -webkit-transform: translate(-50%, -50%);
1878   -moz-transform: translate(-50%, -50%);
1879   -ms-transform: translate(-50%, -50%);
1880   -o-transform: translate(-50%, -50%);
1881   transform: translate(-50%, -50%);
1882 }
1883
1884 .plx-ui-underline {
1885         width: 386px;
1886         height: 2px;
1887         margin-top: @plx-steps-height - 1px + 10px;
1888         position: absolute;
1889         background-color: @primary-color;
1890 }
1891
1892 .passive .plx-ui-underline {
1893         background-color: #D7D7D7;
1894 }
1895
1896 .plx-ui-steps-title-active {
1897   white-space:nowrap;
1898 }
1899 .plx-ui-steps-title-passive {
1900   white-space:nowrap;
1901 }
1902 .plx-ui-steps-title-visited {
1903   white-space:nowrap;
1904 }
1905 .plx-ui-steps-number-visited-tick {
1906   position: absolute;
1907   background-color: transparent;
1908   height: 12px;
1909   width: 7px;
1910   transform: rotate(45deg);
1911   transform-origin: 50% 120%;
1912   transition: all 0.2s;
1913   border-right: 2px solid @primary-color;
1914   border-bottom: 2px solid @primary-color;
1915 }
1916 /**********************************************************************************************************/
1917 .plx-ui-steps-display-vertical {
1918   display:inline-block;
1919 }
1920 .plx-ui-steps-vertical {
1921   height: auto;
1922   width: auto;
1923   min-width: 180px;
1924   display:inline-block;
1925   font-size: @font-size;
1926   font-family: @font-family;
1927 }
1928 .plx-ui-horizon-ul-vertical {
1929   display:inline-block;
1930   box-orient:vertical;
1931   width: auto;
1932   padding: 0;
1933 }
1934 .plx-ui-underline-active-vertical {
1935   margin-left:3px;
1936   width: 10px;
1937   display: table-caption;
1938   min-height: 30px;
1939   border-right: 2px solid #D7D7D7;
1940 }
1941 .plx-ui-underline-visited-vertical {
1942   margin-left:3px;
1943   width: 10px;
1944   display: table-caption;
1945   height: 30px;
1946 }
1947 .plx-ui-underline-passive-vertical {
1948   height: 30px;
1949   margin-left:3px;
1950   width: 10px;
1951   display: table-caption;
1952   border-right: 2px solid #D7D7D7;
1953 }
1954 .plx-ui-steps-li-vertical {
1955   list-style: none;
1956   width: auto;
1957 }
1958
1959 .plx-ui-menuitem-div-active-vertical {
1960
1961 }
1962 .plx-ui-steps-title-active-vertical {
1963   margin-left: 10px;
1964   position: absolute;
1965   width: auto;
1966   height: 24px;
1967   min-width: 64px;
1968   margin-top: 1px;
1969   white-space:nowrap;
1970 }
1971 .plx-ui-steps-title-visited-vertical {
1972   margin-left: 10px;
1973   position: absolute;
1974   width: auto;
1975   height: 24px;
1976   min-width: 64px;
1977   margin-top: 3px;
1978   white-space:nowrap;
1979 }
1980 .plx-ui-steps-title-passive-vertical {
1981   margin-left: 10px;
1982   position: absolute;
1983   width: auto;
1984   height: 24px;
1985   min-width: 64px;
1986   margin-top: 1px;
1987   white-space:nowrap;
1988 }
1989 .plx-ui-steps-number-visited-tick-vertical {
1990   position: absolute;
1991   background-color: transparent;
1992   height: 12px;
1993   width: 7px;
1994   transform: rotate(45deg);
1995   transform-origin: 50% 120%;
1996   transition: all 0.2s;
1997 }
1998 .plx-ui-steps-number-active-vertical {
1999   width: @plx-steps-circle-width;
2000   height: @plx-steps-circle-width;
2001   border-radius: 50%;
2002   display: inline-block;
2003   margin-right: 0;
2004   float: left;
2005   text-align: left;
2006   position: relative;
2007   line-height: @plx-steps-circle-width;
2008 }
2009
2010 .plx-ui-steps-number-passive-vertical {
2011   width: @plx-steps-circle-width;
2012   height: @plx-steps-circle-width;
2013   border-radius: 50%;
2014   display: inline-block;
2015   margin-right: 0;
2016   float: left;
2017   text-align: left;
2018   position: relative;
2019   padding-top: 2px;
2020   line-height: @plx-steps-circle-width;
2021 }
2022
2023 .plx-ui-steps-number-visited-vertical {
2024   width: @plx-steps-circle-width;
2025   height: @plx-steps-circle-width;
2026   border-radius: 50%;
2027   display: inline-block;
2028   margin-right: 0;
2029   float: left;
2030   position: relative;
2031   line-height: @plx-steps-circle-width;
2032 }
2033
2034 ///////\r
2035 \r
2036 .plx-tabset {\r
2037   display: flex;\r
2038   padding-left: 0;\r
2039   margin-bottom: 0;\r
2040   list-style: none;\r
2041 \r
2042   &.plx-nav-tabs {\r
2043     border-bottom: 1px solid @border-color-base;\r
2044     font-size: @font-size + 2px;\r
2045     .plx-nav-item {\r
2046       margin-bottom: -1px;\r
2047     }\r
2048     .plx-nav-link {\r
2049       display: block;\r
2050       border-radius: 0;\r
2051       border: 1px solid transparent;\r
2052       border-top: 2px solid transparent;\r
2053       color: @unselected-text-color;\r
2054       min-width: 100px;\r
2055       text-align: center;\r
2056       padding: 6px 16px;\r
2057       &:hover, &:focus {\r
2058         text-decoration: none;\r
2059         background-color: @hover-bg-color;\r
2060         border-bottom: 0;\r
2061         border-left: 0;\r
2062         border-right: 0;\r
2063       }\r
2064       &.active {\r
2065         color: @text-color;\r
2066         border-top: 2px solid @primary-color;\r
2067         border-left: 1px solid @border-color-base;\r
2068         border-right: 1px solid @border-color-base;\r
2069         background-color: @component-bg;\r
2070         &:hover, &:focus {\r
2071           border-left: 1px solid @border-color-base;\r
2072           border-right: 1px solid @border-color-base;\r
2073           border-bottom: 1px solid transparent;\r
2074         }\r
2075       }\r
2076     }\r
2077     &.bottom {\r
2078       .plx-nav-link {\r
2079         border: 0;\r
2080         border-bottom: 2px solid transparent;\r
2081         &:hover {\r
2082           border-bottom: 1px solid transparent;\r
2083         }\r
2084         &.active {\r
2085           border: 0;\r
2086           border-bottom: 2px solid @primary-color;\r
2087         }\r
2088       }\r
2089     }\r
2090   }\r
2091 \r
2092   &.plx-nav-pills {\r
2093     .plx-nav-link {\r
2094       border: 1px solid @border-color-base;\r
2095       border-radius: 0.25em;\r
2096       color: @unselected-text-color;\r
2097       display: block;\r
2098       padding: 6px 10px;\r
2099       min-width: 100px;\r
2100       text-align: center;\r
2101       &:hover, &:focus {\r
2102         text-decoration: none;\r
2103         color: @btn-common-color-text-hover;\r
2104         border-color: @btn-common-color-border-hover;\r
2105         background-color: @common-color-hover;\r
2106       }\r
2107       &:active {\r
2108         color: @btn-common-color-text-click;\r
2109         border-color: @btn-common-color-border-click;\r
2110         background-color: @common-color-click;\r
2111       }\r
2112       &.active {\r
2113         color: @scene-textcolor;\r
2114         cursor: default;\r
2115         background-color: @primary-color;\r
2116         border-color: @primary-color;\r
2117       }\r
2118     }\r
2119     .plx-nav-item {\r
2120       &:hover, &:focus, &:active {\r
2121         z-index: 2;\r
2122       }\r
2123       &:first-child:not(:last-child) {\r
2124         .plx-nav-link {\r
2125           border-top-right-radius: 0;\r
2126           border-bottom-right-radius: 0;\r
2127         }\r
2128       }\r
2129       &:not(:first-child):not(:last-child) {\r
2130         .plx-nav-link {\r
2131           border-radius: 0;\r
2132         }\r
2133       }\r
2134       &:last-child:not(:first-child) {\r
2135         .plx-nav-link {\r
2136           border-top-left-radius: 0;\r
2137           border-bottom-left-radius: 0;\r
2138         }\r
2139       }\r
2140       & + .plx-nav-item {\r
2141         .plx-nav-link {\r
2142           margin-left: -1px;\r
2143         }\r
2144       }\r
2145     }\r
2146   }\r
2147 }\r
2148 \r
2149 .plx-tab-content {\r
2150   .plx-tab-pane {\r
2151     display: none;\r
2152     &.active {\r
2153       display: block;\r
2154     }\r
2155   }\r
2156 }
2157 ///////
2158 ///////
2159
2160 .plx-table-wrapper{
2161     position: relative;
2162     width: 100%;
2163 }
2164 .plx-table-blur{
2165   opacity: .7;
2166   filter: blur(.5px);
2167 }
2168 .plx-table-loading{
2169     position: absolute;
2170     width: 100%;
2171     height: 100%;
2172     opacity: 1;
2173
2174     z-index: 9999;
2175 }
2176 .plx-table-loading-content{
2177     position: absolute;
2178     width: 36px;
2179     height: 36px;
2180     border: 5px solid @primary-color;
2181     border-right-color: transparent;
2182     top: calc(~"50% - 36px");
2183     left: calc(~"50% - 18px");
2184     animation: plx-table-loading-animation 1s infinite ease-in-out;
2185     border-radius: 50%;
2186 }
2187 .plx-table-loading-placeholder{
2188   position: absolute;
2189   top: calc(~"50% + 10px");
2190   left: calc(~"50% - 18px");
2191 }
2192 /* 加载中动画 */
2193 @-moz-keyframes plx-table-loading-animation {
2194     0% {
2195       -moz-transform: rotate(0deg);
2196       transform: rotate(0deg);
2197     }
2198     100% {
2199       -moz-transform: rotate(360deg);
2200       transform: rotate(360deg);
2201     }
2202   }
2203
2204   @-webkit-keyframes plx-table-loading-animation {
2205     0% {
2206       -webkit-transform: rotate(0deg);
2207       transform: rotate(0deg);
2208     }
2209     100% {
2210       -webkit-transform: rotate(360deg);
2211       transform: rotate(360deg);
2212     }
2213   }
2214
2215   @keyframes plx-table-loading-animation {
2216     0% {
2217       -moz-transform: rotate(0deg);
2218       -ms-transform: rotate(0deg);
2219       -webkit-transform: rotate(0deg);
2220       transform: rotate(0deg);
2221     }
2222     100% {
2223       -moz-transform: rotate(360deg);
2224       -ms-transform: rotate(360deg);
2225       -webkit-transform: rotate(360deg);
2226       transform: rotate(360deg);
2227     }
2228   }
2229
2230   /*表格样式*/
2231
2232   .plx-table{
2233     font-family: @font-family;
2234     font-size: @font-size;
2235     line-height: 1.5;
2236     color: @text-color;
2237     border-collapse: collapse;
2238     width: 100%;
2239     display: table;
2240     table-layout: fixed;
2241     max-width: 100%;
2242     min-width: 100%;
2243     word-break: break-all;
2244
2245     .plx-table-subHead th{
2246       background-color: @component-bg;
2247       line-height: 1;
2248       border-bottom: 1px solid @border-color-base;
2249     }
2250     tr.plx-table-hlt {
2251       background-color: #e2f2fc;
2252     }
2253     tr:hover{
2254       background-color: @hover-bg-color;
2255     }
2256     &.plx-table-normal th{
2257       box-sizing: border-box;
2258       height: 40px;
2259       padding: 0px 10px ;
2260       color: @text-color;
2261       text-decoration: none;
2262       font-weight: normal;
2263       font-size: @font-size;
2264       border: 1px solid @border-color-base;
2265       background-color: #f5f5f5;
2266     }
2267     &.plx-table-normal td{
2268       border: 1px solid @border-color-base;
2269       vertical-align: middle;
2270       height: 40px;
2271       padding: 2px 10px 0px 10px;
2272     }
2273     &.plx-table-large th{
2274       box-sizing: border-box;
2275       height: 50px;
2276       padding: 0px 10px ;
2277       color: @text-color;
2278       text-decoration: none;
2279       font-weight: normal;
2280       font-size: @font-size;
2281       border: none;
2282       background-color: #f5f5f5;
2283     }
2284     &.plx-table-large td{
2285       border-bottom: 1px solid @border-color-base;
2286       vertical-align: middle;
2287       height: 50px;
2288       padding: 2px 10px 0px 10px;
2289     }
2290     &.plx-table-card th{
2291       box-sizing: border-box;
2292       height: 64px;
2293       padding: 0px 10px ;
2294       color: @text-color;
2295       text-decoration: none;
2296       font-weight: normal;
2297       font-size: @font-size;
2298       border: none;
2299       background-color: #f5f5f5;
2300     }
2301     &.plx-table-card td{
2302       border-bottom: 1px solid @border-color-base;
2303       vertical-align: middle;
2304       height: 64px;
2305       padding: 2px 10px 0px 10px;
2306     }
2307     &.plx-table-sm th{
2308       box-sizing: border-box;
2309       height: 30px;
2310       padding: 0px 10px ;
2311       color: @text-color;
2312       text-decoration: none;
2313       font-weight: normal;
2314       font-size: @font-size;
2315       border: 1px solid @border-color-base;
2316       background-color: #f5f5f5;
2317     }
2318     &.plx-table-sm td{
2319       border: 1px solid @border-color-base;
2320       vertical-align: middle;
2321       height: 30px;
2322       padding: 2px 10px 0px 10px;
2323     }
2324
2325     & tbody tr:first-child td{
2326       border-top: none;
2327     }
2328
2329   }
2330
2331   .plx-table-fix{
2332     table-layout: fixed;
2333   }
2334
2335  /*防止分页区域高度塌陷*/
2336 .plx-table-pagnation-content{
2337     overflow: auto;
2338 }
2339 /*搜索区域*/
2340 .plx-table-opretions-wrapper:after{
2341   content: '';
2342   display: block;
2343   clear: both;
2344   height: 0;
2345   visibility: hidden;
2346
2347 }
2348
2349 .plx-table-align-center{
2350     text-align: center;
2351 }
2352 .plx-table-align-left{
2353     text-align: left;
2354 }
2355 .plx-table-align-right{
2356     text-align: right;
2357 }
2358 .plx-table-head-checkbox label{
2359     margin-bottom: 0px;
2360     vertical-align: top;
2361 }
2362 .plx-table td.plx-table-no-data{
2363   height: 60px;
2364   text-align:center;
2365   font-size: @font-size;
2366   color: @text-color;
2367 }
2368
2369 ///////
2370 ///////
2371
2372 @input-short-width: 120px;
2373 @padding-left: 10px;
2374 @padding: 10px;
2375 @border-width: 1px;
2376 @unit-span-width: 45px;
2377 @unit-option-width: 84px;
2378 @short-unit-span-width: 40px;
2379 @prefix-span-width: 70px;
2380 @prefix-option-width: 84px;
2381 @short-prefix-span-width: 40px;
2382 @password-switch: 40px;
2383
2384 .font {
2385         font-family: @font-family;
2386         font-size: @font-size;
2387 }
2388
2389 .text-input {
2390         //height: @input-height;
2391         //position: relative;
2392         //margin-bottom: 0;
2393         display: inline-block;
2394
2395         .caret-down {
2396                 display: block;
2397                 width: 0;
2398                 height: 0;
2399                 border-left: 4px solid transparent;
2400                 border-right: 4px solid transparent;
2401                 border-top: 4px solid lighten(@fonticon-color, 5%);
2402                 margin-top: 4px;
2403                 margin-bottom: 10px;
2404
2405                 &.caret-down-hover:hover, &.caret-down-hover:active {
2406                         border-top: 4px solid @primary-color;
2407                 }
2408         }
2409         .caret-up {
2410                 display: block;
2411                 width: 0;
2412                 height: 0;
2413                 border-left: 4px solid transparent;
2414                 border-right: 4px solid transparent;
2415                 border-bottom: 4px solid lighten(@fonticon-color, 5%);
2416                 margin-top: 10px;
2417
2418                 &.caret-up-hover:hover, &.caret-up-hover:active {
2419                         border-bottom: 4px solid @primary-color;
2420                 }
2421         }
2422         .toggle {
2423                 float: right;
2424                 margin-right: 10px;
2425                 margin-top: 14px;
2426                 border-left: 4px solid transparent;
2427                 border-right: 4px solid transparent;
2428                 border-top: 4px solid lighten(@fonticon-color, 5%);
2429         }
2430         .text-input-dataList {
2431                  margin-top: 2px;
2432                  position: absolute;
2433                  z-index: @z-index-dropdown;
2434                  border: 1px solid @gray-grade-7;
2435                  background: #fff;
2436                  cursor: pointer;
2437                  border-radius: @radius;
2438                  li {
2439                          list-style: none;
2440                          height: @input-height;
2441                          width: @input-width;
2442                          padding-left: @padding-left;
2443                          &:hover {
2444                                  background-color: @hover-bg-color;
2445                          }
2446                  }
2447          }
2448 }
2449
2450 .input-span {
2451         display: inline-block;
2452         overflow: visible;
2453         padding: 0;
2454         position: relative;
2455 }
2456
2457 .text-input-with-hint {
2458   margin-bottom: -8px;
2459   :host(.ng-touched.ng-invalid.input-blur) & {
2460     height: auto;
2461     margin-bottom: 0;
2462   }
2463 }
2464
2465 .plx-text-input-unit-group, .plx-text-input-prefix-group {
2466         position: absolute;
2467         margin-top: @overlay-margin-top;
2468         width: @unit-option-width;
2469         z-index: @z-index-dropdown;
2470         border-radius: @radius;
2471         background: @component-bg;
2472         border: 1px solid @border-color-base;
2473         .shadow;
2474         cursor: pointer;
2475         li {
2476                 padding-left: 10px;
2477                 height: @input-height;
2478                 list-style: none;
2479                 line-height: @input-height;
2480                 font-size: @font-size;
2481                 &:hover {
2482                         background-color: @hover-bg-color;
2483                 }
2484                 &.group-selected, &.group-selected:hover {
2485                         background-color: @selected-bg-color;
2486                         color: @text-color;
2487                 }
2488         }
2489 }
2490
2491 .text-input-optional {
2492   display: inline-block;
2493   margin-right: 6px;
2494   padding-left:5px;
2495 }
2496
2497 .input-right-border .plx-input {
2498         border-right: 1px solid @primary-color;
2499 }
2500
2501 .input-left-border .plx-input {
2502         border-left: 1px solid @primary-color;
2503 }
2504
2505 .text-input-hint {
2506         top: 42px;
2507         left: 10px;
2508         font-family: @font-family;
2509         font-size: @font-size;
2510         color: @disabled-text-color;
2511         :host(.ng-touched.ng-invalid.input-blur) & {
2512                 display: none;
2513         }
2514 }
2515
2516 .text-input-prefix {
2517         .font;
2518         display: inline-block;
2519         width: @prefix-span-width;
2520         height: @input-height;
2521         text-align: center;
2522         line-height: @input-height;
2523         border-top-left-radius: @radius;
2524         border-bottom-left-radius: @radius;
2525         color: @disabled-text-color;
2526         border: 1px solid @border-color-base;
2527         border-right: 0;
2528         vertical-align: middle;
2529         .short-text-input & {
2530                 width: @short-prefix-span-width;
2531         }
2532         .input-span-focus & {
2533                 border-color: @primary-color;
2534         }
2535         .input-invalid.ng-dirty.ng-invalid.ng-touched.input-blur &,
2536         .input-invalid.ng-dirty.ng-invalid.ng-touched.input-blur .input-span-focus:focus & {
2537                 border-color: @error-color;
2538         }
2539 }
2540
2541 .input-unit {
2542   .font;
2543   display: inline-block;
2544   height: @input-height;
2545   text-align: center;
2546   line-height: @input-height;
2547   border-top-right-radius: @radius;
2548   border-bottom-right-radius: @radius;
2549 }
2550
2551 .text-input-unit {
2552         border: 1px solid @border-color-base;
2553         border-left: 0;
2554         .input-unit;
2555         color: @disabled-text-color;
2556         width: @unit-span-width;
2557         text-align: center;
2558         vertical-align: middle;
2559         .short-text-input & {
2560                 width: @short-unit-span-width;
2561         }
2562         .input-span-focus & {
2563                 border-color: @primary-color;
2564         }
2565 }
2566
2567 .text-input-prefix-option {
2568         .font;
2569         display: inline-block;
2570         height: @input-height;
2571         text-align: center;
2572         line-height: @input-height;
2573         border-top-left-radius: @radius;
2574         border-bottom-left-radius: @radius;
2575         width: @prefix-option-width;
2576         text-align: left;
2577         padding-left: 10px;
2578         cursor: pointer;
2579         border: 1px solid @border-color-base;;
2580         border-right: 0;
2581         vertical-align: middle;
2582         &.prefix-focus {
2583                 border-color: @primary-color;
2584         }
2585 }
2586
2587 .text-input-unit-option {
2588         &:extend(.input-unit);
2589         width: @unit-option-width;
2590         text-align: left;
2591         padding-left: 10px;
2592         cursor: pointer;
2593         border: 1px solid @border-color-base;;
2594         border-left: 0;
2595         vertical-align: middle;
2596         .input-span-focus & {
2597                 border-color: @primary-color;
2598         }
2599 }
2600
2601 .text-input-with-unitOption {
2602         div.unit-focus {
2603                 border-color: @primary-color;
2604         }
2605 }
2606
2607 .plx-input {
2608   .short-text-input & {
2609     width: @input-short-width;
2610   }
2611
2612   .text-input-with-unit & {
2613     width: @input-width - @unit-span-width;
2614     border-top-right-radius: 0;
2615     border-bottom-right-radius: 0;
2616   }
2617
2618   .text-input-with-unitOption & {
2619     width: @input-width - @unit-option-width;
2620     border-top-right-radius: 0;
2621     border-bottom-right-radius: 0;
2622   }
2623
2624   .text-input-with-prefix & {
2625     width: @input-width - @prefix-span-width;
2626     border-top-left-radius: 0;
2627     border-bottom-left-radius: 0;
2628   }
2629
2630         .text-input-with-prefixOption & {
2631                 width: @input-width - @prefix-option-width;
2632                 border-top-left-radius: 0;
2633                 border-bottom-left-radius: 0;
2634         }
2635
2636         .text-input-with-passwordSwith & {
2637                 width: @input-width - @password-switch;
2638                 border-top-right-radius: 0;
2639                 border-bottom-right-radius: 0;
2640         }
2641
2642   .text-input-with-prefix.text-input-with-unit & {
2643     width: @input-width - @prefix-span-width - @unit-span-width;
2644   }
2645
2646   .text-input-with-prefix.text-input-with-unitOption & {
2647     width: @input-width - @prefix-span-width - @unit-option-width;
2648   }
2649
2650   .short-text-input.text-input-with-prefix & {
2651     width: @input-short-width - @short-prefix-span-width;
2652   }
2653
2654   .short-text-input.text-input-with-unit & {
2655     width: @input-short-width - @short-unit-span-width;
2656   }
2657
2658   .short-text-input.text-input-with-prefix.text-input-with-unit & {
2659     width: @input-short-width - @short-prefix-span-width - @short-unit-span-width;
2660   }
2661 }
2662
2663 .input-spinner() {
2664   cursor: pointer;
2665   display: block;
2666   font-size: 12px;
2667   position: absolute;
2668   margin: 0;
2669   right: 0;
2670   overflow: hidden;
2671   border: none;
2672   padding: 0;
2673   text-align: center;
2674   vertical-align: middle;
2675   width: 18px;
2676 }
2677
2678 .input-spinner-up {
2679   .input-spinner();
2680   top: 0;
2681 }
2682
2683 .input-spinner-down {
2684   .input-spinner();
2685   bottom: 0;
2686 }
2687
2688 :host(.plx-input-sm) {
2689     .plx-input-sm-common;
2690 }
2691
2692 .plx-input-sm {
2693      .plx-input-sm-common;
2694 }
2695
2696 .plx-input-sm-common {
2697     .plx-input {
2698         height: @input-height-sm;
2699         line-height: @input-height-sm;
2700     }
2701     .text-input-prefix,
2702     .text-input-unit,
2703     .text-input-unit-option,
2704     .text-input-prefix-option {
2705         height: @input-height-sm;
2706         line-height: @input-height-sm;
2707     }
2708     div.text-input-dataList {
2709         height: @input-height-sm;
2710     }
2711     .toggle {
2712         margin-top: 11px;
2713     }
2714     .caret-down {
2715         margin-bottom: 8px;
2716     }
2717     .caret-up {
2718         margin-top: 8px;
2719     }
2720     .plx-input-passwordSwitch {
2721         line-height: @input-height-sm - 2px;
2722     }
2723 }
2724
2725 .plx-input-passwordSwitch {
2726         display: inline-block;
2727         line-height: @input-height - 2px;
2728         width: @password-switch;
2729         text-align: center;
2730         vertical-align: middle;
2731         background-color: @common-color;
2732         border: 1px solid @border-color-base;
2733         border-left: 0;
2734         border-bottom-right-radius: @radius;
2735         border-top-right-radius: @radius;
2736         cursor: pointer;
2737         &:focus,
2738         &:hover {
2739     border-color: @btn-common-color-border-hover;
2740                 background-color: @common-color-hover;
2741     &.ict-eye-closed, &.ict-eye {
2742       color: @btn-common-color-text-hover;
2743     }
2744         }
2745         &:active {
2746                 background-color: @common-color-click;
2747     border-color: @btn-common-color-border-click;
2748     &.ict-eye-closed, &.ict-eye {
2749       color: @btn-common-color-text-click;
2750     }
2751         }
2752         &.ict-eye-closed, &.ict-eye {
2753                 color: @fonticon-color;
2754                 font-size: 16px;
2755         }
2756  }
2757 .input-right-border-pwdswith-hover .plx-input {
2758   border-right-color: @btn-common-color-border-hover;
2759 }
2760 .input-right-border-pwdswith-click .plx-input {
2761   border-right-color: @btn-common-color-border-click;
2762 }
2763
2764 .plx-text-input-ip-dot {
2765         display: inline-block;
2766         vertical-align: bottom;
2767         color: #999;
2768 }
2769
2770 .plx-text-input-error {
2771         font-size: 12px;
2772         color: @error-color;
2773         margin-top: 5px;
2774 }
2775
2776 :host(.plx-text-input-ip-invalid) {
2777     .plx-text-input-ip-invalid-common;
2778 }
2779
2780 .plx-text-input-ip-invalid {
2781      .plx-text-input-ip-invalid-common;
2782 }
2783
2784 .plx-text-input-ip-invalid-common {
2785     .plx-input {
2786         border-color: @error-color;
2787     }
2788     .input-span-focus .plx-input {
2789         border-color: @primary-color;
2790     }
2791 }
2792
2793 ///////
2794
2795 .plx-textarea-container {
2796         display: inline-block;
2797  }
2798
2799 .plx-textarea-class {
2800 //      height: 90px;
2801         width: 100%;
2802         font-size: @font-size;
2803         font-family: @font-family;
2804         line-height: 1.5;
2805         resize: none;
2806         padding: 7px;
2807         border: 1px solid @border-color-base;
2808         border-radius: @border-radius-base;
2809         box-shadow: none;
2810         outline: none;
2811         overflow-y: auto;
2812         &:focus {
2813                 border-color: @primary-color;
2814         }
2815         &::-webkit-input-placeholder {
2816                 text-shadow: none;
2817                 -webkit-text-fill-color: initial;
2818         }
2819 }
2820
2821 .plx-align-tip {
2822         vertical-align: top;
2823         font-size: @font-size;
2824         font-weight: normal;
2825         color: @disabled-text-color;
2826 }
2827
2828 .plx-align-number {
2829         font-size: @font-size;
2830         font-weight: normal;
2831         line-height: 1;
2832         text-align: right;
2833         width: 100%;
2834         color: @disabled-text-color;
2835         .plx-align-number-margin-top(@font-size);
2836 }
2837
2838 .plx-align-number-margin-top(14px) {
2839         margin-top: -3px;
2840 }
2841
2842 .plx-align-number-margin-top(12px) {
2843         margin-top: -2px;
2844 }
2845
2846 ///////
2847
2848 @toggle-width:          44px;
2849 @toggle-height:         22px;
2850 @toggle-circle-size:    18px;
2851
2852 @toggle-sm-width:          34px;
2853 @toggle-sm-height:         18px;
2854 @toggle-sm-circle-size:    14px;
2855 .plx-toggle-switch {
2856   display: inline-block;
2857   height: @toggle-height;
2858   width: @toggle-width;
2859   position: relative;
2860   vertical-align: middle;
2861   text-align: left;
2862   font-size: 0;
2863   input[type='checkbox'] {
2864     display: none;
2865     -webkit-appearance: none;
2866     -moz-appearance: none;
2867     -ms-progress-appearance: none;
2868   }
2869   input[type='checkbox'] + label {
2870     display: inline-block;
2871     height: @toggle-height;
2872     position: relative;
2873     cursor: pointer;
2874     &::before {
2875       position: absolute;
2876       display: inline-block;
2877       content: '';
2878       height: @toggle-height;
2879       width: @toggle-width;
2880       border-radius: @toggle-height/2;
2881       transition: 0.15s ease-in;
2882       transition-property: background-color;
2883           background-color: #DDDDDD;
2884     }
2885     &::after {
2886       position: absolute;
2887       display: inline-block;
2888       content: '';
2889       height: @toggle-circle-size;
2890       width: @toggle-circle-size;
2891       border-radius: 50%;
2892       top: 2px;
2893       left: 2px;
2894       transition: left 0.15s ease-in;
2895           background-color: @component-bg;
2896     }
2897   }
2898   input[type='checkbox']:checked + label {
2899     &::before {
2900           background-color: @primary-color;
2901           transition: background-color 0.15s ease-in;
2902       transition: background-color 0.15s ease-in;
2903     }
2904     &::after {
2905       left: @toggle-width - @toggle-circle-size - 2px;
2906       transition: left 0.15s ease-in;
2907     }
2908   }
2909   input[type='checkbox']:disabled + label,
2910   input[type='checkbox']:checked:disabled + label {
2911     cursor: not-allowed;
2912     &::before {
2913       opacity: 0.5;
2914     }
2915   }
2916 }
2917
2918 :host(.plx-toggle-sm) .plx-toggle-switch {
2919     .plx-toggle-sm-switch-common;
2920 }
2921
2922 .plx-toggle-sm .plx-toggle-switch {
2923     .plx-toggle-sm-switch-common;
2924 }
2925
2926 .plx-toggle-sm-switch-common {
2927     height: @toggle-sm-height;
2928     width: @toggle-sm-width;
2929     input[type='checkbox'] + label {
2930         height: @toggle-sm-height;
2931         &::before {
2932             height: @toggle-sm-height;
2933             width: @toggle-sm-width;
2934             border-radius: @toggle-sm-height/2;
2935         }
2936         &::after {
2937             height: @toggle-sm-circle-size;
2938             width: @toggle-sm-circle-size;
2939         }
2940     }
2941     input[type='checkbox']:checked + label {
2942         &::after {
2943             left: @toggle-sm-width - @toggle-sm-circle-size - 2px;
2944             transition: left 0.15s ease-in;
2945         }
2946     }
2947 }
2948
2949 ///////\r
2950 .toolbar {\r
2951 \r
2952         i.seperate-vertical {\r
2953                 margin-right: 10px;\r
2954                 margin-left: 0;\r
2955                 border-right: 1px solid @border-color-split;\r
2956         }\r
2957 \r
2958         span {\r
2959                 color: @text-color;\r
2960                 cursor: pointer;\r
2961                 margin-right: 10px;\r
2962                 font-size: 16px;\r
2963                 display: inline-block;\r
2964                 width: 28px;\r
2965                 height: 28px;\r
2966                 border: 1px solid transparent;\r
2967                 padding: 5px;\r
2968 \r
2969                 &:hover {\r
2970                         background-color: @hover-bg-color;\r
2971                         border-radius: @radius-sm;\r
2972                 }\r
2973 \r
2974                 &:last-child {\r
2975                         margin-right: 0px;\r
2976                 }\r
2977         }\r
2978 }\r
2979
2980 ///////\r
2981 \r
2982 @tooltip-arrow-border-width: 4px;\r
2983 @tooltip-arrow-border-width-before: 5px;\r
2984 @tooltip-arrow-border-height: @tooltip-arrow-border-width-before - @tooltip-arrow-border-width;\r
2985 @tooltip-arrow-away: 5px;\r
2986 @tooltip-arrow-background-color: #595959;\r
2987 @tooltip-arrow-border-color: #595959;\r
2988 @tooltip-away-host: 3px;\r
2989 \r
2990 .plx-tooltip {\r
2991     font-family: @font-family;\r
2992     font-size: @font-size;\r
2993     opacity: 1;\r
2994     position: absolute;\r
2995     z-index: 10001;\r
2996     display: block;\r
2997     font-style: normal;\r
2998     font-weight: normal;\r
2999     letter-spacing: normal;\r
3000     line-break: auto;\r
3001     line-height: 1.5;\r
3002     text-align: left;\r
3003     text-decoration: none;\r
3004     text-shadow: none;\r
3005     text-transform: none;\r
3006     white-space: normal;\r
3007     word-break: normal;\r
3008     word-spacing: normal;\r
3009     word-wrap: break-word;\r
3010     &::before,\r
3011     &::after {\r
3012         content: "";\r
3013         position: absolute;\r
3014         display: block;\r
3015         width: 0;\r
3016         height: 0;\r
3017         border: solid transparent;\r
3018     }\r
3019     &::before {\r
3020         border-width: @tooltip-arrow-border-width-before;\r
3021     }\r
3022     &::after {\r
3023         border-width: @tooltip-arrow-border-width;\r
3024     }\r
3025 }\r
3026 \r
3027 .plx-tooltip-inner {\r
3028     min-width: 60px;\r
3029     max-width: 200px;\r
3030     padding: 3px 8px;\r
3031     color: #fff;\r
3032     text-align: center;\r
3033     background-color: #000;\r
3034 }\r
3035 \r
3036 .plx-tooltip.show {\r
3037         font-size: @font-size;\r
3038         opacity: 1;\r
3039 }\r
3040 .plx-tooltip.show .plx-tooltip-inner {\r
3041         background-color: #595959;\r
3042         border-radius: @radius;\r
3043         padding: 0px 12px;\r
3044         height: 30px;\r
3045         line-height: 30px;\r
3046 }\r
3047 \r
3048 .plx-tooltip-top-common {\r
3049     margin-top: -(@tooltip-arrow-border-width + @tooltip-away-host);\r
3050     &::before {\r
3051         border-top-color: @tooltip-arrow-border-color;\r
3052         border-bottom-width: 0;\r
3053         bottom: -@tooltip-arrow-border-width-before;\r
3054     }\r
3055     &::after {\r
3056         border-top-color: @tooltip-arrow-background-color;\r
3057         border-bottom-width: 0;\r
3058         bottom: -@tooltip-arrow-border-width;\r
3059     }\r
3060 }\r
3061 .plx-tooltip-top {\r
3062     .plx-tooltip-top-common;\r
3063     &::before {\r
3064         left: 50%;\r
3065         margin-left: -@tooltip-arrow-border-width-before;\r
3066     }\r
3067     &::after {\r
3068         left: 50%;\r
3069         margin-left: -@tooltip-arrow-border-width;\r
3070     }\r
3071 }\r
3072 .plx-tooltip.plx-tooltip-top-left {\r
3073     .plx-tooltip-top-common;\r
3074     &::before {\r
3075         left: @tooltip-arrow-away;\r
3076     }\r
3077     &::after {\r
3078         left: @tooltip-arrow-away + @tooltip-arrow-border-height;\r
3079     }\r
3080 }\r
3081 .plx-tooltip.plx-tooltip-top-right {\r
3082     .plx-tooltip-top-common;\r
3083     &::before {\r
3084         right: @tooltip-arrow-away;\r
3085     }\r
3086     &::after {\r
3087         right: @tooltip-arrow-away + @tooltip-arrow-border-height;\r
3088     }\r
3089 }\r
3090 \r
3091 .plx-tooltip-right-common {\r
3092     margin-left: @tooltip-arrow-border-width + @tooltip-away-host;\r
3093     &::before {\r
3094         border-right-color: @tooltip-arrow-border-color;\r
3095         border-left-width: 0;\r
3096         left: -@tooltip-arrow-border-width-before;\r
3097     }\r
3098     &::after {\r
3099         border-right-color: @tooltip-arrow-background-color;\r
3100         border-left-width: 0;\r
3101         left: -@tooltip-arrow-border-width;\r
3102     }\r
3103 }\r
3104 .plx-tooltip.plx-tooltip-right {\r
3105     .plx-tooltip-right-common;\r
3106     &::before {\r
3107         top: 50%;\r
3108         margin-top: -@tooltip-arrow-border-width-before;\r
3109     }\r
3110     &::after {\r
3111         top: 50%;\r
3112         margin-top: -@tooltip-arrow-border-width;\r
3113     }\r
3114 }\r
3115 .plx-tooltip.plx-tooltip-right-top {\r
3116     .plx-tooltip-right-common;\r
3117     &::before {\r
3118         top: @tooltip-arrow-away;\r
3119     }\r
3120     &::after {\r
3121         top: @tooltip-arrow-away + @tooltip-arrow-border-height;\r
3122     }\r
3123 }\r
3124 .plx-tooltip.plx-tooltip-right-bottom {\r
3125     .plx-tooltip-right-common;\r
3126     &::before {\r
3127         bottom: @tooltip-arrow-away;\r
3128     }\r
3129     &::after {\r
3130         bottom: @tooltip-arrow-away + @tooltip-arrow-border-height;\r
3131     }\r
3132 }\r
3133 \r
3134 .plx-tooltip-bottom-common {\r
3135     margin-top: @tooltip-arrow-border-width + @tooltip-away-host;\r
3136     &::before {\r
3137         border-bottom-color: @tooltip-arrow-border-color;\r
3138         border-top-width: 0;\r
3139         top: -@tooltip-arrow-border-width-before;\r
3140     }\r
3141     &::after {\r
3142         border-bottom-color: @tooltip-arrow-background-color;\r
3143         border-top-width: 0;\r
3144         top: -@tooltip-arrow-border-width;\r
3145     }\r
3146 }\r
3147 .plx-tooltip.plx-tooltip-bottom {\r
3148     .plx-tooltip-bottom-common;\r
3149     &::before {\r
3150         left: 50%;\r
3151         margin-left: -@tooltip-arrow-border-width-before;\r
3152     }\r
3153     &::after {\r
3154         left: 50%;\r
3155         margin-left: -@tooltip-arrow-border-width;\r
3156     }\r
3157 }\r
3158 .plx-tooltip.plx-tooltip-bottom-left {\r
3159     .plx-tooltip-bottom-common;\r
3160     &::before {\r
3161         left: @tooltip-arrow-away;\r
3162     }\r
3163     &::after {\r
3164         left: @tooltip-arrow-away + @tooltip-arrow-border-height;\r
3165     }\r
3166 }\r
3167 .plx-tooltip.plx-tooltip-bottom-right {\r
3168     .plx-tooltip-bottom-common;\r
3169     &::before {\r
3170         right: @tooltip-arrow-away;\r
3171     }\r
3172     &::after {\r
3173         right: @tooltip-arrow-away + @tooltip-arrow-border-height;\r
3174     }\r
3175 }\r
3176 \r
3177 .plx-tooltip-left-common {\r
3178     margin-left: -(@tooltip-arrow-border-width + @tooltip-away-host);\r
3179     &::before {\r
3180         border-left-color: @tooltip-arrow-border-color;\r
3181         border-right-width: 0;\r
3182         right: -@tooltip-arrow-border-width-before;\r
3183     }\r
3184     &::after {\r
3185         border-left-color: @tooltip-arrow-background-color;\r
3186         border-right-width: 0;\r
3187         right: -@tooltip-arrow-border-width;\r
3188     }\r
3189 }\r
3190 \r
3191 .plx-tooltip.plx-tooltip-left {\r
3192     .plx-tooltip-left-common;\r
3193     &::before {\r
3194         top: 50%;\r
3195         margin-top: -@tooltip-arrow-border-width-before;\r
3196     }\r
3197     &::after {\r
3198         top: 50%;\r
3199         margin-top: -@tooltip-arrow-border-width;\r
3200     }\r
3201 }\r
3202 \r
3203 .plx-tooltip.plx-tooltip-left-top {\r
3204     .plx-tooltip-left-common;\r
3205     &::before {\r
3206         top: @tooltip-arrow-away;\r
3207     }\r
3208     &::after {\r
3209         top: @tooltip-arrow-away + @tooltip-arrow-border-height;\r
3210     }\r
3211 }\r
3212 .plx-tooltip.plx-tooltip-left-bottom {\r
3213     .plx-tooltip-left-common;\r
3214     &::before {\r
3215         bottom: @tooltip-arrow-away;\r
3216     }\r
3217     &::after {\r
3218         bottom: @tooltip-arrow-away + @tooltip-arrow-border-height;\r
3219     }\r
3220 }
3221 @checkbox-border-size: 1px;\r
3222 \r
3223 .plx-checkbox-container {\r
3224         font-size: 0;\r
3225         position: relative;\r
3226 }\r
3227 \r
3228 .plx-checkbox {\r
3229         position: absolute;\r
3230         z-index: -1;\r
3231         opacity: 0;\r
3232         & + .checkbox-substitute {\r
3233                 position: relative;\r
3234                 display: inline-block;\r
3235                 cursor: pointer;\r
3236                 height: @checkbox-size;\r
3237                 width: @checkbox-size;\r
3238                 border: @checkbox-border-size solid @border-color-base;\r
3239                 border-radius: @radius-sm;\r
3240                 vertical-align: middle;\r
3241         }\r
3242         & + .checkbox-substitute + span {\r
3243                 font-weight: normal;\r
3244                 font-size: @font-size;\r
3245                 cursor: pointer;\r
3246                 vertical-align: middle;\r
3247                 .font-padding(@font-size);\r
3248         }\r
3249         &:hover + .checkbox-substitute {\r
3250                 border-color: @primary-color;\r
3251                 outline: none;\r
3252                 background-image: none;\r
3253                 -webkit-box-shadow: none;\r
3254                 -moz-box-shadow: none;\r
3255                 box-shadow: none;\r
3256                 text-shadow: none;\r
3257         }\r
3258         &:checked + .checkbox-substitute {\r
3259                 border-color: @primary-color;\r
3260                 background-color: @primary-color;\r
3261                 &::after {\r
3262                         .checkbox-check(@component-bg);\r
3263                 }\r
3264         }\r
3265         &:checked.portion + .checkbox-substitute {\r
3266                 background-color: @primary-color;\r
3267                 border-color: @primary-color;\r
3268                 opacity: 0.5;\r
3269         }\r
3270         &:disabled + .checkbox-substitute,\r
3271         &[disabled] + .checkbox-substitute {\r
3272                 border-color: @border-color-base;\r
3273                 background-color: @input-bg-color-disabled;\r
3274                 cursor: not-allowed;\r
3275         }\r
3276         &:disabled + .checkbox-substitute + span,\r
3277         &[disabled] + .checkbox-substitute + span {\r
3278                 cursor: not-allowed;\r
3279         }\r
3280         &:checked.portion[disabled] + .checkbox-substitute {\r
3281                 background-color: @border-color-base;\r
3282                 border-color: @border-color-base;\r
3283                 &::after {\r
3284                         .checkbox-check(@fonticon-color);\r
3285                 }\r
3286         }\r
3287         &:checked[disabled] + .checkbox-substitute {\r
3288                 border-color: @border-color-base;\r
3289                 background-color: @border-color-base;\r
3290         }\r
3291 }\r
3292 \r
3293 .checkbox-check(@color) {\r
3294         content: '';\r
3295         position: absolute;\r
3296         display: block;\r
3297         width: 6px;\r
3298         height: 10px;\r
3299         border: solid @color;\r
3300         border-width: 0 2px 2px 0;\r
3301         transform: rotate(45deg);\r
3302         .checkbox-check-left(@font-size);\r
3303         top: 0;\r
3304 }\r
3305 \r
3306 .checkbox-check-left(12px) {\r
3307         left: 3px;\r
3308 }\r
3309 \r
3310 .checkbox-check-left(14px) {\r
3311         left: 4px;\r
3312 }\r
3313 \r
3314 .font-padding(12px) {\r
3315         padding-left: 6px;\r
3316 }\r
3317 \r
3318 .font-padding(14px) {\r
3319         padding-left: 10px;\r
3320 }\r
3321
3322 ///////\r
3323 ///////\r
3324 \r
3325 @tree-node-ul-padding: 21px;\r
3326 @margin-right: 10px;\r
3327 \r
3328 .plx-treenode{\r
3329         cursor: pointer;\r
3330         background-attachment: scroll;\r
3331         background-color: transparent;\r
3332         background-image: none;\r
3333         background-position: 0 0;\r
3334         background-repeat: repeat-y;\r
3335         list-style: none outside none;\r
3336         margin: 0;\r
3337         padding:0;\r
3338         white-space: nowrap;\r
3339         font-size: @font-size;\r
3340 \r
3341         .plx-treenode-content{\r
3342                 margin-top:10px;\r
3343 \r
3344                 &.light{\r
3345                         margin-top:15px;\r
3346                 }\r
3347         }\r
3348 }\r
3349 \r
3350 .plx-treenode ul.plx-treenode-children {\r
3351         display: block;\r
3352         -webkit-padding-start: @tree-node-ul-padding;\r
3353 }\r
3354 \r
3355 .plx-treenode-toggler{\r
3356         font-size: 16px;\r
3357         color: @primary-color;\r
3358         display: inline-block;\r
3359         margin-right: 7px;\r
3360         margin-top:2px;\r
3361         vertical-align: bottom;\r
3362         float: left;\r
3363 }\r
3364 \r
3365 // .plx-treenode-toggler{\r
3366 //      display: inline-block;\r
3367 //      margin-right: @margin-right;\r
3368 //      vertical-align: bottom;\r
3369 // }\r
3370 \r
3371 // .plx-treenode-toggler svg {\r
3372 //      .plx-treenode-vertical-bottom(@font-size);\r
3373 // }\r
3374 \r
3375 // .plx-treenode-toggler svg .st0 {\r
3376 //      fill: @primary-color;\r
3377 // }\r
3378 \r
3379 // .plx-treenode-toggler svg .st1 {\r
3380 //      stroke: @primary-color;\r
3381 // }\r
3382 \r
3383 .plx-treenode-ckbox{\r
3384         float: left;\r
3385         margin-right: @margin-right;\r
3386         margin-top:2px;\r
3387         // .plx-treenode-vertical-bottom(@font-size);\r
3388 \r
3389 }\r
3390 \r
3391 .plx-treenode-vertical-bottom(@font-size) when (@font-size = 12px) {\r
3392         vertical-align: bottom;\r
3393         margin-bottom: 3px;\r
3394 }\r
3395 \r
3396 .plx-treenode-vertical-bottom(@font-size) when (@font-size = 14px) {\r
3397         vertical-align: bottom;\r
3398         margin-bottom: 4px;\r
3399 }\r
3400 \r
3401 .plx-treenode-icon{\r
3402         color:@fonticon-color;\r
3403         margin-right: @margin-right;\r
3404         float: left;\r
3405         font-size: 16px;\r
3406         vertical-align: bottom;\r
3407         // .plx-treenode-icon-margin-bottom(@font-size);\r
3408         margin-top: 2px;\r
3409 }\r
3410 \r
3411 .plx-treenode-icon-margin-bottom(@font-size) when (@font-size = 12px) {\r
3412         margin-bottom: 1px;\r
3413 }\r
3414 \r
3415 .plx-treenode-icon-margin-bottom(@font-size) when (@font-size = 14px) {\r
3416         margin-bottom: 2px;\r
3417 }\r
3418 \r
3419 .plx-treenode-label-container{\r
3420         overflow: visible;\r
3421 }\r
3422 \r
3423 .plx-treenode-label-container.plx-treenode-label-ellipsis{\r
3424         overflow:hidden;\r
3425 }\r
3426 \r
3427 .plx-treenode-label-container:hover {\r
3428         background-color: @hover-bg-color;\r
3429 }\r
3430 \r
3431 .plx-treenode-active>div .plx-treenode-label-container {\r
3432         background-color: darken(@hover-bg-color, 2%);\r
3433 }\r
3434 \r
3435 .plx-treenode-active>div .plx-treenode-label-container:hover {\r
3436         background-color: @hover-bg-color;\r
3437 }\r
3438 \r
3439 .plx-treenode-label-container span:last-child{\r
3440         margin-right:5px;\r
3441 }\r
3442 \r
3443 \r
3444 .plx-treenode-lable{\r
3445         display: inline-block;\r
3446         vertical-align:0;\r
3447         font-family: @font-family;\r
3448         color:@text-color;\r
3449 \r
3450         span {\r
3451                 display: inline-block;\r
3452                 overflow: hidden;\r
3453                 max-width: 100%;\r
3454                 text-overflow: ellipsis;\r
3455                 white-space: nowrap;\r
3456                 vertical-align: bottom;\r
3457         }\r
3458 }\r
3459 \r
3460 .plx-treenode-operations{\r
3461         margin-left: 20px;\r
3462         display: none;\r
3463         vertical-align: bottom;\r
3464         width: fit-content;\r
3465         line-height: 1;\r
3466         .plx-treenode-operations-margin-bottom(@font-size);\r
3467 }\r
3468 \r
3469 \r
3470 .plx-treenode-operations-margin-bottom(@font-size) when (@font-size = 12px) {\r
3471         margin-bottom: 1px;\r
3472 }\r
3473 \r
3474 .plx-treenode-operations-margin-bottom(@font-size) when (@font-size = 14px) {\r
3475         margin-bottom: 2px;\r
3476 }\r
3477 \r
3478 .plx-treenode-operation{\r
3479         display: inline-block;\r
3480         margin-right: 10px;\r
3481         color:@fonticon-color;\r
3482         font-size: 16px;\r
3483         vertical-align: text-bottom;\r
3484 \r
3485         &:hover{\r
3486                 color: @primary-color;\r
3487         }\r
3488 }\r
3489 \r
3490 .plx-treenode-label-container:hover .plx-treenode-operations{\r
3491         display:inline-block;\r
3492 }\r
3493 \r
3494 *:focus{\r
3495         outline:none;\r
3496         box-shadow:none !important;\r
3497 }\r
3498 input[type="checkbox"]:focus{\r
3499         border:0 !important;\r
3500 }\r
3501 .plx-treenode-hide-tree-toggle{\r
3502   visibility: hidden;\r
3503 }\r
3504 \r
3505 .plx-treenode-droppoint{\r
3506   height: 4px;\r
3507   list-style-type: none;\r
3508 }\r
3509 .plx-treenode-droppoint-active{\r
3510   background-color: #186ba0;\r
3511   border: 0 none;\r
3512 }\r
3513 \r
3514
3515 ///////\r
3516 \r
3517 @item-padding-left: 12px;\r
3518 \r
3519 .upload-wrapper {\r
3520         font-size: @font-size;\r
3521         position: relative;\r
3522         display: inline-block;\r
3523 }\r
3524 \r
3525 .upload-wrapper .item-text {\r
3526         max-width: 280px;\r
3527         overflow: hidden;\r
3528         text-overflow: ellipsis;\r
3529         white-space: nowrap;\r
3530         display: inline-block;\r
3531         margin-bottom: 2px;\r
3532         font-size: @font-size;\r
3533         &.no-progressbar {\r
3534                 vertical-align: middle;\r
3535         }\r
3536 }\r
3537 \r
3538 .upload-wrapper .plx-upload-progressbar {\r
3539         margin-top: -13px;\r
3540 }\r
3541 \r
3542 .upload-wrapper .list-group-item {\r
3543         border: 0;\r
3544         padding: 0;\r
3545         & .item {\r
3546                 width: 335px;\r
3547                 padding: 0 0 5px 0px;\r
3548                 & .item-text-wrapper {\r
3549                         position: relative;\r
3550                         display: inline-block;\r
3551                         width: 100%;\r
3552                         box-sizing: border-box;\r
3553                         height: 40px;\r
3554                         padding: 2px 3px 2px 10px;\r
3555                         border: 1px solid transparent;\r
3556                         & .text-red {\r
3557                                 color: @error-color !important;\r
3558                         }\r
3559                         &:hover {\r
3560                                 background-color: @hover-bg-color;\r
3561                                 cursor: default;\r
3562                         }\r
3563                         &:hover .plx-ico-close-16{\r
3564                                 display: block;\r
3565                                 transform: scale(0.8);\r
3566                         }\r
3567                         &.no-progressbar {\r
3568                                 height: 28px;\r
3569                         }\r
3570                 }\r
3571                 & .item-delete {\r
3572                         height: 14px;\r
3573                         width: 16px;\r
3574                         text-align: center;\r
3575                         line-height: 14px;\r
3576                         position: absolute;\r
3577                         right: 2%;\r
3578                         color: #999999;\r
3579                         display: none;\r
3580                         top: 3px;\r
3581                         &:hover {\r
3582                                 cursor: pointer;\r
3583                                 color: darken(#999999, 20%);\r
3584                         }\r
3585                         &.no-progressbar {\r
3586                                 top: 6px;\r
3587                         }\r
3588                 }\r
3589         }\r
3590 }\r
3591 \r
3592 .upload-wrapper .plx-ico-close-16 {\r
3593   font-size: 16px;\r
3594         float: right;\r
3595         cursor: pointer;\r
3596 }\r
3597 \r
3598 .upload-wrapper ul.list-group {\r
3599         margin-top: 15px;\r
3600 }\r
3601 \r
3602 .upload-wrapper .url-form-control {\r
3603         display: inline-block;\r
3604 }\r
3605 \r
3606 .upload-wrapper .item-detail {\r
3607         color: #aaa;\r
3608         position: relative;\r
3609         padding: 0 10px;\r
3610         font-size: 12px;\r
3611         & div {\r
3612                 margin: 0px 0px 15px 0;\r
3613         }\r
3614         & .detail {\r
3615                 margin: 5px 0 10px 0;\r
3616         }\r
3617 }\r
3618 \r
3619 .upload-wrapper .item-detail-des {\r
3620         display: inline-block;\r
3621         width: 170px;\r
3622         word-wrap: break-word;\r
3623         margin-left: 15px;\r
3624         vertical-align: top;\r
3625 }\r
3626 \r
3627 .upload-wrapper .item-detail-time {\r
3628         display: inline-block;\r
3629         width: 119px;\r
3630         word-break: break-all;\r
3631         vertical-align: top;\r
3632 }\r
3633 \r
3634 .upload-wrapper .selectFile {\r
3635         display: inline-block;\r
3636         min-width: 50px;\r
3637         margin-right: 10px;\r
3638         text-align: right;\r
3639 }\r
3640 \r
3641 .upload-wrapper label.raw-container{\r
3642         margin: 0 10px;\r
3643 }\r
3644 \r
3645 .upload-wrapper .item-lists{\r
3646         font-size: @font-size;\r
3647 }\r
3648 \r
3649 .upload-wrapper .list-container {\r
3650         padding-right: 15px;\r
3651 \r
3652         &.plx-upload-Manual-showdetail {\r
3653                 margin-left: -10px - @item-padding-left;\r
3654         }\r
3655 \r
3656         &.plx-upload-auto-showdetail {\r
3657                 margin-left: -10px;\r
3658         }\r
3659 }\r
3660 \r
3661 .upload-wrapper .list-footer .upload-btn {\r
3662         margin-top: 10px;\r
3663 }\r
3664 \r
3665 .upload-wrapper .upload-btn {\r
3666         display: inline-block;\r
3667 }\r
3668 \r
3669 .upload-wrapper .loader-container {\r
3670         position: absolute;\r
3671         display: inline-block;\r
3672         top: 8px;\r
3673         left: 12px;\r
3674 }\r
3675 \r
3676 .upload-wrapper .list-group-item-pdleft-s{\r
3677         padding: 0px 0px 0px @item-padding-left;\r
3678 }\r
3679 \r
3680 .upload-wrapper .list-group-item-pdleft {\r
3681         padding: 0px 0px 0px @item-padding-left !important;\r
3682 }\r
3683 \r
3684 .upload-wrapper .upload-btn-wrapper {\r
3685         display: inline-block;\r
3686 }\r
3687 .upload-wrapper .plx-red.left {\r
3688         margin-left: 75px;\r
3689 }\r
3690 \r
3691 .upload-wrapper .expand-wrapper {\r
3692         position: absolute;\r
3693         left: 20px;\r
3694         top: 4px;\r
3695         display: inline-block;\r
3696         font-size: @font-size;\r
3697         &.open .ict-go {\r
3698                 display: none\r
3699         }\r
3700         &.open .ict-fold {\r
3701                 display: block;\r
3702         }\r
3703         & i {\r
3704                 height: 18px;\r
3705                 width: 20px;\r
3706                 text-align: left;\r
3707                 line-height: 19px;\r
3708                 cursor: pointer;\r
3709         }\r
3710 }\r
3711 \r
3712 .upload-wrapper .ict-fold {\r
3713         display: none;\r
3714         color: @primary-color;\r
3715         font-weight: bold;\r
3716         transform: scale(0.7);\r
3717 }\r
3718 \r
3719 .upload-wrapper .ict-go {\r
3720         display: block;\r
3721         color: @primary-color;\r
3722         font-weight: bold;\r
3723         transform: scale(0.7);\r
3724 }\r
3725 \r
3726 .upload-wrapper .no-customparm-extend-wrapper {\r
3727         left: -2px !important;\r
3728 }\r
3729 \r
3730 /* loding动画效果*/\r
3731 .upload-wrapper .loader {\r
3732         font-size: @font-size;\r
3733         width: @font-size;\r
3734         height: @font-size;\r
3735         display: inline-block;\r
3736         border-radius: 50%;\r
3737         background: @primary-color;\r
3738         background: -moz-linear-gradient(left, @primary-color 10%, rgba(255, 255, 255, 0) 85%);\r
3739         background: -webkit-linear-gradient(left, @primary-color 10%, rgba(255, 255, 255, 0) 85%);\r
3740         background: -o-linear-gradient(left, @primary-color 10%, rgba(255, 255, 255, 0) 85%);\r
3741         background: -ms-linear-gradient(left, @primary-color 10%, rgba(255, 255, 255, 0) 85%);\r
3742         background: linear-gradient(to right, @primary-color 10%, rgba(255, 255, 255, 0) 85%);\r
3743         position: relative;\r
3744         -webkit-animation: load3 1.4s infinite linear;\r
3745         animation: load3 1.4s infinite linear;\r
3746         &:before {\r
3747                 width: 50%;\r
3748                 height: 50%;\r
3749                 background: @primary-color;\r
3750                 border-radius: 100% 0 0 0;\r
3751                 position: absolute;\r
3752                 top: 0;\r
3753                 left: 0;\r
3754                 content: '';\r
3755         }\r
3756         &:after {\r
3757                 background: @component-bg;\r
3758                 width: 75%;\r
3759                 height: 75%;\r
3760                 border-radius: 50%;\r
3761                 content: '';\r
3762                 margin: auto;\r
3763                 position: absolute;\r
3764                 top: 0;\r
3765                 left: 0;\r
3766                 bottom: 0;\r
3767                 right: 0;\r
3768         }\r
3769 }\r
3770 \r
3771 @-webkit-keyframes load3 {\r
3772         0% {\r
3773                 -webkit-transform: rotate(0deg);\r
3774                 transform: rotate(0deg);\r
3775         }\r
3776         100% {\r
3777                 -webkit-transform: rotate(360deg);\r
3778                 transform: rotate(360deg);\r
3779         }\r
3780 }\r
3781 @keyframes load3 {\r
3782         0% {\r
3783                 -webkit-transform: rotate(0deg);\r
3784                 transform: rotate(0deg);\r
3785         }\r
3786         100% {\r
3787                 -webkit-transform: rotate(360deg);\r
3788                 transform: rotate(360deg);\r
3789         }\r
3790 }\r
3791
3792 ///////
3793 .plx-table-customCols{
3794     height: 40px;
3795     float: right;
3796 }
3797
3798 .plx-table-customCols-toggle{
3799     display:inline-block;
3800     border-radius: @radius;
3801     width: 30px;
3802     height: 23px;
3803     border:1px solid @border-color-base;
3804     vertical-align:top;
3805     text-align: center;
3806     padding-top: 7px;
3807     margin-left:6px;
3808     cursor:pointer;
3809     box-sizing: content-box;
3810     .ict-col:before{
3811         vertical-align: top;
3812     }
3813 }
3814 .plx-table-customCols-toggle:hover{
3815     background-color:@common-color-hover;
3816 }
3817 .plx-table-customCols-toggle:active{
3818     background-color:@common-color-click;
3819 }
3820 .toggle-icon{
3821     display:inline-block;
3822     height: 14px;
3823     border-right:1px solid @text-color;
3824     vertical-align:top;
3825     padding-left: 4px;
3826 }
3827 .toggle-icon:first-child{
3828     padding-left: 0;
3829 }
3830 .plx-table-customCols-pannel{
3831     margin-top: 5px;
3832     margin-right: 5px;
3833     border:1px solid @border-color-base;
3834     background-color: @component-bg;
3835     z-index: 1010;
3836     position: absolute;
3837     right:0px;
3838     border-radius: 5px;
3839     font-size: @font-size;
3840     color: @text-color;
3841     overflow: auto;
3842     min-width: 300px;
3843     .shadow;
3844
3845     .plx-table-customCols-toolbar{
3846         display: flex;
3847         justify-content:space-between;
3848         padding:  16px;
3849         .plx-table-customCols-toolbar-ckbox{
3850
3851         }
3852         .plx-table-filter-wrapper{
3853             display: flex;
3854             flex:auto;
3855             input{
3856                 border-radius: @radius;
3857                 flex: auto;
3858                 padding-left: 28px;
3859                 border: 1px solid @border-color-base;
3860                 &:focus{
3861                     border: 1px solid @primary-color;
3862                     outline:none;
3863                 }
3864             }
3865             span{
3866                 color: @disabled-text-color ;
3867                 line-height: 28px;
3868                 position: relative;
3869                 left: 20px;
3870             }
3871         }
3872     }
3873     .plx-table-customCols-items {
3874         & > div:hover{
3875             .shadow;
3876         }
3877         cursor: pointer;
3878         border-bottom: 1px solid @border-color-split;
3879         border-top:1px solid @border-color-split ;
3880         label{
3881             margin-bottom: 0px;
3882             vertical-align: -moz-middle-with-baseline;
3883             vertical-align: -webkit-baseline-middle;
3884             vertical-align: 25%;
3885         }
3886         .plx-table-customCols-item {
3887             & > span{
3888                 padding: 0px 6px;
3889             }
3890         }
3891         .plx-table-customCols-operations{
3892
3893             div {
3894                 box-sizing: content-box;
3895
3896                 padding: 0px 8px;
3897                 display: inline-block;
3898             }
3899             visibility: hidden;
3900             float: right;
3901         }
3902         .heighLight{
3903             background-color: #e2f2fc;
3904             .plx-table-customCols-operations{
3905                 .plx-table-goup-show{
3906                     visibility: visible;
3907                 }
3908                 .plx-table-godown-show{
3909                     visibility: visible;
3910                 }
3911                 span{
3912                     color: @primary-color;
3913                 }
3914             }
3915
3916         }
3917         .dragging{
3918             box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
3919         }
3920         .dragEnter {
3921             background-color: #00abff;
3922         }
3923
3924         .plx-table-customCols-dropArea {
3925             height: 10px;
3926             border-bottom: 1px solid @border-color-split;
3927
3928         }
3929         .plx-table-customCols-dropArea-before {
3930             height: 10px;
3931             border-bottom: none;
3932
3933         }
3934         &>div:last-child .plx-table-customCols-dropArea {
3935             border-bottom: none;
3936         }
3937         .plx-table-customCols-item{
3938             line-height: 20px;
3939             height: 20px;
3940             padding: 0px 16px;
3941
3942         }
3943
3944     }
3945     .plx-table-customCols-confirm{
3946         display: flex;
3947         align-items: center;
3948         justify-content: center;
3949         padding: 16px 16px;
3950     }
3951
3952
3953 }
3954
3955 ///////
3956 .plx-table-col-filter{
3957     border: 1px solid @border-color-base;
3958     margin:5px;
3959     box-sizing: border-box;
3960     height: 30px;
3961     & input{
3962         width: calc(~"100% - 25px");
3963         line-height: normal;
3964         font-weight: normal;
3965         border: none;
3966         height:26px;
3967         font-size: @font-size;
3968         box-sizing: border-box;
3969         &:focus{
3970             outline:none;
3971         }
3972     }
3973     & .filterIcon{
3974         /*position: absolute;*/
3975         top: 6px;
3976         left: 3px;
3977         fill: #dedede;
3978         width: 14px;
3979     }
3980 }
3981
3982 .plx-filter-focused{
3983     outline:none;
3984     border:1px solid @primary-color;
3985
3986 }
3987 .plx-table-col-icon-wrapper{
3988     padding-left: 5px;
3989     display: inline-block;
3990     line-height: 30px;
3991     span{
3992         vertical-align: sub;
3993     }
3994
3995 }
3996
3997 ::-webkit-input-placeholder { /* WebKit browsers */
3998     color: #c1c1c1;
3999 }
4000 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
4001     color: #c1c1c1;
4002 }
4003 ::-moz-placeholder { /* Mozilla Firefox 19+ */
4004     color: #c1c1c1;
4005 }
4006 :-ms-input-placeholder { /* Internet Explorer 10+ */
4007     color: #c1c1c1;
4008 }
4009
4010 ///////
4011
4012 .plx-table-selectFilter-wrapper{
4013     display: inline-block;
4014     vertical-align: middle;
4015     height: 28px;
4016     cursor: pointer;
4017     /*此处 若不为absolute则被td遮挡*/
4018     position: absolute;
4019 }
4020 .plx-table-selectFilter-icon{
4021     vertical-align: middle;
4022     height: 28px;
4023     fill: @fonticon-color;
4024 }
4025 .icon-selectFilter-activtied{
4026     fill:@primary-color;
4027 }
4028
4029 .plx-table-selectFilter-panel{
4030     margin-top: -5px;
4031     border: 1px solid @border-color-base;
4032     background-color: #fff;
4033     padding: 10px;
4034     right: 0px;
4035     border-radius: 5px;
4036     /*此处若为absolute则文本要换行，恩，玄学*/
4037     //position: absolute;
4038     .shadow;
4039     span{
4040         vertical-align: -25%;
4041         font-size: @font-size;
4042     }
4043     label{
4044
4045         line-height: normal;
4046     }
4047     div{
4048         line-height: normal;
4049     }
4050
4051 }
4052
4053
4054
4055
4056 ///////
4057
4058 .plx-table-filter{
4059     height: 40px;
4060     float: right;
4061     & input{
4062         border-radius:@radius ;
4063         line-height: normal;
4064         padding: 0px 6px;
4065         font-weight: normal;
4066         border: 1px solid @border-color-base;
4067         margin-bottom: 10px;
4068         height: 32px;
4069         width: 200px;
4070         box-sizing: border-box;
4071         font-size: @font-size;
4072         color: @text-color;
4073         &:focus{
4074             outline:none;
4075             border:1px solid @primary-color ;
4076
4077         }
4078     }
4079 }
4080
4081
4082 .plx-table-filterToggle{
4083     display:inline-block;
4084     width:30px;
4085     height:30px;
4086     border-radius: @radius;
4087     border:1px solid @border-color-base;
4088     vertical-align:top;
4089     text-align: center;
4090     margin-left:6px;
4091     cursor:pointer;
4092     box-sizing: content-box;
4093     &.ict-filter:before{
4094        line-height: 30px;
4095
4096     }
4097     &.ict-filter-f:before{
4098         line-height: 30px;
4099         color:@primary-color;
4100     }
4101
4102 }
4103 .plx-table-filter-icon-wrapper{
4104     vertical-align: middle;
4105     display: inline-block;
4106     padding-top: 5px;
4107 }
4108
4109 .plx-table-filterIcon{
4110     fill: @text-color;
4111 }
4112
4113 ///////
4114 .plx-table-pagination{
4115     float: right;
4116     font-family: @font-family ;
4117     font-size: @font-size;
4118     color:@text-color;
4119     margin-top:10px;
4120     margin-bottom:10px;
4121 }
4122 .plx-table-pagination-content{
4123     display: inline-block;
4124     text-decoration:none;
4125 }
4126 .plx-table-pagination-item{
4127     list-style-type: none;
4128     display: inline-block;
4129     & span{
4130         vertical-align: middle;
4131     }
4132     & select{
4133         vertical-align: middle;
4134         height: 26px;
4135         width: 45px;
4136         border: 1px solid @border-color-base;
4137     }
4138 }
4139
4140 .plx-table-pagination-input{
4141     padding: 1px;
4142     height: 26px;
4143     width: 45px;
4144     margin-left:1px;
4145     margin-right:1px;
4146     font-size: 12px;
4147     color: @text-color;
4148     box-sizing:border-box;
4149     border: 1px solid @border-color-base;
4150     text-align: center;
4151     vertical-align: middle;
4152 }
4153 .plx-table-pagination-nav{
4154     display: inline-block;
4155     height: 26px;
4156     border: 1px solid @border-color-base;
4157     font-size:14px;
4158     text-decoration:none;
4159     color:@text-color;
4160     padding-left:6px;
4161     padding-right:6px;
4162     cursor: pointer;
4163     text-align: center;
4164     vertical-align: middle;
4165     box-sizing:border-box;
4166 }
4167 a:not([href]):not([tabindex]).plx-table-pagination-disabled{
4168
4169         color: @disabled-text-color;
4170         cursor: not-allowed;
4171
4172 }
4173
4174 ///////
4175 .plx-table-dropdown-wrapper {
4176     cursor: pointer;
4177 }
4178 .plx-table-dropdown-icon-shared{
4179     font-size:20px;
4180     line-height: 2.2 !important;
4181     cursor:pointer;
4182 }
4183 .plx-table-dropdown-icon-polyline-shared{
4184     height:16px;
4185     width:16px;
4186     stroke: #00abff ;
4187 }
4188 .ict-down,.ict-up{
4189     .plx-table-dropdown-icon-shared;
4190     & polyline{
4191         .plx-table-dropdown-icon-polyline-shared;
4192         &:hover{
4193             stroke: #2d91c4;
4194         }
4195     }
4196 }
4197
4198 .plx-table-innerTr{
4199     border: 1px solid @border-color-base;
4200     & #plx-table-innerTd {
4201         padding: 0px;
4202     }
4203 }
4204
4205 .plx-table-innerTable{
4206     width:100%;
4207     & tr{
4208         color:@text-color;
4209         font-size:@font-size;
4210         & td#plx-inner-table-title,td#plx-inner-table-content{
4211             padding: 8px;
4212             height: 40px;
4213             border: none;
4214             border-bottom: 1px solid @border-color-base;
4215         }
4216         & td:first-child{
4217             text-align: right;
4218         }
4219         & td:last-child{
4220             text-align: left;
4221         }
4222     }
4223     & tr:last-child {
4224         & td#plx-inner-table-title,td#plx-inner-table-content {
4225             border-bottom: none;
4226         }
4227     }
4228 }
4229
4230 ///////
4231  /* 排序图标 */
4232  .plx-table-sort-icon-shared{
4233    display: block;
4234    cursor: pointer;
4235    width: 0;
4236    height: 0;
4237    border-left: 4px solid transparent;
4238    border-right: 4px solid transparent;
4239    margin-bottom: 2px;
4240  }
4241   .plx-table-sortIconWrapper{
4242     display:inline-block;
4243     vertical-align:middle;
4244     margin-left:3px;
4245   }
4246   /* 排序图标：箭头向上 */
4247   .plx-table-sortAsc{
4248     .plx-table-sort-icon-shared;
4249     border-bottom: 5px solid @fonticon-color;
4250
4251
4252   }
4253   .plx-table-ascActived{
4254     border-bottom: 5px solid @primary-color;
4255   }
4256     /* 排序图标：箭头向下 */
4257   .plx-table-sortDesc{
4258     .plx-table-sort-icon-shared;
4259     border-top: 5px solid @fonticon-color;
4260   }
4261   .plx-table-descActived{
4262     border-top: 5px solid @primary-color;
4263   }
4264 ///////
4265
4266 @plx-color-picker-width: 246px;
4267 @plx-color-picker-height: 118px;
4268 @plx-color-picker-hue-height: 10px;
4269 @plx-color-picker-hue-width: 168px;
4270 @selected-color-diameter: 30px;
4271 @plx-color-picker-input-width: 196px;
4272 @plx-color-picker-type-policy-width: 16px;
4273 @plx-color-picker-type-policy-height: 16px;
4274 @plx-color-picker-box-padding-left-right: 16px;
4275 @plx-color-picker-arrow-width: 8px; //模式切换箭头
4276 @plx-color-picker-arrow-height: 4px; //模式切换箭头
4277 @plx-color-picker-arrow-space: 4px; //模式切换箭头
4278 @plx-color-picker-border-arrow-width: 7px; //选择器边框箭头
4279 @plx-color-picker-border-arrow-height: 7px; //选择器边框箭头
4280 @plx-color-picker-hsla-unit-margin-left: 2px;
4281 @plx-color-picker-hsla-unit-margin-right: 8px;
4282 @plx-color-picker-hsla-unit-degree-width: 6px;
4283 @plx-color-picker-hsla-unit-percent-width: 12px;
4284
4285 .plx-color-picker-border-radius {
4286     border-top-left-radius: @radius;
4287     border-top-right-radius: @radius;
4288 }
4289
4290 .plx-color-picker * {
4291     -webkit-box-sizing: border-box;
4292     -moz-box-sizing: border-box;
4293     box-sizing: border-box;
4294     margin: 0;
4295     font-size: 12px;
4296     font-family: @font-family;
4297 }
4298
4299 .plx-color-picker {
4300     cursor: default;
4301     width: @plx-color-picker-width;
4302     height: auto;
4303     left: 30px;
4304     top: 250px;
4305     position: absolute;
4306     z-index: 1000;
4307     background-color: #fff;
4308     .shadow;
4309     border-radius: @radius;
4310     border: 1px solid @border-color-base;
4311
4312     -webkit-touch-callout: none;
4313     -webkit-user-select: none;
4314     -khtml-user-select: none;
4315     -moz-user-select: none;
4316     -ms-user-select: none;
4317     user-select: none;
4318
4319     i {
4320         cursor: default;
4321         position: relative;
4322     }
4323     input {
4324         .plx-input;
4325         text-align: center;
4326         height: 24px;
4327         -moz-appearance: textfield;
4328         &:invalid {
4329             box-shadow: none;
4330         }
4331         &:-moz-submit-invalid {
4332             box-shadow: none;
4333         }
4334         &:-moz-ui-invalid {
4335             box-shadow: none;
4336         }
4337         &::-webkit-outer-spin-button,
4338         &::-webkit-outer-spin-button {
4339             -webkit-appearance: textfield;
4340             margin: 0;
4341         }
4342     }
4343     .color-picker-overlay1 {
4344         .plx-color-picker-border-radius;
4345         position: absolute;
4346         left: 0;
4347         top: 0;
4348         width: @plx-color-picker-width - 2px;
4349         height: @plx-color-picker-height;
4350         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */
4351         background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */
4352         background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
4353         /* Chrome,Safari4+ */
4354         background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */
4355         background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* Opera 11.10+ */
4356         background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); /* IE10+ */
4357         background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
4358         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
4359     }
4360     .color-picker-overlay2 {
4361         .plx-color-picker-border-radius;
4362         position: absolute;
4363         left: 0;
4364         top: 0;
4365         width: @plx-color-picker-width - 2px;
4366         height: @plx-color-picker-height;
4367         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */
4368         background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); /* FF3.6+ */
4369         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1))); /* Chrome,Safari4+ */
4370         background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); /* Chrome10+,Safari5.1+ */
4371         background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); /* Opera 11.10+ */
4372         background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); /* IE10+ */
4373         background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); /* W3C */
4374         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0); /* IE6-9 */
4375     }
4376     .color-picker-saturation-lightness {
4377         .plx-color-picker-border-radius;
4378         cursor: pointer;
4379         width: @plx-color-picker-width - 2px;
4380         height: @plx-color-picker-height;
4381         border: none;
4382         background-size: 100% 100%;
4383     }
4384     .color-picker-hue {
4385         cursor: pointer;
4386         border-radius: 3px;
4387         width: @plx-color-picker-hue-width;
4388         height: @plx-color-picker-hue-height;
4389         border: none;
4390         margin-bottom: 10px;
4391         background-size: 100% 100%;
4392         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC');
4393     }
4394     .color-picker-alpha {
4395         cursor: pointer;
4396         border-radius: 3px;
4397         width: @plx-color-picker-hue-width;
4398         height: @plx-color-picker-hue-height;
4399         border: none;
4400         background-size: 100% 100%;
4401         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAKCAYAAAAgnxVRAAAC9klEQVRYhdVYPc7bMAylku7WViCrfJ2cocfoGXqLHslbDhAvHjNkCBBRHSoZzwQpKW7T7yuBwAn9+CtKIuOu1+vXy+UyPx6PL5QphEDee0KKMdI0TRveP8KlaZoSEZUPhxCS9z4RERd+jJEzbuWFEKL3nlEWcDHzYgiBQR//Nht5miZGXrbLWbaGY+99RBuAK3zOuGfBZP+iwJU4ItgtuAiyaJdBH2fc6iPoY9CH/jH4xyKOJHAJcEnRlwxcWY8k1o3KepxOp3Rg5h9YnJ+UkvjtxNPCO8Ak4MunxevxRXun6UVCn1ynXyhb5Mp7Tc4Z3y0e6pG2tXw7quuQWI0v/ZGx0cEAfzaygtUWBAPVClXqRblaErX3cgPU/C4Y/Gi+1+TRTllI/FjUKvjy1OxLf60NodmUG9GSQRuY5/+mQAtpye0pEKvwrELRsGhPW/CWrNwsTnnXc8rgUxaPptOi3huj6NVyJ3NR2yS9mI0/rxRoTyDvJmvhe65U7QrT9LRO0pYti2oLYxW9/F07/WqbbY9Pmm/ajSR9kLH0knoLuPv9/vN2u31D5rIsNM/zBjgMA43jSB+AS+M4rk11xvE8z8hLwzDwOI6bpnxZljTPc+FFIuKsrwwHiYhixm2GhoxDnoaLYHflZ/82w9QwDNHAbYaajJN2o6KPM24dksDuE+KIEC8DbiML8a65UnCc7SbwJYHdNf+AY4FLAifXt6xbOp/Pae8V/xGnKfYxrUZbXu2J7GtK6rbIuuIsn1q9Xk9faMnW9PTEIm1ofTgZPDwpe6/r3TfR3gLtScDfplrPRuKdFryVBOu6avmh9b6vDCqtReuRlba1KdvqS63caTwrLq2t0NqTVs9u0juGpHecrr2TYyFtuu0pnt7pVPtuye8d3jQ8vu8psNqJ+sohgydmq0+3NkmtMM1/Eg7Oue/H4/H5grMtqk3Vf6Lz1SRbxWPh5ADQc5q0pm38bk3emtyeHMoC0ApCa3/2tAOtjSWLWDv1rc204f8CQvGUIhalBqwAAAAASUVORK5CYII=');
4402     }
4403     .color-picker-alpha-ba {
4404         position: absolute;
4405         background: linear-gradient(90deg, rgba(255, 255, 255, 0), #000); // 颜色渐变
4406     }
4407     .selected-color {
4408         width: @selected-color-diameter;
4409         height: @selected-color-diameter;
4410         top: 0px;
4411         left: 0px;
4412         position: absolute;
4413         -moz-border-radius: 50%;
4414         -webkit-border-radius: 50%;
4415         border-radius: 50%;
4416         -khtml-border-radius: 50%;
4417     }
4418     .selected-color-background {
4419         width: @selected-color-diameter;
4420         height: @selected-color-diameter;
4421         -moz-border-radius: 50%;
4422         -webkit-border-radius: 50%;
4423         border-radius: 50%;
4424         -khtml-border-radius: 50%;
4425         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAh0lEQVRYR+2W0QlAMQgD60zdfwOdqa8TmI/wQMr5K0I5bZLIzLOa2nt37VVVbd+dDx5obgCC3KBLwJ2ff4PnVidkf+ucIhw80HQaCLo3DMH3CRK3iFsmAWVl6hPNDwt8EvNE5q+YuEXcMgkonVM6SdyCoEvAnZ8v1Hjx817MilmxSUB5rdLJDycZgUAZUch/AAAAAElFTkSuQmCC');
4426     }
4427     .color-picker-cursor {
4428         cursor: default;
4429         position: relative;
4430         -moz-border-radius: 50%;
4431         -webkit-border-radius: 50%;
4432         border-radius: 50%;
4433         -khtml-border-radius: 50%;
4434         width: 10px;
4435         height: 10px;
4436         border: #ffffff solid 1px;
4437     }
4438     .color-picker-cursor-selector {
4439         .color-picker-cursor;
4440         width: 12px;
4441         height: 12px;
4442         top: -1px;
4443         background-color: #ffffff;
4444         .shadow;
4445     }
4446     .type-policy {
4447         float: right;
4448         position: absolute;
4449         top: 198px;
4450         right: @plx-color-picker-box-padding-left-right - (@plx-color-picker-type-policy-width - @plx-color-picker-arrow-width)/2;
4451         width: @plx-color-picker-type-policy-width;
4452         height: @plx-color-picker-type-policy-height;
4453         &:hover {
4454             background-color: @hover-bg-color;
4455             cursor: pointer;
4456         }
4457     }
4458     .arrow-down {
4459         display: block;
4460         width: 0;
4461         height: 0;
4462         border-left: @plx-color-picker-arrow-width/2 solid transparent;
4463         border-right: @plx-color-picker-arrow-width/2 solid transparent;
4464         border-top: @plx-color-picker-arrow-height solid lighten(@fonticon-color, 5%);
4465         margin-top: @plx-color-picker-arrow-space;
4466         margin-left: (@plx-color-picker-type-policy-width - @plx-color-picker-arrow-width)/2;
4467     }
4468     .arrow-up {
4469         display: block;
4470         width: 0;
4471         height: 0;
4472         border-left: @plx-color-picker-arrow-width/2 solid transparent;
4473         border-right: @plx-color-picker-arrow-width/2 solid transparent;
4474         border-bottom: @plx-color-picker-arrow-height solid lighten(@fonticon-color, 5%);
4475         margin-top: (@plx-color-picker-type-policy-height - @plx-color-picker-arrow-height*2 - @plx-color-picker-arrow-space)/2;
4476         margin-left: (@plx-color-picker-type-policy-width - @plx-color-picker-arrow-width)/2;
4477     }
4478     .box {
4479         width: 100%;
4480         height: 100%;
4481         display: flex;
4482         .left {
4483             position: relative;
4484             margin-right: 16px;
4485         }
4486         .right {
4487             flex: 1 1 auto;
4488         }
4489     }
4490
4491     .button-area {
4492         padding: 0 16px 16px 16px;
4493         text-align: right;
4494     }
4495
4496     .preset-area {
4497         padding: 4px 15px;
4498         .preset-label {
4499             width: 100%;
4500             padding: 4px;
4501             text-align: left;
4502             color: #555;
4503         }
4504         .preset-color {
4505             cursor: pointer;
4506             display: inline-block;
4507             width: 18px;
4508             height: 18px;
4509             margin: 4px 6px 8px 6px;
4510             -moz-border-radius: 25%;
4511             -webkit-border-radius: 25%;
4512             border-radius: 25%;
4513             -khtml-border-radius: 25%;
4514             border: #a9a9a9 solid 1px;
4515         }
4516     }
4517
4518     .hsla-text, .rgba-text {
4519         width: @plx-color-picker-input-width;
4520         input {
4521             color: #595959;
4522             min-width: 0;
4523             flex: 1;
4524             margin: 0;
4525             float: left;
4526             padding: 1px;
4527             &:last-child {
4528                 margin-right: 0;
4529             }
4530         }
4531         .hsla-text-div, .rgba-text-div {
4532             margin-top: 2px;
4533             flex: 1;
4534             text-align: center;
4535             color: #999999;
4536             height: 18px;
4537             padding-right: 8px;
4538             &:last-child {
4539                 margin-right: 0;
4540                 padding-right: 0;
4541             }
4542         }
4543         .hsla-text-degree {
4544             padding-right: @plx-color-picker-hsla-unit-margin-left + @plx-color-picker-hsla-unit-margin-right + @plx-color-picker-hsla-unit-degree-width;
4545         }
4546         .hsla-text-percent {
4547             padding-right: @plx-color-picker-hsla-unit-margin-left + @plx-color-picker-hsla-unit-margin-right + @plx-color-picker-hsla-unit-percent-width;
4548         }
4549         .hsla-degree {
4550             display: inline-block;
4551             width: @plx-color-picker-hsla-unit-degree-width;
4552             margin-left: @plx-color-picker-hsla-unit-margin-left;
4553             margin-right: @plx-color-picker-hsla-unit-margin-right;
4554             margin-top: 2px;
4555         }
4556         .hsla-percent {
4557             display: inline-block;
4558             width: @plx-color-picker-hsla-unit-percent-width;
4559             margin-left: @plx-color-picker-hsla-unit-margin-left;
4560             margin-right: @plx-color-picker-hsla-unit-margin-right;
4561             margin-top: 3px;
4562         }
4563         .rgba-text-input {
4564             margin-right: 8px;
4565         }
4566     }
4567
4568     .hex-text {
4569         width: @plx-color-picker-input-width;
4570         .box {
4571             input {
4572                 color: #595959;
4573                 flex: 1 1 auto;
4574                 padding: 1px;
4575             }
4576             div {
4577                 margin-top: 2px;
4578                 flex: 1 1 auto;
4579                 text-align: center;
4580                 height: 18px;
4581                 color: #999999;
4582                 float: left;
4583                 clear: left;
4584             }
4585         }
4586     }
4587
4588     .bacis-color-alpha-select-area {
4589         padding: 20px @plx-color-picker-box-padding-left-right 16px @plx-color-picker-box-padding-left-right;
4590     }
4591     .color-format-content-area {
4592         padding: 0px @plx-color-picker-box-padding-left-right 16px @plx-color-picker-box-padding-left-right;
4593     }
4594     .arrow::after,
4595     .arrow::before {
4596         position: absolute;
4597         display: block;
4598         width: 0;
4599         height: 0;
4600         border-color: transparent;
4601         border-style: solid;
4602         content: "";
4603         border-width: @plx-color-picker-border-arrow-width @plx-color-picker-border-arrow-width;
4604     }
4605
4606     .arrow.arrow-bottom::after {
4607         left: 20px;
4608         border-top-width: 0;
4609         top: -@plx-color-picker-border-arrow-width;
4610         border-bottom-color: #ffffff;
4611     }
4612     .arrow.arrow-bottom::before {
4613         left: 20px;
4614         border-top-width: 0;
4615         top: -(@plx-color-picker-border-arrow-width + 1);
4616         border-bottom-color: #999999;
4617     }
4618 }
4619 html{
4620   //font-size:@font-size-spacing;
4621 }// 定义间距使用
4622 body{
4623   font-size:@font-size;
4624 }
4625 .shadow {
4626 -webkit-box-shadow: 0 1px 6px @shadow-color;
4627 -moz-box-shadow: 0 1px 6px @shadow-color;
4628 box-shadow: 0 1px 6px @shadow-color;
4629 } //阴影样式（包含跨浏览器），可以直接引用.shadow
4630
4631 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
4632   color: @disabled-text-color;
4633 }
4634
4635 ::-moz-placeholder { /* Mozilla Firefox 19+ */
4636   color: @disabled-text-color;
4637 }
4638
4639 input:-ms-input-placeholder{
4640   color: @disabled-text-color;
4641 }
4642
4643 input::-webkit-input-placeholder{
4644   color: @disabled-text-color;
4645 }
4646
4647 ///////\r
4648 \r
4649 @padding-normal: 0px 16px;\r
4650 @padding-sm: 0px 14px;\r
4651 @padding-xs: 0px 12px;\r
4652 @min-width-normal: 80px;\r
4653 @min-width-sm: 60px;\r
4654 @min-width-xs: 60px;\r
4655 @btn-margin-right: 10px;\r
4656 @btn-margin-right-sm: 5px;\r
4657 @btn-margin-right-xs: 5px;\r
4658 @btn-border-height: 1px;\r
4659 \r
4660 .border-min-width(@min-width, 14px) {\r
4661         min-width: @min-width + 8px;\r
4662 }\r
4663 \r
4664 .border-min-width(@min-width, 12px) {\r
4665         min-width: @min-width;\r
4666 }\r
4667 \r
4668 .background-color-white-color-disabled (@color) when (@color = #fff) {\r
4669         color: @disabled-text-color;\r
4670   background-color: @common-color;\r
4671         border-color: #e9e9e9;\r
4672 }\r
4673 \r
4674 .background-color-white-color-disabled (@color) when not (@color = #fff) {\r
4675         border-color: @color;\r
4676         background-color: @color;\r
4677         opacity: @opacity-disable;\r
4678 }\r
4679 \r
4680 .plx-btn {\r
4681         font-family: @font-family;\r
4682         color: @common-textcolor;\r
4683         .border-min-width(@min-width-normal, @font-size);\r
4684         letter-spacing: 1px;\r
4685         padding: @padding-normal;\r
4686         height: @btn-height;\r
4687         font-size: @font-size;\r
4688         cursor: pointer;\r
4689         text-align: center;\r
4690         white-space: nowrap;\r
4691         margin-right: @btn-margin-right;\r
4692         vertical-align: middle;\r
4693         border: @btn-border-height solid @border-color-base;\r
4694         background-color: @common-color;\r
4695         border-radius: @radius;\r
4696         line-height: @btn-height - @btn-border-height * 2;\r
4697         &:hover,\r
4698         &:disabled,\r
4699         &[disabled],\r
4700         &:focus,\r
4701         &:active {\r
4702                 outline: none;\r
4703                 background-image: none;\r
4704                 filter: none;\r
4705                 -webkit-box-shadow: none;\r
4706                 -moz-box-shadow: none;\r
4707                 box-shadow: none;\r
4708                 text-shadow: none;\r
4709         }\r
4710         &:hover,\r
4711         &:focus {\r
4712     color: @btn-common-color-text-hover;\r
4713     border-color: @btn-common-color-border-hover;\r
4714                 background-color: @common-color-hover;\r
4715         }\r
4716         &:active {\r
4717     color: @btn-common-color-text-click;\r
4718     border-color: @btn-common-color-border-click;\r
4719                 background-color: @common-color-click;\r
4720         }\r
4721         &:disabled,\r
4722         &[disabled] {\r
4723                 .background-color-white-color-disabled(@common-color);\r
4724         }\r
4725         &:disabled:hover,\r
4726         &[disabled]:hover,\r
4727         &:disabled:focus,\r
4728         &[disabled]:focus {\r
4729                 .background-color-white-color-disabled(@common-color);\r
4730                 cursor: not-allowed;\r
4731         }\r
4732         & .plx-btn-icon {\r
4733                         font-size: 16px;\r
4734                         vertical-align: text-top;\r
4735                         margin-right: 3px;\r
4736         }\r
4737 }\r
4738 \r
4739 .plx-btn-primary {\r
4740         background-color: @primary-color;\r
4741         color: @scene-textcolor;\r
4742         border-color: @primary-color;\r
4743         &:hover,\r
4744         &:focus {\r
4745     color: @scene-textcolor;\r
4746                 background-color: @primary-color-hover;\r
4747                 border-color: @primary-color-hover;\r
4748         }\r
4749         &:active {\r
4750     color: @scene-textcolor;\r
4751                 background-color: @primary-color-click;\r
4752                 border-color: @primary-color-click;\r
4753         }\r
4754         &:disabled,\r
4755         &[disabled],\r
4756         &:disabled:hover,\r
4757         &[disabled]:hover,\r
4758         &:disabled:focus,\r
4759         &[disabled]:focus {\r
4760                 color: @scene-textcolor;\r
4761                 .background-color-white-color-disabled(@primary-color);\r
4762         }\r
4763 }\r
4764 \r
4765 .plx-btn-guide {\r
4766         background-color: @guide-color;\r
4767         color: @scene-textcolor;\r
4768         border-color: @guide-color;\r
4769         &:hover,\r
4770         &:focus {\r
4771     color: @scene-textcolor;\r
4772                 background-color: @primary-color-guide-hover;\r
4773                 border-color: @primary-color-guide-hover;\r
4774         }\r
4775         &:active {\r
4776     color: @scene-textcolor;\r
4777                 background-color: @primary-color-guide-click;\r
4778                 border-color: @primary-color-guide-click;\r
4779         }\r
4780         &:disabled,\r
4781         &[disabled],\r
4782         &:disabled:hover,\r
4783         &[disabled]:hover,\r
4784         &:disabled:focus,\r
4785         &[disabled]:focus {\r
4786                 color: @scene-textcolor;\r
4787                 .background-color-white-color-disabled(@guide-color);\r
4788         }\r
4789 }\r
4790 \r
4791 .plx-btn-table {\r
4792         color: @text-color;\r
4793 }\r
4794 \r
4795 .plx-btn-error {\r
4796         background-color: @error-color;\r
4797         color: @scene-textcolor;\r
4798         border-color: @error-color;\r
4799         &:hover,\r
4800         &:focus {\r
4801     color: @scene-textcolor;\r
4802                 background-color: @error-color-hover;\r
4803                 border-color: @error-color-hover;\r
4804         }\r
4805         &:active {\r
4806     color: @scene-textcolor;\r
4807                 background-color: @error-color-click;\r
4808                 border-color: @error-color-click;\r
4809         }\r
4810         &:disabled,\r
4811         &[disabled],\r
4812         &:disabled:hover,\r
4813         &[disabled]:hover,\r
4814         &:disabled:focus,\r
4815         &[disabled]:focus {\r
4816                 color: @scene-textcolor;\r
4817                 .background-color-white-color-disabled(@error-color);\r
4818         }\r
4819 }\r
4820 \r
4821 .plx-btn-sm {\r
4822         height: @btn-height-sm;\r
4823         padding: @padding-sm;\r
4824         .border-min-width(@min-width-sm, @font-size);\r
4825         margin-right: @btn-margin-right-sm;\r
4826         line-height: @btn-height-sm - @btn-border-height * 2;\r
4827 }\r
4828 \r
4829 .plx-btn-xs{\r
4830         height: @btn-height-xs;\r
4831         padding: @padding-xs;\r
4832         .border-min-width(@min-width-xs, @font-size);\r
4833         margin-right: @btn-margin-right-xs;\r
4834         line-height: @btn-height-xs - @btn-border-height * 2;\r
4835 }\r
4836 \r
4837 .plx-btn.dropdown-toggle {\r
4838         margin-right: 0;\r
4839         outline: none !important;\r
4840         background-image: none !important;\r
4841         filter: none;\r
4842         -webkit-box-shadow: none;\r
4843         -moz-box-shadow: none;\r
4844         box-shadow: none;\r
4845         text-shadow: none;\r
4846 }\r
4847 \r
4848 .plx-btn.dropdown-toggle::after {\r
4849         margin-left: 16px;\r
4850         border-top: 4px solid;\r
4851         border-right: 4px solid transparent;\r
4852         border-left: 4px solid transparent;\r
4853         color: darken(@border-color-base, 10%);\r
4854         margin-bottom: 1px;\r
4855 }\r
4856 \r
4857 .plx-btn-sm.dropdown-toggle::after {\r
4858         margin-left: 14px;\r
4859 }\r
4860 \r
4861 .plx-btn-xs.dropdown-toggle::after {\r
4862         margin-left: 12px;\r
4863 }\r
4864 \r
4865 .plx-btn+.dropdown-menu {\r
4866         margin: 0;\r
4867         padding: 0;\r
4868         border: 0;\r
4869         min-width: 100%;\r
4870         font-size: @font-size;\r
4871         border-radius: @radius;\r
4872         .shadow;\r
4873         & .dropdown-item {\r
4874                 background-color: @component-bg;\r
4875                 color: @text-color;\r
4876                 font-size: @font-size;\r
4877                 padding: @padding-normal;\r
4878                 height: 30px;\r
4879                 cursor: pointer;\r
4880                 &:hover,\r
4881                 &:focus,\r
4882                 &:active{\r
4883                         outline: none;\r
4884                         background-color: @hover-bg-color;\r
4885                 }\r
4886                 &:disabled,\r
4887                 &[disabled] {\r
4888                         color: @disabled-text-color;\r
4889                 }\r
4890                 &:disabled:hover,\r
4891                 &[disabled]:hover,\r
4892                 &:disabled:focus,\r
4893                 &[disabled]:focus {\r
4894                         cursor: not-allowed;\r
4895                         background-color: @component-bg;\r
4896                 }\r
4897         }\r
4898 }\r
4899 \r
4900 .plx-btn-sm+.dropdown-menu .dropdown-item {\r
4901         padding: @padding-sm;\r
4902 }\r
4903 .plx-btn-xs+.dropdown-menu .dropdown-item {\r
4904         padding: @padding-xs;\r
4905 }\r
4906 \r
4907 .plx-btn-more {\r
4908         display: inline-block;\r
4909         margin-right: @btn-margin-right;\r
4910 }\r
4911 \r
4912 .plx-btn-more-sm {\r
4913         margin-right: @btn-margin-right-sm;\r
4914 }\r
4915 \r
4916 .plx-btn-more-xs {\r
4917         margin-right: @btn-margin-right-xs;\r
4918 }
4919 ///////\r
4920 \r
4921 @checkbox-border-size: 1px;\r
4922 \r
4923 .plx-checkbox-container {\r
4924         font-size: 0;\r
4925         position: relative;\r
4926 }\r
4927 \r
4928 .plx-checkbox {\r
4929         position: absolute;\r
4930         z-index: -1;\r
4931         opacity: 0;\r
4932         & + .checkbox-substitute {\r
4933                 position: relative;\r
4934                 display: inline-block;\r
4935                 cursor: pointer;\r
4936                 height: @checkbox-size;\r
4937                 width: @checkbox-size;\r
4938                 border: @checkbox-border-size solid @border-color-base;\r
4939                 border-radius: @radius-sm;\r
4940                 vertical-align: middle;\r
4941         }\r
4942         & + .checkbox-substitute + span {\r
4943                 font-weight: normal;\r
4944                 font-size: @font-size;\r
4945                 cursor: pointer;\r
4946                 vertical-align: middle;\r
4947                 .font-padding(@font-size);\r
4948         }\r
4949         &:hover + .checkbox-substitute {\r
4950                 border-color: @primary-color;\r
4951                 outline: none;\r
4952                 background-image: none;\r
4953                 -webkit-box-shadow: none;\r
4954                 -moz-box-shadow: none;\r
4955                 box-shadow: none;\r
4956                 text-shadow: none;\r
4957         }\r
4958         &:checked + .checkbox-substitute {\r
4959                 border-color: @primary-color;\r
4960                 background-color: @primary-color;\r
4961                 &::after {\r
4962                         .checkbox-check(@component-bg);\r
4963                 }\r
4964         }\r
4965         &.portion + .checkbox-substitute {\r
4966                 background-color: @primary-color;\r
4967                 border-color: @primary-color;\r
4968                 opacity: 0.5;\r
4969                 &::after {\r
4970                         .checkbox-check(@component-bg);\r
4971                 }\r
4972         }\r
4973         &:disabled + .checkbox-substitute,\r
4974         &[disabled] + .checkbox-substitute {\r
4975                 border-color: @border-color-base;\r
4976                 background-color: @input-bg-color-disabled;\r
4977                 cursor: not-allowed;\r
4978         }\r
4979         &:disabled + .checkbox-substitute + span,\r
4980         &[disabled] + .checkbox-substitute + span {\r
4981                 cursor: not-allowed;\r
4982         }\r
4983         &.portion[disabled] + .checkbox-substitute {\r
4984                 background-color: @border-color-base;\r
4985                 border-color: @border-color-base;\r
4986                 &::after {\r
4987                         .checkbox-check(@fonticon-color);\r
4988                 }\r
4989         }\r
4990         &:checked[disabled] + .checkbox-substitute {\r
4991                 border-color: @border-color-base;\r
4992                 background-color: @border-color-base;\r
4993         }\r
4994 }\r
4995 \r
4996 .checkbox-check(@color) {\r
4997         content: '';\r
4998         position: absolute;\r
4999         display: block;\r
5000         width: 6px;\r
5001         height: 10px;\r
5002         border: solid @color;\r
5003         border-width: 0 2px 2px 0;\r
5004         transform: rotate(45deg);\r
5005         .checkbox-check-left(@font-size);\r
5006         top: 0;\r
5007 }\r
5008 \r
5009 .checkbox-check-left(12px) {\r
5010         left: 3px;\r
5011 }\r
5012 \r
5013 .checkbox-check-left(14px) {\r
5014         left: 4px;\r
5015 }\r
5016 \r
5017 .font-padding(12px) {\r
5018         padding-left: 6px;\r
5019 }\r
5020 \r
5021 .font-padding(14px) {\r
5022         padding-left: 10px;\r
5023 }\r
5024
5025 ///////
5026 ///////
5027 ///////
5028 ///////
5029 ///////
5030
5031 .plx-form {
5032     font-family: @font-family;
5033     font-size: @font-size;
5034     background: @component-bg;
5035     color: @text-color;
5036     .ng-invalid:not(form).ng-invalid:not(fieldset).ng-invalid:not(plx-select) {
5037         border: 1px solid @error-color; /* red */
5038     }
5039     .ng-untouched:not(form).ng-untouched:not(fieldset).ng-untouched:not(plx-select) {
5040         border: 1px solid @border-color-base ;
5041     }
5042     // 标签和通用组件样式
5043     label {
5044         font-size: @font-size;
5045         text-align: right;
5046         color: @form-label;
5047         background: @component-bg;
5048         .label-span {
5049             color: @text-color;
5050         }
5051     }
5052
5053     //分组的样式
5054     .forms-group(@cursor, @bgcolor) {
5055         margin-bottom: 10px;
5056         padding-left: 15px;
5057         color: @title-text-color;
5058         font-size: @font-size-title-group;
5059         height: @input-height;
5060         line-height: @input-height;
5061         cursor: @cursor;
5062         &:hover {
5063             background: @bgcolor;
5064         }
5065         span {
5066             margin-left: 24px;
5067             border-left: 3px solid @primary-color;
5068             padding-left: 5px;
5069         }
5070         // 分组的展开和隐藏
5071         .group-icon {
5072             float:left;
5073             font-size: @font-size-title-group;
5074             color: @primary-color !important;
5075             line-height:@input-height;
5076             margin-right:8px;
5077             transform: scale(0.7,0.7);
5078             font-weight: bold;
5079         }
5080     }
5081
5082         .text-autocut {
5083                 white-space: nowrap;
5084                 text-overflow: ellipsis;
5085                 overflow: hidden;
5086                 display: block;
5087         }
5088
5089     .forms-group-pointer {
5090         .forms-group(pointer, @hover-bg-color);
5091     }
5092
5093     .forms-group-default {
5094         .forms-group(default, @component-bg);
5095         line-height: @input-height / 2;
5096     }
5097     // 紧凑型表单input高度
5098     .input-sm {
5099         height: @input-height-sm !important;
5100     }
5101     // 必选的*号颜色
5102     .px-red {
5103         color: @error-color;
5104     }
5105
5106     input:focus {
5107         border: 1px solid @primary-color !important;
5108     }
5109     // 错误信息
5110     .error-div {
5111         height: @font-size;
5112         margin-top: -4px;
5113         margin-bottom: 5px;
5114         .error-msg {
5115             color: @error-color;
5116         }
5117     }
5118     // 输入提示信息的样式
5119     .help-div {
5120         color: @disabled-text-color;
5121         height: @font-size;
5122         margin-top: -5px;
5123         margin-bottom: 6px;
5124     }
5125     // 标题样式
5126     .forms-header {
5127         margin-left: 15px;
5128         margin-bottom: 25px;
5129         padding-bottom: 5px;
5130         border-bottom:1px solid @border-color-split;
5131         span {
5132         font-size: @font-size-title-level2;
5133         color: @title-text-color;
5134         }
5135     }
5136
5137     .plx-input{
5138                 width: 100%;
5139                 color: @text-color;
5140                 background: @component-bg;
5141                 text-align: left;
5142     }
5143     //radio、checkbox、tail的样式
5144     .field-radio {
5145         padding-right:10px;
5146         line-height:@input-height - 5px;
5147         &.field-radio-tight {
5148         line-height:@input-height-sm - 5px;
5149         }
5150     }
5151     .field-tail {
5152         padding-right:10px;
5153         line-height:@input-height;
5154         &.field-tail-tight {
5155         line-height:@input-height-sm;
5156         }
5157         .tip {
5158             color: @fonticon-color;
5159             font-size: 16px;
5160         }
5161     }
5162     .field-info {
5163         font-size: @font-size;
5164         color: @primary-color;
5165         margin-left: -15px;
5166         &.field-info-group {
5167         margin-left: 15px;
5168         }
5169     }
5170     //field的样式
5171     .form-field:not(select-dropdown) {
5172         color: @text-color;
5173         font-size: @font-size;
5174         line-height: @input-height;
5175         &.form-field-tight {
5176         line-height:@input-height-sm;
5177         }
5178         &.form-filed-hint {
5179             margin-bottom: 15px;
5180         }
5181     }
5182     .field-div {
5183         margin-bottom: 15px;
5184         padding-left: 0;
5185         &.field-div-tight {
5186             margin-bottom: 10px;
5187         }
5188         // 输入值改变后的样式变化
5189         &.inputchanged > input{
5190             font-weight:bold;
5191         }
5192         &.inputchanged > select{
5193             font-weight:bold;
5194         }
5195     }
5196
5197     .button-div {
5198         padding: 15px 0 0 0;
5199         color: @text-color;
5200         font-size: @font-size-title-group;
5201         text-align: left;
5202         button {
5203             margin-right: 10px;
5204         }
5205     }
5206
5207     .button-r-submit {
5208         float: right;
5209         margin-right: -20px !important;
5210     }
5211
5212     .button-r-cancel {
5213         float: right;
5214     }
5215
5216     .content {
5217         overflow-y: auto;
5218         overflow-x: hidden;
5219     }
5220
5221     //滚动条
5222     .plx-scrollbar::-webkit-scrollbar {
5223         width: 4px;
5224         height: 6px;
5225     }
5226     .plx-scrollbar::-webkit-scrollbar-thumb {
5227         background-color: rgba(0,0,0,.2);
5228         border-radius: 2em;
5229         min-height: 50px;
5230         max-height: 100px;
5231     }
5232     .plx-scrollbar::-webkit-scrollbar-corner{
5233         background-color: transparent;
5234     }
5235     // placeholder
5236     input:-ms-input-placeholder {
5237         color: @unselected-text-color !important;
5238     }
5239     input::-webkit-input-placeholder {
5240         color: @unselected-text-color !important;
5241     }
5242         plx-info .icon {
5243                 margin-left: -10px;
5244                 line-height: 28px !important;
5245         }
5246
5247 }
5248 .para-content {
5249         .icon-active {
5250                 fill:@primary-color;
5251         }
5252         .icon-disactive {
5253                 fill: @disabled-text-color;
5254                 cursor: default;
5255         }
5256 }
5257
5258
5259 ///////\r
5260 \r
5261 .plx-input {\r
5262         font-size: @font-size;\r
5263         height: @input-height;\r
5264         padding-left: 10px;\r
5265         padding-right: 10px;\r
5266         outline: 0;\r
5267         border: 1px solid @border-color-base;\r
5268         border-radius: @radius;\r
5269         vertical-align: middle;\r
5270         &:focus {\r
5271                 border: 1px solid @primary-color;\r
5272         }\r
5273         &:disabled,\r
5274         &[disabled] {\r
5275                 cursor: not-allowed;\r
5276                 background-color: @input-bg-color-disabled;\r
5277         }\r
5278 }\r
5279 \r
5280 .plx-input-sm {\r
5281         height: @input-height-sm;\r
5282 }\r
5283 \r
5284 .plx-input-right-no-radius {\r
5285         border-bottom-right-radius: 0;\r
5286         border-top-right-radius: 0;\r
5287 }
5288 ///////\r
5289 \r
5290 .plx-radio-container {\r
5291         font-size: 0;\r
5292         position: relative;\r
5293 }\r
5294 \r
5295 .plx-radio {\r
5296         position: absolute;\r
5297         z-index: -1;\r
5298         opacity: 0;\r
5299         & + .radio-substitute {\r
5300                 position: relative;\r
5301                 display: inline-block;\r
5302                 cursor: pointer;\r
5303                 height: @checkbox-size;\r
5304                 width: @checkbox-size;\r
5305                 border: 1px solid @border-color-base;\r
5306                 border-radius: @checkbox-size;\r
5307                 vertical-align: middle;\r
5308         }\r
5309         &:hover + .radio-substitute,\r
5310         &:focus + .radio-substitute {\r
5311                 border-color: @primary-color;\r
5312                 outline: none;\r
5313                 background-image: none;\r
5314                 -webkit-box-shadow: none;\r
5315                 -moz-box-shadow: none;\r
5316                 box-shadow: none;\r
5317                 text-shadow: none;\r
5318         }\r
5319         &:checked + .radio-substitute {\r
5320                 .radio-boder-checked-width(@font-size);\r
5321         }\r
5322         &:disabled + .radio-substitute,\r
5323         &[disabled] + .radio-substitute {\r
5324                 border-color: @border-color-base;\r
5325                 background-color: @input-bg-color-disabled;\r
5326                 cursor: not-allowed;\r
5327         }\r
5328         &:checked [disabled] + .radio-substitute {\r
5329                 border-color: @border-color-split;\r
5330                 background-color: @border-color-split;\r
5331                 cursor: not-allowed;\r
5332         }\r
5333         & + .radio-substitute + span {\r
5334                 font-weight: normal;\r
5335                 font-size: @font-size;\r
5336                 cursor: pointer;\r
5337                 vertical-align: middle;\r
5338                 .font-padding(@font-size);\r
5339         }\r
5340         &:disabled + .radio-substitute + span,\r
5341         &[disabled] + .radio-substitute + span {\r
5342                 cursor: not-allowed;\r
5343         }\r
5344 }\r
5345 \r
5346 .radio-boder-checked-width(12px) {\r
5347         border: 4px solid @primary-color;\r
5348 }\r
5349 \r
5350 .radio-boder-checked-width(14px) {\r
5351         border: 5px solid @primary-color;\r
5352 }\r
5353 \r
5354 .font-padding(12px) {\r
5355         padding-left: 6px;\r
5356 }\r
5357 \r
5358 .font-padding(14px) {\r
5359         padding-left: 10px;\r
5360 }\r
5361 \r
5362 /*radio-group*/\r
5363 \r
5364 @radio-group-border-height: 1px;\r
5365 @padding-normal: 0px 16px;\r
5366 @padding-sm: 0px 14px;\r
5367 @min-width-normal: 80px;\r
5368 @min-width-sm: 60px;\r
5369 \r
5370 .border-min-width(@min-width, 14px) {\r
5371         min-width: @min-width + 8px;\r
5372 }\r
5373 \r
5374 .border-min-width(@min-width, 12px) {\r
5375         min-width: @min-width;\r
5376 }\r
5377 \r
5378 .btn.dropdown-toggle,\r
5379 .btn-group .btn.dropdown-toggle,\r
5380 .btn:hover,\r
5381 .btn:disabled,\r
5382 .btn[disabled],\r
5383 .btn:focus,\r
5384 .btn:active,\r
5385 .btn.active {\r
5386         outline: none !important;\r
5387         background-image: none !important;\r
5388         filter: none;\r
5389         -webkit-box-shadow: none;\r
5390         -moz-box-shadow: none;\r
5391         box-shadow: none;\r
5392         text-shadow: none;\r
5393 }\r
5394 \r
5395 .plx-radio-group {\r
5396         cursor: pointer;\r
5397         font-size: @font-size;\r
5398         height: @btn-height;\r
5399         background-color: @common-color;\r
5400         border: @radio-group-border-height solid @border-color-base;\r
5401         color: @text-color;\r
5402         border-radius: @radius;\r
5403         padding: @padding-normal;\r
5404         .border-min-width(@min-width-normal, @font-size);\r
5405         transition: none;\r
5406         &:hover,\r
5407         &:focus,\r
5408         &:active {\r
5409                 outline: none;\r
5410                 background-image: none;\r
5411                 filter: none;\r
5412                 -webkit-box-shadow: none;\r
5413                 -moz-box-shadow: none;\r
5414                 box-shadow: none;\r
5415                 text-shadow: none;\r
5416         }\r
5417 \r
5418   &:hover,\r
5419   &:focus {\r
5420     color: @btn-common-color-text-hover;\r
5421     border-color: @btn-common-color-border-hover;\r
5422     background-color: @common-color-hover;\r
5423   }\r
5424   &:active {\r
5425     color: @btn-common-color-text-click;\r
5426     border-color: @btn-common-color-border-click;\r
5427     background-color: @common-color-click;\r
5428   }\r
5429         &.active {\r
5430                 background-color: @primary-color;\r
5431                 color: @scene-textcolor;\r
5432                 border-color: @primary-color;\r
5433         }\r
5434         & > span {\r
5435                 line-height: @btn-height - @radio-group-border-height * 2;\r
5436         }\r
5437 }\r
5438 \r
5439 .plx-radio-group-sm {\r
5440         height: @btn-height-sm;\r
5441         padding: @padding-sm;\r
5442         .border-min-width(@min-width-sm, @font-size);\r
5443         & > span {\r
5444                 line-height: @btn-height-sm - @radio-group-border-height * 2;\r
5445         }\r
5446 }\r
5447
5448 ///////
5449
5450 .plx-ui-steps-number-active {
5451         background: @default-blue;
5452         color: @default-white;
5453 }
5454
5455 .plx-ui-steps-number-passive {
5456         background: @gray-grade-7;
5457         color: @default-white;
5458 }
5459
5460 .plx-ui-steps-number-visited {
5461         color: @default-white;
5462         border: 2px @default-blue solid;
5463 }
5464
5465 .plx-ui-underline-active {
5466         background: @default-blue;
5467 }
5468
5469 .plx-ui-underline-passive {
5470         background: @gray-grade-8;
5471 }
5472
5473 .plx-ui-steps-title-active {
5474         color: @font-gray-normal;
5475 }
5476
5477 .plx-ui-steps-title-passive {
5478         color: @font-gray-light;
5479 }
5480
5481 .plx-ui-steps-title-visited {
5482         color: @font-gray-light;
5483 }
5484
5485 .plx-ui-steps-number-visited-tick {
5486         border-bottom: 2px solid @default-blue;
5487         border-right: 2px solid @default-blue;
5488 }
5489
5490 .plx-ui-underline-active-vertical {
5491         border-right: 2px solid @gray-grade-7;
5492 }
5493
5494 .plx-ui-underline-visited-vertical {
5495         border-right: 2px solid @default-blue;
5496 }
5497
5498 .plx-ui-underline-passive-vertical {
5499         border-right: 2px solid @gray-grade-7;
5500 }
5501
5502 .plx-ui-steps-title-active-vertical {
5503         color: @font-gray-normal;
5504 }
5505
5506 .plx-ui-steps-title-visited-vertical {
5507         color: @font-gray-light;
5508 }
5509
5510 .plx-ui-steps-title-passive-vertical {
5511         color: @font-gray-light;
5512 }
5513
5514 .plx-ui-steps-number-active-vertical {
5515         background: @default-blue;
5516         color: @default-white;
5517 }
5518
5519 .plx-ui-steps-number-passive-vertical {
5520         background: @gray-grade-7;
5521         color: @default-white;
5522 }
5523
5524 .plx-ui-steps-number-visited-vertical {
5525         color: @default-white;
5526 }
5527
5528 ///////
5529
5530 //input[type='text'],
5531 //input[type='password'],
5532 //input[type='email'],
5533 //input[type='tel'] {
5534 //      color: @font-gray-normal !important;
5535 //      font-weight: @font-weight-bold !important;
5536 //      border: @border-base;
5537 //      &:focus {
5538 //              border-color: @default-blue !important;
5539 //      }
5540 //}
5541 //
5542 //@media screen and (-webkit-min-device-pixel-ratio: 0) {
5543 //      input[type='text'],
5544 //      input[type='password'],
5545 //      input[type='email'],
5546 //      input[type='tel'] {
5547 //              &:focus {
5548 //                      border-color: @default-blue;
5549 //                      color: @default-blue;
5550 //                      text-shadow: 0 0 0 @font-gray-normal;
5551 //                      -webkit-text-fill-color: transparent;
5552 //              }
5553 //              &::-webkit-input-placeholder {
5554 //                      font-weight: @font-weight-normal;
5555 //                      text-shadow: none;
5556 //                      -webkit-text-fill-color: @font-gray-lightest;
5557 //              }
5558 //      }
5559 //}
5560 //
5561 //input[disabled] {
5562 //      background: @gray-grade-9;
5563 //      color: @font-gray-lightest !important;
5564 //      border-color: rgba(191, 191, 191, 0.5) !important;
5565 //      cursor: not-allowed;
5566 //}
5567 //
5568 //
5569 //input[type='text'],
5570 //input[type='password'],
5571 //input[type='email'],
5572 //input[type='tel'] {
5573 //      .input-invalid.ng-dirty.ng-invalid.ng-touched.input-blur &,
5574 //      &.ng-dirty.ng-invalid.ng-touched.input-blur {
5575 //              border-color: @default-red;
5576 //      }
5577 //}