iguazio.dashboard-controls 1.0.10-1.13.x → 1.0.10

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.
@@ -5531,6 +5531,23 @@ yx-axis
5531
5531
 
5532
5532
  /* ---------------------------------------- */
5533
5533
 
5534
+ .action-checkbox-all {
5535
+ .action-checkbox-all-color-set();
5536
+
5537
+ text-align: center;
5538
+
5539
+ .check-item {
5540
+ cursor: pointer;
5541
+ color: @check-item-color;
5542
+ font-size: 16px;
5543
+ line-height: 1;
5544
+ vertical-align: middle;
5545
+
5546
+ &.igz-icon-checkbox-checked {
5547
+ color: @check-item-icon-checkbox-checked-color;
5548
+ }
5549
+ }
5550
+ }
5534
5551
  .action-checkbox {
5535
5552
  .action-checkbox-color-set();
5536
5553
 
@@ -5552,216 +5569,6 @@ yx-axis
5552
5569
  }
5553
5570
  }
5554
5571
  }
5555
- .igz-action-panel {
5556
- .action-panel-color-set();
5557
- .action-icon-color-set();
5558
-
5559
- left: 0;
5560
- line-height: 0;
5561
- position: relative;
5562
- transition: @igz-basic-transition;
5563
-
5564
- &.ng-hide {
5565
- left: -100%;
5566
- }
5567
-
5568
- .actions-list {
5569
- transition: none;
5570
-
5571
- &.ng-hide {
5572
- opacity: 0;
5573
- }
5574
-
5575
- &.empty {
5576
- line-height: 39px;
5577
- padding: 1px 19px;
5578
- font-size: 17px;
5579
- letter-spacing: 0.2px;
5580
- color: @action-list-empty-color;
5581
- }
5582
-
5583
- .igz-action-item {
5584
- display: flex;
5585
- justify-content: center;
5586
- align-items: center;
5587
- background-color: @action-item-bg-color;
5588
- border-radius: 50%;
5589
- color: @action-item-color;
5590
- cursor: pointer;
5591
- float: left;
5592
- font-size: 18px;
5593
- height: 40px;
5594
- margin: 0 8px 0 0;
5595
- position: relative;
5596
- transition: color .2s ease-out;
5597
- width: 40px;
5598
- z-index: 2;
5599
-
5600
- &:last-of-type {
5601
- margin-right: 0;
5602
- }
5603
-
5604
- &.inactive {
5605
- pointer-events: none;
5606
-
5607
- &:hover {
5608
- color: @action-item-inactive-hover-color;
5609
- }
5610
-
5611
- .action-icon {
5612
- color: @action-icon-inactive-color;
5613
- cursor: default;
5614
- }
5615
- }
5616
-
5617
- &.active {
5618
- background-color: @action-item-active-bg-color;
5619
- }
5620
-
5621
- &:not(.inactive) {
5622
- &:hover {
5623
- overflow: visible;
5624
- background-color: @action-item-hover-bg-color;
5625
- box-shadow: @action-item-hover-box-shadow;
5626
-
5627
- &:active {
5628
- box-shadow: @action-item-hover-active-box-shadow;
5629
- background-color: @action-item-hover-active-bg-color;
5630
- }
5631
-
5632
- .action-icon {
5633
- color: @action-icon-hover-color;
5634
- }
5635
- }
5636
-
5637
- &:focus {
5638
- background-color: @action-item-hover-bg-color;
5639
- box-shadow: @action-item-focus-box-shadow;
5640
- &:hover {
5641
- box-shadow: @action-item-focus-hover-box-shadow;
5642
- }
5643
- }
5644
- }
5645
-
5646
- &.subtemplate-show {
5647
- transition: none;
5648
- background-color: @dropdown-menu-subtemplate-show-bg-color;
5649
- box-shadow: @dropdown-menu-subtemplate-show-box-shadow;
5650
-
5651
- &:hover {
5652
- background-color: @dropdown-menu-subtemplate-show-hover-bg-color;
5653
- box-shadow: @dropdown-menu-subtemplate-show-hover-box-shadow;
5654
- }
5655
-
5656
- .action-icon {
5657
- color: @action-icon-hover-color;
5658
- }
5659
- }
5660
-
5661
- &.last-item {
5662
- margin: 0;
5663
- }
5664
-
5665
- .upload-action {
5666
- width: 100%;
5667
- height: 100%;
5668
- display: flex;
5669
- justify-content: center;
5670
- align-items: center;
5671
- }
5672
-
5673
- .action-icon {
5674
- color: @action-icon-color;
5675
- }
5676
-
5677
- .action-label {
5678
- display: none;
5679
- }
5680
-
5681
- .filter-counter {
5682
- position: absolute;
5683
- left: 26px;
5684
- top: 2px;
5685
- display: inline-block;
5686
- font-size: 12px;
5687
- font-weight: 500;
5688
- text-align: center;
5689
- line-height: 16px;
5690
- color: @action-item-filter-counter-color;
5691
- min-width: 16px;
5692
- height: 15px;
5693
- padding: 0 4px;
5694
- border-radius: 7.5px;
5695
- background-color: @action-item-filter-counter-bg-color;
5696
- }
5697
-
5698
- .item-dropdown-menu {
5699
- position: absolute;
5700
- top: 100%;
5701
- left: 0;
5702
- padding: 8px 0;
5703
- list-style: none;
5704
- font-size: 13px;
5705
- font-weight: 500;
5706
- color: @dropdown-menu-color;
5707
- border-radius: 2px;
5708
- background-color: @dropdown-menu-bg-color;
5709
- box-shadow: @dropdown-menu-box-shadow;
5710
- margin-top: 1px;
5711
- z-index: 10;
5712
-
5713
- .item-dropdown-menu-list {
5714
- margin: 0;
5715
- display: block;
5716
- padding: 0;
5717
- list-style-type: none;
5718
-
5719
- li {
5720
- height: 32px;
5721
- line-height: 32px;
5722
- text-align: left;
5723
- display: flex;
5724
-
5725
- &:hover {
5726
- background-color: @dropdown-menu-li-hover-bg-color;
5727
-
5728
- .action-icon {
5729
- color: @action-icon-hover-color;
5730
- }
5731
- }
5732
-
5733
- .action-label {
5734
- display: inline-block;
5735
- white-space: nowrap;
5736
- vertical-align: top;
5737
- margin-right: 17px;
5738
- }
5739
-
5740
- .action-icon {
5741
- color: @action-icon-color;
5742
- font-size: 17px;
5743
- display: inline-block;
5744
- margin: 0 13px 0 21px;
5745
- vertical-align: middle;
5746
- }
5747
- }
5748
- }
5749
- }
5750
- }
5751
- }
5752
-
5753
- .action-subtemplate {
5754
- border-bottom-left-radius: 4px;
5755
- border-bottom-right-radius: 4px;
5756
- border: @action-subtemplate-border;
5757
- background-color: @action-subtemplate-bg-color;
5758
- box-shadow: @action-subtemplate-box-shadow;
5759
- position: fixed;
5760
- margin: -2px 0 0 -1px;
5761
- z-index: 10;
5762
- }
5763
- }
5764
-
5765
5572
  .igz-action-menu {
5766
5573
  .action-menu-color-set();
5767
5574
  .action-icon-color-set();
@@ -5920,217 +5727,25 @@ yx-axis
5920
5727
  }
5921
5728
  }
5922
5729
 
5923
- .auto-complete-wrapper {
5924
- .auto-complete-color-set();
5730
+ .default-dropdown {
5731
+ .default-dropdown-color-set();
5732
+ .severity-icons-color-set();
5925
5733
 
5926
5734
  position: relative;
5735
+ height: 36px;
5927
5736
 
5928
- .input-row {
5737
+ .default-dropdown-field {
5738
+ border: @default-dropdown-field-border;
5739
+ border-radius: 2px;
5740
+ height: 100%;
5741
+ color: @default-dropdown-field-color;
5742
+ cursor: pointer;
5743
+ font-family: @font-family-sans-serif;
5744
+ font-size: 14px;
5745
+ margin-top: 0;
5929
5746
  display: flex;
5930
- width: 100%;
5931
-
5932
- .auto-complete-input {
5933
- flex-grow: 3;
5934
- }
5935
-
5936
- .auto-complete-filters {
5937
- width: 20%;
5938
- }
5939
- }
5940
-
5941
- .suggestions-row {
5942
- .auto-complete-suggestions-container {
5943
- position: absolute;
5944
- background-color: @auto-complete-suggestions-container-bg-color;
5945
- border-radius: 2px;
5946
- box-shadow: @auto-complete-suggestions-container-box-shadow;
5947
- color: @auto-complete-suggestions-container-color;
5948
- max-height: 220px;
5949
- overflow: auto;
5950
- z-index: 1000;
5951
- width: 100%;
5952
- margin-top: 2px;
5953
-
5954
- .list {
5955
- padding: 0;
5956
- margin: 0;
5957
-
5958
- .list-item {
5959
- color: @auto-complete-list-item-color;
5960
- font-family: @font-family-sans-serif;
5961
- font-size: 14px;
5962
- list-style-type: none;
5963
- margin: 0;
5964
- outline: none;
5965
- width: 100%;
5966
- min-height: 32px;
5967
-
5968
- &:first-child {
5969
- margin-top: 7px;
5970
- }
5971
-
5972
- &:last-child {
5973
- margin-bottom: 4px;
5974
- }
5975
-
5976
- .list-item-block {
5977
- display: flex;
5978
- flex-flow: row nowrap;
5979
- align-items: center;
5980
- padding: 6px 16px;
5981
- width: 100%;
5982
-
5983
- .list-item-name {
5984
- flex: auto;
5985
- white-space: nowrap;
5986
- overflow: hidden;
5987
- text-overflow: ellipsis;
5988
- }
5989
-
5990
- .list-item-additional-info {
5991
- flex: none;
5992
- margin-left: 6px;
5993
- color: @auto-complete-list-item-additional-info-color;
5994
- }
5995
- }
5996
-
5997
- &:not(.readonly) {
5998
- cursor: pointer;
5999
-
6000
- &:hover, &:focus {
6001
- background-color: @auto-complete-list-item-hover-focus-bg-color;
6002
- }
6003
- }
6004
-
6005
- &.selected-item {
6006
- color: @auto-complete-list-item-selected-color;
6007
- }
6008
- }
6009
-
6010
- hr {
6011
- margin: 0;
6012
- }
6013
- }
6014
- }
6015
-
6016
- .auto-complete-suggestions-with-filters {
6017
- width: 80%;
6018
- }
6019
- }
6020
- }
6021
-
6022
- .action-checkbox-all {
6023
- .action-checkbox-all-color-set();
6024
-
6025
- text-align: center;
6026
-
6027
- .check-item {
6028
- cursor: pointer;
6029
- color: @check-item-color;
6030
- font-size: 16px;
6031
- line-height: 1;
6032
- vertical-align: middle;
6033
-
6034
- &.igz-icon-checkbox-checked {
6035
- color: @check-item-icon-checkbox-checked-color;
6036
- }
6037
- }
6038
- }
6039
- .element-loading-status {
6040
- .element-loading-status-color-set();
6041
-
6042
- position: relative;
6043
- width: 100%;
6044
- height: 100%;
6045
-
6046
- .loader-wrapper {
6047
- height: 100%;
6048
- width: 100%;
6049
- position: relative;
6050
-
6051
- .loader-text {
6052
- color: @loading-text-color;
6053
- }
6054
- }
6055
-
6056
- .loading-error {
6057
- text-align: center;
6058
- line-height: 15px;
6059
- width: 100%;
6060
- height: 100%;
6061
- position: relative;
6062
-
6063
- .sad-icon {
6064
- position: absolute;
6065
- left: 32px;
6066
- }
6067
-
6068
- .loading-error-title, .loading-error-message {
6069
- font-size: 13px;
6070
- font-weight: 700;
6071
- padding: 0 15px;
6072
- }
6073
-
6074
- .loading-error-title {
6075
- color: @loading-error-title-color;
6076
- padding-top: 15px;
6077
- }
6078
-
6079
- .refresh-page {
6080
- color: @loading-error-refresh-page-color;
6081
- text-decoration: underline;
6082
- cursor: pointer;
6083
- }
6084
- }
6085
-
6086
- // Small size status
6087
-
6088
- &.loading-status-small {
6089
- .loader-fading-circle {
6090
- width: 20px;
6091
- height: 20px;
6092
- }
6093
-
6094
- .loading-error {
6095
-
6096
- .loading-error-title, .loading-error-message {
6097
- text-overflow: ellipsis;
6098
- overflow: hidden;
6099
- padding: 0;
6100
- }
6101
-
6102
- .loading-error-title {
6103
- padding-top: 8px;
6104
- }
6105
-
6106
- .refresh-page {
6107
- overflow: hidden;
6108
- text-overflow: ellipsis;
6109
- padding: 0;
6110
- }
6111
- }
6112
- }
6113
- }
6114
-
6115
- .default-dropdown {
6116
- .default-dropdown-color-set();
6117
- .severity-icons-color-set();
6118
-
6119
- position: relative;
6120
- height: 36px;
6121
-
6122
- .default-dropdown-field {
6123
- border: @default-dropdown-field-border;
6124
- border-radius: 2px;
6125
- height: 100%;
6126
- color: @default-dropdown-field-color;
6127
- cursor: pointer;
6128
- font-family: @font-family-sans-serif;
6129
- font-size: 14px;
6130
- margin-top: 0;
6131
- display: flex;
6132
- align-items: center;
6133
- justify-content: space-between;
5747
+ align-items: center;
5748
+ justify-content: space-between;
6134
5749
 
6135
5750
  .dropdown-selected-item {
6136
5751
  padding: 0 0 0 16px;
@@ -6552,238 +6167,623 @@ yx-axis
6552
6167
  }
6553
6168
  }
6554
6169
 
6555
- .more-info-wrapper {
6556
- .more-info-color-set();
6170
+ .element-loading-status {
6171
+ .element-loading-status-color-set();
6557
6172
 
6558
6173
  position: relative;
6559
- display: inline-flex;
6560
- align-items: center;
6561
- height: 36px;
6562
- margin-left: 8px;
6174
+ width: 100%;
6175
+ height: 100%;
6563
6176
 
6564
- .question-mark {
6565
- cursor: default;
6177
+ .loader-wrapper {
6178
+ height: 100%;
6179
+ width: 100%;
6180
+ position: relative;
6566
6181
 
6567
- &::before {
6568
- color: @icon-help-round-before-color;
6569
- background-color: @icon-help-round-before-bg-color;
6182
+ .loader-text {
6183
+ color: @loading-text-color;
6570
6184
  }
6185
+ }
6571
6186
 
6572
- &:hover {
6573
- &::before {
6574
- color: @icon-help-round-hover-before-color;
6575
- }
6187
+ .loading-error {
6188
+ text-align: center;
6189
+ line-height: 15px;
6190
+ width: 100%;
6191
+ height: 100%;
6192
+ position: relative;
6576
6193
 
6577
- + .row-description-wrapper.row-description {
6578
- color: @icon-help-description-hover-color;
6579
- }
6194
+ .sad-icon {
6195
+ position: absolute;
6196
+ left: 32px;
6580
6197
  }
6581
6198
 
6582
- &.igz-icon-alert-message {
6583
- &::before {
6584
- color: @icon-warn-hover-before-color;
6585
- background-color: @icon-warn-before-bg-color;
6586
- }
6199
+ .loading-error-title, .loading-error-message {
6200
+ font-size: 13px;
6201
+ font-weight: 700;
6202
+ padding: 0 15px;
6203
+ }
6587
6204
 
6588
- &:hover {
6589
- &::before {
6590
- color: @icon-warn-before-color;
6591
- }
6592
- }
6205
+ .loading-error-title {
6206
+ color: @loading-error-title-color;
6207
+ padding-top: 15px;
6593
6208
  }
6594
6209
 
6595
- &.click-trigger {
6210
+ .refresh-page {
6211
+ color: @loading-error-refresh-page-color;
6212
+ text-decoration: underline;
6596
6213
  cursor: pointer;
6597
6214
  }
6215
+ }
6598
6216
 
6599
- &+ .row-description-wrapper {
6600
- display: none;
6601
- }
6602
-
6603
- &:not(.click-trigger):hover + .row-description-wrapper,
6604
- &.open + .row-description-wrapper {
6605
- display: block;
6606
- }
6607
- }
6608
-
6609
- .row-description-wrapper {
6610
- position: fixed;
6611
- z-index: 4;
6612
- }
6613
-
6614
- .row-description {
6615
- width: 240px;
6616
- padding: 16px 19px;
6617
- position: absolute;
6618
- border-radius: 2px;
6619
- box-shadow: @row-description-box-shadow;
6620
- background-color: @row-description-bg-color;
6621
- color: @row-description-color;
6622
- font-family: @font-family-sans-serif;
6623
- font-size: 12px;
6624
- font-weight: 400;
6625
- white-space: pre-line;
6626
- line-height: normal;
6627
- overflow-wrap: break-word;
6217
+ // Small size status
6628
6218
 
6629
- &::before {
6630
- position: absolute;
6631
- content: '';
6219
+ &.loading-status-small {
6220
+ .loader-fading-circle {
6221
+ width: 20px;
6222
+ height: 20px;
6632
6223
  }
6633
6224
 
6634
- &.top,
6635
- &.bottom {
6636
- left: -114px;
6225
+ .loading-error {
6637
6226
 
6638
- &::before {
6639
- right: calc(50% - 9px);
6227
+ .loading-error-title, .loading-error-message {
6228
+ text-overflow: ellipsis;
6229
+ overflow: hidden;
6230
+ padding: 0;
6640
6231
  }
6641
6232
 
6642
- &-left {
6643
- left: -220px;
6644
-
6645
- &::before {
6646
- right: 4px;
6647
- }
6233
+ .loading-error-title {
6234
+ padding-top: 8px;
6648
6235
  }
6649
6236
 
6650
- &-right {
6651
- left: -6px;
6652
-
6653
- &::before {
6654
- right: calc(100% - 22px);
6655
- }
6237
+ .refresh-page {
6238
+ overflow: hidden;
6239
+ text-overflow: ellipsis;
6240
+ padding: 0;
6656
6241
  }
6657
6242
  }
6243
+ }
6244
+ }
6658
6245
 
6659
- &.top,
6660
- &.top-left,
6661
- &.top-right {
6662
- bottom: 35px;
6663
-
6664
- &::before {
6665
- .triangle-arrow(down; @row-description-triangle-color; 8px; 10px);
6666
-
6667
- bottom: -10px;
6668
- }
6669
- }
6246
+ .auto-complete-wrapper {
6247
+ .auto-complete-color-set();
6670
6248
 
6671
- &.bottom,
6672
- &.bottom-left,
6673
- &.bottom-right {
6674
- top: 8px;
6249
+ position: relative;
6675
6250
 
6676
- &::before {
6677
- .triangle-arrow(up; @row-description-triangle-color; 8px; 10px);
6251
+ .input-row {
6252
+ display: flex;
6253
+ width: 100%;
6678
6254
 
6679
- top: -10px;
6680
- }
6255
+ .auto-complete-input {
6256
+ flex-grow: 3;
6681
6257
  }
6682
6258
 
6683
- &.right,
6684
- &.left {
6685
- top: -30px;
6686
-
6687
- &::before {
6688
- top: 7px;
6689
- }
6259
+ .auto-complete-filters {
6260
+ width: 20%;
6690
6261
  }
6262
+ }
6691
6263
 
6692
- &.right {
6693
- left: 26px;
6264
+ .suggestions-row {
6265
+ .auto-complete-suggestions-container {
6266
+ position: absolute;
6267
+ background-color: @auto-complete-suggestions-container-bg-color;
6268
+ border-radius: 2px;
6269
+ box-shadow: @auto-complete-suggestions-container-box-shadow;
6270
+ color: @auto-complete-suggestions-container-color;
6271
+ max-height: 220px;
6272
+ overflow: auto;
6273
+ z-index: 1000;
6274
+ width: 100%;
6275
+ margin-top: 2px;
6694
6276
 
6695
- &::before {
6696
- .triangle-arrow(right; @row-description-triangle-color; 8px; 10px);
6277
+ .list {
6278
+ padding: 0;
6279
+ margin: 0;
6697
6280
 
6698
- left: -8px;
6699
- }
6700
- }
6281
+ .list-item {
6282
+ color: @auto-complete-list-item-color;
6283
+ font-family: @font-family-sans-serif;
6284
+ font-size: 14px;
6285
+ list-style-type: none;
6286
+ margin: 0;
6287
+ outline: none;
6288
+ width: 100%;
6289
+ min-height: 32px;
6701
6290
 
6702
- &.left {
6703
- left: -250px;
6291
+ &:first-child {
6292
+ margin-top: 7px;
6293
+ }
6704
6294
 
6705
- &::before {
6706
- .triangle-arrow(left; @row-description-triangle-color; 8px; 10px);
6295
+ &:last-child {
6296
+ margin-bottom: 4px;
6297
+ }
6707
6298
 
6708
- right: -8px;
6709
- }
6710
- }
6711
- }
6712
- }
6299
+ .list-item-block {
6300
+ display: flex;
6301
+ flex-flow: row nowrap;
6302
+ align-items: center;
6303
+ padding: 6px 16px;
6304
+ width: 100%;
6713
6305
 
6714
- .igz-multiple-checkboxes {
6715
- .multiple-checkboxes-color-set();
6306
+ .list-item-name {
6307
+ flex: auto;
6308
+ white-space: nowrap;
6309
+ overflow: hidden;
6310
+ text-overflow: ellipsis;
6311
+ }
6716
6312
 
6717
- .igz-multiple-checkboxes-list {
6718
- list-style-type: none;
6719
- -webkit-margin-before: 0;
6720
- -webkit-margin-after: 0;
6721
- -webkit-padding-start: 0;
6722
- margin: 0;
6723
- padding: 0;
6313
+ .list-item-additional-info {
6314
+ flex: none;
6315
+ margin-left: 6px;
6316
+ color: @auto-complete-list-item-additional-info-color;
6317
+ }
6318
+ }
6724
6319
 
6725
- .multiple-checkboxes-option {
6726
- display: flex;
6727
- margin: 5px 0;
6320
+ &:not(.readonly) {
6321
+ cursor: pointer;
6728
6322
 
6729
- .more-info-wrapper {
6730
- height: auto;
6323
+ &:hover, &:focus {
6324
+ background-color: @auto-complete-list-item-hover-focus-bg-color;
6325
+ }
6326
+ }
6731
6327
 
6732
- .igz-icon-help-round {
6733
- font-size: 14px;
6328
+ &.selected-item {
6329
+ color: @auto-complete-list-item-selected-color;
6330
+ }
6331
+ }
6332
+
6333
+ hr {
6334
+ margin: 0;
6734
6335
  }
6735
6336
  }
6736
6337
  }
6338
+
6339
+ .auto-complete-suggestions-with-filters {
6340
+ width: 80%;
6341
+ }
6737
6342
  }
6343
+ }
6738
6344
 
6739
- .checkboxes-dropdown-field {
6740
- border: @checkboxes-dropdown-field-border;
6741
- border-radius: 2px;
6742
- height: 100%;
6743
- color: @checkboxes-dropdown-field-border;
6744
- cursor: pointer;
6745
- outline: none;
6746
- font-family: @font-family-sans-serif;
6747
- margin-top: 0;
6748
- display: flex;
6749
- align-items: center;
6750
- justify-content: space-between;
6345
+ .igz-action-panel {
6346
+ .action-panel-color-set();
6347
+ .action-icon-color-set();
6751
6348
 
6752
- &.opened {
6753
- background-color: @checkboxes-dropdown-field-opened-bg-color;
6754
- }
6349
+ left: 0;
6350
+ line-height: 0;
6351
+ position: relative;
6352
+ transition: @igz-basic-transition;
6755
6353
 
6756
- .checkboxes-dropdown-title {
6757
- font-size: 12px;
6758
- font-weight: 500;
6759
- text-transform: uppercase;
6760
- }
6354
+ &.ng-hide {
6355
+ left: -100%;
6761
6356
  }
6762
6357
 
6763
- .checkboxes-dropdown-container {
6764
- background-color: @checkboxes-dropdown-container-bg-color;
6765
- border-radius: 2px;
6766
- box-shadow: @checkboxes-dropdown-container-box-shadow;
6767
- color: @checkboxes-dropdown-container-color;
6768
- overflow: hidden;
6769
- position: absolute;
6770
- z-index: 1000;
6771
- min-width: 236px;
6772
- height: 100%;
6773
- margin-top: 2px;
6774
- margin-bottom: 2px;
6775
- padding: 8px 0;
6358
+ .actions-list {
6359
+ transition: none;
6776
6360
 
6777
- .checkboxes-dropdown-scrollbar-container {
6778
- padding-bottom: 36px;
6779
- height: 100%;
6361
+ &.ng-hide {
6362
+ opacity: 0;
6363
+ }
6780
6364
 
6781
- .search-input-wrapper {
6782
- .checkboxes-search-input {
6783
- .validating-input-field {
6784
- height: 32px;
6785
- width: 100%;
6786
- color: @checkboxes-search-input-color;
6365
+ &.empty {
6366
+ line-height: 39px;
6367
+ padding: 1px 19px;
6368
+ font-size: 17px;
6369
+ letter-spacing: 0.2px;
6370
+ color: @action-list-empty-color;
6371
+ }
6372
+
6373
+ .igz-action-item {
6374
+ display: flex;
6375
+ justify-content: center;
6376
+ align-items: center;
6377
+ background-color: @action-item-bg-color;
6378
+ border-radius: 50%;
6379
+ color: @action-item-color;
6380
+ cursor: pointer;
6381
+ float: left;
6382
+ font-size: 18px;
6383
+ height: 40px;
6384
+ margin: 0 8px 0 0;
6385
+ position: relative;
6386
+ transition: color .2s ease-out;
6387
+ width: 40px;
6388
+ z-index: 2;
6389
+
6390
+ &:last-of-type {
6391
+ margin-right: 0;
6392
+ }
6393
+
6394
+ &.inactive {
6395
+ pointer-events: none;
6396
+
6397
+ &:hover {
6398
+ color: @action-item-inactive-hover-color;
6399
+ }
6400
+
6401
+ .action-icon {
6402
+ color: @action-icon-inactive-color;
6403
+ cursor: default;
6404
+ }
6405
+ }
6406
+
6407
+ &.active {
6408
+ background-color: @action-item-active-bg-color;
6409
+ }
6410
+
6411
+ &:not(.inactive) {
6412
+ &:hover {
6413
+ overflow: visible;
6414
+ background-color: @action-item-hover-bg-color;
6415
+ box-shadow: @action-item-hover-box-shadow;
6416
+
6417
+ &:active {
6418
+ box-shadow: @action-item-hover-active-box-shadow;
6419
+ background-color: @action-item-hover-active-bg-color;
6420
+ }
6421
+
6422
+ .action-icon {
6423
+ color: @action-icon-hover-color;
6424
+ }
6425
+ }
6426
+
6427
+ &:focus {
6428
+ background-color: @action-item-hover-bg-color;
6429
+ box-shadow: @action-item-focus-box-shadow;
6430
+ &:hover {
6431
+ box-shadow: @action-item-focus-hover-box-shadow;
6432
+ }
6433
+ }
6434
+ }
6435
+
6436
+ &.subtemplate-show {
6437
+ transition: none;
6438
+ background-color: @dropdown-menu-subtemplate-show-bg-color;
6439
+ box-shadow: @dropdown-menu-subtemplate-show-box-shadow;
6440
+
6441
+ &:hover {
6442
+ background-color: @dropdown-menu-subtemplate-show-hover-bg-color;
6443
+ box-shadow: @dropdown-menu-subtemplate-show-hover-box-shadow;
6444
+ }
6445
+
6446
+ .action-icon {
6447
+ color: @action-icon-hover-color;
6448
+ }
6449
+ }
6450
+
6451
+ &.last-item {
6452
+ margin: 0;
6453
+ }
6454
+
6455
+ .upload-action {
6456
+ width: 100%;
6457
+ height: 100%;
6458
+ display: flex;
6459
+ justify-content: center;
6460
+ align-items: center;
6461
+ }
6462
+
6463
+ .action-icon {
6464
+ color: @action-icon-color;
6465
+ }
6466
+
6467
+ .action-label {
6468
+ display: none;
6469
+ }
6470
+
6471
+ .filter-counter {
6472
+ position: absolute;
6473
+ left: 26px;
6474
+ top: 2px;
6475
+ display: inline-block;
6476
+ font-size: 12px;
6477
+ font-weight: 500;
6478
+ text-align: center;
6479
+ line-height: 16px;
6480
+ color: @action-item-filter-counter-color;
6481
+ min-width: 16px;
6482
+ height: 15px;
6483
+ padding: 0 4px;
6484
+ border-radius: 7.5px;
6485
+ background-color: @action-item-filter-counter-bg-color;
6486
+ }
6487
+
6488
+ .item-dropdown-menu {
6489
+ position: absolute;
6490
+ top: 100%;
6491
+ left: 0;
6492
+ padding: 8px 0;
6493
+ list-style: none;
6494
+ font-size: 13px;
6495
+ font-weight: 500;
6496
+ color: @dropdown-menu-color;
6497
+ border-radius: 2px;
6498
+ background-color: @dropdown-menu-bg-color;
6499
+ box-shadow: @dropdown-menu-box-shadow;
6500
+ margin-top: 1px;
6501
+ z-index: 10;
6502
+
6503
+ .item-dropdown-menu-list {
6504
+ margin: 0;
6505
+ display: block;
6506
+ padding: 0;
6507
+ list-style-type: none;
6508
+
6509
+ li {
6510
+ height: 32px;
6511
+ line-height: 32px;
6512
+ text-align: left;
6513
+ display: flex;
6514
+
6515
+ &:hover {
6516
+ background-color: @dropdown-menu-li-hover-bg-color;
6517
+
6518
+ .action-icon {
6519
+ color: @action-icon-hover-color;
6520
+ }
6521
+ }
6522
+
6523
+ .action-label {
6524
+ display: inline-block;
6525
+ white-space: nowrap;
6526
+ vertical-align: top;
6527
+ margin-right: 17px;
6528
+ }
6529
+
6530
+ .action-icon {
6531
+ color: @action-icon-color;
6532
+ font-size: 17px;
6533
+ display: inline-block;
6534
+ margin: 0 13px 0 21px;
6535
+ vertical-align: middle;
6536
+ }
6537
+ }
6538
+ }
6539
+ }
6540
+ }
6541
+ }
6542
+
6543
+ .action-subtemplate {
6544
+ border-bottom-left-radius: 4px;
6545
+ border-bottom-right-radius: 4px;
6546
+ border: @action-subtemplate-border;
6547
+ background-color: @action-subtemplate-bg-color;
6548
+ box-shadow: @action-subtemplate-box-shadow;
6549
+ position: fixed;
6550
+ margin: -2px 0 0 -1px;
6551
+ z-index: 10;
6552
+ }
6553
+ }
6554
+
6555
+ .more-info-wrapper {
6556
+ .more-info-color-set();
6557
+
6558
+ position: relative;
6559
+ display: inline-flex;
6560
+ align-items: center;
6561
+ height: 36px;
6562
+ margin-left: 8px;
6563
+
6564
+ .question-mark {
6565
+ cursor: default;
6566
+
6567
+ &::before {
6568
+ color: @icon-help-round-before-color;
6569
+ background-color: @icon-help-round-before-bg-color;
6570
+ }
6571
+
6572
+ &:hover {
6573
+ &::before {
6574
+ color: @icon-help-round-hover-before-color;
6575
+ }
6576
+
6577
+ + .row-description-wrapper.row-description {
6578
+ color: @icon-help-description-hover-color;
6579
+ }
6580
+ }
6581
+
6582
+ &.igz-icon-alert-message {
6583
+ &::before {
6584
+ color: @icon-warn-hover-before-color;
6585
+ background-color: @icon-warn-before-bg-color;
6586
+ }
6587
+
6588
+ &:hover {
6589
+ &::before {
6590
+ color: @icon-warn-before-color;
6591
+ }
6592
+ }
6593
+ }
6594
+
6595
+ &.click-trigger {
6596
+ cursor: pointer;
6597
+ }
6598
+
6599
+ &+ .row-description-wrapper {
6600
+ display: none;
6601
+ }
6602
+
6603
+ &:not(.click-trigger):hover + .row-description-wrapper,
6604
+ &.open + .row-description-wrapper {
6605
+ display: block;
6606
+ }
6607
+ }
6608
+
6609
+ .row-description-wrapper {
6610
+ position: fixed;
6611
+ z-index: 4;
6612
+ }
6613
+
6614
+ .row-description {
6615
+ width: 240px;
6616
+ padding: 16px 19px;
6617
+ position: absolute;
6618
+ border-radius: 2px;
6619
+ box-shadow: @row-description-box-shadow;
6620
+ background-color: @row-description-bg-color;
6621
+ color: @row-description-color;
6622
+ font-family: @font-family-sans-serif;
6623
+ font-size: 12px;
6624
+ font-weight: 400;
6625
+ white-space: pre-line;
6626
+ line-height: normal;
6627
+ overflow-wrap: break-word;
6628
+
6629
+ &::before {
6630
+ position: absolute;
6631
+ content: '';
6632
+ }
6633
+
6634
+ &.top,
6635
+ &.bottom {
6636
+ left: -114px;
6637
+
6638
+ &::before {
6639
+ right: calc(50% - 9px);
6640
+ }
6641
+
6642
+ &-left {
6643
+ left: -220px;
6644
+
6645
+ &::before {
6646
+ right: 4px;
6647
+ }
6648
+ }
6649
+
6650
+ &-right {
6651
+ left: -6px;
6652
+
6653
+ &::before {
6654
+ right: calc(100% - 22px);
6655
+ }
6656
+ }
6657
+ }
6658
+
6659
+ &.top,
6660
+ &.top-left,
6661
+ &.top-right {
6662
+ bottom: 35px;
6663
+
6664
+ &::before {
6665
+ .triangle-arrow(down; @row-description-triangle-color; 8px; 10px);
6666
+
6667
+ bottom: -10px;
6668
+ }
6669
+ }
6670
+
6671
+ &.bottom,
6672
+ &.bottom-left,
6673
+ &.bottom-right {
6674
+ top: 8px;
6675
+
6676
+ &::before {
6677
+ .triangle-arrow(up; @row-description-triangle-color; 8px; 10px);
6678
+
6679
+ top: -10px;
6680
+ }
6681
+ }
6682
+
6683
+ &.right,
6684
+ &.left {
6685
+ top: -30px;
6686
+
6687
+ &::before {
6688
+ top: 7px;
6689
+ }
6690
+ }
6691
+
6692
+ &.right {
6693
+ left: 26px;
6694
+
6695
+ &::before {
6696
+ .triangle-arrow(right; @row-description-triangle-color; 8px; 10px);
6697
+
6698
+ left: -8px;
6699
+ }
6700
+ }
6701
+
6702
+ &.left {
6703
+ left: -250px;
6704
+
6705
+ &::before {
6706
+ .triangle-arrow(left; @row-description-triangle-color; 8px; 10px);
6707
+
6708
+ right: -8px;
6709
+ }
6710
+ }
6711
+ }
6712
+ }
6713
+
6714
+ .igz-multiple-checkboxes {
6715
+ .multiple-checkboxes-color-set();
6716
+
6717
+ .igz-multiple-checkboxes-list {
6718
+ list-style-type: none;
6719
+ -webkit-margin-before: 0;
6720
+ -webkit-margin-after: 0;
6721
+ -webkit-padding-start: 0;
6722
+ margin: 0;
6723
+ padding: 0;
6724
+
6725
+ .multiple-checkboxes-option {
6726
+ display: flex;
6727
+ margin: 5px 0;
6728
+
6729
+ .more-info-wrapper {
6730
+ height: auto;
6731
+
6732
+ .igz-icon-help-round {
6733
+ font-size: 14px;
6734
+ }
6735
+ }
6736
+ }
6737
+ }
6738
+
6739
+ .checkboxes-dropdown-field {
6740
+ border: @checkboxes-dropdown-field-border;
6741
+ border-radius: 2px;
6742
+ height: 100%;
6743
+ color: @checkboxes-dropdown-field-border;
6744
+ cursor: pointer;
6745
+ outline: none;
6746
+ font-family: @font-family-sans-serif;
6747
+ margin-top: 0;
6748
+ display: flex;
6749
+ align-items: center;
6750
+ justify-content: space-between;
6751
+
6752
+ &.opened {
6753
+ background-color: @checkboxes-dropdown-field-opened-bg-color;
6754
+ }
6755
+
6756
+ .checkboxes-dropdown-title {
6757
+ font-size: 12px;
6758
+ font-weight: 500;
6759
+ text-transform: uppercase;
6760
+ }
6761
+ }
6762
+
6763
+ .checkboxes-dropdown-container {
6764
+ background-color: @checkboxes-dropdown-container-bg-color;
6765
+ border-radius: 2px;
6766
+ box-shadow: @checkboxes-dropdown-container-box-shadow;
6767
+ color: @checkboxes-dropdown-container-color;
6768
+ overflow: hidden;
6769
+ position: absolute;
6770
+ z-index: 1000;
6771
+ min-width: 236px;
6772
+ height: 100%;
6773
+ margin-top: 2px;
6774
+ margin-bottom: 2px;
6775
+ padding: 8px 0;
6776
+
6777
+ .checkboxes-dropdown-scrollbar-container {
6778
+ padding-bottom: 36px;
6779
+ height: 100%;
6780
+
6781
+ .search-input-wrapper {
6782
+ .checkboxes-search-input {
6783
+ .validating-input-field {
6784
+ height: 32px;
6785
+ width: 100%;
6786
+ color: @checkboxes-search-input-color;
6787
6787
  outline: none;
6788
6788
  border: @checkboxes-search-input-border;
6789
6789
  border-radius: 2px;
@@ -6871,73 +6871,34 @@ yx-axis
6871
6871
  display: inline-block;
6872
6872
  vertical-align: top;
6873
6873
  position: relative;
6874
- color: @checkboxes-add-item-btn-color;
6875
- text-transform: uppercase;
6876
- line-height: initial;
6877
- background-color: transparent;
6878
- border: none;
6879
- outline: none;
6880
- }
6881
- }
6882
- }
6883
-
6884
- .master-checkbox {
6885
- cursor: pointer;
6886
- color: @master-checkbox-color;
6887
- font-size: 16px;
6888
- line-height: 1;
6889
- vertical-align: middle;
6890
-
6891
- &.igz-icon-checkbox-checked {
6892
- color: @master-checkbox-checked-color;
6893
- }
6894
- }
6895
-
6896
- .checkboxes-list {
6897
- list-style-type: none;
6898
-
6899
- .multiple-checkboxes-option {
6900
- color: @checkboxes-list-option-color;
6901
- margin: 5px 0;
6902
- }
6903
- }
6904
- }
6905
-
6906
- .igz-navigation-tabs {
6907
- .navigation-tabs-color-set();
6908
-
6909
- background-color: @navigation-tabs-bg-color;
6910
- height: 56px;
6911
- padding-top: 7px;
6912
-
6913
- .navigation-tab {
6914
- float: left;
6915
- height: 32px;
6916
- padding: 15px 24px 0;
6917
- font-family: @font-family-sans-serif;
6918
- color: @navigation-tab-color;
6919
- font-size: 14px;
6920
- text-align: center;
6921
- cursor: pointer;
6922
- border-bottom: @navigation-tab-border-bottom;
6923
- box-sizing: content-box;
6924
-
6925
- &.active, &.active:hover {
6926
- background-color: @navigation-tab-active-hover-bg-color;
6927
- color: @navigation-tab-active-hover-color;
6928
- border-bottom: @navigation-tab-active-hover-border-bottom;
6874
+ color: @checkboxes-add-item-btn-color;
6875
+ text-transform: uppercase;
6876
+ line-height: initial;
6877
+ background-color: transparent;
6878
+ border: none;
6879
+ outline: none;
6880
+ }
6929
6881
  }
6882
+ }
6930
6883
 
6931
- &:hover {
6932
- background-color: @navigation-tab-hover-bg-color;
6933
- }
6884
+ .master-checkbox {
6885
+ cursor: pointer;
6886
+ color: @master-checkbox-color;
6887
+ font-size: 16px;
6888
+ line-height: 1;
6889
+ vertical-align: middle;
6934
6890
 
6935
- &.active {
6936
- background-color: @navigation-tab-active-bg-color;
6891
+ &.igz-icon-checkbox-checked {
6892
+ color: @master-checkbox-checked-color;
6937
6893
  }
6894
+ }
6938
6895
 
6939
- @media screen and (max-width: 940px) {
6940
- padding: 15px 12px 0;
6896
+ .checkboxes-list {
6897
+ list-style-type: none;
6898
+
6899
+ .multiple-checkboxes-option {
6900
+ color: @checkboxes-list-option-color;
6901
+ margin: 5px 0;
6941
6902
  }
6942
6903
  }
6943
6904
  }
@@ -7095,6 +7056,45 @@ yx-axis
7095
7056
  }
7096
7057
  }
7097
7058
 
7059
+ .igz-navigation-tabs {
7060
+ .navigation-tabs-color-set();
7061
+
7062
+ background-color: @navigation-tabs-bg-color;
7063
+ height: 56px;
7064
+ padding-top: 7px;
7065
+
7066
+ .navigation-tab {
7067
+ float: left;
7068
+ height: 32px;
7069
+ padding: 15px 24px 0;
7070
+ font-family: @font-family-sans-serif;
7071
+ color: @navigation-tab-color;
7072
+ font-size: 14px;
7073
+ text-align: center;
7074
+ cursor: pointer;
7075
+ border-bottom: @navigation-tab-border-bottom;
7076
+ box-sizing: content-box;
7077
+
7078
+ &.active, &.active:hover {
7079
+ background-color: @navigation-tab-active-hover-bg-color;
7080
+ color: @navigation-tab-active-hover-color;
7081
+ border-bottom: @navigation-tab-active-hover-border-bottom;
7082
+ }
7083
+
7084
+ &:hover {
7085
+ background-color: @navigation-tab-hover-bg-color;
7086
+ }
7087
+
7088
+ &.active {
7089
+ background-color: @navigation-tab-active-bg-color;
7090
+ }
7091
+
7092
+ @media screen and (max-width: 940px) {
7093
+ padding: 15px 12px 0;
7094
+ }
7095
+ }
7096
+ }
7097
+
7098
7098
  .igz-pagination {
7099
7099
  .pagination-color-set();
7100
7100
 
@@ -7141,292 +7141,105 @@ yx-axis
7141
7141
  .dropdown-arrow {
7142
7142
  border: none;
7143
7143
 
7144
- &:hover, &:active {
7145
- border: none;
7146
- background: none;
7147
- box-shadow: none;
7148
- }
7149
- }
7150
-
7151
- &:focus {
7152
- .dropdown-selected-item {
7153
- border: none;
7154
- }
7155
- }
7156
- }
7157
-
7158
- .default-dropdown-container {
7159
- width: 66px;
7160
-
7161
- .list-item {
7162
- padding-left: 15px;
7163
-
7164
- .list-item-label {
7165
- margin-right: 10px;
7166
- }
7167
- }
7168
- }
7169
- }
7170
-
7171
- .jump-to-page {
7172
- margin-left: 7px;
7173
-
7174
- & > div, .jump-to-page-input {
7175
- display: inline-block;
7176
- vertical-align: baseline;
7177
- }
7178
-
7179
- .to-page-prev, .to-page-next {
7180
- width: 41px;
7181
- line-height: 34px;
7182
- height: 36px;
7183
- vertical-align: top;
7184
- position: relative;
7185
-
7186
- &:not(:active) {
7187
- background-color: transparent;
7188
- }
7189
-
7190
- &:not(:hover):not(:active):not(:disabled):not(.disabled) {
7191
- color: @page-prev-next-color;
7192
- }
7193
-
7194
- &:before {
7195
- line-height: 34px;
7196
- }
7197
- }
7198
-
7199
- .to-page-prev {
7200
- border-radius: 2px 0 0 2px;
7201
-
7202
- &::before {
7203
- margin-left: -2px;
7204
- }
7205
- }
7206
-
7207
- .to-page-next {
7208
- border-radius: 0 2px 2px 0;
7209
- }
7210
-
7211
- .title {
7212
- margin: 0 0 0 14px;
7213
- }
7214
-
7215
- .page-number {
7216
- min-width: 30px;
7217
- height: 36px;
7218
- line-height: 36px;
7219
- text-align: center;
7220
- }
7221
-
7222
- .validating-input-field {
7223
- background-color: @input-field-bg-color;
7224
-
7225
- .input-field {
7226
- width: 43px;
7227
- height: 36px;
7228
- border-radius: 0;
7229
- box-shadow: @input-field-box-shadow;
7230
- border: 1px solid @input-field-border-color;
7231
- border-left: 0 none transparent;
7232
- border-right: 0 none transparent;
7233
- font-family: @font-family-sans-serif;
7234
- font-size: 14px;
7235
- font-weight: 500;
7236
- color: @input-field-color;
7237
- text-align: center;
7238
-
7239
- &:hover {
7240
- border: @input-field-hover-border;
7241
- }
7242
- }
7243
- }
7244
- }
7245
- }
7246
- .search-input {
7247
- .search-input-color-set();
7248
-
7249
- position: relative;
7250
- color: @search-input-color;
7251
-
7252
- .container-search-input {
7253
- background-color: @search-input-bg-color;
7254
- border: 0;
7255
- font-family: @font-family-sans-serif;
7256
- font-size: 15px;
7257
- font-weight: 400;
7258
- height: 52px;
7259
- line-height: 52px;
7260
- margin: 0;
7261
- outline: 0;
7262
- padding-right: 20px;
7263
- width: 100%;
7264
-
7265
- &::-webkit-input-placeholder {
7266
- color: @search-input-placeholder-color;
7267
- }
7268
-
7269
- &:-moz-placeholder { /* Firefox 18- */
7270
- color: @search-input-placeholder-color;
7271
- }
7272
-
7273
- &::-moz-placeholder { /* Firefox 19+ */
7274
- color: @search-input-placeholder-color;
7275
- }
7276
-
7277
- &:-ms-input-placeholder {
7278
- color: @search-input-placeholder-color;
7279
- }
7280
-
7281
- &:focus {
7282
- &, & + .igz-icon-search:before {
7283
- color: @search-input-focus-icon-search-before-color;
7284
- }
7285
-
7286
- &::-webkit-input-placeholder {
7287
- color: @search-input-focus-placeholder-color;
7288
- }
7289
-
7290
- &:-moz-placeholder { /* Firefox 18- */
7291
- color: @search-input-focus-placeholder-color;
7292
- }
7293
-
7294
- &::-moz-placeholder { /* Firefox 19+ */
7295
- color: @search-input-focus-placeholder-color;
7296
- }
7297
-
7298
- &:-ms-input-placeholder {
7299
- color: @search-input-focus-placeholder-color;
7300
- }
7301
-
7302
- &::placeholder {
7303
- /* modern browser versions */
7304
- color: @search-input-focus-placeholder-color !important;
7305
- }
7306
- }
7307
- }
7308
-
7309
- .igz-icon-search {
7310
- font-size: 16px;
7311
- height: 16px;
7312
- position: absolute;
7313
- right: 0;
7314
- top: 17px;
7315
- width: 16px;
7316
- z-index: 1;
7317
- }
7318
-
7319
- .clear-button {
7320
- font-size: 10px;
7321
- position: absolute;
7322
- right: 4px;
7323
- top: 17px;
7324
- cursor: pointer;
7325
- color: @clear-button-color;
7326
- padding: 4px 5px 2px;
7327
- opacity: 0.64;
7328
- background-color: @clear-button-bg-color;
7329
- border-radius: 50%;
7330
- line-height: initial;
7144
+ &:hover, &:active {
7145
+ border: none;
7146
+ background: none;
7147
+ box-shadow: none;
7148
+ }
7149
+ }
7331
7150
 
7332
- &:hover {
7333
- opacity: 1;
7151
+ &:focus {
7152
+ .dropdown-selected-item {
7153
+ border: none;
7154
+ }
7155
+ }
7334
7156
  }
7335
- }
7336
7157
 
7337
- input::-ms-clear {
7338
- display: none;
7339
- }
7340
- }
7158
+ .default-dropdown-container {
7159
+ width: 66px;
7341
7160
 
7342
- .search-input-actions-bar {
7343
- .search-input-color-set();
7161
+ .list-item {
7162
+ padding-left: 15px;
7344
7163
 
7345
- position: relative;
7346
- .container-search-input {
7347
- border: 0;
7348
- margin: 0;
7349
- font-family: @font-family-sans-serif;
7350
- font-size: 14px;
7351
- height: 52px;
7352
- line-height: 52px;
7353
- padding: 0 25px 0 45px;
7354
- outline: 0;
7355
- width: 100%;
7164
+ .list-item-label {
7165
+ margin-right: 10px;
7166
+ }
7167
+ }
7168
+ }
7356
7169
  }
7357
7170
 
7358
- .igz-icon-search {
7359
- color: @search-input-actions-bar-icon-search-color;
7360
- font-size: 16px;
7361
- height: 16px;
7362
- position: absolute;
7363
- left: 18px;
7364
- top: 17px;
7365
- width: 16px;
7366
- z-index: 1;
7367
- }
7171
+ .jump-to-page {
7172
+ margin-left: 7px;
7368
7173
 
7369
- input::-ms-clear {
7370
- display: none;
7371
- }
7372
- }
7174
+ & > div, .jump-to-page-input {
7175
+ display: inline-block;
7176
+ vertical-align: baseline;
7177
+ }
7373
7178
 
7374
- .search-input-not-found {
7375
- .search-input-color-set();
7179
+ .to-page-prev, .to-page-next {
7180
+ width: 41px;
7181
+ line-height: 34px;
7182
+ height: 36px;
7183
+ vertical-align: top;
7184
+ position: relative;
7376
7185
 
7377
- color: @search-input-not-found-color;
7378
- font-family: @font-family-sans-serif;
7379
- font-size: 14px;
7380
- display: flex;
7381
- flex-direction: column;
7382
- justify-content: center;
7383
- align-items: center;
7384
- margin-top: 9px;
7186
+ &:not(:active) {
7187
+ background-color: transparent;
7188
+ }
7385
7189
 
7386
- .search-message {
7387
- min-height: 49px;
7388
- line-height: 49px;
7389
- width: 100%;
7390
- text-align: center;
7391
- letter-spacing: 0.1px;
7392
- border: @search-input-not-found-message-border;
7393
- }
7190
+ &:not(:hover):not(:active):not(:disabled):not(.disabled) {
7191
+ color: @page-prev-next-color;
7192
+ }
7394
7193
 
7395
- .create-item-button {
7396
- display: flex;
7397
- align-items: center;
7398
- padding: 0 19px 0 7px;
7399
- margin-top: 8px;
7400
- border-radius: 12px;
7401
- height: 24px;
7402
- color: @create-item-btn-color;
7403
- font-size: 12px;
7404
- font-weight: bold;
7405
- cursor: pointer;
7406
- background-color: @create-item-btn-bg-color;
7407
- border: @create-item-btn-border;
7408
- text-transform: uppercase;
7194
+ &:before {
7195
+ line-height: 34px;
7196
+ }
7197
+ }
7409
7198
 
7410
- &:hover {
7411
- background-color: @create-item-btn-hover-bg-color;
7412
- box-shadow: @create-item-btn-hover-box-shadow;
7413
- border: @create-item-btn-hover-border;
7199
+ .to-page-prev {
7200
+ border-radius: 2px 0 0 2px;
7201
+
7202
+ &::before {
7203
+ margin-left: -2px;
7204
+ }
7414
7205
  }
7415
7206
 
7416
- &:focus {
7417
- outline: none;
7207
+ .to-page-next {
7208
+ border-radius: 0 2px 2px 0;
7418
7209
  }
7419
7210
 
7420
- &:active {
7421
- background-color: @create-item-btn-active-bg-color;
7422
- box-shadow: @create-item-btn-active-box-shadow;
7423
- border: none;
7211
+ .title {
7212
+ margin: 0 0 0 14px;
7424
7213
  }
7425
7214
 
7426
- .igz-icon-add {
7427
- font-size: 10px;
7428
- line-height: 15px;
7429
- padding-right: 8px;
7215
+ .page-number {
7216
+ min-width: 30px;
7217
+ height: 36px;
7218
+ line-height: 36px;
7219
+ text-align: center;
7220
+ }
7221
+
7222
+ .validating-input-field {
7223
+ background-color: @input-field-bg-color;
7224
+
7225
+ .input-field {
7226
+ width: 43px;
7227
+ height: 36px;
7228
+ border-radius: 0;
7229
+ box-shadow: @input-field-box-shadow;
7230
+ border: 1px solid @input-field-border-color;
7231
+ border-left: 0 none transparent;
7232
+ border-right: 0 none transparent;
7233
+ font-family: @font-family-sans-serif;
7234
+ font-size: 14px;
7235
+ font-weight: 500;
7236
+ color: @input-field-color;
7237
+ text-align: center;
7238
+
7239
+ &:hover {
7240
+ border: @input-field-hover-border;
7241
+ }
7242
+ }
7430
7243
  }
7431
7244
  }
7432
7245
  }
@@ -7602,131 +7415,241 @@ yx-axis
7602
7415
  width: 18%;
7603
7416
  padding-right: 0;
7604
7417
 
7605
- .igz-slider-input-current-value-text {
7606
- margin-right: 4px;
7418
+ .igz-slider-input-current-value-text {
7419
+ margin-right: 4px;
7420
+ }
7421
+ }
7422
+
7423
+ &.with-value-unit {
7424
+ padding-right: 21px;
7425
+ }
7426
+
7427
+ .igz-slider-input-current-value-text {
7428
+ color: @slider-input-current-value-text-color;
7429
+ font-size: 13px;
7430
+ font-weight: 400;
7431
+ background-color: @slider-input-current-value-text-bg-color;
7432
+ text-align: right;
7433
+ }
7434
+ }
7435
+
7436
+ .igz-slider-input-unit-label {
7437
+ position: absolute;
7438
+ right: 0;
7439
+ min-height: 30px;
7440
+ line-height: 30px;
7441
+ }
7442
+
7443
+ // Units dropdown
7444
+ .igz-slider-input-units-dropdown {
7445
+ float: left;
7446
+
7447
+ .default-dropdown {
7448
+ height: 30px;
7449
+
7450
+ .default-dropdown-field {
7451
+ border: none;
7452
+ background-color: @default-dropdown-field-bg-color;
7453
+
7454
+ .dropdown-selected-item {
7455
+ padding-left: 0;
7456
+ }
7457
+
7458
+ .dropdown-arrow {
7459
+ margin-right: 0;
7460
+ }
7461
+ }
7462
+ }
7463
+ }
7464
+ }
7465
+
7466
+ .search-input {
7467
+ .search-input-color-set();
7468
+
7469
+ position: relative;
7470
+ color: @search-input-color;
7471
+
7472
+ .container-search-input {
7473
+ background-color: @search-input-bg-color;
7474
+ border: 0;
7475
+ font-family: @font-family-sans-serif;
7476
+ font-size: 15px;
7477
+ font-weight: 400;
7478
+ height: 52px;
7479
+ line-height: 52px;
7480
+ margin: 0;
7481
+ outline: 0;
7482
+ padding-right: 20px;
7483
+ width: 100%;
7484
+
7485
+ &::-webkit-input-placeholder {
7486
+ color: @search-input-placeholder-color;
7487
+ }
7488
+
7489
+ &:-moz-placeholder { /* Firefox 18- */
7490
+ color: @search-input-placeholder-color;
7491
+ }
7492
+
7493
+ &::-moz-placeholder { /* Firefox 19+ */
7494
+ color: @search-input-placeholder-color;
7495
+ }
7496
+
7497
+ &:-ms-input-placeholder {
7498
+ color: @search-input-placeholder-color;
7499
+ }
7500
+
7501
+ &:focus {
7502
+ &, & + .igz-icon-search:before {
7503
+ color: @search-input-focus-icon-search-before-color;
7504
+ }
7505
+
7506
+ &::-webkit-input-placeholder {
7507
+ color: @search-input-focus-placeholder-color;
7508
+ }
7509
+
7510
+ &:-moz-placeholder { /* Firefox 18- */
7511
+ color: @search-input-focus-placeholder-color;
7512
+ }
7513
+
7514
+ &::-moz-placeholder { /* Firefox 19+ */
7515
+ color: @search-input-focus-placeholder-color;
7607
7516
  }
7608
- }
7609
7517
 
7610
- &.with-value-unit {
7611
- padding-right: 21px;
7612
- }
7518
+ &:-ms-input-placeholder {
7519
+ color: @search-input-focus-placeholder-color;
7520
+ }
7613
7521
 
7614
- .igz-slider-input-current-value-text {
7615
- color: @slider-input-current-value-text-color;
7616
- font-size: 13px;
7617
- font-weight: 400;
7618
- background-color: @slider-input-current-value-text-bg-color;
7619
- text-align: right;
7522
+ &::placeholder {
7523
+ /* modern browser versions */
7524
+ color: @search-input-focus-placeholder-color !important;
7525
+ }
7620
7526
  }
7621
7527
  }
7622
7528
 
7623
- .igz-slider-input-unit-label {
7529
+ .igz-icon-search {
7530
+ font-size: 16px;
7531
+ height: 16px;
7624
7532
  position: absolute;
7625
7533
  right: 0;
7626
- min-height: 30px;
7627
- line-height: 30px;
7534
+ top: 17px;
7535
+ width: 16px;
7536
+ z-index: 1;
7628
7537
  }
7629
7538
 
7630
- // Units dropdown
7631
- .igz-slider-input-units-dropdown {
7632
- float: left;
7633
-
7634
- .default-dropdown {
7635
- height: 30px;
7636
-
7637
- .default-dropdown-field {
7638
- border: none;
7639
- background-color: @default-dropdown-field-bg-color;
7640
-
7641
- .dropdown-selected-item {
7642
- padding-left: 0;
7643
- }
7539
+ .clear-button {
7540
+ font-size: 10px;
7541
+ position: absolute;
7542
+ right: 4px;
7543
+ top: 17px;
7544
+ cursor: pointer;
7545
+ color: @clear-button-color;
7546
+ padding: 4px 5px 2px;
7547
+ opacity: 0.64;
7548
+ background-color: @clear-button-bg-color;
7549
+ border-radius: 50%;
7550
+ line-height: initial;
7644
7551
 
7645
- .dropdown-arrow {
7646
- margin-right: 0;
7647
- }
7648
- }
7552
+ &:hover {
7553
+ opacity: 1;
7649
7554
  }
7650
7555
  }
7556
+
7557
+ input::-ms-clear {
7558
+ display: none;
7559
+ }
7651
7560
  }
7652
7561
 
7653
- .ngdialog.text-edit {
7654
- .text-edit-color-set();
7562
+ .search-input-actions-bar {
7563
+ .search-input-color-set();
7655
7564
 
7656
- .ngdialog-content {
7657
- padding: 0;
7658
- width: 1000px;
7659
- height: 678px;
7565
+ position: relative;
7566
+ .container-search-input {
7567
+ border: 0;
7568
+ margin: 0;
7569
+ font-family: @font-family-sans-serif;
7570
+ font-size: 14px;
7571
+ height: 52px;
7572
+ line-height: 52px;
7573
+ padding: 0 25px 0 45px;
7574
+ outline: 0;
7575
+ width: 100%;
7576
+ }
7660
7577
 
7661
- .text-preview-directive-wrapper {
7662
- .title {
7663
- margin: 25px 0 0 24px;
7664
- padding: 0 70px 0 0;
7665
- }
7578
+ .igz-icon-search {
7579
+ color: @search-input-actions-bar-icon-search-color;
7580
+ font-size: 16px;
7581
+ height: 16px;
7582
+ position: absolute;
7583
+ left: 18px;
7584
+ top: 17px;
7585
+ width: 16px;
7586
+ z-index: 1;
7587
+ }
7666
7588
 
7667
- .close-button {
7668
- position: absolute;
7669
- top: 24px;
7670
- right: 24px;
7671
- font-size: 18px;
7672
- color: @close-btn-color;
7673
- }
7589
+ input::-ms-clear {
7590
+ display: none;
7591
+ }
7592
+ }
7674
7593
 
7675
- .buttons {
7676
- margin-right: 24px;
7677
- }
7594
+ .search-input-not-found {
7595
+ .search-input-color-set();
7678
7596
 
7679
- .text-preview-wrapper {
7680
- background-color: @text-preview-wrapper-bg-color;
7681
- border-top: @text-preview-wrapper-border-top;
7682
- border-bottom: @text-preview-wrapper-border-bottom;
7683
- border-radius: 2px;
7684
- margin-bottom: 16px;
7685
- padding: 15px 22px 17px;
7686
- min-width: 690px;
7687
- height: 550px;
7597
+ color: @search-input-not-found-color;
7598
+ font-family: @font-family-sans-serif;
7599
+ font-size: 14px;
7600
+ display: flex;
7601
+ flex-direction: column;
7602
+ justify-content: center;
7603
+ align-items: center;
7604
+ margin-top: 9px;
7688
7605
 
7689
- .text-preview-container {
7690
- width: 100%;
7691
- line-height: 1.9;
7692
- text-align: left;
7693
- padding-right: 22px;
7694
- font-size: 13px;
7695
- color: @text-preview-container-color;
7696
- resize: none;
7697
- overflow: hidden;
7698
- border-color: @text-preview-container-border-color;
7699
- background-color: @text-preview-container-bg-color;
7700
- cursor: text;
7701
- }
7606
+ .search-message {
7607
+ min-height: 49px;
7608
+ line-height: 49px;
7609
+ width: 100%;
7610
+ text-align: center;
7611
+ letter-spacing: 0.1px;
7612
+ border: @search-input-not-found-message-border;
7613
+ }
7702
7614
 
7703
- .text-preview-container:focus {
7704
- outline: 0;
7705
- }
7615
+ .create-item-button {
7616
+ display: flex;
7617
+ align-items: center;
7618
+ padding: 0 19px 0 7px;
7619
+ margin-top: 8px;
7620
+ border-radius: 12px;
7621
+ height: 24px;
7622
+ color: @create-item-btn-color;
7623
+ font-size: 12px;
7624
+ font-weight: bold;
7625
+ cursor: pointer;
7626
+ background-color: @create-item-btn-bg-color;
7627
+ border: @create-item-btn-border;
7628
+ text-transform: uppercase;
7706
7629
 
7707
- .word-wrap-checkbox-wrapper {
7708
- width: 100%;
7709
- display: flex;
7710
- justify-content: flex-end;
7630
+ &:hover {
7631
+ background-color: @create-item-btn-hover-bg-color;
7632
+ box-shadow: @create-item-btn-hover-box-shadow;
7633
+ border: @create-item-btn-hover-border;
7634
+ }
7711
7635
 
7712
- .col-checkbox {
7713
- line-height: normal;
7714
- height: 25px;
7636
+ &:focus {
7637
+ outline: none;
7638
+ }
7715
7639
 
7716
- label:before {
7717
- font-size: 16px;
7718
- }
7719
- }
7720
- }
7721
- }
7640
+ &:active {
7641
+ background-color: @create-item-btn-active-bg-color;
7642
+ box-shadow: @create-item-btn-active-box-shadow;
7643
+ border: none;
7722
7644
  }
7723
- }
7724
7645
 
7725
- .ncl-monaco {
7726
- height: 500px;
7646
+ .igz-icon-add {
7647
+ font-size: 10px;
7648
+ line-height: 15px;
7649
+ padding-right: 8px;
7650
+ }
7727
7651
  }
7728
7652
  }
7729
-
7730
7653
  .splash-screen {
7731
7654
  .splash-screen-color-set();
7732
7655
 
@@ -7820,20 +7743,84 @@ yx-axis
7820
7743
  border: @alert-splash-screen-refresh-btn-border;
7821
7744
  text-transform: uppercase;
7822
7745
 
7823
- &:hover {
7824
- background-color: @alert-splash-screen-refresh-btn-hover-bg-color;
7825
- box-shadow: @alert-splash-screen-refresh-btn-hover-box-shadow;
7826
- }
7746
+ &:hover {
7747
+ background-color: @alert-splash-screen-refresh-btn-hover-bg-color;
7748
+ box-shadow: @alert-splash-screen-refresh-btn-hover-box-shadow;
7749
+ }
7750
+
7751
+ .igz-icon-refresh {
7752
+ font-size: 16px;
7753
+ margin-right: 8px;
7754
+ vertical-align: middle;
7755
+ }
7756
+ }
7757
+ }
7758
+ }
7759
+ }
7760
+ .toast-status-panel {
7761
+ .toast-status-panel-color-set();
7762
+
7763
+ margin-bottom: 20px;
7764
+ padding: 16px 36px 16px 12px;
7765
+ background-color: @toast-panel-bg-color;
7766
+ border: @toast-panel-border;
7767
+ position: relative;
7768
+
7769
+ &.in-progress {
7770
+ background-color: @toast-panel-in-progress-bg-color;
7771
+ border: @toast-panel-in-progress-border;
7772
+ }
7773
+
7774
+ &.failed {
7775
+ background-color: @toast-panel-failed-bg-color;
7776
+ border: @toast-panel-failed-border;
7777
+ }
7778
+
7779
+ .panel-status {
7780
+ color: @toast-panel-status-color;
7781
+ line-height: 24px;
7782
+ font-size: 14px;
7783
+ font-weight: 700;
7784
+ font-family: @font-family-sans-serif;
7785
+ align-items: center;
7786
+ display: flex;
7787
+ justify-content: center;
7788
+
7789
+ &.in-progress {
7790
+ color: @toast-panel-status-in-progress-color;
7791
+ }
7792
+
7793
+ &.failed {
7794
+ color: @toast-panel-status-failed-color;
7795
+ }
7796
+
7797
+ .panel-status-icon {
7798
+ font-size: 24px;
7827
7799
 
7828
- .igz-icon-refresh {
7829
- font-size: 16px;
7830
- margin-right: 8px;
7831
- vertical-align: middle;
7800
+ &.igz-icon-properties {
7801
+ -webkit-animation: rotation 4s infinite linear;
7802
+
7803
+ @-webkit-keyframes rotation {
7804
+ from {
7805
+ -webkit-transform: rotate(0deg);
7806
+ }
7807
+ to {
7808
+ -webkit-transform: rotate(359deg);
7809
+ }
7832
7810
  }
7833
7811
  }
7834
7812
  }
7813
+
7814
+ .msg-scrollable-container {
7815
+ max-height: 300px;
7816
+
7817
+ .panel-status-msg {
7818
+ margin: 0 8px;
7819
+ }
7820
+ }
7835
7821
  }
7836
7822
  }
7823
+
7837
7824
  .validating-input-field {
7838
7825
  .validating-input-field-color-set();
7839
7826
 
@@ -8079,162 +8066,479 @@ yx-axis
8079
8066
  color: @input-textarea-placeholder;
8080
8067
  }
8081
8068
 
8082
- ::-moz-placeholder {
8083
- /* Firefox 19+ */
8084
- color: @input-textarea-placeholder;
8085
- }
8069
+ ::-moz-placeholder {
8070
+ /* Firefox 19+ */
8071
+ color: @input-textarea-placeholder;
8072
+ }
8073
+
8074
+ :-ms-input-placeholder {
8075
+ /* - Internet Explorer 10–11
8076
+ - Internet Explorer Mobile 10-11 */
8077
+ color: @input-textarea-placeholder !important;
8078
+ }
8079
+
8080
+ ::placeholder {
8081
+ /* modern browser versions */
8082
+ color: @input-textarea-placeholder;
8083
+ }
8084
+
8085
+ //
8086
+ // textarea
8087
+ //
8088
+
8089
+ .textarea-field {
8090
+ overflow: hidden;
8091
+ padding: 7px 10px 6px 10px;
8092
+ resize: none;
8093
+
8094
+ &::-webkit-scrollbar {
8095
+ width: 4px;
8096
+ height: 4px;
8097
+ }
8098
+
8099
+ &::-webkit-scrollbar-thumb {
8100
+ background-color: @textarea-field-scrollbar-thumb-bg-color;
8101
+ border-radius: 16px;
8102
+ }
8103
+
8104
+ &:focus::-webkit-scrollbar-thumb {
8105
+ background-color: @textarea-field-focus-scrollbar-thumb-bg-color;
8106
+ }
8107
+ }
8108
+
8109
+ &.with-counter {
8110
+ margin-bottom: 20px;
8111
+
8112
+ .textarea-field {
8113
+ padding: 7px 30px 6px 10px;
8114
+ }
8115
+ }
8116
+
8117
+ //
8118
+ // Cron schedule
8119
+ //
8120
+
8121
+ .schedule-input-wrapper {
8122
+ display: flex;
8123
+ flex-flow: row wrap;
8124
+ align-items: baseline;
8125
+
8126
+ .field.invalid .cron-select {
8127
+ background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8128
+ border: @input-textarea-field-not-disabled-focus-invalid-border;
8129
+ }
8130
+
8131
+ .clear-button {
8132
+ margin-left: 15px;
8133
+ background-color: transparent;
8134
+ font-size: 14px;
8135
+ position: static;
8136
+ }
8137
+ }
8138
+ }
8139
+
8140
+ // an invalid input field should be displayed as invalid in case it is in a submitted form even if the field is pristine
8141
+ form.ng-submitted .validating-input-field {
8142
+ .validating-input-field-color-set();
8143
+
8144
+ .input-field, .textarea-field {
8145
+ &:not([disabled]):not([readonly]) {
8146
+ &.ng-invalid, &.invalid {
8147
+ &:focus {
8148
+ background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8149
+ border: @input-textarea-field-not-disabled-focus-invalid-border;
8150
+ }
8151
+
8152
+ &:not(:focus) {
8153
+ background-color: @input-textarea-field-not-disabled-invalid-bg-color;
8154
+ border: @input-textarea-field-not-disabled-invalid-border;
8155
+ }
8156
+ }
8157
+ }
8158
+ }
8159
+ }
8160
+
8161
+ .ngdialog.text-edit {
8162
+ .text-edit-color-set();
8163
+
8164
+ .ngdialog-content {
8165
+ padding: 0;
8166
+ width: 1000px;
8167
+ height: 678px;
8168
+
8169
+ .text-preview-directive-wrapper {
8170
+ .title {
8171
+ margin: 25px 0 0 24px;
8172
+ padding: 0 70px 0 0;
8173
+ }
8174
+
8175
+ .close-button {
8176
+ position: absolute;
8177
+ top: 24px;
8178
+ right: 24px;
8179
+ font-size: 18px;
8180
+ color: @close-btn-color;
8181
+ }
8182
+
8183
+ .buttons {
8184
+ margin-right: 24px;
8185
+ }
8186
+
8187
+ .text-preview-wrapper {
8188
+ background-color: @text-preview-wrapper-bg-color;
8189
+ border-top: @text-preview-wrapper-border-top;
8190
+ border-bottom: @text-preview-wrapper-border-bottom;
8191
+ border-radius: 2px;
8192
+ margin-bottom: 16px;
8193
+ padding: 15px 22px 17px;
8194
+ min-width: 690px;
8195
+ height: 550px;
8196
+
8197
+ .text-preview-container {
8198
+ width: 100%;
8199
+ line-height: 1.9;
8200
+ text-align: left;
8201
+ padding-right: 22px;
8202
+ font-size: 13px;
8203
+ color: @text-preview-container-color;
8204
+ resize: none;
8205
+ overflow: hidden;
8206
+ border-color: @text-preview-container-border-color;
8207
+ background-color: @text-preview-container-bg-color;
8208
+ cursor: text;
8209
+ }
8210
+
8211
+ .text-preview-container:focus {
8212
+ outline: 0;
8213
+ }
8214
+
8215
+ .word-wrap-checkbox-wrapper {
8216
+ width: 100%;
8217
+ display: flex;
8218
+ justify-content: flex-end;
8219
+
8220
+ .col-checkbox {
8221
+ line-height: normal;
8222
+ height: 25px;
8223
+
8224
+ label:before {
8225
+ font-size: 16px;
8226
+ }
8227
+ }
8228
+ }
8229
+ }
8230
+ }
8231
+ }
8232
+
8233
+ .ncl-monaco {
8234
+ height: 500px;
8235
+ }
8236
+ }
8237
+
8238
+ .igz-info-page-actions-bar {
8239
+ .actions-buttons-block {
8240
+ margin-top: 3px;
8241
+ margin-right: 17px;
8242
+ }
8243
+ }
8244
+ .ncl-primary-button {
8245
+ margin-left: 9px;
8246
+ }
8247
+
8248
+ .ncl-secondary-button {
8249
+ vertical-align: top;
8250
+ position: relative;
8251
+ }
8252
+
8253
+ .btn-close {
8254
+ color: .duskThree(0.64)[@color];
8255
+ right: 0;
8256
+ position: absolute;
8257
+ margin-top: 6px;
8258
+ margin-right: 24px;
8259
+ font-size: 14px;
8260
+ line-height: 14px;
8261
+ z-index: 11;
8262
+
8263
+ &:hover {
8264
+ color: .duskThree(1)[@color];
8265
+ }
8266
+ }
8267
+
8268
+ .ncl-new-entity-button {
8269
+ display: inline-block;
8270
+ vertical-align: top;
8271
+ position: relative;
8272
+ margin-left: 15px;
8273
+ }
8274
+
8275
+ .ngdialog {
8276
+ z-index: 10000;
8277
+ }
8278
+
8279
+ .ngdialog-theme-nuclio {
8280
+ @animation-duration: 0.2s;
8281
+ @animation-function: ease;
8282
+ display: flex;
8283
+ height: 100%;
8284
+ padding: 0 50px;
8285
+ min-width: 500px;
8286
+ align-items: center;
8287
+ justify-content: center;
8288
+
8289
+ .ngdialog-content {
8290
+ box-shadow: 0 10px 20px 0 .black(0.25)[@color];
8291
+ animation-duration: @animation-duration;
8292
+ animation-timing-function: @animation-function;
8293
+ font-family: @font-family-sans-serif;
8294
+ font-size: 16px;
8295
+ border-radius: 2px;
8296
+ max-width: 900px;
8297
+ background-color: @white;
8298
+ z-index: 5;
8299
+ position: relative;
8300
+ padding: 19px 24px 23px 24px;
8301
+
8302
+ /*
8303
+ * Confirms, alerts
8304
+ */
8305
+ .notification-text {
8306
+ margin: 30px 30px 0 0;
8307
+ max-height: 70vh;
8308
+ overflow: auto;
8086
8309
 
8087
- :-ms-input-placeholder {
8088
- /* - Internet Explorer 10–11
8089
- - Internet Explorer Mobile 10-11 */
8090
- color: @input-textarea-placeholder !important;
8091
- }
8310
+ .error-list {
8311
+ list-style-type: none;
8092
8312
 
8093
- ::placeholder {
8094
- /* modern browser versions */
8095
- color: @input-textarea-placeholder;
8096
- }
8313
+ .error-list-item {
8314
+ margin-bottom: 5px;
8315
+ }
8316
+ }
8317
+ }
8097
8318
 
8098
- //
8099
- // textarea
8100
- //
8319
+ .notification-text.description {
8320
+ margin: 10px 30px;
8321
+ }
8101
8322
 
8102
- .textarea-field {
8103
- overflow: hidden;
8104
- padding: 7px 10px 6px 10px;
8105
- resize: none;
8323
+ .buttons {
8324
+ text-align: right;
8106
8325
 
8107
- &::-webkit-scrollbar {
8108
- width: 4px;
8109
- height: 4px;
8326
+ button:not(:first-child) {
8327
+ margin-left: 8px;
8328
+ }
8110
8329
  }
8111
8330
 
8112
- &::-webkit-scrollbar-thumb {
8113
- background-color: @textarea-field-scrollbar-thumb-bg-color;
8114
- border-radius: 16px;
8331
+ /*
8332
+ * Create/edit dialogs
8333
+ */
8334
+ .close-button {
8335
+ position: absolute;
8336
+ right: 24px;
8337
+ top: 26px;
8338
+ line-height: 10px;
8339
+ font-size: 14px;
8340
+ color: .duskThree(0.64)[@color];
8341
+ cursor: pointer;
8115
8342
  }
8116
8343
 
8117
- &:focus::-webkit-scrollbar-thumb {
8118
- background-color: @textarea-field-focus-scrollbar-thumb-bg-color;
8344
+ .title {
8345
+ color: @dusk-three;
8346
+ font-family: @font-family-sans-serif;
8347
+ font-size: 20px;
8348
+ font-weight: 500;
8349
+ margin: 0 0 21px 0;
8350
+ padding-right: 24px;
8119
8351
  }
8120
- }
8121
8352
 
8122
- &.with-counter {
8123
- margin-bottom: 20px;
8353
+ .main-content {
8354
+ margin: 0 0 4px;
8124
8355
 
8125
- .textarea-field {
8126
- padding: 7px 30px 6px 10px;
8127
- }
8128
- }
8356
+ .field-group {
8357
+ padding: 0 0 20px;
8129
8358
 
8130
- //
8131
- // Cron schedule
8132
- //
8359
+ .field-label {
8360
+ color: @dusk-three;
8361
+ font-size: 14px;
8362
+ font-weight: 500;
8363
+ padding: 0;
8364
+ min-width: 50px;
8365
+ margin: 0 0 2px;
8366
+ }
8133
8367
 
8134
- .schedule-input-wrapper {
8135
- display: flex;
8136
- flex-flow: row wrap;
8137
- align-items: baseline;
8368
+ .field-input {
8369
+ position: relative;
8370
+ width: 400px;
8138
8371
 
8139
- .field.invalid .cron-select {
8140
- background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8141
- border: @input-textarea-field-not-disabled-focus-invalid-border;
8142
- }
8372
+ .validating-input-field {
8373
+ .input-field {
8374
+ padding-left: 17px;
8375
+ }
8143
8376
 
8144
- .clear-button {
8145
- margin-left: 15px;
8146
- background-color: transparent;
8147
- font-size: 14px;
8148
- position: static;
8377
+ .input-placeholder {
8378
+ left: 18px;
8379
+ font-style: italic;
8380
+ }
8381
+ }
8382
+
8383
+ .error {
8384
+ color: @darkish-pink;
8385
+ font-size: 12px;
8386
+ white-space: nowrap;
8387
+ }
8388
+ }
8389
+ }
8149
8390
  }
8150
8391
  }
8151
- }
8152
8392
 
8153
- // an invalid input field should be displayed as invalid in case it is in a submitted form even if the field is pristine
8154
- form.ng-submitted .validating-input-field {
8155
- .validating-input-field-color-set();
8393
+ &.delete-entity-dialog-wrapper {
8394
+ .ngdialog-content {
8395
+ padding: 30px 24px 23px 24px;
8156
8396
 
8157
- .input-field, .textarea-field {
8158
- &:not([disabled]):not([readonly]) {
8159
- &.ng-invalid, &.invalid {
8160
- &:focus {
8161
- background-color: @input-textarea-field-not-disabled-focus-invalid-bg-color;
8162
- border: @input-textarea-field-not-disabled-focus-invalid-border;
8163
- }
8397
+ .notification-text.title {
8398
+ text-align: center;
8399
+ padding-right: 0;
8400
+ color: @darkish-pink;
8401
+ font-size: 20px;
8402
+ font-weight: 500;
8403
+ letter-spacing: normal;
8404
+ margin: 11px 0 2px;
8405
+ }
8164
8406
 
8165
- &:not(:focus) {
8166
- background-color: @input-textarea-field-not-disabled-invalid-bg-color;
8167
- border: @input-textarea-field-not-disabled-invalid-border;
8168
- }
8407
+ .notification-text.description {
8408
+ text-align: center;
8409
+ margin: 0 37px;
8410
+ font-size: 16px;
8411
+ font-weight: normal;
8412
+ letter-spacing: normal;
8413
+ color: @dusk-three;
8414
+ }
8415
+
8416
+ .nuclio-alert-icon {
8417
+ background: url('/assets/images/ic-alert-message.svg');
8418
+ height: 29px;
8419
+ width: 34px;
8420
+ margin: 0 auto;
8421
+ }
8422
+
8423
+ .buttons {
8424
+ margin-top: 30px;
8169
8425
  }
8170
8426
  }
8171
8427
  }
8172
- }
8173
8428
 
8174
- .toast-status-panel {
8175
- .toast-status-panel-color-set();
8429
+ &.ngdialog.ngdialog-closing .ngdialog-content {
8430
+ animation-duration: @animation-duration;
8431
+ animation-timing-function: @animation-function;
8432
+ }
8176
8433
 
8177
- margin-bottom: 20px;
8178
- padding: 16px 36px 16px 12px;
8179
- background-color: @toast-panel-bg-color;
8180
- border: @toast-panel-border;
8181
- position: relative;
8434
+ .ngdialog-overlay {
8435
+ background: .black(0.6)[@color];
8436
+ border: 2px solid @black;
8437
+ animation-duration: @animation-duration;
8438
+ animation-timing-function: @animation-function;
8439
+ }
8182
8440
 
8183
- &.in-progress {
8184
- background-color: @toast-panel-in-progress-bg-color;
8185
- border: @toast-panel-in-progress-border;
8441
+ &.ngdialog.ngdialog-closing .ngdialog-overlay {
8442
+ animation-duration: @animation-duration;
8443
+ animation-timing-function: @animation-function;
8186
8444
  }
8187
8445
 
8188
- &.failed {
8189
- background-color: @toast-panel-failed-bg-color;
8190
- border: @toast-panel-failed-border;
8446
+ &.ngdialog.ng-login-modal .ngdialog-content {
8447
+ padding: 0;
8191
8448
  }
8449
+ }
8192
8450
 
8193
- .panel-status {
8194
- color: @toast-panel-status-color;
8195
- line-height: 24px;
8196
- font-size: 14px;
8197
- font-weight: 700;
8198
- font-family: @font-family-sans-serif;
8199
- align-items: center;
8451
+ body {
8452
+ .ncl-main-wrapper {
8453
+ padding: 64px 0 0 215px;
8454
+ width: 100%;
8455
+ height: 100%;
8456
+ }
8457
+
8458
+ .table-headers {
8200
8459
  display: flex;
8201
- justify-content: center;
8460
+ font-size: 14px;
8461
+ font-weight: bold;
8462
+ font-style: normal;
8463
+ font-stretch: normal;
8464
+ letter-spacing: normal;
8465
+ color: @dusk-three;
8466
+ margin-bottom: 2px;
8202
8467
 
8203
- &.in-progress {
8204
- color: @toast-panel-status-in-progress-color;
8205
- }
8468
+ .key-header {
8469
+ width: 34%;
8470
+ margin-left: 16px;
8206
8471
 
8207
- &.failed {
8208
- color: @toast-panel-status-failed-color;
8472
+ &:not(.use-type) {
8473
+ width: 36%;
8474
+ }
8209
8475
  }
8210
8476
 
8211
- .panel-status-icon {
8212
- font-size: 24px;
8213
-
8214
- &.igz-icon-properties {
8215
- -webkit-animation: rotation 4s infinite linear;
8216
-
8217
- @-webkit-keyframes rotation {
8218
- from {
8219
- -webkit-transform: rotate(0deg);
8220
- }
8221
- to {
8222
- -webkit-transform: rotate(359deg);
8223
- }
8224
- }
8225
- }
8477
+ .type-header {
8478
+ width: 12%;
8226
8479
  }
8227
8480
 
8228
- .msg-scrollable-container {
8229
- max-height: 300px;
8481
+ .value-header {
8482
+ width: 52%;
8230
8483
 
8231
- .panel-status-msg {
8232
- margin: 0 8px;
8484
+ &:not(.use-type) {
8485
+ width: 61%;
8233
8486
  }
8234
8487
  }
8235
8488
  }
8489
+
8490
+ .table-body:not(:last-child) {
8491
+ margin-bottom: 5px;
8492
+ }
8493
+ }
8494
+
8495
+
8496
+ .logs-common {
8497
+ font-family: "Source Code Pro", "Courier New", monospace;
8498
+ font-size: 14px;
8499
+ line-height: 1.1;
8500
+ text-align: left;
8501
+ white-space: pre-wrap;
8236
8502
  }
8503
+ .tooltip.custom-tooltip {
8504
+ transition-duration: 0s;
8505
+ z-index: 10001;
8506
+ opacity: 1;
8507
+
8508
+ .tooltip-arrow {
8509
+ display: block;
8510
+ margin-left: 0;
8511
+ position: absolute;
8512
+ top: -1px;
8513
+ width: 13px;
8514
+ height: 13px;
8515
+ transform: rotate(226deg);
8516
+ border-right: 1px solid @pale-grey;
8517
+ border-bottom: 1px solid @pale-grey;
8518
+ border-width: 1px;
8519
+ background-color: @white;
8520
+ }
8521
+
8522
+ &.bottom {
8523
+ margin-top: 8px;
8524
+ }
8525
+
8526
+ &.top {
8527
+ margin-top: 4px;
8528
+ }
8237
8529
 
8530
+ .tooltip-inner {
8531
+ background-color: @white;
8532
+ color: @dusk-three;
8533
+ border-radius: 2px;
8534
+ font-size: 14px;
8535
+ word-wrap: break-word;
8536
+ max-width: 280px;
8537
+ padding: 29px 30px;
8538
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
8539
+ border: solid 1px @pale-grey;
8540
+ }
8541
+ }
8238
8542
  .ncl-api-gateway-row {
8239
8543
  .common-table-cells-container {
8240
8544
  .common-table-cell {
@@ -8470,375 +8774,251 @@ form.ng-submitted .validating-input-field {
8470
8774
  &:after {
8471
8775
  content: '%';
8472
8776
  }
8473
- }
8474
- }
8475
- }
8476
-
8477
- .function-name-title {
8478
- vertical-align: middle;
8479
- line-height: normal;
8480
- }
8481
- }
8482
- }
8483
-
8484
- .create-canary-button {
8485
- position: absolute;
8486
- bottom: -40px;
8487
- .igz-icon-add-round {
8488
- margin: 0 8px 0 0;
8489
- }
8490
- }
8491
-
8492
- .primary-canary-slider {
8493
- z-index: 1;
8494
- height: 175px;
8495
- width: 100%;
8496
- display: flex;
8497
- justify-content: flex-start;
8498
- margin-left: 20px;
8499
-
8500
- .rzslider:not([disabled]).rz-vertical {
8501
- .rz-bar {
8502
- background-color: @dark-sky-blue;
8503
- border-radius: 0;
8504
- }
8505
-
8506
- .rz-pointer {
8507
- width: 27px;
8508
- height: 27px;
8509
- background-color: @white;
8510
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
8511
- border-radius: 50%;
8512
- left: -11px !important;
8513
- outline: 0 none transparent;
8514
-
8515
- &::after {
8516
- top: 11px;
8517
- left: 11px;
8518
- width: 5px;
8519
- height: 5px;
8520
- }
8521
- }
8522
- }
8523
- }
8524
- }
8525
- }
8526
- }
8527
-
8528
- .buttons-wrapper {
8529
- position: relative;
8530
- width: 100%;
8531
- margin-top: 32px;
8532
- }
8533
- }
8534
- }
8535
- }
8536
-
8537
- .igz-info-page-actions-bar {
8538
- .actions-buttons-block {
8539
- margin-top: 3px;
8540
- margin-right: 17px;
8541
- }
8542
- }
8543
- .ncl-primary-button {
8544
- margin-left: 9px;
8545
- }
8546
-
8547
- .ncl-secondary-button {
8548
- vertical-align: top;
8549
- position: relative;
8550
- }
8551
-
8552
- .btn-close {
8553
- color: .duskThree(0.64)[@color];
8554
- right: 0;
8555
- position: absolute;
8556
- margin-top: 6px;
8557
- margin-right: 24px;
8558
- font-size: 14px;
8559
- line-height: 14px;
8560
- z-index: 11;
8561
-
8562
- &:hover {
8563
- color: .duskThree(1)[@color];
8564
- }
8565
- }
8566
-
8567
- .ncl-new-entity-button {
8568
- display: inline-block;
8569
- vertical-align: top;
8570
- position: relative;
8571
- margin-left: 15px;
8572
- }
8573
-
8574
- .ngdialog {
8575
- z-index: 10000;
8576
- }
8577
-
8578
- .ngdialog-theme-nuclio {
8579
- @animation-duration: 0.2s;
8580
- @animation-function: ease;
8581
- display: flex;
8582
- height: 100%;
8583
- padding: 0 50px;
8584
- min-width: 500px;
8585
- align-items: center;
8586
- justify-content: center;
8587
-
8588
- .ngdialog-content {
8589
- box-shadow: 0 10px 20px 0 .black(0.25)[@color];
8590
- animation-duration: @animation-duration;
8591
- animation-timing-function: @animation-function;
8592
- font-family: @font-family-sans-serif;
8593
- font-size: 16px;
8594
- border-radius: 2px;
8595
- max-width: 900px;
8596
- background-color: @white;
8597
- z-index: 5;
8598
- position: relative;
8599
- padding: 19px 24px 23px 24px;
8600
-
8601
- /*
8602
- * Confirms, alerts
8603
- */
8604
- .notification-text {
8605
- margin: 30px 30px 0 0;
8606
- max-height: 70vh;
8607
- overflow: auto;
8608
-
8609
- .error-list {
8610
- list-style-type: none;
8611
-
8612
- .error-list-item {
8613
- margin-bottom: 5px;
8614
- }
8615
- }
8616
- }
8617
-
8618
- .notification-text.description {
8619
- margin: 10px 30px;
8620
- }
8621
-
8622
- .buttons {
8623
- text-align: right;
8624
-
8625
- button:not(:first-child) {
8626
- margin-left: 8px;
8627
- }
8628
- }
8629
-
8630
- /*
8631
- * Create/edit dialogs
8632
- */
8633
- .close-button {
8634
- position: absolute;
8635
- right: 24px;
8636
- top: 26px;
8637
- line-height: 10px;
8638
- font-size: 14px;
8639
- color: .duskThree(0.64)[@color];
8640
- cursor: pointer;
8641
- }
8642
-
8643
- .title {
8644
- color: @dusk-three;
8645
- font-family: @font-family-sans-serif;
8646
- font-size: 20px;
8647
- font-weight: 500;
8648
- margin: 0 0 21px 0;
8649
- padding-right: 24px;
8650
- }
8651
-
8652
- .main-content {
8653
- margin: 0 0 4px;
8654
-
8655
- .field-group {
8656
- padding: 0 0 20px;
8657
-
8658
- .field-label {
8659
- color: @dusk-three;
8660
- font-size: 14px;
8661
- font-weight: 500;
8662
- padding: 0;
8663
- min-width: 50px;
8664
- margin: 0 0 2px;
8665
- }
8666
-
8667
- .field-input {
8668
- position: relative;
8669
- width: 400px;
8777
+ }
8778
+ }
8779
+ }
8670
8780
 
8671
- .validating-input-field {
8672
- .input-field {
8673
- padding-left: 17px;
8781
+ .function-name-title {
8782
+ vertical-align: middle;
8783
+ line-height: normal;
8784
+ }
8785
+ }
8674
8786
  }
8675
8787
 
8676
- .input-placeholder {
8677
- left: 18px;
8678
- font-style: italic;
8788
+ .create-canary-button {
8789
+ position: absolute;
8790
+ bottom: -40px;
8791
+ .igz-icon-add-round {
8792
+ margin: 0 8px 0 0;
8793
+ }
8679
8794
  }
8680
- }
8681
8795
 
8682
- .error {
8683
- color: @darkish-pink;
8684
- font-size: 12px;
8685
- white-space: nowrap;
8796
+ .primary-canary-slider {
8797
+ z-index: 1;
8798
+ height: 175px;
8799
+ width: 100%;
8800
+ display: flex;
8801
+ justify-content: flex-start;
8802
+ margin-left: 20px;
8803
+
8804
+ .rzslider:not([disabled]).rz-vertical {
8805
+ .rz-bar {
8806
+ background-color: @dark-sky-blue;
8807
+ border-radius: 0;
8808
+ }
8809
+
8810
+ .rz-pointer {
8811
+ width: 27px;
8812
+ height: 27px;
8813
+ background-color: @white;
8814
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
8815
+ border-radius: 50%;
8816
+ left: -11px !important;
8817
+ outline: 0 none transparent;
8818
+
8819
+ &::after {
8820
+ top: 11px;
8821
+ left: 11px;
8822
+ width: 5px;
8823
+ height: 5px;
8824
+ }
8825
+ }
8826
+ }
8827
+ }
8686
8828
  }
8687
8829
  }
8688
8830
  }
8831
+
8832
+ .buttons-wrapper {
8833
+ position: relative;
8834
+ width: 100%;
8835
+ margin-top: 32px;
8836
+ }
8689
8837
  }
8690
8838
  }
8839
+ }
8691
8840
 
8692
- &.delete-entity-dialog-wrapper {
8693
- .ngdialog-content {
8694
- padding: 30px 24px 23px 24px;
8841
+ .deploy-deleted-function-dialog {
8842
+ .sub-title {
8843
+ font-size: 16px;
8844
+ color: @silver-chalice-two;
8845
+ }
8695
8846
 
8696
- .notification-text.title {
8697
- text-align: center;
8698
- padding-right: 0;
8699
- color: @darkish-pink;
8700
- font-size: 20px;
8701
- font-weight: 500;
8702
- letter-spacing: normal;
8703
- margin: 11px 0 2px;
8847
+ .buttons {
8848
+ display: flex;
8849
+ justify-content: flex-end;
8850
+ }
8851
+ }
8852
+
8853
+ .duplicate-function-dialog-wrapper {
8854
+ .main-content {
8855
+ .field-group {
8856
+ display: flex;
8857
+ flex-wrap: wrap;
8858
+ width: 450px;
8859
+
8860
+ .field-label.function-name-label,
8861
+ .field-input.function-name-input,
8862
+ .field-input.function-configuration-input {
8863
+ width: 100%;
8704
8864
  }
8705
8865
 
8706
- .notification-text.description {
8707
- text-align: center;
8708
- margin: 0 37px;
8709
- font-size: 16px;
8710
- font-weight: normal;
8711
- letter-spacing: normal;
8712
- color: @dusk-three;
8866
+ .field-label.function-configuration-label {
8867
+ width: 100%;
8868
+ line-height: 30px;
8713
8869
  }
8714
8870
 
8715
- .nuclio-alert-icon {
8716
- background: url('/assets/images/ic-alert-message.svg');
8717
- height: 29px;
8718
- width: 34px;
8719
- margin: 0 auto;
8871
+ .field-input.function-name-input,
8872
+ .field-input.function-configuration-input {
8873
+ .error {
8874
+ top: 38px;
8875
+ }
8720
8876
  }
8721
8877
 
8722
- .buttons {
8723
- margin-top: 30px;
8878
+ .field-label.function-configuration-path {
8879
+ font-size: 14px;
8880
+ margin-left: 3px;
8881
+ line-height: 30px;
8724
8882
  }
8725
8883
  }
8726
8884
  }
8885
+ }
8727
8886
 
8728
- &.ngdialog.ngdialog-closing .ngdialog-content {
8729
- animation-duration: @animation-duration;
8730
- animation-timing-function: @animation-function;
8731
- }
8887
+ .ncl-function-collapsing-row {
8888
+ background-color: @white;
8889
+ margin-bottom: 8px;
8732
8890
 
8733
- .ngdialog-overlay {
8734
- background: .black(0.6)[@color];
8735
- border: 2px solid @black;
8736
- animation-duration: @animation-duration;
8737
- animation-timing-function: @animation-function;
8738
- }
8891
+ .function-title-block {
8892
+ height: 50px;
8893
+ position: relative;
8894
+ background-color: @white;
8895
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
8896
+ border: solid 1px @pale-grey;
8739
8897
 
8740
- &.ngdialog.ngdialog-closing .ngdialog-overlay {
8741
- animation-duration: @animation-duration;
8742
- animation-timing-function: @animation-function;
8743
- }
8898
+ .common-table-cells-container {
8899
+ cursor: pointer;
8744
8900
 
8745
- &.ngdialog.ng-login-modal .ngdialog-content {
8746
- padding: 0;
8747
- }
8748
- }
8901
+ .common-table-cell-content {
8902
+ width: 100%;
8903
+ white-space: nowrap;
8904
+ overflow: hidden;
8905
+ text-overflow: ellipsis;
8906
+ min-width: 0;
8907
+ }
8749
8908
 
8750
- body {
8751
- .ncl-main-wrapper {
8752
- padding: 64px 0 0 215px;
8753
- width: 100%;
8754
- height: 100%;
8755
- }
8909
+ .description-content {
8910
+ position: relative;
8911
+ white-space: normal;
8912
+ max-height: 40px;
8913
+ }
8756
8914
 
8757
- .table-headers {
8758
- display: flex;
8759
- font-size: 14px;
8760
- font-weight: bold;
8761
- font-style: normal;
8762
- font-stretch: normal;
8763
- letter-spacing: normal;
8764
- color: @dusk-three;
8765
- margin-bottom: 2px;
8915
+ .common-table-cell {
8916
+ .status-icon {
8917
+ display: flex;
8918
+ font-size: 20px;
8919
+ cursor: pointer;
8920
+ margin-left: 9px;
8921
+ .duskThree(0.64);
8922
+ color: @color;
8923
+ }
8766
8924
 
8767
- .key-header {
8768
- width: 34%;
8769
- margin-left: 16px;
8925
+ .version-text {
8926
+ display: block;
8927
+ text-align: left;
8928
+ }
8770
8929
 
8771
- &:not(.use-type) {
8772
- width: 36%;
8930
+ .ncl-icon-api-gateway {
8931
+ font-size: 20px;
8932
+ position: absolute;
8933
+ right: 10px;
8934
+ }
8935
+
8936
+ .igz-action-panel {
8937
+ &.invocation-tooltip {
8938
+ height: 36px;
8939
+ width: 56px;
8940
+ }
8941
+ }
8773
8942
  }
8774
8943
  }
8775
8944
 
8776
- .type-header {
8777
- width: 12%;
8945
+ .function-row-collapse {
8946
+ justify-content: center;
8947
+ cursor: default;
8948
+
8949
+ .collapse-icon {
8950
+ cursor: pointer;
8951
+ background-color: transparent;
8952
+ position: absolute;
8953
+
8954
+ &.igz-icon-right, &.igz-icon-down {
8955
+ font-size: 12px;
8956
+ color: @dusk-three;
8957
+ }
8958
+ }
8959
+ }
8960
+
8961
+ .function-name {
8962
+ display: block;
8963
+ font-weight: bold;
8964
+ width: 90%;
8965
+ }
8966
+
8967
+ .function-status {
8968
+ min-width: 100px;
8969
+ }
8970
+
8971
+ .actions-menu {
8972
+ visibility: hidden;
8778
8973
  }
8779
8974
 
8780
- .value-header {
8781
- width: 52%;
8975
+ &.common-table-row {
8976
+ height: 49px;
8977
+
8978
+ &:hover {
8979
+ .function-row-collapse {
8980
+ background-color: @white
8981
+ }
8982
+ .actions-menu {
8983
+ visibility: visible;
8984
+ background-color: @white;
8985
+ }
8986
+ igz-action-checkbox:not(.invisible) {
8987
+ visibility: visible;
8988
+ }
8989
+ }
8990
+
8991
+ igz-action-checkbox {
8992
+ visibility: hidden;
8782
8993
 
8783
- &:not(.use-type) {
8784
- width: 61%;
8994
+ &.visible {
8995
+ visibility: visible;
8996
+ }
8785
8997
  }
8786
8998
  }
8787
8999
  }
8788
9000
 
8789
- .table-body:not(:last-child) {
8790
- margin-bottom: 5px;
8791
- }
8792
- }
8793
-
8794
-
8795
- .logs-common {
8796
- font-family: "Source Code Pro", "Courier New", monospace;
8797
- font-size: 14px;
8798
- line-height: 1.1;
8799
- text-align: left;
8800
- white-space: pre-wrap;
8801
- }
8802
- .tooltip.custom-tooltip {
8803
- transition-duration: 0s;
8804
- z-index: 10001;
8805
- opacity: 1;
8806
-
8807
- .tooltip-arrow {
8808
- display: block;
8809
- margin-left: 0;
8810
- position: absolute;
8811
- top: -1px;
8812
- width: 13px;
8813
- height: 13px;
8814
- transform: rotate(226deg);
8815
- border-right: 1px solid @pale-grey;
8816
- border-bottom: 1px solid @pale-grey;
8817
- border-width: 1px;
8818
- background-color: @white;
9001
+ .building-status {
9002
+ color: @pale-orange;
8819
9003
  }
8820
9004
 
8821
- &.bottom {
8822
- margin-top: 8px;
9005
+ .error-status,
9006
+ .unhealthy-status {
9007
+ color: @darkish-pink;
8823
9008
  }
8824
9009
 
8825
- &.top {
8826
- margin-top: 4px;
9010
+ .standby-status,
9011
+ .scaled-to-zero-status,
9012
+ .imported-status {
9013
+ color: @solid-grey;
8827
9014
  }
8828
9015
 
8829
- .tooltip-inner {
8830
- background-color: @white;
8831
- color: @dusk-three;
8832
- border-radius: 2px;
8833
- font-size: 14px;
8834
- word-wrap: break-word;
8835
- max-width: 280px;
8836
- padding: 29px 30px;
8837
- box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
8838
- border: solid 1px @pale-grey;
9016
+ .running-status {
9017
+ color: @tealish;
8839
9018
  }
8840
9019
  }
8841
- .deploy-deleted-function-dialog {
9020
+
9021
+ .override-function-dialog {
8842
9022
  .sub-title {
8843
9023
  font-size: 16px;
8844
9024
  color: @silver-chalice-two;
@@ -8846,42 +9026,11 @@ body {
8846
9026
 
8847
9027
  .buttons {
8848
9028
  display: flex;
8849
- justify-content: flex-end;
8850
- }
8851
- }
8852
-
8853
- .duplicate-function-dialog-wrapper {
8854
- .main-content {
8855
- .field-group {
8856
- display: flex;
8857
- flex-wrap: wrap;
8858
- width: 450px;
8859
-
8860
- .field-label.function-name-label,
8861
- .field-input.function-name-input,
8862
- .field-input.function-configuration-input {
8863
- width: 100%;
8864
- }
8865
-
8866
- .field-label.function-configuration-label {
8867
- width: 100%;
8868
- line-height: 30px;
8869
- }
8870
9029
 
8871
- .field-input.function-name-input,
8872
- .field-input.function-configuration-input {
8873
- .error {
8874
- top: 38px;
8875
- }
8876
- }
8877
-
8878
- .field-label.function-configuration-path {
8879
- font-size: 14px;
8880
- margin-left: 3px;
8881
- line-height: 30px;
8882
- }
8883
- }
9030
+ .function-redirect-button {
9031
+ margin-right: auto;
8884
9032
  }
9033
+ }
8885
9034
  }
8886
9035
 
8887
9036
  .ncl-edit-version {
@@ -9135,160 +9284,11 @@ body {
9135
9284
  .value-cell {
9136
9285
  width: auto;
9137
9286
  padding-left: 23px;
9138
- }
9139
- }
9140
- }
9141
- }
9142
- }
9143
- }
9144
-
9145
- .ncl-function-collapsing-row {
9146
- background-color: @white;
9147
- margin-bottom: 8px;
9148
-
9149
- .function-title-block {
9150
- height: 50px;
9151
- position: relative;
9152
- background-color: @white;
9153
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
9154
- border: solid 1px @pale-grey;
9155
-
9156
- .common-table-cells-container {
9157
- cursor: pointer;
9158
-
9159
- .common-table-cell-content {
9160
- width: 100%;
9161
- white-space: nowrap;
9162
- overflow: hidden;
9163
- text-overflow: ellipsis;
9164
- min-width: 0;
9165
- }
9166
-
9167
- .description-content {
9168
- position: relative;
9169
- white-space: normal;
9170
- max-height: 40px;
9171
- }
9172
-
9173
- .common-table-cell {
9174
- .status-icon {
9175
- display: flex;
9176
- font-size: 20px;
9177
- cursor: pointer;
9178
- margin-left: 9px;
9179
- .duskThree(0.64);
9180
- color: @color;
9181
- }
9182
-
9183
- .version-text {
9184
- display: block;
9185
- text-align: left;
9186
- }
9187
-
9188
- .ncl-icon-api-gateway {
9189
- font-size: 20px;
9190
- position: absolute;
9191
- right: 10px;
9192
- }
9193
-
9194
- .igz-action-panel {
9195
- &.invocation-tooltip {
9196
- height: 36px;
9197
- width: 56px;
9198
- }
9199
- }
9200
- }
9201
- }
9202
-
9203
- .function-row-collapse {
9204
- justify-content: center;
9205
- cursor: default;
9206
-
9207
- .collapse-icon {
9208
- cursor: pointer;
9209
- background-color: transparent;
9210
- position: absolute;
9211
-
9212
- &.igz-icon-right, &.igz-icon-down {
9213
- font-size: 12px;
9214
- color: @dusk-three;
9215
- }
9216
- }
9217
- }
9218
-
9219
- .function-name {
9220
- display: block;
9221
- font-weight: bold;
9222
- width: 90%;
9223
- }
9224
-
9225
- .function-status {
9226
- min-width: 100px;
9227
- }
9228
-
9229
- .actions-menu {
9230
- visibility: hidden;
9231
- }
9232
-
9233
- &.common-table-row {
9234
- height: 49px;
9235
-
9236
- &:hover {
9237
- .function-row-collapse {
9238
- background-color: @white
9239
- }
9240
- .actions-menu {
9241
- visibility: visible;
9242
- background-color: @white;
9243
- }
9244
- igz-action-checkbox:not(.invisible) {
9245
- visibility: visible;
9246
- }
9247
- }
9248
-
9249
- igz-action-checkbox {
9250
- visibility: hidden;
9251
-
9252
- &.visible {
9253
- visibility: visible;
9254
- }
9255
- }
9256
- }
9257
- }
9258
-
9259
- .building-status {
9260
- color: @pale-orange;
9261
- }
9262
-
9263
- .error-status,
9264
- .unhealthy-status {
9265
- color: @darkish-pink;
9266
- }
9267
-
9268
- .standby-status,
9269
- .scaled-to-zero-status,
9270
- .imported-status {
9271
- color: @solid-grey;
9272
- }
9273
-
9274
- .running-status {
9275
- color: @tealish;
9276
- }
9277
- }
9278
-
9279
- .override-function-dialog {
9280
- .sub-title {
9281
- font-size: 16px;
9282
- color: @silver-chalice-two;
9283
- }
9284
-
9285
- .buttons {
9286
- display: flex;
9287
-
9288
- .function-redirect-button {
9289
- margin-right: auto;
9287
+ }
9288
+ }
9289
+ }
9290
+ }
9290
9291
  }
9291
- }
9292
9292
  }
9293
9293
 
9294
9294
  // Style rules for actions bar
@@ -9825,6 +9825,35 @@ igz-info-page-content {
9825
9825
  }
9826
9826
  }
9827
9827
 
9828
+ ncl-breadcrumbs {
9829
+ .main-header-title {
9830
+ &:not(.disable-behavior) {
9831
+ &:hover .main-header-title-text {
9832
+ color: @dark-sky-blue;
9833
+ }
9834
+ }
9835
+
9836
+ &.disable-behavior {
9837
+ color: @dusk-three;
9838
+ }
9839
+ }
9840
+
9841
+ .igz-icon-right {
9842
+ font-size: 11px;
9843
+ font-weight: 100;
9844
+ margin: 0 14px;
9845
+ }
9846
+
9847
+ .ncl-header-subtitle {
9848
+ color: @greyish-purple;
9849
+ }
9850
+
9851
+ .ncl-bold-subtitle {
9852
+ color: @dusk-three;
9853
+ font-weight: bold;
9854
+ }
9855
+ }
9856
+
9828
9857
  .ncl-breadcrumbs-dropdown {
9829
9858
  display: inline-grid;
9830
9859
 
@@ -9965,6 +9994,44 @@ igz-info-page-content {
9965
9994
  }
9966
9995
  }
9967
9996
 
9997
+ .ncl-deploy-log-wrapper {
9998
+ .log-panel {
9999
+ .logs-common();
10000
+ background-color: @dark-grey;
10001
+ color: @light-grey-three;
10002
+ padding: 5px;
10003
+ margin: 21px 0 0 4px;
10004
+ min-height: 280px;
10005
+ max-height: 280px;
10006
+ height: 280px;
10007
+
10008
+ .log-entry {
10009
+ .log-entry-time {
10010
+ color: @solid-grey;
10011
+ }
10012
+
10013
+ .log-entry-level-debug{
10014
+ color: @dusty-blue;
10015
+ }
10016
+
10017
+ .log-entry-level-info {
10018
+ color: @cloudy-blue;
10019
+ }
10020
+
10021
+ .log-entry-level-warn{
10022
+ color: @sunflower-yellow;
10023
+ }
10024
+
10025
+ .log-entry-level-error {
10026
+ color: @darkish-pink;
10027
+ }
10028
+
10029
+ .log-entry-message {
10030
+ font-weight: 600;
10031
+ }
10032
+ }
10033
+ }
10034
+ }
9968
10035
  .ncl-collapsing-row {
9969
10036
  margin-bottom: 9px;
9970
10037
 
@@ -10088,91 +10155,6 @@ igz-info-page-content {
10088
10155
  }
10089
10156
  }
10090
10157
 
10091
- ncl-breadcrumbs {
10092
- .main-header-title {
10093
- &:not(.disable-behavior) {
10094
- &:hover .main-header-title-text {
10095
- color: @dark-sky-blue;
10096
- }
10097
- }
10098
-
10099
- &.disable-behavior {
10100
- color: @dusk-three;
10101
- }
10102
- }
10103
-
10104
- .igz-icon-right {
10105
- font-size: 11px;
10106
- font-weight: 100;
10107
- margin: 0 14px;
10108
- }
10109
-
10110
- .ncl-header-subtitle {
10111
- color: @greyish-purple;
10112
- }
10113
-
10114
- .ncl-bold-subtitle {
10115
- color: @dusk-three;
10116
- font-weight: bold;
10117
- }
10118
- }
10119
-
10120
- .ncl-deploy-log-wrapper {
10121
- .log-panel {
10122
- .logs-common();
10123
- background-color: @dark-grey;
10124
- color: @light-grey-three;
10125
- padding: 5px;
10126
- margin: 21px 0 0 4px;
10127
- min-height: 280px;
10128
- max-height: 280px;
10129
- height: 280px;
10130
-
10131
- .log-entry {
10132
- .log-entry-time {
10133
- color: @solid-grey;
10134
- }
10135
-
10136
- .log-entry-level-debug{
10137
- color: @dusty-blue;
10138
- }
10139
-
10140
- .log-entry-level-info {
10141
- color: @cloudy-blue;
10142
- }
10143
-
10144
- .log-entry-level-warn{
10145
- color: @sunflower-yellow;
10146
- }
10147
-
10148
- .log-entry-level-error {
10149
- color: @darkish-pink;
10150
- }
10151
-
10152
- .log-entry-message {
10153
- font-weight: 600;
10154
- }
10155
- }
10156
- }
10157
- }
10158
- .view-yaml-dialog-wrapper {
10159
- .ngdialog-content {
10160
- .view-yaml-dialog-header {
10161
- .title {
10162
- margin-bottom: 10px;
10163
- }
10164
-
10165
- .copy-to-clipboard {
10166
- width: 20px;
10167
- }
10168
- }
10169
-
10170
- .monaco-editor {
10171
- min-width: 700px;
10172
- min-height: 450px;
10173
- }
10174
- }
10175
- }
10176
10158
  .ncl-edit-item {
10177
10159
  width: 100%;
10178
10160
  padding: 6px 0;
@@ -10273,6 +10255,24 @@ ncl-breadcrumbs {
10273
10255
  }
10274
10256
  }
10275
10257
 
10258
+ .view-yaml-dialog-wrapper {
10259
+ .ngdialog-content {
10260
+ .view-yaml-dialog-header {
10261
+ .title {
10262
+ margin-bottom: 10px;
10263
+ }
10264
+
10265
+ .copy-to-clipboard {
10266
+ width: 20px;
10267
+ }
10268
+ }
10269
+
10270
+ .monaco-editor {
10271
+ min-width: 700px;
10272
+ min-height: 450px;
10273
+ }
10274
+ }
10275
+ }
10276
10276
  .ncl-key-value-input {
10277
10277
  .input-wrapper {
10278
10278
  width: 100%;
@@ -10463,126 +10463,56 @@ ncl-breadcrumbs {
10463
10463
  width: 20%;
10464
10464
  }
10465
10465
 
10466
- &.type-name-table {
10467
- width: 30%;
10468
- margin-right: 10px;
10469
- }
10470
-
10471
- .input-type {
10472
- flex-grow: 1;
10473
-
10474
- .default-dropdown {
10475
- .default-dropdown-field {
10476
- background-color: @white;
10477
- border-radius: 0;
10478
- }
10479
-
10480
- .default-dropdown-container {
10481
- z-index: 100;
10482
- }
10483
- }
10484
- }
10485
- }
10486
- }
10487
- }
10488
- }
10489
-
10490
- .ncl-monaco {
10491
- .ncl-monaco-wrapper {
10492
- padding-top: 20px;
10493
- height: 100%;
10494
- border: 1px solid @pale-grey;
10495
- background-color: @white;
10496
-
10497
- &.no-top-padding {
10498
- padding-top: 0;
10499
- }
10500
-
10501
- .ncl-monaco-top-row {
10502
- display: block;
10503
- }
10504
-
10505
- .ncl-monaco-editor {
10506
- height: 100%;
10507
- }
10508
- }
10509
-
10510
- .ncl-monaco-dark {
10511
- background-color: @vs-dark;
10512
- }
10513
- }
10514
-
10515
-
10516
- .ncl-search-input {
10517
- position: relative;
10518
- color: @silver;
10519
-
10520
- .container-search-input {
10521
- background-color: transparent;
10522
- border-bottom: 1px solid @silver;
10523
- font-size: 13px;
10524
- font-weight: 400;
10525
- height: 36px;
10526
- line-height: 36px;
10527
- margin: 0;
10528
- outline: 0;
10529
- padding: 0 0 3px 31px;
10530
- width: 100%;
10531
-
10532
- &::-webkit-input-placeholder {
10533
- color: @silver;
10534
- }
10535
-
10536
- &:-moz-placeholder { /* Firefox 18- */
10537
- color: @silver;
10538
- }
10539
-
10540
- &::-moz-placeholder { /* Firefox 19+ */
10541
- color: @silver;
10542
- }
10543
-
10544
- &:-ms-input-placeholder {
10545
- color: @silver;
10546
- }
10466
+ &.type-name-table {
10467
+ width: 30%;
10468
+ margin-right: 10px;
10469
+ }
10547
10470
 
10548
- &:focus {
10549
- border-bottom: 1px solid @light-blue;
10471
+ .input-type {
10472
+ flex-grow: 1;
10550
10473
 
10551
- &, & + .igz-icon-search:before {
10552
- color: @dusk-three;
10553
- }
10474
+ .default-dropdown {
10475
+ .default-dropdown-field {
10476
+ background-color: @white;
10477
+ border-radius: 0;
10478
+ }
10554
10479
 
10555
- &::-webkit-input-placeholder {
10556
- color: transparent;
10480
+ .default-dropdown-container {
10481
+ z-index: 100;
10482
+ }
10483
+ }
10484
+ }
10557
10485
  }
10486
+ }
10487
+ }
10488
+ }
10558
10489
 
10559
- &:-moz-placeholder { /* Firefox 18- */
10560
- color: transparent;
10561
- }
10490
+ .ncl-monaco {
10491
+ .ncl-monaco-wrapper {
10492
+ padding-top: 20px;
10493
+ height: 100%;
10494
+ border: 1px solid @pale-grey;
10495
+ background-color: @white;
10562
10496
 
10563
- &::-moz-placeholder { /* Firefox 19+ */
10564
- color: transparent;
10565
- }
10497
+ &.no-top-padding {
10498
+ padding-top: 0;
10499
+ }
10566
10500
 
10567
- &:-ms-input-placeholder {
10568
- color: transparent;
10569
- }
10501
+ .ncl-monaco-top-row {
10502
+ display: block;
10570
10503
  }
10571
- }
10572
10504
 
10573
- .igz-icon-search {
10574
- font-size: 18px;
10575
- position: absolute;
10576
- left: 8px;
10577
- top: 5px;
10578
- z-index: 1;
10579
- color: @silver;
10505
+ .ncl-monaco-editor {
10506
+ height: 100%;
10507
+ }
10580
10508
  }
10581
10509
 
10582
- input::-ms-clear {
10583
- display: none;
10510
+ .ncl-monaco-dark {
10511
+ background-color: @vs-dark;
10584
10512
  }
10585
10513
  }
10514
+
10515
+
10586
10516
  ncl-navigation-tabs {
10587
10517
  .ncl-navigation-tabs-color-set();
10588
10518
 
@@ -10744,6 +10674,76 @@ ncl-navigation-tabs {
10744
10674
  }
10745
10675
  }
10746
10676
 
10677
+ .ncl-search-input {
10678
+ position: relative;
10679
+ color: @silver;
10680
+
10681
+ .container-search-input {
10682
+ background-color: transparent;
10683
+ border-bottom: 1px solid @silver;
10684
+ font-size: 13px;
10685
+ font-weight: 400;
10686
+ height: 36px;
10687
+ line-height: 36px;
10688
+ margin: 0;
10689
+ outline: 0;
10690
+ padding: 0 0 3px 31px;
10691
+ width: 100%;
10692
+
10693
+ &::-webkit-input-placeholder {
10694
+ color: @silver;
10695
+ }
10696
+
10697
+ &:-moz-placeholder { /* Firefox 18- */
10698
+ color: @silver;
10699
+ }
10700
+
10701
+ &::-moz-placeholder { /* Firefox 19+ */
10702
+ color: @silver;
10703
+ }
10704
+
10705
+ &:-ms-input-placeholder {
10706
+ color: @silver;
10707
+ }
10708
+
10709
+ &:focus {
10710
+ border-bottom: 1px solid @light-blue;
10711
+
10712
+ &, & + .igz-icon-search:before {
10713
+ color: @dusk-three;
10714
+ }
10715
+
10716
+ &::-webkit-input-placeholder {
10717
+ color: transparent;
10718
+ }
10719
+
10720
+ &:-moz-placeholder { /* Firefox 18- */
10721
+ color: transparent;
10722
+ }
10723
+
10724
+ &::-moz-placeholder { /* Firefox 19+ */
10725
+ color: transparent;
10726
+ }
10727
+
10728
+ &:-ms-input-placeholder {
10729
+ color: transparent;
10730
+ }
10731
+ }
10732
+ }
10733
+
10734
+ .igz-icon-search {
10735
+ font-size: 18px;
10736
+ position: absolute;
10737
+ left: 8px;
10738
+ top: 5px;
10739
+ z-index: 1;
10740
+ color: @silver;
10741
+ }
10742
+
10743
+ input::-ms-clear {
10744
+ display: none;
10745
+ }
10746
+ }
10747
10747
  .new-function-wrapper {
10748
10748
  .ncl-new-function-color-set();
10749
10749
 
@@ -10901,6 +10901,72 @@ ncl-navigation-tabs {
10901
10901
  }
10902
10902
  }
10903
10903
 
10904
+ .ncl-function-version-row {
10905
+ .actions-menu {
10906
+ visibility: hidden;
10907
+ }
10908
+
10909
+ &.common-table-row {
10910
+ height: 49px;
10911
+
10912
+ &:hover {
10913
+ igz-action-checkbox:not(.invisible) {
10914
+ visibility: visible;
10915
+ }
10916
+
10917
+ .actions-menu {
10918
+ visibility: visible;
10919
+ }
10920
+
10921
+ .check-row {
10922
+ background-color: @pale-grey-three;
10923
+ }
10924
+ }
10925
+
10926
+ igz-action-checkbox {
10927
+ visibility: hidden;
10928
+
10929
+ &.visible {
10930
+ visibility: visible;
10931
+ }
10932
+ }
10933
+
10934
+ .common-table-cells-container {
10935
+ cursor: pointer;
10936
+
10937
+ .common-table-cell {
10938
+ .status-icon {
10939
+ display: flex;
10940
+ font-size: 20px;
10941
+ cursor: pointer;
10942
+ margin-left: 9px;
10943
+ .duskThree(0.64);
10944
+ color: @color;
10945
+ }
10946
+
10947
+ .common-table-cell-content {
10948
+ width: 100%;
10949
+ white-space: nowrap;
10950
+ overflow: hidden;
10951
+ text-overflow: ellipsis;
10952
+ min-width: 0;
10953
+ }
10954
+
10955
+ .igz-action-panel {
10956
+ &.invocation-tooltip {
10957
+ height: 36px;
10958
+ width: 56px;
10959
+ }
10960
+ }
10961
+ }
10962
+
10963
+ .function-status {
10964
+ min-width: 100px;
10965
+ }
10966
+ }
10967
+ }
10968
+ }
10969
+
10904
10970
  .function-event-wrapper {
10905
10971
  width: 600px;
10906
10972
  margin-bottom: -23px;
@@ -11198,6 +11264,66 @@ ncl-navigation-tabs {
11198
11264
  }
11199
11265
  }
11200
11266
 
11267
+ .ncl-version-configuration {
11268
+ > .igz-scrollable-container {
11269
+ padding: 24px 25px 22px 41px;
11270
+ }
11271
+
11272
+ .ncl-version-configuration-wrapper {
11273
+ > .row {
11274
+ display: flex;
11275
+ justify-content: space-between;
11276
+ flex-wrap: wrap;
11277
+
11278
+ .configuration-block {
11279
+ padding: 16px 23px 16px;
11280
+ background-color: @white;
11281
+ border: solid 1px @pale-grey;
11282
+ flex-grow: 1;
11283
+ flex-basis: 500px;
11284
+ margin-right: 16px;
11285
+ margin-bottom: 16px;
11286
+
11287
+ &.invisible {
11288
+ visibility: hidden;
11289
+ }
11290
+
11291
+ .title {
11292
+ font-size: 16px;
11293
+ font-weight: bold;
11294
+ font-style: normal;
11295
+ font-stretch: normal;
11296
+ letter-spacing: normal;
11297
+ text-align: left;
11298
+ color: @dusk-three;
11299
+ margin-bottom: 12px;
11300
+ }
11301
+
11302
+ .row {
11303
+ .label {
11304
+ display: block;
11305
+ font-family: Roboto, sans-serif;
11306
+ font-size: 14px;
11307
+ font-weight: 500;
11308
+ font-style: normal;
11309
+ font-stretch: normal;
11310
+ letter-spacing: normal;
11311
+ text-align: left;
11312
+ color: @dusk-three;
11313
+ padding: 0;
11314
+ }
11315
+ }
11316
+
11317
+ .ncl-version-configuration-labels, .ncl-version-configuration-annotations {
11318
+ .more-info-wrapper {
11319
+ height: 20px;
11320
+ }
11321
+ }
11322
+ }
11323
+ }
11324
+ }
11325
+ }
11326
+
11201
11327
  .ncl-version-monitoring {
11202
11328
  > .igz-scrollable-container {
11203
11329
  padding: 24px 25px 22px 41px;
@@ -11331,66 +11457,6 @@ ncl-navigation-tabs {
11331
11457
  }
11332
11458
  }
11333
11459
 
11334
- .ncl-version-configuration {
11335
- > .igz-scrollable-container {
11336
- padding: 24px 25px 22px 41px;
11337
- }
11338
-
11339
- .ncl-version-configuration-wrapper {
11340
- > .row {
11341
- display: flex;
11342
- justify-content: space-between;
11343
- flex-wrap: wrap;
11344
-
11345
- .configuration-block {
11346
- padding: 16px 23px 16px;
11347
- background-color: @white;
11348
- border: solid 1px @pale-grey;
11349
- flex-grow: 1;
11350
- flex-basis: 500px;
11351
- margin-right: 16px;
11352
- margin-bottom: 16px;
11353
-
11354
- &.invisible {
11355
- visibility: hidden;
11356
- }
11357
-
11358
- .title {
11359
- font-size: 16px;
11360
- font-weight: bold;
11361
- font-style: normal;
11362
- font-stretch: normal;
11363
- letter-spacing: normal;
11364
- text-align: left;
11365
- color: @dusk-three;
11366
- margin-bottom: 12px;
11367
- }
11368
-
11369
- .row {
11370
- .label {
11371
- display: block;
11372
- font-family: Roboto, sans-serif;
11373
- font-size: 14px;
11374
- font-weight: 500;
11375
- font-style: normal;
11376
- font-stretch: normal;
11377
- letter-spacing: normal;
11378
- text-align: left;
11379
- color: @dusk-three;
11380
- padding: 0;
11381
- }
11382
- }
11383
-
11384
- .ncl-version-configuration-labels, .ncl-version-configuration-annotations {
11385
- .more-info-wrapper {
11386
- height: 20px;
11387
- }
11388
- }
11389
- }
11390
- }
11391
- }
11392
- }
11393
-
11394
11460
  .ncl-version-trigger {
11395
11461
  padding: 11px 24px;
11396
11462
 
@@ -11421,10 +11487,6 @@ ncl-navigation-tabs {
11421
11487
  }
11422
11488
  }
11423
11489
 
11424
- .http-trigger-checkbox {
11425
- display: flex;
11426
- }
11427
-
11428
11490
  .item-row .item-name, .item-row .item-class, .item-row .item-info {
11429
11491
  padding-left: 0;
11430
11492
  }
@@ -11444,72 +11506,6 @@ ncl-navigation-tabs {
11444
11506
  }
11445
11507
  }
11446
11508
 
11447
- .ncl-function-version-row {
11448
- .actions-menu {
11449
- visibility: hidden;
11450
- }
11451
-
11452
- &.common-table-row {
11453
- height: 49px;
11454
-
11455
- &:hover {
11456
- igz-action-checkbox:not(.invisible) {
11457
- visibility: visible;
11458
- }
11459
-
11460
- .actions-menu {
11461
- visibility: visible;
11462
- }
11463
-
11464
- .check-row {
11465
- background-color: @pale-grey-three;
11466
- }
11467
- }
11468
-
11469
- igz-action-checkbox {
11470
- visibility: hidden;
11471
-
11472
- &.visible {
11473
- visibility: visible;
11474
- }
11475
- }
11476
-
11477
- .common-table-cells-container {
11478
- cursor: pointer;
11479
-
11480
- .common-table-cell {
11481
- .status-icon {
11482
- display: flex;
11483
- font-size: 20px;
11484
- cursor: pointer;
11485
- margin-left: 9px;
11486
- .duskThree(0.64);
11487
- color: @color;
11488
- }
11489
-
11490
- .common-table-cell-content {
11491
- width: 100%;
11492
- white-space: nowrap;
11493
- overflow: hidden;
11494
- text-overflow: ellipsis;
11495
- min-width: 0;
11496
- }
11497
-
11498
- .igz-action-panel {
11499
- &.invocation-tooltip {
11500
- height: 36px;
11501
- width: 56px;
11502
- }
11503
- }
11504
- }
11505
-
11506
- .function-status {
11507
- min-width: 100px;
11508
- }
11509
- }
11510
- }
11511
- }
11512
-
11513
11509
  .ncl-text-size-dropdown {
11514
11510
  display: flex;
11515
11511
  justify-content: flex-end;
@@ -13318,6 +13314,17 @@ ncl-navigation-tabs {
13318
13314
  }
13319
13315
  }
13320
13316
 
13317
+ .ncl-version-configuration-logging {
13318
+ .row {
13319
+ display: flex;
13320
+ position: relative;
13321
+
13322
+ .logging-wrapper {
13323
+ width: 100%;
13324
+ }
13325
+ }
13326
+ }
13327
+
13321
13328
  @desktop-middle: 1550px;
13322
13329
 
13323
13330
  .ncl-version-configuration-resources {
@@ -13375,68 +13382,6 @@ ncl-navigation-tabs {
13375
13382
  }
13376
13383
  }
13377
13384
 
13378
- .ncl-version-configuration-runtime-attributes {
13379
- .row:not(.info-row) {
13380
- display: flex;
13381
- justify-content: space-between;
13382
-
13383
- &:not(:last-child) {
13384
- margin-top: 10px;
13385
- margin-bottom: 25px;
13386
- }
13387
-
13388
- > div {
13389
- flex: 0.65;
13390
-
13391
- &:not(:last-child) {
13392
- margin-right: 16px;
13393
- }
13394
-
13395
- &.arguments-input {
13396
- flex-grow: 2;
13397
- }
13398
- }
13399
- }
13400
-
13401
- .row {
13402
- .runtime {
13403
- height: 36px;
13404
- border-radius: 2px;
13405
- padding: 9px 0 0 14px;
13406
- text-transform: capitalize;
13407
- font-family: @font-family-sans-serif;
13408
- font-size: 14px;
13409
- text-align: left;
13410
- color: @dusk-three;
13411
- }
13412
-
13413
- .textarea-field {
13414
- height: 177px;
13415
- resize: none;
13416
- white-space: pre;
13417
- overflow-x: auto;
13418
- }
13419
- }
13420
-
13421
- .java-attribute {
13422
- .textarea-field {
13423
- height: 70px;
13424
- overflow-y: auto;
13425
- }
13426
- }
13427
- }
13428
-
13429
- .ncl-version-configuration-logging {
13430
- .row {
13431
- display: flex;
13432
- position: relative;
13433
-
13434
- .logging-wrapper {
13435
- width: 100%;
13436
- }
13437
- }
13438
- }
13439
-
13440
13385
  .ncl-version-configuration-volumes {
13441
13386
  .ncl-version-volume {
13442
13387
  .common-table-header {
@@ -13501,6 +13446,57 @@ ncl-navigation-tabs {
13501
13446
  }
13502
13447
  }
13503
13448
 
13449
+ .ncl-version-configuration-runtime-attributes {
13450
+ .row:not(.info-row) {
13451
+ display: flex;
13452
+ justify-content: space-between;
13453
+
13454
+ &:not(:last-child) {
13455
+ margin-top: 10px;
13456
+ margin-bottom: 25px;
13457
+ }
13458
+
13459
+ > div {
13460
+ flex: 0.65;
13461
+
13462
+ &:not(:last-child) {
13463
+ margin-right: 16px;
13464
+ }
13465
+
13466
+ &.arguments-input {
13467
+ flex-grow: 2;
13468
+ }
13469
+ }
13470
+ }
13471
+
13472
+ .row {
13473
+ .runtime {
13474
+ height: 36px;
13475
+ border-radius: 2px;
13476
+ padding: 9px 0 0 14px;
13477
+ text-transform: capitalize;
13478
+ font-family: @font-family-sans-serif;
13479
+ font-size: 14px;
13480
+ text-align: left;
13481
+ color: @dusk-three;
13482
+ }
13483
+
13484
+ .textarea-field {
13485
+ height: 177px;
13486
+ resize: none;
13487
+ white-space: pre;
13488
+ overflow-x: auto;
13489
+ }
13490
+ }
13491
+
13492
+ .java-attribute {
13493
+ .textarea-field {
13494
+ height: 70px;
13495
+ overflow-y: auto;
13496
+ }
13497
+ }
13498
+ }
13499
+
13504
13500
  .version-configuration-build-dialog-wrapper {
13505
13501
  font-family: Roboto;
13506
13502