@progress/kendo-theme-default 4.41.3-dev.3 → 4.42.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.
Files changed (43) hide show
  1. package/dist/all.css +1447 -540
  2. package/dist/all.scss +831 -557
  3. package/package.json +2 -2
  4. package/scss/action-buttons/_layout.scss +9 -1
  5. package/scss/all.scss +4 -0
  6. package/scss/button/_index.scss +1 -1
  7. package/scss/color-preview/_index.scss +11 -0
  8. package/scss/color-preview/_layout.scss +34 -0
  9. package/scss/color-preview/_theme.scss +31 -0
  10. package/scss/color-preview/_variables.scss +13 -0
  11. package/scss/coloreditor/_index.scss +15 -0
  12. package/scss/coloreditor/_layout.scss +65 -0
  13. package/scss/coloreditor/_theme.scss +19 -0
  14. package/scss/coloreditor/_variables.scss +27 -0
  15. package/scss/colorgradient/_index.scss +18 -0
  16. package/scss/colorgradient/_layout.scss +188 -0
  17. package/scss/colorgradient/_theme.scss +82 -0
  18. package/scss/colorgradient/_variables.scss +51 -0
  19. package/scss/colorgradient/images/alpha-slider-bgr.png +0 -0
  20. package/scss/colorgradient/images/alpha-slider-bgr.scss +3 -0
  21. package/scss/colorpalette/_index.scss +12 -0
  22. package/scss/colorpalette/_layout.scss +50 -0
  23. package/scss/colorpalette/_theme.scss +25 -0
  24. package/scss/colorpalette/_variables.scss +10 -0
  25. package/scss/colorpicker/_index.scss +2 -4
  26. package/scss/colorpicker/_layout.scss +4 -340
  27. package/scss/colorpicker/_theme.scss +4 -127
  28. package/scss/colorpicker/_variables.scss +0 -18
  29. package/scss/editor/_layout.scss +5 -0
  30. package/scss/fab/_layout.scss +2 -0
  31. package/scss/fab/_theme.scss +27 -34
  32. package/scss/fab/_variables.scss +12 -11
  33. package/scss/icons/_layout.scss +1 -0
  34. package/scss/icons/font/WebComponentsIcons.scss +1 -1
  35. package/scss/icons/font/WebComponentsIcons.ttf +0 -0
  36. package/scss/map/_layout.scss +2 -0
  37. package/scss/popup/_layout.scss +0 -5
  38. package/scss/utils/_border.scss +3 -3
  39. package/scss/utils/_spacing.scss +24 -0
  40. package/scss/colorpicker/images/alpha-slider-bgr-reversed.png +0 -0
  41. package/scss/colorpicker/images/alpha-slider-bgr-reversed.scss +0 -3
  42. package/scss/colorpicker/images/alpha-slider-bgr.png +0 -0
  43. package/scss/colorpicker/images/alpha-slider-bgr.scss +0 -3
package/scss/fab/_theme.scss CHANGED
@@ -1,12 +1,11 @@
1
1
  @include exports( "fab/theme" ) {
2
- // FAB
3
- .k-fab {
4
- @include box-shadow($fab-shadow);
5
- }
6
2
 
7
3
  // Normal state
8
4
  @each $name, $color in $fab-theme-colors {
9
5
  .k-fab-#{$name} {
6
+ @include box-shadow($fab-shadow);
7
+ outline: $fab-border-width solid $color;
8
+ outline-offset: -$fab-border-width;
10
9
  border-color: $color;
11
10
  color: contrast-wcag( $color );
12
11
  background-color: $color;
@@ -24,10 +23,14 @@
24
23
  }
25
24
 
26
25
  // Focus state
27
- .k-fab.k-state-focus,
28
- .k-fab.k-state-focused,
29
- .k-fab:focus {
30
- @include box-shadow($fab-focus-shadow);
26
+ @each $name, $color in $fab-theme-colors {
27
+ .k-fab-#{$name}.k-state-focus,
28
+ .k-fab-#{$name}.k-state-focused,
29
+ .k-fab-#{$name}:focus {
30
+ outline-style: solid;
31
+ outline-width: 2px;
32
+ outline-color: rgba( $color, .3 );
33
+ }
31
34
  }
32
35
 
33
36
  // Active state
@@ -35,23 +38,20 @@
35
38
  .k-state-active.k-fab-#{$name},
36
39
  .k-state-selected.k-fab-#{$name},
37
40
  .k-fab-#{$name}:active {
38
- border-color: try-shade( $color, 1);
39
- background-color: try-shade( $color, 1);
40
- box-shadow: $fab-shadow, 0px 3px 4px rgba($color, .4);
41
+ @include box-shadow($fab-active-shadow);
42
+ border-color: try-shade( $color, 1.5);
43
+ background-color: try-shade( $color, 1.5);
41
44
  }
42
45
  }
43
46
 
44
47
  // Disabled state
45
- .k-fab.k-state-disabled,
46
- .k-fab:disabled {
47
- @include box-shadow($fab-disabled-shadow);
48
- opacity: 1;
49
- }
50
-
51
48
  @each $name, $color in $fab-theme-colors {
52
49
  .k-state-disabled.k-fab-#{$name},
53
50
  .k-fab-#{$name}:disabled {
54
- background-color: tint( $color, 5 );
51
+ @include box-shadow($fab-disabled-shadow);
52
+ background-color: try-tint( $color, 5 );
53
+ color: try-tint( contrast-wcag( $color ), 5 );
54
+ opacity: 1;
55
55
  }
56
56
  }
57
57
 
@@ -63,6 +63,7 @@
63
63
  $fab-item-border
64
64
  );
65
65
  @include box-shadow($fab-item-shadow);
66
+
66
67
  }
67
68
  .k-fab-item-icon {
68
69
  @include fill(
@@ -71,6 +72,8 @@
71
72
  $fab-item-icon-border
72
73
  );
73
74
  @include box-shadow($fab-item-shadow);
75
+ outline: $fab-border-width solid rgba(0, 0, 0, .08);
76
+ outline-offset: -$fab-border-width;
74
77
  }
75
78
 
76
79
  // Hover state
@@ -88,15 +91,17 @@
88
91
  .k-fab-item.k-state-focus .k-fab-item-icon,
89
92
  .k-fab-item.k-state-focused .k-fab-item-text,
90
93
  .k-fab-item.k-state-focused .k-fab-item-icon {
91
- @include box-shadow($fab-item-focus-shadow);
94
+ outline-style: solid;
95
+ outline-width: 2px;
96
+ outline-color: rgba(0, 0, 0, .08);
92
97
  }
93
98
 
94
99
  // Active state
95
100
  .k-fab-item.k-state-active .k-fab-item-icon,
96
101
  .k-fab-item:active .k-fab-item-icon {
102
+ @include box-shadow($fab-item-active-shadow);
97
103
  border-color: try-shade( $fab-item-icon-border, 1);
98
104
  background-color: try-shade( $fab-item-icon-bg, 1);
99
- box-shadow: $fab-shadow, 0px 3px 4px rgba($fab-item-icon-bg, .4);
100
105
  }
101
106
 
102
107
  // Disabled state
@@ -106,21 +111,9 @@
106
111
 
107
112
  .k-fab-item-text,
108
113
  .k-fab-item-icon {
109
- color: tint( $fab-item-text, 6 );
110
114
  @include box-shadow($fab-item-disabled-shadow);
111
- }
112
- }
113
-
114
- // Disabled + Focus state
115
- .k-fab-item:focus,
116
- .k-fab-item.k-state-focus,
117
- .k-fab-item.k-state-focused {
118
- &:disabled,
119
- &.k-state-disabled {
120
- .k-fab-item-text,
121
- .k-fab-item-icon {
122
- @include box-shadow($fab-item-disabled-focus-shadow);
123
- }
115
+ background-color: try-tint( $fab-item-bg, 5 );
116
+ color: try-tint( $fab-item-text, 5 );
124
117
  }
125
118
  }
126
119
 
package/scss/fab/_variables.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  // Floating Action Button
2
2
  $fab-padding-x: map-get( $spacing, 4 ) !default;
3
3
  $fab-padding-y: $fab-padding-x !default;
4
- $fab-border-width: 0px !default;
5
- $fab-border-radius: $border-radius * 2 !default;
4
+ $fab-border-width: 1px !default;
5
+ $fab-border-radius: $border-radius !default;
6
6
  $fab-font-family: $font-family !default;
7
7
  $fab-font-size: $font-size !default;
8
8
  $fab-line-height: $line-height !default;
@@ -18,7 +18,7 @@ $fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
18
18
 
19
19
  $fab-icon-width: 20px !default;
20
20
  $fab-icon-height: $fab-icon-width !default;
21
- $fab-icon-spacing: map-get( $spacing, 1 ) !default;
21
+ $fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
22
22
 
23
23
  $fab-items-padding-x: 0px !default;
24
24
  $fab-items-padding-y: map-get( $spacing, 4 ) !default;
@@ -28,12 +28,14 @@ $fab-item-text-padding-y: $fab-item-text-padding-x !default;
28
28
  $fab-item-text-border-width: 1px !default;
29
29
  $fab-item-text-border-radius: 2px !default;
30
30
  $fab-item-text-font-size: $font-size-xs !default;
31
- $fab-item-text-line-height: 1 !default;
31
+ $fab-item-text-line-height: 1.2 !default;
32
32
 
33
33
  $fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
34
34
  $fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
35
35
  $fab-item-icon-border-width: 0 !default;
36
36
  $fab-item-icon-border-radius: 50% !default;
37
+ $fab-item-icon-width: 20px !default;
38
+ $fab-item-icon-height: $fab-item-icon-width !default;
37
39
 
38
40
  $fab-sizes: (
39
41
  sm: map-get( $spacing, 4 ),
@@ -44,21 +46,20 @@ $fab-sizes: (
44
46
  $fab-theme-colors: $theme-colors !default;
45
47
 
46
48
  $fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
47
- $fab-focus-shadow: 0 1px 10px rgba(#000000, .22), 0 4px 5px rgba(#000000, .24), 0 2px 4px rgba(#000000, .2) !default;
48
- $fab-disabled-shadow: 0 6px 10px rgba(0, 0, 0, .06), 0 1px 18px rgba(0, 0, 0, .06), 0 3px 5px rgba(0, 0, 0, .08) !default;
49
+ $fab-disabled-shadow: 0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
50
+ $fab-active-shadow: null !default;
49
51
 
50
52
  $fab-item-text: $component-text !default;
51
53
  $fab-item-bg: $component-bg !default;
52
54
  $fab-item-border: $component-border !default;
53
55
 
54
- $fab-item-icon-text: contrast-wcag( $light ) !default;
55
- $fab-item-icon-bg: $light !default;
56
- $fab-item-icon-border: $light !default;
56
+ $fab-item-icon-text: $button-text !default;
57
+ $fab-item-icon-bg: $button-bg !default;
58
+ $fab-item-icon-border: $button-border !default;
57
59
 
58
60
  $fab-item-shadow: $fab-shadow !default;
59
- $fab-item-focus-shadow: $fab-focus-shadow !default;
60
61
  $fab-item-disabled-shadow: $fab-disabled-shadow !default;
61
- $fab-item-disabled-focus-shadow: 0 1px 10px rgba(#000000, .12), 0 4px 5px rgba(#000000, .12), 0 2px 4px rgba(#000000, .08) !default;
62
+ $fab-item-active-shadow: $fab-active-shadow !default;
62
63
 
63
64
  $fab-border-width-sm: $fab-border-width !default;
64
65
  $fab-line-height-sm: $fab-line-height !default;
package/scss/icons/_layout.scss CHANGED
@@ -642,6 +642,7 @@
642
642
  .k-i-justify-between-vertical::before { content: "\e552"; }
643
643
  .k-i-justify-content-around-alt::before { content: "\e553"; }
644
644
  .k-i-justify-around-vertical::before { content: "\e553"; }
645
+ .k-i-color-canvas::before { content: "\e554"; }
645
646
  .k-i-file-wrench::before { content: "\e600"; }
646
647
  .k-i-page-properties::before { content: "\e600"; }
647
648
  .k-i-bold::before { content: "\e601"; }