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

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 (15) hide show
  1. package/dist/i18n/en/functions.json +1 -0
  2. package/dist/js/iguazio.dashboard-controls.js +3911 -3901
  3. package/dist/less/iguazio.dashboard-controls.less +2079 -2079
  4. package/package.json +1 -1
  5. package/src/i18n/en/functions.json +1 -0
  6. package/src/igz_controls/components/log-table-row/log-table-row.component.spec.js +28 -5
  7. package/src/igz_controls/components/toast-status-panel/toast-status-panel.component.spec.js +1 -1
  8. package/src/nuclio/api-gateways/api-gateways.service.js +5 -0
  9. package/src/nuclio/common/screens/create-function/function-from-scratch/function-from-scratch.component.spec.js +6 -14
  10. package/src/nuclio/functions/functions.component.js +2 -1
  11. package/src/nuclio/functions/functions.service.js +3 -1
  12. package/src/nuclio/functions/version/version-code/version-code.component.js +9 -0
  13. package/src/nuclio/functions/version/version-code/version-code.tpl.html +16 -15
  14. package/src/nuclio/functions/version/version-triggers/version-triggers.component.js +2 -1
  15. package/src/nuclio/functions/version/version.component.js +6 -18
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,208 +5531,65 @@ 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
- }
5534
+ .action-checkbox {
5535
+ .action-checkbox-color-set();
5403
5536
 
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
- }
5537
+ line-height: 16px;
5538
+ text-align: center;
5411
5539
 
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;
5540
+ .check-item {
5541
+ font-size: 16px;
5542
+ cursor: pointer;
5543
+ line-height: 1;
5544
+ vertical-align: middle;
5420
5545
 
5421
- background-color: #ffffff;
5422
- right: auto;
5423
- position: absolute;
5424
- z-index: 1;
5425
- }
5546
+ &.igz-icon-checkbox-unchecked {
5547
+ color: @icon-checkbox-unchecked;
5548
+ }
5426
5549
 
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;
5550
+ &.igz-icon-checkbox-checked {
5551
+ color: @icon-checkbox-checked;
5552
+ }
5553
+ }
5436
5554
  }
5555
+ .action-checkbox-all {
5556
+ .action-checkbox-all-color-set();
5437
5557
 
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
- }
5558
+ text-align: center;
5447
5559
 
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
- }
5560
+ .check-item {
5561
+ cursor: pointer;
5562
+ color: @check-item-color;
5563
+ font-size: 16px;
5564
+ line-height: 1;
5565
+ vertical-align: middle;
5455
5566
 
5456
- .ui-layout-column > .ui-splitbar > a:nth-child(2) {
5457
- margin-top: 0.35rem;
5567
+ &.igz-icon-checkbox-checked {
5568
+ color: @check-item-icon-checkbox-checked-color;
5569
+ }
5570
+ }
5458
5571
  }
5572
+ .igz-action-menu {
5573
+ .action-menu-color-set();
5574
+ .action-icon-color-set();
5459
5575
 
5460
- .ui-layout-row > .ui-splitbar > a:nth-child(2) {
5461
- margin-left: 0.35rem;
5462
- }
5576
+ opacity: 1;
5577
+ position: relative;
5463
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;
5464
5587
 
5465
- /**
5466
- * Icons
5467
- **/
5468
-
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
- }
5588
+ &.active,
5589
+ &:hover {
5590
+ color: @menu-btn-active-hover-color;
5591
+ }
5592
+ }
5593
5593
 
5594
5594
  .menu-dropdown {
5595
5595
  visibility: hidden;
@@ -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
-
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;
6069
6047
 
6070
- > span {
6071
- overflow: hidden;
6072
- text-overflow: ellipsis;
6073
- width: 100%;
6074
- white-space: nowrap;
6075
- }
6048
+ &:after {
6049
+ clear: both;
6050
+ }
6076
6051
 
6077
- input.input-name {
6078
- border: none;
6079
- background-color: inherit;
6080
- outline: none;
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
+ }
6081
6059
 
6082
- &[readonly] {
6083
- cursor: pointer;
6084
- user-select: none;
6085
- pointer-events: none;
6086
- }
6060
+ .datetimepicker-input {
6061
+ font-size: 13px;
6062
+ border-radius: 2px 0 0 2px;
6063
+ width: 120px;
6064
+ padding-left: 14px;
6087
6065
 
6088
- &.non-editable {
6089
- opacity: 1;
6090
- }
6091
- }
6066
+ &[disabled] {
6067
+ opacity: 1;
6092
6068
  }
6093
6069
 
6094
- .dropdown-arrow {
6095
- margin-right: 14px;
6096
-
6097
- span.igz-icon-dropdown {
6098
- font-size: 11px;
6099
- }
6070
+ &:focus, &:active {
6071
+ border: @datetimepicker-input-focus-active-border;
6100
6072
  }
6101
6073
 
6102
- &:focus {
6103
- outline: none;
6074
+ &.date-range {
6075
+ min-width: 150px;
6104
6076
 
6105
- .dropdown-selected-item {
6106
- font-family: @font-family-sans-serif;
6077
+ &.pick-time {
6078
+ width: 285px;
6107
6079
  }
6108
6080
  }
6081
+ }
6109
6082
 
6110
- &:hover, &:focus {
6111
- background-color: @default-dropdown-field-hover-focus-bg-color;
6112
- box-shadow: @default-dropdown-field-hover-focus-box-shadow;
6113
- }
6083
+ .datetimepicker-open-button {
6084
+ border-radius: 0 2px 2px 0;
6085
+ width: 42px;
6086
+ border-left: none;
6087
+ vertical-align: top;
6114
6088
 
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;
6089
+ &:hover {
6090
+ box-shadow: @datetimepicker-open-btn-hover-box-shadow;
6119
6091
  }
6120
6092
 
6121
- &.placeholder {
6122
- height: 36px;
6123
- font-weight: 500;
6124
-
6125
- .description {
6126
- display: none;
6127
- }
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;
6128
6097
  }
6129
6098
 
6130
- &.disabled {
6131
- pointer-events: none;
6132
- background-color: @default-dropdown-field-disabled-bg-color;
6133
- opacity: 0.6;
6134
-
6135
- .dropdown-arrow span.igz-icon-dropdown {
6136
- opacity: 0.4;
6137
- }
6099
+ .igz-icon-dropdown {
6100
+ font-size: 11px;
6101
+ line-height: 1.4;
6102
+ vertical-align: bottom;
6138
6103
  }
6139
6104
 
6140
- &.readonly {
6141
- pointer-events: none;
6142
- background-color: @default-dropdown-field-readonly-bg-color;
6105
+ .revert-icon {
6106
+ display: block;
6107
+ transform: rotate(180deg);
6108
+ line-height: 1;
6143
6109
  }
6144
-
6145
- .name {
6146
- text-transform: capitalize;
6147
- }
6148
-
6149
- .description {
6150
- display: none;
6151
- color: @default-dropdown-field-description-color;
6152
-
6153
- &:before {
6154
- content: " (";
6155
- }
6156
-
6157
- &:after {
6158
- content: ")";
6159
- }
6160
- }
6161
- }
6162
-
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;
6172
6110
  }
6173
6111
 
6174
- .default-dropdown-container {
6175
- background-color: @default-dropdown-container-bg-color;
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;
6176
6123
  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;
6124
+ box-shadow: @options-dropdown-box-shadow;
6186
6125
 
6187
- &.dropdown-overlap {
6188
- position: fixed;
6189
- min-width: unset;
6126
+ &.visible {
6127
+ visibility: visible;
6190
6128
  }
6191
6129
 
6192
- .list {
6193
- padding: 0;
6130
+ .options-list {
6131
+ list-style: none;
6194
6132
  margin: 0;
6133
+ padding: 0;
6195
6134
 
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;
6135
+ .options-list-item {
6136
+ height: 32px;
6137
+ line-height: 32px;
6202
6138
  margin: 0;
6203
- outline: none;
6204
- width: 100%;
6205
- display: flex;
6206
- min-height: 32px;
6207
- align-items: center;
6208
- justify-content: space-between;
6139
+ padding: 0 15px;
6140
+ float: none;
6209
6141
 
6210
- &.disabled {
6211
- opacity: 0.6;
6212
- cursor: not-allowed;
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;
6213
6148
  }
6214
6149
 
6215
- &:first-child {
6216
- margin-top: 7px;
6150
+ &:hover {
6151
+ background-color: @options-list-item-hover-bg-color;
6217
6152
  }
6218
6153
 
6219
6154
  &:last-child {
6220
- margin-bottom: 8px;
6155
+ margin-bottom: 1px;
6221
6156
  }
6157
+ }
6222
6158
 
6223
- .list-item-block {
6224
- display: flex;
6225
- align-items: center;
6226
- margin: 0 16px;
6159
+ .separator {
6160
+ border-bottom: @options-list-separator-border-bottom;
6161
+ margin: 8px 0 7px;
6162
+ }
6163
+ }
6164
+ }
6227
6165
 
6228
- .list-item-label {
6229
- display: flex;
6230
- flex-direction: column;
6166
+ &.disabled:after {
6167
+ opacity: 0.5;
6168
+ }
6231
6169
 
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
- }
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;
6240
6177
 
6241
- .description {
6242
- color: @default-dropdown-container-list-item-description-color;
6243
- overflow: hidden;
6244
- text-overflow: ellipsis;
6245
- white-space: nowrap;
6178
+ &.date-range {
6179
+ width: 538px;
6180
+ }
6246
6181
 
6247
- &:before {
6248
- content: " (";
6249
- }
6182
+ &.visible {
6183
+ visibility: visible;
6184
+ }
6250
6185
 
6251
- &:after {
6252
- content: ")";
6253
- }
6254
- }
6255
- }
6256
- }
6186
+ .datepicker-wrapper {
6187
+ width: 255px;
6188
+ display: inline-block;
6189
+ padding: 4px 0 0;
6257
6190
 
6258
- .selected-item-icon {
6259
- text-align: right;
6260
- margin-right: 16px;
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;
6261
6200
  }
6262
6201
 
6263
- &:hover, &:focus:not(.disabled) {
6264
- background-color: @default-dropdown-container-list-item-hover-focus-bg-color;
6202
+ &.glyphicon-chevron-down {
6203
+ top: -1px;
6204
+ .igz-icon-down;
6265
6205
  }
6266
6206
 
6267
- &.list-item-description {
6268
- padding: 5px 0;
6207
+ &.glyphicon-chevron-left {
6208
+ left: -2px;
6209
+ .igz-icon-left;
6269
6210
  }
6270
6211
 
6271
- &.selected-item {
6272
- color: @default-dropdown-container-list-item-selected-item-color;
6212
+ &.glyphicon-chevron-right {
6213
+ .igz-icon-right;
6273
6214
  }
6274
6215
  }
6275
- }
6276
6216
 
6277
- .add-button-wrapper {
6278
- padding: 0 7px 7px 7px;
6279
- line-height: normal;
6280
-
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;
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;
6287
6225
 
6288
- &:hover, &:active {
6289
- color: @add-button-hover-active-color;
6226
+ &.separator {
6227
+ border-bottom: @datepicker-calendar-separator-border-bottom;
6290
6228
  }
6291
6229
 
6292
- &:focus {
6293
- color: @add-button-focus-color;
6230
+ .uib-daypicker {
6231
+ outline: none;
6294
6232
  }
6295
- }
6296
- }
6297
6233
 
6298
- .transclude-container {
6299
- border-top: @transclude-container-border-top;
6300
- height: 48px;
6301
- padding: 8px 0;
6234
+ .btn {
6235
+ border: none;
6236
+ padding: 5px 0;
6237
+ outline: none;
6302
6238
 
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;
6239
+ &:not(.active) {
6240
+ &[disabled] {
6241
+ opacity: 1;
6242
+ color: @datepicker-calendar-btn-disabled-color;
6313
6243
 
6314
- &:hover, &:focus {
6315
- background-color: @transclude-container-item-hover-focus-bg-color;
6316
- }
6317
- }
6318
- }
6319
- }
6244
+ .text-info {
6245
+ color: @datepicker-calendar-btn-text-info-disabled-color;
6246
+ }
6247
+ }
6320
6248
 
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;
6249
+ &:not([disabled]) {
6250
+ .text-info {
6251
+ color: @datepicker-calendar-btn-text-info-color;
6252
+ }
6328
6253
 
6329
- &:not(.custom-color) {
6330
- color: @dropdown-icon-not-custom-color;
6331
- }
6254
+ .text-muted {
6255
+ color: @datepicker-calendar-btn-text-muted-color;
6256
+ }
6257
+ }
6258
+ }
6259
+ }
6332
6260
 
6333
- &.severity-icon {
6334
- font-size: 19px;
6261
+ table {
6262
+ margin: 0;
6263
+ width: 240px;
6264
+ outline: none;
6335
6265
 
6336
- &.critical {
6337
- color: @severity-icon-critical-color;
6338
- }
6266
+ thead tr {
6267
+ color: @datepicker-table-header-row-color;
6268
+ font-size: 13px;
6269
+ font-weight: 400;
6270
+ line-height: 2;
6339
6271
 
6340
- &.major {
6341
- color: @severity-icon-major-color;
6342
- }
6272
+ &:first-child {
6273
+ height: 55px;
6343
6274
 
6344
- &.warning {
6345
- color: @severity-icon-warning-color;
6346
- }
6275
+ button {
6276
+ height: 55px;
6277
+ min-width: 100% !important;
6278
+ }
6347
6279
 
6348
- &.info {
6349
- color: @severity-icon-info-color;
6350
- }
6351
- }
6352
- }
6280
+ strong {
6281
+ color: @datepicker-table-header-row-color;
6282
+ }
6283
+ }
6353
6284
 
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
- }
6285
+ th {
6286
+ button:hover {
6287
+ background-color: @datepicker-table-header-row-btn-bg-color;
6288
+ }
6365
6289
 
6366
- // Invalid state
6367
- .default-dropdown.dropdown-input-invalid {
6368
- .default-dropdown-color-set();
6290
+ small {
6291
+ font-size: 13px;
6292
+ font-weight: 100;
6293
+ }
6369
6294
 
6370
- .default-dropdown-field {
6371
- background-color: @default-dropdown-invalid-bg-color;
6372
- border: @default-dropdown-invalid-border;
6373
- box-shadow: none;
6374
- }
6375
- }
6295
+ &:first-child, &:last-child {
6296
+ button {
6297
+ font-size: 12px;
6376
6298
 
6377
- // Day of month mode
6378
- .default-dropdown.day-of-month {
6379
- .default-dropdown-color-set();
6299
+ &:hover {
6300
+ color: @datepicker-table-header-row-btn-hover-bg-color;
6301
+ }
6302
+ }
6303
+ }
6304
+ }
6305
+ }
6380
6306
 
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;
6307
+ tr {
6308
+ background-color: @datepicker-table-row-bg-color;
6388
6309
 
6389
- &:before {
6390
- content: "";
6391
- }
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
+ }
6392
6322
 
6393
- &:after {
6394
- content: "";
6395
- }
6396
- }
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
+ }
6397
6329
 
6398
- &.placeholder {
6399
- .description {
6400
- display: none;
6401
- }
6402
- }
6403
- }
6330
+ td button {
6331
+ background-color: @datepicker-table-header-row-btn-bg-color;
6332
+ border-radius: 50%;
6404
6333
 
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;
6334
+ &:hover, &.active {
6335
+ background-color: @datepicker-table-header-row-btn-hover-active-bg-color;
6336
+ }
6415
6337
 
6416
- &:before {
6417
- content: "";
6418
- }
6338
+ &.btn-info.active {
6339
+ background-color: @datepicker-table-header-row-btn-info-active-bg-color;
6419
6340
 
6420
- &:after {
6421
- content: "";
6422
- }
6423
- }
6341
+ span {
6342
+ color: @datepicker-table-header-row-btn-info-active-color;
6343
+ }
6344
+ }
6424
6345
 
6425
- &:hover, &:focus {
6426
- background-color: @default-dropdown-day-of-month-list-item-hover-focus-bg-color;
6346
+ .text-muted {
6347
+ color: @datepicker-table-header-row-btn-text-muted-color;
6348
+ }
6349
+
6350
+ .text-info {
6351
+ color: @datepicker-table-header-row-btn-text-info-color;
6352
+ }
6353
+ }
6354
+ }
6427
6355
  }
6428
6356
  }
6429
- }
6430
- }
6431
- }
6432
6357
 
6433
- // Selected item description shown
6434
- .default-dropdown.use-description {
6435
- .default-dropdown-field {
6436
- .description {
6437
- display: inline;
6358
+ .timepicker {
6359
+ background-color: @timepicker-bg-color;
6360
+ box-shadow: @timepicker-box-shadow;
6438
6361
 
6439
- &:before {
6440
- content: "";
6441
- }
6362
+ .uib-timepicker {
6363
+ margin: 0 auto;
6442
6364
 
6443
- &:after {
6444
- content: "";
6445
- }
6446
- }
6447
- }
6448
- }
6365
+ tbody {
6366
+ tr {
6367
+ background-color: @timepicker-table-row-bg-color;
6449
6368
 
6450
- .default-dropdown.show-description {
6451
- .default-dropdown-field {
6452
- .description {
6453
- display: inline;
6369
+ &:first-child, &:last-child {
6370
+ a {
6371
+ font-size: 12px;
6372
+ color: @timepicker-table-row-color;
6454
6373
 
6455
- &:before {
6456
- content: " (";
6457
- }
6374
+ &:hover {
6375
+ color: @timepicker-table-row-hover-color;
6376
+ }
6458
6377
 
6459
- &:after {
6460
- content: ")";
6461
- }
6462
- }
6463
- }
6464
- }
6378
+ &:focus, &:active {
6379
+ outline: none;
6380
+ }
6381
+ }
6382
+ }
6465
6383
 
6466
- .no-selected-option-style {
6467
- .default-dropdown {
6468
- .default-dropdown-field {
6469
- border: none;
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
+ }
6470
6395
 
6471
- &:active, &:focus, &:hover {
6472
- background-color: unset;
6473
- box-shadow: none;
6474
- }
6475
- }
6476
- }
6477
- }
6396
+ input {
6397
+ color: @timepicker-table-cell-color;
6398
+ font-weight: 400;
6478
6399
 
6479
- .date-time-picker {
6480
- .date-time-picker-color-set();
6400
+ &:focus, &:active {
6401
+ border: @timepicker-table-cell-focus-active-border;
6402
+ }
6403
+ }
6481
6404
 
6482
- outline: none;
6483
- display: flex;
6484
- flex-wrap: nowrap;
6485
- width: 100%;
6486
- position: relative;
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
+ }
6487
6411
 
6488
- &:after {
6489
- clear: both;
6490
- }
6412
+ button {
6413
+ color: @timepicker-table-cell-btn-color;
6414
+ font-weight: 500;
6415
+ margin-left: 6px;
6491
6416
 
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
- }
6499
-
6500
- .datetimepicker-input {
6501
- font-size: 13px;
6502
- border-radius: 2px 0 0 2px;
6503
- width: 120px;
6504
- padding-left: 14px;
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
+ }
6505
6422
 
6506
- &[disabled] {
6507
- opacity: 1;
6508
- }
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
+ }
6509
6431
 
6510
- &:focus, &:active {
6511
- border: @datetimepicker-input-focus-active-border;
6432
+ a.disabled {
6433
+ opacity: 1;
6434
+ }
6435
+ }
6436
+ }
6437
+ }
6438
+ }
6439
+ }
6512
6440
  }
6513
6441
 
6514
- &.date-range {
6515
- min-width: 150px;
6442
+ .buttons-block {
6443
+ border-top: @buttons-block-border-top;
6444
+ padding: 8px 24px;
6445
+ text-align: right;
6516
6446
 
6517
6447
  &.pick-time {
6518
- width: 285px;
6448
+ margin-top: -3px;
6519
6449
  }
6520
- }
6521
- }
6522
6450
 
6523
- .datetimepicker-open-button {
6524
- border-radius: 0 2px 2px 0;
6525
- width: 42px;
6526
- border-left: none;
6527
- vertical-align: top;
6528
-
6529
- &:hover {
6530
- box-shadow: @datetimepicker-open-btn-hover-box-shadow;
6531
- }
6532
-
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;
6451
+ button:not(:first-child) {
6452
+ margin-left: 8px;
6453
+ }
6537
6454
  }
6455
+ }
6456
+ }
6538
6457
 
6539
- .igz-icon-dropdown {
6540
- font-size: 11px;
6541
- line-height: 1.4;
6542
- vertical-align: bottom;
6543
- }
6458
+ .default-dropdown {
6459
+ .default-dropdown-color-set();
6460
+ .severity-icons-color-set();
6544
6461
 
6545
- .revert-icon {
6546
- display: block;
6547
- transform: rotate(180deg);
6548
- line-height: 1;
6549
- }
6550
- }
6462
+ position: relative;
6463
+ height: 36px;
6551
6464
 
6552
- .options-dropdown {
6553
- position: fixed;
6554
- width: 100%;
6555
- padding: 9px 0 0;
6556
- z-index: 5000;
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;
6557
6471
  font-family: @font-family-sans-serif;
6558
6472
  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;
6565
-
6566
- &.visible {
6567
- visibility: visible;
6568
- }
6473
+ margin-top: 0;
6474
+ display: flex;
6475
+ align-items: center;
6476
+ justify-content: space-between;
6569
6477
 
6570
- .options-list {
6571
- list-style: none;
6572
- margin: 0;
6573
- padding: 0;
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;
6574
6488
 
6575
- .options-list-item {
6576
- height: 32px;
6577
- line-height: 32px;
6578
- margin: 0;
6579
- padding: 0 15px;
6580
- float: none;
6489
+ > span {
6490
+ overflow: hidden;
6491
+ text-overflow: ellipsis;
6492
+ width: 100%;
6493
+ white-space: nowrap;
6494
+ }
6581
6495
 
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
- }
6496
+ input.input-name {
6497
+ border: none;
6498
+ background-color: inherit;
6499
+ outline: none;
6589
6500
 
6590
- &:hover {
6591
- background-color: @options-list-item-hover-bg-color;
6501
+ &[readonly] {
6502
+ cursor: pointer;
6503
+ user-select: none;
6504
+ pointer-events: none;
6592
6505
  }
6593
6506
 
6594
- &:last-child {
6595
- margin-bottom: 1px;
6507
+ &.non-editable {
6508
+ opacity: 1;
6596
6509
  }
6597
6510
  }
6511
+ }
6598
6512
 
6599
- .separator {
6600
- border-bottom: @options-list-separator-border-bottom;
6601
- margin: 8px 0 7px;
6513
+ .dropdown-arrow {
6514
+ margin-right: 14px;
6515
+
6516
+ span.igz-icon-dropdown {
6517
+ font-size: 11px;
6602
6518
  }
6603
6519
  }
6604
- }
6605
6520
 
6606
- &.disabled:after {
6607
- opacity: 0.5;
6608
- }
6521
+ &:focus {
6522
+ outline: none;
6609
6523
 
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;
6524
+ .dropdown-selected-item {
6525
+ font-family: @font-family-sans-serif;
6526
+ }
6527
+ }
6617
6528
 
6618
- &.date-range {
6619
- width: 538px;
6529
+ &:hover, &:focus {
6530
+ background-color: @default-dropdown-field-hover-focus-bg-color;
6531
+ box-shadow: @default-dropdown-field-hover-focus-box-shadow;
6620
6532
  }
6621
6533
 
6622
- &.visible {
6623
- visibility: visible;
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;
6624
6538
  }
6625
6539
 
6626
- .datepicker-wrapper {
6627
- width: 255px;
6628
- display: inline-block;
6629
- padding: 4px 0 0;
6540
+ &.placeholder {
6541
+ height: 36px;
6542
+ font-weight: 500;
6630
6543
 
6631
- &:first-child {
6632
- padding-left: 20px;
6633
- margin-right: 23px;
6544
+ .description {
6545
+ display: none;
6634
6546
  }
6547
+ }
6635
6548
 
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
- }
6646
-
6647
- &.glyphicon-chevron-left {
6648
- left: -2px;
6649
- .igz-icon-left;
6650
- }
6549
+ &.disabled {
6550
+ pointer-events: none;
6551
+ background-color: @default-dropdown-field-disabled-bg-color;
6552
+ opacity: 0.6;
6651
6553
 
6652
- &.glyphicon-chevron-right {
6653
- .igz-icon-right;
6654
- }
6554
+ .dropdown-arrow span.igz-icon-dropdown {
6555
+ opacity: 0.4;
6655
6556
  }
6557
+ }
6656
6558
 
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;
6559
+ &.readonly {
6560
+ pointer-events: none;
6561
+ background-color: @default-dropdown-field-readonly-bg-color;
6562
+ }
6665
6563
 
6666
- &.separator {
6667
- border-bottom: @datepicker-calendar-separator-border-bottom;
6668
- }
6564
+ .name {
6565
+ text-transform: capitalize;
6566
+ }
6669
6567
 
6670
- .uib-daypicker {
6671
- outline: none;
6672
- }
6568
+ .description {
6569
+ display: none;
6570
+ color: @default-dropdown-field-description-color;
6673
6571
 
6674
- .btn {
6675
- border: none;
6676
- padding: 5px 0;
6677
- outline: none;
6572
+ &:before {
6573
+ content: " (";
6574
+ }
6678
6575
 
6679
- &:not(.active) {
6680
- &[disabled] {
6681
- opacity: 1;
6682
- color: @datepicker-calendar-btn-disabled-color;
6576
+ &:after {
6577
+ content: ")";
6578
+ }
6579
+ }
6580
+ }
6683
6581
 
6684
- .text-info {
6685
- color: @datepicker-calendar-btn-text-info-disabled-color;
6686
- }
6687
- }
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
+ }
6688
6587
 
6689
- &:not([disabled]) {
6690
- .text-info {
6691
- color: @datepicker-calendar-btn-text-info-color;
6692
- }
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
+ }
6693
6592
 
6694
- .text-muted {
6695
- color: @datepicker-calendar-btn-text-muted-color;
6696
- }
6697
- }
6698
- }
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;
6601
+ z-index: 1000;
6602
+ min-width: 100%;
6603
+ margin-top: 2px;
6604
+ margin-bottom: 2px;
6605
+
6606
+ &.dropdown-overlap {
6607
+ position: fixed;
6608
+ min-width: unset;
6609
+ }
6610
+
6611
+ .list {
6612
+ padding: 0;
6613
+ margin: 0;
6614
+
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;
6628
+
6629
+ &.disabled {
6630
+ opacity: 0.6;
6631
+ cursor: not-allowed;
6699
6632
  }
6700
6633
 
6701
- table {
6702
- margin: 0;
6703
- width: 240px;
6704
- outline: none;
6634
+ &:first-child {
6635
+ margin-top: 7px;
6636
+ }
6705
6637
 
6706
- thead tr {
6707
- color: @datepicker-table-header-row-color;
6708
- font-size: 13px;
6709
- font-weight: 400;
6710
- line-height: 2;
6638
+ &:last-child {
6639
+ margin-bottom: 8px;
6640
+ }
6711
6641
 
6712
- &:first-child {
6713
- height: 55px;
6642
+ .list-item-block {
6643
+ display: flex;
6644
+ align-items: center;
6645
+ margin: 0 16px;
6714
6646
 
6715
- button {
6716
- height: 55px;
6717
- min-width: 100% !important;
6718
- }
6647
+ .list-item-label {
6648
+ display: flex;
6649
+ flex-direction: column;
6719
6650
 
6720
- strong {
6721
- color: @datepicker-table-header-row-color;
6722
- }
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;
6723
6658
  }
6724
6659
 
6725
- th {
6726
- button:hover {
6727
- background-color: @datepicker-table-header-row-btn-bg-color;
6728
- }
6660
+ .description {
6661
+ color: @default-dropdown-container-list-item-description-color;
6662
+ overflow: hidden;
6663
+ text-overflow: ellipsis;
6664
+ white-space: nowrap;
6729
6665
 
6730
- small {
6731
- font-size: 13px;
6732
- font-weight: 100;
6666
+ &:before {
6667
+ content: " (";
6733
6668
  }
6734
6669
 
6735
- &:first-child, &:last-child {
6736
- button {
6737
- font-size: 12px;
6738
-
6739
- &:hover {
6740
- color: @datepicker-table-header-row-btn-hover-bg-color;
6741
- }
6742
- }
6670
+ &:after {
6671
+ content: ")";
6743
6672
  }
6744
6673
  }
6745
6674
  }
6675
+ }
6746
6676
 
6747
- tr {
6748
- background-color: @datepicker-table-row-bg-color;
6749
-
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
- }
6677
+ .selected-item-icon {
6678
+ text-align: right;
6679
+ margin-right: 16px;
6680
+ }
6762
6681
 
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
- }
6682
+ &:hover, &:focus:not(.disabled) {
6683
+ background-color: @default-dropdown-container-list-item-hover-focus-bg-color;
6684
+ }
6769
6685
 
6770
- td button {
6771
- background-color: @datepicker-table-header-row-btn-bg-color;
6772
- border-radius: 50%;
6686
+ &.list-item-description {
6687
+ padding: 5px 0;
6688
+ }
6773
6689
 
6774
- &:hover, &.active {
6775
- background-color: @datepicker-table-header-row-btn-hover-active-bg-color;
6776
- }
6690
+ &.selected-item {
6691
+ color: @default-dropdown-container-list-item-selected-item-color;
6692
+ }
6693
+ }
6694
+ }
6777
6695
 
6778
- &.btn-info.active {
6779
- background-color: @datepicker-table-header-row-btn-info-active-bg-color;
6696
+ .add-button-wrapper {
6697
+ padding: 0 7px 7px 7px;
6698
+ line-height: normal;
6780
6699
 
6781
- span {
6782
- color: @datepicker-table-header-row-btn-info-active-color;
6783
- }
6784
- }
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;
6785
6706
 
6786
- .text-muted {
6787
- color: @datepicker-table-header-row-btn-text-muted-color;
6788
- }
6707
+ &:hover, &:active {
6708
+ color: @add-button-hover-active-color;
6709
+ }
6789
6710
 
6790
- .text-info {
6791
- color: @datepicker-table-header-row-btn-text-info-color;
6792
- }
6793
- }
6794
- }
6711
+ &:focus {
6712
+ color: @add-button-focus-color;
6795
6713
  }
6796
6714
  }
6715
+ }
6797
6716
 
6798
- .timepicker {
6799
- background-color: @timepicker-bg-color;
6800
- box-shadow: @timepicker-box-shadow;
6717
+ .transclude-container {
6718
+ border-top: @transclude-container-border-top;
6719
+ height: 48px;
6720
+ padding: 8px 0;
6801
6721
 
6802
- .uib-timepicker {
6803
- margin: 0 auto;
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;
6804
6732
 
6805
- tbody {
6806
- tr {
6807
- background-color: @timepicker-table-row-bg-color;
6733
+ &:hover, &:focus {
6734
+ background-color: @transclude-container-item-hover-focus-bg-color;
6735
+ }
6736
+ }
6737
+ }
6738
+ }
6808
6739
 
6809
- &:first-child, &:last-child {
6810
- a {
6811
- font-size: 12px;
6812
- color: @timepicker-table-row-color;
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;
6813
6747
 
6814
- &:hover {
6815
- color: @timepicker-table-row-hover-color;
6816
- }
6748
+ &:not(.custom-color) {
6749
+ color: @dropdown-icon-not-custom-color;
6750
+ }
6817
6751
 
6818
- &:focus, &:active {
6819
- outline: none;
6820
- }
6821
- }
6822
- }
6752
+ &.severity-icon {
6753
+ font-size: 19px;
6823
6754
 
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
- }
6755
+ &.critical {
6756
+ color: @severity-icon-critical-color;
6757
+ }
6835
6758
 
6836
- input {
6837
- color: @timepicker-table-cell-color;
6838
- font-weight: 400;
6759
+ &.major {
6760
+ color: @severity-icon-major-color;
6761
+ }
6839
6762
 
6840
- &:focus, &:active {
6841
- border: @timepicker-table-cell-focus-active-border;
6842
- }
6843
- }
6763
+ &.warning {
6764
+ color: @severity-icon-warning-color;
6765
+ }
6844
6766
 
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
- }
6767
+ &.info {
6768
+ color: @severity-icon-info-color;
6769
+ }
6770
+ }
6771
+ }
6851
6772
 
6852
- button {
6853
- color: @timepicker-table-cell-btn-color;
6854
- font-weight: 500;
6855
- margin-left: 6px;
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
+ }
6856
6784
 
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
- }
6785
+ // Invalid state
6786
+ .default-dropdown.dropdown-input-invalid {
6787
+ .default-dropdown-color-set();
6862
6788
 
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
- }
6789
+ .default-dropdown-field {
6790
+ background-color: @default-dropdown-invalid-bg-color;
6791
+ border: @default-dropdown-invalid-border;
6792
+ box-shadow: none;
6793
+ }
6794
+ }
6871
6795
 
6872
- a.disabled {
6873
- opacity: 1;
6874
- }
6875
- }
6876
- }
6796
+ // Day of month mode
6797
+ .default-dropdown.day-of-month {
6798
+ .default-dropdown-color-set();
6799
+
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;
6807
+
6808
+ &:before {
6809
+ content: "";
6810
+ }
6811
+
6812
+ &:after {
6813
+ content: "";
6814
+ }
6815
+ }
6816
+
6817
+ &.placeholder {
6818
+ .description {
6819
+ display: none;
6820
+ }
6821
+ }
6822
+ }
6823
+
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;
6834
+
6835
+ &:before {
6836
+ content: "";
6837
+ }
6838
+
6839
+ &:after {
6840
+ content: "";
6877
6841
  }
6878
6842
  }
6843
+
6844
+ &:hover, &:focus {
6845
+ background-color: @default-dropdown-day-of-month-list-item-hover-focus-bg-color;
6846
+ }
6879
6847
  }
6880
6848
  }
6849
+ }
6850
+ }
6881
6851
 
6882
- .buttons-block {
6883
- border-top: @buttons-block-border-top;
6884
- padding: 8px 24px;
6885
- text-align: right;
6852
+ // Selected item description shown
6853
+ .default-dropdown.use-description {
6854
+ .default-dropdown-field {
6855
+ .description {
6856
+ display: inline;
6886
6857
 
6887
- &.pick-time {
6888
- margin-top: -3px;
6858
+ &:before {
6859
+ content: "";
6889
6860
  }
6890
6861
 
6891
- button:not(:first-child) {
6892
- margin-left: 8px;
6862
+ &:after {
6863
+ content: "";
6864
+ }
6865
+ }
6866
+ }
6867
+ }
6868
+
6869
+ .default-dropdown.show-description {
6870
+ .default-dropdown-field {
6871
+ .description {
6872
+ display: inline;
6873
+
6874
+ &:before {
6875
+ content: " (";
6876
+ }
6877
+
6878
+ &:after {
6879
+ content: ")";
6880
+ }
6881
+ }
6882
+ }
6883
+ }
6884
+
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
  }
@@ -6971,51 +6971,210 @@ yx-axis
6971
6971
  }
6972
6972
  }
6973
6973
 
6974
- .control-panel-log-row {
6975
- .control-panel-log-table-row-color-set();
6974
+ .more-info-wrapper {
6975
+ .more-info-color-set();
6976
6976
 
6977
- .log-entry {
6978
- .log-entry-time {
6979
- color: @log-entry-time-color;
6977
+ position: relative;
6978
+ display: inline-flex;
6979
+ align-items: center;
6980
+ height: 36px;
6981
+ margin-left: 8px;
6982
+
6983
+ .question-mark {
6984
+ cursor: default;
6985
+
6986
+ &::before {
6987
+ color: @icon-help-round-before-color;
6988
+ background-color: @icon-help-round-before-bg-color;
6980
6989
  }
6981
6990
 
6982
- .log-entry-level-debug {
6983
- color: @log-entry-level-debug-color;
6991
+ &:hover {
6992
+ &::before {
6993
+ color: @icon-help-round-hover-before-color;
6994
+ }
6995
+
6996
+ + .row-description-wrapper.row-description {
6997
+ color: @icon-help-description-hover-color;
6998
+ }
6984
6999
  }
6985
7000
 
6986
- .log-entry-level-info {
6987
- color: @log-entry-level-info-color;
7001
+ &.igz-icon-alert-message {
7002
+ &::before {
7003
+ color: @icon-warn-hover-before-color;
7004
+ background-color: @icon-warn-before-bg-color;
7005
+ }
7006
+
7007
+ &:hover {
7008
+ &::before {
7009
+ color: @icon-warn-before-color;
7010
+ }
7011
+ }
6988
7012
  }
6989
7013
 
6990
- .log-entry-level-warn, .log-entry-level-warning {
6991
- color: @log-entry-level-warn-color;
7014
+ &.click-trigger {
7015
+ cursor: pointer;
6992
7016
  }
6993
7017
 
6994
- .log-entry-level-error {
6995
- color: @log-entry-level-error-color;
7018
+ &+ .row-description-wrapper {
7019
+ display: none;
6996
7020
  }
6997
7021
 
6998
- .log-entry-message {
6999
- line-break: anywhere;
7000
- font-weight: 600;
7022
+ &:not(.click-trigger):hover + .row-description-wrapper,
7023
+ &.open + .row-description-wrapper {
7024
+ display: block;
7001
7025
  }
7002
7026
  }
7003
- }
7004
-
7005
- .igz-multiple-checkboxes {
7006
- .multiple-checkboxes-color-set();
7007
7027
 
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;
7028
+ .row-description-wrapper {
7029
+ position: fixed;
7030
+ z-index: 4;
7031
+ }
7015
7032
 
7016
- .multiple-checkboxes-option {
7017
- display: flex;
7018
- margin: 5px 0;
7033
+ .row-description {
7034
+ width: 240px;
7035
+ padding: 16px 19px;
7036
+ position: absolute;
7037
+ border-radius: 2px;
7038
+ box-shadow: @row-description-box-shadow;
7039
+ background-color: @row-description-bg-color;
7040
+ color: @row-description-color;
7041
+ font-family: @font-family-sans-serif;
7042
+ font-size: 12px;
7043
+ font-weight: 400;
7044
+ white-space: pre-line;
7045
+ line-height: normal;
7046
+ overflow-wrap: break-word;
7047
+
7048
+ &::before {
7049
+ position: absolute;
7050
+ content: '';
7051
+ }
7052
+
7053
+ &.top,
7054
+ &.bottom {
7055
+ left: -114px;
7056
+
7057
+ &::before {
7058
+ right: calc(50% - 9px);
7059
+ }
7060
+
7061
+ &-left {
7062
+ left: -220px;
7063
+
7064
+ &::before {
7065
+ right: 4px;
7066
+ }
7067
+ }
7068
+
7069
+ &-right {
7070
+ left: -6px;
7071
+
7072
+ &::before {
7073
+ right: calc(100% - 22px);
7074
+ }
7075
+ }
7076
+ }
7077
+
7078
+ &.top,
7079
+ &.top-left,
7080
+ &.top-right {
7081
+ bottom: 35px;
7082
+
7083
+ &::before {
7084
+ .triangle-arrow(down; @row-description-triangle-color; 8px; 10px);
7085
+
7086
+ bottom: -10px;
7087
+ }
7088
+ }
7089
+
7090
+ &.bottom,
7091
+ &.bottom-left,
7092
+ &.bottom-right {
7093
+ top: 8px;
7094
+
7095
+ &::before {
7096
+ .triangle-arrow(up; @row-description-triangle-color; 8px; 10px);
7097
+
7098
+ top: -10px;
7099
+ }
7100
+ }
7101
+
7102
+ &.right,
7103
+ &.left {
7104
+ top: -30px;
7105
+
7106
+ &::before {
7107
+ top: 7px;
7108
+ }
7109
+ }
7110
+
7111
+ &.right {
7112
+ left: 26px;
7113
+
7114
+ &::before {
7115
+ .triangle-arrow(right; @row-description-triangle-color; 8px; 10px);
7116
+
7117
+ left: -8px;
7118
+ }
7119
+ }
7120
+
7121
+ &.left {
7122
+ left: -250px;
7123
+
7124
+ &::before {
7125
+ .triangle-arrow(left; @row-description-triangle-color; 8px; 10px);
7126
+
7127
+ right: -8px;
7128
+ }
7129
+ }
7130
+ }
7131
+ }
7132
+
7133
+ .control-panel-log-row {
7134
+ .control-panel-log-table-row-color-set();
7135
+
7136
+ .log-entry {
7137
+ .log-entry-time {
7138
+ color: @log-entry-time-color;
7139
+ }
7140
+
7141
+ .log-entry-level-debug {
7142
+ color: @log-entry-level-debug-color;
7143
+ }
7144
+
7145
+ .log-entry-level-info {
7146
+ color: @log-entry-level-info-color;
7147
+ }
7148
+
7149
+ .log-entry-level-warn, .log-entry-level-warning {
7150
+ color: @log-entry-level-warn-color;
7151
+ }
7152
+
7153
+ .log-entry-level-error {
7154
+ color: @log-entry-level-error-color;
7155
+ }
7156
+
7157
+ .log-entry-message {
7158
+ line-break: anywhere;
7159
+ font-weight: 600;
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;
7019
7178
 
7020
7179
  .more-info-wrapper {
7021
7180
  height: auto;
@@ -7198,251 +7357,92 @@ yx-axis
7198
7357
  }
7199
7358
  }
7200
7359
 
7201
- .more-info-wrapper {
7202
- .more-info-color-set();
7360
+ .igz-navigation-tabs {
7361
+ .navigation-tabs-color-set();
7203
7362
 
7204
- position: relative;
7205
- display: inline-flex;
7206
- align-items: center;
7207
- height: 36px;
7208
- margin-left: 8px;
7363
+ background-color: @navigation-tabs-bg-color;
7364
+ height: 56px;
7365
+ padding-top: 7px;
7209
7366
 
7210
- .question-mark {
7211
- cursor: default;
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;
7375
+ cursor: pointer;
7376
+ border-bottom: @navigation-tab-border-bottom;
7377
+ box-sizing: content-box;
7212
7378
 
7213
- &::before {
7214
- color: @icon-help-round-before-color;
7215
- background-color: @icon-help-round-before-bg-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;
7216
7383
  }
7217
7384
 
7218
7385
  &:hover {
7219
- &::before {
7220
- color: @icon-help-round-hover-before-color;
7221
- }
7386
+ background-color: @navigation-tab-hover-bg-color;
7387
+ }
7222
7388
 
7223
- + .row-description-wrapper.row-description {
7224
- color: @icon-help-description-hover-color;
7225
- }
7389
+ &.active {
7390
+ background-color: @navigation-tab-active-bg-color;
7226
7391
  }
7227
7392
 
7228
- &.igz-icon-alert-message {
7229
- &::before {
7230
- color: @icon-warn-hover-before-color;
7231
- background-color: @icon-warn-before-bg-color;
7232
- }
7393
+ @media screen and (max-width: 940px) {
7394
+ padding: 15px 12px 0;
7395
+ }
7396
+ }
7397
+ }
7233
7398
 
7234
- &:hover {
7235
- &::before {
7236
- color: @icon-warn-before-color;
7237
- }
7238
- }
7399
+ .igz-number-input {
7400
+ .number-input-color-set();
7401
+
7402
+ min-width: 115px;
7403
+ font-family: @font-family-sans-serif;
7404
+ font-size: 14px;
7405
+ font-weight: 400;
7406
+ height: 36px;
7407
+ position: relative;
7408
+ background-color: @number-input-bg-color;
7409
+ border: @number-input-border;
7410
+ border-radius: 2px;
7411
+ color: @number-input-color;
7412
+ display: flex;
7413
+ justify-content: flex-start;
7414
+ align-items: center;
7415
+ padding: 0 10px 0 11px;
7416
+ z-index: 3;
7417
+
7418
+ &:not(.disabled) {
7419
+ &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
7420
+ background-color: @number-input-not-disabled-focus-invalid-bg-color;
7421
+ border: @number-input-not-disabled-focus-invalid-border;
7422
+ box-shadow: none;
7423
+ outline: none;
7239
7424
  }
7240
7425
 
7241
- &.click-trigger {
7242
- cursor: pointer;
7426
+ &:focus-within, &.focused {
7427
+ outline: 0;
7428
+ border: @number-input-not-disabled-hover-focus-border;
7243
7429
  }
7244
7430
 
7245
- &+ .row-description-wrapper {
7246
- display: none;
7431
+ &.invalid:not(.pristine), &.invalid.submitted {
7432
+ background-color: @number-input-not-disabled-invalid-bg-color;
7433
+ border: @number-input-not-disabled-invalid-border;
7434
+ box-shadow: none;
7247
7435
  }
7248
7436
 
7249
- &:not(.click-trigger):hover + .row-description-wrapper,
7250
- &.open + .row-description-wrapper {
7251
- display: block;
7437
+ &:focus.ng-valid, &:focus.ng-pristine {
7438
+ border: @number-input-not-disabled-valid-border;
7439
+ box-shadow: none;
7440
+ outline: none;
7252
7441
  }
7253
7442
  }
7254
7443
 
7255
- .row-description-wrapper {
7256
- position: fixed;
7257
- z-index: 4;
7258
- }
7259
-
7260
- .row-description {
7261
- width: 240px;
7262
- padding: 16px 19px;
7263
- position: absolute;
7264
- border-radius: 2px;
7265
- box-shadow: @row-description-box-shadow;
7266
- background-color: @row-description-bg-color;
7267
- color: @row-description-color;
7268
- font-family: @font-family-sans-serif;
7269
- font-size: 12px;
7270
- font-weight: 400;
7271
- white-space: pre-line;
7272
- line-height: normal;
7273
- overflow-wrap: break-word;
7274
-
7275
- &::before {
7276
- position: absolute;
7277
- content: '';
7278
- }
7279
-
7280
- &.top,
7281
- &.bottom {
7282
- left: -114px;
7283
-
7284
- &::before {
7285
- right: calc(50% - 9px);
7286
- }
7287
-
7288
- &-left {
7289
- left: -220px;
7290
-
7291
- &::before {
7292
- right: 4px;
7293
- }
7294
- }
7295
-
7296
- &-right {
7297
- left: -6px;
7298
-
7299
- &::before {
7300
- right: calc(100% - 22px);
7301
- }
7302
- }
7303
- }
7304
-
7305
- &.top,
7306
- &.top-left,
7307
- &.top-right {
7308
- bottom: 35px;
7309
-
7310
- &::before {
7311
- .triangle-arrow(down; @row-description-triangle-color; 8px; 10px);
7312
-
7313
- bottom: -10px;
7314
- }
7315
- }
7316
-
7317
- &.bottom,
7318
- &.bottom-left,
7319
- &.bottom-right {
7320
- top: 8px;
7321
-
7322
- &::before {
7323
- .triangle-arrow(up; @row-description-triangle-color; 8px; 10px);
7324
-
7325
- top: -10px;
7326
- }
7327
- }
7328
-
7329
- &.right,
7330
- &.left {
7331
- top: -30px;
7332
-
7333
- &::before {
7334
- top: 7px;
7335
- }
7336
- }
7337
-
7338
- &.right {
7339
- left: 26px;
7340
-
7341
- &::before {
7342
- .triangle-arrow(right; @row-description-triangle-color; 8px; 10px);
7343
-
7344
- left: -8px;
7345
- }
7346
- }
7347
-
7348
- &.left {
7349
- left: -250px;
7350
-
7351
- &::before {
7352
- .triangle-arrow(left; @row-description-triangle-color; 8px; 10px);
7353
-
7354
- right: -8px;
7355
- }
7356
- }
7357
- }
7358
- }
7359
-
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;
7375
- cursor: pointer;
7376
- border-bottom: @navigation-tab-border-bottom;
7377
- box-sizing: content-box;
7378
-
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;
7383
- }
7384
-
7385
- &:hover {
7386
- background-color: @navigation-tab-hover-bg-color;
7387
- }
7388
-
7389
- &.active {
7390
- background-color: @navigation-tab-active-bg-color;
7391
- }
7392
-
7393
- @media screen and (max-width: 940px) {
7394
- padding: 15px 12px 0;
7395
- }
7396
- }
7397
- }
7398
-
7399
- .igz-number-input {
7400
- .number-input-color-set();
7401
-
7402
- min-width: 115px;
7403
- font-family: @font-family-sans-serif;
7404
- font-size: 14px;
7405
- font-weight: 400;
7406
- height: 36px;
7407
- position: relative;
7408
- background-color: @number-input-bg-color;
7409
- border: @number-input-border;
7410
- border-radius: 2px;
7411
- color: @number-input-color;
7412
- display: flex;
7413
- justify-content: flex-start;
7414
- align-items: center;
7415
- padding: 0 10px 0 11px;
7416
- z-index: 3;
7417
-
7418
- &:not(.disabled) {
7419
- &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
7420
- background-color: @number-input-not-disabled-focus-invalid-bg-color;
7421
- border: @number-input-not-disabled-focus-invalid-border;
7422
- box-shadow: none;
7423
- outline: none;
7424
- }
7425
-
7426
- &:focus-within, &.focused {
7427
- outline: 0;
7428
- border: @number-input-not-disabled-hover-focus-border;
7429
- }
7430
-
7431
- &.invalid:not(.pristine), &.invalid.submitted {
7432
- background-color: @number-input-not-disabled-invalid-bg-color;
7433
- border: @number-input-not-disabled-invalid-border;
7434
- box-shadow: none;
7435
- }
7436
-
7437
- &:focus.ng-valid, &:focus.ng-pristine {
7438
- border: @number-input-not-disabled-valid-border;
7439
- box-shadow: none;
7440
- outline: none;
7441
- }
7442
- }
7443
-
7444
- &.additional-left-padding {
7445
- padding-left: 22px;
7444
+ &.additional-left-padding {
7445
+ padding-left: 22px;
7446
7446
  }
7447
7447
 
7448
7448
  .input-field {
@@ -8288,6 +8288,70 @@ 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
+
8291
8355
  .validating-input-field {
8292
8356
  .validating-input-field-color-set();
8293
8357
 
@@ -8625,180 +8689,420 @@ form.ng-submitted .validating-input-field {
8625
8689
  }
8626
8690
  }
8627
8691
 
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;
8692
+ .igz-info-page-actions-bar {
8693
+ .actions-buttons-block {
8694
+ margin-top: 3px;
8695
+ margin-right: 17px;
8640
8696
  }
8697
+ }
8698
+ .ncl-primary-button {
8699
+ margin-left: 9px;
8700
+ }
8641
8701
 
8642
- &.failed {
8643
- background-color: @toast-panel-failed-bg-color;
8644
- border: @toast-panel-failed-border;
8702
+ .ncl-secondary-button {
8703
+ vertical-align: top;
8704
+ position: relative;
8705
+ }
8706
+
8707
+ .btn-close {
8708
+ color: .duskThree(0.64)[@color];
8709
+ right: 0;
8710
+ position: absolute;
8711
+ margin-top: 6px;
8712
+ margin-right: 24px;
8713
+ font-size: 14px;
8714
+ line-height: 14px;
8715
+ z-index: 11;
8716
+
8717
+ &:hover {
8718
+ color: .duskThree(1)[@color];
8645
8719
  }
8720
+ }
8646
8721
 
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;
8722
+ .ncl-new-entity-button {
8723
+ display: inline-block;
8724
+ vertical-align: top;
8725
+ position: relative;
8726
+ margin-left: 15px;
8727
+ }
8656
8728
 
8657
- &.in-progress {
8658
- color: @toast-panel-status-in-progress-color;
8659
- }
8729
+ .ngdialog {
8730
+ z-index: 10000;
8731
+ }
8660
8732
 
8661
- &.failed {
8662
- color: @toast-panel-status-failed-color;
8663
- }
8733
+ .ngdialog-theme-nuclio {
8734
+ @animation-duration: 0.2s;
8735
+ @animation-function: ease;
8736
+ display: flex;
8737
+ height: 100%;
8738
+ padding: 0 50px;
8739
+ min-width: 500px;
8740
+ align-items: center;
8741
+ justify-content: center;
8664
8742
 
8665
- .panel-status-icon {
8666
- font-size: 24px;
8743
+ .ngdialog-content {
8744
+ box-shadow: 0 10px 20px 0 .black(0.25)[@color];
8745
+ animation-duration: @animation-duration;
8746
+ animation-timing-function: @animation-function;
8747
+ font-family: @font-family-sans-serif;
8748
+ font-size: 16px;
8749
+ border-radius: 2px;
8750
+ max-width: 900px;
8751
+ background-color: @white;
8752
+ z-index: 5;
8753
+ position: relative;
8754
+ padding: 19px 24px 23px 24px;
8667
8755
 
8668
- &.igz-icon-properties {
8669
- -webkit-animation: rotation 4s infinite linear;
8756
+ /*
8757
+ * Confirms, alerts
8758
+ */
8759
+ .notification-text {
8760
+ margin: 30px 30px 0 0;
8761
+ max-height: 70vh;
8762
+ overflow: auto;
8670
8763
 
8671
- @-webkit-keyframes rotation {
8672
- from {
8673
- -webkit-transform: rotate(0deg);
8674
- }
8675
- to {
8676
- -webkit-transform: rotate(359deg);
8677
- }
8764
+ .error-list {
8765
+ list-style-type: none;
8766
+
8767
+ .error-list-item {
8768
+ margin-bottom: 5px;
8678
8769
  }
8679
8770
  }
8680
8771
  }
8681
8772
 
8682
- .msg-scrollable-container {
8683
- max-height: 300px;
8684
-
8685
- .panel-status-msg {
8686
- margin: 0 8px;
8687
- }
8773
+ .notification-text.description {
8774
+ margin: 10px 30px;
8688
8775
  }
8689
- }
8690
- }
8691
-
8692
- .ncl-api-gateway-row {
8693
- .common-table-cells-container {
8694
- .common-table-cell {
8695
- &.status {
8696
- text-transform: capitalize;
8697
-
8698
- &.ready {
8699
- color: @tealish;
8700
- }
8701
8776
 
8702
- // just in case - for now these statuses will not be shown because there will be a loader
8703
- &.provisioning, &.waitingForProvisioning {
8704
- color: @pale-orange;
8705
- }
8777
+ .buttons {
8778
+ text-align: right;
8706
8779
 
8707
- &.error {
8708
- color: @darkish-pink;
8709
- }
8780
+ button:not(:first-child) {
8781
+ margin-left: 8px;
8710
8782
  }
8711
8783
  }
8712
- }
8713
-
8714
- .actions-menu {
8715
- visibility: hidden;
8716
- }
8717
8784
 
8718
- &.common-table-row {
8719
- &:hover {
8720
- .actions-menu {
8721
- visibility: visible;
8722
- }
8785
+ /*
8786
+ * Create/edit dialogs
8787
+ */
8788
+ .close-button {
8789
+ position: absolute;
8790
+ right: 24px;
8791
+ top: 26px;
8792
+ line-height: 10px;
8793
+ font-size: 14px;
8794
+ color: .duskThree(0.64)[@color];
8795
+ cursor: pointer;
8723
8796
  }
8724
- }
8725
- }
8726
8797
 
8727
- .new-api-gateway-wizard {
8728
- .new-api-gateway-wizard-color-set();
8798
+ .title {
8799
+ color: @dusk-three;
8800
+ font-family: @font-family-sans-serif;
8801
+ font-size: 20px;
8802
+ font-weight: 500;
8803
+ margin: 0 0 21px 0;
8804
+ padding-right: 24px;
8805
+ }
8729
8806
 
8730
- .content-wrapper {
8731
- .content {
8732
- .toast-status-panel {
8733
- max-width: 90vw;
8734
- margin: 16px auto 20px;
8735
- }
8807
+ .main-content {
8808
+ margin: 0 0 4px;
8736
8809
 
8737
- .api-gateway-form {
8738
- .content-body {
8739
- margin: 0 auto;
8740
- height: 400px;
8741
- display: flex;
8742
- flex-flow: row nowrap;
8743
- justify-content: center;
8744
- align-items: center;
8810
+ .field-group {
8811
+ padding: 0 0 20px;
8745
8812
 
8746
- .api-gateway-block {
8747
- flex: none;
8748
- position: relative;
8749
- max-width: 320px;
8750
- padding: 16px 24px;
8751
- border: @api-gateway-block-border;
8752
- border-radius: 2px;
8753
- background-color: @api-gateway-block-bg-color;
8754
- box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
8755
- transition: box-shadow .3s ease-in-out 0s;
8813
+ .field-label {
8814
+ color: @dusk-three;
8815
+ font-size: 14px;
8816
+ font-weight: 500;
8817
+ padding: 0;
8818
+ min-width: 50px;
8819
+ margin: 0 0 2px;
8820
+ }
8756
8821
 
8757
- // important for not waiting to animation to finish when removing/promoting canary function
8758
- // (`ng-leave` and `ng-leave-active` are assigned by the `ng-if` directive when its scope
8759
- // expression evaluates to a falsy value) see https://docs.angularjs.org/api/ng/directive/ngIf
8760
- &.ng-leave.ng-leave-active {
8761
- transition: none 0s 0s;
8762
- }
8822
+ .field-input {
8823
+ position: relative;
8824
+ width: 400px;
8763
8825
 
8764
- &:hover, &:focus-within {
8765
- box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
8826
+ .validating-input-field {
8827
+ .input-field {
8828
+ padding-left: 17px;
8766
8829
  }
8767
8830
 
8768
- .block-title {
8769
- text-align: center;
8770
- font-weight: bold;
8771
- font-size: 16px;
8772
- color: @api-gateway-block-title-font-color;
8773
- margin-bottom: 16px;
8831
+ .input-placeholder {
8832
+ left: 18px;
8833
+ font-style: italic;
8774
8834
  }
8775
8835
  }
8776
8836
 
8777
- .connector, .connector-split {
8778
- flex: 1 1 0;
8779
- border-top: 1px solid @connector-line-stroke-color;
8780
- }
8781
-
8782
- .connector-split {
8783
- border-left: 1px solid @connector-line-stroke-color;
8784
- border-bottom: 1px solid @connector-line-stroke-color;
8785
- border-radius: 50px 0 0 50px;
8786
- height: 280px;
8787
- }
8788
-
8789
- .api-gateway-globe {
8790
- flex: none;
8791
- width: 128px;
8792
- height: 128px;
8793
- background: url('/assets/images/globe.png') center center / cover no-repeat transparent;
8837
+ .error {
8838
+ color: @darkish-pink;
8839
+ font-size: 12px;
8840
+ white-space: nowrap;
8794
8841
  }
8842
+ }
8843
+ }
8844
+ }
8845
+ }
8795
8846
 
8796
- .api-gateway-authentication,
8797
- .api-gateway-basic-settings {
8798
- .fields-wrapper {
8799
- display: flex;
8800
- flex-flow: column nowrap;
8801
- justify-content: space-around;
8847
+ &.delete-entity-dialog-wrapper {
8848
+ .ngdialog-content {
8849
+ padding: 30px 24px 23px 24px;
8850
+
8851
+ .notification-text.title {
8852
+ text-align: center;
8853
+ padding-right: 0;
8854
+ color: @darkish-pink;
8855
+ font-size: 20px;
8856
+ font-weight: 500;
8857
+ letter-spacing: normal;
8858
+ margin: 11px 0 2px;
8859
+ }
8860
+
8861
+ .notification-text.description {
8862
+ text-align: center;
8863
+ margin: 0 37px;
8864
+ font-size: 16px;
8865
+ font-weight: normal;
8866
+ letter-spacing: normal;
8867
+ color: @dusk-three;
8868
+ }
8869
+
8870
+ .nuclio-alert-icon {
8871
+ background: url('/assets/images/ic-alert-message.svg');
8872
+ height: 29px;
8873
+ width: 34px;
8874
+ margin: 0 auto;
8875
+ }
8876
+
8877
+ .buttons {
8878
+ margin-top: 30px;
8879
+ }
8880
+ }
8881
+ }
8882
+
8883
+ &.ngdialog.ngdialog-closing .ngdialog-content {
8884
+ animation-duration: @animation-duration;
8885
+ animation-timing-function: @animation-function;
8886
+ }
8887
+
8888
+ .ngdialog-overlay {
8889
+ background: .black(0.6)[@color];
8890
+ border: 2px solid @black;
8891
+ animation-duration: @animation-duration;
8892
+ animation-timing-function: @animation-function;
8893
+ }
8894
+
8895
+ &.ngdialog.ngdialog-closing .ngdialog-overlay {
8896
+ animation-duration: @animation-duration;
8897
+ animation-timing-function: @animation-function;
8898
+ }
8899
+
8900
+ &.ngdialog.ng-login-modal .ngdialog-content {
8901
+ padding: 0;
8902
+ }
8903
+ }
8904
+
8905
+ body {
8906
+ .ncl-main-wrapper {
8907
+ padding: 64px 0 0 215px;
8908
+ width: 100%;
8909
+ height: 100%;
8910
+ }
8911
+
8912
+ .table-headers {
8913
+ display: flex;
8914
+ font-size: 14px;
8915
+ font-weight: bold;
8916
+ font-style: normal;
8917
+ font-stretch: normal;
8918
+ letter-spacing: normal;
8919
+ color: @dusk-three;
8920
+ margin-bottom: 2px;
8921
+
8922
+ .key-header {
8923
+ width: 34%;
8924
+ margin-left: 16px;
8925
+
8926
+ &:not(.use-type) {
8927
+ width: 36%;
8928
+ }
8929
+ }
8930
+
8931
+ .type-header {
8932
+ width: 12%;
8933
+ }
8934
+
8935
+ .value-header {
8936
+ width: 52%;
8937
+
8938
+ &:not(.use-type) {
8939
+ width: 61%;
8940
+ }
8941
+ }
8942
+ }
8943
+
8944
+ .table-body:not(:last-child) {
8945
+ margin-bottom: 5px;
8946
+ }
8947
+ }
8948
+
8949
+
8950
+ .logs-common {
8951
+ font-family: "Source Code Pro", "Courier New", monospace;
8952
+ font-size: 14px;
8953
+ line-height: 1.1;
8954
+ text-align: left;
8955
+ white-space: pre-wrap;
8956
+ }
8957
+ .tooltip.custom-tooltip {
8958
+ transition-duration: 0s;
8959
+ z-index: 10001;
8960
+ opacity: 1;
8961
+
8962
+ .tooltip-arrow {
8963
+ display: block;
8964
+ margin-left: 0;
8965
+ position: absolute;
8966
+ top: -1px;
8967
+ width: 13px;
8968
+ height: 13px;
8969
+ transform: rotate(226deg);
8970
+ border-right: 1px solid @pale-grey;
8971
+ border-bottom: 1px solid @pale-grey;
8972
+ border-width: 1px;
8973
+ background-color: @white;
8974
+ }
8975
+
8976
+ &.bottom {
8977
+ margin-top: 8px;
8978
+ }
8979
+
8980
+ &.top {
8981
+ margin-top: 4px;
8982
+ }
8983
+
8984
+ .tooltip-inner {
8985
+ background-color: @white;
8986
+ color: @dusk-three;
8987
+ border-radius: 2px;
8988
+ font-size: 14px;
8989
+ word-wrap: break-word;
8990
+ max-width: 280px;
8991
+ padding: 29px 30px;
8992
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
8993
+ border: solid 1px @pale-grey;
8994
+ }
8995
+ }
8996
+ .ncl-api-gateway-row {
8997
+ .common-table-cells-container {
8998
+ .common-table-cell {
8999
+ &.status {
9000
+ text-transform: capitalize;
9001
+
9002
+ &.ready {
9003
+ color: @tealish;
9004
+ }
9005
+
9006
+ // just in case - for now these statuses will not be shown because there will be a loader
9007
+ &.provisioning, &.waitingForProvisioning {
9008
+ color: @pale-orange;
9009
+ }
9010
+
9011
+ &.error {
9012
+ color: @darkish-pink;
9013
+ }
9014
+ }
9015
+ }
9016
+ }
9017
+
9018
+ .actions-menu {
9019
+ visibility: hidden;
9020
+ }
9021
+
9022
+ &.common-table-row {
9023
+ &:hover {
9024
+ .actions-menu {
9025
+ visibility: visible;
9026
+ }
9027
+ }
9028
+ }
9029
+ }
9030
+
9031
+ .new-api-gateway-wizard {
9032
+ .new-api-gateway-wizard-color-set();
9033
+
9034
+ .content-wrapper {
9035
+ .content {
9036
+ .toast-status-panel {
9037
+ max-width: 90vw;
9038
+ margin: 16px auto 20px;
9039
+ }
9040
+
9041
+ .api-gateway-form {
9042
+ .content-body {
9043
+ margin: 0 auto;
9044
+ height: 400px;
9045
+ display: flex;
9046
+ flex-flow: row nowrap;
9047
+ justify-content: center;
9048
+ align-items: center;
9049
+
9050
+ .api-gateway-block {
9051
+ flex: none;
9052
+ position: relative;
9053
+ max-width: 320px;
9054
+ padding: 16px 24px;
9055
+ border: @api-gateway-block-border;
9056
+ border-radius: 2px;
9057
+ background-color: @api-gateway-block-bg-color;
9058
+ box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
9059
+ transition: box-shadow .3s ease-in-out 0s;
9060
+
9061
+ // important for not waiting to animation to finish when removing/promoting canary function
9062
+ // (`ng-leave` and `ng-leave-active` are assigned by the `ng-if` directive when its scope
9063
+ // expression evaluates to a falsy value) see https://docs.angularjs.org/api/ng/directive/ngIf
9064
+ &.ng-leave.ng-leave-active {
9065
+ transition: none 0s 0s;
9066
+ }
9067
+
9068
+ &:hover, &:focus-within {
9069
+ box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
9070
+ }
9071
+
9072
+ .block-title {
9073
+ text-align: center;
9074
+ font-weight: bold;
9075
+ font-size: 16px;
9076
+ color: @api-gateway-block-title-font-color;
9077
+ margin-bottom: 16px;
9078
+ }
9079
+ }
9080
+
9081
+ .connector, .connector-split {
9082
+ flex: 1 1 0;
9083
+ border-top: 1px solid @connector-line-stroke-color;
9084
+ }
9085
+
9086
+ .connector-split {
9087
+ border-left: 1px solid @connector-line-stroke-color;
9088
+ border-bottom: 1px solid @connector-line-stroke-color;
9089
+ border-radius: 50px 0 0 50px;
9090
+ height: 280px;
9091
+ }
9092
+
9093
+ .api-gateway-globe {
9094
+ flex: none;
9095
+ width: 128px;
9096
+ height: 128px;
9097
+ background: url('/assets/images/globe.png') center center / cover no-repeat transparent;
9098
+ }
9099
+
9100
+ .api-gateway-authentication,
9101
+ .api-gateway-basic-settings {
9102
+ .fields-wrapper {
9103
+ display: flex;
9104
+ flex-flow: column nowrap;
9105
+ justify-content: space-around;
8802
9106
 
8803
9107
  .field-wrapper {
8804
9108
  display: flex;
@@ -8877,421 +9181,117 @@ form.ng-submitted .validating-input-field {
8877
9181
  top: 24px;
8878
9182
  right: 0;
8879
9183
  }
8880
- }
8881
-
8882
- .function-name {
8883
- position: relative;
8884
-
8885
- &.percentage-exists {
8886
- padding-left: 36px;
8887
- }
8888
-
8889
- .percentage {
8890
- position: absolute;
8891
- left: -17px;
8892
- top: -4px;
8893
- width: 44px;
8894
- height: 44px;
8895
-
8896
- .percentage-background {
8897
- position: absolute;
8898
- width: 110%;
8899
- height: 110%;
8900
- background-color: @api-gateway-percentage-background-color;
8901
- border-radius: 50% 50% 0 50%;
8902
- transform: rotate(45deg);
8903
- }
8904
-
8905
- &.swap {
8906
- top: -8px;
8907
-
8908
- .percentage-background {
8909
- border-radius: 50% 0 50% 50%;
8910
- transform: rotate(-45deg);
8911
- }
8912
- }
8913
-
8914
- .percentage-value {
8915
- position: absolute;
8916
- top: 5px;
8917
- left: 2px;
8918
- width: 100%;
8919
- height: 36px;
8920
- line-height: 36px;
8921
- text-align: center;
8922
- color: @api-gateway-percentage-value-font-color;
8923
-
8924
- &:after {
8925
- content: '%';
8926
- }
8927
- }
8928
- }
8929
- }
8930
-
8931
- .function-name-title {
8932
- vertical-align: middle;
8933
- line-height: normal;
8934
- }
8935
- }
8936
- }
8937
-
8938
- .create-canary-button {
8939
- position: absolute;
8940
- bottom: -40px;
8941
- .igz-icon-add-round {
8942
- margin: 0 8px 0 0;
8943
- }
8944
- }
8945
-
8946
- .primary-canary-slider {
8947
- z-index: 1;
8948
- height: 175px;
8949
- width: 100%;
8950
- display: flex;
8951
- justify-content: flex-start;
8952
- margin-left: 20px;
8953
-
8954
- .rzslider:not([disabled]).rz-vertical {
8955
- .rz-bar {
8956
- background-color: @dark-sky-blue;
8957
- border-radius: 0;
8958
- }
8959
-
8960
- .rz-pointer {
8961
- width: 27px;
8962
- height: 27px;
8963
- background-color: @white;
8964
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
8965
- border-radius: 50%;
8966
- left: -11px !important;
8967
- outline: 0 none transparent;
8968
-
8969
- &::after {
8970
- top: 11px;
8971
- left: 11px;
8972
- width: 5px;
8973
- height: 5px;
8974
- }
8975
- }
8976
- }
8977
- }
8978
- }
8979
- }
8980
- }
8981
-
8982
- .buttons-wrapper {
8983
- position: relative;
8984
- width: 100%;
8985
- margin-top: 32px;
8986
- }
8987
- }
8988
- }
8989
- }
8990
-
8991
- .igz-info-page-actions-bar {
8992
- .actions-buttons-block {
8993
- margin-top: 3px;
8994
- margin-right: 17px;
8995
- }
8996
- }
8997
- .ncl-primary-button {
8998
- margin-left: 9px;
8999
- }
9000
-
9001
- .ncl-secondary-button {
9002
- vertical-align: top;
9003
- position: relative;
9004
- }
9005
-
9006
- .btn-close {
9007
- color: .duskThree(0.64)[@color];
9008
- right: 0;
9009
- position: absolute;
9010
- margin-top: 6px;
9011
- margin-right: 24px;
9012
- font-size: 14px;
9013
- line-height: 14px;
9014
- z-index: 11;
9015
-
9016
- &:hover {
9017
- color: .duskThree(1)[@color];
9018
- }
9019
- }
9020
-
9021
- .ncl-new-entity-button {
9022
- display: inline-block;
9023
- vertical-align: top;
9024
- position: relative;
9025
- margin-left: 15px;
9026
- }
9027
-
9028
- .ngdialog {
9029
- z-index: 10000;
9030
- }
9031
-
9032
- .ngdialog-theme-nuclio {
9033
- @animation-duration: 0.2s;
9034
- @animation-function: ease;
9035
- display: flex;
9036
- height: 100%;
9037
- padding: 0 50px;
9038
- min-width: 500px;
9039
- align-items: center;
9040
- justify-content: center;
9041
-
9042
- .ngdialog-content {
9043
- box-shadow: 0 10px 20px 0 .black(0.25)[@color];
9044
- animation-duration: @animation-duration;
9045
- animation-timing-function: @animation-function;
9046
- font-family: @font-family-sans-serif;
9047
- font-size: 16px;
9048
- border-radius: 2px;
9049
- max-width: 900px;
9050
- background-color: @white;
9051
- z-index: 5;
9052
- position: relative;
9053
- padding: 19px 24px 23px 24px;
9054
-
9055
- /*
9056
- * Confirms, alerts
9057
- */
9058
- .notification-text {
9059
- margin: 30px 30px 0 0;
9060
- max-height: 70vh;
9061
- overflow: auto;
9062
-
9063
- .error-list {
9064
- list-style-type: none;
9065
-
9066
- .error-list-item {
9067
- margin-bottom: 5px;
9068
- }
9069
- }
9070
- }
9071
-
9072
- .notification-text.description {
9073
- margin: 10px 30px;
9074
- }
9075
-
9076
- .buttons {
9077
- text-align: right;
9078
-
9079
- button:not(:first-child) {
9080
- margin-left: 8px;
9081
- }
9082
- }
9083
-
9084
- /*
9085
- * Create/edit dialogs
9086
- */
9087
- .close-button {
9088
- position: absolute;
9089
- right: 24px;
9090
- top: 26px;
9091
- line-height: 10px;
9092
- font-size: 14px;
9093
- color: .duskThree(0.64)[@color];
9094
- cursor: pointer;
9095
- }
9096
-
9097
- .title {
9098
- color: @dusk-three;
9099
- font-family: @font-family-sans-serif;
9100
- font-size: 20px;
9101
- font-weight: 500;
9102
- margin: 0 0 21px 0;
9103
- padding-right: 24px;
9104
- }
9105
-
9106
- .main-content {
9107
- margin: 0 0 4px;
9108
-
9109
- .field-group {
9110
- padding: 0 0 20px;
9111
-
9112
- .field-label {
9113
- color: @dusk-three;
9114
- font-size: 14px;
9115
- font-weight: 500;
9116
- padding: 0;
9117
- min-width: 50px;
9118
- margin: 0 0 2px;
9119
- }
9120
-
9121
- .field-input {
9122
- position: relative;
9123
- width: 400px;
9124
-
9125
- .validating-input-field {
9126
- .input-field {
9127
- padding-left: 17px;
9128
- }
9129
-
9130
- .input-placeholder {
9131
- left: 18px;
9132
- font-style: italic;
9133
- }
9134
- }
9135
-
9136
- .error {
9137
- color: @darkish-pink;
9138
- font-size: 12px;
9139
- white-space: nowrap;
9140
- }
9141
- }
9142
- }
9143
- }
9144
- }
9145
-
9146
- &.delete-entity-dialog-wrapper {
9147
- .ngdialog-content {
9148
- padding: 30px 24px 23px 24px;
9149
-
9150
- .notification-text.title {
9151
- text-align: center;
9152
- padding-right: 0;
9153
- color: @darkish-pink;
9154
- font-size: 20px;
9155
- font-weight: 500;
9156
- letter-spacing: normal;
9157
- margin: 11px 0 2px;
9158
- }
9159
-
9160
- .notification-text.description {
9161
- text-align: center;
9162
- margin: 0 37px;
9163
- font-size: 16px;
9164
- font-weight: normal;
9165
- letter-spacing: normal;
9166
- color: @dusk-three;
9167
- }
9168
-
9169
- .nuclio-alert-icon {
9170
- background: url('/assets/images/ic-alert-message.svg');
9171
- height: 29px;
9172
- width: 34px;
9173
- margin: 0 auto;
9174
- }
9175
-
9176
- .buttons {
9177
- margin-top: 30px;
9178
- }
9179
- }
9180
- }
9181
-
9182
- &.ngdialog.ngdialog-closing .ngdialog-content {
9183
- animation-duration: @animation-duration;
9184
- animation-timing-function: @animation-function;
9185
- }
9186
-
9187
- .ngdialog-overlay {
9188
- background: .black(0.6)[@color];
9189
- border: 2px solid @black;
9190
- animation-duration: @animation-duration;
9191
- animation-timing-function: @animation-function;
9192
- }
9193
-
9194
- &.ngdialog.ngdialog-closing .ngdialog-overlay {
9195
- animation-duration: @animation-duration;
9196
- animation-timing-function: @animation-function;
9197
- }
9184
+ }
9198
9185
 
9199
- &.ngdialog.ng-login-modal .ngdialog-content {
9200
- padding: 0;
9201
- }
9202
- }
9186
+ .function-name {
9187
+ position: relative;
9203
9188
 
9204
- body {
9205
- .ncl-main-wrapper {
9206
- padding: 64px 0 0 215px;
9207
- width: 100%;
9208
- height: 100%;
9209
- }
9189
+ &.percentage-exists {
9190
+ padding-left: 36px;
9191
+ }
9210
9192
 
9211
- .table-headers {
9212
- display: flex;
9213
- font-size: 14px;
9214
- font-weight: bold;
9215
- font-style: normal;
9216
- font-stretch: normal;
9217
- letter-spacing: normal;
9218
- color: @dusk-three;
9219
- margin-bottom: 2px;
9193
+ .percentage {
9194
+ position: absolute;
9195
+ left: -17px;
9196
+ top: -4px;
9197
+ width: 44px;
9198
+ height: 44px;
9220
9199
 
9221
- .key-header {
9222
- width: 34%;
9223
- margin-left: 16px;
9200
+ .percentage-background {
9201
+ position: absolute;
9202
+ width: 110%;
9203
+ height: 110%;
9204
+ background-color: @api-gateway-percentage-background-color;
9205
+ border-radius: 50% 50% 0 50%;
9206
+ transform: rotate(45deg);
9207
+ }
9224
9208
 
9225
- &:not(.use-type) {
9226
- width: 36%;
9227
- }
9228
- }
9209
+ &.swap {
9210
+ top: -8px;
9229
9211
 
9230
- .type-header {
9231
- width: 12%;
9232
- }
9212
+ .percentage-background {
9213
+ border-radius: 50% 0 50% 50%;
9214
+ transform: rotate(-45deg);
9215
+ }
9216
+ }
9233
9217
 
9234
- .value-header {
9235
- width: 52%;
9218
+ .percentage-value {
9219
+ position: absolute;
9220
+ top: 5px;
9221
+ left: 2px;
9222
+ width: 100%;
9223
+ height: 36px;
9224
+ line-height: 36px;
9225
+ text-align: center;
9226
+ color: @api-gateway-percentage-value-font-color;
9236
9227
 
9237
- &:not(.use-type) {
9238
- width: 61%;
9239
- }
9240
- }
9241
- }
9228
+ &:after {
9229
+ content: '%';
9230
+ }
9231
+ }
9232
+ }
9233
+ }
9242
9234
 
9243
- .table-body:not(:last-child) {
9244
- margin-bottom: 5px;
9245
- }
9246
- }
9235
+ .function-name-title {
9236
+ vertical-align: middle;
9237
+ line-height: normal;
9238
+ }
9239
+ }
9240
+ }
9247
9241
 
9242
+ .create-canary-button {
9243
+ position: absolute;
9244
+ bottom: -40px;
9245
+ .igz-icon-add-round {
9246
+ margin: 0 8px 0 0;
9247
+ }
9248
+ }
9248
9249
 
9249
- .logs-common {
9250
- font-family: "Source Code Pro", "Courier New", monospace;
9251
- font-size: 14px;
9252
- line-height: 1.1;
9253
- text-align: left;
9254
- white-space: pre-wrap;
9255
- }
9256
- .tooltip.custom-tooltip {
9257
- transition-duration: 0s;
9258
- z-index: 10001;
9259
- opacity: 1;
9250
+ .primary-canary-slider {
9251
+ z-index: 1;
9252
+ height: 175px;
9253
+ width: 100%;
9254
+ display: flex;
9255
+ justify-content: flex-start;
9256
+ margin-left: 20px;
9260
9257
 
9261
- .tooltip-arrow {
9262
- display: block;
9263
- margin-left: 0;
9264
- position: absolute;
9265
- top: -1px;
9266
- width: 13px;
9267
- height: 13px;
9268
- transform: rotate(226deg);
9269
- border-right: 1px solid @pale-grey;
9270
- border-bottom: 1px solid @pale-grey;
9271
- border-width: 1px;
9272
- background-color: @white;
9273
- }
9258
+ .rzslider:not([disabled]).rz-vertical {
9259
+ .rz-bar {
9260
+ background-color: @dark-sky-blue;
9261
+ border-radius: 0;
9262
+ }
9274
9263
 
9275
- &.bottom {
9276
- margin-top: 8px;
9277
- }
9264
+ .rz-pointer {
9265
+ width: 27px;
9266
+ height: 27px;
9267
+ background-color: @white;
9268
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
9269
+ border-radius: 50%;
9270
+ left: -11px !important;
9271
+ outline: 0 none transparent;
9278
9272
 
9279
- &.top {
9280
- margin-top: 4px;
9281
- }
9273
+ &::after {
9274
+ top: 11px;
9275
+ left: 11px;
9276
+ width: 5px;
9277
+ height: 5px;
9278
+ }
9279
+ }
9280
+ }
9281
+ }
9282
+ }
9283
+ }
9284
+ }
9282
9285
 
9283
- .tooltip-inner {
9284
- background-color: @white;
9285
- color: @dusk-three;
9286
- border-radius: 2px;
9287
- font-size: 14px;
9288
- word-wrap: break-word;
9289
- max-width: 280px;
9290
- padding: 29px 30px;
9291
- box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
9292
- border: solid 1px @pale-grey;
9286
+ .buttons-wrapper {
9287
+ position: relative;
9288
+ width: 100%;
9289
+ margin-top: 32px;
9290
+ }
9291
+ }
9293
9292
  }
9294
9293
  }
9294
+
9295
9295
  .deploy-deleted-function-dialog {
9296
9296
  .sub-title {
9297
9297
  font-size: 16px;
@@ -9304,40 +9304,6 @@ body {
9304
9304
  }
9305
9305
  }
9306
9306
 
9307
- .duplicate-function-dialog-wrapper {
9308
- .main-content {
9309
- .field-group {
9310
- display: flex;
9311
- flex-wrap: wrap;
9312
- width: 450px;
9313
-
9314
- .field-label.function-name-label,
9315
- .field-input.function-name-input,
9316
- .field-input.function-configuration-input {
9317
- width: 100%;
9318
- }
9319
-
9320
- .field-label.function-configuration-label {
9321
- width: 100%;
9322
- line-height: 30px;
9323
- }
9324
-
9325
- .field-input.function-name-input,
9326
- .field-input.function-configuration-input {
9327
- .error {
9328
- top: 38px;
9329
- }
9330
- }
9331
-
9332
- .field-label.function-configuration-path {
9333
- font-size: 14px;
9334
- margin-left: 3px;
9335
- line-height: 30px;
9336
- }
9337
- }
9338
- }
9339
- }
9340
-
9341
9307
  .ncl-function-collapsing-row {
9342
9308
  background-color: @white;
9343
9309
  margin-bottom: 8px;
@@ -9472,19 +9438,38 @@ body {
9472
9438
  }
9473
9439
  }
9474
9440
 
9475
- .override-function-dialog {
9476
- .sub-title {
9477
- font-size: 16px;
9478
- color: @silver-chalice-two;
9479
- }
9441
+ .duplicate-function-dialog-wrapper {
9442
+ .main-content {
9443
+ .field-group {
9444
+ display: flex;
9445
+ flex-wrap: wrap;
9446
+ width: 450px;
9480
9447
 
9481
- .buttons {
9482
- display: flex;
9448
+ .field-label.function-name-label,
9449
+ .field-input.function-name-input,
9450
+ .field-input.function-configuration-input {
9451
+ width: 100%;
9452
+ }
9483
9453
 
9484
- .function-redirect-button {
9485
- margin-right: auto;
9454
+ .field-label.function-configuration-label {
9455
+ width: 100%;
9456
+ line-height: 30px;
9457
+ }
9458
+
9459
+ .field-input.function-name-input,
9460
+ .field-input.function-configuration-input {
9461
+ .error {
9462
+ top: 38px;
9463
+ }
9464
+ }
9465
+
9466
+ .field-label.function-configuration-path {
9467
+ font-size: 14px;
9468
+ margin-left: 3px;
9469
+ line-height: 30px;
9470
+ }
9471
+ }
9486
9472
  }
9487
- }
9488
9473
  }
9489
9474
 
9490
9475
  .ncl-edit-version {
@@ -9745,6 +9730,21 @@ body {
9745
9730
  }
9746
9731
  }
9747
9732
 
9733
+ .override-function-dialog {
9734
+ .sub-title {
9735
+ font-size: 16px;
9736
+ color: @silver-chalice-two;
9737
+ }
9738
+
9739
+ .buttons {
9740
+ display: flex;
9741
+
9742
+ .function-redirect-button {
9743
+ margin-right: auto;
9744
+ }
9745
+ }
9746
+ }
9747
+
9748
9748
  // Style rules for actions bar
9749
9749
  .border-top > .igz-info-page-actions-bar {
9750
9750
  .info-page-actions-bar-color-set();
@@ -9817,6 +9817,128 @@ 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
+
9820
9942
  .info-page-filters-bookmark {
9821
9943
  .info-page-filters-color-set();
9822
9944
 
@@ -10146,139 +10268,17 @@ body {
10146
10268
  display: flex;
10147
10269
  justify-content: flex-end;
10148
10270
  position: absolute;
10149
- height: 70px;
10150
- padding: 16px 18px;
10151
- bottom: 0;
10152
- width: 100%;
10153
-
10154
- button:not(:first-child) {
10155
- margin-left: 5px;
10156
- }
10157
- }
10158
- }
10159
-
10160
- .igz-info-page-content-wrapper {
10161
- .info-page-content-color-set();
10162
-
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;
10174
- }
10175
-
10176
- &.filters-opened {
10177
- right: 377px;
10178
- }
10179
-
10180
- &.info-pane-opened {
10181
- right: 379px;
10182
- }
10183
-
10184
- .igz-info-page-content {
10185
- min-width: 946px;
10186
- max-width: 100%;
10187
- padding: 40px 25px;
10188
- }
10189
- }
10190
-
10191
- igz-info-page-actions-bar {
10192
- .igz-info-page-actions-bar .actions-content-block {
10193
- margin-left: 14px;
10194
- }
10195
- }
10196
-
10197
- igz-info-page-content {
10198
- .info-page-content-color-set();
10199
-
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;
10206
-
10207
- .common-table-cell {
10208
- margin-top: -1px;
10209
- height: 49px;
10210
-
10211
- &.selected {
10212
- background-color: @common-table-cell-selected-bg-color;
10213
- border: @common-table-cell-selected-border;
10214
- }
10215
-
10216
- &:last-child {
10217
- margin-right: 0;
10218
- }
10219
-
10220
- &.actions-menu {
10221
- width: 0;
10222
- }
10223
-
10224
- &.check-all-rows {
10225
- padding-left: 30px;
10226
-
10227
- .action-checkbox-all {
10228
- padding-top: 2px;
10229
- }
10230
- }
10231
- }
10232
-
10233
- .common-table-cells-container {
10234
- margin-right: 45px;
10235
-
10236
- .common-table-cell {
10237
- height: 49px;
10238
- padding: 0 15px;
10239
- border-right: @common-table-cell-border-right;
10240
-
10241
- &:first-child {
10242
- padding-left: 7px;
10243
- }
10244
- }
10245
- }
10246
- }
10247
-
10248
- .common-table-body {
10249
- margin-top: 7px;
10250
-
10251
- .common-table-cell {
10252
- &.actions-menu {
10253
- width: 45px;
10254
- }
10255
- }
10256
- }
10257
-
10258
- .data-access-policy-layers, .data-lifecycle-layers {
10259
- &:last-child {
10260
- margin-bottom: 20px;
10261
- }
10262
- }
10263
- }
10264
-
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;
10271
+ height: 70px;
10272
+ padding: 16px 18px;
10273
+ bottom: 0;
10274
+ width: 100%;
10275
+
10276
+ button:not(:first-child) {
10277
+ margin-left: 5px;
10277
10278
  }
10278
10279
  }
10279
10280
  }
10280
10281
 
10281
-
10282
10282
  ncl-breadcrumbs {
10283
10283
  .main-header-title {
10284
10284
  &:not(.disable-behavior) {
@@ -10941,6 +10941,102 @@ ncl-breadcrumbs {
10941
10941
  }
10942
10942
  }
10943
10943
 
10944
+ .ncl-search-input {
10945
+ position: relative;
10946
+ color: @silver;
10947
+
10948
+ .container-search-input {
10949
+ background-color: transparent;
10950
+ border-bottom: 1px solid @silver;
10951
+ font-size: 13px;
10952
+ font-weight: 400;
10953
+ height: 36px;
10954
+ line-height: 36px;
10955
+ margin: 0;
10956
+ outline: 0;
10957
+ padding: 0 0 3px 31px;
10958
+ width: 100%;
10959
+
10960
+ &::-webkit-input-placeholder {
10961
+ color: @silver;
10962
+ }
10963
+
10964
+ &:-moz-placeholder { /* Firefox 18- */
10965
+ color: @silver;
10966
+ }
10967
+
10968
+ &::-moz-placeholder { /* Firefox 19+ */
10969
+ color: @silver;
10970
+ }
10971
+
10972
+ &:-ms-input-placeholder {
10973
+ color: @silver;
10974
+ }
10975
+
10976
+ &:focus {
10977
+ border-bottom: 1px solid @light-blue;
10978
+
10979
+ &, & + .igz-icon-search:before {
10980
+ color: @dusk-three;
10981
+ }
10982
+
10983
+ &::-webkit-input-placeholder {
10984
+ color: transparent;
10985
+ }
10986
+
10987
+ &:-moz-placeholder { /* Firefox 18- */
10988
+ color: transparent;
10989
+ }
10990
+
10991
+ &::-moz-placeholder { /* Firefox 19+ */
10992
+ color: transparent;
10993
+ }
10994
+
10995
+ &:-ms-input-placeholder {
10996
+ color: transparent;
10997
+ }
10998
+ }
10999
+ }
11000
+
11001
+ .igz-icon-search {
11002
+ font-size: 18px;
11003
+ position: absolute;
11004
+ left: 8px;
11005
+ top: 5px;
11006
+ z-index: 1;
11007
+ color: @silver;
11008
+ }
11009
+
11010
+ input::-ms-clear {
11011
+ display: none;
11012
+ }
11013
+ }
11014
+ .ncl-monaco {
11015
+ .ncl-monaco-wrapper {
11016
+ padding-top: 20px;
11017
+ height: 100%;
11018
+ border: 1px solid @pale-grey;
11019
+ background-color: @white;
11020
+
11021
+ &.no-top-padding {
11022
+ padding-top: 0;
11023
+ }
11024
+
11025
+ .ncl-monaco-top-row {
11026
+ display: block;
11027
+ }
11028
+
11029
+ .ncl-monaco-editor {
11030
+ height: 100%;
11031
+ }
11032
+ }
11033
+
11034
+ .ncl-monaco-dark {
11035
+ background-color: @vs-dark;
11036
+ }
11037
+ }
11038
+
11039
+
10944
11040
  ncl-navigation-tabs {
10945
11041
  .ncl-navigation-tabs-color-set();
10946
11042
 
@@ -11102,102 +11198,6 @@ ncl-navigation-tabs {
11102
11198
  }
11103
11199
  }
11104
11200
 
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
- .ncl-search-input {
11132
- position: relative;
11133
- color: @silver;
11134
-
11135
- .container-search-input {
11136
- background-color: transparent;
11137
- border-bottom: 1px solid @silver;
11138
- font-size: 13px;
11139
- font-weight: 400;
11140
- height: 36px;
11141
- line-height: 36px;
11142
- margin: 0;
11143
- outline: 0;
11144
- padding: 0 0 3px 31px;
11145
- width: 100%;
11146
-
11147
- &::-webkit-input-placeholder {
11148
- color: @silver;
11149
- }
11150
-
11151
- &:-moz-placeholder { /* Firefox 18- */
11152
- color: @silver;
11153
- }
11154
-
11155
- &::-moz-placeholder { /* Firefox 19+ */
11156
- color: @silver;
11157
- }
11158
-
11159
- &:-ms-input-placeholder {
11160
- color: @silver;
11161
- }
11162
-
11163
- &:focus {
11164
- border-bottom: 1px solid @light-blue;
11165
-
11166
- &, & + .igz-icon-search:before {
11167
- color: @dusk-three;
11168
- }
11169
-
11170
- &::-webkit-input-placeholder {
11171
- color: transparent;
11172
- }
11173
-
11174
- &:-moz-placeholder { /* Firefox 18- */
11175
- color: transparent;
11176
- }
11177
-
11178
- &::-moz-placeholder { /* Firefox 19+ */
11179
- color: transparent;
11180
- }
11181
-
11182
- &:-ms-input-placeholder {
11183
- color: transparent;
11184
- }
11185
- }
11186
- }
11187
-
11188
- .igz-icon-search {
11189
- font-size: 18px;
11190
- position: absolute;
11191
- left: 8px;
11192
- top: 5px;
11193
- z-index: 1;
11194
- color: @silver;
11195
- }
11196
-
11197
- input::-ms-clear {
11198
- display: none;
11199
- }
11200
- }
11201
11201
  .new-function-wrapper {
11202
11202
  .ncl-new-function-color-set();
11203
11203
 
@@ -11895,65 +11895,12 @@ ncl-navigation-tabs {
11895
11895
  margin: 5px 0;
11896
11896
  }
11897
11897
 
11898
- .igz-multiple-checkboxes {
11899
- .checkboxes-dropdown-container {
11900
- position: unset;
11901
- }
11902
- }
11903
- }
11904
- }
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;
11898
+ .igz-multiple-checkboxes {
11899
+ .checkboxes-dropdown-container {
11900
+ position: unset;
11901
+ }
11956
11902
  }
11903
+ }
11957
11904
  }
11958
11905
 
11959
11906
  .ncl-version-monitoring {
@@ -12089,120 +12036,74 @@ ncl-navigation-tabs {
12089
12036
  }
12090
12037
  }
12091
12038
 
12092
- .ncl-text-size-dropdown {
12093
- display: flex;
12094
- justify-content: flex-end;
12095
-
12096
- .text-size-action-item {
12097
- width: 35px;
12098
- height: 35px;
12099
- margin: 0 8px 0 0;
12100
- display: flex;
12101
- justify-content: space-evenly;
12102
- font-size: 18px;
12103
-
12104
- .action-icon {
12105
- &.igz-icon-decrease {
12106
- font-size: 10px;
12107
- }
12108
- }
12109
- }
12110
- }
12111
-
12112
- .function-from-scratch-content {
12113
- .splash-screen {
12114
- top: 0;
12115
- }
12039
+ .ncl-version-trigger {
12040
+ padding: 11px 24px;
12116
12041
 
12117
- .title-wrapper {
12118
- margin-left: 50px;
12042
+ .common-table-header {
12043
+ border: none;
12044
+ padding-left: 24px;
12119
12045
 
12120
- .title {
12121
- color: @dusk-three;
12122
- font-size: 16px;
12046
+ .common-table-cell {
12047
+ font-size: 14px;
12123
12048
  font-weight: bold;
12049
+ letter-spacing: normal;
12050
+ color: @dusk-three;
12051
+ height: 46px;
12124
12052
  }
12125
12053
  }
12126
12054
 
12127
- .function-configuration {
12128
- margin: 28px 0 0 0;
12129
-
12130
- .configuration-form {
12131
- display: flex;
12132
-
12133
- .function-name-wrapper {
12134
- width: 50%;
12135
- display: flex;
12136
- padding: 0 24px 0 74px;
12137
-
12138
- .projects-drop-down {
12139
- width: 40%;
12140
- margin-right: 48px;
12141
-
12142
- .input-label {
12143
- font-size: 14px;
12144
- font-weight: 600;
12145
- color: @dusk-three;
12146
- }
12147
-
12148
- igz-default-dropdown {
12149
- .default-dropdown {
12150
- background-color: @white;
12055
+ .common-table-body {
12056
+ .common-table-row {
12057
+ &:not(.read-only):hover {
12058
+ .common-table-cells-container {
12059
+ background-color: @white;
12060
+ }
12151
12061
 
12152
- .default-dropdown-field {
12153
- &:focus {
12154
- background-color: inherit;
12155
- }
12156
- }
12157
- }
12158
- }
12062
+ .actions-menu {
12063
+ background-color: @white;
12159
12064
  }
12065
+ }
12066
+ }
12067
+ }
12160
12068
 
12161
- .function-name {
12162
- width: 100%;
12069
+ .http-trigger-checkbox {
12070
+ display: flex;
12071
+ }
12163
12072
 
12164
- .input-label {
12165
- font-size: 14px;
12166
- font-weight: 600;
12167
- color: @dusk-three;
12168
- }
12073
+ .item-row .item-name, .item-row .item-class, .item-row .item-info {
12074
+ padding-left: 0;
12075
+ }
12169
12076
 
12170
- igz-validating-input-field {
12171
- margin-left: 2px;
12172
- }
12173
- }
12174
- }
12077
+ .title-field-row .name-field, .item-row .item-name, .header-name {
12078
+ margin-right: 16px;
12079
+ width: 15%;
12080
+ }
12175
12081
 
12176
- .function-runtime-wrapper {
12177
- width: 50%;
12178
- padding-left: 24px;
12179
- padding-right: 10%;
12082
+ .title-field-row .class-field, .item-row .item-class, .header-class {
12083
+ margin-right: 16px;
12084
+ width: 10%;
12085
+ }
12180
12086
 
12181
- .function-runtime {
12182
- .input-label {
12183
- font-size: 14px;
12184
- font-weight: 600;
12185
- color: @dusk-three;
12186
- }
12087
+ .title-field-row .class-field {
12088
+ width: auto;
12089
+ }
12090
+ }
12187
12091
 
12188
- igz-default-dropdown {
12189
- .default-dropdown {
12190
- background-color: @white;
12092
+ .ncl-text-size-dropdown {
12093
+ display: flex;
12094
+ justify-content: flex-end;
12191
12095
 
12192
- .default-dropdown-field {
12193
- &:focus {
12194
- background-color: inherit;
12195
- }
12196
- }
12197
- }
12198
- }
12096
+ .text-size-action-item {
12097
+ width: 35px;
12098
+ height: 35px;
12099
+ margin: 0 8px 0 0;
12100
+ display: flex;
12101
+ justify-content: space-evenly;
12102
+ font-size: 18px;
12199
12103
 
12200
- .bottom-bar {
12201
- display: flex;
12202
- justify-content: flex-end;
12203
- margin-top: 48px;
12204
- }
12205
- }
12104
+ .action-icon {
12105
+ &.igz-icon-decrease {
12106
+ font-size: 10px;
12206
12107
  }
12207
12108
  }
12208
12109
  }
@@ -12470,6 +12371,105 @@ ncl-navigation-tabs {
12470
12371
  }
12471
12372
  }
12472
12373
 
12374
+ .function-from-scratch-content {
12375
+ .splash-screen {
12376
+ top: 0;
12377
+ }
12378
+
12379
+ .title-wrapper {
12380
+ margin-left: 50px;
12381
+
12382
+ .title {
12383
+ color: @dusk-three;
12384
+ font-size: 16px;
12385
+ font-weight: bold;
12386
+ }
12387
+ }
12388
+
12389
+ .function-configuration {
12390
+ margin: 28px 0 0 0;
12391
+
12392
+ .configuration-form {
12393
+ display: flex;
12394
+
12395
+ .function-name-wrapper {
12396
+ width: 50%;
12397
+ display: flex;
12398
+ padding: 0 24px 0 74px;
12399
+
12400
+ .projects-drop-down {
12401
+ width: 40%;
12402
+ margin-right: 48px;
12403
+
12404
+ .input-label {
12405
+ font-size: 14px;
12406
+ font-weight: 600;
12407
+ color: @dusk-three;
12408
+ }
12409
+
12410
+ igz-default-dropdown {
12411
+ .default-dropdown {
12412
+ background-color: @white;
12413
+
12414
+ .default-dropdown-field {
12415
+ &:focus {
12416
+ background-color: inherit;
12417
+ }
12418
+ }
12419
+ }
12420
+ }
12421
+ }
12422
+
12423
+ .function-name {
12424
+ width: 100%;
12425
+
12426
+ .input-label {
12427
+ font-size: 14px;
12428
+ font-weight: 600;
12429
+ color: @dusk-three;
12430
+ }
12431
+
12432
+ igz-validating-input-field {
12433
+ margin-left: 2px;
12434
+ }
12435
+ }
12436
+ }
12437
+
12438
+ .function-runtime-wrapper {
12439
+ width: 50%;
12440
+ padding-left: 24px;
12441
+ padding-right: 10%;
12442
+
12443
+ .function-runtime {
12444
+ .input-label {
12445
+ font-size: 14px;
12446
+ font-weight: 600;
12447
+ color: @dusk-three;
12448
+ }
12449
+
12450
+ igz-default-dropdown {
12451
+ .default-dropdown {
12452
+ background-color: @white;
12453
+
12454
+ .default-dropdown-field {
12455
+ &:focus {
12456
+ background-color: inherit;
12457
+ }
12458
+ }
12459
+ }
12460
+ }
12461
+
12462
+ .bottom-bar {
12463
+ display: flex;
12464
+ justify-content: flex-end;
12465
+ margin-top: 48px;
12466
+ }
12467
+ }
12468
+ }
12469
+ }
12470
+ }
12471
+ }
12472
+
12473
12473
  .function-import-wrapper-content {
12474
12474
  font-family: @font-family-sans-serif;
12475
12475
  padding-left: 3%;