@progress/kendo-theme-material 4.43.1-dev.3 → 4.43.1-dev.4

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 (54) hide show
  1. package/README.md +5 -5
  2. package/dist/all.css +488 -593
  3. package/dist/all.scss +1222 -1319
  4. package/modules/@progress/kendo-theme-default/package.json +2 -2
  5. package/modules/@progress/kendo-theme-default/scss/appbar/_layout.scss +13 -0
  6. package/modules/@progress/kendo-theme-default/scss/autocomplete/_layout.scss +4 -4
  7. package/modules/@progress/kendo-theme-default/scss/button/_layout.scss +1 -7
  8. package/modules/@progress/kendo-theme-default/scss/checkbox/_index.scss +1 -0
  9. package/modules/@progress/kendo-theme-default/scss/checkbox/_layout.scss +2 -1
  10. package/modules/@progress/kendo-theme-default/scss/color-preview/_layout.scss +49 -7
  11. package/modules/@progress/kendo-theme-default/scss/color-preview/_theme.scss +0 -14
  12. package/modules/@progress/kendo-theme-default/scss/coloreditor/_layout.scss +5 -1
  13. package/modules/@progress/kendo-theme-default/scss/coloreditor/_variables.scss +3 -3
  14. package/modules/@progress/kendo-theme-default/scss/colorpicker/_layout.scss +6 -0
  15. package/modules/@progress/kendo-theme-default/scss/combobox/_layout.scss +22 -29
  16. package/modules/@progress/kendo-theme-default/scss/combobox/_theme.scss +59 -99
  17. package/modules/@progress/kendo-theme-default/scss/combobox/_variables.scss +1 -32
  18. package/modules/@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss +1 -0
  19. package/modules/@progress/kendo-theme-default/scss/dropdownlist/_layout.scss +37 -55
  20. package/modules/@progress/kendo-theme-default/scss/dropdownlist/_theme.scss +33 -75
  21. package/modules/@progress/kendo-theme-default/scss/editor/_layout.scss +9 -16
  22. package/modules/@progress/kendo-theme-default/scss/forms/_layout.scss +0 -4
  23. package/modules/@progress/kendo-theme-default/scss/grid/_variables.scss +6 -6
  24. package/modules/@progress/kendo-theme-default/scss/imageeditor/_layout.scss +4 -8
  25. package/modules/@progress/kendo-theme-default/scss/imageeditor/_variables.scss +1 -0
  26. package/modules/@progress/kendo-theme-default/scss/input/_variables.scss +1 -1
  27. package/modules/@progress/kendo-theme-default/scss/list/_index.scss +1 -0
  28. package/modules/@progress/kendo-theme-default/scss/list/_layout.scss +15 -3
  29. package/modules/@progress/kendo-theme-default/scss/list/_variables.scss +4 -0
  30. package/modules/@progress/kendo-theme-default/scss/map/_layout.scss +4 -7
  31. package/modules/@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss +17 -31
  32. package/modules/@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss +44 -14
  33. package/modules/@progress/kendo-theme-default/scss/mediaplayer/_layout.scss +5 -0
  34. package/modules/@progress/kendo-theme-default/scss/radio/_index.scss +1 -0
  35. package/modules/@progress/kendo-theme-default/scss/radio/_layout.scss +2 -1
  36. package/modules/@progress/kendo-theme-default/scss/scheduler/_layout.scss +1 -1
  37. package/modules/@progress/kendo-theme-default/scss/spreadsheet/_layout.scss +4 -8
  38. package/modules/@progress/kendo-theme-default/scss/toolbar/_layout.scss +15 -0
  39. package/package.json +3 -3
  40. package/scss/checkbox/_index.scss +1 -0
  41. package/scss/coloreditor/_variables.scss +3 -3
  42. package/scss/combobox/_layout.scss +4 -5
  43. package/scss/combobox/_variables.scss +1 -32
  44. package/scss/dropdownlist/_layout.scss +2 -11
  45. package/scss/dropdownlist/_theme.scss +0 -31
  46. package/scss/fab/index.md +0 -0
  47. package/scss/filter/_variables.scss +1 -1
  48. package/scss/grid/_variables.scss +6 -6
  49. package/scss/imageeditor/_variables.scss +1 -0
  50. package/scss/input/_variables.scss +2 -2
  51. package/scss/list/_index.scss +1 -0
  52. package/scss/list/_layout.scss +4 -10
  53. package/scss/list/_variables.scss +4 -0
  54. package/scss/radio/_index.scss +1 -0
package/dist/all.scss CHANGED
@@ -6850,11 +6850,22 @@ $message-box-link-text-decoration: underline !default;
6850
6850
  // #region @import "../common/_index.scss"; -> packages/material/scss/common/_index.scss
6851
6851
  // File already imported_once. Skipping output.
6852
6852
  // #endregion
6853
+ // #region @import "../checkbox/_index.scss"; -> packages/material/scss/checkbox/_index.scss
6854
+ // #region @import "../core/_index.scss"; -> packages/material/scss/core/_index.scss
6855
+ // File already imported_once. Skipping output.
6856
+ // #endregion
6853
6857
 
6854
6858
 
6855
- // Component
6856
- // #region @import "_variables.scss"; -> packages/material/scss/list/_variables.scss
6859
+ // Dependencies
6860
+ // #region @import "../typography/_variables.scss"; -> packages/material/scss/typography/_variables.scss
6861
+ // File already imported_once. Skipping output.
6862
+ // #endregion
6863
+ // #region @import "../list/_variables.scss"; -> packages/material/scss/list/_variables.scss
6857
6864
  // List
6865
+ $list-font-size: $font-size !default;
6866
+ $list-line-height: 1.5 !default;
6867
+ $list-line-height-em: 1.5em !default;
6868
+
6858
6869
  $list-item-padding-x: map-get( $spacing, 4 ) !default;
6859
6870
  $list-item-padding-y: map-get( $spacing, 1 ) !default;
6860
6871
 
@@ -6873,10 +6884,515 @@ $list-container-shadow: null !default;
6873
6884
  $list-container-no-data-text: $subtle-text !default;
6874
6885
 
6875
6886
  // #endregion
6887
+
6888
+
6889
+ // Component
6890
+ // #region @import "_variables.scss"; -> packages/material/scss/checkbox/_variables.scss
6891
+ // Checkbox
6892
+ $checkbox-size: map-get( $spacing, 4 ) !default;
6893
+ $checkbox-radius: map-get( $spacing, thin ) !default;
6894
+ $checkbox-border-width: 2px !default;
6895
+ $checkbox-line-height: calc( #{$checkbox-size} + #{$checkbox-border-width} ) !default;
6896
+
6897
+ $checkbox-bg: null !default;
6898
+ $checkbox-text: transparent !default;
6899
+ $checkbox-border: rgba( if( $dark-theme, $white, $black ), .54 ) !default;
6900
+
6901
+ $checkbox-hovered-bg: null !default;
6902
+ $checkbox-hovered-text: null !default;
6903
+ $checkbox-hovered-border: rgba( if( $dark-theme, $white, $black ), .87 ) !default;
6904
+
6905
+ $checkbox-checked-bg: $primary !default;
6906
+ $checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
6907
+ $checkbox-checked-border: $checkbox-checked-bg !default;
6908
+
6909
+ $checkbox-indeterminate-bg: $checkbox-checked-bg !default;
6910
+ $checkbox-indeterminate-text: $checkbox-checked-text !default;
6911
+ $checkbox-indeterminate-border: $checkbox-checked-border !default;
6912
+
6913
+ $checkbox-focused-border: $checkbox-border !default;
6914
+ $checkbox-focused-shadow: none !default;
6915
+ $checkbox-focused-checked-border: $checkbox-checked-border !default;
6916
+ $checkbox-focused-checked-shadow: none !default;
6917
+
6918
+ $checkbox-disabled-bg: null !default;
6919
+ $checkbox-disabled-text: null !default;
6920
+ $checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
6921
+
6922
+ $checkbox-disabled-checked-bg: $checkbox-disabled-border !default;
6923
+ $checkbox-disabled-checked-text: contrast-wcag( $checkbox-disabled-checked-bg ) !default;
6924
+ $checkbox-disabled-checked-border: $checkbox-disabled-checked-bg !default;
6925
+
6926
+ $checkbox-invalid-bg: null !default;
6927
+ $checkbox-invalid-text: $invalid-text !default;
6928
+ $checkbox-invalid-border: $invalid-border !default;
6929
+
6930
+
6931
+ // Checkbox indicator
6932
+ $checkbox-icon-type: image !default;
6933
+
6934
+ $checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
6935
+ $checkbox-glyph-size: 10px !default;
6936
+ $checkbox-checked-glyph: "\e118" !default;
6937
+ $checkbox-indeterminate-glyph: "\e121" !default;
6938
+
6939
+ $checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
6940
+ $checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
6941
+
6942
+ $checkbox-marker-checked-width: 10px !default;
6943
+ $checkbox-marker-checked-height: 10px !default;
6944
+ $checkbox-marker-indeterminate-width: 10px !default;
6945
+ $checkbox-marker-indeterminate-height: 2px !default;
6946
+
6947
+
6948
+ // Checkbox label
6949
+ $checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
6950
+
6951
+
6952
+ // Checkbox list
6953
+ $checkbox-list-margin: 0px !default;
6954
+ $checkbox-list-padding: 0px !default;
6955
+ $checkbox-list-item-padding-x: 0px !default;
6956
+ $checkbox-list-item-padding-y: $list-item-padding-y !default;
6957
+ $checkbox-list-horizontal-item-margin-x: 32px !default;
6958
+
6959
+
6960
+ // Checkbox ripple
6961
+ $checkbox-ripple-size: $checkbox-size * 3 !default;
6962
+ $checkbox-ripple-margin: calc(-1 * (#{$checkbox-size} + #{$checkbox-border-width})) !default;
6963
+ $checkbox-ripple-opacity: .38 !default;
6964
+
6965
+ // #endregion
6966
+ // #region @import "_layout.scss"; -> packages/material/scss/checkbox/_layout.scss
6967
+ // #region @import "~@progress/kendo-theme-default/scss/checkbox/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/checkbox/_layout.scss
6968
+ @include exports( "checkbox/layout" ) {
6969
+
6970
+ // Checkbox
6971
+ .k-checkbox {
6972
+ @include border-radius( $checkbox-radius );
6973
+ margin: 0;
6974
+ padding: 0;
6975
+ width: $checkbox-size;
6976
+ height: $checkbox-size;
6977
+ line-height: initial;
6978
+ border-width: $checkbox-border-width;
6979
+ border-style: solid;
6980
+ outline: 0;
6981
+ box-sizing: border-box;
6982
+ background-position: center;
6983
+ background-repeat: no-repeat;
6984
+ background-size: contain;
6985
+ display: inline-block;
6986
+ flex: none;
6987
+ vertical-align: middle;
6988
+ position: relative;
6989
+ cursor: pointer;
6990
+ -webkit-appearance: none;
6991
+ }
6992
+
6993
+ // Checkbox indicator
6994
+ .k-checkbox::before {
6995
+ @if $checkbox-icon-type == "glyph" {
6996
+ content: $checkbox-checked-glyph;
6997
+ width: $checkbox-glyph-size;
6998
+ height: $checkbox-glyph-size;
6999
+ font-size: $checkbox-glyph-size;
7000
+ font-family: $checkbox-glyph-font-family;
7001
+ line-height: 1;
7002
+ transform: scale(0) translate(-50%, -50%);
7003
+ overflow: hidden;
7004
+ position: absolute;
7005
+ top: 50%;
7006
+ left: 50%;
7007
+ }
7008
+
7009
+ @if $checkbox-icon-type == "marker" {
7010
+ content: "";
7011
+ width: $checkbox-marker-checked-width;
7012
+ height: $checkbox-marker-checked-height;
7013
+ background-color: currentColor;
7014
+ transform: scale(0) translate(-50%, -50%);
7015
+ overflow: hidden;
7016
+ position: absolute;
7017
+ top: 50%;
7018
+ left: 50%;
7019
+ }
7020
+ }
7021
+
7022
+
7023
+ // Checked state
7024
+ .k-checkbox:checked,
7025
+ .k-checkbox.k-checked {
7026
+ @if $checkbox-icon-type == "image" {
7027
+ background-image: $checkbox-checked-image;
7028
+ }
7029
+
7030
+ @if $checkbox-icon-type == "glyph" {
7031
+ &::before {
7032
+ transform: scale(1) translate(-50%, -50%);
7033
+ }
7034
+ }
7035
+
7036
+ @if $checkbox-icon-type == "marker" {
7037
+ &::before {
7038
+ transform: scale(1) translate(-50%, -50%);
7039
+ }
7040
+ }
7041
+ }
7042
+
7043
+
7044
+ // Indeterminate state
7045
+ .k-checkbox:indeterminate,
7046
+ .k-checkbox.k-indeterminate,
7047
+ .k-checkbox.k-state-indeterminate {
7048
+ @if $checkbox-icon-type == "image" {
7049
+ background-image: $checkbox-indeterminate-image;
7050
+ }
7051
+
7052
+ @if $checkbox-icon-type == "glyph" {
7053
+ &::before {
7054
+ content: $checkbox-indeterminate-glyph;
7055
+ transform: scale(1) translate(-50%, -50%);
7056
+ }
7057
+ }
7058
+
7059
+ @if $checkbox-icon-type == "marker" {
7060
+ &::before {
7061
+ width: $checkbox-maker-indeterminate-width;
7062
+ height: $checkbox-marker-indeterminate-height;
7063
+ transform: scale(1) translate(-50%, -50%);
7064
+ }
7065
+ }
7066
+ }
7067
+
7068
+
7069
+ // Disabled state
7070
+ .k-checkbox:disabled,
7071
+ .k-checkbox.k-disabled,
7072
+ .k-checkbox:disabled + .k-checkbox-label,
7073
+ .k-checkbox.k-disabled + .k-checkbox-label {
7074
+ @include disabled( $disabled-styling );
7075
+ }
7076
+
7077
+ // Checkbox label
7078
+ .k-checkbox-label {
7079
+ margin: 0;
7080
+ padding: 0;
7081
+ line-height: $checkbox-line-height;
7082
+ display: inline-flex;
7083
+ align-items: flex-start;
7084
+ vertical-align: middle;
7085
+ position: relative;
7086
+ cursor: pointer;
7087
+
7088
+ .k-label {
7089
+ cursor: pointer;
7090
+ }
7091
+
7092
+ .k-ripple {
7093
+ top: $checkbox-size / 2;
7094
+ left: $checkbox-size / 2;
7095
+ right: auto;
7096
+ bottom: auto;
7097
+ width: $checkbox-size * 5 / 2;
7098
+ height: $checkbox-size * 5 / 2;
7099
+ transform: translate(-50%, -50%);
7100
+ border-radius: 50%;
7101
+
7102
+ // Hide ripple temporarily
7103
+ visibility: hidden !important; // sass-lint:disable-line no-important
7104
+ }
7105
+
7106
+ .k-ripple-blob {
7107
+ // sass-lint:disable-block no-important
7108
+ // use !important until ripple can apply these styles from the script
7109
+ top: 50% !important;
7110
+ left: 50% !important;
7111
+ width: 200% !important;
7112
+ height: 200% !important;
7113
+ }
7114
+ }
7115
+ .k-checkbox + .k-checkbox-label {
7116
+ display: inline;
7117
+ }
7118
+ .k-checkbox + .k-checkbox-label,
7119
+ .k-checkbox-label + .k-checkbox {
7120
+ margin-left: $checkbox-label-margin-x;
7121
+ }
7122
+ .k-checkbox-label > .k-checkbox {
7123
+ margin-right: $checkbox-label-margin-x;
7124
+ flex-shrink: 0;
7125
+ }
7126
+ kendo-label.k-checkbox-label > .k-checkbox:last-child {
7127
+ margin-right: 0;
7128
+ }
7129
+ kendo-label.k-checkbox-label > .k-label:first-child {
7130
+ margin-right: $checkbox-label-margin-x;
7131
+ }
7132
+ kendo-label.k-checkbox-label > .k-label {
7133
+ display: inline;
7134
+ }
7135
+
7136
+
7137
+ // Empty label
7138
+ .k-checkbox-label:empty {
7139
+ display: none !important; // sass-lint:disable-line no-important
7140
+ }
7141
+
7142
+
7143
+ // Label with no text
7144
+ .k-checkbox-label.k-no-text {
7145
+ min-width: 1px;
7146
+ }
7147
+
7148
+
7149
+ // Checkbox list
7150
+ .k-checkbox-list {
7151
+ margin: $checkbox-list-margin;
7152
+ padding: $checkbox-list-padding;
7153
+ list-style: none;
7154
+
7155
+ .k-checkbox-item {
7156
+ padding: $checkbox-list-item-padding-y $checkbox-list-item-padding-x;
7157
+ }
7158
+ }
7159
+
7160
+ .k-list-horizontal {
7161
+ .k-checkbox-item {
7162
+ display: inline-block;
7163
+ margin: 0 $checkbox-list-horizontal-item-margin-x 0 0;
7164
+
7165
+ &:last-child {
7166
+ margin-right: 0;
7167
+ }
7168
+ }
7169
+ }
7170
+
7171
+
7172
+ // RTL
7173
+ .k-rtl,
7174
+ [dir="rtl"] {
7175
+ .k-checkbox + .k-checkbox-label,
7176
+ .k-checkbox-label + .k-checkbox {
7177
+ margin-left: 0;
7178
+ margin-right: $checkbox-label-margin-x;
7179
+ }
7180
+ .k-checkbox-label > .k-checkbox {
7181
+ margin-right: 0;
7182
+ margin-left: $checkbox-label-margin-x;
7183
+ }
7184
+ kendo-label.k-checkbox-label > .k-checkbox:last-child {
7185
+ margin-left: 0;
7186
+ }
7187
+ kendo-label.k-checkbox-label > .k-label:first-child {
7188
+ margin-right: 0;
7189
+ margin-left: $checkbox-label-margin-x;
7190
+ }
7191
+
7192
+ .k-list-horizontal {
7193
+ .k-checkbox-item {
7194
+ margin-right: 0;
7195
+ margin-left: $checkbox-list-horizontal-item-margin-x;
7196
+
7197
+ &:last-child {
7198
+ margin-left: 0;
7199
+ }
7200
+ }
7201
+ }
7202
+ }
7203
+
7204
+ .k-ripple-container {
7205
+ .k-checkbox::after {
7206
+ content: "";
7207
+ display: block;
7208
+ position: absolute;
7209
+ left: 0;
7210
+ top: 0;
7211
+ width: $checkbox-ripple-size;
7212
+ height: $checkbox-ripple-size;
7213
+ margin-left: $checkbox-ripple-margin;
7214
+ margin-top: $checkbox-ripple-margin;
7215
+ border-radius: 100%;
7216
+ z-index: 1;
7217
+ transform: scale(0);
7218
+ }
7219
+
7220
+ .k-checkbox:disabled::after,
7221
+ .k-checkbox.k-disabled::after {
7222
+ display: none;
7223
+ }
7224
+ }
7225
+
7226
+ }
7227
+
7228
+
7229
+
7230
+
7231
+ @include exports( "checkbox/layout/edge" ) {
7232
+
7233
+ .k-checkbox::-ms-check {
7234
+ border-width: 1px;
7235
+ border-color: inherit;
7236
+ color: inherit;
7237
+ background-color: inherit;
7238
+ }
7239
+
7240
+ }
7241
+
7242
+ // #endregion
7243
+
7244
+ // #endregion
7245
+ // #region @import "_theme.scss"; -> packages/material/scss/checkbox/_theme.scss
7246
+ // #region @import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/checkbox/_theme.scss
7247
+ @include exports("checkbox/theme") {
7248
+
7249
+ // Checkbox
7250
+ .k-checkbox {
7251
+ @include fill(
7252
+ $checkbox-text,
7253
+ $checkbox-bg,
7254
+ $checkbox-border
7255
+ );
7256
+ }
7257
+
7258
+
7259
+ // Hover state
7260
+ .k-checkbox:hover,
7261
+ .k-checkbox.k-state-hover {
7262
+ @include fill(
7263
+ $checkbox-hovered-text,
7264
+ $checkbox-hovered-bg,
7265
+ $checkbox-hovered-border
7266
+ );
7267
+ }
7268
+
7269
+
7270
+ // Focus state
7271
+ .k-checkbox:focus,
7272
+ .k-checkbox.k-state-focus {
7273
+ @include fill( $border: $checkbox-focused-border );
7274
+ @include box-shadow( $checkbox-focused-shadow );
7275
+ }
7276
+
7277
+
7278
+ // Indeterminate
7279
+ .k-checkbox:indeterminate,
7280
+ .k-checkbox.k-state-indeterminate,
7281
+ .k-checkbox.k-indeterminate {
7282
+ @include fill(
7283
+ $checkbox-indeterminate-text,
7284
+ $checkbox-indeterminate-bg,
7285
+ $checkbox-indeterminate-border
7286
+ );
7287
+ }
7288
+
7289
+
7290
+ // Checked
7291
+ .k-checkbox:checked,
7292
+ .k-checkbox.k-checked {
7293
+ @include fill(
7294
+ $checkbox-checked-text,
7295
+ $checkbox-checked-bg,
7296
+ $checkbox-checked-border
7297
+ );
7298
+ }
7299
+ .k-checkbox:checked:focus,
7300
+ .k-checkbox.k-checked.k-state-focus {
7301
+ @include fill( $border: $checkbox-focused-checked-border );
7302
+ @include box-shadow( $checkbox-focused-checked-shadow );
7303
+ }
7304
+
7305
+
7306
+ // Disabled
7307
+ .k-checkbox:disabled,
7308
+ .k-checkbox.k-disabled {
7309
+ @include fill(
7310
+ $checkbox-disabled-text,
7311
+ $checkbox-disabled-bg,
7312
+ $checkbox-disabled-border
7313
+ );
7314
+ }
7315
+ .k-checkbox:checked:disabled,
7316
+ .k-checkbox:indeterminate:disabled,
7317
+ .k-checkbox.k-state-indeterminate:disabled,
7318
+ .k-checkbox.k-checked.k-disabled,
7319
+ .k-checkbox.k-indeterminate.k-disabled {
7320
+ @include fill(
7321
+ $checkbox-disabled-checked-text,
7322
+ $checkbox-disabled-checked-bg,
7323
+ $checkbox-disabled-checked-border
7324
+ );
7325
+ }
7326
+
7327
+
7328
+ // Invalid
7329
+ .k-checkbox.k-invalid,
7330
+ .k-checkbox.k-state-invalid,
7331
+ .k-checkbox.ng-invalid.ng-touched,
7332
+ .k-checkbox.ng-invalid.ng-dirty {
7333
+ @include fill( $border: $checkbox-invalid-border );
7334
+ }
7335
+ .k-checkbox.k-invalid + .k-checkbox-label,
7336
+ .k-checkbox.k-state-invalid + .k-checkbox-label,
7337
+ .k-checkbox.ng-invalid.ng-touched + .k-checkbox-label,
7338
+ .k-checkbox.ng-invalid.ng-dirty + .k-checkbox-label {
7339
+ @include fill( $color: $checkbox-invalid-text );
7340
+ }
7341
+
7342
+
7343
+ // Ripple
7344
+ .k-ripple-container {
7345
+ .k-checkbox::after {
7346
+ background: $checkbox-checked-bg;
7347
+ opacity: $checkbox-ripple-opacity;
7348
+ }
7349
+ }
7350
+
7351
+ }
7352
+
7353
+ // #endregion
7354
+
7355
+ @include exports("checkbox/theme/material") {
7356
+
7357
+ // Checkbox
7358
+ .k-checkbox-label {
7359
+
7360
+ // Disabled state
7361
+ .k-checkbox:disabled + & {
7362
+ color: if($dark-theme, $light-secondary-text, $dark-secondary-text);
7363
+ opacity: 1;
7364
+ filter: none;
7365
+ }
7366
+
7367
+
7368
+ // Ripple
7369
+ .k-ripple-blob {
7370
+ opacity: .2;
7371
+ background-color: $checkbox-checked-bg;
7372
+ }
7373
+
7374
+ }
7375
+ }
7376
+
7377
+ // #endregion
7378
+
7379
+ // #endregion
7380
+
7381
+
7382
+ // Component
7383
+ // #region @import "_variables.scss"; -> packages/material/scss/list/_variables.scss
7384
+ // File already imported_once. Skipping output.
7385
+ // #endregion
6876
7386
  // #region @import "_layout.scss"; -> packages/material/scss/list/_layout.scss
6877
7387
  // #region @import "~@progress/kendo-theme-default/scss/list/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/list/_layout.scss
6878
7388
  @include exports( "list/layout" ) {
6879
7389
 
7390
+ .k-list,
7391
+ .k-list-container {
7392
+ font-size: $list-font-size;
7393
+ line-height: $list-line-height;
7394
+ }
7395
+
6880
7396
  // Layout
6881
7397
  .k-list-scroller {
6882
7398
  position: relative;
@@ -6891,7 +7407,7 @@ $list-container-no-data-text: $subtle-text !default;
6891
7407
 
6892
7408
  .k-list__group-header { // sass-lint:disable-line class-name-format
6893
7409
  padding: $list-item-padding-y $list-item-padding-x;
6894
- min-height: $line-height-em;
7410
+ min-height: $list-line-height-em;
6895
7411
  border-bottom-width: 1px;
6896
7412
  border-bottom-style: solid;
6897
7413
  font-size: $font-size;
@@ -6933,8 +7449,8 @@ $list-container-no-data-text: $subtle-text !default;
6933
7449
 
6934
7450
  .k-list__item { // sass-lint:disable-line class-name-format
6935
7451
  padding: $list-item-padding-y $list-item-padding-x;
6936
- min-height: $line-height-em;
6937
- line-height: $line-height-em;
7452
+ min-height: $list-line-height-em;
7453
+ line-height: $list-line-height;
6938
7454
  white-space: normal;
6939
7455
  display: flex;
6940
7456
  align-items: center;
@@ -6947,6 +7463,12 @@ $list-container-no-data-text: $subtle-text !default;
6947
7463
  transition-timing-function: ease;
6948
7464
  outline: none;
6949
7465
 
7466
+ .k-checkbox {
7467
+ margin-top: calc( ( #{$list-line-height-em} - #{$checkbox-size} ) / 2 );
7468
+ font-size: inherit;
7469
+ align-self: flex-start;
7470
+ }
7471
+
6950
7472
  &.k-first::before {
6951
7473
  content: "";
6952
7474
  display: block;
@@ -7081,7 +7603,6 @@ $list-container-no-data-text: $subtle-text !default;
7081
7603
  @include exports( "list/layout/material" ) {
7082
7604
 
7083
7605
  .k-list-container {
7084
- line-height: 1.5;
7085
7606
 
7086
7607
  .k-button {
7087
7608
  box-shadow: none;
@@ -7091,16 +7612,11 @@ $list-container-no-data-text: $subtle-text !default;
7091
7612
  }
7092
7613
  }
7093
7614
 
7094
- }
7095
-
7096
- .k-list {
7097
- line-height: 1.5;
7098
- }
7615
+ .k-list__group-header { // sass-lint:disable-line class-name-format
7616
+ min-height: auto;
7617
+ line-height: inherit;
7618
+ }
7099
7619
 
7100
- .k-list__item, // sass-lint:disable-line class-name-format
7101
- .k-list__group-header { // sass-lint:disable-line class-name-format
7102
- min-height: auto;
7103
- line-height: inherit;
7104
7620
  }
7105
7621
 
7106
7622
  }
@@ -8055,12 +8571,12 @@ $picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-
8055
8571
  $picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
8056
8572
 
8057
8573
  $picker-select-bg: null !default;
8058
- $picker-select-text: $subtle-text !default;
8574
+ $picker-select-text: null !default;
8059
8575
  $picker-select-border: null !default;
8060
8576
  $picker-select-gradient: null !default;
8061
8577
 
8062
8578
  $picker-select-hovered-bg: null !default;
8063
- $picker-select-hovered-text: $input-text !default;
8579
+ $picker-select-hovered-text: null !default;
8064
8580
  $picker-select-hovered-border: null !default;
8065
8581
  $picker-select-hovered-gradient: null !default;
8066
8582
 
@@ -8577,115 +9093,76 @@ $floating-label-focus-text: $primary !default;
8577
9093
 
8578
9094
  // Component
8579
9095
  // #region @import "_variables.scss"; -> packages/material/scss/combobox/_variables.scss
8580
- // Comboboxes
8581
- $combobox-select-padding-x: ($button-padding-y / 2) !default;
8582
- $combobox-select-padding-y: $button-padding-y !default;
8583
- $combobox-select-width: null !default;
8584
-
8585
- $combobox-bg: $input-bg !default;
8586
- $combobox-text: $input-text !default;
8587
- $combobox-border: $input-border !default;
8588
-
8589
- $combobox-hovered-bg: $input-hovered-bg !default;
8590
- $combobox-hovered-text: $input-hovered-text !default;
8591
- $combobox-hovered-border: $input-hovered-border !default;
8592
-
8593
- $combobox-focused-bg: $input-focused-bg !default;
8594
- $combobox-focused-text: $input-focused-text !default;
8595
- $combobox-focused-border: $input-focused-border !default;
8596
- $combobox-focused-shadow: $input-focused-shadow !default;
8597
-
8598
- $combobox-select-bg: null !default;
8599
- $combobox-select-text: $subtle-text !default;
8600
- $combobox-select-border: null !default;
8601
- $combobox-select-gradient: null !default;
8602
-
8603
- $combobox-select-hovered-bg: null !default;
8604
- $combobox-select-hovered-text: $input-text !default;
8605
- $combobox-select-hovered-border: null !default;
8606
- $combobox-select-hovered-gradient: null !default;
8607
-
8608
- $combobox-select-pressed-bg: null !default;
8609
- $combobox-select-pressed-text: null !default;
8610
- $combobox-select-pressed-border: null !default;
8611
- $combobox-select-pressed-gradient: null !default;
9096
+ // Combobox
8612
9097
 
8613
9098
  // #endregion
8614
9099
  // #region @import "_layout.scss"; -> packages/material/scss/combobox/_layout.scss
8615
9100
  // #region @import "~@progress/kendo-theme-default/scss/combobox/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/combobox/_layout.scss
8616
- @include exports("combobox/layout") {
9101
+ @include exports( "combobox/layout" ) {
8617
9102
 
8618
9103
  // Combobox
8619
9104
  .k-combobox {
9105
+ @include border-radius( $input-border-radius );
8620
9106
  width: $input-default-width;
8621
- border-width: 0;
9107
+ border-width: $input-border-width;
9108
+ border-style: solid;
8622
9109
  box-sizing: border-box;
8623
9110
  outline: 0;
8624
- background: none;
8625
9111
  font-family: $input-font-family;
8626
9112
  font-size: $input-font-size;
8627
9113
  line-height: $input-line-height;
8628
- text-align: left;
9114
+ text-align: start;
8629
9115
  white-space: nowrap;
8630
9116
  display: inline-flex;
9117
+ flex-flow: row nowrap;
8631
9118
  vertical-align: middle;
8632
9119
  position: relative;
9120
+ overflow: hidden;
9121
+ transition: all .1s ease; // sass-lint:disable-line no-transition-all
8633
9122
  -webkit-touch-callout: none;
8634
9123
  -webkit-tap-highlight-color: $rgba-transparent;
8635
9124
 
8636
- .k-dropdown-wrap {
8637
- @include border-radius( $input-border-radius );
8638
- padding: 0;
8639
- width: 100%;
8640
- border-width: 1px;
8641
- border-style: solid;
8642
- box-sizing: border-box;
8643
- position: relative;
8644
- display: flex;
8645
- flex-flow: row nowrap;
8646
- transition: all .1s ease; // sass-lint:disable-line no-transition-all
8647
- outline: 0;
8648
- cursor: initial;
8649
- overflow: hidden;
8650
- }
8651
-
8652
9125
 
8653
9126
  // Input
8654
9127
  .k-input {}
8655
9128
 
9129
+
9130
+ // Loading icon
9131
+ .k-i-loading {
9132
+ width: $input-icon-width;
9133
+ height: $input-icon-height;
9134
+ }
9135
+
9136
+
8656
9137
  // Select
8657
9138
  .k-select {
8658
- padding: $combobox-select-padding-y $combobox-select-padding-x;
8659
- width: if( $use-picker-select-width, $combobox-select-width, null );
9139
+ padding: $picker-select-padding-y $picker-select-padding-x;
9140
+ width: if( $use-picker-select-width, $spinner-width, null );
8660
9141
  border-width: 0;
8661
9142
  border-inline-start-width: $picker-select-border-width;
8662
- box-sizing: border-box;
8663
9143
  border-style: solid;
9144
+ box-sizing: border-box;
9145
+ outline: 0;
8664
9146
  display: flex;
9147
+ flex-flow: row nowrap;
8665
9148
  align-items: center;
8666
9149
  justify-content: center;
8667
9150
  flex: 0 0 auto;
8668
- text-align: center;
8669
9151
  cursor: pointer;
8670
9152
  }
8671
-
8672
- &[dir="rtl"],
8673
- .k-rtl & {
8674
- text-align: right;
8675
- }
8676
9153
  }
9154
+
8677
9155
  }
8678
9156
 
8679
9157
  // #endregion
8680
9158
 
8681
9159
  @include exports( "combobox/layout/material" ) {
8682
9160
 
9161
+ // Combobox
8683
9162
  .k-combobox {
8684
- .k-dropdown-wrap {
8685
- @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
8686
- border-width: $input-border-width 0;
8687
- border-top-color: transparent !important; // sass-lint:disable-line no-important
8688
- }
9163
+ @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
9164
+ border-width: $input-border-width 0;
9165
+ border-top-color: transparent !important; // sass-lint:disable-line no-important
8689
9166
  }
8690
9167
 
8691
9168
  }
@@ -8693,128 +9170,88 @@ $combobox-select-pressed-gradient: null !default;
8693
9170
  // #endregion
8694
9171
  // #region @import "_theme.scss"; -> packages/material/scss/combobox/_theme.scss
8695
9172
  // #region @import "~@progress/kendo-theme-default/scss/combobox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/combobox/_theme.scss
8696
- @include exports("combobox/theme") {
9173
+ @include exports( "combobox/theme" ) {
8697
9174
 
8698
9175
  .k-combobox {
8699
-
8700
- // Normal state
8701
- .k-dropdown-wrap {
8702
- @include fill(
8703
- $combobox-text,
8704
- $combobox-bg,
8705
- $combobox-border
8706
- );
8707
-
8708
- // Invalid state
8709
- &.k-invalid,
8710
- &.k-invalid:hover,
8711
- &.k-state-invalid {
8712
- border-color: $invalid-border;
8713
-
8714
- .k-input-validation-icon {
8715
- color: $invalid-text;
8716
- }
8717
-
8718
- &:focus,
8719
- &.k-state-focused {
8720
- @include box-shadow($invalid-shadow);
8721
- }
8722
- }
8723
- }
8724
-
8725
- .k-select {
8726
- @include fill(
8727
- $combobox-select-text,
8728
- $combobox-select-bg,
8729
- $combobox-select-border,
8730
- $combobox-select-gradient
8731
- );
8732
- }
9176
+ @include fill(
9177
+ $input-text,
9178
+ $input-bg,
9179
+ $input-border
9180
+ );
8733
9181
 
8734
9182
  // Hover state
8735
- > :hover,
8736
- .k-state-hover {
9183
+ &:hover,
9184
+ &.k-state-hover {
8737
9185
  @include fill(
8738
- $combobox-hovered-text,
8739
- $combobox-hovered-bg,
8740
- $combobox-hovered-border
9186
+ $input-hovered-text,
9187
+ $input-hovered-bg,
9188
+ $input-hovered-border
8741
9189
  );
8742
9190
  }
8743
- .k-select:hover {
9191
+
9192
+ // Focus state
9193
+ &:focus,
9194
+ &.k-state-focus {
8744
9195
  @include fill(
8745
- $combobox-select-hovered-text,
8746
- $combobox-select-hovered-bg,
8747
- $combobox-select-hovered-border,
8748
- $combobox-select-hovered-gradient
9196
+ $input-focused-text,
9197
+ $input-focused-bg,
9198
+ $input-focused-border
8749
9199
  );
9200
+ @include box-shadow( $input-focused-shadow );
8750
9201
  }
8751
-
8752
- // Focus state
8753
- > .k-state-focused {
9202
+ &:focus-within {
8754
9203
  @include fill(
8755
- $combobox-focused-text,
8756
- $combobox-focused-bg,
8757
- $combobox-focused-border
9204
+ $input-focused-text,
9205
+ $input-focused-bg,
9206
+ $input-focused-border
8758
9207
  );
8759
- @include box-shadow($combobox-focused-shadow);
9208
+ @include box-shadow( $input-focused-shadow );
8760
9209
  }
8761
9210
 
8762
- // Invalid
8763
- &.k-state-invalid,
8764
- &.ng-invalid.ng-touched,
8765
- &.ng-invalid.ng-dirty {
8766
- .k-dropdown-wrap {
8767
- border-color: $invalid-border;
8768
-
8769
- .k-input-validation-icon {
8770
- color: $invalid-text;
8771
- }
8772
9211
 
8773
- &:focus,
8774
- &.k-state-focused {
8775
- @include box-shadow($invalid-shadow);
8776
- }
8777
- }
8778
- }
8779
- }
9212
+ // Invalid state
9213
+ &.k-invalid,
9214
+ &.ng-invalid,
9215
+ &.k-state-invalid {
9216
+ border-color: $invalid-border;
8780
9217
 
8781
- // Universal rendering
8782
- .k-combobox {
8783
- &.k-state-hover {
8784
- .k-dropdown-wrap {
8785
- @include fill(
8786
- $combobox-hovered-text,
8787
- $combobox-hovered-bg,
8788
- $combobox-hovered-border
8789
- );
9218
+ .k-input-validation-icon {
9219
+ color: $invalid-text;
8790
9220
  }
8791
- }
8792
9221
 
8793
- &.k-state-focus {
8794
- .k-dropdown-wrap {
8795
- @include fill(
8796
- $combobox-focused-text,
8797
- $combobox-focused-bg,
8798
- $combobox-focused-border
8799
- );
8800
- @include box-shadow($combobox-focused-shadow);
9222
+ &:focus-within,
9223
+ &.k-state-focus {
9224
+ @include box-shadow($invalid-shadow);
8801
9225
  }
8802
9226
  }
8803
9227
 
8804
- &.k-invalid {
8805
- .k-dropdown-wrap {
8806
- border-color: $invalid-border;
8807
9228
 
8808
- .k-input-validation-icon {
8809
- color: $invalid-text;
8810
- }
8811
- }
9229
+ // Select
9230
+ .k-select {
9231
+ @include fill(
9232
+ $picker-select-text,
9233
+ $picker-select-bg,
9234
+ $picker-select-border,
9235
+ $picker-select-gradient
9236
+ );
8812
9237
  }
8813
-
8814
- &.k-invalid.k-state-focus {
8815
- .k-dropdown-wrap {
8816
- @include box-shadow($invalid-shadow);
8817
- }
9238
+ .k-select:hover,
9239
+ .k-select.k-state-hover {
9240
+ @include fill(
9241
+ $picker-select-hovered-text,
9242
+ $picker-select-hovered-bg,
9243
+ $picker-select-hovered-border,
9244
+ $picker-select-hovered-gradient
9245
+ );
9246
+ }
9247
+ .k-select:active,
9248
+ .k-select.k-state-active {
9249
+ @include fill(
9250
+ $picker-select-pressed-text,
9251
+ $picker-select-pressed-bg,
9252
+ $picker-select-pressed-border,
9253
+ $picker-select-pressed-gradient
9254
+ );
8818
9255
  }
8819
9256
  }
8820
9257
 
@@ -9086,14 +9523,14 @@ $grid-filter-menu-check-all-border-bottom-width: 0 !default;
9086
9523
  $grid-filter-menu-item-spacing-x: map-get( $spacing, 4 ) !default;
9087
9524
  $grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
9088
9525
 
9089
- $grid-column-menu-popup-padding-x: 0 !default;
9090
- $grid-column-menu-popup-padding-y: $padding-y-lg !default;
9526
+ $grid-column-menu-popup-padding-x: null !default;
9527
+ $grid-column-menu-popup-padding-y: null !default;
9091
9528
 
9092
- $grid-column-menu-item-padding-x: $padding-x !default;
9093
- $grid-column-menu-item-padding-y: $padding-y-lg !default;
9529
+ $grid-column-menu-item-padding-x: $menu-popup-item-padding-x !default;
9530
+ $grid-column-menu-item-padding-y: $menu-popup-item-padding-y !default;
9094
9531
 
9095
- $grid-column-menu-list-item-padding-x: $padding-x !default;
9096
- $grid-column-menu-list-item-padding-y: $padding-y-sm !default;
9532
+ $grid-column-menu-list-item-padding-x: $list-item-padding-x !default;
9533
+ $grid-column-menu-list-item-padding-y: $list-item-padding-y !default;
9097
9534
 
9098
9535
  $grid-column-menu-items-wrap-padding-x: 0 !default;
9099
9536
  $grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;
@@ -10872,6 +11309,7 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
10872
11309
  .k-color-preview {
10873
11310
  border-width: $color-preview-border-width;
10874
11311
  border-radius: $color-preview-border-radius;
11312
+ box-sizing: border-box;
10875
11313
  border-style: solid;
10876
11314
  display: inline-flex;
10877
11315
  flex-direction: row;
@@ -10879,21 +11317,62 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
10879
11317
  position: relative;
10880
11318
  overflow: hidden;
10881
11319
  }
10882
- .k-color-preview::before {
10883
- content: "";
11320
+
11321
+
11322
+ // Current Color
11323
+ .k-coloreditor-current-color {
11324
+ cursor: pointer;
11325
+ }
11326
+
11327
+
11328
+ // Icon color preview
11329
+ .k-icon-color-preview {
11330
+ border-width: 0;
11331
+ border-radius: 0;
11332
+ display: flex;
11333
+ flex-flow: column nowrap;
11334
+ align-items: center;
11335
+ justify-content: center;
11336
+ gap: 2px;
11337
+
11338
+ .k-color-preview-mask {
11339
+ width: calc( #{$icon-size} - 2px );
11340
+ height: 2px;
11341
+ }
11342
+ }
11343
+
11344
+
11345
+ // Color Preview Mask
11346
+ .k-color-preview-mask {
10884
11347
  width: 100%;
10885
11348
  height: 100%;
10886
- display: block;
10887
11349
  position: relative;
11350
+ }
11351
+ .k-color-preview-mask::before {
11352
+ content: "";
11353
+ width: 100%;
11354
+ height: 100%;
11355
+ position: absolute;
11356
+ top: 0;
11357
+ left: 0;
10888
11358
  z-index: -1;
11359
+ background: $color-preview-transparent-color-image;
11360
+ background-size: contain;
11361
+ background-position: 0 0;
10889
11362
  }
10890
11363
 
10891
- // Current Color
10892
- .k-coloreditor-current-color {
10893
- cursor: pointer;
10894
- }
10895
11364
 
10896
11365
  // No Color
11366
+ .k-no-color .k-color-preview-mask::before {
11367
+ content: "";
11368
+ background-color: $color-preview-no-color-bg;
11369
+ background-image: $color-preview-no-color-image;
11370
+ background-size: 100% 100%;
11371
+ background-position: 0 0;
11372
+ }
11373
+
11374
+
11375
+ // No Color (legacy)
10897
11376
  .k-no-color::before {
10898
11377
  content: "";
10899
11378
  width: 100%;
@@ -10920,12 +11399,6 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
10920
11399
  $color-preview-border
10921
11400
  );
10922
11401
 
10923
- &::before {
10924
- background: $color-preview-transparent-color-image;
10925
- background-size: contain;
10926
- background-position: 0;
10927
- }
10928
-
10929
11402
  &:hover,
10930
11403
  &.k-state-hover,
10931
11404
  &.k-hover {
@@ -10933,14 +11406,6 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
10933
11406
  }
10934
11407
  }
10935
11408
 
10936
- // No Color
10937
- .k-no-color::before {
10938
- background-color: $color-preview-no-color-bg;
10939
- background-image: $color-preview-no-color-image;
10940
- background-size: 100% 100%;
10941
- background-position: 0 0;
10942
- }
10943
-
10944
11409
  }
10945
11410
 
10946
11411
  // #endregion
@@ -12152,7 +12617,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
12152
12617
  .k-button {
12153
12618
 
12154
12619
  &::after {
12155
- @include border-radius( $button-border-radius );
12620
+ @include border-radius( inherit );
12156
12621
  content: "";
12157
12622
  opacity: 0;
12158
12623
  display: none;
@@ -12175,12 +12640,6 @@ $tooltip-error-border: $tooltip-error-bg !default;
12175
12640
 
12176
12641
  .k-ie {
12177
12642
 
12178
- .k-button,
12179
- .k-button-group {
12180
- display: inline-block;
12181
- overflow: visible; // IE9
12182
- }
12183
-
12184
12643
  .k-button-icontext {
12185
12644
 
12186
12645
  .k-icon,
@@ -12873,12 +13332,26 @@ $tooltip-error-border: $tooltip-error-bg !default;
12873
13332
  flex: 1 0 0%;
12874
13333
  }
12875
13334
 
13335
+
12876
13336
  // Template
12877
13337
  .k-toolbar-template {
12878
13338
  align-self: center;
12879
13339
  align-items: center;
12880
13340
  }
12881
13341
 
13342
+
13343
+ // Child components
13344
+ .k-textbox,
13345
+ .k-combobox,
13346
+ .k-dropdown,
13347
+ .k-searchbox,
13348
+ .k-numerictextbox,
13349
+ .k-datepicker,
13350
+ .k-timepicker,
13351
+ .k-datetimepicker {
13352
+ width: 10em;
13353
+ }
13354
+
12882
13355
  }
12883
13356
 
12884
13357
 
@@ -12893,6 +13366,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
12893
13366
 
12894
13367
  // Angular specific
12895
13368
  kendo-toolbar-renderer {
13369
+ display: inline-block;
12896
13370
  border-color: inherit;
12897
13371
  }
12898
13372
 
@@ -13538,10 +14012,6 @@ $fieldset-legend-border: null !default;
13538
14012
  display: inline-flex;
13539
14013
  width: 100%;
13540
14014
  }
13541
-
13542
- .k-editor .k-dropdown {
13543
- width: $input-default-width;
13544
- }
13545
14015
  }
13546
14016
 
13547
14017
  // Form Buttons Container
@@ -14200,270 +14670,15 @@ $textbox-line-height: 1.375em !default;
14200
14670
  border-style: solid;
14201
14671
  outline: 0;
14202
14672
  font-family: $input-font-family;
14203
- font-size: $input-font-size;
14204
- line-height: $input-line-height;
14205
- box-sizing: border-box;
14206
- // Targets https://github.com/telerik/kendo-react/issues/638.
14207
- box-shadow: none;
14208
- background: none;
14209
- display: inline-flex;
14210
- flex-flow: row nowrap;
14211
- align-items: center;
14212
- vertical-align: middle;
14213
- position: relative;
14214
- -webkit-appearance: none;
14215
-
14216
- // Hide clear icon
14217
- &::-ms-clear { display: none; }
14218
-
14219
- // Placeholder text
14220
- &::placeholder {
14221
- color: $input-placeholder-text;
14222
- opacity: $input-placeholder-opacity;
14223
- user-select: none;
14224
- }
14225
- &:-ms-input-placeholder {
14226
- color: $input-placeholder-text;
14227
- }
14228
-
14229
- .k-input {}
14230
-
14231
- .k-button-clear {
14232
- width: $button-inner-calc-size;
14233
- height: $button-inner-calc-size;
14234
- border: 0;
14235
- }
14236
-
14237
- .k-textbox-separator {
14238
- margin: 0;
14239
- width: 0;
14240
- height: $icon-size;
14241
- border-width: 0 0 0 1px;
14242
- border-style: solid;
14243
- }
14244
-
14245
- // Disabled state
14246
- &:disabled,
14247
- &[disabled],
14248
- &.k-state-disabled {
14249
- @include disabled( $disabled-styling );
14250
-
14251
- // Disabled selection
14252
- &::selection {
14253
- @include fill (
14254
- $color: $input-text,
14255
- $bg: transparent
14256
- );
14257
- }
14258
- }
14259
- }
14260
-
14261
-
14262
- // Textbox
14263
- input.k-textbox {
14264
- padding: $input-padding-y $input-padding-x;
14265
- }
14266
-
14267
- }
14268
-
14269
- // #endregion
14270
-
14271
- @include exports("textbox/layout/material") {
14272
-
14273
- // Textbox
14274
- .k-textbox {
14275
- @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
14276
- border-width: $input-border-width 0;
14277
- border-top-color: transparent !important; // sass-lint:disable-line no-important
14278
- }
14279
-
14280
- }
14281
-
14282
- // #endregion
14283
- // #region @import "_theme.scss"; -> packages/material/scss/textbox/_theme.scss
14284
- // #region @import "~@progress/kendo-theme-default/scss/textbox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/textbox/_theme.scss
14285
- @include exports("textbox/theme") {
14286
-
14287
- // Textbox
14288
- .k-textbox {
14289
- @include fill(
14290
- $input-text,
14291
- $input-bg,
14292
- $input-border
14293
- );
14294
-
14295
- // Selection
14296
- &::selection,
14297
- .k-input::selection {
14298
- @include fill (
14299
- $color: $input-selected-text, // $primary-contrast,
14300
- $bg: $input-selected-bg // $primary
14301
- );
14302
- }
14303
-
14304
- .k-textbox-separator {
14305
- border-color: $input-separator-color;
14306
- opacity: $input-separator-opacity;
14307
- }
14308
-
14309
- // Focused
14310
- &:focus,
14311
- // &:focus-within,
14312
- &.k-state-focus,
14313
- &.k-state-focused {
14314
- @include fill (
14315
- $input-focused-text,
14316
- $input-focused-bg,
14317
- $input-focused-border
14318
- );
14319
- @include box-shadow( $input-focused-shadow );
14320
- }
14321
- &:focus-within {
14322
- @include fill (
14323
- $input-focused-text,
14324
- $input-focused-bg,
14325
- $input-focused-border
14326
- );
14327
- @include box-shadow( $input-focused-shadow );
14328
- }
14329
-
14330
- // Hovered
14331
- &:hover,
14332
- &.k-state-hover {
14333
- @include fill(
14334
- $input-hovered-text,
14335
- $input-hovered-bg,
14336
- $input-hovered-border
14337
- );
14338
- }
14339
-
14340
- // Invalid
14341
- &.k-invalid,
14342
- &.k-state-invalid,
14343
- &.ng-invalid.ng-touched,
14344
- &.ng-invalid.ng-dirty {
14345
- border-color: $invalid-border;
14346
-
14347
- .k-input-validation-icon {
14348
- color: $invalid-text;
14349
- }
14350
-
14351
- &:focus,
14352
- // &:focus-within,
14353
- &.k-state-focus,
14354
- &.k-state-focused {
14355
- @include box-shadow($invalid-shadow);
14356
- }
14357
- &:focus-within {
14358
- @include box-shadow($invalid-shadow);
14359
- }
14360
- }
14361
- }
14362
- }
14363
-
14364
- // #endregion
14365
-
14366
- // #endregion
14367
-
14368
- // #endregion
14369
- // #region @import "textarea/_index.scss"; -> packages/material/scss/textarea/_index.scss
14370
- // #region @import "../core/_index.scss"; -> packages/material/scss/core/_index.scss
14371
- // File already imported_once. Skipping output.
14372
- // #endregion
14373
-
14374
-
14375
- // Dependencies
14376
- // #region @import "../common/_index.scss"; -> packages/material/scss/common/_index.scss
14377
- // File already imported_once. Skipping output.
14378
- // #endregion
14379
- // #region @import "../input/_index.scss"; -> packages/material/scss/input/_index.scss
14380
- // File already imported_once. Skipping output.
14381
- // #endregion
14382
- // #region @import "../floating-label/_index.scss"; -> packages/material/scss/floating-label/_index.scss
14383
- // File already imported_once. Skipping output.
14384
- // #endregion
14385
-
14386
-
14387
- // Component
14388
- // #region @import "_variables.scss"; -> packages/material/scss/textarea/_variables.scss
14389
- // Textarea
14390
- $textarea-default-width: 18em !default;
14391
-
14392
- $textarea-border-width: $input-border-width !default;
14393
- $textarea-border-height: $input-border-height !default;
14394
- $textarea-border-radius: $input-border-radius !default;
14395
- $textarea-border-radius-sm: $input-border-radius-sm !default;
14396
- $textarea-border-radius-lg: $input-border-radius-lg !default;
14397
-
14398
- $textarea-padding-x: $input-padding-x !default;
14399
- $textarea-padding-y: $input-padding-y !default;
14400
- $textarea-font-family: $input-font-family !default;
14401
- $textarea-font-size: $input-font-size !default;
14402
- $textarea-line-height: $input-line-height !default;
14403
- $textarea-line-height-em: $input-line-height-em !default;
14404
-
14405
- $textarea-padding-x-sm: $input-padding-x-sm !default;
14406
- $textarea-padding-y-sm: $input-padding-y-sm !default;
14407
- $textarea-font-size-sm: $input-font-size-sm !default;
14408
- $textarea-line-height-sm: $input-line-height-sm !default;
14409
-
14410
- $textarea-padding-x-lg: $input-padding-x-lg !default;
14411
- $textarea-padding-y-lg: $input-padding-y-lg !default;
14412
- $textarea-font-size-lg: $input-font-size-lg !default;
14413
- $textarea-line-height-lg: $input-line-height-lg !default;
14414
-
14415
- $textarea-calc-height: $input-calc-height !default;
14416
- $textarea-calc-height-sm: $input-calc-height-sm !default;
14417
- $textarea-calc-height-lg: $input-calc-height-lg !default;
14418
-
14419
- $textarea-floating-label-padding: 3px !default;
14420
-
14421
- $textarea-bg: $input-bg !default;
14422
- $textarea-text: $input-text !default;
14423
- $textarea-border: $input-border !default;
14424
- $textarea-shadow: $input-shadow !default;
14425
-
14426
- $textarea-hover-text: $input-hovered-text !default;
14427
- $textarea-hover-bg: $input-hovered-bg !default;
14428
- $textarea-hover-border: $input-hovered-border !default;
14429
- $textarea-hover-shadow: $input-hovered-shadow !default;
14430
-
14431
- $textarea-focus-text: $input-focused-text !default;
14432
- $textarea-focus-bg: $input-focused-bg !default;
14433
- $textarea-focus-border: $input-focused-border !default;
14434
- $textarea-focus-shadow: $input-focused-shadow !default;
14435
-
14436
- $textarea-placeholder-text: $input-placeholder-text !default;
14437
- $textarea-placeholder-opacity: $input-placeholder-opacity !default;
14438
-
14439
- $textarea-selected-bg: $input-selected-bg !default;
14440
- $textarea-selected-text: $input-selected-text !default;
14441
-
14442
- $textarea-invalid-focus-shadow: null !default;
14443
-
14444
- // #endregion
14445
- // #region @import "_layout.scss"; -> packages/material/scss/textarea/_layout.scss
14446
- // #region @import "~@progress/kendo-theme-default/scss/textarea/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/textarea/_layout.scss
14447
- @include exports( "textarea/layout" ) {
14448
-
14449
- // Textarea
14450
- .k-textarea {
14451
- @include border-radius( $textarea-border-radius );
14452
- margin: 0;
14453
- padding: 0;
14454
- width: $textarea-default-width;
14455
- border-width: $textarea-border-width;
14456
- border-style: solid;
14457
- outline: 0;
14458
- font-family: $textarea-font-family;
14459
- font-size: $textarea-font-size;
14460
- line-height: $textarea-line-height;
14673
+ font-size: $input-font-size;
14674
+ line-height: $input-line-height;
14461
14675
  box-sizing: border-box;
14462
14676
  // Targets https://github.com/telerik/kendo-react/issues/638.
14463
14677
  box-shadow: none;
14464
14678
  background: none;
14465
14679
  display: inline-flex;
14466
- flex-wrap: nowrap;
14680
+ flex-flow: row nowrap;
14681
+ align-items: center;
14467
14682
  vertical-align: middle;
14468
14683
  position: relative;
14469
14684
  -webkit-appearance: none;
@@ -14477,13 +14692,24 @@ $textarea-invalid-focus-shadow: null !default;
14477
14692
  opacity: $input-placeholder-opacity;
14478
14693
  user-select: none;
14479
14694
  }
14695
+ &:-ms-input-placeholder {
14696
+ color: $input-placeholder-text;
14697
+ }
14480
14698
 
14481
- > .k-input {
14482
- padding: $textarea-padding-y $textarea-padding-x;
14483
- height: auto;
14484
- min-height: $textarea-calc-height;
14485
- overflow-y: auto;
14486
- resize: vertical;
14699
+ .k-input {}
14700
+
14701
+ .k-button-clear {
14702
+ width: $button-inner-calc-size;
14703
+ height: $button-inner-calc-size;
14704
+ border: 0;
14705
+ }
14706
+
14707
+ .k-textbox-separator {
14708
+ margin: 0;
14709
+ width: 0;
14710
+ height: $icon-size;
14711
+ border-width: 0 0 0 1px;
14712
+ border-style: solid;
14487
14713
  }
14488
14714
 
14489
14715
  // Disabled state
@@ -14497,180 +14723,57 @@ $textarea-invalid-focus-shadow: null !default;
14497
14723
  @include fill (
14498
14724
  $color: $input-text,
14499
14725
  $bg: transparent
14500
- // $bg: rgba( contrast-wcag( $input-bg ), .1 )
14501
14726
  );
14502
14727
  }
14503
14728
  }
14504
14729
  }
14505
14730
 
14506
- .k-textarea-suffix {
14507
- flex-shrink: 0;
14508
- }
14509
-
14510
- // Textarea old rendering
14511
- textarea.k-textarea {
14512
- padding: $textarea-padding-y $textarea-padding-x;
14513
- min-height: $textarea-calc-height;
14514
- display: inline-block;
14515
- resize: both;
14516
- }
14517
14731
 
14518
- // Floating label
14519
- .k-textbox-container,
14520
- .k-floating-label-container {
14521
- > .k-textarea {
14522
- flex: 1 1 auto;
14523
- width: 100%;
14524
- }
14732
+ // Textbox
14733
+ input.k-textbox {
14734
+ padding: $input-padding-y $input-padding-x;
14525
14735
  }
14526
- }
14527
-
14528
-
14529
-
14530
-
14531
- @include exports("textarea/layout/IE") {
14532
- // TODO: Remove once we drop IE support
14533
14736
 
14534
- .k-ie {
14535
- .k-textarea {
14536
- :-ms-input-placeholder,
14537
- &:-ms-input-placeholder {
14538
- color: $input-placeholder-text;
14539
- }
14540
- }
14541
- }
14542
14737
  }
14543
14738
 
14544
14739
  // #endregion
14545
14740
 
14546
- @include exports("textarea/layout/material") {
14741
+ @include exports("textbox/layout/material") {
14547
14742
 
14548
- // Textarea
14549
- .k-textarea {
14743
+ // Textbox
14744
+ .k-textbox {
14550
14745
  @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
14551
14746
  border-width: $input-border-width 0;
14552
14747
  border-top-color: transparent !important; // sass-lint:disable-line no-important
14553
14748
  }
14554
14749
 
14555
- // Textarea Floating label
14556
- .k-floating-label-container.k-textarea-container,
14557
- .k-textbox-container.k-textarea-container {
14558
- padding-top: 0;
14559
-
14560
- textarea.k-textarea,
14561
- .k-textarea .k-input {
14562
- padding-top: calc( #{$textarea-padding-y} + #{$textarea-line-height-em} );
14563
- }
14564
-
14565
- .k-label {
14566
- font-size: $textarea-font-size;
14567
- transform: none;
14568
- top: $textarea-padding-y;
14569
- left: $textarea-padding-x;
14570
- }
14571
-
14572
- &:not(.k-state-empty),
14573
- &.k-state-focused {
14574
- > .k-label {
14575
- background: transparent;
14576
- transform: scale(.75);
14577
- transform-origin: top left;
14578
- }
14579
- }
14580
-
14581
- // Disable input ripple
14582
- &::after { display: none; }
14583
- }
14584
-
14585
- .k-rtl .k-floating-label-container.k-textarea-container,
14586
- .k-floating-label-container.k-textarea-container[dir="rtl"],
14587
- .k-rtl .k-textbox-container.k-textarea-container,
14588
- .k-textbox-container.k-textarea-container[dir="rtl"] {
14589
- > .k-label {
14590
- left: initial;
14591
- right: $textarea-padding-x;
14592
- }
14593
-
14594
- &:not(.k-state-empty),
14595
- &.k-state-focused {
14596
- > .k-label {
14597
- transform-origin: top right;
14598
- }
14599
- }
14600
- }
14601
- }
14602
-
14603
- @include exports ( "textarea/layout/legacy" ) {
14604
-
14605
- // Textarea Floating label Angular rendering
14606
- .k-textbox-container.k-textarea-wrapper,
14607
- .k-floating-label-container.k-textarea-wrapper {
14608
- padding-top: 0;
14609
-
14610
- .k-textarea {
14611
- padding-top: calc( #{$textarea-padding-y} + 14px );
14612
- }
14613
-
14614
- .k-label {
14615
- font-size: $textarea-font-size;
14616
- transform: none;
14617
- top: $textarea-padding-y;
14618
- left: $textarea-padding-x;
14619
- }
14620
-
14621
- &:not(.k-state-empty),
14622
- &.k-state-focused {
14623
- > .k-label {
14624
- background: transparent;
14625
- transform: scale(.75);
14626
- transform-origin: top left;
14627
- }
14628
- }
14629
-
14630
- // Disable input ripple
14631
- &::after { display: none; }
14632
- }
14633
- .k-rtl .k-textbox-container.k-textarea-wrapper,
14634
- .k-textbox-container.k-textarea-wrapper[dir="rtl"] {
14635
- > .k-label {
14636
- left: initial;
14637
- right: $textarea-padding-x;
14638
- transform-origin: top right;
14639
- }
14640
- }
14641
14750
  }
14642
14751
 
14643
-
14644
14752
  // #endregion
14645
- // #region @import "_theme.scss"; -> packages/material/scss/textarea/_theme.scss
14646
- // #region @import "~@progress/kendo-theme-default/scss/textarea/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/textarea/_theme.scss
14647
- @include exports("textarea/theme") {
14753
+ // #region @import "_theme.scss"; -> packages/material/scss/textbox/_theme.scss
14754
+ // #region @import "~@progress/kendo-theme-default/scss/textbox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/textbox/_theme.scss
14755
+ @include exports("textbox/theme") {
14648
14756
 
14649
- // Textarea
14650
- .k-textarea {
14757
+ // Textbox
14758
+ .k-textbox {
14651
14759
  @include fill(
14652
- $textarea-text,
14653
- $textarea-bg,
14654
- $textarea-border
14760
+ $input-text,
14761
+ $input-bg,
14762
+ $input-border
14655
14763
  );
14656
14764
 
14657
14765
  // Selection
14658
14766
  &::selection,
14659
14767
  .k-input::selection {
14660
14768
  @include fill (
14661
- $color: $textarea-selected-text, // $primary-contrast,
14662
- $bg: $textarea-selected-bg // $primary
14769
+ $color: $input-selected-text, // $primary-contrast,
14770
+ $bg: $input-selected-bg // $primary
14663
14771
  );
14664
14772
  }
14665
14773
 
14666
- // Hovered
14667
- &:hover,
14668
- &.k-state-hover {
14669
- @include fill(
14670
- $textarea-hover-text,
14671
- $textarea-hover-bg,
14672
- $textarea-hover-border
14673
- );
14774
+ .k-textbox-separator {
14775
+ border-color: $input-separator-color;
14776
+ opacity: $input-separator-opacity;
14674
14777
  }
14675
14778
 
14676
14779
  // Focused
@@ -14678,20 +14781,30 @@ $textarea-invalid-focus-shadow: null !default;
14678
14781
  // &:focus-within,
14679
14782
  &.k-state-focus,
14680
14783
  &.k-state-focused {
14681
- @include fill(
14682
- $textarea-focus-text,
14683
- $textarea-focus-bg,
14684
- $textarea-focus-border
14784
+ @include fill (
14785
+ $input-focused-text,
14786
+ $input-focused-bg,
14787
+ $input-focused-border
14685
14788
  );
14686
- @include box-shadow( $textarea-focus-shadow );
14789
+ @include box-shadow( $input-focused-shadow );
14687
14790
  }
14688
14791
  &:focus-within {
14792
+ @include fill (
14793
+ $input-focused-text,
14794
+ $input-focused-bg,
14795
+ $input-focused-border
14796
+ );
14797
+ @include box-shadow( $input-focused-shadow );
14798
+ }
14799
+
14800
+ // Hovered
14801
+ &:hover,
14802
+ &.k-state-hover {
14689
14803
  @include fill(
14690
- $textarea-focus-text,
14691
- $textarea-focus-bg,
14692
- $textarea-focus-border
14804
+ $input-hovered-text,
14805
+ $input-hovered-bg,
14806
+ $input-hovered-border
14693
14807
  );
14694
- @include box-shadow( $textarea-focus-shadow );
14695
14808
  }
14696
14809
 
14697
14810
  // Invalid
@@ -14709,15 +14822,13 @@ $textarea-invalid-focus-shadow: null !default;
14709
14822
  // &:focus-within,
14710
14823
  &.k-state-focus,
14711
14824
  &.k-state-focused {
14712
- @include box-shadow( $textarea-invalid-focus-shadow );
14825
+ @include box-shadow($invalid-shadow);
14713
14826
  }
14714
-
14715
14827
  &:focus-within {
14716
- @include box-shadow( $textarea-invalid-focus-shadow );
14828
+ @include box-shadow($invalid-shadow);
14717
14829
  }
14718
14830
  }
14719
14831
  }
14720
-
14721
14832
  }
14722
14833
 
14723
14834
  // #endregion
@@ -14725,507 +14836,367 @@ $textarea-invalid-focus-shadow: null !default;
14725
14836
  // #endregion
14726
14837
 
14727
14838
  // #endregion
14728
- // #region @import "checkbox/_index.scss"; -> packages/material/scss/checkbox/_index.scss
14839
+ // #region @import "textarea/_index.scss"; -> packages/material/scss/textarea/_index.scss
14729
14840
  // #region @import "../core/_index.scss"; -> packages/material/scss/core/_index.scss
14730
14841
  // File already imported_once. Skipping output.
14731
14842
  // #endregion
14732
14843
 
14733
14844
 
14734
14845
  // Dependencies
14735
- // #region @import "../list/_variables.scss"; -> packages/material/scss/list/_variables.scss
14846
+ // #region @import "../common/_index.scss"; -> packages/material/scss/common/_index.scss
14736
14847
  // File already imported_once. Skipping output.
14737
14848
  // #endregion
14738
-
14739
-
14740
- // Component
14741
- // #region @import "_variables.scss"; -> packages/material/scss/checkbox/_variables.scss
14742
- // Checkbox
14743
- $checkbox-size: map-get( $spacing, 4 ) !default;
14744
- $checkbox-radius: map-get( $spacing, thin ) !default;
14745
- $checkbox-border-width: 2px !default;
14746
- $checkbox-line-height: calc( #{$checkbox-size} + #{$checkbox-border-width} ) !default;
14747
-
14748
- $checkbox-bg: null !default;
14749
- $checkbox-text: transparent !default;
14750
- $checkbox-border: rgba( if( $dark-theme, $white, $black ), .54 ) !default;
14751
-
14752
- $checkbox-hovered-bg: null !default;
14753
- $checkbox-hovered-text: null !default;
14754
- $checkbox-hovered-border: rgba( if( $dark-theme, $white, $black ), .87 ) !default;
14755
-
14756
- $checkbox-checked-bg: $primary !default;
14757
- $checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
14758
- $checkbox-checked-border: $checkbox-checked-bg !default;
14759
-
14760
- $checkbox-indeterminate-bg: $checkbox-checked-bg !default;
14761
- $checkbox-indeterminate-text: $checkbox-checked-text !default;
14762
- $checkbox-indeterminate-border: $checkbox-checked-border !default;
14763
-
14764
- $checkbox-focused-border: $checkbox-border !default;
14765
- $checkbox-focused-shadow: none !default;
14766
- $checkbox-focused-checked-border: $checkbox-checked-border !default;
14767
- $checkbox-focused-checked-shadow: none !default;
14768
-
14769
- $checkbox-disabled-bg: null !default;
14770
- $checkbox-disabled-text: null !default;
14771
- $checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
14772
-
14773
- $checkbox-disabled-checked-bg: $checkbox-disabled-border !default;
14774
- $checkbox-disabled-checked-text: contrast-wcag( $checkbox-disabled-checked-bg ) !default;
14775
- $checkbox-disabled-checked-border: $checkbox-disabled-checked-bg !default;
14776
-
14777
- $checkbox-invalid-bg: null !default;
14778
- $checkbox-invalid-text: $invalid-text !default;
14779
- $checkbox-invalid-border: $invalid-border !default;
14780
-
14781
-
14782
- // Checkbox indicator
14783
- $checkbox-icon-type: image !default;
14784
-
14785
- $checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
14786
- $checkbox-glyph-size: 10px !default;
14787
- $checkbox-checked-glyph: "\e118" !default;
14788
- $checkbox-indeterminate-glyph: "\e121" !default;
14789
-
14790
- $checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
14791
- $checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
14792
-
14793
- $checkbox-marker-checked-width: 10px !default;
14794
- $checkbox-marker-checked-height: 10px !default;
14795
- $checkbox-marker-indeterminate-width: 10px !default;
14796
- $checkbox-marker-indeterminate-height: 2px !default;
14797
-
14798
-
14799
- // Checkbox label
14800
- $checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
14801
-
14802
-
14803
- // Checkbox list
14804
- $checkbox-list-margin: 0px !default;
14805
- $checkbox-list-padding: 0px !default;
14806
- $checkbox-list-item-padding-x: 0px !default;
14807
- $checkbox-list-item-padding-y: $list-item-padding-y !default;
14808
- $checkbox-list-horizontal-item-margin-x: 32px !default;
14809
-
14810
-
14811
- // Checkbox ripple
14812
- $checkbox-ripple-size: $checkbox-size * 3 !default;
14813
- $checkbox-ripple-margin: calc(-1 * (#{$checkbox-size} + #{$checkbox-border-width})) !default;
14814
- $checkbox-ripple-opacity: .38 !default;
14815
-
14849
+ // #region @import "../input/_index.scss"; -> packages/material/scss/input/_index.scss
14850
+ // File already imported_once. Skipping output.
14851
+ // #endregion
14852
+ // #region @import "../floating-label/_index.scss"; -> packages/material/scss/floating-label/_index.scss
14853
+ // File already imported_once. Skipping output.
14816
14854
  // #endregion
14817
- // #region @import "_layout.scss"; -> packages/material/scss/checkbox/_layout.scss
14818
- // #region @import "~@progress/kendo-theme-default/scss/checkbox/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/checkbox/_layout.scss
14819
- @include exports( "checkbox/layout" ) {
14820
-
14821
- // Checkbox
14822
- .k-checkbox {
14823
- @include border-radius( $checkbox-radius );
14824
- margin: 0;
14825
- padding: 0;
14826
- width: $checkbox-size;
14827
- height: $checkbox-size;
14828
- line-height: initial;
14829
- border-width: $checkbox-border-width;
14830
- border-style: solid;
14831
- outline: 0;
14832
- box-sizing: border-box;
14833
- background-position: center;
14834
- background-repeat: no-repeat;
14835
- background-size: contain;
14836
- display: inline-block;
14837
- vertical-align: middle;
14838
- position: relative;
14839
- cursor: pointer;
14840
- -webkit-appearance: none;
14841
- }
14842
-
14843
- // Checkbox indicator
14844
- .k-checkbox::before {
14845
- @if $checkbox-icon-type == "glyph" {
14846
- content: $checkbox-checked-glyph;
14847
- width: $checkbox-glyph-size;
14848
- height: $checkbox-glyph-size;
14849
- font-size: $checkbox-glyph-size;
14850
- font-family: $checkbox-glyph-font-family;
14851
- line-height: 1;
14852
- transform: scale(0) translate(-50%, -50%);
14853
- overflow: hidden;
14854
- position: absolute;
14855
- top: 50%;
14856
- left: 50%;
14857
- }
14858
-
14859
- @if $checkbox-icon-type == "marker" {
14860
- content: "";
14861
- width: $checkbox-marker-checked-width;
14862
- height: $checkbox-marker-checked-height;
14863
- background-color: currentColor;
14864
- transform: scale(0) translate(-50%, -50%);
14865
- overflow: hidden;
14866
- position: absolute;
14867
- top: 50%;
14868
- left: 50%;
14869
- }
14870
- }
14871
-
14872
-
14873
- // Checked state
14874
- .k-checkbox:checked,
14875
- .k-checkbox.k-checked {
14876
- @if $checkbox-icon-type == "image" {
14877
- background-image: $checkbox-checked-image;
14878
- }
14879
-
14880
- @if $checkbox-icon-type == "glyph" {
14881
- &::before {
14882
- transform: scale(1) translate(-50%, -50%);
14883
- }
14884
- }
14885
-
14886
- @if $checkbox-icon-type == "marker" {
14887
- &::before {
14888
- transform: scale(1) translate(-50%, -50%);
14889
- }
14890
- }
14891
- }
14892
-
14893
-
14894
- // Indeterminate state
14895
- .k-checkbox:indeterminate,
14896
- .k-checkbox.k-indeterminate,
14897
- .k-checkbox.k-state-indeterminate {
14898
- @if $checkbox-icon-type == "image" {
14899
- background-image: $checkbox-indeterminate-image;
14900
- }
14901
14855
 
14902
- @if $checkbox-icon-type == "glyph" {
14903
- &::before {
14904
- content: $checkbox-indeterminate-glyph;
14905
- transform: scale(1) translate(-50%, -50%);
14906
- }
14907
- }
14908
14856
 
14909
- @if $checkbox-icon-type == "marker" {
14910
- &::before {
14911
- width: $checkbox-maker-indeterminate-width;
14912
- height: $checkbox-marker-indeterminate-height;
14913
- transform: scale(1) translate(-50%, -50%);
14914
- }
14915
- }
14916
- }
14857
+ // Component
14858
+ // #region @import "_variables.scss"; -> packages/material/scss/textarea/_variables.scss
14859
+ // Textarea
14860
+ $textarea-default-width: 18em !default;
14917
14861
 
14862
+ $textarea-border-width: $input-border-width !default;
14863
+ $textarea-border-height: $input-border-height !default;
14864
+ $textarea-border-radius: $input-border-radius !default;
14865
+ $textarea-border-radius-sm: $input-border-radius-sm !default;
14866
+ $textarea-border-radius-lg: $input-border-radius-lg !default;
14918
14867
 
14919
- // Disabled state
14920
- .k-checkbox:disabled,
14921
- .k-checkbox.k-disabled,
14922
- .k-checkbox:disabled + .k-checkbox-label,
14923
- .k-checkbox.k-disabled + .k-checkbox-label {
14924
- @include disabled( $disabled-styling );
14925
- }
14868
+ $textarea-padding-x: $input-padding-x !default;
14869
+ $textarea-padding-y: $input-padding-y !default;
14870
+ $textarea-font-family: $input-font-family !default;
14871
+ $textarea-font-size: $input-font-size !default;
14872
+ $textarea-line-height: $input-line-height !default;
14873
+ $textarea-line-height-em: $input-line-height-em !default;
14926
14874
 
14927
- // Checkbox label
14928
- .k-checkbox-label {
14929
- margin: 0;
14930
- padding: 0;
14931
- line-height: $checkbox-line-height;
14932
- display: inline-flex;
14933
- align-items: flex-start;
14934
- vertical-align: middle;
14935
- position: relative;
14936
- cursor: pointer;
14875
+ $textarea-padding-x-sm: $input-padding-x-sm !default;
14876
+ $textarea-padding-y-sm: $input-padding-y-sm !default;
14877
+ $textarea-font-size-sm: $input-font-size-sm !default;
14878
+ $textarea-line-height-sm: $input-line-height-sm !default;
14937
14879
 
14938
- .k-label {
14939
- cursor: pointer;
14940
- }
14880
+ $textarea-padding-x-lg: $input-padding-x-lg !default;
14881
+ $textarea-padding-y-lg: $input-padding-y-lg !default;
14882
+ $textarea-font-size-lg: $input-font-size-lg !default;
14883
+ $textarea-line-height-lg: $input-line-height-lg !default;
14941
14884
 
14942
- .k-ripple {
14943
- top: $checkbox-size / 2;
14944
- left: $checkbox-size / 2;
14945
- right: auto;
14946
- bottom: auto;
14947
- width: $checkbox-size * 5 / 2;
14948
- height: $checkbox-size * 5 / 2;
14949
- transform: translate(-50%, -50%);
14950
- border-radius: 50%;
14885
+ $textarea-calc-height: $input-calc-height !default;
14886
+ $textarea-calc-height-sm: $input-calc-height-sm !default;
14887
+ $textarea-calc-height-lg: $input-calc-height-lg !default;
14951
14888
 
14952
- // Hide ripple temporarily
14953
- visibility: hidden !important; // sass-lint:disable-line no-important
14954
- }
14889
+ $textarea-floating-label-padding: 3px !default;
14955
14890
 
14956
- .k-ripple-blob {
14957
- // sass-lint:disable-block no-important
14958
- // use !important until ripple can apply these styles from the script
14959
- top: 50% !important;
14960
- left: 50% !important;
14961
- width: 200% !important;
14962
- height: 200% !important;
14963
- }
14964
- }
14965
- .k-checkbox + .k-checkbox-label {
14966
- display: inline;
14967
- }
14968
- .k-checkbox + .k-checkbox-label,
14969
- .k-checkbox-label + .k-checkbox {
14970
- margin-left: $checkbox-label-margin-x;
14971
- }
14972
- .k-checkbox-label > .k-checkbox {
14973
- margin-right: $checkbox-label-margin-x;
14974
- flex-shrink: 0;
14975
- }
14976
- kendo-label.k-checkbox-label > .k-checkbox:last-child {
14977
- margin-right: 0;
14978
- }
14979
- kendo-label.k-checkbox-label > .k-label:first-child {
14980
- margin-right: $checkbox-label-margin-x;
14981
- }
14982
- kendo-label.k-checkbox-label > .k-label {
14983
- display: inline;
14984
- }
14891
+ $textarea-bg: $input-bg !default;
14892
+ $textarea-text: $input-text !default;
14893
+ $textarea-border: $input-border !default;
14894
+ $textarea-shadow: $input-shadow !default;
14985
14895
 
14896
+ $textarea-hover-text: $input-hovered-text !default;
14897
+ $textarea-hover-bg: $input-hovered-bg !default;
14898
+ $textarea-hover-border: $input-hovered-border !default;
14899
+ $textarea-hover-shadow: $input-hovered-shadow !default;
14986
14900
 
14987
- // Empty label
14988
- .k-checkbox-label:empty {
14989
- display: none;
14990
- }
14901
+ $textarea-focus-text: $input-focused-text !default;
14902
+ $textarea-focus-bg: $input-focused-bg !default;
14903
+ $textarea-focus-border: $input-focused-border !default;
14904
+ $textarea-focus-shadow: $input-focused-shadow !default;
14991
14905
 
14906
+ $textarea-placeholder-text: $input-placeholder-text !default;
14907
+ $textarea-placeholder-opacity: $input-placeholder-opacity !default;
14992
14908
 
14993
- // Label with no text
14994
- .k-checkbox-label.k-no-text {
14995
- min-width: 1px;
14996
- }
14909
+ $textarea-selected-bg: $input-selected-bg !default;
14910
+ $textarea-selected-text: $input-selected-text !default;
14997
14911
 
14912
+ $textarea-invalid-focus-shadow: null !default;
14998
14913
 
14999
- // Checkbox list
15000
- .k-checkbox-list {
15001
- margin: $checkbox-list-margin;
15002
- padding: $checkbox-list-padding;
15003
- list-style: none;
14914
+ // #endregion
14915
+ // #region @import "_layout.scss"; -> packages/material/scss/textarea/_layout.scss
14916
+ // #region @import "~@progress/kendo-theme-default/scss/textarea/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/textarea/_layout.scss
14917
+ @include exports( "textarea/layout" ) {
15004
14918
 
15005
- .k-checkbox-item {
15006
- padding: $checkbox-list-item-padding-y $checkbox-list-item-padding-x;
15007
- }
15008
- }
14919
+ // Textarea
14920
+ .k-textarea {
14921
+ @include border-radius( $textarea-border-radius );
14922
+ margin: 0;
14923
+ padding: 0;
14924
+ width: $textarea-default-width;
14925
+ border-width: $textarea-border-width;
14926
+ border-style: solid;
14927
+ outline: 0;
14928
+ font-family: $textarea-font-family;
14929
+ font-size: $textarea-font-size;
14930
+ line-height: $textarea-line-height;
14931
+ box-sizing: border-box;
14932
+ // Targets https://github.com/telerik/kendo-react/issues/638.
14933
+ box-shadow: none;
14934
+ background: none;
14935
+ display: inline-flex;
14936
+ flex-wrap: nowrap;
14937
+ vertical-align: middle;
14938
+ position: relative;
14939
+ -webkit-appearance: none;
15009
14940
 
15010
- .k-list-horizontal {
15011
- .k-checkbox-item {
15012
- display: inline-block;
15013
- margin: 0 $checkbox-list-horizontal-item-margin-x 0 0;
14941
+ // Hide clear icon
14942
+ &::-ms-clear { display: none; }
15014
14943
 
15015
- &:last-child {
15016
- margin-right: 0;
15017
- }
14944
+ // Placeholder text
14945
+ &::placeholder {
14946
+ color: $input-placeholder-text;
14947
+ opacity: $input-placeholder-opacity;
14948
+ user-select: none;
15018
14949
  }
15019
- }
15020
14950
 
15021
-
15022
- // RTL
15023
- .k-rtl,
15024
- [dir="rtl"] {
15025
- .k-checkbox + .k-checkbox-label,
15026
- .k-checkbox-label + .k-checkbox {
15027
- margin-left: 0;
15028
- margin-right: $checkbox-label-margin-x;
15029
- }
15030
- .k-checkbox-label > .k-checkbox {
15031
- margin-right: 0;
15032
- margin-left: $checkbox-label-margin-x;
15033
- }
15034
- kendo-label.k-checkbox-label > .k-checkbox:last-child {
15035
- margin-left: 0;
15036
- }
15037
- kendo-label.k-checkbox-label > .k-label:first-child {
15038
- margin-right: 0;
15039
- margin-left: $checkbox-label-margin-x;
14951
+ > .k-input {
14952
+ padding: $textarea-padding-y $textarea-padding-x;
14953
+ height: auto;
14954
+ min-height: $textarea-calc-height;
14955
+ overflow-y: auto;
14956
+ resize: vertical;
15040
14957
  }
15041
14958
 
15042
- .k-list-horizontal {
15043
- .k-checkbox-item {
15044
- margin-right: 0;
15045
- margin-left: $checkbox-list-horizontal-item-margin-x;
14959
+ // Disabled state
14960
+ &:disabled,
14961
+ &[disabled],
14962
+ &.k-state-disabled {
14963
+ @include disabled( $disabled-styling );
15046
14964
 
15047
- &:last-child {
15048
- margin-left: 0;
15049
- }
14965
+ // Disabled selection
14966
+ &::selection {
14967
+ @include fill (
14968
+ $color: $input-text,
14969
+ $bg: transparent
14970
+ // $bg: rgba( contrast-wcag( $input-bg ), .1 )
14971
+ );
15050
14972
  }
15051
14973
  }
15052
14974
  }
15053
14975
 
15054
- .k-ripple-container {
15055
- .k-checkbox::after {
15056
- content: "";
15057
- display: block;
15058
- position: absolute;
15059
- left: 0;
15060
- top: 0;
15061
- width: $checkbox-ripple-size;
15062
- height: $checkbox-ripple-size;
15063
- margin-left: $checkbox-ripple-margin;
15064
- margin-top: $checkbox-ripple-margin;
15065
- border-radius: 100%;
15066
- z-index: 1;
15067
- transform: scale(0);
15068
- }
14976
+ .k-textarea-suffix {
14977
+ flex-shrink: 0;
14978
+ }
15069
14979
 
15070
- .k-checkbox:disabled::after,
15071
- .k-checkbox.k-disabled::after {
15072
- display: none;
15073
- }
14980
+ // Textarea old rendering
14981
+ textarea.k-textarea {
14982
+ padding: $textarea-padding-y $textarea-padding-x;
14983
+ min-height: $textarea-calc-height;
14984
+ display: inline-block;
14985
+ resize: both;
15074
14986
  }
15075
14987
 
14988
+ // Floating label
14989
+ .k-textbox-container,
14990
+ .k-floating-label-container {
14991
+ > .k-textarea {
14992
+ flex: 1 1 auto;
14993
+ width: 100%;
14994
+ }
14995
+ }
15076
14996
  }
15077
14997
 
15078
14998
 
15079
14999
 
15080
15000
 
15081
- @include exports( "checkbox/layout/edge" ) {
15001
+ @include exports("textarea/layout/IE") {
15002
+ // TODO: Remove once we drop IE support
15082
15003
 
15083
- .k-checkbox::-ms-check {
15084
- border-width: 1px;
15085
- border-color: inherit;
15086
- color: inherit;
15087
- background-color: inherit;
15004
+ .k-ie {
15005
+ .k-textarea {
15006
+ :-ms-input-placeholder,
15007
+ &:-ms-input-placeholder {
15008
+ color: $input-placeholder-text;
15009
+ }
15010
+ }
15088
15011
  }
15089
-
15090
15012
  }
15091
15013
 
15092
15014
  // #endregion
15093
15015
 
15094
- // #endregion
15095
- // #region @import "_theme.scss"; -> packages/material/scss/checkbox/_theme.scss
15096
- // #region @import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/checkbox/_theme.scss
15097
- @include exports("checkbox/theme") {
15016
+ @include exports("textarea/layout/material") {
15098
15017
 
15099
- // Checkbox
15100
- .k-checkbox {
15101
- @include fill(
15102
- $checkbox-text,
15103
- $checkbox-bg,
15104
- $checkbox-border
15105
- );
15018
+ // Textarea
15019
+ .k-textarea {
15020
+ @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
15021
+ border-width: $input-border-width 0;
15022
+ border-top-color: transparent !important; // sass-lint:disable-line no-important
15106
15023
  }
15107
15024
 
15025
+ // Textarea Floating label
15026
+ .k-floating-label-container.k-textarea-container,
15027
+ .k-textbox-container.k-textarea-container {
15028
+ padding-top: 0;
15108
15029
 
15109
- // Hover state
15110
- .k-checkbox:hover,
15111
- .k-checkbox.k-state-hover {
15112
- @include fill(
15113
- $checkbox-hovered-text,
15114
- $checkbox-hovered-bg,
15115
- $checkbox-hovered-border
15116
- );
15117
- }
15118
-
15030
+ textarea.k-textarea,
15031
+ .k-textarea .k-input {
15032
+ padding-top: calc( #{$textarea-padding-y} + #{$textarea-line-height-em} );
15033
+ }
15119
15034
 
15120
- // Focus state
15121
- .k-checkbox:focus,
15122
- .k-checkbox.k-state-focus {
15123
- @include fill( $border: $checkbox-focused-border );
15124
- @include box-shadow( $checkbox-focused-shadow );
15125
- }
15035
+ .k-label {
15036
+ font-size: $textarea-font-size;
15037
+ transform: none;
15038
+ top: $textarea-padding-y;
15039
+ left: $textarea-padding-x;
15040
+ }
15126
15041
 
15042
+ &:not(.k-state-empty),
15043
+ &.k-state-focused {
15044
+ > .k-label {
15045
+ background: transparent;
15046
+ transform: scale(.75);
15047
+ transform-origin: top left;
15048
+ }
15049
+ }
15127
15050
 
15128
- // Indeterminate
15129
- .k-checkbox:indeterminate,
15130
- .k-checkbox.k-state-indeterminate,
15131
- .k-checkbox.k-indeterminate {
15132
- @include fill(
15133
- $checkbox-indeterminate-text,
15134
- $checkbox-indeterminate-bg,
15135
- $checkbox-indeterminate-border
15136
- );
15051
+ // Disable input ripple
15052
+ &::after { display: none; }
15137
15053
  }
15138
15054
 
15055
+ .k-rtl .k-floating-label-container.k-textarea-container,
15056
+ .k-floating-label-container.k-textarea-container[dir="rtl"],
15057
+ .k-rtl .k-textbox-container.k-textarea-container,
15058
+ .k-textbox-container.k-textarea-container[dir="rtl"] {
15059
+ > .k-label {
15060
+ left: initial;
15061
+ right: $textarea-padding-x;
15062
+ }
15139
15063
 
15140
- // Checked
15141
- .k-checkbox:checked,
15142
- .k-checkbox.k-checked {
15143
- @include fill(
15144
- $checkbox-checked-text,
15145
- $checkbox-checked-bg,
15146
- $checkbox-checked-border
15147
- );
15148
- }
15149
- .k-checkbox:checked:focus,
15150
- .k-checkbox.k-checked.k-state-focus {
15151
- @include fill( $border: $checkbox-focused-checked-border );
15152
- @include box-shadow( $checkbox-focused-checked-shadow );
15064
+ &:not(.k-state-empty),
15065
+ &.k-state-focused {
15066
+ > .k-label {
15067
+ transform-origin: top right;
15068
+ }
15069
+ }
15153
15070
  }
15071
+ }
15154
15072
 
15073
+ @include exports ( "textarea/layout/legacy" ) {
15155
15074
 
15156
- // Disabled
15157
- .k-checkbox:disabled,
15158
- .k-checkbox.k-disabled {
15159
- @include fill(
15160
- $checkbox-disabled-text,
15161
- $checkbox-disabled-bg,
15162
- $checkbox-disabled-border
15163
- );
15164
- }
15165
- .k-checkbox:checked:disabled,
15166
- .k-checkbox:indeterminate:disabled,
15167
- .k-checkbox.k-state-indeterminate:disabled,
15168
- .k-checkbox.k-checked.k-disabled,
15169
- .k-checkbox.k-indeterminate.k-disabled {
15170
- @include fill(
15171
- $checkbox-disabled-checked-text,
15172
- $checkbox-disabled-checked-bg,
15173
- $checkbox-disabled-checked-border
15174
- );
15175
- }
15075
+ // Textarea Floating label Angular rendering
15076
+ .k-textbox-container.k-textarea-wrapper,
15077
+ .k-floating-label-container.k-textarea-wrapper {
15078
+ padding-top: 0;
15176
15079
 
15080
+ .k-textarea {
15081
+ padding-top: calc( #{$textarea-padding-y} + 14px );
15082
+ }
15177
15083
 
15178
- // Invalid
15179
- .k-checkbox.k-invalid,
15180
- .k-checkbox.k-state-invalid,
15181
- .k-checkbox.ng-invalid.ng-touched,
15182
- .k-checkbox.ng-invalid.ng-dirty {
15183
- @include fill( $border: $checkbox-invalid-border );
15184
- }
15185
- .k-checkbox.k-invalid + .k-checkbox-label,
15186
- .k-checkbox.k-state-invalid + .k-checkbox-label,
15187
- .k-checkbox.ng-invalid.ng-touched + .k-checkbox-label,
15188
- .k-checkbox.ng-invalid.ng-dirty + .k-checkbox-label {
15189
- @include fill( $color: $checkbox-invalid-text );
15190
- }
15084
+ .k-label {
15085
+ font-size: $textarea-font-size;
15086
+ transform: none;
15087
+ top: $textarea-padding-y;
15088
+ left: $textarea-padding-x;
15089
+ }
15191
15090
 
15091
+ &:not(.k-state-empty),
15092
+ &.k-state-focused {
15093
+ > .k-label {
15094
+ background: transparent;
15095
+ transform: scale(.75);
15096
+ transform-origin: top left;
15097
+ }
15098
+ }
15192
15099
 
15193
- // Ripple
15194
- .k-ripple-container {
15195
- .k-checkbox::after {
15196
- background: $checkbox-checked-bg;
15197
- opacity: $checkbox-ripple-opacity;
15100
+ // Disable input ripple
15101
+ &::after { display: none; }
15102
+ }
15103
+ .k-rtl .k-textbox-container.k-textarea-wrapper,
15104
+ .k-textbox-container.k-textarea-wrapper[dir="rtl"] {
15105
+ > .k-label {
15106
+ left: initial;
15107
+ right: $textarea-padding-x;
15108
+ transform-origin: top right;
15198
15109
  }
15199
15110
  }
15200
-
15201
15111
  }
15202
15112
 
15203
- // #endregion
15204
15113
 
15205
- @include exports("checkbox/theme/material") {
15114
+ // #endregion
15115
+ // #region @import "_theme.scss"; -> packages/material/scss/textarea/_theme.scss
15116
+ // #region @import "~@progress/kendo-theme-default/scss/textarea/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/textarea/_theme.scss
15117
+ @include exports("textarea/theme") {
15206
15118
 
15207
- // Checkbox
15208
- .k-checkbox-label {
15119
+ // Textarea
15120
+ .k-textarea {
15121
+ @include fill(
15122
+ $textarea-text,
15123
+ $textarea-bg,
15124
+ $textarea-border
15125
+ );
15209
15126
 
15210
- // Disabled state
15211
- .k-checkbox:disabled + & {
15212
- color: if($dark-theme, $light-secondary-text, $dark-secondary-text);
15213
- opacity: 1;
15214
- filter: none;
15127
+ // Selection
15128
+ &::selection,
15129
+ .k-input::selection {
15130
+ @include fill (
15131
+ $color: $textarea-selected-text, // $primary-contrast,
15132
+ $bg: $textarea-selected-bg // $primary
15133
+ );
15215
15134
  }
15216
15135
 
15136
+ // Hovered
15137
+ &:hover,
15138
+ &.k-state-hover {
15139
+ @include fill(
15140
+ $textarea-hover-text,
15141
+ $textarea-hover-bg,
15142
+ $textarea-hover-border
15143
+ );
15144
+ }
15217
15145
 
15218
- // Ripple
15219
- .k-ripple-blob {
15220
- opacity: .2;
15221
- background-color: $checkbox-checked-bg;
15146
+ // Focused
15147
+ &:focus,
15148
+ // &:focus-within,
15149
+ &.k-state-focus,
15150
+ &.k-state-focused {
15151
+ @include fill(
15152
+ $textarea-focus-text,
15153
+ $textarea-focus-bg,
15154
+ $textarea-focus-border
15155
+ );
15156
+ @include box-shadow( $textarea-focus-shadow );
15157
+ }
15158
+ &:focus-within {
15159
+ @include fill(
15160
+ $textarea-focus-text,
15161
+ $textarea-focus-bg,
15162
+ $textarea-focus-border
15163
+ );
15164
+ @include box-shadow( $textarea-focus-shadow );
15222
15165
  }
15223
15166
 
15167
+ // Invalid
15168
+ &.k-invalid,
15169
+ &.k-state-invalid,
15170
+ &.ng-invalid.ng-touched,
15171
+ &.ng-invalid.ng-dirty {
15172
+ border-color: $invalid-border;
15173
+
15174
+ .k-input-validation-icon {
15175
+ color: $invalid-text;
15176
+ }
15177
+
15178
+ &:focus,
15179
+ // &:focus-within,
15180
+ &.k-state-focus,
15181
+ &.k-state-focused {
15182
+ @include box-shadow( $textarea-invalid-focus-shadow );
15183
+ }
15184
+
15185
+ &:focus-within {
15186
+ @include box-shadow( $textarea-invalid-focus-shadow );
15187
+ }
15188
+ }
15224
15189
  }
15190
+
15225
15191
  }
15226
15192
 
15227
15193
  // #endregion
15228
15194
 
15195
+ // #endregion
15196
+
15197
+ // #endregion
15198
+ // #region @import "checkbox/_index.scss"; -> packages/material/scss/checkbox/_index.scss
15199
+ // File already imported_once. Skipping output.
15229
15200
  // #endregion
15230
15201
  // #region @import "listbox/_index.scss"; -> packages/material/scss/listbox/_index.scss
15231
15202
  // #region @import "../core/_index.scss"; -> packages/material/scss/core/_index.scss
@@ -15888,6 +15859,9 @@ $progressbar-chunk-border: $component-bg !default;
15888
15859
 
15889
15860
 
15890
15861
  // Dependencies
15862
+ // #region @import "../typography/_variables.scss"; -> packages/material/scss/typography/_variables.scss
15863
+ // File already imported_once. Skipping output.
15864
+ // #endregion
15891
15865
  // #region @import "../list/_variables.scss"; -> packages/material/scss/list/_variables.scss
15892
15866
  // File already imported_once. Skipping output.
15893
15867
  // #endregion
@@ -15989,6 +15963,7 @@ $radio-ripple-opacity: .3 !default;
15989
15963
  background-repeat: no-repeat;
15990
15964
  background-size: contain;
15991
15965
  display: inline-block;
15966
+ flex: none;
15992
15967
  vertical-align: middle;
15993
15968
  position: relative;
15994
15969
  cursor: pointer;
@@ -16074,7 +16049,7 @@ $radio-ripple-opacity: .3 !default;
16074
16049
 
16075
16050
  // Hide empty label
16076
16051
  &:empty {
16077
- display: none;
16052
+ display: none !important; // sass-lint:disable-line no-important
16078
16053
  }
16079
16054
 
16080
16055
  .k-ripple {
@@ -18476,19 +18451,19 @@ $autocomplete-disabled-shadow: null !default;
18476
18451
  width: $input-default-width;
18477
18452
  border-width: $input-border-width;
18478
18453
  border-style: solid;
18479
- outline: 0;
18480
18454
  box-sizing: border-box;
18455
+ outline: 0;
18481
18456
  font-family: $input-font-family;
18482
18457
  font-size: $input-font-size;
18483
18458
  line-height: $input-line-height;
18459
+ text-align: start;
18484
18460
  white-space: nowrap;
18485
18461
  display: inline-flex;
18486
18462
  flex-flow: row nowrap;
18487
- align-items: stretch;
18488
18463
  vertical-align: middle;
18489
- transition: all .1s ease; // sass-lint:disable-block no-transition-all
18490
18464
  position: relative;
18491
- cursor: default;
18465
+ overflow: hidden;
18466
+ transition: all .1s ease; // sass-lint:disable-line no-transition-all
18492
18467
  -webkit-touch-callout: none;
18493
18468
  -webkit-tap-highlight-color: $rgba-transparent;
18494
18469
 
@@ -19567,9 +19542,9 @@ $coloreditor-header-padding-y: $coloreditor-spacer !default;
19567
19542
  $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
19568
19543
  $coloreditor-header-actions-gap: map-get( $spacing, 2 ) !default;
19569
19544
 
19570
- $coloreditor-preview-gap: 2px !default;
19571
- $coloreditor-color-preview-width: 34px !default;
19572
- $coloreditor-color-preview-height: 14px !default;
19545
+ $coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
19546
+ $coloreditor-color-preview-width: 32px !default;
19547
+ $coloreditor-color-preview-height: 12px !default;
19573
19548
 
19574
19549
  $coloreditor-views-padding-y: $coloreditor-spacer !default;
19575
19550
  $coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
@@ -19606,8 +19581,12 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
19606
19581
  }
19607
19582
 
19608
19583
  .k-coloreditor-preview {
19609
- position: relative;
19584
+ display: flex;
19585
+ flex-flow: column nowrap;
19586
+ align-items: stretch;
19587
+ justify-content: center;
19610
19588
  gap: $coloreditor-preview-gap;
19589
+ position: relative;
19611
19590
  z-index: 1;
19612
19591
  }
19613
19592
  .k-coloreditor-preview .k-color-preview {
@@ -19770,6 +19749,12 @@ $colorpicker-select-focused-text: $input-text !default;
19770
19749
  position: relative;
19771
19750
  overflow: hidden;
19772
19751
  }
19752
+ .k-color-preview {
19753
+ margin: $button-padding-y;
19754
+ width: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
19755
+ height: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
19756
+ z-index: 1;
19757
+ }
19773
19758
 
19774
19759
  .k-tool-icon {
19775
19760
  padding: $button-padding-y;
@@ -20813,6 +20798,7 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
20813
20798
  // #region @import "_layout.scss"; -> packages/material/scss/dropdowngrid/_layout.scss
20814
20799
  // #region @import "~@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss
20815
20800
  @include exports("dropdowngrid/layout") {
20801
+
20816
20802
  .k-dropdowngrid-popup {
20817
20803
  overflow: hidden;
20818
20804
  }
@@ -21172,70 +21158,55 @@ $dropdownlist-select-focused-text: $input-text !default;
21172
21158
 
21173
21159
  // Dropdown list
21174
21160
  .k-dropdown {
21161
+ @include border-radius( $input-border-radius );
21175
21162
  width: $input-default-width;
21176
- border-width: 0;
21177
- outline: 0;
21178
- background: none;
21163
+ border-width: $input-border-width;
21164
+ border-style: solid;
21179
21165
  box-sizing: border-box;
21166
+ outline: 0;
21180
21167
  font-family: $input-font-family;
21181
21168
  font-size: $input-font-size;
21182
21169
  line-height: $input-line-height;
21183
- text-align: left;
21170
+ text-align: start;
21184
21171
  white-space: nowrap;
21185
21172
  display: inline-flex;
21173
+ flex-flow: row nowrap;
21186
21174
  vertical-align: middle;
21187
21175
  position: relative;
21176
+ overflow: hidden;
21177
+ transition: all .1s ease; // sass-lint:disable-line no-transition-all
21188
21178
  -webkit-touch-callout: none;
21189
21179
  -webkit-tap-highlight-color: $rgba-transparent;
21190
21180
 
21191
- .k-dropdown-wrap {
21192
- @include border-radius( $input-border-radius );
21193
- padding: 0;
21194
- width: 100%;
21195
- display: flex;
21196
- flex-flow: row nowrap;
21197
- border-width: 1px;
21198
- border-style: solid;
21199
- box-sizing: border-box;
21200
- position: relative;
21201
- transition: all .1s ease; // sass-lint:disable-line no-transition-all
21202
- cursor: pointer;
21203
- outline: 0;
21204
- overflow: hidden;
21205
-
21206
21181
 
21207
- // Input
21208
- .k-input {}
21182
+ // Input
21183
+ .k-input {}
21209
21184
 
21210
21185
 
21211
- // Select
21212
- .k-select {
21213
- padding: $picker-select-padding-y $picker-select-padding-x;
21214
- width: if( $use-picker-select-width, $button-inner-calc-size, null );
21215
- border-width: 0;
21216
- border-inline-start-width: $picker-select-border-width;
21217
- border-color: transparent;
21218
- box-sizing: border-box;
21219
- border-style: solid;
21220
- display: flex;
21221
- align-items: center;
21222
- justify-content: center;
21223
- flex: 0 0 auto;
21224
- text-align: center;
21225
- cursor: pointer;
21226
- }
21186
+ // Loading icon
21187
+ .k-i-loading {
21188
+ width: $input-icon-width;
21189
+ height: $input-icon-height;
21227
21190
  }
21228
21191
 
21229
- }
21230
-
21231
-
21232
- // RTL
21233
21192
 
21234
- .k-dropdown.k-rtl,
21235
- .k-dropdown[dir="rtl"],
21236
- .k-rtl .k-dropdown,
21237
- [dir="rtl"] .k-dropdown {
21238
- text-align: right;
21193
+ // Select
21194
+ .k-select {
21195
+ padding: $picker-select-padding-y $picker-select-padding-x;
21196
+ width: if( $use-picker-select-width, $spinner-width, null );
21197
+ border-width: 0;
21198
+ border-inline-start-width: $picker-select-border-width;
21199
+ border-style: solid;
21200
+ border-color: transparent;
21201
+ box-sizing: border-box;
21202
+ outline: 0;
21203
+ display: flex;
21204
+ flex-flow: row nowrap;
21205
+ align-items: center;
21206
+ justify-content: center;
21207
+ flex: 0 0 auto;
21208
+ cursor: pointer;
21209
+ }
21239
21210
  }
21240
21211
 
21241
21212
 
@@ -21244,16 +21215,13 @@ $dropdownlist-select-focused-text: $input-text !default;
21244
21215
  .k-dropdown-operator {
21245
21216
  width: auto;
21246
21217
 
21247
- .k-dropdown-wrap {
21248
- .k-input {
21249
- display: none;
21250
- }
21251
- .k-select {
21252
- width: $button-inner-calc-size;
21253
- height: $button-inner-calc-size;
21254
- }
21218
+ .k-input {
21219
+ display: none;
21220
+ }
21221
+ .k-select {
21222
+ width: $button-inner-calc-size;
21223
+ height: $button-inner-calc-size;
21255
21224
  }
21256
-
21257
21225
  }
21258
21226
 
21259
21227
 
@@ -21275,19 +21243,10 @@ $dropdownlist-select-focused-text: $input-text !default;
21275
21243
 
21276
21244
  // #endregion
21277
21245
 
21278
- @include exports("dropdownlist/layout/material") {
21246
+ @include exports( "dropdownlist/layout/material" ) {
21279
21247
 
21248
+ // Dropdown list
21280
21249
  .k-dropdown {
21281
- .k-dropdown-wrap {
21282
- @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
21283
- border-width: $input-border-width 0;
21284
- border-top-color: transparent !important; // sass-lint:disable-line no-important
21285
- }
21286
- }
21287
-
21288
-
21289
- // Native select
21290
- select.k-dropdown {
21291
21250
  @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
21292
21251
  border-width: $input-border-width 0;
21293
21252
  border-top-color: transparent !important; // sass-lint:disable-line no-important
@@ -21300,79 +21259,8 @@ $dropdownlist-select-focused-text: $input-text !default;
21300
21259
  // #region @import "~@progress/kendo-theme-default/scss/dropdownlist/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/dropdownlist/_theme.scss
21301
21260
  @include exports( "dropdownlist/theme" ) {
21302
21261
 
21262
+ // Dropdown list
21303
21263
  .k-dropdown {
21304
-
21305
- .k-dropdown-wrap {
21306
- @include fill(
21307
- $dropdownlist-text,
21308
- $dropdownlist-bg,
21309
- $dropdownlist-border,
21310
- $dropdownlist-gradient
21311
- );
21312
-
21313
- // Hover state
21314
- &:hover,
21315
- &.k-state-hover {
21316
- @include fill(
21317
- $dropdownlist-hovered-text,
21318
- $dropdownlist-hovered-bg,
21319
- $dropdownlist-hovered-border,
21320
- $dropdownlist-hovered-gradient
21321
- );
21322
- }
21323
-
21324
- &.k-state-active {}
21325
-
21326
- // Focused state
21327
- &.k-state-focused {
21328
- @include fill(
21329
- $dropdownlist-focused-text,
21330
- $dropdownlist-focused-bg,
21331
- $dropdownlist-focused-border,
21332
- $dropdownlist-focused-gradient
21333
- );
21334
- @include box-shadow($dropdownlist-focused-shadow);
21335
- }
21336
-
21337
- // Invalid state
21338
- &.k-invalid,
21339
- &.k-invalid:hover,
21340
- &.k-state-invalid {
21341
- border-color: $invalid-border;
21342
-
21343
- .k-input-validation-icon {
21344
- color: $invalid-text;
21345
- }
21346
-
21347
- &:focus,
21348
- &.k-state-focused {
21349
- @include box-shadow($invalid-shadow);
21350
- }
21351
- }
21352
- }
21353
-
21354
- // Invalid
21355
- &.k-state-invalid,
21356
- &.ng-invalid.ng-touched,
21357
- &.ng-invalid.ng-dirty {
21358
- > .k-dropdown-wrap {
21359
- border-color: $invalid-border;
21360
-
21361
- .k-input-validation-icon {
21362
- color: $invalid-text;
21363
- }
21364
-
21365
- &:focus,
21366
- &.k-state-focused {
21367
- @include box-shadow($invalid-shadow);
21368
- }
21369
- }
21370
- }
21371
-
21372
- }
21373
-
21374
- // Native select
21375
- select.k-dropdown {
21376
21264
  @include fill(
21377
21265
  $dropdownlist-text,
21378
21266
  $dropdownlist-bg,
@@ -21381,7 +21269,8 @@ $dropdownlist-select-focused-text: $input-text !default;
21381
21269
  );
21382
21270
 
21383
21271
  // Hover state
21384
- &:hover {
21272
+ &:hover,
21273
+ &.k-state-hover {
21385
21274
  @include fill(
21386
21275
  $dropdownlist-hovered-text,
21387
21276
  $dropdownlist-hovered-bg,
@@ -21390,8 +21279,18 @@ $dropdownlist-select-focused-text: $input-text !default;
21390
21279
  );
21391
21280
  }
21392
21281
 
21393
- // Focused state
21394
- &:focus {
21282
+ // Focus state
21283
+ &:focus,
21284
+ &.k-state-focus {
21285
+ @include fill(
21286
+ $dropdownlist-focused-text,
21287
+ $dropdownlist-focused-bg,
21288
+ $dropdownlist-focused-border,
21289
+ $dropdownlist-focused-gradient
21290
+ );
21291
+ @include box-shadow($dropdownlist-focused-shadow);
21292
+ }
21293
+ &:focus-within {
21395
21294
  @include fill(
21396
21295
  $dropdownlist-focused-text,
21397
21296
  $dropdownlist-focused-bg,
@@ -21400,45 +21299,32 @@ $dropdownlist-select-focused-text: $input-text !default;
21400
21299
  );
21401
21300
  @include box-shadow($dropdownlist-focused-shadow);
21402
21301
  }
21403
- }
21404
-
21405
- }
21406
-
21407
- // #endregion
21408
-
21409
- @include exports( "dropdownlist/theme/material" ) {
21410
-
21411
- .k-dropdown {
21412
- .k-dropdown-wrap {
21413
21302
 
21414
- .k-select {
21415
- color: $dropdownlist-select-text;
21416
- }
21417
21303
 
21418
- // Hover
21419
- &:hover,
21420
- &.k-state-hover {
21304
+ // Invalid state
21305
+ &.k-invalid,
21306
+ &.ng-invalid,
21307
+ &.k-state-invalid {
21308
+ border-color: $invalid-border;
21421
21309
 
21422
- .k-select {
21423
- color: $dropdownlist-select-hovered-text;
21424
- }
21310
+ .k-input-validation-icon {
21311
+ color: $invalid-text;
21425
21312
  }
21426
21313
 
21427
- // Focused
21428
- &.k-state-focused,
21429
- .k-state-focused > & {
21430
-
21431
- .k-select {
21432
- color: $dropdownlist-select-focused-text;
21433
- }
21314
+ &:focus-within,
21315
+ &.k-state-focus {
21316
+ @include box-shadow($invalid-shadow);
21434
21317
  }
21435
21318
  }
21319
+
21436
21320
  }
21437
21321
 
21438
21322
  }
21439
21323
 
21440
21324
  // #endregion
21441
21325
 
21326
+ // #endregion
21327
+
21442
21328
  // #endregion
21443
21329
  // #region @import "dropdowntree/_index.scss"; -> packages/material/scss/dropdowntree/_index.scss
21444
21330
  // #region @import "../core/_index.scss"; -> packages/material/scss/core/_index.scss
@@ -22371,56 +22257,42 @@ $dropdowntree-filter-spacer: 0px !default;
22371
22257
  // #endregion
22372
22258
  // #region @import "_layout.scss"; -> packages/material/scss/maskedtextbox/_layout.scss
22373
22259
  // #region @import "~@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss
22374
- @include exports("maskedtextbox/layout") {
22260
+ @include exports( "maskedtextbox/layout" ) {
22375
22261
 
22376
22262
  // Masked textbox
22377
22263
  .k-maskedtextbox {
22264
+ @include border-radius( $input-border-radius );
22378
22265
  width: $input-default-width;
22266
+ border-width: $input-border-width;
22267
+ border-style: solid;
22268
+ box-sizing: border-box;
22269
+ outline: 0;
22379
22270
  font-family: $input-font-family;
22380
22271
  font-size: $input-font-size;
22381
22272
  line-height: $input-line-height;
22382
- border-width: 0;
22383
- box-sizing: border-box;
22384
- outline: 0;
22385
- background: none;
22386
- text-align: left;
22273
+ text-align: start;
22387
22274
  white-space: nowrap;
22388
22275
  display: inline-flex;
22276
+ flex-flow: row nowrap;
22389
22277
  vertical-align: middle;
22390
22278
  position: relative;
22279
+ overflow: hidden;
22280
+ transition: all .1s ease; // sass-lint:disable-line no-transition-all
22391
22281
  -webkit-touch-callout: none;
22392
22282
  -webkit-tap-highlight-color: $rgba-transparent;
22393
22283
 
22394
- > .k-textbox {
22395
- flex: 1 0 0%;
22396
- min-width: 0;
22397
-
22398
- &.k-state-invalid {
22399
- transition: none;
22400
- }
22401
- }
22402
22284
 
22403
- .k-i-warning {
22404
- position: absolute;
22405
- top: 50%;
22406
- transform: translateY(-50%);
22407
- right: $padding-x;
22408
- }
22409
-
22410
- &[dir="rtl"],
22411
- .k-rtl & {
22412
- text-align: right;
22285
+ // Input
22286
+ .k-input {}
22413
22287
 
22414
- .k-i-warning {
22415
- right: auto;
22416
- left: $padding-x;
22417
- }
22418
- }
22419
22288
 
22420
- ::-ms-clear {
22421
- display: none;
22289
+ // Loading icon
22290
+ .k-i-loading {
22291
+ width: $input-icon-width;
22292
+ height: $input-icon-height;
22422
22293
  }
22423
22294
  }
22295
+
22424
22296
  }
22425
22297
 
22426
22298
  // #endregion
@@ -22428,33 +22300,63 @@ $dropdowntree-filter-spacer: 0px !default;
22428
22300
  // #endregion
22429
22301
  // #region @import "_theme.scss"; -> packages/material/scss/maskedtextbox/_theme.scss
22430
22302
  // #region @import "~@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss
22431
- @include exports("maskedtextbox/theme") {
22303
+ @include exports( "maskedtextbox/theme" ) {
22432
22304
 
22305
+ // Masked textbox
22433
22306
  .k-maskedtextbox {
22307
+ @include fill(
22308
+ $input-text,
22309
+ $input-bg,
22310
+ $input-border
22311
+ );
22434
22312
 
22435
- .k-i-warning {
22436
- color: $error;
22313
+ // Hover state
22314
+ &:hover,
22315
+ &.k-state-hover {
22316
+ @include fill(
22317
+ $input-hovered-text,
22318
+ $input-hovered-bg,
22319
+ $input-hovered-border
22320
+ );
22437
22321
  }
22438
22322
 
22439
- &.k-state-invalid,
22440
- &.ng-invalid.ng-touched,
22441
- &.ng-invalid.ng-dirty {
22442
- .k-textbox {
22443
- border-color: $invalid-border;
22444
- }
22323
+ // Focus state
22324
+ &:focus,
22325
+ &.k-state-focus {
22326
+ @include fill(
22327
+ $input-focused-text,
22328
+ $input-focused-bg,
22329
+ $input-focused-border
22330
+ );
22331
+ @include box-shadow( $input-focused-shadow );
22332
+ }
22333
+ &:focus-within {
22334
+ @include fill(
22335
+ $input-focused-text,
22336
+ $input-focused-bg,
22337
+ $input-focused-border
22338
+ );
22339
+ @include box-shadow( $input-focused-shadow );
22340
+ }
22341
+
22342
+
22343
+ // Invalid state
22344
+ &.k-invalid,
22345
+ &.ng-invalid,
22346
+ &.k-state-invalid {
22347
+ border-color: $invalid-border;
22445
22348
 
22446
22349
  .k-input-validation-icon {
22447
22350
  color: $invalid-text;
22448
22351
  }
22449
22352
 
22450
- &:focus,
22451
- &.k-state-focused {
22452
- .k-textbox {
22453
- @include box-shadow($invalid-shadow);
22454
- }
22353
+ &:focus-within,
22354
+ &.k-state-focus {
22355
+ @include box-shadow($invalid-shadow);
22455
22356
  }
22456
22357
  }
22457
22358
  }
22359
+
22458
22360
  }
22459
22361
 
22460
22362
  // #endregion
@@ -24155,6 +24057,19 @@ $appbar-bottom-box-shadow: 0px -2px 3px rgba(0, 0, 0, .24) !default;
24155
24057
  border-width: 0 0 0 1px;
24156
24058
  display: inline-block;
24157
24059
  }
24060
+
24061
+
24062
+ // Appbar child components
24063
+ .k-textbox,
24064
+ .k-combobox,
24065
+ .k-dropdown,
24066
+ .k-searchbox,
24067
+ .k-numerictextbox,
24068
+ .k-datepicker,
24069
+ .k-timepicker,
24070
+ .k-datetimepicker {
24071
+ width: 10em;
24072
+ }
24158
24073
  }
24159
24074
 
24160
24075
  .k-appbar-static {
@@ -34626,14 +34541,10 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
34626
34541
  width: auto;
34627
34542
  min-width: $form-line-height * 1em;
34628
34543
  }
34629
- [data-tool="fontSize"] {
34630
- width: 5 * $spacer;
34631
- }
34632
- [data-tool="fontFamily"] {
34633
- width: 6 * $spacer;
34634
- }
34635
- [data-tool="format"] {
34636
- width: 4 * $spacer;
34544
+
34545
+ .k-combobox,
34546
+ .k-dropdown {
34547
+ width: 5em;
34637
34548
  }
34638
34549
  }
34639
34550
 
@@ -37444,7 +37355,7 @@ $filter-padding-y: $filter-padding-x !default;
37444
37355
  $filter-bottom-margin: 2.1em !default;
37445
37356
  $filter-line-size: 1px !default;
37446
37357
 
37447
- $filter-operator-dropdown-width: 19em !default;
37358
+ $filter-operator-dropdown-width: 15em !default;
37448
37359
 
37449
37360
  $filter-preview-field-text: $primary !default;
37450
37361
  $filter-preview-operator-text: $subtle-text !default;
@@ -38798,6 +38709,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38798
38709
  }
38799
38710
 
38800
38711
  // Toolbar
38712
+ .k-editor-toolbar,
38801
38713
  .k-editor > .k-toolbar {
38802
38714
  border-width: 0 0 $toolbar-border-width 0;
38803
38715
  flex-shrink: 0;
@@ -38825,13 +38737,14 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38825
38737
  top: 0;
38826
38738
  right: 0;
38827
38739
  visibility: hidden;
38828
- }
38829
- .k-overflow-anchor {
38830
- border-width: 0;
38831
- padding: $toolbar-padding-y;
38832
- width: $toolbar-inner-calc-size;
38833
- height: $toolbar-inner-calc-size;
38834
- position: relative;
38740
+
38741
+ .k-overflow-anchor {
38742
+ border-width: 0;
38743
+ padding: $toolbar-padding-y;
38744
+ width: $toolbar-inner-calc-size;
38745
+ height: $toolbar-inner-calc-size;
38746
+ position: relative;
38747
+ }
38835
38748
  }
38836
38749
 
38837
38750
  .k-editor-export {
@@ -38949,15 +38862,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
38949
38862
  }
38950
38863
  }
38951
38864
 
38952
- .k-editor-widget .k-colorpicker {}
38953
-
38954
- .k-rtl .k-editor .k-editor-widget .k-dropdown-wrap {
38955
- padding-left: 0;
38956
-
38957
- .k-select {
38958
- border-width: 0;
38959
- }
38960
- }
38961
38865
 
38962
38866
  // Find and replace dialog
38963
38867
  .k-editor-find-replace {
@@ -39596,6 +39500,7 @@ $imageeditor-content-border-width: 1px !default;
39596
39500
 
39597
39501
  $imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
39598
39502
  $imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
39503
+ $imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
39599
39504
 
39600
39505
  $imageeditor-crop-border-width: 1px !default;
39601
39506
  $imageeditor-crop-border-style: dashed !default;
@@ -39678,16 +39583,16 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
39678
39583
 
39679
39584
  // Action Pane
39680
39585
  .k-imageeditor-action-pane {
39586
+ padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
39587
+ width: $imageeditor-action-pane-width;
39681
39588
  border-width: 0;
39682
39589
  border-left-width: $imageeditor-content-border-width;
39683
39590
  border-style: solid;
39684
39591
  border-color: inherit;
39685
- flex-shrink: 0;
39592
+ box-sizing: border-box;
39593
+ flex: none;
39686
39594
  overflow-y: auto;
39687
39595
  }
39688
- .k-imageeditor-action-pane > .k-form {
39689
- padding: $imageeditor-action-pane-padding-y $imageeditor-action-pane-padding-x;
39690
- }
39691
39596
 
39692
39597
 
39693
39598
  // Crop Tool
@@ -39777,10 +39682,6 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
39777
39682
  flex-direction: row;
39778
39683
  align-self: flex-start;
39779
39684
  }
39780
-
39781
- .k-imageeditor-action-pane {
39782
- flex: 0 0 auto;
39783
- }
39784
39685
  }
39785
39686
 
39786
39687
  }
@@ -42388,7 +42289,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
42388
42289
  .k-widget.k-recur-month,
42389
42290
  .k-widget.k-recur-weekday,
42390
42291
  .k-widget.k-recur-weekday-offset {
42391
- width: 9em;
42292
+ width: 10em;
42392
42293
  }
42393
42294
 
42394
42295
  }
@@ -44084,6 +43985,11 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
44084
43985
  width: 100% !important;
44085
43986
  // sass-lint:enable no-important
44086
43987
  box-shadow: none;
43988
+
43989
+
43990
+ .k-dropdown {
43991
+ width: auto;
43992
+ }
44087
43993
  }
44088
43994
  .k-mediaplayer-time-wrap {
44089
43995
  flex: 1;
@@ -46486,35 +46392,32 @@ $map-marker-fill: $primary !default;
46486
46392
 
46487
46393
  // Buttons
46488
46394
  .k-button {
46489
- margin: 0;
46490
46395
  padding: 0;
46491
46396
  width: auto;
46492
46397
  height: auto;
46493
- border-radius: 100%;
46494
46398
  line-height: 1;
46495
46399
  box-shadow: none;
46496
46400
  position: absolute;
46497
-
46498
- &:not(:hover) {
46499
- border-color: transparent;
46500
- background: none;
46501
- }
46502
46401
  }
46402
+ .k-navigator-n,
46503
46403
  .k-navigator-up {
46504
46404
  transform: translateX(-50%);
46505
46405
  top: $map-navigator-padding;
46506
46406
  left: 50%;
46507
46407
  }
46408
+ .k-navigator-e,
46508
46409
  .k-navigator-right {
46509
46410
  transform: translateY(-50%);
46510
46411
  right: $map-navigator-padding;
46511
46412
  top: 50%;
46512
46413
  }
46414
+ .k-navigator-s,
46513
46415
  .k-navigator-down {
46514
46416
  transform: translateX(-50%);
46515
46417
  bottom: $map-navigator-padding;
46516
46418
  left: 50%;
46517
46419
  }
46420
+ .k-navigator-w,
46518
46421
  .k-navigator-left {
46519
46422
  transform: translateY(-50%);
46520
46423
  left: $map-navigator-padding;