@progress/kendo-theme-fluent 7.3.0-dev.0 → 8.0.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.
@@ -3,15 +3,20 @@
3
3
 
4
4
  @mixin kendo-drawer--layout() {
5
5
 
6
+ // Container
6
7
  .k-drawer-container {
7
8
  display: flex;
8
9
  flex-flow: row nowrap;
9
10
  align-items: flex-start;
10
11
  }
12
+
11
13
  kendo-drawer.k-drawer,
12
14
  kendo-drawer .k-drawer-wrapper {
13
15
  transition: none;
14
16
  }
17
+
18
+
19
+ // Drawer
15
20
  .k-drawer {
16
21
  height: 100%;
17
22
  max-width: 100%;
@@ -38,37 +43,35 @@
38
43
 
39
44
  // Borders
40
45
  .k-drawer-mini &.k-drawer-start,
41
- .k-drawer-expanded &.k-drawer-start,
42
- .k-drawer-left.k-drawer-mini &,
43
- .k-drawer-left.k-drawer-expanded & {
44
- border-right-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
46
+ .k-drawer-expanded &.k-drawer-start {
47
+ border-inline-end-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
45
48
  }
49
+
46
50
  .k-drawer-mini &.k-drawer-end,
47
- .k-drawer-expanded &.k-drawer-end,
48
- .k-drawer-right.k-drawer-mini &,
49
- .k-drawer-right.k-drawer-expanded & {
50
- border-left-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
51
+ .k-drawer-expanded &.k-drawer-end {
52
+ border-inline-start-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
51
53
  }
52
54
 
53
55
  // Position
54
- &.k-drawer-start,
55
- .k-drawer-left & {
56
- inset-block-start: 0;
56
+ &.k-drawer-start {
57
+ top: 0;
57
58
  inset-inline-start: 0;
58
59
  }
59
- &.k-drawer-end,
60
- .k-drawer-right & {
61
- inset-block-start: 0;
60
+ &.k-drawer-end {
61
+ top: 0;
62
62
  inset-inline-end: 0;
63
63
  }
64
64
  }
65
+
66
+
67
+ // Content
65
68
  .k-drawer-content {
66
69
  flex: 1 1 auto;
67
70
  overflow: auto;
68
71
  }
69
72
 
70
73
 
71
- // Overlay drawer
74
+ // Overlay
72
75
  .k-drawer-overlay {
73
76
  .k-drawer {
74
77
  max-width: 80vw; // limit width
@@ -97,13 +100,9 @@
97
100
  align-self: stretch;
98
101
  }
99
102
 
100
-
101
- // right drawer
102
- .k-drawer.k-drawer-end,
103
- &.k-drawer-right .k-drawer {
104
- order: 1;
103
+ &:has(.k-drawer.k-drawer-end) {
104
+ flex-direction: row-reverse;
105
105
  }
106
-
107
106
  }
108
107
 
109
108
 
@@ -122,8 +121,7 @@
122
121
  border-radius: var( --kendo-drawer-scrollbar-radius, #{$kendo-drawer-scrollbar-radius} );
123
122
  }
124
123
  }
125
- .k-drawer-items,
126
- .k-drawer-items ul {
124
+ .k-drawer-items {
127
125
  margin: 0;
128
126
  padding: 0;
129
127
  list-style: none;
@@ -225,6 +223,9 @@
225
223
  }
226
224
  }
227
225
  }
226
+
227
+
228
+ // Separator
228
229
  .k-drawer-separator {
229
230
  padding: 0;
230
231
  height: 1px;
@@ -233,40 +234,7 @@
233
234
 
234
235
 
235
236
  // Mini mode
236
- .k-drawer-mini {
237
- .k-drawer-wrapper {
238
- width: var( --kendo-drawer-mini-initial-width, #{$kendo-drawer-mini-initial-width} );
239
- }
237
+ .k-drawer-mini .k-drawer-wrapper {
238
+ width: var( --kendo-drawer-mini-initial-width, #{$kendo-drawer-mini-initial-width} );
240
239
  }
241
-
242
-
243
- .k-rtl,
244
- [dir="rtl"] {
245
-
246
- // Borders
247
- &.k-drawer-mini .k-drawer-start,
248
- .k-drawer-mini .k-drawer-start,
249
- .k-drawer-expanded .k-drawer-start,
250
- &.k-drawer-expanded .k-drawer-start {
251
- border-left-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
252
- border-right-width: 0;
253
- }
254
- &.k-drawer-mini .k-drawer-end,
255
- .k-drawer-mini .k-drawer-end,
256
- &.k-drawer-expanded .k-drawer-end
257
- .k-drawer-expanded .k-drawer-end {
258
- border-left-width: 0;
259
- border-right-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
260
- }
261
-
262
- // Order
263
- .k-drawer-left.k-drawer-push .k-drawer {
264
- order: 1;
265
- }
266
- .k-drawer-right.k-drawer-push .k-drawer {
267
- order: 0;
268
- }
269
-
270
- }
271
-
272
240
  }
@@ -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
@@ -60,7 +60,6 @@
60
60
  .k-input-button {
61
61
  color: inherit;
62
62
  background: none;
63
- border-color: transparent;
64
63
  }
65
64
  }
66
65
  }
@@ -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 {