iguazio.dashboard-controls 0.37.12-patch3 → 0.37.12-patch4

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,9 +1,3 @@
1
- .common-table-cell {
2
- &.status {
3
- min-width: 95px;
4
- }
5
- }
6
-
7
1
  //
8
2
  // Common styles for buttons
9
3
  //
@@ -3583,6 +3577,12 @@ html input[disabled], html textarea[disabled] {
3583
3577
 
3584
3578
  // Media Query
3585
3579
  @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)";
3580
+ .common-table-cell {
3581
+ &.status {
3582
+ min-width: 95px;
3583
+ }
3584
+ }
3585
+
3586
3586
  ncl-functions {
3587
3587
  igz-info-page-actions-bar {
3588
3588
  .igz-info-page-actions-bar {
@@ -5350,6 +5350,27 @@ yx-axis
5350
5350
 
5351
5351
  /* ---------------------------------------- */
5352
5352
 
5353
+ .action-checkbox {
5354
+ .action-checkbox-color-set();
5355
+
5356
+ line-height: 16px;
5357
+ text-align: center;
5358
+
5359
+ .check-item {
5360
+ font-size: 16px;
5361
+ cursor: pointer;
5362
+ line-height: 1;
5363
+ vertical-align: middle;
5364
+
5365
+ &.igz-icon-checkbox-unchecked {
5366
+ color: @icon-checkbox-unchecked;
5367
+ }
5368
+
5369
+ &.igz-icon-checkbox-checked {
5370
+ color: @icon-checkbox-checked;
5371
+ }
5372
+ }
5373
+ }
5353
5374
  /**
5354
5375
  UI.Layout CSS
5355
5376
  *************************************/
@@ -5493,27 +5514,6 @@ yx-axis
5493
5514
  display: none;
5494
5515
  }
5495
5516
 
5496
- .action-checkbox {
5497
- .action-checkbox-color-set();
5498
-
5499
- line-height: 16px;
5500
- text-align: center;
5501
-
5502
- .check-item {
5503
- font-size: 16px;
5504
- cursor: pointer;
5505
- line-height: 1;
5506
- vertical-align: middle;
5507
-
5508
- &.igz-icon-checkbox-unchecked {
5509
- color: @icon-checkbox-unchecked;
5510
- }
5511
-
5512
- &.igz-icon-checkbox-checked {
5513
- color: @icon-checkbox-checked;
5514
- }
5515
- }
5516
- }
5517
5517
  .action-checkbox-all {
5518
5518
  .action-checkbox-all-color-set();
5519
5519
 
@@ -5531,164 +5531,6 @@ yx-axis
5531
5531
  }
5532
5532
  }
5533
5533
  }
5534
- .igz-action-menu {
5535
- .action-menu-color-set();
5536
- .action-icon-color-set();
5537
-
5538
- opacity: 1;
5539
- position: relative;
5540
-
5541
- .menu-button {
5542
- color: @menu-btn-color;
5543
- cursor: pointer;
5544
- font-size: 18px;
5545
- height: 19px;
5546
- text-align: center;
5547
- transition: @igz-basic-transition-color;
5548
- width: 30px;
5549
-
5550
- &.active,
5551
- &:hover {
5552
- color: @menu-btn-active-hover-color;
5553
- }
5554
- }
5555
-
5556
- .menu-dropdown {
5557
- visibility: hidden;
5558
- background-color: @menu-dropdown-bg-color;
5559
- border: @menu-dropdown-border;
5560
- border-radius: 2px;
5561
- box-shadow: @menu-dropdown-box-shadow;
5562
- color: @menu-dropdown-color;
5563
- font-family: @font-family-sans-serif;
5564
- font-size: 13px;
5565
- font-weight: 500;
5566
- line-height: normal;
5567
- margin-top: 9px;
5568
- min-width: 129px;
5569
- padding: 8px 0 0;
5570
- position: absolute;
5571
- z-index: 10;
5572
- transform: translateX(-100%);
5573
-
5574
- .actions-list {
5575
- cursor: default;
5576
- padding-bottom: 8px;
5577
-
5578
- .tooltip {
5579
- // !important used to overwrite third-party's inline style
5580
- display: none !important;
5581
- }
5582
- }
5583
-
5584
- .igz-action-item {
5585
- color: @action-item-color;
5586
- cursor: pointer;
5587
- font-size: 13px;
5588
- font-weight: 400;
5589
- line-height: 32px;
5590
- padding: 0 18px;
5591
- text-align: left;
5592
- white-space: nowrap;
5593
-
5594
- &:hover,
5595
- &.subtemplate-show {
5596
- background-color: @action-item-hover-bg-color;
5597
- }
5598
-
5599
- &.inactive {
5600
- color: @action-item-inactive-color;
5601
- cursor: default;
5602
-
5603
- &:hover {
5604
- background-color: @menu-dropdown-bg-color;
5605
- }
5606
- }
5607
-
5608
- .action-icon {
5609
- color: @action-icon-color;
5610
- display: inline-block;
5611
- padding-right: 14px;
5612
-
5613
- &.icon-placeholder {
5614
- &:before {
5615
- content: '';
5616
- display: inline-block;
5617
- }
5618
- }
5619
-
5620
- &:before {
5621
- font-size: 16px;
5622
- position: relative;
5623
- text-align: center;
5624
- width: 20px;
5625
- top: 2px;
5626
- }
5627
- }
5628
-
5629
- .action-label {
5630
- display: inline-block;
5631
- }
5632
- }
5633
-
5634
- .shortcuts-list {
5635
- padding-bottom: 8px;
5636
-
5637
- &:not(.first-block) {
5638
- border-top: @shortcuts-list-not-first-block-border;
5639
- padding-top: 8px;
5640
- }
5641
- }
5642
-
5643
- .shortcuts-header {
5644
- font-family: @font-family-sans-serif;
5645
- color: @shortcuts-header-color;
5646
- line-height: 24px;
5647
- font-size: 13px;
5648
- font-weight: 400;
5649
- padding: 0 15px 4px 22px;
5650
- text-align: left;
5651
- }
5652
-
5653
- .shortcuts-item {
5654
- color: @shortcuts-item-color;
5655
- cursor: pointer;
5656
- font-weight: 400;
5657
- white-space: nowrap;
5658
- line-height: 32px;
5659
- padding: 0 26px 0 32px;
5660
- text-align: left;
5661
- transition: @igz-basic-transition-color;
5662
-
5663
- &:hover {
5664
- background-color: @shortcuts-item-hover-bg-color;
5665
- }
5666
-
5667
- }
5668
-
5669
- }
5670
-
5671
- &.small-action-menu {
5672
- .menu-button {
5673
- color: @small-action-menu-btn-color;
5674
- width: auto;
5675
- font-size: 12px;
5676
- display: inline-block;
5677
- height: auto;
5678
- margin: 0;
5679
- vertical-align: sub;
5680
- }
5681
-
5682
- .menu-dropdown {
5683
- margin: 0;
5684
- }
5685
- }
5686
-
5687
- .upward-menu {
5688
- transform: translate(-100%, -100%);
5689
- }
5690
- }
5691
-
5692
5534
  .igz-action-panel {
5693
5535
  .action-panel-color-set();
5694
5536
  .action-icon-color-set();
@@ -5899,42 +5741,200 @@ yx-axis
5899
5741
  }
5900
5742
  }
5901
5743
 
5902
- .auto-complete-wrapper {
5903
- .auto-complete-color-set();
5744
+ .igz-action-menu {
5745
+ .action-menu-color-set();
5746
+ .action-icon-color-set();
5904
5747
 
5748
+ opacity: 1;
5905
5749
  position: relative;
5906
5750
 
5907
- .input-row {
5908
- display: flex;
5909
- width: 100%;
5910
-
5911
- .auto-complete-input {
5912
- flex-grow: 3;
5913
- }
5751
+ .menu-button {
5752
+ color: @menu-btn-color;
5753
+ cursor: pointer;
5754
+ font-size: 18px;
5755
+ height: 19px;
5756
+ text-align: center;
5757
+ transition: @igz-basic-transition-color;
5758
+ width: 30px;
5914
5759
 
5915
- .auto-complete-filters {
5916
- width: 20%;
5760
+ &.active,
5761
+ &:hover {
5762
+ color: @menu-btn-active-hover-color;
5917
5763
  }
5918
5764
  }
5919
5765
 
5920
- .suggestions-row {
5921
- .auto-complete-suggestions-container {
5922
- position: absolute;
5923
- background-color: @auto-complete-suggestions-container-bg-color;
5924
- border-radius: 2px;
5925
- box-shadow: @auto-complete-suggestions-container-box-shadow;
5926
- color: @auto-complete-suggestions-container-color;
5927
- max-height: 220px;
5928
- overflow: auto;
5929
- z-index: 1000;
5930
- width: 100%;
5931
- margin-top: 2px;
5932
-
5933
- .list {
5934
- padding: 0;
5935
- margin: 0;
5936
-
5937
- .list-item {
5766
+ .menu-dropdown {
5767
+ visibility: hidden;
5768
+ background-color: @menu-dropdown-bg-color;
5769
+ border: @menu-dropdown-border;
5770
+ border-radius: 2px;
5771
+ box-shadow: @menu-dropdown-box-shadow;
5772
+ color: @menu-dropdown-color;
5773
+ font-family: @font-family-sans-serif;
5774
+ font-size: 13px;
5775
+ font-weight: 500;
5776
+ line-height: normal;
5777
+ margin-top: 9px;
5778
+ min-width: 129px;
5779
+ padding: 8px 0 0;
5780
+ position: absolute;
5781
+ z-index: 10;
5782
+ transform: translateX(-100%);
5783
+
5784
+ .actions-list {
5785
+ cursor: default;
5786
+ padding-bottom: 8px;
5787
+
5788
+ .tooltip {
5789
+ // !important used to overwrite third-party's inline style
5790
+ display: none !important;
5791
+ }
5792
+ }
5793
+
5794
+ .igz-action-item {
5795
+ color: @action-item-color;
5796
+ cursor: pointer;
5797
+ font-size: 13px;
5798
+ font-weight: 400;
5799
+ line-height: 32px;
5800
+ padding: 0 18px;
5801
+ text-align: left;
5802
+ white-space: nowrap;
5803
+
5804
+ &:hover,
5805
+ &.subtemplate-show {
5806
+ background-color: @action-item-hover-bg-color;
5807
+ }
5808
+
5809
+ &.inactive {
5810
+ color: @action-item-inactive-color;
5811
+ cursor: default;
5812
+
5813
+ &:hover {
5814
+ background-color: @menu-dropdown-bg-color;
5815
+ }
5816
+ }
5817
+
5818
+ .action-icon {
5819
+ color: @action-icon-color;
5820
+ display: inline-block;
5821
+ padding-right: 14px;
5822
+
5823
+ &.icon-placeholder {
5824
+ &:before {
5825
+ content: '';
5826
+ display: inline-block;
5827
+ }
5828
+ }
5829
+
5830
+ &:before {
5831
+ font-size: 16px;
5832
+ position: relative;
5833
+ text-align: center;
5834
+ width: 20px;
5835
+ top: 2px;
5836
+ }
5837
+ }
5838
+
5839
+ .action-label {
5840
+ display: inline-block;
5841
+ }
5842
+ }
5843
+
5844
+ .shortcuts-list {
5845
+ padding-bottom: 8px;
5846
+
5847
+ &:not(.first-block) {
5848
+ border-top: @shortcuts-list-not-first-block-border;
5849
+ padding-top: 8px;
5850
+ }
5851
+ }
5852
+
5853
+ .shortcuts-header {
5854
+ font-family: @font-family-sans-serif;
5855
+ color: @shortcuts-header-color;
5856
+ line-height: 24px;
5857
+ font-size: 13px;
5858
+ font-weight: 400;
5859
+ padding: 0 15px 4px 22px;
5860
+ text-align: left;
5861
+ }
5862
+
5863
+ .shortcuts-item {
5864
+ color: @shortcuts-item-color;
5865
+ cursor: pointer;
5866
+ font-weight: 400;
5867
+ white-space: nowrap;
5868
+ line-height: 32px;
5869
+ padding: 0 26px 0 32px;
5870
+ text-align: left;
5871
+ transition: @igz-basic-transition-color;
5872
+
5873
+ &:hover {
5874
+ background-color: @shortcuts-item-hover-bg-color;
5875
+ }
5876
+
5877
+ }
5878
+
5879
+ }
5880
+
5881
+ &.small-action-menu {
5882
+ .menu-button {
5883
+ color: @small-action-menu-btn-color;
5884
+ width: auto;
5885
+ font-size: 12px;
5886
+ display: inline-block;
5887
+ height: auto;
5888
+ margin: 0;
5889
+ vertical-align: sub;
5890
+ }
5891
+
5892
+ .menu-dropdown {
5893
+ margin: 0;
5894
+ }
5895
+ }
5896
+
5897
+ .upward-menu {
5898
+ transform: translate(-100%, -100%);
5899
+ }
5900
+ }
5901
+
5902
+ .auto-complete-wrapper {
5903
+ .auto-complete-color-set();
5904
+
5905
+ position: relative;
5906
+
5907
+ .input-row {
5908
+ display: flex;
5909
+ width: 100%;
5910
+
5911
+ .auto-complete-input {
5912
+ flex-grow: 3;
5913
+ }
5914
+
5915
+ .auto-complete-filters {
5916
+ width: 20%;
5917
+ }
5918
+ }
5919
+
5920
+ .suggestions-row {
5921
+ .auto-complete-suggestions-container {
5922
+ position: absolute;
5923
+ background-color: @auto-complete-suggestions-container-bg-color;
5924
+ border-radius: 2px;
5925
+ box-shadow: @auto-complete-suggestions-container-box-shadow;
5926
+ color: @auto-complete-suggestions-container-color;
5927
+ max-height: 220px;
5928
+ overflow: auto;
5929
+ z-index: 1000;
5930
+ width: 100%;
5931
+ margin-top: 2px;
5932
+
5933
+ .list {
5934
+ padding: 0;
5935
+ margin: 0;
5936
+
5937
+ .list-item {
5938
5938
  color: @auto-complete-list-item-color;
5939
5939
  font-family: @font-family-sans-serif;
5940
5940
  font-size: 14px;
@@ -5998,82 +5998,6 @@ yx-axis
5998
5998
  }
5999
5999
  }
6000
6000
 
6001
- .element-loading-status {
6002
- .element-loading-status-color-set();
6003
-
6004
- position: relative;
6005
- width: 100%;
6006
- height: 100%;
6007
-
6008
- .loader-wrapper {
6009
- height: 100%;
6010
- width: 100%;
6011
- position: relative;
6012
-
6013
- .loader-text {
6014
- color: @loading-text-color;
6015
- }
6016
- }
6017
-
6018
- .loading-error {
6019
- text-align: center;
6020
- line-height: 15px;
6021
- width: 100%;
6022
- height: 100%;
6023
- position: relative;
6024
-
6025
- .sad-icon {
6026
- position: absolute;
6027
- left: 32px;
6028
- }
6029
-
6030
- .loading-error-title, .loading-error-message {
6031
- font-size: 13px;
6032
- font-weight: 700;
6033
- padding: 0 15px;
6034
- }
6035
-
6036
- .loading-error-title {
6037
- color: @loading-error-title-color;
6038
- padding-top: 15px;
6039
- }
6040
-
6041
- .refresh-page {
6042
- color: @loading-error-refresh-page-color;
6043
- text-decoration: underline;
6044
- cursor: pointer;
6045
- }
6046
- }
6047
-
6048
- // Small size status
6049
-
6050
- &.loading-status-small {
6051
- .loader-fading-circle {
6052
- width: 20px;
6053
- height: 20px;
6054
- }
6055
-
6056
- .loading-error {
6057
-
6058
- .loading-error-title, .loading-error-message {
6059
- text-overflow: ellipsis;
6060
- overflow: hidden;
6061
- padding: 0;
6062
- }
6063
-
6064
- .loading-error-title {
6065
- padding-top: 8px;
6066
- }
6067
-
6068
- .refresh-page {
6069
- overflow: hidden;
6070
- text-overflow: ellipsis;
6071
- padding: 0;
6072
- }
6073
- }
6074
- }
6075
- }
6076
-
6077
6001
  .default-dropdown {
6078
6002
  .default-dropdown-color-set();
6079
6003
  .severity-icons-color-set();
@@ -6514,14 +6438,90 @@ yx-axis
6514
6438
  }
6515
6439
  }
6516
6440
 
6517
- .more-info-wrapper {
6518
- .more-info-color-set();
6441
+ .element-loading-status {
6442
+ .element-loading-status-color-set();
6519
6443
 
6520
6444
  position: relative;
6521
- display: inline-flex;
6522
- align-items: center;
6523
- height: 36px;
6524
- margin-left: 8px;
6445
+ width: 100%;
6446
+ height: 100%;
6447
+
6448
+ .loader-wrapper {
6449
+ height: 100%;
6450
+ width: 100%;
6451
+ position: relative;
6452
+
6453
+ .loader-text {
6454
+ color: @loading-text-color;
6455
+ }
6456
+ }
6457
+
6458
+ .loading-error {
6459
+ text-align: center;
6460
+ line-height: 15px;
6461
+ width: 100%;
6462
+ height: 100%;
6463
+ position: relative;
6464
+
6465
+ .sad-icon {
6466
+ position: absolute;
6467
+ left: 32px;
6468
+ }
6469
+
6470
+ .loading-error-title, .loading-error-message {
6471
+ font-size: 13px;
6472
+ font-weight: 700;
6473
+ padding: 0 15px;
6474
+ }
6475
+
6476
+ .loading-error-title {
6477
+ color: @loading-error-title-color;
6478
+ padding-top: 15px;
6479
+ }
6480
+
6481
+ .refresh-page {
6482
+ color: @loading-error-refresh-page-color;
6483
+ text-decoration: underline;
6484
+ cursor: pointer;
6485
+ }
6486
+ }
6487
+
6488
+ // Small size status
6489
+
6490
+ &.loading-status-small {
6491
+ .loader-fading-circle {
6492
+ width: 20px;
6493
+ height: 20px;
6494
+ }
6495
+
6496
+ .loading-error {
6497
+
6498
+ .loading-error-title, .loading-error-message {
6499
+ text-overflow: ellipsis;
6500
+ overflow: hidden;
6501
+ padding: 0;
6502
+ }
6503
+
6504
+ .loading-error-title {
6505
+ padding-top: 8px;
6506
+ }
6507
+
6508
+ .refresh-page {
6509
+ overflow: hidden;
6510
+ text-overflow: ellipsis;
6511
+ padding: 0;
6512
+ }
6513
+ }
6514
+ }
6515
+ }
6516
+
6517
+ .more-info-wrapper {
6518
+ .more-info-color-set();
6519
+
6520
+ position: relative;
6521
+ display: inline-flex;
6522
+ align-items: center;
6523
+ height: 36px;
6524
+ margin-left: 8px;
6525
6525
 
6526
6526
  .question-mark {
6527
6527
  cursor: default;
@@ -6711,159 +6711,6 @@ yx-axis
6711
6711
  }
6712
6712
  }
6713
6713
 
6714
- .igz-number-input {
6715
- .number-input-color-set();
6716
-
6717
- min-width: 115px;
6718
- font-family: @font-family-sans-serif;
6719
- font-size: 14px;
6720
- font-weight: 400;
6721
- height: 36px;
6722
- position: relative;
6723
- background-color: @number-input-bg-color;
6724
- border: @number-input-border;
6725
- border-radius: 2px;
6726
- color: @number-input-color;
6727
- display: flex;
6728
- justify-content: flex-start;
6729
- align-items: center;
6730
- padding: 0 10px 0 11px;
6731
- z-index: 3;
6732
-
6733
- &:not(.disabled) {
6734
- &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
6735
- background-color: @number-input-not-disabled-focus-invalid-bg-color;
6736
- border: @number-input-not-disabled-focus-invalid-border;
6737
- box-shadow: none;
6738
- outline: none;
6739
- }
6740
-
6741
- &:focus-within, &.focused {
6742
- outline: 0;
6743
- border: @number-input-not-disabled-hover-focus-border;
6744
- }
6745
-
6746
- &.invalid:not(.pristine), &.invalid.submitted {
6747
- background-color: @number-input-not-disabled-invalid-bg-color;
6748
- border: @number-input-not-disabled-invalid-border;
6749
- box-shadow: none;
6750
- }
6751
-
6752
- &:focus.ng-valid, &:focus.ng-pristine {
6753
- border: @number-input-not-disabled-valid-border;
6754
- box-shadow: none;
6755
- outline: none;
6756
- }
6757
- }
6758
-
6759
- &.additional-left-padding {
6760
- padding-left: 22px;
6761
- }
6762
-
6763
- .input-field {
6764
- border: none;
6765
- outline: 0;
6766
- padding: 0;
6767
- text-align: left;
6768
- background-color: @number-input-field-bg-color;
6769
- }
6770
-
6771
- //
6772
- // placeholder
6773
- //
6774
-
6775
- ::-webkit-input-placeholder {
6776
- /* Chrome, Chromium, Edge, Safari, Opera*/
6777
- color: @number-input-placeholder-color;
6778
- }
6779
-
6780
- :-moz-placeholder {
6781
- /* Firefox 4-18 */
6782
- color: @number-input-placeholder-color;
6783
- }
6784
-
6785
- ::-moz-placeholder {
6786
- /* Firefox 19+ */
6787
- color: @number-input-placeholder-color;
6788
- }
6789
-
6790
- :-ms-input-placeholder {
6791
- /* - Internet Explorer 10–11
6792
- - Internet Explorer Mobile 10-11 */
6793
- color: @number-input-placeholder-color !important;
6794
- }
6795
-
6796
- ::placeholder {
6797
- /* modern browser versions */
6798
- color: @number-input-placeholder-color;
6799
- }
6800
-
6801
- .additional-left-block {
6802
- .prefix-unit {
6803
- color: @number-input-additional-left-block-prefix-unit-color;
6804
- font-size: 14px;
6805
- font-weight: 700;
6806
- padding-right: 7px;
6807
- }
6808
- }
6809
-
6810
- .suffix-unit-container {
6811
- display: flex;
6812
- align-items: center;
6813
-
6814
- .suffix-unit {
6815
- color: @number-input-suffix-unit-color;
6816
- font-size: 14px;
6817
- font-weight: 400;
6818
- padding-left: 3px;
6819
- }
6820
- }
6821
-
6822
- .arrow-block {
6823
- font-size: 11px;
6824
- display: flex;
6825
- flex-direction: column;
6826
- justify-content: center;
6827
- height: 100%;
6828
- margin-left: 6px;
6829
-
6830
- .igz-icon-dropup, .igz-icon-dropdown {
6831
- color: @number-input-arrow-block-icon-color;
6832
- cursor: pointer;
6833
- display: block;
6834
- line-height: 11px;
6835
- outline: 0;
6836
-
6837
- &:hover {
6838
- color: @number-input-arrow-block-icon-hover-color;
6839
- }
6840
- }
6841
- }
6842
-
6843
- &.disabled {
6844
- background-color: @number-input-disabled-bg-color;
6845
- opacity: 0.5;
6846
-
6847
- .suffix-unit {
6848
- opacity: 0.5;
6849
- }
6850
-
6851
- .igz-icon-dropup, .igz-icon-dropdown {
6852
- &, &:hover {
6853
- color: @number-input-disabled-icon-hover-color;
6854
- opacity: 0.5;
6855
- cursor: default;
6856
- }
6857
- }
6858
- }
6859
- }
6860
-
6861
- .step3, .step4 {
6862
- .additional-right-padding {
6863
- padding-right: 50px;
6864
- }
6865
- }
6866
-
6867
6714
  .igz-multiple-checkboxes {
6868
6715
  .multiple-checkboxes-color-set();
6869
6716
 
@@ -7047,14 +6894,167 @@ yx-axis
7047
6894
  }
7048
6895
  }
7049
6896
 
7050
- .igz-pagination {
7051
- .pagination-color-set();
6897
+ .igz-number-input {
6898
+ .number-input-color-set();
7052
6899
 
7053
- float: right;
7054
- padding: 24px 36px 5px 30px;
6900
+ min-width: 115px;
6901
+ font-family: @font-family-sans-serif;
6902
+ font-size: 14px;
6903
+ font-weight: 400;
6904
+ height: 36px;
6905
+ position: relative;
6906
+ background-color: @number-input-bg-color;
6907
+ border: @number-input-border;
6908
+ border-radius: 2px;
6909
+ color: @number-input-color;
6910
+ display: flex;
6911
+ justify-content: flex-start;
6912
+ align-items: center;
6913
+ padding: 0 10px 0 11px;
6914
+ z-index: 3;
7055
6915
 
7056
- > div {
7057
- vertical-align: top;
6916
+ &:not(.disabled) {
6917
+ &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
6918
+ background-color: @number-input-not-disabled-focus-invalid-bg-color;
6919
+ border: @number-input-not-disabled-focus-invalid-border;
6920
+ box-shadow: none;
6921
+ outline: none;
6922
+ }
6923
+
6924
+ &:focus-within, &.focused {
6925
+ outline: 0;
6926
+ border: @number-input-not-disabled-hover-focus-border;
6927
+ }
6928
+
6929
+ &.invalid:not(.pristine), &.invalid.submitted {
6930
+ background-color: @number-input-not-disabled-invalid-bg-color;
6931
+ border: @number-input-not-disabled-invalid-border;
6932
+ box-shadow: none;
6933
+ }
6934
+
6935
+ &:focus.ng-valid, &:focus.ng-pristine {
6936
+ border: @number-input-not-disabled-valid-border;
6937
+ box-shadow: none;
6938
+ outline: none;
6939
+ }
6940
+ }
6941
+
6942
+ &.additional-left-padding {
6943
+ padding-left: 22px;
6944
+ }
6945
+
6946
+ .input-field {
6947
+ border: none;
6948
+ outline: 0;
6949
+ padding: 0;
6950
+ text-align: left;
6951
+ background-color: @number-input-field-bg-color;
6952
+ }
6953
+
6954
+ //
6955
+ // placeholder
6956
+ //
6957
+
6958
+ ::-webkit-input-placeholder {
6959
+ /* Chrome, Chromium, Edge, Safari, Opera*/
6960
+ color: @number-input-placeholder-color;
6961
+ }
6962
+
6963
+ :-moz-placeholder {
6964
+ /* Firefox 4-18 */
6965
+ color: @number-input-placeholder-color;
6966
+ }
6967
+
6968
+ ::-moz-placeholder {
6969
+ /* Firefox 19+ */
6970
+ color: @number-input-placeholder-color;
6971
+ }
6972
+
6973
+ :-ms-input-placeholder {
6974
+ /* - Internet Explorer 10–11
6975
+ - Internet Explorer Mobile 10-11 */
6976
+ color: @number-input-placeholder-color !important;
6977
+ }
6978
+
6979
+ ::placeholder {
6980
+ /* modern browser versions */
6981
+ color: @number-input-placeholder-color;
6982
+ }
6983
+
6984
+ .additional-left-block {
6985
+ .prefix-unit {
6986
+ color: @number-input-additional-left-block-prefix-unit-color;
6987
+ font-size: 14px;
6988
+ font-weight: 700;
6989
+ padding-right: 7px;
6990
+ }
6991
+ }
6992
+
6993
+ .suffix-unit-container {
6994
+ display: flex;
6995
+ align-items: center;
6996
+
6997
+ .suffix-unit {
6998
+ color: @number-input-suffix-unit-color;
6999
+ font-size: 14px;
7000
+ font-weight: 400;
7001
+ padding-left: 3px;
7002
+ }
7003
+ }
7004
+
7005
+ .arrow-block {
7006
+ font-size: 11px;
7007
+ display: flex;
7008
+ flex-direction: column;
7009
+ justify-content: center;
7010
+ height: 100%;
7011
+ margin-left: 6px;
7012
+
7013
+ .igz-icon-dropup, .igz-icon-dropdown {
7014
+ color: @number-input-arrow-block-icon-color;
7015
+ cursor: pointer;
7016
+ display: block;
7017
+ line-height: 11px;
7018
+ outline: 0;
7019
+
7020
+ &:hover {
7021
+ color: @number-input-arrow-block-icon-hover-color;
7022
+ }
7023
+ }
7024
+ }
7025
+
7026
+ &.disabled {
7027
+ background-color: @number-input-disabled-bg-color;
7028
+ opacity: 0.5;
7029
+
7030
+ .suffix-unit {
7031
+ opacity: 0.5;
7032
+ }
7033
+
7034
+ .igz-icon-dropup, .igz-icon-dropdown {
7035
+ &, &:hover {
7036
+ color: @number-input-disabled-icon-hover-color;
7037
+ opacity: 0.5;
7038
+ cursor: default;
7039
+ }
7040
+ }
7041
+ }
7042
+ }
7043
+
7044
+ .step3, .step4 {
7045
+ .additional-right-padding {
7046
+ padding-right: 50px;
7047
+ }
7048
+ }
7049
+
7050
+ .igz-pagination {
7051
+ .pagination-color-set();
7052
+
7053
+ float: right;
7054
+ padding: 24px 36px 5px 30px;
7055
+
7056
+ > div {
7057
+ vertical-align: top;
7058
7058
  }
7059
7059
 
7060
7060
  .rows-title, .per-page, .jump-to-page, .to-page-prev, .to-page-next {
@@ -7195,193 +7195,6 @@ yx-axis
7195
7195
  }
7196
7196
  }
7197
7197
  }
7198
- .search-input {
7199
- .search-input-color-set();
7200
-
7201
- position: relative;
7202
- color: @search-input-color;
7203
-
7204
- .container-search-input {
7205
- background-color: @search-input-bg-color;
7206
- border: 0;
7207
- font-family: @font-family-sans-serif;
7208
- font-size: 15px;
7209
- font-weight: 400;
7210
- height: 52px;
7211
- line-height: 52px;
7212
- margin: 0;
7213
- outline: 0;
7214
- padding-right: 20px;
7215
- width: 100%;
7216
-
7217
- &::-webkit-input-placeholder {
7218
- color: @search-input-placeholder-color;
7219
- }
7220
-
7221
- &:-moz-placeholder { /* Firefox 18- */
7222
- color: @search-input-placeholder-color;
7223
- }
7224
-
7225
- &::-moz-placeholder { /* Firefox 19+ */
7226
- color: @search-input-placeholder-color;
7227
- }
7228
-
7229
- &:-ms-input-placeholder {
7230
- color: @search-input-placeholder-color;
7231
- }
7232
-
7233
- &:focus {
7234
- &, & + .igz-icon-search:before {
7235
- color: @search-input-focus-icon-search-before-color;
7236
- }
7237
-
7238
- &::-webkit-input-placeholder {
7239
- color: @search-input-focus-placeholder-color;
7240
- }
7241
-
7242
- &:-moz-placeholder { /* Firefox 18- */
7243
- color: @search-input-focus-placeholder-color;
7244
- }
7245
-
7246
- &::-moz-placeholder { /* Firefox 19+ */
7247
- color: @search-input-focus-placeholder-color;
7248
- }
7249
-
7250
- &:-ms-input-placeholder {
7251
- color: @search-input-focus-placeholder-color;
7252
- }
7253
-
7254
- &::placeholder {
7255
- /* modern browser versions */
7256
- color: @search-input-focus-placeholder-color !important;
7257
- }
7258
- }
7259
- }
7260
-
7261
- .igz-icon-search {
7262
- font-size: 16px;
7263
- height: 16px;
7264
- position: absolute;
7265
- right: 0;
7266
- top: 17px;
7267
- width: 16px;
7268
- z-index: 1;
7269
- }
7270
-
7271
- .clear-button {
7272
- font-size: 10px;
7273
- position: absolute;
7274
- right: 4px;
7275
- top: 17px;
7276
- cursor: pointer;
7277
- color: @clear-button-color;
7278
- padding: 4px 5px 2px;
7279
- opacity: 0.64;
7280
- background-color: @clear-button-bg-color;
7281
- border-radius: 50%;
7282
- line-height: initial;
7283
-
7284
- &:hover {
7285
- opacity: 1;
7286
- }
7287
- }
7288
-
7289
- input::-ms-clear {
7290
- display: none;
7291
- }
7292
- }
7293
-
7294
- .search-input-actions-bar {
7295
- .search-input-color-set();
7296
-
7297
- position: relative;
7298
- .container-search-input {
7299
- border: 0;
7300
- margin: 0;
7301
- font-family: @font-family-sans-serif;
7302
- font-size: 14px;
7303
- height: 52px;
7304
- line-height: 52px;
7305
- padding: 0 25px 0 45px;
7306
- outline: 0;
7307
- width: 100%;
7308
- }
7309
-
7310
- .igz-icon-search {
7311
- color: @search-input-actions-bar-icon-search-color;
7312
- font-size: 16px;
7313
- height: 16px;
7314
- position: absolute;
7315
- left: 18px;
7316
- top: 17px;
7317
- width: 16px;
7318
- z-index: 1;
7319
- }
7320
-
7321
- input::-ms-clear {
7322
- display: none;
7323
- }
7324
- }
7325
-
7326
- .search-input-not-found {
7327
- .search-input-color-set();
7328
-
7329
- color: @search-input-not-found-color;
7330
- font-family: @font-family-sans-serif;
7331
- font-size: 14px;
7332
- display: flex;
7333
- flex-direction: column;
7334
- justify-content: center;
7335
- align-items: center;
7336
- margin-top: 9px;
7337
-
7338
- .search-message {
7339
- min-height: 49px;
7340
- line-height: 49px;
7341
- width: 100%;
7342
- text-align: center;
7343
- letter-spacing: 0.1px;
7344
- border: @search-input-not-found-message-border;
7345
- }
7346
-
7347
- .create-item-button {
7348
- display: flex;
7349
- align-items: center;
7350
- padding: 0 19px 0 7px;
7351
- margin-top: 8px;
7352
- border-radius: 12px;
7353
- height: 24px;
7354
- color: @create-item-btn-color;
7355
- font-size: 12px;
7356
- font-weight: bold;
7357
- cursor: pointer;
7358
- background-color: @create-item-btn-bg-color;
7359
- border: @create-item-btn-border;
7360
- text-transform: uppercase;
7361
-
7362
- &:hover {
7363
- background-color: @create-item-btn-hover-bg-color;
7364
- box-shadow: @create-item-btn-hover-box-shadow;
7365
- border: @create-item-btn-hover-border;
7366
- }
7367
-
7368
- &:focus {
7369
- outline: none;
7370
- }
7371
-
7372
- &:active {
7373
- background-color: @create-item-btn-active-bg-color;
7374
- box-shadow: @create-item-btn-active-box-shadow;
7375
- border: none;
7376
- }
7377
-
7378
- .igz-icon-add {
7379
- font-size: 10px;
7380
- line-height: 15px;
7381
- padding-right: 8px;
7382
- }
7383
- }
7384
- }
7385
7198
  .igz-size {
7386
7199
  .size-color-set();
7387
7200
 
@@ -7536,71 +7349,258 @@ yx-axis
7536
7349
  background-color: @rz-selection-bg-color;
7537
7350
  }
7538
7351
 
7539
- .rz-pointer {
7540
- background-color: @rz-pointer-bg-color;
7541
- }
7542
- }
7352
+ .rz-pointer {
7353
+ background-color: @rz-pointer-bg-color;
7354
+ }
7355
+ }
7356
+ }
7357
+ }
7358
+
7359
+ // Current value
7360
+ .igz-slider-input-current-value {
7361
+ float: left;
7362
+ min-height: 30px;
7363
+ line-height: 30px;
7364
+
7365
+ &.with-measure-units {
7366
+ width: 18%;
7367
+ padding-right: 0;
7368
+
7369
+ .igz-slider-input-current-value-text {
7370
+ margin-right: 4px;
7371
+ }
7372
+ }
7373
+
7374
+ &.with-value-unit {
7375
+ padding-right: 21px;
7376
+ }
7377
+
7378
+ .igz-slider-input-current-value-text {
7379
+ color: @slider-input-current-value-text-color;
7380
+ font-size: 13px;
7381
+ font-weight: 400;
7382
+ background-color: @slider-input-current-value-text-bg-color;
7383
+ text-align: right;
7384
+ }
7385
+ }
7386
+
7387
+ .igz-slider-input-unit-label {
7388
+ position: absolute;
7389
+ right: 0;
7390
+ min-height: 30px;
7391
+ line-height: 30px;
7392
+ }
7393
+
7394
+ // Units dropdown
7395
+ .igz-slider-input-units-dropdown {
7396
+ float: left;
7397
+
7398
+ .default-dropdown {
7399
+ height: 30px;
7400
+
7401
+ .default-dropdown-field {
7402
+ border: none;
7403
+ background-color: @default-dropdown-field-bg-color;
7404
+
7405
+ .dropdown-selected-item {
7406
+ padding-left: 0;
7407
+ }
7408
+
7409
+ .dropdown-arrow {
7410
+ margin-right: 0;
7411
+ }
7412
+ }
7413
+ }
7414
+ }
7415
+ }
7416
+
7417
+ .search-input {
7418
+ .search-input-color-set();
7419
+
7420
+ position: relative;
7421
+ color: @search-input-color;
7422
+
7423
+ .container-search-input {
7424
+ background-color: @search-input-bg-color;
7425
+ border: 0;
7426
+ font-family: @font-family-sans-serif;
7427
+ font-size: 15px;
7428
+ font-weight: 400;
7429
+ height: 52px;
7430
+ line-height: 52px;
7431
+ margin: 0;
7432
+ outline: 0;
7433
+ padding-right: 20px;
7434
+ width: 100%;
7435
+
7436
+ &::-webkit-input-placeholder {
7437
+ color: @search-input-placeholder-color;
7438
+ }
7439
+
7440
+ &:-moz-placeholder { /* Firefox 18- */
7441
+ color: @search-input-placeholder-color;
7442
+ }
7443
+
7444
+ &::-moz-placeholder { /* Firefox 19+ */
7445
+ color: @search-input-placeholder-color;
7446
+ }
7447
+
7448
+ &:-ms-input-placeholder {
7449
+ color: @search-input-placeholder-color;
7450
+ }
7451
+
7452
+ &:focus {
7453
+ &, & + .igz-icon-search:before {
7454
+ color: @search-input-focus-icon-search-before-color;
7455
+ }
7456
+
7457
+ &::-webkit-input-placeholder {
7458
+ color: @search-input-focus-placeholder-color;
7459
+ }
7460
+
7461
+ &:-moz-placeholder { /* Firefox 18- */
7462
+ color: @search-input-focus-placeholder-color;
7463
+ }
7464
+
7465
+ &::-moz-placeholder { /* Firefox 19+ */
7466
+ color: @search-input-focus-placeholder-color;
7467
+ }
7468
+
7469
+ &:-ms-input-placeholder {
7470
+ color: @search-input-focus-placeholder-color;
7471
+ }
7472
+
7473
+ &::placeholder {
7474
+ /* modern browser versions */
7475
+ color: @search-input-focus-placeholder-color !important;
7476
+ }
7477
+ }
7478
+ }
7479
+
7480
+ .igz-icon-search {
7481
+ font-size: 16px;
7482
+ height: 16px;
7483
+ position: absolute;
7484
+ right: 0;
7485
+ top: 17px;
7486
+ width: 16px;
7487
+ z-index: 1;
7488
+ }
7489
+
7490
+ .clear-button {
7491
+ font-size: 10px;
7492
+ position: absolute;
7493
+ right: 4px;
7494
+ top: 17px;
7495
+ cursor: pointer;
7496
+ color: @clear-button-color;
7497
+ padding: 4px 5px 2px;
7498
+ opacity: 0.64;
7499
+ background-color: @clear-button-bg-color;
7500
+ border-radius: 50%;
7501
+ line-height: initial;
7502
+
7503
+ &:hover {
7504
+ opacity: 1;
7543
7505
  }
7544
7506
  }
7545
7507
 
7546
- // Current value
7547
- .igz-slider-input-current-value {
7548
- float: left;
7549
- min-height: 30px;
7550
- line-height: 30px;
7508
+ input::-ms-clear {
7509
+ display: none;
7510
+ }
7511
+ }
7551
7512
 
7552
- &.with-measure-units {
7553
- width: 18%;
7554
- padding-right: 0;
7513
+ .search-input-actions-bar {
7514
+ .search-input-color-set();
7555
7515
 
7556
- .igz-slider-input-current-value-text {
7557
- margin-right: 4px;
7558
- }
7559
- }
7516
+ position: relative;
7517
+ .container-search-input {
7518
+ border: 0;
7519
+ margin: 0;
7520
+ font-family: @font-family-sans-serif;
7521
+ font-size: 14px;
7522
+ height: 52px;
7523
+ line-height: 52px;
7524
+ padding: 0 25px 0 45px;
7525
+ outline: 0;
7526
+ width: 100%;
7527
+ }
7560
7528
 
7561
- &.with-value-unit {
7562
- padding-right: 21px;
7563
- }
7529
+ .igz-icon-search {
7530
+ color: @search-input-actions-bar-icon-search-color;
7531
+ font-size: 16px;
7532
+ height: 16px;
7533
+ position: absolute;
7534
+ left: 18px;
7535
+ top: 17px;
7536
+ width: 16px;
7537
+ z-index: 1;
7538
+ }
7564
7539
 
7565
- .igz-slider-input-current-value-text {
7566
- color: @slider-input-current-value-text-color;
7567
- font-size: 13px;
7568
- font-weight: 400;
7569
- background-color: @slider-input-current-value-text-bg-color;
7570
- text-align: right;
7571
- }
7540
+ input::-ms-clear {
7541
+ display: none;
7572
7542
  }
7543
+ }
7573
7544
 
7574
- .igz-slider-input-unit-label {
7575
- position: absolute;
7576
- right: 0;
7577
- min-height: 30px;
7578
- line-height: 30px;
7545
+ .search-input-not-found {
7546
+ .search-input-color-set();
7547
+
7548
+ color: @search-input-not-found-color;
7549
+ font-family: @font-family-sans-serif;
7550
+ font-size: 14px;
7551
+ display: flex;
7552
+ flex-direction: column;
7553
+ justify-content: center;
7554
+ align-items: center;
7555
+ margin-top: 9px;
7556
+
7557
+ .search-message {
7558
+ min-height: 49px;
7559
+ line-height: 49px;
7560
+ width: 100%;
7561
+ text-align: center;
7562
+ letter-spacing: 0.1px;
7563
+ border: @search-input-not-found-message-border;
7579
7564
  }
7580
7565
 
7581
- // Units dropdown
7582
- .igz-slider-input-units-dropdown {
7583
- float: left;
7566
+ .create-item-button {
7567
+ display: flex;
7568
+ align-items: center;
7569
+ padding: 0 19px 0 7px;
7570
+ margin-top: 8px;
7571
+ border-radius: 12px;
7572
+ height: 24px;
7573
+ color: @create-item-btn-color;
7574
+ font-size: 12px;
7575
+ font-weight: bold;
7576
+ cursor: pointer;
7577
+ background-color: @create-item-btn-bg-color;
7578
+ border: @create-item-btn-border;
7579
+ text-transform: uppercase;
7584
7580
 
7585
- .default-dropdown {
7586
- height: 30px;
7581
+ &:hover {
7582
+ background-color: @create-item-btn-hover-bg-color;
7583
+ box-shadow: @create-item-btn-hover-box-shadow;
7584
+ border: @create-item-btn-hover-border;
7585
+ }
7587
7586
 
7588
- .default-dropdown-field {
7589
- border: none;
7590
- background-color: @default-dropdown-field-bg-color;
7587
+ &:focus {
7588
+ outline: none;
7589
+ }
7591
7590
 
7592
- .dropdown-selected-item {
7593
- padding-left: 0;
7594
- }
7591
+ &:active {
7592
+ background-color: @create-item-btn-active-bg-color;
7593
+ box-shadow: @create-item-btn-active-box-shadow;
7594
+ border: none;
7595
+ }
7595
7596
 
7596
- .dropdown-arrow {
7597
- margin-right: 0;
7598
- }
7599
- }
7597
+ .igz-icon-add {
7598
+ font-size: 10px;
7599
+ line-height: 15px;
7600
+ padding-right: 8px;
7600
7601
  }
7601
7602
  }
7602
7603
  }
7603
-
7604
7604
  .splash-screen {
7605
7605
  .splash-screen-color-set();
7606
7606
 
@@ -7785,6 +7785,66 @@ yx-axis
7785
7785
  }
7786
7786
  }
7787
7787
 
7788
+ .toast-status-panel {
7789
+ .toast-status-panel-color-set();
7790
+
7791
+ margin-bottom: 20px;
7792
+ padding: 16px 36px 16px 12px;
7793
+ background-color: @toast-panel-bg-color;
7794
+ border: @toast-panel-border;
7795
+ position: relative;
7796
+
7797
+ &.in-progress {
7798
+ background-color: @toast-panel-in-progress-bg-color;
7799
+ border: @toast-panel-in-progress-border;
7800
+ }
7801
+
7802
+ &.failed {
7803
+ background-color: @toast-panel-failed-bg-color;
7804
+ border: @toast-panel-failed-border;
7805
+ }
7806
+
7807
+ .panel-status {
7808
+ color: @toast-panel-status-color;
7809
+ line-height: 24px;
7810
+ font-size: 14px;
7811
+ font-weight: 700;
7812
+ font-family: @font-family-sans-serif;
7813
+ align-items: center;
7814
+ display: flex;
7815
+ justify-content: center;
7816
+
7817
+ &.in-progress {
7818
+ color: @toast-panel-status-in-progress-color;
7819
+ }
7820
+
7821
+ &.failed {
7822
+ color: @toast-panel-status-failed-color;
7823
+ }
7824
+
7825
+ .panel-status-icon {
7826
+ font-size: 24px;
7827
+
7828
+ &.igz-icon-properties {
7829
+ -webkit-animation: rotation 4s infinite linear;
7830
+
7831
+ @-webkit-keyframes rotation {
7832
+ from {
7833
+ -webkit-transform: rotate(0deg);
7834
+ }
7835
+ to {
7836
+ -webkit-transform: rotate(359deg);
7837
+ }
7838
+ }
7839
+ }
7840
+ }
7841
+
7842
+ .panel-status-msg {
7843
+ margin-left: 8px;
7844
+ }
7845
+ }
7846
+ }
7847
+
7788
7848
  .validating-input-field {
7789
7849
  .validating-input-field-color-set();
7790
7850
 
@@ -8096,82 +8156,22 @@ yx-axis
8096
8156
 
8097
8157
  // an invalid input field should be displayed as invalid in case it is in a submitted form even if the field is pristine
8098
8158
  form.ng-submitted .validating-input-field {
8099
- .validating-input-field-color-set();
8100
-
8101
- .input-field, .textarea-field {
8102
- &:not([disabled]):not([readonly]) {
8103
- &.ng-invalid, &.invalid {
8104
- &:focus {
8105
- background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8106
- border: @input-textarea-field-not-disabled-focus-invalid-border;
8107
- }
8108
-
8109
- &:not(:focus) {
8110
- background-color: @input-textarea-field-not-disabled-invalid-bg-color;
8111
- border: @input-textarea-field-not-disabled-invalid-border;
8112
- }
8113
- }
8114
- }
8115
- }
8116
- }
8117
-
8118
- .toast-status-panel {
8119
- .toast-status-panel-color-set();
8120
-
8121
- margin-bottom: 20px;
8122
- padding: 16px 36px 16px 12px;
8123
- background-color: @toast-panel-bg-color;
8124
- border: @toast-panel-border;
8125
- position: relative;
8126
-
8127
- &.in-progress {
8128
- background-color: @toast-panel-in-progress-bg-color;
8129
- border: @toast-panel-in-progress-border;
8130
- }
8131
-
8132
- &.failed {
8133
- background-color: @toast-panel-failed-bg-color;
8134
- border: @toast-panel-failed-border;
8135
- }
8136
-
8137
- .panel-status {
8138
- color: @toast-panel-status-color;
8139
- line-height: 24px;
8140
- font-size: 14px;
8141
- font-weight: 700;
8142
- font-family: @font-family-sans-serif;
8143
- align-items: center;
8144
- display: flex;
8145
- justify-content: center;
8146
-
8147
- &.in-progress {
8148
- color: @toast-panel-status-in-progress-color;
8149
- }
8150
-
8151
- &.failed {
8152
- color: @toast-panel-status-failed-color;
8153
- }
8154
-
8155
- .panel-status-icon {
8156
- font-size: 24px;
8159
+ .validating-input-field-color-set();
8157
8160
 
8158
- &.igz-icon-properties {
8159
- -webkit-animation: rotation 4s infinite linear;
8161
+ .input-field, .textarea-field {
8162
+ &:not([disabled]):not([readonly]) {
8163
+ &.ng-invalid, &.invalid {
8164
+ &:focus {
8165
+ background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8166
+ border: @input-textarea-field-not-disabled-focus-invalid-border;
8167
+ }
8160
8168
 
8161
- @-webkit-keyframes rotation {
8162
- from {
8163
- -webkit-transform: rotate(0deg);
8164
- }
8165
- to {
8166
- -webkit-transform: rotate(359deg);
8167
- }
8169
+ &:not(:focus) {
8170
+ background-color: @input-textarea-field-not-disabled-invalid-bg-color;
8171
+ border: @input-textarea-field-not-disabled-invalid-border;
8168
8172
  }
8169
8173
  }
8170
8174
  }
8171
-
8172
- .panel-status-msg {
8173
- margin-left: 8px;
8174
- }
8175
8175
  }
8176
8176
  }
8177
8177
 
@@ -10082,6 +10082,24 @@ ncl-breadcrumbs {
10082
10082
  }
10083
10083
  }
10084
10084
  }
10085
+ .view-yaml-dialog-wrapper {
10086
+ .ngdialog-content {
10087
+ .view-yaml-dialog-header {
10088
+ .title {
10089
+ margin-bottom: 10px;
10090
+ }
10091
+
10092
+ .copy-to-clipboard {
10093
+ width: 20px;
10094
+ }
10095
+ }
10096
+
10097
+ .monaco-editor {
10098
+ min-width: 700px;
10099
+ min-height: 450px;
10100
+ }
10101
+ }
10102
+ }
10085
10103
  .ncl-edit-item {
10086
10104
  width: 100%;
10087
10105
  padding: 6px 0;
@@ -10182,24 +10200,6 @@ ncl-breadcrumbs {
10182
10200
  }
10183
10201
  }
10184
10202
 
10185
- .view-yaml-dialog-wrapper {
10186
- .ngdialog-content {
10187
- .view-yaml-dialog-header {
10188
- .title {
10189
- margin-bottom: 10px;
10190
- }
10191
-
10192
- .copy-to-clipboard {
10193
- width: 20px;
10194
- }
10195
- }
10196
-
10197
- .monaco-editor {
10198
- min-width: 700px;
10199
- min-height: 450px;
10200
- }
10201
- }
10202
- }
10203
10203
  .ncl-key-value-input {
10204
10204
  .input-wrapper {
10205
10205
  width: 100%;
@@ -10403,6 +10403,102 @@ ncl-breadcrumbs {
10403
10403
  }
10404
10404
  }
10405
10405
 
10406
+ .ncl-monaco {
10407
+ .ncl-monaco-wrapper {
10408
+ padding-top: 20px;
10409
+ height: 100%;
10410
+ border: 1px solid @pale-grey;
10411
+ background-color: @white;
10412
+
10413
+ &.no-top-padding {
10414
+ padding-top: 0;
10415
+ }
10416
+
10417
+ .ncl-monaco-top-row {
10418
+ display: block;
10419
+ }
10420
+
10421
+ .ncl-monaco-editor {
10422
+ height: 100%;
10423
+ }
10424
+ }
10425
+
10426
+ .ncl-monaco-dark {
10427
+ background-color: @vs-dark;
10428
+ }
10429
+ }
10430
+
10431
+
10432
+ .ncl-search-input {
10433
+ position: relative;
10434
+ color: @silver;
10435
+
10436
+ .container-search-input {
10437
+ background-color: transparent;
10438
+ border-bottom: 1px solid @silver;
10439
+ font-size: 13px;
10440
+ font-weight: 400;
10441
+ height: 36px;
10442
+ line-height: 36px;
10443
+ margin: 0;
10444
+ outline: 0;
10445
+ padding: 0 0 3px 31px;
10446
+ width: 100%;
10447
+
10448
+ &::-webkit-input-placeholder {
10449
+ color: @silver;
10450
+ }
10451
+
10452
+ &:-moz-placeholder { /* Firefox 18- */
10453
+ color: @silver;
10454
+ }
10455
+
10456
+ &::-moz-placeholder { /* Firefox 19+ */
10457
+ color: @silver;
10458
+ }
10459
+
10460
+ &:-ms-input-placeholder {
10461
+ color: @silver;
10462
+ }
10463
+
10464
+ &:focus {
10465
+ border-bottom: 1px solid @light-blue;
10466
+
10467
+ &, & + .igz-icon-search:before {
10468
+ color: @dusk-three;
10469
+ }
10470
+
10471
+ &::-webkit-input-placeholder {
10472
+ color: transparent;
10473
+ }
10474
+
10475
+ &:-moz-placeholder { /* Firefox 18- */
10476
+ color: transparent;
10477
+ }
10478
+
10479
+ &::-moz-placeholder { /* Firefox 19+ */
10480
+ color: transparent;
10481
+ }
10482
+
10483
+ &:-ms-input-placeholder {
10484
+ color: transparent;
10485
+ }
10486
+ }
10487
+ }
10488
+
10489
+ .igz-icon-search {
10490
+ font-size: 18px;
10491
+ position: absolute;
10492
+ left: 8px;
10493
+ top: 5px;
10494
+ z-index: 1;
10495
+ color: @silver;
10496
+ }
10497
+
10498
+ input::-ms-clear {
10499
+ display: none;
10500
+ }
10501
+ }
10406
10502
  ncl-navigation-tabs {
10407
10503
  .ncl-navigation-tabs-color-set();
10408
10504
 
@@ -10521,145 +10617,49 @@ ncl-navigation-tabs {
10521
10617
 
10522
10618
  &:after {
10523
10619
  border-right-color: @darkish-pink;
10524
- }
10525
- }
10526
-
10527
- .ncl-status-icon {
10528
- width: 13px;
10529
- margin-right: 5px;
10530
-
10531
- &.ncl-icon-ready {
10532
- margin-top: 3px;
10533
- font-size: 10px;
10534
- }
10535
-
10536
- &.ncl-icon-building {
10537
- margin-top: 6px;
10538
- font-size: 5px;
10539
- }
10540
-
10541
- &.ncl-icon-error {
10542
- margin-top: 3px;
10543
- font-size: 10px;
10544
- }
10545
- }
10546
-
10547
- .ncl-status-title {
10548
- font-size: 13px;
10549
- font-weight: normal;
10550
- white-space: nowrap;
10551
-
10552
- &::first-letter {
10553
- text-transform: capitalize;
10554
- }
10555
- }
10556
- }
10557
- }
10558
- }
10559
- }
10560
- }
10561
-
10562
- .test-pane-actions-wrapper {
10563
- margin-right: 35px;
10564
- }
10565
- }
10566
-
10567
- .ncl-monaco {
10568
- .ncl-monaco-wrapper {
10569
- padding-top: 20px;
10570
- height: 100%;
10571
- border: 1px solid @pale-grey;
10572
- background-color: @white;
10573
-
10574
- &.no-top-padding {
10575
- padding-top: 0;
10576
- }
10577
-
10578
- .ncl-monaco-top-row {
10579
- display: block;
10580
- }
10581
-
10582
- .ncl-monaco-editor {
10583
- height: 100%;
10584
- }
10585
- }
10586
-
10587
- .ncl-monaco-dark {
10588
- background-color: @vs-dark;
10589
- }
10590
- }
10591
-
10592
-
10593
- .ncl-search-input {
10594
- position: relative;
10595
- color: @silver;
10596
-
10597
- .container-search-input {
10598
- background-color: transparent;
10599
- border-bottom: 1px solid @silver;
10600
- font-size: 13px;
10601
- font-weight: 400;
10602
- height: 36px;
10603
- line-height: 36px;
10604
- margin: 0;
10605
- outline: 0;
10606
- padding: 0 0 3px 31px;
10607
- width: 100%;
10608
-
10609
- &::-webkit-input-placeholder {
10610
- color: @silver;
10611
- }
10612
-
10613
- &:-moz-placeholder { /* Firefox 18- */
10614
- color: @silver;
10615
- }
10616
-
10617
- &::-moz-placeholder { /* Firefox 19+ */
10618
- color: @silver;
10619
- }
10620
-
10621
- &:-ms-input-placeholder {
10622
- color: @silver;
10623
- }
10620
+ }
10621
+ }
10624
10622
 
10625
- &:focus {
10626
- border-bottom: 1px solid @light-blue;
10623
+ .ncl-status-icon {
10624
+ width: 13px;
10625
+ margin-right: 5px;
10627
10626
 
10628
- &, & + .igz-icon-search:before {
10629
- color: @dusk-three;
10630
- }
10627
+ &.ncl-icon-ready {
10628
+ margin-top: 3px;
10629
+ font-size: 10px;
10630
+ }
10631
10631
 
10632
- &::-webkit-input-placeholder {
10633
- color: transparent;
10634
- }
10632
+ &.ncl-icon-building {
10633
+ margin-top: 6px;
10634
+ font-size: 5px;
10635
+ }
10635
10636
 
10636
- &:-moz-placeholder { /* Firefox 18- */
10637
- color: transparent;
10638
- }
10637
+ &.ncl-icon-error {
10638
+ margin-top: 3px;
10639
+ font-size: 10px;
10640
+ }
10641
+ }
10639
10642
 
10640
- &::-moz-placeholder { /* Firefox 19+ */
10641
- color: transparent;
10642
- }
10643
+ .ncl-status-title {
10644
+ font-size: 13px;
10645
+ font-weight: normal;
10646
+ white-space: nowrap;
10643
10647
 
10644
- &:-ms-input-placeholder {
10645
- color: transparent;
10648
+ &::first-letter {
10649
+ text-transform: capitalize;
10650
+ }
10651
+ }
10652
+ }
10653
+ }
10646
10654
  }
10647
10655
  }
10648
10656
  }
10649
10657
 
10650
- .igz-icon-search {
10651
- font-size: 18px;
10652
- position: absolute;
10653
- left: 8px;
10654
- top: 5px;
10655
- z-index: 1;
10656
- color: @silver;
10657
- }
10658
-
10659
- input::-ms-clear {
10660
- display: none;
10658
+ .test-pane-actions-wrapper {
10659
+ margin-right: 35px;
10661
10660
  }
10662
10661
  }
10662
+
10663
10663
  .new-function-wrapper {
10664
10664
  .ncl-new-function-color-set();
10665
10665
 
@@ -11437,6 +11437,105 @@ ncl-navigation-tabs {
11437
11437
  }
11438
11438
  }
11439
11439
 
11440
+ .function-from-scratch-content {
11441
+ .splash-screen {
11442
+ top: 0;
11443
+ }
11444
+
11445
+ .title-wrapper {
11446
+ margin-left: 50px;
11447
+
11448
+ .title {
11449
+ color: @dusk-three;
11450
+ font-size: 16px;
11451
+ font-weight: bold;
11452
+ }
11453
+ }
11454
+
11455
+ .function-configuration {
11456
+ margin: 28px 0 0 0;
11457
+
11458
+ .configuration-form {
11459
+ display: flex;
11460
+
11461
+ .function-name-wrapper {
11462
+ width: 50%;
11463
+ display: flex;
11464
+ padding: 0 24px 0 74px;
11465
+
11466
+ .projects-drop-down {
11467
+ width: 40%;
11468
+ margin-right: 48px;
11469
+
11470
+ .input-label {
11471
+ font-size: 14px;
11472
+ font-weight: 600;
11473
+ color: @dusk-three;
11474
+ }
11475
+
11476
+ igz-default-dropdown {
11477
+ .default-dropdown {
11478
+ background-color: @white;
11479
+
11480
+ .default-dropdown-field {
11481
+ &:focus {
11482
+ background-color: inherit;
11483
+ }
11484
+ }
11485
+ }
11486
+ }
11487
+ }
11488
+
11489
+ .function-name {
11490
+ width: 100%;
11491
+
11492
+ .input-label {
11493
+ font-size: 14px;
11494
+ font-weight: 600;
11495
+ color: @dusk-three;
11496
+ }
11497
+
11498
+ igz-validating-input-field {
11499
+ margin-left: 2px;
11500
+ }
11501
+ }
11502
+ }
11503
+
11504
+ .function-runtime-wrapper {
11505
+ width: 50%;
11506
+ padding-left: 24px;
11507
+ padding-right: 10%;
11508
+
11509
+ .function-runtime {
11510
+ .input-label {
11511
+ font-size: 14px;
11512
+ font-weight: 600;
11513
+ color: @dusk-three;
11514
+ }
11515
+
11516
+ igz-default-dropdown {
11517
+ .default-dropdown {
11518
+ background-color: @white;
11519
+
11520
+ .default-dropdown-field {
11521
+ &:focus {
11522
+ background-color: inherit;
11523
+ }
11524
+ }
11525
+ }
11526
+ }
11527
+
11528
+ .bottom-bar {
11529
+ display: flex;
11530
+ justify-content: flex-end;
11531
+ margin-top: 48px;
11532
+ }
11533
+ }
11534
+ }
11535
+ }
11536
+ }
11537
+ }
11538
+
11440
11539
  .function-from-template-content {
11441
11540
  .ncl-function-from-template-color-set();
11442
11541
 
@@ -11699,105 +11798,6 @@ ncl-navigation-tabs {
11699
11798
  }
11700
11799
  }
11701
11800
 
11702
- .function-from-scratch-content {
11703
- .splash-screen {
11704
- top: 0;
11705
- }
11706
-
11707
- .title-wrapper {
11708
- margin-left: 50px;
11709
-
11710
- .title {
11711
- color: @dusk-three;
11712
- font-size: 16px;
11713
- font-weight: bold;
11714
- }
11715
- }
11716
-
11717
- .function-configuration {
11718
- margin: 28px 0 0 0;
11719
-
11720
- .configuration-form {
11721
- display: flex;
11722
-
11723
- .function-name-wrapper {
11724
- width: 50%;
11725
- display: flex;
11726
- padding: 0 24px 0 74px;
11727
-
11728
- .projects-drop-down {
11729
- width: 40%;
11730
- margin-right: 48px;
11731
-
11732
- .input-label {
11733
- font-size: 14px;
11734
- font-weight: 600;
11735
- color: @dusk-three;
11736
- }
11737
-
11738
- igz-default-dropdown {
11739
- .default-dropdown {
11740
- background-color: @white;
11741
-
11742
- .default-dropdown-field {
11743
- &:focus {
11744
- background-color: inherit;
11745
- }
11746
- }
11747
- }
11748
- }
11749
- }
11750
-
11751
- .function-name {
11752
- width: 100%;
11753
-
11754
- .input-label {
11755
- font-size: 14px;
11756
- font-weight: 600;
11757
- color: @dusk-three;
11758
- }
11759
-
11760
- igz-validating-input-field {
11761
- margin-left: 2px;
11762
- }
11763
- }
11764
- }
11765
-
11766
- .function-runtime-wrapper {
11767
- width: 50%;
11768
- padding-left: 24px;
11769
- padding-right: 10%;
11770
-
11771
- .function-runtime {
11772
- .input-label {
11773
- font-size: 14px;
11774
- font-weight: 600;
11775
- color: @dusk-three;
11776
- }
11777
-
11778
- igz-default-dropdown {
11779
- .default-dropdown {
11780
- background-color: @white;
11781
-
11782
- .default-dropdown-field {
11783
- &:focus {
11784
- background-color: inherit;
11785
- }
11786
- }
11787
- }
11788
- }
11789
-
11790
- .bottom-bar {
11791
- display: flex;
11792
- justify-content: flex-end;
11793
- margin-top: 48px;
11794
- }
11795
- }
11796
- }
11797
- }
11798
- }
11799
- }
11800
-
11801
11801
  .function-import-wrapper-content {
11802
11802
  font-family: @font-family-sans-serif;
11803
11803
  padding-left: 3%;