@progress/kendo-theme-material 5.0.0-next.4 → 5.0.2-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 (204) hide show
  1. package/README.md +5 -8
  2. package/dist/all.css +13810 -14911
  3. package/dist/all.scss +16868 -18431
  4. package/dist/material-dataviz-v4.scss +8 -0
  5. package/lib/swatches/material-dataviz-v4.json +51 -0
  6. package/package.json +3 -3
  7. package/scss/_variables.scss +2 -19
  8. package/scss/action-buttons/_layout.scss +14 -0
  9. package/scss/action-buttons/_theme.scss +5 -3
  10. package/scss/adaptive/_layout.scss +0 -11
  11. package/scss/all.scss +1 -150
  12. package/scss/appbar/_variables.scss +1 -1
  13. package/scss/autocomplete/_index.scss +1 -0
  14. package/scss/autocomplete/_layout.scss +0 -16
  15. package/scss/autocomplete/_variables.scss +0 -24
  16. package/scss/avatar/_variables.scss +18 -8
  17. package/scss/avatar/index.md +0 -0
  18. package/scss/breadcrumb/_variables.scss +1 -1
  19. package/scss/button/_index.scss +3 -1
  20. package/scss/button/_layout.scss +39 -17
  21. package/scss/button/_theme.scss +72 -126
  22. package/scss/button/_variables.scss +202 -130
  23. package/scss/button/index.md +0 -0
  24. package/scss/calendar/_index.scss +1 -0
  25. package/scss/calendar/_variables.scss +1 -1
  26. package/scss/chat/_variables.scss +4 -19
  27. package/scss/checkbox/_index.scss +2 -0
  28. package/scss/checkbox/_theme.scss +2 -9
  29. package/scss/checkbox/_variables.scss +148 -58
  30. package/scss/checkbox/index.md +0 -0
  31. package/scss/chip/_index.scss +1 -0
  32. package/scss/chip/_theme.scss +44 -0
  33. package/scss/chip/_variables.scss +142 -190
  34. package/scss/chip/index.md +0 -0
  35. package/scss/color-preview/_index.scss +11 -0
  36. package/scss/color-preview/_layout.scss +1 -0
  37. package/scss/color-preview/_theme.scss +1 -0
  38. package/scss/color-preview/_variables.scss +14 -0
  39. package/scss/coloreditor/_index.scss +14 -0
  40. package/scss/coloreditor/_layout.scss +1 -0
  41. package/scss/coloreditor/_theme.scss +1 -0
  42. package/scss/coloreditor/_variables.scss +27 -0
  43. package/scss/colorgradient/_index.scss +19 -0
  44. package/scss/colorgradient/_layout.scss +1 -0
  45. package/scss/colorgradient/_theme.scss +1 -0
  46. package/scss/colorgradient/_variables.scss +51 -0
  47. package/scss/colorgradient/images/alpha-slider-bgr.png +0 -0
  48. package/scss/colorgradient/images/alpha-slider-bgr.scss +3 -0
  49. package/scss/colorpalette/_index.scss +12 -0
  50. package/scss/colorpalette/_layout.scss +1 -0
  51. package/scss/colorpalette/_theme.scss +1 -0
  52. package/scss/colorpalette/_variables.scss +10 -0
  53. package/scss/colorpicker/_index.scss +3 -6
  54. package/scss/colorpicker/_layout.scss +0 -61
  55. package/scss/colorpicker/_theme.scss +0 -37
  56. package/scss/colorpicker/_variables.scss +1 -44
  57. package/scss/combobox/_index.scss +1 -0
  58. package/scss/combobox/_layout.scss +0 -16
  59. package/scss/combobox/_variables.scss +1 -33
  60. package/scss/dataviz/_index.scss +1 -0
  61. package/scss/dataviz/_variables.scss +4 -4
  62. package/scss/dateinput/_index.scss +11 -0
  63. package/scss/dateinput/_layout.scss +1 -0
  64. package/scss/dateinput/_theme.scss +1 -0
  65. package/scss/dateinput/_variables.scss +1 -0
  66. package/scss/datepicker/_index.scss +13 -0
  67. package/scss/datepicker/_layout.scss +1 -0
  68. package/scss/datepicker/_theme.scss +1 -0
  69. package/scss/datepicker/_variables.scss +1 -0
  70. package/scss/{datetime → daterangepicker}/_index.scss +1 -2
  71. package/scss/daterangepicker/_layout.scss +1 -0
  72. package/scss/daterangepicker/_theme.scss +1 -0
  73. package/scss/daterangepicker/_variables.scss +2 -0
  74. package/scss/datetimepicker/_index.scss +17 -0
  75. package/scss/datetimepicker/_layout.scss +1 -0
  76. package/scss/datetimepicker/_theme.scss +1 -0
  77. package/scss/datetimepicker/_variables.scss +2 -0
  78. package/scss/dialog/_layout.scss +0 -8
  79. package/scss/drawer/_index.scss +1 -0
  80. package/scss/dropdowngrid/_layout.scss +0 -14
  81. package/scss/dropdowngrid/_theme.scss +0 -8
  82. package/scss/dropdowngrid/index.md +0 -0
  83. package/scss/dropdownlist/_index.scss +1 -0
  84. package/scss/dropdownlist/_layout.scss +0 -24
  85. package/scss/dropdownlist/_theme.scss +0 -31
  86. package/scss/dropdownlist/_variables.scss +7 -7
  87. package/scss/dropdowntree/_variables.scss +2 -4
  88. package/scss/editor/_layout.scss +1 -12
  89. package/scss/editor/_theme.scss +9 -0
  90. package/scss/editor/_variables.scss +10 -2
  91. package/scss/expansion-panel/_index.scss +1 -0
  92. package/scss/fab/_layout.scss +8 -0
  93. package/scss/fab/_theme.scss +52 -68
  94. package/scss/fab/_variables.scss +129 -71
  95. package/scss/fab/index.md +0 -0
  96. package/scss/filemanager/_variables.scss +1 -1
  97. package/scss/filter/_index.scss +1 -1
  98. package/scss/filter/_layout.scss +0 -23
  99. package/scss/filter/_variables.scss +1 -1
  100. package/scss/floating-label/_layout.scss +0 -1
  101. package/scss/floating-label/_theme.scss +0 -1
  102. package/scss/floating-label/_variables.scss +3 -3
  103. package/scss/forms/_index.scss +1 -1
  104. package/scss/forms/_layout.scss +0 -37
  105. package/scss/gantt/_index.scss +1 -1
  106. package/scss/grid/_index.scss +2 -1
  107. package/scss/grid/_layout.scss +7 -26
  108. package/scss/grid/_theme.scss +6 -6
  109. package/scss/grid/_variables.scss +11 -13
  110. package/scss/imageeditor/_variables.scss +1 -0
  111. package/scss/index.scss +157 -0
  112. package/scss/input/_index.scss +1 -1
  113. package/scss/input/_layout.scss +30 -1
  114. package/scss/input/_variables.scss +118 -92
  115. package/scss/list/_index.scss +12 -0
  116. package/scss/list/_layout.scss +1 -0
  117. package/scss/list/_theme.scss +1 -0
  118. package/scss/list/_variables.scss +248 -0
  119. package/scss/list/index.md +0 -0
  120. package/scss/listbox/_index.scss +2 -0
  121. package/scss/listbox/_variables.scss +5 -5
  122. package/scss/map/_variables.scss +1 -1
  123. package/scss/menu/_index.scss +2 -0
  124. package/scss/menu/_theme.scss +8 -8
  125. package/scss/menu/_variables.scss +125 -36
  126. package/scss/multiselect/_index.scss +2 -0
  127. package/scss/multiselect/_layout.scss +0 -60
  128. package/scss/multiselect/_theme.scss +0 -47
  129. package/scss/multiselect/_variables.scss +0 -44
  130. package/scss/numerictextbox/_layout.scss +0 -24
  131. package/scss/numerictextbox/_variables.scss +0 -31
  132. package/scss/orgchart/_variables.scss +2 -2
  133. package/scss/pager/_index.scss +1 -0
  134. package/scss/pager/_variables.scss +3 -3
  135. package/scss/panelbar/_index.scss +1 -0
  136. package/scss/panelbar/_variables.scss +5 -0
  137. package/scss/pdf-viewer/_variables.scss +3 -6
  138. package/scss/pivotgrid/_index.scss +1 -0
  139. package/scss/pivotgrid/_layout.scss +0 -54
  140. package/scss/pivotgrid/_theme.scss +0 -140
  141. package/scss/pivotgrid/_variables.scss +7 -10
  142. package/scss/popup/_index.scss +0 -4
  143. package/scss/popup/_layout.scss +0 -50
  144. package/scss/popup/_theme.scss +0 -56
  145. package/scss/popup/_variables.scss +2 -7
  146. package/scss/radio/_index.scss +2 -0
  147. package/scss/radio/_theme.scss +2 -9
  148. package/scss/radio/_variables.scss +134 -52
  149. package/scss/radio/index.md +0 -0
  150. package/scss/scheduler/_index.scss +1 -1
  151. package/scss/scheduler/_layout.scss +0 -29
  152. package/scss/scheduler/_variables.scss +2 -2
  153. package/scss/scrollview/_variables.scss +4 -4
  154. package/scss/searchbox/_layout.scss +0 -9
  155. package/scss/searchbox/_variables.scss +0 -20
  156. package/scss/slider/_theme.scss +0 -9
  157. package/scss/slider/_variables.scss +9 -9
  158. package/scss/spreadsheet/_index.scss +2 -1
  159. package/scss/spreadsheet/_layout.scss +0 -13
  160. package/scss/spreadsheet/_theme.scss +18 -18
  161. package/scss/switch/_index.scss +0 -2
  162. package/scss/switch/_layout.scss +7 -7
  163. package/scss/switch/_theme.scss +6 -2
  164. package/scss/switch/_variables.scss +191 -83
  165. package/scss/switch/index.md +0 -0
  166. package/scss/table/_index.scss +19 -0
  167. package/scss/table/_layout.scss +1 -0
  168. package/scss/table/_theme.scss +1 -0
  169. package/scss/table/_variables.scss +141 -0
  170. package/scss/tabstrip/_index.scss +1 -0
  171. package/scss/tabstrip/_variables.scss +3 -3
  172. package/scss/taskboard/_variables.scss +0 -2
  173. package/scss/textarea/_layout.scss +0 -112
  174. package/scss/textarea/_variables.scss +0 -53
  175. package/scss/textbox/_layout.scss +0 -14
  176. package/scss/textbox/_variables.scss +0 -1
  177. package/scss/timeline/_layout.scss +2 -2
  178. package/scss/timeline/_variables.scss +5 -5
  179. package/scss/timepicker/_index.scss +15 -0
  180. package/scss/timepicker/_layout.scss +1 -0
  181. package/scss/timepicker/_theme.scss +1 -0
  182. package/scss/timepicker/_variables.scss +1 -0
  183. package/scss/timeselector/_index.scss +13 -0
  184. package/scss/timeselector/_layout.scss +1 -0
  185. package/scss/timeselector/_theme.scss +19 -0
  186. package/scss/timeselector/_variables.scss +32 -0
  187. package/scss/toolbar/_index.scss +1 -0
  188. package/scss/toolbar/_layout.scss +17 -6
  189. package/scss/toolbar/_theme.scss +3 -13
  190. package/scss/toolbar/_variables.scss +3 -1
  191. package/scss/treeview/_theme.scss +32 -27
  192. package/scss/treeview/_variables.scss +125 -46
  193. package/scss/utils/_border.scss +9 -0
  194. package/scss/virtual-scroller/_index.scss +10 -0
  195. package/scss/virtual-scroller/_layout.scss +1 -0
  196. package/scss/virtual-scroller/_theme.scss +1 -0
  197. package/scss/virtual-scroller/_variables.scss +1 -0
  198. package/scss/colorpicker/images/alpha-slider-bgr-reversed.png +0 -0
  199. package/scss/colorpicker/images/alpha-slider-bgr-reversed.scss +0 -3
  200. package/scss/colorpicker/images/alpha-slider-bgr.png +0 -0
  201. package/scss/colorpicker/images/alpha-slider-bgr.scss +0 -3
  202. package/scss/datetime/_layout.scss +0 -74
  203. package/scss/datetime/_theme.scss +0 -64
  204. package/scss/datetime/_variables.scss +0 -53
@@ -1,25 +1 @@
1
1
  @import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss";
2
-
3
- @include exports("dropdownlist/layout/material") {
4
-
5
- .k-dropdown {
6
- .k-dropdown-wrap {
7
- border-width: $input-border-width 0;
8
- border-top-color: transparent !important; // sass-lint:disable-line no-important
9
-
10
- // Disabled
11
- .k-state-disabled > &,
12
- &.k-state-disabled {
13
- border-bottom-style: dashed;
14
- }
15
- }
16
- }
17
-
18
-
19
- // Native select
20
- select.k-dropdown {
21
- border-width: $input-border-width 0;
22
- border-top-color: transparent !important; // sass-lint:disable-line no-important
23
- }
24
-
25
- }
@@ -1,32 +1 @@
1
1
  @import "~@progress/kendo-theme-default/scss/dropdownlist/_theme.scss";
2
-
3
- @include exports( "dropdownlist/theme/material" ) {
4
-
5
- .k-dropdown {
6
- .k-dropdown-wrap {
7
-
8
- .k-select {
9
- color: $dropdownlist-select-text;
10
- }
11
-
12
- // Hover
13
- &:hover,
14
- &.k-state-hover {
15
-
16
- .k-select {
17
- color: $dropdownlist-select-hovered-text;
18
- }
19
- }
20
-
21
- // Focused
22
- &.k-state-focused,
23
- .k-state-focused > & {
24
-
25
- .k-select {
26
- color: $dropdownlist-select-focused-text;
27
- }
28
- }
29
- }
30
- }
31
-
32
- }
@@ -1,20 +1,20 @@
1
1
  // Dropdownlist
2
- $dropdownlist-bg: $input-bg !default;
3
- $dropdownlist-text: $input-text !default;
4
- $dropdownlist-border: $input-border !default;
2
+ $dropdownlist-bg: $kendo-input-bg !default;
3
+ $dropdownlist-text: $kendo-input-text !default;
4
+ $dropdownlist-border: $kendo-input-border !default;
5
5
  $dropdownlist-gradient: null !default;
6
6
 
7
7
  $dropdownlist-hovered-bg: null !default;
8
8
  $dropdownlist-hovered-text: null !default;
9
- $dropdownlist-hovered-border: $input-hovered-border !default;
9
+ $dropdownlist-hovered-border: $kendo-input-hover-border !default;
10
10
  $dropdownlist-hovered-gradient: null !default;
11
11
 
12
12
  $dropdownlist-focused-bg: null !default;
13
13
  $dropdownlist-focused-text: null !default;
14
- $dropdownlist-focused-border: $input-focused-border !default;
14
+ $dropdownlist-focused-border: $kendo-input-focus-border !default;
15
15
  $dropdownlist-focused-gradient: null !default;
16
16
  $dropdownlist-focused-shadow: null !default;
17
17
 
18
18
  $dropdownlist-select-text: $subtle-text !default;
19
- $dropdownlist-select-hovered-text: $input-text !default;
20
- $dropdownlist-select-focused-text: $input-text !default;
19
+ $dropdownlist-select-hovered-text: $kendo-input-text !default;
20
+ $dropdownlist-select-focused-text: $kendo-input-text !default;
@@ -1,5 +1,3 @@
1
1
  // Dropdowntree
2
- $dropdowntree-popup-spacer-x: $padding-x !default;
3
- $dropdowntree-popup-spacer-y: $dropdowntree-popup-spacer-x !default;
4
- $dropdowntree-filter-shadow: none !default;
5
- $dropdowntree-filter-spacer: 0px !default;
2
+ $dropdowntree-popup-padding-x: map-get( $spacing, 2 ) !default;
3
+ $dropdowntree-popup-padding-y: map-get( $spacing, 2 ) !default;
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  .k-edit-label {
37
- padding: calc( #{$padding-y} - #{$input-border-width} ) 0;
37
+ padding: calc( #{$padding-y} - #{$kendo-input-border-width} ) 0;
38
38
  margin: 0 0 -.5em;
39
39
  width: auto;
40
40
  font-size: $font-size-sm;
@@ -49,19 +49,8 @@
49
49
  float: none;
50
50
  display: flex;
51
51
  flex-direction: row;
52
-
53
- .k-numerictextbox,
54
- .k-textbox,
55
- .k-dropdown {
56
- width: auto;
57
- flex: 1 1 auto;
58
- }
59
- }
60
- .k-no-flexbox & .k-edit-field {
61
- display: block;
62
52
  }
63
53
 
64
- .k-edit-buttons {}
65
54
  }
66
55
 
67
56
  }
@@ -49,6 +49,15 @@
49
49
  }
50
50
  }
51
51
 
52
+ // Resizable images
53
+ .k-editor-resize-handle {
54
+ background-color: $editor-resize-handle-bg;
55
+ border-color: $editor-resize-handle-border;
56
+ }
57
+ .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
58
+ outline-color: $editor-selectednode-outline-color;
59
+ }
60
+
52
61
 
53
62
  // Insert table
54
63
  .k-ct-popup {
@@ -4,8 +4,8 @@ $editor-font-family: $font-family !default;
4
4
  $editor-font-size: $font-size !default;
5
5
  $editor-line-height: $line-height !default;
6
6
 
7
- $editor-placeholder-text: $input-placeholder-text !default;
8
- $editor-placeholder-opacity: $input-placeholder-opacity !default;
7
+ $editor-placeholder-text: $kendo-input-placeholder-text !default;
8
+ $editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
9
9
 
10
10
  $editor-selected-text: $primary-contrast !default;
11
11
  $editor-selected-bg: $primary !default;
@@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
13
13
  $editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
14
14
 
15
15
  $editor-export-tool-icon-margin-x: .5em !default;
16
+
17
+ $editor-resize-handle-size: 8px !default;
18
+ $editor-resize-handle-border-width: 1px !default;
19
+ $editor-resize-handle-border: #000000 !default;
20
+ $editor-resize-handle-bg: #ffffff !default;
21
+
22
+ $editor-selectednode-outline-width: 2px !default;
23
+ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length
@@ -6,6 +6,7 @@
6
6
  @import "../utils/_display.scss";
7
7
  @import "../utils/_spacer.scss";
8
8
  @import "../icons/_index.scss";
9
+ @import "../list/_index.scss";
9
10
 
10
11
 
11
12
  // Component
@@ -1 +1,9 @@
1
1
  @import "~@progress/kendo-theme-default/scss/fab/_layout.scss";
2
+
3
+ @include exports("fab/layout/material") {
4
+
5
+ .k-fab-text {
6
+ text-transform: uppercase;
7
+ }
8
+
9
+ }
@@ -1,12 +1,9 @@
1
1
  @include exports( "fab/theme/material" ) {
2
- // FAB
3
- .k-fab {
4
- @include box-shadow($fab-shadow);
5
- }
6
2
 
7
3
  // Normal state
8
- @each $name, $color in $fab-theme-colors {
9
- .k-fab-#{$name} {
4
+ @each $name, $color in $kendo-fab-theme-colors {
5
+ .k-fab-solid-#{$name} {
6
+ @include box-shadow($kendo-fab-shadow);
10
7
  border-color: $color;
11
8
  color: contrast-wcag( $color );
12
9
  background-color: $color;
@@ -14,111 +11,98 @@
14
11
  }
15
12
 
16
13
  // Hover state
17
- @each $name, $color in $fab-theme-colors {
18
- .k-state-hover.k-fab-#{$name},
19
- .k-state-hovered.k-fab-#{$name},
20
- .k-fab-#{$name}:hover {
21
- border-color: true-mix( #000000, $color, 30%);
22
- background-color: true-mix( #000000, $color, 30%);
14
+ @each $name, $color in $kendo-fab-theme-colors {
15
+ .k-hover.k-fab-solid-#{$name},
16
+ .k-fab-solid-#{$name}:hover {
17
+ border-color: true-mix( #ffffff, $color, 8%);
18
+ background-color: true-mix( #ffffff, $color, 8%);
23
19
  }
24
20
  }
25
21
 
26
22
  // 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);
31
- }
32
-
33
- // Active state
34
- @each $name, $color in $fab-theme-colors {
35
- .k-state-active.k-fab-#{$name},
36
- .k-state-selected.k-fab-#{$name},
37
- .k-fab-#{$name}:active {
23
+ @each $name, $color in $kendo-fab-theme-colors {
24
+ .k-focus.k-fab-solid-#{$name},
25
+ .k-fab-solid-#{$name}:focus {
38
26
  border-color: true-mix( #ffffff, $color, 12%);
39
27
  background-color: true-mix( #ffffff, $color, 12%);
40
28
  }
41
29
  }
42
30
 
43
- // Disabled state
44
- .k-fab.k-state-disabled,
45
- .k-fab:disabled {
46
- @include box-shadow($fab-disabled-shadow);
47
- opacity: 1;
48
- }
49
-
50
- @each $name, $color in $fab-theme-colors {
51
- .k-state-disabled.k-fab-#{$name},
52
- .k-fab-#{$name}:disabled {
53
- background-color: tint( $color, 5 );
31
+ // Active state
32
+ @each $name, $color in $kendo-fab-theme-colors {
33
+ .k-active.k-fab-solid-#{$name},
34
+ .k-selected.k-fab-solid-#{$name},
35
+ .k-fab-solid-#{$name}:active {
36
+ border-color: true-mix( #ffffff, $color, 16%);
37
+ background-color: true-mix( #ffffff, $color, 16%);
38
+ box-shadow: $kendo-fab-active-shadow;
54
39
  }
55
40
  }
56
41
 
57
- // Disabled + Focus state
58
- .k-fab-item:focus,
59
- .k-fab-item.k-state-focus,
60
- .k-fab-item.k-state-focused {
61
- &:disabled,
62
- &.k-state-disabled {
63
- .k-fab-item-text,
64
- .k-fab-item-icon {
65
- @include box-shadow($fab-item-disabled-focus-shadow);
66
- }
42
+ // Disabled state
43
+ @each $name, $color in $kendo-fab-theme-colors {
44
+ .k-disabled.k-fab-solid-#{$name},
45
+ .k-fab-solid-#{$name}:disabled {
46
+ @include box-shadow($kendo-fab-disabled-shadow);
47
+ border-color: try-tint( try-shade( $body-bg, 12% ), 5);
48
+ background-color: try-tint( try-shade( $body-bg, 12% ), 5);
49
+ color: tint( $disabled-text, 4);
50
+ opacity: 1;
67
51
  }
68
52
  }
69
53
 
70
54
  // Items
71
55
  .k-fab-item-text {
72
56
  @include fill(
73
- $fab-item-text,
74
- $fab-item-bg,
75
- $fab-item-border
57
+ $kendo-fab-item-text,
58
+ $kendo-fab-item-bg,
59
+ $kendo-fab-item-border
76
60
  );
77
- @include box-shadow($fab-item-shadow);
61
+ @include box-shadow($kendo-fab-item-shadow);
78
62
  }
79
63
  .k-fab-item-icon {
80
64
  @include fill(
81
- $fab-item-icon-text,
82
- $fab-item-icon-bg,
83
- $fab-item-icon-border
65
+ $kendo-fab-item-icon-text,
66
+ $kendo-fab-item-icon-bg,
67
+ $kendo-fab-item-icon-border
84
68
  );
85
- @include box-shadow($fab-item-shadow);
69
+ @include box-shadow($kendo-fab-item-shadow);
86
70
  }
87
71
 
88
72
  // Hover state
89
- .k-fab-item.k-state-hover .k-fab-item-icon,
90
- .k-fab-item.k-state-hovered .k-fab-item-icon,
73
+ .k-fab-item.k-hover .k-fab-item-icon,
91
74
  .k-fab-item:hover .k-fab-item-icon {
92
- border-color: true-mix( #000000, $fab-item-icon-border, 30%);
93
- background-color: true-mix( #000000, $fab-item-icon-bg, 30%);
75
+ border-color: true-mix( #000000, $kendo-fab-item-icon-border, 8%);
76
+ background-color: true-mix( #000000, $kendo-fab-item-icon-bg, 8%);
77
+ color: true-mix( #000000, $kendo-fab-item-icon-text, 8%);
94
78
  }
95
79
 
96
80
  // Focus state
97
- .k-fab-item:focus .k-fab-item-text,
98
81
  .k-fab-item:focus .k-fab-item-icon,
99
- .k-fab-item.k-state-focus .k-fab-item-text,
100
- .k-fab-item.k-state-focus .k-fab-item-icon,
101
- .k-fab-item.k-state-focused .k-fab-item-text,
102
- .k-fab-item.k-state-focused .k-fab-item-icon {
103
- @include box-shadow($fab-item-focus-shadow);
82
+ .k-fab-item.k-focus .k-fab-item-icon {
83
+ border-color: true-mix( #000000, $kendo-fab-item-icon-border, 12%);
84
+ background-color: true-mix( #000000, $kendo-fab-item-icon-bg, 12%);
85
+ color: true-mix( #000000, $kendo-fab-item-icon-text, 12%);
104
86
  }
105
87
 
106
88
  // Active state
107
- .k-fab-item.k-state-active .k-fab-item-icon,
89
+ .k-fab-item.k-active .k-fab-item-icon,
108
90
  .k-fab-item:active .k-fab-item-icon {
109
- border-color: true-mix( #ffffff, $fab-item-icon-border, 12%);
110
- background-color: true-mix( #ffffff, $fab-item-icon-bg, 12%);
91
+ @include box-shadow($kendo-fab-item-active-shadow);
92
+ border-color: true-mix( #ffffff, $kendo-fab-item-icon-border, 12%);
93
+ background-color: true-mix( #ffffff, $kendo-fab-item-icon-bg, 12%);
111
94
  }
112
95
 
113
96
  // Disabled state
114
- .k-fab-item.k-state-disabled,
97
+ .k-fab-item.k-disabled,
115
98
  .k-fab-item:disabled {
116
99
  opacity: 1;
117
100
 
118
101
  .k-fab-item-text,
119
102
  .k-fab-item-icon {
120
- color: tint( $fab-item-text, 8 );
121
- @include box-shadow($fab-item-disabled-shadow);
103
+ @include box-shadow($kendo-fab-item-disabled-shadow);
104
+ background-color: try-tint( $kendo-fab-item-bg, 8 );
105
+ color: try-tint( $kendo-fab-item-text, 8 );
122
106
  }
123
107
  }
124
108
 
@@ -1,73 +1,131 @@
1
1
  // Floating Action Button
2
- $fab-padding-x: $padding-x !default;
3
- $fab-padding-y: $fab-padding-x !default;
4
- $fab-border-width: 0px !default;
5
- $fab-border-radius: $border-radius * 2 !default;
6
- $fab-font-family: $font-family !default;
7
- $fab-font-size: $font-size !default;
8
- $fab-line-height: (20 / 14) !default;
9
2
 
10
- $fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
11
- $fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
12
-
13
- $fab-padding-x-md: $fab-padding-x !default;
14
- $fab-padding-y-md: $fab-padding-y !default;
15
-
16
- $fab-padding-x-lg: ( $fab-padding-x * 1.5 ) !default;
17
- $fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
18
-
19
- $fab-icon-width: 20px !default;
20
- $fab-icon-height: $fab-icon-width !default;
21
- $fab-icon-spacing: map-get( $spacing, 1 ) !default;
22
-
23
- $fab-items-padding-x: 0px !default;
24
- $fab-items-padding-y: map-get( $spacing, 4 ) !default;
25
-
26
- $fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
27
- $fab-item-text-padding-y: $fab-item-text-padding-x !default;
28
- $fab-item-text-border-width: 1px !default;
29
- $fab-item-text-border-radius: 2px !default;
30
- $fab-item-text-font-size: $font-size-xs !default;
31
- $fab-item-text-line-height: 1 !default;
32
-
33
- $fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
34
- $fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
35
- $fab-item-icon-border-width: 0 !default;
36
- $fab-item-icon-border-radius: 50% !default;
37
-
38
- $fab-sizes: (
39
- sm: map-get( $spacing, 4 ),
40
- md: map-get( $spacing, 8 ),
41
- lg: map-get( $spacing, 16 )
42
- ) !default;
43
-
44
- $fab-theme-colors: $theme-colors !default;
45
-
46
- $fab-shadow: 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12), 0 2px 4px 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 4px 5px rgba(0, 0, 0, .06), 0 1px 10px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .08) !default;
49
-
50
- $fab-item-text: $component-text !default;
51
- $fab-item-bg: $component-bg !default;
52
- $fab-item-border: $component-border !default;
53
-
54
- $fab-item-icon-text: contrast-wcag( $light ) !default;
55
- $fab-item-icon-bg: $light !default;
56
- $fab-item-icon-border: $light !default;
57
-
58
- $fab-item-shadow: $fab-shadow !default;
59
- $fab-item-focus-shadow: $fab-focus-shadow !default;
60
- $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
-
63
- $fab-border-width-sm: $fab-border-width !default;
64
- $fab-line-height-sm: $fab-line-height !default;
65
- $fab-size-sm: calc( #{$fab-line-height-sm * 1em} + #{$fab-padding-y-sm * 2} + #{$fab-border-width-sm * 2} ) !default;
66
-
67
- $fab-border-width-md: $fab-border-width !default;
68
- $fab-line-height-md: $fab-line-height !default;
69
- $fab-size-md: calc( #{$fab-line-height-md * 1em} + #{$fab-padding-y-md * 2} + #{$fab-border-width-md * 2} ) !default;
70
-
71
- $fab-border-width-lg: $fab-border-width !default;
72
- $fab-line-height-lg: $fab-line-height !default;
73
- $fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{$fab-border-width-lg * 2} ) !default;
3
+ /// Width of the border around the FAB.
4
+ /// @group floating-action-button
5
+ $kendo-fab-border-width: 0px !default;
6
+ /// Border radius of the FAB.
7
+ /// @group floating-action-button
8
+ $kendo-fab-border-radius: $border-radius !default;
9
+
10
+ /// Font family of the FAB.
11
+ /// @group floating-action-button
12
+ $kendo-fab-font-family: $font-family !default;
13
+ /// Font size of the FAB.
14
+ /// @group floating-action-button
15
+ $kendo-fab-font-size: $font-size !default;
16
+ /// Line height of the FAB.
17
+ /// @group floating-action-button
18
+ $kendo-fab-line-height: (20 / 14) !default;
19
+
20
+ /// Horizontal padding of the FAB.
21
+ /// @group floating-action-button
22
+ $kendo-fab-padding-x: $padding-x !default;
23
+ $kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
24
+ $kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
25
+ $kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
26
+
27
+ /// Vertical padding of the FAB.
28
+ /// @group floating-action-button
29
+ $kendo-fab-padding-y: $kendo-fab-padding-x !default;
30
+ $kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
31
+ $kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
32
+ $kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
33
+
34
+ /// FAB icon width.
35
+ /// @group floating-action-button
36
+ $kendo-fab-icon-width: 20px !default;
37
+ /// FAB icon height.
38
+ /// @group floating-action-button
39
+ $kendo-fab-icon-height: $kendo-fab-icon-width !default;
40
+ /// FAB icon spacing.
41
+ /// @group floating-action-button
42
+ $kendo-fab-icon-spacing: map-get( $spacing, 1 ) * 1.5 !default;
43
+
44
+ /// FAB items horizontal padding.
45
+ /// @group floating-action-button
46
+ $kendo-fab-items-padding-x: 0px !default;
47
+ /// FAB items vertical padding.
48
+ /// @group floating-action-button
49
+ $kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
50
+
51
+ /// FAB item text horizontal padding.
52
+ /// @group floating-action-button
53
+ $kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
54
+ /// FAB item text vertical padding.
55
+ /// @group floating-action-button
56
+ $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
57
+ /// Width of the FAB item text border.
58
+ /// @group floating-action-button
59
+ $kendo-fab-item-text-border-width: 1px !default;
60
+ /// Border radius of the FAB item text.
61
+ /// @group floating-action-button
62
+ $kendo-fab-item-text-border-radius: 2px !default;
63
+ /// Font size of the FAB item text.
64
+ /// @group floating-action-button
65
+ $kendo-fab-item-text-font-size: $font-size-xs !default;
66
+ /// Line height of the FAB item text.
67
+ /// @group floating-action-button
68
+ $kendo-fab-item-text-line-height: 1.2 !default;
69
+
70
+ /// FAB item icon horizontal padding.
71
+ /// @group floating-action-button
72
+ $kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
73
+ /// FAB item icon vertical padding.
74
+ /// @group floating-action-button
75
+ $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
76
+ /// Width of the FAB item icon border.
77
+ /// @group floating-action-button
78
+ $kendo-fab-item-icon-border-width: 0 !default;
79
+ /// Border radius of the FAB item icon.
80
+ /// @group floating-action-button
81
+ $kendo-fab-item-icon-border-radius: 50% !default;
82
+ /// Width of the FAB item icon.
83
+ /// @group floating-action-button
84
+ $kendo-fab-item-icon-width: 20px !default;
85
+ /// Height of the FAB item icon.
86
+ /// @group floating-action-button
87
+ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
88
+
89
+ /// Theme colors map for the FAB.
90
+ /// @group floating-action-button
91
+ $kendo-fab-theme-colors: $theme-colors !default;
92
+
93
+ /// The base shadow of the FAB.
94
+ /// @group floating-action-button
95
+ $kendo-fab-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12) !default;
96
+ /// The disabled shadow of the FAB.
97
+ /// @group floating-action-button
98
+ $kendo-fab-disabled-shadow: 0px 3px 5px -1px try-tint(rgba(0, 0, 0, .2), .5), 0px 6px 10px try-tint(rgba(0, 0, 0, .14), .5), 0px 1px 18px try-tint(rgba(0, 0, 0, .12), .5) !default;
99
+ /// The active shadow of the FAB.
100
+ /// @group floating-action-button
101
+ $kendo-fab-active-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12) !default;
102
+
103
+ /// The base text color of the FAB item.
104
+ /// @group floating-action-button
105
+ $kendo-fab-item-text: $component-text !default;
106
+ /// The base background color of the FAB item.
107
+ /// @group floating-action-button
108
+ $kendo-fab-item-bg: $component-bg !default;
109
+ /// The base border color of the FAB item.
110
+ /// @group floating-action-button
111
+ $kendo-fab-item-border: $component-border !default;
112
+
113
+ /// The base text color of the FAB item icon.
114
+ /// @group floating-action-button
115
+ $kendo-fab-item-icon-text: $kendo-button-text !default;
116
+ /// The base background color of the FAB item icon.
117
+ /// @group floating-action-button
118
+ $kendo-fab-item-icon-bg: $kendo-button-bg !default;
119
+ /// The base border color of the FAB item icon.
120
+ /// @group floating-action-button
121
+ $kendo-fab-item-icon-border: $kendo-button-border !default;
122
+
123
+ /// The base shadow of the FAB item.
124
+ /// @group floating-action-button
125
+ $kendo-fab-item-shadow: $kendo-fab-shadow !default;
126
+ /// The disabled shadow of the FAB item.
127
+ /// @group floating-action-button
128
+ $kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
129
+ /// The active shadow of the FAB item.
130
+ /// @group floating-action-button
131
+ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
File without changes
@@ -9,7 +9,7 @@ $filemanager-text: $component-text !default;
9
9
  $filemanager-border: $component-border !default;
10
10
 
11
11
  $filemanager-toolbar-border-width: $filemanager-border-width !default;
12
- $filemanager-toolbar-bg: try-shade( $button-bg, .5 ) !default;
12
+ $filemanager-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
13
13
  $filemanager-toolbar-text: null !default;
14
14
  $filemanager-toolbar-border: null !default;
15
15
  $filemanager-toolbar-gradient: null !default;
@@ -6,7 +6,7 @@
6
6
  @import "../button/_index.scss";
7
7
  @import "../input/_index.scss";
8
8
  @import "../checkbox/_index.scss";
9
- @import "../datetime/_index.scss";
9
+ @import "../datetimepicker/_index.scss";
10
10
  @import "../dropdownlist/_index.scss";
11
11
  @import "../numerictextbox/_index.scss";
12
12
  @import "../toolbar/_index.scss";
@@ -1,24 +1 @@
1
1
  @import "~@progress/kendo-theme-default/scss/filter/_layout.scss";
2
-
3
- @include exports("filter/layout/material") {
4
-
5
- .k-filter {
6
- .k-filter-toolbar {
7
- .k-picker-wrap,
8
- .k-autocomplete,
9
- .k-dateinput-wrap,
10
- .k-combobox .k-dropdown-wrap {
11
- border-width: 0 0 1px;
12
-
13
- .k-input {
14
- padding: $input-padding-y $input-padding-x;
15
- height: calc( #{$input-padding-y * 2} + #{$input-line-height * 1em} );
16
- }
17
-
18
- .k-select {
19
- padding: 0;
20
- }
21
- }
22
- }
23
- }
24
- }
@@ -5,7 +5,7 @@ $filter-padding-y: $filter-padding-x !default;
5
5
  $filter-bottom-margin: 2.1em !default;
6
6
  $filter-line-size: 1px !default;
7
7
 
8
- $filter-operator-dropdown-width: 19em !default;
8
+ $filter-operator-dropdown-width: 15em !default;
9
9
 
10
10
  $filter-preview-field-text: $primary !default;
11
11
  $filter-preview-operator-text: $subtle-text !default;
@@ -5,7 +5,6 @@
5
5
 
6
6
 
7
7
  // Floating label
8
- .k-textbox-container,
9
8
  .k-floating-label-container {
10
9
 
11
10
  > .k-label {
@@ -4,7 +4,6 @@
4
4
  @include exports( "floating-label/theme/material" ) {
5
5
 
6
6
  // Floating label
7
- .k-textbox-container,
8
7
  .k-floating-label-container {
9
8
 
10
9
  &.k-state-invalid + .k-label,