@progress/kendo-theme-default 5.6.1-dev.4 → 5.6.1-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.
- package/dist/all.css +531 -399
- package/dist/all.scss +285 -194
- package/lib/swatches/default-blue.json +1 -1
- package/lib/swatches/default-dataviz-v4.json +1 -1
- package/lib/swatches/default-green.json +1 -1
- package/lib/swatches/default-main-dark.json +1 -1
- package/lib/swatches/default-main.json +1 -1
- package/lib/swatches/default-nordic.json +1 -1
- package/lib/swatches/default-ocean-blue.json +1 -1
- package/lib/swatches/default-orange.json +1 -1
- package/lib/swatches/default-purple.json +1 -1
- package/lib/swatches/default-turquoise.json +1 -1
- package/lib/swatches/default-urban.json +1 -1
- package/package.json +3 -3
- package/scss/adaptive/_layout.scss +2 -1
- package/scss/badge/_layout.scss +18 -69
- package/scss/badge/_theme.scss +2 -2
- package/scss/badge/_variables.scss +70 -35
- package/scss/button/_variables.scss +1 -1
- package/scss/card/_layout.scss +6 -5
- package/scss/card/_theme.scss +8 -20
- package/scss/card/_variables.scss +0 -10
- package/scss/colorgradient/_layout.scss +1 -1
- package/scss/dataviz/_layout.scss +1 -1
- package/scss/editor/_layout.scss +2 -1
- package/scss/grid/_layout.scss +3 -1
- package/scss/grid/_theme.scss +2 -0
- package/scss/notification/_layout.scss +4 -2
- package/scss/notification/_theme.scss +2 -1
- package/scss/pager/_layout.scss +4 -0
- package/scss/pdf-viewer/_index.scss +3 -0
- package/scss/pdf-viewer/_layout.scss +80 -28
- package/scss/pdf-viewer/_theme.scss +21 -0
- package/scss/pdf-viewer/_variables.scss +14 -1
- package/scss/popover/_layout.scss +10 -5
- package/scss/popover/_theme.scss +8 -6
- package/scss/popover/_variables.scss +0 -5
- package/scss/scheduler/_layout.scss +2 -0
- package/scss/slider/_layout.scss +2 -2
- package/scss/toolbar/_layout.scss +6 -0
- package/scss/toolbar/_theme.scss +7 -0
- package/scss/utils/_position.scss +3 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-theme-default",
|
|
3
3
|
"description": "SASS resources for the default Kendo UI theme",
|
|
4
|
-
"version": "5.6.1-dev.
|
|
4
|
+
"version": "5.6.1-dev.7",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"postpublish": "echo 'no postpublish for default theme'"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"sass-build": "^0.0
|
|
45
|
+
"sass-build": "^1.0.0"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "cdbab1b2ebcaadb86f256c2d8d9cb8ffe2fef23b"
|
|
48
48
|
}
|
package/scss/badge/_layout.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
.k-badge {
|
|
4
4
|
padding: 0;
|
|
5
|
-
border-width:
|
|
5
|
+
border-width: $kendo-badge-border-width;
|
|
6
6
|
border-style: solid;
|
|
7
7
|
border-color: transparent;
|
|
8
8
|
box-sizing: border-box;
|
|
@@ -52,74 +52,23 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
// Badge sizes
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
padding: $badge-padding-y-lg $badge-padding-x-lg;
|
|
73
|
-
border-width: $badge-border-width-lg;
|
|
74
|
-
font-size: $badge-font-size-lg;
|
|
75
|
-
line-height: $badge-line-height-lg;
|
|
76
|
-
|
|
77
|
-
&:empty { padding: $badge-padding-y-lg; }
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
// Badge shapes
|
|
82
|
-
.k-badge-rounded {
|
|
83
|
-
&.k-badge-sm { @include border-radius( $badge-border-radius-sm ); }
|
|
84
|
-
&.k-badge-md { @include border-radius( $badge-border-radius ); }
|
|
85
|
-
&.k-badge-lg { @include border-radius( $badge-border-radius-lg ); }
|
|
86
|
-
}
|
|
87
|
-
.k-badge-pill {
|
|
88
|
-
border-radius: 5rem;
|
|
89
|
-
}
|
|
90
|
-
.k-badge-circle {
|
|
91
|
-
padding: 0 !important; // sass-lint:disable-line no-important
|
|
92
|
-
border-radius: 100%;
|
|
93
|
-
|
|
94
|
-
&.k-badge-sm {
|
|
95
|
-
width: $badge-size-sm;
|
|
96
|
-
height: $badge-size-sm;
|
|
97
|
-
}
|
|
98
|
-
&.k-badge-md {
|
|
99
|
-
width: $badge-size;
|
|
100
|
-
height: $badge-size;
|
|
101
|
-
}
|
|
102
|
-
&.k-badge-lg {
|
|
103
|
-
width: $badge-size-lg;
|
|
104
|
-
height: $badge-size-lg;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
.k-badge-dot {
|
|
108
|
-
padding: 0 !important; // sass-lint:disable-line no-important
|
|
109
|
-
border-radius: 100%;
|
|
110
|
-
font-size: 0;
|
|
111
|
-
|
|
112
|
-
&.k-badge-sm {
|
|
113
|
-
width: $badge-dot-size-sm;
|
|
114
|
-
height: $badge-dot-size-sm;
|
|
115
|
-
}
|
|
116
|
-
&.k-badge-md {
|
|
117
|
-
width: $badge-dot-size;
|
|
118
|
-
height: $badge-dot-size;
|
|
119
|
-
}
|
|
120
|
-
&.k-badge-lg {
|
|
121
|
-
width: $badge-dot-size-lg;
|
|
122
|
-
height: $badge-dot-size-lg;
|
|
55
|
+
@each $size, $size-props in $kendo-badge-sizes {
|
|
56
|
+
$_padding-x: map-get( $size-props, padding-x );
|
|
57
|
+
$_padding-y: map-get( $size-props, padding-y );
|
|
58
|
+
$_font-size: map-get( $size-props, font-size );
|
|
59
|
+
$_line-height: map-get( $size-props, line-height );
|
|
60
|
+
$_min-width: map-get( $size-props, min-width );
|
|
61
|
+
|
|
62
|
+
.k-badge-#{$size} {
|
|
63
|
+
padding: $_padding-y $_padding-x;
|
|
64
|
+
font-size: $_font-size;
|
|
65
|
+
line-height: $_line-height;
|
|
66
|
+
min-width: $_min-width;
|
|
67
|
+
|
|
68
|
+
&:empty {
|
|
69
|
+
padding: $_padding-y;
|
|
70
|
+
min-width: auto;
|
|
71
|
+
}
|
|
123
72
|
}
|
|
124
73
|
}
|
|
125
74
|
|
package/scss/badge/_theme.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
// Solid badges
|
|
4
4
|
@each $name, $color in $kendo-theme-colors {
|
|
5
|
-
.k-badge-solid
|
|
5
|
+
.k-badge-solid-#{$name} {
|
|
6
6
|
border-color: $color;
|
|
7
7
|
color: contrast-wcag( $color );
|
|
8
8
|
background-color: $color;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
@each $name, $color in $kendo-theme-colors {
|
|
19
|
-
.k-badge-outline
|
|
19
|
+
.k-badge-outline-#{$name} {
|
|
20
20
|
color: $color;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
@@ -1,36 +1,71 @@
|
|
|
1
1
|
// Badge
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
$badge-border-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
$badge-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
$badge-
|
|
15
|
-
|
|
16
|
-
$badge-padding-x-
|
|
17
|
-
$badge-padding-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
$badge-
|
|
22
|
-
|
|
23
|
-
$badge-
|
|
24
|
-
$badge-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
$badge-
|
|
29
|
-
$badge-
|
|
30
|
-
$
|
|
31
|
-
$badge-
|
|
32
|
-
|
|
33
|
-
$
|
|
34
|
-
|
|
35
|
-
$badge-
|
|
36
|
-
$badge-
|
|
2
|
+
|
|
3
|
+
/// Width of the border around the badge.
|
|
4
|
+
/// @group badge
|
|
5
|
+
$kendo-badge-border-width: 1px !default;
|
|
6
|
+
|
|
7
|
+
/// Border radius of the badge.
|
|
8
|
+
/// @group badge
|
|
9
|
+
$kendo-badge-border-radius: $kendo-border-radius-md !default;
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
/// Horizontal padding of the badge.
|
|
13
|
+
/// @group badge
|
|
14
|
+
$kendo-badge-padding-x: map-get( $spacing, 1 ) !default;
|
|
15
|
+
$kendo-badge-padding-x-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
|
|
16
|
+
$kendo-badge-padding-x-md: map-get( $spacing, 1 ) !default;
|
|
17
|
+
$kendo-badge-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
|
|
18
|
+
|
|
19
|
+
/// Vertical padding of the badge.
|
|
20
|
+
/// @group badge
|
|
21
|
+
$kendo-badge-padding-y: map-get( $spacing, 1 ) !default;
|
|
22
|
+
$kendo-badge-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
|
|
23
|
+
$kendo-badge-padding-y-md: map-get( $spacing, 1 ) !default;
|
|
24
|
+
$kendo-badge-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
|
|
25
|
+
|
|
26
|
+
/// Font sizes of the badge.
|
|
27
|
+
/// @group badge
|
|
28
|
+
$kendo-badge-font-size: $font-size-xs !default;
|
|
29
|
+
$kendo-badge-font-size-sm: $font-size-xs !default;
|
|
30
|
+
$kendo-badge-font-size-md: $font-size-xs !default;
|
|
31
|
+
$kendo-badge-font-size-lg: $font-size-xs !default;
|
|
32
|
+
|
|
33
|
+
/// Line heights used along with $font-size.
|
|
34
|
+
/// @group badge
|
|
35
|
+
$kendo-badge-line-height: 1 !default;
|
|
36
|
+
$kendo-badge-line-height-sm: $kendo-badge-line-height !default;
|
|
37
|
+
$kendo-badge-line-height-md: $kendo-badge-line-height !default;
|
|
38
|
+
$kendo-badge-line-height-lg: $kendo-badge-line-height !default;
|
|
39
|
+
|
|
40
|
+
/// Badge min width used for circle badge.
|
|
41
|
+
/// @group badge
|
|
42
|
+
$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2}) !default;
|
|
43
|
+
$kendo-badge-min-width-sm: calc( #{$kendo-badge-line-height-sm * 1em} + #{$kendo-badge-padding-y-sm * 2} + #{$kendo-badge-border-width * 2} ) !default;
|
|
44
|
+
$kendo-badge-min-width-md: calc( #{$kendo-badge-line-height-md * 1em} + #{$kendo-badge-padding-y-md * 2} + #{$kendo-badge-border-width * 2} ) !default;
|
|
45
|
+
$kendo-badge-min-width-lg: calc( #{$kendo-badge-line-height-lg * 1em} + #{$kendo-badge-padding-y-lg * 2} + #{$kendo-badge-border-width * 2} ) !default;
|
|
46
|
+
|
|
47
|
+
/// Sizes map for the badge.
|
|
48
|
+
/// @group badge
|
|
49
|
+
$kendo-badge-sizes: (
|
|
50
|
+
sm: (
|
|
51
|
+
padding-x: $kendo-badge-padding-x-sm,
|
|
52
|
+
padding-y: $kendo-badge-padding-y-sm,
|
|
53
|
+
font-size: $kendo-badge-font-size-sm,
|
|
54
|
+
line-height: $kendo-badge-line-height-sm,
|
|
55
|
+
min-width: $kendo-badge-min-width-sm
|
|
56
|
+
),
|
|
57
|
+
md: (
|
|
58
|
+
padding-x: $kendo-badge-padding-x-md,
|
|
59
|
+
padding-y: $kendo-badge-padding-y-md,
|
|
60
|
+
font-size: $kendo-badge-font-size-md,
|
|
61
|
+
line-height: $kendo-badge-line-height-md,
|
|
62
|
+
min-width: $kendo-badge-min-width-md
|
|
63
|
+
),
|
|
64
|
+
lg: (
|
|
65
|
+
padding-x: $kendo-badge-padding-x-lg,
|
|
66
|
+
padding-y: $kendo-badge-padding-y-lg,
|
|
67
|
+
font-size: $kendo-badge-font-size-lg,
|
|
68
|
+
line-height: $kendo-badge-line-height-lg,
|
|
69
|
+
min-width: $kendo-badge-min-width-lg
|
|
70
|
+
)
|
|
71
|
+
) !default;
|
|
@@ -35,7 +35,7 @@ $kendo-button-font-size-md: $font-size-md !default;
|
|
|
35
35
|
$kendo-button-line-height-md: $line-height-md !default;
|
|
36
36
|
|
|
37
37
|
$kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
|
|
38
|
-
$kendo-button-padding-y-lg: map-get( $spacing, 2 );
|
|
38
|
+
$kendo-button-padding-y-lg: map-get( $spacing, 2 ) !default;
|
|
39
39
|
$kendo-button-font-size-lg: $font-size-lg !default;
|
|
40
40
|
$kendo-button-line-height-lg: $line-height-lg !default;
|
|
41
41
|
|
package/scss/card/_layout.scss
CHANGED
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
display: flex;
|
|
40
40
|
flex-direction: inherit;
|
|
41
41
|
overflow: hidden;
|
|
42
|
+
position: relative;
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
|
|
@@ -329,7 +330,7 @@
|
|
|
329
330
|
margin: 0;
|
|
330
331
|
width: $card-callout-width;
|
|
331
332
|
height: $card-callout-height;
|
|
332
|
-
border-width: $card-border-width
|
|
333
|
+
border-width: $card-border-width;
|
|
333
334
|
border-style: solid;
|
|
334
335
|
box-sizing: border-box;
|
|
335
336
|
position: absolute;
|
|
@@ -338,22 +339,22 @@
|
|
|
338
339
|
.k-card-callout.k-callout-n {
|
|
339
340
|
top: 0;
|
|
340
341
|
left: 50%;
|
|
341
|
-
transform: translate(-50%, -50%) rotate(
|
|
342
|
+
transform: translate(-50%, -50%) rotate(45deg);
|
|
342
343
|
}
|
|
343
344
|
.k-card-callout.k-callout-e {
|
|
344
345
|
top: 50%;
|
|
345
346
|
right: 0;
|
|
346
|
-
transform: translate(50%, -50%) rotate(
|
|
347
|
+
transform: translate(50%, -50%) rotate(-45deg);
|
|
347
348
|
}
|
|
348
349
|
.k-card-callout.k-callout-s {
|
|
349
350
|
bottom: 0;
|
|
350
351
|
left: 50%;
|
|
351
|
-
transform: translate(-50%, 50%) rotate(
|
|
352
|
+
transform: translate(-50%, 50%) rotate(45deg);
|
|
352
353
|
}
|
|
353
354
|
.k-card-callout.k-callout-w {
|
|
354
355
|
top: 50%;
|
|
355
356
|
left: 0;
|
|
356
|
-
transform: translate(-50%, -50%) rotate(
|
|
357
|
+
transform: translate(-50%, -50%) rotate(45deg);
|
|
357
358
|
}
|
|
358
359
|
|
|
359
360
|
}
|
package/scss/card/_theme.scss
CHANGED
|
@@ -9,6 +9,11 @@
|
|
|
9
9
|
);
|
|
10
10
|
@include box-shadow( $card-shadow );
|
|
11
11
|
|
|
12
|
+
.k-card-inner {
|
|
13
|
+
background-color: inherit;
|
|
14
|
+
border-color: inherit;
|
|
15
|
+
}
|
|
16
|
+
|
|
12
17
|
&:focus,
|
|
13
18
|
&.k-focus,
|
|
14
19
|
&.k-state-focus {
|
|
@@ -88,28 +93,11 @@
|
|
|
88
93
|
// Card callout
|
|
89
94
|
.k-card-callout {
|
|
90
95
|
@include fill(
|
|
91
|
-
$bg:
|
|
92
|
-
$border:
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.k-card-callout.k-callout-n { @include box-shadow( $card-callout-box-shadow-n ); }
|
|
97
|
-
.k-card-callout.k-callout-e { @include box-shadow( $card-callout-box-shadow-e ); }
|
|
98
|
-
.k-card-callout.k-callout-s { @include box-shadow( $card-callout-box-shadow-s ); }
|
|
99
|
-
.k-card-callout.k-callout-w { @include box-shadow( $card-callout-box-shadow-w ); }
|
|
100
|
-
|
|
101
|
-
.k-card:focus .k-card-callout,
|
|
102
|
-
.k-card.k-focus .k-card-callout,
|
|
103
|
-
.k-card.k-state-focus .k-card-callout {
|
|
104
|
-
@include fill(
|
|
105
|
-
$bg: $card-focus-bg,
|
|
106
|
-
$border: $card-focus-border
|
|
96
|
+
$bg: inherit,
|
|
97
|
+
$border: inherit
|
|
107
98
|
);
|
|
108
99
|
|
|
109
|
-
|
|
110
|
-
&.k-callout-e { @include box-shadow( $card-focus-callout-box-shadow-e ); }
|
|
111
|
-
&.k-callout-s { @include box-shadow( $card-focus-callout-box-shadow-s ); }
|
|
112
|
-
&.k-callout-w { @include box-shadow( $card-focus-callout-box-shadow-w ); }
|
|
100
|
+
@include box-shadow( inherit );
|
|
113
101
|
}
|
|
114
102
|
|
|
115
103
|
}
|
|
@@ -66,13 +66,3 @@ $card-deck-scroll-button-offset: -$kendo-button-border-width !default;
|
|
|
66
66
|
|
|
67
67
|
$card-callout-width: 20px !default;
|
|
68
68
|
$card-callout-height: 20px !default;
|
|
69
|
-
|
|
70
|
-
$card-callout-box-shadow-n: null !default;
|
|
71
|
-
$card-callout-box-shadow-e: null !default;
|
|
72
|
-
$card-callout-box-shadow-s: null !default;
|
|
73
|
-
$card-callout-box-shadow-w: null !default;
|
|
74
|
-
|
|
75
|
-
$card-focus-callout-box-shadow-n: 1px -1px 4px 0 rgba( black, .06) !default;
|
|
76
|
-
$card-focus-callout-box-shadow-e: 2px -1px 4px 0 rgba( black, .06) !default;
|
|
77
|
-
$card-focus-callout-box-shadow-s: 2px -2px 4px 0 rgba( black, .06) !default;
|
|
78
|
-
$card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
|
package/scss/editor/_layout.scss
CHANGED
package/scss/grid/_layout.scss
CHANGED
|
@@ -662,7 +662,9 @@
|
|
|
662
662
|
|
|
663
663
|
.k-cell-inner > .k-link > .k-icon {
|
|
664
664
|
&.k-i-sort-desc-sm,
|
|
665
|
-
&.k-i-sort-asc-sm
|
|
665
|
+
&.k-i-sort-asc-sm,
|
|
666
|
+
&.k-i-sort-asc-small,
|
|
667
|
+
&.k-i-sort-desc-small {
|
|
666
668
|
vertical-align: text-top;
|
|
667
669
|
margin-inline-start: $grid-sorted-icon-spacing;
|
|
668
670
|
}
|
package/scss/grid/_theme.scss
CHANGED
|
@@ -51,7 +51,8 @@
|
|
|
51
51
|
flex: none;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
> .k-i-close
|
|
54
|
+
> .k-i-close,
|
|
55
|
+
> .k-i-x {
|
|
55
56
|
margin-right: 0;
|
|
56
57
|
margin-left: $notification-icon-spacing;
|
|
57
58
|
flex: none;
|
|
@@ -74,7 +75,8 @@
|
|
|
74
75
|
margin-left: $notification-icon-spacing;
|
|
75
76
|
}
|
|
76
77
|
|
|
77
|
-
> .k-i-close
|
|
78
|
+
> .k-i-close,
|
|
79
|
+
> .k-i-x {
|
|
78
80
|
margin-left: 0;
|
|
79
81
|
margin-right: $notification-icon-spacing;
|
|
80
82
|
}
|
package/scss/pager/_layout.scss
CHANGED
|
@@ -3,11 +3,14 @@
|
|
|
3
3
|
|
|
4
4
|
// Dependencies
|
|
5
5
|
@import "../common/_index.scss";
|
|
6
|
+
@import "../button/_variables.scss";
|
|
6
7
|
@import "../combobox/_index.scss";
|
|
7
8
|
@import "../toolbar/_index.scss";
|
|
8
9
|
@import "../dialog/_index.scss";
|
|
9
10
|
@import "../pager/_index.scss";
|
|
10
11
|
@import "../icons/_index.scss";
|
|
12
|
+
@import "../dropzone/_index.scss";
|
|
13
|
+
@import "../window/_index.scss";
|
|
11
14
|
|
|
12
15
|
|
|
13
16
|
// Component
|