iguazio.dashboard-controls 1.2.16 → 1.2.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/js/iguazio.dashboard-controls.js +3981 -3981
  2. package/dist/less/iguazio.dashboard-controls.less +1492 -1492
  3. package/package.json +1 -1
  4. package/src/igz_controls/less/tooltips.less +1 -1
package/dist/less/iguazio.dashboard-controls.less CHANGED
@@ -3543,7 +3543,7 @@ html input[disabled], html textarea[disabled] {
3543
3543
  div.highcharts-tooltip {
3544
3544
 
3545
3545
  > span {
3546
- width: 160px;
3546
+ width: 160px !important;
3547
3547
  }
3548
3548
  }
3549
3549
  }
@@ -5569,164 +5569,6 @@ yx-axis
5569
5569
  }
5570
5570
  }
5571
5571
  }
5572
- .igz-action-menu {
5573
- .action-menu-color-set();
5574
- .action-icon-color-set();
5575
-
5576
- opacity: 1;
5577
- position: relative;
5578
-
5579
- .menu-button {
5580
- color: @menu-btn-color;
5581
- cursor: pointer;
5582
- font-size: 18px;
5583
- height: 19px;
5584
- text-align: center;
5585
- transition: @igz-basic-transition-color;
5586
- width: 30px;
5587
-
5588
- &.active,
5589
- &:hover {
5590
- color: @menu-btn-active-hover-color;
5591
- }
5592
- }
5593
-
5594
- .menu-dropdown {
5595
- visibility: hidden;
5596
- background-color: @menu-dropdown-bg-color;
5597
- border: @menu-dropdown-border;
5598
- border-radius: 2px;
5599
- box-shadow: @menu-dropdown-box-shadow;
5600
- color: @menu-dropdown-color;
5601
- font-family: @font-family-sans-serif;
5602
- font-size: 13px;
5603
- font-weight: 500;
5604
- line-height: normal;
5605
- margin-top: 9px;
5606
- min-width: 129px;
5607
- padding: 8px 0 0;
5608
- position: absolute;
5609
- z-index: 10;
5610
- transform: translateX(-100%);
5611
-
5612
- .actions-list {
5613
- cursor: default;
5614
- padding-bottom: 8px;
5615
-
5616
- .tooltip {
5617
- // !important used to overwrite third-party's inline style
5618
- display: none !important;
5619
- }
5620
- }
5621
-
5622
- .igz-action-item {
5623
- color: @action-item-color;
5624
- cursor: pointer;
5625
- font-size: 13px;
5626
- font-weight: 400;
5627
- line-height: 32px;
5628
- padding: 0 18px;
5629
- text-align: left;
5630
- white-space: nowrap;
5631
-
5632
- &:hover,
5633
- &.subtemplate-show {
5634
- background-color: @action-item-hover-bg-color;
5635
- }
5636
-
5637
- &.inactive {
5638
- color: @action-item-inactive-color;
5639
- cursor: default;
5640
-
5641
- &:hover {
5642
- background-color: @menu-dropdown-bg-color;
5643
- }
5644
- }
5645
-
5646
- .action-icon {
5647
- color: @action-icon-color;
5648
- display: inline-block;
5649
- padding-right: 14px;
5650
-
5651
- &.icon-placeholder {
5652
- &:before {
5653
- content: '';
5654
- display: inline-block;
5655
- }
5656
- }
5657
-
5658
- &:before {
5659
- font-size: 16px;
5660
- position: relative;
5661
- text-align: center;
5662
- width: 20px;
5663
- top: 2px;
5664
- }
5665
- }
5666
-
5667
- .action-label {
5668
- display: inline-block;
5669
- }
5670
- }
5671
-
5672
- .shortcuts-list {
5673
- padding-bottom: 8px;
5674
-
5675
- &:not(.first-block) {
5676
- border-top: @shortcuts-list-not-first-block-border;
5677
- padding-top: 8px;
5678
- }
5679
- }
5680
-
5681
- .shortcuts-header {
5682
- font-family: @font-family-sans-serif;
5683
- color: @shortcuts-header-color;
5684
- line-height: 24px;
5685
- font-size: 13px;
5686
- font-weight: 400;
5687
- padding: 0 15px 4px 22px;
5688
- text-align: left;
5689
- }
5690
-
5691
- .shortcuts-item {
5692
- color: @shortcuts-item-color;
5693
- cursor: pointer;
5694
- font-weight: 400;
5695
- white-space: nowrap;
5696
- line-height: 32px;
5697
- padding: 0 26px 0 32px;
5698
- text-align: left;
5699
- transition: @igz-basic-transition-color;
5700
-
5701
- &:hover {
5702
- background-color: @shortcuts-item-hover-bg-color;
5703
- }
5704
-
5705
- }
5706
-
5707
- }
5708
-
5709
- &.small-action-menu {
5710
- .menu-button {
5711
- color: @small-action-menu-btn-color;
5712
- width: auto;
5713
- font-size: 12px;
5714
- display: inline-block;
5715
- height: auto;
5716
- margin: 0;
5717
- vertical-align: sub;
5718
- }
5719
-
5720
- .menu-dropdown {
5721
- margin: 0;
5722
- }
5723
- }
5724
-
5725
- .upward-menu {
5726
- transform: translate(-100%, -100%);
5727
- }
5728
- }
5729
-
5730
5572
  .igz-action-panel {
5731
5573
  .action-panel-color-set();
5732
5574
  .action-icon-color-set();
@@ -5937,63 +5779,221 @@ yx-axis
5937
5779
  }
5938
5780
  }
5939
5781
 
5940
- .auto-complete-wrapper {
5941
- .auto-complete-color-set();
5782
+ .igz-action-menu {
5783
+ .action-menu-color-set();
5784
+ .action-icon-color-set();
5942
5785
 
5786
+ opacity: 1;
5943
5787
  position: relative;
5944
5788
 
5945
- .input-row {
5946
- display: flex;
5947
- width: 100%;
5948
-
5949
- .auto-complete-input {
5950
- flex-grow: 3;
5951
- }
5789
+ .menu-button {
5790
+ color: @menu-btn-color;
5791
+ cursor: pointer;
5792
+ font-size: 18px;
5793
+ height: 19px;
5794
+ text-align: center;
5795
+ transition: @igz-basic-transition-color;
5796
+ width: 30px;
5952
5797
 
5953
- .auto-complete-filters {
5954
- width: 20%;
5798
+ &.active,
5799
+ &:hover {
5800
+ color: @menu-btn-active-hover-color;
5955
5801
  }
5956
5802
  }
5957
5803
 
5958
- .suggestions-row {
5959
- .auto-complete-suggestions-container {
5960
- position: absolute;
5961
- background-color: @auto-complete-suggestions-container-bg-color;
5962
- border-radius: 2px;
5963
- box-shadow: @auto-complete-suggestions-container-box-shadow;
5964
- color: @auto-complete-suggestions-container-color;
5965
- max-height: 220px;
5966
- overflow: auto;
5967
- z-index: 1000;
5968
- width: 100%;
5969
- margin-top: 2px;
5804
+ .menu-dropdown {
5805
+ visibility: hidden;
5806
+ background-color: @menu-dropdown-bg-color;
5807
+ border: @menu-dropdown-border;
5808
+ border-radius: 2px;
5809
+ box-shadow: @menu-dropdown-box-shadow;
5810
+ color: @menu-dropdown-color;
5811
+ font-family: @font-family-sans-serif;
5812
+ font-size: 13px;
5813
+ font-weight: 500;
5814
+ line-height: normal;
5815
+ margin-top: 9px;
5816
+ min-width: 129px;
5817
+ padding: 8px 0 0;
5818
+ position: absolute;
5819
+ z-index: 10;
5820
+ transform: translateX(-100%);
5970
5821
 
5971
- .list {
5972
- padding: 0;
5973
- margin: 0;
5822
+ .actions-list {
5823
+ cursor: default;
5824
+ padding-bottom: 8px;
5974
5825
 
5975
- .list-item {
5976
- color: @auto-complete-list-item-color;
5977
- font-family: @font-family-sans-serif;
5978
- font-size: 14px;
5979
- list-style-type: none;
5980
- margin: 0;
5981
- outline: none;
5982
- width: 100%;
5983
- min-height: 32px;
5826
+ .tooltip {
5827
+ // !important used to overwrite third-party's inline style
5828
+ display: none !important;
5829
+ }
5830
+ }
5984
5831
 
5985
- &:first-child {
5986
- margin-top: 7px;
5987
- }
5832
+ .igz-action-item {
5833
+ color: @action-item-color;
5834
+ cursor: pointer;
5835
+ font-size: 13px;
5836
+ font-weight: 400;
5837
+ line-height: 32px;
5838
+ padding: 0 18px;
5839
+ text-align: left;
5840
+ white-space: nowrap;
5988
5841
 
5989
- &:last-child {
5990
- margin-bottom: 4px;
5991
- }
5842
+ &:hover,
5843
+ &.subtemplate-show {
5844
+ background-color: @action-item-hover-bg-color;
5845
+ }
5992
5846
 
5993
- .list-item-block {
5994
- display: flex;
5995
- flex-flow: row nowrap;
5996
- align-items: center;
5847
+ &.inactive {
5848
+ color: @action-item-inactive-color;
5849
+ cursor: default;
5850
+
5851
+ &:hover {
5852
+ background-color: @menu-dropdown-bg-color;
5853
+ }
5854
+ }
5855
+
5856
+ .action-icon {
5857
+ color: @action-icon-color;
5858
+ display: inline-block;
5859
+ padding-right: 14px;
5860
+
5861
+ &.icon-placeholder {
5862
+ &:before {
5863
+ content: '';
5864
+ display: inline-block;
5865
+ }
5866
+ }
5867
+
5868
+ &:before {
5869
+ font-size: 16px;
5870
+ position: relative;
5871
+ text-align: center;
5872
+ width: 20px;
5873
+ top: 2px;
5874
+ }
5875
+ }
5876
+
5877
+ .action-label {
5878
+ display: inline-block;
5879
+ }
5880
+ }
5881
+
5882
+ .shortcuts-list {
5883
+ padding-bottom: 8px;
5884
+
5885
+ &:not(.first-block) {
5886
+ border-top: @shortcuts-list-not-first-block-border;
5887
+ padding-top: 8px;
5888
+ }
5889
+ }
5890
+
5891
+ .shortcuts-header {
5892
+ font-family: @font-family-sans-serif;
5893
+ color: @shortcuts-header-color;
5894
+ line-height: 24px;
5895
+ font-size: 13px;
5896
+ font-weight: 400;
5897
+ padding: 0 15px 4px 22px;
5898
+ text-align: left;
5899
+ }
5900
+
5901
+ .shortcuts-item {
5902
+ color: @shortcuts-item-color;
5903
+ cursor: pointer;
5904
+ font-weight: 400;
5905
+ white-space: nowrap;
5906
+ line-height: 32px;
5907
+ padding: 0 26px 0 32px;
5908
+ text-align: left;
5909
+ transition: @igz-basic-transition-color;
5910
+
5911
+ &:hover {
5912
+ background-color: @shortcuts-item-hover-bg-color;
5913
+ }
5914
+
5915
+ }
5916
+
5917
+ }
5918
+
5919
+ &.small-action-menu {
5920
+ .menu-button {
5921
+ color: @small-action-menu-btn-color;
5922
+ width: auto;
5923
+ font-size: 12px;
5924
+ display: inline-block;
5925
+ height: auto;
5926
+ margin: 0;
5927
+ vertical-align: sub;
5928
+ }
5929
+
5930
+ .menu-dropdown {
5931
+ margin: 0;
5932
+ }
5933
+ }
5934
+
5935
+ .upward-menu {
5936
+ transform: translate(-100%, -100%);
5937
+ }
5938
+ }
5939
+
5940
+ .auto-complete-wrapper {
5941
+ .auto-complete-color-set();
5942
+
5943
+ position: relative;
5944
+
5945
+ .input-row {
5946
+ display: flex;
5947
+ width: 100%;
5948
+
5949
+ .auto-complete-input {
5950
+ flex-grow: 3;
5951
+ }
5952
+
5953
+ .auto-complete-filters {
5954
+ width: 20%;
5955
+ }
5956
+ }
5957
+
5958
+ .suggestions-row {
5959
+ .auto-complete-suggestions-container {
5960
+ position: absolute;
5961
+ background-color: @auto-complete-suggestions-container-bg-color;
5962
+ border-radius: 2px;
5963
+ box-shadow: @auto-complete-suggestions-container-box-shadow;
5964
+ color: @auto-complete-suggestions-container-color;
5965
+ max-height: 220px;
5966
+ overflow: auto;
5967
+ z-index: 1000;
5968
+ width: 100%;
5969
+ margin-top: 2px;
5970
+
5971
+ .list {
5972
+ padding: 0;
5973
+ margin: 0;
5974
+
5975
+ .list-item {
5976
+ color: @auto-complete-list-item-color;
5977
+ font-family: @font-family-sans-serif;
5978
+ font-size: 14px;
5979
+ list-style-type: none;
5980
+ margin: 0;
5981
+ outline: none;
5982
+ width: 100%;
5983
+ min-height: 32px;
5984
+
5985
+ &:first-child {
5986
+ margin-top: 7px;
5987
+ }
5988
+
5989
+ &:last-child {
5990
+ margin-bottom: 4px;
5991
+ }
5992
+
5993
+ .list-item-block {
5994
+ display: flex;
5995
+ flex-flow: row nowrap;
5996
+ align-items: center;
5997
5997
  padding: 6px 16px;
5998
5998
  width: 100%;
5999
5999
 
@@ -7161,45 +7161,6 @@ yx-axis
7161
7161
  }
7162
7162
  }
7163
7163
 
7164
- .igz-navigation-tabs {
7165
- .navigation-tabs-color-set();
7166
-
7167
- background-color: @navigation-tabs-bg-color;
7168
- height: 56px;
7169
- padding-top: 7px;
7170
-
7171
- .navigation-tab {
7172
- float: left;
7173
- height: 32px;
7174
- padding: 15px 24px 0;
7175
- font-family: @font-family-sans-serif;
7176
- color: @navigation-tab-color;
7177
- font-size: 14px;
7178
- text-align: center;
7179
- cursor: pointer;
7180
- border-bottom: @navigation-tab-border-bottom;
7181
- box-sizing: content-box;
7182
-
7183
- &.active, &.active:hover {
7184
- background-color: @navigation-tab-active-hover-bg-color;
7185
- color: @navigation-tab-active-hover-color;
7186
- border-bottom: @navigation-tab-active-hover-border-bottom;
7187
- }
7188
-
7189
- &:hover {
7190
- background-color: @navigation-tab-hover-bg-color;
7191
- }
7192
-
7193
- &.active {
7194
- background-color: @navigation-tab-active-bg-color;
7195
- }
7196
-
7197
- @media screen and (max-width: 940px) {
7198
- padding: 15px 12px 0;
7199
- }
7200
- }
7201
- }
7202
-
7203
7164
  .igz-multiple-checkboxes {
7204
7165
  .multiple-checkboxes-color-set();
7205
7166
 
@@ -7396,161 +7357,47 @@ yx-axis
7396
7357
  }
7397
7358
  }
7398
7359
 
7399
- .igz-number-input {
7400
- .number-input-color-set();
7360
+ .igz-navigation-tabs {
7361
+ .navigation-tabs-color-set();
7401
7362
 
7402
- min-width: 115px;
7403
- font-family: @font-family-sans-serif;
7404
- font-size: 14px;
7405
- font-weight: 400;
7406
- height: 36px;
7407
- position: relative;
7408
- background-color: @number-input-bg-color;
7409
- border: @number-input-border;
7410
- border-radius: 2px;
7411
- color: @number-input-color;
7412
- display: flex;
7413
- justify-content: flex-start;
7414
- align-items: center;
7415
- padding: 0 10px 0 11px;
7416
- z-index: 3;
7363
+ background-color: @navigation-tabs-bg-color;
7364
+ height: 56px;
7365
+ padding-top: 7px;
7417
7366
 
7418
- &:not(.disabled) {
7419
- &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
7420
- background-color: @number-input-not-disabled-focus-invalid-bg-color;
7421
- border: @number-input-not-disabled-focus-invalid-border;
7422
- box-shadow: none;
7423
- outline: none;
7367
+ .navigation-tab {
7368
+ float: left;
7369
+ height: 32px;
7370
+ padding: 15px 24px 0;
7371
+ font-family: @font-family-sans-serif;
7372
+ color: @navigation-tab-color;
7373
+ font-size: 14px;
7374
+ text-align: center;
7375
+ cursor: pointer;
7376
+ border-bottom: @navigation-tab-border-bottom;
7377
+ box-sizing: content-box;
7378
+
7379
+ &.active, &.active:hover {
7380
+ background-color: @navigation-tab-active-hover-bg-color;
7381
+ color: @navigation-tab-active-hover-color;
7382
+ border-bottom: @navigation-tab-active-hover-border-bottom;
7424
7383
  }
7425
7384
 
7426
- &:focus-within, &.focused {
7427
- outline: 0;
7428
- border: @number-input-not-disabled-hover-focus-border;
7385
+ &:hover {
7386
+ background-color: @navigation-tab-hover-bg-color;
7429
7387
  }
7430
7388
 
7431
- &.invalid:not(.pristine), &.invalid.submitted {
7432
- background-color: @number-input-not-disabled-invalid-bg-color;
7433
- border: @number-input-not-disabled-invalid-border;
7434
- box-shadow: none;
7389
+ &.active {
7390
+ background-color: @navigation-tab-active-bg-color;
7435
7391
  }
7436
7392
 
7437
- &:focus.ng-valid, &:focus.ng-pristine {
7438
- border: @number-input-not-disabled-valid-border;
7439
- box-shadow: none;
7440
- outline: none;
7393
+ @media screen and (max-width: 940px) {
7394
+ padding: 15px 12px 0;
7441
7395
  }
7442
7396
  }
7397
+ }
7443
7398
 
7444
- &.additional-left-padding {
7445
- padding-left: 22px;
7446
- }
7447
-
7448
- .input-field {
7449
- border: none;
7450
- outline: 0;
7451
- padding: 0;
7452
- text-align: left;
7453
- background-color: @number-input-field-bg-color;
7454
- }
7455
-
7456
- //
7457
- // placeholder
7458
- //
7459
-
7460
- ::-webkit-input-placeholder {
7461
- /* Chrome, Chromium, Edge, Safari, Opera*/
7462
- color: @number-input-placeholder-color;
7463
- }
7464
-
7465
- :-moz-placeholder {
7466
- /* Firefox 4-18 */
7467
- color: @number-input-placeholder-color;
7468
- }
7469
-
7470
- ::-moz-placeholder {
7471
- /* Firefox 19+ */
7472
- color: @number-input-placeholder-color;
7473
- }
7474
-
7475
- :-ms-input-placeholder {
7476
- /* - Internet Explorer 10–11
7477
- - Internet Explorer Mobile 10-11 */
7478
- color: @number-input-placeholder-color !important;
7479
- }
7480
-
7481
- ::placeholder {
7482
- /* modern browser versions */
7483
- color: @number-input-placeholder-color;
7484
- }
7485
-
7486
- .additional-left-block {
7487
- .prefix-unit {
7488
- color: @number-input-additional-left-block-prefix-unit-color;
7489
- font-size: 14px;
7490
- font-weight: 700;
7491
- padding-right: 7px;
7492
- }
7493
- }
7494
-
7495
- .suffix-unit-container {
7496
- display: flex;
7497
- align-items: center;
7498
-
7499
- .suffix-unit {
7500
- color: @number-input-suffix-unit-color;
7501
- font-size: 14px;
7502
- font-weight: 400;
7503
- padding-left: 3px;
7504
- }
7505
- }
7506
-
7507
- .arrow-block {
7508
- font-size: 11px;
7509
- display: flex;
7510
- flex-direction: column;
7511
- justify-content: center;
7512
- height: 100%;
7513
- margin-left: 6px;
7514
-
7515
- .igz-icon-dropup, .igz-icon-dropdown {
7516
- color: @number-input-arrow-block-icon-color;
7517
- cursor: pointer;
7518
- display: block;
7519
- line-height: 11px;
7520
- outline: 0;
7521
-
7522
- &:hover {
7523
- color: @number-input-arrow-block-icon-hover-color;
7524
- }
7525
- }
7526
- }
7527
-
7528
- &.disabled {
7529
- background-color: @number-input-disabled-bg-color;
7530
- opacity: 0.5;
7531
-
7532
- .suffix-unit {
7533
- opacity: 0.5;
7534
- }
7535
-
7536
- .igz-icon-dropup, .igz-icon-dropdown {
7537
- &, &:hover {
7538
- color: @number-input-disabled-icon-hover-color;
7539
- opacity: 0.5;
7540
- cursor: default;
7541
- }
7542
- }
7543
- }
7544
- }
7545
-
7546
- .step3, .step4 {
7547
- .additional-right-padding {
7548
- padding-right: 50px;
7549
- }
7550
- }
7551
-
7552
- .igz-pagination {
7553
- .pagination-color-set();
7399
+ .igz-pagination {
7400
+ .pagination-color-set();
7554
7401
 
7555
7402
  float: right;
7556
7403
  padding: 24px 36px 5px 30px;
@@ -7697,104 +7544,257 @@ yx-axis
7697
7544
  }
7698
7545
  }
7699
7546
  }
7700
- .search-input {
7701
- .search-input-color-set();
7547
+ .igz-number-input {
7548
+ .number-input-color-set();
7702
7549
 
7550
+ min-width: 115px;
7551
+ font-family: @font-family-sans-serif;
7552
+ font-size: 14px;
7553
+ font-weight: 400;
7554
+ height: 36px;
7703
7555
  position: relative;
7704
- color: @search-input-color;
7705
-
7706
- .container-search-input {
7707
- background-color: @search-input-bg-color;
7708
- border: 0;
7709
- font-family: @font-family-sans-serif;
7710
- font-size: 15px;
7711
- font-weight: 400;
7712
- height: 52px;
7713
- line-height: 52px;
7714
- margin: 0;
7715
- outline: 0;
7716
- padding-right: 20px;
7717
- width: 100%;
7556
+ background-color: @number-input-bg-color;
7557
+ border: @number-input-border;
7558
+ border-radius: 2px;
7559
+ color: @number-input-color;
7560
+ display: flex;
7561
+ justify-content: flex-start;
7562
+ align-items: center;
7563
+ padding: 0 10px 0 11px;
7564
+ z-index: 3;
7718
7565
 
7719
- &::-webkit-input-placeholder {
7720
- color: @search-input-placeholder-color;
7566
+ &:not(.disabled) {
7567
+ &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
7568
+ background-color: @number-input-not-disabled-focus-invalid-bg-color;
7569
+ border: @number-input-not-disabled-focus-invalid-border;
7570
+ box-shadow: none;
7571
+ outline: none;
7721
7572
  }
7722
7573
 
7723
- &:-moz-placeholder { /* Firefox 18- */
7724
- color: @search-input-placeholder-color;
7574
+ &:focus-within, &.focused {
7575
+ outline: 0;
7576
+ border: @number-input-not-disabled-hover-focus-border;
7725
7577
  }
7726
7578
 
7727
- &::-moz-placeholder { /* Firefox 19+ */
7728
- color: @search-input-placeholder-color;
7579
+ &.invalid:not(.pristine), &.invalid.submitted {
7580
+ background-color: @number-input-not-disabled-invalid-bg-color;
7581
+ border: @number-input-not-disabled-invalid-border;
7582
+ box-shadow: none;
7729
7583
  }
7730
7584
 
7731
- &:-ms-input-placeholder {
7732
- color: @search-input-placeholder-color;
7585
+ &:focus.ng-valid, &:focus.ng-pristine {
7586
+ border: @number-input-not-disabled-valid-border;
7587
+ box-shadow: none;
7588
+ outline: none;
7733
7589
  }
7590
+ }
7734
7591
 
7735
- &:focus {
7736
- &, & + .igz-icon-search:before {
7737
- color: @search-input-focus-icon-search-before-color;
7738
- }
7739
-
7740
- &::-webkit-input-placeholder {
7741
- color: @search-input-focus-placeholder-color;
7742
- }
7592
+ &.additional-left-padding {
7593
+ padding-left: 22px;
7594
+ }
7743
7595
 
7744
- &:-moz-placeholder { /* Firefox 18- */
7745
- color: @search-input-focus-placeholder-color;
7746
- }
7596
+ .input-field {
7597
+ border: none;
7598
+ outline: 0;
7599
+ padding: 0;
7600
+ text-align: left;
7601
+ background-color: @number-input-field-bg-color;
7602
+ }
7747
7603
 
7748
- &::-moz-placeholder { /* Firefox 19+ */
7749
- color: @search-input-focus-placeholder-color;
7750
- }
7604
+ //
7605
+ // placeholder
7606
+ //
7751
7607
 
7752
- &:-ms-input-placeholder {
7753
- color: @search-input-focus-placeholder-color;
7754
- }
7608
+ ::-webkit-input-placeholder {
7609
+ /* Chrome, Chromium, Edge, Safari, Opera*/
7610
+ color: @number-input-placeholder-color;
7611
+ }
7755
7612
 
7756
- &::placeholder {
7757
- /* modern browser versions */
7758
- color: @search-input-focus-placeholder-color !important;
7759
- }
7760
- }
7613
+ :-moz-placeholder {
7614
+ /* Firefox 4-18 */
7615
+ color: @number-input-placeholder-color;
7761
7616
  }
7762
7617
 
7763
- .igz-icon-search {
7764
- font-size: 16px;
7765
- height: 16px;
7766
- position: absolute;
7767
- right: 0;
7768
- top: 17px;
7769
- width: 16px;
7770
- z-index: 1;
7618
+ ::-moz-placeholder {
7619
+ /* Firefox 19+ */
7620
+ color: @number-input-placeholder-color;
7771
7621
  }
7772
7622
 
7773
- .clear-button {
7774
- font-size: 10px;
7775
- position: absolute;
7776
- right: 4px;
7777
- top: 17px;
7778
- cursor: pointer;
7779
- color: @clear-button-color;
7780
- padding: 4px 5px 2px;
7781
- opacity: 0.64;
7782
- background-color: @clear-button-bg-color;
7783
- border-radius: 50%;
7784
- line-height: initial;
7623
+ :-ms-input-placeholder {
7624
+ /* - Internet Explorer 10–11
7625
+ - Internet Explorer Mobile 10-11 */
7626
+ color: @number-input-placeholder-color !important;
7627
+ }
7785
7628
 
7786
- &:hover {
7787
- opacity: 1;
7788
- }
7629
+ ::placeholder {
7630
+ /* modern browser versions */
7631
+ color: @number-input-placeholder-color;
7789
7632
  }
7790
7633
 
7791
- input::-ms-clear {
7792
- display: none;
7634
+ .additional-left-block {
7635
+ .prefix-unit {
7636
+ color: @number-input-additional-left-block-prefix-unit-color;
7637
+ font-size: 14px;
7638
+ font-weight: 700;
7639
+ padding-right: 7px;
7640
+ }
7793
7641
  }
7794
- }
7795
7642
 
7796
- .search-input-actions-bar {
7797
- .search-input-color-set();
7643
+ .suffix-unit-container {
7644
+ display: flex;
7645
+ align-items: center;
7646
+
7647
+ .suffix-unit {
7648
+ color: @number-input-suffix-unit-color;
7649
+ font-size: 14px;
7650
+ font-weight: 400;
7651
+ padding-left: 3px;
7652
+ }
7653
+ }
7654
+
7655
+ .arrow-block {
7656
+ font-size: 11px;
7657
+ display: flex;
7658
+ flex-direction: column;
7659
+ justify-content: center;
7660
+ height: 100%;
7661
+ margin-left: 6px;
7662
+
7663
+ .igz-icon-dropup, .igz-icon-dropdown {
7664
+ color: @number-input-arrow-block-icon-color;
7665
+ cursor: pointer;
7666
+ display: block;
7667
+ line-height: 11px;
7668
+ outline: 0;
7669
+
7670
+ &:hover {
7671
+ color: @number-input-arrow-block-icon-hover-color;
7672
+ }
7673
+ }
7674
+ }
7675
+
7676
+ &.disabled {
7677
+ background-color: @number-input-disabled-bg-color;
7678
+ opacity: 0.5;
7679
+
7680
+ .suffix-unit {
7681
+ opacity: 0.5;
7682
+ }
7683
+
7684
+ .igz-icon-dropup, .igz-icon-dropdown {
7685
+ &, &:hover {
7686
+ color: @number-input-disabled-icon-hover-color;
7687
+ opacity: 0.5;
7688
+ cursor: default;
7689
+ }
7690
+ }
7691
+ }
7692
+ }
7693
+
7694
+ .step3, .step4 {
7695
+ .additional-right-padding {
7696
+ padding-right: 50px;
7697
+ }
7698
+ }
7699
+
7700
+ .search-input {
7701
+ .search-input-color-set();
7702
+
7703
+ position: relative;
7704
+ color: @search-input-color;
7705
+
7706
+ .container-search-input {
7707
+ background-color: @search-input-bg-color;
7708
+ border: 0;
7709
+ font-family: @font-family-sans-serif;
7710
+ font-size: 15px;
7711
+ font-weight: 400;
7712
+ height: 52px;
7713
+ line-height: 52px;
7714
+ margin: 0;
7715
+ outline: 0;
7716
+ padding-right: 20px;
7717
+ width: 100%;
7718
+
7719
+ &::-webkit-input-placeholder {
7720
+ color: @search-input-placeholder-color;
7721
+ }
7722
+
7723
+ &:-moz-placeholder { /* Firefox 18- */
7724
+ color: @search-input-placeholder-color;
7725
+ }
7726
+
7727
+ &::-moz-placeholder { /* Firefox 19+ */
7728
+ color: @search-input-placeholder-color;
7729
+ }
7730
+
7731
+ &:-ms-input-placeholder {
7732
+ color: @search-input-placeholder-color;
7733
+ }
7734
+
7735
+ &:focus {
7736
+ &, & + .igz-icon-search:before {
7737
+ color: @search-input-focus-icon-search-before-color;
7738
+ }
7739
+
7740
+ &::-webkit-input-placeholder {
7741
+ color: @search-input-focus-placeholder-color;
7742
+ }
7743
+
7744
+ &:-moz-placeholder { /* Firefox 18- */
7745
+ color: @search-input-focus-placeholder-color;
7746
+ }
7747
+
7748
+ &::-moz-placeholder { /* Firefox 19+ */
7749
+ color: @search-input-focus-placeholder-color;
7750
+ }
7751
+
7752
+ &:-ms-input-placeholder {
7753
+ color: @search-input-focus-placeholder-color;
7754
+ }
7755
+
7756
+ &::placeholder {
7757
+ /* modern browser versions */
7758
+ color: @search-input-focus-placeholder-color !important;
7759
+ }
7760
+ }
7761
+ }
7762
+
7763
+ .igz-icon-search {
7764
+ font-size: 16px;
7765
+ height: 16px;
7766
+ position: absolute;
7767
+ right: 0;
7768
+ top: 17px;
7769
+ width: 16px;
7770
+ z-index: 1;
7771
+ }
7772
+
7773
+ .clear-button {
7774
+ font-size: 10px;
7775
+ position: absolute;
7776
+ right: 4px;
7777
+ top: 17px;
7778
+ cursor: pointer;
7779
+ color: @clear-button-color;
7780
+ padding: 4px 5px 2px;
7781
+ opacity: 0.64;
7782
+ background-color: @clear-button-bg-color;
7783
+ border-radius: 50%;
7784
+ line-height: initial;
7785
+
7786
+ &:hover {
7787
+ opacity: 1;
7788
+ }
7789
+ }
7790
+
7791
+ input::-ms-clear {
7792
+ display: none;
7793
+ }
7794
+ }
7795
+
7796
+ .search-input-actions-bar {
7797
+ .search-input-color-set();
7798
7798
 
7799
7799
  position: relative;
7800
7800
  .container-search-input {
@@ -7975,85 +7975,192 @@ yx-axis
7975
7975
  }
7976
7976
  }
7977
7977
 
7978
- .igz-slider-input-block {
7979
- .igz-slider-input-block-color-set();
7978
+ .splash-screen {
7979
+ .splash-screen-color-set();
7980
7980
 
7981
- position: relative;
7981
+ position: absolute;
7982
+ z-index: 996;
7983
+ width: 100%;
7984
+ height: 100%;
7985
+ background-color: @splash-screen-bg-color;
7986
+ transform-style: preserve-3d;
7982
7987
 
7983
- .igz-slider-input-title {
7984
- float: left;
7985
- display: table;
7986
- min-height: 30px;
7987
- line-height: 1;
7988
- color: @slider-input-title-color;
7989
- font-size: 14px;
7990
- font-weight: 400;
7991
- text-align: left;
7992
- cursor: default;
7988
+ // ngAnimate appearance for show/hide
7989
+ transition: opacity linear .25s 0s;
7993
7990
 
7994
- .igz-slider-input-title-text {
7995
- display: table-cell;
7996
- vertical-align: middle;
7997
- }
7991
+ &.ng-hide-remove {
7992
+ opacity: 0;
7998
7993
  }
7999
7994
 
8000
- // Custom styles for third-party library slider
8001
- .igz-slider-input-rz-slider {
8002
- float: left;
8003
- min-height: 16px;
8004
- line-height: 16px;
8005
-
8006
- .rzslider {
8007
- margin: 0;
8008
- height: 8px;
8009
-
8010
- .rz-bar-wrapper {
8011
- height: auto;
8012
- margin: 0;
8013
- padding: 0;
8014
-
8015
- .rz-bar {
8016
- background-color: @rz-bar-bg-color;
8017
- height: 3px;
8018
- }
8019
- }
8020
-
8021
- .rz-bubble {
8022
- display: none;
8023
- }
7995
+ .loading-splash-screen {
7996
+ position: absolute;
7997
+ top: 50%;
7998
+ left: 50%;
7999
+ transform: translate(-50%, -50%);
8000
+ color: @loading-splash-screen-color;
8001
+ font-size: 20px;
8002
+ text-align: center;
8003
+ font-weight: 500;
8004
+ width: 217px;
8005
+ border-radius: 6px;
8006
+ background-image: @loading-splash-screen-bg-image;
8007
+ padding: 49px 0;
8024
8008
 
8025
- .rz-pointer {
8026
- height: 14px;
8027
- width: 14px;
8028
- top: -6px;
8029
- box-shadow: @rz-pointer-box-shadow;
8030
- outline: 0;
8009
+ .splash-logo-wrapper {
8010
+ position: relative;
8011
+ text-align: center;
8031
8012
 
8032
- &:after {
8033
- display: none;
8034
- }
8013
+ .loader-fading-circle {
8014
+ width: 60px;
8015
+ height: 60px;
8035
8016
  }
8017
+ }
8036
8018
 
8037
- &:not([disabled]) {
8038
- .rz-bar.rz-selection {
8039
- background-color: @rz-selection-bg-color;
8040
- }
8041
-
8042
- .rz-pointer {
8043
- background-color: @rz-pointer-bg-color;
8044
- }
8045
- }
8019
+ .loading-text {
8020
+ padding: 31px 0 0 12px;
8021
+ font-family: @font-family-sans-serif;
8022
+ font-size: 20px;
8023
+ color: @loading-splash-screen-text-color;
8046
8024
  }
8047
8025
  }
8048
8026
 
8049
- // Current value
8050
- .igz-slider-input-current-value {
8051
- float: left;
8052
- min-height: 30px;
8053
- line-height: 30px;
8054
-
8055
- &.with-measure-units {
8056
- width: 18%;
8027
+ .alert-splash-screen {
8028
+ position: absolute;
8029
+ top: 50%;
8030
+ left: 50%;
8031
+ transform: translate(-50%, -50%);
8032
+ color: @alert-splash-screen-color;
8033
+ font-size: 20px;
8034
+ font-weight: 500;
8035
+ width: 504px;
8036
+ border-radius: 6px;
8037
+ background-image: @alert-splash-screen-bg-image;
8038
+ box-shadow: none;
8039
+ padding: 0 0 49px;
8040
+
8041
+ .header {
8042
+ background: url('/assets/images/oops.png') no-repeat center;
8043
+ margin: 47px 0 24px;
8044
+ height: 59px;
8045
+ background-size: contain;
8046
+ }
8047
+
8048
+ .notification-text {
8049
+ color: @alert-splash-screen-notification-text-color;
8050
+ padding: 0 60px;
8051
+ text-align: center;
8052
+ margin: 0 0 36px;
8053
+ line-height: 1.5;
8054
+ }
8055
+
8056
+ .buttons {
8057
+ text-align: center;
8058
+ height: 36px;
8059
+
8060
+ .refresh-button {
8061
+ margin: 0 auto;
8062
+ padding-top: 8px;
8063
+ height: 36px;
8064
+ width: 124px;
8065
+ font-size: 12px;
8066
+ border-radius: 2px;
8067
+ background-color: @alert-splash-screen-refresh-btn-bg-color;
8068
+ border: @alert-splash-screen-refresh-btn-border;
8069
+ text-transform: uppercase;
8070
+
8071
+ &:hover {
8072
+ background-color: @alert-splash-screen-refresh-btn-hover-bg-color;
8073
+ box-shadow: @alert-splash-screen-refresh-btn-hover-box-shadow;
8074
+ }
8075
+
8076
+ .igz-icon-refresh {
8077
+ font-size: 16px;
8078
+ margin-right: 8px;
8079
+ vertical-align: middle;
8080
+ }
8081
+ }
8082
+ }
8083
+ }
8084
+ }
8085
+ .igz-slider-input-block {
8086
+ .igz-slider-input-block-color-set();
8087
+
8088
+ position: relative;
8089
+
8090
+ .igz-slider-input-title {
8091
+ float: left;
8092
+ display: table;
8093
+ min-height: 30px;
8094
+ line-height: 1;
8095
+ color: @slider-input-title-color;
8096
+ font-size: 14px;
8097
+ font-weight: 400;
8098
+ text-align: left;
8099
+ cursor: default;
8100
+
8101
+ .igz-slider-input-title-text {
8102
+ display: table-cell;
8103
+ vertical-align: middle;
8104
+ }
8105
+ }
8106
+
8107
+ // Custom styles for third-party library slider
8108
+ .igz-slider-input-rz-slider {
8109
+ float: left;
8110
+ min-height: 16px;
8111
+ line-height: 16px;
8112
+
8113
+ .rzslider {
8114
+ margin: 0;
8115
+ height: 8px;
8116
+
8117
+ .rz-bar-wrapper {
8118
+ height: auto;
8119
+ margin: 0;
8120
+ padding: 0;
8121
+
8122
+ .rz-bar {
8123
+ background-color: @rz-bar-bg-color;
8124
+ height: 3px;
8125
+ }
8126
+ }
8127
+
8128
+ .rz-bubble {
8129
+ display: none;
8130
+ }
8131
+
8132
+ .rz-pointer {
8133
+ height: 14px;
8134
+ width: 14px;
8135
+ top: -6px;
8136
+ box-shadow: @rz-pointer-box-shadow;
8137
+ outline: 0;
8138
+
8139
+ &:after {
8140
+ display: none;
8141
+ }
8142
+ }
8143
+
8144
+ &:not([disabled]) {
8145
+ .rz-bar.rz-selection {
8146
+ background-color: @rz-selection-bg-color;
8147
+ }
8148
+
8149
+ .rz-pointer {
8150
+ background-color: @rz-pointer-bg-color;
8151
+ }
8152
+ }
8153
+ }
8154
+ }
8155
+
8156
+ // Current value
8157
+ .igz-slider-input-current-value {
8158
+ float: left;
8159
+ min-height: 30px;
8160
+ line-height: 30px;
8161
+
8162
+ &.with-measure-units {
8163
+ width: 18%;
8057
8164
  padding-right: 0;
8058
8165
 
8059
8166
  .igz-slider-input-current-value-text {
@@ -8181,245 +8288,74 @@ yx-axis
8181
8288
  }
8182
8289
  }
8183
8290
 
8184
- .splash-screen {
8185
- .splash-screen-color-set();
8186
-
8187
- position: absolute;
8188
- z-index: 996;
8189
- width: 100%;
8190
- height: 100%;
8191
- background-color: @splash-screen-bg-color;
8192
- transform-style: preserve-3d;
8291
+ .validating-input-field {
8292
+ .validating-input-field-color-set();
8193
8293
 
8194
- // ngAnimate appearance for show/hide
8195
- transition: opacity linear .25s 0s;
8294
+ background-color: @validating-input-field-bg-color;
8295
+ font-family: @font-family-sans-serif;
8296
+ font-size: 13px;
8297
+ font-weight: 400;
8298
+ min-height: 32px;
8299
+ line-height: 32px;
8300
+ position: relative;
8196
8301
 
8197
- &.ng-hide-remove {
8198
- opacity: 0;
8302
+ .input-icon {
8303
+ position: absolute;
8304
+ top: 2px;
8305
+ left: 8px;
8306
+ z-index: 2;
8307
+ color: @validating-input-icon-color;
8199
8308
  }
8200
8309
 
8201
- .loading-splash-screen {
8310
+ //
8311
+ // validation icon
8312
+ //
8313
+
8314
+ .validation-icon {
8202
8315
  position: absolute;
8203
- top: 50%;
8204
- left: 50%;
8205
- transform: translate(-50%, -50%);
8206
- color: @loading-splash-screen-color;
8207
- font-size: 20px;
8208
- text-align: center;
8209
- font-weight: 500;
8210
- width: 217px;
8211
- border-radius: 6px;
8212
- background-image: @loading-splash-screen-bg-image;
8213
- padding: 49px 0;
8316
+ right: 9px;
8317
+ bottom: 0;
8318
+ z-index: 3;
8214
8319
 
8215
- .splash-logo-wrapper {
8216
- position: relative;
8217
- text-align: center;
8320
+ &.igz-icon-verify-error {
8321
+ font-size: 13px;
8322
+ color: @validation-icon-error-color;
8323
+ }
8218
8324
 
8219
- .loader-fading-circle {
8220
- width: 60px;
8221
- height: 60px;
8222
- }
8325
+ &.igz-icon-verify-info {
8326
+ font-size: 16px;
8327
+ color: @validation-icon-info-color;
8223
8328
  }
8224
8329
 
8225
- .loading-text {
8226
- padding: 31px 0 0 12px;
8227
- font-family: @font-family-sans-serif;
8228
- font-size: 20px;
8229
- color: @loading-splash-screen-text-color;
8330
+ &.borders-focus, &.borders-hover {
8331
+ visibility: hidden;
8230
8332
  }
8231
8333
  }
8232
8334
 
8233
- .alert-splash-screen {
8335
+ .view-password{
8234
8336
  position: absolute;
8235
- top: 50%;
8236
- left: 50%;
8237
- transform: translate(-50%, -50%);
8238
- color: @alert-splash-screen-color;
8239
- font-size: 20px;
8240
- font-weight: 500;
8241
- width: 504px;
8242
- border-radius: 6px;
8243
- background-image: @alert-splash-screen-bg-image;
8244
- box-shadow: none;
8245
- padding: 0 0 49px;
8337
+ right: 9px;
8338
+ bottom: 0;
8339
+ z-index: 3;
8340
+ }
8246
8341
 
8247
- .header {
8248
- background: url('/assets/images/oops.png') no-repeat center;
8249
- margin: 47px 0 24px;
8250
- height: 59px;
8251
- background-size: contain;
8342
+ .validation-icon,
8343
+ .validation-rule-icon {
8344
+ width: 14px;
8345
+ font-size: 11px;
8346
+
8347
+ &.igz-icon-verify-ok {
8348
+ color: @validation-icon-ok-color;
8252
8349
  }
8253
8350
 
8254
- .notification-text {
8255
- color: @alert-splash-screen-notification-text-color;
8256
- padding: 0 60px;
8257
- text-align: center;
8258
- margin: 0 0 36px;
8259
- line-height: 1.5;
8351
+ &.ncl-icon-close {
8352
+ color: @validation-icon-close-color;
8260
8353
  }
8354
+ }
8261
8355
 
8262
- .buttons {
8263
- text-align: center;
8264
- height: 36px;
8265
-
8266
- .refresh-button {
8267
- margin: 0 auto;
8268
- padding-top: 8px;
8269
- height: 36px;
8270
- width: 124px;
8271
- font-size: 12px;
8272
- border-radius: 2px;
8273
- background-color: @alert-splash-screen-refresh-btn-bg-color;
8274
- border: @alert-splash-screen-refresh-btn-border;
8275
- text-transform: uppercase;
8276
-
8277
- &:hover {
8278
- background-color: @alert-splash-screen-refresh-btn-hover-bg-color;
8279
- box-shadow: @alert-splash-screen-refresh-btn-hover-box-shadow;
8280
- }
8281
-
8282
- .igz-icon-refresh {
8283
- font-size: 16px;
8284
- margin-right: 8px;
8285
- vertical-align: middle;
8286
- }
8287
- }
8288
- }
8289
- }
8290
- }
8291
- .toast-status-panel {
8292
- .toast-status-panel-color-set();
8293
-
8294
- margin-bottom: 20px;
8295
- padding: 16px 36px 16px 12px;
8296
- background-color: @toast-panel-bg-color;
8297
- border: @toast-panel-border;
8298
- position: relative;
8299
-
8300
- &.in-progress {
8301
- background-color: @toast-panel-in-progress-bg-color;
8302
- border: @toast-panel-in-progress-border;
8303
- }
8304
-
8305
- &.failed {
8306
- background-color: @toast-panel-failed-bg-color;
8307
- border: @toast-panel-failed-border;
8308
- }
8309
-
8310
- .panel-status {
8311
- color: @toast-panel-status-color;
8312
- line-height: 24px;
8313
- font-size: 14px;
8314
- font-weight: 700;
8315
- font-family: @font-family-sans-serif;
8316
- align-items: center;
8317
- display: flex;
8318
- justify-content: center;
8319
-
8320
- &.in-progress {
8321
- color: @toast-panel-status-in-progress-color;
8322
- }
8323
-
8324
- &.failed {
8325
- color: @toast-panel-status-failed-color;
8326
- }
8327
-
8328
- .panel-status-icon {
8329
- font-size: 24px;
8330
-
8331
- &.igz-icon-properties {
8332
- -webkit-animation: rotation 4s infinite linear;
8333
-
8334
- @-webkit-keyframes rotation {
8335
- from {
8336
- -webkit-transform: rotate(0deg);
8337
- }
8338
- to {
8339
- -webkit-transform: rotate(359deg);
8340
- }
8341
- }
8342
- }
8343
- }
8344
-
8345
- .msg-scrollable-container {
8346
- max-height: 300px;
8347
-
8348
- .panel-status-msg {
8349
- margin: 0 8px;
8350
- }
8351
- }
8352
- }
8353
- }
8354
-
8355
- .validating-input-field {
8356
- .validating-input-field-color-set();
8357
-
8358
- background-color: @validating-input-field-bg-color;
8359
- font-family: @font-family-sans-serif;
8360
- font-size: 13px;
8361
- font-weight: 400;
8362
- min-height: 32px;
8363
- line-height: 32px;
8364
- position: relative;
8365
-
8366
- .input-icon {
8367
- position: absolute;
8368
- top: 2px;
8369
- left: 8px;
8370
- z-index: 2;
8371
- color: @validating-input-icon-color;
8372
- }
8373
-
8374
- //
8375
- // validation icon
8376
- //
8377
-
8378
- .validation-icon {
8379
- position: absolute;
8380
- right: 9px;
8381
- bottom: 0;
8382
- z-index: 3;
8383
-
8384
- &.igz-icon-verify-error {
8385
- font-size: 13px;
8386
- color: @validation-icon-error-color;
8387
- }
8388
-
8389
- &.igz-icon-verify-info {
8390
- font-size: 16px;
8391
- color: @validation-icon-info-color;
8392
- }
8393
-
8394
- &.borders-focus, &.borders-hover {
8395
- visibility: hidden;
8396
- }
8397
- }
8398
-
8399
- .view-password{
8400
- position: absolute;
8401
- right: 9px;
8402
- bottom: 0;
8403
- z-index: 3;
8404
- }
8405
-
8406
- .validation-icon,
8407
- .validation-rule-icon {
8408
- width: 14px;
8409
- font-size: 11px;
8410
-
8411
- &.igz-icon-verify-ok {
8412
- color: @validation-icon-ok-color;
8413
- }
8414
-
8415
- &.ncl-icon-close {
8416
- color: @validation-icon-close-color;
8417
- }
8418
- }
8419
-
8420
- //
8421
- // inputs
8422
- //
8356
+ //
8357
+ // inputs
8358
+ //
8423
8359
 
8424
8360
  .input-counter, .textarea-counter {
8425
8361
  color: @input-textarea-counter-color;
@@ -8689,609 +8625,673 @@ form.ng-submitted .validating-input-field {
8689
8625
  }
8690
8626
  }
8691
8627
 
8692
- .ncl-api-gateway-row {
8693
- .common-table-cells-container {
8694
- .common-table-cell {
8695
- &.status {
8696
- text-transform: capitalize;
8628
+ .toast-status-panel {
8629
+ .toast-status-panel-color-set();
8697
8630
 
8698
- &.ready {
8699
- color: @tealish;
8700
- }
8631
+ margin-bottom: 20px;
8632
+ padding: 16px 36px 16px 12px;
8633
+ background-color: @toast-panel-bg-color;
8634
+ border: @toast-panel-border;
8635
+ position: relative;
8701
8636
 
8702
- // just in case - for now these statuses will not be shown because there will be a loader
8703
- &.provisioning, &.waitingForProvisioning {
8704
- color: @pale-orange;
8705
- }
8637
+ &.in-progress {
8638
+ background-color: @toast-panel-in-progress-bg-color;
8639
+ border: @toast-panel-in-progress-border;
8640
+ }
8706
8641
 
8707
- &.error {
8708
- color: @darkish-pink;
8642
+ &.failed {
8643
+ background-color: @toast-panel-failed-bg-color;
8644
+ border: @toast-panel-failed-border;
8645
+ }
8646
+
8647
+ .panel-status {
8648
+ color: @toast-panel-status-color;
8649
+ line-height: 24px;
8650
+ font-size: 14px;
8651
+ font-weight: 700;
8652
+ font-family: @font-family-sans-serif;
8653
+ align-items: center;
8654
+ display: flex;
8655
+ justify-content: center;
8656
+
8657
+ &.in-progress {
8658
+ color: @toast-panel-status-in-progress-color;
8659
+ }
8660
+
8661
+ &.failed {
8662
+ color: @toast-panel-status-failed-color;
8663
+ }
8664
+
8665
+ .panel-status-icon {
8666
+ font-size: 24px;
8667
+
8668
+ &.igz-icon-properties {
8669
+ -webkit-animation: rotation 4s infinite linear;
8670
+
8671
+ @-webkit-keyframes rotation {
8672
+ from {
8673
+ -webkit-transform: rotate(0deg);
8674
+ }
8675
+ to {
8676
+ -webkit-transform: rotate(359deg);
8677
+ }
8709
8678
  }
8710
8679
  }
8711
8680
  }
8712
- }
8713
8681
 
8714
- .actions-menu {
8715
- visibility: hidden;
8716
- }
8682
+ .msg-scrollable-container {
8683
+ max-height: 300px;
8717
8684
 
8718
- &.common-table-row {
8719
- &:hover {
8720
- .actions-menu {
8721
- visibility: visible;
8685
+ .panel-status-msg {
8686
+ margin: 0 8px;
8722
8687
  }
8723
8688
  }
8724
8689
  }
8725
8690
  }
8726
8691
 
8727
- .new-api-gateway-wizard {
8728
- .new-api-gateway-wizard-color-set();
8729
-
8730
- .content-wrapper {
8731
- .content {
8732
- .toast-status-panel {
8733
- max-width: 90vw;
8734
- margin: 16px auto 20px;
8735
- }
8692
+ .igz-info-page-actions-bar {
8693
+ .actions-buttons-block {
8694
+ margin-top: 3px;
8695
+ margin-right: 17px;
8696
+ }
8697
+ }
8698
+ .ncl-primary-button {
8699
+ margin-left: 9px;
8700
+ }
8736
8701
 
8737
- .api-gateway-form {
8738
- .content-body {
8739
- margin: 0 auto;
8740
- height: 400px;
8741
- display: flex;
8742
- flex-flow: row nowrap;
8743
- justify-content: center;
8744
- align-items: center;
8702
+ .ncl-secondary-button {
8703
+ vertical-align: top;
8704
+ position: relative;
8705
+ }
8745
8706
 
8746
- .api-gateway-block {
8747
- flex: none;
8748
- position: relative;
8749
- max-width: 320px;
8750
- padding: 16px 24px;
8751
- border: @api-gateway-block-border;
8752
- border-radius: 2px;
8753
- background-color: @api-gateway-block-bg-color;
8754
- box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
8755
- transition: box-shadow .3s ease-in-out 0s;
8707
+ .btn-close {
8708
+ color: .duskThree(0.64)[@color];
8709
+ right: 0;
8710
+ position: absolute;
8711
+ margin-top: 6px;
8712
+ margin-right: 24px;
8713
+ font-size: 14px;
8714
+ line-height: 14px;
8715
+ z-index: 11;
8756
8716
 
8757
- // important for not waiting to animation to finish when removing/promoting canary function
8758
- // (`ng-leave` and `ng-leave-active` are assigned by the `ng-if` directive when its scope
8759
- // expression evaluates to a falsy value) see https://docs.angularjs.org/api/ng/directive/ngIf
8760
- &.ng-leave.ng-leave-active {
8761
- transition: none 0s 0s;
8762
- }
8717
+ &:hover {
8718
+ color: .duskThree(1)[@color];
8719
+ }
8720
+ }
8763
8721
 
8764
- &:hover, &:focus-within {
8765
- box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
8766
- }
8722
+ .ncl-new-entity-button {
8723
+ display: inline-block;
8724
+ vertical-align: top;
8725
+ position: relative;
8726
+ margin-left: 15px;
8727
+ }
8767
8728
 
8768
- .block-title {
8769
- text-align: center;
8770
- font-weight: bold;
8771
- font-size: 16px;
8772
- color: @api-gateway-block-title-font-color;
8773
- margin-bottom: 16px;
8774
- }
8775
- }
8729
+ .ngdialog {
8730
+ z-index: 10000;
8731
+ }
8776
8732
 
8777
- .connector, .connector-split {
8778
- flex: 1 1 0;
8779
- border-top: 1px solid @connector-line-stroke-color;
8780
- }
8733
+ .ngdialog-theme-nuclio {
8734
+ @animation-duration: 0.2s;
8735
+ @animation-function: ease;
8736
+ display: flex;
8737
+ height: 100%;
8738
+ padding: 0 50px;
8739
+ min-width: 500px;
8740
+ align-items: center;
8741
+ justify-content: center;
8781
8742
 
8782
- .connector-split {
8783
- border-left: 1px solid @connector-line-stroke-color;
8784
- border-bottom: 1px solid @connector-line-stroke-color;
8785
- border-radius: 50px 0 0 50px;
8786
- height: 280px;
8787
- }
8743
+ .ngdialog-content {
8744
+ box-shadow: 0 10px 20px 0 .black(0.25)[@color];
8745
+ animation-duration: @animation-duration;
8746
+ animation-timing-function: @animation-function;
8747
+ font-family: @font-family-sans-serif;
8748
+ font-size: 16px;
8749
+ border-radius: 2px;
8750
+ max-width: 900px;
8751
+ background-color: @white;
8752
+ z-index: 5;
8753
+ position: relative;
8754
+ padding: 19px 24px 23px 24px;
8788
8755
 
8789
- .api-gateway-globe {
8790
- flex: none;
8791
- width: 128px;
8792
- height: 128px;
8793
- background: url('/assets/images/globe.png') center center / cover no-repeat transparent;
8794
- }
8756
+ /*
8757
+ * Confirms, alerts
8758
+ */
8759
+ .notification-text {
8760
+ margin: 30px 30px 0 0;
8761
+ max-height: 70vh;
8762
+ overflow: auto;
8795
8763
 
8796
- .api-gateway-authentication,
8797
- .api-gateway-basic-settings {
8798
- .fields-wrapper {
8799
- display: flex;
8800
- flex-flow: column nowrap;
8801
- justify-content: space-around;
8764
+ .error-list {
8765
+ list-style-type: none;
8802
8766
 
8803
- .field-wrapper {
8804
- display: flex;
8805
- flex-flow: row nowrap;
8806
- justify-content: space-between;
8807
- line-height: 36px;
8808
- margin-top: 16px;
8767
+ .error-list-item {
8768
+ margin-bottom: 5px;
8769
+ }
8770
+ }
8771
+ }
8809
8772
 
8810
- &:first-child {
8811
- margin-top: 0;
8812
- }
8773
+ .notification-text.description {
8774
+ margin: 10px 30px;
8775
+ }
8813
8776
 
8814
- .field-label {
8815
- width: 35%;
8816
- }
8777
+ .buttons {
8778
+ text-align: right;
8817
8779
 
8818
- .field-input {
8819
- width: 60%;
8820
- }
8821
- }
8822
- }
8823
- }
8780
+ button:not(:first-child) {
8781
+ margin-left: 8px;
8782
+ }
8783
+ }
8824
8784
 
8825
- .api-gateway-basic-settings {
8826
- .end-point-block {
8827
- margin-top: 8px;
8785
+ /*
8786
+ * Create/edit dialogs
8787
+ */
8788
+ .close-button {
8789
+ position: absolute;
8790
+ right: 24px;
8791
+ top: 26px;
8792
+ line-height: 10px;
8793
+ font-size: 14px;
8794
+ color: .duskThree(0.64)[@color];
8795
+ cursor: pointer;
8796
+ }
8828
8797
 
8829
- .end-point-title {
8830
- font-weight: bold;
8831
- }
8798
+ .title {
8799
+ color: @dusk-three;
8800
+ font-family: @font-family-sans-serif;
8801
+ font-size: 20px;
8802
+ font-weight: 500;
8803
+ margin: 0 0 21px 0;
8804
+ padding-right: 24px;
8805
+ }
8832
8806
 
8833
- .end-point-host {
8834
- display: flex;
8835
- flex-flow: row nowrap;
8836
- align-items: center;
8807
+ .main-content {
8808
+ margin: 0 0 4px;
8837
8809
 
8838
- .host {
8839
- flex: auto;
8840
- word-break: break-all;
8841
- max-height: 80px;
8842
- overflow-y: auto;
8843
- }
8810
+ .field-group {
8811
+ padding: 0 0 20px;
8844
8812
 
8845
- .copy-to-clipboard {
8846
- flex: none;
8847
- }
8848
- }
8849
- }
8850
- }
8813
+ .field-label {
8814
+ color: @dusk-three;
8815
+ font-size: 14px;
8816
+ font-weight: 500;
8817
+ padding: 0;
8818
+ min-width: 50px;
8819
+ margin: 0 0 2px;
8820
+ }
8851
8821
 
8852
- .api-gateway-circles {
8853
- display: flex;
8854
- flex-flow: column nowrap;
8855
- justify-content: space-between;
8856
- align-items: center;
8857
- position: relative;
8822
+ .field-input {
8823
+ position: relative;
8824
+ width: 400px;
8858
8825
 
8859
- &.only-primary {
8860
- justify-content: center;
8826
+ .validating-input-field {
8827
+ .input-field {
8828
+ padding-left: 17px;
8861
8829
  }
8862
8830
 
8863
- .api-gateway-block {
8864
- border-radius: 35px;
8865
-
8866
- &.function-circle {
8867
- width: 320px;
8831
+ .input-placeholder {
8832
+ left: 18px;
8833
+ font-style: italic;
8834
+ }
8835
+ }
8868
8836
 
8869
- &.canary-function {
8870
- .canary-title {
8871
- margin-top: 20px;
8872
- margin-bottom: 0;
8873
- }
8837
+ .error {
8838
+ color: @darkish-pink;
8839
+ font-size: 12px;
8840
+ white-space: nowrap;
8841
+ }
8842
+ }
8843
+ }
8844
+ }
8845
+ }
8874
8846
 
8875
- .canary-action-menu {
8876
- position: absolute;
8877
- top: 24px;
8878
- right: 0;
8879
- }
8880
- }
8847
+ &.delete-entity-dialog-wrapper {
8848
+ .ngdialog-content {
8849
+ padding: 30px 24px 23px 24px;
8881
8850
 
8882
- .function-name {
8883
- position: relative;
8851
+ .notification-text.title {
8852
+ text-align: center;
8853
+ padding-right: 0;
8854
+ color: @darkish-pink;
8855
+ font-size: 20px;
8856
+ font-weight: 500;
8857
+ letter-spacing: normal;
8858
+ margin: 11px 0 2px;
8859
+ }
8884
8860
 
8885
- &.percentage-exists {
8886
- padding-left: 36px;
8887
- }
8861
+ .notification-text.description {
8862
+ text-align: center;
8863
+ margin: 0 37px;
8864
+ font-size: 16px;
8865
+ font-weight: normal;
8866
+ letter-spacing: normal;
8867
+ color: @dusk-three;
8868
+ }
8888
8869
 
8889
- .percentage {
8890
- position: absolute;
8891
- left: -17px;
8892
- top: -4px;
8893
- width: 44px;
8894
- height: 44px;
8870
+ .nuclio-alert-icon {
8871
+ background: url('/assets/images/ic-alert-message.svg');
8872
+ height: 29px;
8873
+ width: 34px;
8874
+ margin: 0 auto;
8875
+ }
8895
8876
 
8896
- .percentage-background {
8897
- position: absolute;
8898
- width: 110%;
8899
- height: 110%;
8900
- background-color: @api-gateway-percentage-background-color;
8901
- border-radius: 50% 50% 0 50%;
8902
- transform: rotate(45deg);
8903
- }
8877
+ .buttons {
8878
+ margin-top: 30px;
8879
+ }
8880
+ }
8881
+ }
8904
8882
 
8905
- &.swap {
8906
- top: -8px;
8883
+ &.ngdialog.ngdialog-closing .ngdialog-content {
8884
+ animation-duration: @animation-duration;
8885
+ animation-timing-function: @animation-function;
8886
+ }
8907
8887
 
8908
- .percentage-background {
8909
- border-radius: 50% 0 50% 50%;
8910
- transform: rotate(-45deg);
8911
- }
8912
- }
8888
+ .ngdialog-overlay {
8889
+ background: .black(0.6)[@color];
8890
+ border: 2px solid @black;
8891
+ animation-duration: @animation-duration;
8892
+ animation-timing-function: @animation-function;
8893
+ }
8913
8894
 
8914
- .percentage-value {
8915
- position: absolute;
8916
- top: 5px;
8917
- left: 2px;
8918
- width: 100%;
8919
- height: 36px;
8920
- line-height: 36px;
8921
- text-align: center;
8922
- color: @api-gateway-percentage-value-font-color;
8895
+ &.ngdialog.ngdialog-closing .ngdialog-overlay {
8896
+ animation-duration: @animation-duration;
8897
+ animation-timing-function: @animation-function;
8898
+ }
8923
8899
 
8924
- &:after {
8925
- content: '%';
8926
- }
8927
- }
8928
- }
8929
- }
8900
+ &.ngdialog.ng-login-modal .ngdialog-content {
8901
+ padding: 0;
8902
+ }
8903
+ }
8930
8904
 
8931
- .function-name-title {
8932
- vertical-align: middle;
8933
- line-height: normal;
8934
- }
8935
- }
8936
- }
8905
+ body {
8906
+ .ncl-main-wrapper {
8907
+ padding: 64px 0 0 215px;
8908
+ width: 100%;
8909
+ height: 100%;
8910
+ }
8937
8911
 
8938
- .create-canary-button {
8939
- position: absolute;
8940
- bottom: -40px;
8941
- .igz-icon-add-round {
8942
- margin: 0 8px 0 0;
8943
- }
8944
- }
8912
+ .table-headers {
8913
+ display: flex;
8914
+ font-size: 14px;
8915
+ font-weight: bold;
8916
+ font-style: normal;
8917
+ font-stretch: normal;
8918
+ letter-spacing: normal;
8919
+ color: @dusk-three;
8920
+ margin-bottom: 2px;
8945
8921
 
8946
- .primary-canary-slider {
8947
- z-index: 1;
8948
- height: 175px;
8949
- width: 100%;
8950
- display: flex;
8951
- justify-content: flex-start;
8952
- margin-left: 20px;
8922
+ .key-header {
8923
+ width: 34%;
8924
+ margin-left: 16px;
8953
8925
 
8954
- .rzslider:not([disabled]).rz-vertical {
8955
- .rz-bar {
8956
- background-color: @dark-sky-blue;
8957
- border-radius: 0;
8958
- }
8926
+ &:not(.use-type) {
8927
+ width: 36%;
8928
+ }
8929
+ }
8959
8930
 
8960
- .rz-pointer {
8961
- width: 27px;
8962
- height: 27px;
8963
- background-color: @white;
8964
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
8965
- border-radius: 50%;
8966
- left: -11px !important;
8967
- outline: 0 none transparent;
8931
+ .type-header {
8932
+ width: 12%;
8933
+ }
8968
8934
 
8969
- &::after {
8970
- top: 11px;
8971
- left: 11px;
8972
- width: 5px;
8973
- height: 5px;
8974
- }
8975
- }
8976
- }
8977
- }
8978
- }
8979
- }
8980
- }
8935
+ .value-header {
8936
+ width: 52%;
8981
8937
 
8982
- .buttons-wrapper {
8983
- position: relative;
8984
- width: 100%;
8985
- margin-top: 32px;
8938
+ &:not(.use-type) {
8939
+ width: 61%;
8986
8940
  }
8987
8941
  }
8988
8942
  }
8989
- }
8990
8943
 
8991
- .igz-info-page-actions-bar {
8992
- .actions-buttons-block {
8993
- margin-top: 3px;
8994
- margin-right: 17px;
8944
+ .table-body:not(:last-child) {
8945
+ margin-bottom: 5px;
8995
8946
  }
8996
8947
  }
8997
- .ncl-primary-button {
8998
- margin-left: 9px;
8999
- }
9000
8948
 
9001
- .ncl-secondary-button {
9002
- vertical-align: top;
9003
- position: relative;
9004
- }
9005
8949
 
9006
- .btn-close {
9007
- color: .duskThree(0.64)[@color];
9008
- right: 0;
9009
- position: absolute;
9010
- margin-top: 6px;
9011
- margin-right: 24px;
8950
+ .logs-common {
8951
+ font-family: "Source Code Pro", "Courier New", monospace;
9012
8952
  font-size: 14px;
9013
- line-height: 14px;
9014
- z-index: 11;
9015
-
9016
- &:hover {
9017
- color: .duskThree(1)[@color];
9018
- }
8953
+ line-height: 1.1;
8954
+ text-align: left;
8955
+ white-space: pre-wrap;
9019
8956
  }
8957
+ .tooltip.custom-tooltip {
8958
+ transition-duration: 0s;
8959
+ z-index: 10001;
8960
+ opacity: 1;
9020
8961
 
9021
- .ncl-new-entity-button {
9022
- display: inline-block;
9023
- vertical-align: top;
9024
- position: relative;
9025
- margin-left: 15px;
9026
- }
8962
+ .tooltip-arrow {
8963
+ display: block;
8964
+ margin-left: 0;
8965
+ position: absolute;
8966
+ top: -1px;
8967
+ width: 13px;
8968
+ height: 13px;
8969
+ transform: rotate(226deg);
8970
+ border-right: 1px solid @pale-grey;
8971
+ border-bottom: 1px solid @pale-grey;
8972
+ border-width: 1px;
8973
+ background-color: @white;
8974
+ }
9027
8975
 
9028
- .ngdialog {
9029
- z-index: 10000;
9030
- }
8976
+ &.bottom {
8977
+ margin-top: 8px;
8978
+ }
9031
8979
 
9032
- .ngdialog-theme-nuclio {
9033
- @animation-duration: 0.2s;
9034
- @animation-function: ease;
9035
- display: flex;
9036
- height: 100%;
9037
- padding: 0 50px;
9038
- min-width: 500px;
9039
- align-items: center;
9040
- justify-content: center;
8980
+ &.top {
8981
+ margin-top: 4px;
8982
+ }
9041
8983
 
9042
- .ngdialog-content {
9043
- box-shadow: 0 10px 20px 0 .black(0.25)[@color];
9044
- animation-duration: @animation-duration;
9045
- animation-timing-function: @animation-function;
9046
- font-family: @font-family-sans-serif;
9047
- font-size: 16px;
9048
- border-radius: 2px;
9049
- max-width: 900px;
8984
+ .tooltip-inner {
9050
8985
  background-color: @white;
9051
- z-index: 5;
9052
- position: relative;
9053
- padding: 19px 24px 23px 24px;
9054
-
9055
- /*
9056
- * Confirms, alerts
9057
- */
9058
- .notification-text {
9059
- margin: 30px 30px 0 0;
9060
- max-height: 70vh;
9061
- overflow: auto;
9062
-
9063
- .error-list {
9064
- list-style-type: none;
8986
+ color: @dusk-three;
8987
+ border-radius: 2px;
8988
+ font-size: 14px;
8989
+ word-wrap: break-word;
8990
+ max-width: 280px;
8991
+ padding: 29px 30px;
8992
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
8993
+ border: solid 1px @pale-grey;
8994
+ }
8995
+ }
8996
+ .ncl-api-gateway-row {
8997
+ .common-table-cells-container {
8998
+ .common-table-cell {
8999
+ &.status {
9000
+ text-transform: capitalize;
9065
9001
 
9066
- .error-list-item {
9067
- margin-bottom: 5px;
9002
+ &.ready {
9003
+ color: @tealish;
9068
9004
  }
9069
- }
9070
- }
9071
9005
 
9072
- .notification-text.description {
9073
- margin: 10px 30px;
9074
- }
9075
-
9076
- .buttons {
9077
- text-align: right;
9006
+ // just in case - for now these statuses will not be shown because there will be a loader
9007
+ &.provisioning, &.waitingForProvisioning {
9008
+ color: @pale-orange;
9009
+ }
9078
9010
 
9079
- button:not(:first-child) {
9080
- margin-left: 8px;
9011
+ &.error {
9012
+ color: @darkish-pink;
9013
+ }
9081
9014
  }
9082
9015
  }
9016
+ }
9083
9017
 
9084
- /*
9085
- * Create/edit dialogs
9086
- */
9087
- .close-button {
9088
- position: absolute;
9089
- right: 24px;
9090
- top: 26px;
9091
- line-height: 10px;
9092
- font-size: 14px;
9093
- color: .duskThree(0.64)[@color];
9094
- cursor: pointer;
9095
- }
9018
+ .actions-menu {
9019
+ visibility: hidden;
9020
+ }
9096
9021
 
9097
- .title {
9098
- color: @dusk-three;
9099
- font-family: @font-family-sans-serif;
9100
- font-size: 20px;
9101
- font-weight: 500;
9102
- margin: 0 0 21px 0;
9103
- padding-right: 24px;
9022
+ &.common-table-row {
9023
+ &:hover {
9024
+ .actions-menu {
9025
+ visibility: visible;
9026
+ }
9104
9027
  }
9028
+ }
9029
+ }
9105
9030
 
9106
- .main-content {
9107
- margin: 0 0 4px;
9031
+ .new-api-gateway-wizard {
9032
+ .new-api-gateway-wizard-color-set();
9108
9033
 
9109
- .field-group {
9110
- padding: 0 0 20px;
9034
+ .content-wrapper {
9035
+ .content {
9036
+ .toast-status-panel {
9037
+ max-width: 90vw;
9038
+ margin: 16px auto 20px;
9039
+ }
9111
9040
 
9112
- .field-label {
9113
- color: @dusk-three;
9114
- font-size: 14px;
9115
- font-weight: 500;
9116
- padding: 0;
9117
- min-width: 50px;
9118
- margin: 0 0 2px;
9119
- }
9041
+ .api-gateway-form {
9042
+ .content-body {
9043
+ margin: 0 auto;
9044
+ height: 400px;
9045
+ display: flex;
9046
+ flex-flow: row nowrap;
9047
+ justify-content: center;
9048
+ align-items: center;
9120
9049
 
9121
- .field-input {
9122
- position: relative;
9123
- width: 400px;
9050
+ .api-gateway-block {
9051
+ flex: none;
9052
+ position: relative;
9053
+ max-width: 320px;
9054
+ padding: 16px 24px;
9055
+ border: @api-gateway-block-border;
9056
+ border-radius: 2px;
9057
+ background-color: @api-gateway-block-bg-color;
9058
+ box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
9059
+ transition: box-shadow .3s ease-in-out 0s;
9124
9060
 
9125
- .validating-input-field {
9126
- .input-field {
9127
- padding-left: 17px;
9061
+ // important for not waiting to animation to finish when removing/promoting canary function
9062
+ // (`ng-leave` and `ng-leave-active` are assigned by the `ng-if` directive when its scope
9063
+ // expression evaluates to a falsy value) see https://docs.angularjs.org/api/ng/directive/ngIf
9064
+ &.ng-leave.ng-leave-active {
9065
+ transition: none 0s 0s;
9128
9066
  }
9129
9067
 
9130
- .input-placeholder {
9131
- left: 18px;
9132
- font-style: italic;
9068
+ &:hover, &:focus-within {
9069
+ box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
9070
+ }
9071
+
9072
+ .block-title {
9073
+ text-align: center;
9074
+ font-weight: bold;
9075
+ font-size: 16px;
9076
+ color: @api-gateway-block-title-font-color;
9077
+ margin-bottom: 16px;
9133
9078
  }
9134
9079
  }
9135
9080
 
9136
- .error {
9137
- color: @darkish-pink;
9138
- font-size: 12px;
9139
- white-space: nowrap;
9081
+ .connector, .connector-split {
9082
+ flex: 1 1 0;
9083
+ border-top: 1px solid @connector-line-stroke-color;
9140
9084
  }
9141
- }
9142
- }
9143
- }
9144
- }
9145
9085
 
9146
- &.delete-entity-dialog-wrapper {
9147
- .ngdialog-content {
9148
- padding: 30px 24px 23px 24px;
9086
+ .connector-split {
9087
+ border-left: 1px solid @connector-line-stroke-color;
9088
+ border-bottom: 1px solid @connector-line-stroke-color;
9089
+ border-radius: 50px 0 0 50px;
9090
+ height: 280px;
9091
+ }
9149
9092
 
9150
- .notification-text.title {
9151
- text-align: center;
9152
- padding-right: 0;
9153
- color: @darkish-pink;
9154
- font-size: 20px;
9155
- font-weight: 500;
9156
- letter-spacing: normal;
9157
- margin: 11px 0 2px;
9158
- }
9093
+ .api-gateway-globe {
9094
+ flex: none;
9095
+ width: 128px;
9096
+ height: 128px;
9097
+ background: url('/assets/images/globe.png') center center / cover no-repeat transparent;
9098
+ }
9159
9099
 
9160
- .notification-text.description {
9161
- text-align: center;
9162
- margin: 0 37px;
9163
- font-size: 16px;
9164
- font-weight: normal;
9165
- letter-spacing: normal;
9166
- color: @dusk-three;
9167
- }
9100
+ .api-gateway-authentication,
9101
+ .api-gateway-basic-settings {
9102
+ .fields-wrapper {
9103
+ display: flex;
9104
+ flex-flow: column nowrap;
9105
+ justify-content: space-around;
9168
9106
 
9169
- .nuclio-alert-icon {
9170
- background: url('/assets/images/ic-alert-message.svg');
9171
- height: 29px;
9172
- width: 34px;
9173
- margin: 0 auto;
9174
- }
9107
+ .field-wrapper {
9108
+ display: flex;
9109
+ flex-flow: row nowrap;
9110
+ justify-content: space-between;
9111
+ line-height: 36px;
9112
+ margin-top: 16px;
9175
9113
 
9176
- .buttons {
9177
- margin-top: 30px;
9178
- }
9179
- }
9180
- }
9114
+ &:first-child {
9115
+ margin-top: 0;
9116
+ }
9181
9117
 
9182
- &.ngdialog.ngdialog-closing .ngdialog-content {
9183
- animation-duration: @animation-duration;
9184
- animation-timing-function: @animation-function;
9185
- }
9118
+ .field-label {
9119
+ width: 35%;
9120
+ }
9186
9121
 
9187
- .ngdialog-overlay {
9188
- background: .black(0.6)[@color];
9189
- border: 2px solid @black;
9190
- animation-duration: @animation-duration;
9191
- animation-timing-function: @animation-function;
9192
- }
9122
+ .field-input {
9123
+ width: 60%;
9124
+ }
9125
+ }
9126
+ }
9127
+ }
9193
9128
 
9194
- &.ngdialog.ngdialog-closing .ngdialog-overlay {
9195
- animation-duration: @animation-duration;
9196
- animation-timing-function: @animation-function;
9197
- }
9129
+ .api-gateway-basic-settings {
9130
+ .end-point-block {
9131
+ margin-top: 8px;
9198
9132
 
9199
- &.ngdialog.ng-login-modal .ngdialog-content {
9200
- padding: 0;
9201
- }
9202
- }
9133
+ .end-point-title {
9134
+ font-weight: bold;
9135
+ }
9203
9136
 
9204
- body {
9205
- .ncl-main-wrapper {
9206
- padding: 64px 0 0 215px;
9207
- width: 100%;
9208
- height: 100%;
9209
- }
9137
+ .end-point-host {
9138
+ display: flex;
9139
+ flex-flow: row nowrap;
9140
+ align-items: center;
9210
9141
 
9211
- .table-headers {
9212
- display: flex;
9213
- font-size: 14px;
9214
- font-weight: bold;
9215
- font-style: normal;
9216
- font-stretch: normal;
9217
- letter-spacing: normal;
9218
- color: @dusk-three;
9219
- margin-bottom: 2px;
9142
+ .host {
9143
+ flex: auto;
9144
+ word-break: break-all;
9145
+ max-height: 80px;
9146
+ overflow-y: auto;
9147
+ }
9220
9148
 
9221
- .key-header {
9222
- width: 34%;
9223
- margin-left: 16px;
9149
+ .copy-to-clipboard {
9150
+ flex: none;
9151
+ }
9152
+ }
9153
+ }
9154
+ }
9224
9155
 
9225
- &:not(.use-type) {
9226
- width: 36%;
9227
- }
9228
- }
9156
+ .api-gateway-circles {
9157
+ display: flex;
9158
+ flex-flow: column nowrap;
9159
+ justify-content: space-between;
9160
+ align-items: center;
9161
+ position: relative;
9229
9162
 
9230
- .type-header {
9231
- width: 12%;
9232
- }
9163
+ &.only-primary {
9164
+ justify-content: center;
9165
+ }
9233
9166
 
9234
- .value-header {
9235
- width: 52%;
9167
+ .api-gateway-block {
9168
+ border-radius: 35px;
9236
9169
 
9237
- &:not(.use-type) {
9238
- width: 61%;
9239
- }
9240
- }
9241
- }
9170
+ &.function-circle {
9171
+ width: 320px;
9242
9172
 
9243
- .table-body:not(:last-child) {
9244
- margin-bottom: 5px;
9245
- }
9246
- }
9173
+ &.canary-function {
9174
+ .canary-title {
9175
+ margin-top: 20px;
9176
+ margin-bottom: 0;
9177
+ }
9247
9178
 
9179
+ .canary-action-menu {
9180
+ position: absolute;
9181
+ top: 24px;
9182
+ right: 0;
9183
+ }
9184
+ }
9248
9185
 
9249
- .logs-common {
9250
- font-family: "Source Code Pro", "Courier New", monospace;
9251
- font-size: 14px;
9252
- line-height: 1.1;
9253
- text-align: left;
9254
- white-space: pre-wrap;
9255
- }
9256
- .tooltip.custom-tooltip {
9257
- transition-duration: 0s;
9258
- z-index: 10001;
9259
- opacity: 1;
9186
+ .function-name {
9187
+ position: relative;
9260
9188
 
9261
- .tooltip-arrow {
9262
- display: block;
9263
- margin-left: 0;
9264
- position: absolute;
9265
- top: -1px;
9266
- width: 13px;
9267
- height: 13px;
9268
- transform: rotate(226deg);
9269
- border-right: 1px solid @pale-grey;
9270
- border-bottom: 1px solid @pale-grey;
9271
- border-width: 1px;
9272
- background-color: @white;
9273
- }
9189
+ &.percentage-exists {
9190
+ padding-left: 36px;
9191
+ }
9274
9192
 
9275
- &.bottom {
9276
- margin-top: 8px;
9277
- }
9193
+ .percentage {
9194
+ position: absolute;
9195
+ left: -17px;
9196
+ top: -4px;
9197
+ width: 44px;
9198
+ height: 44px;
9278
9199
 
9279
- &.top {
9280
- margin-top: 4px;
9281
- }
9200
+ .percentage-background {
9201
+ position: absolute;
9202
+ width: 110%;
9203
+ height: 110%;
9204
+ background-color: @api-gateway-percentage-background-color;
9205
+ border-radius: 50% 50% 0 50%;
9206
+ transform: rotate(45deg);
9207
+ }
9282
9208
 
9283
- .tooltip-inner {
9284
- background-color: @white;
9285
- color: @dusk-three;
9286
- border-radius: 2px;
9287
- font-size: 14px;
9288
- word-wrap: break-word;
9289
- max-width: 280px;
9290
- padding: 29px 30px;
9291
- box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
9292
- border: solid 1px @pale-grey;
9209
+ &.swap {
9210
+ top: -8px;
9211
+
9212
+ .percentage-background {
9213
+ border-radius: 50% 0 50% 50%;
9214
+ transform: rotate(-45deg);
9215
+ }
9216
+ }
9217
+
9218
+ .percentage-value {
9219
+ position: absolute;
9220
+ top: 5px;
9221
+ left: 2px;
9222
+ width: 100%;
9223
+ height: 36px;
9224
+ line-height: 36px;
9225
+ text-align: center;
9226
+ color: @api-gateway-percentage-value-font-color;
9227
+
9228
+ &:after {
9229
+ content: '%';
9230
+ }
9231
+ }
9232
+ }
9233
+ }
9234
+
9235
+ .function-name-title {
9236
+ vertical-align: middle;
9237
+ line-height: normal;
9238
+ }
9239
+ }
9240
+ }
9241
+
9242
+ .create-canary-button {
9243
+ position: absolute;
9244
+ bottom: -40px;
9245
+ .igz-icon-add-round {
9246
+ margin: 0 8px 0 0;
9247
+ }
9248
+ }
9249
+
9250
+ .primary-canary-slider {
9251
+ z-index: 1;
9252
+ height: 175px;
9253
+ width: 100%;
9254
+ display: flex;
9255
+ justify-content: flex-start;
9256
+ margin-left: 20px;
9257
+
9258
+ .rzslider:not([disabled]).rz-vertical {
9259
+ .rz-bar {
9260
+ background-color: @dark-sky-blue;
9261
+ border-radius: 0;
9262
+ }
9263
+
9264
+ .rz-pointer {
9265
+ width: 27px;
9266
+ height: 27px;
9267
+ background-color: @white;
9268
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
9269
+ border-radius: 50%;
9270
+ left: -11px !important;
9271
+ outline: 0 none transparent;
9272
+
9273
+ &::after {
9274
+ top: 11px;
9275
+ left: 11px;
9276
+ width: 5px;
9277
+ height: 5px;
9278
+ }
9279
+ }
9280
+ }
9281
+ }
9282
+ }
9283
+ }
9284
+ }
9285
+
9286
+ .buttons-wrapper {
9287
+ position: relative;
9288
+ width: 100%;
9289
+ margin-top: 32px;
9290
+ }
9291
+ }
9293
9292
  }
9294
9293
  }
9294
+
9295
9295
  .deploy-deleted-function-dialog {
9296
9296
  .sub-title {
9297
9297
  font-size: 16px;
@@ -9304,40 +9304,6 @@ body {
9304
9304
  }
9305
9305
  }
9306
9306
 
9307
- .duplicate-function-dialog-wrapper {
9308
- .main-content {
9309
- .field-group {
9310
- display: flex;
9311
- flex-wrap: wrap;
9312
- width: 450px;
9313
-
9314
- .field-label.function-name-label,
9315
- .field-input.function-name-input,
9316
- .field-input.function-configuration-input {
9317
- width: 100%;
9318
- }
9319
-
9320
- .field-label.function-configuration-label {
9321
- width: 100%;
9322
- line-height: 30px;
9323
- }
9324
-
9325
- .field-input.function-name-input,
9326
- .field-input.function-configuration-input {
9327
- .error {
9328
- top: 38px;
9329
- }
9330
- }
9331
-
9332
- .field-label.function-configuration-path {
9333
- font-size: 14px;
9334
- margin-left: 3px;
9335
- line-height: 30px;
9336
- }
9337
- }
9338
- }
9339
- }
9340
-
9341
9307
  .ncl-function-collapsing-row {
9342
9308
  background-color: @white;
9343
9309
  margin-bottom: 8px;
@@ -9472,6 +9438,40 @@ body {
9472
9438
  }
9473
9439
  }
9474
9440
 
9441
+ .duplicate-function-dialog-wrapper {
9442
+ .main-content {
9443
+ .field-group {
9444
+ display: flex;
9445
+ flex-wrap: wrap;
9446
+ width: 450px;
9447
+
9448
+ .field-label.function-name-label,
9449
+ .field-input.function-name-input,
9450
+ .field-input.function-configuration-input {
9451
+ width: 100%;
9452
+ }
9453
+
9454
+ .field-label.function-configuration-label {
9455
+ width: 100%;
9456
+ line-height: 30px;
9457
+ }
9458
+
9459
+ .field-input.function-name-input,
9460
+ .field-input.function-configuration-input {
9461
+ .error {
9462
+ top: 38px;
9463
+ }
9464
+ }
9465
+
9466
+ .field-label.function-configuration-path {
9467
+ font-size: 14px;
9468
+ margin-left: 3px;
9469
+ line-height: 30px;
9470
+ }
9471
+ }
9472
+ }
9473
+ }
9474
+
9475
9475
  .override-function-dialog {
9476
9476
  .sub-title {
9477
9477
  font-size: 16px;
@@ -10279,35 +10279,6 @@ igz-info-page-content {
10279
10279
  }
10280
10280
  }
10281
10281
 
10282
- ncl-breadcrumbs {
10283
- .main-header-title {
10284
- &:not(.disable-behavior) {
10285
- &:hover .main-header-title-text {
10286
- color: @dark-sky-blue;
10287
- }
10288
- }
10289
-
10290
- &.disable-behavior {
10291
- color: @dusk-three;
10292
- }
10293
- }
10294
-
10295
- .igz-icon-right {
10296
- font-size: 11px;
10297
- font-weight: 100;
10298
- margin: 0 14px;
10299
- }
10300
-
10301
- .ncl-header-subtitle {
10302
- color: @greyish-purple;
10303
- }
10304
-
10305
- .ncl-bold-subtitle {
10306
- color: @dusk-three;
10307
- font-weight: bold;
10308
- }
10309
- }
10310
-
10311
10282
  .ncl-breadcrumbs-dropdown {
10312
10283
  display: inline-grid;
10313
10284
 
@@ -10448,6 +10419,35 @@ ncl-breadcrumbs {
10448
10419
  }
10449
10420
  }
10450
10421
 
10422
+ ncl-breadcrumbs {
10423
+ .main-header-title {
10424
+ &:not(.disable-behavior) {
10425
+ &:hover .main-header-title-text {
10426
+ color: @dark-sky-blue;
10427
+ }
10428
+ }
10429
+
10430
+ &.disable-behavior {
10431
+ color: @dusk-three;
10432
+ }
10433
+ }
10434
+
10435
+ .igz-icon-right {
10436
+ font-size: 11px;
10437
+ font-weight: 100;
10438
+ margin: 0 14px;
10439
+ }
10440
+
10441
+ .ncl-header-subtitle {
10442
+ color: @greyish-purple;
10443
+ }
10444
+
10445
+ .ncl-bold-subtitle {
10446
+ color: @dusk-three;
10447
+ font-weight: bold;
10448
+ }
10449
+ }
10450
+
10451
10451
  .ncl-collapsing-row {
10452
10452
  margin-bottom: 9px;
10453
10453
 
@@ -10571,6 +10571,44 @@ ncl-breadcrumbs {
10571
10571
  }
10572
10572
  }
10573
10573
 
10574
+ .ncl-deploy-log-wrapper {
10575
+ .log-panel {
10576
+ .logs-common();
10577
+ background-color: @dark-grey;
10578
+ color: @light-grey-three;
10579
+ padding: 5px;
10580
+ margin: 21px 0 0 4px;
10581
+ min-height: 280px;
10582
+ max-height: 280px;
10583
+ height: 280px;
10584
+
10585
+ .log-entry {
10586
+ .log-entry-time {
10587
+ color: @solid-grey;
10588
+ }
10589
+
10590
+ .log-entry-level-debug{
10591
+ color: @dusty-blue;
10592
+ }
10593
+
10594
+ .log-entry-level-info {
10595
+ color: @cloudy-blue;
10596
+ }
10597
+
10598
+ .log-entry-level-warn{
10599
+ color: @sunflower-yellow;
10600
+ }
10601
+
10602
+ .log-entry-level-error {
10603
+ color: @darkish-pink;
10604
+ }
10605
+
10606
+ .log-entry-message {
10607
+ font-weight: 600;
10608
+ }
10609
+ }
10610
+ }
10611
+ }
10574
10612
  .ncl-edit-item {
10575
10613
  width: 100%;
10576
10614
  padding: 6px 0;
@@ -10671,44 +10709,6 @@ ncl-breadcrumbs {
10671
10709
  }
10672
10710
  }
10673
10711
 
10674
- .ncl-deploy-log-wrapper {
10675
- .log-panel {
10676
- .logs-common();
10677
- background-color: @dark-grey;
10678
- color: @light-grey-three;
10679
- padding: 5px;
10680
- margin: 21px 0 0 4px;
10681
- min-height: 280px;
10682
- max-height: 280px;
10683
- height: 280px;
10684
-
10685
- .log-entry {
10686
- .log-entry-time {
10687
- color: @solid-grey;
10688
- }
10689
-
10690
- .log-entry-level-debug{
10691
- color: @dusty-blue;
10692
- }
10693
-
10694
- .log-entry-level-info {
10695
- color: @cloudy-blue;
10696
- }
10697
-
10698
- .log-entry-level-warn{
10699
- color: @sunflower-yellow;
10700
- }
10701
-
10702
- .log-entry-level-error {
10703
- color: @darkish-pink;
10704
- }
10705
-
10706
- .log-entry-message {
10707
- font-weight: 600;
10708
- }
10709
- }
10710
- }
10711
- }
10712
10712
  .view-yaml-dialog-wrapper {
10713
10713
  .ngdialog-content {
10714
10714
  .view-yaml-dialog-header {
@@ -10727,32 +10727,6 @@ ncl-breadcrumbs {
10727
10727
  }
10728
10728
  }
10729
10729
  }
10730
- .ncl-monaco {
10731
- .ncl-monaco-wrapper {
10732
- padding-top: 20px;
10733
- height: 100%;
10734
- border: 1px solid @pale-grey;
10735
- background-color: @white;
10736
-
10737
- &.no-top-padding {
10738
- padding-top: 0;
10739
- }
10740
-
10741
- .ncl-monaco-top-row {
10742
- display: block;
10743
- }
10744
-
10745
- .ncl-monaco-editor {
10746
- height: 100%;
10747
- }
10748
- }
10749
-
10750
- .ncl-monaco-dark {
10751
- background-color: @vs-dark;
10752
- }
10753
- }
10754
-
10755
-
10756
10730
  .ncl-key-value-input {
10757
10731
  .input-wrapper {
10758
10732
  width: 100%;
@@ -10967,6 +10941,32 @@ ncl-breadcrumbs {
10967
10941
  }
10968
10942
  }
10969
10943
 
10944
+ .ncl-monaco {
10945
+ .ncl-monaco-wrapper {
10946
+ padding-top: 20px;
10947
+ height: 100%;
10948
+ border: 1px solid @pale-grey;
10949
+ background-color: @white;
10950
+
10951
+ &.no-top-padding {
10952
+ padding-top: 0;
10953
+ }
10954
+
10955
+ .ncl-monaco-top-row {
10956
+ display: block;
10957
+ }
10958
+
10959
+ .ncl-monaco-editor {
10960
+ height: 100%;
10961
+ }
10962
+ }
10963
+
10964
+ .ncl-monaco-dark {
10965
+ background-color: @vs-dark;
10966
+ }
10967
+ }
10968
+
10969
+
10970
10970
  ncl-navigation-tabs {
10971
10971
  .ncl-navigation-tabs-color-set();
10972
10972
 
@@ -11778,131 +11778,6 @@ ncl-navigation-tabs {
11778
11778
  }
11779
11779
  }
11780
11780
 
11781
- .ncl-version-execution-log {
11782
- .control-panel-log-color-set();
11783
-
11784
- min-width: 1250px;
11785
- padding: 24px 25px 22px 41px;
11786
-
11787
- .ncl-version-execution-log-wrapper {
11788
- height: 95%;
11789
-
11790
- .info-page-filters {
11791
- z-index: 1000;
11792
-
11793
- .multiple-checkboxes-option {
11794
- margin: 10px 0;
11795
- }
11796
- }
11797
-
11798
- .igz-info-page-actions-bar {
11799
- z-index: 990;
11800
-
11801
- .actions-dropdown-block {
11802
- width: 200px;
11803
- }
11804
- }
11805
-
11806
- > .row {
11807
- position: relative;
11808
- padding: 16px 23px 16px;
11809
- background-color: @white;
11810
- border: solid 1px @pale-grey;
11811
- overflow: hidden;
11812
- margin-right: 16px;
11813
- margin-bottom: 16px;
11814
- transition: @igz-basic-transition;
11815
- height: 100%;
11816
-
11817
- .limitation-message {
11818
- line-height: 20px;
11819
- }
11820
-
11821
- .logs-container {
11822
- padding-bottom: 50px;
11823
- }
11824
-
11825
- &.filters-shown {
11826
- padding-right: 310px;
11827
- }
11828
-
11829
- .info-page-filters {
11830
- width: 300px;
11831
-
11832
- .info-page-filters-item {
11833
- &.search-input-item {
11834
- padding-top: 10px;
11835
- }
11836
- }
11837
-
11838
- .filter-label {
11839
- font-weight: bold;
11840
- color: @log-filters-filter-label-color;
11841
- }
11842
-
11843
- .filter-level-wrapper {
11844
- .filter-level-item {
11845
- margin: 5px 0;
11846
- }
11847
-
11848
- .level-icon {
11849
- display: inline-block;
11850
- margin-right: 8px;
11851
- width: 20px;
11852
- text-align: center;
11853
-
11854
- &::before {
11855
- font-size: 16px;
11856
- vertical-align: text-bottom;
11857
- }
11858
-
11859
- &.ncl-icon-debug {
11860
- color: @log-filters-level-debug-icon-color;
11861
- }
11862
-
11863
- &.igz-icon-info-round {
11864
- color: @log-filters-level-info-icon-color;
11865
- }
11866
-
11867
- &.igz-icon-warning {
11868
- color: @log-filters-level-warn-icon-color;
11869
-
11870
- &::before {
11871
- font-size: 15px;
11872
- }
11873
- }
11874
-
11875
- &.igz-icon-cancel-path {
11876
- color: @log-filters-level-error-icon-color;
11877
- }
11878
- }
11879
- }
11880
-
11881
- .checkboxes-dropdown-field {
11882
- height: 36px;
11883
- padding-left: 15px;
11884
- padding-right: 15px;
11885
- }
11886
-
11887
- .checkboxes-dropdown-title {
11888
- text-transform: initial;
11889
- font-size: 14px;
11890
- }
11891
- }
11892
- }
11893
-
11894
- .online-replicas__checkbox {
11895
- margin: 5px 0;
11896
- }
11897
-
11898
- .igz-multiple-checkboxes {
11899
- .checkboxes-dropdown-container {
11900
- position: unset;
11901
- }
11902
- }
11903
- }
11904
- }
11905
-
11906
11781
  .ncl-version-monitoring {
11907
11782
  > .igz-scrollable-container {
11908
11783
  padding: 24px 25px 22px 41px;
@@ -12036,6 +11911,131 @@ ncl-navigation-tabs {
12036
11911
  }
12037
11912
  }
12038
11913
 
11914
+ .ncl-version-execution-log {
11915
+ .control-panel-log-color-set();
11916
+
11917
+ min-width: 1250px;
11918
+ padding: 24px 25px 22px 41px;
11919
+
11920
+ .ncl-version-execution-log-wrapper {
11921
+ height: 95%;
11922
+
11923
+ .info-page-filters {
11924
+ z-index: 1000;
11925
+
11926
+ .multiple-checkboxes-option {
11927
+ margin: 10px 0;
11928
+ }
11929
+ }
11930
+
11931
+ .igz-info-page-actions-bar {
11932
+ z-index: 990;
11933
+
11934
+ .actions-dropdown-block {
11935
+ width: 200px;
11936
+ }
11937
+ }
11938
+
11939
+ > .row {
11940
+ position: relative;
11941
+ padding: 16px 23px 16px;
11942
+ background-color: @white;
11943
+ border: solid 1px @pale-grey;
11944
+ overflow: hidden;
11945
+ margin-right: 16px;
11946
+ margin-bottom: 16px;
11947
+ transition: @igz-basic-transition;
11948
+ height: 100%;
11949
+
11950
+ .limitation-message {
11951
+ line-height: 20px;
11952
+ }
11953
+
11954
+ .logs-container {
11955
+ padding-bottom: 50px;
11956
+ }
11957
+
11958
+ &.filters-shown {
11959
+ padding-right: 310px;
11960
+ }
11961
+
11962
+ .info-page-filters {
11963
+ width: 300px;
11964
+
11965
+ .info-page-filters-item {
11966
+ &.search-input-item {
11967
+ padding-top: 10px;
11968
+ }
11969
+ }
11970
+
11971
+ .filter-label {
11972
+ font-weight: bold;
11973
+ color: @log-filters-filter-label-color;
11974
+ }
11975
+
11976
+ .filter-level-wrapper {
11977
+ .filter-level-item {
11978
+ margin: 5px 0;
11979
+ }
11980
+
11981
+ .level-icon {
11982
+ display: inline-block;
11983
+ margin-right: 8px;
11984
+ width: 20px;
11985
+ text-align: center;
11986
+
11987
+ &::before {
11988
+ font-size: 16px;
11989
+ vertical-align: text-bottom;
11990
+ }
11991
+
11992
+ &.ncl-icon-debug {
11993
+ color: @log-filters-level-debug-icon-color;
11994
+ }
11995
+
11996
+ &.igz-icon-info-round {
11997
+ color: @log-filters-level-info-icon-color;
11998
+ }
11999
+
12000
+ &.igz-icon-warning {
12001
+ color: @log-filters-level-warn-icon-color;
12002
+
12003
+ &::before {
12004
+ font-size: 15px;
12005
+ }
12006
+ }
12007
+
12008
+ &.igz-icon-cancel-path {
12009
+ color: @log-filters-level-error-icon-color;
12010
+ }
12011
+ }
12012
+ }
12013
+
12014
+ .checkboxes-dropdown-field {
12015
+ height: 36px;
12016
+ padding-left: 15px;
12017
+ padding-right: 15px;
12018
+ }
12019
+
12020
+ .checkboxes-dropdown-title {
12021
+ text-transform: initial;
12022
+ font-size: 14px;
12023
+ }
12024
+ }
12025
+ }
12026
+
12027
+ .online-replicas__checkbox {
12028
+ margin: 5px 0;
12029
+ }
12030
+
12031
+ .igz-multiple-checkboxes {
12032
+ .checkboxes-dropdown-container {
12033
+ position: unset;
12034
+ }
12035
+ }
12036
+ }
12037
+ }
12038
+
12039
12039
  .ncl-version-trigger {
12040
12040
  padding: 11px 24px;
12041
12041