@progress/kendo-theme-core 8.0.2-dev.4 → 8.1.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.
- package/dist/all.css +721 -105
- package/dist/all.scss +906 -146
- package/dist/meta/sassdoc-data.json +1085 -307
- package/dist/meta/sassdoc-raw-data.json +125 -0
- package/dist/meta/variables.json +1249 -22
- package/package.json +2 -2
- package/scss/_variables.scss +1 -4
- package/scss/color-system/_swatch-legacy.scss +16 -3
- package/scss/mixins/_disabled.scss +4 -10
- package/scss/module-system/_components.scss +2 -0
- package/scss/module-system/_dependencies.scss +6 -2
- package/scss/styles/_animations.scss +693 -0
- package/scss/styles/_base.scss +17 -4
- package/scss/styles/_resizing.scss +124 -0
- package/scss/styles/_scrollbar.scss +27 -0
- package/scss/styles/_selection.scss +14 -3
- package/scss/styles/index.import.scss +6 -2
- package/scss/styles/_loading.scss +0 -127
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
@mixin kendo-core--styles--resizing() {
|
|
2
|
+
|
|
3
|
+
// Resize handle
|
|
4
|
+
.k-resize-handle,
|
|
5
|
+
.k-resize-hint {
|
|
6
|
+
position: absolute;
|
|
7
|
+
border-color: inherit;
|
|
8
|
+
z-index: 200;
|
|
9
|
+
}
|
|
10
|
+
.k-resize-handle {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
}
|
|
15
|
+
.k-resize-handle::before {
|
|
16
|
+
content: "";
|
|
17
|
+
border: 0 solid;
|
|
18
|
+
border-color: inherit;
|
|
19
|
+
}
|
|
20
|
+
.k-resize-n {
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 6px;
|
|
23
|
+
flex-direction: row;
|
|
24
|
+
left: 0;
|
|
25
|
+
top: -3px;
|
|
26
|
+
cursor: n-resize;
|
|
27
|
+
}
|
|
28
|
+
.k-resize-s {
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 6px;
|
|
31
|
+
flex-direction: row;
|
|
32
|
+
left: 0;
|
|
33
|
+
bottom: -3px;
|
|
34
|
+
cursor: s-resize;
|
|
35
|
+
}
|
|
36
|
+
.k-resize-w {
|
|
37
|
+
width: 6px;
|
|
38
|
+
height: 100%;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
top: 0;
|
|
41
|
+
left: -3px;
|
|
42
|
+
cursor: w-resize;
|
|
43
|
+
}
|
|
44
|
+
.k-resize-e {
|
|
45
|
+
width: 6px;
|
|
46
|
+
height: 100%;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
top: 0;
|
|
49
|
+
right: -3px;
|
|
50
|
+
cursor: e-resize;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.k-resize-sw,
|
|
54
|
+
.k-resize-se,
|
|
55
|
+
.k-resize-nw,
|
|
56
|
+
.k-resize-ne {
|
|
57
|
+
width: 5px;
|
|
58
|
+
height: 5px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.k-resize-sw {
|
|
62
|
+
cursor: sw-resize;
|
|
63
|
+
bottom: 0;
|
|
64
|
+
left: 0;
|
|
65
|
+
}
|
|
66
|
+
.k-resize-se {
|
|
67
|
+
cursor: se-resize;
|
|
68
|
+
bottom: 0;
|
|
69
|
+
right: 0;
|
|
70
|
+
}
|
|
71
|
+
.k-resize-nw {
|
|
72
|
+
cursor: nw-resize;
|
|
73
|
+
top: 0;
|
|
74
|
+
left: 0;
|
|
75
|
+
}
|
|
76
|
+
.k-resize-ne {
|
|
77
|
+
cursor: ne-resize;
|
|
78
|
+
top: 0;
|
|
79
|
+
right: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.k-vertical-resize {
|
|
83
|
+
cursor: row-resize;
|
|
84
|
+
}
|
|
85
|
+
.k-horizontal-resize {
|
|
86
|
+
cursor: col-resize;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Resize hint
|
|
90
|
+
.k-resize-hint {
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
align-items: center;
|
|
94
|
+
|
|
95
|
+
.k-resize-hint-handle {
|
|
96
|
+
width: auto;
|
|
97
|
+
height: 20px;
|
|
98
|
+
align-self: stretch;
|
|
99
|
+
}
|
|
100
|
+
.k-resize-hint-marker {
|
|
101
|
+
width: 2px;
|
|
102
|
+
height: auto;
|
|
103
|
+
flex: 1 1 auto;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
.k-resize-hint-vertical {
|
|
107
|
+
display: flex;
|
|
108
|
+
flex-direction: row;
|
|
109
|
+
align-items: center;
|
|
110
|
+
|
|
111
|
+
.k-resize-hint-handle {
|
|
112
|
+
width: 20px;
|
|
113
|
+
height: auto;
|
|
114
|
+
align-self: stretch;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.k-resize-hint-marker {
|
|
118
|
+
width: auto;
|
|
119
|
+
height: 2px;
|
|
120
|
+
flex: 1 1 auto;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@mixin kendo-core--styles--scrollbar() {
|
|
2
|
+
|
|
3
|
+
// virtual scrollbar
|
|
4
|
+
.k-scrollbar {
|
|
5
|
+
position: absolute;
|
|
6
|
+
overflow: scroll;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.k-scrollbar-vertical {
|
|
10
|
+
top: 0;
|
|
11
|
+
right: 0;
|
|
12
|
+
width: 17px; // scrollbar width
|
|
13
|
+
height: 100%;
|
|
14
|
+
overflow-x: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.k-touch-scrollbar {
|
|
18
|
+
display: none;
|
|
19
|
+
position: absolute;
|
|
20
|
+
z-index: 200000;
|
|
21
|
+
height: 8px;
|
|
22
|
+
width: 8px;
|
|
23
|
+
border: 1px solid #8a8a8a;
|
|
24
|
+
background-color: #858585;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
@mixin kendo-core--styles--selection() {
|
|
2
|
+
|
|
3
|
+
// Marquee
|
|
2
4
|
.k-marquee {
|
|
3
5
|
position: absolute;
|
|
4
6
|
z-index: 100000;
|
|
@@ -14,12 +16,21 @@
|
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
.k-marquee-color {
|
|
17
|
-
color: $kendo-selected-text;
|
|
19
|
+
color: k-get-theme-color-var( neutral-160, #{$kendo-selected-text} );
|
|
18
20
|
background-color: k-get-theme-color-var( primary-60, #{$kendo-selected-bg} );
|
|
19
21
|
border-color: k-get-theme-color-var( primary-100, #{$kendo-selected-border} );
|
|
20
22
|
opacity: .6;
|
|
21
23
|
}
|
|
22
24
|
.k-marquee-text {
|
|
23
|
-
color: $kendo-selected-text;
|
|
25
|
+
color: k-get-theme-color-var( neutral-160, #{$kendo-selected-text} );
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// Text selection
|
|
29
|
+
.k-text-selection {
|
|
30
|
+
::selection {
|
|
31
|
+
background-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ));
|
|
32
|
+
color: if($kendo-enable-color-system, k-color( on-primary ), $kendo-selected-text);
|
|
33
|
+
}
|
|
24
34
|
}
|
|
25
|
-
|
|
35
|
+
|
|
36
|
+
}
|
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
@import "./_accessibility.scss";
|
|
2
|
+
@import "./_animations.scss";
|
|
2
3
|
@import "./_asp-fallback.scss";
|
|
3
4
|
@import "./_layout.scss";
|
|
4
5
|
@import "./_normalize.scss";
|
|
5
6
|
@import "./_base.scss";
|
|
6
|
-
@import "./_loading.scss";
|
|
7
7
|
@import "./_selection.scss";
|
|
8
|
+
@import "./_scrollbar.scss";
|
|
9
|
+
@import "./_resizing.scss";
|
|
8
10
|
@import "./_colors.scss";
|
|
9
11
|
|
|
10
12
|
@mixin kendo-core--styles() {
|
|
11
13
|
@include kendo-core--styles--colors();
|
|
12
14
|
@include kendo-core--styles--accessibility();
|
|
15
|
+
@include kendo-core--styles--animations();
|
|
13
16
|
@include kendo-core--styles--asp-fallback();
|
|
14
17
|
@include kendo-core--styles--layout();
|
|
15
18
|
@include kendo-core--styles--normalize();
|
|
16
19
|
@include kendo-core--styles--base();
|
|
17
|
-
@include kendo-core--styles--loading();
|
|
18
20
|
@include kendo-core--styles--selection();
|
|
21
|
+
@include kendo-core--styles--scrollbar();
|
|
22
|
+
@include kendo-core--styles--resizing();
|
|
19
23
|
}
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
@mixin kendo-core--styles--loading() {
|
|
2
|
-
// Loading mask
|
|
3
|
-
.k-loading-mask,
|
|
4
|
-
.k-loading-image,
|
|
5
|
-
.k-loading-color {
|
|
6
|
-
width: 100%;
|
|
7
|
-
height: 100%;
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
position: absolute;
|
|
10
|
-
top: 0;
|
|
11
|
-
left: 0;
|
|
12
|
-
|
|
13
|
-
*,
|
|
14
|
-
*::before,
|
|
15
|
-
*::after,
|
|
16
|
-
&::before,
|
|
17
|
-
&::after {
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.k-loading-mask {
|
|
23
|
-
z-index: $kendo-zindex-loading;
|
|
24
|
-
|
|
25
|
-
&.k-opaque {
|
|
26
|
-
.k-loading-color {
|
|
27
|
-
opacity: 1;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
.k-loading-text {
|
|
32
|
-
text-indent: -4000px;
|
|
33
|
-
text-align: center;
|
|
34
|
-
position: absolute;
|
|
35
|
-
color: $kendo-loading-text;
|
|
36
|
-
}
|
|
37
|
-
.k-loading-image {
|
|
38
|
-
z-index: 2;
|
|
39
|
-
color: $kendo-loading-text;
|
|
40
|
-
}
|
|
41
|
-
.k-loading-color {
|
|
42
|
-
background-color: $kendo-loading-bg;
|
|
43
|
-
opacity: $kendo-loading-opacity;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// Loading indicator
|
|
47
|
-
.k-i-loading {
|
|
48
|
-
width: 1em;
|
|
49
|
-
height: 1em;
|
|
50
|
-
line-height: 1;
|
|
51
|
-
display: inline-flex;
|
|
52
|
-
flex-flow: row nowrap;
|
|
53
|
-
align-items: center;
|
|
54
|
-
justify-content: center;
|
|
55
|
-
vertical-align: middle;
|
|
56
|
-
position: relative;
|
|
57
|
-
background-color: transparent;
|
|
58
|
-
box-sizing: border-box;
|
|
59
|
-
color: $kendo-loading-text;
|
|
60
|
-
|
|
61
|
-
&::before,
|
|
62
|
-
&::after {
|
|
63
|
-
box-sizing: border-box;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.k-i-loading::before,
|
|
68
|
-
.k-i-loading::after,
|
|
69
|
-
.k-loading-image::before,
|
|
70
|
-
.k-loading-image::after {
|
|
71
|
-
position: absolute;
|
|
72
|
-
top: 50%;
|
|
73
|
-
left: 50%;
|
|
74
|
-
display: inline-block;
|
|
75
|
-
content: "";
|
|
76
|
-
box-sizing: inherit;
|
|
77
|
-
border-radius: 50%;
|
|
78
|
-
border-width: .05em;
|
|
79
|
-
border-style: solid;
|
|
80
|
-
border-color: currentColor;
|
|
81
|
-
border-top-color: transparent;
|
|
82
|
-
border-bottom-color: transparent;
|
|
83
|
-
background-color: transparent;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.k-icon.k-i-loading::before,
|
|
87
|
-
.k-icon.k-i-loading::after {
|
|
88
|
-
content: "";
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.k-i-loading::before,
|
|
92
|
-
.k-loading-image::before {
|
|
93
|
-
margin-top: -.5em;
|
|
94
|
-
margin-left: -.5em;
|
|
95
|
-
width: 1em;
|
|
96
|
-
height: 1em;
|
|
97
|
-
animation: k-loading-animation .7s linear infinite;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.k-i-loading::after,
|
|
101
|
-
.k-loading-image::after {
|
|
102
|
-
margin-top: -.25em;
|
|
103
|
-
margin-left: -.25em;
|
|
104
|
-
width: .5em;
|
|
105
|
-
height: .5em;
|
|
106
|
-
animation: k-loading-animation reverse 1.4s linear infinite;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.k-loading-image::before,
|
|
110
|
-
.k-loading-image::after {
|
|
111
|
-
content: "";
|
|
112
|
-
// See https://github.com/telerik/kendo-themes/issues/1925
|
|
113
|
-
border-width: 1px; // TODO: Remove once we drop IE support
|
|
114
|
-
border-width: clamp( .015em, 1px, 1px );
|
|
115
|
-
font-size: 4em;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
// Loading animation
|
|
119
|
-
@keyframes k-loading-animation {
|
|
120
|
-
0% {
|
|
121
|
-
transform: rotate(0deg);
|
|
122
|
-
}
|
|
123
|
-
100% {
|
|
124
|
-
transform: rotate(360deg);
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}
|