@progress/kendo-theme-bootstrap 5.2.1-dev.0 → 5.2.1-dev.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/all.css CHANGED
@@ -997,15 +997,17 @@ kendo-sortable {
997
997
  text-indent: -4000px;
998
998
  text-align: center;
999
999
  position: absolute;
1000
+ color: currentColor;
1000
1001
  }
1001
1002
 
1002
1003
  .k-loading-image {
1003
1004
  z-index: 2;
1005
+ color: currentColor;
1004
1006
  }
1005
1007
 
1006
1008
  .k-loading-color {
1007
1009
  background-color: #ffffff;
1008
- opacity: .3;
1010
+ opacity: 0.3;
1009
1011
  }
1010
1012
 
1011
1013
  .k-i-loading {
@@ -13354,10 +13356,62 @@ kendo-badge-container {
13354
13356
  margin: 0;
13355
13357
  }
13356
13358
 
13357
- input.k-input {
13359
+ .k-input:-ms-input-placeholder, .k-picker:-ms-input-placeholder {
13360
+ color: #6c757d;
13361
+ opacity: 1;
13362
+ -ms-user-select: none;
13363
+ user-select: none;
13364
+ }
13365
+
13366
+ .k-input::placeholder,
13367
+ .k-picker::placeholder {
13368
+ color: #6c757d;
13369
+ opacity: 1;
13370
+ -webkit-user-select: none;
13371
+ -ms-user-select: none;
13372
+ user-select: none;
13373
+ }
13374
+
13375
+ .k-input:-ms-input-placeholder,
13376
+ .k-picker:-ms-input-placeholder {
13377
+ color: #6c757d;
13378
+ }
13379
+
13380
+ input.k-input,
13381
+ textarea.k-textarea {
13358
13382
  padding: 0.375rem 0.75rem;
13359
13383
  }
13360
13384
 
13385
+ input.k-input:disabled, input.k-input[disabled],
13386
+ textarea.k-textarea:disabled,
13387
+ textarea.k-textarea[disabled] {
13388
+ outline: none;
13389
+ cursor: default;
13390
+ opacity: 0.65;
13391
+ filter: grayscale(0.1);
13392
+ pointer-events: none;
13393
+ box-shadow: none;
13394
+ }
13395
+
13396
+ [disabled] input.k-input:disabled,
13397
+ .k-disabled input.k-input:disabled,
13398
+ .k-state-disabled input.k-input:disabled, [disabled] input.k-input[disabled],
13399
+ .k-disabled input.k-input[disabled],
13400
+ .k-state-disabled input.k-input[disabled], [disabled]
13401
+ textarea.k-textarea:disabled,
13402
+ .k-disabled
13403
+ textarea.k-textarea:disabled,
13404
+ .k-state-disabled
13405
+ textarea.k-textarea:disabled, [disabled]
13406
+ textarea.k-textarea[disabled],
13407
+ .k-disabled
13408
+ textarea.k-textarea[disabled],
13409
+ .k-state-disabled
13410
+ textarea.k-textarea[disabled] {
13411
+ opacity: 1;
13412
+ filter: grayscale(0);
13413
+ }
13414
+
13361
13415
  .k-picker {
13362
13416
  cursor: pointer;
13363
13417
  }
@@ -13368,6 +13422,24 @@ select.k-picker {
13368
13422
  appearance: auto;
13369
13423
  }
13370
13424
 
13425
+ select.k-picker:disabled, select.k-picker[disabled] {
13426
+ outline: none;
13427
+ cursor: default;
13428
+ opacity: 0.65;
13429
+ filter: grayscale(0.1);
13430
+ pointer-events: none;
13431
+ box-shadow: none;
13432
+ }
13433
+
13434
+ [disabled] select.k-picker:disabled,
13435
+ .k-disabled select.k-picker:disabled,
13436
+ .k-state-disabled select.k-picker:disabled, [disabled] select.k-picker[disabled],
13437
+ .k-disabled select.k-picker[disabled],
13438
+ .k-state-disabled select.k-picker[disabled] {
13439
+ opacity: 1;
13440
+ filter: grayscale(0);
13441
+ }
13442
+
13371
13443
  .k-input-inner {
13372
13444
  padding: 0.375rem 0.75rem;
13373
13445
  width: 100%;
@@ -13934,7 +14006,6 @@ textarea.k-input-inner {
13934
14006
  cursor: text;
13935
14007
  transform-origin: left center;
13936
14008
  transition: transform 0.2s ease-out, color 0.2s ease-out, top 0.2s ease-out, left 0.2s ease-out;
13937
- pointer-events: none;
13938
14009
  }
13939
14010
 
13940
14011
  .k-floating-label-container > .k-widget {
@@ -13946,6 +14017,7 @@ textarea.k-input-inner {
13946
14017
  top: calc(1.875rem + 1px);
13947
14018
  left: calc(0.75rem + 1px);
13948
14019
  transform: scale(1);
14020
+ pointer-events: none;
13949
14021
  }
13950
14022
 
13951
14023
  .k-floating-label-container > .k-label,
@@ -16360,6 +16432,7 @@ kendo-label > .k-label {
16360
16432
  .k-form-buttons {
16361
16433
  margin-top: 2rem;
16362
16434
  padding: 0;
16435
+ overflow: visible;
16363
16436
  }
16364
16437
 
16365
16438
  .k-form-hint,
@@ -19312,286 +19385,8 @@ kendo-label > .k-label {
19312
19385
  overflow: hidden;
19313
19386
  }
19314
19387
 
19315
- .k-dropdowngrid-popup .k-virtual-wrap {
19316
- margin: 0;
19317
- }
19318
-
19319
- .k-dropdowngrid-popup .k-list-scroller {
19320
- overflow-x: hidden;
19321
- }
19322
-
19323
- .k-grid-list {
19324
- margin: 0;
19325
- padding: 0;
19326
- width: 100%;
19327
- max-width: none;
19328
- border-width: 0;
19329
- border-collapse: collapse;
19330
- border-spacing: 0;
19331
- table-layout: fixed;
19332
- empty-cells: show;
19333
- outline: none;
19334
- display: table;
19335
- list-style: none;
19336
- }
19337
-
19338
- .k-dropdowngrid-popup .k-grid-header {
19339
- border-width: 0 0 1px;
19340
- border-style: solid;
19341
- border-color: inherit;
19342
- display: block;
19343
- }
19344
-
19345
- .k-dropdowngrid-popup .k-grid-header-wrap {
19346
- border-width: 0 1px 0 0;
19347
- border-style: solid;
19348
- border-color: inherit;
19349
- vertical-align: top;
19350
- display: inline-block;
19351
- overflow: hidden;
19352
- }
19353
-
19354
- .k-dropdowngrid-popup .k-grid-header table {
19355
- margin-bottom: -1px;
19356
- width: 100%;
19357
- max-width: none;
19388
+ .k-dropdowngrid-popup > .k-data-table {
19358
19389
  border-width: 0;
19359
- border-collapse: collapse;
19360
- border-spacing: 0;
19361
- table-layout: fixed;
19362
- empty-cells: show;
19363
- outline: none;
19364
- }
19365
-
19366
- .k-dropdowngrid-popup .k-grid-header .k-header {
19367
- padding: 0.5rem 0.5rem;
19368
- border-width: 0 0 0 1px;
19369
- border-style: solid;
19370
- font-weight: normal;
19371
- text-align: left;
19372
- white-space: nowrap;
19373
- text-overflow: ellipsis;
19374
- overflow: hidden;
19375
- }
19376
-
19377
- .k-dropdowngrid-popup .k-grid-header .k-header:first-child {
19378
- border-left: 0;
19379
- }
19380
-
19381
- .k-grid-list > .k-item {
19382
- box-sizing: border-box;
19383
- display: table-row;
19384
- position: relative;
19385
- cursor: pointer;
19386
- }
19387
-
19388
- .k-grid-list > .k-item > .k-cell,
19389
- .k-grid-list > .k-item > .k-group,
19390
- .k-grid-list > .k-item > .k-spacer-group {
19391
- box-sizing: border-box;
19392
- display: table-cell;
19393
- vertical-align: middle;
19394
- }
19395
-
19396
- .k-grid-list.k-virtual-list > .k-item > .k-cell,
19397
- .k-grid-list.k-virtual-list > .k-item > .k-group,
19398
- .k-grid-list.k-virtual-list > .k-item > .k-spacer-group {
19399
- display: inline-block;
19400
- }
19401
-
19402
- .k-grid-list > .k-item:last-child > .k-cell,
19403
- .k-grid-list > .k-item:last-child > .k-group-cell,
19404
- .k-grid-list > .k-item:last-child > .k-spacer-cell {
19405
- border-bottom-width: 0;
19406
- }
19407
-
19408
- .k-grid-list > .k-item > .k-cell {
19409
- padding: 0.5rem 0.5rem;
19410
- border-width: 0 0 0px 1px;
19411
- border-style: solid;
19412
- text-align: left;
19413
- white-space: nowrap;
19414
- text-overflow: ellipsis;
19415
- overflow: hidden;
19416
- }
19417
-
19418
- .k-grid-list > .k-item > .k-cell:first-child {
19419
- border-left: 0;
19420
- }
19421
-
19422
- .k-dropdowngrid-popup .k-group-header,
19423
- .k-dropdowngrid-popup .k-outer-group-header {
19424
- margin: 0;
19425
- padding: 0.5rem 0.5rem;
19426
- min-height: auto;
19427
- font-size: inherit;
19428
- text-align: left;
19429
- font-weight: bold;
19430
- }
19431
-
19432
- .k-grid-list > .k-item.k-first {
19433
- border-top: 1px solid currentColor;
19434
- }
19435
-
19436
- .k-grid-list > .k-item > .k-group-cell,
19437
- .k-grid-list > .k-item > .k-spacer-cell {
19438
- padding: 0;
19439
- width: 0;
19440
- border-left-width: 0;
19441
- border-right-width: 0;
19442
- overflow: visible;
19443
- position: relative;
19444
- }
19445
-
19446
- .k-grid-list > .k-item > .k-group-cell > span {
19447
- padding: 0 0.25rem;
19448
- font-size: .75em;
19449
- position: absolute;
19450
- top: 0;
19451
- right: 0;
19452
- }
19453
-
19454
- .k-grid-list > .k-outer-group-header {
19455
- height: 2.5rem;
19456
- display: table-row;
19457
- position: relative;
19458
- }
19459
-
19460
- .k-grid-list > .k-outer-group-header > strong {
19461
- padding: 0.5rem 0.5rem;
19462
- width: 100%;
19463
- box-sizing: border-box;
19464
- position: absolute;
19465
- left: 0;
19466
- }
19467
-
19468
- .k-dropdowngrid-popup .k-footer {
19469
- padding: 0.5rem 0.5rem;
19470
- border-width: 1px 0 0;
19471
- border-style: solid;
19472
- text-align: left;
19473
- white-space: nowrap;
19474
- text-overflow: ellipsis;
19475
- overflow: hidden;
19476
- position: relative;
19477
- flex-shrink: 0;
19478
- }
19479
-
19480
- .k-rtl.k-dropdowngrid-popup .k-grid-header-wrap,
19481
- .k-rtl .k-dropdowngrid-popup .k-grid-header-wrap,
19482
- [dir="rtl"].k-dropdowngrid-popup .k-grid-header-wrap,
19483
- [dir="rtl"] .k-dropdowngrid-popup .k-grid-header-wrap {
19484
- border-right-width: 0;
19485
- border-left-width: 1px;
19486
- }
19487
-
19488
- .k-rtl.k-dropdowngrid-popup .k-grid-header .k-header,
19489
- .k-rtl .k-dropdowngrid-popup .k-grid-header .k-header,
19490
- .k-rtl .k-grid-list > .k-item > .k-cell,
19491
- [dir="rtl"].k-dropdowngrid-popup .k-grid-header .k-header,
19492
- [dir="rtl"] .k-dropdowngrid-popup .k-grid-header .k-header,
19493
- [dir="rtl"] .k-grid-list > .k-item > .k-cell {
19494
- border-left-width: 0;
19495
- border-right-width: 1px;
19496
- text-align: right;
19497
- }
19498
-
19499
- .k-rtl.k-dropdowngrid-popup .k-grid-header .k-header:first-child,
19500
- .k-rtl .k-dropdowngrid-popup .k-grid-header .k-header:first-child,
19501
- .k-rtl .k-grid-list > .k-item > .k-cell:first-child,
19502
- [dir="rtl"].k-dropdowngrid-popup .k-grid-header .k-header:first-child,
19503
- [dir="rtl"] .k-dropdowngrid-popup .k-grid-header .k-header:first-child,
19504
- [dir="rtl"] .k-grid-list > .k-item > .k-cell:first-child {
19505
- border-right-width: 0;
19506
- }
19507
-
19508
- .k-rtl div.k-dropdowngrid-popup .k-group-header,
19509
- .k-rtl div.k-dropdowngrid-popup .k-outer-group-header,
19510
- [dir="rtl"] div.k-dropdowngrid-popup .k-group-header,
19511
- [dir="rtl"] div.k-dropdowngrid-popup .k-outer-group-header {
19512
- text-align: right;
19513
- }
19514
-
19515
- .k-rtl .k-grid-list > .k-item > .k-group-cell > span,
19516
- [dir="rtl"] .k-grid-list > .k-item > .k-group-cell > span {
19517
- right: auto;
19518
- left: 0;
19519
- }
19520
-
19521
- .k-rtl .k-grid-list > .k-outer-group-header > strong,
19522
- [dir="rtl"] .k-grid-list > .k-outer-group-header > strong {
19523
- left: auto;
19524
- right: 0;
19525
- }
19526
-
19527
- .k-dropdowngrid-popup {
19528
- border-color: #dee2e6;
19529
- color: #212529;
19530
- background-color: #ffffff;
19531
- }
19532
-
19533
- .k-dropdowngrid-popup .k-header,
19534
- .k-dropdowngrid-popup .k-grid-header {
19535
- border-color: #dee2e6;
19536
- color: #212529;
19537
- background-color: #f8f9fa;
19538
- }
19539
-
19540
- .k-dropdowngrid-popup .k-footer {
19541
- border-color: #dee2e6;
19542
- color: #212529;
19543
- background-color: #f8f9fa;
19544
- }
19545
-
19546
- .k-dropdowngrid-popup .k-group-header,
19547
- .k-dropdowngrid-popup .k-outer-group-header {
19548
- border-color: #dee2e6;
19549
- color: #212529;
19550
- background-color: #f8f9fa;
19551
- }
19552
-
19553
- .k-grid-list > .k-group-header,
19554
- .k-grid-list > .k-outer-group-header {
19555
- background: none;
19556
- box-shadow: none;
19557
- }
19558
-
19559
- .k-grid-list > .k-item:nth-child(2n) {
19560
- background-color: rgba(0, 0, 0, 0.04);
19561
- }
19562
-
19563
- .k-grid-list > .k-outer-group-header:nth-child(2n) > strong {
19564
- background-color: rgba(0, 0, 0, 0.04);
19565
- }
19566
-
19567
- .k-dropdowngrid-popup .k-cell {
19568
- border-color: #dee2e6;
19569
- }
19570
-
19571
- .k-dropdowngrid-popup .k-item.k-state-hover,
19572
- .k-dropdowngrid-popup .k-item:hover {
19573
- background-color: rgba(0, 0, 0, 0.08);
19574
- }
19575
-
19576
- .k-dropdowngrid-popup .k-item.k-state-selected {
19577
- border-color: #dee2e6;
19578
- color: #212529;
19579
- background-color: rgba(13, 110, 253, 0.25);
19580
- }
19581
-
19582
- .k-dropdowngrid-popup .k-item.k-state-focused {
19583
- box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
19584
- }
19585
-
19586
- .k-dropdowngrid-popup .k-group-cell span {
19587
- background-color: #212529;
19588
- color: #ffffff;
19589
- }
19590
-
19591
- .k-grid-list > .k-item.k-last > .k-cell,
19592
- .k-grid-list > .k-item.k-last > .k-group-cell,
19593
- .k-grid-list > .k-item.k-last > .k-spacer-cell {
19594
- border-bottom-color: #212529;
19595
19390
  }
19596
19391
 
19597
19392
  .k-dropdown-operator {
@@ -19830,7 +19625,7 @@ kendo-label > .k-label {
19830
19625
  }
19831
19626
 
19832
19627
  .k-popup-dropdowntree .k-check-all {
19833
- padding: 0.5rem 0.5rem;
19628
+ padding: 0.5rem 0.5rem 0;
19834
19629
  }
19835
19630
 
19836
19631
  .k-popup-dropdowntree .k-treeview {
@@ -26491,7 +26286,7 @@ div.k-grid-footer {
26491
26286
  cursor: pointer;
26492
26287
  }
26493
26288
 
26494
- .k-grid-header .k-header > .k-link > .k-icon.k-i-sort-desc-sm, .k-grid-header .k-header > .k-link > .k-icon.k-i-sort-asc-sm {
26289
+ .k-grid-header .k-cell-inner > .k-link > .k-icon.k-i-sort-desc-sm, .k-grid-header .k-cell-inner > .k-link > .k-icon.k-i-sort-asc-sm {
26495
26290
  vertical-align: text-top;
26496
26291
  margin-left: calc(1rem - 1px);
26497
26292
  }
@@ -26916,6 +26711,7 @@ div.k-grid-norecords {
26916
26711
  display: flex;
26917
26712
  flex-flow: row nowrap;
26918
26713
  align-items: center;
26714
+ justify-content: inherit;
26919
26715
  overflow: hidden;
26920
26716
  }
26921
26717
 
@@ -26925,6 +26721,7 @@ div.k-grid-norecords {
26925
26721
  display: flex;
26926
26722
  flex-flow: row nowrap;
26927
26723
  align-items: center;
26724
+ justify-content: inherit;
26928
26725
  flex: 1;
26929
26726
  overflow: hidden;
26930
26727
  }
package/dist/all.scss CHANGED
@@ -3298,7 +3298,10 @@ $header-gradient: null !default;
3298
3298
 
3299
3299
 
3300
3300
  // Loading
3301
-
3301
+ $loading-bg: $component-bg !default;
3302
+ $loading-text: currentColor !default;
3303
+ $loading-opacity: .3 !default;
3304
+ $zindex-loading: 100 !default;
3302
3305
 
3303
3306
  // Placeholder
3304
3307
  $placeholder-line-width: 100% !default;
@@ -4748,7 +4751,7 @@ $display4-letter-spacing: null !default;
4748
4751
  }
4749
4752
 
4750
4753
  .k-loading-mask {
4751
- z-index: 100;
4754
+ z-index: $zindex-loading;
4752
4755
 
4753
4756
  &.k-opaque {
4754
4757
  .k-loading-color {
@@ -4760,13 +4763,15 @@ $display4-letter-spacing: null !default;
4760
4763
  text-indent: -4000px;
4761
4764
  text-align: center;
4762
4765
  position: absolute;
4766
+ color: $loading-text;
4763
4767
  }
4764
4768
  .k-loading-image {
4765
4769
  z-index: 2;
4770
+ color: $loading-text;
4766
4771
  }
4767
4772
  .k-loading-color {
4768
- background-color: $component-bg;
4769
- opacity: .3;
4773
+ background-color: $loading-bg;
4774
+ opacity: $loading-opacity;
4770
4775
  }
4771
4776
 
4772
4777
  // Loading indicator
@@ -4774,7 +4779,7 @@ $display4-letter-spacing: null !default;
4774
4779
  position: relative;
4775
4780
  background-color: transparent;
4776
4781
  box-sizing: border-box;
4777
- color: currentColor;
4782
+ color: $loading-text;
4778
4783
 
4779
4784
  &::before,
4780
4785
  &::after {
@@ -9585,8 +9590,6 @@ $popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !d
9585
9590
  }
9586
9591
  .k-animation-container {
9587
9592
  @include border-bottom-radius-only( $kendo-border-radius-md );
9588
-
9589
- .k-popup {}
9590
9593
  }
9591
9594
 
9592
9595
  .k-animation-container-shown {
@@ -11189,13 +11192,34 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11189
11192
  & > * {
11190
11193
  margin: 0;
11191
11194
  }
11192
- }
11193
11195
 
11196
+ &::placeholder {
11197
+ color: $kendo-input-placeholder-text;
11198
+ opacity: $kendo-input-placeholder-opacity;
11199
+ user-select: none;
11200
+ }
11201
+ &:-ms-input-placeholder {
11202
+ color: $kendo-input-placeholder-text;
11203
+ }
11204
+ }
11194
11205
 
11195
- // Input
11206
+ // Input and Textarea
11196
11207
  .k-input {}
11197
- input.k-input {
11208
+ input.k-input,
11209
+ textarea.k-textarea {
11198
11210
  padding: $kendo-input-padding-y $kendo-input-padding-x;
11211
+
11212
+ &:disabled,
11213
+ &[disabled] {
11214
+ @include disabled( $disabled-styling );
11215
+
11216
+ [disabled] &,
11217
+ .k-disabled &,
11218
+ .k-state-disabled & {
11219
+ opacity: 1;
11220
+ filter: grayscale(0);
11221
+ }
11222
+ }
11199
11223
  }
11200
11224
 
11201
11225
 
@@ -11206,6 +11230,18 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11206
11230
  select.k-picker {
11207
11231
  padding: $kendo-input-padding-y $kendo-input-padding-x;
11208
11232
  appearance: auto;
11233
+
11234
+ &:disabled,
11235
+ &[disabled] {
11236
+ @include disabled( $disabled-styling );
11237
+
11238
+ [disabled] &,
11239
+ .k-disabled &,
11240
+ .k-state-disabled & {
11241
+ opacity: 1;
11242
+ filter: grayscale(0);
11243
+ }
11244
+ }
11209
11245
  }
11210
11246
 
11211
11247
 
@@ -11591,6 +11627,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11591
11627
  $kendo-input-hover-bg,
11592
11628
  $kendo-input-hover-border
11593
11629
  );
11630
+ @include box-shadow( $kendo-input-hover-shadow );
11594
11631
  }
11595
11632
 
11596
11633
  // Focus
@@ -11665,6 +11702,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11665
11702
  $kendo-picker-hover-border,
11666
11703
  $kendo-picker-hover-gradient
11667
11704
  );
11705
+ @include box-shadow( $kendo-picker-hover-shadow );
11668
11706
  }
11669
11707
 
11670
11708
  // Focus
@@ -11800,7 +11838,6 @@ $floating-label-focus-text: null !default;
11800
11838
  cursor: text;
11801
11839
  transform-origin: left center;
11802
11840
  transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, left $floating-label-transition;
11803
- pointer-events: none;
11804
11841
  }
11805
11842
 
11806
11843
  > .k-widget {
@@ -11813,6 +11850,7 @@ $floating-label-focus-text: null !default;
11813
11850
  top: $floating-label-offset-y;
11814
11851
  left: $floating-label-offset-x;
11815
11852
  transform: scale( $floating-label-scale );
11853
+ pointer-events: none;
11816
11854
  }
11817
11855
  }
11818
11856
 
@@ -13157,7 +13195,7 @@ $kendo-chip-sizes: (
13157
13195
 
13158
13196
  /// The base background color of the chip.
13159
13197
  /// @group chip
13160
- $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text ) !default;
13198
+ $kendo-chip-base-bg: $kendo-button-text !default;
13161
13199
 
13162
13200
  /// Theme colors map for the chip.
13163
13201
  /// @group chip
@@ -15791,6 +15829,7 @@ $fieldset-legend-border: null !default;
15791
15829
  @extend .k-actions;
15792
15830
  margin-top: 2 * $form-field-margin-top;
15793
15831
  padding: 0;
15832
+ overflow: visible;
15794
15833
  }
15795
15834
 
15796
15835
  // Form Hint/Error Messages
@@ -20755,211 +20794,15 @@ $kendo-daterange-picker-input-width: 10em;
20755
20794
  // #region @import "~@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/dropdowngrid/_layout.scss
20756
20795
  @include exports("dropdowngrid/layout") {
20757
20796
 
20758
- // Dropdown grid
20797
+ // DropdownGrid
20759
20798
  .k-dropdown-grid {}
20760
20799
 
20800
+ // DropdowGrid Popup
20761
20801
  .k-dropdowngrid-popup {
20762
20802
  overflow: hidden;
20763
20803
  }
20764
- .k-dropdowngrid-popup .k-virtual-wrap {
20765
- margin: 0;
20766
- }
20767
-
20768
- .k-dropdowngrid-popup .k-list-scroller {
20769
- overflow-x: hidden;
20770
- }
20771
-
20772
- // Grid list
20773
- .k-grid-list {
20774
- margin: 0;
20775
- padding: 0;
20776
- width: 100%;
20777
- max-width: none;
20778
- border-width: 0;
20779
- border-collapse: collapse;
20780
- border-spacing: 0;
20781
- table-layout: fixed;
20782
- empty-cells: show;
20783
- outline: none;
20784
- display: table;
20785
- list-style: none;
20786
- }
20787
-
20788
-
20789
- // Header
20790
- .k-dropdowngrid-popup .k-grid-header {
20791
- border-width: 0 0 1px;
20792
- border-style: solid;
20793
- border-color: inherit;
20794
- font-size: $grid-header-font-size;
20795
- display: block;
20796
- }
20797
- .k-dropdowngrid-popup .k-grid-header-wrap {
20798
- border-width: 0 $grid-cell-vertical-border-width 0 0;
20799
- border-style: solid;
20800
- border-color: inherit;
20801
- vertical-align: top;
20802
- display: inline-block;
20803
- overflow: hidden;
20804
- }
20805
- .k-dropdowngrid-popup .k-grid-header table {
20806
- margin-bottom: -1px;
20807
- width: 100%;
20808
- max-width: none;
20804
+ .k-dropdowngrid-popup > .k-data-table {
20809
20805
  border-width: 0;
20810
- border-collapse: collapse;
20811
- border-spacing: 0;
20812
- table-layout: fixed;
20813
- empty-cells: show;
20814
- outline: none;
20815
- }
20816
- .k-dropdowngrid-popup .k-grid-header .k-header {
20817
- padding: $grid-header-padding-y $grid-header-padding-x;
20818
- border-width: 0 0 0 $grid-cell-vertical-border-width;
20819
- border-style: solid;
20820
- font-weight: normal;
20821
- text-align: left;
20822
- white-space: nowrap;
20823
- text-overflow: ellipsis;
20824
- overflow: hidden;
20825
-
20826
- &:first-child {
20827
- border-left: 0;
20828
- }
20829
- }
20830
-
20831
-
20832
- // Rows
20833
- .k-grid-list > .k-item {
20834
- box-sizing: border-box;
20835
- display: table-row;
20836
- position: relative;
20837
- cursor: pointer;
20838
- }
20839
- .k-grid-list > .k-item > .k-cell,
20840
- .k-grid-list > .k-item > .k-group,
20841
- .k-grid-list > .k-item > .k-spacer-group {
20842
- box-sizing: border-box;
20843
- display: table-cell;
20844
- vertical-align: middle;
20845
- }
20846
- .k-grid-list.k-virtual-list > .k-item > .k-cell,
20847
- .k-grid-list.k-virtual-list > .k-item > .k-group,
20848
- .k-grid-list.k-virtual-list > .k-item > .k-spacer-group {
20849
- display: inline-block;
20850
- }
20851
- .k-grid-list > .k-item:last-child > .k-cell,
20852
- .k-grid-list > .k-item:last-child > .k-group-cell,
20853
- .k-grid-list > .k-item:last-child > .k-spacer-cell {
20854
- border-bottom-width: 0;
20855
- }
20856
-
20857
-
20858
- // Cells
20859
- .k-grid-list > .k-item > .k-cell {
20860
- padding: $grid-cell-padding-y $grid-cell-padding-x;
20861
- border-width: 0 0 $grid-cell-horizontal-border-width $grid-cell-vertical-border-width;
20862
- border-style: solid;
20863
- text-align: left;
20864
- white-space: nowrap;
20865
- text-overflow: ellipsis;
20866
- overflow: hidden;
20867
-
20868
- &:first-child {
20869
- border-left: 0;
20870
- }
20871
- }
20872
-
20873
-
20874
- // Grouping
20875
- .k-dropdowngrid-popup .k-group-header,
20876
- .k-dropdowngrid-popup .k-outer-group-header {
20877
- margin: 0;
20878
- padding: $grid-header-padding-y $grid-header-padding-x;
20879
- min-height: auto;
20880
- font-size: inherit;
20881
- text-align: left;
20882
- font-weight: bold;
20883
- }
20884
- .k-grid-list > .k-item.k-first {
20885
- border-top: 1px solid currentColor;
20886
- }
20887
- .k-grid-list > .k-item > .k-group-cell,
20888
- .k-grid-list > .k-item > .k-spacer-cell {
20889
- padding: 0;
20890
- width: 0;
20891
- border-left-width: 0;
20892
- border-right-width: 0;
20893
- overflow: visible;
20894
- position: relative;
20895
- }
20896
- .k-grid-list > .k-item > .k-group-cell > span {
20897
- padding: 0 ($grid-cell-padding-x / 2);
20898
- font-size: .75em;
20899
- position: absolute;
20900
- top: 0;
20901
- right: 0;
20902
- }
20903
- .k-grid-list > .k-outer-group-header {
20904
- height: calc( #{$grid-header-padding-y * 2} + (#{$font-size} * #{$line-height}) );
20905
- display: table-row;
20906
- position: relative;
20907
- }
20908
- .k-grid-list > .k-outer-group-header > strong {
20909
- padding: $grid-header-padding-y $grid-header-padding-x;
20910
- width: 100%;
20911
- box-sizing: border-box;
20912
- position: absolute;
20913
- left: 0;
20914
- }
20915
-
20916
-
20917
- // Footer
20918
- .k-dropdowngrid-popup .k-footer {
20919
- padding: $grid-footer-padding-y $grid-footer-padding-x;
20920
- border-width: 1px 0 0;
20921
- border-style: solid;
20922
- text-align: left;
20923
- white-space: nowrap;
20924
- text-overflow: ellipsis;
20925
- overflow: hidden;
20926
- position: relative;
20927
- flex-shrink: 0;
20928
- }
20929
-
20930
-
20931
- // RTL
20932
- .k-rtl,
20933
- [dir="rtl"] {
20934
- &.k-dropdowngrid-popup .k-grid-header-wrap,
20935
- .k-dropdowngrid-popup .k-grid-header-wrap {
20936
- border-right-width: 0;
20937
- border-left-width: $grid-cell-vertical-border-width;
20938
- }
20939
- &.k-dropdowngrid-popup .k-grid-header .k-header,
20940
- .k-dropdowngrid-popup .k-grid-header .k-header,
20941
- .k-grid-list > .k-item > .k-cell {
20942
- border-left-width: 0;
20943
- border-right-width: $grid-cell-vertical-border-width;
20944
- text-align: right;
20945
- }
20946
- &.k-dropdowngrid-popup .k-grid-header .k-header:first-child,
20947
- .k-dropdowngrid-popup .k-grid-header .k-header:first-child,
20948
- .k-grid-list > .k-item > .k-cell:first-child {
20949
- border-right-width: 0;
20950
- }
20951
- div.k-dropdowngrid-popup .k-group-header,
20952
- div.k-dropdowngrid-popup .k-outer-group-header {
20953
- text-align: right;
20954
- }
20955
- .k-grid-list > .k-item > .k-group-cell > span {
20956
- right: auto;
20957
- left: 0;
20958
- }
20959
- .k-grid-list > .k-outer-group-header > strong {
20960
- left: auto;
20961
- right: 0;
20962
- }
20963
20806
  }
20964
20807
 
20965
20808
  }
@@ -20974,91 +20817,6 @@ $kendo-daterange-picker-input-width: 10em;
20974
20817
  // Dropdown grid
20975
20818
  .k-dropdown-grid {}
20976
20819
 
20977
- // Dropdowngrid
20978
- .k-dropdowngrid-popup {
20979
- border-color: $grid-border;
20980
- color: $grid-text;
20981
- background-color: $grid-bg;
20982
- }
20983
-
20984
-
20985
- // Header
20986
- .k-dropdowngrid-popup .k-header,
20987
- .k-dropdowngrid-popup .k-grid-header {
20988
- border-color: $grid-header-border;
20989
- color: $grid-header-text;
20990
- background-color: $grid-header-bg;
20991
- }
20992
-
20993
-
20994
- // Footer
20995
- .k-dropdowngrid-popup .k-footer {
20996
- border-color: $grid-header-border;
20997
- color: $grid-header-text;
20998
- background-color: $grid-header-bg;
20999
- }
21000
-
21001
-
21002
- // Group header
21003
- .k-dropdowngrid-popup .k-group-header,
21004
- .k-dropdowngrid-popup .k-outer-group-header {
21005
- border-color: $grid-header-border;
21006
- color: $grid-header-text;
21007
- background-color: $grid-header-bg;
21008
- }
21009
- .k-grid-list > .k-group-header,
21010
- .k-grid-list > .k-outer-group-header {
21011
- background: none;
21012
- box-shadow: none;
21013
- }
21014
-
21015
-
21016
- // Alt
21017
- .k-grid-list > .k-item:nth-child(2n) {
21018
- background-color: $grid-alt-bg;
21019
- }
21020
- .k-grid-list > .k-outer-group-header:nth-child(2n) {
21021
-
21022
- > strong {
21023
- background-color: $grid-alt-bg;
21024
- }
21025
- }
21026
-
21027
-
21028
- // Cells
21029
- .k-dropdowngrid-popup .k-cell {
21030
- border-color: $grid-border;
21031
- }
21032
-
21033
-
21034
- // Interactive states
21035
- .k-dropdowngrid-popup .k-item.k-state-hover,
21036
- .k-dropdowngrid-popup .k-item:hover {
21037
- border-color: $grid-hovered-border;
21038
- color: $grid-hovered-text;
21039
- background-color: $grid-hovered-bg;
21040
- }
21041
- .k-dropdowngrid-popup .k-item.k-state-selected {
21042
- border-color: $grid-selected-border;
21043
- color: $grid-selected-text;
21044
- background-color: $grid-selected-bg;
21045
- }
21046
- .k-dropdowngrid-popup .k-item.k-state-focused {
21047
- box-shadow: $grid-focused-shadow;
21048
- }
21049
-
21050
-
21051
- // Grouping
21052
- .k-dropdowngrid-popup .k-group-cell span {
21053
- background-color: $grid-text;
21054
- color: $grid-bg;
21055
- }
21056
- .k-grid-list > .k-item.k-last > .k-cell,
21057
- .k-grid-list > .k-item.k-last > .k-group-cell,
21058
- .k-grid-list > .k-item.k-last > .k-spacer-cell {
21059
- border-bottom-color: $grid-text;
21060
- }
21061
-
21062
20820
  }
21063
20821
 
21064
20822
  // #endregion
@@ -21714,7 +21472,7 @@ $dropdowntree-popup-padding-y: map-get( $spacing, 2 ) !default;
21714
21472
  padding: 0;
21715
21473
 
21716
21474
  .k-check-all {
21717
- padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x;
21475
+ padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x 0;
21718
21476
  }
21719
21477
 
21720
21478
  .k-treeview {
@@ -31341,7 +31099,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31341
31099
  }
31342
31100
  }
31343
31101
 
31344
- .k-header > .k-link > .k-icon {
31102
+ .k-cell-inner > .k-link > .k-icon {
31345
31103
  &.k-i-sort-desc-sm,
31346
31104
  &.k-i-sort-asc-sm {
31347
31105
  vertical-align: text-top;
@@ -31774,6 +31532,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31774
31532
  display: flex;
31775
31533
  flex-flow: row nowrap;
31776
31534
  align-items: center;
31535
+ justify-content: inherit;
31777
31536
  overflow: hidden;
31778
31537
 
31779
31538
  > .k-link {
@@ -31782,6 +31541,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
31782
31541
  display: flex;
31783
31542
  flex-flow: row nowrap;
31784
31543
  align-items: center;
31544
+ justify-content: inherit;
31785
31545
  flex: 1;
31786
31546
  overflow: hidden;
31787
31547
 
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 3 Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#000000",
9
9
  "#222222",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 3",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 4 Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#000000",
9
9
  "#212529",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f8f9fa",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Dataviz v4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#0275d8",
9
9
  "#5bc0de",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Main Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#000000",
9
9
  "#212529",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f8f9fa",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Nordic",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f8f9fa",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Turquoise Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#000000",
9
9
  "#292b2c",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Turquoise",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f2f2f2",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Urban",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#e3eef4",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Vintage",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "5.2.1-dev.0",
6
+ "version": "5.2.1-dev.3",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f2efe8",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-bootstrap",
3
3
  "description": "Bootstrap theme for Kendo UI",
4
- "version": "5.2.1-dev.0",
4
+ "version": "5.2.1-dev.3",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -49,8 +49,8 @@
49
49
  "postpublish": "echo 'no postpublish for bootstrap theme'"
50
50
  },
51
51
  "dependencies": {
52
- "@progress/kendo-theme-default": "^5.2.1-dev.0",
52
+ "@progress/kendo-theme-default": "^5.2.1-dev.3",
53
53
  "bootstrap": "^5.1.0"
54
54
  },
55
- "gitHead": "f6b17e06a93aecfe630f62097c35dde302cda493"
55
+ "gitHead": "db20870bc630e0c6c28aa3eec31965c1a7d79793"
56
56
  }
@@ -357,7 +357,10 @@ $header-gradient: null !default;
357
357
 
358
358
 
359
359
  // Loading
360
-
360
+ $loading-bg: $component-bg !default;
361
+ $loading-text: currentColor !default;
362
+ $loading-opacity: .3 !default;
363
+ $zindex-loading: 100 !default;
361
364
 
362
365
  // Placeholder
363
366
  $placeholder-line-width: 100% !default;
@@ -60,7 +60,7 @@ $kendo-chip-sizes: (
60
60
 
61
61
  /// The base background color of the chip.
62
62
  /// @group chip
63
- $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text ) !default;
63
+ $kendo-chip-base-bg: $kendo-button-text !default;
64
64
 
65
65
  /// Theme colors map for the chip.
66
66
  /// @group chip