@progress/kendo-theme-core 14.7.0-dev.5 → 14.7.0-dev.7

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.
Files changed (8) hide show
  1. package/dist/meta/sassdoc-data.json +18 -18
  2. package/dist/meta/sassdoc-raw-data.json +9 -9
  3. package/package.json +1 -1
  4. package/scss/components/button/_layout.scss +2 -0
  5. package/scss/components/button/_variables.scss +9 -0
  6. package/scss/components/listbox/_layout.scss +84 -0
  7. package/scss/components/listbox/_theme.scss +38 -0
  8. package/scss/components/listbox/_variables.scss +3 -0
package/dist/meta/sassdoc-data.json CHANGED
@@ -715,8 +715,8 @@
715
715
  {
716
716
  "description": "The theme colors map of the Button.\n",
717
717
  "commentRange": {
718
- "start": 116,
719
- "end": 117
718
+ "start": 121,
719
+ "end": 122
720
720
  },
721
721
  "context": {
722
722
  "type": "variable",
@@ -724,8 +724,8 @@
724
724
  "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\", \"inverse\")",
725
725
  "scope": "default",
726
726
  "line": {
727
- "start": 118,
728
- "end": 118
727
+ "start": 123,
728
+ "end": 123
729
729
  }
730
730
  },
731
731
  "group": [
@@ -740,17 +740,17 @@
740
740
  {
741
741
  "description": "The sizes map of the Button.\n",
742
742
  "commentRange": {
743
- "start": 120,
744
- "end": 121
743
+ "start": 125,
744
+ "end": 126
745
745
  },
746
746
  "context": {
747
747
  "type": "variable",
748
748
  "name": "kendo-button-sizes",
749
- "value": "(\n xs: (\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
749
+ "value": "(\n xs: (\n gap: $kendo-button-xs-gap,\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n gap: $kendo-button-sm-gap,\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n gap: $kendo-button-md-gap,\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n gap: $kendo-button-lg-gap,\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
750
750
  "scope": "default",
751
751
  "line": {
752
- "start": 122,
753
- "end": 147
752
+ "start": 127,
753
+ "end": 156
754
754
  }
755
755
  },
756
756
  "group": [
@@ -11491,8 +11491,8 @@
11491
11491
  {
11492
11492
  "description": "The theme colors map of the Button.\n",
11493
11493
  "commentRange": {
11494
- "start": 116,
11495
- "end": 117
11494
+ "start": 121,
11495
+ "end": 122
11496
11496
  },
11497
11497
  "context": {
11498
11498
  "type": "variable",
@@ -11500,8 +11500,8 @@
11500
11500
  "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\", \"inverse\")",
11501
11501
  "scope": "default",
11502
11502
  "line": {
11503
- "start": 118,
11504
- "end": 118
11503
+ "start": 123,
11504
+ "end": 123
11505
11505
  }
11506
11506
  },
11507
11507
  "group": [
@@ -11516,17 +11516,17 @@
11516
11516
  {
11517
11517
  "description": "The sizes map of the Button.\n",
11518
11518
  "commentRange": {
11519
- "start": 120,
11520
- "end": 121
11519
+ "start": 125,
11520
+ "end": 126
11521
11521
  },
11522
11522
  "context": {
11523
11523
  "type": "variable",
11524
11524
  "name": "kendo-button-sizes",
11525
- "value": "(\n xs: (\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
11525
+ "value": "(\n xs: (\n gap: $kendo-button-xs-gap,\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n gap: $kendo-button-sm-gap,\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n gap: $kendo-button-md-gap,\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n gap: $kendo-button-lg-gap,\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
11526
11526
  "scope": "default",
11527
11527
  "line": {
11528
- "start": 122,
11529
- "end": 147
11528
+ "start": 127,
11529
+ "end": 156
11530
11530
  }
11531
11531
  },
11532
11532
  "group": [
package/dist/meta/sassdoc-raw-data.json CHANGED
@@ -714,8 +714,8 @@
714
714
  {
715
715
  "description": "The theme colors map of the Button.\n",
716
716
  "commentRange": {
717
- "start": 116,
718
- "end": 117
717
+ "start": 121,
718
+ "end": 122
719
719
  },
720
720
  "context": {
721
721
  "type": "variable",
@@ -723,8 +723,8 @@
723
723
  "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\", \"inverse\")",
724
724
  "scope": "default",
725
725
  "line": {
726
- "start": 118,
727
- "end": 118
726
+ "start": 123,
727
+ "end": 123
728
728
  }
729
729
  },
730
730
  "group": [
@@ -739,17 +739,17 @@
739
739
  {
740
740
  "description": "The sizes map of the Button.\n",
741
741
  "commentRange": {
742
- "start": 120,
743
- "end": 121
742
+ "start": 125,
743
+ "end": 126
744
744
  },
745
745
  "context": {
746
746
  "type": "variable",
747
747
  "name": "kendo-button-sizes",
748
- "value": "(\n xs: (\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
748
+ "value": "(\n xs: (\n gap: $kendo-button-xs-gap,\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n gap: $kendo-button-sm-gap,\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n gap: $kendo-button-md-gap,\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n gap: $kendo-button-lg-gap,\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
749
749
  "scope": "default",
750
750
  "line": {
751
- "start": 122,
752
- "end": 147
751
+ "start": 127,
752
+ "end": 156
753
753
  }
754
754
  },
755
755
  "group": [
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-core",
3
3
  "description": "A collection of functions and mixins used for building themes for Kendo UI",
4
- "version": "14.7.0-dev.5",
4
+ "version": "14.7.0-dev.7",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
package/scss/components/button/_layout.scss CHANGED
@@ -69,6 +69,7 @@
69
69
 
70
70
  // Sizes
71
71
  @each $size, $size-props in $kendo-button-sizes {
72
+ $_gap: map.get( $size-props, gap );
72
73
  $_padding-x: map.get( $size-props, padding-x );
73
74
  $_padding-y: map.get( $size-props, padding-y );
74
75
  $_font-size: map.get( $size-props, font-size );
@@ -78,6 +79,7 @@
78
79
  &.k-button-#{$size} {
79
80
  padding-block: $_padding-y;
80
81
  padding-inline: $_padding-x;
82
+ gap: $_gap;
81
83
  font-size: $_font-size;
82
84
  line-height: $_line-height;
83
85
 
package/scss/components/button/_variables.scss CHANGED
@@ -11,6 +11,11 @@ $kendo-button-border-radius: null !default;
11
11
 
12
12
  $kendo-button-gap: null !default;
13
13
 
14
+ $kendo-button-xs-gap: null !default;
15
+ $kendo-button-sm-gap: null !default;
16
+ $kendo-button-md-gap: null !default;
17
+ $kendo-button-lg-gap: null !default;
18
+
14
19
  $kendo-button-xs-padding-x: null !default;
15
20
  $kendo-button-sm-padding-x: null !default;
16
21
  $kendo-button-md-padding-x: null !default;
@@ -121,24 +126,28 @@ $kendo-button-theme-colors: ("base", "primary", "secondary", "tertiary", "info",
121
126
  /// @group button
122
127
  $kendo-button-sizes: (
123
128
  xs: (
129
+ gap: $kendo-button-xs-gap,
124
130
  padding-x: $kendo-button-xs-padding-x,
125
131
  padding-y: $kendo-button-xs-padding-y,
126
132
  font-size: $kendo-button-xs-font-size,
127
133
  line-height: $kendo-button-xs-line-height
128
134
  ),
129
135
  sm: (
136
+ gap: $kendo-button-sm-gap,
130
137
  padding-x: $kendo-button-sm-padding-x,
131
138
  padding-y: $kendo-button-sm-padding-y,
132
139
  font-size: $kendo-button-sm-font-size,
133
140
  line-height: $kendo-button-sm-line-height
134
141
  ),
135
142
  md: (
143
+ gap: $kendo-button-md-gap,
136
144
  padding-x: $kendo-button-md-padding-x,
137
145
  padding-y: $kendo-button-md-padding-y,
138
146
  font-size: $kendo-button-md-font-size,
139
147
  line-height: $kendo-button-md-line-height
140
148
  ),
141
149
  lg: (
150
+ gap: $kendo-button-lg-gap,
142
151
  padding-x: $kendo-button-lg-padding-x,
143
152
  padding-y: $kendo-button-lg-padding-y,
144
153
  font-size: $kendo-button-lg-font-size,
package/scss/components/listbox/_layout.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use "../../color-system/_constants.scss" as *;
2
+ @use "../../z-index/index.scss" as *;
2
3
  @use "./variables.scss" as *;
3
4
 
4
5
  @mixin kendo-listbox--layout-base() {
@@ -20,7 +21,45 @@
20
21
 
21
22
  .k-listbox-actions {
22
23
  display: flex;
24
+ flex: none;
23
25
  gap: $kendo-listbox-button-spacing;
26
+ position: relative;
27
+ min-width: 0;
28
+ min-height: 0;
29
+
30
+ &.k-listbox-actions-scrollable {
31
+ &::before,
32
+ &::after {
33
+ content: "";
34
+ aspect-ratio: 1;
35
+ position: absolute;
36
+ z-index: k-z-index("base", 3);
37
+ pointer-events: none;
38
+ }
39
+
40
+ &.k-listbox-actions-scrollable-start::before,
41
+ &.k-listbox-actions-scrollable-end::after {
42
+ display: none;
43
+ }
44
+ }
45
+ }
46
+
47
+ .k-listbox-actions-items {
48
+ padding: $kendo-listbox-actions-scroll-padding;
49
+ display: flex;
50
+ flex: 1 1 auto;
51
+ gap: $kendo-listbox-button-spacing;
52
+ min-width: 0;
53
+ min-height: 0;
54
+ scrollbar-width: none;
55
+
56
+ &::-webkit-scrollbar {
57
+ display: none;
58
+ }
59
+
60
+ > * {
61
+ flex-shrink: 0;
62
+ }
24
63
  }
25
64
 
26
65
  &.k-listbox-actions-left,
@@ -29,6 +68,28 @@
29
68
 
30
69
  .k-listbox-actions {
31
70
  flex-direction: column;
71
+
72
+ &.k-listbox-actions-scrollable {
73
+ &::before,
74
+ &::after {
75
+ height: 15px;
76
+ width: 100%;
77
+ }
78
+
79
+ &::before {
80
+ inset-block-start: 0;
81
+ }
82
+
83
+ &::after {
84
+ inset-block-end: 0;
85
+ }
86
+ }
87
+ }
88
+
89
+ .k-listbox-actions-items {
90
+ flex-direction: column;
91
+ overflow-x: hidden;
92
+ overflow-y: auto;
32
93
  }
33
94
  }
34
95
 
@@ -42,6 +103,29 @@
42
103
 
43
104
  .k-listbox-actions {
44
105
  flex-direction: row;
106
+
107
+ &.k-listbox-actions-scrollable {
108
+ &::before,
109
+ &::after {
110
+ inset-block-start: 0;
111
+ height: 100%;
112
+ width: 15px;
113
+ }
114
+
115
+ &::before {
116
+ inset-inline-start: 0;
117
+ }
118
+
119
+ &::after {
120
+ inset-inline-end: 0;
121
+ }
122
+ }
123
+ }
124
+
125
+ .k-listbox-actions-items {
126
+ flex-direction: row;
127
+ overflow-x: auto;
128
+ overflow-y: hidden;
45
129
  }
46
130
  }
47
131
 
package/scss/components/listbox/_theme.scss CHANGED
@@ -16,6 +16,44 @@
16
16
  .k-drop-hint {
17
17
  border-block-start-color: k-color(primary);
18
18
  }
19
+
20
+ &.k-listbox-actions-left,
21
+ &.k-listbox-actions-right {
22
+ .k-listbox-actions-scrollable {
23
+ &::before {
24
+ background: linear-gradient(180deg, $kendo-listbox-actions-scroll-overlay);
25
+ }
26
+
27
+ &::after {
28
+ background: linear-gradient(0deg, $kendo-listbox-actions-scroll-overlay);
29
+ }
30
+ }
31
+ }
32
+
33
+ &.k-listbox-actions-top,
34
+ &.k-listbox-actions-bottom {
35
+ .k-listbox-actions-scrollable {
36
+ &::before {
37
+ background: linear-gradient(90deg, $kendo-listbox-actions-scroll-overlay);
38
+ }
39
+
40
+ &::after {
41
+ background: linear-gradient(270deg, $kendo-listbox-actions-scroll-overlay);
42
+ }
43
+ }
44
+ }
45
+ }
46
+
47
+ // RTL: reverse gradient directions for horizontal scrolling
48
+ :is(.k-rtl, [dir="rtl"]) .k-listbox:is(.k-listbox-actions-top, .k-listbox-actions-bottom) .k-listbox-actions-scrollable,
49
+ .k-listbox:is(.k-listbox-actions-top, .k-listbox-actions-bottom):is(.k-rtl, [dir="rtl"]) .k-listbox-actions-scrollable {
50
+ &::before {
51
+ background: linear-gradient(270deg, $kendo-listbox-actions-scroll-overlay);
52
+ }
53
+
54
+ &::after {
55
+ background: linear-gradient(90deg, $kendo-listbox-actions-scroll-overlay);
56
+ }
19
57
  }
20
58
 
21
59
  }
package/scss/components/listbox/_variables.scss CHANGED
@@ -15,6 +15,9 @@ $kendo-listbox-border: null !default;
15
15
 
16
16
  $kendo-listbox-drop-hint-width: null !default;
17
17
 
18
+ $kendo-listbox-actions-scroll-padding: null !default;
19
+ $kendo-listbox-actions-scroll-overlay: null !default;
20
+
18
21
  $kendo-listbox-scroller-padding-x: null !default;
19
22
  $kendo-listbox-scroller-padding-y: null !default;
20
23
  $kendo-listbox-border-radius: null !default;