@progress/kendo-theme-default 5.4.2-dev.3 → 5.4.2-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 (22) hide show
  1. package/dist/all.css +48 -39
  2. package/dist/all.scss +151 -84
  3. package/lib/swatches/default-blue.json +1 -1
  4. package/lib/swatches/default-dataviz-v4.json +1 -1
  5. package/lib/swatches/default-green.json +1 -1
  6. package/lib/swatches/default-main-dark.json +1 -1
  7. package/lib/swatches/default-main.json +1 -1
  8. package/lib/swatches/default-nordic.json +1 -1
  9. package/lib/swatches/default-ocean-blue.json +1 -1
  10. package/lib/swatches/default-orange.json +1 -1
  11. package/lib/swatches/default-purple.json +1 -1
  12. package/lib/swatches/default-turquoise.json +1 -1
  13. package/lib/swatches/default-urban.json +1 -1
  14. package/package.json +2 -2
  15. package/scss/colorgradient/_layout.scss +3 -0
  16. package/scss/core/mixins/_index.scss +0 -2
  17. package/scss/input/_layout.scss +1 -13
  18. package/scss/input/_theme.scss +123 -15
  19. package/scss/input/_variables.scss +22 -19
  20. package/scss/panelbar/_layout.scss +1 -1
  21. package/scss/panelbar/_variables.scss +1 -0
  22. package/scss/core/mixins/_input-ripple.scss +0 -32
package/dist/all.css CHANGED
@@ -13728,31 +13728,17 @@ textarea.k-input-inner {
13728
13728
 
13729
13729
  .k-input-flat,
13730
13730
  .k-picker-flat {
13731
- border-radius: 0 !important;
13731
+ border-bottom-right-radius: 0 !important;
13732
+ border-bottom-left-radius: 0 !important;
13732
13733
  border-width: 1px 0;
13733
13734
  border-top-color: transparent !important;
13734
13735
  background-image: none !important;
13735
13736
  }
13736
13737
 
13737
- .k-input-flat:focus, .k-input-flat.k-focus,
13738
- .k-picker-flat:focus,
13739
- .k-picker-flat.k-focus {
13740
- border-radius: 4px 4px 0px 0px !important;
13741
- }
13742
-
13743
- .k-input-flat:focus-within,
13744
- .k-picker-flat:focus-within {
13745
- border-radius: 4px 4px 0px 0px !important;
13746
- }
13747
-
13748
13738
  .k-input-outline {
13749
13739
  background: none !important;
13750
13740
  }
13751
13741
 
13752
- .k-picker.k-picker-flat {
13753
- border-radius: 4px 4px 0px 0px !important;
13754
- }
13755
-
13756
13742
  .k-input-sm,
13757
13743
  .k-picker-sm {
13758
13744
  font-size: 14px;
@@ -13977,63 +13963,64 @@ textarea.k-input-inner {
13977
13963
  animation-name: autoFillEnd;
13978
13964
  }
13979
13965
 
13980
- .k-input {
13966
+ .k-input-solid {
13981
13967
  border-color: rgba(0, 0, 0, 0.08);
13982
13968
  color: #424242;
13983
13969
  background-color: #ffffff;
13984
13970
  }
13985
13971
 
13986
- .k-input:hover, .k-input.k-hover {
13972
+ .k-input-solid:hover, .k-input-solid.k-hover {
13987
13973
  border-color: rgba(0, 0, 0, 0.16);
13988
13974
  }
13989
13975
 
13990
- .k-input:focus, .k-input.k-focus {
13976
+ .k-input-solid:focus, .k-input-solid.k-focus {
13991
13977
  border-color: rgba(0, 0, 0, 0.16);
13992
13978
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
13993
13979
  }
13994
13980
 
13995
- .k-input:focus-within {
13981
+ .k-input-solid:focus-within {
13996
13982
  border-color: rgba(0, 0, 0, 0.16);
13997
13983
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
13998
13984
  }
13999
13985
 
14000
- .k-input.k-invalid, .k-input.ng-invalid.ng-touched, .k-input.ng-invalid.ng-dirty {
13986
+ .k-input-solid.k-invalid, .k-input-solid.ng-invalid.ng-touched, .k-input-solid.ng-invalid.ng-dirty {
14001
13987
  border-color: #f31700;
14002
13988
  }
14003
13989
 
14004
- .k-input.k-invalid .k-input-validation-icon, .k-input.ng-invalid.ng-touched .k-input-validation-icon, .k-input.ng-invalid.ng-dirty .k-input-validation-icon {
13990
+ .k-input-solid.k-invalid .k-input-validation-icon, .k-input-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-input-solid.ng-invalid.ng-dirty .k-input-validation-icon {
14005
13991
  color: #f31700;
14006
13992
  }
14007
13993
 
14008
- .k-picker {
13994
+ .k-picker-solid {
14009
13995
  border-color: rgba(0, 0, 0, 0.08);
14010
13996
  color: #424242;
14011
13997
  background-color: #f5f5f5;
14012
13998
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
14013
13999
  }
14014
14000
 
14015
- .k-picker:hover, .k-picker.k-hover {
14001
+ .k-picker-solid:hover, .k-picker-solid.k-hover {
14016
14002
  background-color: #ebebeb;
14017
14003
  }
14018
14004
 
14019
- .k-picker:focus, .k-picker.k-focus {
14005
+ .k-picker-solid:focus, .k-picker-solid.k-focus {
14020
14006
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14021
14007
  }
14022
14008
 
14023
- .k-picker:focus-within {
14009
+ .k-picker-solid:focus-within {
14024
14010
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14025
14011
  }
14026
14012
 
14027
- .k-picker.k-invalid, .k-picker.ng-invalid.ng-touched, .k-picker.ng-invalid.ng-dirty {
14013
+ .k-picker-solid.k-invalid, .k-picker-solid.ng-invalid.ng-touched, .k-picker-solid.ng-invalid.ng-dirty {
14028
14014
  border-color: #f31700;
14029
14015
  }
14030
14016
 
14031
- .k-picker.k-invalid .k-input-validation-icon, .k-picker.ng-invalid.ng-touched .k-input-validation-icon, .k-picker.ng-invalid.ng-dirty .k-input-validation-icon {
14017
+ .k-picker-solid.k-invalid .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-dirty .k-input-validation-icon {
14032
14018
  color: #f31700;
14033
14019
  }
14034
14020
 
14035
14021
  .k-input-outline {
14036
14022
  border-color: rgba(66, 66, 66, 0.5);
14023
+ color: #424242;
14037
14024
  }
14038
14025
 
14039
14026
  .k-input-outline > .k-input-button {
@@ -14054,7 +14041,10 @@ textarea.k-input-inner {
14054
14041
  }
14055
14042
 
14056
14043
  .k-input-outline:focus, .k-input-outline.k-focus {
14057
- border-color: rgba(66, 66, 66, 0.5);
14044
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14045
+ }
14046
+
14047
+ .k-input-outline:focus-within {
14058
14048
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14059
14049
  }
14060
14050
 
@@ -14067,24 +14057,22 @@ textarea.k-input-inner {
14067
14057
  }
14068
14058
 
14069
14059
  .k-picker-outline {
14070
- border-color: #424242;
14071
- background-color: transparent;
14060
+ border-color: rgba(66, 66, 66, 0.5);
14061
+ color: #424242;
14072
14062
  }
14073
14063
 
14074
14064
  .k-picker-outline:hover, .k-picker-outline.k-hover {
14075
- color: #ffffff;
14065
+ border-color: #424242;
14066
+ color: white;
14076
14067
  background-color: #424242;
14077
14068
  }
14078
14069
 
14079
14070
  .k-picker-outline:focus, .k-picker-outline.k-focus {
14080
- border-color: #424242;
14081
- background-color: transparent;
14082
14071
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14083
14072
  }
14084
14073
 
14085
- .k-picker-outline:focus:hover, .k-picker-outline:focus.k-hover, .k-picker-outline.k-focus:hover, .k-picker-outline.k-focus.k-hover {
14086
- color: #ffffff;
14087
- background-color: #424242;
14074
+ .k-picker-outline:focus-within {
14075
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14088
14076
  }
14089
14077
 
14090
14078
  .k-picker-outline.k-invalid, .k-picker-outline.ng-invalid.ng-touched, .k-picker-outline.ng-invalid.ng-dirty {
@@ -14098,7 +14086,18 @@ textarea.k-input-inner {
14098
14086
  .k-input-flat {
14099
14087
  border-color: rgba(0, 0, 0, 0.08);
14100
14088
  color: #424242;
14101
- background-color: transparent;
14089
+ }
14090
+
14091
+ .k-input-flat:hover, .k-input-flat.k-hover {
14092
+ border-color: rgba(0, 0, 0, 0.16);
14093
+ }
14094
+
14095
+ .k-input-flat:focus, .k-input-flat.k-focus {
14096
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14097
+ }
14098
+
14099
+ .k-input-flat:focus-within {
14100
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14102
14101
  }
14103
14102
 
14104
14103
  .k-input-flat.k-invalid, .k-input-flat.ng-invalid.ng-touched, .k-input-flat.ng-invalid.ng-dirty {
@@ -14112,7 +14111,6 @@ textarea.k-input-inner {
14112
14111
  .k-picker-flat {
14113
14112
  border-color: rgba(0, 0, 0, 0.08);
14114
14113
  color: #424242;
14115
- background-color: transparent;
14116
14114
  }
14117
14115
 
14118
14116
  .k-picker-flat:hover, .k-picker-flat.k-hover {
@@ -14120,6 +14118,14 @@ textarea.k-input-inner {
14120
14118
  background-color: rgba(66, 66, 66, 0.04);
14121
14119
  }
14122
14120
 
14121
+ .k-picker-flat:focus, .k-picker-flat.k-focus {
14122
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14123
+ }
14124
+
14125
+ .k-picker-flat:focus-within {
14126
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
14127
+ }
14128
+
14123
14129
  .k-picker-flat.k-invalid, .k-picker-flat.ng-invalid.ng-touched, .k-picker-flat.ng-invalid.ng-dirty {
14124
14130
  border-color: #f31700;
14125
14131
  }
@@ -19319,6 +19325,9 @@ kendo-label > .k-label {
19319
19325
  }
19320
19326
 
19321
19327
  .k-colorgradient-inputs .k-input-inner {
19328
+ padding-inline-start: 2px;
19329
+ padding-inline-end: 2px;
19330
+ text-align: center;
19322
19331
  text-overflow: clip;
19323
19332
  }
19324
19333
 
package/dist/all.scss CHANGED
@@ -885,42 +885,6 @@ $_kendo-imported-modules: ();
885
885
 
886
886
  // #endregion
887
887
 
888
- // Other
889
- // #region @import "_input-ripple.scss"; -> packages/default/scss/core/mixins/_input-ripple.scss
890
- @mixin input-ripple() {
891
- $height: 2 * $kendo-input-border-width;
892
-
893
- &::after {
894
- display: block;
895
- z-index: 2;
896
- content: "";
897
- position: absolute;
898
- bottom: calc( 1px - #{$height} );
899
- left: 0;
900
- right: 0;
901
- height: $height;
902
- margin: auto;
903
- opacity: 0;
904
- transform: scaleX(.5);
905
- transition: transform .3s;
906
- background-color: $primary;
907
- }
908
-
909
- &.k-state-focused::after ,
910
- &.k-focus::after {
911
- opacity: 1;
912
- transform: scaleX(1);
913
- }
914
-
915
-
916
- &.k-state-invalid::after ,
917
- &.k-invalid::after {
918
- background-color: $error;
919
- transition: none;
920
- }
921
- }
922
-
923
- // #endregion
924
888
 
925
889
  // #endregion
926
890
  // #region @import "../_variables.scss"; -> packages/default/scss/_variables.scss
@@ -8892,7 +8856,7 @@ $kendo-input-disabled-gradient: null !default;
8892
8856
  $kendo-input-disabled-shadow: null !default;
8893
8857
 
8894
8858
  $kendo-input-outline-bg: null !default;
8895
- $kendo-input-outline-text: null !default;
8859
+ $kendo-input-outline-text: $kendo-input-text !default;
8896
8860
  $kendo-input-outline-border: rgba( $kendo-button-text, .5) !default;
8897
8861
 
8898
8862
  $kendo-input-outline-hover-bg: null !default;
@@ -8901,18 +8865,21 @@ $kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
8901
8865
 
8902
8866
  $kendo-input-outline-focus-bg: null !default;
8903
8867
  $kendo-input-outline-focus-text: null !default;
8904
- $kendo-input-outline-focus-border: $kendo-input-outline-border !default;
8868
+ $kendo-input-outline-focus-border: null !default;
8905
8869
  $kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
8906
8870
 
8907
- $kendo-input-flat-bg: transparent !default;
8871
+ $kendo-input-flat-bg: null !default;
8908
8872
  $kendo-input-flat-text: $kendo-input-text !default;
8909
8873
  $kendo-input-flat-border: $kendo-input-border !default;
8910
8874
 
8875
+ $kendo-input-flat-hover-bg: null !default;
8876
+ $kendo-input-flat-hover-text: null !default;
8877
+ $kendo-input-flat-hover-border: $kendo-input-hover-border !default;
8878
+
8911
8879
  $kendo-input-flat-focus-bg: null !default;
8912
8880
  $kendo-input-flat-focus-text: null !default;
8913
8881
  $kendo-input-flat-focus-border: null !default;
8914
-
8915
- $kendo-input-flat-border-radius: $kendo-border-radius $kendo-border-radius 0px 0px !default;
8882
+ $kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
8916
8883
 
8917
8884
  $kendo-picker-bg: $kendo-button-bg !default;
8918
8885
  $kendo-picker-text: $kendo-button-text !default;
@@ -8938,24 +8905,24 @@ $kendo-picker-disabled-border: null !default;
8938
8905
  $kendo-picker-disabled-gradient: null !default;
8939
8906
  $kendo-picker-disabled-shadow: null !default;
8940
8907
 
8941
- $kendo-picker-outline-bg: transparent !default;
8942
- $kendo-picker-outline-text: null !default;
8943
- $kendo-picker-outline-border: $kendo-button-text !default;
8908
+ $kendo-picker-outline-bg: null !default;
8909
+ $kendo-picker-outline-text: $kendo-button-text !default;
8910
+ $kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
8944
8911
 
8945
- $kendo-picker-outline-hover-bg: $kendo-button-text !default;
8946
- $kendo-picker-outline-hover-text: $body-bg !default;
8947
- $kendo-picker-outline-hover-border: null !default;
8912
+ $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
8913
+ $kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
8914
+ $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
8948
8915
 
8949
- $kendo-picker-outline-focus-bg: transparent !default;
8950
- $kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
8951
- $kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
8916
+ $kendo-picker-outline-focus-bg: null !default;
8917
+ $kendo-picker-outline-focus-text: null !default;
8918
+ $kendo-picker-outline-focus-border: null !default;
8952
8919
  $kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
8953
8920
 
8954
- $kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
8955
- $kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
8956
- $kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
8921
+ $kendo-picker-outline-hover-focus-bg: null !default;
8922
+ $kendo-picker-outline-hover-focus-text: null !default;
8923
+ $kendo-picker-outline-hover-focus-border: null !default;
8957
8924
 
8958
- $kendo-picker-flat-bg: transparent !default;
8925
+ $kendo-picker-flat-bg: null !default;
8959
8926
  $kendo-picker-flat-text: $kendo-button-text !default;
8960
8927
  $kendo-picker-flat-border: $kendo-button-border !default;
8961
8928
 
@@ -8966,7 +8933,7 @@ $kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
8966
8933
  $kendo-picker-flat-focus-bg: null !default;
8967
8934
  $kendo-picker-flat-focus-text: null !default;
8968
8935
  $kendo-picker-flat-focus-border: null !default;
8969
- $kendo-picker-flat-focus-shadow: null !default;
8936
+ $kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
8970
8937
 
8971
8938
  $kendo-picker-flat-hover-focus-bg: null !default;
8972
8939
  $kendo-picker-flat-hover-focus-text: null !default;
@@ -9345,28 +9312,16 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9345
9312
  // Fill mode
9346
9313
  .k-input-flat,
9347
9314
  .k-picker-flat {
9348
- @include border-radius( 0 !important ); // sass-lint:disable-line no-important
9315
+ @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
9349
9316
  border-width: $kendo-input-border-width 0;
9350
9317
  border-top-color: transparent !important; // sass-lint:disable-line no-important
9351
9318
  background-image: none !important; // sass-lint:disable-line no-important
9352
-
9353
- &:focus,
9354
- &.k-focus {
9355
- @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
9356
- }
9357
- &:focus-within {
9358
- @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
9359
- }
9360
9319
  }
9361
9320
 
9362
9321
  .k-input-outline {
9363
9322
  background: none !important; // sass-lint:disable-line no-important
9364
9323
  }
9365
9324
 
9366
- .k-picker.k-picker-flat {
9367
- @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
9368
- }
9369
-
9370
9325
 
9371
9326
  // Sizing
9372
9327
  @each $size, $size-props in $kendo-input-sizes {
@@ -9476,7 +9431,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9476
9431
  @include exports( "input/theme" ) {
9477
9432
 
9478
9433
  // Solid input
9479
- .k-input {
9434
+ .k-input-solid {
9480
9435
  @include fill(
9481
9436
  $kendo-input-text,
9482
9437
  $kendo-input-bg,
@@ -9513,7 +9468,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9513
9468
  @include box-shadow( $kendo-input-focus-shadow );
9514
9469
  }
9515
9470
 
9516
- //Disabled
9471
+ // Disabled
9517
9472
  &:disabled,
9518
9473
  &[disabled],
9519
9474
  &.k-disabled {
@@ -9530,7 +9485,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9530
9485
  &.k-invalid,
9531
9486
  &.ng-invalid.ng-touched,
9532
9487
  &.ng-invalid.ng-dirty {
9533
- @include fill( $border: $invalid-border );
9488
+ @include fill( $border: $kendo-input-invalid-border );
9534
9489
 
9535
9490
  .k-input-validation-icon {
9536
9491
  color: $invalid-text;
@@ -9538,10 +9493,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9538
9493
 
9539
9494
  &:focus,
9540
9495
  &.k-focus {
9541
- @include box-shadow($invalid-shadow);
9496
+ @include box-shadow( $kendo-input-invalid-shadow );
9542
9497
  }
9543
9498
  &:focus-within {
9544
- @include box-shadow($invalid-shadow);
9499
+ @include box-shadow( $kendo-input-invalid-shadow );
9545
9500
  }
9546
9501
  }
9547
9502
 
@@ -9549,7 +9504,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9549
9504
 
9550
9505
 
9551
9506
  // Solid picker
9552
- .k-picker {
9507
+ .k-picker-solid {
9553
9508
  @include fill(
9554
9509
  $kendo-picker-text,
9555
9510
  $kendo-picker-bg,
@@ -9590,7 +9545,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9590
9545
  @include box-shadow( $kendo-picker-focus-shadow );
9591
9546
  }
9592
9547
 
9593
- //Disabled
9548
+ // Disabled
9594
9549
  &:disabled,
9595
9550
  &[disabled],
9596
9551
  &.k-disabled {
@@ -9623,7 +9578,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9623
9578
  }
9624
9579
  }
9625
9580
 
9626
- // Outline
9581
+
9582
+ // Outline input
9627
9583
  .k-input-outline {
9628
9584
  @include fill (
9629
9585
  $kendo-input-outline-text,
@@ -9644,6 +9600,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9644
9600
  }
9645
9601
  }
9646
9602
 
9603
+ // Hover
9647
9604
  &:hover,
9648
9605
  &.k-hover {
9649
9606
  @include fill (
@@ -9653,6 +9610,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9653
9610
  );
9654
9611
  }
9655
9612
 
9613
+ // Focus
9656
9614
  &:focus,
9657
9615
  &.k-focus {
9658
9616
  @include fill (
@@ -9662,12 +9620,33 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9662
9620
  );
9663
9621
  @include box-shadow ( $kendo-input-outline-focus-shadow );
9664
9622
  }
9623
+ &:focus-within {
9624
+ @include fill (
9625
+ $kendo-input-outline-focus-text,
9626
+ $kendo-input-outline-focus-bg,
9627
+ $kendo-input-outline-focus-border
9628
+ );
9629
+ @include box-shadow ( $kendo-input-outline-focus-shadow );
9630
+ }
9631
+
9632
+ // Disabled
9633
+ &:disabled,
9634
+ &[disabled],
9635
+ &.k-disabled {
9636
+ @include fill(
9637
+ $kendo-input-disabled-text,
9638
+ $kendo-input-disabled-bg,
9639
+ $kendo-input-disabled-border,
9640
+ $kendo-input-disabled-gradient
9641
+ );
9642
+ @include box-shadow( $kendo-input-disabled-shadow );
9643
+ }
9665
9644
 
9666
9645
  // Invalid
9667
9646
  &.k-invalid,
9668
9647
  &.ng-invalid.ng-touched,
9669
9648
  &.ng-invalid.ng-dirty {
9670
- @include fill( $border: $invalid-border );
9649
+ @include fill( $border: $kendo-input-invalid-border );
9671
9650
 
9672
9651
  .k-input-validation-icon {
9673
9652
  color: $invalid-text;
@@ -9675,15 +9654,17 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9675
9654
 
9676
9655
  &:focus,
9677
9656
  &.k-focus {
9678
- @include box-shadow($invalid-shadow);
9657
+ @include box-shadow( $kendo-input-invalid-shadow );
9679
9658
  }
9680
9659
  &:focus-within {
9681
- @include box-shadow($invalid-shadow);
9660
+ @include box-shadow( $kendo-input-invalid-shadow );
9682
9661
  }
9683
9662
  }
9684
9663
 
9685
9664
  }
9686
9665
 
9666
+
9667
+ // Outline picker
9687
9668
  .k-picker-outline {
9688
9669
  @include fill (
9689
9670
  $kendo-picker-outline-text,
@@ -9691,6 +9672,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9691
9672
  $kendo-picker-outline-border
9692
9673
  );
9693
9674
 
9675
+ // Hover
9694
9676
  &:hover,
9695
9677
  &.k-hover {
9696
9678
  @include fill (
@@ -9700,6 +9682,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9700
9682
  );
9701
9683
  }
9702
9684
 
9685
+ // Focus
9703
9686
  &:focus,
9704
9687
  &.k-focus {
9705
9688
  @include fill (
@@ -9709,6 +9692,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9709
9692
  );
9710
9693
  @include box-shadow ( $kendo-picker-outline-focus-shadow );
9711
9694
  }
9695
+ &:focus-within {
9696
+ @include fill (
9697
+ $kendo-picker-outline-focus-text,
9698
+ $kendo-picker-outline-focus-bg,
9699
+ $kendo-picker-outline-focus-border
9700
+ );
9701
+ @include box-shadow ( $kendo-picker-outline-focus-shadow );
9702
+ }
9712
9703
 
9713
9704
  &:focus:hover,
9714
9705
  &:focus.k-hover,
@@ -9721,11 +9712,24 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9721
9712
  );
9722
9713
  }
9723
9714
 
9715
+ // Disabled
9716
+ &:disabled,
9717
+ &[disabled],
9718
+ &.k-disabled {
9719
+ @include fill(
9720
+ $kendo-picker-disabled-text,
9721
+ $kendo-picker-disabled-bg,
9722
+ $kendo-picker-disabled-border,
9723
+ $kendo-picker-disabled-gradient
9724
+ );
9725
+ @include box-shadow( $kendo-picker-disabled-shadow );
9726
+ }
9727
+
9724
9728
  // Invalid
9725
9729
  &.k-invalid,
9726
9730
  &.ng-invalid.ng-touched,
9727
9731
  &.ng-invalid.ng-dirty {
9728
- @include fill( $border: $invalid-border );
9732
+ @include fill( $border: $kendo-input-invalid-border );
9729
9733
 
9730
9734
  .k-input-validation-icon {
9731
9735
  color: $invalid-text;
@@ -9733,15 +9737,16 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9733
9737
 
9734
9738
  &:focus,
9735
9739
  &.k-focus {
9736
- @include box-shadow($invalid-shadow);
9740
+ @include box-shadow( $kendo-input-invalid-shadow );
9737
9741
  }
9738
9742
  &:focus-within {
9739
- @include box-shadow($invalid-shadow);
9743
+ @include box-shadow( $kendo-input-invalid-shadow );
9740
9744
  }
9741
9745
  }
9742
9746
  }
9743
9747
 
9744
- // Flat
9748
+
9749
+ // Flat input
9745
9750
  .k-input-flat {
9746
9751
  @include fill (
9747
9752
  $kendo-input-flat-text,
@@ -9749,6 +9754,17 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9749
9754
  $kendo-input-flat-border
9750
9755
  );
9751
9756
 
9757
+ // Hover
9758
+ &:hover,
9759
+ &.k-hover {
9760
+ @include fill (
9761
+ $kendo-input-flat-hover-text,
9762
+ $kendo-input-flat-hover-bg,
9763
+ $kendo-input-flat-hover-border
9764
+ );
9765
+ }
9766
+
9767
+ // Focus
9752
9768
  &:focus,
9753
9769
  &.k-focus {
9754
9770
  @include fill (
@@ -9756,6 +9772,28 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9756
9772
  $kendo-input-flat-focus-bg,
9757
9773
  $kendo-input-flat-focus-border
9758
9774
  );
9775
+ @include box-shadow( $kendo-input-flat-focus-shadow );
9776
+ }
9777
+ &:focus-within {
9778
+ @include fill (
9779
+ $kendo-input-flat-focus-text,
9780
+ $kendo-input-flat-focus-bg,
9781
+ $kendo-input-flat-focus-border
9782
+ );
9783
+ @include box-shadow( $kendo-input-flat-focus-shadow );
9784
+ }
9785
+
9786
+ // Disabled
9787
+ &:disabled,
9788
+ &[disabled],
9789
+ &.k-disabled {
9790
+ @include fill(
9791
+ $kendo-input-disabled-text,
9792
+ $kendo-input-disabled-bg,
9793
+ $kendo-input-disabled-border,
9794
+ $kendo-input-disabled-gradient
9795
+ );
9796
+ @include box-shadow( $kendo-input-disabled-shadow );
9759
9797
  }
9760
9798
 
9761
9799
  // Invalid
@@ -9778,6 +9816,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9778
9816
  }
9779
9817
  }
9780
9818
 
9819
+
9820
+ // Flat picker
9781
9821
  .k-picker-flat {
9782
9822
  @include fill (
9783
9823
  $kendo-picker-flat-text,
@@ -9785,6 +9825,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9785
9825
  $kendo-picker-flat-border
9786
9826
  );
9787
9827
 
9828
+ // Hover
9788
9829
  &:hover,
9789
9830
  &.k-hover {
9790
9831
  @include fill (
@@ -9794,6 +9835,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9794
9835
  );
9795
9836
  }
9796
9837
 
9838
+ // Focus
9797
9839
  &:focus,
9798
9840
  &.k-focus {
9799
9841
  @include fill (
@@ -9803,6 +9845,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9803
9845
  );
9804
9846
  @include box-shadow( $kendo-picker-flat-focus-shadow );
9805
9847
  }
9848
+ &:focus-within {
9849
+ @include fill (
9850
+ $kendo-picker-flat-focus-text,
9851
+ $kendo-picker-flat-focus-bg,
9852
+ $kendo-picker-flat-focus-border
9853
+ );
9854
+ @include box-shadow( $kendo-picker-flat-focus-shadow );
9855
+ }
9806
9856
 
9807
9857
  &:focus:hover,
9808
9858
  &:focus.k-hover,
@@ -9815,6 +9865,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
9815
9865
  );
9816
9866
  }
9817
9867
 
9868
+ // Disabled
9869
+ &:disabled,
9870
+ &[disabled],
9871
+ &.k-disabled {
9872
+ @include fill(
9873
+ $kendo-picker-disabled-text,
9874
+ $kendo-picker-disabled-bg,
9875
+ $kendo-picker-disabled-border,
9876
+ $kendo-picker-disabled-gradient
9877
+ );
9878
+ @include box-shadow( $kendo-picker-disabled-shadow );
9879
+ }
9880
+
9818
9881
  // Invalid
9819
9882
  &.k-invalid,
9820
9883
  &.ng-invalid.ng-touched,
@@ -18061,6 +18124,9 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
18061
18124
  }
18062
18125
 
18063
18126
  .k-input-inner {
18127
+ padding-inline-start: 2px;
18128
+ padding-inline-end: 2px;
18129
+ text-align: center;
18064
18130
  text-overflow: clip;
18065
18131
  }
18066
18132
  }
@@ -26520,6 +26586,7 @@ $panelbar-font-family: $font-family !default;
26520
26586
  $panelbar-font-size: $font-size !default;
26521
26587
  $panelbar-line-height: $line-height !default;
26522
26588
  $panelbar-border-width: 1px !default;
26589
+ $panelbar-border-style: solid !default;
26523
26590
  $panelbar-item-border-width: 1px !default;
26524
26591
  $panelbar-item-border-style: solid !default;
26525
26592
 
@@ -26626,7 +26693,7 @@ $panelbar-header-expanded-gradient: null !default;
26626
26693
  margin: 0;
26627
26694
  padding: 0;
26628
26695
  border-width: $panelbar-border-width;
26629
- border-style: solid;
26696
+ border-style: $panelbar-border-style;
26630
26697
  box-sizing: border-box;
26631
26698
  outline: 0;
26632
26699
  font-family: $panelbar-font-family;
package/lib/swatches/default-blue.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Blue",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
package/lib/swatches/default-dataviz-v4.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Dataviz v4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ff6358",
9
9
  "#ffd246",
package/lib/swatches/default-green.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Green",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
package/lib/swatches/default-main-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Main Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#000000",
9
9
  "#151515",
package/lib/swatches/default-main.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
package/lib/swatches/default-nordic.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Nordic",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#50686e",
package/lib/swatches/default-ocean-blue.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Ocean Blue",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
package/lib/swatches/default-orange.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Orange",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
package/lib/swatches/default-purple.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Purple",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
package/lib/swatches/default-turquoise.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Turquoise",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
package/lib/swatches/default-urban.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Default Urban",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.4.2-dev.3",
6
+ "version": "5.4.2-dev.4",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#e3eef4",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-default",
3
3
  "description": "SASS resources for the default Kendo UI theme",
4
- "version": "5.4.2-dev.3",
4
+ "version": "5.4.2-dev.4",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -47,5 +47,5 @@
47
47
  "prepublishOnly": "node ../../scripts/themes-prepublish.js",
48
48
  "postpublish": "echo 'no postpublish for default theme'"
49
49
  },
50
- "gitHead": "3c98c61d0b83d13dfdc0d722e92c581db0f6269b"
50
+ "gitHead": "9007a9c66218ab09b365d2b71da9edce999b7d04"
51
51
  }
package/scss/colorgradient/_layout.scss CHANGED
@@ -136,6 +136,9 @@
136
136
  }
137
137
 
138
138
  .k-input-inner {
139
+ padding-inline-start: 2px;
140
+ padding-inline-end: 2px;
141
+ text-align: center;
139
142
  text-overflow: clip;
140
143
  }
141
144
  }
package/scss/core/mixins/_index.scss CHANGED
@@ -13,5 +13,3 @@
13
13
  @import "_typography.scss";
14
14
  @import "_hide-scrollbar.scss";
15
15
 
16
- // Other
17
- @import "_input-ripple.scss";
package/scss/input/_layout.scss CHANGED
@@ -338,28 +338,16 @@
338
338
  // Fill mode
339
339
  .k-input-flat,
340
340
  .k-picker-flat {
341
- @include border-radius( 0 !important ); // sass-lint:disable-line no-important
341
+ @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
342
342
  border-width: $kendo-input-border-width 0;
343
343
  border-top-color: transparent !important; // sass-lint:disable-line no-important
344
344
  background-image: none !important; // sass-lint:disable-line no-important
345
-
346
- &:focus,
347
- &.k-focus {
348
- @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
349
- }
350
- &:focus-within {
351
- @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
352
- }
353
345
  }
354
346
 
355
347
  .k-input-outline {
356
348
  background: none !important; // sass-lint:disable-line no-important
357
349
  }
358
350
 
359
- .k-picker.k-picker-flat {
360
- @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
361
- }
362
-
363
351
 
364
352
  // Sizing
365
353
  @each $size, $size-props in $kendo-input-sizes {
package/scss/input/_theme.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @include exports( "input/theme" ) {
2
2
 
3
3
  // Solid input
4
- .k-input {
4
+ .k-input-solid {
5
5
  @include fill(
6
6
  $kendo-input-text,
7
7
  $kendo-input-bg,
@@ -38,7 +38,7 @@
38
38
  @include box-shadow( $kendo-input-focus-shadow );
39
39
  }
40
40
 
41
- //Disabled
41
+ // Disabled
42
42
  &:disabled,
43
43
  &[disabled],
44
44
  &.k-disabled {
@@ -55,7 +55,7 @@
55
55
  &.k-invalid,
56
56
  &.ng-invalid.ng-touched,
57
57
  &.ng-invalid.ng-dirty {
58
- @include fill( $border: $invalid-border );
58
+ @include fill( $border: $kendo-input-invalid-border );
59
59
 
60
60
  .k-input-validation-icon {
61
61
  color: $invalid-text;
@@ -63,10 +63,10 @@
63
63
 
64
64
  &:focus,
65
65
  &.k-focus {
66
- @include box-shadow($invalid-shadow);
66
+ @include box-shadow( $kendo-input-invalid-shadow );
67
67
  }
68
68
  &:focus-within {
69
- @include box-shadow($invalid-shadow);
69
+ @include box-shadow( $kendo-input-invalid-shadow );
70
70
  }
71
71
  }
72
72
 
@@ -74,7 +74,7 @@
74
74
 
75
75
 
76
76
  // Solid picker
77
- .k-picker {
77
+ .k-picker-solid {
78
78
  @include fill(
79
79
  $kendo-picker-text,
80
80
  $kendo-picker-bg,
@@ -115,7 +115,7 @@
115
115
  @include box-shadow( $kendo-picker-focus-shadow );
116
116
  }
117
117
 
118
- //Disabled
118
+ // Disabled
119
119
  &:disabled,
120
120
  &[disabled],
121
121
  &.k-disabled {
@@ -148,7 +148,8 @@
148
148
  }
149
149
  }
150
150
 
151
- // Outline
151
+
152
+ // Outline input
152
153
  .k-input-outline {
153
154
  @include fill (
154
155
  $kendo-input-outline-text,
@@ -169,6 +170,7 @@
169
170
  }
170
171
  }
171
172
 
173
+ // Hover
172
174
  &:hover,
173
175
  &.k-hover {
174
176
  @include fill (
@@ -178,6 +180,7 @@
178
180
  );
179
181
  }
180
182
 
183
+ // Focus
181
184
  &:focus,
182
185
  &.k-focus {
183
186
  @include fill (
@@ -187,12 +190,33 @@
187
190
  );
188
191
  @include box-shadow ( $kendo-input-outline-focus-shadow );
189
192
  }
193
+ &:focus-within {
194
+ @include fill (
195
+ $kendo-input-outline-focus-text,
196
+ $kendo-input-outline-focus-bg,
197
+ $kendo-input-outline-focus-border
198
+ );
199
+ @include box-shadow ( $kendo-input-outline-focus-shadow );
200
+ }
201
+
202
+ // Disabled
203
+ &:disabled,
204
+ &[disabled],
205
+ &.k-disabled {
206
+ @include fill(
207
+ $kendo-input-disabled-text,
208
+ $kendo-input-disabled-bg,
209
+ $kendo-input-disabled-border,
210
+ $kendo-input-disabled-gradient
211
+ );
212
+ @include box-shadow( $kendo-input-disabled-shadow );
213
+ }
190
214
 
191
215
  // Invalid
192
216
  &.k-invalid,
193
217
  &.ng-invalid.ng-touched,
194
218
  &.ng-invalid.ng-dirty {
195
- @include fill( $border: $invalid-border );
219
+ @include fill( $border: $kendo-input-invalid-border );
196
220
 
197
221
  .k-input-validation-icon {
198
222
  color: $invalid-text;
@@ -200,15 +224,17 @@
200
224
 
201
225
  &:focus,
202
226
  &.k-focus {
203
- @include box-shadow($invalid-shadow);
227
+ @include box-shadow( $kendo-input-invalid-shadow );
204
228
  }
205
229
  &:focus-within {
206
- @include box-shadow($invalid-shadow);
230
+ @include box-shadow( $kendo-input-invalid-shadow );
207
231
  }
208
232
  }
209
233
 
210
234
  }
211
235
 
236
+
237
+ // Outline picker
212
238
  .k-picker-outline {
213
239
  @include fill (
214
240
  $kendo-picker-outline-text,
@@ -216,6 +242,7 @@
216
242
  $kendo-picker-outline-border
217
243
  );
218
244
 
245
+ // Hover
219
246
  &:hover,
220
247
  &.k-hover {
221
248
  @include fill (
@@ -225,6 +252,7 @@
225
252
  );
226
253
  }
227
254
 
255
+ // Focus
228
256
  &:focus,
229
257
  &.k-focus {
230
258
  @include fill (
@@ -234,6 +262,14 @@
234
262
  );
235
263
  @include box-shadow ( $kendo-picker-outline-focus-shadow );
236
264
  }
265
+ &:focus-within {
266
+ @include fill (
267
+ $kendo-picker-outline-focus-text,
268
+ $kendo-picker-outline-focus-bg,
269
+ $kendo-picker-outline-focus-border
270
+ );
271
+ @include box-shadow ( $kendo-picker-outline-focus-shadow );
272
+ }
237
273
 
238
274
  &:focus:hover,
239
275
  &:focus.k-hover,
@@ -246,11 +282,24 @@
246
282
  );
247
283
  }
248
284
 
285
+ // Disabled
286
+ &:disabled,
287
+ &[disabled],
288
+ &.k-disabled {
289
+ @include fill(
290
+ $kendo-picker-disabled-text,
291
+ $kendo-picker-disabled-bg,
292
+ $kendo-picker-disabled-border,
293
+ $kendo-picker-disabled-gradient
294
+ );
295
+ @include box-shadow( $kendo-picker-disabled-shadow );
296
+ }
297
+
249
298
  // Invalid
250
299
  &.k-invalid,
251
300
  &.ng-invalid.ng-touched,
252
301
  &.ng-invalid.ng-dirty {
253
- @include fill( $border: $invalid-border );
302
+ @include fill( $border: $kendo-input-invalid-border );
254
303
 
255
304
  .k-input-validation-icon {
256
305
  color: $invalid-text;
@@ -258,15 +307,16 @@
258
307
 
259
308
  &:focus,
260
309
  &.k-focus {
261
- @include box-shadow($invalid-shadow);
310
+ @include box-shadow( $kendo-input-invalid-shadow );
262
311
  }
263
312
  &:focus-within {
264
- @include box-shadow($invalid-shadow);
313
+ @include box-shadow( $kendo-input-invalid-shadow );
265
314
  }
266
315
  }
267
316
  }
268
317
 
269
- // Flat
318
+
319
+ // Flat input
270
320
  .k-input-flat {
271
321
  @include fill (
272
322
  $kendo-input-flat-text,
@@ -274,6 +324,17 @@
274
324
  $kendo-input-flat-border
275
325
  );
276
326
 
327
+ // Hover
328
+ &:hover,
329
+ &.k-hover {
330
+ @include fill (
331
+ $kendo-input-flat-hover-text,
332
+ $kendo-input-flat-hover-bg,
333
+ $kendo-input-flat-hover-border
334
+ );
335
+ }
336
+
337
+ // Focus
277
338
  &:focus,
278
339
  &.k-focus {
279
340
  @include fill (
@@ -281,6 +342,28 @@
281
342
  $kendo-input-flat-focus-bg,
282
343
  $kendo-input-flat-focus-border
283
344
  );
345
+ @include box-shadow( $kendo-input-flat-focus-shadow );
346
+ }
347
+ &:focus-within {
348
+ @include fill (
349
+ $kendo-input-flat-focus-text,
350
+ $kendo-input-flat-focus-bg,
351
+ $kendo-input-flat-focus-border
352
+ );
353
+ @include box-shadow( $kendo-input-flat-focus-shadow );
354
+ }
355
+
356
+ // Disabled
357
+ &:disabled,
358
+ &[disabled],
359
+ &.k-disabled {
360
+ @include fill(
361
+ $kendo-input-disabled-text,
362
+ $kendo-input-disabled-bg,
363
+ $kendo-input-disabled-border,
364
+ $kendo-input-disabled-gradient
365
+ );
366
+ @include box-shadow( $kendo-input-disabled-shadow );
284
367
  }
285
368
 
286
369
  // Invalid
@@ -303,6 +386,8 @@
303
386
  }
304
387
  }
305
388
 
389
+
390
+ // Flat picker
306
391
  .k-picker-flat {
307
392
  @include fill (
308
393
  $kendo-picker-flat-text,
@@ -310,6 +395,7 @@
310
395
  $kendo-picker-flat-border
311
396
  );
312
397
 
398
+ // Hover
313
399
  &:hover,
314
400
  &.k-hover {
315
401
  @include fill (
@@ -319,6 +405,7 @@
319
405
  );
320
406
  }
321
407
 
408
+ // Focus
322
409
  &:focus,
323
410
  &.k-focus {
324
411
  @include fill (
@@ -328,6 +415,14 @@
328
415
  );
329
416
  @include box-shadow( $kendo-picker-flat-focus-shadow );
330
417
  }
418
+ &:focus-within {
419
+ @include fill (
420
+ $kendo-picker-flat-focus-text,
421
+ $kendo-picker-flat-focus-bg,
422
+ $kendo-picker-flat-focus-border
423
+ );
424
+ @include box-shadow( $kendo-picker-flat-focus-shadow );
425
+ }
331
426
 
332
427
  &:focus:hover,
333
428
  &:focus.k-hover,
@@ -340,6 +435,19 @@
340
435
  );
341
436
  }
342
437
 
438
+ // Disabled
439
+ &:disabled,
440
+ &[disabled],
441
+ &.k-disabled {
442
+ @include fill(
443
+ $kendo-picker-disabled-text,
444
+ $kendo-picker-disabled-bg,
445
+ $kendo-picker-disabled-border,
446
+ $kendo-picker-disabled-gradient
447
+ );
448
+ @include box-shadow( $kendo-picker-disabled-shadow );
449
+ }
450
+
343
451
  // Invalid
344
452
  &.k-invalid,
345
453
  &.ng-invalid.ng-touched,
package/scss/input/_variables.scss CHANGED
@@ -78,7 +78,7 @@ $kendo-input-disabled-gradient: null !default;
78
78
  $kendo-input-disabled-shadow: null !default;
79
79
 
80
80
  $kendo-input-outline-bg: null !default;
81
- $kendo-input-outline-text: null !default;
81
+ $kendo-input-outline-text: $kendo-input-text !default;
82
82
  $kendo-input-outline-border: rgba( $kendo-button-text, .5) !default;
83
83
 
84
84
  $kendo-input-outline-hover-bg: null !default;
@@ -87,18 +87,21 @@ $kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
87
87
 
88
88
  $kendo-input-outline-focus-bg: null !default;
89
89
  $kendo-input-outline-focus-text: null !default;
90
- $kendo-input-outline-focus-border: $kendo-input-outline-border !default;
90
+ $kendo-input-outline-focus-border: null !default;
91
91
  $kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
92
92
 
93
- $kendo-input-flat-bg: transparent !default;
93
+ $kendo-input-flat-bg: null !default;
94
94
  $kendo-input-flat-text: $kendo-input-text !default;
95
95
  $kendo-input-flat-border: $kendo-input-border !default;
96
96
 
97
+ $kendo-input-flat-hover-bg: null !default;
98
+ $kendo-input-flat-hover-text: null !default;
99
+ $kendo-input-flat-hover-border: $kendo-input-hover-border !default;
100
+
97
101
  $kendo-input-flat-focus-bg: null !default;
98
102
  $kendo-input-flat-focus-text: null !default;
99
103
  $kendo-input-flat-focus-border: null !default;
100
-
101
- $kendo-input-flat-border-radius: $kendo-border-radius $kendo-border-radius 0px 0px !default;
104
+ $kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
102
105
 
103
106
  $kendo-picker-bg: $kendo-button-bg !default;
104
107
  $kendo-picker-text: $kendo-button-text !default;
@@ -124,24 +127,24 @@ $kendo-picker-disabled-border: null !default;
124
127
  $kendo-picker-disabled-gradient: null !default;
125
128
  $kendo-picker-disabled-shadow: null !default;
126
129
 
127
- $kendo-picker-outline-bg: transparent !default;
128
- $kendo-picker-outline-text: null !default;
129
- $kendo-picker-outline-border: $kendo-button-text !default;
130
+ $kendo-picker-outline-bg: null !default;
131
+ $kendo-picker-outline-text: $kendo-button-text !default;
132
+ $kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
130
133
 
131
- $kendo-picker-outline-hover-bg: $kendo-button-text !default;
132
- $kendo-picker-outline-hover-text: $body-bg !default;
133
- $kendo-picker-outline-hover-border: null !default;
134
+ $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
135
+ $kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
136
+ $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
134
137
 
135
- $kendo-picker-outline-focus-bg: transparent !default;
136
- $kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
137
- $kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
138
+ $kendo-picker-outline-focus-bg: null !default;
139
+ $kendo-picker-outline-focus-text: null !default;
140
+ $kendo-picker-outline-focus-border: null !default;
138
141
  $kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
139
142
 
140
- $kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
141
- $kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
142
- $kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
143
+ $kendo-picker-outline-hover-focus-bg: null !default;
144
+ $kendo-picker-outline-hover-focus-text: null !default;
145
+ $kendo-picker-outline-hover-focus-border: null !default;
143
146
 
144
- $kendo-picker-flat-bg: transparent !default;
147
+ $kendo-picker-flat-bg: null !default;
145
148
  $kendo-picker-flat-text: $kendo-button-text !default;
146
149
  $kendo-picker-flat-border: $kendo-button-border !default;
147
150
 
@@ -152,7 +155,7 @@ $kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
152
155
  $kendo-picker-flat-focus-bg: null !default;
153
156
  $kendo-picker-flat-focus-text: null !default;
154
157
  $kendo-picker-flat-focus-border: null !default;
155
- $kendo-picker-flat-focus-shadow: null !default;
158
+ $kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
156
159
 
157
160
  $kendo-picker-flat-hover-focus-bg: null !default;
158
161
  $kendo-picker-flat-hover-focus-text: null !default;
package/scss/panelbar/_layout.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  margin: 0;
6
6
  padding: 0;
7
7
  border-width: $panelbar-border-width;
8
- border-style: solid;
8
+ border-style: $panelbar-border-style;
9
9
  box-sizing: border-box;
10
10
  outline: 0;
11
11
  font-family: $panelbar-font-family;
package/scss/panelbar/_variables.scss CHANGED
@@ -5,6 +5,7 @@ $panelbar-font-family: $font-family !default;
5
5
  $panelbar-font-size: $font-size !default;
6
6
  $panelbar-line-height: $line-height !default;
7
7
  $panelbar-border-width: 1px !default;
8
+ $panelbar-border-style: solid !default;
8
9
  $panelbar-item-border-width: 1px !default;
9
10
  $panelbar-item-border-style: solid !default;
10
11
 
package/scss/core/mixins/_input-ripple.scss DELETED
@@ -1,32 +0,0 @@
1
- @mixin input-ripple() {
2
- $height: 2 * $kendo-input-border-width;
3
-
4
- &::after {
5
- display: block;
6
- z-index: 2;
7
- content: "";
8
- position: absolute;
9
- bottom: calc( 1px - #{$height} );
10
- left: 0;
11
- right: 0;
12
- height: $height;
13
- margin: auto;
14
- opacity: 0;
15
- transform: scaleX(.5);
16
- transition: transform .3s;
17
- background-color: $primary;
18
- }
19
-
20
- &.k-state-focused::after ,
21
- &.k-focus::after {
22
- opacity: 1;
23
- transform: scaleX(1);
24
- }
25
-
26
-
27
- &.k-state-invalid::after ,
28
- &.k-invalid::after {
29
- background-color: $error;
30
- transition: none;
31
- }
32
- }