@syncfusion/ej2-ribbon 31.2.12 → 32.1.24

package/styles/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
   font-size: 12px;
@@ -23,7 +93,7 @@
 }
 
 .e-popup.e-ddl {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   margin-top: 3px;
@@ -147,6 +217,80 @@
   content: "\e729";
 }
 
+
+
+
+
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-ribbon.e-rbn {
   display: block;
   border-radius: unset;
@@ -164,7 +308,7 @@
   height: 20px;
 }
 .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
   display: -webkit-box;
@@ -305,7 +449,7 @@
   -webkit-transform: none;
           transform: none;
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
   z-index: 3;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
@@ -356,7 +500,7 @@
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   padding: 0;
   border: none;
   height: 32px;
@@ -404,7 +548,7 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
   width: 95px;
   margin: 0 2px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   max-height: 22px;
 }
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled {
@@ -643,7 +787,7 @@
 .e-ribbon.e-rbn .e-input-group,
 .e-ribbon-group-overflow-ddb .e-input-group {
   height: 30px;
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   margin: 0 0 4px;
 }
 .e-ribbon.e-rbn .e-input-group input.e-input,
@@ -776,7 +920,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
   max-height: 80px;
   margin: 0 2px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-button,
 .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-button,
@@ -784,7 +928,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-button {
   padding: 0 2px;
   border-width: 0 0 0 1px;
-  border-radius: 0 4px 4px 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0);
   line-height: 12px;
   font-weight: 400;
   font-size: 12px;
@@ -800,7 +944,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow:not(:has(.e-ribbon-template)) .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-btn {
   border: none;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   font-weight: 400;
   font-size: 12px;
   text-transform: none;
@@ -923,7 +1067,7 @@
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)):has(.e-ribbon-gallery-container:not(.e-hidden)),
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)):has(.e-ribbon-gallery-container:not(.e-hidden)) {
   height: 90px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-btn-group,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-btn-group {
@@ -960,7 +1104,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container {
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
@@ -977,13 +1121,13 @@
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper .e-btn {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper .e-dropdown-btn .e-caret,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper .e-dropdown-btn .e-caret {
@@ -1103,7 +1247,7 @@
 .e-ribbon.e-rbn.e-rtl .e-ribbon-item:not(:has(.e-ribbon-template)) .e-ribbon-gallery-button,
 .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-item:not(:has(.e-ribbon-template)) .e-ribbon-gallery-button {
   border-width: 0 1px 0 0;
-  border-radius: 4px 0 0 4px;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.25);
 }
 
 .e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
@@ -1266,7 +1410,7 @@
 }
 
 .e-dropdown-popup.e-ribbon-dropdown-group-button {
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   border: 1px solid;
   padding: 4px 9px;
 }
@@ -1289,16 +1433,16 @@
           justify-content: flex-start;
 }
 .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:has(.e-ribbon-group-button-content) .e-btn.e-ribbon-group-button:first-of-type {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+  border-top-right-radius: calc(var(--e-radius) * 0.25);
+  border-top-left-radius: calc(var(--e-radius) * 0.25);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
 }
 .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:has(.e-ribbon-group-button-content) .e-btn.e-ribbon-group-button:last-of-type {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-top-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0.25);
+  border-bottom-left-radius: calc(var(--e-radius) * 0.25);
 }
 .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:not(.e-icon-btn) {
   -webkit-box-orient: vertical;
@@ -1309,7 +1453,7 @@
 .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group {
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group .e-btn-icon {
   font-size: 16px;
@@ -1349,7 +1493,7 @@
 
 .e-ribbon-gallery-popup.e-popup,
 .e-ribbon-gallery-dropdown.e-popup {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   padding: 8px 12px 12px;
   overflow: auto;
 }
@@ -1404,7 +1548,7 @@
   cursor: pointer;
   border-width: 2px;
   border-style: solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
 .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
@@ -1439,7 +1583,7 @@
 .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
 .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
 .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 
 .e-ribbon-gallery-text {
@@ -1457,7 +1601,7 @@
   line-height: 18px;
   min-width: 26px;
   height: 26px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-ribbon-keytip.e-popup-open {
   display: -webkit-box;
@@ -1479,7 +1623,7 @@
 .e-ribbon-menu.e-menu-container ul.e-ul.e-menu {
   padding: 4px 0;
   border: 1px solid;
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item,
 .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item, .e-ribbon-menu.e-menu-container ul.e-vertical .e-menu-item,
@@ -1549,13 +1693,87 @@
 
 .e-ribbon-vertical-center.e-dropdown-popup,
 .e-ribbon-group-overflow-ddb.e-dropdown-popup {
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 .e-ribbon-vertical-center.e-ribbon-filemenu.e-dropdown-popup,
 .e-ribbon-group-overflow-ddb.e-ribbon-filemenu.e-dropdown-popup {
-  border-radius: 8px;
+  border-radius: calc(var(--e-radius) * 0.5);
 }
 
+
+
+
+
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
   background: var(--color-sf-content-bg-color-alt1);
 }
@@ -2368,6 +2586,80 @@
   background: var(--color-sf-primary-text-color);
 }
 
+
+
+
+
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group {
   height: 150px;

package/styles/tailwind3.scss

@@ -1,19 +1,19 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-popups/styles/tooltip/tailwind3-definition.scss';
-@import 'ej2-buttons/styles/button/tailwind3-definition.scss';
-@import 'ej2-buttons/styles/check-box/tailwind3-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/tailwind3-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/tailwind3-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/tailwind3-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/tailwind3-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/tailwind3-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/tailwind3-definition.scss';
-@import 'ej2-navigations/styles/context-menu/tailwind3-definition.scss';
-@import 'ej2-navigations/styles/toolbar/tailwind3-definition.scss';
-@import 'ej2-navigations/styles/menu/tailwind3-definition.scss';
-@import 'ej2-navigations/styles/tab/tailwind3-definition.scss';
-@import 'ej2-inputs/styles/color-picker/tailwind3-definition.scss';
-@import 'ribbon/tailwind3-definition.scss';
-@import 'ribbon/icons/tailwind3.scss';
-@import 'ribbon/all.scss';
-@import 'ribbon/bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-popups/styles/tooltip/tailwind3-definition' as *;
+@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
+@use 'ej2-buttons/styles/check-box/tailwind3-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/tailwind3-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/tailwind3-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/tailwind3-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/tailwind3-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/tailwind3-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/tailwind3-definition' as *;
+@use 'ej2-navigations/styles/context-menu/tailwind3-definition' as *;
+@use 'ej2-navigations/styles/toolbar/tailwind3-definition' as *;
+@use 'ej2-navigations/styles/menu/tailwind3-definition' as *;
+@use 'ej2-navigations/styles/tab/tailwind3-definition' as *;
+@use 'ej2-inputs/styles/color-picker/tailwind3-definition' as *;
+@use 'ribbon/tailwind3-definition' as *;
+@use 'ribbon/icons/tailwind3' as *;
+@use 'ribbon/all.tailwind3' as *;
+@use 'ribbon/bigger.tailwind3' as *;