@syncfusion/ej2-ribbon 21.1.35 → 21.1.37

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 (60) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/README.md +61 -1
  3. package/dist/ej2-ribbon.umd.min.js +2 -2
  4. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-ribbon.es2015.js +42 -21
  6. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  7. package/dist/es6/ej2-ribbon.es5.js +42 -21
  8. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  9. package/dist/global/ej2-ribbon.min.js +2 -2
  10. package/dist/global/ej2-ribbon.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +12 -12
  13. package/src/ribbon/base/ribbon-model.d.ts +1 -1
  14. package/src/ribbon/base/ribbon.js +18 -10
  15. package/src/ribbon/base/utils.d.ts +15 -1
  16. package/src/ribbon/base/utils.js +16 -1
  17. package/src/ribbon/items/ribbon-button.d.ts +0 -1
  18. package/src/ribbon/items/ribbon-button.js +2 -1
  19. package/src/ribbon/items/ribbon-checkbox.d.ts +0 -1
  20. package/src/ribbon/items/ribbon-checkbox.js +0 -1
  21. package/src/ribbon/items/ribbon-colorpicker.d.ts +0 -1
  22. package/src/ribbon/items/ribbon-colorpicker.js +0 -1
  23. package/src/ribbon/items/ribbon-combobox.d.ts +0 -1
  24. package/src/ribbon/items/ribbon-combobox.js +0 -1
  25. package/src/ribbon/items/ribbon-dropdown.d.ts +0 -1
  26. package/src/ribbon/items/ribbon-dropdown.js +0 -1
  27. package/src/ribbon/items/ribbon-splitbutton.d.ts +0 -1
  28. package/src/ribbon/items/ribbon-splitbutton.js +0 -1
  29. package/src/ribbon/modules/ribbon-filemenu.js +6 -4
  30. package/styles/bootstrap-dark.css +11 -0
  31. package/styles/bootstrap.css +11 -0
  32. package/styles/bootstrap4.css +11 -0
  33. package/styles/bootstrap5-dark.css +11 -0
  34. package/styles/bootstrap5.css +11 -0
  35. package/styles/fabric-dark.css +11 -0
  36. package/styles/fabric.css +11 -0
  37. package/styles/fluent-dark.css +11 -0
  38. package/styles/fluent.css +11 -0
  39. package/styles/highcontrast-light.css +11 -0
  40. package/styles/highcontrast.css +11 -0
  41. package/styles/material-dark.css +11 -0
  42. package/styles/material.css +11 -0
  43. package/styles/ribbon/_layout.scss +16 -0
  44. package/styles/ribbon/bootstrap-dark.css +11 -0
  45. package/styles/ribbon/bootstrap.css +11 -0
  46. package/styles/ribbon/bootstrap4.css +11 -0
  47. package/styles/ribbon/bootstrap5-dark.css +11 -0
  48. package/styles/ribbon/bootstrap5.css +11 -0
  49. package/styles/ribbon/fabric-dark.css +11 -0
  50. package/styles/ribbon/fabric.css +11 -0
  51. package/styles/ribbon/fluent-dark.css +11 -0
  52. package/styles/ribbon/fluent.css +11 -0
  53. package/styles/ribbon/highcontrast-light.css +11 -0
  54. package/styles/ribbon/highcontrast.css +11 -0
  55. package/styles/ribbon/material-dark.css +11 -0
  56. package/styles/ribbon/material.css +11 -0
  57. package/styles/ribbon/tailwind-dark.css +11 -0
  58. package/styles/ribbon/tailwind.css +11 -0
  59. package/styles/tailwind-dark.css +11 -0
  60. package/styles/tailwind.css +11 -0
package/styles/bootstrap4.css CHANGED
@@ -271,6 +271,9 @@
271
271
  height: auto;
272
272
  min-height: auto;
273
273
  }
274
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
275
+ box-shadow: none;
276
+ }
274
277
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
275
278
  padding: 0;
276
279
  }
@@ -280,6 +283,7 @@
280
283
  min-width: auto;
281
284
  width: auto;
282
285
  border-style: solid;
286
+ transform: none;
283
287
  border-width: 1px;
284
288
  border-radius: 2px;
285
289
  z-index: 3;
@@ -290,6 +294,7 @@
290
294
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
291
295
  font-size: 20px;
292
296
  height: auto;
297
+ transform: none;
293
298
  line-height: 20px;
294
299
  padding: 0 2px;
295
300
  width: auto;
@@ -407,6 +412,9 @@
407
412
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
408
413
  left: var(--fileMenuWidth);
409
414
  }
415
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
416
+ padding-right: 30px;
417
+ }
410
418
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
411
419
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
412
420
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -418,6 +426,9 @@
418
426
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
419
427
  right: var(--fileMenuWidth);
420
428
  }
429
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
430
+ padding-left: 30px;
431
+ }
421
432
 
422
433
  .e-ribbon.e-rbn,
423
434
  .e-ribbon-group-overflow-ddb {
package/styles/bootstrap5-dark.css CHANGED
@@ -300,6 +300,9 @@
300
300
  height: auto;
301
301
  min-height: auto;
302
302
  }
303
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
304
+ box-shadow: none;
305
+ }
303
306
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
304
307
  padding: 0;
305
308
  }
@@ -309,6 +312,7 @@
309
312
  min-width: auto;
310
313
  width: auto;
311
314
  border-style: solid;
315
+ transform: none;
312
316
  border-width: 1px;
313
317
  border-radius: 2px;
314
318
  z-index: 3;
@@ -319,6 +323,7 @@
319
323
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
320
324
  font-size: 14px;
321
325
  height: auto;
326
+ transform: none;
322
327
  line-height: 14px;
323
328
  padding: 0 5px;
324
329
  width: auto;
@@ -436,6 +441,9 @@
436
441
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
437
442
  left: var(--fileMenuWidth);
438
443
  }
444
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
445
+ padding-right: 30px;
446
+ }
439
447
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
440
448
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
441
449
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -447,6 +455,9 @@
447
455
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
448
456
  right: var(--fileMenuWidth);
449
457
  }
458
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
459
+ padding-left: 30px;
460
+ }
450
461
 
451
462
  .e-ribbon.e-rbn,
452
463
  .e-ribbon-group-overflow-ddb {
package/styles/bootstrap5.css CHANGED
@@ -300,6 +300,9 @@
300
300
  height: auto;
301
301
  min-height: auto;
302
302
  }
303
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
304
+ box-shadow: none;
305
+ }
303
306
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
304
307
  padding: 0;
305
308
  }
@@ -309,6 +312,7 @@
309
312
  min-width: auto;
310
313
  width: auto;
311
314
  border-style: solid;
315
+ transform: none;
312
316
  border-width: 1px;
313
317
  border-radius: 2px;
314
318
  z-index: 3;
@@ -319,6 +323,7 @@
319
323
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
320
324
  font-size: 14px;
321
325
  height: auto;
326
+ transform: none;
322
327
  line-height: 14px;
323
328
  padding: 0 5px;
324
329
  width: auto;
@@ -436,6 +441,9 @@
436
441
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
437
442
  left: var(--fileMenuWidth);
438
443
  }
444
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
445
+ padding-right: 30px;
446
+ }
439
447
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
440
448
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
441
449
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -447,6 +455,9 @@
447
455
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
448
456
  right: var(--fileMenuWidth);
449
457
  }
458
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
459
+ padding-left: 30px;
460
+ }
450
461
 
451
462
  .e-ribbon.e-rbn,
452
463
  .e-ribbon-group-overflow-ddb {
package/styles/fabric-dark.css CHANGED
@@ -192,6 +192,9 @@
192
192
  height: auto;
193
193
  min-height: auto;
194
194
  }
195
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
196
+ box-shadow: none;
197
+ }
195
198
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
196
199
  padding: 0;
197
200
  }
@@ -201,6 +204,7 @@
201
204
  min-width: auto;
202
205
  width: auto;
203
206
  border-style: solid;
207
+ transform: none;
204
208
  border-width: 1px;
205
209
  border-radius: unset;
206
210
  z-index: 3;
@@ -211,6 +215,7 @@
211
215
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
212
216
  font-size: 16px;
213
217
  height: auto;
218
+ transform: none;
214
219
  line-height: 16px;
215
220
  padding: 0 4px;
216
221
  width: auto;
@@ -328,6 +333,9 @@
328
333
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
329
334
  left: var(--fileMenuWidth);
330
335
  }
336
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
337
+ padding-right: 30px;
338
+ }
331
339
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
332
340
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
333
341
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -339,6 +347,9 @@
339
347
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
340
348
  right: var(--fileMenuWidth);
341
349
  }
350
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
351
+ padding-left: 30px;
352
+ }
342
353
 
343
354
  .e-ribbon.e-rbn,
344
355
  .e-ribbon-group-overflow-ddb {
package/styles/fabric.css CHANGED
@@ -190,6 +190,9 @@
190
190
  height: auto;
191
191
  min-height: auto;
192
192
  }
193
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
194
+ box-shadow: none;
195
+ }
193
196
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
194
197
  padding: 0;
195
198
  }
@@ -199,6 +202,7 @@
199
202
  min-width: auto;
200
203
  width: auto;
201
204
  border-style: solid;
205
+ transform: none;
202
206
  border-width: 1px;
203
207
  border-radius: unset;
204
208
  z-index: 3;
@@ -209,6 +213,7 @@
209
213
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
210
214
  font-size: 16px;
211
215
  height: auto;
216
+ transform: none;
212
217
  line-height: 16px;
213
218
  padding: 0 4px;
214
219
  width: auto;
@@ -326,6 +331,9 @@
326
331
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
327
332
  left: var(--fileMenuWidth);
328
333
  }
334
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
335
+ padding-right: 30px;
336
+ }
329
337
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
330
338
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
331
339
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -337,6 +345,9 @@
337
345
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
338
346
  right: var(--fileMenuWidth);
339
347
  }
348
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
349
+ padding-left: 30px;
350
+ }
340
351
 
341
352
  .e-ribbon.e-rbn,
342
353
  .e-ribbon-group-overflow-ddb {
package/styles/fluent-dark.css CHANGED
@@ -276,6 +276,9 @@
276
276
  height: auto;
277
277
  min-height: auto;
278
278
  }
279
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
280
+ box-shadow: none;
281
+ }
279
282
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
280
283
  padding: 0;
281
284
  }
@@ -285,6 +288,7 @@
285
288
  min-width: auto;
286
289
  width: auto;
287
290
  border-style: solid;
291
+ transform: none;
288
292
  border-width: 1px;
289
293
  border-radius: 2px;
290
294
  z-index: 3;
@@ -295,6 +299,7 @@
295
299
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
296
300
  font-size: 14px;
297
301
  height: auto;
302
+ transform: none;
298
303
  line-height: 14px;
299
304
  padding: 0 5px;
300
305
  width: auto;
@@ -412,6 +417,9 @@
412
417
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
413
418
  left: var(--fileMenuWidth);
414
419
  }
420
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-right: 30px;
422
+ }
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
416
424
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
417
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +431,9 @@
423
431
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
424
432
  right: var(--fileMenuWidth);
425
433
  }
434
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
435
+ padding-left: 30px;
436
+ }
426
437
 
427
438
  .e-ribbon.e-rbn,
428
439
  .e-ribbon-group-overflow-ddb {
package/styles/fluent.css CHANGED
@@ -276,6 +276,9 @@
276
276
  height: auto;
277
277
  min-height: auto;
278
278
  }
279
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
280
+ box-shadow: none;
281
+ }
279
282
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
280
283
  padding: 0;
281
284
  }
@@ -285,6 +288,7 @@
285
288
  min-width: auto;
286
289
  width: auto;
287
290
  border-style: solid;
291
+ transform: none;
288
292
  border-width: 1px;
289
293
  border-radius: 2px;
290
294
  z-index: 3;
@@ -295,6 +299,7 @@
295
299
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
296
300
  font-size: 14px;
297
301
  height: auto;
302
+ transform: none;
298
303
  line-height: 14px;
299
304
  padding: 0 5px;
300
305
  width: auto;
@@ -412,6 +417,9 @@
412
417
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
413
418
  left: var(--fileMenuWidth);
414
419
  }
420
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-right: 30px;
422
+ }
415
423
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
416
424
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
417
425
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +431,9 @@
423
431
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
424
432
  right: var(--fileMenuWidth);
425
433
  }
434
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
435
+ padding-left: 30px;
436
+ }
426
437
 
427
438
  .e-ribbon.e-rbn,
428
439
  .e-ribbon-group-overflow-ddb {
package/styles/highcontrast-light.css CHANGED
@@ -199,6 +199,9 @@
199
199
  height: auto;
200
200
  min-height: auto;
201
201
  }
202
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
203
+ box-shadow: none;
204
+ }
202
205
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
203
206
  padding: 0;
204
207
  }
@@ -208,6 +211,7 @@
208
211
  min-width: auto;
209
212
  width: auto;
210
213
  border-style: solid;
214
+ transform: none;
211
215
  border-width: 1px;
212
216
  border-radius: unset;
213
217
  z-index: 3;
@@ -218,6 +222,7 @@
218
222
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
219
223
  font-size: 16px;
220
224
  height: auto;
225
+ transform: none;
221
226
  line-height: 16px;
222
227
  padding: 0 4px;
223
228
  width: auto;
@@ -335,6 +340,9 @@
335
340
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
336
341
  left: var(--fileMenuWidth);
337
342
  }
343
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
344
+ padding-right: 30px;
345
+ }
338
346
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
339
347
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
340
348
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -346,6 +354,9 @@
346
354
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
347
355
  right: var(--fileMenuWidth);
348
356
  }
357
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
358
+ padding-left: 30px;
359
+ }
349
360
 
350
361
  .e-ribbon.e-rbn,
351
362
  .e-ribbon-group-overflow-ddb {
package/styles/highcontrast.css CHANGED
@@ -208,6 +208,9 @@
208
208
  height: auto;
209
209
  min-height: auto;
210
210
  }
211
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
212
+ box-shadow: none;
213
+ }
211
214
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
212
215
  padding: 0;
213
216
  }
@@ -217,6 +220,7 @@
217
220
  min-width: auto;
218
221
  width: auto;
219
222
  border-style: solid;
223
+ transform: none;
220
224
  border-width: 1px;
221
225
  border-radius: unset;
222
226
  z-index: 3;
@@ -227,6 +231,7 @@
227
231
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
228
232
  font-size: 16px;
229
233
  height: auto;
234
+ transform: none;
230
235
  line-height: 16px;
231
236
  padding: 0 4px;
232
237
  width: auto;
@@ -344,6 +349,9 @@
344
349
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
345
350
  left: var(--fileMenuWidth);
346
351
  }
352
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
353
+ padding-right: 30px;
354
+ }
347
355
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
348
356
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
349
357
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -355,6 +363,9 @@
355
363
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
356
364
  right: var(--fileMenuWidth);
357
365
  }
366
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
367
+ padding-left: 30px;
368
+ }
358
369
 
359
370
  .e-ribbon.e-rbn,
360
371
  .e-ribbon-group-overflow-ddb {
package/styles/material-dark.css CHANGED
@@ -262,6 +262,9 @@
262
262
  height: auto;
263
263
  min-height: auto;
264
264
  }
265
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
266
+ box-shadow: none;
267
+ }
265
268
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
266
269
  padding: 0;
267
270
  }
@@ -271,6 +274,7 @@
271
274
  min-width: auto;
272
275
  width: auto;
273
276
  border-style: solid;
277
+ transform: none;
274
278
  border-width: 1px;
275
279
  border-radius: unset;
276
280
  z-index: 3;
@@ -281,6 +285,7 @@
281
285
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
282
286
  font-size: 16px;
283
287
  height: auto;
288
+ transform: none;
284
289
  line-height: 16px;
285
290
  padding: 0 4px;
286
291
  width: auto;
@@ -398,6 +403,9 @@
398
403
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
399
404
  left: var(--fileMenuWidth);
400
405
  }
406
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
407
+ padding-right: 30px;
408
+ }
401
409
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
402
410
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
403
411
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -409,6 +417,9 @@
409
417
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
410
418
  right: var(--fileMenuWidth);
411
419
  }
420
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
421
+ padding-left: 30px;
422
+ }
412
423
 
413
424
  .e-ribbon.e-rbn,
414
425
  .e-ribbon-group-overflow-ddb {
package/styles/material.css CHANGED
@@ -295,6 +295,9 @@
295
295
  height: auto;
296
296
  min-height: auto;
297
297
  }
298
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
299
+ box-shadow: none;
300
+ }
298
301
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
299
302
  padding: 0;
300
303
  }
@@ -304,6 +307,7 @@
304
307
  min-width: auto;
305
308
  width: auto;
306
309
  border-style: solid;
310
+ transform: none;
307
311
  border-width: 1px;
308
312
  border-radius: unset;
309
313
  z-index: 3;
@@ -314,6 +318,7 @@
314
318
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
315
319
  font-size: 16px;
316
320
  height: auto;
321
+ transform: none;
317
322
  line-height: 16px;
318
323
  padding: 0 4px;
319
324
  width: auto;
@@ -431,6 +436,9 @@
431
436
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
432
437
  left: var(--fileMenuWidth);
433
438
  }
439
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
440
+ padding-right: 30px;
441
+ }
434
442
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
435
443
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
436
444
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -442,6 +450,9 @@
442
450
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
443
451
  right: var(--fileMenuWidth);
444
452
  }
453
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
454
+ padding-left: 30px;
455
+ }
445
456
 
446
457
  .e-ribbon.e-rbn,
447
458
  .e-ribbon-group-overflow-ddb {
package/styles/ribbon/_layout.scss CHANGED
@@ -121,6 +121,12 @@
121
121
  }
122
122
  }
123
123
 
124
+ .e-hscroll.e-scroll-device {
125
+ .e-scroll-nav.e-scroll-right-nav {
126
+ box-shadow: none;
127
+ }
128
+ }
129
+
124
130
  .e-hscroll {
125
131
  padding: $ribbon-hscroll-padding;
126
132
 
@@ -130,6 +136,7 @@
130
136
  min-width: auto;
131
137
  width: auto;
132
138
  border-style: solid;
139
+ transform: none;
133
140
  border-width: $ribbon-hscroll-nav-border-width;
134
141
  border-radius: $ribbon-hscroll-nav-border-radius;
135
142
  z-index: 3;
@@ -141,6 +148,7 @@
141
148
  .e-nav-arrow {
142
149
  font-size: $ribbon-nav-arrow-size;
143
150
  height: auto;
151
+ transform: none;
144
152
  line-height: $ribbon-nav-arrow-height;
145
153
  padding: $ribbon-hscroll-nav-arrow-padding;
146
154
  width: auto;
@@ -295,6 +303,10 @@
295
303
  .e-tab-header {
296
304
  left: var(--fileMenuWidth);
297
305
  }
306
+
307
+ .e-ribbon-tab .e-hscroll.e-scroll-device {
308
+ padding-right: 30px;
309
+ }
298
310
  }
299
311
 
300
312
  &.e-rtl {
@@ -312,6 +324,10 @@
312
324
  .e-tab-header {
313
325
  right: var(--fileMenuWidth);
314
326
  }
327
+
328
+ .e-ribbon-tab .e-hscroll.e-scroll-device {
329
+ padding-left: 30px;
330
+ }
315
331
  }
316
332
  }
317
333
 
package/styles/ribbon/bootstrap-dark.css CHANGED
@@ -216,6 +216,9 @@
216
216
  height: auto;
217
217
  min-height: auto;
218
218
  }
219
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
220
+ box-shadow: none;
221
+ }
219
222
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
220
223
  padding: 0;
221
224
  }
@@ -225,6 +228,7 @@
225
228
  min-width: auto;
226
229
  width: auto;
227
230
  border-style: solid;
231
+ transform: none;
228
232
  border-width: 1px;
229
233
  border-radius: 2px;
230
234
  z-index: 3;
@@ -235,6 +239,7 @@
235
239
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
236
240
  font-size: 16px;
237
241
  height: auto;
242
+ transform: none;
238
243
  line-height: 16px;
239
244
  padding: 0 4px;
240
245
  width: auto;
@@ -352,6 +357,9 @@
352
357
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
353
358
  left: var(--fileMenuWidth);
354
359
  }
360
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
361
+ padding-right: 30px;
362
+ }
355
363
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
356
364
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
357
365
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -363,6 +371,9 @@
363
371
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
364
372
  right: var(--fileMenuWidth);
365
373
  }
374
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
375
+ padding-left: 30px;
376
+ }
366
377
 
367
378
  .e-ribbon.e-rbn,
368
379
  .e-ribbon-group-overflow-ddb {
package/styles/ribbon/bootstrap.css CHANGED
@@ -221,6 +221,9 @@
221
221
  height: auto;
222
222
  min-height: auto;
223
223
  }
224
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
225
+ box-shadow: none;
226
+ }
224
227
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
225
228
  padding: 0;
226
229
  }
@@ -230,6 +233,7 @@
230
233
  min-width: auto;
231
234
  width: auto;
232
235
  border-style: solid;
236
+ transform: none;
233
237
  border-width: 1px;
234
238
  border-radius: 2px;
235
239
  z-index: 3;
@@ -240,6 +244,7 @@
240
244
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
241
245
  font-size: 16px;
242
246
  height: auto;
247
+ transform: none;
243
248
  line-height: 16px;
244
249
  padding: 0 4px;
245
250
  width: auto;
@@ -357,6 +362,9 @@
357
362
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
358
363
  left: var(--fileMenuWidth);
359
364
  }
365
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
366
+ padding-right: 30px;
367
+ }
360
368
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
361
369
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
362
370
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -368,6 +376,9 @@
368
376
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
369
377
  right: var(--fileMenuWidth);
370
378
  }
379
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
380
+ padding-left: 30px;
381
+ }
371
382
 
372
383
  .e-ribbon.e-rbn,
373
384
  .e-ribbon-group-overflow-ddb {
package/styles/ribbon/bootstrap4.css CHANGED
@@ -271,6 +271,9 @@
271
271
  height: auto;
272
272
  min-height: auto;
273
273
  }
274
+ .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
275
+ box-shadow: none;
276
+ }
274
277
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
275
278
  padding: 0;
276
279
  }
@@ -280,6 +283,7 @@
280
283
  min-width: auto;
281
284
  width: auto;
282
285
  border-style: solid;
286
+ transform: none;
283
287
  border-width: 1px;
284
288
  border-radius: 2px;
285
289
  z-index: 3;
@@ -290,6 +294,7 @@
290
294
  .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
291
295
  font-size: 20px;
292
296
  height: auto;
297
+ transform: none;
293
298
  line-height: 20px;
294
299
  padding: 0 2px;
295
300
  width: auto;
@@ -407,6 +412,9 @@
407
412
  .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
408
413
  left: var(--fileMenuWidth);
409
414
  }
415
+ .e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
416
+ padding-right: 30px;
417
+ }
410
418
  .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
411
419
  .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
412
420
  .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -418,6 +426,9 @@
418
426
  .e-ribbon.e-rbn.e-rtl .e-tab-header {
419
427
  right: var(--fileMenuWidth);
420
428
  }
429
+ .e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
430
+ padding-left: 30px;
431
+ }
421
432
 
422
433
  .e-ribbon.e-rbn,
423
434
  .e-ribbon-group-overflow-ddb {