@progress/kendo-theme-bootstrap 5.0.0-beta.5 → 5.0.0-beta.6

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.scss CHANGED
@@ -8878,9 +8878,6 @@ $kendo-checkbox-ripple-opacity: .25 !default;
8878
8878
  text-overflow: ellipsis;
8879
8879
  cursor: pointer;
8880
8880
  }
8881
- .k-list-optionlabel {
8882
- @extend .k-list-group-sticky-header;
8883
- }
8884
8881
 
8885
8882
 
8886
8883
  // List content
@@ -8933,6 +8930,9 @@ $kendo-checkbox-ripple-opacity: .25 !default;
8933
8930
  right: 0;
8934
8931
  }
8935
8932
  }
8933
+ .k-list-optionlabel {
8934
+ @extend .k-list-item;
8935
+ }
8936
8936
 
8937
8937
 
8938
8938
  // List group item
@@ -9050,7 +9050,7 @@ $kendo-checkbox-ripple-opacity: .25 !default;
9050
9050
 
9051
9051
  // No data
9052
9052
  .k-no-data {
9053
- min-height: 138px;
9053
+ min-height: 140px;
9054
9054
  display: flex;
9055
9055
  align-items: center;
9056
9056
  justify-content: center;
@@ -9803,6 +9803,12 @@ $badge-dot-size-lg: 12px !default;
9803
9803
  vertical-align: middle;
9804
9804
  overflow: hidden;
9805
9805
  text-overflow: ellipsis;
9806
+
9807
+ *,
9808
+ *::before,
9809
+ *::after {
9810
+ box-sizing: border-box;
9811
+ }
9806
9812
  }
9807
9813
  .k-badge > * {
9808
9814
  color: inherit;
@@ -10256,6 +10262,12 @@ $kendo-button-transition: $transition !default;
10256
10262
  position: relative;
10257
10263
  transition: $kendo-button-transition;
10258
10264
 
10265
+ *,
10266
+ *::before,
10267
+ *::after {
10268
+ box-sizing: border-box;
10269
+ }
10270
+
10259
10271
  &:disabled,
10260
10272
  &.k-disabled {
10261
10273
  @include disabled( $disabled-styling );
@@ -10363,6 +10375,7 @@ $kendo-button-transition: $transition !default;
10363
10375
  // Menu button
10364
10376
  .k-menu-button,
10365
10377
  .k-dropdown-button {
10378
+ aspect-ratio: auto;
10366
10379
  outline: 0;
10367
10380
  display: inline-flex;
10368
10381
  flex-flow: row nowrap;
@@ -10912,28 +10925,34 @@ $kendo-input-sizes: (
10912
10925
  padding-y: $kendo-input-padding-y-sm,
10913
10926
  font-size: $kendo-input-font-size-sm,
10914
10927
  line-height: $kendo-input-line-height-sm,
10915
- icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} )
10928
+ icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} ),
10929
+ button-padding-x: $kendo-input-padding-y-sm,
10930
+ button-padding-y: $kendo-input-padding-y-sm
10916
10931
  ),
10917
10932
  md: (
10918
10933
  padding-x: $kendo-input-padding-x-md,
10919
10934
  padding-y: $kendo-input-padding-y-md,
10920
10935
  font-size: $kendo-input-font-size-md,
10921
10936
  line-height: $kendo-input-line-height-md,
10922
- icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} )
10937
+ icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} ),
10938
+ button-padding-x: $kendo-input-padding-y-md,
10939
+ button-padding-y: $kendo-input-padding-y-md
10923
10940
  ),
10924
10941
  lg: (
10925
10942
  padding-x: $kendo-input-padding-x-lg,
10926
10943
  padding-y: $kendo-input-padding-y-lg,
10927
10944
  font-size: $kendo-input-font-size-lg,
10928
10945
  line-height: $kendo-input-line-height-lg,
10929
- icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} )
10946
+ icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} ),
10947
+ button-padding-x: $kendo-input-padding-y-lg,
10948
+ button-padding-y: $kendo-input-padding-y-lg
10930
10949
  )
10931
10950
  ) !default;
10932
10951
 
10933
10952
  $kendo-input-bg: $input-bg !default;
10934
10953
  $kendo-input-text: $input-color !default;
10935
10954
  $kendo-input-border: $input-border-color !default;
10936
- $kendo-input-shadow: none !default;
10955
+ $kendo-input-shadow: null !default;
10937
10956
 
10938
10957
  $kendo-input-hover-bg: null !default;
10939
10958
  $kendo-input-hover-text: null !default;
@@ -10945,6 +10964,24 @@ $kendo-input-focus-text: $input-focus-color !default;
10945
10964
  $kendo-input-focus-border: $input-focus-border-color !default;
10946
10965
  $kendo-input-focus-shadow: $input-focus-box-shadow !default;
10947
10966
 
10967
+ $kendo-picker-bg: $kendo-button-bg !default;
10968
+ $kendo-picker-text: $kendo-button-text !default;
10969
+ $kendo-picker-border: $kendo-button-border !default;
10970
+ $kendo-picker-gradient: $kendo-button-gradient !default;
10971
+ $kendo-picker-shadow: $kendo-button-shadow !default;
10972
+
10973
+ $kendo-picker-hover-bg: $kendo-button-hover-bg !default;
10974
+ $kendo-picker-hover-text: $kendo-button-hover-text !default;
10975
+ $kendo-picker-hover-border: $kendo-button-hover-border !default;
10976
+ $kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
10977
+ $kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;
10978
+
10979
+ $kendo-picker-focus-bg: $kendo-button-focus-bg !default;
10980
+ $kendo-picker-focus-text: $kendo-button-focus-text !default;
10981
+ $kendo-picker-focus-border: $kendo-button-focus-border !default;
10982
+ $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
10983
+ $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
10984
+
10948
10985
  $kendo-input-placeholder-text: $input-placeholder-color !default;
10949
10986
  $kendo-input-placeholder-opacity: 1 !default;
10950
10987
 
@@ -10989,6 +11026,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
10989
11026
  padding: 0;
10990
11027
  width: $kendo-input-default-width;
10991
11028
  min-width: 0;
11029
+ box-sizing: border-box;
10992
11030
  border-width: $kendo-input-border-width;
10993
11031
  border-style: solid;
10994
11032
  outline: 0;
@@ -11006,6 +11044,12 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11006
11044
  text-overflow: ellipsis;
11007
11045
  -webkit-appearance: none;
11008
11046
 
11047
+ *,
11048
+ *::before,
11049
+ *::after {
11050
+ box-sizing: border-box;
11051
+ }
11052
+
11009
11053
  .k-input,
11010
11054
  .k-picker {
11011
11055
  border-width: 0 !important; // sass-lint:disable-line no-important
@@ -11053,7 +11097,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11053
11097
  position: relative;
11054
11098
  z-index: 1;
11055
11099
  overflow: hidden;
11056
- text-overflow: ellipsis;
11100
+ text-overflow: clip;
11057
11101
  -webkit-appearance: none;
11058
11102
 
11059
11103
  // Hide clear icon
@@ -11092,7 +11136,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11092
11136
  .k-input-value-text {
11093
11137
  flex: 1;
11094
11138
  overflow: hidden;
11095
- text-overflow: ellipsis;
11139
+ text-overflow: clip;
11096
11140
  }
11097
11141
  .k-input-value-text::before {
11098
11142
  content: "\200b";
@@ -11300,6 +11344,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11300
11344
  $_font-size: map-get( $size-props, font-size );
11301
11345
  $_line-height: map-get( $size-props, line-height );
11302
11346
  $_icon-size: map-get( $size-props, icon-size );
11347
+ $_button-padding-x: map-get( $size-props, button-padding-x );
11348
+ $_button-padding-y: map-get( $size-props, button-padding-y );
11303
11349
 
11304
11350
  .k-input-#{$size},
11305
11351
  .k-picker-#{$size} {
@@ -11310,6 +11356,12 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11310
11356
  padding: $_padding-y $_padding-x;
11311
11357
  }
11312
11358
 
11359
+ .k-input-button,
11360
+ .k-spinner-increase,
11361
+ .k-spinner-decrease {
11362
+ padding: $_button-padding-y $_button-padding-x;
11363
+ }
11364
+
11313
11365
  .k-input-icon,
11314
11366
  .k-input-validation-icon,
11315
11367
  .k-input-loading-icon,
@@ -11440,20 +11492,20 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11440
11492
  // Solid picker
11441
11493
  .k-picker {
11442
11494
  @include fill(
11443
- $kendo-button-text,
11444
- $kendo-button-bg,
11445
- $kendo-button-border,
11446
- $kendo-button-gradient
11495
+ $kendo-picker-text,
11496
+ $kendo-picker-bg,
11497
+ $kendo-picker-border,
11498
+ $kendo-picker-gradient
11447
11499
  );
11448
11500
 
11449
11501
  // Hover
11450
11502
  &:hover,
11451
11503
  &.k-hover {
11452
11504
  @include fill(
11453
- $kendo-button-hover-text,
11454
- $kendo-button-hover-bg,
11455
- $kendo-button-hover-border,
11456
- $kendo-button-hover-gradient
11505
+ $kendo-picker-hover-text,
11506
+ $kendo-picker-hover-bg,
11507
+ $kendo-picker-hover-border,
11508
+ $kendo-picker-hover-gradient
11457
11509
  );
11458
11510
  }
11459
11511
 
@@ -11461,21 +11513,21 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
11461
11513
  &:focus,
11462
11514
  &.k-focus {
11463
11515
  @include fill (
11464
- $kendo-button-focus-text,
11465
- $kendo-button-focus-bg,
11466
- $kendo-button-focus-border,
11467
- $kendo-button-focus-gradient
11516
+ $kendo-picker-focus-text,
11517
+ $kendo-picker-focus-bg,
11518
+ $kendo-picker-focus-border,
11519
+ $kendo-picker-focus-gradient
11468
11520
  );
11469
- @include box-shadow( $kendo-button-focus-shadow );
11521
+ @include box-shadow( $kendo-picker-focus-shadow );
11470
11522
  }
11471
11523
  &:focus-within {
11472
11524
  @include fill (
11473
- $kendo-button-focus-text,
11474
- $kendo-button-focus-bg,
11475
- $kendo-button-focus-border,
11476
- $kendo-button-focus-gradient
11525
+ $kendo-picker-focus-text,
11526
+ $kendo-picker-focus-bg,
11527
+ $kendo-picker-focus-border,
11528
+ $kendo-picker-focus-gradient
11477
11529
  );
11478
- @include box-shadow( $kendo-button-focus-shadow );
11530
+ @include box-shadow( $kendo-picker-focus-shadow );
11479
11531
  }
11480
11532
 
11481
11533
  // Invalid
@@ -11551,12 +11603,19 @@ $floating-label-focus-text: null !default;
11551
11603
  // Floating label
11552
11604
  .k-floating-label-container {
11553
11605
  padding-top: $floating-label-height;
11606
+ box-sizing: border-box;
11554
11607
  display: inline-flex;
11555
11608
  vertical-align: middle;
11556
11609
  position: relative;
11557
11610
  flex-direction: column;
11558
11611
  justify-content: stretch;
11559
11612
 
11613
+ *,
11614
+ *::before,
11615
+ *::after {
11616
+ box-sizing: border-box;
11617
+ }
11618
+
11560
11619
  > .k-label {
11561
11620
  max-width: 90%;
11562
11621
  font-size: $floating-label-font-size;
@@ -11822,7 +11881,7 @@ $kendo-menu-popup-border-width: $popup-border-width !default;
11822
11881
  $kendo-menu-popup-font-size: $font-size-md !default;
11823
11882
  $kendo-menu-popup-font-size-sm: $font-size-md !default;
11824
11883
  $kendo-menu-popup-font-size-md: $font-size-md !default;
11825
- $kendo-menu-popup-font-size-lg: $font-size-lg !default;
11884
+ $kendo-menu-popup-font-size-lg: $font-size-md !default;
11826
11885
 
11827
11886
  /// Line heights used along with $font-size.
11828
11887
  /// @group menu
@@ -12747,6 +12806,12 @@ $kendo-avatar-theme-colors: $theme-colors !default;
12747
12806
  align-items: center;
12748
12807
  flex-shrink: 0;
12749
12808
  overflow: hidden;
12809
+
12810
+ *,
12811
+ *::before,
12812
+ *::after {
12813
+ box-sizing: border-box;
12814
+ }
12750
12815
  }
12751
12816
 
12752
12817
 
@@ -12869,28 +12934,28 @@ $kendo-chip-spacing: map-get( $spacing, 2 );
12869
12934
 
12870
12935
  /// Horizontal padding of the chip.
12871
12936
  /// @group chip
12872
- $kendo-chip-padding-x: $padding-x-sm !default;
12873
- $kendo-chip-padding-x-sm: $kendo-chip-padding-x / 2 !default;
12874
- $kendo-chip-padding-x-md: ($kendo-chip-padding-x - map-get( $spacing, "hair" )) !default;
12875
- $kendo-chip-padding-x-lg: $kendo-chip-padding-x * 1.25 !default;
12937
+ $kendo-chip-padding-x: map-get( $spacing, 1 ) !default;
12938
+ $kendo-chip-padding-x-sm: map-get( $spacing, 1 ) !default;
12939
+ $kendo-chip-padding-x-md: map-get( $spacing, 1 ) !default;
12940
+ $kendo-chip-padding-x-lg: map-get( $spacing, 1 ) !default;
12876
12941
 
12877
12942
  /// Vertical padding of the chip.
12878
12943
  /// @group chip
12879
- $kendo-chip-padding-y: $kendo-chip-padding-x !default;
12880
- $kendo-chip-padding-y-sm: $kendo-chip-padding-x-sm !default;
12881
- $kendo-chip-padding-y-md: $kendo-chip-padding-x-md !default;
12882
- $kendo-chip-padding-y-lg: $kendo-chip-padding-x-lg !default;
12944
+ $kendo-chip-padding-y: map-get( $spacing, 1 ) !default;
12945
+ $kendo-chip-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
12946
+ $kendo-chip-padding-y-md: map-get( $spacing, 1 ) !default;
12947
+ $kendo-chip-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
12883
12948
 
12884
12949
  /// Font sizes of the chip.
12885
12950
  /// @group chip
12886
- $kendo-chip-font-size: $font-size !default;
12887
- $kendo-chip-font-size-sm: $font-size-sm !default;
12888
- $kendo-chip-font-size-md: $font-size !default;
12889
- $kendo-chip-font-size-lg: $font-size-lg !default;
12951
+ $kendo-chip-font-size: $font-size-md !default;
12952
+ $kendo-chip-font-size-sm: $font-size-md !default;
12953
+ $kendo-chip-font-size-md: $font-size-md !default;
12954
+ $kendo-chip-font-size-lg: $font-size-md !default;
12890
12955
 
12891
12956
  /// Line heights of the chip that are connected to the $font-size.
12892
12957
  /// @group chip
12893
- $kendo-chip-line-height: normal !default;
12958
+ $kendo-chip-line-height: 1.375 !default;
12894
12959
  $kendo-chip-line-height-sm: $kendo-chip-line-height !default;
12895
12960
  $kendo-chip-line-height-md: $kendo-chip-line-height !default;
12896
12961
  $kendo-chip-line-height-lg: $kendo-chip-line-height !default;
@@ -12898,9 +12963,24 @@ $kendo-chip-line-height-lg: $kendo-chip-line-height !default;
12898
12963
  /// Sizes map for the chip.
12899
12964
  /// @group chip
12900
12965
  $kendo-chip-sizes: (
12901
- sm: ( font-size: $kendo-chip-font-size-sm, line-height: $kendo-chip-line-height-sm, padding: $kendo-chip-padding-x-sm ),
12902
- md: ( font-size: $kendo-chip-font-size-md, line-height: $kendo-chip-line-height-md, padding: $kendo-chip-padding-x-md ),
12903
- lg: ( font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg, padding: $kendo-chip-padding-x-lg )
12966
+ sm: (
12967
+ padding-x: $kendo-chip-padding-x-sm,
12968
+ padding-y: $kendo-chip-padding-y-sm,
12969
+ font-size: $kendo-chip-font-size-sm,
12970
+ line-height: $kendo-chip-line-height-sm
12971
+ ),
12972
+ md: (
12973
+ padding-x: $kendo-chip-padding-x-md,
12974
+ padding-y: $kendo-chip-padding-y-md,
12975
+ font-size: $kendo-chip-font-size-md,
12976
+ line-height: $kendo-chip-line-height-md
12977
+ ),
12978
+ lg: (
12979
+ padding-x: $kendo-chip-padding-x-lg,
12980
+ padding-y: $kendo-chip-padding-y-lg,
12981
+ font-size: $kendo-chip-font-size-lg,
12982
+ line-height: $kendo-chip-line-height-lg
12983
+ )
12904
12984
  ) !default;
12905
12985
 
12906
12986
  /// The base background color of the chip.
@@ -13012,6 +13092,12 @@ $kendo-chip-list-sizes: (
13012
13092
  cursor: pointer;
13013
13093
  user-select: none;
13014
13094
 
13095
+ *,
13096
+ *::before,
13097
+ *::after {
13098
+ box-sizing: border-box;
13099
+ }
13100
+
13015
13101
  .k-selected-icon-wrapper {
13016
13102
  display: none !important; // sass-lint:disable-line no-important
13017
13103
  }
@@ -13127,16 +13213,14 @@ $kendo-chip-list-sizes: (
13127
13213
 
13128
13214
  // Sizes
13129
13215
  @each $size, $size-props in $kendo-chip-sizes {
13130
-
13216
+ $_padding-x: map-get( $size-props, padding-x );
13217
+ $_padding-y: map-get( $size-props, padding-y );
13131
13218
  $_font-size: map-get( $size-props, font-size );
13132
13219
  $_line-height: map-get( $size-props, line-height );
13133
- $_padding: map-get( $size-props, padding );
13134
- $_size: calc( #{$line-height-xs * 1em} + #{$_padding * 2} + #{$kendo-chip-border-width * 2} );
13135
13220
  $_avatar-size: 1em;
13136
13221
 
13137
13222
  .k-chip-#{$size} {
13138
- height: $_size;
13139
- padding: $_padding;
13223
+ padding: $_padding-y $_padding-x;
13140
13224
  font-size: $_font-size;
13141
13225
  line-height: $_line-height;
13142
13226
  }
@@ -13332,6 +13416,12 @@ $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAA
13332
13416
  flex-wrap: nowrap;
13333
13417
  position: relative;
13334
13418
  overflow: hidden;
13419
+
13420
+ *,
13421
+ *::before,
13422
+ *::after {
13423
+ box-sizing: border-box;
13424
+ }
13335
13425
  }
13336
13426
 
13337
13427
 
@@ -14199,6 +14289,559 @@ $tooltip-error-border: $tooltip-error-bg !default;
14199
14289
  // #endregion
14200
14290
  // #region @import "../popup/_index.scss"; -> packages/bootstrap/scss/popup/_index.scss
14201
14291
  // File already imported_once. Skipping output.
14292
+ // #endregion
14293
+ // #region @import "../menu/_index.scss"; -> packages/bootstrap/scss/menu/_index.scss
14294
+ // #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
14295
+ // File already imported_once. Skipping output.
14296
+ // #endregion
14297
+
14298
+
14299
+ // Dependencies
14300
+ // #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
14301
+ // File already imported_once. Skipping output.
14302
+ // #endregion
14303
+ // #region @import "../popup/_index.scss"; -> packages/bootstrap/scss/popup/_index.scss
14304
+ // File already imported_once. Skipping output.
14305
+ // #endregion
14306
+ // #region @import "../list/_index.scss"; -> packages/bootstrap/scss/list/_index.scss
14307
+ // File already imported_once. Skipping output.
14308
+ // #endregion
14309
+ // #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
14310
+ // File already imported_once. Skipping output.
14311
+ // #endregion
14312
+ // #region @import "../list/_index.scss"; -> packages/bootstrap/scss/list/_index.scss
14313
+ // File already imported_once. Skipping output.
14314
+ // #endregion
14315
+
14316
+
14317
+ // Component
14318
+ // #region @import "_variables.scss"; -> packages/bootstrap/scss/menu/_variables.scss
14319
+ // File already imported_once. Skipping output.
14320
+ // #endregion
14321
+ // #region @import "_layout.scss"; -> packages/bootstrap/scss/menu/_layout.scss
14322
+ // #region @import "~@progress/kendo-theme-default/scss/menu/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/menu/_layout.scss
14323
+ @include exports("menu/layout") {
14324
+
14325
+ // Menu bar
14326
+ .k-menu-bar {
14327
+ border-width: $menu-border-width;
14328
+ border-style: solid;
14329
+ box-sizing: border-box;
14330
+ outline: 0;
14331
+ font-family: $menu-font-family;
14332
+ font-size: $menu-font-size;
14333
+ line-height: $menu-line-height;
14334
+ display: flex;
14335
+ flex-wrap: nowrap;
14336
+ align-items: stretch;
14337
+ position: relative;
14338
+ cursor: default;
14339
+ -webkit-touch-callout: none;
14340
+ -webkit-tap-highlight-color: $rgba-transparent;
14341
+
14342
+ *,
14343
+ *::before,
14344
+ *::after {
14345
+ box-sizing: border-box;
14346
+ }
14347
+ }
14348
+ .k-menu { @extend .k-menu-bar !optional; }
14349
+
14350
+
14351
+ // Menu item
14352
+ .k-menu-item {
14353
+ border-width: 0;
14354
+ outline: 0;
14355
+ display: flex;
14356
+ flex-flow: column nowrap;
14357
+ flex: none;
14358
+ position: relative;
14359
+ user-select: none;
14360
+ }
14361
+ .k-menu-item-content {
14362
+ display: block;
14363
+ height: auto;
14364
+ overflow: visible;
14365
+
14366
+ .k-actions {
14367
+ margin-top: 0;
14368
+ }
14369
+ }
14370
+
14371
+
14372
+ // Menu link
14373
+ .k-menu-link {
14374
+ padding: $menu-item-padding-y $menu-item-padding-x;
14375
+ outline: 0;
14376
+ color: inherit;
14377
+ display: flex;
14378
+ flex-flow: row nowrap;
14379
+ flex: 1 1 auto;
14380
+ gap: $menu-item-icon-spacing;
14381
+ align-items: center;
14382
+ position: relative;
14383
+ white-space: nowrap;
14384
+ cursor: pointer;
14385
+ }
14386
+
14387
+
14388
+ // Menu item text
14389
+ .k-menu-link-text {
14390
+ display: flex;
14391
+ flex-flow: row nowrap;
14392
+ flex: 1 1 auto;
14393
+ overflow: hidden;
14394
+ text-overflow: ellipsis;
14395
+ }
14396
+
14397
+
14398
+ // Expand arrow
14399
+ .k-menu-expand-arrow {
14400
+ margin-inline-end: -$icon-spacing;
14401
+ display: inline-flex;
14402
+ flex-flow: row wrap;
14403
+ align-items: center;
14404
+ flex: none;
14405
+ position: relative;
14406
+ }
14407
+
14408
+
14409
+ // Orientation -- horizontal
14410
+ .k-menu-horizontal {
14411
+ flex-direction: row;
14412
+
14413
+ > .k-menu-item + .k-menu-item {
14414
+ margin-left: $menu-item-spacing;
14415
+ }
14416
+
14417
+ > .k-separator {
14418
+ margin: 0 $menu-separator-spacing;
14419
+ width: 0;
14420
+ height: auto;
14421
+ border-width: 0 0 0 1px;
14422
+ border-style: solid;
14423
+ }
14424
+ }
14425
+
14426
+
14427
+ // Orientation -- vertical
14428
+ .k-menu-vertical {
14429
+ flex-direction: column;
14430
+
14431
+ > .k-menu-item + .k-menu-item {
14432
+ margin-top: $menu-item-spacing;
14433
+ }
14434
+
14435
+ > .k-menu-item > .k-menu-link {
14436
+ padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
14437
+ padding-right: $kendo-menu-popup-item-padding-end;
14438
+ }
14439
+
14440
+ > .k-separator {
14441
+ margin: $menu-separator-spacing 0;
14442
+ height: 0;
14443
+ border-width: 1px 0 0;
14444
+ border-style: solid;
14445
+ border-color: $panel-border;
14446
+ display: block;
14447
+ }
14448
+ }
14449
+
14450
+
14451
+ // Menu popup
14452
+ .k-menu-popup {
14453
+ padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
14454
+ box-sizing: border-box;
14455
+ border-width: $kendo-menu-popup-border-width;
14456
+ border-style: solid;
14457
+ overflow: auto;
14458
+ max-height: 80vh;
14459
+
14460
+ *,
14461
+ *::before,
14462
+ *::after {
14463
+ box-sizing: border-box;
14464
+ }
14465
+ }
14466
+
14467
+
14468
+ // Sub menu
14469
+ .k-menu-group {
14470
+ margin: 0;
14471
+ padding: 0;
14472
+ list-style: none;
14473
+ display: flex;
14474
+ flex-flow: column nowrap;
14475
+ position: absolute;
14476
+
14477
+ .k-menu-item + .k-menu-item {
14478
+ margin-top: $kendo-menu-popup-item-spacing;
14479
+ }
14480
+
14481
+ .k-separator {
14482
+ margin: $menu-separator-spacing 0;
14483
+ height: 0;
14484
+ border-width: 1px 0 0;
14485
+ border-style: solid;
14486
+ border-color: $component-border;
14487
+ display: block;
14488
+ }
14489
+ }
14490
+ .k-menu-popup .k-menu-group {
14491
+ position: relative;
14492
+ }
14493
+
14494
+
14495
+ // Sizes
14496
+ .k-menu-group-sm {
14497
+ font-size: $kendo-menu-popup-font-size-sm;
14498
+ line-height: $kendo-menu-popup-line-height-sm;
14499
+
14500
+ // jquery popup overrides those
14501
+ .k-menu-item {
14502
+ font-size: $kendo-menu-popup-font-size-sm;
14503
+ line-height: $kendo-menu-popup-line-height-sm;
14504
+ }
14505
+
14506
+ .k-menu-link {
14507
+ padding: $kendo-menu-popup-item-padding-y-sm $kendo-menu-popup-item-padding-x-sm;
14508
+ padding-inline-end: $kendo-menu-popup-item-padding-end-sm;
14509
+ }
14510
+
14511
+ .k-menu-expand-arrow {
14512
+ margin-inline-start: $kendo-menu-popup-item-icon-margin-start-sm;
14513
+ margin-inline-end: $kendo-menu-popup-item-icon-margin-end-sm;
14514
+ }
14515
+ }
14516
+ .k-menu-group-md {
14517
+ font-size: $kendo-menu-popup-font-size-md;
14518
+ line-height: $kendo-menu-popup-line-height-md;
14519
+
14520
+ // jquery popup overrides those
14521
+ .k-menu-item {
14522
+ font-size: $kendo-menu-popup-font-size-md;
14523
+ line-height: $kendo-menu-popup-line-height-md;
14524
+ }
14525
+
14526
+ .k-menu-link {
14527
+ padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
14528
+ padding-inline-end: $kendo-menu-popup-item-padding-end-md;
14529
+ }
14530
+
14531
+ .k-menu-expand-arrow {
14532
+ margin-inline-start: $kendo-menu-popup-item-icon-margin-start;
14533
+ margin-inline-end: $kendo-menu-popup-item-icon-margin-end;
14534
+ }
14535
+ }
14536
+ .k-menu-group-lg {
14537
+ font-size: $kendo-menu-popup-font-size-lg;
14538
+ line-height: $kendo-menu-popup-line-height-lg;
14539
+
14540
+ // jquery popup overrides those
14541
+ .k-menu-item {
14542
+ font-size: $kendo-menu-popup-font-size-lg;
14543
+ line-height: $kendo-menu-popup-line-height-lg;
14544
+ }
14545
+
14546
+ .k-menu-link {
14547
+ padding: $kendo-menu-popup-item-padding-y-lg $kendo-menu-popup-item-padding-x-lg;
14548
+ padding-inline-end: $kendo-menu-popup-item-padding-end-lg;
14549
+ }
14550
+
14551
+ .k-menu-expand-arrow {
14552
+ margin-inline-start: $kendo-menu-popup-item-icon-margin-start-lg;
14553
+ margin-inline-end: $kendo-menu-popup-item-icon-margin-end-lg;
14554
+ }
14555
+ }
14556
+
14557
+
14558
+ // Context menu
14559
+ .k-popups-wrapper {
14560
+ position: relative;
14561
+ border: 0;
14562
+ margin: 0;
14563
+ padding: 0;
14564
+ }
14565
+ .k-context-menu {
14566
+ margin: 0;
14567
+ padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
14568
+ border-width: $kendo-menu-popup-border-width;
14569
+ border-style: solid;
14570
+
14571
+ &.k-menu-horizontal {
14572
+ padding: $kendo-menu-popup-padding-x $kendo-menu-popup-padding-y;
14573
+ }
14574
+ }
14575
+ .k-animation-container .k-context-menu.k-menu-horizontal {
14576
+ // kendo-jquery adds `display: block` via js and we need to override it.
14577
+ display: flex !important; // sass-lint:disable-line no-important
14578
+ flex-wrap: nowrap;
14579
+ }
14580
+ .k-context-menu-popup {
14581
+ z-index: 12000;
14582
+
14583
+ .k-context-menu {
14584
+ border-width: 0;
14585
+ }
14586
+ }
14587
+ .k-popup .k-context-menu,
14588
+ .k-context-menu-popup .k-context-menu {
14589
+ border-width: 0;
14590
+ }
14591
+
14592
+
14593
+ // Scrolling
14594
+ .k-menu-scroll-wrapper {
14595
+ margin: 0;
14596
+ padding: 0;
14597
+ border: 0;
14598
+ position: relative;
14599
+
14600
+ .k-menu {
14601
+ overflow: hidden;
14602
+ flex-wrap: nowrap;
14603
+ }
14604
+ }
14605
+ .k-menu-scroll-button {
14606
+ @include border-radius( 0 );
14607
+ padding: 0;
14608
+ border-width: 0;
14609
+ border-color: inherit;
14610
+ color: inherit;
14611
+ background: inherit;
14612
+ position: absolute;
14613
+
14614
+ &.k-scroll-left {
14615
+ top: 0;
14616
+ left: 0;
14617
+ height: 100%;
14618
+ width: 16px;
14619
+ border-right-width: 1px;
14620
+ }
14621
+ &.k-scroll-right {
14622
+ top: 0;
14623
+ right: 0;
14624
+ height: 100%;
14625
+ width: 16px;
14626
+ border-left-width: 1px;
14627
+ }
14628
+ &.k-scroll-up {
14629
+ top: 0;
14630
+ left: 0;
14631
+ width: 100%;
14632
+ height: 16px;
14633
+ border-bottom-width: 1px;
14634
+ }
14635
+ &.k-scroll-down {
14636
+ bottom: 0;
14637
+ left: 0;
14638
+ width: 100%;
14639
+ height: 16px;
14640
+ border-top-width: 1px;
14641
+ }
14642
+ }
14643
+
14644
+
14645
+ // RTL
14646
+ .k-rtl,
14647
+ [dir="rtl"] {
14648
+
14649
+ // Orientation -- horizontal
14650
+ .k-menu-horizontal {
14651
+
14652
+ > .k-menu-item + .k-menu-item {
14653
+ margin-right: $menu-item-spacing;
14654
+ margin-left: 0;
14655
+ }
14656
+ }
14657
+
14658
+
14659
+ // Orientation -- vertical
14660
+ .k-menu-vertical {
14661
+
14662
+ > .k-menu-item > .k-menu-link {
14663
+ padding-right: $kendo-menu-popup-item-padding-x;
14664
+ padding-left: $kendo-menu-popup-item-padding-end;
14665
+ }
14666
+ }
14667
+
14668
+
14669
+ // Sub menu
14670
+ .k-menu-group {
14671
+
14672
+ .k-menu-link {
14673
+ padding-right: $kendo-menu-popup-item-padding-x;
14674
+ padding-left: $kendo-menu-popup-item-padding-end;
14675
+ }
14676
+
14677
+ }
14678
+
14679
+ }
14680
+
14681
+ }
14682
+
14683
+ // #endregion
14684
+
14685
+ @include exports("menu/layout/bootstrap") {
14686
+
14687
+ .k-menu.k-menu-horizontal:not(.k-context-menu) {
14688
+ padding: $navbar-padding-y $navbar-padding-x;
14689
+ }
14690
+ .k-menu.k-menu-vertical:not(.k-context-menu) {
14691
+ padding: $navbar-padding-y 0;
14692
+ }
14693
+
14694
+ .k-menu-group,
14695
+ .k-menu-vertical {
14696
+
14697
+ .k-menu-popup & {
14698
+ padding: 0;
14699
+ }
14700
+ }
14701
+
14702
+ .k-context-menu-popup {
14703
+ > .k-popup:not(.k-menu-popup) {
14704
+ padding: 0;
14705
+ }
14706
+
14707
+ .k-context-menu {
14708
+ @include border-radius( $border-radius );
14709
+ }
14710
+
14711
+ .k-header {
14712
+ font-size: inherit;
14713
+ font-weight: inherit;
14714
+ }
14715
+ }
14716
+ }
14717
+
14718
+ // #endregion
14719
+ // #region @import "_theme.scss"; -> packages/bootstrap/scss/menu/_theme.scss
14720
+ // #region @import "~@progress/kendo-theme-default/scss/menu/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/menu/_theme.scss
14721
+ @include exports("menu/theme") {
14722
+
14723
+ .k-menu:not(.k-context-menu) {
14724
+ @include fill(
14725
+ $menu-text,
14726
+ $menu-bg,
14727
+ $menu-border,
14728
+ $menu-gradient
14729
+ );
14730
+
14731
+ > .k-item {
14732
+ @include fill(
14733
+ $menu-item-text,
14734
+ $menu-item-bg,
14735
+ $menu-item-border,
14736
+ $menu-item-gradient
14737
+ );
14738
+
14739
+ &:hover,
14740
+ &.k-hover {
14741
+ @include fill(
14742
+ $menu-item-hover-text,
14743
+ $menu-item-hover-bg,
14744
+ $menu-item-hover-border,
14745
+ $menu-item-hover-gradient
14746
+ );
14747
+ }
14748
+
14749
+ &:active,
14750
+ &.k-active {
14751
+ @include fill(
14752
+ $menu-item-expanded-text,
14753
+ $menu-item-expanded-bg,
14754
+ $menu-item-expanded-border,
14755
+ $menu-item-expanded-gradient
14756
+ );
14757
+ }
14758
+
14759
+ &:focus,
14760
+ &.k-focus {
14761
+ @include box-shadow( $menu-item-focus-shadow );
14762
+ }
14763
+ }
14764
+ }
14765
+
14766
+ .k-menu-group,
14767
+ .k-menu.k-context-menu {
14768
+ @include fill(
14769
+ $kendo-menu-popup-text,
14770
+ $kendo-menu-popup-bg,
14771
+ $kendo-menu-popup-border,
14772
+ $kendo-menu-popup-gradient
14773
+ );
14774
+
14775
+ .k-item > .k-link {
14776
+ @include fill(
14777
+ $kendo-menu-popup-item-text,
14778
+ $kendo-menu-popup-item-bg,
14779
+ $kendo-menu-popup-item-border,
14780
+ $kendo-menu-popup-item-gradient
14781
+ );
14782
+
14783
+ &:hover,
14784
+ &.k-hover {
14785
+ @include fill(
14786
+ $kendo-menu-popup-item-hover-text,
14787
+ $kendo-menu-popup-item-hover-bg,
14788
+ $kendo-menu-popup-item-hover-border,
14789
+ $kendo-menu-popup-item-hover-gradient
14790
+ );
14791
+ }
14792
+
14793
+ &:active,
14794
+ &.k-active,
14795
+ &.k-selected {
14796
+ @include fill(
14797
+ $kendo-menu-popup-item-expanded-text,
14798
+ $kendo-menu-popup-item-expanded-bg,
14799
+ $kendo-menu-popup-item-expanded-border,
14800
+ $kendo-menu-popup-item-expanded-gradient
14801
+ );
14802
+ }
14803
+
14804
+ &.k-focus {
14805
+ @include box-shadow( $kendo-menu-popup-item-focus-shadow );
14806
+ }
14807
+ }
14808
+
14809
+ .k-item {
14810
+ &:focus {
14811
+ @include box-shadow( $kendo-menu-popup-item-focus-shadow );
14812
+ }
14813
+ }
14814
+ }
14815
+
14816
+
14817
+ // Scrolling
14818
+ .k-menu-scroll-button {
14819
+ @include fill(
14820
+ $menu-scroll-button-text,
14821
+ $menu-scroll-button-bg,
14822
+ $menu-scroll-button-border,
14823
+ $menu-scroll-button-gradient
14824
+ );
14825
+
14826
+ &:hover {
14827
+ @include fill(
14828
+ $menu-scroll-button-hover-text,
14829
+ $menu-scroll-button-hover-bg,
14830
+ $menu-scroll-button-hover-border,
14831
+ $menu-scroll-button-hover-gradient
14832
+ );
14833
+
14834
+ &::before {
14835
+ opacity: 0;
14836
+ }
14837
+ }
14838
+ }
14839
+ }
14840
+
14841
+ // #endregion
14842
+
14843
+ // #endregion
14844
+
14202
14845
  // #endregion
14203
14846
  // #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
14204
14847
  // File already imported_once. Skipping output.
@@ -14351,6 +14994,8 @@ $tooltip-error-border: $tooltip-error-bg !default;
14351
14994
 
14352
14995
  // Overflow container
14353
14996
  .k-overflow-container {
14997
+ font-size: $kendo-menu-popup-font-size-md;
14998
+ line-height: $kendo-menu-popup-line-height-md;
14354
14999
 
14355
15000
  > .k-item {
14356
15001
  border-color: inherit;
@@ -14367,16 +15012,24 @@ $tooltip-error-border: $tooltip-error-bg !default;
14367
15012
 
14368
15013
  // Button
14369
15014
  .k-overflow-button {
14370
- @include border-radius( 0 );
14371
- padding: $kendo-list-item-padding-y-md $kendo-list-item-padding-x-md;
15015
+ padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
14372
15016
  width: 100%;
15017
+ height: auto;
14373
15018
  border-width: 0;
15019
+ border-radius: 0;
15020
+ aspect-ratio: auto;
14374
15021
  color: inherit;
14375
15022
  background-color: transparent;
14376
15023
  background-image: none;
14377
- line-height: inherit;
15024
+ font: inherit;
15025
+ cursor: pointer;
14378
15026
  display: flex;
15027
+ flex-flow: row nowrap;
15028
+ align-items: center;
15029
+ align-content: center;
15030
+ gap: $icon-spacing;
14379
15031
  justify-content: flex-start;
15032
+ position: relative;
14380
15033
  }
14381
15034
 
14382
15035
  // Button group
@@ -14497,27 +15150,33 @@ $tooltip-error-border: $tooltip-error-bg !default;
14497
15150
 
14498
15151
  // Hover state
14499
15152
  &:hover,
14500
- &.k-state-hover {
14501
- color: $kendo-list-item-hover-text;
14502
- background: $kendo-list-item-hover-bg;
15153
+ &.k-hover {
15154
+ color: $kendo-menu-popup-item-hover-text;
15155
+ background: $kendo-menu-popup-item-hover-bg;
15156
+ }
15157
+
15158
+ // Button focus state
15159
+ &:focus,
15160
+ &.k-focus {
15161
+ box-shadow: $kendo-menu-popup-item-focus-shadow;
14503
15162
  }
14504
15163
 
14505
15164
  // Active state
14506
15165
  &:active,
14507
- &.k-state-active {
14508
- color: $kendo-list-item-selected-text;
14509
- background: $kendo-list-item-selected-bg;
15166
+ &.k-active {
15167
+ color: $kendo-menu-popup-item-hover-text;
15168
+ background: $kendo-menu-popup-item-hover-bg;
14510
15169
  }
14511
15170
 
14512
- // Button focus state
14513
- .k-button:focus,
14514
- .k-button.k-state-focused {
14515
- box-shadow: $kendo-list-item-focus-shadow;
15171
+ // Selected
15172
+ &.k-selected {
15173
+ color: $kendo-menu-popup-item-expanded-text;
15174
+ background: $kendo-menu-popup-item-expanded-bg;
14516
15175
  }
14517
15176
 
14518
15177
  // Disabled state
14519
15178
  &:disabled,
14520
- &.k-state-disabled {
15179
+ &.k-disabled {
14521
15180
  color: inherit;
14522
15181
  }
14523
15182
  }
@@ -14585,6 +15244,7 @@ $actions-gradient: null !default;
14585
15244
 
14586
15245
  .k-actions {
14587
15246
  padding: $actions-padding-y $actions-padding-x;
15247
+ box-sizing: border-box;
14588
15248
  border-width: $actions-border-width 0 0 0;
14589
15249
  border-style: solid;
14590
15250
  border-color: inherit;
@@ -14596,6 +15256,12 @@ $actions-gradient: null !default;
14596
15256
  overflow: hidden;
14597
15257
  // TODO: remove
14598
15258
  clear: both;
15259
+
15260
+ *,
15261
+ *::before,
15262
+ *::after {
15263
+ box-sizing: border-box;
15264
+ }
14599
15265
  }
14600
15266
 
14601
15267
 
@@ -15331,6 +15997,12 @@ $fieldset-legend-border: null !default;
15331
15997
  z-index: 12000;
15332
15998
  -webkit-touch-callout: none;
15333
15999
  -webkit-tap-highlight-color: $rgba-transparent;
16000
+
16001
+ *,
16002
+ *::before,
16003
+ *::after {
16004
+ box-sizing: border-box;
16005
+ }
15334
16006
  }
15335
16007
 
15336
16008
  .k-tooltip-icon {
@@ -15369,7 +16041,6 @@ $fieldset-legend-border: null !default;
15369
16041
  border-width: $tooltip-callout-size;
15370
16042
  border-style: solid;
15371
16043
  border-color: transparent;
15372
- box-sizing: border-box;
15373
16044
  position: absolute;
15374
16045
  pointer-events: none;
15375
16046
  }
@@ -15801,6 +16472,7 @@ $listbox-drop-hint-width: 1px !default;
15801
16472
 
15802
16473
  .k-list {
15803
16474
  height: inherit;
16475
+ background: transparent;
15804
16476
  }
15805
16477
  }
15806
16478
 
@@ -15935,6 +16607,12 @@ $progressbar-chunk-border: $body-bg !default;
15935
16607
  -webkit-touch-callout: none;
15936
16608
  -webkit-tap-highlight-color: $rgba-transparent;
15937
16609
 
16610
+ *,
16611
+ *::before,
16612
+ *::after {
16613
+ box-sizing: border-box;
16614
+ }
16615
+
15938
16616
 
15939
16617
  // Selection
15940
16618
  > .k-state-selected {
@@ -16800,6 +17478,12 @@ $slider-disabled-opacity: null !default;
16800
17478
  -webkit-touch-callout: none;
16801
17479
  -webkit-tap-highlight-color: $rgba-transparent;
16802
17480
 
17481
+ *,
17482
+ *::before,
17483
+ *::after {
17484
+ box-sizing: border-box;
17485
+ }
17486
+
16803
17487
  .k-label {
16804
17488
  width: auto;
16805
17489
  font-size: .92em;
@@ -16847,7 +17531,6 @@ $slider-disabled-opacity: null !default;
16847
17531
  .k-slider-wrap {
16848
17532
  width: 100%;
16849
17533
  height: 100%;
16850
- box-sizing: border-box;
16851
17534
  display: flex;
16852
17535
  flex-flow: inherit;
16853
17536
  align-items: inherit;
@@ -17145,7 +17828,6 @@ $slider-disabled-opacity: null !default;
17145
17828
  position: absolute;
17146
17829
  text-align: center;
17147
17830
  text-decoration: none;
17148
- box-sizing: border-box;
17149
17831
  width: $slider-draghandle-size;
17150
17832
  height: $slider-draghandle-size;
17151
17833
 
@@ -18646,6 +19328,12 @@ $captcha-validation-message-font-style: italic !default;
18646
19328
  display: flex;
18647
19329
  flex-flow: column nowrap;
18648
19330
  gap: $captcha-gap;
19331
+
19332
+ *,
19333
+ *::before,
19334
+ *::after {
19335
+ box-sizing: border-box;
19336
+ }
18649
19337
  }
18650
19338
 
18651
19339
  // Image
@@ -18758,6 +19446,12 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
18758
19446
  position: relative;
18759
19447
  -webkit-touch-callout: none;
18760
19448
  -webkit-tap-highlight-color: $rgba-transparent;
19449
+
19450
+ *,
19451
+ *::before,
19452
+ *::after {
19453
+ box-sizing: border-box;
19454
+ }
18761
19455
  }
18762
19456
 
18763
19457
  // Table
@@ -18890,17 +19584,11 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
18890
19584
  @include exports( "numerictextbox/layout" ) {
18891
19585
 
18892
19586
  // Numeric textbox
18893
- .k-numeric-textbox {
18894
-
18895
- .k-input-inner {
18896
- text-overflow: clip;
18897
- }
18898
-
18899
- }
19587
+ .k-numeric-textbox {}
18900
19588
 
18901
19589
 
18902
19590
  // Alias
18903
- .k-numerictextbox { @extend .k-numeric-textbox; }
19591
+ .k-numerictextbox { @extend .k-numeric-textbox !optional; }
18904
19592
 
18905
19593
  }
18906
19594
 
@@ -19003,6 +19691,12 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 2 ) !default;
19003
19691
  gap: $colorgradient-gap;
19004
19692
  -webkit-touch-callout: none;
19005
19693
  -webkit-tap-highlight-color: $rgba-transparent;
19694
+
19695
+ *,
19696
+ *::before,
19697
+ *::after {
19698
+ box-sizing: border-box;
19699
+ }
19006
19700
  }
19007
19701
 
19008
19702
  // Canvas
@@ -19337,6 +20031,12 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
19337
20031
  display: inline-flex;
19338
20032
  flex-direction: column;
19339
20033
  align-items: stretch;
20034
+
20035
+ *,
20036
+ *::before,
20037
+ *::after {
20038
+ box-sizing: border-box;
20039
+ }
19340
20040
  }
19341
20041
 
19342
20042
  // Header
@@ -19676,6 +20376,9 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
19676
20376
  // #region @import "~@progress/kendo-theme-default/scss/datetimepicker/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/datetimepicker/_layout.scss
19677
20377
  @include exports( "datetimepicker/layout" ) {
19678
20378
 
20379
+ // Datetime container
20380
+ .k-datetime-container {}
20381
+
19679
20382
  // Datetime selector
19680
20383
  .k-datetime-selector {
19681
20384
  display: flex;
@@ -19686,6 +20389,20 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
19686
20389
  .k-datetime-wrap {
19687
20390
  width: $datetime-width;
19688
20391
  overflow: hidden;
20392
+
20393
+ .k-datetime-buttongroup {
20394
+ padding: $actions-padding-y $actions-padding-x;
20395
+ }
20396
+
20397
+ .k-calendar,
20398
+ .k-timeselector {
20399
+ width: 100%;
20400
+ border-width: 0;
20401
+ }
20402
+
20403
+ .k-actions {
20404
+ margin: 0;
20405
+ }
19689
20406
  }
19690
20407
 
19691
20408
  // Inner wrap
@@ -19775,6 +20492,12 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
19775
20492
  flex-flow: row nowrap;
19776
20493
  align-items: flex-start;
19777
20494
  gap: map-get( $spacing, 2 );
20495
+
20496
+ *,
20497
+ *::before,
20498
+ *::after {
20499
+ box-sizing: border-box;
20500
+ }
19778
20501
  }
19779
20502
 
19780
20503
 
@@ -20517,13 +21240,18 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
20517
21240
  white-space: nowrap;
20518
21241
  -webkit-touch-callout: none;
20519
21242
  -webkit-tap-highlight-color: $rgba-transparent;
21243
+
21244
+ *,
21245
+ *::before,
21246
+ *::after {
21247
+ box-sizing: border-box;
21248
+ }
20520
21249
  }
20521
21250
 
20522
21251
 
20523
21252
  // Treeview filter
20524
21253
  .k-treeview-filter {
20525
- padding: map-get( $spacing, 1 );
20526
- box-sizing: border-box;
21254
+ padding: map-get( $spacing, 2 );
20527
21255
  display: block;
20528
21256
  position: relative;
20529
21257
  flex: none;
@@ -20569,6 +21297,7 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
20569
21297
 
20570
21298
  // Treeview toggle
20571
21299
  .k-treeview-toggle {
21300
+ margin-left: -$kendo-treeview-indent;
20572
21301
  flex: none;
20573
21302
  display: inline-flex;
20574
21303
  flex-flow: row nowrap;
@@ -20939,6 +21668,12 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20939
21668
  -webkit-touch-callout: none;
20940
21669
  -webkit-tap-highlight-color: $rgba-transparent;
20941
21670
 
21671
+ *,
21672
+ *::before,
21673
+ *::after {
21674
+ box-sizing: border-box;
21675
+ }
21676
+
20942
21677
  &.k-state-readonly {
20943
21678
  pointer-events: none;
20944
21679
  }
@@ -20947,7 +21682,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
20947
21682
  .k-rating-container {
20948
21683
  flex: 0 1 auto;
20949
21684
  position: relative;
20950
- box-sizing: border-box;
20951
21685
  margin: 0 $rating-container-margin-x;
20952
21686
 
20953
21687
  .k-rating-item {
@@ -21128,9 +21862,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
21128
21862
  /// Font family of the switch.
21129
21863
  /// @group switch
21130
21864
  $kendo-switch-font-family: null !default;
21131
- /// Line height of the switch.
21132
- /// @group switch
21133
- $kendo-switch-line-height: null !default;
21134
21865
 
21135
21866
  /// Border width of the switch track.
21136
21867
  /// @group switch
@@ -21150,9 +21881,9 @@ $kendo-switch-label-display: none !default;
21150
21881
  /// Map with the different switch sizes.
21151
21882
  /// @group switch
21152
21883
  $kendo-switch-sizes: (
21153
- sm: ( font-size: null, track-width: 36px, track-height: 22px, thumb-width: 16px, thumb-height: 16px, thumb-offset: 3px, label-offset: 0px ),
21154
- md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 0px ),
21155
- lg: ( font-size: null, track-width: 76px, track-height: 38px, thumb-width: 32px, thumb-height: 32px, thumb-offset: 3px, label-offset: 0px )
21884
+ sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ),
21885
+ md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ),
21886
+ lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null )
21156
21887
  ) !default;
21157
21888
 
21158
21889
  /// The background of the track when the switch is not checked.
@@ -21324,17 +22055,32 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
21324
22055
  @include exports("switch/layout") {
21325
22056
 
21326
22057
  .k-switch {
22058
+ box-sizing: border-box;
21327
22059
  font-family: $kendo-switch-font-family;
21328
- line-height: $kendo-switch-line-height;
21329
22060
  outline: 0;
21330
22061
  display: inline-flex;
21331
22062
  align-items: center;
21332
22063
  vertical-align: middle;
22064
+ line-height: 1;
21333
22065
  position: relative;
21334
22066
  cursor: pointer;
21335
22067
  user-select: none;
21336
22068
  -webkit-touch-callout: none;
21337
22069
  -webkit-tap-highlight-color: $rgba-transparent;
22070
+
22071
+ *,
22072
+ *::before,
22073
+ *::after {
22074
+ box-sizing: border-box;
22075
+ }
22076
+
22077
+ [type="checkbox"] {
22078
+ display: none;
22079
+ }
22080
+
22081
+ &[aria-readonly="true"] {
22082
+ pointer-events: none;
22083
+ }
21338
22084
  }
21339
22085
 
21340
22086
 
@@ -21867,6 +22613,12 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
21867
22613
  -webkit-touch-callout: none;
21868
22614
  -webkit-tap-highlight-color: $rgba-transparent;
21869
22615
 
22616
+ *,
22617
+ *::before,
22618
+ *::after {
22619
+ box-sizing: border-box;
22620
+ }
22621
+
21870
22622
  .k-upload-button {
21871
22623
  min-width: 7em;
21872
22624
  }
@@ -22022,7 +22774,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
22022
22774
  border-style: solid;
22023
22775
  font-size: ($font-size * .57);
22024
22776
  text-transform: uppercase;
22025
- box-sizing: content-box;
22026
22777
  position: absolute;
22027
22778
  top: $upload-item-padding-y;
22028
22779
  }
@@ -22498,6 +23249,12 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
22498
23249
  -webkit-touch-callout: none;
22499
23250
  -webkit-tap-highlight-color: $rgba-transparent;
22500
23251
 
23252
+ *,
23253
+ *::before,
23254
+ *::after {
23255
+ box-sizing: border-box;
23256
+ }
23257
+
22501
23258
  > * {
22502
23259
  flex-shrink: 0;
22503
23260
  }
@@ -22804,820 +23561,277 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
22804
23561
  cursor: pointer;
22805
23562
  outline: none;
22806
23563
 
22807
- &:focus {
22808
- outline: none;
22809
- }
22810
- }
22811
-
22812
- // FAB Icon
22813
- .k-fab-icon {
22814
- width: $kendo-fab-icon-width;
22815
- height: $kendo-fab-icon-height;
22816
-
22817
- &:not(:only-child) {
22818
- margin-right: $kendo-fab-icon-spacing;
22819
- margin-left: -$kendo-fab-icon-spacing;
22820
- }
22821
- }
22822
-
22823
-
22824
- // Sizes
22825
- .k-fab-sm {
22826
- padding: $kendo-fab-padding-y-sm $kendo-fab-padding-x-sm;
22827
- }
22828
- .k-fab-md {
22829
- padding: $kendo-fab-padding-y $kendo-fab-padding-x;
22830
- }
22831
- .k-fab-lg {
22832
- padding: $kendo-fab-padding-y-lg $kendo-fab-padding-x-lg;
22833
- }
22834
-
22835
- // Shapes
22836
- .k-fab-rectangle { }
22837
-
22838
- .k-fab-square {
22839
- aspect-ratio: 1;
22840
- }
22841
-
22842
-
22843
- // Items
22844
- .k-fab-items {
22845
- margin: 0;
22846
- padding: $kendo-fab-items-padding-y $kendo-fab-items-padding-x;
22847
- display: flex;
22848
- }
22849
-
22850
- .k-fab-items-bottom {
22851
- flex-direction: column;
22852
- }
22853
- .k-fab-items-bottom .k-fab-item:last-child {
22854
- margin-bottom: 0;
22855
- }
22856
-
22857
- .k-fab-items-top {
22858
- flex-direction: column-reverse;
22859
- }
22860
- .k-fab-items-top .k-fab-item:first-child {
22861
- margin-bottom: 0;
22862
- }
22863
-
22864
- .k-fab-item {
22865
- list-style-type: none;
22866
- margin-bottom: map-get( $spacing, 2 );
22867
- outline: none;
22868
- white-space: nowrap;
22869
- display: flex;
22870
- align-items: center;
22871
- justify-content: flex-end;
22872
- cursor: pointer;
22873
-
22874
- &.k-text-right {
22875
- flex-direction: row;
22876
-
22877
- .k-fab-item-text {
22878
- margin-right: map-get( $spacing, 2 );
22879
- }
22880
- }
22881
- &.k-text-left {
22882
- flex-direction: row-reverse;
22883
-
22884
- .k-fab-item-text {
22885
- margin-left: map-get( $spacing, 2 );
22886
- }
22887
- }
22888
- }
22889
-
22890
- .k-fab-item-text {
22891
- padding: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
22892
- border-width: $kendo-fab-item-text-border-width;
22893
- border-radius: $kendo-fab-item-text-border-radius;
22894
- font-size: $kendo-fab-item-text-font-size;
22895
- line-height: $kendo-fab-item-text-line-height;
22896
- }
22897
-
22898
- .k-fab-item-icon {
22899
- width: $kendo-fab-item-icon-width;
22900
- height: $kendo-fab-item-icon-height;
22901
- padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
22902
- border-width: $kendo-fab-item-icon-border-width;
22903
- border-radius: $kendo-fab-item-icon-border-radius;
22904
- box-sizing: content-box;
22905
- outline: none;
22906
- }
22907
-
22908
- }
22909
-
22910
- @include exports("fab/layout/rtl") {
22911
-
22912
- .k-rtl .k-fab,
22913
- .k-fab[dir="rtl"],
22914
- [dir="rtl"] .k-fab {
22915
- direction: rtl;
22916
-
22917
- .k-fab-icon {
22918
- &:not(:only-child) {
22919
- margin-right: -$icon-spacing;
22920
- margin-left: $icon-spacing;
22921
- }
22922
- }
22923
- }
22924
-
22925
- .k-rtl .k-fab-popup,
22926
- [dir="rtl"] .k-fab-popup {
22927
- .k-fab-item.k-text-left {
22928
- flex-direction: row;
22929
- }
22930
-
22931
- .k-fab-item.k-text-right {
22932
- flex-direction: row-reverse;
22933
- }
22934
- }
22935
-
22936
- }
22937
-
22938
-
22939
- // #endregion
22940
-
22941
- // #endregion
22942
- // #region @import "_theme.scss"; -> packages/bootstrap/scss/fab/_theme.scss
22943
- @include exports( "fab/theme/bootstrap" ) {
22944
-
22945
- // Normal state
22946
- @each $name, $color in $kendo-fab-theme-colors {
22947
- .k-fab-solid-#{$name} {
22948
- @include box-shadow($kendo-fab-shadow);
22949
- outline: $kendo-fab-border-width solid $color;
22950
- outline-offset: -$kendo-fab-border-width;
22951
- border-color: $color;
22952
- color: contrast-wcag( $color );
22953
- background-color: $color;
22954
- }
22955
- }
22956
-
22957
- // Hover state
22958
- @each $name, $color in $kendo-fab-theme-colors {
22959
- .k-hover.k-fab-solid-#{$name},
22960
- .k-fab-solid-#{$name}:hover {
22961
- border-color: try-darken( $color, 10% );
22962
- color: contrast-wcag( try-darken( $color, 7.5% ) );
22963
- background-color: try-darken( $color, 7.5% );
22964
- }
22965
- }
22966
-
22967
- // Focus state
22968
- @each $name, $color in $kendo-fab-theme-colors {
22969
- .k-fab-solid-#{$name}.k-focus,
22970
- .k-fab-solid-#{$name}:focus {
22971
- outline-style: solid;
22972
- outline-width: 3px;
22973
- outline-color: rgba( $color, .5 );
22974
- }
22975
- }
22976
-
22977
- // Active state
22978
- @each $name, $color in $kendo-fab-theme-colors {
22979
- .k-active.k-fab-solid-#{$name},
22980
- .k-selected.k-fab-solid-#{$name},
22981
- .k-fab-solid-#{$name}:active {
22982
- @include box-shadow($kendo-fab-active-shadow);
22983
- border-color: try-darken( $color, 12.5% );
22984
- color: contrast-wcag( try-darken( $color, 10% ) );
22985
- background-color: try-darken( $color, 10% );
22986
- }
22987
- }
22988
-
22989
- // Disabled state
22990
- @each $name, $color in $kendo-fab-theme-colors {
22991
- .k-disabled.k-fab-solid-#{$name},
22992
- .k-fab-solid-#{$name}:disabled {
22993
- @include box-shadow($kendo-fab-disabled-shadow);
22994
- background-color: try-tint( $color, 4.5 );
22995
- color: try-tint( contrast-wcag( $color ), 5 );
22996
- opacity: 1;
22997
- }
22998
- }
22999
-
23000
- // Items
23001
- .k-fab-item-text {
23002
- @include fill(
23003
- $kendo-fab-item-text,
23004
- $kendo-fab-item-bg,
23005
- $kendo-fab-item-border
23006
- );
23007
- @include box-shadow($kendo-fab-item-shadow);
23008
- }
23009
- .k-fab-item-icon {
23010
- @include fill(
23011
- $kendo-fab-item-icon-text,
23012
- $kendo-fab-item-icon-bg,
23013
- $kendo-fab-item-icon-border
23014
- );
23015
- @include box-shadow($kendo-fab-item-shadow);
23016
- outline: $kendo-fab-border-width solid $kendo-button-bg;
23017
- outline-offset: -$kendo-fab-border-width;
23018
- }
23019
-
23020
- // Hover state
23021
- .k-fab-item.k-hover .k-fab-item-icon,
23022
- .k-fab-item:hover .k-fab-item-icon {
23023
- @include box-shadow($kendo-fab-item-shadow);
23024
- outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 10% );
23025
- outline-offset: -$kendo-fab-border-width;
23026
- border-color: try-darken( $kendo-fab-item-icon-border, 10% );
23027
- color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 7.5% ) );
23028
- background-color: try-darken( $kendo-fab-item-icon-bg, 7.5% );
23029
- }
23030
-
23031
- // Focus state
23032
- .k-fab-item:focus .k-fab-item-text,
23033
- .k-fab-item:focus .k-fab-item-icon,
23034
- .k-fab-item.k-focus .k-fab-item-text,
23035
- .k-fab-item.k-focus .k-fab-item-icon {
23036
- outline-style: solid;
23037
- outline-width: 3px;
23038
- outline-color: rgba( $kendo-fab-item-icon-border, .5 );
23039
- }
23040
-
23041
- // Active state
23042
- .k-fab-item.k-active .k-fab-item-icon,
23043
- .k-fab-item:active .k-fab-item-icon {
23044
- @include box-shadow($kendo-fab-item-active-shadow);
23045
- outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 12.5% );
23046
- outline-offset: -$kendo-fab-border-width;
23047
- border-color: try-darken( $kendo-fab-item-icon-border, 12.5% );
23048
- color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 10% ) );
23049
- background-color: try-darken( $kendo-fab-item-icon-bg, 10% );
23050
- }
23051
-
23052
- // Disabled state
23053
- .k-fab-item.k-disabled,
23054
- .k-fab-item:disabled {
23055
- opacity: 1;
23056
-
23057
- .k-fab-item-text,
23058
- .k-fab-item-icon {
23059
- @include box-shadow($kendo-fab-item-disabled-shadow);
23060
- background-color: try-tint( $kendo-fab-item-bg, 8 );
23061
- color: try-tint( $kendo-fab-item-text, 8 );
23062
- }
23063
- }
23064
-
23065
- }
23066
-
23067
- // #endregion
23068
-
23069
- // #endregion
23070
- // #region @import "menu/_index.scss"; -> packages/bootstrap/scss/menu/_index.scss
23071
- // #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
23072
- // File already imported_once. Skipping output.
23073
- // #endregion
23074
-
23075
-
23076
- // Dependencies
23077
- // #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
23078
- // File already imported_once. Skipping output.
23079
- // #endregion
23080
- // #region @import "../popup/_index.scss"; -> packages/bootstrap/scss/popup/_index.scss
23081
- // File already imported_once. Skipping output.
23082
- // #endregion
23083
- // #region @import "../list/_index.scss"; -> packages/bootstrap/scss/list/_index.scss
23084
- // File already imported_once. Skipping output.
23085
- // #endregion
23086
- // #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
23087
- // File already imported_once. Skipping output.
23088
- // #endregion
23089
- // #region @import "../list/_index.scss"; -> packages/bootstrap/scss/list/_index.scss
23090
- // File already imported_once. Skipping output.
23091
- // #endregion
23092
-
23093
-
23094
- // Component
23095
- // #region @import "_variables.scss"; -> packages/bootstrap/scss/menu/_variables.scss
23096
- // File already imported_once. Skipping output.
23097
- // #endregion
23098
- // #region @import "_layout.scss"; -> packages/bootstrap/scss/menu/_layout.scss
23099
- // #region @import "~@progress/kendo-theme-default/scss/menu/_layout.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/menu/_layout.scss
23100
- @include exports("menu/layout") {
23101
-
23102
- // Base
23103
- .k-menu {
23104
- border-width: $menu-border-width;
23105
- border-style: solid;
23106
- box-sizing: border-box;
23107
- outline: 0;
23108
- font-family: $menu-font-family;
23109
- font-size: $menu-font-size;
23110
- line-height: $menu-line-height;
23111
- display: flex;
23112
- flex-wrap: wrap;
23113
- align-items: stretch;
23114
- position: relative;
23115
- cursor: default;
23116
- -webkit-touch-callout: none;
23117
- -webkit-tap-highlight-color: $rgba-transparent;
23118
- }
23119
-
23120
-
23121
- // Menu item
23122
- .k-menu-item {
23123
- box-sizing: border-box;
23124
- border-width: 0;
23125
- outline: 0;
23126
- display: flex;
23127
- flex-flow: column nowrap;
23128
- flex: none;
23129
- position: relative;
23130
- user-select: none;
23131
- }
23132
-
23133
- .k-menu-item-content {
23134
- display: block;
23135
- height: auto;
23136
- overflow: visible;
23137
-
23138
- .k-actions {
23139
- margin-top: 0;
23140
- }
23141
- }
23142
-
23143
-
23144
- // Menu link
23145
- .k-menu-link {
23146
- padding: $menu-item-padding-y $menu-item-padding-x;
23147
- outline: 0;
23148
- color: inherit;
23149
- display: flex;
23150
- flex-flow: row nowrap;
23151
- flex: 1 1 auto;
23152
- gap: $menu-item-icon-spacing;
23153
- align-items: center;
23154
- position: relative;
23155
- white-space: nowrap;
23156
- cursor: pointer;
23157
- }
23158
-
23159
-
23160
- // Menu item text
23161
- .k-menu-link-text {
23162
- display: flex;
23163
- flex-flow: row nowrap;
23164
- flex: 1 1 auto;
23165
- overflow: hidden;
23166
- text-overflow: ellipsis;
23167
- }
23168
-
23169
-
23170
- // Expand arrow
23171
- .k-menu-expand-arrow {
23172
- margin-inline-end: -$icon-spacing;
23173
- display: inline-flex;
23174
- flex-flow: row wrap;
23175
- align-items: center;
23176
- flex: none;
23177
- position: relative;
23178
- }
23179
-
23180
-
23181
- // Orientation -- horizontal
23182
- .k-menu-horizontal {
23183
- flex-direction: row;
23184
-
23185
- > .k-menu-item + .k-menu-item {
23186
- margin-left: $menu-item-spacing;
23187
- }
23188
-
23189
- > .k-separator {
23190
- margin: 0 $menu-separator-spacing;
23191
- width: 0;
23192
- height: auto;
23193
- border-width: 0 0 0 1px;
23194
- border-style: solid;
23195
- }
23196
- }
23197
-
23198
-
23199
- // Orientation -- vertical
23200
- .k-menu-vertical {
23201
- flex-direction: column;
23202
-
23203
- > .k-menu-item + .k-menu-item {
23204
- margin-top: $menu-item-spacing;
23205
- }
23206
-
23207
- > .k-menu-item > .k-menu-link {
23208
- padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
23209
- padding-right: $kendo-menu-popup-item-padding-end;
23210
- }
23211
-
23212
- .k-menu-expand-arrow {
23213
- margin: 0;
23214
- position: absolute;
23215
- top: 50%;
23216
- transform: translateY(-50%);
23217
- right: $icon-spacing;
23218
- }
23219
-
23220
- > .k-separator {
23221
- margin: $menu-separator-spacing 0;
23222
- height: 0;
23223
- border-width: 1px 0 0;
23224
- border-style: solid;
23225
- border-color: $panel-border;
23226
- display: block;
23227
- }
23228
- }
23229
-
23230
-
23231
- // Menu popup
23232
- .k-menu-popup {
23233
- border-width: $kendo-menu-popup-border-width;
23234
- border-style: solid;
23235
- overflow: auto;
23236
- max-height: 80vh;
23237
- }
23238
-
23239
-
23240
- // Sub menu
23241
- .k-menu-group {
23242
- margin: 0;
23243
- padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
23244
- list-style: none;
23245
- display: none;
23246
- position: absolute;
23247
-
23248
- .k-menu-popup & {
23249
- position: relative;
23250
- display: flex;
23251
- flex-direction: column;
23252
- }
23253
-
23254
- .k-menu-item + .k-menu-item {
23255
- margin-top: $kendo-menu-popup-item-spacing;
23256
- }
23257
-
23258
- .k-menu-expand-arrow {
23259
- margin: 0;
23260
- position: absolute;
23261
- top: 50%;
23262
- transform: translateY(-50%);
23263
- right: $icon-spacing;
23264
- }
23265
-
23266
- .k-separator {
23267
- margin: $menu-separator-spacing 0;
23268
- height: 0;
23269
- border-width: 1px 0 0;
23270
- border-style: solid;
23271
- border-color: $component-border;
23272
- display: block;
23273
- }
23274
- }
23275
-
23276
- // Sizes
23277
- .k-menu-group-sm {
23278
- font-size: $kendo-menu-popup-font-size-sm;
23279
- line-height: $kendo-menu-popup-line-height-sm;
23280
-
23281
- // jquery popup overrides those
23282
- .k-menu-item {
23283
- font-size: $kendo-menu-popup-font-size-sm;
23284
- line-height: $kendo-menu-popup-line-height-sm;
23285
- }
23286
-
23287
- .k-menu-link {
23288
- padding: $kendo-menu-popup-item-padding-y-sm $kendo-menu-popup-item-padding-x-sm;
23289
- padding-inline-end: $kendo-menu-popup-item-padding-end-sm;
23564
+ *,
23565
+ *::before,
23566
+ *::after {
23567
+ box-sizing: border-box;
23290
23568
  }
23291
23569
 
23292
- .k-menu-expand-arrow {
23293
- margin-inline-start: $kendo-menu-popup-item-icon-margin-start-sm;
23294
- margin-inline-end: $kendo-menu-popup-item-icon-margin-end-sm;
23570
+ &:focus {
23571
+ outline: none;
23295
23572
  }
23296
23573
  }
23297
- .k-menu-group-md {
23298
- font-size: $kendo-menu-popup-font-size-md;
23299
- line-height: $kendo-menu-popup-line-height-md;
23300
-
23301
- // jquery popup overrides those
23302
- .k-menu-item {
23303
- font-size: $kendo-menu-popup-font-size-md;
23304
- line-height: $kendo-menu-popup-line-height-md;
23305
- }
23306
23574
 
23307
- .k-menu-link {
23308
- padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
23309
- padding-inline-end: $kendo-menu-popup-item-padding-end-md;
23310
- }
23575
+ // FAB Icon
23576
+ .k-fab-icon {
23577
+ width: $kendo-fab-icon-width;
23578
+ height: $kendo-fab-icon-height;
23311
23579
 
23312
- .k-menu-expand-arrow {
23313
- margin-inline-start: $kendo-menu-popup-item-icon-margin-start;
23314
- margin-inline-end: $kendo-menu-popup-item-icon-margin-end;
23580
+ &:not(:only-child) {
23581
+ margin-right: $kendo-fab-icon-spacing;
23582
+ margin-left: -$kendo-fab-icon-spacing;
23315
23583
  }
23316
23584
  }
23317
- .k-menu-group-lg {
23318
- font-size: $kendo-menu-popup-font-size-lg;
23319
- line-height: $kendo-menu-popup-line-height-lg;
23320
23585
 
23321
- // jquery popup overrides those
23322
- .k-menu-item {
23323
- font-size: $kendo-menu-popup-font-size-lg;
23324
- line-height: $kendo-menu-popup-line-height-lg;
23325
- }
23326
23586
 
23327
- .k-menu-link {
23328
- padding: $kendo-menu-popup-item-padding-y-lg $kendo-menu-popup-item-padding-x-lg;
23329
- padding-inline-end: $kendo-menu-popup-item-padding-end-lg;
23330
- }
23587
+ // Sizes
23588
+ .k-fab-sm {
23589
+ padding: $kendo-fab-padding-y-sm $kendo-fab-padding-x-sm;
23590
+ }
23591
+ .k-fab-md {
23592
+ padding: $kendo-fab-padding-y $kendo-fab-padding-x;
23593
+ }
23594
+ .k-fab-lg {
23595
+ padding: $kendo-fab-padding-y-lg $kendo-fab-padding-x-lg;
23596
+ }
23331
23597
 
23332
- .k-menu-expand-arrow {
23333
- margin-inline-start: $kendo-menu-popup-item-icon-margin-start-lg;
23334
- margin-inline-end: $kendo-menu-popup-item-icon-margin-end-lg;
23335
- }
23598
+ // Shapes
23599
+ .k-fab-rectangle { }
23600
+
23601
+ .k-fab-square {
23602
+ aspect-ratio: 1;
23336
23603
  }
23337
23604
 
23338
23605
 
23339
- // Context menu
23340
- .k-popups-wrapper {
23341
- position: relative;
23342
- border: 0;
23606
+ // Items
23607
+ .k-fab-items {
23343
23608
  margin: 0;
23344
- padding: 0;
23609
+ padding: $kendo-fab-items-padding-y $kendo-fab-items-padding-x;
23610
+ display: flex;
23345
23611
  }
23346
- .k-context-menu {
23347
- margin: 0;
23348
- padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
23349
- border-width: $kendo-menu-popup-border-width;
23350
- border-style: solid;
23351
23612
 
23352
- &.k-menu-horizontal {
23353
- padding: $kendo-menu-popup-padding-x $kendo-menu-popup-padding-y;
23354
- }
23613
+ .k-fab-items-bottom {
23614
+ flex-direction: column;
23355
23615
  }
23356
- .k-animation-container .k-context-menu.k-menu-horizontal {
23357
- // kendo-jquery adds `display: block` via js and we need to override it.
23358
- display: flex !important; // sass-lint:disable-line no-important
23359
- flex-wrap: nowrap;
23616
+ .k-fab-items-bottom .k-fab-item:last-child {
23617
+ margin-bottom: 0;
23360
23618
  }
23361
- .k-context-menu-popup {
23362
- z-index: 12000;
23363
23619
 
23364
- .k-context-menu {
23365
- border-width: 0;
23366
- }
23620
+ .k-fab-items-top {
23621
+ flex-direction: column-reverse;
23367
23622
  }
23368
- .k-popup .k-context-menu,
23369
- .k-context-menu-popup .k-context-menu {
23370
- border-width: 0;
23623
+ .k-fab-items-top .k-fab-item:first-child {
23624
+ margin-bottom: 0;
23371
23625
  }
23372
23626
 
23627
+ .k-fab-item {
23628
+ list-style-type: none;
23629
+ margin-bottom: map-get( $spacing, 2 );
23630
+ outline: none;
23631
+ white-space: nowrap;
23632
+ display: flex;
23633
+ align-items: center;
23634
+ justify-content: flex-end;
23635
+ cursor: pointer;
23373
23636
 
23374
- // Scrolling
23375
- .k-menu-scroll-wrapper {
23376
- margin: 0;
23377
- padding: 0;
23378
- border: 0;
23379
- position: relative;
23637
+ &.k-text-right {
23638
+ flex-direction: row;
23380
23639
 
23381
- .k-menu {
23382
- overflow: hidden;
23383
- flex-wrap: nowrap;
23640
+ .k-fab-item-text {
23641
+ margin-right: map-get( $spacing, 2 );
23642
+ }
23384
23643
  }
23385
- }
23386
- .k-menu-scroll-button {
23387
- @include border-radius( 0 );
23388
- padding: 0;
23389
- border-width: 0;
23390
- border-color: inherit;
23391
- color: inherit;
23392
- background: inherit;
23393
- position: absolute;
23644
+ &.k-text-left {
23645
+ flex-direction: row-reverse;
23394
23646
 
23395
- &.k-scroll-left {
23396
- top: 0;
23397
- left: 0;
23398
- height: 100%;
23399
- width: 16px;
23400
- border-right-width: 1px;
23401
- }
23402
- &.k-scroll-right {
23403
- top: 0;
23404
- right: 0;
23405
- height: 100%;
23406
- width: 16px;
23407
- border-left-width: 1px;
23408
- }
23409
- &.k-scroll-up {
23410
- top: 0;
23411
- left: 0;
23412
- width: 100%;
23413
- height: 16px;
23414
- border-bottom-width: 1px;
23415
- }
23416
- &.k-scroll-down {
23417
- bottom: 0;
23418
- left: 0;
23419
- width: 100%;
23420
- height: 16px;
23421
- border-top-width: 1px;
23647
+ .k-fab-item-text {
23648
+ margin-left: map-get( $spacing, 2 );
23649
+ }
23422
23650
  }
23423
23651
  }
23424
23652
 
23653
+ .k-fab-item-text {
23654
+ padding: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
23655
+ border-width: $kendo-fab-item-text-border-width;
23656
+ border-radius: $kendo-fab-item-text-border-radius;
23657
+ font-size: $kendo-fab-item-text-font-size;
23658
+ line-height: $kendo-fab-item-text-line-height;
23659
+ }
23425
23660
 
23426
- // RTL
23427
- .k-rtl,
23428
- [dir="rtl"] {
23429
-
23430
- // Orientation -- horizontal
23431
- .k-menu-horizontal {
23661
+ .k-fab-item-icon {
23662
+ width: $kendo-fab-item-icon-width;
23663
+ height: $kendo-fab-item-icon-height;
23664
+ padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
23665
+ border-width: $kendo-fab-item-icon-border-width;
23666
+ border-radius: $kendo-fab-item-icon-border-radius;
23667
+ box-sizing: content-box;
23668
+ outline: none;
23669
+ }
23432
23670
 
23433
- > .k-menu-item + .k-menu-item {
23434
- margin-right: $menu-item-spacing;
23435
- margin-left: 0;
23436
- }
23437
- }
23671
+ }
23438
23672
 
23673
+ @include exports("fab/layout/rtl") {
23439
23674
 
23440
- // Orientation -- vertical
23441
- .k-menu-vertical {
23675
+ .k-rtl .k-fab,
23676
+ .k-fab[dir="rtl"],
23677
+ [dir="rtl"] .k-fab {
23678
+ direction: rtl;
23442
23679
 
23443
- > .k-menu-item > .k-menu-link {
23444
- padding-right: $kendo-menu-popup-item-padding-x;
23445
- padding-left: $kendo-menu-popup-item-padding-end;
23680
+ .k-fab-icon {
23681
+ &:not(:only-child) {
23682
+ margin-right: -$icon-spacing;
23683
+ margin-left: $icon-spacing;
23446
23684
  }
23447
23685
  }
23686
+ }
23448
23687
 
23449
-
23450
- // Sub menu
23451
- .k-menu-group {
23452
-
23453
- .k-menu-link {
23454
- padding-right: $kendo-menu-popup-item-padding-x;
23455
- padding-left: $kendo-menu-popup-item-padding-end;
23456
- }
23457
-
23688
+ .k-rtl .k-fab-popup,
23689
+ [dir="rtl"] .k-fab-popup {
23690
+ .k-fab-item.k-text-left {
23691
+ flex-direction: row;
23458
23692
  }
23459
23693
 
23694
+ .k-fab-item.k-text-right {
23695
+ flex-direction: row-reverse;
23696
+ }
23460
23697
  }
23461
23698
 
23462
23699
  }
23463
23700
 
23701
+
23464
23702
  // #endregion
23465
23703
 
23466
- @include exports("menu/layout/bootstrap") {
23704
+ // #endregion
23705
+ // #region @import "_theme.scss"; -> packages/bootstrap/scss/fab/_theme.scss
23706
+ @include exports( "fab/theme/bootstrap" ) {
23467
23707
 
23468
- .k-menu.k-menu-horizontal:not(.k-context-menu) {
23469
- padding: $navbar-padding-y $navbar-padding-x;
23470
- }
23471
- .k-menu.k-menu-vertical:not(.k-context-menu) {
23472
- padding: $navbar-padding-y 0;
23708
+ // Normal state
23709
+ @each $name, $color in $kendo-fab-theme-colors {
23710
+ .k-fab-solid-#{$name} {
23711
+ @include box-shadow($kendo-fab-shadow);
23712
+ outline: $kendo-fab-border-width solid $color;
23713
+ outline-offset: -$kendo-fab-border-width;
23714
+ border-color: $color;
23715
+ color: contrast-wcag( $color );
23716
+ background-color: $color;
23717
+ }
23473
23718
  }
23474
23719
 
23475
- .k-menu-group,
23476
- .k-menu-vertical {
23477
-
23478
- .k-menu-popup & {
23479
- padding: 0;
23720
+ // Hover state
23721
+ @each $name, $color in $kendo-fab-theme-colors {
23722
+ .k-hover.k-fab-solid-#{$name},
23723
+ .k-fab-solid-#{$name}:hover {
23724
+ border-color: try-darken( $color, 10% );
23725
+ color: contrast-wcag( try-darken( $color, 7.5% ) );
23726
+ background-color: try-darken( $color, 7.5% );
23480
23727
  }
23481
23728
  }
23482
23729
 
23483
- .k-context-menu-popup {
23484
- > .k-popup:not(.k-menu-popup) {
23485
- padding: 0;
23730
+ // Focus state
23731
+ @each $name, $color in $kendo-fab-theme-colors {
23732
+ .k-fab-solid-#{$name}.k-focus,
23733
+ .k-fab-solid-#{$name}:focus {
23734
+ outline-style: solid;
23735
+ outline-width: 3px;
23736
+ outline-color: rgba( $color, .5 );
23486
23737
  }
23738
+ }
23487
23739
 
23488
- .k-context-menu {
23489
- @include border-radius( $border-radius );
23740
+ // Active state
23741
+ @each $name, $color in $kendo-fab-theme-colors {
23742
+ .k-active.k-fab-solid-#{$name},
23743
+ .k-selected.k-fab-solid-#{$name},
23744
+ .k-fab-solid-#{$name}:active {
23745
+ @include box-shadow($kendo-fab-active-shadow);
23746
+ border-color: try-darken( $color, 12.5% );
23747
+ color: contrast-wcag( try-darken( $color, 10% ) );
23748
+ background-color: try-darken( $color, 10% );
23490
23749
  }
23750
+ }
23491
23751
 
23492
- .k-header {
23493
- font-size: inherit;
23494
- font-weight: inherit;
23752
+ // Disabled state
23753
+ @each $name, $color in $kendo-fab-theme-colors {
23754
+ .k-disabled.k-fab-solid-#{$name},
23755
+ .k-fab-solid-#{$name}:disabled {
23756
+ @include box-shadow($kendo-fab-disabled-shadow);
23757
+ background-color: try-tint( $color, 4.5 );
23758
+ color: try-tint( contrast-wcag( $color ), 5 );
23759
+ opacity: 1;
23495
23760
  }
23496
23761
  }
23497
- }
23498
-
23499
- // #endregion
23500
- // #region @import "_theme.scss"; -> packages/bootstrap/scss/menu/_theme.scss
23501
- // #region @import "~@progress/kendo-theme-default/scss/menu/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/menu/_theme.scss
23502
- @include exports("menu/theme") {
23503
23762
 
23504
- .k-menu:not(.k-context-menu) {
23763
+ // Items
23764
+ .k-fab-item-text {
23505
23765
  @include fill(
23506
- $menu-text,
23507
- $menu-bg,
23508
- $menu-border,
23509
- $menu-gradient
23766
+ $kendo-fab-item-text,
23767
+ $kendo-fab-item-bg,
23768
+ $kendo-fab-item-border
23510
23769
  );
23511
-
23512
- > .k-item {
23513
- @include fill(
23514
- $menu-item-text,
23515
- $menu-item-bg,
23516
- $menu-item-border,
23517
- $menu-item-gradient
23518
- );
23519
-
23520
- &:hover,
23521
- &.k-hover {
23522
- @include fill(
23523
- $menu-item-hover-text,
23524
- $menu-item-hover-bg,
23525
- $menu-item-hover-border,
23526
- $menu-item-hover-gradient
23527
- );
23528
- }
23529
-
23530
- &:active,
23531
- &.k-active {
23532
- @include fill(
23533
- $menu-item-expanded-text,
23534
- $menu-item-expanded-bg,
23535
- $menu-item-expanded-border,
23536
- $menu-item-expanded-gradient
23537
- );
23538
- }
23539
-
23540
- &:focus,
23541
- &.k-focus {
23542
- @include box-shadow( $menu-item-focus-shadow );
23543
- }
23544
- }
23770
+ @include box-shadow($kendo-fab-item-shadow);
23545
23771
  }
23546
-
23547
- .k-menu-group,
23548
- .k-menu.k-context-menu {
23772
+ .k-fab-item-icon {
23549
23773
  @include fill(
23550
- $kendo-menu-popup-text,
23551
- $kendo-menu-popup-bg,
23552
- $kendo-menu-popup-border,
23553
- $kendo-menu-popup-gradient
23774
+ $kendo-fab-item-icon-text,
23775
+ $kendo-fab-item-icon-bg,
23776
+ $kendo-fab-item-icon-border
23554
23777
  );
23778
+ @include box-shadow($kendo-fab-item-shadow);
23779
+ outline: $kendo-fab-border-width solid $kendo-button-bg;
23780
+ outline-offset: -$kendo-fab-border-width;
23781
+ }
23555
23782
 
23556
- .k-item > .k-link {
23557
- @include fill(
23558
- $kendo-menu-popup-item-text,
23559
- $kendo-menu-popup-item-bg,
23560
- $kendo-menu-popup-item-border,
23561
- $kendo-menu-popup-item-gradient
23562
- );
23563
-
23564
- &:hover,
23565
- &.k-hover {
23566
- @include fill(
23567
- $kendo-menu-popup-item-hover-text,
23568
- $kendo-menu-popup-item-hover-bg,
23569
- $kendo-menu-popup-item-hover-border,
23570
- $kendo-menu-popup-item-hover-gradient
23571
- );
23572
- }
23573
-
23574
- &:active,
23575
- &.k-active,
23576
- &.k-selected {
23577
- @include fill(
23578
- $kendo-menu-popup-item-expanded-text,
23579
- $kendo-menu-popup-item-expanded-bg,
23580
- $kendo-menu-popup-item-expanded-border,
23581
- $kendo-menu-popup-item-expanded-gradient
23582
- );
23583
- }
23584
-
23585
- &:focus,
23586
- &.k-focus {
23587
- @include box-shadow( $kendo-menu-popup-item-focus-shadow );
23588
- }
23589
- }
23783
+ // Hover state
23784
+ .k-fab-item.k-hover .k-fab-item-icon,
23785
+ .k-fab-item:hover .k-fab-item-icon {
23786
+ @include box-shadow($kendo-fab-item-shadow);
23787
+ outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 10% );
23788
+ outline-offset: -$kendo-fab-border-width;
23789
+ border-color: try-darken( $kendo-fab-item-icon-border, 10% );
23790
+ color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 7.5% ) );
23791
+ background-color: try-darken( $kendo-fab-item-icon-bg, 7.5% );
23590
23792
  }
23591
23793
 
23794
+ // Focus state
23795
+ .k-fab-item:focus .k-fab-item-text,
23796
+ .k-fab-item:focus .k-fab-item-icon,
23797
+ .k-fab-item.k-focus .k-fab-item-text,
23798
+ .k-fab-item.k-focus .k-fab-item-icon {
23799
+ outline-style: solid;
23800
+ outline-width: 3px;
23801
+ outline-color: rgba( $kendo-fab-item-icon-border, .5 );
23802
+ }
23592
23803
 
23593
- // Scrolling
23594
- .k-menu-scroll-button {
23595
- @include fill(
23596
- $menu-scroll-button-text,
23597
- $menu-scroll-button-bg,
23598
- $menu-scroll-button-border,
23599
- $menu-scroll-button-gradient
23600
- );
23804
+ // Active state
23805
+ .k-fab-item.k-active .k-fab-item-icon,
23806
+ .k-fab-item:active .k-fab-item-icon {
23807
+ @include box-shadow($kendo-fab-item-active-shadow);
23808
+ outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 12.5% );
23809
+ outline-offset: -$kendo-fab-border-width;
23810
+ border-color: try-darken( $kendo-fab-item-icon-border, 12.5% );
23811
+ color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 10% ) );
23812
+ background-color: try-darken( $kendo-fab-item-icon-bg, 10% );
23813
+ }
23601
23814
 
23602
- &:hover {
23603
- @include fill(
23604
- $menu-scroll-button-hover-text,
23605
- $menu-scroll-button-hover-bg,
23606
- $menu-scroll-button-hover-border,
23607
- $menu-scroll-button-hover-gradient
23608
- );
23815
+ // Disabled state
23816
+ .k-fab-item.k-disabled,
23817
+ .k-fab-item:disabled {
23818
+ opacity: 1;
23609
23819
 
23610
- &::before {
23611
- opacity: 0;
23612
- }
23820
+ .k-fab-item-text,
23821
+ .k-fab-item-icon {
23822
+ @include box-shadow($kendo-fab-item-disabled-shadow);
23823
+ background-color: try-tint( $kendo-fab-item-bg, 8 );
23824
+ color: try-tint( $kendo-fab-item-text, 8 );
23613
23825
  }
23614
23826
  }
23827
+
23615
23828
  }
23616
23829
 
23617
23830
  // #endregion
23618
23831
 
23619
23832
  // #endregion
23620
-
23833
+ // #region @import "menu/_index.scss"; -> packages/bootstrap/scss/menu/_index.scss
23834
+ // File already imported_once. Skipping output.
23621
23835
  // #endregion
23622
23836
  // #region @import "toolbar/_index.scss"; -> packages/bootstrap/scss/toolbar/_index.scss
23623
23837
  // File already imported_once. Skipping output.
@@ -23750,6 +23964,12 @@ $actionsheet-item-disabled-shadow: null !default;
23750
23964
  overflow-y: auto;
23751
23965
  position: fixed;
23752
23966
  z-index: 10002;
23967
+
23968
+ *,
23969
+ *::before,
23970
+ *::after {
23971
+ box-sizing: border-box;
23972
+ }
23753
23973
  }
23754
23974
 
23755
23975
 
@@ -24423,6 +24643,12 @@ $drawer-selected-hover-text: $selected-text !default;
24423
24643
  -webkit-touch-callout: none;
24424
24644
  -webkit-tap-highlight-color: $rgba-transparent;
24425
24645
 
24646
+ *,
24647
+ *::before,
24648
+ *::after {
24649
+ box-sizing: border-box;
24650
+ }
24651
+
24426
24652
  // Borders
24427
24653
  .k-drawer-mini &.k-drawer-start,
24428
24654
  .k-drawer-expanded &.k-drawer-start,
@@ -24806,6 +25032,12 @@ $notification-themes: () !default;
24806
25032
  display: block;
24807
25033
  -webkit-touch-callout: none;
24808
25034
  -webkit-tap-highlight-color: $rgba-transparent;
25035
+
25036
+ *,
25037
+ *::before,
25038
+ *::after {
25039
+ box-sizing: border-box;
25040
+ }
24809
25041
  }
24810
25042
 
24811
25043
  .k-notification-wrap {
@@ -25045,6 +25277,12 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
25045
25277
  overflow: hidden;
25046
25278
  -webkit-touch-callout: none;
25047
25279
  -webkit-tap-highlight-color: $rgba-transparent;
25280
+
25281
+ *,
25282
+ *::before,
25283
+ *::after {
25284
+ box-sizing: border-box;
25285
+ }
25048
25286
  }
25049
25287
  .k-card > .k-card-inner {
25050
25288
  @include border-radius( $card-inner-border-radius );
@@ -25585,6 +25823,12 @@ $popover-callout-shadow-w: null !default;
25585
25823
  z-index: 12000;
25586
25824
  -webkit-touch-callout: none;
25587
25825
  -webkit-tap-highlight-color: $rgba-transparent;
25826
+
25827
+ *,
25828
+ *::before,
25829
+ *::after {
25830
+ box-sizing: border-box;
25831
+ }
25588
25832
  }
25589
25833
 
25590
25834
  // Header
@@ -25860,6 +26104,12 @@ $bottom-nav-flat-border: $component-border !default;
25860
26104
  outline: none;
25861
26105
  -webkit-touch-callout: none;
25862
26106
  -webkit-tap-highlight-color: $rgba-transparent;
26107
+
26108
+ *,
26109
+ *::before,
26110
+ *::after {
26111
+ box-sizing: border-box;
26112
+ }
25863
26113
  }
25864
26114
 
25865
26115
  .k-bottom-nav-border {
@@ -26111,6 +26361,12 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
26111
26361
  flex-direction: row;
26112
26362
  -webkit-touch-callout: none;
26113
26363
  -webkit-tap-highlight-color: $rgba-transparent;
26364
+
26365
+ *,
26366
+ *::before,
26367
+ *::after {
26368
+ box-sizing: border-box;
26369
+ }
26114
26370
  }
26115
26371
 
26116
26372
 
@@ -26463,6 +26719,12 @@ $pager-dropdown-width: 5em !default;
26463
26719
  -webkit-touch-callout: none;
26464
26720
  -webkit-tap-highlight-color: $rgba-transparent;
26465
26721
 
26722
+ *,
26723
+ *::before,
26724
+ *::after {
26725
+ box-sizing: border-box;
26726
+ }
26727
+
26466
26728
  .k-link {
26467
26729
  text-decoration: none;
26468
26730
  outline: 0;
@@ -26510,7 +26772,6 @@ $pager-dropdown-width: 5em !default;
26510
26772
  %base-pager-item {
26511
26773
  min-width: $kendo-button-calc-size;
26512
26774
  height: $kendo-button-calc-size;
26513
- box-sizing: border-box;
26514
26775
  color: inherit;
26515
26776
  text-align: center;
26516
26777
  display: inline-flex;
@@ -26670,7 +26931,6 @@ $pager-dropdown-width: 5em !default;
26670
26931
  }
26671
26932
 
26672
26933
  height: $kendo-button-calc-size;
26673
- box-sizing: border-box;
26674
26934
  border-color: inherit;
26675
26935
  }
26676
26936
 
@@ -27054,6 +27314,12 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
27054
27314
  color: inherit;
27055
27315
  background: none;
27056
27316
 
27317
+ *,
27318
+ *::before,
27319
+ *::after {
27320
+ box-sizing: border-box;
27321
+ }
27322
+
27057
27323
 
27058
27324
  // Step list
27059
27325
  .k-step-list {
@@ -27103,7 +27369,6 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
27103
27369
  transition-property: color, background-color, border-color;
27104
27370
  transition-duration: .4s;
27105
27371
  transition-timing-function: ease-in-out;
27106
- box-sizing: content-box;
27107
27372
 
27108
27373
  &::after {
27109
27374
  @include border-radius( 100% );
@@ -27769,19 +28034,27 @@ $tabstrip-content-border-focused: $component-text !default;
27769
28034
  }
27770
28035
 
27771
28036
  > .k-button {
27772
- flex-shrink: 0;
28037
+ width: auto;
28038
+ height: auto;
28039
+ flex: none;
27773
28040
  align-self: stretch;
28041
+ aspect-ratio: auto;
28042
+
28043
+ .k-button-icon {
28044
+ min-width: auto;
28045
+ min-height: auto;
28046
+ }
27774
28047
  }
27775
28048
 
27776
28049
  &.k-hstack {
27777
28050
  > .k-button {
27778
- height: auto;
28051
+ padding: 0 map-get( $spacing, 1 );
27779
28052
  }
27780
28053
  }
27781
28054
 
27782
28055
  &.k-vstack {
27783
28056
  > .k-button {
27784
- width: auto;
28057
+ padding: map-get( $spacing, 1 ) 0;
27785
28058
  }
27786
28059
  }
27787
28060
  }
@@ -28396,6 +28669,12 @@ $expander-content-padding-y: $expander-content-padding-x !default;
28396
28669
  -webkit-touch-callout: none;
28397
28670
  -webkit-tap-highlight-color: $rgba-transparent;
28398
28671
 
28672
+ *,
28673
+ *::before,
28674
+ *::after {
28675
+ box-sizing: border-box;
28676
+ }
28677
+
28399
28678
  .k-rtl &,
28400
28679
  &.k-rtl,
28401
28680
  &[dir = "rtl"] {
@@ -28435,7 +28714,6 @@ $expander-content-padding-y: $expander-content-padding-x !default;
28435
28714
  // Expander content
28436
28715
  .k-expander-content {
28437
28716
  padding: $expander-content-padding-y $expander-content-padding-x;
28438
- box-sizing: border-box;
28439
28717
  }
28440
28718
 
28441
28719
  // Multiple expanders
@@ -28645,6 +28923,12 @@ $panelbar-header-expanded-gradient: null !default;
28645
28923
  -webkit-touch-callout: none;
28646
28924
  -webkit-tap-highlight-color: $rgba-transparent;
28647
28925
 
28926
+ *,
28927
+ *::before,
28928
+ *::after {
28929
+ box-sizing: border-box;
28930
+ }
28931
+
28648
28932
 
28649
28933
  // Root
28650
28934
  > .k-item,
@@ -34292,6 +34576,7 @@ $pivotgrid-remove-text: null !default;
34292
34576
  border-style: solid;
34293
34577
  align-items: flex-start;
34294
34578
  flex-wrap: wrap;
34579
+ box-shadow: none;
34295
34580
 
34296
34581
  > * {
34297
34582
  max-width: 100%;
@@ -34302,32 +34587,6 @@ $pivotgrid-remove-text: null !default;
34302
34587
  }
34303
34588
  }
34304
34589
 
34305
- .k-pivot-toolbar .k-button {
34306
- @include border-radius( $border-radius );
34307
- padding: $kendo-button-padding-y $kendo-button-padding-x;
34308
- padding-right: calc( #{$kendo-button-padding-x} + #{$icon-size * 3} );
34309
- min-height: auto;
34310
- font-size: $font-size;
34311
- line-height: $kendo-button-line-height;
34312
- text-align: left;
34313
- white-space: normal;
34314
- word-break: break-word;
34315
- position: relative;
34316
- cursor: move;
34317
-
34318
- .k-field-actions .k-setting-delete {
34319
- box-sizing: content-box;
34320
- }
34321
- }
34322
-
34323
- .k-field-actions {
34324
- position: absolute;
34325
- right: $kendo-button-padding-y;
34326
- top: $kendo-button-padding-y;
34327
- line-height: 1;
34328
- cursor: pointer;
34329
- }
34330
-
34331
34590
  .k-pivot-layout {
34332
34591
  border-spacing: 0;
34333
34592
  table-layout: auto;
@@ -34350,6 +34609,8 @@ $pivotgrid-remove-text: null !default;
34350
34609
  .k-pivot-rowheaders > .k-grid,
34351
34610
  .k-pivot-table > .k-grid {
34352
34611
  border-width: 0;
34612
+ color: inherit;
34613
+ background: none;
34353
34614
  }
34354
34615
 
34355
34616
  .k-pivot-rowheaders > .k-grid td:first-child,
@@ -34413,58 +34674,73 @@ $pivotgrid-remove-text: null !default;
34413
34674
  @include exports("pivotgrid/configurator/layout/legacy") {
34414
34675
 
34415
34676
 
34416
- .k-fieldselector {
34417
- border-width: 1px;
34418
- border-style: solid;
34677
+ // jquery specific -- old pivot
34678
+ .k-pivotgrid-wrapper {
34419
34679
  box-sizing: border-box;
34420
- outline: 0;
34421
- font-family: $pivotgrid-font-family;
34422
- font-size: $pivotgrid-font-size;
34423
- line-height: $pivotgrid-line-height;
34424
- -webkit-touch-callout: none;
34425
- -webkit-tap-highlight-color: $rgba-transparent;
34426
-
34427
- .k-columns {
34428
- display: flex;
34429
- align-items: stretch;
34680
+ display: flex;
34681
+ flex-flow: row nowrap;
34682
+ align-items: flex-start;
34683
+ gap: map-get( $spacing, 2 );
34430
34684
 
34431
- > div {
34432
- padding: $table-cell-padding-y;
34433
- width: 50%;
34434
- box-sizing: border-box;
34435
- border-width: 0;
34436
- border-style: solid;
34437
- float: left;
34438
- overflow: auto;
34439
- }
34440
- > div + div {
34441
- border-left-width: 1px;
34442
- }
34685
+ > .k-pivotgrid-configurator-panel {
34686
+ max-width: 320px;
34687
+ flex: none;
34443
34688
  }
34689
+ > .k-pivot {
34690
+ flex: 1;
34691
+ }
34692
+ }
34693
+ .k-pivotgrid-configurator-panel.kendo-jquery {
34694
+ box-sizing: border-box;
34695
+ display: inline-flex;
34444
34696
 
34445
-
34446
- p {
34447
- margin: 0 0 $padding-y-sm;
34448
- text-transform: uppercase;
34697
+ .k-pivotgrid-configurator {
34698
+ height: 100%;
34449
34699
  }
34450
- p .k-icon {
34451
- margin: 0 $icon-spacing 0 0;
34700
+
34701
+ .k-pivotgrid-configurator-content {
34702
+ padding: map-get( $spacing, 4 );
34703
+ max-height: 100%;
34704
+ display: flex;
34705
+ flex-flow: column nowrap;
34706
+ gap: map-get( $spacing, 4 );
34707
+ overflow-x: hidden;
34708
+ overflow-y: auto;
34452
34709
  }
34453
34710
 
34711
+ .k-pivotgrid-targets {
34712
+ display: flex;
34713
+ flex-flow: column nowrap;
34714
+ gap: map-get( $spacing, 4 );
34715
+ }
34454
34716
 
34455
- // Treeview
34456
- .k-treeview {
34457
- border-width: 0;
34458
- overflow: visible;
34717
+ .k-pivotgrid-configurator-section {
34718
+ display: flex;
34719
+ flex-flow: column nowrap;
34720
+ gap: map-get( $spacing, 2 );
34459
34721
  }
34460
34722
 
34461
- .k-edit-label {
34462
- width: 16%;
34723
+ .k-column-fields {
34724
+ margin: 0;
34725
+ padding: map-get( $spacing, 1 );
34726
+ max-height: 200px;
34727
+ border-width: 1px;
34728
+ border-style: solid;
34729
+ display: flex;
34730
+ flex-flow: row wrap;
34731
+ gap: map-get( $spacing, 1 );
34732
+ overflow-x: hidden;
34733
+ overflow-y: auto;
34734
+
34735
+ > * {
34736
+ margin: 0;
34737
+ }
34463
34738
  }
34464
- .k-edit-field {
34465
- width: 77%;
34739
+ .k-ie & .k-column-fields {
34740
+ > * {
34741
+ margin: 2px;
34742
+ }
34466
34743
  }
34467
-
34468
34744
  }
34469
34745
 
34470
34746
  }
@@ -34682,217 +34958,57 @@ $pivotgrid-remove-text: null !default;
34682
34958
  @include exports("pivotgrid/theme/legacy") {
34683
34959
 
34684
34960
  .k-pivot {
34685
- border-color: $pivotgrid-border;
34686
- }
34687
-
34688
- .k-alt,
34689
- .k-pivot-layout > tbody > tr:first-child > td:first-child {
34690
- background-color: $pivotgrid-alt-bg;
34691
- }
34692
-
34693
- .k-fieldselector {
34694
- color: $pivotgrid-configurator-text;
34961
+ @include fill (
34962
+ $pivotgrid-text,
34963
+ $pivotgrid-bg,
34964
+ $pivotgrid-border
34965
+ );
34695
34966
  }
34696
-
34697
- .k-fieldselector .k-list-container {
34698
- background-color: $pivotgrid-container-bg;
34967
+ .k-pivot-table {
34968
+ border-color: $pivotgrid-border;
34699
34969
  }
34700
34970
 
34701
- .k-pivot-toolbar,
34702
- .k-pivot-table,
34703
- .k-fieldselector,
34704
- .k-fieldselector .k-list-container,
34705
- .k-fieldselector .k-columns > div,
34706
- .k-pivot-rowheaders > .k-grid td:first-child,
34707
- .k-pivot-table .k-grid-header .k-header.k-first {
34708
- border-color: $pivotgrid-chrome-border;
34971
+ // Pivotgrid header
34972
+ .k-pivot-rowheaders {
34973
+ @include fill(
34974
+ $pivotgrid-headers-text,
34975
+ $pivotgrid-headers-bg,
34976
+ $pivotgrid-headers-border
34977
+ );
34709
34978
  }
34710
34979
 
34711
- .k-pivot-rowheaders .k-alt .k-alt,
34712
- .k-header.k-alt {
34713
- background-color: $pivotgrid-row-headers-bg;
34714
- }
34715
34980
 
34716
- .k-pivot-toolbar .k-button {
34981
+ // Pivotgrid toolbar
34982
+ .k-pivot-toolbar {
34717
34983
  @include fill(
34718
- $kendo-button-text,
34719
- $kendo-button-bg,
34720
- $kendo-button-border,
34721
- $kendo-button-gradient
34984
+ $pivotgrid-headers-text,
34985
+ $pivotgrid-headers-bg,
34986
+ $pivotgrid-headers-border
34722
34987
  );
34723
34988
 
34724
- &:hover,
34725
- &.k-state-hover {
34726
- @include fill(
34727
- $kendo-button-hover-text,
34728
- $kendo-button-hover-bg,
34729
- $kendo-button-hover-border,
34730
- $kendo-button-hover-gradient
34731
- );
34732
- }
34733
-
34734
- // Pressed state
34735
- &:active,
34736
- &.k-state-active {
34737
- @include fill(
34738
- $kendo-button-active-text,
34739
- $kendo-button-active-bg,
34740
- $kendo-button-active-border,
34741
- $kendo-button-active-gradient
34742
- );
34743
- }
34744
-
34745
- // Focused state
34746
- &:focus,
34747
- &.k-state-focus,
34748
- &.k-state-focused {
34749
- box-shadow: $kendo-button-focus-shadow;
34750
- }
34751
-
34752
- &.k-empty {
34753
- color: $subtle-text;
34754
- }
34755
- }
34756
-
34757
- .k-pivot-toolbar {
34758
34989
  .k-empty {
34759
34990
  color: $subtle-text;
34760
34991
  }
34761
34992
  }
34762
34993
 
34763
- .k-pivot-layout .k-grid-footer,
34764
- .k-pivot-layout .k-grid.k-alt {
34765
- color: $pivotgrid-alt-text;
34766
- background-color: $pivotgrid-alt-bg;
34767
- }
34768
-
34769
- // Loading indicator
34770
- .k-fieldselector {
34771
- .k-i-loading {
34772
- border-color: $header-bg;
34773
- }
34774
-
34775
- .k-i-loading::before,
34776
- .k-i-loading::after {
34777
- background-color: $header-bg;
34778
- }
34779
- }
34780
-
34781
- // KPI icons
34782
- .k-i-kpi-trend-increase,
34783
- .k-i-kpi-trend-decrease,
34784
- .k-i-kpi-trend-equal {
34785
- color: inherit;
34786
- }
34787
-
34788
- .k-i-kpi-status-hold {
34789
- color: $warning;
34790
- }
34791
-
34792
- .k-i-kpi-status-deny {
34793
- color: $error;
34794
- }
34795
-
34796
- .k-i-kpi-status-open {
34797
- color: $success;
34798
- }
34799
- }
34800
-
34801
- // #endregion
34802
-
34803
- @include exports("pivotgrid/theme/bootstrap/legacy") {
34804
-
34805
- .k-pivot {
34806
- border-color: $pivotgrid-border;
34807
- }
34808
-
34809
- // .k-alt,
34810
- .k-pivot-layout > tbody > tr:first-child > td:first-child {
34994
+ .k-alt {
34811
34995
  background-color: $pivotgrid-alt-bg;
34812
34996
  }
34813
34997
 
34814
- .k-fieldselector {
34815
- color: $pivotgrid-configurator-text;
34816
- background-color: $pivotgrid-container-bg;
34817
- }
34818
- .k-fieldselector .k-list-container {
34819
- background-color: $panel-bg;
34820
- }
34821
-
34822
34998
  .k-pivot-toolbar,
34823
- .k-fieldselector {
34824
- border-color: $grid-header-border;
34825
- }
34826
34999
  .k-pivot-table,
34827
- .k-fieldselector .k-list-container,
34828
- .k-fieldselector .k-columns > div,
34829
35000
  .k-pivot-rowheaders > .k-grid td:first-child,
34830
35001
  .k-pivot-table .k-grid-header .k-header.k-first {
34831
35002
  border-color: $pivotgrid-chrome-border;
34832
35003
  }
34833
35004
 
34834
- .k-pivot-rowheaders .k-alt .k-alt,
34835
35005
  .k-header.k-alt {
34836
35006
  background-color: $pivotgrid-row-headers-bg;
34837
35007
  }
34838
35008
 
34839
- .k-pivot-toolbar .k-button {
34840
- @include fill(
34841
- $kendo-button-text,
34842
- $kendo-button-bg,
34843
- $kendo-button-border,
34844
- $kendo-button-gradient
34845
- );
34846
-
34847
- &:hover,
34848
- &.k-state-hover {
34849
- @include fill(
34850
- $kendo-button-hover-text,
34851
- $kendo-button-hover-bg,
34852
- $kendo-button-hover-border,
34853
- $kendo-button-hover-gradient
34854
- );
34855
- }
34856
-
34857
- // Active state
34858
- &:active,
34859
- &.k-state-active {
34860
- @include fill(
34861
- $kendo-button-active-text,
34862
- $kendo-button-active-bg,
34863
- $kendo-button-active-border,
34864
- $kendo-button-active-gradient
34865
- );
34866
- }
34867
-
34868
- // Selected state
34869
- &.k-state-selected {
34870
- @include fill(
34871
- $kendo-button-selected-text,
34872
- $kendo-button-selected-bg,
34873
- $kendo-button-selected-border,
34874
- $kendo-button-selected-gradient
34875
- );
34876
- }
34877
-
34878
- // Focused state
34879
- &:focus,
34880
- &.k-state-focus,
34881
- &.k-state-focused {
34882
- box-shadow: $kendo-button-focus-shadow;
34883
- }
34884
- }
34885
-
34886
- // Loading indicator
34887
- .k-fieldselector {
34888
- .k-i-loading {
34889
- border-color: $header-bg;
34890
- }
34891
-
34892
- .k-i-loading::before,
34893
- .k-i-loading::after {
34894
- background-color: $header-bg;
34895
- }
35009
+ .k-pivot-layout .k-grid-footer {
35010
+ color: $pivotgrid-alt-text;
35011
+ background-color: $pivotgrid-alt-bg;
34896
35012
  }
34897
35013
 
34898
35014
  // KPI icons
@@ -34913,10 +35029,22 @@ $pivotgrid-remove-text: null !default;
34913
35029
  .k-i-kpi-status-open {
34914
35030
  color: $success;
34915
35031
  }
35032
+
35033
+
35034
+ // Configurator
35035
+ .k-pivotgrid-configurator-panel.kendo-jquery {
35036
+
35037
+ .k-column-fields {
35038
+ border-color: $component-border;
35039
+ }
35040
+
35041
+ }
34916
35042
  }
34917
35043
 
34918
35044
  // #endregion
34919
35045
 
35046
+ // #endregion
35047
+
34920
35048
  // #endregion
34921
35049
  // #region @import "treelist/_index.scss"; -> packages/bootstrap/scss/treelist/_index.scss
34922
35050
  // #region @import "../core/_index.scss"; -> packages/bootstrap/scss/core/_index.scss
@@ -35154,10 +35282,17 @@ $filter-preview-operator-text: $subtle-text !default;
35154
35282
  @include exports("filter/layout") {
35155
35283
 
35156
35284
  .k-filter {
35285
+ box-sizing: border-box;
35157
35286
  border-width: 0;
35158
35287
  display: inline-block;
35159
35288
  background-color: transparent;
35160
35289
 
35290
+ *,
35291
+ *::before,
35292
+ *::after {
35293
+ box-sizing: border-box;
35294
+ }
35295
+
35161
35296
  ul {
35162
35297
  padding: 0;
35163
35298
 
@@ -35923,6 +36058,12 @@ $taskboard-drag-placeholder-border: $component-border !default;
35923
36058
  display: flex;
35924
36059
  flex-direction: column;
35925
36060
  position: relative;
36061
+
36062
+ *,
36063
+ *::before,
36064
+ *::after {
36065
+ box-sizing: border-box;
36066
+ }
35926
36067
  }
35927
36068
 
35928
36069
  // Toolbar
@@ -35991,7 +36132,6 @@ $taskboard-drag-placeholder-border: $component-border !default;
35991
36132
  .k-taskboard-column-cards {
35992
36133
  padding: $taskboard-column-cards-padding-y $taskboard-column-cards-padding-x;
35993
36134
  min-height: 100%;
35994
- box-sizing: border-box;
35995
36135
  display: flex;
35996
36136
  flex-direction: column;
35997
36137
  gap: $taskboard-column-cards-gap 0;
@@ -36020,7 +36160,6 @@ $taskboard-drag-placeholder-border: $component-border !default;
36020
36160
  width: $taskboard-pane-width;
36021
36161
  border-width: $taskboard-pane-border-width;
36022
36162
  border-style: solid;
36023
- box-sizing: border-box;
36024
36163
  display: flex;
36025
36164
  flex-direction: column;
36026
36165
  position: absolute;
@@ -37230,6 +37369,12 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
37230
37369
  line-height: $imageeditor-line-height;
37231
37370
  -webkit-touch-callout: none;
37232
37371
  -webkit-tap-highlight-color: $rgba-transparent;
37372
+
37373
+ *,
37374
+ *::before,
37375
+ *::after {
37376
+ box-sizing: border-box;
37377
+ }
37233
37378
  }
37234
37379
 
37235
37380
 
@@ -39713,6 +39858,12 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
39713
39858
  flex-shrink: 0;
39714
39859
  font-size: inherit;
39715
39860
  }
39861
+
39862
+ .k-no-data {
39863
+ height: auto;
39864
+ min-height: auto;
39865
+ color: inherit;
39866
+ }
39716
39867
  }
39717
39868
 
39718
39869
  }
@@ -40754,12 +40905,13 @@ $chat-quick-reply-hover-border: $primary !default;
40754
40905
 
40755
40906
 
40756
40907
  .k-scroll-button {
40908
+ // IMPORTANT: if we don't set padding, the browser will set for us
40909
+ padding: 0 map-get( $spacing, 1 );
40757
40910
  height: 100%;
40758
40911
  aspect-ratio: auto;
40759
40912
  position: absolute;
40760
40913
  z-index: 2;
40761
- top: 50%;
40762
- transform: translateY(-50%);
40914
+ top: 0;
40763
40915
 
40764
40916
  .k-button-icon {
40765
40917
  min-width: auto;
@@ -41019,6 +41171,12 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
41019
41171
  -webkit-touch-callout: none;
41020
41172
  -webkit-tap-highlight-color: $rgba-transparent;
41021
41173
 
41174
+ *,
41175
+ *::before,
41176
+ *::after {
41177
+ box-sizing: border-box;
41178
+ }
41179
+
41022
41180
  > iframe {
41023
41181
  width: 100%;
41024
41182
  height: 100%;
@@ -41241,6 +41399,12 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
41241
41399
  -webkit-touch-callout: none;
41242
41400
  -webkit-tap-highlight-color: $rgba-transparent;
41243
41401
 
41402
+ *,
41403
+ *::before,
41404
+ *::after {
41405
+ box-sizing: border-box;
41406
+ }
41407
+
41244
41408
  ul {
41245
41409
  margin: 0;
41246
41410
  padding: 0;
@@ -41258,7 +41422,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
41258
41422
  line-height: $timeline-flag-line-height;
41259
41423
  min-width: $timeline-flag-min-width;
41260
41424
  max-width: $timeline-flag-max-width;
41261
- box-sizing: border-box;
41262
41425
  position: relative;
41263
41426
  z-index: 1;
41264
41427
  }
@@ -41338,7 +41501,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
41338
41501
  margin: $timeline-spacing-y 0;
41339
41502
  width: 100%;
41340
41503
  position: relative;
41341
- box-sizing: border-box;
41342
41504
  border: 0;
41343
41505
  }
41344
41506
 
@@ -41528,12 +41690,10 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
41528
41690
 
41529
41691
  .k-timeline-card {
41530
41692
  height: 100%;
41531
- box-sizing: border-box;
41532
41693
  }
41533
41694
 
41534
41695
  .k-card {
41535
41696
  max-height: 100%;
41536
- box-sizing: border-box;
41537
41697
  }
41538
41698
 
41539
41699
  .k-timeline-events-list {
@@ -43366,12 +43526,19 @@ $map-marker-fill: $primary !default;
43366
43526
  // Layout
43367
43527
  .k-map {
43368
43528
  height: 600px;
43529
+ box-sizing: border-box;
43369
43530
  border-width: $map-border-width;
43370
43531
  border-style: solid;
43371
43532
  font-size: $map-font-size;
43372
43533
  line-height: $map-line-height;
43373
43534
  font-family: $map-font-family;
43374
43535
 
43536
+ *,
43537
+ *::before,
43538
+ *::after {
43539
+ box-sizing: border-box;
43540
+ }
43541
+
43375
43542
 
43376
43543
  // Scroll
43377
43544
  .km-scroll-wrapper {
@@ -43639,6 +43806,12 @@ $orgchart-line-v-height: 25px !default;
43639
43806
  font-family: $orgchart-font-family;
43640
43807
  line-height: $orgchart-line-height;
43641
43808
  overflow: auto;
43809
+
43810
+ *,
43811
+ *::before,
43812
+ *::after {
43813
+ box-sizing: border-box;
43814
+ }
43642
43815
  }
43643
43816
 
43644
43817
  .k-orgchart-container {