@syncfusion/blazor-themes 26.2.4 → 26.2.5
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.
- package/SCSS-Themes/bds-dark.scss +40 -6
- package/SCSS-Themes/bds.scss +40 -6
- package/SCSS-Themes/bootstrap-dark.scss +40 -6
- package/SCSS-Themes/bootstrap.scss +40 -6
- package/SCSS-Themes/bootstrap4.scss +40 -6
- package/SCSS-Themes/bootstrap5-dark.scss +40 -6
- package/SCSS-Themes/bootstrap5.scss +40 -6
- package/SCSS-Themes/fabric-dark.scss +40 -6
- package/SCSS-Themes/fabric.scss +40 -6
- package/SCSS-Themes/fluent-dark.scss +40 -6
- package/SCSS-Themes/fluent.scss +40 -6
- package/SCSS-Themes/fluent2-dark.scss +40 -6
- package/SCSS-Themes/fluent2.scss +40 -6
- package/SCSS-Themes/highcontrast.scss +40 -6
- package/SCSS-Themes/material-dark.scss +40 -6
- package/SCSS-Themes/material.scss +40 -6
- package/SCSS-Themes/material3-dark.scss +40 -6
- package/SCSS-Themes/material3.scss +40 -6
- package/SCSS-Themes/navigations/treeview/bds-dark.scss +2 -2
- package/SCSS-Themes/navigations/treeview/bds.scss +2 -2
- package/SCSS-Themes/navigations/treeview/bootstrap-dark.scss +2 -2
- package/SCSS-Themes/navigations/treeview/bootstrap.scss +2 -2
- package/SCSS-Themes/navigations/treeview/bootstrap4.scss +2 -2
- package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +2 -2
- package/SCSS-Themes/navigations/treeview/bootstrap5.scss +2 -2
- package/SCSS-Themes/navigations/treeview/fabric-dark.scss +2 -2
- package/SCSS-Themes/navigations/treeview/fabric.scss +2 -2
- package/SCSS-Themes/navigations/treeview/fluent-dark.scss +2 -2
- package/SCSS-Themes/navigations/treeview/fluent.scss +2 -2
- package/SCSS-Themes/navigations/treeview/fluent2-dark.scss +2 -2
- package/SCSS-Themes/navigations/treeview/fluent2.scss +2 -2
- package/SCSS-Themes/navigations/treeview/highcontrast.scss +2 -2
- package/SCSS-Themes/navigations/treeview/material-dark.scss +2 -2
- package/SCSS-Themes/navigations/treeview/material.scss +2 -2
- package/SCSS-Themes/navigations/treeview/material3-dark.scss +2 -2
- package/SCSS-Themes/navigations/treeview/material3.scss +2 -2
- package/SCSS-Themes/navigations/treeview/tailwind-dark.scss +2 -2
- package/SCSS-Themes/navigations/treeview/tailwind.scss +2 -2
- package/SCSS-Themes/ribbon/ribbon/bds-dark.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/bds.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/bootstrap-dark.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/bootstrap.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/bootstrap4.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/bootstrap5-dark.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/bootstrap5.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/fabric-dark.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/fabric.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/fluent-dark.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/fluent.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/fluent2-dark.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/fluent2.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/highcontrast.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/material-dark.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/material.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/material3-dark.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/material3.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/tailwind-dark.scss +38 -4
- package/SCSS-Themes/ribbon/ribbon/tailwind.scss +38 -4
- package/SCSS-Themes/tailwind-dark.scss +40 -6
- package/SCSS-Themes/tailwind.scss +40 -6
- package/package.json +1 -1
|
@@ -60,15 +60,18 @@ $ribbon-large-items-btn-height: 18px !default;
|
|
|
60
60
|
$ribbon-large-items-icon-size: $text-2xl !default;
|
|
61
61
|
$ribbon-large-items-max-width: 10ch !default;
|
|
62
62
|
$ribbon-large-items-btn-gap: 4px !default;
|
|
63
|
+
$ribbon-large-items-min-width-height: 24px !default;
|
|
63
64
|
$ribbon-items-border: none !default;
|
|
64
65
|
$ribbon-items-border-radius: 4px !default;
|
|
65
66
|
$ribbon-items-font-weight: $font-weight-normal !default;
|
|
66
67
|
$ribbon-items-btn-size: $text-xs !default;
|
|
67
68
|
$ribbon-items-label-size: $text-sm !default;
|
|
68
69
|
$ribbon-items-btn-icon-size : $text-base !default;
|
|
70
|
+
$ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
|
|
69
71
|
$ribbon-items-caret-icon-size: $text-sm !default;
|
|
70
72
|
$ribbon-items-margin: 5px !default;
|
|
71
73
|
$ribbon-items-height: 18px !default;
|
|
74
|
+
$ribbon-items-min-width-height: 16px !default;
|
|
72
75
|
$ribbon-checkbox-margin: 8px 0 8px 12px !default;
|
|
73
76
|
$ribbon-rtl-checkbox-margin: 8px 12px 8px 0 !default;
|
|
74
77
|
$ribbon-items-checkbox-size: $text-xs !default;
|
|
@@ -206,6 +209,8 @@ $ribbon-bigger-large-items-btn-padding: 0 5px !default;
|
|
|
206
209
|
$ribbon-bigger-large-items-btn-gap: 8px !default;
|
|
207
210
|
$ribbon-bigger-large-items-btn-size: $text-sm !default;
|
|
208
211
|
$ribbon-bigger-large-items-btn-height: 125% !default;
|
|
212
|
+
$ribbon-bigger-large-items-min-width-height: 32px !default;
|
|
213
|
+
$ribbon-bigger-items-min-width-height: $text-xl;
|
|
209
214
|
$ribbon-bigger-items-padding: 2px !default;
|
|
210
215
|
$ribbon-bigger-items-btn-size: $text-sm !default;
|
|
211
216
|
$ribbon-bigger-items-height: 125% !default;
|
|
@@ -214,6 +219,7 @@ $ribbon-bigger-items-icon-height: 20px !default;
|
|
|
214
219
|
$ribbon-bigger-items-icon-size: $text-xl !default;
|
|
215
220
|
$ribbon-bigger-items-margin: 7px !default;
|
|
216
221
|
$ribbon-bigger-items-btn-icon-size: $text-xl !default;
|
|
222
|
+
$ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
|
|
217
223
|
$ribbon-bigger-items-checkbox-size: $text-sm !default;
|
|
218
224
|
$ribbon-bigger-checkbox-margin: 10px 0 10px 16px !default;
|
|
219
225
|
$ribbon-bigger-rtl-checkbox-margin: 10px 16px 10px 0 !default;
|
|
@@ -431,6 +437,14 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
431
437
|
line-height: $line-height;
|
|
432
438
|
}
|
|
433
439
|
|
|
440
|
+
@mixin ribbon-items-icon-images($items-size) {
|
|
441
|
+
min-height: $items-size;
|
|
442
|
+
min-width: $items-size;
|
|
443
|
+
background-repeat: no-repeat;
|
|
444
|
+
background-size: contain;
|
|
445
|
+
background-position: center;
|
|
446
|
+
}
|
|
447
|
+
|
|
434
448
|
@mixin ribbon-font-props($font-size, $line-height) {
|
|
435
449
|
font-size: $font-size;
|
|
436
450
|
line-height: $line-height;
|
|
@@ -1099,6 +1113,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1099
1113
|
}
|
|
1100
1114
|
|
|
1101
1115
|
.e-btn-icon:not(.e-caret) {
|
|
1116
|
+
@include ribbon-items-icon-images($ribbon-large-items-min-width-height);
|
|
1102
1117
|
font-size: $ribbon-large-items-icon-size;
|
|
1103
1118
|
font-weight: $ribbon-items-font-weight;
|
|
1104
1119
|
padding: $ribbon-large-items-icon-padding;
|
|
@@ -1217,6 +1232,9 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1217
1232
|
.e-btn-icon {
|
|
1218
1233
|
@include ribbon-font-props(16px, 16px);
|
|
1219
1234
|
margin: $ribbon-items-margin;
|
|
1235
|
+
&:not(.e-caret) {
|
|
1236
|
+
@include ribbon-items-icon-images($ribbon-items-min-width-height);
|
|
1237
|
+
}
|
|
1220
1238
|
}
|
|
1221
1239
|
}
|
|
1222
1240
|
|
|
@@ -1358,6 +1376,13 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1358
1376
|
width: 100%;
|
|
1359
1377
|
height: $ribbon-medium-item-height;
|
|
1360
1378
|
|
|
1379
|
+
.e-btn .e-btn-icon {
|
|
1380
|
+
&:not(.e-caret) {
|
|
1381
|
+
min-width: $ribbon-overflow-items-min-width-height;
|
|
1382
|
+
min-height: $ribbon-overflow-items-min-width-height;
|
|
1383
|
+
}
|
|
1384
|
+
}
|
|
1385
|
+
|
|
1361
1386
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1362
1387
|
margin: 0;
|
|
1363
1388
|
}
|
|
@@ -1396,7 +1421,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1396
1421
|
|
|
1397
1422
|
&.e-ribbon-medium-item {
|
|
1398
1423
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1399
|
-
|
|
1424
|
+
margin: $ribbon-button-icon-padding;
|
|
1400
1425
|
}
|
|
1401
1426
|
|
|
1402
1427
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -1435,7 +1460,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1435
1460
|
|
|
1436
1461
|
&.e-ribbon-medium-item {
|
|
1437
1462
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1438
|
-
|
|
1463
|
+
margin: $ribbon-rtl-button-icon-padding;
|
|
1439
1464
|
}
|
|
1440
1465
|
|
|
1441
1466
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -1887,6 +1912,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1887
1912
|
max-width: $ribbon-bigger-large-items-max-width;
|
|
1888
1913
|
|
|
1889
1914
|
.e-btn-icon:not(.e-caret) {
|
|
1915
|
+
@include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
|
|
1890
1916
|
font-size: $ribbon-bigger-large-items-icon-size;
|
|
1891
1917
|
padding: $ribbon-bigger-large-items-icon-padding;
|
|
1892
1918
|
}
|
|
@@ -1917,6 +1943,10 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1917
1943
|
.e-btn-icon {
|
|
1918
1944
|
@include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
|
|
1919
1945
|
margin: $ribbon-bigger-items-margin;
|
|
1946
|
+
&:not(.e-caret) {
|
|
1947
|
+
min-width: $ribbon-bigger-items-min-width-height;
|
|
1948
|
+
min-height: $ribbon-bigger-items-min-width-height;
|
|
1949
|
+
}
|
|
1920
1950
|
}
|
|
1921
1951
|
}
|
|
1922
1952
|
|
|
@@ -1973,6 +2003,10 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1973
2003
|
}
|
|
1974
2004
|
.e-btn .e-btn-icon {
|
|
1975
2005
|
font-size: $ribbon-bigger-items-btn-icon-size;
|
|
2006
|
+
&:not(.e-caret) {
|
|
2007
|
+
min-width: $ribbon-bigger-overflow-items-min-width-height;
|
|
2008
|
+
min-height: $ribbon-bigger-overflow-items-min-width-height;
|
|
2009
|
+
}
|
|
1976
2010
|
&.e-icon-left {
|
|
1977
2011
|
margin: 0;
|
|
1978
2012
|
}
|
|
@@ -2009,7 +2043,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
2009
2043
|
|
|
2010
2044
|
&.e-ribbon-medium-item {
|
|
2011
2045
|
.e-btn .e-btn-icon.e-icon-left {
|
|
2012
|
-
|
|
2046
|
+
margin: $ribbon-bigger-button-icon-padding;
|
|
2013
2047
|
}
|
|
2014
2048
|
|
|
2015
2049
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -2045,7 +2079,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
2045
2079
|
|
|
2046
2080
|
&.e-ribbon-medium-item {
|
|
2047
2081
|
.e-btn .e-btn-icon.e-icon-left {
|
|
2048
|
-
|
|
2082
|
+
margin: $ribbon-bigger-rtl-button-icon-padding;
|
|
2049
2083
|
}
|
|
2050
2084
|
|
|
2051
2085
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -60,15 +60,18 @@ $ribbon-large-items-btn-height: 18px !default;
|
|
|
60
60
|
$ribbon-large-items-icon-size: $text-2xl !default;
|
|
61
61
|
$ribbon-large-items-max-width: 10ch !default;
|
|
62
62
|
$ribbon-large-items-btn-gap: 4px !default;
|
|
63
|
+
$ribbon-large-items-min-width-height: 24px !default;
|
|
63
64
|
$ribbon-items-border: none !default;
|
|
64
65
|
$ribbon-items-border-radius: 4px !default;
|
|
65
66
|
$ribbon-items-font-weight: $font-weight-normal !default;
|
|
66
67
|
$ribbon-items-btn-size: $text-xs !default;
|
|
67
68
|
$ribbon-items-label-size: $text-sm !default;
|
|
68
69
|
$ribbon-items-btn-icon-size : $text-base !default;
|
|
70
|
+
$ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
|
|
69
71
|
$ribbon-items-caret-icon-size: $text-sm !default;
|
|
70
72
|
$ribbon-items-margin: 5px !default;
|
|
71
73
|
$ribbon-items-height: 18px !default;
|
|
74
|
+
$ribbon-items-min-width-height: 16px !default;
|
|
72
75
|
$ribbon-checkbox-margin: 8px 0 8px 12px !default;
|
|
73
76
|
$ribbon-rtl-checkbox-margin: 8px 12px 8px 0 !default;
|
|
74
77
|
$ribbon-items-checkbox-size: $text-xs !default;
|
|
@@ -206,6 +209,8 @@ $ribbon-bigger-large-items-btn-padding: 0 5px !default;
|
|
|
206
209
|
$ribbon-bigger-large-items-btn-gap: 8px !default;
|
|
207
210
|
$ribbon-bigger-large-items-btn-size: $text-sm !default;
|
|
208
211
|
$ribbon-bigger-large-items-btn-height: 125% !default;
|
|
212
|
+
$ribbon-bigger-large-items-min-width-height: 32px !default;
|
|
213
|
+
$ribbon-bigger-items-min-width-height: $text-xl;
|
|
209
214
|
$ribbon-bigger-items-padding: 2px !default;
|
|
210
215
|
$ribbon-bigger-items-btn-size: $text-sm !default;
|
|
211
216
|
$ribbon-bigger-items-height: 125% !default;
|
|
@@ -214,6 +219,7 @@ $ribbon-bigger-items-icon-height: 20px !default;
|
|
|
214
219
|
$ribbon-bigger-items-icon-size: $text-xl !default;
|
|
215
220
|
$ribbon-bigger-items-margin: 7px !default;
|
|
216
221
|
$ribbon-bigger-items-btn-icon-size: $text-xl !default;
|
|
222
|
+
$ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
|
|
217
223
|
$ribbon-bigger-items-checkbox-size: $text-sm !default;
|
|
218
224
|
$ribbon-bigger-checkbox-margin: 10px 0 10px 16px !default;
|
|
219
225
|
$ribbon-bigger-rtl-checkbox-margin: 10px 16px 10px 0 !default;
|
|
@@ -431,6 +437,14 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
431
437
|
line-height: $line-height;
|
|
432
438
|
}
|
|
433
439
|
|
|
440
|
+
@mixin ribbon-items-icon-images($items-size) {
|
|
441
|
+
min-height: $items-size;
|
|
442
|
+
min-width: $items-size;
|
|
443
|
+
background-repeat: no-repeat;
|
|
444
|
+
background-size: contain;
|
|
445
|
+
background-position: center;
|
|
446
|
+
}
|
|
447
|
+
|
|
434
448
|
@mixin ribbon-font-props($font-size, $line-height) {
|
|
435
449
|
font-size: $font-size;
|
|
436
450
|
line-height: $line-height;
|
|
@@ -1099,6 +1113,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1099
1113
|
}
|
|
1100
1114
|
|
|
1101
1115
|
.e-btn-icon:not(.e-caret) {
|
|
1116
|
+
@include ribbon-items-icon-images($ribbon-large-items-min-width-height);
|
|
1102
1117
|
font-size: $ribbon-large-items-icon-size;
|
|
1103
1118
|
font-weight: $ribbon-items-font-weight;
|
|
1104
1119
|
padding: $ribbon-large-items-icon-padding;
|
|
@@ -1217,6 +1232,9 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1217
1232
|
.e-btn-icon {
|
|
1218
1233
|
@include ribbon-font-props(16px, 16px);
|
|
1219
1234
|
margin: $ribbon-items-margin;
|
|
1235
|
+
&:not(.e-caret) {
|
|
1236
|
+
@include ribbon-items-icon-images($ribbon-items-min-width-height);
|
|
1237
|
+
}
|
|
1220
1238
|
}
|
|
1221
1239
|
}
|
|
1222
1240
|
|
|
@@ -1358,6 +1376,13 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1358
1376
|
width: 100%;
|
|
1359
1377
|
height: $ribbon-medium-item-height;
|
|
1360
1378
|
|
|
1379
|
+
.e-btn .e-btn-icon {
|
|
1380
|
+
&:not(.e-caret) {
|
|
1381
|
+
min-width: $ribbon-overflow-items-min-width-height;
|
|
1382
|
+
min-height: $ribbon-overflow-items-min-width-height;
|
|
1383
|
+
}
|
|
1384
|
+
}
|
|
1385
|
+
|
|
1361
1386
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1362
1387
|
margin: 0;
|
|
1363
1388
|
}
|
|
@@ -1396,7 +1421,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1396
1421
|
|
|
1397
1422
|
&.e-ribbon-medium-item {
|
|
1398
1423
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1399
|
-
|
|
1424
|
+
margin: $ribbon-button-icon-padding;
|
|
1400
1425
|
}
|
|
1401
1426
|
|
|
1402
1427
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -1435,7 +1460,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1435
1460
|
|
|
1436
1461
|
&.e-ribbon-medium-item {
|
|
1437
1462
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1438
|
-
|
|
1463
|
+
margin: $ribbon-rtl-button-icon-padding;
|
|
1439
1464
|
}
|
|
1440
1465
|
|
|
1441
1466
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -1887,6 +1912,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1887
1912
|
max-width: $ribbon-bigger-large-items-max-width;
|
|
1888
1913
|
|
|
1889
1914
|
.e-btn-icon:not(.e-caret) {
|
|
1915
|
+
@include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
|
|
1890
1916
|
font-size: $ribbon-bigger-large-items-icon-size;
|
|
1891
1917
|
padding: $ribbon-bigger-large-items-icon-padding;
|
|
1892
1918
|
}
|
|
@@ -1917,6 +1943,10 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1917
1943
|
.e-btn-icon {
|
|
1918
1944
|
@include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
|
|
1919
1945
|
margin: $ribbon-bigger-items-margin;
|
|
1946
|
+
&:not(.e-caret) {
|
|
1947
|
+
min-width: $ribbon-bigger-items-min-width-height;
|
|
1948
|
+
min-height: $ribbon-bigger-items-min-width-height;
|
|
1949
|
+
}
|
|
1920
1950
|
}
|
|
1921
1951
|
}
|
|
1922
1952
|
|
|
@@ -1973,6 +2003,10 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1973
2003
|
}
|
|
1974
2004
|
.e-btn .e-btn-icon {
|
|
1975
2005
|
font-size: $ribbon-bigger-items-btn-icon-size;
|
|
2006
|
+
&:not(.e-caret) {
|
|
2007
|
+
min-width: $ribbon-bigger-overflow-items-min-width-height;
|
|
2008
|
+
min-height: $ribbon-bigger-overflow-items-min-width-height;
|
|
2009
|
+
}
|
|
1976
2010
|
&.e-icon-left {
|
|
1977
2011
|
margin: 0;
|
|
1978
2012
|
}
|
|
@@ -2009,7 +2043,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
2009
2043
|
|
|
2010
2044
|
&.e-ribbon-medium-item {
|
|
2011
2045
|
.e-btn .e-btn-icon.e-icon-left {
|
|
2012
|
-
|
|
2046
|
+
margin: $ribbon-bigger-button-icon-padding;
|
|
2013
2047
|
}
|
|
2014
2048
|
|
|
2015
2049
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -2045,7 +2079,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
2045
2079
|
|
|
2046
2080
|
&.e-ribbon-medium-item {
|
|
2047
2081
|
.e-btn .e-btn-icon.e-icon-left {
|
|
2048
|
-
|
|
2082
|
+
margin: $ribbon-bigger-rtl-button-icon-padding;
|
|
2049
2083
|
}
|
|
2050
2084
|
|
|
2051
2085
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: 32px !default;
|
|
|
60
60
|
$ribbon-large-items-max-width: 10ch !default;
|
|
61
61
|
$ribbon-large-items-icon-padding: 8px 6px 6px !default;
|
|
62
62
|
$ribbon-large-items-btn-gap: 5px !default;
|
|
63
|
+
$ribbon-large-items-min-width-height: 32px !default;
|
|
63
64
|
$ribbon-items-border: none !default;
|
|
64
65
|
$ribbon-items-border-radius: 2px !default;
|
|
65
66
|
$ribbon-items-font-weight: 400 !default;
|
|
66
67
|
$ribbon-items-btn-size: 12px !default;
|
|
67
68
|
$ribbon-items-label-size: 12px !default;
|
|
68
69
|
$ribbon-items-btn-icon-size: 16px !default;
|
|
70
|
+
$ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
|
|
69
71
|
$ribbon-items-caret-icon-size: 12px !default;
|
|
70
72
|
$ribbon-items-margin: 8px !default;
|
|
71
73
|
$ribbon-checkbox-margin: 7px 0 7px 12px !default;
|
|
72
74
|
$ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
|
|
73
75
|
$ribbon-items-height: 18px !default;
|
|
76
|
+
$ribbon-items-min-width-height: 16px !default;
|
|
74
77
|
$ribbon-items-checkbox-size: 12px !default;
|
|
75
78
|
$ribbon-items-checkbox-padding: 0 8px !default;
|
|
76
79
|
$ribbon-input-group-height: 32px !default;
|
|
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
|
|
|
205
208
|
$ribbon-bigger-large-items-btn-padding: 0 6px !default;
|
|
206
209
|
$ribbon-bigger-large-items-btn-size: 14px !default;
|
|
207
210
|
$ribbon-bigger-large-items-btn-height: 22px !default;
|
|
211
|
+
$ribbon-bigger-large-items-min-width-height: 40px !default;
|
|
212
|
+
$ribbon-bigger-items-min-width-height: 20px;
|
|
208
213
|
$ribbon-bigger-large-items-btn-gap: 8px !default;
|
|
209
214
|
$ribbon-bigger-items-padding: 2px !default;
|
|
210
215
|
$ribbon-bigger-items-btn-size: 14px !default;
|
|
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 22px !default;
|
|
|
213
218
|
$ribbon-bigger-items-icon-height: 20px !default;
|
|
214
219
|
$ribbon-bigger-items-icon-size: 20px !default;
|
|
215
220
|
$ribbon-bigger-items-btn-icon-size: 18px !default;
|
|
221
|
+
$ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
|
|
216
222
|
$ribbon-bigger-items-margin: 10px !default;
|
|
217
223
|
$ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
|
|
218
224
|
$ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
|
|
@@ -431,6 +437,14 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
431
437
|
line-height: $line-height;
|
|
432
438
|
}
|
|
433
439
|
|
|
440
|
+
@mixin ribbon-items-icon-images($items-size) {
|
|
441
|
+
min-height: $items-size;
|
|
442
|
+
min-width: $items-size;
|
|
443
|
+
background-repeat: no-repeat;
|
|
444
|
+
background-size: contain;
|
|
445
|
+
background-position: center;
|
|
446
|
+
}
|
|
447
|
+
|
|
434
448
|
@mixin ribbon-font-props($font-size, $line-height) {
|
|
435
449
|
font-size: $font-size;
|
|
436
450
|
line-height: $line-height;
|
|
@@ -1099,6 +1113,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1099
1113
|
}
|
|
1100
1114
|
|
|
1101
1115
|
.e-btn-icon:not(.e-caret) {
|
|
1116
|
+
@include ribbon-items-icon-images($ribbon-large-items-min-width-height);
|
|
1102
1117
|
font-size: $ribbon-large-items-icon-size;
|
|
1103
1118
|
font-weight: $ribbon-items-font-weight;
|
|
1104
1119
|
padding: $ribbon-large-items-icon-padding;
|
|
@@ -1217,6 +1232,9 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1217
1232
|
.e-btn-icon {
|
|
1218
1233
|
@include ribbon-font-props(16px, 16px);
|
|
1219
1234
|
margin: $ribbon-items-margin;
|
|
1235
|
+
&:not(.e-caret) {
|
|
1236
|
+
@include ribbon-items-icon-images($ribbon-items-min-width-height);
|
|
1237
|
+
}
|
|
1220
1238
|
}
|
|
1221
1239
|
}
|
|
1222
1240
|
|
|
@@ -1358,6 +1376,13 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1358
1376
|
width: 100%;
|
|
1359
1377
|
height: $ribbon-medium-item-height;
|
|
1360
1378
|
|
|
1379
|
+
.e-btn .e-btn-icon {
|
|
1380
|
+
&:not(.e-caret) {
|
|
1381
|
+
min-width: $ribbon-overflow-items-min-width-height;
|
|
1382
|
+
min-height: $ribbon-overflow-items-min-width-height;
|
|
1383
|
+
}
|
|
1384
|
+
}
|
|
1385
|
+
|
|
1361
1386
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1362
1387
|
margin: 0;
|
|
1363
1388
|
}
|
|
@@ -1396,7 +1421,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1396
1421
|
|
|
1397
1422
|
&.e-ribbon-medium-item {
|
|
1398
1423
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1399
|
-
|
|
1424
|
+
margin: $ribbon-button-icon-padding;
|
|
1400
1425
|
}
|
|
1401
1426
|
|
|
1402
1427
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -1435,7 +1460,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1435
1460
|
|
|
1436
1461
|
&.e-ribbon-medium-item {
|
|
1437
1462
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1438
|
-
|
|
1463
|
+
margin: $ribbon-rtl-button-icon-padding;
|
|
1439
1464
|
}
|
|
1440
1465
|
|
|
1441
1466
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -1887,6 +1912,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1887
1912
|
max-width: $ribbon-bigger-large-items-max-width;
|
|
1888
1913
|
|
|
1889
1914
|
.e-btn-icon:not(.e-caret) {
|
|
1915
|
+
@include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
|
|
1890
1916
|
font-size: $ribbon-bigger-large-items-icon-size;
|
|
1891
1917
|
padding: $ribbon-bigger-large-items-icon-padding;
|
|
1892
1918
|
}
|
|
@@ -1917,6 +1943,10 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1917
1943
|
.e-btn-icon {
|
|
1918
1944
|
@include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
|
|
1919
1945
|
margin: $ribbon-bigger-items-margin;
|
|
1946
|
+
&:not(.e-caret) {
|
|
1947
|
+
min-width: $ribbon-bigger-items-min-width-height;
|
|
1948
|
+
min-height: $ribbon-bigger-items-min-width-height;
|
|
1949
|
+
}
|
|
1920
1950
|
}
|
|
1921
1951
|
}
|
|
1922
1952
|
|
|
@@ -1973,6 +2003,10 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1973
2003
|
}
|
|
1974
2004
|
.e-btn .e-btn-icon {
|
|
1975
2005
|
font-size: $ribbon-bigger-items-btn-icon-size;
|
|
2006
|
+
&:not(.e-caret) {
|
|
2007
|
+
min-width: $ribbon-bigger-overflow-items-min-width-height;
|
|
2008
|
+
min-height: $ribbon-bigger-overflow-items-min-width-height;
|
|
2009
|
+
}
|
|
1976
2010
|
&.e-icon-left {
|
|
1977
2011
|
margin: 0;
|
|
1978
2012
|
}
|
|
@@ -2009,7 +2043,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
2009
2043
|
|
|
2010
2044
|
&.e-ribbon-medium-item {
|
|
2011
2045
|
.e-btn .e-btn-icon.e-icon-left {
|
|
2012
|
-
|
|
2046
|
+
margin: $ribbon-bigger-button-icon-padding;
|
|
2013
2047
|
}
|
|
2014
2048
|
|
|
2015
2049
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -2045,7 +2079,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
2045
2079
|
|
|
2046
2080
|
&.e-ribbon-medium-item {
|
|
2047
2081
|
.e-btn .e-btn-icon.e-icon-left {
|
|
2048
|
-
|
|
2082
|
+
margin: $ribbon-bigger-rtl-button-icon-padding;
|
|
2049
2083
|
}
|
|
2050
2084
|
|
|
2051
2085
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: 32px !default;
|
|
|
60
60
|
$ribbon-large-items-max-width: 10ch !default;
|
|
61
61
|
$ribbon-large-items-icon-padding: 8px 6px 6px !default;
|
|
62
62
|
$ribbon-large-items-btn-gap: 5px !default;
|
|
63
|
+
$ribbon-large-items-min-width-height: 32px !default;
|
|
63
64
|
$ribbon-items-border: none !default;
|
|
64
65
|
$ribbon-items-border-radius: 4px !default;
|
|
65
66
|
$ribbon-items-font-weight: 400 !default;
|
|
66
67
|
$ribbon-items-btn-size: 12px !default;
|
|
67
68
|
$ribbon-items-label-size: 12px !default;
|
|
68
69
|
$ribbon-items-btn-icon-size: 16px !default;
|
|
70
|
+
$ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
|
|
69
71
|
$ribbon-items-caret-icon-size: 12px !default;
|
|
70
72
|
$ribbon-items-margin: 8px !default;
|
|
71
73
|
$ribbon-checkbox-margin: 7px 0 7px 12px !default;
|
|
72
74
|
$ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
|
|
73
75
|
$ribbon-items-height: 18px !default;
|
|
76
|
+
$ribbon-items-min-width-height: 16px !default;
|
|
74
77
|
$ribbon-items-checkbox-size: 12px !default;
|
|
75
78
|
$ribbon-items-checkbox-padding: 0 8px !default;
|
|
76
79
|
$ribbon-input-group-height: 32px !default;
|
|
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
|
|
|
205
208
|
$ribbon-bigger-large-items-btn-padding: 0 5px !default;
|
|
206
209
|
$ribbon-bigger-large-items-btn-size: 14px !default;
|
|
207
210
|
$ribbon-bigger-large-items-btn-height: 22px !default;
|
|
211
|
+
$ribbon-bigger-large-items-min-width-height: 40px !default;
|
|
212
|
+
$ribbon-bigger-items-min-width-height: 20px;
|
|
208
213
|
$ribbon-bigger-large-items-btn-gap: 9px !default;
|
|
209
214
|
$ribbon-bigger-items-padding: 2px !default;
|
|
210
215
|
$ribbon-bigger-items-btn-size: 14px !default;
|
|
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 22px !default;
|
|
|
213
218
|
$ribbon-bigger-items-icon-height: 20px !default;
|
|
214
219
|
$ribbon-bigger-items-icon-size: 20px !default;
|
|
215
220
|
$ribbon-bigger-items-btn-icon-size: 18px !default;
|
|
221
|
+
$ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
|
|
216
222
|
$ribbon-bigger-items-margin: 10px !default;
|
|
217
223
|
$ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
|
|
218
224
|
$ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
|
|
@@ -431,6 +437,14 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
431
437
|
line-height: $line-height;
|
|
432
438
|
}
|
|
433
439
|
|
|
440
|
+
@mixin ribbon-items-icon-images($items-size) {
|
|
441
|
+
min-height: $items-size;
|
|
442
|
+
min-width: $items-size;
|
|
443
|
+
background-repeat: no-repeat;
|
|
444
|
+
background-size: contain;
|
|
445
|
+
background-position: center;
|
|
446
|
+
}
|
|
447
|
+
|
|
434
448
|
@mixin ribbon-font-props($font-size, $line-height) {
|
|
435
449
|
font-size: $font-size;
|
|
436
450
|
line-height: $line-height;
|
|
@@ -1099,6 +1113,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1099
1113
|
}
|
|
1100
1114
|
|
|
1101
1115
|
.e-btn-icon:not(.e-caret) {
|
|
1116
|
+
@include ribbon-items-icon-images($ribbon-large-items-min-width-height);
|
|
1102
1117
|
font-size: $ribbon-large-items-icon-size;
|
|
1103
1118
|
font-weight: $ribbon-items-font-weight;
|
|
1104
1119
|
padding: $ribbon-large-items-icon-padding;
|
|
@@ -1217,6 +1232,9 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1217
1232
|
.e-btn-icon {
|
|
1218
1233
|
@include ribbon-font-props(16px, 16px);
|
|
1219
1234
|
margin: $ribbon-items-margin;
|
|
1235
|
+
&:not(.e-caret) {
|
|
1236
|
+
@include ribbon-items-icon-images($ribbon-items-min-width-height);
|
|
1237
|
+
}
|
|
1220
1238
|
}
|
|
1221
1239
|
}
|
|
1222
1240
|
|
|
@@ -1358,6 +1376,13 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1358
1376
|
width: 100%;
|
|
1359
1377
|
height: $ribbon-medium-item-height;
|
|
1360
1378
|
|
|
1379
|
+
.e-btn .e-btn-icon {
|
|
1380
|
+
&:not(.e-caret) {
|
|
1381
|
+
min-width: $ribbon-overflow-items-min-width-height;
|
|
1382
|
+
min-height: $ribbon-overflow-items-min-width-height;
|
|
1383
|
+
}
|
|
1384
|
+
}
|
|
1385
|
+
|
|
1361
1386
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1362
1387
|
margin: 0;
|
|
1363
1388
|
}
|
|
@@ -1396,7 +1421,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1396
1421
|
|
|
1397
1422
|
&.e-ribbon-medium-item {
|
|
1398
1423
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1399
|
-
|
|
1424
|
+
margin: $ribbon-button-icon-padding;
|
|
1400
1425
|
}
|
|
1401
1426
|
|
|
1402
1427
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -1435,7 +1460,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1435
1460
|
|
|
1436
1461
|
&.e-ribbon-medium-item {
|
|
1437
1462
|
.e-btn .e-btn-icon.e-icon-left {
|
|
1438
|
-
|
|
1463
|
+
margin: $ribbon-rtl-button-icon-padding;
|
|
1439
1464
|
}
|
|
1440
1465
|
|
|
1441
1466
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -1887,6 +1912,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1887
1912
|
max-width: $ribbon-bigger-large-items-max-width;
|
|
1888
1913
|
|
|
1889
1914
|
.e-btn-icon:not(.e-caret) {
|
|
1915
|
+
@include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
|
|
1890
1916
|
font-size: $ribbon-bigger-large-items-icon-size;
|
|
1891
1917
|
padding: $ribbon-bigger-large-items-icon-padding;
|
|
1892
1918
|
}
|
|
@@ -1917,6 +1943,10 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1917
1943
|
.e-btn-icon {
|
|
1918
1944
|
@include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
|
|
1919
1945
|
margin: $ribbon-bigger-items-margin;
|
|
1946
|
+
&:not(.e-caret) {
|
|
1947
|
+
min-width: $ribbon-bigger-items-min-width-height;
|
|
1948
|
+
min-height: $ribbon-bigger-items-min-width-height;
|
|
1949
|
+
}
|
|
1920
1950
|
}
|
|
1921
1951
|
}
|
|
1922
1952
|
|
|
@@ -1973,6 +2003,10 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
1973
2003
|
}
|
|
1974
2004
|
.e-btn .e-btn-icon {
|
|
1975
2005
|
font-size: $ribbon-bigger-items-btn-icon-size;
|
|
2006
|
+
&:not(.e-caret) {
|
|
2007
|
+
min-width: $ribbon-bigger-overflow-items-min-width-height;
|
|
2008
|
+
min-height: $ribbon-bigger-overflow-items-min-width-height;
|
|
2009
|
+
}
|
|
1976
2010
|
&.e-icon-left {
|
|
1977
2011
|
margin: 0;
|
|
1978
2012
|
}
|
|
@@ -2009,7 +2043,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
2009
2043
|
|
|
2010
2044
|
&.e-ribbon-medium-item {
|
|
2011
2045
|
.e-btn .e-btn-icon.e-icon-left {
|
|
2012
|
-
|
|
2046
|
+
margin: $ribbon-bigger-button-icon-padding;
|
|
2013
2047
|
}
|
|
2014
2048
|
|
|
2015
2049
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|
|
@@ -2045,7 +2079,7 @@ $ribbon-items-focus-box-shadow: none !default;
|
|
|
2045
2079
|
|
|
2046
2080
|
&.e-ribbon-medium-item {
|
|
2047
2081
|
.e-btn .e-btn-icon.e-icon-left {
|
|
2048
|
-
|
|
2082
|
+
margin: $ribbon-bigger-rtl-button-icon-padding;
|
|
2049
2083
|
}
|
|
2050
2084
|
|
|
2051
2085
|
&:not(:has(.e-colorpicker-wrapper)) .e-btn {
|