@progress/kendo-theme-core 11.1.0-dev.6 → 11.1.0-dev.8
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/package.json +2 -2
- package/scss/components/button/_layout.scss +17 -0
- package/scss/components/button/_variables.scss +2 -0
- package/scss/components/speech-to-text-button/_layout.scss +1 -13
- package/scss/components/speech-to-text-button/_variables.scss +1 -1
- package/scss/components/suggestion/_index.scss +16 -0
- package/scss/components/suggestion/_layout.scss +53 -0
- package/scss/components/suggestion/_theme.scss +87 -0
- package/scss/components/suggestion/_variables.scss +26 -0
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": "11.1.0-dev.
|
|
4
|
+
"version": "11.1.0-dev.8",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"directories": {
|
|
46
46
|
"doc": "docs"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "af53b1e95dabc215115b604f2e80c6716be3d3cb"
|
|
49
49
|
}
|
|
@@ -344,6 +344,23 @@
|
|
|
344
344
|
}
|
|
345
345
|
}
|
|
346
346
|
|
|
347
|
+
// Button generating state
|
|
348
|
+
.k-button.k-generating {
|
|
349
|
+
animation: k-button-pulsing 1.5s ease-in-out 0.5s infinite;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
@keyframes k-button-pulsing {
|
|
353
|
+
0% {
|
|
354
|
+
opacity: 1;
|
|
355
|
+
}
|
|
356
|
+
50% {
|
|
357
|
+
opacity: $kendo-button-pulsing-opacity;
|
|
358
|
+
}
|
|
359
|
+
100% {
|
|
360
|
+
opacity: 1;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
|
|
347
364
|
}
|
|
348
365
|
|
|
349
366
|
|
|
@@ -73,6 +73,8 @@ $kendo-button-disabled-border: null !default;
|
|
|
73
73
|
$kendo-button-disabled-gradient: null !default;
|
|
74
74
|
$kendo-button-disabled-shadow: null !default;
|
|
75
75
|
|
|
76
|
+
$kendo-button-pulsing-opacity: null !default;
|
|
77
|
+
|
|
76
78
|
// Solid Button
|
|
77
79
|
$kendo-solid-button-gradient: null !default;
|
|
78
80
|
$kendo-solid-button-shade-function: null !default;
|
|
@@ -4,19 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
.k-speech-to-text-button {
|
|
6
6
|
&.k-listening {
|
|
7
|
-
animation: k-
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
@keyframes k-speech-to-text-button-listening {
|
|
12
|
-
0% {
|
|
13
|
-
opacity: 1;
|
|
14
|
-
}
|
|
15
|
-
50% {
|
|
16
|
-
opacity: $kendo-speech-to-text-button-listening-opacity;
|
|
17
|
-
}
|
|
18
|
-
100% {
|
|
19
|
-
opacity: 1;
|
|
7
|
+
animation: k-button-pulsing 1.5s ease-in-out 0.5s infinite;
|
|
20
8
|
}
|
|
21
9
|
}
|
|
22
10
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
// Speech-to-text button
|
|
2
2
|
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// Dependencies
|
|
2
|
+
@use "../core/_index.scss" as *;
|
|
3
|
+
|
|
4
|
+
// Component
|
|
5
|
+
@forward "./_variables.scss";
|
|
6
|
+
@use "./_layout.scss" as *;
|
|
7
|
+
@use "./_theme.scss" as *;
|
|
8
|
+
|
|
9
|
+
// Expose
|
|
10
|
+
@mixin kendo-suggestion--styles() {
|
|
11
|
+
@include import-once( "suggestions" ) {
|
|
12
|
+
@include core-styles();
|
|
13
|
+
@include kendo-suggestion--layout();
|
|
14
|
+
@include kendo-suggestion--theme();
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
@use "./_variables.scss" as *;
|
|
2
|
+
@use "../../mixins/index.import.scss" as *;
|
|
3
|
+
@use "../../color-system/_functions.import.scss" as *;
|
|
4
|
+
|
|
5
|
+
@use "../../spacing/index.import.scss" as *;
|
|
6
|
+
|
|
7
|
+
@mixin kendo-suggestion--layout-base() {
|
|
8
|
+
.k-suggestion-scrollwrap {
|
|
9
|
+
width: 100%;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
position: relative;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
gap: $kendo-suggestion-spacing;
|
|
16
|
+
|
|
17
|
+
.k-suggestion-group {
|
|
18
|
+
padding-block: $kendo-suggestion-padding-y;
|
|
19
|
+
flex: 1 1 auto;
|
|
20
|
+
flex-wrap: nowrap;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
white-space: nowrap;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.k-suggestion-group {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-wrap: wrap;
|
|
29
|
+
gap: $kendo-suggestion-spacing;
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
.k-suggestion {
|
|
33
|
+
@include border-radius( $kendo-suggestion-border-radius );
|
|
34
|
+
padding-block: $kendo-suggestion-padding-y;
|
|
35
|
+
padding-inline: $kendo-suggestion-padding-x;
|
|
36
|
+
box-sizing: border-box;
|
|
37
|
+
border-width: $kendo-suggestion-border-width;
|
|
38
|
+
border-style: $kendo-suggestion-border-style;
|
|
39
|
+
line-height: $kendo-suggestion-line-height;
|
|
40
|
+
flex: 0 0 auto;
|
|
41
|
+
transition-property: color, background-color, border-color;
|
|
42
|
+
transition-duration: .2s;
|
|
43
|
+
transition-timing-function: ease-in-out;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
outline: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@mixin kendo-suggestion--layout() {
|
|
52
|
+
@include kendo-suggestion--layout-base();
|
|
53
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
@use "./_variables.scss" as *;
|
|
2
|
+
@use "../../mixins/index.import.scss" as *;
|
|
3
|
+
|
|
4
|
+
@use "../../spacing/index.import.scss" as *;
|
|
5
|
+
@use "../../color-system/_functions.import.scss" as *;
|
|
6
|
+
@use "../../_variables.scss" as *;
|
|
7
|
+
|
|
8
|
+
@mixin kendo-suggestion--theme-base() {
|
|
9
|
+
.k-suggestion {
|
|
10
|
+
@include fill(
|
|
11
|
+
$kendo-suggestion-text,
|
|
12
|
+
$kendo-suggestion-bg,
|
|
13
|
+
$kendo-suggestion-border
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
&:hover,
|
|
17
|
+
&.k-hover {
|
|
18
|
+
@include fill(
|
|
19
|
+
$kendo-suggestion-hover-text,
|
|
20
|
+
$kendo-suggestion-hover-bg,
|
|
21
|
+
$kendo-suggestion-hover-border
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:active,
|
|
26
|
+
&.k-active {
|
|
27
|
+
@include fill(
|
|
28
|
+
$kendo-suggestion-active-text,
|
|
29
|
+
$kendo-suggestion-active-bg,
|
|
30
|
+
$kendo-suggestion-active-border
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:focus,
|
|
35
|
+
&.k-focus {
|
|
36
|
+
@include focus-indicator( 0 0 $kendo-suggestion-focus-shadow-blur $kendo-suggestion-focus-shadow-spread $kendo-suggestion-focus-shadow-color );
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@each $name, $props in $kendo-suggestion-theme-colors {
|
|
41
|
+
|
|
42
|
+
$_suggestion-text: k-color(#{$name}-on-subtle);
|
|
43
|
+
$_suggestion-bg: k-color(#{$name}-subtle);
|
|
44
|
+
$_suggestion-border: k-color(#{$name}-emphasis);
|
|
45
|
+
|
|
46
|
+
$_suggestion-hover-text: k-color(#{$name}-on-subtle);
|
|
47
|
+
$_suggestion-hover-bg: k-color(#{$name}-subtle-hover);
|
|
48
|
+
$_suggestion-hover-border: k-color(#{$name}-emphasis);
|
|
49
|
+
|
|
50
|
+
$_suggestion-active-text: k-color(#{$name}-on-subtle);
|
|
51
|
+
$_suggestion-active-bg: k-color(#{$name}-subtle-active);
|
|
52
|
+
$_suggestion-active-border: k-color(#{$name}-emphasis);
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
.k-suggestion-#{$name} {
|
|
56
|
+
@include fill(
|
|
57
|
+
$_suggestion-text,
|
|
58
|
+
$_suggestion-bg,
|
|
59
|
+
$_suggestion-border
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
&:hover,
|
|
63
|
+
&.k-hover {
|
|
64
|
+
@include fill(
|
|
65
|
+
$_suggestion-hover-text,
|
|
66
|
+
$_suggestion-hover-bg,
|
|
67
|
+
$_suggestion-hover-border
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&:active,
|
|
72
|
+
&.k-active {
|
|
73
|
+
@include fill(
|
|
74
|
+
$_suggestion-active-text,
|
|
75
|
+
$_suggestion-active-bg,
|
|
76
|
+
$_suggestion-active-border
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
@mixin kendo-suggestion--theme() {
|
|
86
|
+
@include kendo-suggestion--theme-base();
|
|
87
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
|
|
2
|
+
$kendo-suggestion-padding-y: null !default;
|
|
3
|
+
$kendo-suggestion-padding-x: null !default;
|
|
4
|
+
$kendo-suggestion-spacing: null !default;
|
|
5
|
+
$kendo-suggestion-border-width: null !default;
|
|
6
|
+
$kendo-suggestion-border-style: null !default;
|
|
7
|
+
|
|
8
|
+
$kendo-suggestion-line-height: null !default;
|
|
9
|
+
$kendo-suggestion-bg: null !default;
|
|
10
|
+
$kendo-suggestion-text: null !default;
|
|
11
|
+
$kendo-suggestion-border: null !default;
|
|
12
|
+
$kendo-suggestion-border-radius: null !default;
|
|
13
|
+
|
|
14
|
+
$kendo-suggestion-hover-bg: null !default;
|
|
15
|
+
$kendo-suggestion-hover-text: null !default;
|
|
16
|
+
$kendo-suggestion-hover-border: null !default;
|
|
17
|
+
|
|
18
|
+
$kendo-suggestion-active-bg: null !default;
|
|
19
|
+
$kendo-suggestion-active-text: null !default;
|
|
20
|
+
$kendo-suggestion-active-border: null !default;
|
|
21
|
+
|
|
22
|
+
$kendo-suggestion-focus-shadow-blur: null !default;
|
|
23
|
+
$kendo-suggestion-focus-shadow-spread: null !default;
|
|
24
|
+
$kendo-suggestion-focus-shadow-color: null !default;
|
|
25
|
+
|
|
26
|
+
$kendo-suggestion-theme-colors: null !default;
|