iguazio.dashboard-controls 1.2.3 → 1.2.5

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 (8) hide show
  1. package/dist/js/iguazio.dashboard-controls.js +6350 -6332
  2. package/dist/less/iguazio.dashboard-controls.less +1490 -1490
  3. package/package.json +1 -1
  4. package/src/igz_controls/components/log-table-row/log-table-row.component.js +11 -4
  5. package/src/igz_controls/components/log-table-row/log-table-row.tpl.html +2 -2
  6. package/src/igz_controls/services/control-panel-logs-data.service.js +35 -26
  7. package/src/nuclio/functions/version/version-execution-log/version-execution-log.component.js +2 -1
  8. package/src/nuclio/functions/version/version-execution-log/version-execution-log.less +1 -1
package/dist/less/iguazio.dashboard-controls.less CHANGED
@@ -5569,6 +5569,164 @@ yx-axis
5569
5569
  }
5570
5570
  }
5571
5571
  }
5572
+ .igz-action-menu {
5573
+ .action-menu-color-set();
5574
+ .action-icon-color-set();
5575
+
5576
+ opacity: 1;
5577
+ position: relative;
5578
+
5579
+ .menu-button {
5580
+ color: @menu-btn-color;
5581
+ cursor: pointer;
5582
+ font-size: 18px;
5583
+ height: 19px;
5584
+ text-align: center;
5585
+ transition: @igz-basic-transition-color;
5586
+ width: 30px;
5587
+
5588
+ &.active,
5589
+ &:hover {
5590
+ color: @menu-btn-active-hover-color;
5591
+ }
5592
+ }
5593
+
5594
+ .menu-dropdown {
5595
+ visibility: hidden;
5596
+ background-color: @menu-dropdown-bg-color;
5597
+ border: @menu-dropdown-border;
5598
+ border-radius: 2px;
5599
+ box-shadow: @menu-dropdown-box-shadow;
5600
+ color: @menu-dropdown-color;
5601
+ font-family: @font-family-sans-serif;
5602
+ font-size: 13px;
5603
+ font-weight: 500;
5604
+ line-height: normal;
5605
+ margin-top: 9px;
5606
+ min-width: 129px;
5607
+ padding: 8px 0 0;
5608
+ position: absolute;
5609
+ z-index: 10;
5610
+ transform: translateX(-100%);
5611
+
5612
+ .actions-list {
5613
+ cursor: default;
5614
+ padding-bottom: 8px;
5615
+
5616
+ .tooltip {
5617
+ // !important used to overwrite third-party's inline style
5618
+ display: none !important;
5619
+ }
5620
+ }
5621
+
5622
+ .igz-action-item {
5623
+ color: @action-item-color;
5624
+ cursor: pointer;
5625
+ font-size: 13px;
5626
+ font-weight: 400;
5627
+ line-height: 32px;
5628
+ padding: 0 18px;
5629
+ text-align: left;
5630
+ white-space: nowrap;
5631
+
5632
+ &:hover,
5633
+ &.subtemplate-show {
5634
+ background-color: @action-item-hover-bg-color;
5635
+ }
5636
+
5637
+ &.inactive {
5638
+ color: @action-item-inactive-color;
5639
+ cursor: default;
5640
+
5641
+ &:hover {
5642
+ background-color: @menu-dropdown-bg-color;
5643
+ }
5644
+ }
5645
+
5646
+ .action-icon {
5647
+ color: @action-icon-color;
5648
+ display: inline-block;
5649
+ padding-right: 14px;
5650
+
5651
+ &.icon-placeholder {
5652
+ &:before {
5653
+ content: '';
5654
+ display: inline-block;
5655
+ }
5656
+ }
5657
+
5658
+ &:before {
5659
+ font-size: 16px;
5660
+ position: relative;
5661
+ text-align: center;
5662
+ width: 20px;
5663
+ top: 2px;
5664
+ }
5665
+ }
5666
+
5667
+ .action-label {
5668
+ display: inline-block;
5669
+ }
5670
+ }
5671
+
5672
+ .shortcuts-list {
5673
+ padding-bottom: 8px;
5674
+
5675
+ &:not(.first-block) {
5676
+ border-top: @shortcuts-list-not-first-block-border;
5677
+ padding-top: 8px;
5678
+ }
5679
+ }
5680
+
5681
+ .shortcuts-header {
5682
+ font-family: @font-family-sans-serif;
5683
+ color: @shortcuts-header-color;
5684
+ line-height: 24px;
5685
+ font-size: 13px;
5686
+ font-weight: 400;
5687
+ padding: 0 15px 4px 22px;
5688
+ text-align: left;
5689
+ }
5690
+
5691
+ .shortcuts-item {
5692
+ color: @shortcuts-item-color;
5693
+ cursor: pointer;
5694
+ font-weight: 400;
5695
+ white-space: nowrap;
5696
+ line-height: 32px;
5697
+ padding: 0 26px 0 32px;
5698
+ text-align: left;
5699
+ transition: @igz-basic-transition-color;
5700
+
5701
+ &:hover {
5702
+ background-color: @shortcuts-item-hover-bg-color;
5703
+ }
5704
+
5705
+ }
5706
+
5707
+ }
5708
+
5709
+ &.small-action-menu {
5710
+ .menu-button {
5711
+ color: @small-action-menu-btn-color;
5712
+ width: auto;
5713
+ font-size: 12px;
5714
+ display: inline-block;
5715
+ height: auto;
5716
+ margin: 0;
5717
+ vertical-align: sub;
5718
+ }
5719
+
5720
+ .menu-dropdown {
5721
+ margin: 0;
5722
+ }
5723
+ }
5724
+
5725
+ .upward-menu {
5726
+ transform: translate(-100%, -100%);
5727
+ }
5728
+ }
5729
+
5572
5730
  .igz-action-panel {
5573
5731
  .action-panel-color-set();
5574
5732
  .action-icon-color-set();
@@ -5779,216 +5937,58 @@ yx-axis
5779
5937
  }
5780
5938
  }
5781
5939
 
5782
- .igz-action-menu {
5783
- .action-menu-color-set();
5784
- .action-icon-color-set();
5940
+ .auto-complete-wrapper {
5941
+ .auto-complete-color-set();
5785
5942
 
5786
- opacity: 1;
5787
5943
  position: relative;
5788
5944
 
5789
- .menu-button {
5790
- color: @menu-btn-color;
5791
- cursor: pointer;
5792
- font-size: 18px;
5793
- height: 19px;
5794
- text-align: center;
5795
- transition: @igz-basic-transition-color;
5796
- width: 30px;
5945
+ .input-row {
5946
+ display: flex;
5947
+ width: 100%;
5797
5948
 
5798
- &.active,
5799
- &:hover {
5800
- color: @menu-btn-active-hover-color;
5949
+ .auto-complete-input {
5950
+ flex-grow: 3;
5801
5951
  }
5802
- }
5803
5952
 
5804
- .menu-dropdown {
5805
- visibility: hidden;
5806
- background-color: @menu-dropdown-bg-color;
5807
- border: @menu-dropdown-border;
5808
- border-radius: 2px;
5809
- box-shadow: @menu-dropdown-box-shadow;
5810
- color: @menu-dropdown-color;
5811
- font-family: @font-family-sans-serif;
5812
- font-size: 13px;
5813
- font-weight: 500;
5814
- line-height: normal;
5815
- margin-top: 9px;
5816
- min-width: 129px;
5817
- padding: 8px 0 0;
5818
- position: absolute;
5819
- z-index: 10;
5820
- transform: translateX(-100%);
5953
+ .auto-complete-filters {
5954
+ width: 20%;
5955
+ }
5956
+ }
5821
5957
 
5822
- .actions-list {
5823
- cursor: default;
5824
- padding-bottom: 8px;
5958
+ .suggestions-row {
5959
+ .auto-complete-suggestions-container {
5960
+ position: absolute;
5961
+ background-color: @auto-complete-suggestions-container-bg-color;
5962
+ border-radius: 2px;
5963
+ box-shadow: @auto-complete-suggestions-container-box-shadow;
5964
+ color: @auto-complete-suggestions-container-color;
5965
+ max-height: 220px;
5966
+ overflow: auto;
5967
+ z-index: 1000;
5968
+ width: 100%;
5969
+ margin-top: 2px;
5825
5970
 
5826
- .tooltip {
5827
- // !important used to overwrite third-party's inline style
5828
- display: none !important;
5829
- }
5830
- }
5971
+ .list {
5972
+ padding: 0;
5973
+ margin: 0;
5831
5974
 
5832
- .igz-action-item {
5833
- color: @action-item-color;
5834
- cursor: pointer;
5835
- font-size: 13px;
5836
- font-weight: 400;
5837
- line-height: 32px;
5838
- padding: 0 18px;
5839
- text-align: left;
5840
- white-space: nowrap;
5975
+ .list-item {
5976
+ color: @auto-complete-list-item-color;
5977
+ font-family: @font-family-sans-serif;
5978
+ font-size: 14px;
5979
+ list-style-type: none;
5980
+ margin: 0;
5981
+ outline: none;
5982
+ width: 100%;
5983
+ min-height: 32px;
5841
5984
 
5842
- &:hover,
5843
- &.subtemplate-show {
5844
- background-color: @action-item-hover-bg-color;
5845
- }
5985
+ &:first-child {
5986
+ margin-top: 7px;
5987
+ }
5846
5988
 
5847
- &.inactive {
5848
- color: @action-item-inactive-color;
5849
- cursor: default;
5850
-
5851
- &:hover {
5852
- background-color: @menu-dropdown-bg-color;
5853
- }
5854
- }
5855
-
5856
- .action-icon {
5857
- color: @action-icon-color;
5858
- display: inline-block;
5859
- padding-right: 14px;
5860
-
5861
- &.icon-placeholder {
5862
- &:before {
5863
- content: '';
5864
- display: inline-block;
5865
- }
5866
- }
5867
-
5868
- &:before {
5869
- font-size: 16px;
5870
- position: relative;
5871
- text-align: center;
5872
- width: 20px;
5873
- top: 2px;
5874
- }
5875
- }
5876
-
5877
- .action-label {
5878
- display: inline-block;
5879
- }
5880
- }
5881
-
5882
- .shortcuts-list {
5883
- padding-bottom: 8px;
5884
-
5885
- &:not(.first-block) {
5886
- border-top: @shortcuts-list-not-first-block-border;
5887
- padding-top: 8px;
5888
- }
5889
- }
5890
-
5891
- .shortcuts-header {
5892
- font-family: @font-family-sans-serif;
5893
- color: @shortcuts-header-color;
5894
- line-height: 24px;
5895
- font-size: 13px;
5896
- font-weight: 400;
5897
- padding: 0 15px 4px 22px;
5898
- text-align: left;
5899
- }
5900
-
5901
- .shortcuts-item {
5902
- color: @shortcuts-item-color;
5903
- cursor: pointer;
5904
- font-weight: 400;
5905
- white-space: nowrap;
5906
- line-height: 32px;
5907
- padding: 0 26px 0 32px;
5908
- text-align: left;
5909
- transition: @igz-basic-transition-color;
5910
-
5911
- &:hover {
5912
- background-color: @shortcuts-item-hover-bg-color;
5913
- }
5914
-
5915
- }
5916
-
5917
- }
5918
-
5919
- &.small-action-menu {
5920
- .menu-button {
5921
- color: @small-action-menu-btn-color;
5922
- width: auto;
5923
- font-size: 12px;
5924
- display: inline-block;
5925
- height: auto;
5926
- margin: 0;
5927
- vertical-align: sub;
5928
- }
5929
-
5930
- .menu-dropdown {
5931
- margin: 0;
5932
- }
5933
- }
5934
-
5935
- .upward-menu {
5936
- transform: translate(-100%, -100%);
5937
- }
5938
- }
5939
-
5940
- .auto-complete-wrapper {
5941
- .auto-complete-color-set();
5942
-
5943
- position: relative;
5944
-
5945
- .input-row {
5946
- display: flex;
5947
- width: 100%;
5948
-
5949
- .auto-complete-input {
5950
- flex-grow: 3;
5951
- }
5952
-
5953
- .auto-complete-filters {
5954
- width: 20%;
5955
- }
5956
- }
5957
-
5958
- .suggestions-row {
5959
- .auto-complete-suggestions-container {
5960
- position: absolute;
5961
- background-color: @auto-complete-suggestions-container-bg-color;
5962
- border-radius: 2px;
5963
- box-shadow: @auto-complete-suggestions-container-box-shadow;
5964
- color: @auto-complete-suggestions-container-color;
5965
- max-height: 220px;
5966
- overflow: auto;
5967
- z-index: 1000;
5968
- width: 100%;
5969
- margin-top: 2px;
5970
-
5971
- .list {
5972
- padding: 0;
5973
- margin: 0;
5974
-
5975
- .list-item {
5976
- color: @auto-complete-list-item-color;
5977
- font-family: @font-family-sans-serif;
5978
- font-size: 14px;
5979
- list-style-type: none;
5980
- margin: 0;
5981
- outline: none;
5982
- width: 100%;
5983
- min-height: 32px;
5984
-
5985
- &:first-child {
5986
- margin-top: 7px;
5987
- }
5988
-
5989
- &:last-child {
5990
- margin-bottom: 4px;
5991
- }
5989
+ &:last-child {
5990
+ margin-bottom: 4px;
5991
+ }
5992
5992
 
5993
5993
  .list-item-block {
5994
5994
  display: flex;
@@ -7395,204 +7395,51 @@ yx-axis
7395
7395
  }
7396
7396
  }
7397
7397
 
7398
- .igz-number-input {
7399
- .number-input-color-set();
7400
-
7401
- min-width: 115px;
7402
- font-family: @font-family-sans-serif;
7403
- font-size: 14px;
7404
- font-weight: 400;
7405
- height: 36px;
7406
- position: relative;
7407
- background-color: @number-input-bg-color;
7408
- border: @number-input-border;
7409
- border-radius: 2px;
7410
- color: @number-input-color;
7411
- display: flex;
7412
- justify-content: flex-start;
7413
- align-items: center;
7414
- padding: 0 10px 0 11px;
7415
- z-index: 3;
7416
-
7417
- &:not(.disabled) {
7418
- &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
7419
- background-color: @number-input-not-disabled-focus-invalid-bg-color;
7420
- border: @number-input-not-disabled-focus-invalid-border;
7421
- box-shadow: none;
7422
- outline: none;
7423
- }
7424
-
7425
- &:focus-within, &.focused {
7426
- outline: 0;
7427
- border: @number-input-not-disabled-hover-focus-border;
7428
- }
7398
+ .igz-pagination {
7399
+ .pagination-color-set();
7429
7400
 
7430
- &.invalid:not(.pristine), &.invalid.submitted {
7431
- background-color: @number-input-not-disabled-invalid-bg-color;
7432
- border: @number-input-not-disabled-invalid-border;
7433
- box-shadow: none;
7434
- }
7401
+ float: right;
7402
+ padding: 24px 36px 5px 30px;
7435
7403
 
7436
- &:focus.ng-valid, &:focus.ng-pristine {
7437
- border: @number-input-not-disabled-valid-border;
7438
- box-shadow: none;
7439
- outline: none;
7440
- }
7404
+ > div {
7405
+ vertical-align: top;
7441
7406
  }
7442
7407
 
7443
- &.additional-left-padding {
7444
- padding-left: 22px;
7408
+ .rows-title, .per-page, .jump-to-page, .to-page-prev, .to-page-next {
7409
+ display: inline-block;
7410
+ vertical-align: baseline;
7445
7411
  }
7446
7412
 
7447
- .input-field {
7448
- border: none;
7449
- outline: 0;
7450
- padding: 0;
7451
- text-align: left;
7452
- background-color: @number-input-field-bg-color;
7413
+ .rows-title {
7414
+ font-size: 13px;
7415
+ color: @rows-title-color;
7416
+ font-family: @font-family-sans-serif;
7453
7417
  }
7454
7418
 
7455
- //
7456
- // placeholder
7457
- //
7458
-
7459
- ::-webkit-input-placeholder {
7460
- /* Chrome, Chromium, Edge, Safari, Opera*/
7461
- color: @number-input-placeholder-color;
7462
- }
7419
+ .per-page {
7420
+ width: 66px;
7463
7421
 
7464
- :-moz-placeholder {
7465
- /* Firefox 4-18 */
7466
- color: @number-input-placeholder-color;
7467
- }
7422
+ .default-dropdown-field {
7423
+ background: none;
7424
+ border: none;
7425
+ box-shadow: none;
7426
+ font-size: 14px;
7427
+ height: 36px;
7468
7428
 
7469
- ::-moz-placeholder {
7470
- /* Firefox 19+ */
7471
- color: @number-input-placeholder-color;
7472
- }
7429
+ .dropdown-selected-item {
7430
+ font-size: 14px;
7431
+ }
7473
7432
 
7474
- :-ms-input-placeholder {
7475
- /* - Internet Explorer 10–11
7476
- - Internet Explorer Mobile 10-11 */
7477
- color: @number-input-placeholder-color !important;
7478
- }
7433
+ .dropdown-arrow {
7434
+ margin-top: 5px;
7479
7435
 
7480
- ::placeholder {
7481
- /* modern browser versions */
7482
- color: @number-input-placeholder-color;
7483
- }
7436
+ span {
7437
+ font-size: 12px;
7438
+ }
7439
+ }
7484
7440
 
7485
- .additional-left-block {
7486
- .prefix-unit {
7487
- color: @number-input-additional-left-block-prefix-unit-color;
7488
- font-size: 14px;
7489
- font-weight: 700;
7490
- padding-right: 7px;
7491
- }
7492
- }
7493
-
7494
- .suffix-unit-container {
7495
- display: flex;
7496
- align-items: center;
7497
-
7498
- .suffix-unit {
7499
- color: @number-input-suffix-unit-color;
7500
- font-size: 14px;
7501
- font-weight: 400;
7502
- padding-left: 3px;
7503
- }
7504
- }
7505
-
7506
- .arrow-block {
7507
- font-size: 11px;
7508
- display: flex;
7509
- flex-direction: column;
7510
- justify-content: center;
7511
- height: 100%;
7512
- margin-left: 6px;
7513
-
7514
- .igz-icon-dropup, .igz-icon-dropdown {
7515
- color: @number-input-arrow-block-icon-color;
7516
- cursor: pointer;
7517
- display: block;
7518
- line-height: 11px;
7519
- outline: 0;
7520
-
7521
- &:hover {
7522
- color: @number-input-arrow-block-icon-hover-color;
7523
- }
7524
- }
7525
- }
7526
-
7527
- &.disabled {
7528
- background-color: @number-input-disabled-bg-color;
7529
- opacity: 0.5;
7530
-
7531
- .suffix-unit {
7532
- opacity: 0.5;
7533
- }
7534
-
7535
- .igz-icon-dropup, .igz-icon-dropdown {
7536
- &, &:hover {
7537
- color: @number-input-disabled-icon-hover-color;
7538
- opacity: 0.5;
7539
- cursor: default;
7540
- }
7541
- }
7542
- }
7543
- }
7544
-
7545
- .step3, .step4 {
7546
- .additional-right-padding {
7547
- padding-right: 50px;
7548
- }
7549
- }
7550
-
7551
- .igz-pagination {
7552
- .pagination-color-set();
7553
-
7554
- float: right;
7555
- padding: 24px 36px 5px 30px;
7556
-
7557
- > div {
7558
- vertical-align: top;
7559
- }
7560
-
7561
- .rows-title, .per-page, .jump-to-page, .to-page-prev, .to-page-next {
7562
- display: inline-block;
7563
- vertical-align: baseline;
7564
- }
7565
-
7566
- .rows-title {
7567
- font-size: 13px;
7568
- color: @rows-title-color;
7569
- font-family: @font-family-sans-serif;
7570
- }
7571
-
7572
- .per-page {
7573
- width: 66px;
7574
-
7575
- .default-dropdown-field {
7576
- background: none;
7577
- border: none;
7578
- box-shadow: none;
7579
- font-size: 14px;
7580
- height: 36px;
7581
-
7582
- .dropdown-selected-item {
7583
- font-size: 14px;
7584
- }
7585
-
7586
- .dropdown-arrow {
7587
- margin-top: 5px;
7588
-
7589
- span {
7590
- font-size: 12px;
7591
- }
7592
- }
7593
-
7594
- .dropdown-arrow {
7595
- border: none;
7441
+ .dropdown-arrow {
7442
+ border: none;
7596
7443
 
7597
7444
  &:hover, &:active {
7598
7445
  border: none;
@@ -7696,193 +7543,159 @@ yx-axis
7696
7543
  }
7697
7544
  }
7698
7545
  }
7699
- .search-input {
7700
- .search-input-color-set();
7546
+ .igz-number-input {
7547
+ .number-input-color-set();
7701
7548
 
7549
+ min-width: 115px;
7550
+ font-family: @font-family-sans-serif;
7551
+ font-size: 14px;
7552
+ font-weight: 400;
7553
+ height: 36px;
7702
7554
  position: relative;
7703
- color: @search-input-color;
7704
-
7705
- .container-search-input {
7706
- background-color: @search-input-bg-color;
7707
- border: 0;
7708
- font-family: @font-family-sans-serif;
7709
- font-size: 15px;
7710
- font-weight: 400;
7711
- height: 52px;
7712
- line-height: 52px;
7713
- margin: 0;
7714
- outline: 0;
7715
- padding-right: 20px;
7716
- width: 100%;
7555
+ background-color: @number-input-bg-color;
7556
+ border: @number-input-border;
7557
+ border-radius: 2px;
7558
+ color: @number-input-color;
7559
+ display: flex;
7560
+ justify-content: flex-start;
7561
+ align-items: center;
7562
+ padding: 0 10px 0 11px;
7563
+ z-index: 3;
7717
7564
 
7718
- &::-webkit-input-placeholder {
7719
- color: @search-input-placeholder-color;
7565
+ &:not(.disabled) {
7566
+ &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
7567
+ background-color: @number-input-not-disabled-focus-invalid-bg-color;
7568
+ border: @number-input-not-disabled-focus-invalid-border;
7569
+ box-shadow: none;
7570
+ outline: none;
7720
7571
  }
7721
7572
 
7722
- &:-moz-placeholder { /* Firefox 18- */
7723
- color: @search-input-placeholder-color;
7573
+ &:focus-within, &.focused {
7574
+ outline: 0;
7575
+ border: @number-input-not-disabled-hover-focus-border;
7724
7576
  }
7725
7577
 
7726
- &::-moz-placeholder { /* Firefox 19+ */
7727
- color: @search-input-placeholder-color;
7578
+ &.invalid:not(.pristine), &.invalid.submitted {
7579
+ background-color: @number-input-not-disabled-invalid-bg-color;
7580
+ border: @number-input-not-disabled-invalid-border;
7581
+ box-shadow: none;
7728
7582
  }
7729
7583
 
7730
- &:-ms-input-placeholder {
7731
- color: @search-input-placeholder-color;
7584
+ &:focus.ng-valid, &:focus.ng-pristine {
7585
+ border: @number-input-not-disabled-valid-border;
7586
+ box-shadow: none;
7587
+ outline: none;
7732
7588
  }
7589
+ }
7733
7590
 
7734
- &:focus {
7735
- &, & + .igz-icon-search:before {
7736
- color: @search-input-focus-icon-search-before-color;
7737
- }
7591
+ &.additional-left-padding {
7592
+ padding-left: 22px;
7593
+ }
7738
7594
 
7739
- &::-webkit-input-placeholder {
7740
- color: @search-input-focus-placeholder-color;
7741
- }
7595
+ .input-field {
7596
+ border: none;
7597
+ outline: 0;
7598
+ padding: 0;
7599
+ text-align: left;
7600
+ background-color: @number-input-field-bg-color;
7601
+ }
7742
7602
 
7743
- &:-moz-placeholder { /* Firefox 18- */
7744
- color: @search-input-focus-placeholder-color;
7745
- }
7603
+ //
7604
+ // placeholder
7605
+ //
7746
7606
 
7747
- &::-moz-placeholder { /* Firefox 19+ */
7748
- color: @search-input-focus-placeholder-color;
7749
- }
7607
+ ::-webkit-input-placeholder {
7608
+ /* Chrome, Chromium, Edge, Safari, Opera*/
7609
+ color: @number-input-placeholder-color;
7610
+ }
7750
7611
 
7751
- &:-ms-input-placeholder {
7752
- color: @search-input-focus-placeholder-color;
7753
- }
7612
+ :-moz-placeholder {
7613
+ /* Firefox 4-18 */
7614
+ color: @number-input-placeholder-color;
7615
+ }
7754
7616
 
7755
- &::placeholder {
7756
- /* modern browser versions */
7757
- color: @search-input-focus-placeholder-color !important;
7758
- }
7759
- }
7617
+ ::-moz-placeholder {
7618
+ /* Firefox 19+ */
7619
+ color: @number-input-placeholder-color;
7760
7620
  }
7761
7621
 
7762
- .igz-icon-search {
7763
- font-size: 16px;
7764
- height: 16px;
7765
- position: absolute;
7766
- right: 0;
7767
- top: 17px;
7768
- width: 16px;
7769
- z-index: 1;
7622
+ :-ms-input-placeholder {
7623
+ /* - Internet Explorer 10–11
7624
+ - Internet Explorer Mobile 10-11 */
7625
+ color: @number-input-placeholder-color !important;
7770
7626
  }
7771
7627
 
7772
- .clear-button {
7773
- font-size: 10px;
7774
- position: absolute;
7775
- right: 4px;
7776
- top: 17px;
7777
- cursor: pointer;
7778
- color: @clear-button-color;
7779
- padding: 4px 5px 2px;
7780
- opacity: 0.64;
7781
- background-color: @clear-button-bg-color;
7782
- border-radius: 50%;
7783
- line-height: initial;
7628
+ ::placeholder {
7629
+ /* modern browser versions */
7630
+ color: @number-input-placeholder-color;
7631
+ }
7784
7632
 
7785
- &:hover {
7786
- opacity: 1;
7633
+ .additional-left-block {
7634
+ .prefix-unit {
7635
+ color: @number-input-additional-left-block-prefix-unit-color;
7636
+ font-size: 14px;
7637
+ font-weight: 700;
7638
+ padding-right: 7px;
7787
7639
  }
7788
7640
  }
7789
7641
 
7790
- input::-ms-clear {
7791
- display: none;
7642
+ .suffix-unit-container {
7643
+ display: flex;
7644
+ align-items: center;
7645
+
7646
+ .suffix-unit {
7647
+ color: @number-input-suffix-unit-color;
7648
+ font-size: 14px;
7649
+ font-weight: 400;
7650
+ padding-left: 3px;
7651
+ }
7792
7652
  }
7793
- }
7794
7653
 
7795
- .search-input-actions-bar {
7796
- .search-input-color-set();
7797
-
7798
- position: relative;
7799
- .container-search-input {
7800
- border: 0;
7801
- margin: 0;
7802
- font-family: @font-family-sans-serif;
7803
- font-size: 14px;
7804
- height: 52px;
7805
- line-height: 52px;
7806
- padding: 0 25px 0 45px;
7807
- outline: 0;
7808
- width: 100%;
7809
- }
7810
-
7811
- .igz-icon-search {
7812
- color: @search-input-actions-bar-icon-search-color;
7813
- font-size: 16px;
7814
- height: 16px;
7815
- position: absolute;
7816
- left: 18px;
7817
- top: 17px;
7818
- width: 16px;
7819
- z-index: 1;
7820
- }
7821
-
7822
- input::-ms-clear {
7823
- display: none;
7824
- }
7825
- }
7826
-
7827
- .search-input-not-found {
7828
- .search-input-color-set();
7654
+ .arrow-block {
7655
+ font-size: 11px;
7656
+ display: flex;
7657
+ flex-direction: column;
7658
+ justify-content: center;
7659
+ height: 100%;
7660
+ margin-left: 6px;
7829
7661
 
7830
- color: @search-input-not-found-color;
7831
- font-family: @font-family-sans-serif;
7832
- font-size: 14px;
7833
- display: flex;
7834
- flex-direction: column;
7835
- justify-content: center;
7836
- align-items: center;
7837
- margin-top: 9px;
7662
+ .igz-icon-dropup, .igz-icon-dropdown {
7663
+ color: @number-input-arrow-block-icon-color;
7664
+ cursor: pointer;
7665
+ display: block;
7666
+ line-height: 11px;
7667
+ outline: 0;
7838
7668
 
7839
- .search-message {
7840
- min-height: 49px;
7841
- line-height: 49px;
7842
- width: 100%;
7843
- text-align: center;
7844
- letter-spacing: 0.1px;
7845
- border: @search-input-not-found-message-border;
7669
+ &:hover {
7670
+ color: @number-input-arrow-block-icon-hover-color;
7671
+ }
7672
+ }
7846
7673
  }
7847
7674
 
7848
- .create-item-button {
7849
- display: flex;
7850
- align-items: center;
7851
- padding: 0 19px 0 7px;
7852
- margin-top: 8px;
7853
- border-radius: 12px;
7854
- height: 24px;
7855
- color: @create-item-btn-color;
7856
- font-size: 12px;
7857
- font-weight: bold;
7858
- cursor: pointer;
7859
- background-color: @create-item-btn-bg-color;
7860
- border: @create-item-btn-border;
7861
- text-transform: uppercase;
7862
-
7863
- &:hover {
7864
- background-color: @create-item-btn-hover-bg-color;
7865
- box-shadow: @create-item-btn-hover-box-shadow;
7866
- border: @create-item-btn-hover-border;
7867
- }
7675
+ &.disabled {
7676
+ background-color: @number-input-disabled-bg-color;
7677
+ opacity: 0.5;
7868
7678
 
7869
- &:focus {
7870
- outline: none;
7679
+ .suffix-unit {
7680
+ opacity: 0.5;
7871
7681
  }
7872
7682
 
7873
- &:active {
7874
- background-color: @create-item-btn-active-bg-color;
7875
- box-shadow: @create-item-btn-active-box-shadow;
7876
- border: none;
7683
+ .igz-icon-dropup, .igz-icon-dropdown {
7684
+ &, &:hover {
7685
+ color: @number-input-disabled-icon-hover-color;
7686
+ opacity: 0.5;
7687
+ cursor: default;
7688
+ }
7877
7689
  }
7690
+ }
7691
+ }
7878
7692
 
7879
- .igz-icon-add {
7880
- font-size: 10px;
7881
- line-height: 15px;
7882
- padding-right: 8px;
7883
- }
7693
+ .step3, .step4 {
7694
+ .additional-right-padding {
7695
+ padding-right: 50px;
7884
7696
  }
7885
7697
  }
7698
+
7886
7699
  .igz-size {
7887
7700
  .size-color-set();
7888
7701
 
@@ -7974,118 +7787,305 @@ yx-axis
7974
7787
  }
7975
7788
  }
7976
7789
 
7977
- .igz-slider-input-block {
7978
- .igz-slider-input-block-color-set();
7790
+ .search-input {
7791
+ .search-input-color-set();
7979
7792
 
7980
7793
  position: relative;
7794
+ color: @search-input-color;
7981
7795
 
7982
- .igz-slider-input-title {
7983
- float: left;
7984
- display: table;
7985
- min-height: 30px;
7986
- line-height: 1;
7987
- color: @slider-input-title-color;
7988
- font-size: 14px;
7796
+ .container-search-input {
7797
+ background-color: @search-input-bg-color;
7798
+ border: 0;
7799
+ font-family: @font-family-sans-serif;
7800
+ font-size: 15px;
7989
7801
  font-weight: 400;
7990
- text-align: left;
7991
- cursor: default;
7802
+ height: 52px;
7803
+ line-height: 52px;
7804
+ margin: 0;
7805
+ outline: 0;
7806
+ padding-right: 20px;
7807
+ width: 100%;
7992
7808
 
7993
- .igz-slider-input-title-text {
7994
- display: table-cell;
7995
- vertical-align: middle;
7809
+ &::-webkit-input-placeholder {
7810
+ color: @search-input-placeholder-color;
7996
7811
  }
7997
- }
7998
7812
 
7999
- // Custom styles for third-party library slider
8000
- .igz-slider-input-rz-slider {
8001
- float: left;
8002
- min-height: 16px;
8003
- line-height: 16px;
7813
+ &:-moz-placeholder { /* Firefox 18- */
7814
+ color: @search-input-placeholder-color;
7815
+ }
8004
7816
 
8005
- .rzslider {
8006
- margin: 0;
8007
- height: 8px;
7817
+ &::-moz-placeholder { /* Firefox 19+ */
7818
+ color: @search-input-placeholder-color;
7819
+ }
8008
7820
 
8009
- .rz-bar-wrapper {
8010
- height: auto;
8011
- margin: 0;
8012
- padding: 0;
7821
+ &:-ms-input-placeholder {
7822
+ color: @search-input-placeholder-color;
7823
+ }
8013
7824
 
8014
- .rz-bar {
8015
- background-color: @rz-bar-bg-color;
8016
- height: 3px;
8017
- }
7825
+ &:focus {
7826
+ &, & + .igz-icon-search:before {
7827
+ color: @search-input-focus-icon-search-before-color;
8018
7828
  }
8019
7829
 
8020
- .rz-bubble {
8021
- display: none;
7830
+ &::-webkit-input-placeholder {
7831
+ color: @search-input-focus-placeholder-color;
8022
7832
  }
8023
7833
 
8024
- .rz-pointer {
8025
- height: 14px;
8026
- width: 14px;
8027
- top: -6px;
8028
- box-shadow: @rz-pointer-box-shadow;
8029
- outline: 0;
8030
-
8031
- &:after {
8032
- display: none;
8033
- }
7834
+ &:-moz-placeholder { /* Firefox 18- */
7835
+ color: @search-input-focus-placeholder-color;
8034
7836
  }
8035
7837
 
8036
- &:not([disabled]) {
8037
- .rz-bar.rz-selection {
8038
- background-color: @rz-selection-bg-color;
8039
- }
8040
-
8041
- .rz-pointer {
8042
- background-color: @rz-pointer-bg-color;
8043
- }
7838
+ &::-moz-placeholder { /* Firefox 19+ */
7839
+ color: @search-input-focus-placeholder-color;
8044
7840
  }
8045
- }
8046
- }
8047
-
8048
- // Current value
8049
- .igz-slider-input-current-value {
8050
- float: left;
8051
- min-height: 30px;
8052
- line-height: 30px;
8053
-
8054
- &.with-measure-units {
8055
- width: 18%;
8056
- padding-right: 0;
8057
7841
 
8058
- .igz-slider-input-current-value-text {
8059
- margin-right: 4px;
7842
+ &:-ms-input-placeholder {
7843
+ color: @search-input-focus-placeholder-color;
8060
7844
  }
8061
- }
8062
-
8063
- &.with-value-unit {
8064
- padding-right: 21px;
8065
- }
8066
7845
 
8067
- .igz-slider-input-current-value-text {
8068
- color: @slider-input-current-value-text-color;
8069
- font-size: 13px;
8070
- font-weight: 400;
8071
- background-color: @slider-input-current-value-text-bg-color;
8072
- text-align: right;
7846
+ &::placeholder {
7847
+ /* modern browser versions */
7848
+ color: @search-input-focus-placeholder-color !important;
7849
+ }
8073
7850
  }
8074
7851
  }
8075
7852
 
8076
- .igz-slider-input-unit-label {
7853
+ .igz-icon-search {
7854
+ font-size: 16px;
7855
+ height: 16px;
8077
7856
  position: absolute;
8078
7857
  right: 0;
8079
- min-height: 30px;
8080
- line-height: 30px;
7858
+ top: 17px;
7859
+ width: 16px;
7860
+ z-index: 1;
8081
7861
  }
8082
7862
 
8083
- // Units dropdown
8084
- .igz-slider-input-units-dropdown {
8085
- float: left;
8086
-
8087
- .default-dropdown {
8088
- height: 30px;
7863
+ .clear-button {
7864
+ font-size: 10px;
7865
+ position: absolute;
7866
+ right: 4px;
7867
+ top: 17px;
7868
+ cursor: pointer;
7869
+ color: @clear-button-color;
7870
+ padding: 4px 5px 2px;
7871
+ opacity: 0.64;
7872
+ background-color: @clear-button-bg-color;
7873
+ border-radius: 50%;
7874
+ line-height: initial;
7875
+
7876
+ &:hover {
7877
+ opacity: 1;
7878
+ }
7879
+ }
7880
+
7881
+ input::-ms-clear {
7882
+ display: none;
7883
+ }
7884
+ }
7885
+
7886
+ .search-input-actions-bar {
7887
+ .search-input-color-set();
7888
+
7889
+ position: relative;
7890
+ .container-search-input {
7891
+ border: 0;
7892
+ margin: 0;
7893
+ font-family: @font-family-sans-serif;
7894
+ font-size: 14px;
7895
+ height: 52px;
7896
+ line-height: 52px;
7897
+ padding: 0 25px 0 45px;
7898
+ outline: 0;
7899
+ width: 100%;
7900
+ }
7901
+
7902
+ .igz-icon-search {
7903
+ color: @search-input-actions-bar-icon-search-color;
7904
+ font-size: 16px;
7905
+ height: 16px;
7906
+ position: absolute;
7907
+ left: 18px;
7908
+ top: 17px;
7909
+ width: 16px;
7910
+ z-index: 1;
7911
+ }
7912
+
7913
+ input::-ms-clear {
7914
+ display: none;
7915
+ }
7916
+ }
7917
+
7918
+ .search-input-not-found {
7919
+ .search-input-color-set();
7920
+
7921
+ color: @search-input-not-found-color;
7922
+ font-family: @font-family-sans-serif;
7923
+ font-size: 14px;
7924
+ display: flex;
7925
+ flex-direction: column;
7926
+ justify-content: center;
7927
+ align-items: center;
7928
+ margin-top: 9px;
7929
+
7930
+ .search-message {
7931
+ min-height: 49px;
7932
+ line-height: 49px;
7933
+ width: 100%;
7934
+ text-align: center;
7935
+ letter-spacing: 0.1px;
7936
+ border: @search-input-not-found-message-border;
7937
+ }
7938
+
7939
+ .create-item-button {
7940
+ display: flex;
7941
+ align-items: center;
7942
+ padding: 0 19px 0 7px;
7943
+ margin-top: 8px;
7944
+ border-radius: 12px;
7945
+ height: 24px;
7946
+ color: @create-item-btn-color;
7947
+ font-size: 12px;
7948
+ font-weight: bold;
7949
+ cursor: pointer;
7950
+ background-color: @create-item-btn-bg-color;
7951
+ border: @create-item-btn-border;
7952
+ text-transform: uppercase;
7953
+
7954
+ &:hover {
7955
+ background-color: @create-item-btn-hover-bg-color;
7956
+ box-shadow: @create-item-btn-hover-box-shadow;
7957
+ border: @create-item-btn-hover-border;
7958
+ }
7959
+
7960
+ &:focus {
7961
+ outline: none;
7962
+ }
7963
+
7964
+ &:active {
7965
+ background-color: @create-item-btn-active-bg-color;
7966
+ box-shadow: @create-item-btn-active-box-shadow;
7967
+ border: none;
7968
+ }
7969
+
7970
+ .igz-icon-add {
7971
+ font-size: 10px;
7972
+ line-height: 15px;
7973
+ padding-right: 8px;
7974
+ }
7975
+ }
7976
+ }
7977
+ .igz-slider-input-block {
7978
+ .igz-slider-input-block-color-set();
7979
+
7980
+ position: relative;
7981
+
7982
+ .igz-slider-input-title {
7983
+ float: left;
7984
+ display: table;
7985
+ min-height: 30px;
7986
+ line-height: 1;
7987
+ color: @slider-input-title-color;
7988
+ font-size: 14px;
7989
+ font-weight: 400;
7990
+ text-align: left;
7991
+ cursor: default;
7992
+
7993
+ .igz-slider-input-title-text {
7994
+ display: table-cell;
7995
+ vertical-align: middle;
7996
+ }
7997
+ }
7998
+
7999
+ // Custom styles for third-party library slider
8000
+ .igz-slider-input-rz-slider {
8001
+ float: left;
8002
+ min-height: 16px;
8003
+ line-height: 16px;
8004
+
8005
+ .rzslider {
8006
+ margin: 0;
8007
+ height: 8px;
8008
+
8009
+ .rz-bar-wrapper {
8010
+ height: auto;
8011
+ margin: 0;
8012
+ padding: 0;
8013
+
8014
+ .rz-bar {
8015
+ background-color: @rz-bar-bg-color;
8016
+ height: 3px;
8017
+ }
8018
+ }
8019
+
8020
+ .rz-bubble {
8021
+ display: none;
8022
+ }
8023
+
8024
+ .rz-pointer {
8025
+ height: 14px;
8026
+ width: 14px;
8027
+ top: -6px;
8028
+ box-shadow: @rz-pointer-box-shadow;
8029
+ outline: 0;
8030
+
8031
+ &:after {
8032
+ display: none;
8033
+ }
8034
+ }
8035
+
8036
+ &:not([disabled]) {
8037
+ .rz-bar.rz-selection {
8038
+ background-color: @rz-selection-bg-color;
8039
+ }
8040
+
8041
+ .rz-pointer {
8042
+ background-color: @rz-pointer-bg-color;
8043
+ }
8044
+ }
8045
+ }
8046
+ }
8047
+
8048
+ // Current value
8049
+ .igz-slider-input-current-value {
8050
+ float: left;
8051
+ min-height: 30px;
8052
+ line-height: 30px;
8053
+
8054
+ &.with-measure-units {
8055
+ width: 18%;
8056
+ padding-right: 0;
8057
+
8058
+ .igz-slider-input-current-value-text {
8059
+ margin-right: 4px;
8060
+ }
8061
+ }
8062
+
8063
+ &.with-value-unit {
8064
+ padding-right: 21px;
8065
+ }
8066
+
8067
+ .igz-slider-input-current-value-text {
8068
+ color: @slider-input-current-value-text-color;
8069
+ font-size: 13px;
8070
+ font-weight: 400;
8071
+ background-color: @slider-input-current-value-text-bg-color;
8072
+ text-align: right;
8073
+ }
8074
+ }
8075
+
8076
+ .igz-slider-input-unit-label {
8077
+ position: absolute;
8078
+ right: 0;
8079
+ min-height: 30px;
8080
+ line-height: 30px;
8081
+ }
8082
+
8083
+ // Units dropdown
8084
+ .igz-slider-input-units-dropdown {
8085
+ float: left;
8086
+
8087
+ .default-dropdown {
8088
+ height: 30px;
8089
8089
 
8090
8090
  .default-dropdown-field {
8091
8091
  border: none;
@@ -8210,91 +8210,27 @@ yx-axis
8210
8210
  }
8211
8211
  }
8212
8212
  }
8213
- .toast-status-panel {
8214
- .toast-status-panel-color-set();
8213
+ .ngdialog.text-edit {
8214
+ .text-edit-color-set();
8215
8215
 
8216
- margin-bottom: 20px;
8217
- padding: 16px 36px 16px 12px;
8218
- background-color: @toast-panel-bg-color;
8219
- border: @toast-panel-border;
8220
- position: relative;
8216
+ .ngdialog-content {
8217
+ padding: 0;
8218
+ width: 1000px;
8219
+ height: 678px;
8221
8220
 
8222
- &.in-progress {
8223
- background-color: @toast-panel-in-progress-bg-color;
8224
- border: @toast-panel-in-progress-border;
8225
- }
8221
+ .text-preview-directive-wrapper {
8222
+ .title {
8223
+ margin: 25px 0 0 24px;
8224
+ padding: 0 70px 0 0;
8225
+ }
8226
8226
 
8227
- &.failed {
8228
- background-color: @toast-panel-failed-bg-color;
8229
- border: @toast-panel-failed-border;
8230
- }
8231
-
8232
- .panel-status {
8233
- color: @toast-panel-status-color;
8234
- line-height: 24px;
8235
- font-size: 14px;
8236
- font-weight: 700;
8237
- font-family: @font-family-sans-serif;
8238
- align-items: center;
8239
- display: flex;
8240
- justify-content: center;
8241
-
8242
- &.in-progress {
8243
- color: @toast-panel-status-in-progress-color;
8244
- }
8245
-
8246
- &.failed {
8247
- color: @toast-panel-status-failed-color;
8248
- }
8249
-
8250
- .panel-status-icon {
8251
- font-size: 24px;
8252
-
8253
- &.igz-icon-properties {
8254
- -webkit-animation: rotation 4s infinite linear;
8255
-
8256
- @-webkit-keyframes rotation {
8257
- from {
8258
- -webkit-transform: rotate(0deg);
8259
- }
8260
- to {
8261
- -webkit-transform: rotate(359deg);
8262
- }
8263
- }
8264
- }
8265
- }
8266
-
8267
- .msg-scrollable-container {
8268
- max-height: 300px;
8269
-
8270
- .panel-status-msg {
8271
- margin: 0 8px;
8272
- }
8273
- }
8274
- }
8275
- }
8276
-
8277
- .ngdialog.text-edit {
8278
- .text-edit-color-set();
8279
-
8280
- .ngdialog-content {
8281
- padding: 0;
8282
- width: 1000px;
8283
- height: 678px;
8284
-
8285
- .text-preview-directive-wrapper {
8286
- .title {
8287
- margin: 25px 0 0 24px;
8288
- padding: 0 70px 0 0;
8289
- }
8290
-
8291
- .close-button {
8292
- position: absolute;
8293
- top: 24px;
8294
- right: 24px;
8295
- font-size: 18px;
8296
- color: @close-btn-color;
8297
- }
8227
+ .close-button {
8228
+ position: absolute;
8229
+ top: 24px;
8230
+ right: 24px;
8231
+ font-size: 18px;
8232
+ color: @close-btn-color;
8233
+ }
8298
8234
 
8299
8235
  .buttons {
8300
8236
  margin-right: 24px;
@@ -8351,6 +8287,70 @@ yx-axis
8351
8287
  }
8352
8288
  }
8353
8289
 
8290
+ .toast-status-panel {
8291
+ .toast-status-panel-color-set();
8292
+
8293
+ margin-bottom: 20px;
8294
+ padding: 16px 36px 16px 12px;
8295
+ background-color: @toast-panel-bg-color;
8296
+ border: @toast-panel-border;
8297
+ position: relative;
8298
+
8299
+ &.in-progress {
8300
+ background-color: @toast-panel-in-progress-bg-color;
8301
+ border: @toast-panel-in-progress-border;
8302
+ }
8303
+
8304
+ &.failed {
8305
+ background-color: @toast-panel-failed-bg-color;
8306
+ border: @toast-panel-failed-border;
8307
+ }
8308
+
8309
+ .panel-status {
8310
+ color: @toast-panel-status-color;
8311
+ line-height: 24px;
8312
+ font-size: 14px;
8313
+ font-weight: 700;
8314
+ font-family: @font-family-sans-serif;
8315
+ align-items: center;
8316
+ display: flex;
8317
+ justify-content: center;
8318
+
8319
+ &.in-progress {
8320
+ color: @toast-panel-status-in-progress-color;
8321
+ }
8322
+
8323
+ &.failed {
8324
+ color: @toast-panel-status-failed-color;
8325
+ }
8326
+
8327
+ .panel-status-icon {
8328
+ font-size: 24px;
8329
+
8330
+ &.igz-icon-properties {
8331
+ -webkit-animation: rotation 4s infinite linear;
8332
+
8333
+ @-webkit-keyframes rotation {
8334
+ from {
8335
+ -webkit-transform: rotate(0deg);
8336
+ }
8337
+ to {
8338
+ -webkit-transform: rotate(359deg);
8339
+ }
8340
+ }
8341
+ }
8342
+ }
8343
+
8344
+ .msg-scrollable-container {
8345
+ max-height: 300px;
8346
+
8347
+ .panel-status-msg {
8348
+ margin: 0 8px;
8349
+ }
8350
+ }
8351
+ }
8352
+ }
8353
+
8354
8354
  .validating-input-field {
8355
8355
  .validating-input-field-color-set();
8356
8356
 
@@ -8667,321 +8667,22 @@ yx-axis
8667
8667
  }
8668
8668
  }
8669
8669
 
8670
- // an invalid input field should be displayed as invalid in case it is in a submitted form even if the field is pristine
8671
- form.ng-submitted .validating-input-field {
8672
- .validating-input-field-color-set();
8673
-
8674
- .input-field, .textarea-field {
8675
- &:not([disabled]):not([readonly]) {
8676
- &.ng-invalid, &.invalid {
8677
- &:focus {
8678
- background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8679
- border: @input-textarea-field-not-disabled-focus-invalid-border;
8680
- }
8681
-
8682
- &:not(:focus) {
8683
- background-color: @input-textarea-field-not-disabled-invalid-bg-color;
8684
- border: @input-textarea-field-not-disabled-invalid-border;
8685
- }
8686
- }
8687
- }
8688
- }
8689
- }
8690
-
8691
- .ncl-api-gateway-row {
8692
- .common-table-cells-container {
8693
- .common-table-cell {
8694
- &.status {
8695
- text-transform: capitalize;
8696
-
8697
- &.ready {
8698
- color: @tealish;
8699
- }
8700
-
8701
- // just in case - for now these statuses will not be shown because there will be a loader
8702
- &.provisioning, &.waitingForProvisioning {
8703
- color: @pale-orange;
8704
- }
8705
-
8706
- &.error {
8707
- color: @darkish-pink;
8708
- }
8709
- }
8710
- }
8711
- }
8712
-
8713
- .actions-menu {
8714
- visibility: hidden;
8715
- }
8716
-
8717
- &.common-table-row {
8718
- &:hover {
8719
- .actions-menu {
8720
- visibility: visible;
8721
- }
8722
- }
8723
- }
8724
- }
8725
-
8726
- .new-api-gateway-wizard {
8727
- .new-api-gateway-wizard-color-set();
8728
-
8729
- .content-wrapper {
8730
- .content {
8731
- .toast-status-panel {
8732
- max-width: 90vw;
8733
- margin: 16px auto 20px;
8734
- }
8735
-
8736
- .api-gateway-form {
8737
- .content-body {
8738
- margin: 0 auto;
8739
- height: 400px;
8740
- display: flex;
8741
- flex-flow: row nowrap;
8742
- justify-content: center;
8743
- align-items: center;
8744
-
8745
- .api-gateway-block {
8746
- flex: none;
8747
- position: relative;
8748
- max-width: 320px;
8749
- padding: 16px 24px;
8750
- border: @api-gateway-block-border;
8751
- border-radius: 2px;
8752
- background-color: @api-gateway-block-bg-color;
8753
- box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
8754
- transition: box-shadow .3s ease-in-out 0s;
8755
-
8756
- // important for not waiting to animation to finish when removing/promoting canary function
8757
- // (`ng-leave` and `ng-leave-active` are assigned by the `ng-if` directive when its scope
8758
- // expression evaluates to a falsy value) see https://docs.angularjs.org/api/ng/directive/ngIf
8759
- &.ng-leave.ng-leave-active {
8760
- transition: none 0s 0s;
8761
- }
8762
-
8763
- &:hover, &:focus-within {
8764
- box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
8765
- }
8766
-
8767
- .block-title {
8768
- text-align: center;
8769
- font-weight: bold;
8770
- font-size: 16px;
8771
- color: @api-gateway-block-title-font-color;
8772
- margin-bottom: 16px;
8773
- }
8774
- }
8775
-
8776
- .connector, .connector-split {
8777
- flex: 1 1 0;
8778
- border-top: 1px solid @connector-line-stroke-color;
8779
- }
8780
-
8781
- .connector-split {
8782
- border-left: 1px solid @connector-line-stroke-color;
8783
- border-bottom: 1px solid @connector-line-stroke-color;
8784
- border-radius: 50px 0 0 50px;
8785
- height: 280px;
8786
- }
8787
-
8788
- .api-gateway-globe {
8789
- flex: none;
8790
- width: 128px;
8791
- height: 128px;
8792
- background: url('/assets/images/globe.png') center center / cover no-repeat transparent;
8793
- }
8794
-
8795
- .api-gateway-authentication,
8796
- .api-gateway-basic-settings {
8797
- .fields-wrapper {
8798
- display: flex;
8799
- flex-flow: column nowrap;
8800
- justify-content: space-around;
8801
-
8802
- .field-wrapper {
8803
- display: flex;
8804
- flex-flow: row nowrap;
8805
- justify-content: space-between;
8806
- line-height: 36px;
8807
- margin-top: 16px;
8808
-
8809
- &:first-child {
8810
- margin-top: 0;
8811
- }
8812
-
8813
- .field-label {
8814
- width: 35%;
8815
- }
8816
-
8817
- .field-input {
8818
- width: 60%;
8819
- }
8820
- }
8821
- }
8822
- }
8823
-
8824
- .api-gateway-basic-settings {
8825
- .end-point-block {
8826
- margin-top: 8px;
8827
-
8828
- .end-point-title {
8829
- font-weight: bold;
8830
- }
8831
-
8832
- .end-point-host {
8833
- display: flex;
8834
- flex-flow: row nowrap;
8835
- align-items: center;
8836
-
8837
- .host {
8838
- flex: auto;
8839
- word-break: break-all;
8840
- max-height: 80px;
8841
- overflow-y: auto;
8842
- }
8843
-
8844
- .copy-to-clipboard {
8845
- flex: none;
8846
- }
8847
- }
8848
- }
8849
- }
8850
-
8851
- .api-gateway-circles {
8852
- display: flex;
8853
- flex-flow: column nowrap;
8854
- justify-content: space-between;
8855
- align-items: center;
8856
- position: relative;
8857
-
8858
- &.only-primary {
8859
- justify-content: center;
8860
- }
8861
-
8862
- .api-gateway-block {
8863
- border-radius: 35px;
8864
-
8865
- &.function-circle {
8866
- width: 320px;
8867
-
8868
- &.canary-function {
8869
- .canary-title {
8870
- margin-top: 20px;
8871
- margin-bottom: 0;
8872
- }
8873
-
8874
- .canary-action-menu {
8875
- position: absolute;
8876
- top: 24px;
8877
- right: 0;
8878
- }
8879
- }
8880
-
8881
- .function-name {
8882
- position: relative;
8883
-
8884
- &.percentage-exists {
8885
- padding-left: 36px;
8886
- }
8887
-
8888
- .percentage {
8889
- position: absolute;
8890
- left: -17px;
8891
- top: -4px;
8892
- width: 44px;
8893
- height: 44px;
8894
-
8895
- .percentage-background {
8896
- position: absolute;
8897
- width: 110%;
8898
- height: 110%;
8899
- background-color: @api-gateway-percentage-background-color;
8900
- border-radius: 50% 50% 0 50%;
8901
- transform: rotate(45deg);
8902
- }
8903
-
8904
- &.swap {
8905
- top: -8px;
8906
-
8907
- .percentage-background {
8908
- border-radius: 50% 0 50% 50%;
8909
- transform: rotate(-45deg);
8910
- }
8911
- }
8912
-
8913
- .percentage-value {
8914
- position: absolute;
8915
- top: 5px;
8916
- left: 2px;
8917
- width: 100%;
8918
- height: 36px;
8919
- line-height: 36px;
8920
- text-align: center;
8921
- color: @api-gateway-percentage-value-font-color;
8922
-
8923
- &:after {
8924
- content: '%';
8925
- }
8926
- }
8927
- }
8928
- }
8929
-
8930
- .function-name-title {
8931
- vertical-align: middle;
8932
- line-height: normal;
8933
- }
8934
- }
8935
- }
8936
-
8937
- .create-canary-button {
8938
- position: absolute;
8939
- bottom: -40px;
8940
- .igz-icon-add-round {
8941
- margin: 0 8px 0 0;
8942
- }
8943
- }
8944
-
8945
- .primary-canary-slider {
8946
- z-index: 1;
8947
- height: 175px;
8948
- width: 100%;
8949
- display: flex;
8950
- justify-content: flex-start;
8951
- margin-left: 20px;
8952
-
8953
- .rzslider:not([disabled]).rz-vertical {
8954
- .rz-bar {
8955
- background-color: @dark-sky-blue;
8956
- border-radius: 0;
8957
- }
8958
-
8959
- .rz-pointer {
8960
- width: 27px;
8961
- height: 27px;
8962
- background-color: @white;
8963
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
8964
- border-radius: 50%;
8965
- left: -11px !important;
8966
- outline: 0 none transparent;
8670
+ // an invalid input field should be displayed as invalid in case it is in a submitted form even if the field is pristine
8671
+ form.ng-submitted .validating-input-field {
8672
+ .validating-input-field-color-set();
8967
8673
 
8968
- &::after {
8969
- top: 11px;
8970
- left: 11px;
8971
- width: 5px;
8972
- height: 5px;
8973
- }
8974
- }
8975
- }
8976
- }
8977
- }
8674
+ .input-field, .textarea-field {
8675
+ &:not([disabled]):not([readonly]) {
8676
+ &.ng-invalid, &.invalid {
8677
+ &:focus {
8678
+ background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8679
+ border: @input-textarea-field-not-disabled-focus-invalid-border;
8978
8680
  }
8979
- }
8980
8681
 
8981
- .buttons-wrapper {
8982
- position: relative;
8983
- width: 100%;
8984
- margin-top: 32px;
8682
+ &:not(:focus) {
8683
+ background-color: @input-textarea-field-not-disabled-invalid-bg-color;
8684
+ border: @input-textarea-field-not-disabled-invalid-border;
8685
+ }
8985
8686
  }
8986
8687
  }
8987
8688
  }
@@ -9291,53 +8992,306 @@ body {
9291
8992
  border: solid 1px @pale-grey;
9292
8993
  }
9293
8994
  }
9294
- .deploy-deleted-function-dialog {
9295
- .sub-title {
9296
- font-size: 16px;
9297
- color: @silver-chalice-two;
9298
- }
8995
+ .new-api-gateway-wizard {
8996
+ .new-api-gateway-wizard-color-set();
8997
+
8998
+ .content-wrapper {
8999
+ .content {
9000
+ .toast-status-panel {
9001
+ max-width: 90vw;
9002
+ margin: 16px auto 20px;
9003
+ }
9004
+
9005
+ .api-gateway-form {
9006
+ .content-body {
9007
+ margin: 0 auto;
9008
+ height: 400px;
9009
+ display: flex;
9010
+ flex-flow: row nowrap;
9011
+ justify-content: center;
9012
+ align-items: center;
9013
+
9014
+ .api-gateway-block {
9015
+ flex: none;
9016
+ position: relative;
9017
+ max-width: 320px;
9018
+ padding: 16px 24px;
9019
+ border: @api-gateway-block-border;
9020
+ border-radius: 2px;
9021
+ background-color: @api-gateway-block-bg-color;
9022
+ box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
9023
+ transition: box-shadow .3s ease-in-out 0s;
9024
+
9025
+ // important for not waiting to animation to finish when removing/promoting canary function
9026
+ // (`ng-leave` and `ng-leave-active` are assigned by the `ng-if` directive when its scope
9027
+ // expression evaluates to a falsy value) see https://docs.angularjs.org/api/ng/directive/ngIf
9028
+ &.ng-leave.ng-leave-active {
9029
+ transition: none 0s 0s;
9030
+ }
9031
+
9032
+ &:hover, &:focus-within {
9033
+ box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
9034
+ }
9035
+
9036
+ .block-title {
9037
+ text-align: center;
9038
+ font-weight: bold;
9039
+ font-size: 16px;
9040
+ color: @api-gateway-block-title-font-color;
9041
+ margin-bottom: 16px;
9042
+ }
9043
+ }
9044
+
9045
+ .connector, .connector-split {
9046
+ flex: 1 1 0;
9047
+ border-top: 1px solid @connector-line-stroke-color;
9048
+ }
9049
+
9050
+ .connector-split {
9051
+ border-left: 1px solid @connector-line-stroke-color;
9052
+ border-bottom: 1px solid @connector-line-stroke-color;
9053
+ border-radius: 50px 0 0 50px;
9054
+ height: 280px;
9055
+ }
9056
+
9057
+ .api-gateway-globe {
9058
+ flex: none;
9059
+ width: 128px;
9060
+ height: 128px;
9061
+ background: url('/assets/images/globe.png') center center / cover no-repeat transparent;
9062
+ }
9063
+
9064
+ .api-gateway-authentication,
9065
+ .api-gateway-basic-settings {
9066
+ .fields-wrapper {
9067
+ display: flex;
9068
+ flex-flow: column nowrap;
9069
+ justify-content: space-around;
9070
+
9071
+ .field-wrapper {
9072
+ display: flex;
9073
+ flex-flow: row nowrap;
9074
+ justify-content: space-between;
9075
+ line-height: 36px;
9076
+ margin-top: 16px;
9077
+
9078
+ &:first-child {
9079
+ margin-top: 0;
9080
+ }
9081
+
9082
+ .field-label {
9083
+ width: 35%;
9084
+ }
9085
+
9086
+ .field-input {
9087
+ width: 60%;
9088
+ }
9089
+ }
9090
+ }
9091
+ }
9092
+
9093
+ .api-gateway-basic-settings {
9094
+ .end-point-block {
9095
+ margin-top: 8px;
9096
+
9097
+ .end-point-title {
9098
+ font-weight: bold;
9099
+ }
9100
+
9101
+ .end-point-host {
9102
+ display: flex;
9103
+ flex-flow: row nowrap;
9104
+ align-items: center;
9105
+
9106
+ .host {
9107
+ flex: auto;
9108
+ word-break: break-all;
9109
+ max-height: 80px;
9110
+ overflow-y: auto;
9111
+ }
9112
+
9113
+ .copy-to-clipboard {
9114
+ flex: none;
9115
+ }
9116
+ }
9117
+ }
9118
+ }
9119
+
9120
+ .api-gateway-circles {
9121
+ display: flex;
9122
+ flex-flow: column nowrap;
9123
+ justify-content: space-between;
9124
+ align-items: center;
9125
+ position: relative;
9126
+
9127
+ &.only-primary {
9128
+ justify-content: center;
9129
+ }
9130
+
9131
+ .api-gateway-block {
9132
+ border-radius: 35px;
9133
+
9134
+ &.function-circle {
9135
+ width: 320px;
9136
+
9137
+ &.canary-function {
9138
+ .canary-title {
9139
+ margin-top: 20px;
9140
+ margin-bottom: 0;
9141
+ }
9142
+
9143
+ .canary-action-menu {
9144
+ position: absolute;
9145
+ top: 24px;
9146
+ right: 0;
9147
+ }
9148
+ }
9149
+
9150
+ .function-name {
9151
+ position: relative;
9152
+
9153
+ &.percentage-exists {
9154
+ padding-left: 36px;
9155
+ }
9156
+
9157
+ .percentage {
9158
+ position: absolute;
9159
+ left: -17px;
9160
+ top: -4px;
9161
+ width: 44px;
9162
+ height: 44px;
9163
+
9164
+ .percentage-background {
9165
+ position: absolute;
9166
+ width: 110%;
9167
+ height: 110%;
9168
+ background-color: @api-gateway-percentage-background-color;
9169
+ border-radius: 50% 50% 0 50%;
9170
+ transform: rotate(45deg);
9171
+ }
9172
+
9173
+ &.swap {
9174
+ top: -8px;
9175
+
9176
+ .percentage-background {
9177
+ border-radius: 50% 0 50% 50%;
9178
+ transform: rotate(-45deg);
9179
+ }
9180
+ }
9181
+
9182
+ .percentage-value {
9183
+ position: absolute;
9184
+ top: 5px;
9185
+ left: 2px;
9186
+ width: 100%;
9187
+ height: 36px;
9188
+ line-height: 36px;
9189
+ text-align: center;
9190
+ color: @api-gateway-percentage-value-font-color;
9191
+
9192
+ &:after {
9193
+ content: '%';
9194
+ }
9195
+ }
9196
+ }
9197
+ }
9198
+
9199
+ .function-name-title {
9200
+ vertical-align: middle;
9201
+ line-height: normal;
9202
+ }
9203
+ }
9204
+ }
9205
+
9206
+ .create-canary-button {
9207
+ position: absolute;
9208
+ bottom: -40px;
9209
+ .igz-icon-add-round {
9210
+ margin: 0 8px 0 0;
9211
+ }
9212
+ }
9213
+
9214
+ .primary-canary-slider {
9215
+ z-index: 1;
9216
+ height: 175px;
9217
+ width: 100%;
9218
+ display: flex;
9219
+ justify-content: flex-start;
9220
+ margin-left: 20px;
9299
9221
 
9300
- .buttons {
9301
- display: flex;
9302
- justify-content: flex-end;
9303
- }
9304
- }
9222
+ .rzslider:not([disabled]).rz-vertical {
9223
+ .rz-bar {
9224
+ background-color: @dark-sky-blue;
9225
+ border-radius: 0;
9226
+ }
9305
9227
 
9306
- .duplicate-function-dialog-wrapper {
9307
- .main-content {
9308
- .field-group {
9309
- display: flex;
9310
- flex-wrap: wrap;
9311
- width: 450px;
9228
+ .rz-pointer {
9229
+ width: 27px;
9230
+ height: 27px;
9231
+ background-color: @white;
9232
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
9233
+ border-radius: 50%;
9234
+ left: -11px !important;
9235
+ outline: 0 none transparent;
9312
9236
 
9313
- .field-label.function-name-label,
9314
- .field-input.function-name-input,
9315
- .field-input.function-configuration-input {
9316
- width: 100%;
9237
+ &::after {
9238
+ top: 11px;
9239
+ left: 11px;
9240
+ width: 5px;
9241
+ height: 5px;
9242
+ }
9243
+ }
9244
+ }
9245
+ }
9246
+ }
9247
+ }
9317
9248
  }
9318
9249
 
9319
- .field-label.function-configuration-label {
9250
+ .buttons-wrapper {
9251
+ position: relative;
9320
9252
  width: 100%;
9321
- line-height: 30px;
9253
+ margin-top: 32px;
9322
9254
  }
9255
+ }
9256
+ }
9257
+ }
9323
9258
 
9324
- .field-input.function-name-input,
9325
- .field-input.function-configuration-input {
9326
- .error {
9327
- top: 38px;
9259
+ .ncl-api-gateway-row {
9260
+ .common-table-cells-container {
9261
+ .common-table-cell {
9262
+ &.status {
9263
+ text-transform: capitalize;
9264
+
9265
+ &.ready {
9266
+ color: @tealish;
9267
+ }
9268
+
9269
+ // just in case - for now these statuses will not be shown because there will be a loader
9270
+ &.provisioning, &.waitingForProvisioning {
9271
+ color: @pale-orange;
9272
+ }
9273
+
9274
+ &.error {
9275
+ color: @darkish-pink;
9328
9276
  }
9329
9277
  }
9278
+ }
9279
+ }
9330
9280
 
9331
- .field-label.function-configuration-path {
9332
- font-size: 14px;
9333
- margin-left: 3px;
9334
- line-height: 30px;
9281
+ .actions-menu {
9282
+ visibility: hidden;
9283
+ }
9284
+
9285
+ &.common-table-row {
9286
+ &:hover {
9287
+ .actions-menu {
9288
+ visibility: visible;
9335
9289
  }
9336
9290
  }
9337
9291
  }
9338
9292
  }
9339
9293
 
9340
- .override-function-dialog {
9294
+ .deploy-deleted-function-dialog {
9341
9295
  .sub-title {
9342
9296
  font-size: 16px;
9343
9297
  color: @silver-chalice-two;
@@ -9345,10 +9299,7 @@ body {
9345
9299
 
9346
9300
  .buttons {
9347
9301
  display: flex;
9348
-
9349
- .function-redirect-button {
9350
- margin-right: auto;
9351
- }
9302
+ justify-content: flex-end;
9352
9303
  }
9353
9304
  }
9354
9305
 
@@ -9486,6 +9437,55 @@ body {
9486
9437
  }
9487
9438
  }
9488
9439
 
9440
+ .duplicate-function-dialog-wrapper {
9441
+ .main-content {
9442
+ .field-group {
9443
+ display: flex;
9444
+ flex-wrap: wrap;
9445
+ width: 450px;
9446
+
9447
+ .field-label.function-name-label,
9448
+ .field-input.function-name-input,
9449
+ .field-input.function-configuration-input {
9450
+ width: 100%;
9451
+ }
9452
+
9453
+ .field-label.function-configuration-label {
9454
+ width: 100%;
9455
+ line-height: 30px;
9456
+ }
9457
+
9458
+ .field-input.function-name-input,
9459
+ .field-input.function-configuration-input {
9460
+ .error {
9461
+ top: 38px;
9462
+ }
9463
+ }
9464
+
9465
+ .field-label.function-configuration-path {
9466
+ font-size: 14px;
9467
+ margin-left: 3px;
9468
+ line-height: 30px;
9469
+ }
9470
+ }
9471
+ }
9472
+ }
9473
+
9474
+ .override-function-dialog {
9475
+ .sub-title {
9476
+ font-size: 16px;
9477
+ color: @silver-chalice-two;
9478
+ }
9479
+
9480
+ .buttons {
9481
+ display: flex;
9482
+
9483
+ .function-redirect-button {
9484
+ margin-right: auto;
9485
+ }
9486
+ }
9487
+ }
9488
+
9489
9489
  .ncl-edit-version {
9490
9490
  background: #f2f2f6;
9491
9491
  position: relative;
@@ -9768,176 +9768,54 @@ body {
9768
9768
  top: 150px;
9769
9769
  }
9770
9770
 
9771
- &.filters-opened {
9772
- right: 376px;
9773
- padding-right: 8px;
9774
- }
9775
-
9776
- &.info-pane-opened {
9777
- right: 379px;
9778
- padding-right: 8px;
9779
- }
9780
-
9781
- .actions-bar-left {
9782
- float: left;
9783
- height: 100%;
9784
- }
9785
-
9786
- .actions-bar-right {
9787
- float: right;
9788
- height: 100%;
9789
- text-align: right;
9790
- }
9791
-
9792
- &:before, &:after {
9793
- content: " ";
9794
- display: table;
9795
- }
9796
- &:after {
9797
- clear: both;
9798
- }
9799
-
9800
- .actions-panes-block {
9801
- padding-left: 16px;
9802
- border-left: @actions-panes-block-border-left;
9803
- }
9804
-
9805
- .actions-content-block {
9806
- margin: 0 8px 0 32px;
9807
- }
9808
-
9809
- .actions-buttons-block {
9810
- margin-left: 16px;
9811
- margin-top: 1px;
9812
-
9813
- [class^="igz-button"]:not(:first-child), [class*="igz-button"]:not(:first-child) {
9814
- margin-left: 8px;
9815
- }
9816
- }
9817
- }
9818
-
9819
- .igz-info-page-content-wrapper {
9820
- .info-page-content-color-set();
9821
-
9822
- position: absolute;
9823
- top: 56px;
9824
- right: 0;
9825
- bottom: 0;
9826
- left: 0;
9827
- padding-top: 0;
9828
- transition: @igz-basic-transition;
9829
- background-color: @page-content-bg-color;
9830
-
9831
- &.upper-pane-opened {
9832
- top: 216px;
9833
- }
9834
-
9835
- &.filters-opened {
9836
- right: 377px;
9837
- }
9838
-
9839
- &.info-pane-opened {
9840
- right: 379px;
9841
- }
9842
-
9843
- .igz-info-page-content {
9844
- min-width: 946px;
9845
- max-width: 100%;
9846
- padding: 40px 25px;
9847
- }
9848
- }
9849
-
9850
- igz-info-page-actions-bar {
9851
- .igz-info-page-actions-bar .actions-content-block {
9852
- margin-left: 14px;
9853
- }
9854
- }
9855
-
9856
- igz-info-page-content {
9857
- .info-page-content-color-set();
9858
-
9859
- .container-data-access-policy-table, .data-lifecycle-table {
9860
- &.common-table {
9861
- .common-table-header {
9862
- position: relative;
9863
- height: 49px;
9864
- line-height: 48px;
9865
-
9866
- .common-table-cell {
9867
- margin-top: -1px;
9868
- height: 49px;
9869
-
9870
- &.selected {
9871
- background-color: @common-table-cell-selected-bg-color;
9872
- border: @common-table-cell-selected-border;
9873
- }
9874
-
9875
- &:last-child {
9876
- margin-right: 0;
9877
- }
9878
-
9879
- &.actions-menu {
9880
- width: 0;
9881
- }
9882
-
9883
- &.check-all-rows {
9884
- padding-left: 30px;
9885
-
9886
- .action-checkbox-all {
9887
- padding-top: 2px;
9888
- }
9889
- }
9890
- }
9771
+ &.filters-opened {
9772
+ right: 376px;
9773
+ padding-right: 8px;
9774
+ }
9891
9775
 
9892
- .common-table-cells-container {
9893
- margin-right: 45px;
9776
+ &.info-pane-opened {
9777
+ right: 379px;
9778
+ padding-right: 8px;
9779
+ }
9894
9780
 
9895
- .common-table-cell {
9896
- height: 49px;
9897
- padding: 0 15px;
9898
- border-right: @common-table-cell-border-right;
9781
+ .actions-bar-left {
9782
+ float: left;
9783
+ height: 100%;
9784
+ }
9899
9785
 
9900
- &:first-child {
9901
- padding-left: 7px;
9902
- }
9903
- }
9904
- }
9905
- }
9786
+ .actions-bar-right {
9787
+ float: right;
9788
+ height: 100%;
9789
+ text-align: right;
9790
+ }
9906
9791
 
9907
- .common-table-body {
9908
- margin-top: 7px;
9792
+ &:before, &:after {
9793
+ content: " ";
9794
+ display: table;
9795
+ }
9796
+ &:after {
9797
+ clear: both;
9798
+ }
9909
9799
 
9910
- .common-table-cell {
9911
- &.actions-menu {
9912
- width: 45px;
9913
- }
9914
- }
9915
- }
9800
+ .actions-panes-block {
9801
+ padding-left: 16px;
9802
+ border-left: @actions-panes-block-border-left;
9803
+ }
9916
9804
 
9917
- .data-access-policy-layers, .data-lifecycle-layers {
9918
- &:last-child {
9919
- margin-bottom: 20px;
9920
- }
9921
- }
9922
- }
9805
+ .actions-content-block {
9806
+ margin: 0 8px 0 32px;
9807
+ }
9923
9808
 
9924
- .sortable-empty {
9925
- background-color: @sortable-empty-bg-color;
9926
- color: @sortable-empty-color;
9927
- font-size: 14px;
9928
- font-weight: 400;
9929
- font-family: 'Open Sans', sans-serif;
9930
- border-bottom: @sortable-empty-border;
9931
- border-left: @sortable-empty-border;
9932
- border-right: @sortable-empty-border;
9933
- padding-left: 70px;
9934
- height: 40px;
9935
- line-height: 38px;
9809
+ .actions-buttons-block {
9810
+ margin-left: 16px;
9811
+ margin-top: 1px;
9812
+
9813
+ [class^="igz-button"]:not(:first-child), [class*="igz-button"]:not(:first-child) {
9814
+ margin-left: 8px;
9936
9815
  }
9937
9816
  }
9938
9817
  }
9939
9818
 
9940
-
9941
9819
  .info-page-filters-bookmark {
9942
9820
  .info-page-filters-color-set();
9943
9821
 
@@ -10278,6 +10156,128 @@ igz-info-page-content {
10278
10156
  }
10279
10157
  }
10280
10158
 
10159
+ .igz-info-page-content-wrapper {
10160
+ .info-page-content-color-set();
10161
+
10162
+ position: absolute;
10163
+ top: 56px;
10164
+ right: 0;
10165
+ bottom: 0;
10166
+ left: 0;
10167
+ padding-top: 0;
10168
+ transition: @igz-basic-transition;
10169
+ background-color: @page-content-bg-color;
10170
+
10171
+ &.upper-pane-opened {
10172
+ top: 216px;
10173
+ }
10174
+
10175
+ &.filters-opened {
10176
+ right: 377px;
10177
+ }
10178
+
10179
+ &.info-pane-opened {
10180
+ right: 379px;
10181
+ }
10182
+
10183
+ .igz-info-page-content {
10184
+ min-width: 946px;
10185
+ max-width: 100%;
10186
+ padding: 40px 25px;
10187
+ }
10188
+ }
10189
+
10190
+ igz-info-page-actions-bar {
10191
+ .igz-info-page-actions-bar .actions-content-block {
10192
+ margin-left: 14px;
10193
+ }
10194
+ }
10195
+
10196
+ igz-info-page-content {
10197
+ .info-page-content-color-set();
10198
+
10199
+ .container-data-access-policy-table, .data-lifecycle-table {
10200
+ &.common-table {
10201
+ .common-table-header {
10202
+ position: relative;
10203
+ height: 49px;
10204
+ line-height: 48px;
10205
+
10206
+ .common-table-cell {
10207
+ margin-top: -1px;
10208
+ height: 49px;
10209
+
10210
+ &.selected {
10211
+ background-color: @common-table-cell-selected-bg-color;
10212
+ border: @common-table-cell-selected-border;
10213
+ }
10214
+
10215
+ &:last-child {
10216
+ margin-right: 0;
10217
+ }
10218
+
10219
+ &.actions-menu {
10220
+ width: 0;
10221
+ }
10222
+
10223
+ &.check-all-rows {
10224
+ padding-left: 30px;
10225
+
10226
+ .action-checkbox-all {
10227
+ padding-top: 2px;
10228
+ }
10229
+ }
10230
+ }
10231
+
10232
+ .common-table-cells-container {
10233
+ margin-right: 45px;
10234
+
10235
+ .common-table-cell {
10236
+ height: 49px;
10237
+ padding: 0 15px;
10238
+ border-right: @common-table-cell-border-right;
10239
+
10240
+ &:first-child {
10241
+ padding-left: 7px;
10242
+ }
10243
+ }
10244
+ }
10245
+ }
10246
+
10247
+ .common-table-body {
10248
+ margin-top: 7px;
10249
+
10250
+ .common-table-cell {
10251
+ &.actions-menu {
10252
+ width: 45px;
10253
+ }
10254
+ }
10255
+ }
10256
+
10257
+ .data-access-policy-layers, .data-lifecycle-layers {
10258
+ &:last-child {
10259
+ margin-bottom: 20px;
10260
+ }
10261
+ }
10262
+ }
10263
+
10264
+ .sortable-empty {
10265
+ background-color: @sortable-empty-bg-color;
10266
+ color: @sortable-empty-color;
10267
+ font-size: 14px;
10268
+ font-weight: 400;
10269
+ font-family: 'Open Sans', sans-serif;
10270
+ border-bottom: @sortable-empty-border;
10271
+ border-left: @sortable-empty-border;
10272
+ border-right: @sortable-empty-border;
10273
+ padding-left: 70px;
10274
+ height: 40px;
10275
+ line-height: 38px;
10276
+ }
10277
+ }
10278
+ }
10279
+
10280
+
10281
10281
  ncl-breadcrumbs {
10282
10282
  .main-header-title {
10283
10283
  &:not(.disable-behavior) {
@@ -10940,32 +10940,6 @@ ncl-breadcrumbs {
10940
10940
  }
10941
10941
  }
10942
10942
 
10943
- .ncl-monaco {
10944
- .ncl-monaco-wrapper {
10945
- padding-top: 20px;
10946
- height: 100%;
10947
- border: 1px solid @pale-grey;
10948
- background-color: @white;
10949
-
10950
- &.no-top-padding {
10951
- padding-top: 0;
10952
- }
10953
-
10954
- .ncl-monaco-top-row {
10955
- display: block;
10956
- }
10957
-
10958
- .ncl-monaco-editor {
10959
- height: 100%;
10960
- }
10961
- }
10962
-
10963
- .ncl-monaco-dark {
10964
- background-color: @vs-dark;
10965
- }
10966
- }
10967
-
10968
-
10969
10943
  ncl-navigation-tabs {
10970
10944
  .ncl-navigation-tabs-color-set();
10971
10945
 
@@ -11107,26 +11081,52 @@ ncl-navigation-tabs {
11107
11081
  }
11108
11082
  }
11109
11083
 
11110
- .ncl-status-title {
11111
- font-size: 13px;
11112
- font-weight: normal;
11113
- white-space: nowrap;
11084
+ .ncl-status-title {
11085
+ font-size: 13px;
11086
+ font-weight: normal;
11087
+ white-space: nowrap;
11088
+
11089
+ &::first-letter {
11090
+ text-transform: capitalize;
11091
+ }
11092
+ }
11093
+ }
11094
+ }
11095
+ }
11096
+ }
11097
+ }
11098
+
11099
+ .test-pane-actions-wrapper {
11100
+ margin-right: 35px;
11101
+ }
11102
+ }
11103
+
11104
+ .ncl-monaco {
11105
+ .ncl-monaco-wrapper {
11106
+ padding-top: 20px;
11107
+ height: 100%;
11108
+ border: 1px solid @pale-grey;
11109
+ background-color: @white;
11110
+
11111
+ &.no-top-padding {
11112
+ padding-top: 0;
11113
+ }
11114
11114
 
11115
- &::first-letter {
11116
- text-transform: capitalize;
11117
- }
11118
- }
11119
- }
11120
- }
11121
- }
11115
+ .ncl-monaco-top-row {
11116
+ display: block;
11117
+ }
11118
+
11119
+ .ncl-monaco-editor {
11120
+ height: 100%;
11122
11121
  }
11123
11122
  }
11124
11123
 
11125
- .test-pane-actions-wrapper {
11126
- margin-right: 35px;
11124
+ .ncl-monaco-dark {
11125
+ background-color: @vs-dark;
11127
11126
  }
11128
11127
  }
11129
11128
 
11129
+
11130
11130
  .ncl-search-input {
11131
11131
  position: relative;
11132
11132
  color: @silver;
@@ -11727,7 +11727,7 @@ ncl-navigation-tabs {
11727
11727
  height: 95%;
11728
11728
 
11729
11729
  .info-page-filters {
11730
- z-index: 990;
11730
+ z-index: 1000;
11731
11731
 
11732
11732
  .multiple-checkboxes-option {
11733
11733
  margin: 10px 0;
@@ -11893,59 +11893,6 @@ ncl-navigation-tabs {
11893
11893
  }
11894
11894
  }
11895
11895
 
11896
- .ncl-version-trigger {
11897
- padding: 11px 24px;
11898
-
11899
- .common-table-header {
11900
- border: none;
11901
- padding-left: 24px;
11902
-
11903
- .common-table-cell {
11904
- font-size: 14px;
11905
- font-weight: bold;
11906
- letter-spacing: normal;
11907
- color: @dusk-three;
11908
- height: 46px;
11909
- }
11910
- }
11911
-
11912
- .common-table-body {
11913
- .common-table-row {
11914
- &:not(.read-only):hover {
11915
- .common-table-cells-container {
11916
- background-color: @white;
11917
- }
11918
-
11919
- .actions-menu {
11920
- background-color: @white;
11921
- }
11922
- }
11923
- }
11924
- }
11925
-
11926
- .http-trigger-checkbox {
11927
- display: flex;
11928
- }
11929
-
11930
- .item-row .item-name, .item-row .item-class, .item-row .item-info {
11931
- padding-left: 0;
11932
- }
11933
-
11934
- .title-field-row .name-field, .item-row .item-name, .header-name {
11935
- margin-right: 16px;
11936
- width: 15%;
11937
- }
11938
-
11939
- .title-field-row .class-field, .item-row .item-class, .header-class {
11940
- margin-right: 16px;
11941
- width: 10%;
11942
- }
11943
-
11944
- .title-field-row .class-field {
11945
- width: auto;
11946
- }
11947
- }
11948
-
11949
11896
  .ncl-version-monitoring {
11950
11897
  > .igz-scrollable-container {
11951
11898
  padding: 24px 25px 22px 41px;
@@ -12079,6 +12026,59 @@ ncl-navigation-tabs {
12079
12026
  }
12080
12027
  }
12081
12028
 
12029
+ .ncl-version-trigger {
12030
+ padding: 11px 24px;
12031
+
12032
+ .common-table-header {
12033
+ border: none;
12034
+ padding-left: 24px;
12035
+
12036
+ .common-table-cell {
12037
+ font-size: 14px;
12038
+ font-weight: bold;
12039
+ letter-spacing: normal;
12040
+ color: @dusk-three;
12041
+ height: 46px;
12042
+ }
12043
+ }
12044
+
12045
+ .common-table-body {
12046
+ .common-table-row {
12047
+ &:not(.read-only):hover {
12048
+ .common-table-cells-container {
12049
+ background-color: @white;
12050
+ }
12051
+
12052
+ .actions-menu {
12053
+ background-color: @white;
12054
+ }
12055
+ }
12056
+ }
12057
+ }
12058
+
12059
+ .http-trigger-checkbox {
12060
+ display: flex;
12061
+ }
12062
+
12063
+ .item-row .item-name, .item-row .item-class, .item-row .item-info {
12064
+ padding-left: 0;
12065
+ }
12066
+
12067
+ .title-field-row .name-field, .item-row .item-name, .header-name {
12068
+ margin-right: 16px;
12069
+ width: 15%;
12070
+ }
12071
+
12072
+ .title-field-row .class-field, .item-row .item-class, .header-class {
12073
+ margin-right: 16px;
12074
+ width: 10%;
12075
+ }
12076
+
12077
+ .title-field-row .class-field {
12078
+ width: auto;
12079
+ }
12080
+ }
12081
+
12082
12082
  .ncl-text-size-dropdown {
12083
12083
  display: flex;
12084
12084
  justify-content: flex-end;
@@ -12460,76 +12460,6 @@ ncl-navigation-tabs {
12460
12460
  }
12461
12461
  }
12462
12462
 
12463
- .function-import-wrapper-content {
12464
- font-family: @font-family-sans-serif;
12465
- padding-left: 3%;
12466
- width: 96%;
12467
-
12468
- .function-import-form {
12469
- display: flex;
12470
- align-items: flex-end;
12471
- margin-bottom: 10px;
12472
-
12473
- .projects-drop-down {
12474
- margin-right: 48px;
12475
-
12476
- .input-label {
12477
- font-size: 14px;
12478
- font-weight: 600;
12479
- color: @dusk-three;
12480
- }
12481
-
12482
- igz-default-dropdown {
12483
- .default-dropdown {
12484
- background-color: @white;
12485
-
12486
- .default-dropdown-field {
12487
- &:focus {
12488
- background-color: inherit;
12489
- }
12490
- }
12491
- }
12492
- }
12493
- }
12494
-
12495
- .function-import-actions-bar {
12496
- display: flex;
12497
-
12498
- .function-import-file-picker {
12499
- .file-picker-wrapper {
12500
- margin: 0;
12501
- line-height: 34px;
12502
-
12503
- .igz-icon-upload {
12504
- margin-right: 10px;
12505
- }
12506
- }
12507
-
12508
- .function-import-input {
12509
- opacity: 0;
12510
- position: absolute;
12511
- z-index: -1;
12512
- }
12513
- }
12514
- }
12515
- }
12516
-
12517
- .splash-screen {
12518
- top: 0;
12519
- }
12520
-
12521
- .function-import-monaco {
12522
- .ncl-monaco {
12523
- height: 370px;
12524
- width: 100%;
12525
-
12526
- .monaco-code-editor {
12527
- height: 100%;
12528
- }
12529
- }
12530
- }
12531
- }
12532
-
12533
12463
  .test-events-pane-wrapper {
12534
12464
  position: absolute;
12535
12465
  height: 100%;
@@ -13188,38 +13118,108 @@ ncl-navigation-tabs {
13188
13118
  }
13189
13119
  }
13190
13120
 
13191
- .message {
13192
- margin-top: 14px;
13193
- width: 245px;
13194
- font-size: 16px;
13195
- color: @greyish-purple;
13196
- line-height: 1.5;
13121
+ .message {
13122
+ margin-top: 14px;
13123
+ width: 245px;
13124
+ font-size: 16px;
13125
+ color: @greyish-purple;
13126
+ line-height: 1.5;
13127
+ }
13128
+ }
13129
+ }
13130
+
13131
+ .headers {
13132
+ padding: 28px 41px;
13133
+
13134
+ > div {
13135
+ display: flex;
13136
+ line-height: 2;
13137
+
13138
+ .labels {
13139
+ color: @greyish-purple;
13140
+ font-size: 14px;
13141
+ width: 43%;
13142
+ }
13143
+
13144
+ .values {
13145
+ color: @dusk-three;
13146
+ font-size: 14px;
13147
+ width: 57%;
13148
+ }
13149
+ }
13150
+ }
13151
+ }
13152
+ }
13153
+ }
13154
+
13155
+ .function-import-wrapper-content {
13156
+ font-family: @font-family-sans-serif;
13157
+ padding-left: 3%;
13158
+ width: 96%;
13159
+
13160
+ .function-import-form {
13161
+ display: flex;
13162
+ align-items: flex-end;
13163
+ margin-bottom: 10px;
13164
+
13165
+ .projects-drop-down {
13166
+ margin-right: 48px;
13167
+
13168
+ .input-label {
13169
+ font-size: 14px;
13170
+ font-weight: 600;
13171
+ color: @dusk-three;
13172
+ }
13173
+
13174
+ igz-default-dropdown {
13175
+ .default-dropdown {
13176
+ background-color: @white;
13177
+
13178
+ .default-dropdown-field {
13179
+ &:focus {
13180
+ background-color: inherit;
13181
+ }
13197
13182
  }
13198
13183
  }
13199
13184
  }
13185
+ }
13200
13186
 
13201
- .headers {
13202
- padding: 28px 41px;
13187
+ .function-import-actions-bar {
13188
+ display: flex;
13203
13189
 
13204
- > div {
13205
- display: flex;
13206
- line-height: 2;
13190
+ .function-import-file-picker {
13191
+ .file-picker-wrapper {
13192
+ margin: 0;
13193
+ line-height: 34px;
13207
13194
 
13208
- .labels {
13209
- color: @greyish-purple;
13210
- font-size: 14px;
13211
- width: 43%;
13195
+ .igz-icon-upload {
13196
+ margin-right: 10px;
13212
13197
  }
13198
+ }
13213
13199
 
13214
- .values {
13215
- color: @dusk-three;
13216
- font-size: 14px;
13217
- width: 57%;
13218
- }
13200
+ .function-import-input {
13201
+ opacity: 0;
13202
+ position: absolute;
13203
+ z-index: -1;
13219
13204
  }
13220
13205
  }
13221
13206
  }
13222
13207
  }
13208
+
13209
+ .splash-screen {
13210
+ top: 0;
13211
+ }
13212
+
13213
+ .function-import-monaco {
13214
+ .ncl-monaco {
13215
+ height: 370px;
13216
+ width: 100%;
13217
+
13218
+ .monaco-code-editor {
13219
+ height: 100%;
13220
+ }
13221
+ }
13222
+ }
13223
13223
  }
13224
13224
 
13225
13225
  .function-from-template-dialog-wrapper {
@@ -13552,102 +13552,6 @@ ncl-navigation-tabs {
13552
13552
  }
13553
13553
  }
13554
13554
 
13555
- @desktop: 1350px;
13556
- @desktop-low: 1202px;
13557
- @desktop-middle: 1550px;
13558
-
13559
- .ncl-version-configuration-basic-settings {
13560
- .row {
13561
- display: flex;
13562
- justify-content: space-between;
13563
-
13564
- &:not(:last-child) {
13565
- margin-bottom: 23px;
13566
- }
13567
-
13568
- &:last-child {
13569
- margin-bottom: 4px;
13570
- }
13571
-
13572
- &.enable-checkbox {
13573
- justify-content: flex-start;
13574
- margin-bottom: 18px;
13575
- }
13576
-
13577
- > div {
13578
- flex: 1;
13579
-
13580
- &:not(:last-child) {
13581
- margin-right: 46px;
13582
- }
13583
-
13584
- .label {
13585
- padding: 0;
13586
- margin-bottom: 5px;
13587
- }
13588
-
13589
- &.timeout-block {
13590
- .label {
13591
- margin-bottom: 3px;
13592
- }
13593
-
13594
- .timeout-values {
13595
- margin-left: 27px;
13596
-
13597
- .inputs {
13598
- display: flex;
13599
- align-items: center;
13600
-
13601
- .values-label {
13602
- .duskThree(0.9);
13603
- margin: 0 17px 0 8px;
13604
- font-size: 14px;
13605
- font-weight: normal;
13606
- font-style: normal;
13607
- letter-spacing: normal;
13608
- text-align: left;
13609
- color: @color;
13610
- }
13611
- }
13612
- }
13613
- }
13614
- }
13615
-
13616
- .logger-block {
13617
- display: flex;
13618
- margin-top: 3px;
13619
-
13620
- .logger-dropdown {
13621
- .default-dropdown {
13622
- position: relative;
13623
- height: 36px;
13624
-
13625
- .dropdown-overlap {
13626
- z-index: 100;
13627
- }
13628
- }
13629
- }
13630
-
13631
- > div {
13632
- flex: 1;
13633
-
13634
- &:not(:last-child) {
13635
- margin-right: 16px;
13636
- }
13637
-
13638
- .label {
13639
- padding: 0;
13640
- margin-bottom: 5px;
13641
- }
13642
-
13643
- &.logger-input {
13644
- flex-grow: 1.95;
13645
- }
13646
- }
13647
- }
13648
- }
13649
- }
13650
-
13651
13555
  .ncl-version-configuration-build {
13652
13556
  &.disabled {
13653
13557
  opacity: .5;
@@ -13887,13 +13791,98 @@ ncl-navigation-tabs {
13887
13791
  }
13888
13792
  }
13889
13793
 
13890
- .ncl-version-configuration-logging {
13794
+ @desktop: 1350px;
13795
+ @desktop-low: 1202px;
13796
+ @desktop-middle: 1550px;
13797
+
13798
+ .ncl-version-configuration-basic-settings {
13891
13799
  .row {
13892
13800
  display: flex;
13893
- position: relative;
13801
+ justify-content: space-between;
13894
13802
 
13895
- .logging-wrapper {
13896
- width: 100%;
13803
+ &:not(:last-child) {
13804
+ margin-bottom: 23px;
13805
+ }
13806
+
13807
+ &:last-child {
13808
+ margin-bottom: 4px;
13809
+ }
13810
+
13811
+ &.enable-checkbox {
13812
+ justify-content: flex-start;
13813
+ margin-bottom: 18px;
13814
+ }
13815
+
13816
+ > div {
13817
+ flex: 1;
13818
+
13819
+ &:not(:last-child) {
13820
+ margin-right: 46px;
13821
+ }
13822
+
13823
+ .label {
13824
+ padding: 0;
13825
+ margin-bottom: 5px;
13826
+ }
13827
+
13828
+ &.timeout-block {
13829
+ .label {
13830
+ margin-bottom: 3px;
13831
+ }
13832
+
13833
+ .timeout-values {
13834
+ margin-left: 27px;
13835
+
13836
+ .inputs {
13837
+ display: flex;
13838
+ align-items: center;
13839
+
13840
+ .values-label {
13841
+ .duskThree(0.9);
13842
+ margin: 0 17px 0 8px;
13843
+ font-size: 14px;
13844
+ font-weight: normal;
13845
+ font-style: normal;
13846
+ letter-spacing: normal;
13847
+ text-align: left;
13848
+ color: @color;
13849
+ }
13850
+ }
13851
+ }
13852
+ }
13853
+ }
13854
+
13855
+ .logger-block {
13856
+ display: flex;
13857
+ margin-top: 3px;
13858
+
13859
+ .logger-dropdown {
13860
+ .default-dropdown {
13861
+ position: relative;
13862
+ height: 36px;
13863
+
13864
+ .dropdown-overlap {
13865
+ z-index: 100;
13866
+ }
13867
+ }
13868
+ }
13869
+
13870
+ > div {
13871
+ flex: 1;
13872
+
13873
+ &:not(:last-child) {
13874
+ margin-right: 16px;
13875
+ }
13876
+
13877
+ .label {
13878
+ padding: 0;
13879
+ margin-bottom: 5px;
13880
+ }
13881
+
13882
+ &.logger-input {
13883
+ flex-grow: 1.95;
13884
+ }
13885
+ }
13897
13886
  }
13898
13887
  }
13899
13888
  }
@@ -13955,6 +13944,17 @@ ncl-navigation-tabs {
13955
13944
  }
13956
13945
  }
13957
13946
 
13947
+ .ncl-version-configuration-logging {
13948
+ .row {
13949
+ display: flex;
13950
+ position: relative;
13951
+
13952
+ .logging-wrapper {
13953
+ width: 100%;
13954
+ }
13955
+ }
13956
+ }
13957
+
13958
13958
  .ncl-version-configuration-runtime-attributes {
13959
13959
  .row:not(.info-row) {
13960
13960
  display: flex;