iguazio.dashboard-controls 1.2.1 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/i18n/en/functions.json +1 -0
  2. package/dist/js/iguazio.dashboard-controls.js +3277 -3239
  3. package/dist/less/iguazio.dashboard-controls.less +1264 -1260
  4. package/package.json +1 -1
  5. package/src/i18n/en/functions.json +1 -0
  6. package/src/igz_controls/services/control-panel-logs-data.service.js +94 -29
  7. package/src/nuclio/functions/version/version-execution-log/version-execution-log.component.js +8 -24
  8. package/src/nuclio/functions/version/version-execution-log/version-execution-log.less +5 -1
  9. package/src/nuclio/functions/version/version-execution-log/version-execution-log.tpl.html +5 -2
package/dist/less/iguazio.dashboard-controls.less CHANGED
@@ -3666,6 +3666,149 @@ ncl-functions {
3666
3666
  }
3667
3667
  }
3668
3668
 
3669
+ /**
3670
+ UI.Layout CSS
3671
+ *************************************/
3672
+ .stretch {
3673
+ position: absolute;
3674
+ top: 0;
3675
+ left: 0;
3676
+ right: 0;
3677
+ bottom: 0;
3678
+ /* Can be changed by hand ;)*/
3679
+ overflow: auto;
3680
+ }
3681
+
3682
+ .animate-row, .animate-column {
3683
+ -webkit-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3684
+ -moz-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3685
+ -ms-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3686
+ -o-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3687
+ transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3688
+ }
3689
+
3690
+ .ui-splitbar {
3691
+ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
3692
+ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
3693
+ display: -ms-flexbox; /* TWEENER - IE 10 */
3694
+ display: -webkit-flex; /* NEW - Chrome */
3695
+ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
3696
+ -webkit-justify-content: center;
3697
+ justify-content: center;
3698
+
3699
+ background-color: #ffffff;
3700
+ right: auto;
3701
+ position: absolute;
3702
+ z-index: 1;
3703
+ }
3704
+
3705
+ .ui-layout-row > .ui-splitbar {
3706
+ height: 8px;
3707
+ width: 100%;
3708
+ cursor: row-resize;
3709
+ text-align: center;
3710
+ justify-content: center;
3711
+ align-items: center;
3712
+ background: linear-gradient(to bottom, #fff 0%, #eee 100%);
3713
+ overflow-y: hidden;
3714
+ }
3715
+
3716
+ .ui-layout-column > .ui-splitbar {
3717
+ width: 8px;
3718
+ height: 100%;
3719
+ cursor: col-resize;
3720
+ -webkit-flex-direction: column;
3721
+ flex-direction: column;
3722
+ background: linear-gradient(to right, #fff 0%, #eee 100%);
3723
+ overflow-x: hidden;
3724
+ }
3725
+
3726
+ .ui-layout-column > .ui-splitbar > a,
3727
+ .ui-layout-row > .ui-splitbar > a {
3728
+ cursor: pointer;
3729
+ text-align: center;
3730
+ font-size: 16px;
3731
+ color: #aaa;
3732
+ }
3733
+
3734
+ .ui-layout-column > .ui-splitbar > a:nth-child(2) {
3735
+ margin-top: 0.35rem;
3736
+ }
3737
+
3738
+ .ui-layout-row > .ui-splitbar > a:nth-child(2) {
3739
+ margin-left: 0.35rem;
3740
+ }
3741
+
3742
+
3743
+ /**
3744
+ * Icons
3745
+ **/
3746
+
3747
+ .ui-splitbar-icon {
3748
+ width: 0;
3749
+ height: 0;
3750
+ display: inline-block;
3751
+ }
3752
+
3753
+ .ui-splitbar-icon-up {
3754
+ border-left: 0.45em solid transparent;
3755
+ border-right: 0.45em solid transparent;
3756
+ border-bottom: 0.45em solid;
3757
+ }
3758
+
3759
+ .ui-splitbar-icon-down {
3760
+ border-left: 0.45em solid transparent;
3761
+ border-right: 0.45em solid transparent;
3762
+ border-top: 0.45em solid;
3763
+ margin-right: 0.45em;
3764
+ }
3765
+
3766
+ .ui-splitbar-icon-right {
3767
+ border-top: 0.45em solid transparent;
3768
+ border-bottom: 0.45em solid transparent;
3769
+ border-left: 0.45em solid;
3770
+
3771
+ }
3772
+
3773
+ .ui-splitbar-icon-left {
3774
+ border-top: 0.45em solid transparent;
3775
+ border-bottom: 0.45em solid transparent;
3776
+ border-right: 0.45em solid;
3777
+ margin-top: 0.45em;
3778
+ }
3779
+
3780
+ /* Allow disabling of icons */
3781
+ .no-toggle .ui-splitbar-icon {
3782
+ display: none;
3783
+ }
3784
+
3785
+ @media only screen and (max-device-width: 480px) {
3786
+ .no-mobile-toggle .ui-splitbar-icon {
3787
+ display: none;
3788
+ }
3789
+ }
3790
+
3791
+ @media print {
3792
+ .ui-splitbar {
3793
+ display: none;
3794
+ }
3795
+
3796
+ .stretch {
3797
+ position: relative;
3798
+ }
3799
+
3800
+ /* The last item can take up any amount of space. */
3801
+ .stretch.ui-layout-container:last-child {
3802
+ position: static;
3803
+ overflow: visible;
3804
+ }
3805
+ }
3806
+
3807
+ /* Make sure hidden elements are in fact not rendered. */
3808
+ .ui-layout-hidden {
3809
+ display: none;
3810
+ }
3811
+
3669
3812
  /*
3670
3813
  == malihu jquery custom scrollbar plugin ==
3671
3814
  Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
@@ -5388,187 +5531,254 @@ yx-axis
5388
5531
 
5389
5532
  /* ---------------------------------------- */
5390
5533
 
5391
- /**
5392
- UI.Layout CSS
5393
- *************************************/
5394
- .stretch {
5395
- position: absolute;
5396
- top: 0;
5397
- left: 0;
5398
- right: 0;
5399
- bottom: 0;
5400
- /* Can be changed by hand ;)*/
5401
- overflow: auto;
5402
- }
5403
-
5404
- .animate-row, .animate-column {
5405
- -webkit-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5406
- -moz-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5407
- -ms-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5408
- -o-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5409
- transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5410
- }
5534
+ .action-checkbox {
5535
+ .action-checkbox-color-set();
5411
5536
 
5412
- .ui-splitbar {
5413
- display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
5414
- display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
5415
- display: -ms-flexbox; /* TWEENER - IE 10 */
5416
- display: -webkit-flex; /* NEW - Chrome */
5417
- display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
5418
- -webkit-justify-content: center;
5419
- justify-content: center;
5537
+ line-height: 16px;
5538
+ text-align: center;
5420
5539
 
5421
- background-color: #ffffff;
5422
- right: auto;
5423
- position: absolute;
5424
- z-index: 1;
5425
- }
5540
+ .check-item {
5541
+ font-size: 16px;
5542
+ cursor: pointer;
5543
+ line-height: 1;
5544
+ vertical-align: middle;
5426
5545
 
5427
- .ui-layout-row > .ui-splitbar {
5428
- height: 8px;
5429
- width: 100%;
5430
- cursor: row-resize;
5431
- text-align: center;
5432
- justify-content: center;
5433
- align-items: center;
5434
- background: linear-gradient(to bottom, #fff 0%, #eee 100%);
5435
- overflow-y: hidden;
5436
- }
5546
+ &.igz-icon-checkbox-unchecked {
5547
+ color: @icon-checkbox-unchecked;
5548
+ }
5437
5549
 
5438
- .ui-layout-column > .ui-splitbar {
5439
- width: 8px;
5440
- height: 100%;
5441
- cursor: col-resize;
5442
- -webkit-flex-direction: column;
5443
- flex-direction: column;
5444
- background: linear-gradient(to right, #fff 0%, #eee 100%);
5445
- overflow-x: hidden;
5550
+ &.igz-icon-checkbox-checked {
5551
+ color: @icon-checkbox-checked;
5552
+ }
5553
+ }
5446
5554
  }
5555
+ .action-checkbox-all {
5556
+ .action-checkbox-all-color-set();
5447
5557
 
5448
- .ui-layout-column > .ui-splitbar > a,
5449
- .ui-layout-row > .ui-splitbar > a {
5450
- cursor: pointer;
5451
- text-align: center;
5452
- font-size: 16px;
5453
- color: #aaa;
5454
- }
5558
+ text-align: center;
5455
5559
 
5456
- .ui-layout-column > .ui-splitbar > a:nth-child(2) {
5457
- margin-top: 0.35rem;
5458
- }
5560
+ .check-item {
5561
+ cursor: pointer;
5562
+ color: @check-item-color;
5563
+ font-size: 16px;
5564
+ line-height: 1;
5565
+ vertical-align: middle;
5459
5566
 
5460
- .ui-layout-row > .ui-splitbar > a:nth-child(2) {
5461
- margin-left: 0.35rem;
5567
+ &.igz-icon-checkbox-checked {
5568
+ color: @check-item-icon-checkbox-checked-color;
5569
+ }
5570
+ }
5462
5571
  }
5572
+ .igz-action-panel {
5573
+ .action-panel-color-set();
5574
+ .action-icon-color-set();
5463
5575
 
5576
+ left: 0;
5577
+ line-height: 0;
5578
+ position: relative;
5579
+ transition: @igz-basic-transition;
5464
5580
 
5465
- /**
5466
- * Icons
5467
- **/
5581
+ &.ng-hide {
5582
+ left: -100%;
5583
+ }
5468
5584
 
5469
- .ui-splitbar-icon {
5470
- width: 0;
5471
- height: 0;
5472
- display: inline-block;
5473
- }
5585
+ .actions-list {
5586
+ transition: none;
5474
5587
 
5475
- .ui-splitbar-icon-up {
5476
- border-left: 0.45em solid transparent;
5477
- border-right: 0.45em solid transparent;
5478
- border-bottom: 0.45em solid;
5479
- }
5588
+ &.ng-hide {
5589
+ opacity: 0;
5590
+ }
5480
5591
 
5481
- .ui-splitbar-icon-down {
5482
- border-left: 0.45em solid transparent;
5483
- border-right: 0.45em solid transparent;
5484
- border-top: 0.45em solid;
5485
- margin-right: 0.45em;
5486
- }
5592
+ &.empty {
5593
+ line-height: 39px;
5594
+ padding: 1px 19px;
5595
+ font-size: 17px;
5596
+ letter-spacing: 0.2px;
5597
+ color: @action-list-empty-color;
5598
+ }
5487
5599
 
5488
- .ui-splitbar-icon-right {
5489
- border-top: 0.45em solid transparent;
5490
- border-bottom: 0.45em solid transparent;
5491
- border-left: 0.45em solid;
5600
+ .igz-action-item {
5601
+ display: flex;
5602
+ justify-content: center;
5603
+ align-items: center;
5604
+ background-color: @action-item-bg-color;
5605
+ border-radius: 50%;
5606
+ color: @action-item-color;
5607
+ cursor: pointer;
5608
+ float: left;
5609
+ font-size: 18px;
5610
+ height: 40px;
5611
+ margin: 0 8px 0 0;
5612
+ position: relative;
5613
+ transition: color .2s ease-out;
5614
+ width: 40px;
5615
+ z-index: 2;
5492
5616
 
5493
- }
5617
+ &:last-of-type {
5618
+ margin-right: 0;
5619
+ }
5494
5620
 
5495
- .ui-splitbar-icon-left {
5496
- border-top: 0.45em solid transparent;
5497
- border-bottom: 0.45em solid transparent;
5498
- border-right: 0.45em solid;
5499
- margin-top: 0.45em;
5500
- }
5621
+ &.inactive {
5622
+ pointer-events: none;
5501
5623
 
5502
- /* Allow disabling of icons */
5503
- .no-toggle .ui-splitbar-icon {
5504
- display: none;
5505
- }
5624
+ &:hover {
5625
+ color: @action-item-inactive-hover-color;
5626
+ }
5506
5627
 
5507
- @media only screen and (max-device-width: 480px) {
5508
- .no-mobile-toggle .ui-splitbar-icon {
5509
- display: none;
5510
- }
5511
- }
5628
+ .action-icon {
5629
+ color: @action-icon-inactive-color;
5630
+ cursor: default;
5631
+ }
5632
+ }
5512
5633
 
5513
- @media print {
5514
- .ui-splitbar {
5515
- display: none;
5516
- }
5634
+ &.active {
5635
+ background-color: @action-item-active-bg-color;
5636
+ }
5517
5637
 
5518
- .stretch {
5519
- position: relative;
5520
- }
5638
+ &:not(.inactive) {
5639
+ &:hover {
5640
+ overflow: visible;
5641
+ background-color: @action-item-hover-bg-color;
5642
+ box-shadow: @action-item-hover-box-shadow;
5521
5643
 
5522
- /* The last item can take up any amount of space. */
5523
- .stretch.ui-layout-container:last-child {
5524
- position: static;
5525
- overflow: visible;
5526
- }
5527
- }
5644
+ &:active {
5645
+ box-shadow: @action-item-hover-active-box-shadow;
5646
+ background-color: @action-item-hover-active-bg-color;
5647
+ }
5528
5648
 
5529
- /* Make sure hidden elements are in fact not rendered. */
5530
- .ui-layout-hidden {
5531
- display: none;
5532
- }
5649
+ .action-icon {
5650
+ color: @action-icon-hover-color;
5651
+ }
5652
+ }
5533
5653
 
5534
- .action-checkbox {
5535
- .action-checkbox-color-set();
5654
+ &:focus {
5655
+ background-color: @action-item-hover-bg-color;
5656
+ box-shadow: @action-item-focus-box-shadow;
5657
+ &:hover {
5658
+ box-shadow: @action-item-focus-hover-box-shadow;
5659
+ }
5660
+ }
5661
+ }
5536
5662
 
5537
- line-height: 16px;
5538
- text-align: center;
5663
+ &.subtemplate-show {
5664
+ transition: none;
5665
+ background-color: @dropdown-menu-subtemplate-show-bg-color;
5666
+ box-shadow: @dropdown-menu-subtemplate-show-box-shadow;
5539
5667
 
5540
- .check-item {
5541
- font-size: 16px;
5542
- cursor: pointer;
5543
- line-height: 1;
5544
- vertical-align: middle;
5668
+ &:hover {
5669
+ background-color: @dropdown-menu-subtemplate-show-hover-bg-color;
5670
+ box-shadow: @dropdown-menu-subtemplate-show-hover-box-shadow;
5671
+ }
5545
5672
 
5546
- &.igz-icon-checkbox-unchecked {
5547
- color: @icon-checkbox-unchecked;
5548
- }
5673
+ .action-icon {
5674
+ color: @action-icon-hover-color;
5675
+ }
5676
+ }
5549
5677
 
5550
- &.igz-icon-checkbox-checked {
5551
- color: @icon-checkbox-checked;
5552
- }
5553
- }
5554
- }
5555
- .action-checkbox-all {
5556
- .action-checkbox-all-color-set();
5678
+ &.last-item {
5679
+ margin: 0;
5680
+ }
5557
5681
 
5558
- text-align: center;
5682
+ .upload-action {
5683
+ width: 100%;
5684
+ height: 100%;
5685
+ display: flex;
5686
+ justify-content: center;
5687
+ align-items: center;
5688
+ }
5559
5689
 
5560
- .check-item {
5561
- cursor: pointer;
5562
- color: @check-item-color;
5563
- font-size: 16px;
5564
- line-height: 1;
5565
- vertical-align: middle;
5690
+ .action-icon {
5691
+ color: @action-icon-color;
5692
+ }
5566
5693
 
5567
- &.igz-icon-checkbox-checked {
5568
- color: @check-item-icon-checkbox-checked-color;
5694
+ .action-label {
5695
+ display: none;
5696
+ }
5697
+
5698
+ .filter-counter {
5699
+ position: absolute;
5700
+ left: 26px;
5701
+ top: 2px;
5702
+ display: inline-block;
5703
+ font-size: 12px;
5704
+ font-weight: 500;
5705
+ text-align: center;
5706
+ line-height: 16px;
5707
+ color: @action-item-filter-counter-color;
5708
+ min-width: 16px;
5709
+ height: 15px;
5710
+ padding: 0 4px;
5711
+ border-radius: 7.5px;
5712
+ background-color: @action-item-filter-counter-bg-color;
5713
+ }
5714
+
5715
+ .item-dropdown-menu {
5716
+ position: absolute;
5717
+ top: 100%;
5718
+ left: 0;
5719
+ padding: 8px 0;
5720
+ list-style: none;
5721
+ font-size: 13px;
5722
+ font-weight: 500;
5723
+ color: @dropdown-menu-color;
5724
+ border-radius: 2px;
5725
+ background-color: @dropdown-menu-bg-color;
5726
+ box-shadow: @dropdown-menu-box-shadow;
5727
+ margin-top: 1px;
5728
+ z-index: 10;
5729
+
5730
+ .item-dropdown-menu-list {
5731
+ margin: 0;
5732
+ display: block;
5733
+ padding: 0;
5734
+ list-style-type: none;
5735
+
5736
+ li {
5737
+ height: 32px;
5738
+ line-height: 32px;
5739
+ text-align: left;
5740
+ display: flex;
5741
+
5742
+ &:hover {
5743
+ background-color: @dropdown-menu-li-hover-bg-color;
5744
+
5745
+ .action-icon {
5746
+ color: @action-icon-hover-color;
5747
+ }
5748
+ }
5749
+
5750
+ .action-label {
5751
+ display: inline-block;
5752
+ white-space: nowrap;
5753
+ vertical-align: top;
5754
+ margin-right: 17px;
5755
+ }
5756
+
5757
+ .action-icon {
5758
+ color: @action-icon-color;
5759
+ font-size: 17px;
5760
+ display: inline-block;
5761
+ margin: 0 13px 0 21px;
5762
+ vertical-align: middle;
5763
+ }
5764
+ }
5765
+ }
5766
+ }
5569
5767
  }
5570
5768
  }
5769
+
5770
+ .action-subtemplate {
5771
+ border-bottom-left-radius: 4px;
5772
+ border-bottom-right-radius: 4px;
5773
+ border: @action-subtemplate-border;
5774
+ background-color: @action-subtemplate-bg-color;
5775
+ box-shadow: @action-subtemplate-box-shadow;
5776
+ position: fixed;
5777
+ margin: -2px 0 0 -1px;
5778
+ z-index: 10;
5779
+ }
5571
5780
  }
5781
+
5572
5782
  .igz-action-menu {
5573
5783
  .action-menu-color-set();
5574
5784
  .action-icon-color-set();
@@ -5727,218 +5937,8 @@ yx-axis
5727
5937
  }
5728
5938
  }
5729
5939
 
5730
- .igz-action-panel {
5731
- .action-panel-color-set();
5732
- .action-icon-color-set();
5733
-
5734
- left: 0;
5735
- line-height: 0;
5736
- position: relative;
5737
- transition: @igz-basic-transition;
5738
-
5739
- &.ng-hide {
5740
- left: -100%;
5741
- }
5742
-
5743
- .actions-list {
5744
- transition: none;
5745
-
5746
- &.ng-hide {
5747
- opacity: 0;
5748
- }
5749
-
5750
- &.empty {
5751
- line-height: 39px;
5752
- padding: 1px 19px;
5753
- font-size: 17px;
5754
- letter-spacing: 0.2px;
5755
- color: @action-list-empty-color;
5756
- }
5757
-
5758
- .igz-action-item {
5759
- display: flex;
5760
- justify-content: center;
5761
- align-items: center;
5762
- background-color: @action-item-bg-color;
5763
- border-radius: 50%;
5764
- color: @action-item-color;
5765
- cursor: pointer;
5766
- float: left;
5767
- font-size: 18px;
5768
- height: 40px;
5769
- margin: 0 8px 0 0;
5770
- position: relative;
5771
- transition: color .2s ease-out;
5772
- width: 40px;
5773
- z-index: 2;
5774
-
5775
- &:last-of-type {
5776
- margin-right: 0;
5777
- }
5778
-
5779
- &.inactive {
5780
- pointer-events: none;
5781
-
5782
- &:hover {
5783
- color: @action-item-inactive-hover-color;
5784
- }
5785
-
5786
- .action-icon {
5787
- color: @action-icon-inactive-color;
5788
- cursor: default;
5789
- }
5790
- }
5791
-
5792
- &.active {
5793
- background-color: @action-item-active-bg-color;
5794
- }
5795
-
5796
- &:not(.inactive) {
5797
- &:hover {
5798
- overflow: visible;
5799
- background-color: @action-item-hover-bg-color;
5800
- box-shadow: @action-item-hover-box-shadow;
5801
-
5802
- &:active {
5803
- box-shadow: @action-item-hover-active-box-shadow;
5804
- background-color: @action-item-hover-active-bg-color;
5805
- }
5806
-
5807
- .action-icon {
5808
- color: @action-icon-hover-color;
5809
- }
5810
- }
5811
-
5812
- &:focus {
5813
- background-color: @action-item-hover-bg-color;
5814
- box-shadow: @action-item-focus-box-shadow;
5815
- &:hover {
5816
- box-shadow: @action-item-focus-hover-box-shadow;
5817
- }
5818
- }
5819
- }
5820
-
5821
- &.subtemplate-show {
5822
- transition: none;
5823
- background-color: @dropdown-menu-subtemplate-show-bg-color;
5824
- box-shadow: @dropdown-menu-subtemplate-show-box-shadow;
5825
-
5826
- &:hover {
5827
- background-color: @dropdown-menu-subtemplate-show-hover-bg-color;
5828
- box-shadow: @dropdown-menu-subtemplate-show-hover-box-shadow;
5829
- }
5830
-
5831
- .action-icon {
5832
- color: @action-icon-hover-color;
5833
- }
5834
- }
5835
-
5836
- &.last-item {
5837
- margin: 0;
5838
- }
5839
-
5840
- .upload-action {
5841
- width: 100%;
5842
- height: 100%;
5843
- display: flex;
5844
- justify-content: center;
5845
- align-items: center;
5846
- }
5847
-
5848
- .action-icon {
5849
- color: @action-icon-color;
5850
- }
5851
-
5852
- .action-label {
5853
- display: none;
5854
- }
5855
-
5856
- .filter-counter {
5857
- position: absolute;
5858
- left: 26px;
5859
- top: 2px;
5860
- display: inline-block;
5861
- font-size: 12px;
5862
- font-weight: 500;
5863
- text-align: center;
5864
- line-height: 16px;
5865
- color: @action-item-filter-counter-color;
5866
- min-width: 16px;
5867
- height: 15px;
5868
- padding: 0 4px;
5869
- border-radius: 7.5px;
5870
- background-color: @action-item-filter-counter-bg-color;
5871
- }
5872
-
5873
- .item-dropdown-menu {
5874
- position: absolute;
5875
- top: 100%;
5876
- left: 0;
5877
- padding: 8px 0;
5878
- list-style: none;
5879
- font-size: 13px;
5880
- font-weight: 500;
5881
- color: @dropdown-menu-color;
5882
- border-radius: 2px;
5883
- background-color: @dropdown-menu-bg-color;
5884
- box-shadow: @dropdown-menu-box-shadow;
5885
- margin-top: 1px;
5886
- z-index: 10;
5887
-
5888
- .item-dropdown-menu-list {
5889
- margin: 0;
5890
- display: block;
5891
- padding: 0;
5892
- list-style-type: none;
5893
-
5894
- li {
5895
- height: 32px;
5896
- line-height: 32px;
5897
- text-align: left;
5898
- display: flex;
5899
-
5900
- &:hover {
5901
- background-color: @dropdown-menu-li-hover-bg-color;
5902
-
5903
- .action-icon {
5904
- color: @action-icon-hover-color;
5905
- }
5906
- }
5907
-
5908
- .action-label {
5909
- display: inline-block;
5910
- white-space: nowrap;
5911
- vertical-align: top;
5912
- margin-right: 17px;
5913
- }
5914
-
5915
- .action-icon {
5916
- color: @action-icon-color;
5917
- font-size: 17px;
5918
- display: inline-block;
5919
- margin: 0 13px 0 21px;
5920
- vertical-align: middle;
5921
- }
5922
- }
5923
- }
5924
- }
5925
- }
5926
- }
5927
-
5928
- .action-subtemplate {
5929
- border-bottom-left-radius: 4px;
5930
- border-bottom-right-radius: 4px;
5931
- border: @action-subtemplate-border;
5932
- background-color: @action-subtemplate-bg-color;
5933
- box-shadow: @action-subtemplate-box-shadow;
5934
- position: fixed;
5935
- margin: -2px 0 0 -1px;
5936
- z-index: 10;
5937
- }
5938
- }
5939
-
5940
- .auto-complete-wrapper {
5941
- .auto-complete-color-set();
5940
+ .auto-complete-wrapper {
5941
+ .auto-complete-color-set();
5942
5942
 
5943
5943
  position: relative;
5944
5944
 
@@ -6036,860 +6036,860 @@ yx-axis
6036
6036
  }
6037
6037
  }
6038
6038
 
6039
- .default-dropdown {
6040
- .default-dropdown-color-set();
6041
- .severity-icons-color-set();
6039
+ .date-time-picker {
6040
+ .date-time-picker-color-set();
6042
6041
 
6042
+ outline: none;
6043
+ display: flex;
6044
+ flex-wrap: nowrap;
6045
+ width: 100%;
6043
6046
  position: relative;
6044
- height: 36px;
6045
-
6046
- .default-dropdown-field {
6047
- border: @default-dropdown-field-border;
6048
- border-radius: 2px;
6049
- height: 100%;
6050
- color: @default-dropdown-field-color;
6051
- cursor: pointer;
6052
- font-family: @font-family-sans-serif;
6053
- font-size: 14px;
6054
- margin-top: 0;
6055
- display: flex;
6056
- align-items: center;
6057
- justify-content: space-between;
6058
6047
 
6059
- .dropdown-selected-item {
6060
- padding: 0 0 0 16px;
6061
- border-radius: 2px;
6062
- font-size: 14px;
6063
- font-family: @font-family-sans-serif;
6064
- font-weight: 500;
6065
- width: 100%;
6066
- display: flex;
6067
- align-items: center;
6068
- overflow: hidden;
6048
+ &:after {
6049
+ clear: both;
6050
+ }
6069
6051
 
6070
- > span {
6071
- overflow: hidden;
6072
- text-overflow: ellipsis;
6073
- width: 100%;
6074
- white-space: nowrap;
6075
- }
6052
+ .datetimepicker-input, .datetimepicker-open-button {
6053
+ background-color: @datetimepicker-input-bg-color;
6054
+ border: @datetimepicker-input-border;
6055
+ float: left;
6056
+ height: 36px;
6057
+ outline: none;
6058
+ }
6076
6059
 
6077
- input.input-name {
6078
- border: none;
6079
- background-color: inherit;
6080
- outline: none;
6060
+ .datetimepicker-input {
6061
+ font-size: 13px;
6062
+ border-radius: 2px 0 0 2px;
6063
+ width: 120px;
6064
+ padding-left: 14px;
6081
6065
 
6082
- &[readonly] {
6083
- cursor: pointer;
6084
- user-select: none;
6085
- pointer-events: none;
6086
- }
6066
+ &[disabled] {
6067
+ opacity: 1;
6068
+ }
6087
6069
 
6088
- &.non-editable {
6089
- opacity: 1;
6090
- }
6091
- }
6070
+ &:focus, &:active {
6071
+ border: @datetimepicker-input-focus-active-border;
6092
6072
  }
6093
6073
 
6094
- .dropdown-arrow {
6095
- margin-right: 14px;
6074
+ &.date-range {
6075
+ min-width: 150px;
6096
6076
 
6097
- span.igz-icon-dropdown {
6098
- font-size: 11px;
6077
+ &.pick-time {
6078
+ width: 285px;
6099
6079
  }
6100
6080
  }
6081
+ }
6101
6082
 
6102
- &:focus {
6103
- outline: none;
6083
+ .datetimepicker-open-button {
6084
+ border-radius: 0 2px 2px 0;
6085
+ width: 42px;
6086
+ border-left: none;
6087
+ vertical-align: top;
6104
6088
 
6105
- .dropdown-selected-item {
6106
- font-family: @font-family-sans-serif;
6107
- }
6089
+ &:hover {
6090
+ box-shadow: @datetimepicker-open-btn-hover-box-shadow;
6108
6091
  }
6109
6092
 
6110
- &:hover, &:focus {
6111
- background-color: @default-dropdown-field-hover-focus-bg-color;
6112
- box-shadow: @default-dropdown-field-hover-focus-box-shadow;
6093
+ &.active {
6094
+ background-color: @datetimepicker-open-btn-active-bg-color;
6095
+ box-shadow: @datetimepicker-open-btn-active-box-shadow;
6096
+ border: @datetimepicker-open-btn-active-border;
6113
6097
  }
6114
6098
 
6115
- &:active {
6116
- background-color: @default-dropdown-field-active-bg-color;
6117
- box-shadow: @default-dropdown-field-active-box-shadow;
6118
- border: @default-dropdown-field-active-border;
6099
+ .igz-icon-dropdown {
6100
+ font-size: 11px;
6101
+ line-height: 1.4;
6102
+ vertical-align: bottom;
6119
6103
  }
6120
6104
 
6121
- &.placeholder {
6122
- height: 36px;
6123
- font-weight: 500;
6124
-
6125
- .description {
6126
- display: none;
6127
- }
6105
+ .revert-icon {
6106
+ display: block;
6107
+ transform: rotate(180deg);
6108
+ line-height: 1;
6128
6109
  }
6110
+ }
6129
6111
 
6130
- &.disabled {
6131
- pointer-events: none;
6132
- background-color: @default-dropdown-field-disabled-bg-color;
6133
- opacity: 0.6;
6112
+ .options-dropdown {
6113
+ position: fixed;
6114
+ width: 100%;
6115
+ padding: 9px 0 0;
6116
+ z-index: 5000;
6117
+ font-family: @font-family-sans-serif;
6118
+ font-size: 14px;
6119
+ visibility: hidden;
6120
+ font-weight: 500;
6121
+ background-color: @options-dropdown-bg-color;
6122
+ color: @options-dropdown-color;
6123
+ border-radius: 2px;
6124
+ box-shadow: @options-dropdown-box-shadow;
6134
6125
 
6135
- .dropdown-arrow span.igz-icon-dropdown {
6136
- opacity: 0.4;
6137
- }
6126
+ &.visible {
6127
+ visibility: visible;
6138
6128
  }
6139
6129
 
6140
- &.readonly {
6141
- pointer-events: none;
6142
- background-color: @default-dropdown-field-readonly-bg-color;
6143
- }
6130
+ .options-list {
6131
+ list-style: none;
6132
+ margin: 0;
6133
+ padding: 0;
6144
6134
 
6145
- .name {
6146
- text-transform: capitalize;
6147
- }
6135
+ .options-list-item {
6136
+ height: 32px;
6137
+ line-height: 32px;
6138
+ margin: 0;
6139
+ padding: 0 15px;
6140
+ float: none;
6148
6141
 
6149
- .description {
6150
- display: none;
6151
- color: @default-dropdown-field-description-color;
6142
+ .tick-icon {
6143
+ position: absolute;
6144
+ right: 0;
6145
+ margin: 0 16px;
6146
+ font-size: 16px;
6147
+ color: @options-list-item-tick-icon-color;
6148
+ }
6152
6149
 
6153
- &:before {
6154
- content: " (";
6150
+ &:hover {
6151
+ background-color: @options-list-item-hover-bg-color;
6152
+ }
6153
+
6154
+ &:last-child {
6155
+ margin-bottom: 1px;
6156
+ }
6155
6157
  }
6156
6158
 
6157
- &:after {
6158
- content: ")";
6159
+ .separator {
6160
+ border-bottom: @options-list-separator-border-bottom;
6161
+ margin: 8px 0 7px;
6159
6162
  }
6160
6163
  }
6161
6164
  }
6162
6165
 
6163
- &.upward .default-dropdown-container {
6164
- border-top: @default-dropdown-container-upward-border-top;
6165
- bottom: 30px;
6166
- box-shadow: @default-dropdown-container-upward-box-shadow;
6167
- }
6168
-
6169
- &:not(.upward) .default-dropdown-container {
6170
- border-bottom: @default-dropdown-container-not-upward-border-bottom;
6171
- box-shadow: @default-dropdown-container-not-upward-box-shadow;
6166
+ &.disabled:after {
6167
+ opacity: 0.5;
6172
6168
  }
6173
6169
 
6174
- .default-dropdown-container {
6175
- background-color: @default-dropdown-container-bg-color;
6176
- border-radius: 2px;
6177
- box-shadow: @default-dropdown-container-box-shadow;
6178
- color: @default-dropdown-container-color;
6179
- max-height: 220px;
6180
- overflow: auto;
6181
- position: absolute;
6170
+ .date-time-pickers {
6171
+ position: fixed;
6182
6172
  z-index: 1000;
6183
- min-width: 100%;
6184
- margin-top: 2px;
6185
- margin-bottom: 2px;
6173
+ visibility: hidden;
6174
+ width: 279px;
6175
+ box-shadow: @date-time-pickers-box-shadow;
6176
+ background-color: @date-time-pickers-bg-color;
6186
6177
 
6187
- &.dropdown-overlap {
6188
- position: fixed;
6189
- min-width: unset;
6178
+ &.date-range {
6179
+ width: 538px;
6190
6180
  }
6191
6181
 
6192
- .list {
6193
- padding: 0;
6194
- margin: 0;
6182
+ &.visible {
6183
+ visibility: visible;
6184
+ }
6195
6185
 
6196
- .list-item {
6197
- color: @default-dropdown-container-list-item-color;
6198
- cursor: pointer;
6199
- font-family: @font-family-sans-serif;
6200
- font-size: 14px;
6201
- list-style-type: none;
6202
- margin: 0;
6203
- outline: none;
6204
- width: 100%;
6205
- display: flex;
6206
- min-height: 32px;
6207
- align-items: center;
6208
- justify-content: space-between;
6186
+ .datepicker-wrapper {
6187
+ width: 255px;
6188
+ display: inline-block;
6189
+ padding: 4px 0 0;
6209
6190
 
6210
- &.disabled {
6211
- opacity: 0.6;
6212
- cursor: not-allowed;
6191
+ &:first-child {
6192
+ padding-left: 20px;
6193
+ margin-right: 23px;
6194
+ }
6195
+
6196
+ .glyphicon {
6197
+ &.glyphicon-chevron-up {
6198
+ top: 5px;
6199
+ .igz-icon-up;
6213
6200
  }
6214
6201
 
6215
- &:first-child {
6216
- margin-top: 7px;
6202
+ &.glyphicon-chevron-down {
6203
+ top: -1px;
6204
+ .igz-icon-down;
6217
6205
  }
6218
6206
 
6219
- &:last-child {
6220
- margin-bottom: 8px;
6207
+ &.glyphicon-chevron-left {
6208
+ left: -2px;
6209
+ .igz-icon-left;
6221
6210
  }
6222
6211
 
6223
- .list-item-block {
6224
- display: flex;
6225
- align-items: center;
6226
- margin: 0 16px;
6212
+ &.glyphicon-chevron-right {
6213
+ .igz-icon-right;
6214
+ }
6215
+ }
6227
6216
 
6228
- .list-item-label {
6229
- display: flex;
6230
- flex-direction: column;
6217
+ .datepicker-calendar {
6218
+ border-radius: 3px;
6219
+ background-color: @datepicker-calendar-bg-color;
6220
+ top: 0;
6221
+ left: 0;
6222
+ padding: 0 0 10px;
6223
+ margin: 0;
6224
+ width: 240px;
6231
6225
 
6232
- .list-item-name {
6233
- line-height: 16px;
6234
- white-space: nowrap;
6235
- width: 100%;
6236
- overflow: hidden;
6237
- display: inline-block;
6238
- text-overflow: ellipsis;
6239
- }
6226
+ &.separator {
6227
+ border-bottom: @datepicker-calendar-separator-border-bottom;
6228
+ }
6240
6229
 
6241
- .description {
6242
- color: @default-dropdown-container-list-item-description-color;
6243
- overflow: hidden;
6244
- text-overflow: ellipsis;
6245
- white-space: nowrap;
6230
+ .uib-daypicker {
6231
+ outline: none;
6232
+ }
6246
6233
 
6247
- &:before {
6248
- content: " (";
6249
- }
6234
+ .btn {
6235
+ border: none;
6236
+ padding: 5px 0;
6237
+ outline: none;
6250
6238
 
6251
- &:after {
6252
- content: ")";
6239
+ &:not(.active) {
6240
+ &[disabled] {
6241
+ opacity: 1;
6242
+ color: @datepicker-calendar-btn-disabled-color;
6243
+
6244
+ .text-info {
6245
+ color: @datepicker-calendar-btn-text-info-disabled-color;
6246
+ }
6247
+ }
6248
+
6249
+ &:not([disabled]) {
6250
+ .text-info {
6251
+ color: @datepicker-calendar-btn-text-info-color;
6252
+ }
6253
+
6254
+ .text-muted {
6255
+ color: @datepicker-calendar-btn-text-muted-color;
6253
6256
  }
6254
6257
  }
6255
6258
  }
6256
6259
  }
6257
6260
 
6258
- .selected-item-icon {
6259
- text-align: right;
6260
- margin-right: 16px;
6261
- }
6261
+ table {
6262
+ margin: 0;
6263
+ width: 240px;
6264
+ outline: none;
6262
6265
 
6263
- &:hover, &:focus:not(.disabled) {
6264
- background-color: @default-dropdown-container-list-item-hover-focus-bg-color;
6265
- }
6266
+ thead tr {
6267
+ color: @datepicker-table-header-row-color;
6268
+ font-size: 13px;
6269
+ font-weight: 400;
6270
+ line-height: 2;
6266
6271
 
6267
- &.list-item-description {
6268
- padding: 5px 0;
6269
- }
6272
+ &:first-child {
6273
+ height: 55px;
6270
6274
 
6271
- &.selected-item {
6272
- color: @default-dropdown-container-list-item-selected-item-color;
6273
- }
6274
- }
6275
- }
6275
+ button {
6276
+ height: 55px;
6277
+ min-width: 100% !important;
6278
+ }
6276
6279
 
6277
- .add-button-wrapper {
6278
- padding: 0 7px 7px 7px;
6279
- line-height: normal;
6280
+ strong {
6281
+ color: @datepicker-table-header-row-color;
6282
+ }
6283
+ }
6280
6284
 
6281
- .add-button {
6282
- font-family: @font-family-sans-serif;
6283
- color: @add-button-color;
6284
- font-size: 13px;
6285
- font-weight: 400;
6286
- line-height: 20px;
6285
+ th {
6286
+ button:hover {
6287
+ background-color: @datepicker-table-header-row-btn-bg-color;
6288
+ }
6287
6289
 
6288
- &:hover, &:active {
6289
- color: @add-button-hover-active-color;
6290
- }
6290
+ small {
6291
+ font-size: 13px;
6292
+ font-weight: 100;
6293
+ }
6291
6294
 
6292
- &:focus {
6293
- color: @add-button-focus-color;
6294
- }
6295
- }
6296
- }
6295
+ &:first-child, &:last-child {
6296
+ button {
6297
+ font-size: 12px;
6297
6298
 
6298
- .transclude-container {
6299
- border-top: @transclude-container-border-top;
6300
- height: 48px;
6301
- padding: 8px 0;
6299
+ &:hover {
6300
+ color: @datepicker-table-header-row-btn-hover-bg-color;
6301
+ }
6302
+ }
6303
+ }
6304
+ }
6305
+ }
6302
6306
 
6303
- .transcluded-item {
6304
- font-family: @font-family-sans-serif;
6305
- width: 100%;
6306
- height: 100%;
6307
- display: flex;
6308
- align-items: center;
6309
- padding-left: 16px;
6310
- cursor: pointer;
6311
- font-size: 14px;
6312
- color: @transclude-container-item-color;
6307
+ tr {
6308
+ background-color: @datepicker-table-row-bg-color;
6313
6309
 
6314
- &:hover, &:focus {
6315
- background-color: @transclude-container-item-hover-focus-bg-color;
6316
- }
6317
- }
6318
- }
6319
- }
6310
+ td button, th button {
6311
+ font-family: @font-family-sans-serif;
6312
+ text-align: center;
6313
+ width: 28px;
6314
+ max-width: 28px;
6315
+ min-width: 28px !important;
6316
+ height: 28px;
6317
+ border: none;
6318
+ color: @datepicker-table-row-btn-color;
6319
+ background-color: @datepicker-table-row-btn-bg-color;
6320
+ box-shadow: none;
6321
+ }
6320
6322
 
6321
- .dropdown-icon {
6322
- display: flex;
6323
- justify-content: center;
6324
- align-items: center;
6325
- margin-right: 7px;
6326
- font-size: 15px;
6327
- width: 22px;
6323
+ th button {
6324
+ color: @datepicker-table-header-row-btn-color;
6325
+ line-height: 35px;
6326
+ font-size: 16px;
6327
+ font-weight: 500 !important;
6328
+ }
6328
6329
 
6329
- &:not(.custom-color) {
6330
- color: @dropdown-icon-not-custom-color;
6331
- }
6330
+ td button {
6331
+ background-color: @datepicker-table-header-row-btn-bg-color;
6332
+ border-radius: 50%;
6332
6333
 
6333
- &.severity-icon {
6334
- font-size: 19px;
6334
+ &:hover, &.active {
6335
+ background-color: @datepicker-table-header-row-btn-hover-active-bg-color;
6336
+ }
6335
6337
 
6336
- &.critical {
6337
- color: @severity-icon-critical-color;
6338
- }
6338
+ &.btn-info.active {
6339
+ background-color: @datepicker-table-header-row-btn-info-active-bg-color;
6339
6340
 
6340
- &.major {
6341
- color: @severity-icon-major-color;
6342
- }
6341
+ span {
6342
+ color: @datepicker-table-header-row-btn-info-active-color;
6343
+ }
6344
+ }
6343
6345
 
6344
- &.warning {
6345
- color: @severity-icon-warning-color;
6346
- }
6346
+ .text-muted {
6347
+ color: @datepicker-table-header-row-btn-text-muted-color;
6348
+ }
6347
6349
 
6348
- &.info {
6349
- color: @severity-icon-info-color;
6350
+ .text-info {
6351
+ color: @datepicker-table-header-row-btn-text-info-color;
6352
+ }
6353
+ }
6354
+ }
6355
+ }
6350
6356
  }
6351
- }
6352
- }
6353
6357
 
6354
- .hidden-input {
6355
- visibility: hidden;
6356
- width: 0;
6357
- height: 0;
6358
- opacity: 0;
6359
- border: 0;
6360
- margin: 0;
6361
- padding: 0;
6362
- position: absolute;
6363
- }
6364
- }
6358
+ .timepicker {
6359
+ background-color: @timepicker-bg-color;
6360
+ box-shadow: @timepicker-box-shadow;
6365
6361
 
6366
- // Invalid state
6367
- .default-dropdown.dropdown-input-invalid {
6368
- .default-dropdown-color-set();
6362
+ .uib-timepicker {
6363
+ margin: 0 auto;
6369
6364
 
6370
- .default-dropdown-field {
6371
- background-color: @default-dropdown-invalid-bg-color;
6372
- border: @default-dropdown-invalid-border;
6373
- box-shadow: none;
6374
- }
6375
- }
6365
+ tbody {
6366
+ tr {
6367
+ background-color: @timepicker-table-row-bg-color;
6376
6368
 
6377
- // Day of month mode
6378
- .default-dropdown.day-of-month {
6379
- .default-dropdown-color-set();
6369
+ &:first-child, &:last-child {
6370
+ a {
6371
+ font-size: 12px;
6372
+ color: @timepicker-table-row-color;
6380
6373
 
6381
- .default-dropdown-field {
6382
- .description {
6383
- display: inline;
6384
- vertical-align: super;
6385
- font-size: 7px;
6386
- line-height: 1;
6387
- text-transform: uppercase;
6374
+ &:hover {
6375
+ color: @timepicker-table-row-hover-color;
6376
+ }
6388
6377
 
6389
- &:before {
6390
- content: "";
6391
- }
6378
+ &:focus, &:active {
6379
+ outline: none;
6380
+ }
6381
+ }
6382
+ }
6392
6383
 
6393
- &:after {
6394
- content: "";
6395
- }
6396
- }
6384
+ td {
6385
+ input, button {
6386
+ height: 32px;
6387
+ width: 36px !important;
6388
+ font-size: 13px;
6389
+ border-radius: 2px;
6390
+ border: @timepicker-table-cell-border;
6391
+ box-shadow: none;
6392
+ margin: 0 2.5px;
6393
+ padding: 0;
6394
+ }
6397
6395
 
6398
- &.placeholder {
6399
- .description {
6400
- display: none;
6401
- }
6402
- }
6403
- }
6396
+ input {
6397
+ color: @timepicker-table-cell-color;
6398
+ font-weight: 400;
6404
6399
 
6405
- .default-dropdown-container {
6406
- .list {
6407
- .list-item {
6408
- .description {
6409
- color: @default-dropdown-day-of-month-list-item-description-color;
6410
- display: inline;
6411
- vertical-align: super;
6412
- font-size: 7px;
6413
- line-height: 1;
6414
- text-transform: uppercase;
6400
+ &:focus, &:active {
6401
+ border: @timepicker-table-cell-focus-active-border;
6402
+ }
6403
+ }
6415
6404
 
6416
- &:before {
6417
- content: "";
6418
- }
6405
+ &.has-error input, &.invalid input {
6406
+ background-color: @timepicker-table-cell-has-error-bg-color;
6407
+ border: @timepicker-table-cell-has-error-border;
6408
+ box-shadow: none;
6409
+ outline: none;
6410
+ }
6419
6411
 
6420
- &:after {
6421
- content: "";
6422
- }
6423
- }
6412
+ button {
6413
+ color: @timepicker-table-cell-btn-color;
6414
+ font-weight: 500;
6415
+ margin-left: 6px;
6424
6416
 
6425
- &:hover, &:focus {
6426
- background-color: @default-dropdown-day-of-month-list-item-hover-focus-bg-color;
6417
+ &:hover {
6418
+ box-shadow: @timepicker-table-cell-btn-hover-box-shadow;
6419
+ background-color: @timepicker-table-cell-btn-hover-bg-color;
6420
+ color: @timepicker-table-cell-btn-hover-color;
6421
+ }
6422
+
6423
+ &:active, &:focus {
6424
+ background-color: @timepicker-table-cell-btn-active-bg-color;
6425
+ box-shadow: @timepicker-table-cell-btn-active-box-shadow;
6426
+ border: @timepicker-table-cell-btn-active-border;
6427
+ color: @timepicker-table-cell-btn-active-color;
6428
+ outline: none;
6429
+ }
6430
+ }
6431
+
6432
+ a.disabled {
6433
+ opacity: 1;
6434
+ }
6435
+ }
6436
+ }
6437
+ }
6427
6438
  }
6428
6439
  }
6429
6440
  }
6430
- }
6431
- }
6432
6441
 
6433
- // Selected item description shown
6434
- .default-dropdown.use-description {
6435
- .default-dropdown-field {
6436
- .description {
6437
- display: inline;
6442
+ .buttons-block {
6443
+ border-top: @buttons-block-border-top;
6444
+ padding: 8px 24px;
6445
+ text-align: right;
6438
6446
 
6439
- &:before {
6440
- content: "";
6447
+ &.pick-time {
6448
+ margin-top: -3px;
6441
6449
  }
6442
6450
 
6443
- &:after {
6444
- content: "";
6451
+ button:not(:first-child) {
6452
+ margin-left: 8px;
6445
6453
  }
6446
6454
  }
6447
6455
  }
6448
6456
  }
6449
6457
 
6450
- .default-dropdown.show-description {
6458
+ .default-dropdown {
6459
+ .default-dropdown-color-set();
6460
+ .severity-icons-color-set();
6461
+
6462
+ position: relative;
6463
+ height: 36px;
6464
+
6451
6465
  .default-dropdown-field {
6452
- .description {
6453
- display: inline;
6466
+ border: @default-dropdown-field-border;
6467
+ border-radius: 2px;
6468
+ height: 100%;
6469
+ color: @default-dropdown-field-color;
6470
+ cursor: pointer;
6471
+ font-family: @font-family-sans-serif;
6472
+ font-size: 14px;
6473
+ margin-top: 0;
6474
+ display: flex;
6475
+ align-items: center;
6476
+ justify-content: space-between;
6454
6477
 
6455
- &:before {
6456
- content: " (";
6457
- }
6478
+ .dropdown-selected-item {
6479
+ padding: 0 0 0 16px;
6480
+ border-radius: 2px;
6481
+ font-size: 14px;
6482
+ font-family: @font-family-sans-serif;
6483
+ font-weight: 500;
6484
+ width: 100%;
6485
+ display: flex;
6486
+ align-items: center;
6487
+ overflow: hidden;
6458
6488
 
6459
- &:after {
6460
- content: ")";
6489
+ > span {
6490
+ overflow: hidden;
6491
+ text-overflow: ellipsis;
6492
+ width: 100%;
6493
+ white-space: nowrap;
6461
6494
  }
6462
- }
6463
- }
6464
- }
6465
6495
 
6466
- .no-selected-option-style {
6467
- .default-dropdown {
6468
- .default-dropdown-field {
6469
- border: none;
6496
+ input.input-name {
6497
+ border: none;
6498
+ background-color: inherit;
6499
+ outline: none;
6470
6500
 
6471
- &:active, &:focus, &:hover {
6472
- background-color: unset;
6473
- box-shadow: none;
6501
+ &[readonly] {
6502
+ cursor: pointer;
6503
+ user-select: none;
6504
+ pointer-events: none;
6505
+ }
6506
+
6507
+ &.non-editable {
6508
+ opacity: 1;
6509
+ }
6474
6510
  }
6475
6511
  }
6476
- }
6477
- }
6478
-
6479
- .date-time-picker {
6480
- .date-time-picker-color-set();
6481
6512
 
6482
- outline: none;
6483
- display: flex;
6484
- flex-wrap: nowrap;
6485
- width: 100%;
6486
- position: relative;
6513
+ .dropdown-arrow {
6514
+ margin-right: 14px;
6487
6515
 
6488
- &:after {
6489
- clear: both;
6490
- }
6516
+ span.igz-icon-dropdown {
6517
+ font-size: 11px;
6518
+ }
6519
+ }
6491
6520
 
6492
- .datetimepicker-input, .datetimepicker-open-button {
6493
- background-color: @datetimepicker-input-bg-color;
6494
- border: @datetimepicker-input-border;
6495
- float: left;
6496
- height: 36px;
6497
- outline: none;
6498
- }
6521
+ &:focus {
6522
+ outline: none;
6499
6523
 
6500
- .datetimepicker-input {
6501
- font-size: 13px;
6502
- border-radius: 2px 0 0 2px;
6503
- width: 120px;
6504
- padding-left: 14px;
6524
+ .dropdown-selected-item {
6525
+ font-family: @font-family-sans-serif;
6526
+ }
6527
+ }
6505
6528
 
6506
- &[disabled] {
6507
- opacity: 1;
6529
+ &:hover, &:focus {
6530
+ background-color: @default-dropdown-field-hover-focus-bg-color;
6531
+ box-shadow: @default-dropdown-field-hover-focus-box-shadow;
6508
6532
  }
6509
6533
 
6510
- &:focus, &:active {
6511
- border: @datetimepicker-input-focus-active-border;
6534
+ &:active {
6535
+ background-color: @default-dropdown-field-active-bg-color;
6536
+ box-shadow: @default-dropdown-field-active-box-shadow;
6537
+ border: @default-dropdown-field-active-border;
6512
6538
  }
6513
6539
 
6514
- &.date-range {
6515
- min-width: 150px;
6540
+ &.placeholder {
6541
+ height: 36px;
6542
+ font-weight: 500;
6516
6543
 
6517
- &.pick-time {
6518
- width: 285px;
6544
+ .description {
6545
+ display: none;
6519
6546
  }
6520
6547
  }
6521
- }
6522
6548
 
6523
- .datetimepicker-open-button {
6524
- border-radius: 0 2px 2px 0;
6525
- width: 42px;
6526
- border-left: none;
6527
- vertical-align: top;
6549
+ &.disabled {
6550
+ pointer-events: none;
6551
+ background-color: @default-dropdown-field-disabled-bg-color;
6552
+ opacity: 0.6;
6528
6553
 
6529
- &:hover {
6530
- box-shadow: @datetimepicker-open-btn-hover-box-shadow;
6554
+ .dropdown-arrow span.igz-icon-dropdown {
6555
+ opacity: 0.4;
6556
+ }
6531
6557
  }
6532
6558
 
6533
- &.active {
6534
- background-color: @datetimepicker-open-btn-active-bg-color;
6535
- box-shadow: @datetimepicker-open-btn-active-box-shadow;
6536
- border: @datetimepicker-open-btn-active-border;
6559
+ &.readonly {
6560
+ pointer-events: none;
6561
+ background-color: @default-dropdown-field-readonly-bg-color;
6537
6562
  }
6538
6563
 
6539
- .igz-icon-dropdown {
6540
- font-size: 11px;
6541
- line-height: 1.4;
6542
- vertical-align: bottom;
6564
+ .name {
6565
+ text-transform: capitalize;
6543
6566
  }
6544
6567
 
6545
- .revert-icon {
6546
- display: block;
6547
- transform: rotate(180deg);
6548
- line-height: 1;
6549
- }
6550
- }
6568
+ .description {
6569
+ display: none;
6570
+ color: @default-dropdown-field-description-color;
6551
6571
 
6552
- .options-dropdown {
6553
- position: fixed;
6554
- width: 100%;
6555
- padding: 9px 0 0;
6556
- z-index: 5000;
6557
- font-family: @font-family-sans-serif;
6558
- font-size: 14px;
6559
- visibility: hidden;
6560
- font-weight: 500;
6561
- background-color: @options-dropdown-bg-color;
6562
- color: @options-dropdown-color;
6563
- border-radius: 2px;
6564
- box-shadow: @options-dropdown-box-shadow;
6572
+ &:before {
6573
+ content: " (";
6574
+ }
6565
6575
 
6566
- &.visible {
6567
- visibility: visible;
6576
+ &:after {
6577
+ content: ")";
6578
+ }
6568
6579
  }
6580
+ }
6569
6581
 
6570
- .options-list {
6571
- list-style: none;
6572
- margin: 0;
6573
- padding: 0;
6574
-
6575
- .options-list-item {
6576
- height: 32px;
6577
- line-height: 32px;
6578
- margin: 0;
6579
- padding: 0 15px;
6580
- float: none;
6581
-
6582
- .tick-icon {
6583
- position: absolute;
6584
- right: 0;
6585
- margin: 0 16px;
6586
- font-size: 16px;
6587
- color: @options-list-item-tick-icon-color;
6588
- }
6589
-
6590
- &:hover {
6591
- background-color: @options-list-item-hover-bg-color;
6592
- }
6593
-
6594
- &:last-child {
6595
- margin-bottom: 1px;
6596
- }
6597
- }
6598
-
6599
- .separator {
6600
- border-bottom: @options-list-separator-border-bottom;
6601
- margin: 8px 0 7px;
6602
- }
6603
- }
6582
+ &.upward .default-dropdown-container {
6583
+ border-top: @default-dropdown-container-upward-border-top;
6584
+ bottom: 30px;
6585
+ box-shadow: @default-dropdown-container-upward-box-shadow;
6604
6586
  }
6605
6587
 
6606
- &.disabled:after {
6607
- opacity: 0.5;
6588
+ &:not(.upward) .default-dropdown-container {
6589
+ border-bottom: @default-dropdown-container-not-upward-border-bottom;
6590
+ box-shadow: @default-dropdown-container-not-upward-box-shadow;
6608
6591
  }
6609
6592
 
6610
- .date-time-pickers {
6611
- position: fixed;
6593
+ .default-dropdown-container {
6594
+ background-color: @default-dropdown-container-bg-color;
6595
+ border-radius: 2px;
6596
+ box-shadow: @default-dropdown-container-box-shadow;
6597
+ color: @default-dropdown-container-color;
6598
+ max-height: 220px;
6599
+ overflow: auto;
6600
+ position: absolute;
6612
6601
  z-index: 1000;
6613
- visibility: hidden;
6614
- width: 279px;
6615
- box-shadow: @date-time-pickers-box-shadow;
6616
- background-color: @date-time-pickers-bg-color;
6617
-
6618
- &.date-range {
6619
- width: 538px;
6620
- }
6602
+ min-width: 100%;
6603
+ margin-top: 2px;
6604
+ margin-bottom: 2px;
6621
6605
 
6622
- &.visible {
6623
- visibility: visible;
6606
+ &.dropdown-overlap {
6607
+ position: fixed;
6608
+ min-width: unset;
6624
6609
  }
6625
6610
 
6626
- .datepicker-wrapper {
6627
- width: 255px;
6628
- display: inline-block;
6629
- padding: 4px 0 0;
6630
-
6631
- &:first-child {
6632
- padding-left: 20px;
6633
- margin-right: 23px;
6634
- }
6635
-
6636
- .glyphicon {
6637
- &.glyphicon-chevron-up {
6638
- top: 5px;
6639
- .igz-icon-up;
6640
- }
6641
-
6642
- &.glyphicon-chevron-down {
6643
- top: -1px;
6644
- .igz-icon-down;
6645
- }
6611
+ .list {
6612
+ padding: 0;
6613
+ margin: 0;
6646
6614
 
6647
- &.glyphicon-chevron-left {
6648
- left: -2px;
6649
- .igz-icon-left;
6650
- }
6615
+ .list-item {
6616
+ color: @default-dropdown-container-list-item-color;
6617
+ cursor: pointer;
6618
+ font-family: @font-family-sans-serif;
6619
+ font-size: 14px;
6620
+ list-style-type: none;
6621
+ margin: 0;
6622
+ outline: none;
6623
+ width: 100%;
6624
+ display: flex;
6625
+ min-height: 32px;
6626
+ align-items: center;
6627
+ justify-content: space-between;
6651
6628
 
6652
- &.glyphicon-chevron-right {
6653
- .igz-icon-right;
6629
+ &.disabled {
6630
+ opacity: 0.6;
6631
+ cursor: not-allowed;
6654
6632
  }
6655
- }
6656
-
6657
- .datepicker-calendar {
6658
- border-radius: 3px;
6659
- background-color: @datepicker-calendar-bg-color;
6660
- top: 0;
6661
- left: 0;
6662
- padding: 0 0 10px;
6663
- margin: 0;
6664
- width: 240px;
6665
6633
 
6666
- &.separator {
6667
- border-bottom: @datepicker-calendar-separator-border-bottom;
6634
+ &:first-child {
6635
+ margin-top: 7px;
6668
6636
  }
6669
6637
 
6670
- .uib-daypicker {
6671
- outline: none;
6638
+ &:last-child {
6639
+ margin-bottom: 8px;
6672
6640
  }
6673
6641
 
6674
- .btn {
6675
- border: none;
6676
- padding: 5px 0;
6677
- outline: none;
6642
+ .list-item-block {
6643
+ display: flex;
6644
+ align-items: center;
6645
+ margin: 0 16px;
6678
6646
 
6679
- &:not(.active) {
6680
- &[disabled] {
6681
- opacity: 1;
6682
- color: @datepicker-calendar-btn-disabled-color;
6647
+ .list-item-label {
6648
+ display: flex;
6649
+ flex-direction: column;
6683
6650
 
6684
- .text-info {
6685
- color: @datepicker-calendar-btn-text-info-disabled-color;
6686
- }
6651
+ .list-item-name {
6652
+ line-height: 16px;
6653
+ white-space: nowrap;
6654
+ width: 100%;
6655
+ overflow: hidden;
6656
+ display: inline-block;
6657
+ text-overflow: ellipsis;
6687
6658
  }
6688
6659
 
6689
- &:not([disabled]) {
6690
- .text-info {
6691
- color: @datepicker-calendar-btn-text-info-color;
6660
+ .description {
6661
+ color: @default-dropdown-container-list-item-description-color;
6662
+ overflow: hidden;
6663
+ text-overflow: ellipsis;
6664
+ white-space: nowrap;
6665
+
6666
+ &:before {
6667
+ content: " (";
6692
6668
  }
6693
6669
 
6694
- .text-muted {
6695
- color: @datepicker-calendar-btn-text-muted-color;
6670
+ &:after {
6671
+ content: ")";
6696
6672
  }
6697
6673
  }
6698
6674
  }
6699
6675
  }
6700
6676
 
6701
- table {
6702
- margin: 0;
6703
- width: 240px;
6704
- outline: none;
6677
+ .selected-item-icon {
6678
+ text-align: right;
6679
+ margin-right: 16px;
6680
+ }
6705
6681
 
6706
- thead tr {
6707
- color: @datepicker-table-header-row-color;
6708
- font-size: 13px;
6709
- font-weight: 400;
6710
- line-height: 2;
6682
+ &:hover, &:focus:not(.disabled) {
6683
+ background-color: @default-dropdown-container-list-item-hover-focus-bg-color;
6684
+ }
6711
6685
 
6712
- &:first-child {
6713
- height: 55px;
6686
+ &.list-item-description {
6687
+ padding: 5px 0;
6688
+ }
6714
6689
 
6715
- button {
6716
- height: 55px;
6717
- min-width: 100% !important;
6718
- }
6690
+ &.selected-item {
6691
+ color: @default-dropdown-container-list-item-selected-item-color;
6692
+ }
6693
+ }
6694
+ }
6719
6695
 
6720
- strong {
6721
- color: @datepicker-table-header-row-color;
6722
- }
6723
- }
6696
+ .add-button-wrapper {
6697
+ padding: 0 7px 7px 7px;
6698
+ line-height: normal;
6724
6699
 
6725
- th {
6726
- button:hover {
6727
- background-color: @datepicker-table-header-row-btn-bg-color;
6728
- }
6700
+ .add-button {
6701
+ font-family: @font-family-sans-serif;
6702
+ color: @add-button-color;
6703
+ font-size: 13px;
6704
+ font-weight: 400;
6705
+ line-height: 20px;
6729
6706
 
6730
- small {
6731
- font-size: 13px;
6732
- font-weight: 100;
6733
- }
6707
+ &:hover, &:active {
6708
+ color: @add-button-hover-active-color;
6709
+ }
6734
6710
 
6735
- &:first-child, &:last-child {
6736
- button {
6737
- font-size: 12px;
6711
+ &:focus {
6712
+ color: @add-button-focus-color;
6713
+ }
6714
+ }
6715
+ }
6738
6716
 
6739
- &:hover {
6740
- color: @datepicker-table-header-row-btn-hover-bg-color;
6741
- }
6742
- }
6743
- }
6744
- }
6745
- }
6717
+ .transclude-container {
6718
+ border-top: @transclude-container-border-top;
6719
+ height: 48px;
6720
+ padding: 8px 0;
6746
6721
 
6747
- tr {
6748
- background-color: @datepicker-table-row-bg-color;
6722
+ .transcluded-item {
6723
+ font-family: @font-family-sans-serif;
6724
+ width: 100%;
6725
+ height: 100%;
6726
+ display: flex;
6727
+ align-items: center;
6728
+ padding-left: 16px;
6729
+ cursor: pointer;
6730
+ font-size: 14px;
6731
+ color: @transclude-container-item-color;
6749
6732
 
6750
- td button, th button {
6751
- font-family: @font-family-sans-serif;
6752
- text-align: center;
6753
- width: 28px;
6754
- max-width: 28px;
6755
- min-width: 28px !important;
6756
- height: 28px;
6757
- border: none;
6758
- color: @datepicker-table-row-btn-color;
6759
- background-color: @datepicker-table-row-btn-bg-color;
6760
- box-shadow: none;
6761
- }
6733
+ &:hover, &:focus {
6734
+ background-color: @transclude-container-item-hover-focus-bg-color;
6735
+ }
6736
+ }
6737
+ }
6738
+ }
6762
6739
 
6763
- th button {
6764
- color: @datepicker-table-header-row-btn-color;
6765
- line-height: 35px;
6766
- font-size: 16px;
6767
- font-weight: 500 !important;
6768
- }
6740
+ .dropdown-icon {
6741
+ display: flex;
6742
+ justify-content: center;
6743
+ align-items: center;
6744
+ margin-right: 7px;
6745
+ font-size: 15px;
6746
+ width: 22px;
6769
6747
 
6770
- td button {
6771
- background-color: @datepicker-table-header-row-btn-bg-color;
6772
- border-radius: 50%;
6748
+ &:not(.custom-color) {
6749
+ color: @dropdown-icon-not-custom-color;
6750
+ }
6773
6751
 
6774
- &:hover, &.active {
6775
- background-color: @datepicker-table-header-row-btn-hover-active-bg-color;
6776
- }
6752
+ &.severity-icon {
6753
+ font-size: 19px;
6777
6754
 
6778
- &.btn-info.active {
6779
- background-color: @datepicker-table-header-row-btn-info-active-bg-color;
6755
+ &.critical {
6756
+ color: @severity-icon-critical-color;
6757
+ }
6780
6758
 
6781
- span {
6782
- color: @datepicker-table-header-row-btn-info-active-color;
6783
- }
6784
- }
6759
+ &.major {
6760
+ color: @severity-icon-major-color;
6761
+ }
6785
6762
 
6786
- .text-muted {
6787
- color: @datepicker-table-header-row-btn-text-muted-color;
6788
- }
6763
+ &.warning {
6764
+ color: @severity-icon-warning-color;
6765
+ }
6789
6766
 
6790
- .text-info {
6791
- color: @datepicker-table-header-row-btn-text-info-color;
6792
- }
6793
- }
6794
- }
6795
- }
6767
+ &.info {
6768
+ color: @severity-icon-info-color;
6796
6769
  }
6770
+ }
6771
+ }
6797
6772
 
6798
- .timepicker {
6799
- background-color: @timepicker-bg-color;
6800
- box-shadow: @timepicker-box-shadow;
6773
+ .hidden-input {
6774
+ visibility: hidden;
6775
+ width: 0;
6776
+ height: 0;
6777
+ opacity: 0;
6778
+ border: 0;
6779
+ margin: 0;
6780
+ padding: 0;
6781
+ position: absolute;
6782
+ }
6783
+ }
6801
6784
 
6802
- .uib-timepicker {
6803
- margin: 0 auto;
6785
+ // Invalid state
6786
+ .default-dropdown.dropdown-input-invalid {
6787
+ .default-dropdown-color-set();
6804
6788
 
6805
- tbody {
6806
- tr {
6807
- background-color: @timepicker-table-row-bg-color;
6789
+ .default-dropdown-field {
6790
+ background-color: @default-dropdown-invalid-bg-color;
6791
+ border: @default-dropdown-invalid-border;
6792
+ box-shadow: none;
6793
+ }
6794
+ }
6808
6795
 
6809
- &:first-child, &:last-child {
6810
- a {
6811
- font-size: 12px;
6812
- color: @timepicker-table-row-color;
6796
+ // Day of month mode
6797
+ .default-dropdown.day-of-month {
6798
+ .default-dropdown-color-set();
6813
6799
 
6814
- &:hover {
6815
- color: @timepicker-table-row-hover-color;
6816
- }
6800
+ .default-dropdown-field {
6801
+ .description {
6802
+ display: inline;
6803
+ vertical-align: super;
6804
+ font-size: 7px;
6805
+ line-height: 1;
6806
+ text-transform: uppercase;
6817
6807
 
6818
- &:focus, &:active {
6819
- outline: none;
6820
- }
6821
- }
6822
- }
6808
+ &:before {
6809
+ content: "";
6810
+ }
6823
6811
 
6824
- td {
6825
- input, button {
6826
- height: 32px;
6827
- width: 36px !important;
6828
- font-size: 13px;
6829
- border-radius: 2px;
6830
- border: @timepicker-table-cell-border;
6831
- box-shadow: none;
6832
- margin: 0 2.5px;
6833
- padding: 0;
6834
- }
6812
+ &:after {
6813
+ content: "";
6814
+ }
6815
+ }
6835
6816
 
6836
- input {
6837
- color: @timepicker-table-cell-color;
6838
- font-weight: 400;
6817
+ &.placeholder {
6818
+ .description {
6819
+ display: none;
6820
+ }
6821
+ }
6822
+ }
6839
6823
 
6840
- &:focus, &:active {
6841
- border: @timepicker-table-cell-focus-active-border;
6842
- }
6843
- }
6824
+ .default-dropdown-container {
6825
+ .list {
6826
+ .list-item {
6827
+ .description {
6828
+ color: @default-dropdown-day-of-month-list-item-description-color;
6829
+ display: inline;
6830
+ vertical-align: super;
6831
+ font-size: 7px;
6832
+ line-height: 1;
6833
+ text-transform: uppercase;
6844
6834
 
6845
- &.has-error input, &.invalid input {
6846
- background-color: @timepicker-table-cell-has-error-bg-color;
6847
- border: @timepicker-table-cell-has-error-border;
6848
- box-shadow: none;
6849
- outline: none;
6850
- }
6835
+ &:before {
6836
+ content: "";
6837
+ }
6851
6838
 
6852
- button {
6853
- color: @timepicker-table-cell-btn-color;
6854
- font-weight: 500;
6855
- margin-left: 6px;
6839
+ &:after {
6840
+ content: "";
6841
+ }
6842
+ }
6856
6843
 
6857
- &:hover {
6858
- box-shadow: @timepicker-table-cell-btn-hover-box-shadow;
6859
- background-color: @timepicker-table-cell-btn-hover-bg-color;
6860
- color: @timepicker-table-cell-btn-hover-color;
6861
- }
6844
+ &:hover, &:focus {
6845
+ background-color: @default-dropdown-day-of-month-list-item-hover-focus-bg-color;
6846
+ }
6847
+ }
6848
+ }
6849
+ }
6850
+ }
6862
6851
 
6863
- &:active, &:focus {
6864
- background-color: @timepicker-table-cell-btn-active-bg-color;
6865
- box-shadow: @timepicker-table-cell-btn-active-box-shadow;
6866
- border: @timepicker-table-cell-btn-active-border;
6867
- color: @timepicker-table-cell-btn-active-color;
6868
- outline: none;
6869
- }
6870
- }
6852
+ // Selected item description shown
6853
+ .default-dropdown.use-description {
6854
+ .default-dropdown-field {
6855
+ .description {
6856
+ display: inline;
6871
6857
 
6872
- a.disabled {
6873
- opacity: 1;
6874
- }
6875
- }
6876
- }
6877
- }
6878
- }
6858
+ &:before {
6859
+ content: "";
6860
+ }
6861
+
6862
+ &:after {
6863
+ content: "";
6879
6864
  }
6880
6865
  }
6866
+ }
6867
+ }
6868
+
6869
+ .default-dropdown.show-description {
6870
+ .default-dropdown-field {
6871
+ .description {
6872
+ display: inline;
6881
6873
 
6882
- .buttons-block {
6883
- border-top: @buttons-block-border-top;
6884
- padding: 8px 24px;
6885
- text-align: right;
6874
+ &:before {
6875
+ content: " (";
6876
+ }
6886
6877
 
6887
- &.pick-time {
6888
- margin-top: -3px;
6878
+ &:after {
6879
+ content: ")";
6889
6880
  }
6881
+ }
6882
+ }
6883
+ }
6890
6884
 
6891
- button:not(:first-child) {
6892
- margin-left: 8px;
6885
+ .no-selected-option-style {
6886
+ .default-dropdown {
6887
+ .default-dropdown-field {
6888
+ border: none;
6889
+
6890
+ &:active, &:focus, &:hover {
6891
+ background-color: unset;
6892
+ box-shadow: none;
6893
6893
  }
6894
6894
  }
6895
6895
  }
@@ -9337,6 +9337,21 @@ body {
9337
9337
  }
9338
9338
  }
9339
9339
 
9340
+ .override-function-dialog {
9341
+ .sub-title {
9342
+ font-size: 16px;
9343
+ color: @silver-chalice-two;
9344
+ }
9345
+
9346
+ .buttons {
9347
+ display: flex;
9348
+
9349
+ .function-redirect-button {
9350
+ margin-right: auto;
9351
+ }
9352
+ }
9353
+ }
9354
+
9340
9355
  .ncl-function-collapsing-row {
9341
9356
  background-color: @white;
9342
9357
  margin-bottom: 8px;
@@ -9471,21 +9486,6 @@ body {
9471
9486
  }
9472
9487
  }
9473
9488
 
9474
- .override-function-dialog {
9475
- .sub-title {
9476
- font-size: 16px;
9477
- color: @silver-chalice-two;
9478
- }
9479
-
9480
- .buttons {
9481
- display: flex;
9482
-
9483
- .function-redirect-button {
9484
- margin-right: auto;
9485
- }
9486
- }
9487
- }
9488
-
9489
9489
  .ncl-edit-version {
9490
9490
  background: #f2f2f6;
9491
9491
  position: relative;
@@ -10608,6 +10608,106 @@ ncl-breadcrumbs {
10608
10608
  }
10609
10609
  }
10610
10610
  }
10611
+ .ncl-edit-item {
10612
+ width: 100%;
10613
+ padding: 6px 0;
10614
+
10615
+ .title-field-row {
10616
+ display: flex;
10617
+
10618
+ .name-field {
10619
+ margin-right: 14px;
10620
+ width: 178px;
10621
+
10622
+ .error {
10623
+ color: @darkish-pink;
10624
+ font-size: 12px;
10625
+ white-space: nowrap;
10626
+ }
10627
+ }
10628
+
10629
+ .class-field {
10630
+ margin-right: 14px;
10631
+ width: 154px;
10632
+
10633
+ .default-dropdown {
10634
+ .default-dropdown-container {
10635
+ position: relative;
10636
+ }
10637
+ }
10638
+
10639
+ .error {
10640
+ color: @darkish-pink;
10641
+ font-size: 12px;
10642
+ white-space: nowrap;
10643
+ }
10644
+ }
10645
+
10646
+ &:last-child {
10647
+ padding-bottom: 0;
10648
+ }
10649
+
10650
+ .tooltip-wrapper {
10651
+ .more-info-wrapper {
10652
+ padding-left: 0;
10653
+ }
10654
+ }
10655
+ }
10656
+
10657
+ .attribute-field {
10658
+ margin-right: 1%;
10659
+ padding: 8px 0 6px;
10660
+
10661
+ .field-label {
10662
+ height: 22px;
10663
+ }
10664
+
10665
+ &.attribute-field-checkbox {
10666
+ padding: 35px 0 19px;
10667
+ }
10668
+
10669
+ .more-info-wrapper {
10670
+ height: auto;
10671
+ }
10672
+ }
10673
+
10674
+ .no-class-selected {
10675
+ line-height: 48px;
10676
+ .duskThree(0.64);
10677
+ color: @color;
10678
+ }
10679
+
10680
+ .ingresses-wrapper {
10681
+ .ingresses-table-headers {
10682
+ width: calc(100% - 30px);
10683
+
10684
+ .host-header {
10685
+ width: 38%;
10686
+ padding-left: 16px;
10687
+ }
10688
+
10689
+ .paths-header, .secret-header{
10690
+ width: 31%;
10691
+ padding-left: 16px;
10692
+ }
10693
+ }
10694
+ }
10695
+
10696
+ .advanced-section {
10697
+ .collapsed-block-title {
10698
+ font-size: 15px;
10699
+ font-weight: bold;
10700
+ margin: 15px 0;
10701
+
10702
+ .icon-collapsed {
10703
+ color: .duskThree(0.64)[@color];
10704
+ font-size: 12px;
10705
+ margin: 0 11px 0 4px;
10706
+ }
10707
+ }
10708
+ }
10709
+ }
10710
+
10611
10711
  .view-yaml-dialog-wrapper {
10612
10712
  .ngdialog-content {
10613
10713
  .view-yaml-dialog-header {
@@ -10806,135 +10906,35 @@ ncl-breadcrumbs {
10806
10906
  width: 20%;
10807
10907
  margin-right: 10px;
10808
10908
 
10809
- .type-label {
10810
- width: 60px;
10811
- text-align: left;
10812
- padding-left: 7px;
10813
- }
10814
-
10815
- &.all-value-types {
10816
- width: 20%;
10817
- }
10818
-
10819
- &.type-name-table {
10820
- width: 30%;
10821
- margin-right: 10px;
10822
- }
10823
-
10824
- .input-type {
10825
- flex-grow: 1;
10826
-
10827
- .default-dropdown {
10828
- .default-dropdown-field {
10829
- background-color: @white;
10830
- border-radius: 0;
10831
- }
10832
-
10833
- .default-dropdown-container {
10834
- z-index: 100;
10835
- }
10836
- }
10837
- }
10838
- }
10839
- }
10840
- }
10841
- }
10842
-
10843
- .ncl-edit-item {
10844
- width: 100%;
10845
- padding: 6px 0;
10846
-
10847
- .title-field-row {
10848
- display: flex;
10849
-
10850
- .name-field {
10851
- margin-right: 14px;
10852
- width: 178px;
10853
-
10854
- .error {
10855
- color: @darkish-pink;
10856
- font-size: 12px;
10857
- white-space: nowrap;
10858
- }
10859
- }
10860
-
10861
- .class-field {
10862
- margin-right: 14px;
10863
- width: 154px;
10864
-
10865
- .default-dropdown {
10866
- .default-dropdown-container {
10867
- position: relative;
10868
- }
10869
- }
10870
-
10871
- .error {
10872
- color: @darkish-pink;
10873
- font-size: 12px;
10874
- white-space: nowrap;
10875
- }
10876
- }
10877
-
10878
- &:last-child {
10879
- padding-bottom: 0;
10880
- }
10881
-
10882
- .tooltip-wrapper {
10883
- .more-info-wrapper {
10884
- padding-left: 0;
10885
- }
10886
- }
10887
- }
10888
-
10889
- .attribute-field {
10890
- margin-right: 1%;
10891
- padding: 8px 0 6px;
10892
-
10893
- .field-label {
10894
- height: 22px;
10895
- }
10896
-
10897
- &.attribute-field-checkbox {
10898
- padding: 35px 0 19px;
10899
- }
10900
-
10901
- .more-info-wrapper {
10902
- height: auto;
10903
- }
10904
- }
10905
-
10906
- .no-class-selected {
10907
- line-height: 48px;
10908
- .duskThree(0.64);
10909
- color: @color;
10910
- }
10909
+ .type-label {
10910
+ width: 60px;
10911
+ text-align: left;
10912
+ padding-left: 7px;
10913
+ }
10911
10914
 
10912
- .ingresses-wrapper {
10913
- .ingresses-table-headers {
10914
- width: calc(100% - 30px);
10915
+ &.all-value-types {
10916
+ width: 20%;
10917
+ }
10915
10918
 
10916
- .host-header {
10917
- width: 38%;
10918
- padding-left: 16px;
10919
- }
10919
+ &.type-name-table {
10920
+ width: 30%;
10921
+ margin-right: 10px;
10922
+ }
10920
10923
 
10921
- .paths-header, .secret-header{
10922
- width: 31%;
10923
- padding-left: 16px;
10924
- }
10925
- }
10926
- }
10924
+ .input-type {
10925
+ flex-grow: 1;
10927
10926
 
10928
- .advanced-section {
10929
- .collapsed-block-title {
10930
- font-size: 15px;
10931
- font-weight: bold;
10932
- margin: 15px 0;
10927
+ .default-dropdown {
10928
+ .default-dropdown-field {
10929
+ background-color: @white;
10930
+ border-radius: 0;
10931
+ }
10933
10932
 
10934
- .icon-collapsed {
10935
- color: .duskThree(0.64)[@color];
10936
- font-size: 12px;
10937
- margin: 0 11px 0 4px;
10933
+ .default-dropdown-container {
10934
+ z-index: 100;
10935
+ }
10936
+ }
10937
+ }
10938
10938
  }
10939
10939
  }
10940
10940
  }
@@ -11720,7 +11720,7 @@ ncl-navigation-tabs {
11720
11720
  .ncl-version-execution-log {
11721
11721
  .control-panel-log-color-set();
11722
11722
 
11723
- min-width: 1200px;
11723
+ min-width: 1250px;
11724
11724
  padding: 24px 25px 22px 41px;
11725
11725
 
11726
11726
  .ncl-version-execution-log-wrapper {
@@ -11753,6 +11753,10 @@ ncl-navigation-tabs {
11753
11753
  transition: @igz-basic-transition;
11754
11754
  height: 100%;
11755
11755
 
11756
+ .limitation-message {
11757
+ line-height: 20px;
11758
+ }
11759
+
11756
11760
  .logs-container {
11757
11761
  padding-bottom: 50px;
11758
11762
  }
@@ -11889,6 +11893,59 @@ ncl-navigation-tabs {
11889
11893
  }
11890
11894
  }
11891
11895
 
11896
+ .ncl-version-trigger {
11897
+ padding: 11px 24px;
11898
+
11899
+ .common-table-header {
11900
+ border: none;
11901
+ padding-left: 24px;
11902
+
11903
+ .common-table-cell {
11904
+ font-size: 14px;
11905
+ font-weight: bold;
11906
+ letter-spacing: normal;
11907
+ color: @dusk-three;
11908
+ height: 46px;
11909
+ }
11910
+ }
11911
+
11912
+ .common-table-body {
11913
+ .common-table-row {
11914
+ &:not(.read-only):hover {
11915
+ .common-table-cells-container {
11916
+ background-color: @white;
11917
+ }
11918
+
11919
+ .actions-menu {
11920
+ background-color: @white;
11921
+ }
11922
+ }
11923
+ }
11924
+ }
11925
+
11926
+ .http-trigger-checkbox {
11927
+ display: flex;
11928
+ }
11929
+
11930
+ .item-row .item-name, .item-row .item-class, .item-row .item-info {
11931
+ padding-left: 0;
11932
+ }
11933
+
11934
+ .title-field-row .name-field, .item-row .item-name, .header-name {
11935
+ margin-right: 16px;
11936
+ width: 15%;
11937
+ }
11938
+
11939
+ .title-field-row .class-field, .item-row .item-class, .header-class {
11940
+ margin-right: 16px;
11941
+ width: 10%;
11942
+ }
11943
+
11944
+ .title-field-row .class-field {
11945
+ width: auto;
11946
+ }
11947
+ }
11948
+
11892
11949
  .ncl-version-monitoring {
11893
11950
  > .igz-scrollable-container {
11894
11951
  padding: 24px 25px 22px 41px;
@@ -12022,59 +12079,6 @@ ncl-navigation-tabs {
12022
12079
  }
12023
12080
  }
12024
12081
 
12025
- .ncl-version-trigger {
12026
- padding: 11px 24px;
12027
-
12028
- .common-table-header {
12029
- border: none;
12030
- padding-left: 24px;
12031
-
12032
- .common-table-cell {
12033
- font-size: 14px;
12034
- font-weight: bold;
12035
- letter-spacing: normal;
12036
- color: @dusk-three;
12037
- height: 46px;
12038
- }
12039
- }
12040
-
12041
- .common-table-body {
12042
- .common-table-row {
12043
- &:not(.read-only):hover {
12044
- .common-table-cells-container {
12045
- background-color: @white;
12046
- }
12047
-
12048
- .actions-menu {
12049
- background-color: @white;
12050
- }
12051
- }
12052
- }
12053
- }
12054
-
12055
- .http-trigger-checkbox {
12056
- display: flex;
12057
- }
12058
-
12059
- .item-row .item-name, .item-row .item-class, .item-row .item-info {
12060
- padding-left: 0;
12061
- }
12062
-
12063
- .title-field-row .name-field, .item-row .item-name, .header-name {
12064
- margin-right: 16px;
12065
- width: 15%;
12066
- }
12067
-
12068
- .title-field-row .class-field, .item-row .item-class, .header-class {
12069
- margin-right: 16px;
12070
- width: 10%;
12071
- }
12072
-
12073
- .title-field-row .class-field {
12074
- width: auto;
12075
- }
12076
- }
12077
-
12078
12082
  .ncl-text-size-dropdown {
12079
12083
  display: flex;
12080
12084
  justify-content: flex-end;
@@ -13894,57 +13898,6 @@ ncl-navigation-tabs {
13894
13898
  }
13895
13899
  }
13896
13900
 
13897
- .ncl-version-configuration-runtime-attributes {
13898
- .row:not(.info-row) {
13899
- display: flex;
13900
- justify-content: space-between;
13901
-
13902
- &:not(:last-child) {
13903
- margin-top: 10px;
13904
- margin-bottom: 25px;
13905
- }
13906
-
13907
- > div {
13908
- flex: 0.65;
13909
-
13910
- &:not(:last-child) {
13911
- margin-right: 16px;
13912
- }
13913
-
13914
- &.arguments-input {
13915
- flex-grow: 2;
13916
- }
13917
- }
13918
- }
13919
-
13920
- .row {
13921
- .runtime {
13922
- height: 36px;
13923
- border-radius: 2px;
13924
- padding: 9px 0 0 14px;
13925
- text-transform: capitalize;
13926
- font-family: @font-family-sans-serif;
13927
- font-size: 14px;
13928
- text-align: left;
13929
- color: @dusk-three;
13930
- }
13931
-
13932
- .textarea-field {
13933
- height: 177px;
13934
- resize: none;
13935
- white-space: pre;
13936
- overflow-x: auto;
13937
- }
13938
- }
13939
-
13940
- .java-attribute {
13941
- .textarea-field {
13942
- height: 70px;
13943
- overflow-y: auto;
13944
- }
13945
- }
13946
- }
13947
-
13948
13901
  @desktop-middle: 1550px;
13949
13902
 
13950
13903
  .ncl-version-configuration-resources {
@@ -14002,6 +13955,57 @@ ncl-navigation-tabs {
14002
13955
  }
14003
13956
  }
14004
13957
 
13958
+ .ncl-version-configuration-runtime-attributes {
13959
+ .row:not(.info-row) {
13960
+ display: flex;
13961
+ justify-content: space-between;
13962
+
13963
+ &:not(:last-child) {
13964
+ margin-top: 10px;
13965
+ margin-bottom: 25px;
13966
+ }
13967
+
13968
+ > div {
13969
+ flex: 0.65;
13970
+
13971
+ &:not(:last-child) {
13972
+ margin-right: 16px;
13973
+ }
13974
+
13975
+ &.arguments-input {
13976
+ flex-grow: 2;
13977
+ }
13978
+ }
13979
+ }
13980
+
13981
+ .row {
13982
+ .runtime {
13983
+ height: 36px;
13984
+ border-radius: 2px;
13985
+ padding: 9px 0 0 14px;
13986
+ text-transform: capitalize;
13987
+ font-family: @font-family-sans-serif;
13988
+ font-size: 14px;
13989
+ text-align: left;
13990
+ color: @dusk-three;
13991
+ }
13992
+
13993
+ .textarea-field {
13994
+ height: 177px;
13995
+ resize: none;
13996
+ white-space: pre;
13997
+ overflow-x: auto;
13998
+ }
13999
+ }
14000
+
14001
+ .java-attribute {
14002
+ .textarea-field {
14003
+ height: 70px;
14004
+ overflow-y: auto;
14005
+ }
14006
+ }
14007
+ }
14008
+
14005
14009
  .ncl-version-configuration-volumes {
14006
14010
  .ncl-version-volume {
14007
14011
  .common-table-header {