@syncfusion/blazor-themes 24.1.43 → 24.1.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +135 -12
  2. package/SCSS-Themes/bootstrap.scss +135 -12
  3. package/SCSS-Themes/bootstrap4.scss +135 -12
  4. package/SCSS-Themes/bootstrap5-dark.scss +135 -12
  5. package/SCSS-Themes/bootstrap5.scss +135 -12
  6. package/SCSS-Themes/buttons/button/bootstrap-dark.scss +52 -0
  7. package/SCSS-Themes/buttons/button/bootstrap.scss +52 -0
  8. package/SCSS-Themes/buttons/button/bootstrap4.scss +52 -0
  9. package/SCSS-Themes/buttons/button/bootstrap5-dark.scss +52 -0
  10. package/SCSS-Themes/buttons/button/bootstrap5.scss +52 -0
  11. package/SCSS-Themes/buttons/button/fabric-dark.scss +52 -0
  12. package/SCSS-Themes/buttons/button/fabric.scss +52 -0
  13. package/SCSS-Themes/buttons/button/fluent-dark.scss +52 -0
  14. package/SCSS-Themes/buttons/button/fluent.scss +52 -0
  15. package/SCSS-Themes/buttons/button/highcontrast.scss +52 -0
  16. package/SCSS-Themes/buttons/button/material-dark.scss +52 -0
  17. package/SCSS-Themes/buttons/button/material.scss +52 -0
  18. package/SCSS-Themes/buttons/button/material3-dark.scss +52 -0
  19. package/SCSS-Themes/buttons/button/material3.scss +52 -0
  20. package/SCSS-Themes/buttons/button/tailwind-dark.scss +52 -0
  21. package/SCSS-Themes/buttons/button/tailwind.scss +52 -0
  22. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap-dark.scss +5 -0
  23. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap.scss +5 -0
  24. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap4.scss +5 -0
  25. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5-dark.scss +5 -0
  26. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5.scss +5 -0
  27. package/SCSS-Themes/dropdowns/drop-down-tree/fabric-dark.scss +5 -0
  28. package/SCSS-Themes/dropdowns/drop-down-tree/fabric.scss +5 -0
  29. package/SCSS-Themes/dropdowns/drop-down-tree/fluent-dark.scss +5 -0
  30. package/SCSS-Themes/dropdowns/drop-down-tree/fluent.scss +5 -0
  31. package/SCSS-Themes/dropdowns/drop-down-tree/highcontrast.scss +5 -0
  32. package/SCSS-Themes/dropdowns/drop-down-tree/material-dark.scss +5 -0
  33. package/SCSS-Themes/dropdowns/drop-down-tree/material.scss +5 -0
  34. package/SCSS-Themes/dropdowns/drop-down-tree/material3-dark.scss +5 -0
  35. package/SCSS-Themes/dropdowns/drop-down-tree/material3.scss +5 -0
  36. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind-dark.scss +5 -0
  37. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind.scss +5 -0
  38. package/SCSS-Themes/fabric-dark.scss +135 -12
  39. package/SCSS-Themes/fabric.scss +135 -12
  40. package/SCSS-Themes/filemanager/file-manager/bootstrap-dark.scss +12 -6
  41. package/SCSS-Themes/filemanager/file-manager/bootstrap.scss +12 -6
  42. package/SCSS-Themes/filemanager/file-manager/bootstrap4.scss +12 -6
  43. package/SCSS-Themes/filemanager/file-manager/bootstrap5-dark.scss +12 -6
  44. package/SCSS-Themes/filemanager/file-manager/bootstrap5.scss +12 -6
  45. package/SCSS-Themes/filemanager/file-manager/fabric-dark.scss +12 -6
  46. package/SCSS-Themes/filemanager/file-manager/fabric.scss +12 -6
  47. package/SCSS-Themes/filemanager/file-manager/fluent-dark.scss +12 -6
  48. package/SCSS-Themes/filemanager/file-manager/fluent.scss +12 -6
  49. package/SCSS-Themes/filemanager/file-manager/highcontrast.scss +12 -6
  50. package/SCSS-Themes/filemanager/file-manager/material-dark.scss +12 -6
  51. package/SCSS-Themes/filemanager/file-manager/material.scss +12 -6
  52. package/SCSS-Themes/filemanager/file-manager/material3-dark.scss +12 -6
  53. package/SCSS-Themes/filemanager/file-manager/material3.scss +12 -6
  54. package/SCSS-Themes/filemanager/file-manager/tailwind-dark.scss +12 -6
  55. package/SCSS-Themes/filemanager/file-manager/tailwind.scss +12 -6
  56. package/SCSS-Themes/fluent-dark.scss +136 -13
  57. package/SCSS-Themes/fluent.scss +136 -13
  58. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +9 -0
  59. package/SCSS-Themes/grids/grid/bootstrap.scss +9 -0
  60. package/SCSS-Themes/grids/grid/bootstrap4.scss +9 -0
  61. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +9 -0
  62. package/SCSS-Themes/grids/grid/bootstrap5.scss +9 -0
  63. package/SCSS-Themes/grids/grid/fabric-dark.scss +9 -0
  64. package/SCSS-Themes/grids/grid/fabric.scss +9 -0
  65. package/SCSS-Themes/grids/grid/fluent-dark.scss +9 -0
  66. package/SCSS-Themes/grids/grid/fluent.scss +9 -0
  67. package/SCSS-Themes/grids/grid/highcontrast.scss +9 -0
  68. package/SCSS-Themes/grids/grid/material-dark.scss +10 -1
  69. package/SCSS-Themes/grids/grid/material.scss +9 -0
  70. package/SCSS-Themes/grids/grid/material3-dark.scss +9 -0
  71. package/SCSS-Themes/grids/grid/material3.scss +9 -0
  72. package/SCSS-Themes/grids/grid/tailwind-dark.scss +9 -0
  73. package/SCSS-Themes/grids/grid/tailwind.scss +9 -0
  74. package/SCSS-Themes/highcontrast.scss +135 -12
  75. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +39 -6
  76. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +39 -6
  77. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +39 -6
  78. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +39 -6
  79. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +39 -6
  80. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +39 -6
  81. package/SCSS-Themes/image-editor/image-editor/fabric.scss +39 -6
  82. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +39 -6
  83. package/SCSS-Themes/image-editor/image-editor/fluent.scss +39 -6
  84. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +39 -6
  85. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +40 -7
  86. package/SCSS-Themes/image-editor/image-editor/material.scss +40 -7
  87. package/SCSS-Themes/image-editor/image-editor/material3-dark.scss +39 -6
  88. package/SCSS-Themes/image-editor/image-editor/material3.scss +39 -6
  89. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +39 -6
  90. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +39 -6
  91. package/SCSS-Themes/inputs/data-form/material3-dark.scss +1 -1
  92. package/SCSS-Themes/inputs/data-form/material3.scss +1 -1
  93. package/SCSS-Themes/material-dark.scss +137 -14
  94. package/SCSS-Themes/material.scss +136 -13
  95. package/SCSS-Themes/material3-dark.scss +136 -13
  96. package/SCSS-Themes/material3.scss +136 -13
  97. package/SCSS-Themes/pdfviewer/pdfviewer/fluent-dark.scss +1 -1
  98. package/SCSS-Themes/pdfviewer/pdfviewer/fluent.scss +1 -1
  99. package/SCSS-Themes/querybuilder/query-builder/bootstrap-dark.scss +4 -0
  100. package/SCSS-Themes/querybuilder/query-builder/bootstrap.scss +4 -0
  101. package/SCSS-Themes/querybuilder/query-builder/bootstrap4.scss +4 -0
  102. package/SCSS-Themes/querybuilder/query-builder/bootstrap5-dark.scss +4 -0
  103. package/SCSS-Themes/querybuilder/query-builder/bootstrap5.scss +4 -0
  104. package/SCSS-Themes/querybuilder/query-builder/fabric-dark.scss +4 -0
  105. package/SCSS-Themes/querybuilder/query-builder/fabric.scss +4 -0
  106. package/SCSS-Themes/querybuilder/query-builder/fluent-dark.scss +4 -0
  107. package/SCSS-Themes/querybuilder/query-builder/fluent.scss +4 -0
  108. package/SCSS-Themes/querybuilder/query-builder/highcontrast.scss +4 -0
  109. package/SCSS-Themes/querybuilder/query-builder/material-dark.scss +4 -0
  110. package/SCSS-Themes/querybuilder/query-builder/material.scss +4 -0
  111. package/SCSS-Themes/querybuilder/query-builder/material3-dark.scss +4 -0
  112. package/SCSS-Themes/querybuilder/query-builder/material3.scss +4 -0
  113. package/SCSS-Themes/querybuilder/query-builder/tailwind-dark.scss +4 -0
  114. package/SCSS-Themes/querybuilder/query-builder/tailwind.scss +4 -0
  115. package/SCSS-Themes/splitbuttons/progress-button/bootstrap-dark.scss +14 -0
  116. package/SCSS-Themes/splitbuttons/progress-button/bootstrap.scss +14 -0
  117. package/SCSS-Themes/splitbuttons/progress-button/bootstrap4.scss +14 -0
  118. package/SCSS-Themes/splitbuttons/progress-button/bootstrap5-dark.scss +14 -0
  119. package/SCSS-Themes/splitbuttons/progress-button/bootstrap5.scss +14 -0
  120. package/SCSS-Themes/splitbuttons/progress-button/fabric-dark.scss +14 -0
  121. package/SCSS-Themes/splitbuttons/progress-button/fabric.scss +14 -0
  122. package/SCSS-Themes/splitbuttons/progress-button/fluent-dark.scss +14 -0
  123. package/SCSS-Themes/splitbuttons/progress-button/fluent.scss +14 -0
  124. package/SCSS-Themes/splitbuttons/progress-button/highcontrast.scss +14 -0
  125. package/SCSS-Themes/splitbuttons/progress-button/material-dark.scss +14 -0
  126. package/SCSS-Themes/splitbuttons/progress-button/material.scss +14 -0
  127. package/SCSS-Themes/splitbuttons/progress-button/material3-dark.scss +14 -0
  128. package/SCSS-Themes/splitbuttons/progress-button/material3.scss +14 -0
  129. package/SCSS-Themes/splitbuttons/progress-button/tailwind-dark.scss +14 -0
  130. package/SCSS-Themes/splitbuttons/progress-button/tailwind.scss +14 -0
  131. package/SCSS-Themes/tailwind-dark.scss +135 -12
  132. package/SCSS-Themes/tailwind.scss +135 -12
  133. package/package.json +1 -1
@@ -24320,12 +24320,22 @@ $btn-focus-box-shadow: none !default;
24320
24320
  @if $skin-name == 'FluentUI' {
24321
24321
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24322
24322
  }
24323
+
24324
+ @if $skin-name == 'bootstrap5' {
24325
+ background: $btn-outline-active-bgcolor;
24326
+ color: $btn-outline-active-color;
24327
+ }
24323
24328
  }
24324
24329
 
24325
24330
  &:focus-visible { // only for keybord
24326
24331
  @if $skin-name == 'FluentUI' {
24327
24332
  background: $btn-outline-bgcolor;
24328
24333
  }
24334
+
24335
+ @if $skin-name == 'bootstrap5' {
24336
+ box-shadow: $btn-focus-box-shadow;
24337
+ }
24338
+
24329
24339
  @if $skin-name == 'Material3' {
24330
24340
  background: $btn-active-bgcolor;
24331
24341
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24376,12 +24386,22 @@ $btn-focus-box-shadow: none !default;
24376
24386
  @if $skin-name == 'FluentUI' {
24377
24387
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24378
24388
  }
24389
+
24390
+ @if $skin-name == 'bootstrap5' {
24391
+ background: $btn-outline-primary-focus-bgcolor;
24392
+ color: $btn-outline-active-color;
24393
+ }
24379
24394
  }
24380
24395
 
24381
24396
  &:focus-visible { // only for keybord
24382
24397
  @if $skin-name == 'FluentUI' {
24383
24398
  background: $btn-outline-bgcolor;
24384
24399
  }
24400
+
24401
+ @if $skin-name == 'bootstrap5' {
24402
+ box-shadow: $btn-primary-focus-box-shadow;
24403
+ }
24404
+
24385
24405
  @if $skin-name == 'Material3' {
24386
24406
  background: $btn-primary-active-bgcolor;
24387
24407
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24439,12 +24459,20 @@ $btn-focus-box-shadow: none !default;
24439
24459
  @if $skin-name == 'FluentUI' {
24440
24460
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24441
24461
  }
24462
+
24463
+ @if $skin-name == 'bootstrap5' {
24464
+ background: $btn-success-bgcolor;
24465
+ color: $btn-success-color;
24466
+ }
24442
24467
  }
24443
24468
 
24444
24469
  &:focus-visible { // only for keybord
24445
24470
  @if $skin-name == 'FluentUI' {
24446
24471
  background: $btn-outline-bgcolor;
24447
24472
  }
24473
+ @if $skin-name == 'bootstrap5' {
24474
+ box-shadow: $btn-success-focus-box-shadow;
24475
+ }
24448
24476
  @if $skin-name == 'Material3' {
24449
24477
  background: $btn-success-active-bgcolor;
24450
24478
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24502,12 +24530,20 @@ $btn-focus-box-shadow: none !default;
24502
24530
  @if $skin-name == 'FluentUI' {
24503
24531
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24504
24532
  }
24533
+
24534
+ @if $skin-name == 'bootstrap5' {
24535
+ background: $btn-info-bgcolor;
24536
+ color: $btn-info-color;
24537
+ }
24505
24538
  }
24506
24539
 
24507
24540
  &:focus-visible { // only for keybord
24508
24541
  @if $skin-name == 'FluentUI' {
24509
24542
  background: $btn-outline-bgcolor;
24510
24543
  }
24544
+ @if $skin-name == 'bootstrap5' {
24545
+ box-shadow: $btn-info-focus-box-shadow;
24546
+ }
24511
24547
  @if $skin-name == 'Material3' {
24512
24548
  background: $btn-info-active-bgcolor;
24513
24549
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24565,12 +24601,20 @@ $btn-focus-box-shadow: none !default;
24565
24601
  @if $skin-name == 'FluentUI' {
24566
24602
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24567
24603
  }
24604
+
24605
+ @if $skin-name == 'bootstrap5' {
24606
+ background: $btn-warning-bgcolor;
24607
+ color: $btn-warning-color;
24608
+ }
24568
24609
  }
24569
24610
 
24570
24611
  &:focus-visible { // only for keybord
24571
24612
  @if $skin-name == 'FluentUI' {
24572
24613
  background: $btn-outline-bgcolor;
24573
24614
  }
24615
+ @if $skin-name == 'bootstrap5' {
24616
+ box-shadow: $btn-warning-focus-box-shadow;
24617
+ }
24574
24618
  @if $skin-name == 'Material3' {
24575
24619
  background: $btn-warning-active-bgcolor;
24576
24620
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24628,12 +24672,20 @@ $btn-focus-box-shadow: none !default;
24628
24672
  @if $skin-name == 'FluentUI' {
24629
24673
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24630
24674
  }
24675
+
24676
+ @if $skin-name == 'bootstrap5' {
24677
+ background: $btn-danger-bgcolor;
24678
+ color: $btn-danger-color;
24679
+ }
24631
24680
  }
24632
24681
 
24633
24682
  &:focus-visible { // only for keybord
24634
24683
  @if $skin-name == 'FluentUI' {
24635
24684
  background: $btn-outline-bgcolor;
24636
24685
  }
24686
+ @if $skin-name == 'bootstrap5' {
24687
+ box-shadow: $btn-danger-focus-box-shadow;
24688
+ }
24637
24689
  @if $skin-name == 'Material3' {
24638
24690
  background: $btn-danger-active-bgcolor;
24639
24691
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -58855,6 +58907,11 @@ $ddt-remains-count-padding-top: 6px !default;
58855
58907
  }
58856
58908
  }
58857
58909
 
58910
+ &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
58911
+ &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
58912
+ display: flex;
58913
+ }
58914
+
58858
58915
  .e-chips-wrapper {
58859
58916
  width: 100%;
58860
58917
  }
@@ -82631,6 +82688,15 @@ margin: $grid-group-animator-cell-margin;
82631
82688
  color: $grid-cell-selection-color;
82632
82689
  }
82633
82690
 
82691
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
82692
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
82693
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
82694
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
82695
+ @if $grid-skin == 'material3' {
82696
+ background-color: rgba($primary-container, 1);
82697
+ }
82698
+ }
82699
+
82634
82700
  .e-filterbarcell,
82635
82701
  .e-filterbarcelldisabled {
82636
82702
  background-color: $grid-header-bg-color;
@@ -84296,7 +84362,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
84296
84362
  }
84297
84363
 
84298
84364
  &.e-active,
84299
- &.e-hover {
84365
+ &.e-hover,
84366
+ &:hover {
84300
84367
  @include visibility(visible);
84301
84368
  }
84302
84369
  }
@@ -84944,7 +85011,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
84944
85011
  margin: $fe-mobile-lg-item-margin;
84945
85012
  width: $fe-mobile-lg-item-width;
84946
85013
 
84947
- &.e-hover {
85014
+ &.e-hover,
85015
+ &:hover {
84948
85016
  @include visibility(hidden);
84949
85017
  }
84950
85018
 
@@ -85855,11 +85923,13 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
85855
85923
  @include active-item;
85856
85924
  }
85857
85925
 
85858
- &.e-hover {
85926
+ &.e-hover,
85927
+ &:hover {
85859
85928
  @include hover-item($fe-hover-bg-color, $fe-hover-border-color);
85860
85929
  }
85861
85930
 
85862
- &.e-active.e-hover {
85931
+ &.e-active.e-hover,
85932
+ &.e-active:hover {
85863
85933
  @include hover-item($fe-ah-bg-color, $fe-ah-border-color);
85864
85934
  }
85865
85935
 
@@ -85867,7 +85937,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
85867
85937
  border-color: $fe-focus-border-color;
85868
85938
  }
85869
85939
 
85870
- &.e-hover.e-fe-drop-folder {
85940
+ &.e-hover.e-fe-drop-folder,
85941
+ &:hover.e-fe-drop-folder {
85871
85942
  border-color: $fe-drop-folder-bg-color;
85872
85943
  }
85873
85944
  }
@@ -85907,7 +85978,8 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
85907
85978
 
85908
85979
  .e-large-icon {
85909
85980
 
85910
- &.e-hover {
85981
+ &.e-hover,
85982
+ &:hover {
85911
85983
  @include hover-item(transparent, transparent);
85912
85984
  }
85913
85985
 
@@ -88977,6 +89049,20 @@ $btn-flat-primary-path-arc: none;
88977
89049
  }
88978
89050
  }
88979
89051
 
89052
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
89053
+ fill: $btn-outline-color;
89054
+ stroke: $btn-outline-color;
89055
+ }
89056
+
89057
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
89058
+ fill: $btn-color;
89059
+ stroke: $btn-color;
89060
+ }
89061
+
89062
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
89063
+ stroke: $btn-outline-color;
89064
+ }
89065
+
88980
89066
 
88981
89067
 
88982
89068
 
@@ -114553,6 +114639,10 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
114553
114639
  border-top: $qrybldr-val-error-border;
114554
114640
  }
114555
114641
 
114642
+ .e-qb-ddt.e-ddt .e-prevent .e-fullrow {
114643
+ cursor: default !important; /* stylelint-disable-line declaration-no-important */
114644
+ }
114645
+
114556
114646
  .e-dropdown-popup {
114557
114647
 
114558
114648
  & .e-addgroup {
@@ -120830,6 +120920,8 @@ $image-editor-bigger-dropdown-btn-preview-left: -1px !default;
120830
120920
  $image-editor-slider-handler: calc(50% - 6px) !default;
120831
120921
  $image-editor-bigger-slider-handler: calc(50% - 8px) !default;
120832
120922
  $image-editor-device-slider-handler: calc(50% - 8px) !default;
120923
+ $image-editor-finetune-value-span: 29% !default;
120924
+ $image-editor-finetune-span: 29% !default;
120833
120925
 
120834
120926
  @include export-module('image-editor-layout') {
120835
120927
 
@@ -121305,18 +121397,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
121305
121397
  }
121306
121398
  }
121307
121399
  .e-ie-straighten-value-span,
121308
- .e-ie-straighten-span {
121309
- font-size: 14px;
121400
+ .e-ie-straighten-span,
121401
+ .e-ie-toolbar-straighten {
121402
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
121310
121403
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
121311
121404
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
121312
121405
  }
121313
121406
 
121314
121407
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
121315
121408
  height: auto;
121316
- @if $skin-name == 'Material3' {
121317
- margin-left: 8px;
121318
- padding-right: 2px;
121319
- }
121409
+ margin-left: 8px;
121410
+ padding-right: 2px;
121320
121411
  }
121321
121412
 
121322
121413
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -121336,6 +121427,26 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
121336
121427
  }
121337
121428
  }
121338
121429
 
121430
+ .e-ie-finetune-value-span {
121431
+ top: $image-editor-finetune-value-span !important; /* stylelint-disable-line declaration-no-important */
121432
+ }
121433
+
121434
+ .e-ie-finetune-slider-label {
121435
+ top: $image-editor-finetune-span !important; /* stylelint-disable-line declaration-no-important */
121436
+ }
121437
+
121438
+ .e-ie-finetune-slider-wrap {
121439
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
121440
+ }
121441
+
121442
+ .e-transparency-slider-wrap {
121443
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
121444
+ }
121445
+
121446
+ .e-ie-slider-wrap {
121447
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
121448
+ }
121449
+
121339
121450
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
121340
121451
  @if $skin-name == 'Material3' {
121341
121452
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -121352,6 +121463,18 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
121352
121463
  .e-dropdown-popup.e-ie-ddb-popup {
121353
121464
  background: none !important; /* stylelint-disable-line declaration-no-important */
121354
121465
  }
121466
+
121467
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
121468
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
121469
+ }
121470
+
121471
+ .e-device.e-image-editor {
121472
+ .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
121473
+ @if $skin-name == 'Material' {
121474
+ top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
121475
+ }
121476
+ }
121477
+ }
121355
121478
  }
121356
121479
 
121357
121480
 
@@ -30,6 +30,8 @@ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
30
30
  $image-editor-slider-handler: calc(50% - 5px) !default;
31
31
  $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
32
32
  $image-editor-device-slider-handler: calc(50% - 7px) !default;
33
+ $image-editor-finetune-value-span: 31% !default;
34
+ $image-editor-finetune-span: 31% !default;
33
35
 
34
36
  @include export-module('image-editor-layout') {
35
37
 
@@ -505,18 +507,17 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
505
507
  }
506
508
  }
507
509
  .e-ie-straighten-value-span,
508
- .e-ie-straighten-span {
509
- font-size: 14px;
510
+ .e-ie-straighten-span,
511
+ .e-ie-toolbar-straighten {
512
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
510
513
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
511
514
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
512
515
  }
513
516
 
514
517
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
515
518
  height: auto;
516
- @if $skin-name == 'Material3' {
517
- margin-left: 8px;
518
- padding-right: 2px;
519
- }
519
+ margin-left: 8px;
520
+ padding-right: 2px;
520
521
  }
521
522
 
522
523
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -536,6 +537,26 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
536
537
  }
537
538
  }
538
539
 
540
+ .e-ie-finetune-value-span {
541
+ top: $image-editor-finetune-value-span !important; /* stylelint-disable-line declaration-no-important */
542
+ }
543
+
544
+ .e-ie-finetune-slider-label {
545
+ top: $image-editor-finetune-span !important; /* stylelint-disable-line declaration-no-important */
546
+ }
547
+
548
+ .e-ie-finetune-slider-wrap {
549
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
550
+ }
551
+
552
+ .e-transparency-slider-wrap {
553
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
554
+ }
555
+
556
+ .e-ie-slider-wrap {
557
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
558
+ }
559
+
539
560
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
540
561
  @if $skin-name == 'Material3' {
541
562
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -552,6 +573,18 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
552
573
  .e-dropdown-popup.e-ie-ddb-popup {
553
574
  background: none !important; /* stylelint-disable-line declaration-no-important */
554
575
  }
576
+
577
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
578
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
579
+ }
580
+
581
+ .e-device.e-image-editor {
582
+ .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
583
+ @if $skin-name == 'Material' {
584
+ top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
585
+ }
586
+ }
587
+ }
555
588
  }
556
589
 
557
590
 
@@ -30,6 +30,8 @@ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
30
30
  $image-editor-slider-handler: calc(50% - 5px) !default;
31
31
  $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
32
32
  $image-editor-device-slider-handler: calc(50% - 7px) !default;
33
+ $image-editor-finetune-value-span: 31% !default;
34
+ $image-editor-finetune-span: 31% !default;
33
35
 
34
36
  @include export-module('image-editor-layout') {
35
37
 
@@ -505,18 +507,17 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
505
507
  }
506
508
  }
507
509
  .e-ie-straighten-value-span,
508
- .e-ie-straighten-span {
509
- font-size: 14px;
510
+ .e-ie-straighten-span,
511
+ .e-ie-toolbar-straighten {
512
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
510
513
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
511
514
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
512
515
  }
513
516
 
514
517
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
515
518
  height: auto;
516
- @if $skin-name == 'Material3' {
517
- margin-left: 8px;
518
- padding-right: 2px;
519
- }
519
+ margin-left: 8px;
520
+ padding-right: 2px;
520
521
  }
521
522
 
522
523
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -536,6 +537,26 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
536
537
  }
537
538
  }
538
539
 
540
+ .e-ie-finetune-value-span {
541
+ top: $image-editor-finetune-value-span !important; /* stylelint-disable-line declaration-no-important */
542
+ }
543
+
544
+ .e-ie-finetune-slider-label {
545
+ top: $image-editor-finetune-span !important; /* stylelint-disable-line declaration-no-important */
546
+ }
547
+
548
+ .e-ie-finetune-slider-wrap {
549
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
550
+ }
551
+
552
+ .e-transparency-slider-wrap {
553
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
554
+ }
555
+
556
+ .e-ie-slider-wrap {
557
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
558
+ }
559
+
539
560
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
540
561
  @if $skin-name == 'Material3' {
541
562
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -552,6 +573,18 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
552
573
  .e-dropdown-popup.e-ie-ddb-popup {
553
574
  background: none !important; /* stylelint-disable-line declaration-no-important */
554
575
  }
576
+
577
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
578
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
579
+ }
580
+
581
+ .e-device.e-image-editor {
582
+ .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
583
+ @if $skin-name == 'Material' {
584
+ top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
585
+ }
586
+ }
587
+ }
555
588
  }
556
589
 
557
590
 
@@ -30,6 +30,8 @@ $image-editor-bigger-dropdown-btn-preview-left: 0 !default;
30
30
  $image-editor-slider-handler: calc(50% - 6px) !default;
31
31
  $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
32
32
  $image-editor-device-slider-handler: calc(50% - 7px) !default;
33
+ $image-editor-finetune-value-span: 31% !default;
34
+ $image-editor-finetune-span: 31% !default;
33
35
 
34
36
  @include export-module('image-editor-layout') {
35
37
 
@@ -505,18 +507,17 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
505
507
  }
506
508
  }
507
509
  .e-ie-straighten-value-span,
508
- .e-ie-straighten-span {
509
- font-size: 14px;
510
+ .e-ie-straighten-span,
511
+ .e-ie-toolbar-straighten {
512
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
510
513
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
511
514
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
512
515
  }
513
516
 
514
517
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
515
518
  height: auto;
516
- @if $skin-name == 'Material3' {
517
- margin-left: 8px;
518
- padding-right: 2px;
519
- }
519
+ margin-left: 8px;
520
+ padding-right: 2px;
520
521
  }
521
522
 
522
523
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -536,6 +537,26 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
536
537
  }
537
538
  }
538
539
 
540
+ .e-ie-finetune-value-span {
541
+ top: $image-editor-finetune-value-span !important; /* stylelint-disable-line declaration-no-important */
542
+ }
543
+
544
+ .e-ie-finetune-slider-label {
545
+ top: $image-editor-finetune-span !important; /* stylelint-disable-line declaration-no-important */
546
+ }
547
+
548
+ .e-ie-finetune-slider-wrap {
549
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
550
+ }
551
+
552
+ .e-transparency-slider-wrap {
553
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
554
+ }
555
+
556
+ .e-ie-slider-wrap {
557
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
558
+ }
559
+
539
560
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
540
561
  @if $skin-name == 'Material3' {
541
562
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -552,6 +573,18 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
552
573
  .e-dropdown-popup.e-ie-ddb-popup {
553
574
  background: none !important; /* stylelint-disable-line declaration-no-important */
554
575
  }
576
+
577
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
578
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
579
+ }
580
+
581
+ .e-device.e-image-editor {
582
+ .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
583
+ @if $skin-name == 'Material' {
584
+ top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
585
+ }
586
+ }
587
+ }
555
588
  }
556
589
 
557
590
 
@@ -30,6 +30,8 @@ $image-editor-bigger-dropdown-btn-preview-left: -4px !default;
30
30
  $image-editor-slider-handler: calc(50% - 5px) !default;
31
31
  $image-editor-bigger-slider-handler: calc(50% - 6px) !default;
32
32
  $image-editor-device-slider-handler: calc(50% - 8px) !default;
33
+ $image-editor-finetune-value-span: 29% !default;
34
+ $image-editor-finetune-span: 29% !default;
33
35
 
34
36
  @include export-module('image-editor-layout') {
35
37
 
@@ -505,18 +507,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
505
507
  }
506
508
  }
507
509
  .e-ie-straighten-value-span,
508
- .e-ie-straighten-span {
509
- font-size: 14px;
510
+ .e-ie-straighten-span,
511
+ .e-ie-toolbar-straighten {
512
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
510
513
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
511
514
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
512
515
  }
513
516
 
514
517
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
515
518
  height: auto;
516
- @if $skin-name == 'Material3' {
517
- margin-left: 8px;
518
- padding-right: 2px;
519
- }
519
+ margin-left: 8px;
520
+ padding-right: 2px;
520
521
  }
521
522
 
522
523
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -536,6 +537,26 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
536
537
  }
537
538
  }
538
539
 
540
+ .e-ie-finetune-value-span {
541
+ top: $image-editor-finetune-value-span !important; /* stylelint-disable-line declaration-no-important */
542
+ }
543
+
544
+ .e-ie-finetune-slider-label {
545
+ top: $image-editor-finetune-span !important; /* stylelint-disable-line declaration-no-important */
546
+ }
547
+
548
+ .e-ie-finetune-slider-wrap {
549
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
550
+ }
551
+
552
+ .e-transparency-slider-wrap {
553
+ top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
554
+ }
555
+
556
+ .e-ie-slider-wrap {
557
+ top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
558
+ }
559
+
539
560
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
540
561
  @if $skin-name == 'Material3' {
541
562
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -552,6 +573,18 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
552
573
  .e-dropdown-popup.e-ie-ddb-popup {
553
574
  background: none !important; /* stylelint-disable-line declaration-no-important */
554
575
  }
576
+
577
+ .e-device.e-image-editor .e-ie-device-transparency-slider {
578
+ margin-left: calc(50% - 80px) !important; /* stylelint-disable-line declaration-no-important */
579
+ }
580
+
581
+ .e-device.e-image-editor {
582
+ .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
583
+ @if $skin-name == 'Material' {
584
+ top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
585
+ }
586
+ }
587
+ }
555
588
  }
556
589
 
557
590