@progress/kendo-theme-fluent 7.2.2-dev.0 → 7.3.0-dev.1

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.
@@ -1,135 +1,136 @@
1
1
  @use "sass:map";
2
2
  @use "../core/" as *;
3
3
 
4
- /// Background color of the drawer.
4
+ /// The background color of the Drawer.
5
5
  /// @group drawer
6
6
  $kendo-drawer-bg: var( --kendo-component-bg, initial ) !default;
7
- /// Text color of the drawer.
7
+ /// The text color of the Drawer.
8
8
  /// @group drawer
9
9
  $kendo-drawer-text: var( --kendo-component-text, initial ) !default;
10
- /// Border color of the drawer.
10
+ /// The border color of the Drawer.
11
11
  /// @group drawer
12
12
  $kendo-drawer-border: var( --kendo-component-border, initial ) !default;
13
- /// Border width of the drawer.
13
+ /// The border width of the Drawer.
14
14
  /// @group drawer
15
15
  $kendo-drawer-border-width: 1px !default;
16
- /// Font family of the drawer.
16
+ /// The font family of the Drawer.
17
17
  /// @group drawer
18
18
  $kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
19
- /// Font size of the drawer.
19
+ /// The font size of the Drawer.
20
20
  /// @group drawer
21
21
  $kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
22
- /// Line height of the drawer.
22
+ /// The line height of the Drawer.
23
23
  /// @group drawer
24
24
  $kendo-drawer-line-height: var( --kendo-line-height, inherit ) !default;
25
- /// Horizontal padding of the drawer content.
25
+
26
+ /// The horizontal padding of the Drawer content.
26
27
  /// @group drawer
27
28
  $kendo-drawer-content-padding-x: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
28
- /// Vertical padding of the drawer content.
29
+ /// The vertical padding of the Drawer content.
29
30
  /// @group drawer
30
31
  $kendo-drawer-content-padding-y: var( --kendo-padding-y, #{$kendo-padding-md-y} ) !default;
31
32
 
32
- /// Scrollbar width of the drawer.
33
+ /// The width of the Drawer scrollbar.
33
34
  /// @group drawer
34
35
  $kendo-drawer-scrollbar-width: 7px !default;
35
- /// Scrollbar color of the drawer.
36
+ /// The color of the Drawer scrollbar.
36
37
  /// @group drawer
37
38
  $kendo-drawer-scrollbar-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
38
- /// Scrollbar background of the drawer.
39
+ /// The background of the Drawer scrollbar.
39
40
  /// @group drawer
40
41
  $kendo-drawer-scrollbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 )) !default;
41
- /// Scrollbar border radius of the drawer.
42
+ /// The border radius of the Drawer scrollbar.
42
43
  /// @group drawer
43
44
  $kendo-drawer-scrollbar-radius: 20px !default;
44
- /// Scrollbar hover color of the drawer.
45
+ /// The hover color of the Drawer scrollbar.
45
46
  /// @group drawer
46
47
  $kendo-drawer-scrollbar-hover-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), k-get-theme-color-var( neutral-110 )) !default;
47
48
 
48
- /// Horizontal padding of the drawer item.
49
+ /// The horizontal padding of the Drawer item.
49
50
  /// @group drawer
50
51
  $kendo-drawer-item-padding-x: map.get( $kendo-spacing, 4 ) !default;
51
- /// Vertical padding of the drawer item.
52
+ /// The vertical padding of the Drawer item.
52
53
  /// @group drawer
53
54
  $kendo-drawer-item-padding-y: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
54
- /// Font size of the drawer item.
55
+ /// The font size of the Drawer item.
55
56
  /// @group drawer
56
57
  $kendo-drawer-item-font-size: $kendo-drawer-font-size !default;
57
- /// Line height of the drawer item.
58
+ /// The line height of the Drawer item.
58
59
  /// @group drawer
59
60
  $kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;
60
61
 
61
- /// Horizontal padding of the drawer item in each level.
62
+ /// The horizontal padding of the Drawer item in each level.
62
63
  /// @group drawer
63
64
  $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
64
- /// Count of the drawer item levels.
65
+ /// The count of the Drawer item levels.
65
66
  /// @group drawer
66
67
  $kendo-drawer-item-level-count: 5 !default;
67
68
 
68
- /// Horizontal padding of the drawer icon.
69
+ /// The horizontal padding of the Drawer icon.
69
70
  /// @group drawer
70
71
  $kendo-drawer-icon-padding-x: 0 !default;
71
- /// Vertical padding of the drawer icon.
72
+ /// The vertical padding of the Drawer icon.
72
73
  /// @group drawer
73
74
  $kendo-drawer-icon-padding-y: map.get( $kendo-spacing, 1 ) !default;
74
75
 
75
- /// Initial width of the mini drawer.
76
+ /// The initial width of the mini Drawer.
76
77
  /// @group drawer
77
78
  $kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + var( --kendo-icon-size, 1rem ) ) !default;
78
79
 
79
- /// The border width of the drawer item ripple
80
+ /// The border width of the Drawer item ripple.
80
81
  /// @group drawer
81
82
  $kendo-drawer-item-ripple-border-width: map.get( $kendo-spacing, 0.5 ) !default;
82
- /// The border color of the drawer item ripple
83
+ /// The border color of the Drawer item ripple.
83
84
  /// @group drawer
84
85
  $kendo-drawer-item-ripple-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
85
- /// Background color of the drawer item.
86
+ /// The background color of the Drawer item.
86
87
  /// @group drawer
87
88
  $kendo-drawer-item-bg: $kendo-drawer-bg !default;
88
- /// Text color of the drawer item.
89
+ /// The text color of the Drawer item.
89
90
  /// @group drawer
90
91
  $kendo-drawer-item-text: $kendo-drawer-text !default;
91
- /// Text color of the drawer item icon.
92
+ /// The text color of the Drawer item icon.
92
93
  /// @group drawer
93
94
  $kendo-drawer-item-icon-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
94
95
 
95
- /// Background color of the hovered drawer item.
96
+ /// The background color of the hovered Drawer item.
96
97
  /// @group drawer
97
98
  $kendo-drawer-item-hover-bg: $kendo-drawer-item-bg !default;
98
- /// Text color of the hovered drawer item.
99
+ /// The text color of the hovered Drawer item.
99
100
  /// @group drawer
100
101
  $kendo-drawer-item-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
101
- /// Text color of the hovered drawer item icon.
102
+ /// The text color of the hovered Drawer item icon.
102
103
  /// @group drawer
103
104
  $kendo-drawer-item-hover-icon-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
104
105
 
105
- /// Background color of the focused drawer item.
106
+ /// The background color of the focused Drawer item.
106
107
  /// @group drawer
107
108
  $kendo-drawer-item-focus-bg: $kendo-drawer-item-bg !default;
108
- /// Text color of the focused drawer item.
109
+ /// The text color of the focused Drawer item.
109
110
  /// @group drawer
110
111
  $kendo-drawer-item-focus-text: $kendo-drawer-item-text !default;
111
- /// Box shadow of the focused drawer item.
112
+ /// The box shadow of the focused Drawer item.
112
113
  /// @group drawer
113
114
  $kendo-drawer-item-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
114
- /// Text color of the focused drawer item icon.
115
+ /// The text color of the focused Drawer item icon.
115
116
  /// @group drawer
116
117
  $kendo-drawer-item-focus-icon-text: $kendo-drawer-item-icon-text !default;
117
118
 
118
- /// Font weight of the selected drawer item.
119
+ /// The font weight of the selected Drawer item.
119
120
  /// @group drawer
120
121
  $kendo-drawer-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
121
- /// Background color of the selected drawer item.
122
+ /// The background color of the selected Drawer item.
122
123
  /// @group drawer
123
124
  $kendo-drawer-item-selected-bg: var( --kendo-selected-bg, initial ) !default;
124
- /// Text color of the selected drawer item.
125
+ /// The text color of the selected Drawer item.
125
126
  /// @group drawer
126
127
  $kendo-drawer-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
127
- /// Text color of the selected drawer item icon.
128
+ /// The text color of the selected Drawer item icon.
128
129
  /// @group drawer
129
130
  $kendo-drawer-item-selected-icon-text: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
130
- /// Background color of the selected and hovered drawer item.
131
+ /// The background color of the selected and hovered Drawer item.
131
132
  /// @group drawer
132
133
  $kendo-drawer-item-selected-hover-bg: var( --kendo-selected-hover-bg, inherit ) !default;
133
- /// Text color of the selected and hovered drawer item.
134
+ /// The text color of the selected and hovered Drawer item.
134
135
  /// @group drawer
135
136
  $kendo-drawer-item-selected-hover-text: var( --kendo-selected-hover-text, inherit ) !default;
@@ -18,7 +18,7 @@
18
18
  box-sizing: border-box;
19
19
  }
20
20
 
21
- > .k-label {
21
+ > .k-floating-label {
22
22
  max-width: var( --kendo-floating-label-max-width, #{$kendo-floating-label-max-width} );
23
23
  font-size: var( --kendo-floating-label-font-size, #{$kendo-floating-label-font-size} );
24
24
  font-weight: var( --kendo-floating-label-font-weight, #{$kendo-floating-label-font-weight} );
@@ -34,13 +34,9 @@
34
34
  transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), left var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
35
35
  }
36
36
 
37
- > .k-widget {
38
- flex: 1 1 auto;
39
- width: auto;
40
- }
41
37
 
42
38
  &.k-empty {
43
- > .k-label {
39
+ > .k-floating-label {
44
40
  top: var( --kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y} );
45
41
  left: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
46
42
  transform: scale( var( --kendo-floating-label-scale, #{$kendo-floating-label-scale} ) );
@@ -48,9 +44,9 @@
48
44
  }
49
45
  }
50
46
 
51
- > .k-label,
52
- &:focus-within > .k-label,
53
- &.k-focus > .k-label {
47
+ > .k-floating-label,
48
+ &:focus-within > .k-floating-label,
49
+ &.k-focus > .k-floating-label {
54
50
  top: var( --kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y} );
55
51
  left: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
56
52
  transform: scale( var( --kendo-floating-label-focus-scale, #{$kendo-floating-label-focus-scale} ) );
@@ -65,21 +61,21 @@
65
61
  .k-rtl &,
66
62
  &[dir="rtl"] {
67
63
 
68
- > .k-label {
64
+ > .k-floating-label {
69
65
  transform-origin: right center;
70
66
  transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), right var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
71
67
  }
72
68
 
73
69
  &.k-empty {
74
- > .k-label {
70
+ > .k-floating-label {
75
71
  left: auto;
76
72
  right: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
77
73
  }
78
74
  }
79
75
 
80
- > .k-label,
81
- &:focus-within > .k-label,
82
- &.k-focus > .k-label {
76
+ > .k-floating-label,
77
+ &:focus-within > .k-floating-label,
78
+ &.k-focus > .k-floating-label {
83
79
  left: auto;
84
80
  right: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
85
81
  }
@@ -6,23 +6,23 @@
6
6
  // Floating label
7
7
  .k-floating-label-container {
8
8
 
9
- > .k-label {
9
+ > .k-floating-label {
10
10
  @include fill(
11
11
  $color: var( --kendo-floating-label-text, #{$kendo-floating-label-text} ),
12
12
  $bg: var( --kendo-floating-label-bg, #{$kendo-floating-label-bg} )
13
13
  );
14
14
  }
15
15
 
16
- &.k-focus > .k-label {
16
+ &.k-focus > .k-floating-label {
17
17
  @include fill(
18
18
  $color: var( --kendo-floating-label-focus-text, #{$kendo-floating-label-focus-text} ),
19
19
  $bg: var( --kendo-floating-label-focus-bg, #{$kendo-floating-label-focus-bg} )
20
20
  );
21
21
  }
22
22
 
23
- &.k-invalid > .k-label,
24
- &.ng-invalid.ng-touched > .k-label,
25
- &.ng-invalid.ng-dirty > .k-label {
23
+ &.k-invalid > .k-floating-label,
24
+ &.ng-invalid.ng-touched > .k-floating-label,
25
+ &.ng-invalid.ng-dirty > .k-floating-label {
26
26
  @include fill ( $color: var( --kendo-floating-label-invalid-text, #{$kendo-floating-label-invalid-text} ) );
27
27
  }
28
28
 
@@ -37,10 +37,6 @@
37
37
  }
38
38
  }
39
39
 
40
- .k-input-label {
41
- margin-inline-end: var( --kendo-horizontal-form-label-margin-x, #{$kendo-horizontal-form-label-margin-x} );
42
- z-index: 1;
43
- }
44
40
 
45
41
 
46
42
  // Vertical Form
@@ -27,7 +27,6 @@
27
27
 
28
28
 
29
29
  // Root
30
- > .k-item,
31
30
  > .k-panelbar-header {
32
31
  // TODO
33
32
  border-width: 0;
@@ -66,7 +65,6 @@
66
65
  }
67
66
  }
68
67
 
69
- > .k-item + .k-item,
70
68
  > .k-panelbar-header + .k-panelbar-header {
71
69
  border-top-width: var( --kendo-panelbar-item-border-width, #{$kendo-panelbar-item-border-width} );
72
70
  }
@@ -79,7 +77,6 @@
79
77
 
80
78
 
81
79
  // Sub
82
- .k-group,
83
80
  .k-panelbar-group {
84
81
  margin: 0;
85
82
  padding: 0;
@@ -90,7 +87,6 @@
90
87
  list-style: none;
91
88
  }
92
89
 
93
- .k-group > .k-item,
94
90
  .k-panelbar-group > .k-panelbar-item {
95
91
  display: block;
96
92
 
@@ -11,7 +11,6 @@
11
11
 
12
12
 
13
13
  // Root
14
- > .k-item,
15
14
  > .k-panelbar-header {
16
15
 
17
16
  &.k-expanded.k-level-0 > .k-link {
@@ -146,7 +145,6 @@
146
145
 
147
146
  // Sub
148
147
 
149
- .k-group > .k-item,
150
148
  .k-panelbar-group > .k-panelbar-item {
151
149
 
152
150
  > .k-link {
@@ -2,234 +2,238 @@
2
2
  @use "../core/" as *;
3
3
  @use "../list/variables" as *;
4
4
 
5
- /// Horizontal padding of the panelbar.
5
+ /// The horizontal padding of the PanelBar.
6
6
  /// @group panelbar
7
7
  $kendo-panelbar-padding-x: 0px !default;
8
- /// Vertical padding of the panelbar.
8
+ /// The vertical padding of the PanelBar.
9
9
  /// @group panelbar
10
10
  $kendo-panelbar-padding-y: 0px !default;
11
- /// Font family of the panelbar.
11
+ /// The font family of the PanelBar.
12
12
  /// @group panelbar
13
13
  $kendo-panelbar-font-family: var( --kendo-font-family, inherit ) !default;
14
- /// Font size of the panelbar.
14
+ /// The font size of the PanelBar.
15
15
  /// @group panelbar
16
16
  $kendo-panelbar-font-size: var( --kendo-font-size, inherit ) !default;
17
- /// Line height of the panelbar.
17
+ /// The line height of the PanelBar.
18
18
  /// @group panelbar
19
19
  $kendo-panelbar-line-height: var( --kendo-line-height, inherit ) !default;
20
- /// Width of the border around the panelbar.
20
+ /// The width of the border around the PanelBar.
21
21
  /// @group panelbar
22
22
  $kendo-panelbar-border-width: 1px !default;
23
- /// Border style around the the panelbar.
23
+ /// The border style around the the PanelBar.
24
24
  /// @group panelbar
25
25
  $kendo-panelbar-border-style: solid !default;
26
26
 
27
- /// Width of the border around the panelbar items.
27
+ /// The width of the border around the PanelBar items.
28
28
  /// @group panelbar
29
29
  $kendo-panelbar-item-border-width: 0 !default;
30
- /// Style of the border around the panelbar items.
30
+ /// The style of the border around the PanelBar items.
31
31
  /// @group panelbar
32
32
  $kendo-panelbar-item-border-style: solid !default;
33
33
 
34
- /// Spacing around the icon of the panelbar items.
34
+ /// The spacing around the PanelBar items icon.
35
35
  /// @group panelbar
36
36
  $kendo-panelbar-icon-spacing: map.get( $kendo-spacing, 2 ) !default;
37
37
 
38
- /// Horizontal padding of the panelbar header.
38
+ /// The horizontal start padding of the PanelBar header.
39
39
  /// @group panelbar
40
40
  $kendo-panelbar-header-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
41
+ /// The horizontal end padding of the PanelBar header.
42
+ /// @group panelbar
41
43
  $kendo-panelbar-header-padding-x-end: map.get( $kendo-spacing, 2) !default;
42
- /// Vertical padding of the panelbar header.
44
+ /// The vertical padding of the PanelBar header.
43
45
  /// @group panelbar
44
46
  $kendo-panelbar-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
45
47
 
46
- /// Horizontal padding of the panelbar items.
48
+ /// The horizontal padding of the PanelBar items.
47
49
  /// @group panelbar
48
50
  $kendo-panelbar-item-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
51
+ /// The horizontal end padding of the PanelBar items.
52
+ /// @group panelbar
49
53
  $kendo-panelbar-item-padding-x-end: map.get( $kendo-spacing, 2) !default;
50
- /// Vertical padding of the panelbar items.
54
+ /// The vertical padding of the PanelBar items.
51
55
  /// @group panelbar
52
56
  $kendo-panelbar-item-padding-y: map.get( $kendo-spacing, 3 ) !default;
53
57
 
54
- /// Maximum nesting of the panelbar items.
58
+ /// The maximum nesting of the PanelBar items.
55
59
  /// @group panelbar
56
60
  $kendo-panelbar-item-level-count: 4 !default;
57
61
 
58
- /// Background color of the panelbar.
62
+ /// The background color of the PanelBar.
59
63
  /// @group panelbar
60
64
  $kendo-panelbar-bg: var( --kendo-component-bg, initial ) !default;
61
- /// Text color of the panelbar.
65
+ /// The text color of the PanelBar.
62
66
  /// @group panelbar
63
67
  $kendo-panelbar-text: var( --kendo-component-text, initial ) !default;
64
- /// Border color of the panelbar.
68
+ /// The border color of the PanelBar.
65
69
  /// @group panelbar
66
70
  $kendo-panelbar-border: var( --kendo-component-border, initial ) !default;
67
71
 
68
- /// Background color of the panelbar header.
72
+ /// The background color of the PanelBar header.
69
73
  /// @group panelbar
70
74
  $kendo-panelbar-header-bg: var( --kendo-panelbar-bg, #{$kendo-panelbar-bg} ) !default;
71
- /// Text color of the panelbar header.
75
+ /// The text color of the PanelBar header.
72
76
  /// @group panelbar
73
77
  $kendo-panelbar-header-text: var( --kendo-panelbar-text, #{$kendo-panelbar-text} ) !default;
74
- /// Border color of the panelbar header.
78
+ /// The border color of the PanelBar header.
75
79
  /// @group panelbar
76
80
  $kendo-panelbar-header-border: inherit !default;
77
81
 
78
- /// Background color of the panelbar header when hovered.
82
+ /// The background color of the hovered PanelBar header.
79
83
  /// @group panelbar
80
84
  $kendo-panelbar-header-hover-bg: var( --kendo-hover-bg, inherit ) !default;
81
- /// Text color of the panelbar header when hovered.
85
+ /// The text color of the hovered PanelBar header.
82
86
  /// @group panelbar
83
87
  $kendo-panelbar-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
84
- /// Border color of the panelbar header when hovered.
88
+ /// The border color of the hovered PanelBar header.
85
89
  /// @group panelbar
86
90
  $kendo-panelbar-header-hover-border: inherit !default;
87
91
 
88
- /// Background color of the panelbar header when focused.
92
+ /// The background color of the focused PanelBar header.
89
93
  /// @group panelbar
90
94
  $kendo-panelbar-header-focus-bg: inherit !default;
91
- /// Text color of the panelbar header when focused.
95
+ /// The text color of the focused PanelBar header.
92
96
  /// @group panelbar
93
97
  $kendo-panelbar-header-focus-text: inherit !default;
94
- /// Border color of the panelbar header when focused.
98
+ /// The border color of the focused PanelBar header.
95
99
  /// @group panelbar
96
100
  $kendo-panelbar-header-focus-border: inherit !default;
97
- /// Shadow of the panelbar header when focused.
101
+ /// The shadow of the focused PanelBar header.
98
102
  /// @group panelbar
99
103
  $kendo-panelbar-header-focus-shadow: $kendo-list-item-focus-shadow !default;
100
104
 
101
- /// Background color of the panelbar header when focused and hovered.
105
+ /// The background color of the focused and hovered PanelBar header.
102
106
  /// @group panelbar
103
107
  $kendo-panelbar-header-hover-focus-bg: $kendo-panelbar-header-hover-bg !default;
104
- /// Text color of the panelbar header when focused and hovered.
108
+ /// The text color of the focused and hovered PanelBar header.
105
109
  /// @group panelbar
106
110
  $kendo-panelbar-header-hover-focus-text: $kendo-panelbar-header-hover-text !default;
107
- /// Border color of the panelbar header when focused and hovered.
111
+ /// The border color of the focused and hovered PanelBar header.
108
112
  /// @group panelbar
109
113
  $kendo-panelbar-header-hover-focus-border: null !default;
110
114
 
111
- /// Background color of the panelbar header when selected.
115
+ /// The background color of the selected PanelBar header.
112
116
  /// @group panelbar
113
117
  $kendo-panelbar-header-selected-bg: var( --kendo-selected-bg, inherit ) !default;
114
- /// Text color of the panelbar header when selected.
118
+ /// The text color of the selected PanelBar header.
115
119
  /// @group panelbar
116
120
  $kendo-panelbar-header-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
117
- /// Border color of the panelbar header when selected.
121
+ /// The border color of the selected PanelBar header.
118
122
  /// @group panelbar
119
123
  $kendo-panelbar-header-selected-border: inherit !default;
120
- /// Color of the marker of the panelbar header when selected.
124
+ /// The color of the marker of the selected PanelBar header.
121
125
  /// @group panelbar
122
126
  $kendo-panelbar-selected-marker: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
123
127
 
124
- /// Background color of the panelbar header when selected and hovered.
128
+ /// The background color of the selected and hovered PanelBar header.
125
129
  /// @group panelbar
126
130
  $kendo-panelbar-header-selected-hover-bg: $kendo-panelbar-header-selected-bg !default;
127
- /// Text color of the panelbar header when selected and hovered.
131
+ /// The text color of the selected and hovered PanelBar header.
128
132
  /// @group panelbar
129
133
  $kendo-panelbar-header-selected-hover-text: $kendo-panelbar-header-hover-text !default;
130
- /// Border color of the panelbar header when selected and hovered.
134
+ /// The border color of the selected and hovered PanelBar header.
131
135
  /// @group panelbar
132
136
  $kendo-panelbar-header-selected-hover-border: inherit !default;
133
137
 
134
- /// Background color of the panelbar header when selected and focused.
138
+ /// The background color of the selected and focused PanelBar header.
135
139
  /// @group panelbar
136
140
  $kendo-panelbar-header-selected-focus-bg: $kendo-panelbar-header-selected-bg !default;
137
- /// Text color of the panelbar header when selected and focused.
141
+ /// The text color of the selected and focused PanelBar header.
138
142
  /// @group panelbar
139
143
  $kendo-panelbar-header-selected-focus-text: $kendo-panelbar-header-selected-text !default;
140
- /// Border color of the panelbar header when selected and focused.
144
+ /// The border color of the selected and focused PanelBar header.
141
145
  /// @group panelbar
142
146
  $kendo-panelbar-header-selected-focus-border: inherit !default;
143
147
 
144
- /// Background color of the panelbar header when selected, focused and hovered.
148
+ /// The background color of the selected, hovered and focused PanelBar header.
145
149
  /// @group panelbar
146
150
  $kendo-panelbar-header-selected-hover-focus-bg: $kendo-panelbar-header-selected-hover-bg !default;
147
- /// Text color of the panelbar header when selected, focused and hovered.
151
+ /// The text color of the selected, hovered and focused PanelBar header.
148
152
  /// @group panelbar
149
153
  $kendo-panelbar-header-selected-hover-focus-text: $kendo-panelbar-header-selected-hover-text !default;
150
- /// Border color of the panelbar header when selected, focused and hovered.
154
+ /// The border color of the selected, hovered and focused PanelBar header.
151
155
  /// @group panelbar
152
156
  $kendo-panelbar-header-selected-hover-focus-border: inherit !default;
153
157
 
154
- /// Background color of the panelbar header when expanded.
158
+ /// The background color of the expanded PanelBar header.
155
159
  /// @group panelbar
156
160
  $kendo-panelbar-header-expanded-bg: inherit !default;
157
- /// Text color of the panelbar header when expanded.
161
+ /// The text color of the expanded PanelBar header.
158
162
  /// @group panelbar
159
163
  $kendo-panelbar-header-expanded-text: inherit !default;
160
- /// Border color of the panelbar header when expanded.
164
+ /// The border color of the expanded PanelBar header.
161
165
  /// @group panelbar
162
166
  $kendo-panelbar-header-expanded-border: inherit !default;
163
167
 
164
- /// Background color of the panelbar item when hovered.
168
+ /// The background color of the hovered PanelBar items.
165
169
  /// @group panelbar
166
170
  $kendo-panelbar-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
167
- /// Text color of the panelbar item when hovered.
171
+ /// The text color of the hovered PanelBar items.
168
172
  /// @group panelbar
169
173
  $kendo-panelbar-item-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
170
- /// Border color of the panelbar item when hovered.
174
+ /// The border color of the hovered PanelBar items.
171
175
  /// @group panelbar
172
176
  $kendo-panelbar-item-hover-border: inherit !default;
173
177
 
174
- /// Background color of the panelbar item when focused.
178
+ /// The background color of the focused PanelBar items.
175
179
  /// @group panelbar
176
180
  $kendo-panelbar-item-focus-bg: inherit !default;
177
- /// Text color of the panelbar item when focused.
181
+ /// The text color of the focused PanelBar items.
178
182
  /// @group panelbar
179
183
  $kendo-panelbar-item-focus-text: inherit !default;
180
- /// Border color of the panelbar item when focused.
184
+ /// The border color of the focused PanelBar items.
181
185
  /// @group panelbar
182
186
  $kendo-panelbar-item-focus-border: inherit !default;
183
- /// Box shadow of the panelbar item when focused.
187
+ /// The box shadow of the focused PanelBar items.
184
188
  /// @group panelbar
185
189
  $kendo-panelbar-item-focus-shadow: $kendo-list-item-focus-shadow !default;
186
190
 
187
- /// Background color of the panelbar item when focused and hovered.
191
+ /// The background color of the focused and hovered PanelBar items.
188
192
  /// @group panelbar
189
193
  $kendo-panelbar-item-hover-focus-bg: $kendo-panelbar-item-hover-bg !default;
190
- /// Text color of the panelbar item when focused and hovered.
194
+ /// The text color of the focused and hovered PanelBar items.
191
195
  /// @group panelbar
192
196
  $kendo-panelbar-item-hover-focus-text: $kendo-panelbar-item-hover-text !default;
193
- /// Border color of the panelbar item when focused and hovered.
197
+ /// The border color of the focused and hovered PanelBar items.
194
198
  /// @group panelbar
195
199
  $kendo-panelbar-item-hover-focus-border: inherit !default;
196
200
 
197
- /// Background color of the panelbar item when selected.
201
+ /// The background color of the selected PanelBar items.
198
202
  /// @group panelbar
199
203
  $kendo-panelbar-item-selected-bg: var( --kendo-selected-bg, inherit ) !default;
200
- /// Text color of the panelbar item when selected.
204
+ /// The text color of the selected PanelBar items.
201
205
  /// @group panelbar
202
206
  $kendo-panelbar-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
203
- /// Border color of the panelbar item when selected.
207
+ /// The border color of the selected PanelBar items.
204
208
  /// @group panelbar
205
209
  $kendo-panelbar-item-selected-border: inherit !default;
206
210
 
207
- /// Background color of the panelbar item when selected and hovered.
211
+ /// The background color of the selected and hovered PanelBar items.
208
212
  /// @group panelbar
209
213
  $kendo-panelbar-item-selected-hover-bg: $kendo-panelbar-item-selected-bg !default;
210
- /// Text color of the panelbar item when selected and hovered.
214
+ /// The text color of the selected and hovered PanelBar items.
211
215
  /// @group panelbar
212
216
  $kendo-panelbar-item-selected-hover-text: $kendo-panelbar-item-hover-text !default;
213
- /// Border color of the panelbar item when selected and hovered.
217
+ /// The border color of the selected and hovered PanelBar items.
214
218
  /// @group panelbar
215
219
  $kendo-panelbar-item-selected-hover-border: inherit !default;
216
220
 
217
- /// Background color of the panelbar item when selected and focused.
221
+ /// The background color of the selected and focused PanelBar items.
218
222
  /// @group panelbar
219
223
  $kendo-panelbar-item-selected-focus-bg: $kendo-panelbar-item-selected-bg !default;
220
- /// Text color of the panelbar item when selected and focused.
224
+ /// The text color of the selected and focused PanelBar items.
221
225
  /// @group panelbar
222
226
  $kendo-panelbar-item-selected-focus-text: $kendo-panelbar-item-selected-text !default;
223
- /// Border color of the panelbar item when selected and focused.
227
+ /// The border color of the selected and focused PanelBar items.
224
228
  /// @group panelbar
225
229
  $kendo-panelbar-item-selected-focus-border: inherit !default;
226
230
 
227
- /// Background color of the panelbar item when selected, focused and hovered.
231
+ /// The background color of the selected, hovered and focused PanelBar items.
228
232
  /// @group panelbar
229
233
  $kendo-panelbar-item-selected-hover-focus-bg: $kendo-panelbar-item-selected-hover-bg !default;
230
- /// Text color of the panelbar item when selected, focused and hovered.
234
+ /// The text color of the selected, hovered and focused PanelBar items.
231
235
  /// @group panelbar
232
236
  $kendo-panelbar-item-selected-hover-focus-text: $kendo-panelbar-item-selected-hover-text !default;
233
- /// Border color of the panelbar item when selected, focused and hovered.
237
+ /// The border color of the selected, hovered and focused PanelBar items.
234
238
  /// @group panelbar
235
239
  $kendo-panelbar-item-selected-hover-focus-border: inherit !default;