iguazio.dashboard-controls 1.2.5 → 1.2.6

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.
@@ -1,3 +1,9 @@
1
+ .common-table-cell {
2
+ &.status {
3
+ min-width: 95px;
4
+ }
5
+ }
6
+
1
7
  //
2
8
  // Common styles for buttons
3
9
  //
@@ -3608,12 +3614,6 @@ html input[disabled], html textarea[disabled] {
3608
3614
 
3609
3615
  // Media Query
3610
3616
  @retina-display: ~"only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";
3611
- .common-table-cell {
3612
- &.status {
3613
- min-width: 95px;
3614
- }
3615
- }
3616
-
3617
3617
  ncl-functions {
3618
3618
  igz-info-page-actions-bar {
3619
3619
  .igz-info-page-actions-bar {
@@ -3666,149 +3666,6 @@ ncl-functions {
3666
3666
  }
3667
3667
  }
3668
3668
 
3669
- /**
3670
- UI.Layout CSS
3671
- *************************************/
3672
- .stretch {
3673
- position: absolute;
3674
- top: 0;
3675
- left: 0;
3676
- right: 0;
3677
- bottom: 0;
3678
- /* Can be changed by hand ;)*/
3679
- overflow: auto;
3680
- }
3681
-
3682
- .animate-row, .animate-column {
3683
- -webkit-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3684
- -moz-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3685
- -ms-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3686
- -o-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3687
- transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3688
- }
3689
-
3690
- .ui-splitbar {
3691
- display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
3692
- display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
3693
- display: -ms-flexbox; /* TWEENER - IE 10 */
3694
- display: -webkit-flex; /* NEW - Chrome */
3695
- display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
3696
- -webkit-justify-content: center;
3697
- justify-content: center;
3698
-
3699
- background-color: #ffffff;
3700
- right: auto;
3701
- position: absolute;
3702
- z-index: 1;
3703
- }
3704
-
3705
- .ui-layout-row > .ui-splitbar {
3706
- height: 8px;
3707
- width: 100%;
3708
- cursor: row-resize;
3709
- text-align: center;
3710
- justify-content: center;
3711
- align-items: center;
3712
- background: linear-gradient(to bottom, #fff 0%, #eee 100%);
3713
- overflow-y: hidden;
3714
- }
3715
-
3716
- .ui-layout-column > .ui-splitbar {
3717
- width: 8px;
3718
- height: 100%;
3719
- cursor: col-resize;
3720
- -webkit-flex-direction: column;
3721
- flex-direction: column;
3722
- background: linear-gradient(to right, #fff 0%, #eee 100%);
3723
- overflow-x: hidden;
3724
- }
3725
-
3726
- .ui-layout-column > .ui-splitbar > a,
3727
- .ui-layout-row > .ui-splitbar > a {
3728
- cursor: pointer;
3729
- text-align: center;
3730
- font-size: 16px;
3731
- color: #aaa;
3732
- }
3733
-
3734
- .ui-layout-column > .ui-splitbar > a:nth-child(2) {
3735
- margin-top: 0.35rem;
3736
- }
3737
-
3738
- .ui-layout-row > .ui-splitbar > a:nth-child(2) {
3739
- margin-left: 0.35rem;
3740
- }
3741
-
3742
-
3743
- /**
3744
- * Icons
3745
- **/
3746
-
3747
- .ui-splitbar-icon {
3748
- width: 0;
3749
- height: 0;
3750
- display: inline-block;
3751
- }
3752
-
3753
- .ui-splitbar-icon-up {
3754
- border-left: 0.45em solid transparent;
3755
- border-right: 0.45em solid transparent;
3756
- border-bottom: 0.45em solid;
3757
- }
3758
-
3759
- .ui-splitbar-icon-down {
3760
- border-left: 0.45em solid transparent;
3761
- border-right: 0.45em solid transparent;
3762
- border-top: 0.45em solid;
3763
- margin-right: 0.45em;
3764
- }
3765
-
3766
- .ui-splitbar-icon-right {
3767
- border-top: 0.45em solid transparent;
3768
- border-bottom: 0.45em solid transparent;
3769
- border-left: 0.45em solid;
3770
-
3771
- }
3772
-
3773
- .ui-splitbar-icon-left {
3774
- border-top: 0.45em solid transparent;
3775
- border-bottom: 0.45em solid transparent;
3776
- border-right: 0.45em solid;
3777
- margin-top: 0.45em;
3778
- }
3779
-
3780
- /* Allow disabling of icons */
3781
- .no-toggle .ui-splitbar-icon {
3782
- display: none;
3783
- }
3784
-
3785
- @media only screen and (max-device-width: 480px) {
3786
- .no-mobile-toggle .ui-splitbar-icon {
3787
- display: none;
3788
- }
3789
- }
3790
-
3791
- @media print {
3792
- .ui-splitbar {
3793
- display: none;
3794
- }
3795
-
3796
- .stretch {
3797
- position: relative;
3798
- }
3799
-
3800
- /* The last item can take up any amount of space. */
3801
- .stretch.ui-layout-container:last-child {
3802
- position: static;
3803
- overflow: visible;
3804
- }
3805
- }
3806
-
3807
- /* Make sure hidden elements are in fact not rendered. */
3808
- .ui-layout-hidden {
3809
- display: none;
3810
- }
3811
-
3812
3669
  /*
3813
3670
  == malihu jquery custom scrollbar plugin ==
3814
3671
  Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
@@ -5531,56 +5388,199 @@ yx-axis
5531
5388
 
5532
5389
  /* ---------------------------------------- */
5533
5390
 
5534
- .action-checkbox {
5535
- .action-checkbox-color-set();
5391
+ /**
5392
+ UI.Layout CSS
5393
+ *************************************/
5394
+ .stretch {
5395
+ position: absolute;
5396
+ top: 0;
5397
+ left: 0;
5398
+ right: 0;
5399
+ bottom: 0;
5400
+ /* Can be changed by hand ;)*/
5401
+ overflow: auto;
5402
+ }
5536
5403
 
5537
- line-height: 16px;
5538
- text-align: center;
5404
+ .animate-row, .animate-column {
5405
+ -webkit-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5406
+ -moz-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5407
+ -ms-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5408
+ -o-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5409
+ transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5410
+ }
5539
5411
 
5540
- .check-item {
5541
- font-size: 16px;
5542
- cursor: pointer;
5543
- line-height: 1;
5544
- vertical-align: middle;
5412
+ .ui-splitbar {
5413
+ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
5414
+ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
5415
+ display: -ms-flexbox; /* TWEENER - IE 10 */
5416
+ display: -webkit-flex; /* NEW - Chrome */
5417
+ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
5418
+ -webkit-justify-content: center;
5419
+ justify-content: center;
5545
5420
 
5546
- &.igz-icon-checkbox-unchecked {
5547
- color: @icon-checkbox-unchecked;
5548
- }
5421
+ background-color: #ffffff;
5422
+ right: auto;
5423
+ position: absolute;
5424
+ z-index: 1;
5425
+ }
5549
5426
 
5550
- &.igz-icon-checkbox-checked {
5551
- color: @icon-checkbox-checked;
5552
- }
5553
- }
5427
+ .ui-layout-row > .ui-splitbar {
5428
+ height: 8px;
5429
+ width: 100%;
5430
+ cursor: row-resize;
5431
+ text-align: center;
5432
+ justify-content: center;
5433
+ align-items: center;
5434
+ background: linear-gradient(to bottom, #fff 0%, #eee 100%);
5435
+ overflow-y: hidden;
5554
5436
  }
5555
- .action-checkbox-all {
5556
- .action-checkbox-all-color-set();
5557
5437
 
5558
- text-align: center;
5438
+ .ui-layout-column > .ui-splitbar {
5439
+ width: 8px;
5440
+ height: 100%;
5441
+ cursor: col-resize;
5442
+ -webkit-flex-direction: column;
5443
+ flex-direction: column;
5444
+ background: linear-gradient(to right, #fff 0%, #eee 100%);
5445
+ overflow-x: hidden;
5446
+ }
5559
5447
 
5560
- .check-item {
5561
- cursor: pointer;
5562
- color: @check-item-color;
5563
- font-size: 16px;
5564
- line-height: 1;
5565
- vertical-align: middle;
5448
+ .ui-layout-column > .ui-splitbar > a,
5449
+ .ui-layout-row > .ui-splitbar > a {
5450
+ cursor: pointer;
5451
+ text-align: center;
5452
+ font-size: 16px;
5453
+ color: #aaa;
5454
+ }
5566
5455
 
5567
- &.igz-icon-checkbox-checked {
5568
- color: @check-item-icon-checkbox-checked-color;
5569
- }
5570
- }
5456
+ .ui-layout-column > .ui-splitbar > a:nth-child(2) {
5457
+ margin-top: 0.35rem;
5571
5458
  }
5572
- .igz-action-menu {
5573
- .action-menu-color-set();
5574
- .action-icon-color-set();
5575
5459
 
5576
- opacity: 1;
5577
- position: relative;
5460
+ .ui-layout-row > .ui-splitbar > a:nth-child(2) {
5461
+ margin-left: 0.35rem;
5462
+ }
5578
5463
 
5579
- .menu-button {
5580
- color: @menu-btn-color;
5581
- cursor: pointer;
5582
- font-size: 18px;
5583
- height: 19px;
5464
+
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
5584
  text-align: center;
5585
5585
  transition: @igz-basic-transition-color;
5586
5586
  width: 30px;
@@ -7395,82 +7395,235 @@ yx-axis
7395
7395
  }
7396
7396
  }
7397
7397
 
7398
- .igz-pagination {
7399
- .pagination-color-set();
7400
-
7401
- float: right;
7402
- padding: 24px 36px 5px 30px;
7398
+ .igz-number-input {
7399
+ .number-input-color-set();
7403
7400
 
7404
- > div {
7405
- vertical-align: top;
7406
- }
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;
7407
7416
 
7408
- .rows-title, .per-page, .jump-to-page, .to-page-prev, .to-page-next {
7409
- display: inline-block;
7410
- vertical-align: baseline;
7411
- }
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
+ }
7412
7424
 
7413
- .rows-title {
7414
- font-size: 13px;
7415
- color: @rows-title-color;
7416
- font-family: @font-family-sans-serif;
7417
- }
7425
+ &:focus-within, &.focused {
7426
+ outline: 0;
7427
+ border: @number-input-not-disabled-hover-focus-border;
7428
+ }
7418
7429
 
7419
- .per-page {
7420
- width: 66px;
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
+ }
7421
7435
 
7422
- .default-dropdown-field {
7423
- background: none;
7424
- border: none;
7436
+ &:focus.ng-valid, &:focus.ng-pristine {
7437
+ border: @number-input-not-disabled-valid-border;
7425
7438
  box-shadow: none;
7426
- font-size: 14px;
7427
- height: 36px;
7439
+ outline: none;
7440
+ }
7441
+ }
7428
7442
 
7429
- .dropdown-selected-item {
7430
- font-size: 14px;
7431
- }
7443
+ &.additional-left-padding {
7444
+ padding-left: 22px;
7445
+ }
7432
7446
 
7433
- .dropdown-arrow {
7434
- margin-top: 5px;
7447
+ .input-field {
7448
+ border: none;
7449
+ outline: 0;
7450
+ padding: 0;
7451
+ text-align: left;
7452
+ background-color: @number-input-field-bg-color;
7453
+ }
7435
7454
 
7436
- span {
7437
- font-size: 12px;
7438
- }
7439
- }
7455
+ //
7456
+ // placeholder
7457
+ //
7440
7458
 
7441
- .dropdown-arrow {
7442
- border: none;
7459
+ ::-webkit-input-placeholder {
7460
+ /* Chrome, Chromium, Edge, Safari, Opera*/
7461
+ color: @number-input-placeholder-color;
7462
+ }
7443
7463
 
7444
- &:hover, &:active {
7445
- border: none;
7446
- background: none;
7447
- box-shadow: none;
7448
- }
7449
- }
7464
+ :-moz-placeholder {
7465
+ /* Firefox 4-18 */
7466
+ color: @number-input-placeholder-color;
7467
+ }
7450
7468
 
7451
- &:focus {
7452
- .dropdown-selected-item {
7453
- border: none;
7454
- }
7455
- }
7456
- }
7469
+ ::-moz-placeholder {
7470
+ /* Firefox 19+ */
7471
+ color: @number-input-placeholder-color;
7472
+ }
7457
7473
 
7458
- .default-dropdown-container {
7459
- width: 66px;
7474
+ :-ms-input-placeholder {
7475
+ /* - Internet Explorer 10–11
7476
+ - Internet Explorer Mobile 10-11 */
7477
+ color: @number-input-placeholder-color !important;
7478
+ }
7460
7479
 
7461
- .list-item {
7462
- padding-left: 15px;
7480
+ ::placeholder {
7481
+ /* modern browser versions */
7482
+ color: @number-input-placeholder-color;
7483
+ }
7463
7484
 
7464
- .list-item-label {
7465
- margin-right: 10px;
7466
- }
7467
- }
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;
7468
7491
  }
7469
7492
  }
7470
7493
 
7471
- .jump-to-page {
7472
- margin-left: 7px;
7473
-
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;
7596
+
7597
+ &:hover, &:active {
7598
+ border: none;
7599
+ background: none;
7600
+ box-shadow: none;
7601
+ }
7602
+ }
7603
+
7604
+ &:focus {
7605
+ .dropdown-selected-item {
7606
+ border: none;
7607
+ }
7608
+ }
7609
+ }
7610
+
7611
+ .default-dropdown-container {
7612
+ width: 66px;
7613
+
7614
+ .list-item {
7615
+ padding-left: 15px;
7616
+
7617
+ .list-item-label {
7618
+ margin-right: 10px;
7619
+ }
7620
+ }
7621
+ }
7622
+ }
7623
+
7624
+ .jump-to-page {
7625
+ margin-left: 7px;
7626
+
7474
7627
  & > div, .jump-to-page-input {
7475
7628
  display: inline-block;
7476
7629
  vertical-align: baseline;
@@ -7543,159 +7696,193 @@ yx-axis
7543
7696
  }
7544
7697
  }
7545
7698
  }
7546
- .igz-number-input {
7547
- .number-input-color-set();
7699
+ .search-input {
7700
+ .search-input-color-set();
7548
7701
 
7549
- min-width: 115px;
7550
- font-family: @font-family-sans-serif;
7551
- font-size: 14px;
7552
- font-weight: 400;
7553
- height: 36px;
7554
7702
  position: relative;
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;
7703
+ color: @search-input-color;
7564
7704
 
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;
7571
- }
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%;
7572
7717
 
7573
- &:focus-within, &.focused {
7574
- outline: 0;
7575
- border: @number-input-not-disabled-hover-focus-border;
7718
+ &::-webkit-input-placeholder {
7719
+ color: @search-input-placeholder-color;
7576
7720
  }
7577
7721
 
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;
7722
+ &:-moz-placeholder { /* Firefox 18- */
7723
+ color: @search-input-placeholder-color;
7582
7724
  }
7583
7725
 
7584
- &:focus.ng-valid, &:focus.ng-pristine {
7585
- border: @number-input-not-disabled-valid-border;
7586
- box-shadow: none;
7587
- outline: none;
7726
+ &::-moz-placeholder { /* Firefox 19+ */
7727
+ color: @search-input-placeholder-color;
7588
7728
  }
7589
- }
7590
7729
 
7591
- &.additional-left-padding {
7592
- padding-left: 22px;
7593
- }
7730
+ &:-ms-input-placeholder {
7731
+ color: @search-input-placeholder-color;
7732
+ }
7594
7733
 
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
- }
7734
+ &:focus {
7735
+ &, & + .igz-icon-search:before {
7736
+ color: @search-input-focus-icon-search-before-color;
7737
+ }
7602
7738
 
7603
- //
7604
- // placeholder
7605
- //
7739
+ &::-webkit-input-placeholder {
7740
+ color: @search-input-focus-placeholder-color;
7741
+ }
7606
7742
 
7607
- ::-webkit-input-placeholder {
7608
- /* Chrome, Chromium, Edge, Safari, Opera*/
7609
- color: @number-input-placeholder-color;
7610
- }
7743
+ &:-moz-placeholder { /* Firefox 18- */
7744
+ color: @search-input-focus-placeholder-color;
7745
+ }
7611
7746
 
7612
- :-moz-placeholder {
7613
- /* Firefox 4-18 */
7614
- color: @number-input-placeholder-color;
7615
- }
7747
+ &::-moz-placeholder { /* Firefox 19+ */
7748
+ color: @search-input-focus-placeholder-color;
7749
+ }
7616
7750
 
7617
- ::-moz-placeholder {
7618
- /* Firefox 19+ */
7619
- color: @number-input-placeholder-color;
7620
- }
7751
+ &:-ms-input-placeholder {
7752
+ color: @search-input-focus-placeholder-color;
7753
+ }
7621
7754
 
7622
- :-ms-input-placeholder {
7623
- /* - Internet Explorer 10–11
7624
- - Internet Explorer Mobile 10-11 */
7625
- color: @number-input-placeholder-color !important;
7755
+ &::placeholder {
7756
+ /* modern browser versions */
7757
+ color: @search-input-focus-placeholder-color !important;
7758
+ }
7759
+ }
7626
7760
  }
7627
7761
 
7628
- ::placeholder {
7629
- /* modern browser versions */
7630
- color: @number-input-placeholder-color;
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;
7631
7770
  }
7632
7771
 
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;
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;
7784
+
7785
+ &:hover {
7786
+ opacity: 1;
7639
7787
  }
7640
7788
  }
7641
7789
 
7642
- .suffix-unit-container {
7643
- display: flex;
7644
- align-items: center;
7790
+ input::-ms-clear {
7791
+ display: none;
7792
+ }
7793
+ }
7645
7794
 
7646
- .suffix-unit {
7647
- color: @number-input-suffix-unit-color;
7648
- font-size: 14px;
7649
- font-weight: 400;
7650
- padding-left: 3px;
7651
- }
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%;
7652
7809
  }
7653
7810
 
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;
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
+ }
7661
7821
 
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;
7822
+ input::-ms-clear {
7823
+ display: none;
7824
+ }
7825
+ }
7668
7826
 
7669
- &:hover {
7670
- color: @number-input-arrow-block-icon-hover-color;
7671
- }
7672
- }
7827
+ .search-input-not-found {
7828
+ .search-input-color-set();
7829
+
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;
7838
+
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;
7673
7846
  }
7674
7847
 
7675
- &.disabled {
7676
- background-color: @number-input-disabled-bg-color;
7677
- opacity: 0.5;
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;
7678
7862
 
7679
- .suffix-unit {
7680
- opacity: 0.5;
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;
7681
7867
  }
7682
7868
 
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
- }
7869
+ &:focus {
7870
+ outline: none;
7689
7871
  }
7690
- }
7691
- }
7692
7872
 
7693
- .step3, .step4 {
7694
- .additional-right-padding {
7695
- padding-right: 50px;
7873
+ &:active {
7874
+ background-color: @create-item-btn-active-bg-color;
7875
+ box-shadow: @create-item-btn-active-box-shadow;
7876
+ border: none;
7877
+ }
7878
+
7879
+ .igz-icon-add {
7880
+ font-size: 10px;
7881
+ line-height: 15px;
7882
+ padding-right: 8px;
7883
+ }
7696
7884
  }
7697
7885
  }
7698
-
7699
7886
  .igz-size {
7700
7887
  .size-color-set();
7701
7888
 
@@ -7787,269 +7974,82 @@ yx-axis
7787
7974
  }
7788
7975
  }
7789
7976
 
7790
- .search-input {
7791
- .search-input-color-set();
7977
+ .igz-slider-input-block {
7978
+ .igz-slider-input-block-color-set();
7792
7979
 
7793
7980
  position: relative;
7794
- color: @search-input-color;
7795
7981
 
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;
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;
7801
7989
  font-weight: 400;
7802
- height: 52px;
7803
- line-height: 52px;
7804
- margin: 0;
7805
- outline: 0;
7806
- padding-right: 20px;
7807
- width: 100%;
7990
+ text-align: left;
7991
+ cursor: default;
7808
7992
 
7809
- &::-webkit-input-placeholder {
7810
- color: @search-input-placeholder-color;
7993
+ .igz-slider-input-title-text {
7994
+ display: table-cell;
7995
+ vertical-align: middle;
7811
7996
  }
7997
+ }
7812
7998
 
7813
- &:-moz-placeholder { /* Firefox 18- */
7814
- color: @search-input-placeholder-color;
7815
- }
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;
7816
8004
 
7817
- &::-moz-placeholder { /* Firefox 19+ */
7818
- color: @search-input-placeholder-color;
7819
- }
8005
+ .rzslider {
8006
+ margin: 0;
8007
+ height: 8px;
7820
8008
 
7821
- &:-ms-input-placeholder {
7822
- color: @search-input-placeholder-color;
7823
- }
8009
+ .rz-bar-wrapper {
8010
+ height: auto;
8011
+ margin: 0;
8012
+ padding: 0;
7824
8013
 
7825
- &:focus {
7826
- &, & + .igz-icon-search:before {
7827
- color: @search-input-focus-icon-search-before-color;
8014
+ .rz-bar {
8015
+ background-color: @rz-bar-bg-color;
8016
+ height: 3px;
8017
+ }
7828
8018
  }
7829
8019
 
7830
- &::-webkit-input-placeholder {
7831
- color: @search-input-focus-placeholder-color;
8020
+ .rz-bubble {
8021
+ display: none;
7832
8022
  }
7833
8023
 
7834
- &:-moz-placeholder { /* Firefox 18- */
7835
- color: @search-input-focus-placeholder-color;
7836
- }
8024
+ .rz-pointer {
8025
+ height: 14px;
8026
+ width: 14px;
8027
+ top: -6px;
8028
+ box-shadow: @rz-pointer-box-shadow;
8029
+ outline: 0;
7837
8030
 
7838
- &::-moz-placeholder { /* Firefox 19+ */
7839
- color: @search-input-focus-placeholder-color;
8031
+ &:after {
8032
+ display: none;
8033
+ }
7840
8034
  }
7841
8035
 
7842
- &:-ms-input-placeholder {
7843
- color: @search-input-focus-placeholder-color;
7844
- }
8036
+ &:not([disabled]) {
8037
+ .rz-bar.rz-selection {
8038
+ background-color: @rz-selection-bg-color;
8039
+ }
7845
8040
 
7846
- &::placeholder {
7847
- /* modern browser versions */
7848
- color: @search-input-focus-placeholder-color !important;
8041
+ .rz-pointer {
8042
+ background-color: @rz-pointer-bg-color;
8043
+ }
7849
8044
  }
7850
8045
  }
7851
8046
  }
7852
8047
 
7853
- .igz-icon-search {
7854
- font-size: 16px;
7855
- height: 16px;
7856
- position: absolute;
7857
- right: 0;
7858
- top: 17px;
7859
- width: 16px;
7860
- z-index: 1;
7861
- }
7862
-
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;
8048
+ // Current value
8049
+ .igz-slider-input-current-value {
8050
+ float: left;
8051
+ min-height: 30px;
8052
+ line-height: 30px;
8053
8053
 
8054
8054
  &.with-measure-units {
8055
8055
  width: 18%;
@@ -8688,312 +8688,43 @@ form.ng-submitted .validating-input-field {
8688
8688
  }
8689
8689
  }
8690
8690
 
8691
- .igz-info-page-actions-bar {
8692
- .actions-buttons-block {
8693
- margin-top: 3px;
8694
- margin-right: 17px;
8695
- }
8696
- }
8697
- .ncl-primary-button {
8698
- margin-left: 9px;
8699
- }
8691
+ .ncl-api-gateway-row {
8692
+ .common-table-cells-container {
8693
+ .common-table-cell {
8694
+ &.status {
8695
+ text-transform: capitalize;
8700
8696
 
8701
- .ncl-secondary-button {
8702
- vertical-align: top;
8703
- position: relative;
8704
- }
8697
+ &.ready {
8698
+ color: @tealish;
8699
+ }
8705
8700
 
8706
- .btn-close {
8707
- color: .duskThree(0.64)[@color];
8708
- right: 0;
8709
- position: absolute;
8710
- margin-top: 6px;
8711
- margin-right: 24px;
8712
- font-size: 14px;
8713
- line-height: 14px;
8714
- z-index: 11;
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
+ }
8715
8705
 
8716
- &:hover {
8717
- color: .duskThree(1)[@color];
8706
+ &.error {
8707
+ color: @darkish-pink;
8708
+ }
8709
+ }
8710
+ }
8718
8711
  }
8719
- }
8720
8712
 
8721
- .ncl-new-entity-button {
8722
- display: inline-block;
8723
- vertical-align: top;
8724
- position: relative;
8725
- margin-left: 15px;
8726
- }
8713
+ .actions-menu {
8714
+ visibility: hidden;
8715
+ }
8727
8716
 
8728
- .ngdialog {
8729
- z-index: 10000;
8717
+ &.common-table-row {
8718
+ &:hover {
8719
+ .actions-menu {
8720
+ visibility: visible;
8721
+ }
8722
+ }
8723
+ }
8730
8724
  }
8731
8725
 
8732
- .ngdialog-theme-nuclio {
8733
- @animation-duration: 0.2s;
8734
- @animation-function: ease;
8735
- display: flex;
8736
- height: 100%;
8737
- padding: 0 50px;
8738
- min-width: 500px;
8739
- align-items: center;
8740
- justify-content: center;
8741
-
8742
- .ngdialog-content {
8743
- box-shadow: 0 10px 20px 0 .black(0.25)[@color];
8744
- animation-duration: @animation-duration;
8745
- animation-timing-function: @animation-function;
8746
- font-family: @font-family-sans-serif;
8747
- font-size: 16px;
8748
- border-radius: 2px;
8749
- max-width: 900px;
8750
- background-color: @white;
8751
- z-index: 5;
8752
- position: relative;
8753
- padding: 19px 24px 23px 24px;
8754
-
8755
- /*
8756
- * Confirms, alerts
8757
- */
8758
- .notification-text {
8759
- margin: 30px 30px 0 0;
8760
- max-height: 70vh;
8761
- overflow: auto;
8762
-
8763
- .error-list {
8764
- list-style-type: none;
8765
-
8766
- .error-list-item {
8767
- margin-bottom: 5px;
8768
- }
8769
- }
8770
- }
8771
-
8772
- .notification-text.description {
8773
- margin: 10px 30px;
8774
- }
8775
-
8776
- .buttons {
8777
- text-align: right;
8778
-
8779
- button:not(:first-child) {
8780
- margin-left: 8px;
8781
- }
8782
- }
8783
-
8784
- /*
8785
- * Create/edit dialogs
8786
- */
8787
- .close-button {
8788
- position: absolute;
8789
- right: 24px;
8790
- top: 26px;
8791
- line-height: 10px;
8792
- font-size: 14px;
8793
- color: .duskThree(0.64)[@color];
8794
- cursor: pointer;
8795
- }
8796
-
8797
- .title {
8798
- color: @dusk-three;
8799
- font-family: @font-family-sans-serif;
8800
- font-size: 20px;
8801
- font-weight: 500;
8802
- margin: 0 0 21px 0;
8803
- padding-right: 24px;
8804
- }
8805
-
8806
- .main-content {
8807
- margin: 0 0 4px;
8808
-
8809
- .field-group {
8810
- padding: 0 0 20px;
8811
-
8812
- .field-label {
8813
- color: @dusk-three;
8814
- font-size: 14px;
8815
- font-weight: 500;
8816
- padding: 0;
8817
- min-width: 50px;
8818
- margin: 0 0 2px;
8819
- }
8820
-
8821
- .field-input {
8822
- position: relative;
8823
- width: 400px;
8824
-
8825
- .validating-input-field {
8826
- .input-field {
8827
- padding-left: 17px;
8828
- }
8829
-
8830
- .input-placeholder {
8831
- left: 18px;
8832
- font-style: italic;
8833
- }
8834
- }
8835
-
8836
- .error {
8837
- color: @darkish-pink;
8838
- font-size: 12px;
8839
- white-space: nowrap;
8840
- }
8841
- }
8842
- }
8843
- }
8844
- }
8845
-
8846
- &.delete-entity-dialog-wrapper {
8847
- .ngdialog-content {
8848
- padding: 30px 24px 23px 24px;
8849
-
8850
- .notification-text.title {
8851
- text-align: center;
8852
- padding-right: 0;
8853
- color: @darkish-pink;
8854
- font-size: 20px;
8855
- font-weight: 500;
8856
- letter-spacing: normal;
8857
- margin: 11px 0 2px;
8858
- }
8859
-
8860
- .notification-text.description {
8861
- text-align: center;
8862
- margin: 0 37px;
8863
- font-size: 16px;
8864
- font-weight: normal;
8865
- letter-spacing: normal;
8866
- color: @dusk-three;
8867
- }
8868
-
8869
- .nuclio-alert-icon {
8870
- background: url('/assets/images/ic-alert-message.svg');
8871
- height: 29px;
8872
- width: 34px;
8873
- margin: 0 auto;
8874
- }
8875
-
8876
- .buttons {
8877
- margin-top: 30px;
8878
- }
8879
- }
8880
- }
8881
-
8882
- &.ngdialog.ngdialog-closing .ngdialog-content {
8883
- animation-duration: @animation-duration;
8884
- animation-timing-function: @animation-function;
8885
- }
8886
-
8887
- .ngdialog-overlay {
8888
- background: .black(0.6)[@color];
8889
- border: 2px solid @black;
8890
- animation-duration: @animation-duration;
8891
- animation-timing-function: @animation-function;
8892
- }
8893
-
8894
- &.ngdialog.ngdialog-closing .ngdialog-overlay {
8895
- animation-duration: @animation-duration;
8896
- animation-timing-function: @animation-function;
8897
- }
8898
-
8899
- &.ngdialog.ng-login-modal .ngdialog-content {
8900
- padding: 0;
8901
- }
8902
- }
8903
-
8904
- body {
8905
- .ncl-main-wrapper {
8906
- padding: 64px 0 0 215px;
8907
- width: 100%;
8908
- height: 100%;
8909
- }
8910
-
8911
- .table-headers {
8912
- display: flex;
8913
- font-size: 14px;
8914
- font-weight: bold;
8915
- font-style: normal;
8916
- font-stretch: normal;
8917
- letter-spacing: normal;
8918
- color: @dusk-three;
8919
- margin-bottom: 2px;
8920
-
8921
- .key-header {
8922
- width: 34%;
8923
- margin-left: 16px;
8924
-
8925
- &:not(.use-type) {
8926
- width: 36%;
8927
- }
8928
- }
8929
-
8930
- .type-header {
8931
- width: 12%;
8932
- }
8933
-
8934
- .value-header {
8935
- width: 52%;
8936
-
8937
- &:not(.use-type) {
8938
- width: 61%;
8939
- }
8940
- }
8941
- }
8942
-
8943
- .table-body:not(:last-child) {
8944
- margin-bottom: 5px;
8945
- }
8946
- }
8947
-
8948
-
8949
- .logs-common {
8950
- font-family: "Source Code Pro", "Courier New", monospace;
8951
- font-size: 14px;
8952
- line-height: 1.1;
8953
- text-align: left;
8954
- white-space: pre-wrap;
8955
- }
8956
- .tooltip.custom-tooltip {
8957
- transition-duration: 0s;
8958
- z-index: 10001;
8959
- opacity: 1;
8960
-
8961
- .tooltip-arrow {
8962
- display: block;
8963
- margin-left: 0;
8964
- position: absolute;
8965
- top: -1px;
8966
- width: 13px;
8967
- height: 13px;
8968
- transform: rotate(226deg);
8969
- border-right: 1px solid @pale-grey;
8970
- border-bottom: 1px solid @pale-grey;
8971
- border-width: 1px;
8972
- background-color: @white;
8973
- }
8974
-
8975
- &.bottom {
8976
- margin-top: 8px;
8977
- }
8978
-
8979
- &.top {
8980
- margin-top: 4px;
8981
- }
8982
-
8983
- .tooltip-inner {
8984
- background-color: @white;
8985
- color: @dusk-three;
8986
- border-radius: 2px;
8987
- font-size: 14px;
8988
- word-wrap: break-word;
8989
- max-width: 280px;
8990
- padding: 29px 30px;
8991
- box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
8992
- border: solid 1px @pale-grey;
8993
- }
8994
- }
8995
- .new-api-gateway-wizard {
8996
- .new-api-gateway-wizard-color-set();
8726
+ .new-api-gateway-wizard {
8727
+ .new-api-gateway-wizard-color-set();
8997
8728
 
8998
8729
  .content-wrapper {
8999
8730
  .content {
@@ -9256,186 +8987,321 @@ body {
9256
8987
  }
9257
8988
  }
9258
8989
 
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;
9276
- }
9277
- }
9278
- }
8990
+ .igz-info-page-actions-bar {
8991
+ .actions-buttons-block {
8992
+ margin-top: 3px;
8993
+ margin-right: 17px;
9279
8994
  }
8995
+ }
8996
+ .ncl-primary-button {
8997
+ margin-left: 9px;
8998
+ }
9280
8999
 
9281
- .actions-menu {
9282
- visibility: hidden;
9283
- }
9000
+ .ncl-secondary-button {
9001
+ vertical-align: top;
9002
+ position: relative;
9003
+ }
9284
9004
 
9285
- &.common-table-row {
9286
- &:hover {
9287
- .actions-menu {
9288
- visibility: visible;
9289
- }
9290
- }
9005
+ .btn-close {
9006
+ color: .duskThree(0.64)[@color];
9007
+ right: 0;
9008
+ position: absolute;
9009
+ margin-top: 6px;
9010
+ margin-right: 24px;
9011
+ font-size: 14px;
9012
+ line-height: 14px;
9013
+ z-index: 11;
9014
+
9015
+ &:hover {
9016
+ color: .duskThree(1)[@color];
9291
9017
  }
9292
9018
  }
9293
9019
 
9294
- .deploy-deleted-function-dialog {
9295
- .sub-title {
9296
- font-size: 16px;
9297
- color: @silver-chalice-two;
9298
- }
9020
+ .ncl-new-entity-button {
9021
+ display: inline-block;
9022
+ vertical-align: top;
9023
+ position: relative;
9024
+ margin-left: 15px;
9025
+ }
9299
9026
 
9300
- .buttons {
9301
- display: flex;
9302
- justify-content: flex-end;
9303
- }
9027
+ .ngdialog {
9028
+ z-index: 10000;
9304
9029
  }
9305
9030
 
9306
- .ncl-function-collapsing-row {
9307
- background-color: @white;
9308
- margin-bottom: 8px;
9031
+ .ngdialog-theme-nuclio {
9032
+ @animation-duration: 0.2s;
9033
+ @animation-function: ease;
9034
+ display: flex;
9035
+ height: 100%;
9036
+ padding: 0 50px;
9037
+ min-width: 500px;
9038
+ align-items: center;
9039
+ justify-content: center;
9309
9040
 
9310
- .function-title-block {
9311
- height: 50px;
9312
- position: relative;
9041
+ .ngdialog-content {
9042
+ box-shadow: 0 10px 20px 0 .black(0.25)[@color];
9043
+ animation-duration: @animation-duration;
9044
+ animation-timing-function: @animation-function;
9045
+ font-family: @font-family-sans-serif;
9046
+ font-size: 16px;
9047
+ border-radius: 2px;
9048
+ max-width: 900px;
9313
9049
  background-color: @white;
9314
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
9315
- border: solid 1px @pale-grey;
9316
-
9317
- .common-table-cells-container {
9318
- cursor: pointer;
9319
-
9320
- .common-table-cell-content {
9321
- width: 100%;
9322
- white-space: nowrap;
9323
- overflow: hidden;
9324
- text-overflow: ellipsis;
9325
- min-width: 0;
9326
- }
9327
-
9328
- .description-content {
9329
- position: relative;
9330
- white-space: normal;
9331
- max-height: 40px;
9332
- }
9333
-
9334
- .common-table-cell {
9335
- .status-icon {
9336
- display: flex;
9337
- font-size: 20px;
9338
- cursor: pointer;
9339
- margin-left: 9px;
9340
- .duskThree(0.64);
9341
- color: @color;
9342
- }
9050
+ z-index: 5;
9051
+ position: relative;
9052
+ padding: 19px 24px 23px 24px;
9343
9053
 
9344
- .version-text {
9345
- display: block;
9346
- text-align: left;
9347
- }
9054
+ /*
9055
+ * Confirms, alerts
9056
+ */
9057
+ .notification-text {
9058
+ margin: 30px 30px 0 0;
9059
+ max-height: 70vh;
9060
+ overflow: auto;
9348
9061
 
9349
- .ncl-icon-api-gateway {
9350
- font-size: 20px;
9351
- position: absolute;
9352
- right: 10px;
9353
- }
9062
+ .error-list {
9063
+ list-style-type: none;
9354
9064
 
9355
- .igz-action-panel {
9356
- &.invocation-tooltip {
9357
- height: 36px;
9358
- width: 56px;
9359
- }
9065
+ .error-list-item {
9066
+ margin-bottom: 5px;
9360
9067
  }
9361
9068
  }
9362
9069
  }
9363
9070
 
9364
- .function-row-collapse {
9365
- justify-content: center;
9366
- cursor: default;
9071
+ .notification-text.description {
9072
+ margin: 10px 30px;
9073
+ }
9367
9074
 
9368
- .collapse-icon {
9369
- cursor: pointer;
9370
- background-color: transparent;
9371
- position: absolute;
9075
+ .buttons {
9076
+ text-align: right;
9372
9077
 
9373
- &.igz-icon-right, &.igz-icon-down {
9374
- font-size: 12px;
9375
- color: @dusk-three;
9376
- }
9078
+ button:not(:first-child) {
9079
+ margin-left: 8px;
9377
9080
  }
9378
9081
  }
9379
9082
 
9380
- .function-name {
9381
- display: block;
9382
- font-weight: bold;
9383
- width: 90%;
9083
+ /*
9084
+ * Create/edit dialogs
9085
+ */
9086
+ .close-button {
9087
+ position: absolute;
9088
+ right: 24px;
9089
+ top: 26px;
9090
+ line-height: 10px;
9091
+ font-size: 14px;
9092
+ color: .duskThree(0.64)[@color];
9093
+ cursor: pointer;
9384
9094
  }
9385
9095
 
9386
- .function-status {
9387
- min-width: 100px;
9096
+ .title {
9097
+ color: @dusk-three;
9098
+ font-family: @font-family-sans-serif;
9099
+ font-size: 20px;
9100
+ font-weight: 500;
9101
+ margin: 0 0 21px 0;
9102
+ padding-right: 24px;
9388
9103
  }
9389
9104
 
9390
- .actions-menu {
9391
- visibility: hidden;
9392
- }
9105
+ .main-content {
9106
+ margin: 0 0 4px;
9393
9107
 
9394
- &.common-table-row {
9395
- height: 49px;
9108
+ .field-group {
9109
+ padding: 0 0 20px;
9396
9110
 
9397
- &:hover {
9398
- .function-row-collapse {
9399
- background-color: @white
9400
- }
9401
- .actions-menu {
9402
- visibility: visible;
9403
- background-color: @white;
9404
- }
9405
- igz-action-checkbox:not(.invisible) {
9406
- visibility: visible;
9111
+ .field-label {
9112
+ color: @dusk-three;
9113
+ font-size: 14px;
9114
+ font-weight: 500;
9115
+ padding: 0;
9116
+ min-width: 50px;
9117
+ margin: 0 0 2px;
9407
9118
  }
9408
- }
9409
9119
 
9410
- igz-action-checkbox {
9411
- visibility: hidden;
9120
+ .field-input {
9121
+ position: relative;
9122
+ width: 400px;
9412
9123
 
9413
- &.visible {
9414
- visibility: visible;
9124
+ .validating-input-field {
9125
+ .input-field {
9126
+ padding-left: 17px;
9127
+ }
9128
+
9129
+ .input-placeholder {
9130
+ left: 18px;
9131
+ font-style: italic;
9132
+ }
9133
+ }
9134
+
9135
+ .error {
9136
+ color: @darkish-pink;
9137
+ font-size: 12px;
9138
+ white-space: nowrap;
9139
+ }
9415
9140
  }
9416
9141
  }
9417
9142
  }
9418
9143
  }
9419
9144
 
9420
- .building-status {
9421
- color: @pale-orange;
9422
- }
9423
-
9424
- .error-status,
9425
- .unhealthy-status {
9426
- color: @darkish-pink;
9427
- }
9428
-
9429
- .standby-status,
9430
- .scaled-to-zero-status,
9431
- .imported-status {
9432
- color: @solid-grey;
9433
- }
9145
+ &.delete-entity-dialog-wrapper {
9146
+ .ngdialog-content {
9147
+ padding: 30px 24px 23px 24px;
9434
9148
 
9435
- .running-status {
9436
- color: @tealish;
9149
+ .notification-text.title {
9150
+ text-align: center;
9151
+ padding-right: 0;
9152
+ color: @darkish-pink;
9153
+ font-size: 20px;
9154
+ font-weight: 500;
9155
+ letter-spacing: normal;
9156
+ margin: 11px 0 2px;
9157
+ }
9158
+
9159
+ .notification-text.description {
9160
+ text-align: center;
9161
+ margin: 0 37px;
9162
+ font-size: 16px;
9163
+ font-weight: normal;
9164
+ letter-spacing: normal;
9165
+ color: @dusk-three;
9166
+ }
9167
+
9168
+ .nuclio-alert-icon {
9169
+ background: url('/assets/images/ic-alert-message.svg');
9170
+ height: 29px;
9171
+ width: 34px;
9172
+ margin: 0 auto;
9173
+ }
9174
+
9175
+ .buttons {
9176
+ margin-top: 30px;
9177
+ }
9178
+ }
9179
+ }
9180
+
9181
+ &.ngdialog.ngdialog-closing .ngdialog-content {
9182
+ animation-duration: @animation-duration;
9183
+ animation-timing-function: @animation-function;
9184
+ }
9185
+
9186
+ .ngdialog-overlay {
9187
+ background: .black(0.6)[@color];
9188
+ border: 2px solid @black;
9189
+ animation-duration: @animation-duration;
9190
+ animation-timing-function: @animation-function;
9191
+ }
9192
+
9193
+ &.ngdialog.ngdialog-closing .ngdialog-overlay {
9194
+ animation-duration: @animation-duration;
9195
+ animation-timing-function: @animation-function;
9196
+ }
9197
+
9198
+ &.ngdialog.ng-login-modal .ngdialog-content {
9199
+ padding: 0;
9200
+ }
9201
+ }
9202
+
9203
+ body {
9204
+ .ncl-main-wrapper {
9205
+ padding: 64px 0 0 215px;
9206
+ width: 100%;
9207
+ height: 100%;
9208
+ }
9209
+
9210
+ .table-headers {
9211
+ display: flex;
9212
+ font-size: 14px;
9213
+ font-weight: bold;
9214
+ font-style: normal;
9215
+ font-stretch: normal;
9216
+ letter-spacing: normal;
9217
+ color: @dusk-three;
9218
+ margin-bottom: 2px;
9219
+
9220
+ .key-header {
9221
+ width: 34%;
9222
+ margin-left: 16px;
9223
+
9224
+ &:not(.use-type) {
9225
+ width: 36%;
9226
+ }
9227
+ }
9228
+
9229
+ .type-header {
9230
+ width: 12%;
9231
+ }
9232
+
9233
+ .value-header {
9234
+ width: 52%;
9235
+
9236
+ &:not(.use-type) {
9237
+ width: 61%;
9238
+ }
9239
+ }
9240
+ }
9241
+
9242
+ .table-body:not(:last-child) {
9243
+ margin-bottom: 5px;
9244
+ }
9245
+ }
9246
+
9247
+
9248
+ .logs-common {
9249
+ font-family: "Source Code Pro", "Courier New", monospace;
9250
+ font-size: 14px;
9251
+ line-height: 1.1;
9252
+ text-align: left;
9253
+ white-space: pre-wrap;
9254
+ }
9255
+ .tooltip.custom-tooltip {
9256
+ transition-duration: 0s;
9257
+ z-index: 10001;
9258
+ opacity: 1;
9259
+
9260
+ .tooltip-arrow {
9261
+ display: block;
9262
+ margin-left: 0;
9263
+ position: absolute;
9264
+ top: -1px;
9265
+ width: 13px;
9266
+ height: 13px;
9267
+ transform: rotate(226deg);
9268
+ border-right: 1px solid @pale-grey;
9269
+ border-bottom: 1px solid @pale-grey;
9270
+ border-width: 1px;
9271
+ background-color: @white;
9272
+ }
9273
+
9274
+ &.bottom {
9275
+ margin-top: 8px;
9276
+ }
9277
+
9278
+ &.top {
9279
+ margin-top: 4px;
9280
+ }
9281
+
9282
+ .tooltip-inner {
9283
+ background-color: @white;
9284
+ color: @dusk-three;
9285
+ border-radius: 2px;
9286
+ font-size: 14px;
9287
+ word-wrap: break-word;
9288
+ max-width: 280px;
9289
+ padding: 29px 30px;
9290
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
9291
+ border: solid 1px @pale-grey;
9437
9292
  }
9438
9293
  }
9294
+ .deploy-deleted-function-dialog {
9295
+ .sub-title {
9296
+ font-size: 16px;
9297
+ color: @silver-chalice-two;
9298
+ }
9299
+
9300
+ .buttons {
9301
+ display: flex;
9302
+ justify-content: flex-end;
9303
+ }
9304
+ }
9439
9305
 
9440
9306
  .duplicate-function-dialog-wrapper {
9441
9307
  .main-content {
@@ -9471,78 +9337,212 @@ body {
9471
9337
  }
9472
9338
  }
9473
9339
 
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
- .ncl-edit-version {
9490
- background: #f2f2f6;
9491
- position: relative;
9492
- display: flex;
9493
- flex-direction: column;
9340
+ .ncl-function-collapsing-row {
9341
+ background-color: @white;
9342
+ margin-bottom: 8px;
9494
9343
 
9495
- .igz-info-page-actions-bar {
9496
- z-index: 1000;
9344
+ .function-title-block {
9345
+ height: 50px;
9497
9346
  position: relative;
9347
+ background-color: @white;
9348
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
9349
+ border: solid 1px @pale-grey;
9498
9350
 
9499
- .ncl-icon-api-gateway {
9500
- font-size: 20px;
9501
- line-height: 40px;
9502
- }
9503
-
9504
- .actions-buttons-block {
9505
- margin-right: 22px;
9351
+ .common-table-cells-container {
9352
+ cursor: pointer;
9506
9353
 
9507
- &:last-child {
9508
- margin-right: 3px;
9354
+ .common-table-cell-content {
9355
+ width: 100%;
9356
+ white-space: nowrap;
9357
+ overflow: hidden;
9358
+ text-overflow: ellipsis;
9359
+ min-width: 0;
9509
9360
  }
9510
- }
9511
- }
9512
-
9513
- .actions-dropdown-block {
9514
- width: 148px;
9515
9361
 
9516
- .default-dropdown {
9517
- .default-dropdown-field .dropdown-selected-item {
9518
- font-size: 12px;
9362
+ .description-content {
9363
+ position: relative;
9364
+ white-space: normal;
9365
+ max-height: 40px;
9519
9366
  }
9520
- }
9521
- }
9522
9367
 
9523
- @media screen and (max-height: 900px) {
9524
- .ncl-edit-version-execution-result {
9525
- max-height: 260px;
9368
+ .common-table-cell {
9369
+ .status-icon {
9370
+ display: flex;
9371
+ font-size: 20px;
9372
+ cursor: pointer;
9373
+ margin-left: 9px;
9374
+ .duskThree(0.64);
9375
+ color: @color;
9376
+ }
9526
9377
 
9527
- .igz-scrollable-container {
9528
- height: 230px;
9529
- }
9378
+ .version-text {
9379
+ display: block;
9380
+ text-align: left;
9381
+ }
9530
9382
 
9531
- &.deploy-result {
9532
- max-height: none;
9383
+ .ncl-icon-api-gateway {
9384
+ font-size: 20px;
9385
+ position: absolute;
9386
+ right: 10px;
9387
+ }
9533
9388
 
9534
- .igz-scrollable-container {
9535
- max-height: 260px;
9536
- height: auto;
9389
+ .igz-action-panel {
9390
+ &.invocation-tooltip {
9391
+ height: 36px;
9392
+ width: 56px;
9393
+ }
9537
9394
  }
9538
9395
  }
9539
9396
  }
9540
- }
9541
9397
 
9542
- .ncl-edit-version-execution-result {
9543
- margin: 17px 24px;
9544
- padding: 16px 13px;
9545
- background-color: @light-green;
9398
+ .function-row-collapse {
9399
+ justify-content: center;
9400
+ cursor: default;
9401
+
9402
+ .collapse-icon {
9403
+ cursor: pointer;
9404
+ background-color: transparent;
9405
+ position: absolute;
9406
+
9407
+ &.igz-icon-right, &.igz-icon-down {
9408
+ font-size: 12px;
9409
+ color: @dusk-three;
9410
+ }
9411
+ }
9412
+ }
9413
+
9414
+ .function-name {
9415
+ display: block;
9416
+ font-weight: bold;
9417
+ width: 90%;
9418
+ }
9419
+
9420
+ .function-status {
9421
+ min-width: 100px;
9422
+ }
9423
+
9424
+ .actions-menu {
9425
+ visibility: hidden;
9426
+ }
9427
+
9428
+ &.common-table-row {
9429
+ height: 49px;
9430
+
9431
+ &:hover {
9432
+ .function-row-collapse {
9433
+ background-color: @white
9434
+ }
9435
+ .actions-menu {
9436
+ visibility: visible;
9437
+ background-color: @white;
9438
+ }
9439
+ igz-action-checkbox:not(.invisible) {
9440
+ visibility: visible;
9441
+ }
9442
+ }
9443
+
9444
+ igz-action-checkbox {
9445
+ visibility: hidden;
9446
+
9447
+ &.visible {
9448
+ visibility: visible;
9449
+ }
9450
+ }
9451
+ }
9452
+ }
9453
+
9454
+ .building-status {
9455
+ color: @pale-orange;
9456
+ }
9457
+
9458
+ .error-status,
9459
+ .unhealthy-status {
9460
+ color: @darkish-pink;
9461
+ }
9462
+
9463
+ .standby-status,
9464
+ .scaled-to-zero-status,
9465
+ .imported-status {
9466
+ color: @solid-grey;
9467
+ }
9468
+
9469
+ .running-status {
9470
+ color: @tealish;
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
+ .ncl-edit-version {
9490
+ background: #f2f2f6;
9491
+ position: relative;
9492
+ display: flex;
9493
+ flex-direction: column;
9494
+
9495
+ .igz-info-page-actions-bar {
9496
+ z-index: 1000;
9497
+ position: relative;
9498
+
9499
+ .ncl-icon-api-gateway {
9500
+ font-size: 20px;
9501
+ line-height: 40px;
9502
+ }
9503
+
9504
+ .actions-buttons-block {
9505
+ margin-right: 22px;
9506
+
9507
+ &:last-child {
9508
+ margin-right: 3px;
9509
+ }
9510
+ }
9511
+ }
9512
+
9513
+ .actions-dropdown-block {
9514
+ width: 148px;
9515
+
9516
+ .default-dropdown {
9517
+ .default-dropdown-field .dropdown-selected-item {
9518
+ font-size: 12px;
9519
+ }
9520
+ }
9521
+ }
9522
+
9523
+ @media screen and (max-height: 900px) {
9524
+ .ncl-edit-version-execution-result {
9525
+ max-height: 260px;
9526
+
9527
+ .igz-scrollable-container {
9528
+ height: 230px;
9529
+ }
9530
+
9531
+ &.deploy-result {
9532
+ max-height: none;
9533
+
9534
+ .igz-scrollable-container {
9535
+ max-height: 260px;
9536
+ height: auto;
9537
+ }
9538
+ }
9539
+ }
9540
+ }
9541
+
9542
+ .ncl-edit-version-execution-result {
9543
+ margin: 17px 24px;
9544
+ padding: 16px 13px;
9545
+ background-color: @light-green;
9546
9546
  border: solid 1px @tealish;
9547
9547
  position: relative;
9548
9548
 
@@ -9816,96 +9816,218 @@ body {
9816
9816
  }
9817
9817
  }
9818
9818
 
9819
- .info-page-filters-bookmark {
9820
- .info-page-filters-color-set();
9819
+ .igz-info-page-content-wrapper {
9820
+ .info-page-content-color-set();
9821
9821
 
9822
- background-color: @filters-bookmark-bg-color;
9823
- border-bottom-right-radius: 4px;
9824
- border-top-right-radius: 4px;
9825
- box-shadow: @filters-bookmark-box-shadow;
9826
- color: @filters-bookmark-color;
9827
- cursor: pointer;
9828
- font-size: 10px;
9829
- height: 22px;
9830
- right: 0;
9831
- line-height: 22px;
9832
9822
  position: absolute;
9833
- text-align: center;
9834
- top: 22px;
9823
+ top: 56px;
9824
+ right: 0;
9825
+ bottom: 0;
9826
+ left: 0;
9827
+ padding-top: 0;
9835
9828
  transition: @igz-basic-transition;
9836
- width: 18px;
9837
- z-index: 998;
9829
+ background-color: @page-content-bg-color;
9838
9830
 
9839
- &:before {
9840
- right: 3px;
9841
- position: absolute;
9842
- top: 6px;
9831
+ &.upper-pane-opened {
9832
+ top: 216px;
9843
9833
  }
9844
9834
 
9845
- &:after {
9846
- background-color: @filters-bookmark-after-bg-color;
9847
- content: "";
9848
- height: 100%;
9849
- right: -6px;
9850
- position: absolute;
9851
- top: 0;
9852
- width: 6px;
9835
+ &.filters-opened {
9836
+ right: 377px;
9853
9837
  }
9854
9838
 
9855
- &.upper-pane-opened {
9856
- top: 172px;
9839
+ &.info-pane-opened {
9840
+ right: 379px;
9857
9841
  }
9858
9842
 
9859
- &.info-page-filters-active {
9860
- right: 249px;
9843
+ .igz-info-page-content {
9844
+ min-width: 946px;
9845
+ max-width: 100%;
9846
+ padding: 40px 25px;
9861
9847
  }
9848
+ }
9862
9849
 
9863
- .bookmark-badge {
9864
- position: absolute;
9865
- top: -10px;
9866
- right: -12px;
9867
- box-shadow: @filters-bookmark-badge-box-shadow;
9850
+ igz-info-page-actions-bar {
9851
+ .igz-info-page-actions-bar .actions-content-block {
9852
+ margin-left: 14px;
9868
9853
  }
9869
9854
  }
9870
9855
 
9871
- .info-page-filters {
9872
- .info-page-filters-color-set();
9873
-
9874
- background: @filters-bg;
9875
- border: @filters-border;
9876
- border-top: none;
9877
- box-shadow: @filters-box-shadow;
9878
- position: absolute;
9879
- bottom: 0;
9880
- right: 0;
9881
- padding: 0 0 15px 0;
9882
- top: 0;
9883
- transition: @igz-basic-transition;
9884
- width: 376px;
9885
- z-index: 996;
9856
+ igz-info-page-content {
9857
+ .info-page-content-color-set();
9886
9858
 
9887
- &.ng-hide {
9888
- right: -375px;
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;
9889
9865
 
9890
- > [class*="info-page-filters"] {
9891
- opacity: 0;
9892
- transition: @igz-basic-transition;
9893
- }
9894
- }
9866
+ .common-table-cell {
9867
+ margin-top: -1px;
9868
+ height: 49px;
9895
9869
 
9896
- .info-page-filters-title {
9897
- width: 100%;
9898
- margin-top: -3px;
9899
- padding: 0 23px;
9900
- height: 57px;
9901
- line-height: 57px;
9902
- font-family: @font-family-sans-serif;
9903
- font-size: 20px;
9904
- letter-spacing: 0.2px;
9905
- color: @filters-title-color;
9906
- }
9870
+ &.selected {
9871
+ background-color: @common-table-cell-selected-bg-color;
9872
+ border: @common-table-cell-selected-border;
9873
+ }
9907
9874
 
9908
- .info-page-filters-label {
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
+ }
9891
+
9892
+ .common-table-cells-container {
9893
+ margin-right: 45px;
9894
+
9895
+ .common-table-cell {
9896
+ height: 49px;
9897
+ padding: 0 15px;
9898
+ border-right: @common-table-cell-border-right;
9899
+
9900
+ &:first-child {
9901
+ padding-left: 7px;
9902
+ }
9903
+ }
9904
+ }
9905
+ }
9906
+
9907
+ .common-table-body {
9908
+ margin-top: 7px;
9909
+
9910
+ .common-table-cell {
9911
+ &.actions-menu {
9912
+ width: 45px;
9913
+ }
9914
+ }
9915
+ }
9916
+
9917
+ .data-access-policy-layers, .data-lifecycle-layers {
9918
+ &:last-child {
9919
+ margin-bottom: 20px;
9920
+ }
9921
+ }
9922
+ }
9923
+
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;
9936
+ }
9937
+ }
9938
+ }
9939
+
9940
+
9941
+ .info-page-filters-bookmark {
9942
+ .info-page-filters-color-set();
9943
+
9944
+ background-color: @filters-bookmark-bg-color;
9945
+ border-bottom-right-radius: 4px;
9946
+ border-top-right-radius: 4px;
9947
+ box-shadow: @filters-bookmark-box-shadow;
9948
+ color: @filters-bookmark-color;
9949
+ cursor: pointer;
9950
+ font-size: 10px;
9951
+ height: 22px;
9952
+ right: 0;
9953
+ line-height: 22px;
9954
+ position: absolute;
9955
+ text-align: center;
9956
+ top: 22px;
9957
+ transition: @igz-basic-transition;
9958
+ width: 18px;
9959
+ z-index: 998;
9960
+
9961
+ &:before {
9962
+ right: 3px;
9963
+ position: absolute;
9964
+ top: 6px;
9965
+ }
9966
+
9967
+ &:after {
9968
+ background-color: @filters-bookmark-after-bg-color;
9969
+ content: "";
9970
+ height: 100%;
9971
+ right: -6px;
9972
+ position: absolute;
9973
+ top: 0;
9974
+ width: 6px;
9975
+ }
9976
+
9977
+ &.upper-pane-opened {
9978
+ top: 172px;
9979
+ }
9980
+
9981
+ &.info-page-filters-active {
9982
+ right: 249px;
9983
+ }
9984
+
9985
+ .bookmark-badge {
9986
+ position: absolute;
9987
+ top: -10px;
9988
+ right: -12px;
9989
+ box-shadow: @filters-bookmark-badge-box-shadow;
9990
+ }
9991
+ }
9992
+
9993
+ .info-page-filters {
9994
+ .info-page-filters-color-set();
9995
+
9996
+ background: @filters-bg;
9997
+ border: @filters-border;
9998
+ border-top: none;
9999
+ box-shadow: @filters-box-shadow;
10000
+ position: absolute;
10001
+ bottom: 0;
10002
+ right: 0;
10003
+ padding: 0 0 15px 0;
10004
+ top: 0;
10005
+ transition: @igz-basic-transition;
10006
+ width: 376px;
10007
+ z-index: 996;
10008
+
10009
+ &.ng-hide {
10010
+ right: -375px;
10011
+
10012
+ > [class*="info-page-filters"] {
10013
+ opacity: 0;
10014
+ transition: @igz-basic-transition;
10015
+ }
10016
+ }
10017
+
10018
+ .info-page-filters-title {
10019
+ width: 100%;
10020
+ margin-top: -3px;
10021
+ padding: 0 23px;
10022
+ height: 57px;
10023
+ line-height: 57px;
10024
+ font-family: @font-family-sans-serif;
10025
+ font-size: 20px;
10026
+ letter-spacing: 0.2px;
10027
+ color: @filters-title-color;
10028
+ }
10029
+
10030
+ .info-page-filters-label {
9909
10031
  color: @filters-label-color;
9910
10032
  font-size: 15px;
9911
10033
  font-weight: 400;
@@ -10156,192 +10278,70 @@ body {
10156
10278
  }
10157
10279
  }
10158
10280
 
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
- }
10281
+ ncl-breadcrumbs {
10282
+ .main-header-title {
10283
+ &:not(.disable-behavior) {
10284
+ &:hover .main-header-title-text {
10285
+ color: @dark-sky-blue;
10286
+ }
10287
+ }
10174
10288
 
10175
- &.filters-opened {
10176
- right: 377px;
10289
+ &.disable-behavior {
10290
+ color: @dusk-three;
10291
+ }
10177
10292
  }
10178
10293
 
10179
- &.info-pane-opened {
10180
- right: 379px;
10294
+ .igz-icon-right {
10295
+ font-size: 11px;
10296
+ font-weight: 100;
10297
+ margin: 0 14px;
10181
10298
  }
10182
10299
 
10183
- .igz-info-page-content {
10184
- min-width: 946px;
10185
- max-width: 100%;
10186
- padding: 40px 25px;
10300
+ .ncl-header-subtitle {
10301
+ color: @greyish-purple;
10187
10302
  }
10188
- }
10189
10303
 
10190
- igz-info-page-actions-bar {
10191
- .igz-info-page-actions-bar .actions-content-block {
10192
- margin-left: 14px;
10304
+ .ncl-bold-subtitle {
10305
+ color: @dusk-three;
10306
+ font-weight: bold;
10193
10307
  }
10194
10308
  }
10195
10309
 
10196
- igz-info-page-content {
10197
- .info-page-content-color-set();
10310
+ .ncl-breadcrumbs-dropdown {
10311
+ display: inline-grid;
10198
10312
 
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;
10313
+ .breadcrumb-toggle {
10314
+ cursor: pointer;
10315
+ font-weight: bold;
10205
10316
 
10206
- .common-table-cell {
10207
- margin-top: -1px;
10208
- height: 49px;
10317
+ .igz-icon-right {
10318
+ display: block;
10319
+ margin: 1.5px 0 0 7px;
10320
+ }
10209
10321
 
10210
- &.selected {
10211
- background-color: @common-table-cell-selected-bg-color;
10212
- border: @common-table-cell-selected-border;
10213
- }
10322
+ .breadcrumb-arrow {
10323
+ display: inline-block;
10324
+ width: 24px;
10325
+ height: 24px;
10326
+ margin: 0 8px;
10327
+ border-radius: 50%;
10328
+ background-color: transparent;
10214
10329
 
10215
- &:last-child {
10216
- margin-right: 0;
10217
- }
10330
+ &:hover {
10331
+ background-color: @pale-grey;
10332
+ transition: transform .2s linear;
10333
+ }
10334
+ }
10218
10335
 
10219
- &.actions-menu {
10220
- width: 0;
10221
- }
10336
+ .ncl-dropdown-expanded {
10337
+ background-color: @pale-grey;
10338
+ transform: rotate(90deg);
10222
10339
 
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
- ncl-breadcrumbs {
10282
- .main-header-title {
10283
- &:not(.disable-behavior) {
10284
- &:hover .main-header-title-text {
10285
- color: @dark-sky-blue;
10286
- }
10287
- }
10288
-
10289
- &.disable-behavior {
10290
- color: @dusk-three;
10291
- }
10292
- }
10293
-
10294
- .igz-icon-right {
10295
- font-size: 11px;
10296
- font-weight: 100;
10297
- margin: 0 14px;
10298
- }
10299
-
10300
- .ncl-header-subtitle {
10301
- color: @greyish-purple;
10302
- }
10303
-
10304
- .ncl-bold-subtitle {
10305
- color: @dusk-three;
10306
- font-weight: bold;
10307
- }
10308
- }
10309
-
10310
- .ncl-breadcrumbs-dropdown {
10311
- display: inline-grid;
10312
-
10313
- .breadcrumb-toggle {
10314
- cursor: pointer;
10315
- font-weight: bold;
10316
-
10317
- .igz-icon-right {
10318
- display: block;
10319
- margin: 1.5px 0 0 7px;
10320
- }
10321
-
10322
- .breadcrumb-arrow {
10323
- display: inline-block;
10324
- width: 24px;
10325
- height: 24px;
10326
- margin: 0 8px;
10327
- border-radius: 50%;
10328
- background-color: transparent;
10329
-
10330
- &:hover {
10331
- background-color: @pale-grey;
10332
- transition: transform .2s linear;
10333
- }
10334
- }
10335
-
10336
- .ncl-dropdown-expanded {
10337
- background-color: @pale-grey;
10338
- transform: rotate(90deg);
10339
-
10340
- .igz-icon-right {
10341
- color: @dusk-three;
10342
- }
10343
- }
10344
- }
10340
+ .igz-icon-right {
10341
+ color: @dusk-three;
10342
+ }
10343
+ }
10344
+ }
10345
10345
 
10346
10346
  .dropdown-menu {
10347
10347
  margin: 0;
@@ -10940,6 +10940,32 @@ 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
+
10943
10969
  ncl-navigation-tabs {
10944
10970
  .ncl-navigation-tabs-color-set();
10945
10971
 
@@ -11101,32 +11127,6 @@ ncl-navigation-tabs {
11101
11127
  }
11102
11128
  }
11103
11129
 
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
-
11115
- .ncl-monaco-top-row {
11116
- display: block;
11117
- }
11118
-
11119
- .ncl-monaco-editor {
11120
- height: 100%;
11121
- }
11122
- }
11123
-
11124
- .ncl-monaco-dark {
11125
- background-color: @vs-dark;
11126
- }
11127
- }
11128
-
11129
-
11130
11130
  .ncl-search-input {
11131
11131
  position: relative;
11132
11132
  color: @silver;
@@ -11505,6 +11505,66 @@ ncl-navigation-tabs {
11505
11505
  }
11506
11506
  }
11507
11507
 
11508
+ .ncl-version-configuration {
11509
+ > .igz-scrollable-container {
11510
+ padding: 24px 25px 22px 41px;
11511
+ }
11512
+
11513
+ .ncl-version-configuration-wrapper {
11514
+ > .row {
11515
+ display: flex;
11516
+ justify-content: space-between;
11517
+ flex-wrap: wrap;
11518
+
11519
+ .configuration-block {
11520
+ padding: 16px 23px 16px;
11521
+ background-color: @white;
11522
+ border: solid 1px @pale-grey;
11523
+ flex-grow: 1;
11524
+ flex-basis: 500px;
11525
+ margin-right: 16px;
11526
+ margin-bottom: 16px;
11527
+
11528
+ &.invisible {
11529
+ visibility: hidden;
11530
+ }
11531
+
11532
+ .title {
11533
+ font-size: 16px;
11534
+ font-weight: bold;
11535
+ font-style: normal;
11536
+ font-stretch: normal;
11537
+ letter-spacing: normal;
11538
+ text-align: left;
11539
+ color: @dusk-three;
11540
+ margin-bottom: 12px;
11541
+ }
11542
+
11543
+ .row {
11544
+ .label {
11545
+ display: block;
11546
+ font-family: Roboto, sans-serif;
11547
+ font-size: 14px;
11548
+ font-weight: 500;
11549
+ font-style: normal;
11550
+ font-stretch: normal;
11551
+ letter-spacing: normal;
11552
+ text-align: left;
11553
+ color: @dusk-three;
11554
+ padding: 0;
11555
+ }
11556
+ }
11557
+
11558
+ .ncl-version-configuration-labels, .ncl-version-configuration-annotations {
11559
+ .more-info-wrapper {
11560
+ height: 20px;
11561
+ }
11562
+ }
11563
+ }
11564
+ }
11565
+ }
11566
+ }
11567
+
11508
11568
  .ncl-edit-version-code {
11509
11569
  height: 100%;
11510
11570
  display: flex;
@@ -11833,88 +11893,28 @@ ncl-navigation-tabs {
11833
11893
  }
11834
11894
  }
11835
11895
 
11836
- .ncl-version-configuration {
11896
+ .ncl-version-monitoring {
11837
11897
  > .igz-scrollable-container {
11838
11898
  padding: 24px 25px 22px 41px;
11839
11899
  }
11840
11900
 
11841
- .ncl-version-configuration-wrapper {
11901
+ .ncl-version-monitoring-wrapper {
11842
11902
  > .row {
11843
11903
  display: flex;
11904
+ flex-flow: row wrap;
11844
11905
  justify-content: space-between;
11845
- flex-wrap: wrap;
11846
11906
 
11847
- .configuration-block {
11907
+ .monitoring-block {
11848
11908
  padding: 16px 23px 16px;
11849
11909
  background-color: @white;
11850
11910
  border: solid 1px @pale-grey;
11851
- flex-grow: 1;
11852
- flex-basis: 500px;
11911
+ overflow: hidden;
11912
+ flex: 1 0 500px;
11853
11913
  margin-right: 16px;
11854
11914
  margin-bottom: 16px;
11855
11915
 
11856
- &.invisible {
11857
- visibility: hidden;
11858
- }
11859
-
11860
- .title {
11861
- font-size: 16px;
11862
- font-weight: bold;
11863
- font-style: normal;
11864
- font-stretch: normal;
11865
- letter-spacing: normal;
11866
- text-align: left;
11867
- color: @dusk-three;
11868
- margin-bottom: 12px;
11869
- }
11870
-
11871
- .row {
11872
- .label {
11873
- display: block;
11874
- font-family: Roboto, sans-serif;
11875
- font-size: 14px;
11876
- font-weight: 500;
11877
- font-style: normal;
11878
- font-stretch: normal;
11879
- letter-spacing: normal;
11880
- text-align: left;
11881
- color: @dusk-three;
11882
- padding: 0;
11883
- }
11884
- }
11885
-
11886
- .ncl-version-configuration-labels, .ncl-version-configuration-annotations {
11887
- .more-info-wrapper {
11888
- height: 20px;
11889
- }
11890
- }
11891
- }
11892
- }
11893
- }
11894
- }
11895
-
11896
- .ncl-version-monitoring {
11897
- > .igz-scrollable-container {
11898
- padding: 24px 25px 22px 41px;
11899
- }
11900
-
11901
- .ncl-version-monitoring-wrapper {
11902
- > .row {
11903
- display: flex;
11904
- flex-flow: row wrap;
11905
- justify-content: space-between;
11906
-
11907
- .monitoring-block {
11908
- padding: 16px 23px 16px;
11909
- background-color: @white;
11910
- border: solid 1px @pale-grey;
11911
- overflow: hidden;
11912
- flex: 1 0 500px;
11913
- margin-right: 16px;
11914
- margin-bottom: 16px;
11915
-
11916
- .enriched-node-selectors {
11917
- max-width: 1000px;
11916
+ .enriched-node-selectors {
11917
+ max-width: 1000px;
11918
11918
  }
11919
11919
 
11920
11920
  .invocation-block {
@@ -12460,6 +12460,76 @@ 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
+
12463
12533
  .test-events-pane-wrapper {
12464
12534
  position: absolute;
12465
12535
  height: 100%;
@@ -13045,420 +13115,91 @@ ncl-navigation-tabs {
13045
13115
  margin-right: 18px;
13046
13116
  }
13047
13117
 
13048
- .code-edit-section {
13049
- height: 300px;
13050
- width: 100%;
13051
-
13052
- .monaco-code-editor {
13053
- width: 97%;
13054
-
13055
- .ncl-monaco {
13056
- height: 100%;
13057
-
13058
- > div {
13059
- border: none;
13060
- }
13061
- }
13062
- }
13063
- }
13064
- }
13065
-
13066
- .image-section {
13067
- text-align: center;
13068
-
13069
- img {
13070
- width: 100%;
13071
- }
13072
- }
13073
-
13074
- .no-content-section {
13075
- margin: 10px auto;
13076
- font-size: 14px;
13077
- color: @pale-grey;
13078
- text-align: center;
13079
- }
13080
-
13081
- .testing {
13082
- margin: 80px 0;
13083
- text-align: center;
13084
- font-size: 14px;
13085
- color: @greyish-purple;
13086
-
13087
- .loader-wrapper {
13088
- margin: 20px 0;
13089
- }
13090
- }
13091
-
13092
- .no-response {
13093
- margin: 80px 0;
13094
- text-align: center;
13095
-
13096
- .circle {
13097
- position: relative;
13098
- background-color: @pale-grey-two;
13099
- height: 130px;
13100
- width: 130px;
13101
- border-radius: 50%;
13102
- margin: 0 auto;
13103
-
13104
- .ncl-icon-test {
13105
- position: absolute;
13106
- top: 12px;
13107
- left: 31px;
13108
- color: @dark-sky-blue;
13109
- font-size: 43px;
13110
- }
13111
-
13112
- .ncl-icon-hand {
13113
- position: absolute;
13114
- top: 47px;
13115
- left: 42px;
13116
- color: .greyishPurple(0.64)[@color];
13117
- font-size: 58px;
13118
- }
13119
- }
13120
-
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
- }
13182
- }
13183
- }
13184
- }
13185
- }
13186
-
13187
- .function-import-actions-bar {
13188
- display: flex;
13189
-
13190
- .function-import-file-picker {
13191
- .file-picker-wrapper {
13192
- margin: 0;
13193
- line-height: 34px;
13194
-
13195
- .igz-icon-upload {
13196
- margin-right: 10px;
13197
- }
13198
- }
13199
-
13200
- .function-import-input {
13201
- opacity: 0;
13202
- position: absolute;
13203
- z-index: -1;
13204
- }
13205
- }
13206
- }
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
- }
13224
-
13225
- .function-from-template-dialog-wrapper {
13226
- .title {
13227
- font-size: 20px;
13228
- font-weight: 500;
13229
- text-align: left;
13230
- color: @dusk-three;
13231
- }
13232
-
13233
- .main-content {
13234
- width: 500px;
13235
- max-height: 500px;
13236
-
13237
- form {
13238
- margin: 0 20px 0 0;
13239
-
13240
- .field-label {
13241
- font-size: 14px;
13242
- text-align: left;
13243
- color: @dusk-three;
13244
- }
13245
-
13246
- .validating-input-field {
13247
- .input-field {
13248
- padding: 0 10px 0 17px;
13249
- }
13250
-
13251
- .input-placeholder {
13252
- left: 18px;
13253
- font-style: italic;
13254
- font-size: 14px;
13255
- }
13256
- }
13257
- }
13258
- }
13259
- }
13260
-
13261
- .ncl-test-events-logs {
13262
- padding: 6px 17px 25px;
13263
- background-color: @white;
13264
-
13265
- .functional-buttons {
13266
- .duskThree(0.64);
13267
- display: flex;
13268
- justify-content: flex-end;
13269
- color: @color;
13270
- font-size: 16px;
13271
-
13272
- > div {
13273
- margin-right: 24px;
13274
-
13275
- &:hover {
13276
- color: @dusk-three;
13277
- }
13278
- }
13279
- }
13280
-
13281
- .collapsed-row {
13282
- .black(0.2);
13283
- display: flex;
13284
- align-items: center;
13285
- position: relative;
13286
- height: 36px;
13287
- background-color: @white;
13288
- color: @dusk-three;
13289
- box-shadow: 1.7px 1.1px 4px 0 @color;
13290
- border: solid 1px @pale-grey;
13291
- margin-bottom: 10px;
13292
-
13293
- .igz-icon-right {
13294
- .duskThree(0.64);
13295
- font-size: 12px;
13296
- color: @color;
13297
- margin: 0 8px 0 12px;
13298
-
13299
- &::before {
13300
- vertical-align: text-bottom;
13301
- }
13302
- }
13303
-
13304
- .level-icon {
13305
- display: inline-block;
13306
- margin-right: 8px;
13307
- width: 20px;
13308
- text-align: center;
13309
-
13310
- &::before {
13311
- font-size: 16px;
13312
- vertical-align: text-bottom;
13313
- }
13314
-
13315
- &.ncl-icon-debug {
13316
- color: @orangish;
13317
-
13318
- &::before {
13319
- font-size: 18px;
13320
- }
13321
- }
13322
-
13323
- &.igz-icon-info-round {
13324
- color: @orangish;
13325
- }
13326
-
13327
- &.igz-icon-warning {
13328
- color: @orangish;
13329
- }
13330
-
13331
- &.igz-icon-cancel-path {
13332
- color: @orangish;
13333
- }
13334
- }
13335
-
13336
- .date {
13337
- display: inline-block;
13338
- width: 230px;
13339
- font-size: 14px;
13340
- font-weight: bold;
13341
- margin-right: 15px;
13342
- }
13343
-
13344
- .message {
13345
- display: inline-block;
13346
- width: 200px;
13347
- margin-right: 30px;
13348
- }
13349
-
13350
- .ncl-icon-parameters {
13351
- .duskThree(0.64);
13352
- color: @color;
13353
- font-size: 14px;
13354
- position: absolute;
13355
- top: 9px;
13356
- right: 9px;
13357
- }
13358
- }
13359
-
13360
- .expanded-row {
13361
- background-color: @white;
13362
- color: @dusk-three;
13363
- border: solid 1px @pale-grey;
13364
- margin-bottom: 10px;
13365
-
13366
- .header {
13367
- position: relative;
13368
- display: flex;
13369
- align-items: center;
13370
- height: 34px;
13371
-
13372
- .igz-icon-down {
13373
- .duskThree(0.64);
13374
- font-size: 12px;
13375
- color: @color;
13376
- margin: 0 8px 0 12px;
13377
-
13378
- &::before {
13379
- vertical-align: text-bottom;
13380
- }
13381
- }
13118
+ .code-edit-section {
13119
+ height: 300px;
13120
+ width: 100%;
13382
13121
 
13383
- .level-icon {
13384
- display: inline-block;
13385
- margin-right: 8px;
13386
- width: 20px;
13387
- text-align: center;
13122
+ .monaco-code-editor {
13123
+ width: 97%;
13388
13124
 
13389
- &::before {
13390
- font-size: 16px;
13391
- vertical-align: text-bottom;
13125
+ .ncl-monaco {
13126
+ height: 100%;
13127
+
13128
+ > div {
13129
+ border: none;
13130
+ }
13131
+ }
13132
+ }
13133
+ }
13392
13134
  }
13393
13135
 
13394
- &.ncl-icon-debug {
13395
- color: @orangish;
13136
+ .image-section {
13137
+ text-align: center;
13396
13138
 
13397
- &::before {
13398
- font-size: 18px;
13139
+ img {
13140
+ width: 100%;
13399
13141
  }
13400
13142
  }
13401
13143
 
13402
- &.igz-icon-info-round {
13403
- color: @orangish;
13144
+ .no-content-section {
13145
+ margin: 10px auto;
13146
+ font-size: 14px;
13147
+ color: @pale-grey;
13148
+ text-align: center;
13404
13149
  }
13405
13150
 
13406
- &.igz-icon-warning {
13407
- color: @orangish;
13408
- }
13151
+ .testing {
13152
+ margin: 80px 0;
13153
+ text-align: center;
13154
+ font-size: 14px;
13155
+ color: @greyish-purple;
13409
13156
 
13410
- &.igz-icon-cancel-path {
13411
- color: @orangish;
13157
+ .loader-wrapper {
13158
+ margin: 20px 0;
13159
+ }
13412
13160
  }
13413
- }
13414
13161
 
13415
- .date {
13416
- display: inline-block;
13417
- width: 230px;
13418
- font-size: 14px;
13419
- font-weight: bold;
13420
- margin-right: 15px;
13421
- }
13162
+ .no-response {
13163
+ margin: 80px 0;
13164
+ text-align: center;
13422
13165
 
13423
- .ncl-icon-parameters {
13424
- .duskThree(0.64);
13425
- position: absolute;
13426
- top: 9px;
13427
- right: 9px;
13428
- color: @color;
13429
- font-size: 14px;
13430
- }
13431
- }
13166
+ .circle {
13167
+ position: relative;
13168
+ background-color: @pale-grey-two;
13169
+ height: 130px;
13170
+ width: 130px;
13171
+ border-radius: 50%;
13172
+ margin: 0 auto;
13432
13173
 
13433
- .expanded-body {
13434
- font-size: 14px;
13435
- color: @dusk-three;
13174
+ .ncl-icon-test {
13175
+ position: absolute;
13176
+ top: 12px;
13177
+ left: 31px;
13178
+ color: @dark-sky-blue;
13179
+ font-size: 43px;
13180
+ }
13436
13181
 
13437
- .error {
13438
- width: 71%;
13439
- border-radius: 3px;
13440
- background-color: #fbe5e8;
13441
- border: solid 1px @darkish-pink;
13442
- color: @darkish-pink;
13443
- word-wrap: break-word;
13444
- margin-left: 62px;
13445
- padding: 12px;
13446
- margin-bottom: 16px;
13447
- }
13182
+ .ncl-icon-hand {
13183
+ position: absolute;
13184
+ top: 47px;
13185
+ left: 42px;
13186
+ color: .greyishPurple(0.64)[@color];
13187
+ font-size: 58px;
13188
+ }
13189
+ }
13448
13190
 
13449
- .message {
13450
- display: inline-block;
13451
- width: 70%;
13452
- word-wrap: break-word;
13453
- margin: 0 0 16px 62px;
13191
+ .message {
13192
+ margin-top: 14px;
13193
+ width: 245px;
13194
+ font-size: 16px;
13195
+ color: @greyish-purple;
13196
+ line-height: 1.5;
13197
+ }
13198
+ }
13454
13199
  }
13455
13200
 
13456
- .parameters {
13457
- padding: 0 62px 16px;
13458
-
13459
- .parameters-header {
13460
- font-weight: bold;
13461
- }
13201
+ .headers {
13202
+ padding: 28px 41px;
13462
13203
 
13463
13204
  > div {
13464
13205
  display: flex;
@@ -13467,87 +13208,148 @@ ncl-navigation-tabs {
13467
13208
  .labels {
13468
13209
  color: @greyish-purple;
13469
13210
  font-size: 14px;
13470
- width: 30%;
13211
+ width: 43%;
13471
13212
  }
13472
13213
 
13473
13214
  .values {
13474
13215
  color: @dusk-three;
13475
13216
  font-size: 14px;
13476
- width: 70%;
13217
+ width: 57%;
13477
13218
  }
13478
13219
  }
13479
13220
  }
13480
13221
  }
13481
13222
  }
13223
+ }
13482
13224
 
13483
- .no-logs {
13484
- margin: 10px auto 0;
13485
- font-size: 14px;
13486
- color: @pale-grey;
13487
- text-align: center;
13225
+ .function-from-template-dialog-wrapper {
13226
+ .title {
13227
+ font-size: 20px;
13228
+ font-weight: 500;
13229
+ text-align: left;
13230
+ color: @dusk-three;
13231
+ }
13232
+
13233
+ .main-content {
13234
+ width: 500px;
13235
+ max-height: 500px;
13236
+
13237
+ form {
13238
+ margin: 0 20px 0 0;
13239
+
13240
+ .field-label {
13241
+ font-size: 14px;
13242
+ text-align: left;
13243
+ color: @dusk-three;
13244
+ }
13245
+
13246
+ .validating-input-field {
13247
+ .input-field {
13248
+ padding: 0 10px 0 17px;
13249
+ }
13250
+
13251
+ .input-placeholder {
13252
+ left: 18px;
13253
+ font-style: italic;
13254
+ font-size: 14px;
13255
+ }
13256
+ }
13257
+ }
13488
13258
  }
13489
13259
  }
13490
- .ncl-test-events-navigation-tabs {
13491
- display: flex;
13492
- background: #f8f8fb;
13493
- height: 40px;
13494
- border-top: 1px solid @pale-grey;
13495
- border-bottom: 1px solid @pale-grey;
13496
13260
 
13497
- .test-events-navigation-tab {
13498
- .duskThree(0.64);
13499
- position: relative;
13500
- float: left;
13501
- height: 27px;
13502
- padding: 10px 40px 0;
13503
- font-family: @font-family-sans-serif;
13504
- color: @color;
13505
- font-size: 13px;
13506
- text-align: center;
13507
- cursor: pointer;
13508
- border-bottom: none;
13509
- box-sizing: content-box;
13261
+ @desktop: 1350px;
13262
+ @desktop-low: 1202px;
13263
+ @desktop-middle: 1550px;
13510
13264
 
13511
- &.active, &.active:hover {
13512
- background: none;
13513
- color: @dusk-three;
13514
- border-bottom: 2px solid @dusk-three;
13515
- font-weight: bold;
13265
+ .ncl-version-configuration-basic-settings {
13266
+ .row {
13267
+ display: flex;
13268
+ justify-content: space-between;
13516
13269
 
13517
- .badge {
13518
- color: @white;
13519
- background-color: @light-grey-blue;
13270
+ &:not(:last-child) {
13271
+ margin-bottom: 23px;
13272
+ }
13273
+
13274
+ &:last-child {
13275
+ margin-bottom: 4px;
13276
+ }
13277
+
13278
+ &.enable-checkbox {
13279
+ justify-content: flex-start;
13280
+ margin-bottom: 18px;
13281
+ }
13282
+
13283
+ > div {
13284
+ flex: 1;
13285
+
13286
+ &:not(:last-child) {
13287
+ margin-right: 46px;
13288
+ }
13289
+
13290
+ .label {
13291
+ padding: 0;
13292
+ margin-bottom: 5px;
13293
+ }
13294
+
13295
+ &.timeout-block {
13296
+ .label {
13297
+ margin-bottom: 3px;
13298
+ }
13299
+
13300
+ .timeout-values {
13301
+ margin-left: 27px;
13302
+
13303
+ .inputs {
13304
+ display: flex;
13305
+ align-items: center;
13306
+
13307
+ .values-label {
13308
+ .duskThree(0.9);
13309
+ margin: 0 17px 0 8px;
13310
+ font-size: 14px;
13311
+ font-weight: normal;
13312
+ font-style: normal;
13313
+ letter-spacing: normal;
13314
+ text-align: left;
13315
+ color: @color;
13316
+ }
13317
+ }
13318
+ }
13520
13319
  }
13521
13320
  }
13522
13321
 
13523
- .badge {
13524
- display: inline-block;
13525
- min-width: 22px;
13526
- padding: 3px 7px;
13527
- font-size: 12px;
13528
- font-weight: 500;
13529
- color: @greyish-purple;
13530
- line-height: 1;
13531
- vertical-align: middle;
13532
- white-space: nowrap;
13533
- text-align: center;
13534
- background-color: @pale-grey;
13535
- border-radius: 7.5px;
13536
- margin-left: 7px;
13537
- margin-top: -4px;
13538
- }
13539
- }
13322
+ .logger-block {
13323
+ display: flex;
13324
+ margin-top: 3px;
13540
13325
 
13541
- .default-dropdown {
13542
- float: left;
13543
- width: 105px;
13326
+ .logger-dropdown {
13327
+ .default-dropdown {
13328
+ position: relative;
13329
+ height: 36px;
13544
13330
 
13545
- .default-dropdown-field:not(:hover) {
13546
- border-color: transparent;
13547
- }
13331
+ .dropdown-overlap {
13332
+ z-index: 100;
13333
+ }
13334
+ }
13335
+ }
13548
13336
 
13549
- .default-dropdown-container {
13550
- z-index: 3;
13337
+ > div {
13338
+ flex: 1;
13339
+
13340
+ &:not(:last-child) {
13341
+ margin-right: 16px;
13342
+ }
13343
+
13344
+ .label {
13345
+ padding: 0;
13346
+ margin-bottom: 5px;
13347
+ }
13348
+
13349
+ &.logger-input {
13350
+ flex-grow: 1.95;
13351
+ }
13352
+ }
13551
13353
  }
13552
13354
  }
13553
13355
  }
@@ -13723,349 +13525,547 @@ ncl-navigation-tabs {
13723
13525
  margin-right: 16px;
13724
13526
  }
13725
13527
 
13726
- .uploaded-wrapper {
13727
- width: 100%;
13528
+ .uploaded-wrapper {
13529
+ width: 100%;
13530
+ display: flex;
13531
+ justify-content: space-between;
13532
+
13533
+ .uploaded {
13534
+ position: relative;
13535
+ flex-grow: 1;
13536
+ padding: 6px 40px 6px 8px;
13537
+
13538
+ .file-name {
13539
+ margin-left: 9px;
13540
+ color: @dusk-three;
13541
+
13542
+ .uploaded-file-directory {
13543
+ margin-left: 8px;
13544
+ color: @dark-greyish-blue;
13545
+ }
13546
+ }
13547
+ }
13548
+
13549
+ .uploaded-file {
13550
+ padding: 3px 55px 3px 8px;
13551
+
13552
+ .file-name {
13553
+ margin: 4px 4px 4px 9px;
13554
+ vertical-align: top;
13555
+ }
13556
+
13557
+ .build-close-button {
13558
+ top: 6px;
13559
+ }
13560
+ }
13561
+ }
13562
+ }
13563
+ }
13564
+
13565
+ .configuration-build-title-wrapper {
13566
+ display: flex;
13567
+ justify-content: space-between;
13568
+
13569
+ .igz-action-menu {
13570
+ .menu-button {
13571
+ width: 40px;
13572
+ height: 40px;
13573
+ display: flex;
13574
+ justify-content: center;
13575
+ align-items: center;
13576
+ font-size: 22px;
13577
+ margin: -10px -15px 0 0;
13578
+ border-radius: 50%;
13579
+ color: @dusk-three;
13580
+ }
13581
+
13582
+ .active {
13583
+ .black(0.1);
13584
+ background-color: @silver;
13585
+ box-shadow: inset 0px 2px 3px 0 @color;
13586
+ }
13587
+
13588
+ .menu-dropdown {
13589
+ margin-top: 4px;
13590
+ right: -18px;
13591
+ }
13592
+ }
13593
+ }
13594
+ }
13595
+
13596
+ .ncl-version-configuration-logging {
13597
+ .row {
13598
+ display: flex;
13599
+ position: relative;
13600
+
13601
+ .logging-wrapper {
13602
+ width: 100%;
13603
+ }
13604
+ }
13605
+ }
13606
+
13607
+ @desktop-middle: 1550px;
13608
+
13609
+ .ncl-version-configuration-resources {
13610
+ .row {
13611
+ .range-inputs-row {
13612
+ display: flex;
13613
+ align-items: flex-end;
13614
+
13615
+ .row-title {
13616
+ margin-bottom: 8px;
13617
+ }
13618
+ }
13619
+
13620
+ .form-row {
13621
+ padding: 12px 0;
13622
+
13623
+ .row-title, .input-title {
13624
+ font-size: 14px;
13625
+ }
13626
+
13627
+ .row-title {
13628
+ font-weight: 500;
13629
+ }
13630
+
13631
+ .input-wrapper {
13632
+ display: flex;
13633
+ flex-wrap: wrap;
13634
+
13635
+ .input-title {
13636
+ width: 100%;
13637
+ }
13638
+
13639
+ .memory-number-input, .cpu-number-input {
13640
+ width: 50%;
13641
+ }
13642
+
13643
+ .memory-size-dropdown, .cpu-dropdown {
13644
+ width: 35%
13645
+ }
13646
+
13647
+ .gpu-number-input, .replicas-number-input, .preemtion-mode-input, .priority-class-input {
13648
+ width: 85%;
13649
+ }
13650
+ }
13651
+ }
13652
+
13653
+ .slider-block {
13654
+ padding-top: 0;
13655
+ margin-bottom: 10px;
13656
+
13657
+ .slider {
13658
+ width: 70%;
13659
+ }
13660
+ }
13661
+ }
13662
+ }
13663
+
13664
+ .ncl-version-configuration-runtime-attributes {
13665
+ .row:not(.info-row) {
13666
+ display: flex;
13667
+ justify-content: space-between;
13668
+
13669
+ &:not(:last-child) {
13670
+ margin-top: 10px;
13671
+ margin-bottom: 25px;
13672
+ }
13673
+
13674
+ > div {
13675
+ flex: 0.65;
13676
+
13677
+ &:not(:last-child) {
13678
+ margin-right: 16px;
13679
+ }
13680
+
13681
+ &.arguments-input {
13682
+ flex-grow: 2;
13683
+ }
13684
+ }
13685
+ }
13686
+
13687
+ .row {
13688
+ .runtime {
13689
+ height: 36px;
13690
+ border-radius: 2px;
13691
+ padding: 9px 0 0 14px;
13692
+ text-transform: capitalize;
13693
+ font-family: @font-family-sans-serif;
13694
+ font-size: 14px;
13695
+ text-align: left;
13696
+ color: @dusk-three;
13697
+ }
13698
+
13699
+ .textarea-field {
13700
+ height: 177px;
13701
+ resize: none;
13702
+ white-space: pre;
13703
+ overflow-x: auto;
13704
+ }
13705
+ }
13706
+
13707
+ .java-attribute {
13708
+ .textarea-field {
13709
+ height: 70px;
13710
+ overflow-y: auto;
13711
+ }
13712
+ }
13713
+ }
13714
+
13715
+ .ncl-version-configuration-volumes {
13716
+ .ncl-version-volume {
13717
+ .common-table-header {
13718
+ border: none;
13719
+ padding-left: 40px;
13720
+ padding-right: 60px;
13721
+
13722
+ .common-table-cell {
13723
+ font-size: 14px;
13724
+ font-weight: bold;
13725
+ letter-spacing: normal;
13726
+ color: @dusk-three;
13727
+ height: 46px;
13728
+ }
13729
+
13730
+ &.item-header {
13728
13731
  display: flex;
13729
- justify-content: space-between;
13730
-
13731
- .uploaded {
13732
- position: relative;
13733
- flex-grow: 1;
13734
- padding: 6px 40px 6px 8px;
13735
-
13736
- .file-name {
13737
- margin-left: 9px;
13738
- color: @dusk-three;
13739
13732
 
13740
- .uploaded-file-directory {
13741
- margin-left: 8px;
13742
- color: @dark-greyish-blue;
13743
- }
13744
- }
13733
+ .item-name {
13734
+ width: 25%;
13735
+ padding-left: 0;
13745
13736
  }
13746
13737
 
13747
- .uploaded-file {
13748
- padding: 3px 55px 3px 8px;
13749
-
13750
- .file-name {
13751
- margin: 4px 4px 4px 9px;
13752
- vertical-align: top;
13753
- }
13738
+ .item-class {
13739
+ width: 20%;
13740
+ }
13754
13741
 
13755
- .build-close-button {
13756
- top: 6px;
13757
- }
13742
+ .item-info {
13743
+ width: 55%;
13758
13744
  }
13759
13745
  }
13760
13746
  }
13761
- }
13762
13747
 
13763
- .configuration-build-title-wrapper {
13764
- display: flex;
13765
- justify-content: space-between;
13748
+ .common-table-body {
13749
+ .ncl-collapsing-row .item-row {
13750
+ .item-name {
13751
+ padding-left: 0;
13752
+ width: 25%;
13753
+ }
13766
13754
 
13767
- .igz-action-menu {
13768
- .menu-button {
13769
- width: 40px;
13770
- height: 40px;
13771
- display: flex;
13772
- justify-content: center;
13773
- align-items: center;
13774
- font-size: 22px;
13775
- margin: -10px -15px 0 0;
13776
- border-radius: 50%;
13777
- color: @dusk-three;
13778
- }
13755
+ .item-class {
13756
+ width: 20%;
13757
+ }
13779
13758
 
13780
- .active {
13781
- .black(0.1);
13782
- background-color: @silver;
13783
- box-shadow: inset 0px 2px 3px 0 @color;
13759
+ .item-info {
13760
+ width: 55%;
13761
+ }
13784
13762
  }
13785
13763
 
13786
- .menu-dropdown {
13787
- margin-top: 4px;
13788
- right: -18px;
13764
+ .common-table-row {
13765
+ &:not(.read-only):hover {
13766
+ .common-table-cells-container {
13767
+ background-color: @white;
13768
+ }
13769
+
13770
+ .actions-menu {
13771
+ background-color: @white;
13772
+ }
13773
+ }
13789
13774
  }
13790
13775
  }
13791
13776
  }
13792
13777
  }
13793
13778
 
13794
- @desktop: 1350px;
13795
- @desktop-low: 1202px;
13796
- @desktop-middle: 1550px;
13779
+ .ncl-test-events-logs {
13780
+ padding: 6px 17px 25px;
13781
+ background-color: @white;
13797
13782
 
13798
- .ncl-version-configuration-basic-settings {
13799
- .row {
13783
+ .functional-buttons {
13784
+ .duskThree(0.64);
13800
13785
  display: flex;
13801
- justify-content: space-between;
13802
-
13803
- &:not(:last-child) {
13804
- margin-bottom: 23px;
13805
- }
13786
+ justify-content: flex-end;
13787
+ color: @color;
13788
+ font-size: 16px;
13806
13789
 
13807
- &:last-child {
13808
- margin-bottom: 4px;
13809
- }
13790
+ > div {
13791
+ margin-right: 24px;
13810
13792
 
13811
- &.enable-checkbox {
13812
- justify-content: flex-start;
13813
- margin-bottom: 18px;
13793
+ &:hover {
13794
+ color: @dusk-three;
13795
+ }
13814
13796
  }
13797
+ }
13815
13798
 
13816
- > div {
13817
- flex: 1;
13799
+ .collapsed-row {
13800
+ .black(0.2);
13801
+ display: flex;
13802
+ align-items: center;
13803
+ position: relative;
13804
+ height: 36px;
13805
+ background-color: @white;
13806
+ color: @dusk-three;
13807
+ box-shadow: 1.7px 1.1px 4px 0 @color;
13808
+ border: solid 1px @pale-grey;
13809
+ margin-bottom: 10px;
13818
13810
 
13819
- &:not(:last-child) {
13820
- margin-right: 46px;
13821
- }
13811
+ .igz-icon-right {
13812
+ .duskThree(0.64);
13813
+ font-size: 12px;
13814
+ color: @color;
13815
+ margin: 0 8px 0 12px;
13822
13816
 
13823
- .label {
13824
- padding: 0;
13825
- margin-bottom: 5px;
13817
+ &::before {
13818
+ vertical-align: text-bottom;
13826
13819
  }
13820
+ }
13827
13821
 
13828
- &.timeout-block {
13829
- .label {
13830
- margin-bottom: 3px;
13831
- }
13822
+ .level-icon {
13823
+ display: inline-block;
13824
+ margin-right: 8px;
13825
+ width: 20px;
13826
+ text-align: center;
13832
13827
 
13833
- .timeout-values {
13834
- margin-left: 27px;
13828
+ &::before {
13829
+ font-size: 16px;
13830
+ vertical-align: text-bottom;
13831
+ }
13835
13832
 
13836
- .inputs {
13837
- display: flex;
13838
- align-items: center;
13833
+ &.ncl-icon-debug {
13834
+ color: @orangish;
13839
13835
 
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
- }
13836
+ &::before {
13837
+ font-size: 18px;
13851
13838
  }
13852
13839
  }
13853
- }
13854
-
13855
- .logger-block {
13856
- display: flex;
13857
- margin-top: 3px;
13858
13840
 
13859
- .logger-dropdown {
13860
- .default-dropdown {
13861
- position: relative;
13862
- height: 36px;
13841
+ &.igz-icon-info-round {
13842
+ color: @orangish;
13843
+ }
13863
13844
 
13864
- .dropdown-overlap {
13865
- z-index: 100;
13866
- }
13867
- }
13845
+ &.igz-icon-warning {
13846
+ color: @orangish;
13868
13847
  }
13869
13848
 
13870
- > div {
13871
- flex: 1;
13849
+ &.igz-icon-cancel-path {
13850
+ color: @orangish;
13851
+ }
13852
+ }
13872
13853
 
13873
- &:not(:last-child) {
13874
- margin-right: 16px;
13875
- }
13854
+ .date {
13855
+ display: inline-block;
13856
+ width: 230px;
13857
+ font-size: 14px;
13858
+ font-weight: bold;
13859
+ margin-right: 15px;
13860
+ }
13876
13861
 
13877
- .label {
13878
- padding: 0;
13879
- margin-bottom: 5px;
13880
- }
13862
+ .message {
13863
+ display: inline-block;
13864
+ width: 200px;
13865
+ margin-right: 30px;
13866
+ }
13881
13867
 
13882
- &.logger-input {
13883
- flex-grow: 1.95;
13884
- }
13885
- }
13868
+ .ncl-icon-parameters {
13869
+ .duskThree(0.64);
13870
+ color: @color;
13871
+ font-size: 14px;
13872
+ position: absolute;
13873
+ top: 9px;
13874
+ right: 9px;
13886
13875
  }
13887
13876
  }
13888
- }
13889
13877
 
13890
- @desktop-middle: 1550px;
13878
+ .expanded-row {
13879
+ background-color: @white;
13880
+ color: @dusk-three;
13881
+ border: solid 1px @pale-grey;
13882
+ margin-bottom: 10px;
13891
13883
 
13892
- .ncl-version-configuration-resources {
13893
- .row {
13894
- .range-inputs-row {
13884
+ .header {
13885
+ position: relative;
13895
13886
  display: flex;
13896
- align-items: flex-end;
13897
-
13898
- .row-title {
13899
- margin-bottom: 8px;
13900
- }
13901
- }
13887
+ align-items: center;
13888
+ height: 34px;
13902
13889
 
13903
- .form-row {
13904
- padding: 12px 0;
13890
+ .igz-icon-down {
13891
+ .duskThree(0.64);
13892
+ font-size: 12px;
13893
+ color: @color;
13894
+ margin: 0 8px 0 12px;
13905
13895
 
13906
- .row-title, .input-title {
13907
- font-size: 14px;
13896
+ &::before {
13897
+ vertical-align: text-bottom;
13898
+ }
13908
13899
  }
13909
13900
 
13910
- .row-title {
13911
- font-weight: 500;
13912
- }
13901
+ .level-icon {
13902
+ display: inline-block;
13903
+ margin-right: 8px;
13904
+ width: 20px;
13905
+ text-align: center;
13913
13906
 
13914
- .input-wrapper {
13915
- display: flex;
13916
- flex-wrap: wrap;
13907
+ &::before {
13908
+ font-size: 16px;
13909
+ vertical-align: text-bottom;
13910
+ }
13917
13911
 
13918
- .input-title {
13919
- width: 100%;
13912
+ &.ncl-icon-debug {
13913
+ color: @orangish;
13914
+
13915
+ &::before {
13916
+ font-size: 18px;
13917
+ }
13920
13918
  }
13921
13919
 
13922
- .memory-number-input, .cpu-number-input {
13923
- width: 50%;
13920
+ &.igz-icon-info-round {
13921
+ color: @orangish;
13924
13922
  }
13925
13923
 
13926
- .memory-size-dropdown, .cpu-dropdown {
13927
- width: 35%
13924
+ &.igz-icon-warning {
13925
+ color: @orangish;
13928
13926
  }
13929
13927
 
13930
- .gpu-number-input, .replicas-number-input, .preemtion-mode-input, .priority-class-input {
13931
- width: 85%;
13928
+ &.igz-icon-cancel-path {
13929
+ color: @orangish;
13932
13930
  }
13933
13931
  }
13934
- }
13935
13932
 
13936
- .slider-block {
13937
- padding-top: 0;
13938
- margin-bottom: 10px;
13933
+ .date {
13934
+ display: inline-block;
13935
+ width: 230px;
13936
+ font-size: 14px;
13937
+ font-weight: bold;
13938
+ margin-right: 15px;
13939
+ }
13939
13940
 
13940
- .slider {
13941
- width: 70%;
13941
+ .ncl-icon-parameters {
13942
+ .duskThree(0.64);
13943
+ position: absolute;
13944
+ top: 9px;
13945
+ right: 9px;
13946
+ color: @color;
13947
+ font-size: 14px;
13942
13948
  }
13943
13949
  }
13944
- }
13945
- }
13946
-
13947
- .ncl-version-configuration-logging {
13948
- .row {
13949
- display: flex;
13950
- position: relative;
13951
13950
 
13952
- .logging-wrapper {
13953
- width: 100%;
13954
- }
13955
- }
13956
- }
13951
+ .expanded-body {
13952
+ font-size: 14px;
13953
+ color: @dusk-three;
13957
13954
 
13958
- .ncl-version-configuration-runtime-attributes {
13959
- .row:not(.info-row) {
13960
- display: flex;
13961
- justify-content: space-between;
13955
+ .error {
13956
+ width: 71%;
13957
+ border-radius: 3px;
13958
+ background-color: #fbe5e8;
13959
+ border: solid 1px @darkish-pink;
13960
+ color: @darkish-pink;
13961
+ word-wrap: break-word;
13962
+ margin-left: 62px;
13963
+ padding: 12px;
13964
+ margin-bottom: 16px;
13965
+ }
13962
13966
 
13963
- &:not(:last-child) {
13964
- margin-top: 10px;
13965
- margin-bottom: 25px;
13966
- }
13967
+ .message {
13968
+ display: inline-block;
13969
+ width: 70%;
13970
+ word-wrap: break-word;
13971
+ margin: 0 0 16px 62px;
13972
+ }
13967
13973
 
13968
- > div {
13969
- flex: 0.65;
13974
+ .parameters {
13975
+ padding: 0 62px 16px;
13970
13976
 
13971
- &:not(:last-child) {
13972
- margin-right: 16px;
13973
- }
13977
+ .parameters-header {
13978
+ font-weight: bold;
13979
+ }
13974
13980
 
13975
- &.arguments-input {
13976
- flex-grow: 2;
13977
- }
13978
- }
13979
- }
13981
+ > div {
13982
+ display: flex;
13983
+ line-height: 2;
13980
13984
 
13981
- .row {
13982
- .runtime {
13983
- height: 36px;
13984
- border-radius: 2px;
13985
- padding: 9px 0 0 14px;
13986
- text-transform: capitalize;
13987
- font-family: @font-family-sans-serif;
13988
- font-size: 14px;
13989
- text-align: left;
13990
- color: @dusk-three;
13991
- }
13985
+ .labels {
13986
+ color: @greyish-purple;
13987
+ font-size: 14px;
13988
+ width: 30%;
13989
+ }
13992
13990
 
13993
- .textarea-field {
13994
- height: 177px;
13995
- resize: none;
13996
- white-space: pre;
13997
- overflow-x: auto;
13991
+ .values {
13992
+ color: @dusk-three;
13993
+ font-size: 14px;
13994
+ width: 70%;
13995
+ }
13996
+ }
13997
+ }
13998
13998
  }
13999
13999
  }
14000
14000
 
14001
- .java-attribute {
14002
- .textarea-field {
14003
- height: 70px;
14004
- overflow-y: auto;
14005
- }
14001
+ .no-logs {
14002
+ margin: 10px auto 0;
14003
+ font-size: 14px;
14004
+ color: @pale-grey;
14005
+ text-align: center;
14006
14006
  }
14007
14007
  }
14008
+ .ncl-test-events-navigation-tabs {
14009
+ display: flex;
14010
+ background: #f8f8fb;
14011
+ height: 40px;
14012
+ border-top: 1px solid @pale-grey;
14013
+ border-bottom: 1px solid @pale-grey;
14008
14014
 
14009
- .ncl-version-configuration-volumes {
14010
- .ncl-version-volume {
14011
- .common-table-header {
14012
- border: none;
14013
- padding-left: 40px;
14014
- padding-right: 60px;
14015
-
14016
- .common-table-cell {
14017
- font-size: 14px;
14018
- font-weight: bold;
14019
- letter-spacing: normal;
14020
- color: @dusk-three;
14021
- height: 46px;
14022
- }
14023
-
14024
- &.item-header {
14025
- display: flex;
14026
-
14027
- .item-name {
14028
- width: 25%;
14029
- padding-left: 0;
14030
- }
14015
+ .test-events-navigation-tab {
14016
+ .duskThree(0.64);
14017
+ position: relative;
14018
+ float: left;
14019
+ height: 27px;
14020
+ padding: 10px 40px 0;
14021
+ font-family: @font-family-sans-serif;
14022
+ color: @color;
14023
+ font-size: 13px;
14024
+ text-align: center;
14025
+ cursor: pointer;
14026
+ border-bottom: none;
14027
+ box-sizing: content-box;
14031
14028
 
14032
- .item-class {
14033
- width: 20%;
14034
- }
14029
+ &.active, &.active:hover {
14030
+ background: none;
14031
+ color: @dusk-three;
14032
+ border-bottom: 2px solid @dusk-three;
14033
+ font-weight: bold;
14035
14034
 
14036
- .item-info {
14037
- width: 55%;
14038
- }
14035
+ .badge {
14036
+ color: @white;
14037
+ background-color: @light-grey-blue;
14039
14038
  }
14040
14039
  }
14041
14040
 
14042
- .common-table-body {
14043
- .ncl-collapsing-row .item-row {
14044
- .item-name {
14045
- padding-left: 0;
14046
- width: 25%;
14047
- }
14048
-
14049
- .item-class {
14050
- width: 20%;
14051
- }
14041
+ .badge {
14042
+ display: inline-block;
14043
+ min-width: 22px;
14044
+ padding: 3px 7px;
14045
+ font-size: 12px;
14046
+ font-weight: 500;
14047
+ color: @greyish-purple;
14048
+ line-height: 1;
14049
+ vertical-align: middle;
14050
+ white-space: nowrap;
14051
+ text-align: center;
14052
+ background-color: @pale-grey;
14053
+ border-radius: 7.5px;
14054
+ margin-left: 7px;
14055
+ margin-top: -4px;
14056
+ }
14057
+ }
14052
14058
 
14053
- .item-info {
14054
- width: 55%;
14055
- }
14056
- }
14059
+ .default-dropdown {
14060
+ float: left;
14061
+ width: 105px;
14057
14062
 
14058
- .common-table-row {
14059
- &:not(.read-only):hover {
14060
- .common-table-cells-container {
14061
- background-color: @white;
14062
- }
14063
+ .default-dropdown-field:not(:hover) {
14064
+ border-color: transparent;
14065
+ }
14063
14066
 
14064
- .actions-menu {
14065
- background-color: @white;
14066
- }
14067
- }
14068
- }
14067
+ .default-dropdown-container {
14068
+ z-index: 3;
14069
14069
  }
14070
14070
  }
14071
14071
  }