@syncfusion/blazor-themes 23.1.41 → 23.1.43

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 (145) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +52 -27
  2. package/SCSS-Themes/bootstrap.scss +52 -27
  3. package/SCSS-Themes/bootstrap4.scss +52 -27
  4. package/SCSS-Themes/bootstrap5-dark.scss +52 -27
  5. package/SCSS-Themes/bootstrap5.scss +52 -27
  6. package/SCSS-Themes/buttons/switch/bootstrap-dark.scss +6 -2
  7. package/SCSS-Themes/buttons/switch/bootstrap.scss +6 -2
  8. package/SCSS-Themes/buttons/switch/bootstrap4.scss +6 -2
  9. package/SCSS-Themes/buttons/switch/bootstrap5-dark.scss +6 -2
  10. package/SCSS-Themes/buttons/switch/bootstrap5.scss +6 -2
  11. package/SCSS-Themes/buttons/switch/fabric-dark.scss +6 -2
  12. package/SCSS-Themes/buttons/switch/fabric.scss +6 -2
  13. package/SCSS-Themes/buttons/switch/fluent-dark.scss +6 -2
  14. package/SCSS-Themes/buttons/switch/fluent.scss +6 -2
  15. package/SCSS-Themes/buttons/switch/highcontrast.scss +6 -2
  16. package/SCSS-Themes/buttons/switch/material-dark.scss +6 -2
  17. package/SCSS-Themes/buttons/switch/material.scss +6 -2
  18. package/SCSS-Themes/buttons/switch/material3-dark.scss +6 -2
  19. package/SCSS-Themes/buttons/switch/material3.scss +6 -2
  20. package/SCSS-Themes/buttons/switch/tailwind-dark.scss +6 -2
  21. package/SCSS-Themes/buttons/switch/tailwind.scss +6 -2
  22. package/SCSS-Themes/calendars/daterangepicker/bootstrap-dark.scss +9 -6
  23. package/SCSS-Themes/calendars/daterangepicker/bootstrap.scss +9 -6
  24. package/SCSS-Themes/calendars/daterangepicker/bootstrap4.scss +9 -6
  25. package/SCSS-Themes/calendars/daterangepicker/bootstrap5-dark.scss +9 -6
  26. package/SCSS-Themes/calendars/daterangepicker/bootstrap5.scss +9 -6
  27. package/SCSS-Themes/calendars/daterangepicker/fabric-dark.scss +9 -6
  28. package/SCSS-Themes/calendars/daterangepicker/fabric.scss +9 -6
  29. package/SCSS-Themes/calendars/daterangepicker/fluent-dark.scss +26 -6
  30. package/SCSS-Themes/calendars/daterangepicker/fluent.scss +26 -6
  31. package/SCSS-Themes/calendars/daterangepicker/highcontrast.scss +9 -6
  32. package/SCSS-Themes/calendars/daterangepicker/material-dark.scss +9 -6
  33. package/SCSS-Themes/calendars/daterangepicker/material.scss +9 -6
  34. package/SCSS-Themes/calendars/daterangepicker/material3-dark.scss +9 -6
  35. package/SCSS-Themes/calendars/daterangepicker/material3.scss +9 -6
  36. package/SCSS-Themes/calendars/daterangepicker/tailwind-dark.scss +9 -6
  37. package/SCSS-Themes/calendars/daterangepicker/tailwind.scss +9 -6
  38. package/SCSS-Themes/dropdowns/list-box/bootstrap-dark.scss +1 -1
  39. package/SCSS-Themes/dropdowns/list-box/bootstrap.scss +1 -1
  40. package/SCSS-Themes/dropdowns/list-box/bootstrap4.scss +1 -1
  41. package/SCSS-Themes/dropdowns/list-box/bootstrap5-dark.scss +1 -1
  42. package/SCSS-Themes/dropdowns/list-box/bootstrap5.scss +1 -1
  43. package/SCSS-Themes/dropdowns/list-box/fabric-dark.scss +1 -1
  44. package/SCSS-Themes/dropdowns/list-box/fabric.scss +1 -1
  45. package/SCSS-Themes/dropdowns/list-box/fluent-dark.scss +1 -1
  46. package/SCSS-Themes/dropdowns/list-box/fluent.scss +1 -1
  47. package/SCSS-Themes/dropdowns/list-box/highcontrast.scss +1 -1
  48. package/SCSS-Themes/dropdowns/list-box/material-dark.scss +1 -1
  49. package/SCSS-Themes/dropdowns/list-box/material.scss +1 -1
  50. package/SCSS-Themes/dropdowns/list-box/material3-dark.scss +1 -1
  51. package/SCSS-Themes/dropdowns/list-box/material3.scss +1 -1
  52. package/SCSS-Themes/dropdowns/list-box/tailwind-dark.scss +1 -1
  53. package/SCSS-Themes/dropdowns/list-box/tailwind.scss +1 -1
  54. package/SCSS-Themes/fabric-dark.scss +53 -28
  55. package/SCSS-Themes/fabric.scss +53 -28
  56. package/SCSS-Themes/filemanager/file-manager/bootstrap-dark.scss +10 -0
  57. package/SCSS-Themes/filemanager/file-manager/bootstrap.scss +10 -0
  58. package/SCSS-Themes/filemanager/file-manager/bootstrap4.scss +10 -0
  59. package/SCSS-Themes/filemanager/file-manager/bootstrap5-dark.scss +10 -0
  60. package/SCSS-Themes/filemanager/file-manager/bootstrap5.scss +10 -0
  61. package/SCSS-Themes/filemanager/file-manager/fabric-dark.scss +10 -0
  62. package/SCSS-Themes/filemanager/file-manager/fabric.scss +10 -0
  63. package/SCSS-Themes/filemanager/file-manager/fluent-dark.scss +10 -0
  64. package/SCSS-Themes/filemanager/file-manager/fluent.scss +10 -0
  65. package/SCSS-Themes/filemanager/file-manager/highcontrast.scss +10 -0
  66. package/SCSS-Themes/filemanager/file-manager/material-dark.scss +10 -0
  67. package/SCSS-Themes/filemanager/file-manager/material.scss +10 -0
  68. package/SCSS-Themes/filemanager/file-manager/material3-dark.scss +10 -0
  69. package/SCSS-Themes/filemanager/file-manager/material3.scss +10 -0
  70. package/SCSS-Themes/filemanager/file-manager/tailwind-dark.scss +10 -0
  71. package/SCSS-Themes/filemanager/file-manager/tailwind.scss +10 -0
  72. package/SCSS-Themes/fluent-dark.scss +69 -27
  73. package/SCSS-Themes/fluent.scss +69 -27
  74. package/SCSS-Themes/gantt/gantt/bootstrap-dark.scss +1 -1
  75. package/SCSS-Themes/gantt/gantt/bootstrap.scss +1 -1
  76. package/SCSS-Themes/gantt/gantt/bootstrap4.scss +1 -1
  77. package/SCSS-Themes/gantt/gantt/bootstrap5-dark.scss +1 -1
  78. package/SCSS-Themes/gantt/gantt/bootstrap5.scss +1 -1
  79. package/SCSS-Themes/gantt/gantt/fabric-dark.scss +1 -1
  80. package/SCSS-Themes/gantt/gantt/fabric.scss +1 -1
  81. package/SCSS-Themes/gantt/gantt/fluent-dark.scss +1 -1
  82. package/SCSS-Themes/gantt/gantt/fluent.scss +1 -1
  83. package/SCSS-Themes/gantt/gantt/highcontrast.scss +1 -1
  84. package/SCSS-Themes/gantt/gantt/material-dark.scss +1 -1
  85. package/SCSS-Themes/gantt/gantt/material.scss +1 -1
  86. package/SCSS-Themes/gantt/gantt/material3-dark.scss +1 -1
  87. package/SCSS-Themes/gantt/gantt/material3.scss +1 -1
  88. package/SCSS-Themes/gantt/gantt/tailwind-dark.scss +1 -1
  89. package/SCSS-Themes/gantt/gantt/tailwind.scss +1 -1
  90. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +11 -13
  91. package/SCSS-Themes/grids/grid/bootstrap.scss +11 -13
  92. package/SCSS-Themes/grids/grid/bootstrap4.scss +11 -13
  93. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +11 -13
  94. package/SCSS-Themes/grids/grid/bootstrap5.scss +11 -13
  95. package/SCSS-Themes/grids/grid/fabric-dark.scss +12 -14
  96. package/SCSS-Themes/grids/grid/fabric.scss +12 -14
  97. package/SCSS-Themes/grids/grid/fluent-dark.scss +11 -13
  98. package/SCSS-Themes/grids/grid/fluent.scss +11 -13
  99. package/SCSS-Themes/grids/grid/highcontrast.scss +12 -14
  100. package/SCSS-Themes/grids/grid/material-dark.scss +12 -14
  101. package/SCSS-Themes/grids/grid/material.scss +12 -14
  102. package/SCSS-Themes/grids/grid/material3-dark.scss +11 -13
  103. package/SCSS-Themes/grids/grid/material3.scss +11 -13
  104. package/SCSS-Themes/grids/grid/tailwind-dark.scss +11 -13
  105. package/SCSS-Themes/grids/grid/tailwind.scss +11 -13
  106. package/SCSS-Themes/highcontrast.scss +53 -28
  107. package/SCSS-Themes/material-dark.scss +53 -28
  108. package/SCSS-Themes/material.scss +53 -28
  109. package/SCSS-Themes/material3-dark.scss +52 -27
  110. package/SCSS-Themes/material3.scss +52 -27
  111. package/SCSS-Themes/pivotview/pivotfieldlist/bootstrap-dark.scss +0 -1
  112. package/SCSS-Themes/pivotview/pivotfieldlist/bootstrap.scss +0 -1
  113. package/SCSS-Themes/pivotview/pivotfieldlist/bootstrap4.scss +0 -1
  114. package/SCSS-Themes/pivotview/pivotfieldlist/bootstrap5-dark.scss +0 -1
  115. package/SCSS-Themes/pivotview/pivotfieldlist/bootstrap5.scss +0 -1
  116. package/SCSS-Themes/pivotview/pivotfieldlist/fabric-dark.scss +0 -1
  117. package/SCSS-Themes/pivotview/pivotfieldlist/fabric.scss +0 -1
  118. package/SCSS-Themes/pivotview/pivotfieldlist/fluent-dark.scss +0 -1
  119. package/SCSS-Themes/pivotview/pivotfieldlist/fluent.scss +0 -1
  120. package/SCSS-Themes/pivotview/pivotfieldlist/highcontrast.scss +0 -1
  121. package/SCSS-Themes/pivotview/pivotfieldlist/material-dark.scss +0 -1
  122. package/SCSS-Themes/pivotview/pivotfieldlist/material.scss +0 -1
  123. package/SCSS-Themes/pivotview/pivotfieldlist/material3-dark.scss +0 -1
  124. package/SCSS-Themes/pivotview/pivotfieldlist/material3.scss +0 -1
  125. package/SCSS-Themes/pivotview/pivotfieldlist/tailwind-dark.scss +0 -1
  126. package/SCSS-Themes/pivotview/pivotfieldlist/tailwind.scss +0 -1
  127. package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss +14 -3
  128. package/SCSS-Themes/pivotview/pivotview/bootstrap.scss +14 -3
  129. package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss +14 -3
  130. package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss +14 -3
  131. package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss +14 -3
  132. package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss +14 -3
  133. package/SCSS-Themes/pivotview/pivotview/fabric.scss +14 -3
  134. package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss +14 -3
  135. package/SCSS-Themes/pivotview/pivotview/fluent.scss +14 -3
  136. package/SCSS-Themes/pivotview/pivotview/highcontrast.scss +14 -3
  137. package/SCSS-Themes/pivotview/pivotview/material-dark.scss +14 -3
  138. package/SCSS-Themes/pivotview/pivotview/material.scss +14 -3
  139. package/SCSS-Themes/pivotview/pivotview/material3-dark.scss +14 -3
  140. package/SCSS-Themes/pivotview/pivotview/material3.scss +14 -3
  141. package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss +14 -3
  142. package/SCSS-Themes/pivotview/pivotview/tailwind.scss +14 -3
  143. package/SCSS-Themes/tailwind-dark.scss +52 -27
  144. package/SCSS-Themes/tailwind.scss +52 -27
  145. package/package.json +1 -1
@@ -962,11 +962,15 @@ $switch-handle-off-hover-bg-color: $content-bg-color !default;
962
962
  }
963
963
 
964
964
  & .e-ripple-container {
965
- background-color: $switch-checked-ripple-bg-color;
965
+ @if $skin-name == 'Material3' {
966
+ background-color: $switch-checked-ripple-bg-color;
967
+ }
966
968
  }
967
969
 
968
970
  & .e-ripple-check.e-ripple-container {
969
- background-color: $switch-ripple-bg-color;
971
+ @if $skin-name == 'Material3' {
972
+ background-color: $switch-ripple-bg-color;
973
+ }
970
974
  }
971
975
  }
972
976
  }
@@ -962,11 +962,15 @@ $switch-handle-off-hover-bg-color: $content-bg-color !default;
962
962
  }
963
963
 
964
964
  & .e-ripple-container {
965
- background-color: $switch-checked-ripple-bg-color;
965
+ @if $skin-name == 'Material3' {
966
+ background-color: $switch-checked-ripple-bg-color;
967
+ }
966
968
  }
967
969
 
968
970
  & .e-ripple-check.e-ripple-container {
969
- background-color: $switch-ripple-bg-color;
971
+ @if $skin-name == 'Material3' {
972
+ background-color: $switch-ripple-bg-color;
973
+ }
970
974
  }
971
975
  }
972
976
  }
@@ -383,8 +383,8 @@ $range-header-font-size: 16px !default;
383
383
  #{if(&, '&', '*')} .e-title {
384
384
  cursor: $range-cursor-pointer-style;
385
385
  line-height: $range-normal-nav-icon-height;
386
- width: $range-control-header-width;
387
386
  @if ($skin-name != 'FluentUI') {
387
+ width: $range-control-header-width;
388
388
  float: $range-float-none;
389
389
  font-weight: $range-font-weight-normal;
390
390
  margin-left: $range-value-zero;
@@ -398,12 +398,13 @@ $range-header-font-size: 16px !default;
398
398
  }
399
399
  }
400
400
  #{if(&, '&', '*')} .e-next {
401
- float: $range-float-right;
401
+ @if ($skin-name != 'FluentUI') {
402
+ float: $range-float-right;
403
+ }
402
404
  }
403
405
  #{if(&, '&', '*')} .e-prev {
404
- float: $range-float-left;
405
- @if ($skin-name == 'FluentUI') {
406
- float: $range-float-right;
406
+ @if ($skin-name != 'FluentUI') {
407
+ float: $range-float-left;
407
408
  }
408
409
  }
409
410
  #{if(&, '&', '*')} .e-next,
@@ -547,7 +548,9 @@ $range-header-font-size: 16px !default;
547
548
  float: $range-float-left;
548
549
  }
549
550
  #{if(&, '&', '*')} .e-prev {
550
- float: $range-float-right;
551
+ @if ($skin-name != 'FluentUI') {
552
+ float: $range-float-right;
553
+ }
551
554
  }
552
555
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
553
556
  border-radius: $range-hover-end-radius;
@@ -383,8 +383,8 @@ $range-header-font-size: 16px !default;
383
383
  #{if(&, '&', '*')} .e-title {
384
384
  cursor: $range-cursor-pointer-style;
385
385
  line-height: $range-normal-nav-icon-height;
386
- width: $range-control-header-width;
387
386
  @if ($skin-name != 'FluentUI') {
387
+ width: $range-control-header-width;
388
388
  float: $range-float-none;
389
389
  font-weight: $range-font-weight-normal;
390
390
  margin-left: $range-value-zero;
@@ -398,12 +398,13 @@ $range-header-font-size: 16px !default;
398
398
  }
399
399
  }
400
400
  #{if(&, '&', '*')} .e-next {
401
- float: $range-float-right;
401
+ @if ($skin-name != 'FluentUI') {
402
+ float: $range-float-right;
403
+ }
402
404
  }
403
405
  #{if(&, '&', '*')} .e-prev {
404
- float: $range-float-left;
405
- @if ($skin-name == 'FluentUI') {
406
- float: $range-float-right;
406
+ @if ($skin-name != 'FluentUI') {
407
+ float: $range-float-left;
407
408
  }
408
409
  }
409
410
  #{if(&, '&', '*')} .e-next,
@@ -547,7 +548,9 @@ $range-header-font-size: 16px !default;
547
548
  float: $range-float-left;
548
549
  }
549
550
  #{if(&, '&', '*')} .e-prev {
550
- float: $range-float-right;
551
+ @if ($skin-name != 'FluentUI') {
552
+ float: $range-float-right;
553
+ }
551
554
  }
552
555
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
553
556
  border-radius: $range-hover-end-radius;
@@ -393,8 +393,8 @@ $range-header-font-size: 16px !default;
393
393
  #{if(&, '&', '*')} .e-title {
394
394
  cursor: $range-cursor-pointer-style;
395
395
  line-height: $range-normal-nav-icon-height;
396
- width: $range-control-header-width;
397
396
  @if ($skin-name != 'FluentUI') {
397
+ width: $range-control-header-width;
398
398
  float: $range-float-none;
399
399
  font-weight: $range-font-weight-normal;
400
400
  margin-left: $range-value-zero;
@@ -408,12 +408,13 @@ $range-header-font-size: 16px !default;
408
408
  }
409
409
  }
410
410
  #{if(&, '&', '*')} .e-next {
411
- float: $range-float-right;
411
+ @if ($skin-name != 'FluentUI') {
412
+ float: $range-float-right;
413
+ }
412
414
  }
413
415
  #{if(&, '&', '*')} .e-prev {
414
- float: $range-float-left;
415
- @if ($skin-name == 'FluentUI') {
416
- float: $range-float-right;
416
+ @if ($skin-name != 'FluentUI') {
417
+ float: $range-float-left;
417
418
  }
418
419
  }
419
420
  #{if(&, '&', '*')} .e-next,
@@ -557,7 +558,9 @@ $range-header-font-size: 16px !default;
557
558
  float: $range-float-left;
558
559
  }
559
560
  #{if(&, '&', '*')} .e-prev {
560
- float: $range-float-right;
561
+ @if ($skin-name != 'FluentUI') {
562
+ float: $range-float-right;
563
+ }
561
564
  }
562
565
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
563
566
  border-radius: $range-hover-end-radius;
@@ -421,8 +421,8 @@ $range-header-font-size: 16px !default;
421
421
  #{if(&, '&', '*')} .e-title {
422
422
  cursor: $range-cursor-pointer-style;
423
423
  line-height: $range-normal-nav-icon-height;
424
- width: $range-control-header-width;
425
424
  @if ($skin-name != 'FluentUI') {
425
+ width: $range-control-header-width;
426
426
  float: $range-float-none;
427
427
  font-weight: $range-font-weight-normal;
428
428
  margin-left: $range-value-zero;
@@ -436,12 +436,13 @@ $range-header-font-size: 16px !default;
436
436
  }
437
437
  }
438
438
  #{if(&, '&', '*')} .e-next {
439
- float: $range-float-right;
439
+ @if ($skin-name != 'FluentUI') {
440
+ float: $range-float-right;
441
+ }
440
442
  }
441
443
  #{if(&, '&', '*')} .e-prev {
442
- float: $range-float-left;
443
- @if ($skin-name == 'FluentUI') {
444
- float: $range-float-right;
444
+ @if ($skin-name != 'FluentUI') {
445
+ float: $range-float-left;
445
446
  }
446
447
  }
447
448
  #{if(&, '&', '*')} .e-next,
@@ -585,7 +586,9 @@ $range-header-font-size: 16px !default;
585
586
  float: $range-float-left;
586
587
  }
587
588
  #{if(&, '&', '*')} .e-prev {
588
- float: $range-float-right;
589
+ @if ($skin-name != 'FluentUI') {
590
+ float: $range-float-right;
591
+ }
589
592
  }
590
593
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
591
594
  border-radius: $range-hover-end-radius;
@@ -421,8 +421,8 @@ $range-header-font-size: 16px !default;
421
421
  #{if(&, '&', '*')} .e-title {
422
422
  cursor: $range-cursor-pointer-style;
423
423
  line-height: $range-normal-nav-icon-height;
424
- width: $range-control-header-width;
425
424
  @if ($skin-name != 'FluentUI') {
425
+ width: $range-control-header-width;
426
426
  float: $range-float-none;
427
427
  font-weight: $range-font-weight-normal;
428
428
  margin-left: $range-value-zero;
@@ -436,12 +436,13 @@ $range-header-font-size: 16px !default;
436
436
  }
437
437
  }
438
438
  #{if(&, '&', '*')} .e-next {
439
- float: $range-float-right;
439
+ @if ($skin-name != 'FluentUI') {
440
+ float: $range-float-right;
441
+ }
440
442
  }
441
443
  #{if(&, '&', '*')} .e-prev {
442
- float: $range-float-left;
443
- @if ($skin-name == 'FluentUI') {
444
- float: $range-float-right;
444
+ @if ($skin-name != 'FluentUI') {
445
+ float: $range-float-left;
445
446
  }
446
447
  }
447
448
  #{if(&, '&', '*')} .e-next,
@@ -585,7 +586,9 @@ $range-header-font-size: 16px !default;
585
586
  float: $range-float-left;
586
587
  }
587
588
  #{if(&, '&', '*')} .e-prev {
588
- float: $range-float-right;
589
+ @if ($skin-name != 'FluentUI') {
590
+ float: $range-float-right;
591
+ }
589
592
  }
590
593
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
591
594
  border-radius: $range-hover-end-radius;
@@ -386,8 +386,8 @@ $range-header-font-size: 16px !default;
386
386
  #{if(&, '&', '*')} .e-title {
387
387
  cursor: $range-cursor-pointer-style;
388
388
  line-height: $range-normal-nav-icon-height;
389
- width: $range-control-header-width;
390
389
  @if ($skin-name != 'FluentUI') {
390
+ width: $range-control-header-width;
391
391
  float: $range-float-none;
392
392
  font-weight: $range-font-weight-normal;
393
393
  margin-left: $range-value-zero;
@@ -401,12 +401,13 @@ $range-header-font-size: 16px !default;
401
401
  }
402
402
  }
403
403
  #{if(&, '&', '*')} .e-next {
404
- float: $range-float-right;
404
+ @if ($skin-name != 'FluentUI') {
405
+ float: $range-float-right;
406
+ }
405
407
  }
406
408
  #{if(&, '&', '*')} .e-prev {
407
- float: $range-float-left;
408
- @if ($skin-name == 'FluentUI') {
409
- float: $range-float-right;
409
+ @if ($skin-name != 'FluentUI') {
410
+ float: $range-float-left;
410
411
  }
411
412
  }
412
413
  #{if(&, '&', '*')} .e-next,
@@ -550,7 +551,9 @@ $range-header-font-size: 16px !default;
550
551
  float: $range-float-left;
551
552
  }
552
553
  #{if(&, '&', '*')} .e-prev {
553
- float: $range-float-right;
554
+ @if ($skin-name != 'FluentUI') {
555
+ float: $range-float-right;
556
+ }
554
557
  }
555
558
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
556
559
  border-radius: $range-hover-end-radius;
@@ -383,8 +383,8 @@ $range-header-font-size: 16px !default;
383
383
  #{if(&, '&', '*')} .e-title {
384
384
  cursor: $range-cursor-pointer-style;
385
385
  line-height: $range-normal-nav-icon-height;
386
- width: $range-control-header-width;
387
386
  @if ($skin-name != 'FluentUI') {
387
+ width: $range-control-header-width;
388
388
  float: $range-float-none;
389
389
  font-weight: $range-font-weight-normal;
390
390
  margin-left: $range-value-zero;
@@ -398,12 +398,13 @@ $range-header-font-size: 16px !default;
398
398
  }
399
399
  }
400
400
  #{if(&, '&', '*')} .e-next {
401
- float: $range-float-right;
401
+ @if ($skin-name != 'FluentUI') {
402
+ float: $range-float-right;
403
+ }
402
404
  }
403
405
  #{if(&, '&', '*')} .e-prev {
404
- float: $range-float-left;
405
- @if ($skin-name == 'FluentUI') {
406
- float: $range-float-right;
406
+ @if ($skin-name != 'FluentUI') {
407
+ float: $range-float-left;
407
408
  }
408
409
  }
409
410
  #{if(&, '&', '*')} .e-next,
@@ -547,7 +548,9 @@ $range-header-font-size: 16px !default;
547
548
  float: $range-float-left;
548
549
  }
549
550
  #{if(&, '&', '*')} .e-prev {
550
- float: $range-float-right;
551
+ @if ($skin-name != 'FluentUI') {
552
+ float: $range-float-right;
553
+ }
551
554
  }
552
555
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
553
556
  border-radius: $range-hover-end-radius;
@@ -317,6 +317,23 @@ $modal-range-tablet-font-size: 18px !default;
317
317
 
318
318
  $range-header-font-size: 16px !default;
319
319
 
320
+ .e-daterangepicker.e-popup .e-calendar .e-header .e-title {
321
+ width: 65%;
322
+ }
323
+
324
+ .e-daterangepicker.e-popup.e-small .e-calendar .e-header .e-title {
325
+ width: 61%;
326
+ }
327
+
328
+ .e-daterangepicker.e-popup.e-bigger .e-calendar .e-header .e-title,
329
+ .e-daterangepicker.e-popup.e-device .e-calendar .e-header .e-title {
330
+ width: 72%;
331
+ }
332
+
333
+ .e-daterangepicker.e-popup.e-bigger.e-small .e-calendar .e-header .e-title {
334
+ width: 70%;
335
+ }
336
+
320
337
  @include export-module('daterangepicker-layout') {
321
338
 
322
339
  /*! daterangepicker layout */
@@ -430,8 +447,8 @@ $range-header-font-size: 16px !default;
430
447
  #{if(&, '&', '*')} .e-title {
431
448
  cursor: $range-cursor-pointer-style;
432
449
  line-height: $range-normal-nav-icon-height;
433
- width: $range-control-header-width;
434
450
  @if ($skin-name != 'FluentUI') {
451
+ width: $range-control-header-width;
435
452
  float: $range-float-none;
436
453
  font-weight: $range-font-weight-normal;
437
454
  margin-left: $range-value-zero;
@@ -445,12 +462,13 @@ $range-header-font-size: 16px !default;
445
462
  }
446
463
  }
447
464
  #{if(&, '&', '*')} .e-next {
448
- float: $range-float-right;
465
+ @if ($skin-name != 'FluentUI') {
466
+ float: $range-float-right;
467
+ }
449
468
  }
450
469
  #{if(&, '&', '*')} .e-prev {
451
- float: $range-float-left;
452
- @if ($skin-name == 'FluentUI') {
453
- float: $range-float-right;
470
+ @if ($skin-name != 'FluentUI') {
471
+ float: $range-float-left;
454
472
  }
455
473
  }
456
474
  #{if(&, '&', '*')} .e-next,
@@ -594,7 +612,9 @@ $range-header-font-size: 16px !default;
594
612
  float: $range-float-left;
595
613
  }
596
614
  #{if(&, '&', '*')} .e-prev {
597
- float: $range-float-right;
615
+ @if ($skin-name != 'FluentUI') {
616
+ float: $range-float-right;
617
+ }
598
618
  }
599
619
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
600
620
  border-radius: $range-hover-end-radius;
@@ -317,6 +317,23 @@ $modal-range-tablet-font-size: 18px !default;
317
317
 
318
318
  $range-header-font-size: 16px !default;
319
319
 
320
+ .e-daterangepicker.e-popup .e-calendar .e-header .e-title {
321
+ width: 65%;
322
+ }
323
+
324
+ .e-daterangepicker.e-popup.e-small .e-calendar .e-header .e-title {
325
+ width: 61%;
326
+ }
327
+
328
+ .e-daterangepicker.e-popup.e-bigger .e-calendar .e-header .e-title,
329
+ .e-daterangepicker.e-popup.e-device .e-calendar .e-header .e-title {
330
+ width: 72%;
331
+ }
332
+
333
+ .e-daterangepicker.e-popup.e-bigger.e-small .e-calendar .e-header .e-title {
334
+ width: 70%;
335
+ }
336
+
320
337
  @include export-module('daterangepicker-layout') {
321
338
 
322
339
  /*! daterangepicker layout */
@@ -430,8 +447,8 @@ $range-header-font-size: 16px !default;
430
447
  #{if(&, '&', '*')} .e-title {
431
448
  cursor: $range-cursor-pointer-style;
432
449
  line-height: $range-normal-nav-icon-height;
433
- width: $range-control-header-width;
434
450
  @if ($skin-name != 'FluentUI') {
451
+ width: $range-control-header-width;
435
452
  float: $range-float-none;
436
453
  font-weight: $range-font-weight-normal;
437
454
  margin-left: $range-value-zero;
@@ -445,12 +462,13 @@ $range-header-font-size: 16px !default;
445
462
  }
446
463
  }
447
464
  #{if(&, '&', '*')} .e-next {
448
- float: $range-float-right;
465
+ @if ($skin-name != 'FluentUI') {
466
+ float: $range-float-right;
467
+ }
449
468
  }
450
469
  #{if(&, '&', '*')} .e-prev {
451
- float: $range-float-left;
452
- @if ($skin-name == 'FluentUI') {
453
- float: $range-float-right;
470
+ @if ($skin-name != 'FluentUI') {
471
+ float: $range-float-left;
454
472
  }
455
473
  }
456
474
  #{if(&, '&', '*')} .e-next,
@@ -594,7 +612,9 @@ $range-header-font-size: 16px !default;
594
612
  float: $range-float-left;
595
613
  }
596
614
  #{if(&, '&', '*')} .e-prev {
597
- float: $range-float-right;
615
+ @if ($skin-name != 'FluentUI') {
616
+ float: $range-float-right;
617
+ }
598
618
  }
599
619
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
600
620
  border-radius: $range-hover-end-radius;
@@ -383,8 +383,8 @@ $range-header-font-size: 16px !default;
383
383
  #{if(&, '&', '*')} .e-title {
384
384
  cursor: $range-cursor-pointer-style;
385
385
  line-height: $range-normal-nav-icon-height;
386
- width: $range-control-header-width;
387
386
  @if ($skin-name != 'FluentUI') {
387
+ width: $range-control-header-width;
388
388
  float: $range-float-none;
389
389
  font-weight: $range-font-weight-normal;
390
390
  margin-left: $range-value-zero;
@@ -398,12 +398,13 @@ $range-header-font-size: 16px !default;
398
398
  }
399
399
  }
400
400
  #{if(&, '&', '*')} .e-next {
401
- float: $range-float-right;
401
+ @if ($skin-name != 'FluentUI') {
402
+ float: $range-float-right;
403
+ }
402
404
  }
403
405
  #{if(&, '&', '*')} .e-prev {
404
- float: $range-float-left;
405
- @if ($skin-name == 'FluentUI') {
406
- float: $range-float-right;
406
+ @if ($skin-name != 'FluentUI') {
407
+ float: $range-float-left;
407
408
  }
408
409
  }
409
410
  #{if(&, '&', '*')} .e-next,
@@ -547,7 +548,9 @@ $range-header-font-size: 16px !default;
547
548
  float: $range-float-left;
548
549
  }
549
550
  #{if(&, '&', '*')} .e-prev {
550
- float: $range-float-right;
551
+ @if ($skin-name != 'FluentUI') {
552
+ float: $range-float-right;
553
+ }
551
554
  }
552
555
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
553
556
  border-radius: $range-hover-end-radius;
@@ -391,8 +391,8 @@ $range-header-font-size: 16px !default;
391
391
  #{if(&, '&', '*')} .e-title {
392
392
  cursor: $range-cursor-pointer-style;
393
393
  line-height: $range-normal-nav-icon-height;
394
- width: $range-control-header-width;
395
394
  @if ($skin-name != 'FluentUI') {
395
+ width: $range-control-header-width;
396
396
  float: $range-float-none;
397
397
  font-weight: $range-font-weight-normal;
398
398
  margin-left: $range-value-zero;
@@ -406,12 +406,13 @@ $range-header-font-size: 16px !default;
406
406
  }
407
407
  }
408
408
  #{if(&, '&', '*')} .e-next {
409
- float: $range-float-right;
409
+ @if ($skin-name != 'FluentUI') {
410
+ float: $range-float-right;
411
+ }
410
412
  }
411
413
  #{if(&, '&', '*')} .e-prev {
412
- float: $range-float-left;
413
- @if ($skin-name == 'FluentUI') {
414
- float: $range-float-right;
414
+ @if ($skin-name != 'FluentUI') {
415
+ float: $range-float-left;
415
416
  }
416
417
  }
417
418
  #{if(&, '&', '*')} .e-next,
@@ -555,7 +556,9 @@ $range-header-font-size: 16px !default;
555
556
  float: $range-float-left;
556
557
  }
557
558
  #{if(&, '&', '*')} .e-prev {
558
- float: $range-float-right;
559
+ @if ($skin-name != 'FluentUI') {
560
+ float: $range-float-right;
561
+ }
559
562
  }
560
563
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
561
564
  border-radius: $range-hover-end-radius;
@@ -391,8 +391,8 @@ $range-header-font-size: 16px !default;
391
391
  #{if(&, '&', '*')} .e-title {
392
392
  cursor: $range-cursor-pointer-style;
393
393
  line-height: $range-normal-nav-icon-height;
394
- width: $range-control-header-width;
395
394
  @if ($skin-name != 'FluentUI') {
395
+ width: $range-control-header-width;
396
396
  float: $range-float-none;
397
397
  font-weight: $range-font-weight-normal;
398
398
  margin-left: $range-value-zero;
@@ -406,12 +406,13 @@ $range-header-font-size: 16px !default;
406
406
  }
407
407
  }
408
408
  #{if(&, '&', '*')} .e-next {
409
- float: $range-float-right;
409
+ @if ($skin-name != 'FluentUI') {
410
+ float: $range-float-right;
411
+ }
410
412
  }
411
413
  #{if(&, '&', '*')} .e-prev {
412
- float: $range-float-left;
413
- @if ($skin-name == 'FluentUI') {
414
- float: $range-float-right;
414
+ @if ($skin-name != 'FluentUI') {
415
+ float: $range-float-left;
415
416
  }
416
417
  }
417
418
  #{if(&, '&', '*')} .e-next,
@@ -555,7 +556,9 @@ $range-header-font-size: 16px !default;
555
556
  float: $range-float-left;
556
557
  }
557
558
  #{if(&, '&', '*')} .e-prev {
558
- float: $range-float-right;
559
+ @if ($skin-name != 'FluentUI') {
560
+ float: $range-float-right;
561
+ }
559
562
  }
560
563
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
561
564
  border-radius: $range-hover-end-radius;
@@ -406,8 +406,8 @@ $range-header-font-size: 16px !default;
406
406
  #{if(&, '&', '*')} .e-title {
407
407
  cursor: $range-cursor-pointer-style;
408
408
  line-height: $range-normal-nav-icon-height;
409
- width: $range-control-header-width;
410
409
  @if ($skin-name != 'FluentUI') {
410
+ width: $range-control-header-width;
411
411
  float: $range-float-none;
412
412
  font-weight: $range-font-weight-normal;
413
413
  margin-left: $range-value-zero;
@@ -421,12 +421,13 @@ $range-header-font-size: 16px !default;
421
421
  }
422
422
  }
423
423
  #{if(&, '&', '*')} .e-next {
424
- float: $range-float-right;
424
+ @if ($skin-name != 'FluentUI') {
425
+ float: $range-float-right;
426
+ }
425
427
  }
426
428
  #{if(&, '&', '*')} .e-prev {
427
- float: $range-float-left;
428
- @if ($skin-name == 'FluentUI') {
429
- float: $range-float-right;
429
+ @if ($skin-name != 'FluentUI') {
430
+ float: $range-float-left;
430
431
  }
431
432
  }
432
433
  #{if(&, '&', '*')} .e-next,
@@ -570,7 +571,9 @@ $range-header-font-size: 16px !default;
570
571
  float: $range-float-left;
571
572
  }
572
573
  #{if(&, '&', '*')} .e-prev {
573
- float: $range-float-right;
574
+ @if ($skin-name != 'FluentUI') {
575
+ float: $range-float-right;
576
+ }
574
577
  }
575
578
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
576
579
  border-radius: $range-hover-end-radius;
@@ -406,8 +406,8 @@ $range-header-font-size: 16px !default;
406
406
  #{if(&, '&', '*')} .e-title {
407
407
  cursor: $range-cursor-pointer-style;
408
408
  line-height: $range-normal-nav-icon-height;
409
- width: $range-control-header-width;
410
409
  @if ($skin-name != 'FluentUI') {
410
+ width: $range-control-header-width;
411
411
  float: $range-float-none;
412
412
  font-weight: $range-font-weight-normal;
413
413
  margin-left: $range-value-zero;
@@ -421,12 +421,13 @@ $range-header-font-size: 16px !default;
421
421
  }
422
422
  }
423
423
  #{if(&, '&', '*')} .e-next {
424
- float: $range-float-right;
424
+ @if ($skin-name != 'FluentUI') {
425
+ float: $range-float-right;
426
+ }
425
427
  }
426
428
  #{if(&, '&', '*')} .e-prev {
427
- float: $range-float-left;
428
- @if ($skin-name == 'FluentUI') {
429
- float: $range-float-right;
429
+ @if ($skin-name != 'FluentUI') {
430
+ float: $range-float-left;
430
431
  }
431
432
  }
432
433
  #{if(&, '&', '*')} .e-next,
@@ -570,7 +571,9 @@ $range-header-font-size: 16px !default;
570
571
  float: $range-float-left;
571
572
  }
572
573
  #{if(&, '&', '*')} .e-prev {
573
- float: $range-float-right;
574
+ @if ($skin-name != 'FluentUI') {
575
+ float: $range-float-right;
576
+ }
574
577
  }
575
578
  #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
576
579
  border-radius: $range-hover-end-radius;