iguazio.dashboard-controls 0.37.11 → 0.37.12-patch3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,9 @@
1
+ .common-table-cell {
2
+ &.status {
3
+ min-width: 95px;
4
+ }
5
+ }
6
+
1
7
  //
2
8
  // Common styles for buttons
3
9
  //
@@ -3577,12 +3583,6 @@ html input[disabled], html textarea[disabled] {
3577
3583
 
3578
3584
  // Media Query
3579
3585
  @retina-display: ~"only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";
3580
- .common-table-cell {
3581
- &.status {
3582
- min-width: 95px;
3583
- }
3584
- }
3585
-
3586
3586
  ncl-functions {
3587
3587
  igz-info-page-actions-bar {
3588
3588
  .igz-info-page-actions-bar {
@@ -3628,149 +3628,6 @@ ncl-functions {
3628
3628
  }
3629
3629
  }
3630
3630
 
3631
- /**
3632
- UI.Layout CSS
3633
- *************************************/
3634
- .stretch {
3635
- position: absolute;
3636
- top: 0;
3637
- left: 0;
3638
- right: 0;
3639
- bottom: 0;
3640
- /* Can be changed by hand ;)*/
3641
- overflow: auto;
3642
- }
3643
-
3644
- .animate-row, .animate-column {
3645
- -webkit-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3646
- -moz-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3647
- -ms-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3648
- -o-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3649
- transition: all .2s cubic-bezier(0, 0, 0.2, 1);
3650
- }
3651
-
3652
- .ui-splitbar {
3653
- display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
3654
- display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
3655
- display: -ms-flexbox; /* TWEENER - IE 10 */
3656
- display: -webkit-flex; /* NEW - Chrome */
3657
- display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
3658
- -webkit-justify-content: center;
3659
- justify-content: center;
3660
-
3661
- background-color: #ffffff;
3662
- right: auto;
3663
- position: absolute;
3664
- z-index: 1;
3665
- }
3666
-
3667
- .ui-layout-row > .ui-splitbar {
3668
- height: 8px;
3669
- width: 100%;
3670
- cursor: row-resize;
3671
- text-align: center;
3672
- justify-content: center;
3673
- align-items: center;
3674
- background: linear-gradient(to bottom, #fff 0%, #eee 100%);
3675
- overflow-y: hidden;
3676
- }
3677
-
3678
- .ui-layout-column > .ui-splitbar {
3679
- width: 8px;
3680
- height: 100%;
3681
- cursor: col-resize;
3682
- -webkit-flex-direction: column;
3683
- flex-direction: column;
3684
- background: linear-gradient(to right, #fff 0%, #eee 100%);
3685
- overflow-x: hidden;
3686
- }
3687
-
3688
- .ui-layout-column > .ui-splitbar > a,
3689
- .ui-layout-row > .ui-splitbar > a {
3690
- cursor: pointer;
3691
- text-align: center;
3692
- font-size: 16px;
3693
- color: #aaa;
3694
- }
3695
-
3696
- .ui-layout-column > .ui-splitbar > a:nth-child(2) {
3697
- margin-top: 0.35rem;
3698
- }
3699
-
3700
- .ui-layout-row > .ui-splitbar > a:nth-child(2) {
3701
- margin-left: 0.35rem;
3702
- }
3703
-
3704
-
3705
- /**
3706
- * Icons
3707
- **/
3708
-
3709
- .ui-splitbar-icon {
3710
- width: 0;
3711
- height: 0;
3712
- display: inline-block;
3713
- }
3714
-
3715
- .ui-splitbar-icon-up {
3716
- border-left: 0.45em solid transparent;
3717
- border-right: 0.45em solid transparent;
3718
- border-bottom: 0.45em solid;
3719
- }
3720
-
3721
- .ui-splitbar-icon-down {
3722
- border-left: 0.45em solid transparent;
3723
- border-right: 0.45em solid transparent;
3724
- border-top: 0.45em solid;
3725
- margin-right: 0.45em;
3726
- }
3727
-
3728
- .ui-splitbar-icon-right {
3729
- border-top: 0.45em solid transparent;
3730
- border-bottom: 0.45em solid transparent;
3731
- border-left: 0.45em solid;
3732
-
3733
- }
3734
-
3735
- .ui-splitbar-icon-left {
3736
- border-top: 0.45em solid transparent;
3737
- border-bottom: 0.45em solid transparent;
3738
- border-right: 0.45em solid;
3739
- margin-top: 0.45em;
3740
- }
3741
-
3742
- /* Allow disabling of icons */
3743
- .no-toggle .ui-splitbar-icon {
3744
- display: none;
3745
- }
3746
-
3747
- @media only screen and (max-device-width: 480px) {
3748
- .no-mobile-toggle .ui-splitbar-icon {
3749
- display: none;
3750
- }
3751
- }
3752
-
3753
- @media print {
3754
- .ui-splitbar {
3755
- display: none;
3756
- }
3757
-
3758
- .stretch {
3759
- position: relative;
3760
- }
3761
-
3762
- /* The last item can take up any amount of space. */
3763
- .stretch.ui-layout-container:last-child {
3764
- position: static;
3765
- overflow: visible;
3766
- }
3767
- }
3768
-
3769
- /* Make sure hidden elements are in fact not rendered. */
3770
- .ui-layout-hidden {
3771
- display: none;
3772
- }
3773
-
3774
3631
  /*
3775
3632
  == malihu jquery custom scrollbar plugin ==
3776
3633
  Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
@@ -5493,56 +5350,199 @@ yx-axis
5493
5350
 
5494
5351
  /* ---------------------------------------- */
5495
5352
 
5496
- .action-checkbox {
5497
- .action-checkbox-color-set();
5353
+ /**
5354
+ UI.Layout CSS
5355
+ *************************************/
5356
+ .stretch {
5357
+ position: absolute;
5358
+ top: 0;
5359
+ left: 0;
5360
+ right: 0;
5361
+ bottom: 0;
5362
+ /* Can be changed by hand ;)*/
5363
+ overflow: auto;
5364
+ }
5498
5365
 
5499
- line-height: 16px;
5500
- text-align: center;
5366
+ .animate-row, .animate-column {
5367
+ -webkit-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5368
+ -moz-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5369
+ -ms-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5370
+ -o-transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5371
+ transition: all .2s cubic-bezier(0, 0, 0.2, 1);
5372
+ }
5501
5373
 
5502
- .check-item {
5503
- font-size: 16px;
5504
- cursor: pointer;
5505
- line-height: 1;
5506
- vertical-align: middle;
5374
+ .ui-splitbar {
5375
+ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
5376
+ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
5377
+ display: -ms-flexbox; /* TWEENER - IE 10 */
5378
+ display: -webkit-flex; /* NEW - Chrome */
5379
+ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
5380
+ -webkit-justify-content: center;
5381
+ justify-content: center;
5507
5382
 
5508
- &.igz-icon-checkbox-unchecked {
5509
- color: @icon-checkbox-unchecked;
5510
- }
5383
+ background-color: #ffffff;
5384
+ right: auto;
5385
+ position: absolute;
5386
+ z-index: 1;
5387
+ }
5511
5388
 
5512
- &.igz-icon-checkbox-checked {
5513
- color: @icon-checkbox-checked;
5514
- }
5515
- }
5389
+ .ui-layout-row > .ui-splitbar {
5390
+ height: 8px;
5391
+ width: 100%;
5392
+ cursor: row-resize;
5393
+ text-align: center;
5394
+ justify-content: center;
5395
+ align-items: center;
5396
+ background: linear-gradient(to bottom, #fff 0%, #eee 100%);
5397
+ overflow-y: hidden;
5516
5398
  }
5517
- .action-checkbox-all {
5518
- .action-checkbox-all-color-set();
5519
5399
 
5520
- text-align: center;
5400
+ .ui-layout-column > .ui-splitbar {
5401
+ width: 8px;
5402
+ height: 100%;
5403
+ cursor: col-resize;
5404
+ -webkit-flex-direction: column;
5405
+ flex-direction: column;
5406
+ background: linear-gradient(to right, #fff 0%, #eee 100%);
5407
+ overflow-x: hidden;
5408
+ }
5521
5409
 
5522
- .check-item {
5523
- cursor: pointer;
5524
- color: @check-item-color;
5525
- font-size: 16px;
5526
- line-height: 1;
5527
- vertical-align: middle;
5410
+ .ui-layout-column > .ui-splitbar > a,
5411
+ .ui-layout-row > .ui-splitbar > a {
5412
+ cursor: pointer;
5413
+ text-align: center;
5414
+ font-size: 16px;
5415
+ color: #aaa;
5416
+ }
5528
5417
 
5529
- &.igz-icon-checkbox-checked {
5530
- color: @check-item-icon-checkbox-checked-color;
5531
- }
5532
- }
5418
+ .ui-layout-column > .ui-splitbar > a:nth-child(2) {
5419
+ margin-top: 0.35rem;
5533
5420
  }
5534
- .igz-action-menu {
5535
- .action-menu-color-set();
5536
- .action-icon-color-set();
5537
5421
 
5538
- opacity: 1;
5539
- position: relative;
5422
+ .ui-layout-row > .ui-splitbar > a:nth-child(2) {
5423
+ margin-left: 0.35rem;
5424
+ }
5540
5425
 
5541
- .menu-button {
5542
- color: @menu-btn-color;
5543
- cursor: pointer;
5544
- font-size: 18px;
5545
- height: 19px;
5426
+
5427
+ /**
5428
+ * Icons
5429
+ **/
5430
+
5431
+ .ui-splitbar-icon {
5432
+ width: 0;
5433
+ height: 0;
5434
+ display: inline-block;
5435
+ }
5436
+
5437
+ .ui-splitbar-icon-up {
5438
+ border-left: 0.45em solid transparent;
5439
+ border-right: 0.45em solid transparent;
5440
+ border-bottom: 0.45em solid;
5441
+ }
5442
+
5443
+ .ui-splitbar-icon-down {
5444
+ border-left: 0.45em solid transparent;
5445
+ border-right: 0.45em solid transparent;
5446
+ border-top: 0.45em solid;
5447
+ margin-right: 0.45em;
5448
+ }
5449
+
5450
+ .ui-splitbar-icon-right {
5451
+ border-top: 0.45em solid transparent;
5452
+ border-bottom: 0.45em solid transparent;
5453
+ border-left: 0.45em solid;
5454
+
5455
+ }
5456
+
5457
+ .ui-splitbar-icon-left {
5458
+ border-top: 0.45em solid transparent;
5459
+ border-bottom: 0.45em solid transparent;
5460
+ border-right: 0.45em solid;
5461
+ margin-top: 0.45em;
5462
+ }
5463
+
5464
+ /* Allow disabling of icons */
5465
+ .no-toggle .ui-splitbar-icon {
5466
+ display: none;
5467
+ }
5468
+
5469
+ @media only screen and (max-device-width: 480px) {
5470
+ .no-mobile-toggle .ui-splitbar-icon {
5471
+ display: none;
5472
+ }
5473
+ }
5474
+
5475
+ @media print {
5476
+ .ui-splitbar {
5477
+ display: none;
5478
+ }
5479
+
5480
+ .stretch {
5481
+ position: relative;
5482
+ }
5483
+
5484
+ /* The last item can take up any amount of space. */
5485
+ .stretch.ui-layout-container:last-child {
5486
+ position: static;
5487
+ overflow: visible;
5488
+ }
5489
+ }
5490
+
5491
+ /* Make sure hidden elements are in fact not rendered. */
5492
+ .ui-layout-hidden {
5493
+ display: none;
5494
+ }
5495
+
5496
+ .action-checkbox {
5497
+ .action-checkbox-color-set();
5498
+
5499
+ line-height: 16px;
5500
+ text-align: center;
5501
+
5502
+ .check-item {
5503
+ font-size: 16px;
5504
+ cursor: pointer;
5505
+ line-height: 1;
5506
+ vertical-align: middle;
5507
+
5508
+ &.igz-icon-checkbox-unchecked {
5509
+ color: @icon-checkbox-unchecked;
5510
+ }
5511
+
5512
+ &.igz-icon-checkbox-checked {
5513
+ color: @icon-checkbox-checked;
5514
+ }
5515
+ }
5516
+ }
5517
+ .action-checkbox-all {
5518
+ .action-checkbox-all-color-set();
5519
+
5520
+ text-align: center;
5521
+
5522
+ .check-item {
5523
+ cursor: pointer;
5524
+ color: @check-item-color;
5525
+ font-size: 16px;
5526
+ line-height: 1;
5527
+ vertical-align: middle;
5528
+
5529
+ &.igz-icon-checkbox-checked {
5530
+ color: @check-item-icon-checkbox-checked-color;
5531
+ }
5532
+ }
5533
+ }
5534
+ .igz-action-menu {
5535
+ .action-menu-color-set();
5536
+ .action-icon-color-set();
5537
+
5538
+ opacity: 1;
5539
+ position: relative;
5540
+
5541
+ .menu-button {
5542
+ color: @menu-btn-color;
5543
+ cursor: pointer;
5544
+ font-size: 18px;
5545
+ height: 19px;
5546
5546
  text-align: center;
5547
5547
  transition: @igz-basic-transition-color;
5548
5548
  width: 30px;
@@ -5998,6 +5998,82 @@ yx-axis
5998
5998
  }
5999
5999
  }
6000
6000
 
6001
+ .element-loading-status {
6002
+ .element-loading-status-color-set();
6003
+
6004
+ position: relative;
6005
+ width: 100%;
6006
+ height: 100%;
6007
+
6008
+ .loader-wrapper {
6009
+ height: 100%;
6010
+ width: 100%;
6011
+ position: relative;
6012
+
6013
+ .loader-text {
6014
+ color: @loading-text-color;
6015
+ }
6016
+ }
6017
+
6018
+ .loading-error {
6019
+ text-align: center;
6020
+ line-height: 15px;
6021
+ width: 100%;
6022
+ height: 100%;
6023
+ position: relative;
6024
+
6025
+ .sad-icon {
6026
+ position: absolute;
6027
+ left: 32px;
6028
+ }
6029
+
6030
+ .loading-error-title, .loading-error-message {
6031
+ font-size: 13px;
6032
+ font-weight: 700;
6033
+ padding: 0 15px;
6034
+ }
6035
+
6036
+ .loading-error-title {
6037
+ color: @loading-error-title-color;
6038
+ padding-top: 15px;
6039
+ }
6040
+
6041
+ .refresh-page {
6042
+ color: @loading-error-refresh-page-color;
6043
+ text-decoration: underline;
6044
+ cursor: pointer;
6045
+ }
6046
+ }
6047
+
6048
+ // Small size status
6049
+
6050
+ &.loading-status-small {
6051
+ .loader-fading-circle {
6052
+ width: 20px;
6053
+ height: 20px;
6054
+ }
6055
+
6056
+ .loading-error {
6057
+
6058
+ .loading-error-title, .loading-error-message {
6059
+ text-overflow: ellipsis;
6060
+ overflow: hidden;
6061
+ padding: 0;
6062
+ }
6063
+
6064
+ .loading-error-title {
6065
+ padding-top: 8px;
6066
+ }
6067
+
6068
+ .refresh-page {
6069
+ overflow: hidden;
6070
+ text-overflow: ellipsis;
6071
+ padding: 0;
6072
+ }
6073
+ }
6074
+ }
6075
+ }
6076
+
6001
6077
  .default-dropdown {
6002
6078
  .default-dropdown-color-set();
6003
6079
  .severity-icons-color-set();
@@ -6438,123 +6514,47 @@ yx-axis
6438
6514
  }
6439
6515
  }
6440
6516
 
6441
- .element-loading-status {
6442
- .element-loading-status-color-set();
6517
+ .more-info-wrapper {
6518
+ .more-info-color-set();
6443
6519
 
6444
6520
  position: relative;
6445
- width: 100%;
6446
- height: 100%;
6521
+ display: inline-flex;
6522
+ align-items: center;
6523
+ height: 36px;
6524
+ margin-left: 8px;
6447
6525
 
6448
- .loader-wrapper {
6449
- height: 100%;
6450
- width: 100%;
6451
- position: relative;
6526
+ .question-mark {
6527
+ cursor: default;
6452
6528
 
6453
- .loader-text {
6454
- color: @loading-text-color;
6529
+ &::before {
6530
+ color: @icon-help-round-before-color;
6531
+ background-color: @icon-help-round-before-bg-color;
6455
6532
  }
6456
- }
6457
6533
 
6458
- .loading-error {
6459
- text-align: center;
6460
- line-height: 15px;
6461
- width: 100%;
6462
- height: 100%;
6463
- position: relative;
6534
+ &:hover {
6535
+ &::before {
6536
+ color: @icon-help-round-hover-before-color;
6537
+ }
6464
6538
 
6465
- .sad-icon {
6466
- position: absolute;
6467
- left: 32px;
6539
+ + .row-description-wrapper.row-description {
6540
+ color: @icon-help-description-hover-color;
6541
+ }
6468
6542
  }
6469
6543
 
6470
- .loading-error-title, .loading-error-message {
6471
- font-size: 13px;
6472
- font-weight: 700;
6473
- padding: 0 15px;
6474
- }
6544
+ &.igz-icon-alert-message {
6545
+ &::before {
6546
+ color: @icon-warn-hover-before-color;
6547
+ background-color: @icon-warn-before-bg-color;
6548
+ }
6475
6549
 
6476
- .loading-error-title {
6477
- color: @loading-error-title-color;
6478
- padding-top: 15px;
6550
+ &:hover {
6551
+ &::before {
6552
+ color: @icon-warn-before-color;
6553
+ }
6554
+ }
6479
6555
  }
6480
6556
 
6481
- .refresh-page {
6482
- color: @loading-error-refresh-page-color;
6483
- text-decoration: underline;
6484
- cursor: pointer;
6485
- }
6486
- }
6487
-
6488
- // Small size status
6489
-
6490
- &.loading-status-small {
6491
- .loader-fading-circle {
6492
- width: 20px;
6493
- height: 20px;
6494
- }
6495
-
6496
- .loading-error {
6497
-
6498
- .loading-error-title, .loading-error-message {
6499
- text-overflow: ellipsis;
6500
- overflow: hidden;
6501
- padding: 0;
6502
- }
6503
-
6504
- .loading-error-title {
6505
- padding-top: 8px;
6506
- }
6507
-
6508
- .refresh-page {
6509
- overflow: hidden;
6510
- text-overflow: ellipsis;
6511
- padding: 0;
6512
- }
6513
- }
6514
- }
6515
- }
6516
-
6517
- .more-info-wrapper {
6518
- .more-info-color-set();
6519
-
6520
- position: relative;
6521
- display: inline-flex;
6522
- align-items: center;
6523
- height: 36px;
6524
- margin-left: 8px;
6525
-
6526
- .question-mark {
6527
- cursor: default;
6528
-
6529
- &::before {
6530
- color: @icon-help-round-before-color;
6531
- background-color: @icon-help-round-before-bg-color;
6532
- }
6533
-
6534
- &:hover {
6535
- &::before {
6536
- color: @icon-help-round-hover-before-color;
6537
- }
6538
-
6539
- + .row-description-wrapper.row-description {
6540
- color: @icon-help-description-hover-color;
6541
- }
6542
- }
6543
-
6544
- &.igz-icon-alert-message {
6545
- &::before {
6546
- color: @icon-warn-hover-before-color;
6547
- background-color: @icon-warn-before-bg-color;
6548
- }
6549
-
6550
- &:hover {
6551
- &::before {
6552
- color: @icon-warn-before-color;
6553
- }
6554
- }
6555
- }
6556
-
6557
- &.click-trigger {
6557
+ &.click-trigger {
6558
6558
  cursor: pointer;
6559
6559
  }
6560
6560
 
@@ -6672,293 +6672,110 @@ yx-axis
6672
6672
  }
6673
6673
  }
6674
6674
 
6675
- .igz-multiple-checkboxes {
6676
- .multiple-checkboxes-color-set();
6675
+ .igz-navigation-tabs {
6676
+ .navigation-tabs-color-set();
6677
6677
 
6678
- .igz-multiple-checkboxes-list {
6679
- list-style-type: none;
6680
- -webkit-margin-before: 0;
6681
- -webkit-margin-after: 0;
6682
- -webkit-padding-start: 0;
6683
- margin: 0;
6684
- padding: 0;
6678
+ background-color: @navigation-tabs-bg-color;
6679
+ height: 56px;
6680
+ padding-top: 7px;
6685
6681
 
6686
- .multiple-checkboxes-option {
6687
- margin: 5px 0;
6682
+ .navigation-tab {
6683
+ float: left;
6684
+ height: 32px;
6685
+ padding: 15px 24px 0;
6686
+ font-family: @font-family-sans-serif;
6687
+ color: @navigation-tab-color;
6688
+ font-size: 14px;
6689
+ text-align: center;
6690
+ cursor: pointer;
6691
+ border-bottom: @navigation-tab-border-bottom;
6692
+ box-sizing: content-box;
6693
+
6694
+ &.active, &.active:hover {
6695
+ background-color: @navigation-tab-active-hover-bg-color;
6696
+ color: @navigation-tab-active-hover-color;
6697
+ border-bottom: @navigation-tab-active-hover-border-bottom;
6688
6698
  }
6689
- }
6690
6699
 
6691
- .checkboxes-dropdown-field {
6692
- border: @checkboxes-dropdown-field-border;
6693
- border-radius: 2px;
6694
- height: 100%;
6695
- color: @checkboxes-dropdown-field-border;
6696
- cursor: pointer;
6697
- outline: none;
6698
- font-family: @font-family-sans-serif;
6699
- margin-top: 0;
6700
- display: flex;
6701
- align-items: center;
6702
- justify-content: space-between;
6700
+ &:hover {
6701
+ background-color: @navigation-tab-hover-bg-color;
6702
+ }
6703
6703
 
6704
- &.opened {
6705
- background-color: @checkboxes-dropdown-field-opened-bg-color;
6704
+ &.active {
6705
+ background-color: @navigation-tab-active-bg-color;
6706
6706
  }
6707
6707
 
6708
- .checkboxes-dropdown-title {
6709
- font-size: 12px;
6710
- font-weight: 500;
6711
- text-transform: uppercase;
6708
+ @media screen and (max-width: 940px) {
6709
+ padding: 15px 12px 0;
6712
6710
  }
6713
6711
  }
6712
+ }
6714
6713
 
6715
- .checkboxes-dropdown-container {
6716
- background-color: @checkboxes-dropdown-container-bg-color;
6717
- border-radius: 2px;
6718
- box-shadow: @checkboxes-dropdown-container-box-shadow;
6719
- color: @checkboxes-dropdown-container-color;
6720
- overflow: hidden;
6721
- position: absolute;
6722
- z-index: 1000;
6723
- min-width: 236px;
6724
- height: 100%;
6725
- margin-top: 2px;
6726
- margin-bottom: 2px;
6727
- padding: 8px 0;
6714
+ .igz-number-input {
6715
+ .number-input-color-set();
6728
6716
 
6729
- .checkboxes-dropdown-scrollbar-container {
6730
- padding-bottom: 36px;
6731
- height: 100%;
6717
+ min-width: 115px;
6718
+ font-family: @font-family-sans-serif;
6719
+ font-size: 14px;
6720
+ font-weight: 400;
6721
+ height: 36px;
6722
+ position: relative;
6723
+ background-color: @number-input-bg-color;
6724
+ border: @number-input-border;
6725
+ border-radius: 2px;
6726
+ color: @number-input-color;
6727
+ display: flex;
6728
+ justify-content: flex-start;
6729
+ align-items: center;
6730
+ padding: 0 10px 0 11px;
6731
+ z-index: 3;
6732
6732
 
6733
- .search-input-wrapper {
6734
- .checkboxes-search-input {
6735
- .validating-input-field {
6736
- height: 32px;
6737
- width: 100%;
6738
- color: @checkboxes-search-input-color;
6739
- outline: none;
6740
- border: @checkboxes-search-input-border;
6741
- border-radius: 2px;
6742
- margin-bottom: 12px;
6733
+ &:not(.disabled) {
6734
+ &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
6735
+ background-color: @number-input-not-disabled-focus-invalid-bg-color;
6736
+ border: @number-input-not-disabled-focus-invalid-border;
6737
+ box-shadow: none;
6738
+ outline: none;
6739
+ }
6743
6740
 
6744
- &.active {
6745
- color: @dusk-three;
6746
- border: @checkboxes-search-input-active-border;
6747
- }
6741
+ &:focus-within, &.focused {
6742
+ outline: 0;
6743
+ border: @number-input-not-disabled-hover-focus-border;
6744
+ }
6748
6745
 
6749
- .input-field {
6750
- height: 30px;
6751
- border: none;
6752
- padding: 0 9px;
6746
+ &.invalid:not(.pristine), &.invalid.submitted {
6747
+ background-color: @number-input-not-disabled-invalid-bg-color;
6748
+ border: @number-input-not-disabled-invalid-border;
6749
+ box-shadow: none;
6750
+ }
6753
6751
 
6754
- &:focus {
6755
- border: none;
6756
- }
6757
- }
6752
+ &:focus.ng-valid, &:focus.ng-pristine {
6753
+ border: @number-input-not-disabled-valid-border;
6754
+ box-shadow: none;
6755
+ outline: none;
6756
+ }
6757
+ }
6758
6758
 
6759
- .input-icon {
6760
- left: unset;
6761
- right: 8px;
6762
- top: 0;
6763
- }
6764
- }
6765
- }
6766
- }
6759
+ &.additional-left-padding {
6760
+ padding-left: 22px;
6761
+ }
6767
6762
 
6768
- .checkboxes-groups-wrapper {
6769
- .checkboxes-groups {
6770
- .checkboxes-list {
6771
- padding: 0;
6772
- margin: 0;
6773
- }
6774
- }
6763
+ .input-field {
6764
+ border: none;
6765
+ outline: 0;
6766
+ padding: 0;
6767
+ text-align: left;
6768
+ background-color: @number-input-field-bg-color;
6769
+ }
6775
6770
 
6776
- .checkboxes-groups:not(:first-child) {
6777
- padding-top: 10px;
6778
- }
6771
+ //
6772
+ // placeholder
6773
+ //
6779
6774
 
6780
- .checkboxes-groups:not(:last-child) {
6781
- padding-bottom: 10px;
6782
- border-bottom: @checkboxes-group-border-bottom;
6783
- }
6784
- }
6785
-
6786
- .search-input-wrapper,
6787
- .checkboxes-header,
6788
- .checkboxes-groups,
6789
- .checkboxes-regular-list {
6790
- padding: 0 8px;
6791
- }
6792
- }
6793
-
6794
- .checkboxes-bottom-bar {
6795
- display: flex;
6796
- position: sticky;
6797
- justify-content: flex-end;
6798
- padding: 4px 8px 0;
6799
- bottom: 0;
6800
-
6801
- button:not(:first-child) {
6802
- margin-left: 8px;
6803
- }
6804
- }
6805
- }
6806
-
6807
- .group-title {
6808
- display: flex;
6809
- justify-content: space-between;
6810
-
6811
- .checkboxes-group-name {
6812
- width: 100%;
6813
- margin-left: 9px;
6814
- color: @checkboxes-group-name-color;
6815
- font-weight: 500;
6816
- text-align: left;
6817
- }
6818
-
6819
- .checkboxes-add-item {
6820
- .checkboxes-add-item-button {
6821
- font-size: 12px;
6822
- font-weight: 500;
6823
- display: inline-block;
6824
- vertical-align: top;
6825
- position: relative;
6826
- color: @checkboxes-add-item-btn-color;
6827
- text-transform: uppercase;
6828
- line-height: initial;
6829
- background-color: transparent;
6830
- border: none;
6831
- outline: none;
6832
- }
6833
- }
6834
- }
6835
-
6836
- .master-checkbox {
6837
- cursor: pointer;
6838
- color: @master-checkbox-color;
6839
- font-size: 16px;
6840
- line-height: 1;
6841
- vertical-align: middle;
6842
-
6843
- &.igz-icon-checkbox-checked {
6844
- color: @master-checkbox-checked-color;
6845
- }
6846
- }
6847
-
6848
- .checkboxes-list {
6849
- list-style-type: none;
6850
-
6851
- .multiple-checkboxes-option {
6852
- color: @checkboxes-list-option-color;
6853
- margin: 5px 0;
6854
- }
6855
- }
6856
- }
6857
-
6858
- .igz-navigation-tabs {
6859
- .navigation-tabs-color-set();
6860
-
6861
- background-color: @navigation-tabs-bg-color;
6862
- height: 56px;
6863
- padding-top: 7px;
6864
-
6865
- .navigation-tab {
6866
- float: left;
6867
- height: 32px;
6868
- padding: 15px 24px 0;
6869
- font-family: @font-family-sans-serif;
6870
- color: @navigation-tab-color;
6871
- font-size: 14px;
6872
- text-align: center;
6873
- cursor: pointer;
6874
- border-bottom: @navigation-tab-border-bottom;
6875
- box-sizing: content-box;
6876
-
6877
- &.active, &.active:hover {
6878
- background-color: @navigation-tab-active-hover-bg-color;
6879
- color: @navigation-tab-active-hover-color;
6880
- border-bottom: @navigation-tab-active-hover-border-bottom;
6881
- }
6882
-
6883
- &:hover {
6884
- background-color: @navigation-tab-hover-bg-color;
6885
- }
6886
-
6887
- &.active {
6888
- background-color: @navigation-tab-active-bg-color;
6889
- }
6890
-
6891
- @media screen and (max-width: 940px) {
6892
- padding: 15px 12px 0;
6893
- }
6894
- }
6895
- }
6896
-
6897
- .igz-number-input {
6898
- .number-input-color-set();
6899
-
6900
- min-width: 115px;
6901
- font-family: @font-family-sans-serif;
6902
- font-size: 14px;
6903
- font-weight: 400;
6904
- height: 36px;
6905
- position: relative;
6906
- background-color: @number-input-bg-color;
6907
- border: @number-input-border;
6908
- border-radius: 2px;
6909
- color: @number-input-color;
6910
- display: flex;
6911
- justify-content: flex-start;
6912
- align-items: center;
6913
- padding: 0 10px 0 11px;
6914
- z-index: 3;
6915
-
6916
- &:not(.disabled) {
6917
- &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
6918
- background-color: @number-input-not-disabled-focus-invalid-bg-color;
6919
- border: @number-input-not-disabled-focus-invalid-border;
6920
- box-shadow: none;
6921
- outline: none;
6922
- }
6923
-
6924
- &:focus-within, &.focused {
6925
- outline: 0;
6926
- border: @number-input-not-disabled-hover-focus-border;
6927
- }
6928
-
6929
- &.invalid:not(.pristine), &.invalid.submitted {
6930
- background-color: @number-input-not-disabled-invalid-bg-color;
6931
- border: @number-input-not-disabled-invalid-border;
6932
- box-shadow: none;
6933
- }
6934
-
6935
- &:focus.ng-valid, &:focus.ng-pristine {
6936
- border: @number-input-not-disabled-valid-border;
6937
- box-shadow: none;
6938
- outline: none;
6939
- }
6940
- }
6941
-
6942
- &.additional-left-padding {
6943
- padding-left: 22px;
6944
- }
6945
-
6946
- .input-field {
6947
- border: none;
6948
- outline: 0;
6949
- padding: 0;
6950
- text-align: left;
6951
- background-color: @number-input-field-bg-color;
6952
- }
6953
-
6954
- //
6955
- // placeholder
6956
- //
6957
-
6958
- ::-webkit-input-placeholder {
6959
- /* Chrome, Chromium, Edge, Safari, Opera*/
6960
- color: @number-input-placeholder-color;
6961
- }
6775
+ ::-webkit-input-placeholder {
6776
+ /* Chrome, Chromium, Edge, Safari, Opera*/
6777
+ color: @number-input-placeholder-color;
6778
+ }
6962
6779
 
6963
6780
  :-moz-placeholder {
6964
6781
  /* Firefox 4-18 */
@@ -7047,53 +6864,236 @@ yx-axis
7047
6864
  }
7048
6865
  }
7049
6866
 
7050
- .igz-pagination {
7051
- .pagination-color-set();
7052
-
7053
- float: right;
7054
- padding: 24px 36px 5px 30px;
6867
+ .igz-multiple-checkboxes {
6868
+ .multiple-checkboxes-color-set();
7055
6869
 
7056
- > div {
7057
- vertical-align: top;
7058
- }
6870
+ .igz-multiple-checkboxes-list {
6871
+ list-style-type: none;
6872
+ -webkit-margin-before: 0;
6873
+ -webkit-margin-after: 0;
6874
+ -webkit-padding-start: 0;
6875
+ margin: 0;
6876
+ padding: 0;
7059
6877
 
7060
- .rows-title, .per-page, .jump-to-page, .to-page-prev, .to-page-next {
7061
- display: inline-block;
7062
- vertical-align: baseline;
6878
+ .multiple-checkboxes-option {
6879
+ margin: 5px 0;
6880
+ }
7063
6881
  }
7064
6882
 
7065
- .rows-title {
7066
- font-size: 13px;
7067
- color: @rows-title-color;
6883
+ .checkboxes-dropdown-field {
6884
+ border: @checkboxes-dropdown-field-border;
6885
+ border-radius: 2px;
6886
+ height: 100%;
6887
+ color: @checkboxes-dropdown-field-border;
6888
+ cursor: pointer;
6889
+ outline: none;
7068
6890
  font-family: @font-family-sans-serif;
7069
- }
7070
-
7071
- .per-page {
7072
- width: 66px;
7073
-
7074
- .default-dropdown-field {
7075
- background: none;
7076
- border: none;
7077
- box-shadow: none;
7078
- font-size: 14px;
7079
- height: 36px;
6891
+ margin-top: 0;
6892
+ display: flex;
6893
+ align-items: center;
6894
+ justify-content: space-between;
7080
6895
 
7081
- .dropdown-selected-item {
7082
- font-size: 14px;
7083
- }
6896
+ &.opened {
6897
+ background-color: @checkboxes-dropdown-field-opened-bg-color;
6898
+ }
7084
6899
 
7085
- .dropdown-arrow {
7086
- margin-top: 5px;
6900
+ .checkboxes-dropdown-title {
6901
+ font-size: 12px;
6902
+ font-weight: 500;
6903
+ text-transform: uppercase;
6904
+ }
6905
+ }
7087
6906
 
7088
- span {
7089
- font-size: 12px;
7090
- }
7091
- }
6907
+ .checkboxes-dropdown-container {
6908
+ background-color: @checkboxes-dropdown-container-bg-color;
6909
+ border-radius: 2px;
6910
+ box-shadow: @checkboxes-dropdown-container-box-shadow;
6911
+ color: @checkboxes-dropdown-container-color;
6912
+ overflow: hidden;
6913
+ position: absolute;
6914
+ z-index: 1000;
6915
+ min-width: 236px;
6916
+ height: 100%;
6917
+ margin-top: 2px;
6918
+ margin-bottom: 2px;
6919
+ padding: 8px 0;
7092
6920
 
7093
- .dropdown-arrow {
7094
- border: none;
6921
+ .checkboxes-dropdown-scrollbar-container {
6922
+ padding-bottom: 36px;
6923
+ height: 100%;
7095
6924
 
7096
- &:hover, &:active {
6925
+ .search-input-wrapper {
6926
+ .checkboxes-search-input {
6927
+ .validating-input-field {
6928
+ height: 32px;
6929
+ width: 100%;
6930
+ color: @checkboxes-search-input-color;
6931
+ outline: none;
6932
+ border: @checkboxes-search-input-border;
6933
+ border-radius: 2px;
6934
+ margin-bottom: 12px;
6935
+
6936
+ &.active {
6937
+ color: @dusk-three;
6938
+ border: @checkboxes-search-input-active-border;
6939
+ }
6940
+
6941
+ .input-field {
6942
+ height: 30px;
6943
+ border: none;
6944
+ padding: 0 9px;
6945
+
6946
+ &:focus {
6947
+ border: none;
6948
+ }
6949
+ }
6950
+
6951
+ .input-icon {
6952
+ left: unset;
6953
+ right: 8px;
6954
+ top: 0;
6955
+ }
6956
+ }
6957
+ }
6958
+ }
6959
+
6960
+ .checkboxes-groups-wrapper {
6961
+ .checkboxes-groups {
6962
+ .checkboxes-list {
6963
+ padding: 0;
6964
+ margin: 0;
6965
+ }
6966
+ }
6967
+
6968
+ .checkboxes-groups:not(:first-child) {
6969
+ padding-top: 10px;
6970
+ }
6971
+
6972
+ .checkboxes-groups:not(:last-child) {
6973
+ padding-bottom: 10px;
6974
+ border-bottom: @checkboxes-group-border-bottom;
6975
+ }
6976
+ }
6977
+
6978
+ .search-input-wrapper,
6979
+ .checkboxes-header,
6980
+ .checkboxes-groups,
6981
+ .checkboxes-regular-list {
6982
+ padding: 0 8px;
6983
+ }
6984
+ }
6985
+
6986
+ .checkboxes-bottom-bar {
6987
+ display: flex;
6988
+ position: sticky;
6989
+ justify-content: flex-end;
6990
+ padding: 4px 8px 0;
6991
+ bottom: 0;
6992
+
6993
+ button:not(:first-child) {
6994
+ margin-left: 8px;
6995
+ }
6996
+ }
6997
+ }
6998
+
6999
+ .group-title {
7000
+ display: flex;
7001
+ justify-content: space-between;
7002
+
7003
+ .checkboxes-group-name {
7004
+ width: 100%;
7005
+ margin-left: 9px;
7006
+ color: @checkboxes-group-name-color;
7007
+ font-weight: 500;
7008
+ text-align: left;
7009
+ }
7010
+
7011
+ .checkboxes-add-item {
7012
+ .checkboxes-add-item-button {
7013
+ font-size: 12px;
7014
+ font-weight: 500;
7015
+ display: inline-block;
7016
+ vertical-align: top;
7017
+ position: relative;
7018
+ color: @checkboxes-add-item-btn-color;
7019
+ text-transform: uppercase;
7020
+ line-height: initial;
7021
+ background-color: transparent;
7022
+ border: none;
7023
+ outline: none;
7024
+ }
7025
+ }
7026
+ }
7027
+
7028
+ .master-checkbox {
7029
+ cursor: pointer;
7030
+ color: @master-checkbox-color;
7031
+ font-size: 16px;
7032
+ line-height: 1;
7033
+ vertical-align: middle;
7034
+
7035
+ &.igz-icon-checkbox-checked {
7036
+ color: @master-checkbox-checked-color;
7037
+ }
7038
+ }
7039
+
7040
+ .checkboxes-list {
7041
+ list-style-type: none;
7042
+
7043
+ .multiple-checkboxes-option {
7044
+ color: @checkboxes-list-option-color;
7045
+ margin: 5px 0;
7046
+ }
7047
+ }
7048
+ }
7049
+
7050
+ .igz-pagination {
7051
+ .pagination-color-set();
7052
+
7053
+ float: right;
7054
+ padding: 24px 36px 5px 30px;
7055
+
7056
+ > div {
7057
+ vertical-align: top;
7058
+ }
7059
+
7060
+ .rows-title, .per-page, .jump-to-page, .to-page-prev, .to-page-next {
7061
+ display: inline-block;
7062
+ vertical-align: baseline;
7063
+ }
7064
+
7065
+ .rows-title {
7066
+ font-size: 13px;
7067
+ color: @rows-title-color;
7068
+ font-family: @font-family-sans-serif;
7069
+ }
7070
+
7071
+ .per-page {
7072
+ width: 66px;
7073
+
7074
+ .default-dropdown-field {
7075
+ background: none;
7076
+ border: none;
7077
+ box-shadow: none;
7078
+ font-size: 14px;
7079
+ height: 36px;
7080
+
7081
+ .dropdown-selected-item {
7082
+ font-size: 14px;
7083
+ }
7084
+
7085
+ .dropdown-arrow {
7086
+ margin-top: 5px;
7087
+
7088
+ span {
7089
+ font-size: 12px;
7090
+ }
7091
+ }
7092
+
7093
+ .dropdown-arrow {
7094
+ border: none;
7095
+
7096
+ &:hover, &:active {
7097
7097
  border: none;
7098
7098
  background: none;
7099
7099
  box-shadow: none;
@@ -7195,190 +7195,61 @@ yx-axis
7195
7195
  }
7196
7196
  }
7197
7197
  }
7198
- .igz-slider-input-block {
7199
- .igz-slider-input-block-color-set();
7198
+ .search-input {
7199
+ .search-input-color-set();
7200
7200
 
7201
7201
  position: relative;
7202
+ color: @search-input-color;
7202
7203
 
7203
- .igz-slider-input-title {
7204
- float: left;
7205
- display: table;
7206
- min-height: 30px;
7207
- line-height: 1;
7208
- color: @slider-input-title-color;
7209
- font-size: 14px;
7204
+ .container-search-input {
7205
+ background-color: @search-input-bg-color;
7206
+ border: 0;
7207
+ font-family: @font-family-sans-serif;
7208
+ font-size: 15px;
7210
7209
  font-weight: 400;
7211
- text-align: left;
7212
- cursor: default;
7210
+ height: 52px;
7211
+ line-height: 52px;
7212
+ margin: 0;
7213
+ outline: 0;
7214
+ padding-right: 20px;
7215
+ width: 100%;
7213
7216
 
7214
- .igz-slider-input-title-text {
7215
- display: table-cell;
7216
- vertical-align: middle;
7217
+ &::-webkit-input-placeholder {
7218
+ color: @search-input-placeholder-color;
7217
7219
  }
7218
- }
7219
7220
 
7220
- // Custom styles for third-party library slider
7221
- .igz-slider-input-rz-slider {
7222
- float: left;
7223
- min-height: 16px;
7224
- line-height: 16px;
7221
+ &:-moz-placeholder { /* Firefox 18- */
7222
+ color: @search-input-placeholder-color;
7223
+ }
7225
7224
 
7226
- .rzslider {
7227
- margin: 0;
7228
- height: 8px;
7225
+ &::-moz-placeholder { /* Firefox 19+ */
7226
+ color: @search-input-placeholder-color;
7227
+ }
7229
7228
 
7230
- .rz-bar-wrapper {
7231
- height: auto;
7232
- margin: 0;
7233
- padding: 0;
7229
+ &:-ms-input-placeholder {
7230
+ color: @search-input-placeholder-color;
7231
+ }
7234
7232
 
7235
- .rz-bar {
7236
- background-color: @rz-bar-bg-color;
7237
- height: 3px;
7238
- }
7233
+ &:focus {
7234
+ &, & + .igz-icon-search:before {
7235
+ color: @search-input-focus-icon-search-before-color;
7239
7236
  }
7240
7237
 
7241
- .rz-bubble {
7242
- display: none;
7238
+ &::-webkit-input-placeholder {
7239
+ color: @search-input-focus-placeholder-color;
7243
7240
  }
7244
7241
 
7245
- .rz-pointer {
7246
- height: 14px;
7247
- width: 14px;
7248
- top: -6px;
7249
- box-shadow: @rz-pointer-box-shadow;
7250
- outline: 0;
7242
+ &:-moz-placeholder { /* Firefox 18- */
7243
+ color: @search-input-focus-placeholder-color;
7244
+ }
7251
7245
 
7252
- &:after {
7253
- display: none;
7254
- }
7246
+ &::-moz-placeholder { /* Firefox 19+ */
7247
+ color: @search-input-focus-placeholder-color;
7255
7248
  }
7256
7249
 
7257
- &:not([disabled]) {
7258
- .rz-bar.rz-selection {
7259
- background-color: @rz-selection-bg-color;
7260
- }
7261
-
7262
- .rz-pointer {
7263
- background-color: @rz-pointer-bg-color;
7264
- }
7265
- }
7266
- }
7267
- }
7268
-
7269
- // Current value
7270
- .igz-slider-input-current-value {
7271
- float: left;
7272
- min-height: 30px;
7273
- line-height: 30px;
7274
-
7275
- &.with-measure-units {
7276
- width: 18%;
7277
- padding-right: 0;
7278
-
7279
- .igz-slider-input-current-value-text {
7280
- margin-right: 4px;
7281
- }
7282
- }
7283
-
7284
- &.with-value-unit {
7285
- padding-right: 21px;
7286
- }
7287
-
7288
- .igz-slider-input-current-value-text {
7289
- color: @slider-input-current-value-text-color;
7290
- font-size: 13px;
7291
- font-weight: 400;
7292
- background-color: @slider-input-current-value-text-bg-color;
7293
- text-align: right;
7294
- }
7295
- }
7296
-
7297
- .igz-slider-input-unit-label {
7298
- position: absolute;
7299
- right: 0;
7300
- min-height: 30px;
7301
- line-height: 30px;
7302
- }
7303
-
7304
- // Units dropdown
7305
- .igz-slider-input-units-dropdown {
7306
- float: left;
7307
-
7308
- .default-dropdown {
7309
- height: 30px;
7310
-
7311
- .default-dropdown-field {
7312
- border: none;
7313
- background-color: @default-dropdown-field-bg-color;
7314
-
7315
- .dropdown-selected-item {
7316
- padding-left: 0;
7317
- }
7318
-
7319
- .dropdown-arrow {
7320
- margin-right: 0;
7321
- }
7322
- }
7323
- }
7324
- }
7325
- }
7326
-
7327
- .search-input {
7328
- .search-input-color-set();
7329
-
7330
- position: relative;
7331
- color: @search-input-color;
7332
-
7333
- .container-search-input {
7334
- background-color: @search-input-bg-color;
7335
- border: 0;
7336
- font-family: @font-family-sans-serif;
7337
- font-size: 15px;
7338
- font-weight: 400;
7339
- height: 52px;
7340
- line-height: 52px;
7341
- margin: 0;
7342
- outline: 0;
7343
- padding-right: 20px;
7344
- width: 100%;
7345
-
7346
- &::-webkit-input-placeholder {
7347
- color: @search-input-placeholder-color;
7348
- }
7349
-
7350
- &:-moz-placeholder { /* Firefox 18- */
7351
- color: @search-input-placeholder-color;
7352
- }
7353
-
7354
- &::-moz-placeholder { /* Firefox 19+ */
7355
- color: @search-input-placeholder-color;
7356
- }
7357
-
7358
- &:-ms-input-placeholder {
7359
- color: @search-input-placeholder-color;
7360
- }
7361
-
7362
- &:focus {
7363
- &, & + .igz-icon-search:before {
7364
- color: @search-input-focus-icon-search-before-color;
7365
- }
7366
-
7367
- &::-webkit-input-placeholder {
7368
- color: @search-input-focus-placeholder-color;
7369
- }
7370
-
7371
- &:-moz-placeholder { /* Firefox 18- */
7372
- color: @search-input-focus-placeholder-color;
7373
- }
7374
-
7375
- &::-moz-placeholder { /* Firefox 19+ */
7376
- color: @search-input-focus-placeholder-color;
7377
- }
7378
-
7379
- &:-ms-input-placeholder {
7380
- color: @search-input-focus-placeholder-color;
7381
- }
7250
+ &:-ms-input-placeholder {
7251
+ color: @search-input-focus-placeholder-color;
7252
+ }
7382
7253
 
7383
7254
  &::placeholder {
7384
7255
  /* modern browser versions */
@@ -7601,140 +7472,132 @@ yx-axis
7601
7472
  }
7602
7473
  }
7603
7474
 
7604
- .ngdialog.text-edit {
7605
- .text-edit-color-set();
7475
+ .igz-slider-input-block {
7476
+ .igz-slider-input-block-color-set();
7606
7477
 
7607
- .ngdialog-content {
7608
- padding: 0;
7609
- width: 1000px;
7610
- height: 678px;
7478
+ position: relative;
7611
7479
 
7612
- .text-preview-directive-wrapper {
7613
- .title {
7614
- margin: 25px 0 0 24px;
7615
- padding: 0 70px 0 0;
7616
- }
7480
+ .igz-slider-input-title {
7481
+ float: left;
7482
+ display: table;
7483
+ min-height: 30px;
7484
+ line-height: 1;
7485
+ color: @slider-input-title-color;
7486
+ font-size: 14px;
7487
+ font-weight: 400;
7488
+ text-align: left;
7489
+ cursor: default;
7617
7490
 
7618
- .close-button {
7619
- position: absolute;
7620
- top: 24px;
7621
- right: 24px;
7622
- font-size: 18px;
7623
- color: @close-btn-color;
7491
+ .igz-slider-input-title-text {
7492
+ display: table-cell;
7493
+ vertical-align: middle;
7494
+ }
7495
+ }
7496
+
7497
+ // Custom styles for third-party library slider
7498
+ .igz-slider-input-rz-slider {
7499
+ float: left;
7500
+ min-height: 16px;
7501
+ line-height: 16px;
7502
+
7503
+ .rzslider {
7504
+ margin: 0;
7505
+ height: 8px;
7506
+
7507
+ .rz-bar-wrapper {
7508
+ height: auto;
7509
+ margin: 0;
7510
+ padding: 0;
7511
+
7512
+ .rz-bar {
7513
+ background-color: @rz-bar-bg-color;
7514
+ height: 3px;
7515
+ }
7624
7516
  }
7625
7517
 
7626
- .buttons {
7627
- margin-right: 24px;
7518
+ .rz-bubble {
7519
+ display: none;
7628
7520
  }
7629
7521
 
7630
- .text-preview-wrapper {
7631
- background-color: @text-preview-wrapper-bg-color;
7632
- border-top: @text-preview-wrapper-border-top;
7633
- border-bottom: @text-preview-wrapper-border-bottom;
7634
- border-radius: 2px;
7635
- margin-bottom: 16px;
7636
- padding: 15px 22px 17px;
7637
- min-width: 690px;
7638
- height: 550px;
7522
+ .rz-pointer {
7523
+ height: 14px;
7524
+ width: 14px;
7525
+ top: -6px;
7526
+ box-shadow: @rz-pointer-box-shadow;
7527
+ outline: 0;
7639
7528
 
7640
- .text-preview-container {
7641
- width: 100%;
7642
- line-height: 1.9;
7643
- text-align: left;
7644
- padding-right: 22px;
7645
- font-size: 13px;
7646
- color: @text-preview-container-color;
7647
- resize: none;
7648
- overflow: hidden;
7649
- border-color: @text-preview-container-border-color;
7650
- background-color: @text-preview-container-bg-color;
7651
- cursor: text;
7529
+ &:after {
7530
+ display: none;
7652
7531
  }
7532
+ }
7653
7533
 
7654
- .text-preview-container:focus {
7655
- outline: 0;
7534
+ &:not([disabled]) {
7535
+ .rz-bar.rz-selection {
7536
+ background-color: @rz-selection-bg-color;
7656
7537
  }
7657
7538
 
7658
- .word-wrap-checkbox-wrapper {
7659
- width: 100%;
7660
- display: flex;
7661
- justify-content: flex-end;
7662
-
7663
- .col-checkbox {
7664
- line-height: normal;
7665
- height: 25px;
7666
-
7667
- label:before {
7668
- font-size: 16px;
7669
- }
7670
- }
7539
+ .rz-pointer {
7540
+ background-color: @rz-pointer-bg-color;
7671
7541
  }
7672
7542
  }
7673
7543
  }
7674
7544
  }
7675
7545
 
7676
- .ncl-monaco {
7677
- height: 500px;
7678
- }
7679
- }
7546
+ // Current value
7547
+ .igz-slider-input-current-value {
7548
+ float: left;
7549
+ min-height: 30px;
7550
+ line-height: 30px;
7680
7551
 
7681
- .toast-status-panel {
7682
- .toast-status-panel-color-set();
7552
+ &.with-measure-units {
7553
+ width: 18%;
7554
+ padding-right: 0;
7683
7555
 
7684
- margin-bottom: 20px;
7685
- padding: 16px 36px 16px 12px;
7686
- background-color: @toast-panel-bg-color;
7687
- border: @toast-panel-border;
7688
- position: relative;
7556
+ .igz-slider-input-current-value-text {
7557
+ margin-right: 4px;
7558
+ }
7559
+ }
7689
7560
 
7690
- &.in-progress {
7691
- background-color: @toast-panel-in-progress-bg-color;
7692
- border: @toast-panel-in-progress-border;
7693
- }
7561
+ &.with-value-unit {
7562
+ padding-right: 21px;
7563
+ }
7694
7564
 
7695
- &.failed {
7696
- background-color: @toast-panel-failed-bg-color;
7697
- border: @toast-panel-failed-border;
7565
+ .igz-slider-input-current-value-text {
7566
+ color: @slider-input-current-value-text-color;
7567
+ font-size: 13px;
7568
+ font-weight: 400;
7569
+ background-color: @slider-input-current-value-text-bg-color;
7570
+ text-align: right;
7571
+ }
7698
7572
  }
7699
7573
 
7700
- .panel-status {
7701
- color: @toast-panel-status-color;
7702
- line-height: 24px;
7703
- font-size: 14px;
7704
- font-weight: 700;
7705
- font-family: @font-family-sans-serif;
7706
- align-items: center;
7707
- display: flex;
7708
- justify-content: center;
7574
+ .igz-slider-input-unit-label {
7575
+ position: absolute;
7576
+ right: 0;
7577
+ min-height: 30px;
7578
+ line-height: 30px;
7579
+ }
7709
7580
 
7710
- &.in-progress {
7711
- color: @toast-panel-status-in-progress-color;
7712
- }
7581
+ // Units dropdown
7582
+ .igz-slider-input-units-dropdown {
7583
+ float: left;
7713
7584
 
7714
- &.failed {
7715
- color: @toast-panel-status-failed-color;
7716
- }
7585
+ .default-dropdown {
7586
+ height: 30px;
7717
7587
 
7718
- .panel-status-icon {
7719
- font-size: 24px;
7588
+ .default-dropdown-field {
7589
+ border: none;
7590
+ background-color: @default-dropdown-field-bg-color;
7720
7591
 
7721
- &.igz-icon-properties {
7722
- -webkit-animation: rotation 4s infinite linear;
7592
+ .dropdown-selected-item {
7593
+ padding-left: 0;
7594
+ }
7723
7595
 
7724
- @-webkit-keyframes rotation {
7725
- from {
7726
- -webkit-transform: rotate(0deg);
7727
- }
7728
- to {
7729
- -webkit-transform: rotate(359deg);
7730
- }
7596
+ .dropdown-arrow {
7597
+ margin-right: 0;
7731
7598
  }
7732
7599
  }
7733
7600
  }
7734
-
7735
- .panel-status-msg {
7736
- margin-left: 8px;
7737
- }
7738
7601
  }
7739
7602
  }
7740
7603
 
@@ -7845,6 +7708,83 @@ yx-axis
7845
7708
  }
7846
7709
  }
7847
7710
  }
7711
+ .ngdialog.text-edit {
7712
+ .text-edit-color-set();
7713
+
7714
+ .ngdialog-content {
7715
+ padding: 0;
7716
+ width: 1000px;
7717
+ height: 678px;
7718
+
7719
+ .text-preview-directive-wrapper {
7720
+ .title {
7721
+ margin: 25px 0 0 24px;
7722
+ padding: 0 70px 0 0;
7723
+ }
7724
+
7725
+ .close-button {
7726
+ position: absolute;
7727
+ top: 24px;
7728
+ right: 24px;
7729
+ font-size: 18px;
7730
+ color: @close-btn-color;
7731
+ }
7732
+
7733
+ .buttons {
7734
+ margin-right: 24px;
7735
+ }
7736
+
7737
+ .text-preview-wrapper {
7738
+ background-color: @text-preview-wrapper-bg-color;
7739
+ border-top: @text-preview-wrapper-border-top;
7740
+ border-bottom: @text-preview-wrapper-border-bottom;
7741
+ border-radius: 2px;
7742
+ margin-bottom: 16px;
7743
+ padding: 15px 22px 17px;
7744
+ min-width: 690px;
7745
+ height: 550px;
7746
+
7747
+ .text-preview-container {
7748
+ width: 100%;
7749
+ line-height: 1.9;
7750
+ text-align: left;
7751
+ padding-right: 22px;
7752
+ font-size: 13px;
7753
+ color: @text-preview-container-color;
7754
+ resize: none;
7755
+ overflow: hidden;
7756
+ border-color: @text-preview-container-border-color;
7757
+ background-color: @text-preview-container-bg-color;
7758
+ cursor: text;
7759
+ }
7760
+
7761
+ .text-preview-container:focus {
7762
+ outline: 0;
7763
+ }
7764
+
7765
+ .word-wrap-checkbox-wrapper {
7766
+ width: 100%;
7767
+ display: flex;
7768
+ justify-content: flex-end;
7769
+
7770
+ .col-checkbox {
7771
+ line-height: normal;
7772
+ height: 25px;
7773
+
7774
+ label:before {
7775
+ font-size: 16px;
7776
+ }
7777
+ }
7778
+ }
7779
+ }
7780
+ }
7781
+ }
7782
+
7783
+ .ncl-monaco {
7784
+ height: 500px;
7785
+ }
7786
+ }
7787
+
7848
7788
  .validating-input-field {
7849
7789
  .validating-input-field-color-set();
7850
7790
 
@@ -8175,310 +8115,101 @@ form.ng-submitted .validating-input-field {
8175
8115
  }
8176
8116
  }
8177
8117
 
8178
- .igz-info-page-actions-bar {
8179
- .actions-buttons-block {
8180
- margin-top: 3px;
8181
- margin-right: 17px;
8182
- }
8183
- }
8184
- .ncl-primary-button {
8185
- margin-left: 9px;
8186
- }
8118
+ .toast-status-panel {
8119
+ .toast-status-panel-color-set();
8187
8120
 
8188
- .ncl-secondary-button {
8189
- vertical-align: top;
8121
+ margin-bottom: 20px;
8122
+ padding: 16px 36px 16px 12px;
8123
+ background-color: @toast-panel-bg-color;
8124
+ border: @toast-panel-border;
8190
8125
  position: relative;
8191
- }
8192
-
8193
- .btn-close {
8194
- color: .duskThree(0.64)[@color];
8195
- right: 0;
8196
- position: absolute;
8197
- margin-top: 6px;
8198
- margin-right: 24px;
8199
- font-size: 14px;
8200
- line-height: 14px;
8201
- z-index: 11;
8202
8126
 
8203
- &:hover {
8204
- color: .duskThree(1)[@color];
8127
+ &.in-progress {
8128
+ background-color: @toast-panel-in-progress-bg-color;
8129
+ border: @toast-panel-in-progress-border;
8205
8130
  }
8206
- }
8207
8131
 
8208
- .ncl-new-entity-button {
8209
- display: inline-block;
8210
- vertical-align: top;
8211
- position: relative;
8212
- margin-left: 15px;
8213
- }
8132
+ &.failed {
8133
+ background-color: @toast-panel-failed-bg-color;
8134
+ border: @toast-panel-failed-border;
8135
+ }
8214
8136
 
8215
- .ngdialog {
8216
- z-index: 10000;
8217
- }
8137
+ .panel-status {
8138
+ color: @toast-panel-status-color;
8139
+ line-height: 24px;
8140
+ font-size: 14px;
8141
+ font-weight: 700;
8142
+ font-family: @font-family-sans-serif;
8143
+ align-items: center;
8144
+ display: flex;
8145
+ justify-content: center;
8218
8146
 
8219
- .ngdialog-theme-nuclio {
8220
- @animation-duration: 0.2s;
8221
- @animation-function: ease;
8222
- display: flex;
8223
- height: 100%;
8224
- padding: 0 50px;
8225
- min-width: 500px;
8226
- align-items: center;
8227
- justify-content: center;
8147
+ &.in-progress {
8148
+ color: @toast-panel-status-in-progress-color;
8149
+ }
8228
8150
 
8229
- .ngdialog-content {
8230
- box-shadow: 0 10px 20px 0 .black(0.25)[@color];
8231
- animation-duration: @animation-duration;
8232
- animation-timing-function: @animation-function;
8233
- font-family: @font-family-sans-serif;
8234
- font-size: 16px;
8235
- border-radius: 2px;
8236
- max-width: 900px;
8237
- background-color: @white;
8238
- z-index: 5;
8239
- position: relative;
8240
- padding: 19px 24px 23px 24px;
8151
+ &.failed {
8152
+ color: @toast-panel-status-failed-color;
8153
+ }
8241
8154
 
8242
- /*
8243
- * Confirms, alerts
8244
- */
8245
- .notification-text {
8246
- margin: 30px 30px 0 0;
8247
- max-height: 70vh;
8248
- overflow: auto;
8155
+ .panel-status-icon {
8156
+ font-size: 24px;
8249
8157
 
8250
- .error-list {
8251
- list-style-type: none;
8158
+ &.igz-icon-properties {
8159
+ -webkit-animation: rotation 4s infinite linear;
8252
8160
 
8253
- .error-list-item {
8254
- margin-bottom: 5px;
8161
+ @-webkit-keyframes rotation {
8162
+ from {
8163
+ -webkit-transform: rotate(0deg);
8164
+ }
8165
+ to {
8166
+ -webkit-transform: rotate(359deg);
8167
+ }
8255
8168
  }
8256
8169
  }
8257
8170
  }
8258
8171
 
8259
- .notification-text.description {
8260
- margin: 10px 30px;
8172
+ .panel-status-msg {
8173
+ margin-left: 8px;
8261
8174
  }
8175
+ }
8176
+ }
8262
8177
 
8263
- .buttons {
8264
- text-align: right;
8265
-
8266
- button:not(:first-child) {
8267
- margin-left: 8px;
8268
- }
8269
- }
8270
-
8271
- /*
8272
- * Create/edit dialogs
8273
- */
8274
- .close-button {
8275
- position: absolute;
8276
- right: 24px;
8277
- top: 26px;
8278
- line-height: 10px;
8279
- font-size: 14px;
8280
- color: .duskThree(0.64)[@color];
8281
- cursor: pointer;
8282
- }
8283
-
8284
- .title {
8285
- color: @dusk-three;
8286
- font-family: @font-family-sans-serif;
8287
- font-size: 20px;
8288
- font-weight: 500;
8289
- margin: 0 0 21px 0;
8290
- padding-right: 24px;
8291
- }
8292
-
8293
- .main-content {
8294
- margin: 0 0 4px;
8295
-
8296
- .field-group {
8297
- padding: 0 0 20px;
8178
+ .ncl-api-gateway-row {
8179
+ .common-table-cells-container {
8180
+ .common-table-cell {
8181
+ &.status {
8182
+ text-transform: capitalize;
8298
8183
 
8299
- .field-label {
8300
- color: @dusk-three;
8301
- font-size: 14px;
8302
- font-weight: 500;
8303
- padding: 0;
8304
- min-width: 50px;
8305
- margin: 0 0 2px;
8184
+ &.ready {
8185
+ color: @tealish;
8306
8186
  }
8307
8187
 
8308
- .field-input {
8309
- position: relative;
8310
- width: 400px;
8311
-
8312
- .validating-input-field {
8313
- .input-field {
8314
- padding-left: 17px;
8315
- }
8316
-
8317
- .input-placeholder {
8318
- left: 18px;
8319
- font-style: italic;
8320
- }
8321
- }
8322
-
8323
- .error {
8324
- color: @darkish-pink;
8325
- font-size: 12px;
8326
- white-space: nowrap;
8327
- }
8188
+ // just in case - for now these statuses will not be shown because there will be a loader
8189
+ &.provisioning, &.waitingForProvisioning {
8190
+ color: @pale-orange;
8328
8191
  }
8329
- }
8330
- }
8331
- }
8332
-
8333
- &.delete-entity-dialog-wrapper {
8334
- .ngdialog-content {
8335
- padding: 30px 24px 23px 24px;
8336
-
8337
- .notification-text.title {
8338
- text-align: center;
8339
- padding-right: 0;
8340
- color: @darkish-pink;
8341
- font-size: 20px;
8342
- font-weight: 500;
8343
- letter-spacing: normal;
8344
- margin: 11px 0 2px;
8345
- }
8346
-
8347
- .notification-text.description {
8348
- text-align: center;
8349
- margin: 0 37px;
8350
- font-size: 16px;
8351
- font-weight: normal;
8352
- letter-spacing: normal;
8353
- color: @dusk-three;
8354
- }
8355
-
8356
- .nuclio-alert-icon {
8357
- background: url('/assets/images/ic-alert-message.svg');
8358
- height: 29px;
8359
- width: 34px;
8360
- margin: 0 auto;
8361
- }
8362
8192
 
8363
- .buttons {
8364
- margin-top: 30px;
8193
+ &.error {
8194
+ color: @darkish-pink;
8195
+ }
8365
8196
  }
8366
8197
  }
8367
8198
  }
8368
8199
 
8369
- &.ngdialog.ngdialog-closing .ngdialog-content {
8370
- animation-duration: @animation-duration;
8371
- animation-timing-function: @animation-function;
8372
- }
8373
-
8374
- .ngdialog-overlay {
8375
- background: .black(0.6)[@color];
8376
- border: 2px solid @black;
8377
- animation-duration: @animation-duration;
8378
- animation-timing-function: @animation-function;
8379
- }
8380
-
8381
- &.ngdialog.ngdialog-closing .ngdialog-overlay {
8382
- animation-duration: @animation-duration;
8383
- animation-timing-function: @animation-function;
8384
- }
8385
-
8386
- &.ngdialog.ng-login-modal .ngdialog-content {
8387
- padding: 0;
8388
- }
8389
- }
8390
-
8391
- body {
8392
- .ncl-main-wrapper {
8393
- padding: 64px 0 0 215px;
8394
- width: 100%;
8395
- height: 100%;
8200
+ .actions-menu {
8201
+ visibility: hidden;
8396
8202
  }
8397
8203
 
8398
- .table-headers {
8399
- display: flex;
8400
- font-size: 14px;
8401
- font-weight: bold;
8402
- font-style: normal;
8403
- font-stretch: normal;
8404
- letter-spacing: normal;
8405
- color: @dusk-three;
8406
- margin-bottom: 2px;
8407
-
8408
- .key-header {
8409
- width: 34%;
8410
- margin-left: 16px;
8411
-
8412
- &:not(.use-type) {
8413
- width: 36%;
8414
- }
8415
- }
8416
-
8417
- .type-header {
8418
- width: 12%;
8419
- }
8420
-
8421
- .value-header {
8422
- width: 52%;
8423
-
8424
- &:not(.use-type) {
8425
- width: 61%;
8204
+ &.common-table-row {
8205
+ &:hover {
8206
+ .actions-menu {
8207
+ visibility: visible;
8426
8208
  }
8427
8209
  }
8428
8210
  }
8429
-
8430
- .table-body:not(:last-child) {
8431
- margin-bottom: 5px;
8432
- }
8433
- }
8434
-
8435
-
8436
- .logs-common {
8437
- font-family: "Source Code Pro", "Courier New", monospace;
8438
- font-size: 14px;
8439
- line-height: 1.1;
8440
- text-align: left;
8441
- white-space: pre-wrap;
8442
8211
  }
8443
- .tooltip.custom-tooltip {
8444
- transition-duration: 0s;
8445
- z-index: 10001;
8446
- opacity: 1;
8447
-
8448
- .tooltip-arrow {
8449
- display: block;
8450
- margin-left: 0;
8451
- position: absolute;
8452
- top: -1px;
8453
- width: 13px;
8454
- height: 13px;
8455
- transform: rotate(226deg);
8456
- border-right: 1px solid @pale-grey;
8457
- border-bottom: 1px solid @pale-grey;
8458
- border-width: 1px;
8459
- background-color: @white;
8460
- }
8461
-
8462
- &.bottom {
8463
- margin-top: 8px;
8464
- }
8465
-
8466
- &.top {
8467
- margin-top: 4px;
8468
- }
8469
8212
 
8470
- .tooltip-inner {
8471
- background-color: @white;
8472
- color: @dusk-three;
8473
- border-radius: 2px;
8474
- font-size: 14px;
8475
- word-wrap: break-word;
8476
- max-width: 280px;
8477
- padding: 29px 30px;
8478
- box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
8479
- border: solid 1px @pale-grey;
8480
- }
8481
- }
8482
8213
  .new-api-gateway-wizard {
8483
8214
  .new-api-gateway-wizard-color-set();
8484
8215
 
@@ -8743,62 +8474,310 @@ body {
8743
8474
  }
8744
8475
  }
8745
8476
 
8746
- .ncl-api-gateway-row {
8747
- .common-table-cells-container {
8748
- .common-table-cell {
8749
- &.status {
8750
- text-transform: capitalize;
8751
-
8752
- &.ready {
8753
- color: @tealish;
8754
- }
8755
-
8756
- // just in case - for now these statuses will not be shown because there will be a loader
8757
- &.provisioning, &.waitingForProvisioning {
8758
- color: @pale-orange;
8759
- }
8760
-
8761
- &.error {
8762
- color: @darkish-pink;
8763
- }
8764
- }
8765
- }
8766
- }
8767
-
8768
- .actions-menu {
8769
- visibility: hidden;
8770
- }
8771
-
8772
- &.common-table-row {
8773
- &:hover {
8774
- .actions-menu {
8775
- visibility: visible;
8776
- }
8777
- }
8477
+ .igz-info-page-actions-bar {
8478
+ .actions-buttons-block {
8479
+ margin-top: 3px;
8480
+ margin-right: 17px;
8778
8481
  }
8779
8482
  }
8483
+ .ncl-primary-button {
8484
+ margin-left: 9px;
8485
+ }
8780
8486
 
8781
- .duplicate-function-dialog-wrapper {
8782
- .main-content {
8783
- .field-group {
8784
- display: flex;
8785
- flex-wrap: wrap;
8786
- width: 450px;
8487
+ .ncl-secondary-button {
8488
+ vertical-align: top;
8489
+ position: relative;
8490
+ }
8787
8491
 
8788
- .field-label.function-name-label,
8789
- .field-input.function-name-input {
8790
- width: 100%;
8492
+ .btn-close {
8493
+ color: .duskThree(0.64)[@color];
8494
+ right: 0;
8495
+ position: absolute;
8496
+ margin-top: 6px;
8497
+ margin-right: 24px;
8498
+ font-size: 14px;
8499
+ line-height: 14px;
8500
+ z-index: 11;
8501
+
8502
+ &:hover {
8503
+ color: .duskThree(1)[@color];
8504
+ }
8505
+ }
8506
+
8507
+ .ncl-new-entity-button {
8508
+ display: inline-block;
8509
+ vertical-align: top;
8510
+ position: relative;
8511
+ margin-left: 15px;
8512
+ }
8513
+
8514
+ .ngdialog {
8515
+ z-index: 10000;
8516
+ }
8517
+
8518
+ .ngdialog-theme-nuclio {
8519
+ @animation-duration: 0.2s;
8520
+ @animation-function: ease;
8521
+ display: flex;
8522
+ height: 100%;
8523
+ padding: 0 50px;
8524
+ min-width: 500px;
8525
+ align-items: center;
8526
+ justify-content: center;
8527
+
8528
+ .ngdialog-content {
8529
+ box-shadow: 0 10px 20px 0 .black(0.25)[@color];
8530
+ animation-duration: @animation-duration;
8531
+ animation-timing-function: @animation-function;
8532
+ font-family: @font-family-sans-serif;
8533
+ font-size: 16px;
8534
+ border-radius: 2px;
8535
+ max-width: 900px;
8536
+ background-color: @white;
8537
+ z-index: 5;
8538
+ position: relative;
8539
+ padding: 19px 24px 23px 24px;
8540
+
8541
+ /*
8542
+ * Confirms, alerts
8543
+ */
8544
+ .notification-text {
8545
+ margin: 30px 30px 0 0;
8546
+ max-height: 70vh;
8547
+ overflow: auto;
8548
+
8549
+ .error-list {
8550
+ list-style-type: none;
8551
+
8552
+ .error-list-item {
8553
+ margin-bottom: 5px;
8554
+ }
8791
8555
  }
8556
+ }
8792
8557
 
8793
- .field-input.function-name-input {
8794
- .error {
8795
- top: 38px;
8558
+ .notification-text.description {
8559
+ margin: 10px 30px;
8560
+ }
8561
+
8562
+ .buttons {
8563
+ text-align: right;
8564
+
8565
+ button:not(:first-child) {
8566
+ margin-left: 8px;
8567
+ }
8568
+ }
8569
+
8570
+ /*
8571
+ * Create/edit dialogs
8572
+ */
8573
+ .close-button {
8574
+ position: absolute;
8575
+ right: 24px;
8576
+ top: 26px;
8577
+ line-height: 10px;
8578
+ font-size: 14px;
8579
+ color: .duskThree(0.64)[@color];
8580
+ cursor: pointer;
8581
+ }
8582
+
8583
+ .title {
8584
+ color: @dusk-three;
8585
+ font-family: @font-family-sans-serif;
8586
+ font-size: 20px;
8587
+ font-weight: 500;
8588
+ margin: 0 0 21px 0;
8589
+ padding-right: 24px;
8590
+ }
8591
+
8592
+ .main-content {
8593
+ margin: 0 0 4px;
8594
+
8595
+ .field-group {
8596
+ padding: 0 0 20px;
8597
+
8598
+ .field-label {
8599
+ color: @dusk-three;
8600
+ font-size: 14px;
8601
+ font-weight: 500;
8602
+ padding: 0;
8603
+ min-width: 50px;
8604
+ margin: 0 0 2px;
8605
+ }
8606
+
8607
+ .field-input {
8608
+ position: relative;
8609
+ width: 400px;
8610
+
8611
+ .validating-input-field {
8612
+ .input-field {
8613
+ padding-left: 17px;
8614
+ }
8615
+
8616
+ .input-placeholder {
8617
+ left: 18px;
8618
+ font-style: italic;
8619
+ }
8620
+ }
8621
+
8622
+ .error {
8623
+ color: @darkish-pink;
8624
+ font-size: 12px;
8625
+ white-space: nowrap;
8626
+ }
8796
8627
  }
8797
8628
  }
8798
8629
  }
8799
8630
  }
8631
+
8632
+ &.delete-entity-dialog-wrapper {
8633
+ .ngdialog-content {
8634
+ padding: 30px 24px 23px 24px;
8635
+
8636
+ .notification-text.title {
8637
+ text-align: center;
8638
+ padding-right: 0;
8639
+ color: @darkish-pink;
8640
+ font-size: 20px;
8641
+ font-weight: 500;
8642
+ letter-spacing: normal;
8643
+ margin: 11px 0 2px;
8644
+ }
8645
+
8646
+ .notification-text.description {
8647
+ text-align: center;
8648
+ margin: 0 37px;
8649
+ font-size: 16px;
8650
+ font-weight: normal;
8651
+ letter-spacing: normal;
8652
+ color: @dusk-three;
8653
+ }
8654
+
8655
+ .nuclio-alert-icon {
8656
+ background: url('/assets/images/ic-alert-message.svg');
8657
+ height: 29px;
8658
+ width: 34px;
8659
+ margin: 0 auto;
8660
+ }
8661
+
8662
+ .buttons {
8663
+ margin-top: 30px;
8664
+ }
8665
+ }
8666
+ }
8667
+
8668
+ &.ngdialog.ngdialog-closing .ngdialog-content {
8669
+ animation-duration: @animation-duration;
8670
+ animation-timing-function: @animation-function;
8671
+ }
8672
+
8673
+ .ngdialog-overlay {
8674
+ background: .black(0.6)[@color];
8675
+ border: 2px solid @black;
8676
+ animation-duration: @animation-duration;
8677
+ animation-timing-function: @animation-function;
8678
+ }
8679
+
8680
+ &.ngdialog.ngdialog-closing .ngdialog-overlay {
8681
+ animation-duration: @animation-duration;
8682
+ animation-timing-function: @animation-function;
8683
+ }
8684
+
8685
+ &.ngdialog.ng-login-modal .ngdialog-content {
8686
+ padding: 0;
8687
+ }
8800
8688
  }
8801
8689
 
8690
+ body {
8691
+ .ncl-main-wrapper {
8692
+ padding: 64px 0 0 215px;
8693
+ width: 100%;
8694
+ height: 100%;
8695
+ }
8696
+
8697
+ .table-headers {
8698
+ display: flex;
8699
+ font-size: 14px;
8700
+ font-weight: bold;
8701
+ font-style: normal;
8702
+ font-stretch: normal;
8703
+ letter-spacing: normal;
8704
+ color: @dusk-three;
8705
+ margin-bottom: 2px;
8706
+
8707
+ .key-header {
8708
+ width: 34%;
8709
+ margin-left: 16px;
8710
+
8711
+ &:not(.use-type) {
8712
+ width: 36%;
8713
+ }
8714
+ }
8715
+
8716
+ .type-header {
8717
+ width: 12%;
8718
+ }
8719
+
8720
+ .value-header {
8721
+ width: 52%;
8722
+
8723
+ &:not(.use-type) {
8724
+ width: 61%;
8725
+ }
8726
+ }
8727
+ }
8728
+
8729
+ .table-body:not(:last-child) {
8730
+ margin-bottom: 5px;
8731
+ }
8732
+ }
8733
+
8734
+
8735
+ .logs-common {
8736
+ font-family: "Source Code Pro", "Courier New", monospace;
8737
+ font-size: 14px;
8738
+ line-height: 1.1;
8739
+ text-align: left;
8740
+ white-space: pre-wrap;
8741
+ }
8742
+ .tooltip.custom-tooltip {
8743
+ transition-duration: 0s;
8744
+ z-index: 10001;
8745
+ opacity: 1;
8746
+
8747
+ .tooltip-arrow {
8748
+ display: block;
8749
+ margin-left: 0;
8750
+ position: absolute;
8751
+ top: -1px;
8752
+ width: 13px;
8753
+ height: 13px;
8754
+ transform: rotate(226deg);
8755
+ border-right: 1px solid @pale-grey;
8756
+ border-bottom: 1px solid @pale-grey;
8757
+ border-width: 1px;
8758
+ background-color: @white;
8759
+ }
8760
+
8761
+ &.bottom {
8762
+ margin-top: 8px;
8763
+ }
8764
+
8765
+ &.top {
8766
+ margin-top: 4px;
8767
+ }
8768
+
8769
+ .tooltip-inner {
8770
+ background-color: @white;
8771
+ color: @dusk-three;
8772
+ border-radius: 2px;
8773
+ font-size: 14px;
8774
+ word-wrap: break-word;
8775
+ max-width: 280px;
8776
+ padding: 29px 30px;
8777
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
8778
+ border: solid 1px @pale-grey;
8779
+ }
8780
+ }
8802
8781
  .deploy-deleted-function-dialog {
8803
8782
  .sub-title {
8804
8783
  font-size: 16px;
@@ -8811,19 +8790,25 @@ body {
8811
8790
  }
8812
8791
  }
8813
8792
 
8814
- .override-function-dialog {
8815
- .sub-title {
8816
- font-size: 16px;
8817
- color: @silver-chalice-two;
8818
- }
8793
+ .duplicate-function-dialog-wrapper {
8794
+ .main-content {
8795
+ .field-group {
8796
+ display: flex;
8797
+ flex-wrap: wrap;
8798
+ width: 450px;
8819
8799
 
8820
- .buttons {
8821
- display: flex;
8800
+ .field-label.function-name-label,
8801
+ .field-input.function-name-input {
8802
+ width: 100%;
8803
+ }
8822
8804
 
8823
- .function-redirect-button {
8824
- margin-right: auto;
8805
+ .field-input.function-name-input {
8806
+ .error {
8807
+ top: 38px;
8808
+ }
8809
+ }
8810
+ }
8825
8811
  }
8826
- }
8827
8812
  }
8828
8813
 
8829
8814
  .ncl-function-collapsing-row {
@@ -8960,6 +8945,21 @@ body {
8960
8945
  }
8961
8946
  }
8962
8947
 
8948
+ .override-function-dialog {
8949
+ .sub-title {
8950
+ font-size: 16px;
8951
+ color: @silver-chalice-two;
8952
+ }
8953
+
8954
+ .buttons {
8955
+ display: flex;
8956
+
8957
+ .function-redirect-button {
8958
+ margin-right: auto;
8959
+ }
8960
+ }
8961
+ }
8962
+
8963
8963
  .ncl-edit-version {
8964
8964
  background: #f2f2f6;
8965
8965
  position: relative;
@@ -9290,6 +9290,128 @@ body {
9290
9290
  }
9291
9291
  }
9292
9292
 
9293
+ .igz-info-page-content-wrapper {
9294
+ .info-page-content-color-set();
9295
+
9296
+ position: absolute;
9297
+ top: 56px;
9298
+ right: 0;
9299
+ bottom: 0;
9300
+ left: 0;
9301
+ padding-top: 0;
9302
+ transition: @igz-basic-transition;
9303
+ background-color: @page-content-bg-color;
9304
+
9305
+ &.upper-pane-opened {
9306
+ top: 216px;
9307
+ }
9308
+
9309
+ &.filters-opened {
9310
+ right: 377px;
9311
+ }
9312
+
9313
+ &.info-pane-opened {
9314
+ right: 379px;
9315
+ }
9316
+
9317
+ .igz-info-page-content {
9318
+ min-width: 946px;
9319
+ max-width: 100%;
9320
+ padding: 40px 25px;
9321
+ }
9322
+ }
9323
+
9324
+ igz-info-page-actions-bar {
9325
+ .igz-info-page-actions-bar .actions-content-block {
9326
+ margin-left: 14px;
9327
+ }
9328
+ }
9329
+
9330
+ igz-info-page-content {
9331
+ .info-page-content-color-set();
9332
+
9333
+ .container-data-access-policy-table, .data-lifecycle-table {
9334
+ &.common-table {
9335
+ .common-table-header {
9336
+ position: relative;
9337
+ height: 49px;
9338
+ line-height: 48px;
9339
+
9340
+ .common-table-cell {
9341
+ margin-top: -1px;
9342
+ height: 49px;
9343
+
9344
+ &.selected {
9345
+ background-color: @common-table-cell-selected-bg-color;
9346
+ border: @common-table-cell-selected-border;
9347
+ }
9348
+
9349
+ &:last-child {
9350
+ margin-right: 0;
9351
+ }
9352
+
9353
+ &.actions-menu {
9354
+ width: 0;
9355
+ }
9356
+
9357
+ &.check-all-rows {
9358
+ padding-left: 30px;
9359
+
9360
+ .action-checkbox-all {
9361
+ padding-top: 2px;
9362
+ }
9363
+ }
9364
+ }
9365
+
9366
+ .common-table-cells-container {
9367
+ margin-right: 45px;
9368
+
9369
+ .common-table-cell {
9370
+ height: 49px;
9371
+ padding: 0 15px;
9372
+ border-right: @common-table-cell-border-right;
9373
+
9374
+ &:first-child {
9375
+ padding-left: 7px;
9376
+ }
9377
+ }
9378
+ }
9379
+ }
9380
+
9381
+ .common-table-body {
9382
+ margin-top: 7px;
9383
+
9384
+ .common-table-cell {
9385
+ &.actions-menu {
9386
+ width: 45px;
9387
+ }
9388
+ }
9389
+ }
9390
+
9391
+ .data-access-policy-layers, .data-lifecycle-layers {
9392
+ &:last-child {
9393
+ margin-bottom: 20px;
9394
+ }
9395
+ }
9396
+ }
9397
+
9398
+ .sortable-empty {
9399
+ background-color: @sortable-empty-bg-color;
9400
+ color: @sortable-empty-color;
9401
+ font-size: 14px;
9402
+ font-weight: 400;
9403
+ font-family: 'Open Sans', sans-serif;
9404
+ border-bottom: @sortable-empty-border;
9405
+ border-left: @sortable-empty-border;
9406
+ border-right: @sortable-empty-border;
9407
+ padding-left: 70px;
9408
+ height: 40px;
9409
+ line-height: 38px;
9410
+ }
9411
+ }
9412
+ }
9413
+
9414
+
9293
9415
  .info-page-filters-bookmark {
9294
9416
  .info-page-filters-color-set();
9295
9417
 
@@ -9606,151 +9728,58 @@ body {
9606
9728
 
9607
9729
  & > .panel-heading {
9608
9730
  background-color: inherit;
9609
- border: 0;
9610
- }
9611
- }
9612
- }
9613
- }
9614
- }
9615
- }
9616
- }
9617
-
9618
- .info-page-filters-footer {
9619
- display: flex;
9620
- justify-content: flex-end;
9621
- position: absolute;
9622
- height: 70px;
9623
- padding: 16px 18px;
9624
- bottom: 0;
9625
- width: 100%;
9626
-
9627
- button:not(:first-child) {
9628
- margin-left: 5px;
9629
- }
9630
- }
9631
- }
9632
-
9633
- .igz-info-page-content-wrapper {
9634
- .info-page-content-color-set();
9635
-
9636
- position: absolute;
9637
- top: 56px;
9638
- right: 0;
9639
- bottom: 0;
9640
- left: 0;
9641
- padding-top: 0;
9642
- transition: @igz-basic-transition;
9643
- background-color: @page-content-bg-color;
9644
-
9645
- &.upper-pane-opened {
9646
- top: 216px;
9647
- }
9648
-
9649
- &.filters-opened {
9650
- right: 377px;
9651
- }
9652
-
9653
- &.info-pane-opened {
9654
- right: 379px;
9655
- }
9656
-
9657
- .igz-info-page-content {
9658
- min-width: 946px;
9659
- max-width: 100%;
9660
- padding: 40px 25px;
9661
- }
9662
- }
9663
-
9664
- igz-info-page-actions-bar {
9665
- .igz-info-page-actions-bar .actions-content-block {
9666
- margin-left: 14px;
9667
- }
9668
- }
9669
-
9670
- igz-info-page-content {
9671
- .info-page-content-color-set();
9672
-
9673
- .container-data-access-policy-table, .data-lifecycle-table {
9674
- &.common-table {
9675
- .common-table-header {
9676
- position: relative;
9677
- height: 49px;
9678
- line-height: 48px;
9679
-
9680
- .common-table-cell {
9681
- margin-top: -1px;
9682
- height: 49px;
9683
-
9684
- &.selected {
9685
- background-color: @common-table-cell-selected-bg-color;
9686
- border: @common-table-cell-selected-border;
9687
- }
9688
-
9689
- &:last-child {
9690
- margin-right: 0;
9691
- }
9692
-
9693
- &.actions-menu {
9694
- width: 0;
9695
- }
9696
-
9697
- &.check-all-rows {
9698
- padding-left: 30px;
9699
-
9700
- .action-checkbox-all {
9701
- padding-top: 2px;
9702
- }
9703
- }
9704
- }
9705
-
9706
- .common-table-cells-container {
9707
- margin-right: 45px;
9708
-
9709
- .common-table-cell {
9710
- height: 49px;
9711
- padding: 0 15px;
9712
- border-right: @common-table-cell-border-right;
9713
-
9714
- &:first-child {
9715
- padding-left: 7px;
9716
- }
9717
- }
9718
- }
9719
- }
9720
-
9721
- .common-table-body {
9722
- margin-top: 7px;
9723
-
9724
- .common-table-cell {
9725
- &.actions-menu {
9726
- width: 45px;
9731
+ border: 0;
9732
+ }
9733
+ }
9727
9734
  }
9728
9735
  }
9729
9736
  }
9737
+ }
9738
+ }
9730
9739
 
9731
- .data-access-policy-layers, .data-lifecycle-layers {
9732
- &:last-child {
9733
- margin-bottom: 20px;
9734
- }
9740
+ .info-page-filters-footer {
9741
+ display: flex;
9742
+ justify-content: flex-end;
9743
+ position: absolute;
9744
+ height: 70px;
9745
+ padding: 16px 18px;
9746
+ bottom: 0;
9747
+ width: 100%;
9748
+
9749
+ button:not(:first-child) {
9750
+ margin-left: 5px;
9751
+ }
9752
+ }
9753
+ }
9754
+
9755
+ ncl-breadcrumbs {
9756
+ .main-header-title {
9757
+ &:not(.disable-behavior) {
9758
+ &:hover .main-header-title-text {
9759
+ color: @dark-sky-blue;
9735
9760
  }
9736
9761
  }
9737
9762
 
9738
- .sortable-empty {
9739
- background-color: @sortable-empty-bg-color;
9740
- color: @sortable-empty-color;
9741
- font-size: 14px;
9742
- font-weight: 400;
9743
- font-family: 'Open Sans', sans-serif;
9744
- border-bottom: @sortable-empty-border;
9745
- border-left: @sortable-empty-border;
9746
- border-right: @sortable-empty-border;
9747
- padding-left: 70px;
9748
- height: 40px;
9749
- line-height: 38px;
9763
+ &.disable-behavior {
9764
+ color: @dusk-three;
9750
9765
  }
9751
9766
  }
9752
- }
9753
9767
 
9768
+ .igz-icon-right {
9769
+ font-size: 11px;
9770
+ font-weight: 100;
9771
+ margin: 0 14px;
9772
+ }
9773
+
9774
+ .ncl-header-subtitle {
9775
+ color: @greyish-purple;
9776
+ }
9777
+
9778
+ .ncl-bold-subtitle {
9779
+ color: @dusk-three;
9780
+ font-weight: bold;
9781
+ }
9782
+ }
9754
9783
 
9755
9784
  .ncl-breadcrumbs-dropdown {
9756
9785
  display: inline-grid;
@@ -9892,35 +9921,6 @@ igz-info-page-content {
9892
9921
  }
9893
9922
  }
9894
9923
 
9895
- ncl-breadcrumbs {
9896
- .main-header-title {
9897
- &:not(.disable-behavior) {
9898
- &:hover .main-header-title-text {
9899
- color: @dark-sky-blue;
9900
- }
9901
- }
9902
-
9903
- &.disable-behavior {
9904
- color: @dusk-three;
9905
- }
9906
- }
9907
-
9908
- .igz-icon-right {
9909
- font-size: 11px;
9910
- font-weight: 100;
9911
- margin: 0 14px;
9912
- }
9913
-
9914
- .ncl-header-subtitle {
9915
- color: @greyish-purple;
9916
- }
9917
-
9918
- .ncl-bold-subtitle {
9919
- color: @dusk-three;
9920
- font-weight: bold;
9921
- }
9922
- }
9923
-
9924
9924
  .ncl-collapsing-row {
9925
9925
  margin-bottom: 9px;
9926
9926
 
@@ -10121,225 +10121,64 @@ ncl-breadcrumbs {
10121
10121
  padding-bottom: 0;
10122
10122
  }
10123
10123
 
10124
- .tooltip-wrapper {
10125
- .more-info-wrapper {
10126
- padding-left: 0;
10127
- }
10128
- }
10129
- }
10130
-
10131
- .attribute-field {
10132
- margin-right: 1%;
10133
- padding: 8px 0 6px;
10134
-
10135
- .field-label {
10136
- height: 22px;
10137
- }
10138
-
10139
- &.attribute-field-checkbox {
10140
- padding: 35px 0 19px;
10141
- }
10142
-
10143
- .more-info-wrapper {
10144
- height: auto;
10145
- }
10146
- }
10147
-
10148
- .no-class-selected {
10149
- line-height: 48px;
10150
- .duskThree(0.64);
10151
- color: @color;
10152
- }
10153
-
10154
- .ingresses-wrapper {
10155
- .ingresses-table-headers {
10156
- width: calc(100% - 30px);
10157
-
10158
- .host-header {
10159
- width: 38%;
10160
- padding-left: 16px;
10161
- }
10162
-
10163
- .paths-header, .secret-header{
10164
- width: 31%;
10165
- padding-left: 16px;
10166
- }
10167
- }
10168
- }
10169
-
10170
- .advanced-section {
10171
- .collapsed-block-title {
10172
- font-size: 15px;
10173
- font-weight: bold;
10174
- margin: 15px 0;
10175
-
10176
- .icon-collapsed {
10177
- color: .duskThree(0.64)[@color];
10178
- font-size: 12px;
10179
- margin: 0 11px 0 4px;
10180
- }
10181
- }
10182
- }
10183
- }
10184
-
10185
- ncl-navigation-tabs {
10186
- .ncl-navigation-tabs-color-set();
10187
-
10188
- position: relative;
10189
- z-index: 999;
10190
- background: @navigation-tabs-bg-color;
10191
-
10192
- .ncl-navigation-tabs-wrapper {
10193
- display: flex;
10194
- align-items: center;
10195
- justify-content: space-between;
10196
- border-bottom: 1px solid @mystic-two;
10197
- border-top: none;
10198
-
10199
- .ncl-navigation-tabs {
10200
- background: @navigation-tabs-bg-color;
10201
- height: 54px;
10202
-
10203
- .navigation-tab {
10204
- position: relative;
10205
- float: left;
10206
- height: 32px;
10207
- padding: 20px 40px 0;
10208
- font-family: @font-family-sans-serif;
10209
- color: @navigation-tab-color;
10210
- font-size: 13px;
10211
- text-align: center;
10212
- cursor: pointer;
10213
- border-bottom: @navigation-tab-border-bottom;
10214
- box-sizing: content-box;
10215
-
10216
- &.active, &.active:hover {
10217
- background: none;
10218
- color: @navigation-tab-active-hover-color;
10219
- border-bottom: @navigation-tab-active-hover-border-bottom;
10220
- font-weight: bold;
10221
- }
10222
-
10223
- &.ncl-status-indicator {
10224
- padding-right: 8px;
10225
-
10226
- &:hover {
10227
- .ncl-status-tooltip {
10228
- display: flex;
10229
- }
10230
- }
10231
- }
10232
-
10233
- .ncl-status-light {
10234
- position: relative;
10235
- display: inline-block;
10236
- width: 8px;
10237
- height: 8px;
10238
- border-radius: 50%;
10239
- margin-left: 34px;
10240
- background-color: @solid-grey;
10241
-
10242
- &.ncl-status-ready {
10243
- background-color: @tealish;
10244
- }
10245
-
10246
- &.ncl-status-building {
10247
- background-color: @pale-orange;
10248
- }
10249
-
10250
- &.ncl-status-error {
10251
- background-color: @darkish-pink;
10252
- }
10253
-
10254
- .ncl-status-tooltip {
10255
- position: absolute;
10256
- left: 22px;
10257
- top: -10px;
10258
- z-index: 1;
10259
- display: none;
10260
- height: 24px;
10261
- padding: 4px 12px 22px 10px;
10262
- border-radius: 2px;
10263
- background-color: @solid-grey;
10264
- color: @white;
10265
-
10266
- &:after {
10267
- content: "";
10268
- position: absolute;
10269
- right: 100%;
10270
- top: 50%;
10271
- height: 0;
10272
- width: 0;
10273
- margin-top: -5px;
10274
- border: 5px solid transparent;
10275
- border-right-color: @solid-grey;
10276
- pointer-events: none;
10277
- }
10278
-
10279
- &.ncl-status-tooltip-ready {
10280
- padding-left: 10px;
10281
- background-color: @tealish;
10282
-
10283
- &:after {
10284
- border-right-color: @tealish;
10285
- }
10286
- }
10287
-
10288
- &.ncl-status-tooltip-building {
10289
- padding-left: 10px;
10290
- background-color: @pale-orange;
10291
-
10292
- &:after {
10293
- border-right-color: @pale-orange;
10294
- }
10295
- }
10124
+ .tooltip-wrapper {
10125
+ .more-info-wrapper {
10126
+ padding-left: 0;
10127
+ }
10128
+ }
10129
+ }
10296
10130
 
10297
- &.ncl-status-tooltip-error {
10298
- padding-left: 10px;
10299
- background-color: @darkish-pink;
10131
+ .attribute-field {
10132
+ margin-right: 1%;
10133
+ padding: 8px 0 6px;
10300
10134
 
10301
- &:after {
10302
- border-right-color: @darkish-pink;
10303
- }
10304
- }
10135
+ .field-label {
10136
+ height: 22px;
10137
+ }
10305
10138
 
10306
- .ncl-status-icon {
10307
- width: 13px;
10308
- margin-right: 5px;
10139
+ &.attribute-field-checkbox {
10140
+ padding: 35px 0 19px;
10141
+ }
10309
10142
 
10310
- &.ncl-icon-ready {
10311
- margin-top: 3px;
10312
- font-size: 10px;
10313
- }
10143
+ .more-info-wrapper {
10144
+ height: auto;
10145
+ }
10146
+ }
10314
10147
 
10315
- &.ncl-icon-building {
10316
- margin-top: 6px;
10317
- font-size: 5px;
10318
- }
10148
+ .no-class-selected {
10149
+ line-height: 48px;
10150
+ .duskThree(0.64);
10151
+ color: @color;
10152
+ }
10319
10153
 
10320
- &.ncl-icon-error {
10321
- margin-top: 3px;
10322
- font-size: 10px;
10323
- }
10324
- }
10154
+ .ingresses-wrapper {
10155
+ .ingresses-table-headers {
10156
+ width: calc(100% - 30px);
10325
10157
 
10326
- .ncl-status-title {
10327
- font-size: 13px;
10328
- font-weight: normal;
10329
- white-space: nowrap;
10158
+ .host-header {
10159
+ width: 38%;
10160
+ padding-left: 16px;
10161
+ }
10330
10162
 
10331
- &::first-letter {
10332
- text-transform: capitalize;
10333
- }
10334
- }
10335
- }
10336
- }
10163
+ .paths-header, .secret-header{
10164
+ width: 31%;
10165
+ padding-left: 16px;
10337
10166
  }
10338
10167
  }
10339
10168
  }
10340
10169
 
10341
- .test-pane-actions-wrapper {
10342
- margin-right: 35px;
10170
+ .advanced-section {
10171
+ .collapsed-block-title {
10172
+ font-size: 15px;
10173
+ font-weight: bold;
10174
+ margin: 15px 0;
10175
+
10176
+ .icon-collapsed {
10177
+ color: .duskThree(0.64)[@color];
10178
+ font-size: 12px;
10179
+ margin: 0 11px 0 4px;
10180
+ }
10181
+ }
10343
10182
  }
10344
10183
  }
10345
10184
 
@@ -10361,32 +10200,6 @@ ncl-navigation-tabs {
10361
10200
  }
10362
10201
  }
10363
10202
  }
10364
- .ncl-monaco {
10365
- .ncl-monaco-wrapper {
10366
- padding-top: 20px;
10367
- height: 100%;
10368
- border: 1px solid @pale-grey;
10369
- background-color: @white;
10370
-
10371
- &.no-top-padding {
10372
- padding-top: 0;
10373
- }
10374
-
10375
- .ncl-monaco-top-row {
10376
- display: block;
10377
- }
10378
-
10379
- .ncl-monaco-editor {
10380
- height: 100%;
10381
- }
10382
- }
10383
-
10384
- .ncl-monaco-dark {
10385
- background-color: @vs-dark;
10386
- }
10387
- }
10388
-
10389
-
10390
10203
  .ncl-key-value-input {
10391
10204
  .input-wrapper {
10392
10205
  width: 100%;
@@ -10571,25 +10384,212 @@ ncl-navigation-tabs {
10571
10384
  width: 20%;
10572
10385
  }
10573
10386
 
10574
- .input-type {
10575
- flex-grow: 1;
10387
+ .input-type {
10388
+ flex-grow: 1;
10389
+
10390
+ .default-dropdown {
10391
+ .default-dropdown-field {
10392
+ background-color: @white;
10393
+ border-radius: 0;
10394
+ }
10395
+
10396
+ .default-dropdown-container {
10397
+ z-index: 100;
10398
+ }
10399
+ }
10400
+ }
10401
+ }
10402
+ }
10403
+ }
10404
+ }
10405
+
10406
+ ncl-navigation-tabs {
10407
+ .ncl-navigation-tabs-color-set();
10408
+
10409
+ position: relative;
10410
+ z-index: 999;
10411
+ background: @navigation-tabs-bg-color;
10412
+
10413
+ .ncl-navigation-tabs-wrapper {
10414
+ display: flex;
10415
+ align-items: center;
10416
+ justify-content: space-between;
10417
+ border-bottom: 1px solid @mystic-two;
10418
+ border-top: none;
10419
+
10420
+ .ncl-navigation-tabs {
10421
+ background: @navigation-tabs-bg-color;
10422
+ height: 54px;
10423
+
10424
+ .navigation-tab {
10425
+ position: relative;
10426
+ float: left;
10427
+ height: 32px;
10428
+ padding: 20px 40px 0;
10429
+ font-family: @font-family-sans-serif;
10430
+ color: @navigation-tab-color;
10431
+ font-size: 13px;
10432
+ text-align: center;
10433
+ cursor: pointer;
10434
+ border-bottom: @navigation-tab-border-bottom;
10435
+ box-sizing: content-box;
10436
+
10437
+ &.active, &.active:hover {
10438
+ background: none;
10439
+ color: @navigation-tab-active-hover-color;
10440
+ border-bottom: @navigation-tab-active-hover-border-bottom;
10441
+ font-weight: bold;
10442
+ }
10443
+
10444
+ &.ncl-status-indicator {
10445
+ padding-right: 8px;
10446
+
10447
+ &:hover {
10448
+ .ncl-status-tooltip {
10449
+ display: flex;
10450
+ }
10451
+ }
10452
+ }
10453
+
10454
+ .ncl-status-light {
10455
+ position: relative;
10456
+ display: inline-block;
10457
+ width: 8px;
10458
+ height: 8px;
10459
+ border-radius: 50%;
10460
+ margin-left: 34px;
10461
+ background-color: @solid-grey;
10462
+
10463
+ &.ncl-status-ready {
10464
+ background-color: @tealish;
10465
+ }
10466
+
10467
+ &.ncl-status-building {
10468
+ background-color: @pale-orange;
10469
+ }
10470
+
10471
+ &.ncl-status-error {
10472
+ background-color: @darkish-pink;
10473
+ }
10474
+
10475
+ .ncl-status-tooltip {
10476
+ position: absolute;
10477
+ left: 22px;
10478
+ top: -10px;
10479
+ z-index: 1;
10480
+ display: none;
10481
+ height: 24px;
10482
+ padding: 4px 12px 22px 10px;
10483
+ border-radius: 2px;
10484
+ background-color: @solid-grey;
10485
+ color: @white;
10486
+
10487
+ &:after {
10488
+ content: "";
10489
+ position: absolute;
10490
+ right: 100%;
10491
+ top: 50%;
10492
+ height: 0;
10493
+ width: 0;
10494
+ margin-top: -5px;
10495
+ border: 5px solid transparent;
10496
+ border-right-color: @solid-grey;
10497
+ pointer-events: none;
10498
+ }
10499
+
10500
+ &.ncl-status-tooltip-ready {
10501
+ padding-left: 10px;
10502
+ background-color: @tealish;
10503
+
10504
+ &:after {
10505
+ border-right-color: @tealish;
10506
+ }
10507
+ }
10508
+
10509
+ &.ncl-status-tooltip-building {
10510
+ padding-left: 10px;
10511
+ background-color: @pale-orange;
10512
+
10513
+ &:after {
10514
+ border-right-color: @pale-orange;
10515
+ }
10516
+ }
10517
+
10518
+ &.ncl-status-tooltip-error {
10519
+ padding-left: 10px;
10520
+ background-color: @darkish-pink;
10521
+
10522
+ &:after {
10523
+ border-right-color: @darkish-pink;
10524
+ }
10525
+ }
10526
+
10527
+ .ncl-status-icon {
10528
+ width: 13px;
10529
+ margin-right: 5px;
10530
+
10531
+ &.ncl-icon-ready {
10532
+ margin-top: 3px;
10533
+ font-size: 10px;
10534
+ }
10535
+
10536
+ &.ncl-icon-building {
10537
+ margin-top: 6px;
10538
+ font-size: 5px;
10539
+ }
10576
10540
 
10577
- .default-dropdown {
10578
- .default-dropdown-field {
10579
- background-color: @white;
10580
- border-radius: 0;
10541
+ &.ncl-icon-error {
10542
+ margin-top: 3px;
10543
+ font-size: 10px;
10544
+ }
10581
10545
  }
10582
10546
 
10583
- .default-dropdown-container {
10584
- z-index: 100;
10547
+ .ncl-status-title {
10548
+ font-size: 13px;
10549
+ font-weight: normal;
10550
+ white-space: nowrap;
10551
+
10552
+ &::first-letter {
10553
+ text-transform: capitalize;
10554
+ }
10585
10555
  }
10586
10556
  }
10587
10557
  }
10588
10558
  }
10589
10559
  }
10590
10560
  }
10561
+
10562
+ .test-pane-actions-wrapper {
10563
+ margin-right: 35px;
10564
+ }
10565
+ }
10566
+
10567
+ .ncl-monaco {
10568
+ .ncl-monaco-wrapper {
10569
+ padding-top: 20px;
10570
+ height: 100%;
10571
+ border: 1px solid @pale-grey;
10572
+ background-color: @white;
10573
+
10574
+ &.no-top-padding {
10575
+ padding-top: 0;
10576
+ }
10577
+
10578
+ .ncl-monaco-top-row {
10579
+ display: block;
10580
+ }
10581
+
10582
+ .ncl-monaco-editor {
10583
+ height: 100%;
10584
+ }
10585
+ }
10586
+
10587
+ .ncl-monaco-dark {
10588
+ background-color: @vs-dark;
10589
+ }
10591
10590
  }
10592
10591
 
10592
+
10593
10593
  .ncl-search-input {
10594
10594
  position: relative;
10595
10595
  color: @silver;
@@ -11437,105 +11437,6 @@ ncl-navigation-tabs {
11437
11437
  }
11438
11438
  }
11439
11439
 
11440
- .function-from-scratch-content {
11441
- .splash-screen {
11442
- top: 0;
11443
- }
11444
-
11445
- .title-wrapper {
11446
- margin-left: 50px;
11447
-
11448
- .title {
11449
- color: @dusk-three;
11450
- font-size: 16px;
11451
- font-weight: bold;
11452
- }
11453
- }
11454
-
11455
- .function-configuration {
11456
- margin: 28px 0 0 0;
11457
-
11458
- .configuration-form {
11459
- display: flex;
11460
-
11461
- .function-name-wrapper {
11462
- width: 50%;
11463
- display: flex;
11464
- padding: 0 24px 0 74px;
11465
-
11466
- .projects-drop-down {
11467
- width: 40%;
11468
- margin-right: 48px;
11469
-
11470
- .input-label {
11471
- font-size: 14px;
11472
- font-weight: 600;
11473
- color: @dusk-three;
11474
- }
11475
-
11476
- igz-default-dropdown {
11477
- .default-dropdown {
11478
- background-color: @white;
11479
-
11480
- .default-dropdown-field {
11481
- &:focus {
11482
- background-color: inherit;
11483
- }
11484
- }
11485
- }
11486
- }
11487
- }
11488
-
11489
- .function-name {
11490
- width: 100%;
11491
-
11492
- .input-label {
11493
- font-size: 14px;
11494
- font-weight: 600;
11495
- color: @dusk-three;
11496
- }
11497
-
11498
- igz-validating-input-field {
11499
- margin-left: 2px;
11500
- }
11501
- }
11502
- }
11503
-
11504
- .function-runtime-wrapper {
11505
- width: 50%;
11506
- padding-left: 24px;
11507
- padding-right: 10%;
11508
-
11509
- .function-runtime {
11510
- .input-label {
11511
- font-size: 14px;
11512
- font-weight: 600;
11513
- color: @dusk-three;
11514
- }
11515
-
11516
- igz-default-dropdown {
11517
- .default-dropdown {
11518
- background-color: @white;
11519
-
11520
- .default-dropdown-field {
11521
- &:focus {
11522
- background-color: inherit;
11523
- }
11524
- }
11525
- }
11526
- }
11527
-
11528
- .bottom-bar {
11529
- display: flex;
11530
- justify-content: flex-end;
11531
- margin-top: 48px;
11532
- }
11533
- }
11534
- }
11535
- }
11536
- }
11537
- }
11538
-
11539
11440
  .function-from-template-content {
11540
11441
  .ncl-function-from-template-color-set();
11541
11442
 
@@ -11798,6 +11699,105 @@ ncl-navigation-tabs {
11798
11699
  }
11799
11700
  }
11800
11701
 
11702
+ .function-from-scratch-content {
11703
+ .splash-screen {
11704
+ top: 0;
11705
+ }
11706
+
11707
+ .title-wrapper {
11708
+ margin-left: 50px;
11709
+
11710
+ .title {
11711
+ color: @dusk-three;
11712
+ font-size: 16px;
11713
+ font-weight: bold;
11714
+ }
11715
+ }
11716
+
11717
+ .function-configuration {
11718
+ margin: 28px 0 0 0;
11719
+
11720
+ .configuration-form {
11721
+ display: flex;
11722
+
11723
+ .function-name-wrapper {
11724
+ width: 50%;
11725
+ display: flex;
11726
+ padding: 0 24px 0 74px;
11727
+
11728
+ .projects-drop-down {
11729
+ width: 40%;
11730
+ margin-right: 48px;
11731
+
11732
+ .input-label {
11733
+ font-size: 14px;
11734
+ font-weight: 600;
11735
+ color: @dusk-three;
11736
+ }
11737
+
11738
+ igz-default-dropdown {
11739
+ .default-dropdown {
11740
+ background-color: @white;
11741
+
11742
+ .default-dropdown-field {
11743
+ &:focus {
11744
+ background-color: inherit;
11745
+ }
11746
+ }
11747
+ }
11748
+ }
11749
+ }
11750
+
11751
+ .function-name {
11752
+ width: 100%;
11753
+
11754
+ .input-label {
11755
+ font-size: 14px;
11756
+ font-weight: 600;
11757
+ color: @dusk-three;
11758
+ }
11759
+
11760
+ igz-validating-input-field {
11761
+ margin-left: 2px;
11762
+ }
11763
+ }
11764
+ }
11765
+
11766
+ .function-runtime-wrapper {
11767
+ width: 50%;
11768
+ padding-left: 24px;
11769
+ padding-right: 10%;
11770
+
11771
+ .function-runtime {
11772
+ .input-label {
11773
+ font-size: 14px;
11774
+ font-weight: 600;
11775
+ color: @dusk-three;
11776
+ }
11777
+
11778
+ igz-default-dropdown {
11779
+ .default-dropdown {
11780
+ background-color: @white;
11781
+
11782
+ .default-dropdown-field {
11783
+ &:focus {
11784
+ background-color: inherit;
11785
+ }
11786
+ }
11787
+ }
11788
+ }
11789
+
11790
+ .bottom-bar {
11791
+ display: flex;
11792
+ justify-content: flex-end;
11793
+ margin-top: 48px;
11794
+ }
11795
+ }
11796
+ }
11797
+ }
11798
+ }
11799
+ }
11800
+
11801
11801
  .function-import-wrapper-content {
11802
11802
  font-family: @font-family-sans-serif;
11803
11803
  padding-left: 3%;