iguazio.dashboard-controls 1.2.18 → 1.2.19-vistra-logs

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 (4) hide show
  1. package/dist/js/iguazio.dashboard-controls.js +3655 -3645
  2. package/dist/less/iguazio.dashboard-controls.less +1564 -1564
  3. package/package.json +1 -1
  4. package/src/nuclio/functions/version/version.component.js +18 -6
package/dist/less/iguazio.dashboard-controls.less CHANGED
@@ -3666,149 +3666,6 @@ 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
-
3812
3669
  /*
3813
3670
  == malihu jquery custom scrollbar plugin ==
3814
3671
  Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
@@ -5531,67 +5388,210 @@ yx-axis
5531
5388
 
5532
5389
  /* ---------------------------------------- */
5533
5390
 
5534
- .action-checkbox {
5535
- .action-checkbox-color-set();
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
+ }
5536
5403
 
5537
- line-height: 16px;
5538
- text-align: center;
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
+ }
5539
5411
 
5540
- .check-item {
5541
- font-size: 16px;
5542
- cursor: pointer;
5543
- line-height: 1;
5544
- vertical-align: middle;
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;
5545
5420
 
5546
- &.igz-icon-checkbox-unchecked {
5547
- color: @icon-checkbox-unchecked;
5548
- }
5421
+ background-color: #ffffff;
5422
+ right: auto;
5423
+ position: absolute;
5424
+ z-index: 1;
5425
+ }
5549
5426
 
5550
- &.igz-icon-checkbox-checked {
5551
- color: @icon-checkbox-checked;
5552
- }
5553
- }
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;
5554
5436
  }
5555
- .action-checkbox-all {
5556
- .action-checkbox-all-color-set();
5557
5437
 
5558
- text-align: center;
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;
5446
+ }
5559
5447
 
5560
- .check-item {
5561
- cursor: pointer;
5562
- color: @check-item-color;
5563
- font-size: 16px;
5564
- line-height: 1;
5565
- vertical-align: middle;
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
+ }
5566
5455
 
5567
- &.igz-icon-checkbox-checked {
5568
- color: @check-item-icon-checkbox-checked-color;
5569
- }
5570
- }
5456
+ .ui-layout-column > .ui-splitbar > a:nth-child(2) {
5457
+ margin-top: 0.35rem;
5571
5458
  }
5572
- .igz-action-menu {
5573
- .action-menu-color-set();
5574
- .action-icon-color-set();
5575
5459
 
5576
- opacity: 1;
5577
- position: relative;
5460
+ .ui-layout-row > .ui-splitbar > a:nth-child(2) {
5461
+ margin-left: 0.35rem;
5462
+ }
5578
5463
 
5579
- .menu-button {
5580
- color: @menu-btn-color;
5581
- cursor: pointer;
5582
- font-size: 18px;
5583
- height: 19px;
5584
- text-align: center;
5585
- transition: @igz-basic-transition-color;
5586
- width: 30px;
5587
5464
 
5588
- &.active,
5589
- &:hover {
5590
- color: @menu-btn-active-hover-color;
5591
- }
5592
- }
5465
+ /**
5466
+ * Icons
5467
+ **/
5593
5468
 
5594
- .menu-dropdown {
5469
+ .ui-splitbar-icon {
5470
+ width: 0;
5471
+ height: 0;
5472
+ display: inline-block;
5473
+ }
5474
+
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
+ }
5480
+
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
+ }
5487
+
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;
5492
+
5493
+ }
5494
+
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
+ }
5501
+
5502
+ /* Allow disabling of icons */
5503
+ .no-toggle .ui-splitbar-icon {
5504
+ display: none;
5505
+ }
5506
+
5507
+ @media only screen and (max-device-width: 480px) {
5508
+ .no-mobile-toggle .ui-splitbar-icon {
5509
+ display: none;
5510
+ }
5511
+ }
5512
+
5513
+ @media print {
5514
+ .ui-splitbar {
5515
+ display: none;
5516
+ }
5517
+
5518
+ .stretch {
5519
+ position: relative;
5520
+ }
5521
+
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
+ }
5528
+
5529
+ /* Make sure hidden elements are in fact not rendered. */
5530
+ .ui-layout-hidden {
5531
+ display: none;
5532
+ }
5533
+
5534
+ .action-checkbox {
5535
+ .action-checkbox-color-set();
5536
+
5537
+ line-height: 16px;
5538
+ text-align: center;
5539
+
5540
+ .check-item {
5541
+ font-size: 16px;
5542
+ cursor: pointer;
5543
+ line-height: 1;
5544
+ vertical-align: middle;
5545
+
5546
+ &.igz-icon-checkbox-unchecked {
5547
+ color: @icon-checkbox-unchecked;
5548
+ }
5549
+
5550
+ &.igz-icon-checkbox-checked {
5551
+ color: @icon-checkbox-checked;
5552
+ }
5553
+ }
5554
+ }
5555
+ .action-checkbox-all {
5556
+ .action-checkbox-all-color-set();
5557
+
5558
+ text-align: center;
5559
+
5560
+ .check-item {
5561
+ cursor: pointer;
5562
+ color: @check-item-color;
5563
+ font-size: 16px;
5564
+ line-height: 1;
5565
+ vertical-align: middle;
5566
+
5567
+ &.igz-icon-checkbox-checked {
5568
+ color: @check-item-icon-checkbox-checked-color;
5569
+ }
5570
+ }
5571
+ }
5572
+ .igz-action-menu {
5573
+ .action-menu-color-set();
5574
+ .action-icon-color-set();
5575
+
5576
+ opacity: 1;
5577
+ position: relative;
5578
+
5579
+ .menu-button {
5580
+ color: @menu-btn-color;
5581
+ cursor: pointer;
5582
+ font-size: 18px;
5583
+ height: 19px;
5584
+ text-align: center;
5585
+ transition: @igz-basic-transition-color;
5586
+ width: 30px;
5587
+
5588
+ &.active,
5589
+ &:hover {
5590
+ color: @menu-btn-active-hover-color;
5591
+ }
5592
+ }
5593
+
5594
+ .menu-dropdown {
5595
5595
  visibility: hidden;
5596
5596
  background-color: @menu-dropdown-bg-color;
5597
5597
  border: @menu-dropdown-border;
@@ -6036,860 +6036,860 @@ yx-axis
6036
6036
  }
6037
6037
  }
6038
6038
 
6039
- .date-time-picker {
6040
- .date-time-picker-color-set();
6039
+ .default-dropdown {
6040
+ .default-dropdown-color-set();
6041
+ .severity-icons-color-set();
6041
6042
 
6042
- outline: none;
6043
- display: flex;
6044
- flex-wrap: nowrap;
6045
- width: 100%;
6046
6043
  position: relative;
6044
+ height: 36px;
6047
6045
 
6048
- &:after {
6049
- clear: both;
6050
- }
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;
6051
6058
 
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
- }
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;
6059
6069
 
6060
- .datetimepicker-input {
6061
- font-size: 13px;
6062
- border-radius: 2px 0 0 2px;
6063
- width: 120px;
6064
- padding-left: 14px;
6070
+ > span {
6071
+ overflow: hidden;
6072
+ text-overflow: ellipsis;
6073
+ width: 100%;
6074
+ white-space: nowrap;
6075
+ }
6065
6076
 
6066
- &[disabled] {
6067
- opacity: 1;
6068
- }
6077
+ input.input-name {
6078
+ border: none;
6079
+ background-color: inherit;
6080
+ outline: none;
6069
6081
 
6070
- &:focus, &:active {
6071
- border: @datetimepicker-input-focus-active-border;
6082
+ &[readonly] {
6083
+ cursor: pointer;
6084
+ user-select: none;
6085
+ pointer-events: none;
6086
+ }
6087
+
6088
+ &.non-editable {
6089
+ opacity: 1;
6090
+ }
6091
+ }
6072
6092
  }
6073
6093
 
6074
- &.date-range {
6075
- min-width: 150px;
6094
+ .dropdown-arrow {
6095
+ margin-right: 14px;
6076
6096
 
6077
- &.pick-time {
6078
- width: 285px;
6097
+ span.igz-icon-dropdown {
6098
+ font-size: 11px;
6079
6099
  }
6080
6100
  }
6081
- }
6082
6101
 
6083
- .datetimepicker-open-button {
6084
- border-radius: 0 2px 2px 0;
6085
- width: 42px;
6086
- border-left: none;
6087
- vertical-align: top;
6102
+ &:focus {
6103
+ outline: none;
6088
6104
 
6089
- &:hover {
6090
- box-shadow: @datetimepicker-open-btn-hover-box-shadow;
6105
+ .dropdown-selected-item {
6106
+ font-family: @font-family-sans-serif;
6107
+ }
6091
6108
  }
6092
6109
 
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;
6110
+ &:hover, &:focus {
6111
+ background-color: @default-dropdown-field-hover-focus-bg-color;
6112
+ box-shadow: @default-dropdown-field-hover-focus-box-shadow;
6097
6113
  }
6098
6114
 
6099
- .igz-icon-dropdown {
6100
- font-size: 11px;
6101
- line-height: 1.4;
6102
- vertical-align: bottom;
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;
6103
6119
  }
6104
6120
 
6105
- .revert-icon {
6106
- display: block;
6107
- transform: rotate(180deg);
6108
- line-height: 1;
6121
+ &.placeholder {
6122
+ height: 36px;
6123
+ font-weight: 500;
6124
+
6125
+ .description {
6126
+ display: none;
6127
+ }
6109
6128
  }
6110
- }
6111
6129
 
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;
6130
+ &.disabled {
6131
+ pointer-events: none;
6132
+ background-color: @default-dropdown-field-disabled-bg-color;
6133
+ opacity: 0.6;
6125
6134
 
6126
- &.visible {
6127
- visibility: visible;
6135
+ .dropdown-arrow span.igz-icon-dropdown {
6136
+ opacity: 0.4;
6137
+ }
6128
6138
  }
6129
6139
 
6130
- .options-list {
6131
- list-style: none;
6132
- margin: 0;
6133
- padding: 0;
6134
-
6135
- .options-list-item {
6136
- height: 32px;
6137
- line-height: 32px;
6138
- margin: 0;
6139
- padding: 0 15px;
6140
- float: none;
6140
+ &.readonly {
6141
+ pointer-events: none;
6142
+ background-color: @default-dropdown-field-readonly-bg-color;
6143
+ }
6141
6144
 
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
- }
6145
+ .name {
6146
+ text-transform: capitalize;
6147
+ }
6149
6148
 
6150
- &:hover {
6151
- background-color: @options-list-item-hover-bg-color;
6152
- }
6149
+ .description {
6150
+ display: none;
6151
+ color: @default-dropdown-field-description-color;
6153
6152
 
6154
- &:last-child {
6155
- margin-bottom: 1px;
6156
- }
6153
+ &:before {
6154
+ content: " (";
6157
6155
  }
6158
6156
 
6159
- .separator {
6160
- border-bottom: @options-list-separator-border-bottom;
6161
- margin: 8px 0 7px;
6157
+ &:after {
6158
+ content: ")";
6162
6159
  }
6163
6160
  }
6164
6161
  }
6165
6162
 
6166
- &.disabled:after {
6167
- opacity: 0.5;
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;
6168
6167
  }
6169
6168
 
6170
- .date-time-pickers {
6171
- position: fixed;
6172
- z-index: 1000;
6173
- visibility: hidden;
6174
- width: 279px;
6175
- box-shadow: @date-time-pickers-box-shadow;
6176
- background-color: @date-time-pickers-bg-color;
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;
6172
+ }
6177
6173
 
6178
- &.date-range {
6179
- width: 538px;
6180
- }
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;
6182
+ z-index: 1000;
6183
+ min-width: 100%;
6184
+ margin-top: 2px;
6185
+ margin-bottom: 2px;
6181
6186
 
6182
- &.visible {
6183
- visibility: visible;
6187
+ &.dropdown-overlap {
6188
+ position: fixed;
6189
+ min-width: unset;
6184
6190
  }
6185
6191
 
6186
- .datepicker-wrapper {
6187
- width: 255px;
6188
- display: inline-block;
6189
- padding: 4px 0 0;
6190
-
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;
6200
- }
6201
-
6202
- &.glyphicon-chevron-down {
6203
- top: -1px;
6204
- .igz-icon-down;
6205
- }
6192
+ .list {
6193
+ padding: 0;
6194
+ margin: 0;
6206
6195
 
6207
- &.glyphicon-chevron-left {
6208
- left: -2px;
6209
- .igz-icon-left;
6210
- }
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;
6211
6209
 
6212
- &.glyphicon-chevron-right {
6213
- .igz-icon-right;
6210
+ &.disabled {
6211
+ opacity: 0.6;
6212
+ cursor: not-allowed;
6214
6213
  }
6215
- }
6216
-
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;
6225
6214
 
6226
- &.separator {
6227
- border-bottom: @datepicker-calendar-separator-border-bottom;
6215
+ &:first-child {
6216
+ margin-top: 7px;
6228
6217
  }
6229
6218
 
6230
- .uib-daypicker {
6231
- outline: none;
6219
+ &:last-child {
6220
+ margin-bottom: 8px;
6232
6221
  }
6233
6222
 
6234
- .btn {
6235
- border: none;
6236
- padding: 5px 0;
6237
- outline: none;
6223
+ .list-item-block {
6224
+ display: flex;
6225
+ align-items: center;
6226
+ margin: 0 16px;
6238
6227
 
6239
- &:not(.active) {
6240
- &[disabled] {
6241
- opacity: 1;
6242
- color: @datepicker-calendar-btn-disabled-color;
6228
+ .list-item-label {
6229
+ display: flex;
6230
+ flex-direction: column;
6243
6231
 
6244
- .text-info {
6245
- color: @datepicker-calendar-btn-text-info-disabled-color;
6246
- }
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;
6247
6239
  }
6248
6240
 
6249
- &:not([disabled]) {
6250
- .text-info {
6251
- color: @datepicker-calendar-btn-text-info-color;
6241
+ .description {
6242
+ color: @default-dropdown-container-list-item-description-color;
6243
+ overflow: hidden;
6244
+ text-overflow: ellipsis;
6245
+ white-space: nowrap;
6246
+
6247
+ &:before {
6248
+ content: " (";
6252
6249
  }
6253
6250
 
6254
- .text-muted {
6255
- color: @datepicker-calendar-btn-text-muted-color;
6251
+ &:after {
6252
+ content: ")";
6256
6253
  }
6257
6254
  }
6258
6255
  }
6259
6256
  }
6260
6257
 
6261
- table {
6262
- margin: 0;
6263
- width: 240px;
6264
- outline: none;
6258
+ .selected-item-icon {
6259
+ text-align: right;
6260
+ margin-right: 16px;
6261
+ }
6265
6262
 
6266
- thead tr {
6267
- color: @datepicker-table-header-row-color;
6268
- font-size: 13px;
6269
- font-weight: 400;
6270
- line-height: 2;
6263
+ &:hover, &:focus:not(.disabled) {
6264
+ background-color: @default-dropdown-container-list-item-hover-focus-bg-color;
6265
+ }
6271
6266
 
6272
- &:first-child {
6273
- height: 55px;
6267
+ &.list-item-description {
6268
+ padding: 5px 0;
6269
+ }
6274
6270
 
6275
- button {
6276
- height: 55px;
6277
- min-width: 100% !important;
6278
- }
6271
+ &.selected-item {
6272
+ color: @default-dropdown-container-list-item-selected-item-color;
6273
+ }
6274
+ }
6275
+ }
6279
6276
 
6280
- strong {
6281
- color: @datepicker-table-header-row-color;
6282
- }
6283
- }
6277
+ .add-button-wrapper {
6278
+ padding: 0 7px 7px 7px;
6279
+ line-height: normal;
6284
6280
 
6285
- th {
6286
- button:hover {
6287
- background-color: @datepicker-table-header-row-btn-bg-color;
6288
- }
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;
6289
6287
 
6290
- small {
6291
- font-size: 13px;
6292
- font-weight: 100;
6293
- }
6288
+ &:hover, &:active {
6289
+ color: @add-button-hover-active-color;
6290
+ }
6294
6291
 
6295
- &:first-child, &:last-child {
6296
- button {
6297
- font-size: 12px;
6292
+ &:focus {
6293
+ color: @add-button-focus-color;
6294
+ }
6295
+ }
6296
+ }
6298
6297
 
6299
- &:hover {
6300
- color: @datepicker-table-header-row-btn-hover-bg-color;
6301
- }
6302
- }
6303
- }
6304
- }
6305
- }
6306
-
6307
- tr {
6308
- background-color: @datepicker-table-row-bg-color;
6309
-
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
- }
6322
-
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
- }
6298
+ .transclude-container {
6299
+ border-top: @transclude-container-border-top;
6300
+ height: 48px;
6301
+ padding: 8px 0;
6329
6302
 
6330
- td button {
6331
- background-color: @datepicker-table-header-row-btn-bg-color;
6332
- border-radius: 50%;
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;
6333
6313
 
6334
- &:hover, &.active {
6335
- background-color: @datepicker-table-header-row-btn-hover-active-bg-color;
6336
- }
6314
+ &:hover, &:focus {
6315
+ background-color: @transclude-container-item-hover-focus-bg-color;
6316
+ }
6317
+ }
6318
+ }
6319
+ }
6337
6320
 
6338
- &.btn-info.active {
6339
- background-color: @datepicker-table-header-row-btn-info-active-bg-color;
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;
6340
6328
 
6341
- span {
6342
- color: @datepicker-table-header-row-btn-info-active-color;
6343
- }
6344
- }
6329
+ &:not(.custom-color) {
6330
+ color: @dropdown-icon-not-custom-color;
6331
+ }
6345
6332
 
6346
- .text-muted {
6347
- color: @datepicker-table-header-row-btn-text-muted-color;
6348
- }
6333
+ &.severity-icon {
6334
+ font-size: 19px;
6349
6335
 
6350
- .text-info {
6351
- color: @datepicker-table-header-row-btn-text-info-color;
6352
- }
6353
- }
6354
- }
6355
- }
6336
+ &.critical {
6337
+ color: @severity-icon-critical-color;
6356
6338
  }
6357
6339
 
6358
- .timepicker {
6359
- background-color: @timepicker-bg-color;
6360
- box-shadow: @timepicker-box-shadow;
6340
+ &.major {
6341
+ color: @severity-icon-major-color;
6342
+ }
6361
6343
 
6362
- .uib-timepicker {
6363
- margin: 0 auto;
6344
+ &.warning {
6345
+ color: @severity-icon-warning-color;
6346
+ }
6364
6347
 
6365
- tbody {
6366
- tr {
6367
- background-color: @timepicker-table-row-bg-color;
6348
+ &.info {
6349
+ color: @severity-icon-info-color;
6350
+ }
6351
+ }
6352
+ }
6368
6353
 
6369
- &:first-child, &:last-child {
6370
- a {
6371
- font-size: 12px;
6372
- color: @timepicker-table-row-color;
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
+ }
6373
6365
 
6374
- &:hover {
6375
- color: @timepicker-table-row-hover-color;
6376
- }
6366
+ // Invalid state
6367
+ .default-dropdown.dropdown-input-invalid {
6368
+ .default-dropdown-color-set();
6377
6369
 
6378
- &:focus, &:active {
6379
- outline: none;
6380
- }
6381
- }
6382
- }
6370
+ .default-dropdown-field {
6371
+ background-color: @default-dropdown-invalid-bg-color;
6372
+ border: @default-dropdown-invalid-border;
6373
+ box-shadow: none;
6374
+ }
6375
+ }
6383
6376
 
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
- }
6377
+ // Day of month mode
6378
+ .default-dropdown.day-of-month {
6379
+ .default-dropdown-color-set();
6395
6380
 
6396
- input {
6397
- color: @timepicker-table-cell-color;
6398
- font-weight: 400;
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;
6399
6388
 
6400
- &:focus, &:active {
6401
- border: @timepicker-table-cell-focus-active-border;
6402
- }
6403
- }
6389
+ &:before {
6390
+ content: "";
6391
+ }
6404
6392
 
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
- }
6393
+ &:after {
6394
+ content: "";
6395
+ }
6396
+ }
6411
6397
 
6412
- button {
6413
- color: @timepicker-table-cell-btn-color;
6414
- font-weight: 500;
6415
- margin-left: 6px;
6398
+ &.placeholder {
6399
+ .description {
6400
+ display: none;
6401
+ }
6402
+ }
6403
+ }
6416
6404
 
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
- }
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;
6422
6415
 
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
- }
6416
+ &:before {
6417
+ content: "";
6418
+ }
6431
6419
 
6432
- a.disabled {
6433
- opacity: 1;
6434
- }
6435
- }
6436
- }
6420
+ &:after {
6421
+ content: "";
6437
6422
  }
6438
6423
  }
6424
+
6425
+ &:hover, &:focus {
6426
+ background-color: @default-dropdown-day-of-month-list-item-hover-focus-bg-color;
6427
+ }
6439
6428
  }
6440
6429
  }
6430
+ }
6431
+ }
6441
6432
 
6442
- .buttons-block {
6443
- border-top: @buttons-block-border-top;
6444
- padding: 8px 24px;
6445
- text-align: right;
6433
+ // Selected item description shown
6434
+ .default-dropdown.use-description {
6435
+ .default-dropdown-field {
6436
+ .description {
6437
+ display: inline;
6446
6438
 
6447
- &.pick-time {
6448
- margin-top: -3px;
6439
+ &:before {
6440
+ content: "";
6449
6441
  }
6450
6442
 
6451
- button:not(:first-child) {
6452
- margin-left: 8px;
6443
+ &:after {
6444
+ content: "";
6453
6445
  }
6454
6446
  }
6455
6447
  }
6456
6448
  }
6457
6449
 
6458
- .default-dropdown {
6459
- .default-dropdown-color-set();
6460
- .severity-icons-color-set();
6450
+ .default-dropdown.show-description {
6451
+ .default-dropdown-field {
6452
+ .description {
6453
+ display: inline;
6461
6454
 
6462
- position: relative;
6463
- height: 36px;
6455
+ &:before {
6456
+ content: " (";
6457
+ }
6464
6458
 
6465
- .default-dropdown-field {
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;
6477
-
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;
6488
-
6489
- > span {
6490
- overflow: hidden;
6491
- text-overflow: ellipsis;
6492
- width: 100%;
6493
- white-space: nowrap;
6459
+ &:after {
6460
+ content: ")";
6494
6461
  }
6462
+ }
6463
+ }
6464
+ }
6495
6465
 
6496
- input.input-name {
6497
- border: none;
6498
- background-color: inherit;
6499
- outline: none;
6500
-
6501
- &[readonly] {
6502
- cursor: pointer;
6503
- user-select: none;
6504
- pointer-events: none;
6505
- }
6466
+ .no-selected-option-style {
6467
+ .default-dropdown {
6468
+ .default-dropdown-field {
6469
+ border: none;
6506
6470
 
6507
- &.non-editable {
6508
- opacity: 1;
6509
- }
6471
+ &:active, &:focus, &:hover {
6472
+ background-color: unset;
6473
+ box-shadow: none;
6510
6474
  }
6511
6475
  }
6476
+ }
6477
+ }
6512
6478
 
6513
- .dropdown-arrow {
6514
- margin-right: 14px;
6479
+ .date-time-picker {
6480
+ .date-time-picker-color-set();
6515
6481
 
6516
- span.igz-icon-dropdown {
6517
- font-size: 11px;
6518
- }
6519
- }
6482
+ outline: none;
6483
+ display: flex;
6484
+ flex-wrap: nowrap;
6485
+ width: 100%;
6486
+ position: relative;
6520
6487
 
6521
- &:focus {
6522
- outline: none;
6488
+ &:after {
6489
+ clear: both;
6490
+ }
6523
6491
 
6524
- .dropdown-selected-item {
6525
- font-family: @font-family-sans-serif;
6526
- }
6527
- }
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
+ }
6528
6499
 
6529
- &:hover, &:focus {
6530
- background-color: @default-dropdown-field-hover-focus-bg-color;
6531
- box-shadow: @default-dropdown-field-hover-focus-box-shadow;
6500
+ .datetimepicker-input {
6501
+ font-size: 13px;
6502
+ border-radius: 2px 0 0 2px;
6503
+ width: 120px;
6504
+ padding-left: 14px;
6505
+
6506
+ &[disabled] {
6507
+ opacity: 1;
6532
6508
  }
6533
6509
 
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;
6510
+ &:focus, &:active {
6511
+ border: @datetimepicker-input-focus-active-border;
6538
6512
  }
6539
6513
 
6540
- &.placeholder {
6541
- height: 36px;
6542
- font-weight: 500;
6514
+ &.date-range {
6515
+ min-width: 150px;
6543
6516
 
6544
- .description {
6545
- display: none;
6517
+ &.pick-time {
6518
+ width: 285px;
6546
6519
  }
6547
6520
  }
6521
+ }
6548
6522
 
6549
- &.disabled {
6550
- pointer-events: none;
6551
- background-color: @default-dropdown-field-disabled-bg-color;
6552
- opacity: 0.6;
6523
+ .datetimepicker-open-button {
6524
+ border-radius: 0 2px 2px 0;
6525
+ width: 42px;
6526
+ border-left: none;
6527
+ vertical-align: top;
6553
6528
 
6554
- .dropdown-arrow span.igz-icon-dropdown {
6555
- opacity: 0.4;
6556
- }
6529
+ &:hover {
6530
+ box-shadow: @datetimepicker-open-btn-hover-box-shadow;
6557
6531
  }
6558
6532
 
6559
- &.readonly {
6560
- pointer-events: none;
6561
- background-color: @default-dropdown-field-readonly-bg-color;
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;
6562
6537
  }
6563
6538
 
6564
- .name {
6565
- text-transform: capitalize;
6539
+ .igz-icon-dropdown {
6540
+ font-size: 11px;
6541
+ line-height: 1.4;
6542
+ vertical-align: bottom;
6566
6543
  }
6567
6544
 
6568
- .description {
6569
- display: none;
6570
- color: @default-dropdown-field-description-color;
6571
-
6572
- &:before {
6573
- content: " (";
6574
- }
6575
-
6576
- &:after {
6577
- content: ")";
6578
- }
6545
+ .revert-icon {
6546
+ display: block;
6547
+ transform: rotate(180deg);
6548
+ line-height: 1;
6579
6549
  }
6580
6550
  }
6581
6551
 
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;
6586
- }
6587
-
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;
6591
- }
6592
-
6593
- .default-dropdown-container {
6594
- background-color: @default-dropdown-container-bg-color;
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;
6595
6563
  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;
6601
- z-index: 1000;
6602
- min-width: 100%;
6603
- margin-top: 2px;
6604
- margin-bottom: 2px;
6564
+ box-shadow: @options-dropdown-box-shadow;
6605
6565
 
6606
- &.dropdown-overlap {
6607
- position: fixed;
6608
- min-width: unset;
6566
+ &.visible {
6567
+ visibility: visible;
6609
6568
  }
6610
6569
 
6611
- .list {
6612
- padding: 0;
6570
+ .options-list {
6571
+ list-style: none;
6613
6572
  margin: 0;
6573
+ padding: 0;
6614
6574
 
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;
6575
+ .options-list-item {
6576
+ height: 32px;
6577
+ line-height: 32px;
6621
6578
  margin: 0;
6622
- outline: none;
6623
- width: 100%;
6624
- display: flex;
6625
- min-height: 32px;
6626
- align-items: center;
6627
- justify-content: space-between;
6579
+ padding: 0 15px;
6580
+ float: none;
6628
6581
 
6629
- &.disabled {
6630
- opacity: 0.6;
6631
- cursor: not-allowed;
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;
6632
6588
  }
6633
6589
 
6634
- &:first-child {
6635
- margin-top: 7px;
6590
+ &:hover {
6591
+ background-color: @options-list-item-hover-bg-color;
6636
6592
  }
6637
6593
 
6638
6594
  &:last-child {
6639
- margin-bottom: 8px;
6595
+ margin-bottom: 1px;
6640
6596
  }
6597
+ }
6641
6598
 
6642
- .list-item-block {
6643
- display: flex;
6644
- align-items: center;
6645
- margin: 0 16px;
6646
-
6647
- .list-item-label {
6648
- display: flex;
6649
- flex-direction: column;
6599
+ .separator {
6600
+ border-bottom: @options-list-separator-border-bottom;
6601
+ margin: 8px 0 7px;
6602
+ }
6603
+ }
6604
+ }
6650
6605
 
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;
6658
- }
6606
+ &.disabled:after {
6607
+ opacity: 0.5;
6608
+ }
6659
6609
 
6660
- .description {
6661
- color: @default-dropdown-container-list-item-description-color;
6662
- overflow: hidden;
6663
- text-overflow: ellipsis;
6664
- white-space: nowrap;
6610
+ .date-time-pickers {
6611
+ position: fixed;
6612
+ 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;
6665
6617
 
6666
- &:before {
6667
- content: " (";
6668
- }
6618
+ &.date-range {
6619
+ width: 538px;
6620
+ }
6669
6621
 
6670
- &:after {
6671
- content: ")";
6672
- }
6673
- }
6674
- }
6675
- }
6622
+ &.visible {
6623
+ visibility: visible;
6624
+ }
6676
6625
 
6677
- .selected-item-icon {
6678
- text-align: right;
6679
- margin-right: 16px;
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;
6680
6640
  }
6681
6641
 
6682
- &:hover, &:focus:not(.disabled) {
6683
- background-color: @default-dropdown-container-list-item-hover-focus-bg-color;
6642
+ &.glyphicon-chevron-down {
6643
+ top: -1px;
6644
+ .igz-icon-down;
6684
6645
  }
6685
6646
 
6686
- &.list-item-description {
6687
- padding: 5px 0;
6647
+ &.glyphicon-chevron-left {
6648
+ left: -2px;
6649
+ .igz-icon-left;
6688
6650
  }
6689
6651
 
6690
- &.selected-item {
6691
- color: @default-dropdown-container-list-item-selected-item-color;
6652
+ &.glyphicon-chevron-right {
6653
+ .igz-icon-right;
6692
6654
  }
6693
6655
  }
6694
- }
6695
6656
 
6696
- .add-button-wrapper {
6697
- padding: 0 7px 7px 7px;
6698
- line-height: normal;
6699
-
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;
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;
6706
6665
 
6707
- &:hover, &:active {
6708
- color: @add-button-hover-active-color;
6666
+ &.separator {
6667
+ border-bottom: @datepicker-calendar-separator-border-bottom;
6709
6668
  }
6710
6669
 
6711
- &:focus {
6712
- color: @add-button-focus-color;
6670
+ .uib-daypicker {
6671
+ outline: none;
6713
6672
  }
6714
- }
6715
- }
6716
6673
 
6717
- .transclude-container {
6718
- border-top: @transclude-container-border-top;
6719
- height: 48px;
6720
- padding: 8px 0;
6674
+ .btn {
6675
+ border: none;
6676
+ padding: 5px 0;
6677
+ outline: none;
6721
6678
 
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;
6679
+ &:not(.active) {
6680
+ &[disabled] {
6681
+ opacity: 1;
6682
+ color: @datepicker-calendar-btn-disabled-color;
6732
6683
 
6733
- &:hover, &:focus {
6734
- background-color: @transclude-container-item-hover-focus-bg-color;
6684
+ .text-info {
6685
+ color: @datepicker-calendar-btn-text-info-disabled-color;
6686
+ }
6687
+ }
6688
+
6689
+ &:not([disabled]) {
6690
+ .text-info {
6691
+ color: @datepicker-calendar-btn-text-info-color;
6692
+ }
6693
+
6694
+ .text-muted {
6695
+ color: @datepicker-calendar-btn-text-muted-color;
6696
+ }
6697
+ }
6698
+ }
6735
6699
  }
6736
- }
6737
- }
6738
- }
6739
6700
 
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;
6701
+ table {
6702
+ margin: 0;
6703
+ width: 240px;
6704
+ outline: none;
6747
6705
 
6748
- &:not(.custom-color) {
6749
- color: @dropdown-icon-not-custom-color;
6750
- }
6706
+ thead tr {
6707
+ color: @datepicker-table-header-row-color;
6708
+ font-size: 13px;
6709
+ font-weight: 400;
6710
+ line-height: 2;
6751
6711
 
6752
- &.severity-icon {
6753
- font-size: 19px;
6712
+ &:first-child {
6713
+ height: 55px;
6754
6714
 
6755
- &.critical {
6756
- color: @severity-icon-critical-color;
6757
- }
6715
+ button {
6716
+ height: 55px;
6717
+ min-width: 100% !important;
6718
+ }
6758
6719
 
6759
- &.major {
6760
- color: @severity-icon-major-color;
6761
- }
6720
+ strong {
6721
+ color: @datepicker-table-header-row-color;
6722
+ }
6723
+ }
6762
6724
 
6763
- &.warning {
6764
- color: @severity-icon-warning-color;
6765
- }
6725
+ th {
6726
+ button:hover {
6727
+ background-color: @datepicker-table-header-row-btn-bg-color;
6728
+ }
6766
6729
 
6767
- &.info {
6768
- color: @severity-icon-info-color;
6769
- }
6770
- }
6771
- }
6730
+ small {
6731
+ font-size: 13px;
6732
+ font-weight: 100;
6733
+ }
6772
6734
 
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
- }
6735
+ &:first-child, &:last-child {
6736
+ button {
6737
+ font-size: 12px;
6784
6738
 
6785
- // Invalid state
6786
- .default-dropdown.dropdown-input-invalid {
6787
- .default-dropdown-color-set();
6739
+ &:hover {
6740
+ color: @datepicker-table-header-row-btn-hover-bg-color;
6741
+ }
6742
+ }
6743
+ }
6744
+ }
6745
+ }
6788
6746
 
6789
- .default-dropdown-field {
6790
- background-color: @default-dropdown-invalid-bg-color;
6791
- border: @default-dropdown-invalid-border;
6792
- box-shadow: none;
6793
- }
6794
- }
6747
+ tr {
6748
+ background-color: @datepicker-table-row-bg-color;
6795
6749
 
6796
- // Day of month mode
6797
- .default-dropdown.day-of-month {
6798
- .default-dropdown-color-set();
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
+ }
6799
6762
 
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;
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
+ }
6807
6769
 
6808
- &:before {
6809
- content: "";
6810
- }
6770
+ td button {
6771
+ background-color: @datepicker-table-header-row-btn-bg-color;
6772
+ border-radius: 50%;
6811
6773
 
6812
- &:after {
6813
- content: "";
6814
- }
6815
- }
6774
+ &:hover, &.active {
6775
+ background-color: @datepicker-table-header-row-btn-hover-active-bg-color;
6776
+ }
6816
6777
 
6817
- &.placeholder {
6818
- .description {
6819
- display: none;
6778
+ &.btn-info.active {
6779
+ background-color: @datepicker-table-header-row-btn-info-active-bg-color;
6780
+
6781
+ span {
6782
+ color: @datepicker-table-header-row-btn-info-active-color;
6783
+ }
6784
+ }
6785
+
6786
+ .text-muted {
6787
+ color: @datepicker-table-header-row-btn-text-muted-color;
6788
+ }
6789
+
6790
+ .text-info {
6791
+ color: @datepicker-table-header-row-btn-text-info-color;
6792
+ }
6793
+ }
6794
+ }
6795
+ }
6820
6796
  }
6821
- }
6822
- }
6823
6797
 
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;
6798
+ .timepicker {
6799
+ background-color: @timepicker-bg-color;
6800
+ box-shadow: @timepicker-box-shadow;
6801
+
6802
+ .uib-timepicker {
6803
+ margin: 0 auto;
6804
+
6805
+ tbody {
6806
+ tr {
6807
+ background-color: @timepicker-table-row-bg-color;
6808
+
6809
+ &:first-child, &:last-child {
6810
+ a {
6811
+ font-size: 12px;
6812
+ color: @timepicker-table-row-color;
6813
+
6814
+ &:hover {
6815
+ color: @timepicker-table-row-hover-color;
6816
+ }
6817
+
6818
+ &:focus, &:active {
6819
+ outline: none;
6820
+ }
6821
+ }
6822
+ }
6823
+
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
+ }
6835
+
6836
+ input {
6837
+ color: @timepicker-table-cell-color;
6838
+ font-weight: 400;
6834
6839
 
6835
- &:before {
6836
- content: "";
6837
- }
6840
+ &:focus, &:active {
6841
+ border: @timepicker-table-cell-focus-active-border;
6842
+ }
6843
+ }
6838
6844
 
6839
- &:after {
6840
- content: "";
6841
- }
6842
- }
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
+ }
6843
6851
 
6844
- &:hover, &:focus {
6845
- background-color: @default-dropdown-day-of-month-list-item-hover-focus-bg-color;
6846
- }
6847
- }
6848
- }
6849
- }
6850
- }
6852
+ button {
6853
+ color: @timepicker-table-cell-btn-color;
6854
+ font-weight: 500;
6855
+ margin-left: 6px;
6851
6856
 
6852
- // Selected item description shown
6853
- .default-dropdown.use-description {
6854
- .default-dropdown-field {
6855
- .description {
6856
- display: inline;
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
+ }
6857
6862
 
6858
- &:before {
6859
- content: "";
6860
- }
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
+ }
6861
6871
 
6862
- &:after {
6863
- content: "";
6872
+ a.disabled {
6873
+ opacity: 1;
6874
+ }
6875
+ }
6876
+ }
6877
+ }
6878
+ }
6864
6879
  }
6865
6880
  }
6866
- }
6867
- }
6868
-
6869
- .default-dropdown.show-description {
6870
- .default-dropdown-field {
6871
- .description {
6872
- display: inline;
6873
6881
 
6874
- &:before {
6875
- content: " (";
6876
- }
6882
+ .buttons-block {
6883
+ border-top: @buttons-block-border-top;
6884
+ padding: 8px 24px;
6885
+ text-align: right;
6877
6886
 
6878
- &:after {
6879
- content: ")";
6887
+ &.pick-time {
6888
+ margin-top: -3px;
6880
6889
  }
6881
- }
6882
- }
6883
- }
6884
-
6885
- .no-selected-option-style {
6886
- .default-dropdown {
6887
- .default-dropdown-field {
6888
- border: none;
6889
6890
 
6890
- &:active, &:focus, &:hover {
6891
- background-color: unset;
6892
- box-shadow: none;
6891
+ button:not(:first-child) {
6892
+ margin-left: 8px;
6893
6893
  }
6894
6894
  }
6895
6895
  }
@@ -6950,54 +6950,250 @@ yx-axis
6950
6950
  height: 20px;
6951
6951
  }
6952
6952
 
6953
- .loading-error {
6953
+ .loading-error {
6954
+
6955
+ .loading-error-title, .loading-error-message {
6956
+ text-overflow: ellipsis;
6957
+ overflow: hidden;
6958
+ padding: 0;
6959
+ }
6960
+
6961
+ .loading-error-title {
6962
+ padding-top: 8px;
6963
+ }
6964
+
6965
+ .refresh-page {
6966
+ overflow: hidden;
6967
+ text-overflow: ellipsis;
6968
+ padding: 0;
6969
+ }
6970
+ }
6971
+ }
6972
+ }
6973
+
6974
+ .control-panel-log-row {
6975
+ .control-panel-log-table-row-color-set();
6976
+
6977
+ .log-entry {
6978
+ .log-entry-time {
6979
+ color: @log-entry-time-color;
6980
+ }
6981
+
6982
+ .log-entry-level-debug {
6983
+ color: @log-entry-level-debug-color;
6984
+ }
6985
+
6986
+ .log-entry-level-info {
6987
+ color: @log-entry-level-info-color;
6988
+ }
6989
+
6990
+ .log-entry-level-warn, .log-entry-level-warning {
6991
+ color: @log-entry-level-warn-color;
6992
+ }
6993
+
6994
+ .log-entry-level-error {
6995
+ color: @log-entry-level-error-color;
6996
+ }
6997
+
6998
+ .log-entry-message {
6999
+ line-break: anywhere;
7000
+ font-weight: 600;
7001
+ }
7002
+ }
7003
+ }
7004
+
7005
+ .igz-multiple-checkboxes {
7006
+ .multiple-checkboxes-color-set();
7007
+
7008
+ .igz-multiple-checkboxes-list {
7009
+ list-style-type: none;
7010
+ -webkit-margin-before: 0;
7011
+ -webkit-margin-after: 0;
7012
+ -webkit-padding-start: 0;
7013
+ margin: 0;
7014
+ padding: 0;
7015
+
7016
+ .multiple-checkboxes-option {
7017
+ display: flex;
7018
+ margin: 5px 0;
7019
+
7020
+ .more-info-wrapper {
7021
+ height: auto;
7022
+
7023
+ .igz-icon-help-round {
7024
+ font-size: 14px;
7025
+ }
7026
+ }
7027
+ }
7028
+ }
7029
+
7030
+ .checkboxes-dropdown-field {
7031
+ border: @checkboxes-dropdown-field-border;
7032
+ border-radius: 2px;
7033
+ height: 100%;
7034
+ color: @checkboxes-dropdown-field-border;
7035
+ cursor: pointer;
7036
+ outline: none;
7037
+ font-family: @font-family-sans-serif;
7038
+ margin-top: 0;
7039
+ display: flex;
7040
+ align-items: center;
7041
+ justify-content: space-between;
7042
+
7043
+ &.opened {
7044
+ background-color: @checkboxes-dropdown-field-opened-bg-color;
7045
+ }
7046
+
7047
+ .checkboxes-dropdown-title {
7048
+ font-size: 12px;
7049
+ font-weight: 500;
7050
+ text-transform: uppercase;
7051
+ }
7052
+ }
7053
+
7054
+ .checkboxes-dropdown-container {
7055
+ background-color: @checkboxes-dropdown-container-bg-color;
7056
+ border-radius: 2px;
7057
+ box-shadow: @checkboxes-dropdown-container-box-shadow;
7058
+ color: @checkboxes-dropdown-container-color;
7059
+ overflow: hidden;
7060
+ position: absolute;
7061
+ z-index: 1000;
7062
+ min-width: 236px;
7063
+ height: 100%;
7064
+ margin-top: 2px;
7065
+ margin-bottom: 2px;
7066
+ padding: 8px 0;
7067
+
7068
+ .checkboxes-dropdown-scrollbar-container {
7069
+ padding-bottom: 36px;
7070
+ height: 100%;
7071
+
7072
+ .search-input-wrapper {
7073
+ .checkboxes-search-input {
7074
+ .validating-input-field {
7075
+ height: 32px;
7076
+ width: 100%;
7077
+ color: @checkboxes-search-input-color;
7078
+ outline: none;
7079
+ border: @checkboxes-search-input-border;
7080
+ border-radius: 2px;
7081
+ margin-bottom: 12px;
7082
+
7083
+ &.active {
7084
+ color: @dusk-three;
7085
+ border: @checkboxes-search-input-active-border;
7086
+ }
7087
+
7088
+ .input-field {
7089
+ height: 30px;
7090
+ border: none;
7091
+ padding: 0 9px;
7092
+
7093
+ &:focus {
7094
+ border: none;
7095
+ }
7096
+ }
7097
+
7098
+ .input-icon {
7099
+ left: unset;
7100
+ right: 8px;
7101
+ top: 0;
7102
+ }
7103
+ }
7104
+ }
7105
+ }
7106
+
7107
+ .checkboxes-groups-wrapper {
7108
+ .checkboxes-groups {
7109
+ .checkboxes-list {
7110
+ padding: 0;
7111
+ margin: 0;
7112
+ }
7113
+ }
6954
7114
 
6955
- .loading-error-title, .loading-error-message {
6956
- text-overflow: ellipsis;
6957
- overflow: hidden;
6958
- padding: 0;
7115
+ .checkboxes-groups:not(:first-child) {
7116
+ padding-top: 10px;
7117
+ }
7118
+
7119
+ .checkboxes-groups:not(:last-child) {
7120
+ padding-bottom: 10px;
7121
+ border-bottom: @checkboxes-group-border-bottom;
7122
+ }
6959
7123
  }
6960
7124
 
6961
- .loading-error-title {
6962
- padding-top: 8px;
7125
+ .search-input-wrapper,
7126
+ .checkboxes-header,
7127
+ .checkboxes-groups,
7128
+ .checkboxes-regular-list {
7129
+ padding: 0 8px;
6963
7130
  }
7131
+ }
6964
7132
 
6965
- .refresh-page {
6966
- overflow: hidden;
6967
- text-overflow: ellipsis;
6968
- padding: 0;
7133
+ .checkboxes-bottom-bar {
7134
+ display: flex;
7135
+ position: sticky;
7136
+ justify-content: flex-end;
7137
+ padding: 4px 8px 0;
7138
+ bottom: 0;
7139
+
7140
+ button:not(:first-child) {
7141
+ margin-left: 8px;
6969
7142
  }
6970
7143
  }
6971
7144
  }
6972
- }
6973
7145
 
6974
- .control-panel-log-row {
6975
- .control-panel-log-table-row-color-set();
7146
+ .select-all-option {
7147
+ color: @master-checkbox-color;
7148
+ }
6976
7149
 
6977
- .log-entry {
6978
- .log-entry-time {
6979
- color: @log-entry-time-color;
6980
- }
7150
+ .group-title {
7151
+ display: flex;
7152
+ justify-content: space-between;
6981
7153
 
6982
- .log-entry-level-debug {
6983
- color: @log-entry-level-debug-color;
7154
+ .checkboxes-group-name {
7155
+ width: 100%;
7156
+ margin-left: 9px;
7157
+ color: @checkboxes-group-name-color;
7158
+ font-weight: 500;
7159
+ text-align: left;
6984
7160
  }
6985
7161
 
6986
- .log-entry-level-info {
6987
- color: @log-entry-level-info-color;
7162
+ .checkboxes-add-item {
7163
+ .checkboxes-add-item-button {
7164
+ font-size: 12px;
7165
+ font-weight: 500;
7166
+ display: inline-block;
7167
+ vertical-align: top;
7168
+ position: relative;
7169
+ color: @checkboxes-add-item-btn-color;
7170
+ text-transform: uppercase;
7171
+ line-height: initial;
7172
+ background-color: transparent;
7173
+ border: none;
7174
+ outline: none;
7175
+ }
6988
7176
  }
7177
+ }
6989
7178
 
6990
- .log-entry-level-warn, .log-entry-level-warning {
6991
- color: @log-entry-level-warn-color;
6992
- }
7179
+ .master-checkbox {
7180
+ cursor: pointer;
7181
+ color: @master-checkbox-color;
7182
+ font-size: 16px;
7183
+ line-height: 1;
7184
+ vertical-align: middle;
6993
7185
 
6994
- .log-entry-level-error {
6995
- color: @log-entry-level-error-color;
7186
+ &.igz-icon-checkbox-checked {
7187
+ color: @master-checkbox-checked-color;
6996
7188
  }
7189
+ }
6997
7190
 
6998
- .log-entry-message {
6999
- line-break: anywhere;
7000
- font-weight: 600;
7191
+ .checkboxes-list {
7192
+ list-style-type: none;
7193
+
7194
+ .multiple-checkboxes-option {
7195
+ color: @checkboxes-list-option-color;
7196
+ margin: 5px 0;
7001
7197
  }
7002
7198
  }
7003
7199
  }
@@ -7134,225 +7330,68 @@ yx-axis
7134
7330
  &.left {
7135
7331
  top: -30px;
7136
7332
 
7137
- &::before {
7138
- top: 7px;
7139
- }
7140
- }
7141
-
7142
- &.right {
7143
- left: 26px;
7144
-
7145
- &::before {
7146
- .triangle-arrow(right; @row-description-triangle-color; 8px; 10px);
7147
-
7148
- left: -8px;
7149
- }
7150
- }
7151
-
7152
- &.left {
7153
- left: -250px;
7154
-
7155
- &::before {
7156
- .triangle-arrow(left; @row-description-triangle-color; 8px; 10px);
7157
-
7158
- right: -8px;
7159
- }
7160
- }
7161
- }
7162
- }
7163
-
7164
- .igz-multiple-checkboxes {
7165
- .multiple-checkboxes-color-set();
7166
-
7167
- .igz-multiple-checkboxes-list {
7168
- list-style-type: none;
7169
- -webkit-margin-before: 0;
7170
- -webkit-margin-after: 0;
7171
- -webkit-padding-start: 0;
7172
- margin: 0;
7173
- padding: 0;
7174
-
7175
- .multiple-checkboxes-option {
7176
- display: flex;
7177
- margin: 5px 0;
7178
-
7179
- .more-info-wrapper {
7180
- height: auto;
7181
-
7182
- .igz-icon-help-round {
7183
- font-size: 14px;
7184
- }
7185
- }
7186
- }
7187
- }
7188
-
7189
- .checkboxes-dropdown-field {
7190
- border: @checkboxes-dropdown-field-border;
7191
- border-radius: 2px;
7192
- height: 100%;
7193
- color: @checkboxes-dropdown-field-border;
7194
- cursor: pointer;
7195
- outline: none;
7196
- font-family: @font-family-sans-serif;
7197
- margin-top: 0;
7198
- display: flex;
7199
- align-items: center;
7200
- justify-content: space-between;
7201
-
7202
- &.opened {
7203
- background-color: @checkboxes-dropdown-field-opened-bg-color;
7204
- }
7205
-
7206
- .checkboxes-dropdown-title {
7207
- font-size: 12px;
7208
- font-weight: 500;
7209
- text-transform: uppercase;
7210
- }
7211
- }
7212
-
7213
- .checkboxes-dropdown-container {
7214
- background-color: @checkboxes-dropdown-container-bg-color;
7215
- border-radius: 2px;
7216
- box-shadow: @checkboxes-dropdown-container-box-shadow;
7217
- color: @checkboxes-dropdown-container-color;
7218
- overflow: hidden;
7219
- position: absolute;
7220
- z-index: 1000;
7221
- min-width: 236px;
7222
- height: 100%;
7223
- margin-top: 2px;
7224
- margin-bottom: 2px;
7225
- padding: 8px 0;
7226
-
7227
- .checkboxes-dropdown-scrollbar-container {
7228
- padding-bottom: 36px;
7229
- height: 100%;
7230
-
7231
- .search-input-wrapper {
7232
- .checkboxes-search-input {
7233
- .validating-input-field {
7234
- height: 32px;
7235
- width: 100%;
7236
- color: @checkboxes-search-input-color;
7237
- outline: none;
7238
- border: @checkboxes-search-input-border;
7239
- border-radius: 2px;
7240
- margin-bottom: 12px;
7241
-
7242
- &.active {
7243
- color: @dusk-three;
7244
- border: @checkboxes-search-input-active-border;
7245
- }
7246
-
7247
- .input-field {
7248
- height: 30px;
7249
- border: none;
7250
- padding: 0 9px;
7251
-
7252
- &:focus {
7253
- border: none;
7254
- }
7255
- }
7256
-
7257
- .input-icon {
7258
- left: unset;
7259
- right: 8px;
7260
- top: 0;
7261
- }
7262
- }
7263
- }
7264
- }
7265
-
7266
- .checkboxes-groups-wrapper {
7267
- .checkboxes-groups {
7268
- .checkboxes-list {
7269
- padding: 0;
7270
- margin: 0;
7271
- }
7272
- }
7273
-
7274
- .checkboxes-groups:not(:first-child) {
7275
- padding-top: 10px;
7276
- }
7277
-
7278
- .checkboxes-groups:not(:last-child) {
7279
- padding-bottom: 10px;
7280
- border-bottom: @checkboxes-group-border-bottom;
7281
- }
7282
- }
7283
-
7284
- .search-input-wrapper,
7285
- .checkboxes-header,
7286
- .checkboxes-groups,
7287
- .checkboxes-regular-list {
7288
- padding: 0 8px;
7333
+ &::before {
7334
+ top: 7px;
7289
7335
  }
7290
7336
  }
7291
7337
 
7292
- .checkboxes-bottom-bar {
7293
- display: flex;
7294
- position: sticky;
7295
- justify-content: flex-end;
7296
- padding: 4px 8px 0;
7297
- bottom: 0;
7338
+ &.right {
7339
+ left: 26px;
7298
7340
 
7299
- button:not(:first-child) {
7300
- margin-left: 8px;
7341
+ &::before {
7342
+ .triangle-arrow(right; @row-description-triangle-color; 8px; 10px);
7343
+
7344
+ left: -8px;
7301
7345
  }
7302
7346
  }
7303
- }
7304
-
7305
- .select-all-option {
7306
- color: @master-checkbox-color;
7307
- }
7308
7347
 
7309
- .group-title {
7310
- display: flex;
7311
- justify-content: space-between;
7348
+ &.left {
7349
+ left: -250px;
7312
7350
 
7313
- .checkboxes-group-name {
7314
- width: 100%;
7315
- margin-left: 9px;
7316
- color: @checkboxes-group-name-color;
7317
- font-weight: 500;
7318
- text-align: left;
7319
- }
7351
+ &::before {
7352
+ .triangle-arrow(left; @row-description-triangle-color; 8px; 10px);
7320
7353
 
7321
- .checkboxes-add-item {
7322
- .checkboxes-add-item-button {
7323
- font-size: 12px;
7324
- font-weight: 500;
7325
- display: inline-block;
7326
- vertical-align: top;
7327
- position: relative;
7328
- color: @checkboxes-add-item-btn-color;
7329
- text-transform: uppercase;
7330
- line-height: initial;
7331
- background-color: transparent;
7332
- border: none;
7333
- outline: none;
7354
+ right: -8px;
7334
7355
  }
7335
7356
  }
7336
7357
  }
7358
+ }
7337
7359
 
7338
- .master-checkbox {
7360
+ .igz-navigation-tabs {
7361
+ .navigation-tabs-color-set();
7362
+
7363
+ background-color: @navigation-tabs-bg-color;
7364
+ height: 56px;
7365
+ padding-top: 7px;
7366
+
7367
+ .navigation-tab {
7368
+ float: left;
7369
+ height: 32px;
7370
+ padding: 15px 24px 0;
7371
+ font-family: @font-family-sans-serif;
7372
+ color: @navigation-tab-color;
7373
+ font-size: 14px;
7374
+ text-align: center;
7339
7375
  cursor: pointer;
7340
- color: @master-checkbox-color;
7341
- font-size: 16px;
7342
- line-height: 1;
7343
- vertical-align: middle;
7376
+ border-bottom: @navigation-tab-border-bottom;
7377
+ box-sizing: content-box;
7344
7378
 
7345
- &.igz-icon-checkbox-checked {
7346
- color: @master-checkbox-checked-color;
7379
+ &.active, &.active:hover {
7380
+ background-color: @navigation-tab-active-hover-bg-color;
7381
+ color: @navigation-tab-active-hover-color;
7382
+ border-bottom: @navigation-tab-active-hover-border-bottom;
7347
7383
  }
7348
- }
7349
7384
 
7350
- .checkboxes-list {
7351
- list-style-type: none;
7385
+ &:hover {
7386
+ background-color: @navigation-tab-hover-bg-color;
7387
+ }
7352
7388
 
7353
- .multiple-checkboxes-option {
7354
- color: @checkboxes-list-option-color;
7355
- margin: 5px 0;
7389
+ &.active {
7390
+ background-color: @navigation-tab-active-bg-color;
7391
+ }
7392
+
7393
+ @media screen and (max-width: 940px) {
7394
+ padding: 15px 12px 0;
7356
7395
  }
7357
7396
  }
7358
7397
  }
@@ -7510,45 +7549,6 @@ yx-axis
7510
7549
  }
7511
7550
  }
7512
7551
 
7513
- .igz-navigation-tabs {
7514
- .navigation-tabs-color-set();
7515
-
7516
- background-color: @navigation-tabs-bg-color;
7517
- height: 56px;
7518
- padding-top: 7px;
7519
-
7520
- .navigation-tab {
7521
- float: left;
7522
- height: 32px;
7523
- padding: 15px 24px 0;
7524
- font-family: @font-family-sans-serif;
7525
- color: @navigation-tab-color;
7526
- font-size: 14px;
7527
- text-align: center;
7528
- cursor: pointer;
7529
- border-bottom: @navigation-tab-border-bottom;
7530
- box-sizing: content-box;
7531
-
7532
- &.active, &.active:hover {
7533
- background-color: @navigation-tab-active-hover-bg-color;
7534
- color: @navigation-tab-active-hover-color;
7535
- border-bottom: @navigation-tab-active-hover-border-bottom;
7536
- }
7537
-
7538
- &:hover {
7539
- background-color: @navigation-tab-hover-bg-color;
7540
- }
7541
-
7542
- &.active {
7543
- background-color: @navigation-tab-active-bg-color;
7544
- }
7545
-
7546
- @media screen and (max-width: 940px) {
7547
- padding: 15px 12px 0;
7548
- }
7549
- }
7550
- }
7551
-
7552
7552
  .igz-pagination {
7553
7553
  .pagination-color-set();
7554
7554
 
@@ -8288,70 +8288,6 @@ yx-axis
8288
8288
  }
8289
8289
  }
8290
8290
 
8291
- .toast-status-panel {
8292
- .toast-status-panel-color-set();
8293
-
8294
- margin-bottom: 20px;
8295
- padding: 16px 36px 16px 12px;
8296
- background-color: @toast-panel-bg-color;
8297
- border: @toast-panel-border;
8298
- position: relative;
8299
-
8300
- &.in-progress {
8301
- background-color: @toast-panel-in-progress-bg-color;
8302
- border: @toast-panel-in-progress-border;
8303
- }
8304
-
8305
- &.failed {
8306
- background-color: @toast-panel-failed-bg-color;
8307
- border: @toast-panel-failed-border;
8308
- }
8309
-
8310
- .panel-status {
8311
- color: @toast-panel-status-color;
8312
- line-height: 24px;
8313
- font-size: 14px;
8314
- font-weight: 700;
8315
- font-family: @font-family-sans-serif;
8316
- align-items: center;
8317
- display: flex;
8318
- justify-content: center;
8319
-
8320
- &.in-progress {
8321
- color: @toast-panel-status-in-progress-color;
8322
- }
8323
-
8324
- &.failed {
8325
- color: @toast-panel-status-failed-color;
8326
- }
8327
-
8328
- .panel-status-icon {
8329
- font-size: 24px;
8330
-
8331
- &.igz-icon-properties {
8332
- -webkit-animation: rotation 4s infinite linear;
8333
-
8334
- @-webkit-keyframes rotation {
8335
- from {
8336
- -webkit-transform: rotate(0deg);
8337
- }
8338
- to {
8339
- -webkit-transform: rotate(359deg);
8340
- }
8341
- }
8342
- }
8343
- }
8344
-
8345
- .msg-scrollable-container {
8346
- max-height: 300px;
8347
-
8348
- .panel-status-msg {
8349
- margin: 0 8px;
8350
- }
8351
- }
8352
- }
8353
- }
8354
-
8355
8291
  .validating-input-field {
8356
8292
  .validating-input-field-color-set();
8357
8293
 
@@ -8665,27 +8601,91 @@ yx-axis
8665
8601
  font-size: 14px;
8666
8602
  position: static;
8667
8603
  }
8668
- }
8669
- }
8604
+ }
8605
+ }
8606
+
8607
+ // an invalid input field should be displayed as invalid in case it is in a submitted form even if the field is pristine
8608
+ form.ng-submitted .validating-input-field {
8609
+ .validating-input-field-color-set();
8610
+
8611
+ .input-field, .textarea-field {
8612
+ &:not([disabled]):not([readonly]) {
8613
+ &.ng-invalid, &.invalid {
8614
+ &:focus {
8615
+ background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8616
+ border: @input-textarea-field-not-disabled-focus-invalid-border;
8617
+ }
8618
+
8619
+ &:not(:focus) {
8620
+ background-color: @input-textarea-field-not-disabled-invalid-bg-color;
8621
+ border: @input-textarea-field-not-disabled-invalid-border;
8622
+ }
8623
+ }
8624
+ }
8625
+ }
8626
+ }
8627
+
8628
+ .toast-status-panel {
8629
+ .toast-status-panel-color-set();
8630
+
8631
+ margin-bottom: 20px;
8632
+ padding: 16px 36px 16px 12px;
8633
+ background-color: @toast-panel-bg-color;
8634
+ border: @toast-panel-border;
8635
+ position: relative;
8636
+
8637
+ &.in-progress {
8638
+ background-color: @toast-panel-in-progress-bg-color;
8639
+ border: @toast-panel-in-progress-border;
8640
+ }
8641
+
8642
+ &.failed {
8643
+ background-color: @toast-panel-failed-bg-color;
8644
+ border: @toast-panel-failed-border;
8645
+ }
8646
+
8647
+ .panel-status {
8648
+ color: @toast-panel-status-color;
8649
+ line-height: 24px;
8650
+ font-size: 14px;
8651
+ font-weight: 700;
8652
+ font-family: @font-family-sans-serif;
8653
+ align-items: center;
8654
+ display: flex;
8655
+ justify-content: center;
8656
+
8657
+ &.in-progress {
8658
+ color: @toast-panel-status-in-progress-color;
8659
+ }
8660
+
8661
+ &.failed {
8662
+ color: @toast-panel-status-failed-color;
8663
+ }
8670
8664
 
8671
- // an invalid input field should be displayed as invalid in case it is in a submitted form even if the field is pristine
8672
- form.ng-submitted .validating-input-field {
8673
- .validating-input-field-color-set();
8665
+ .panel-status-icon {
8666
+ font-size: 24px;
8674
8667
 
8675
- .input-field, .textarea-field {
8676
- &:not([disabled]):not([readonly]) {
8677
- &.ng-invalid, &.invalid {
8678
- &:focus {
8679
- background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8680
- border: @input-textarea-field-not-disabled-focus-invalid-border;
8681
- }
8668
+ &.igz-icon-properties {
8669
+ -webkit-animation: rotation 4s infinite linear;
8682
8670
 
8683
- &:not(:focus) {
8684
- background-color: @input-textarea-field-not-disabled-invalid-bg-color;
8685
- border: @input-textarea-field-not-disabled-invalid-border;
8671
+ @-webkit-keyframes rotation {
8672
+ from {
8673
+ -webkit-transform: rotate(0deg);
8674
+ }
8675
+ to {
8676
+ -webkit-transform: rotate(359deg);
8677
+ }
8686
8678
  }
8687
8679
  }
8688
8680
  }
8681
+
8682
+ .msg-scrollable-container {
8683
+ max-height: 300px;
8684
+
8685
+ .panel-status-msg {
8686
+ margin: 0 8px;
8687
+ }
8688
+ }
8689
8689
  }
8690
8690
  }
8691
8691
 
@@ -9817,128 +9817,6 @@ body {
9817
9817
  }
9818
9818
  }
9819
9819
 
9820
- .igz-info-page-content-wrapper {
9821
- .info-page-content-color-set();
9822
-
9823
- position: absolute;
9824
- top: 56px;
9825
- right: 0;
9826
- bottom: 0;
9827
- left: 0;
9828
- padding-top: 0;
9829
- transition: @igz-basic-transition;
9830
- background-color: @page-content-bg-color;
9831
-
9832
- &.upper-pane-opened {
9833
- top: 216px;
9834
- }
9835
-
9836
- &.filters-opened {
9837
- right: 377px;
9838
- }
9839
-
9840
- &.info-pane-opened {
9841
- right: 379px;
9842
- }
9843
-
9844
- .igz-info-page-content {
9845
- min-width: 946px;
9846
- max-width: 100%;
9847
- padding: 40px 25px;
9848
- }
9849
- }
9850
-
9851
- igz-info-page-actions-bar {
9852
- .igz-info-page-actions-bar .actions-content-block {
9853
- margin-left: 14px;
9854
- }
9855
- }
9856
-
9857
- igz-info-page-content {
9858
- .info-page-content-color-set();
9859
-
9860
- .container-data-access-policy-table, .data-lifecycle-table {
9861
- &.common-table {
9862
- .common-table-header {
9863
- position: relative;
9864
- height: 49px;
9865
- line-height: 48px;
9866
-
9867
- .common-table-cell {
9868
- margin-top: -1px;
9869
- height: 49px;
9870
-
9871
- &.selected {
9872
- background-color: @common-table-cell-selected-bg-color;
9873
- border: @common-table-cell-selected-border;
9874
- }
9875
-
9876
- &:last-child {
9877
- margin-right: 0;
9878
- }
9879
-
9880
- &.actions-menu {
9881
- width: 0;
9882
- }
9883
-
9884
- &.check-all-rows {
9885
- padding-left: 30px;
9886
-
9887
- .action-checkbox-all {
9888
- padding-top: 2px;
9889
- }
9890
- }
9891
- }
9892
-
9893
- .common-table-cells-container {
9894
- margin-right: 45px;
9895
-
9896
- .common-table-cell {
9897
- height: 49px;
9898
- padding: 0 15px;
9899
- border-right: @common-table-cell-border-right;
9900
-
9901
- &:first-child {
9902
- padding-left: 7px;
9903
- }
9904
- }
9905
- }
9906
- }
9907
-
9908
- .common-table-body {
9909
- margin-top: 7px;
9910
-
9911
- .common-table-cell {
9912
- &.actions-menu {
9913
- width: 45px;
9914
- }
9915
- }
9916
- }
9917
-
9918
- .data-access-policy-layers, .data-lifecycle-layers {
9919
- &:last-child {
9920
- margin-bottom: 20px;
9921
- }
9922
- }
9923
- }
9924
-
9925
- .sortable-empty {
9926
- background-color: @sortable-empty-bg-color;
9927
- color: @sortable-empty-color;
9928
- font-size: 14px;
9929
- font-weight: 400;
9930
- font-family: 'Open Sans', sans-serif;
9931
- border-bottom: @sortable-empty-border;
9932
- border-left: @sortable-empty-border;
9933
- border-right: @sortable-empty-border;
9934
- padding-left: 70px;
9935
- height: 40px;
9936
- line-height: 38px;
9937
- }
9938
- }
9939
- }
9940
-
9941
-
9942
9820
  .info-page-filters-bookmark {
9943
9821
  .info-page-filters-color-set();
9944
9822
 
@@ -10279,155 +10157,154 @@ igz-info-page-content {
10279
10157
  }
10280
10158
  }
10281
10159
 
10282
- ncl-breadcrumbs {
10283
- .main-header-title {
10284
- &:not(.disable-behavior) {
10285
- &:hover .main-header-title-text {
10286
- color: @dark-sky-blue;
10287
- }
10288
- }
10160
+ .igz-info-page-content-wrapper {
10161
+ .info-page-content-color-set();
10289
10162
 
10290
- &.disable-behavior {
10291
- color: @dusk-three;
10292
- }
10163
+ position: absolute;
10164
+ top: 56px;
10165
+ right: 0;
10166
+ bottom: 0;
10167
+ left: 0;
10168
+ padding-top: 0;
10169
+ transition: @igz-basic-transition;
10170
+ background-color: @page-content-bg-color;
10171
+
10172
+ &.upper-pane-opened {
10173
+ top: 216px;
10293
10174
  }
10294
10175
 
10295
- .igz-icon-right {
10296
- font-size: 11px;
10297
- font-weight: 100;
10298
- margin: 0 14px;
10176
+ &.filters-opened {
10177
+ right: 377px;
10299
10178
  }
10300
10179
 
10301
- .ncl-header-subtitle {
10302
- color: @greyish-purple;
10180
+ &.info-pane-opened {
10181
+ right: 379px;
10303
10182
  }
10304
10183
 
10305
- .ncl-bold-subtitle {
10306
- color: @dusk-three;
10307
- font-weight: bold;
10184
+ .igz-info-page-content {
10185
+ min-width: 946px;
10186
+ max-width: 100%;
10187
+ padding: 40px 25px;
10308
10188
  }
10309
10189
  }
10310
10190
 
10311
- .ncl-collapsing-row {
10312
- margin-bottom: 9px;
10191
+ igz-info-page-actions-bar {
10192
+ .igz-info-page-actions-bar .actions-content-block {
10193
+ margin-left: 14px;
10194
+ }
10195
+ }
10313
10196
 
10314
- .title-block.common-table-row {
10315
- border: 1px solid @pale-grey;
10316
- box-shadow: none;
10317
- min-height: 49px;
10197
+ igz-info-page-content {
10198
+ .info-page-content-color-set();
10318
10199
 
10319
- &.collapsed {
10320
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
10200
+ .container-data-access-policy-table, .data-lifecycle-table {
10201
+ &.common-table {
10202
+ .common-table-header {
10203
+ position: relative;
10204
+ height: 49px;
10205
+ line-height: 48px;
10321
10206
 
10322
- &:hover {
10323
- box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
10324
- }
10325
- }
10207
+ .common-table-cell {
10208
+ margin-top: -1px;
10209
+ height: 49px;
10326
10210
 
10327
- &:hover {
10328
- .common-table-cells-container {
10329
- background-color: @white;
10330
- }
10211
+ &.selected {
10212
+ background-color: @common-table-cell-selected-bg-color;
10213
+ border: @common-table-cell-selected-border;
10214
+ }
10331
10215
 
10332
- .actions-menu {
10333
- visibility: visible;
10334
- background-color: @white;
10335
- }
10216
+ &:last-child {
10217
+ margin-right: 0;
10218
+ }
10336
10219
 
10337
- .single-action {
10338
- visibility: visible;
10339
- }
10340
- }
10341
- }
10220
+ &.actions-menu {
10221
+ width: 0;
10222
+ }
10342
10223
 
10343
- .row-collapse {
10344
- width: 40px;
10345
- flex: none;
10346
- justify-content: center;
10347
- align-items: flex-start;
10348
- line-height: 51px;
10224
+ &.check-all-rows {
10225
+ padding-left: 30px;
10226
+
10227
+ .action-checkbox-all {
10228
+ padding-top: 2px;
10229
+ }
10230
+ }
10231
+ }
10349
10232
 
10350
- .collapse-icon {
10351
- background-color: transparent;
10352
- position: absolute;
10233
+ .common-table-cells-container {
10234
+ margin-right: 45px;
10353
10235
 
10354
- &.igz-icon-right, &.igz-icon-down {
10355
- font-size: 12px;
10356
- .duskThree(0.64);
10357
- color: @color;
10236
+ .common-table-cell {
10237
+ height: 49px;
10238
+ padding: 0 15px;
10239
+ border-right: @common-table-cell-border-right;
10358
10240
 
10359
- &:hover {
10360
- color: @dusk-three;
10241
+ &:first-child {
10242
+ padding-left: 7px;
10243
+ }
10244
+ }
10361
10245
  }
10362
10246
  }
10363
- }
10364
- }
10365
-
10366
- .item-row {
10367
- display: flex;
10368
- flex-flow: row nowrap;
10369
- align-items: center;
10370
10247
 
10371
- .item-name {
10372
- font-weight: bold;
10373
- display: flex;
10374
- flex-flow: row nowrap;
10375
- align-items: baseline;
10376
- width: 192px;
10248
+ .common-table-body {
10249
+ margin-top: 7px;
10377
10250
 
10378
- .text-ellipsis {
10379
- width: auto;
10251
+ .common-table-cell {
10252
+ &.actions-menu {
10253
+ width: 45px;
10254
+ }
10255
+ }
10380
10256
  }
10381
- }
10382
10257
 
10383
- .item-class {
10384
- width: 168px;
10385
- padding-left: 16px;
10258
+ .data-access-policy-layers, .data-lifecycle-layers {
10259
+ &:last-child {
10260
+ margin-bottom: 20px;
10261
+ }
10262
+ }
10386
10263
  }
10387
10264
 
10388
- .field-label {
10389
- text-transform: capitalize;
10265
+ .sortable-empty {
10266
+ background-color: @sortable-empty-bg-color;
10267
+ color: @sortable-empty-color;
10268
+ font-size: 14px;
10269
+ font-weight: 400;
10270
+ font-family: 'Open Sans', sans-serif;
10271
+ border-bottom: @sortable-empty-border;
10272
+ border-left: @sortable-empty-border;
10273
+ border-right: @sortable-empty-border;
10274
+ padding-left: 70px;
10275
+ height: 40px;
10276
+ line-height: 38px;
10390
10277
  }
10391
10278
  }
10279
+ }
10392
10280
 
10393
- .item-info-row {
10394
- line-height: 30px;
10395
- }
10396
10281
 
10397
- .expanded-item-info-block {
10398
- width: 100%;
10399
- height: 100%;
10400
- top: 0;
10401
- padding: 10px 0;
10402
- }
10282
+ ncl-breadcrumbs {
10283
+ .main-header-title {
10284
+ &:not(.disable-behavior) {
10285
+ &:hover .main-header-title-text {
10286
+ color: @dark-sky-blue;
10287
+ }
10288
+ }
10403
10289
 
10404
- .collapsed-item-info-block {
10405
- padding-left: 16px;
10406
- white-space: nowrap;
10407
- width: 100%;
10408
- overflow: hidden;
10409
- text-overflow: ellipsis;
10290
+ &.disable-behavior {
10291
+ color: @dusk-three;
10292
+ }
10410
10293
  }
10411
10294
 
10412
- .actions-menu {
10413
- visibility: hidden;
10414
- align-items: flex-start;
10415
- line-height: 51px;
10295
+ .igz-icon-right {
10296
+ font-size: 11px;
10297
+ font-weight: 100;
10298
+ margin: 0 14px;
10416
10299
  }
10417
10300
 
10418
- .single-action {
10419
- visibility: hidden;
10420
- align-items: flex-start;
10421
- flex: none;
10422
- padding-right: 4px;
10423
-
10424
- .igz-action-panel {
10425
- transition: unset;
10301
+ .ncl-header-subtitle {
10302
+ color: @greyish-purple;
10303
+ }
10426
10304
 
10427
- .igz-action-item {
10428
- margin: 4px 0 0 0;
10429
- }
10430
- }
10305
+ .ncl-bold-subtitle {
10306
+ color: @dusk-three;
10307
+ font-weight: bold;
10431
10308
  }
10432
10309
  }
10433
10310
 
@@ -10525,47 +10402,170 @@ ncl-breadcrumbs {
10525
10402
  }
10526
10403
  }
10527
10404
 
10528
- .dropdown-list {
10529
- font-size: 13px;
10530
- font-weight: 500;
10531
- text-align: left;
10532
- max-height: 375px;
10533
- list-style: none;
10534
- padding: 8px 0 0;
10535
- margin: 0;
10536
- border-radius: 2px;
10537
- background-color: @white;
10405
+ .dropdown-list {
10406
+ font-size: 13px;
10407
+ font-weight: 500;
10408
+ text-align: left;
10409
+ max-height: 375px;
10410
+ list-style: none;
10411
+ padding: 8px 0 0;
10412
+ margin: 0;
10413
+ border-radius: 2px;
10414
+ background-color: @white;
10415
+
10416
+ li {
10417
+ height: 32px;
10418
+ line-height: 32px;
10419
+ width: 239px;
10420
+
10421
+ .item-name {
10422
+ display: inline-block;
10423
+ width: 170px;
10424
+ overflow: hidden;
10425
+ white-space: nowrap;
10426
+ text-overflow: ellipsis;
10427
+ margin-left: 16px;
10428
+ color: @dusk-three;
10429
+ vertical-align:top;
10430
+ text-decoration: none;
10431
+ height: 32px;
10432
+ }
10433
+
10434
+ .igz-icon-tick {
10435
+ display: inline-block;
10436
+ font-size: 16px;
10437
+ width: 41px;
10438
+ height: 32px;
10439
+ padding: 0 19px 0 12px;
10440
+ vertical-align: top;
10441
+ }
10442
+
10443
+ &:hover {
10444
+ height: 32px;
10445
+ background-color: @pale-grey-two;
10446
+ }
10447
+ }
10448
+ }
10449
+ }
10450
+
10451
+ .ncl-collapsing-row {
10452
+ margin-bottom: 9px;
10453
+
10454
+ .title-block.common-table-row {
10455
+ border: 1px solid @pale-grey;
10456
+ box-shadow: none;
10457
+ min-height: 49px;
10458
+
10459
+ &.collapsed {
10460
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
10461
+
10462
+ &:hover {
10463
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
10464
+ }
10465
+ }
10466
+
10467
+ &:hover {
10468
+ .common-table-cells-container {
10469
+ background-color: @white;
10470
+ }
10471
+
10472
+ .actions-menu {
10473
+ visibility: visible;
10474
+ background-color: @white;
10475
+ }
10476
+
10477
+ .single-action {
10478
+ visibility: visible;
10479
+ }
10480
+ }
10481
+ }
10482
+
10483
+ .row-collapse {
10484
+ width: 40px;
10485
+ flex: none;
10486
+ justify-content: center;
10487
+ align-items: flex-start;
10488
+ line-height: 51px;
10489
+
10490
+ .collapse-icon {
10491
+ background-color: transparent;
10492
+ position: absolute;
10493
+
10494
+ &.igz-icon-right, &.igz-icon-down {
10495
+ font-size: 12px;
10496
+ .duskThree(0.64);
10497
+ color: @color;
10498
+
10499
+ &:hover {
10500
+ color: @dusk-three;
10501
+ }
10502
+ }
10503
+ }
10504
+ }
10505
+
10506
+ .item-row {
10507
+ display: flex;
10508
+ flex-flow: row nowrap;
10509
+ align-items: center;
10510
+
10511
+ .item-name {
10512
+ font-weight: bold;
10513
+ display: flex;
10514
+ flex-flow: row nowrap;
10515
+ align-items: baseline;
10516
+ width: 192px;
10517
+
10518
+ .text-ellipsis {
10519
+ width: auto;
10520
+ }
10521
+ }
10522
+
10523
+ .item-class {
10524
+ width: 168px;
10525
+ padding-left: 16px;
10526
+ }
10527
+
10528
+ .field-label {
10529
+ text-transform: capitalize;
10530
+ }
10531
+ }
10532
+
10533
+ .item-info-row {
10534
+ line-height: 30px;
10535
+ }
10536
+
10537
+ .expanded-item-info-block {
10538
+ width: 100%;
10539
+ height: 100%;
10540
+ top: 0;
10541
+ padding: 10px 0;
10542
+ }
10543
+
10544
+ .collapsed-item-info-block {
10545
+ padding-left: 16px;
10546
+ white-space: nowrap;
10547
+ width: 100%;
10548
+ overflow: hidden;
10549
+ text-overflow: ellipsis;
10550
+ }
10538
10551
 
10539
- li {
10540
- height: 32px;
10541
- line-height: 32px;
10542
- width: 239px;
10552
+ .actions-menu {
10553
+ visibility: hidden;
10554
+ align-items: flex-start;
10555
+ line-height: 51px;
10556
+ }
10543
10557
 
10544
- .item-name {
10545
- display: inline-block;
10546
- width: 170px;
10547
- overflow: hidden;
10548
- white-space: nowrap;
10549
- text-overflow: ellipsis;
10550
- margin-left: 16px;
10551
- color: @dusk-three;
10552
- vertical-align:top;
10553
- text-decoration: none;
10554
- height: 32px;
10555
- }
10558
+ .single-action {
10559
+ visibility: hidden;
10560
+ align-items: flex-start;
10561
+ flex: none;
10562
+ padding-right: 4px;
10556
10563
 
10557
- .igz-icon-tick {
10558
- display: inline-block;
10559
- font-size: 16px;
10560
- width: 41px;
10561
- height: 32px;
10562
- padding: 0 19px 0 12px;
10563
- vertical-align: top;
10564
- }
10564
+ .igz-action-panel {
10565
+ transition: unset;
10565
10566
 
10566
- &:hover {
10567
- height: 32px;
10568
- background-color: @pale-grey-two;
10567
+ .igz-action-item {
10568
+ margin: 4px 0 0 0;
10569
10569
  }
10570
10570
  }
10571
10571
  }
@@ -10709,6 +10709,24 @@ ncl-breadcrumbs {
10709
10709
  }
10710
10710
  }
10711
10711
 
10712
+ .view-yaml-dialog-wrapper {
10713
+ .ngdialog-content {
10714
+ .view-yaml-dialog-header {
10715
+ .title {
10716
+ margin-bottom: 10px;
10717
+ }
10718
+
10719
+ .copy-to-clipboard {
10720
+ width: 20px;
10721
+ }
10722
+ }
10723
+
10724
+ .monaco-editor {
10725
+ min-width: 700px;
10726
+ min-height: 450px;
10727
+ }
10728
+ }
10729
+ }
10712
10730
  .ncl-key-value-input {
10713
10731
  .input-wrapper {
10714
10732
  width: 100%;
@@ -10923,50 +10941,6 @@ ncl-breadcrumbs {
10923
10941
  }
10924
10942
  }
10925
10943
 
10926
- .view-yaml-dialog-wrapper {
10927
- .ngdialog-content {
10928
- .view-yaml-dialog-header {
10929
- .title {
10930
- margin-bottom: 10px;
10931
- }
10932
-
10933
- .copy-to-clipboard {
10934
- width: 20px;
10935
- }
10936
- }
10937
-
10938
- .monaco-editor {
10939
- min-width: 700px;
10940
- min-height: 450px;
10941
- }
10942
- }
10943
- }
10944
- .ncl-monaco {
10945
- .ncl-monaco-wrapper {
10946
- padding-top: 20px;
10947
- height: 100%;
10948
- border: 1px solid @pale-grey;
10949
- background-color: @white;
10950
-
10951
- &.no-top-padding {
10952
- padding-top: 0;
10953
- }
10954
-
10955
- .ncl-monaco-top-row {
10956
- display: block;
10957
- }
10958
-
10959
- .ncl-monaco-editor {
10960
- height: 100%;
10961
- }
10962
- }
10963
-
10964
- .ncl-monaco-dark {
10965
- background-color: @vs-dark;
10966
- }
10967
- }
10968
-
10969
-
10970
10944
  ncl-navigation-tabs {
10971
10945
  .ncl-navigation-tabs-color-set();
10972
10946
 
@@ -11128,6 +11102,32 @@ ncl-navigation-tabs {
11128
11102
  }
11129
11103
  }
11130
11104
 
11105
+ .ncl-monaco {
11106
+ .ncl-monaco-wrapper {
11107
+ padding-top: 20px;
11108
+ height: 100%;
11109
+ border: 1px solid @pale-grey;
11110
+ background-color: @white;
11111
+
11112
+ &.no-top-padding {
11113
+ padding-top: 0;
11114
+ }
11115
+
11116
+ .ncl-monaco-top-row {
11117
+ display: block;
11118
+ }
11119
+
11120
+ .ncl-monaco-editor {
11121
+ height: 100%;
11122
+ }
11123
+ }
11124
+
11125
+ .ncl-monaco-dark {
11126
+ background-color: @vs-dark;
11127
+ }
11128
+ }
11129
+
11130
+
11131
11131
  .ncl-search-input {
11132
11132
  position: relative;
11133
11133
  color: @silver;
@@ -11903,6 +11903,59 @@ ncl-navigation-tabs {
11903
11903
  }
11904
11904
  }
11905
11905
 
11906
+ .ncl-version-trigger {
11907
+ padding: 11px 24px;
11908
+
11909
+ .common-table-header {
11910
+ border: none;
11911
+ padding-left: 24px;
11912
+
11913
+ .common-table-cell {
11914
+ font-size: 14px;
11915
+ font-weight: bold;
11916
+ letter-spacing: normal;
11917
+ color: @dusk-three;
11918
+ height: 46px;
11919
+ }
11920
+ }
11921
+
11922
+ .common-table-body {
11923
+ .common-table-row {
11924
+ &:not(.read-only):hover {
11925
+ .common-table-cells-container {
11926
+ background-color: @white;
11927
+ }
11928
+
11929
+ .actions-menu {
11930
+ background-color: @white;
11931
+ }
11932
+ }
11933
+ }
11934
+ }
11935
+
11936
+ .http-trigger-checkbox {
11937
+ display: flex;
11938
+ }
11939
+
11940
+ .item-row .item-name, .item-row .item-class, .item-row .item-info {
11941
+ padding-left: 0;
11942
+ }
11943
+
11944
+ .title-field-row .name-field, .item-row .item-name, .header-name {
11945
+ margin-right: 16px;
11946
+ width: 15%;
11947
+ }
11948
+
11949
+ .title-field-row .class-field, .item-row .item-class, .header-class {
11950
+ margin-right: 16px;
11951
+ width: 10%;
11952
+ }
11953
+
11954
+ .title-field-row .class-field {
11955
+ width: auto;
11956
+ }
11957
+ }
11958
+
11906
11959
  .ncl-version-monitoring {
11907
11960
  > .igz-scrollable-container {
11908
11961
  padding: 24px 25px 22px 41px;
@@ -12036,59 +12089,6 @@ ncl-navigation-tabs {
12036
12089
  }
12037
12090
  }
12038
12091
 
12039
- .ncl-version-trigger {
12040
- padding: 11px 24px;
12041
-
12042
- .common-table-header {
12043
- border: none;
12044
- padding-left: 24px;
12045
-
12046
- .common-table-cell {
12047
- font-size: 14px;
12048
- font-weight: bold;
12049
- letter-spacing: normal;
12050
- color: @dusk-three;
12051
- height: 46px;
12052
- }
12053
- }
12054
-
12055
- .common-table-body {
12056
- .common-table-row {
12057
- &:not(.read-only):hover {
12058
- .common-table-cells-container {
12059
- background-color: @white;
12060
- }
12061
-
12062
- .actions-menu {
12063
- background-color: @white;
12064
- }
12065
- }
12066
- }
12067
- }
12068
-
12069
- .http-trigger-checkbox {
12070
- display: flex;
12071
- }
12072
-
12073
- .item-row .item-name, .item-row .item-class, .item-row .item-info {
12074
- padding-left: 0;
12075
- }
12076
-
12077
- .title-field-row .name-field, .item-row .item-name, .header-name {
12078
- margin-right: 16px;
12079
- width: 15%;
12080
- }
12081
-
12082
- .title-field-row .class-field, .item-row .item-class, .header-class {
12083
- margin-right: 16px;
12084
- width: 10%;
12085
- }
12086
-
12087
- .title-field-row .class-field {
12088
- width: auto;
12089
- }
12090
- }
12091
-
12092
12092
  .ncl-text-size-dropdown {
12093
12093
  display: flex;
12094
12094
  justify-content: flex-end;