@progress/kendo-theme-fluent 11.0.3-dev.3 → 11.1.0-dev.0
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/dist/all.css +1 -1
- package/dist/fluent-main-dark.css +1 -1
- package/dist/fluent-main.css +1 -1
- package/dist/meta/sassdoc-data.json +1492 -1114
- package/dist/meta/sassdoc-raw-data.json +724 -549
- package/dist/meta/variables.json +40 -12
- package/lib/swatches/all.json +1 -1
- package/lib/swatches/fluent-main-dark.json +1 -1
- package/lib/swatches/fluent-main.json +1 -1
- package/package.json +4 -4
- package/scss/action-sheet/_theme.scss +17 -17
- package/scss/appbar/_theme.scss +3 -7
- package/scss/badge/_layout.scss +12 -12
- package/scss/badge/_theme.scss +3 -7
- package/scss/bottom-navigation/_theme.scss +15 -23
- package/scss/breadcrumb/_layout.scss +12 -12
- package/scss/button/_layout.scss +10 -14
- package/scss/button/_theme.scss +33 -35
- package/scss/calendar/_layout.scss +41 -41
- package/scss/calendar/_theme.scss +25 -28
- package/scss/card/_theme.scss +9 -14
- package/scss/checkbox/_layout.scss +18 -18
- package/scss/chip/_layout.scss +8 -8
- package/scss/chip/_theme.scss +15 -19
- package/scss/colorgradient/_layout.scss +3 -2
- package/scss/editor/_theme.scss +1 -1
- package/scss/fab/_layout.scss +4 -4
- package/scss/fab/_theme.scss +41 -51
- package/scss/grid/_layout.scss +58 -50
- package/scss/grid/_theme.scss +102 -94
- package/scss/grid/_variables.scss +17 -10
- package/scss/imageeditor/_layout.scss +6 -4
- package/scss/input/_layout.scss +25 -25
- package/scss/input/_theme.scss +34 -42
- package/scss/list/_layout.scss +34 -34
- package/scss/list/_theme.scss +12 -15
- package/scss/loader/_layout.scss +21 -18
- package/scss/menu/_layout.scss +14 -14
- package/scss/messagebox/_theme.scss +3 -7
- package/scss/notification/_theme.scss +4 -9
- package/scss/otp/_layout.scss +2 -2
- package/scss/pager/_layout.scss +7 -7
- package/scss/pager/_theme.scss +6 -10
- package/scss/panelbar/_layout.scss +4 -4
- package/scss/panelbar/_theme.scss +64 -64
- package/scss/radio/_layout.scss +14 -14
- package/scss/slider/_theme.scss +23 -31
- package/scss/switch/_layout.scss +18 -18
- package/scss/switch/_theme.scss +42 -58
- package/scss/table/_layout.scss +18 -18
- package/scss/table/_variables.scss +17 -0
- package/scss/timeselector/_layout.scss +9 -6
- package/scss/toolbar/_layout.scss +16 -16
- package/scss/tooltip/_theme.scss +4 -8
- package/scss/treeview/_layout.scss +8 -8
- package/scss/treeview/_theme.scss +24 -31
package/dist/meta/variables.json
CHANGED
|
@@ -2255,6 +2255,26 @@
|
|
|
2255
2255
|
"type": "String",
|
|
2256
2256
|
"value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)"
|
|
2257
2257
|
},
|
|
2258
|
+
"kendo-table-highlighted-bg": {
|
|
2259
|
+
"type": "String",
|
|
2260
|
+
"value": "color-mix(in srgb, var(--kendo-color-warning, #ffc80a) 13%, transparent)"
|
|
2261
|
+
},
|
|
2262
|
+
"kendo-table-highlighted-text": {
|
|
2263
|
+
"type": "String",
|
|
2264
|
+
"value": "var(--kendo-color-on-app-surface, #323130)"
|
|
2265
|
+
},
|
|
2266
|
+
"kendo-table-highlighted-font-weight": {
|
|
2267
|
+
"type": "String",
|
|
2268
|
+
"value": "var(--kendo-font-weight-semibold, bold)"
|
|
2269
|
+
},
|
|
2270
|
+
"kendo-table-highlighted-border": {
|
|
2271
|
+
"type": "String",
|
|
2272
|
+
"value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)"
|
|
2273
|
+
},
|
|
2274
|
+
"kendo-table-selected-highlighted-bg": {
|
|
2275
|
+
"type": "String",
|
|
2276
|
+
"value": "color-mix(in srgb, color-mix(in srgb, var(--kendo-color-primary, #0078d4), var(--kendo-color-warning, #ffc80a)) 23%, transparent)"
|
|
2277
|
+
},
|
|
2258
2278
|
"kendo-table-selected-hover-bg": {
|
|
2259
2279
|
"type": "String",
|
|
2260
2280
|
"value": "color-mix(in srgb, var(--kendo-color-primary, #0078d4) 26%, transparent)"
|
|
@@ -13548,6 +13568,26 @@
|
|
|
13548
13568
|
"type": "String",
|
|
13549
13569
|
"value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)"
|
|
13550
13570
|
},
|
|
13571
|
+
"kendo-grid-highlighted-bg": {
|
|
13572
|
+
"type": "String",
|
|
13573
|
+
"value": "color-mix(in srgb, var(--kendo-color-warning, #ffc80a) 13%, transparent)"
|
|
13574
|
+
},
|
|
13575
|
+
"kendo-grid-highlighted-text": {
|
|
13576
|
+
"type": "String",
|
|
13577
|
+
"value": "var(--kendo-color-on-app-surface, #323130)"
|
|
13578
|
+
},
|
|
13579
|
+
"kendo-grid-highlighted-border": {
|
|
13580
|
+
"type": "String",
|
|
13581
|
+
"value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)"
|
|
13582
|
+
},
|
|
13583
|
+
"kendo-grid-highlighted-font-weight": {
|
|
13584
|
+
"type": "String",
|
|
13585
|
+
"value": "var(--kendo-font-weight-semibold, bold)"
|
|
13586
|
+
},
|
|
13587
|
+
"kendo-grid-selected-highlighted-bg": {
|
|
13588
|
+
"type": "String",
|
|
13589
|
+
"value": "color-mix(in srgb, color-mix(in srgb, var(--kendo-color-primary, #0078d4), var(--kendo-color-warning, #ffc80a)) 23%, transparent)"
|
|
13590
|
+
},
|
|
13551
13591
|
"kendo-grid-selected-hover-bg": {
|
|
13552
13592
|
"type": "String",
|
|
13553
13593
|
"value": "color-mix(in srgb, var(--kendo-color-primary, #0078d4) 26%, transparent)"
|
|
@@ -13824,18 +13864,6 @@
|
|
|
13824
13864
|
"type": "String",
|
|
13825
13865
|
"value": "var(--kendo-color-base-hover, #f3f2f1)"
|
|
13826
13866
|
},
|
|
13827
|
-
"kendo-grid-sticky-selected-bg": {
|
|
13828
|
-
"type": "String",
|
|
13829
|
-
"value": "color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent)"
|
|
13830
|
-
},
|
|
13831
|
-
"kendo-grid-sticky-selected-alt-bg": {
|
|
13832
|
-
"type": "String",
|
|
13833
|
-
"value": "color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent)"
|
|
13834
|
-
},
|
|
13835
|
-
"kendo-grid-sticky-selected-hover-bg": {
|
|
13836
|
-
"type": "String",
|
|
13837
|
-
"value": "color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent)"
|
|
13838
|
-
},
|
|
13839
13867
|
"kendo-filter-menu-container-padding-y": {
|
|
13840
13868
|
"type": "String",
|
|
13841
13869
|
"value": "var(--kendo-spacing-3, 0.75rem)"
|
package/lib/swatches/all.json
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-theme-fluent",
|
|
3
3
|
"description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
|
|
4
|
-
"version": "11.0
|
|
4
|
+
"version": "11.1.0-dev.0",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -54,12 +54,12 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@progress/kendo-svg-icons": "^4.1.0",
|
|
57
|
-
"@progress/kendo-theme-core": "11.0
|
|
58
|
-
"@progress/kendo-theme-utils": "11.0
|
|
57
|
+
"@progress/kendo-theme-core": "11.1.0-dev.0",
|
|
58
|
+
"@progress/kendo-theme-utils": "11.1.0-dev.0"
|
|
59
59
|
},
|
|
60
60
|
"directories": {
|
|
61
61
|
"doc": "docs",
|
|
62
62
|
"lib": "lib"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "87380b1585659324bdbd1bdc8231e01a85daddf7"
|
|
65
65
|
}
|
|
@@ -50,33 +50,33 @@
|
|
|
50
50
|
// Actionsheet action
|
|
51
51
|
.k-actionsheet-item {
|
|
52
52
|
|
|
53
|
-
color: var( --
|
|
54
|
-
background-color: var( --
|
|
55
|
-
border-color: var( --
|
|
56
|
-
outline-color: var( --
|
|
53
|
+
color: var( --kendo-actionsheet-item-text, inherit );
|
|
54
|
+
background-color: var( --kendo-actionsheet-item-bg, inherit );
|
|
55
|
+
border-color: var( --kendo-actionsheet-item-border, inherit );
|
|
56
|
+
outline-color: var( --kendo-actionsheet-item-outline, inherit );
|
|
57
57
|
|
|
58
58
|
// Hover state
|
|
59
59
|
&:hover,
|
|
60
60
|
&.k-hover {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
color: var( --kendo-actionsheet-item-hover-text, #{$kendo-actionsheet-item-hover-text} );
|
|
62
|
+
background-color: var( --kendo-actionsheet-item-hover-bg, #{$kendo-actionsheet-item-hover-bg} );
|
|
63
|
+
border-color: var( --kendo-actionsheet-item-hover-border, #{$kendo-actionsheet-item-hover-border} );
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
|
|
67
67
|
// Focus state
|
|
68
68
|
&:focus,
|
|
69
69
|
&.k-focus {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
color: var( --kendo-actionsheet-item-focus-text, #{$kendo-actionsheet-item-focus-text} );
|
|
71
|
+
background-color: var( --kendo-actionsheet-item-focus-bg, #{$kendo-actionsheet-item-focus-bg} );
|
|
72
|
+
border-color: var( --kendo-actionsheet-item-focus-border, #{$kendo-actionsheet-item-focus-border} );
|
|
73
|
+
outline-color: var( --kendo-actionsheet-item-focus-outline, #{$kendo-actionsheet-item-focus-outline} );
|
|
74
74
|
|
|
75
75
|
&:hover,
|
|
76
76
|
&.k-hover {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
color: var( --kendo-actionsheet-item-focus-hover-text, #{$kendo-actionsheet-item-focus-hover-text} );
|
|
78
|
+
background-color: var( --kendo-actionsheet-item-focus-hover-bg, #{$kendo-actionsheet-item-focus-hover-bg} );
|
|
79
|
+
border-color: var( --kendo-actionsheet-item-focus-hover-border, #{$kendo-actionsheet-item-focus-hover-border} );
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
// Disabed state
|
|
85
85
|
&:disabled,
|
|
86
86
|
&.k-disabled {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
color: var( --kendo-actionsheet-item-disabled-text, #{$kendo-actionsheet-item-disabled-text} );
|
|
88
|
+
background-color: var( --kendo-actionsheet-item-disabled-bg, #{$kendo-actionsheet-item-disabled-bg} );
|
|
89
|
+
border-color: var( --kendo-actionsheet-item-disabled-border, #{$kendo-actionsheet-item-disabled-border} );
|
|
90
90
|
|
|
91
91
|
.k-actionsheet-item-description,
|
|
92
92
|
.k-actionsheet-item-icon {
|
package/scss/appbar/_theme.scss
CHANGED
|
@@ -5,13 +5,9 @@
|
|
|
5
5
|
@mixin kendo-appbar--theme() {
|
|
6
6
|
|
|
7
7
|
.k-appbar {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
color: var( --INTERNAL--kendo-appbar-text, inherit );
|
|
13
|
-
background-color: var( --INTERNAL--kendo-appbar-bg, inherit );
|
|
14
|
-
border-color: var( --INTERNAL--kendo-appbar-border, inherit );
|
|
8
|
+
color: var( --kendo-appbar-text, #{$kendo-appbar-text} );
|
|
9
|
+
background-color: var( --kendo-appbar-bg, #{$kendo-appbar-bg} );
|
|
10
|
+
border-color: var( --kendo-appbar-border, #{$kendo-appbar-border} );
|
|
15
11
|
}
|
|
16
12
|
|
|
17
13
|
.k-appbar-inherit {
|
package/scss/badge/_layout.scss
CHANGED
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
@mixin kendo-badge--layout() {
|
|
6
6
|
|
|
7
7
|
.k-badge {
|
|
8
|
-
padding-inline: var( --
|
|
9
|
-
padding-block: var( --
|
|
10
|
-
min-width: var( --
|
|
11
|
-
font-size: var( --
|
|
8
|
+
padding-inline: var( --kendo-badge-padding-x, 0 );
|
|
9
|
+
padding-block: var( --kendo-badge-padding-y, 0 );
|
|
10
|
+
min-width: var( --kendo-badge-min-width, auto );
|
|
11
|
+
font-size: var( --kendo-badge-font-size, 1rem );
|
|
12
12
|
font-weight: var( --kendo-badge-font-weight, #{$kendo-badge-font-weight} );
|
|
13
|
-
line-height: var( --
|
|
13
|
+
line-height: var( --kendo-badge-line-height, normal );
|
|
14
14
|
border-width: var( --kendo-badge-border-width, #{$kendo-badge-border-width} );
|
|
15
15
|
border-style: solid;
|
|
16
16
|
border-color: transparent;
|
|
@@ -67,15 +67,15 @@
|
|
|
67
67
|
$_min-width: map.get( $size-props, min-width );
|
|
68
68
|
|
|
69
69
|
.k-badge-#{$size} {
|
|
70
|
-
--
|
|
71
|
-
--
|
|
72
|
-
--
|
|
73
|
-
--
|
|
74
|
-
--
|
|
70
|
+
--kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-x, #{$_padding-x} );
|
|
71
|
+
--kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
|
|
72
|
+
--kendo-badge-font-size: var( --kendo-badge-#{$size}-font-size, #{$_font-size} );
|
|
73
|
+
--kendo-badge-line-height: var( --kendo-badge-#{$size}-line-height, #{$_line-height} );
|
|
74
|
+
--kendo-badge-min-width: var( --kendo-badge-#{$size}-min-width, #{$_min-width} );
|
|
75
75
|
|
|
76
76
|
&:empty {
|
|
77
|
-
--
|
|
78
|
-
--
|
|
77
|
+
--kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
|
|
78
|
+
--kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
|
|
79
79
|
|
|
80
80
|
min-width: auto;
|
|
81
81
|
}
|
package/scss/badge/_theme.scss
CHANGED
|
@@ -5,13 +5,9 @@
|
|
|
5
5
|
@mixin kendo-badge--theme() {
|
|
6
6
|
|
|
7
7
|
.k-badge {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
color: var( --INTERNAL--kendo-badge-text, initial );
|
|
13
|
-
background-color: var( --INTERNAL--kendo-badge-bg, initial );
|
|
14
|
-
border-color: var( --INTERNAL--kendo-badge-border, initial );
|
|
8
|
+
color: var( --kendo-badge-text, #{$kendo-badge-text} );
|
|
9
|
+
background-color: var( --kendo-badge-bg, #{$kendo-badge-bg} );
|
|
10
|
+
border-color: var( --kendo-badge-border, #{$kendo-badge-border} );
|
|
15
11
|
}
|
|
16
12
|
|
|
17
13
|
.k-badge-outline {
|
|
@@ -5,29 +5,21 @@
|
|
|
5
5
|
@mixin kendo-bottom-navigation--theme() {
|
|
6
6
|
|
|
7
7
|
.k-bottom-nav {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
border-color: var( --INTERNAL--kendo-bottom-nav-border, initial );
|
|
13
|
-
color: var( --INTERNAL--kendo-bottom-nav-text, inherit );
|
|
14
|
-
background-color: var( --INTERNAL--kendo-bottom-nav-bg, initial );
|
|
8
|
+
color: var( --kendo-bottom-nav-text, inherit );
|
|
9
|
+
background-color: var( --kendo-bottom-nav-bg, initial );
|
|
10
|
+
border-color: var( --kendo-bottom-nav-border, initial );
|
|
15
11
|
}
|
|
16
12
|
|
|
17
13
|
.k-bottom-nav-item {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
border-color: var( --INTERNAL--kendo-bottom-nav-item-border, initial );
|
|
23
|
-
color: var( --INTERNAL--kendo-bottom-nav-item-text, inherit );
|
|
24
|
-
background-color: var( --INTERNAL--kendo-bottom-nav-item-bg, initial );
|
|
14
|
+
color: var( --kendo-bottom-nav-item-text, inherit );
|
|
15
|
+
background-color: var( --kendo-bottom-nav-item-bg, initial );
|
|
16
|
+
border-color: var( --kendo-bottom-nav-item-border, initial );
|
|
25
17
|
|
|
26
18
|
&:focus,
|
|
27
19
|
&.k-focus {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
20
|
+
color: var( --kendo-bottom-nav-item-focus-text, inherit );
|
|
21
|
+
background-color: var( --kendo-bottom-nav-item-focus-bg, initial );
|
|
22
|
+
border-color: var( --kendo-bottom-nav-item-focus-border, initial );
|
|
31
23
|
}
|
|
32
24
|
|
|
33
25
|
&:focus::after,
|
|
@@ -36,16 +28,16 @@
|
|
|
36
28
|
}
|
|
37
29
|
|
|
38
30
|
&.k-selected {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
31
|
+
color: var( --kendo-bottom-nav-item-selected-text, inherit );
|
|
32
|
+
background-color: var( --kendo-bottom-nav-item-selected-bg, initial );
|
|
33
|
+
border-color: var( --kendo-bottom-nav-item-selected-border, initial );
|
|
42
34
|
}
|
|
43
35
|
|
|
44
36
|
&:disabled,
|
|
45
37
|
&.k-disabled{
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
38
|
+
color: var( --kendo-bottom-nav-item-disabled-text, inherit );
|
|
39
|
+
background-color: var( --kendo-bottom-nav-item-disabled-bg, initial );
|
|
40
|
+
border-color: var( --kendo-bottom-nav-item-disabled-border, initial );
|
|
49
41
|
}
|
|
50
42
|
}
|
|
51
43
|
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
box-sizing: border-box;
|
|
16
16
|
outline: 0;
|
|
17
17
|
font-family: var( --kendo-breadcrumb-font-family, #{$kendo-breadcrumb-font-family} );
|
|
18
|
-
font-size: var( --
|
|
19
|
-
line-height: var( --
|
|
18
|
+
font-size: var( --kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
|
|
19
|
+
line-height: var( --kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
|
|
20
20
|
display: flex;
|
|
21
21
|
flex-direction: row;
|
|
22
22
|
-webkit-touch-callout: none;
|
|
@@ -68,8 +68,8 @@
|
|
|
68
68
|
.k-breadcrumb-link,
|
|
69
69
|
.k-breadcrumb-root-link {
|
|
70
70
|
@include border-radius( var( --kendo-breadcrumb-border-radius, #{$kendo-breadcrumb-link-border-radius} ) );
|
|
71
|
-
padding-inline: var( --
|
|
72
|
-
padding-block: var( --
|
|
71
|
+
padding-inline: var( --kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
|
|
72
|
+
padding-block: var( --kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
|
|
73
73
|
color: var( --kendo-breadcrumb-link-initial-text, #{$kendo-breadcrumb-link-initial-text} );
|
|
74
74
|
text-decoration: none;
|
|
75
75
|
white-space: nowrap;
|
|
@@ -99,8 +99,8 @@
|
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
.k-breadcrumb-icon-link {
|
|
102
|
-
padding-inline: var( --
|
|
103
|
-
padding-block: var( --
|
|
102
|
+
padding-inline: var( --kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
|
|
103
|
+
padding-block: var( --kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
|
|
@@ -132,20 +132,20 @@
|
|
|
132
132
|
|
|
133
133
|
// Breadcrumb sizes
|
|
134
134
|
.k-breadcrumb-#{$size} {
|
|
135
|
-
--
|
|
136
|
-
--
|
|
135
|
+
--kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} );
|
|
136
|
+
--kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} );
|
|
137
137
|
|
|
138
138
|
// Breadcrumb links
|
|
139
139
|
.k-breadcrumb-link,
|
|
140
140
|
.k-breadcrumb-root-link {
|
|
141
|
-
--
|
|
142
|
-
--
|
|
141
|
+
--kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} );
|
|
142
|
+
--kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} );
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
// Breadcrumb icon links
|
|
146
146
|
.k-breadcrumb-icon-link {
|
|
147
|
-
--
|
|
148
|
-
--
|
|
147
|
+
--kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} );
|
|
148
|
+
--kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} );
|
|
149
149
|
}
|
|
150
150
|
}
|
|
151
151
|
}
|
package/scss/button/_layout.scss
CHANGED
|
@@ -7,15 +7,15 @@
|
|
|
7
7
|
|
|
8
8
|
// Button
|
|
9
9
|
.k-button {
|
|
10
|
-
padding-inline: var( --
|
|
11
|
-
padding-block: var( --
|
|
10
|
+
padding-inline: var( --kendo-button-padding-x, 0 );
|
|
11
|
+
padding-block: var( --kendo-button-padding-y, 0 );
|
|
12
12
|
border-width: var( --kendo-button-border-width, #{$kendo-button-border-width} );
|
|
13
13
|
border-style: solid;
|
|
14
14
|
box-sizing: border-box;
|
|
15
15
|
font-family: var( --kendo-button-font-family, #{$kendo-button-font-family} );
|
|
16
|
-
font-size: var( --
|
|
16
|
+
font-size: var( --kendo-button-font-size, 1rem );
|
|
17
17
|
font-weight: var( --kendo-button-font-weight, #{$kendo-button-font-weight} );
|
|
18
|
-
line-height: var( --
|
|
18
|
+
line-height: var( --kendo-button-line-height, normal );
|
|
19
19
|
text-align: center;
|
|
20
20
|
white-space: nowrap;
|
|
21
21
|
text-decoration: none;
|
|
@@ -81,15 +81,15 @@
|
|
|
81
81
|
$_icon-button-padding: calc( #{$_padding-x} / 2 );
|
|
82
82
|
|
|
83
83
|
.k-button-#{$size} {
|
|
84
|
-
--
|
|
85
|
-
--
|
|
86
|
-
--
|
|
87
|
-
--
|
|
84
|
+
--kendo-button-padding-x: var( --kendo-button-#{$size}-padding-x, #{$_padding-x} );
|
|
85
|
+
--kendo-button-padding-y: var( --kendo-button-#{$size}-padding-y, #{$_padding-y} );
|
|
86
|
+
--kendo-button-font-size: var( --kendo-button-#{$size}-font-size, #{$_font-size} );
|
|
87
|
+
--kendo-button-line-height: var( --kendo-button-#{$size}-line-height, #{$_line-height} );
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.k-icon-button.k-button-#{$size} {
|
|
91
|
-
--
|
|
92
|
-
--
|
|
91
|
+
--kendo-button-padding-x: var( --kendo-icon-button-#{$size}-padding-y, #{$_padding-y} );
|
|
92
|
+
--kendo-button-padding-y: var( --kendo-icon-button-#{$size}-padding-y, #{$_padding-y} );
|
|
93
93
|
|
|
94
94
|
.k-button-icon {
|
|
95
95
|
min-width: calc( #{$_font-size} * #{$_line-height} );
|
|
@@ -257,10 +257,6 @@
|
|
|
257
257
|
}
|
|
258
258
|
}
|
|
259
259
|
}
|
|
260
|
-
|
|
261
|
-
&.k-disabled {
|
|
262
|
-
color: color-mix(in srgb, k-color(on-app-surface) 46%, transparent);
|
|
263
|
-
}
|
|
264
260
|
}
|
|
265
261
|
|
|
266
262
|
|
package/scss/button/_theme.scss
CHANGED
|
@@ -4,38 +4,32 @@
|
|
|
4
4
|
|
|
5
5
|
@mixin kendo-button--theme() {
|
|
6
6
|
.k-button {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
--INTERNAL--kendo-button-gradient: var( --kendo-button-gradient );
|
|
11
|
-
--INTERNAL--kendo-button-shadow: var( --kendo-button-shadow );
|
|
12
|
-
|
|
13
|
-
border-color: var( --INTERNAL--kendo-button-border, initial );
|
|
14
|
-
color: var( --INTERNAL--kendo-button-text, inherit );
|
|
15
|
-
background-color: var( --INTERNAL--kendo-button-bg, initial );
|
|
7
|
+
color: var( --kendo-button-text, inherit );
|
|
8
|
+
background-color: var( --kendo-button-bg, initial );
|
|
9
|
+
border-color: var( --kendo-button-border, initial );
|
|
16
10
|
background-image: linear-gradient(
|
|
17
|
-
var( --
|
|
11
|
+
var( --kendo-button-gradient, transparent, transparent )
|
|
18
12
|
);
|
|
19
|
-
box-shadow: var( --
|
|
13
|
+
box-shadow: var( --kendo-button-shadow, none );
|
|
20
14
|
|
|
21
15
|
&:hover,
|
|
22
16
|
&.k-hover {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
17
|
+
color: var( --kendo-button-hover-text );
|
|
18
|
+
background-color: var( --kendo-button-hover-bg );
|
|
19
|
+
border-color: var( --kendo-button-hover-border );
|
|
26
20
|
}
|
|
27
21
|
|
|
28
22
|
&:focus,
|
|
29
23
|
&.k-focus {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
24
|
+
color: var( --kendo-button-focus-text );
|
|
25
|
+
background-color: var( --kendo-button-focus-bg );
|
|
26
|
+
border-color: var( --kendo-button-focus-border );
|
|
33
27
|
|
|
34
28
|
&:hover,
|
|
35
29
|
&.k-hover {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
30
|
+
color: var( --kendo-button-focus-hover-text );
|
|
31
|
+
background-color: var( --kendo-button-focus-hover-bg );
|
|
32
|
+
border-color: var( --kendo-button-focus-hover-border );
|
|
39
33
|
}
|
|
40
34
|
}
|
|
41
35
|
|
|
@@ -46,28 +40,28 @@
|
|
|
46
40
|
|
|
47
41
|
&:active,
|
|
48
42
|
&.k-active {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
43
|
+
color: var( --kendo-button-active-text );
|
|
44
|
+
background-color: var( --kendo-button-active-bg );
|
|
45
|
+
border-color: var( --kendo-button-active-border );
|
|
52
46
|
|
|
53
47
|
&:hover,
|
|
54
48
|
&.k-hover {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
49
|
+
color: var( --kendo-button-active-hover-text );
|
|
50
|
+
background-color: var( --kendo-button-active-hover-bg );
|
|
51
|
+
border-color: var( --kendo-button-active-hover-border );
|
|
58
52
|
}
|
|
59
53
|
}
|
|
60
54
|
|
|
61
55
|
&.k-selected {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
56
|
+
color: var( --kendo-button-selected-text );
|
|
57
|
+
background-color: var( --kendo-button-selected-bg );
|
|
58
|
+
border-color: var( --kendo-button-selected-border );
|
|
65
59
|
|
|
66
60
|
&:hover,
|
|
67
61
|
&.k-hover {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
62
|
+
color: var( --kendo-button-selected-hover-text );
|
|
63
|
+
background-color: var( --kendo-button-selected-hover-bg );
|
|
64
|
+
border-color: var( --kendo-button-selected-hover-border );
|
|
71
65
|
}
|
|
72
66
|
}
|
|
73
67
|
}
|
|
@@ -76,9 +70,9 @@
|
|
|
76
70
|
.k-button.k-disabled,
|
|
77
71
|
.k-disabled .k-button,
|
|
78
72
|
:disabled .k-button {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
73
|
+
color: var( --kendo-button-disabled-text );
|
|
74
|
+
background-color: var( --kendo-button-disabled-bg );
|
|
75
|
+
border-color: var( --kendo-button-disabled-border );
|
|
82
76
|
}
|
|
83
77
|
|
|
84
78
|
@each $fill-mode, $theme-colors in $kendo-button-theme-colors {
|
|
@@ -159,4 +153,8 @@
|
|
|
159
153
|
background-color: inherit;
|
|
160
154
|
}
|
|
161
155
|
|
|
156
|
+
.k-button-flat-base.k-disabled {
|
|
157
|
+
color: color-mix(in srgb, k-color(on-app-surface) 46%, transparent);
|
|
158
|
+
}
|
|
159
|
+
|
|
162
160
|
}
|