@progress/kendo-theme-classic 5.0.0-beta.3 → 5.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.css +1006 -1049
- package/dist/all.scss +1131 -1268
- package/package.json +3 -3
- package/scss/appbar/_variables.scss +1 -1
- package/scss/autocomplete/_variables.scss +0 -19
- package/scss/button/_variables.scss +60 -32
- package/scss/chat/_variables.scss +0 -5
- package/scss/checkbox/_index.scss +1 -0
- package/scss/checkbox/_variables.scss +64 -67
- package/scss/chip/_variables.scss +1 -1
- package/scss/grid/_variables.scss +2 -2
- package/scss/list/_variables.scss +19 -19
- package/scss/menu/_variables.scss +45 -47
- package/scss/radio/_variables.scss +70 -83
- package/scss/table/_variables.scss +9 -9
- package/scss/treeview/_variables.scss +45 -46
package/dist/all.scss
CHANGED
|
@@ -2723,18 +2723,6 @@ $display4-letter-spacing: null !default;
|
|
|
2723
2723
|
// #region @import "~@progress/kendo-theme-default/scss/common/_loading.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/common/_loading.scss
|
|
2724
2724
|
@include exports( "common/loading" ) {
|
|
2725
2725
|
|
|
2726
|
-
// Loading indicator
|
|
2727
|
-
.k-loading {
|
|
2728
|
-
width: 64px;
|
|
2729
|
-
height: 64px;
|
|
2730
|
-
display: block;
|
|
2731
|
-
|
|
2732
|
-
.animate {
|
|
2733
|
-
animation: loading 2s infinite linear;
|
|
2734
|
-
}
|
|
2735
|
-
}
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
2726
|
// Loading mask
|
|
2739
2727
|
.k-loading-mask,
|
|
2740
2728
|
.k-loading-image,
|
|
@@ -2823,7 +2811,7 @@ $display4-letter-spacing: null !default;
|
|
|
2823
2811
|
content: "";
|
|
2824
2812
|
// See https://github.com/telerik/kendo-themes/issues/1925
|
|
2825
2813
|
border-width: 1px; // TODO: Remove once we drop IE support
|
|
2826
|
-
border-width:
|
|
2814
|
+
border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
|
|
2827
2815
|
font-size: 4em;
|
|
2828
2816
|
}
|
|
2829
2817
|
}
|
|
@@ -6026,7 +6014,7 @@ $message-box-link-text-decoration: underline !default;
|
|
|
6026
6014
|
/// Font size of the list component, if no size is set.
|
|
6027
6015
|
/// @group list
|
|
6028
6016
|
$kendo-list-font-size: null !default;
|
|
6029
|
-
$kendo-list-font-size-sm: $font-size-
|
|
6017
|
+
$kendo-list-font-size-sm: $font-size-md !default;
|
|
6030
6018
|
$kendo-list-font-size-md: $font-size-md !default;
|
|
6031
6019
|
$kendo-list-font-size-lg: $font-size-md !default;
|
|
6032
6020
|
|
|
@@ -6041,17 +6029,17 @@ $kendo-list-line-height-lg: null !default;
|
|
|
6041
6029
|
/// @group list
|
|
6042
6030
|
$kendo-list-header-padding-x: null !default;
|
|
6043
6031
|
$kendo-list-header-padding-x-base: map-get( $spacing, 2 ) !default;
|
|
6044
|
-
$kendo-list-header-padding-x-sm: ( $
|
|
6045
|
-
$kendo-list-header-padding-x-md: ( $
|
|
6046
|
-
$kendo-list-header-padding-x-lg: ( $
|
|
6032
|
+
$kendo-list-header-padding-x-sm: map-get( $spacing, 2 ) !default;
|
|
6033
|
+
$kendo-list-header-padding-x-md: map-get( $spacing, 2 ) !default;
|
|
6034
|
+
$kendo-list-header-padding-x-lg: map-get( $spacing, 2 ) !default;
|
|
6047
6035
|
|
|
6048
6036
|
/// Vertical padding of list header, if no size is set.
|
|
6049
6037
|
/// @group list
|
|
6050
6038
|
$kendo-list-header-padding-y: null !default;
|
|
6051
6039
|
$kendo-list-header-padding-y-base: map-get( $spacing, 1 ) !default;
|
|
6052
|
-
$kendo-list-header-padding-y-sm: ( $
|
|
6053
|
-
$kendo-list-header-padding-y-md: ( $
|
|
6054
|
-
$kendo-list-header-padding-y-lg: ( $
|
|
6040
|
+
$kendo-list-header-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
|
|
6041
|
+
$kendo-list-header-padding-y-md: map-get( $spacing, 1 ) !default;
|
|
6042
|
+
$kendo-list-header-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
|
|
6055
6043
|
|
|
6056
6044
|
/// Border width of list header.
|
|
6057
6045
|
/// @group list
|
|
@@ -6079,17 +6067,17 @@ $kendo-list-header-font-weight: null !default;
|
|
|
6079
6067
|
/// @group list
|
|
6080
6068
|
$kendo-list-item-padding-x: null !default;
|
|
6081
6069
|
$kendo-list-item-padding-x-base: map-get( $spacing, 2 ) !default;
|
|
6082
|
-
$kendo-list-item-padding-x-sm: ( $
|
|
6083
|
-
$kendo-list-item-padding-x-md: ( $
|
|
6084
|
-
$kendo-list-item-padding-x-lg: ( $
|
|
6070
|
+
$kendo-list-item-padding-x-sm: map-get( $spacing, 2 ) !default;
|
|
6071
|
+
$kendo-list-item-padding-x-md: map-get( $spacing, 2 ) !default;
|
|
6072
|
+
$kendo-list-item-padding-x-lg: map-get( $spacing, 2 ) !default;
|
|
6085
6073
|
|
|
6086
6074
|
/// Vertical padding of list items, when no size is set.
|
|
6087
6075
|
/// @group list
|
|
6088
6076
|
$kendo-list-item-padding-y: null !default;
|
|
6089
6077
|
$kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
|
|
6090
|
-
$kendo-list-item-padding-y-sm: ( $
|
|
6091
|
-
$kendo-list-item-padding-y-md: ( $
|
|
6092
|
-
$kendo-list-item-padding-y-lg: ( $
|
|
6078
|
+
$kendo-list-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
|
|
6079
|
+
$kendo-list-item-padding-y-md: map-get( $spacing, 1 ) !default;
|
|
6080
|
+
$kendo-list-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
|
|
6093
6081
|
|
|
6094
6082
|
/// Font size of list items, if no size is set.
|
|
6095
6083
|
/// @group list
|
|
@@ -6109,17 +6097,17 @@ $kendo-list-item-line-height-lg: null !default;
|
|
|
6109
6097
|
/// @group list
|
|
6110
6098
|
$kendo-list-group-item-padding-x: null !default;
|
|
6111
6099
|
$kendo-list-group-item-padding-x-base: map-get( $spacing, 2 ) !default;
|
|
6112
|
-
$kendo-list-group-item-padding-x-sm: ( $
|
|
6113
|
-
$kendo-list-group-item-padding-x-md: ( $
|
|
6114
|
-
$kendo-list-group-item-padding-x-lg: ( $
|
|
6100
|
+
$kendo-list-group-item-padding-x-sm: map-get( $spacing, 2 ) !default;
|
|
6101
|
+
$kendo-list-group-item-padding-x-md: map-get( $spacing, 2 ) !default;
|
|
6102
|
+
$kendo-list-group-item-padding-x-lg: map-get( $spacing, 2 ) !default;
|
|
6115
6103
|
|
|
6116
6104
|
/// Vertical padding of list group items, when no size is set.
|
|
6117
6105
|
/// @group list
|
|
6118
6106
|
$kendo-list-group-item-padding-y: null !default;
|
|
6119
6107
|
$kendo-list-group-item-padding-y-base: map-get( $spacing, 1 ) !default;
|
|
6120
|
-
$kendo-list-group-item-padding-y-sm: ( $
|
|
6121
|
-
$kendo-list-group-item-padding-y-md: ( $
|
|
6122
|
-
$kendo-list-group-item-padding-y-lg: ( $
|
|
6108
|
+
$kendo-list-group-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
|
|
6109
|
+
$kendo-list-group-item-padding-y-md: map-get( $spacing, 1 ) !default;
|
|
6110
|
+
$kendo-list-group-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
|
|
6123
6111
|
|
|
6124
6112
|
/// Border width of list group items.
|
|
6125
6113
|
/// @group list
|
|
@@ -6272,131 +6260,140 @@ $kendo-list-no-data-text: $subtle-text !default;
|
|
|
6272
6260
|
|
|
6273
6261
|
// #endregion
|
|
6274
6262
|
|
|
6263
|
+
|
|
6275
6264
|
// Component
|
|
6276
6265
|
// #region @import "_variables.scss"; -> packages/classic/scss/checkbox/_variables.scss
|
|
6277
6266
|
// Checkbox
|
|
6278
6267
|
|
|
6279
|
-
///
|
|
6268
|
+
/// Border width of checkbox.
|
|
6280
6269
|
/// @group checkbox
|
|
6270
|
+
$kendo-checkbox-border-width: 1px !default;
|
|
6271
|
+
|
|
6272
|
+
// Checkbox sizes
|
|
6281
6273
|
$kendo-checkbox-sizes: (
|
|
6282
|
-
sm:
|
|
6283
|
-
|
|
6284
|
-
|
|
6274
|
+
sm: (
|
|
6275
|
+
size: map-get( $spacing, 3 ),
|
|
6276
|
+
glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
|
|
6277
|
+
ripple-size: map-get( $spacing, 3 ) * 3
|
|
6278
|
+
),
|
|
6279
|
+
md: (
|
|
6280
|
+
size: map-get( $spacing, 4 ),
|
|
6281
|
+
glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
|
|
6282
|
+
ripple-size: map-get( $spacing, 4 ) * 3
|
|
6283
|
+
),
|
|
6284
|
+
lg: (
|
|
6285
|
+
size: map-get( $spacing, 5 ),
|
|
6286
|
+
glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
|
|
6287
|
+
ripple-size: map-get( $spacing, 5 ) * 3
|
|
6288
|
+
)
|
|
6285
6289
|
) !default;
|
|
6286
6290
|
|
|
6287
|
-
///
|
|
6291
|
+
/// Background color of checkbox.
|
|
6288
6292
|
/// @group checkbox
|
|
6289
|
-
$kendo-checkbox-
|
|
6290
|
-
///
|
|
6291
|
-
/// @group checkbox
|
|
6292
|
-
$kendo-checkbox-line-height: calc( #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width} ) !default;
|
|
6293
|
-
|
|
6294
|
-
/// The background of checkbox.
|
|
6295
|
-
/// @group checkbox
|
|
6296
|
-
$kendo-checkbox-bg: $white !default;
|
|
6297
|
-
/// The background of checkbox.
|
|
6293
|
+
$kendo-checkbox-bg: $component-bg !default;
|
|
6294
|
+
/// Color of checkbox.
|
|
6298
6295
|
/// @group checkbox
|
|
6299
|
-
$kendo-checkbox-text:
|
|
6300
|
-
///
|
|
6296
|
+
$kendo-checkbox-text: null !default;
|
|
6297
|
+
/// Border color of checkbox.
|
|
6301
6298
|
/// @group checkbox
|
|
6302
|
-
$kendo-checkbox-border: $
|
|
6299
|
+
$kendo-checkbox-border: $component-border !default;
|
|
6303
6300
|
|
|
6304
|
-
///
|
|
6301
|
+
/// Background color of hovered checkbox.
|
|
6305
6302
|
/// @group checkbox
|
|
6306
6303
|
$kendo-checkbox-hover-bg: null !default;
|
|
6307
|
-
///
|
|
6304
|
+
/// Color of hovered checkbox.
|
|
6308
6305
|
/// @group checkbox
|
|
6309
6306
|
$kendo-checkbox-hover-text: null !default;
|
|
6310
|
-
///
|
|
6307
|
+
/// Border color of hovered checkbox.
|
|
6311
6308
|
/// @group checkbox
|
|
6312
6309
|
$kendo-checkbox-hover-border: null !default;
|
|
6313
6310
|
|
|
6314
|
-
///
|
|
6311
|
+
/// Background color of checked checkbox.
|
|
6315
6312
|
/// @group checkbox
|
|
6316
6313
|
$kendo-checkbox-checked-bg: $primary !default;
|
|
6317
|
-
///
|
|
6314
|
+
/// Color of checked checkbox.
|
|
6318
6315
|
/// @group checkbox
|
|
6319
6316
|
$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
|
|
6320
|
-
///
|
|
6317
|
+
/// Border color of checked checkbox.
|
|
6321
6318
|
/// @group checkbox
|
|
6322
6319
|
$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
|
|
6323
6320
|
|
|
6324
|
-
///
|
|
6321
|
+
/// Background color of indeterminate checkbox.
|
|
6325
6322
|
/// @group checkbox
|
|
6326
6323
|
$kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
|
|
6327
|
-
///
|
|
6324
|
+
/// Color of indeterminate checkbox.
|
|
6328
6325
|
/// @group checkbox
|
|
6329
6326
|
$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-bg !default;
|
|
6330
|
-
///
|
|
6327
|
+
/// Border color of indeterminate checkbox.
|
|
6331
6328
|
/// @group checkbox
|
|
6332
6329
|
$kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;
|
|
6333
6330
|
|
|
6334
|
-
///
|
|
6331
|
+
/// Border color of focused checkbox.
|
|
6335
6332
|
/// @group checkbox
|
|
6336
6333
|
$kendo-checkbox-focus-border: null !default;
|
|
6337
|
-
///
|
|
6334
|
+
/// Box shadow of focused checkbox.
|
|
6338
6335
|
/// @group checkbox
|
|
6339
|
-
$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(
|
|
6340
|
-
///
|
|
6336
|
+
$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
|
|
6337
|
+
/// Border color of focused and checked checkbox.
|
|
6341
6338
|
/// @group checkbox
|
|
6342
6339
|
$kendo-checkbox-focus-checked-border: null !default;
|
|
6343
|
-
///
|
|
6340
|
+
/// Box shadow of focused and checked checkbox.
|
|
6344
6341
|
/// @group checkbox
|
|
6345
6342
|
$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
|
|
6346
6343
|
|
|
6347
|
-
///
|
|
6344
|
+
/// Background color of disabled checkbox.
|
|
6348
6345
|
/// @group checkbox
|
|
6349
6346
|
$kendo-checkbox-disabled-bg: null !default;
|
|
6350
|
-
///
|
|
6347
|
+
/// Color of disabled checkbox.
|
|
6351
6348
|
/// @group checkbox
|
|
6352
6349
|
$kendo-checkbox-disabled-text: null !default;
|
|
6353
|
-
///
|
|
6350
|
+
/// Border color of disabled checkbox.
|
|
6354
6351
|
/// @group checkbox
|
|
6355
6352
|
$kendo-checkbox-disabled-border: null !default;
|
|
6356
6353
|
|
|
6357
|
-
///
|
|
6354
|
+
/// Background color of disabled and checked checkbox.
|
|
6358
6355
|
/// @group checkbox
|
|
6359
6356
|
$kendo-checkbox-disabled-checked-bg: null !default;
|
|
6360
|
-
///
|
|
6357
|
+
/// Color of disabled and checked checkbox.
|
|
6361
6358
|
/// @group checkbox
|
|
6362
6359
|
$kendo-checkbox-disabled-checked-text: null !default;
|
|
6363
|
-
///
|
|
6360
|
+
/// Border color of disabled and checked checkbox.
|
|
6364
6361
|
/// @group checkbox
|
|
6365
6362
|
$kendo-checkbox-disabled-checked-border: null !default;
|
|
6366
6363
|
|
|
6367
|
-
///
|
|
6364
|
+
/// Background color of invalid checkbox.
|
|
6368
6365
|
/// @group checkbox
|
|
6369
6366
|
$kendo-checkbox-invalid-bg: null !default;
|
|
6370
|
-
///
|
|
6367
|
+
/// Color of invalid checkbox.
|
|
6371
6368
|
/// @group checkbox
|
|
6372
6369
|
$kendo-checkbox-invalid-text: $invalid-text !default;
|
|
6373
|
-
///
|
|
6370
|
+
/// Border color of invalid checkbox.
|
|
6374
6371
|
/// @group checkbox
|
|
6375
6372
|
$kendo-checkbox-invalid-border: $invalid-border !default;
|
|
6376
6373
|
|
|
6377
6374
|
|
|
6378
6375
|
// Checkbox indicator
|
|
6379
6376
|
|
|
6380
|
-
///
|
|
6377
|
+
/// Type of checkbox indicator.
|
|
6381
6378
|
/// @group checkbox
|
|
6382
|
-
$kendo-checkbox-
|
|
6379
|
+
$kendo-checkbox-indicator-type: image !default;
|
|
6383
6380
|
|
|
6384
|
-
///
|
|
6381
|
+
/// Glyph font family of checkbox indicator.
|
|
6385
6382
|
/// @group checkbox
|
|
6386
6383
|
$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
|
|
6387
|
-
///
|
|
6384
|
+
/// Glyph of checkbox indicator.
|
|
6388
6385
|
/// @group checkbox
|
|
6389
6386
|
$kendo-checkbox-checked-glyph: "\e118" !default;
|
|
6390
|
-
///
|
|
6387
|
+
/// Glyph of indeterminate checkbox indicator.
|
|
6391
6388
|
/// @group checkbox
|
|
6392
6389
|
$kendo-checkbox-indeterminate-glyph: "\e121" !default;
|
|
6393
6390
|
|
|
6394
|
-
///
|
|
6391
|
+
/// Image of checked checkbox indicator.
|
|
6395
6392
|
/// @group checkbox
|
|
6396
|
-
$kendo-checkbox-checked-image:
|
|
6397
|
-
///
|
|
6393
|
+
$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
|
|
6394
|
+
/// Image image of checked checkbox indicator.
|
|
6398
6395
|
/// @group checkbox
|
|
6399
|
-
$kendo-checkbox-indeterminate-image:
|
|
6396
|
+
$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
|
|
6400
6397
|
|
|
6401
6398
|
|
|
6402
6399
|
// Checkbox label
|
|
@@ -6408,36 +6405,25 @@ $kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
|
|
|
6408
6405
|
|
|
6409
6406
|
// Checkbox list
|
|
6410
6407
|
|
|
6411
|
-
///
|
|
6408
|
+
/// Spacing between items of horizontal checkbox list.
|
|
6412
6409
|
/// @group checkbox
|
|
6413
6410
|
$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
|
|
6414
|
-
///
|
|
6411
|
+
/// Horizontal padding of checkbox list items.
|
|
6415
6412
|
/// @group checkbox
|
|
6416
6413
|
$kendo-checkbox-list-item-padding-x: 0px !default;
|
|
6417
|
-
///
|
|
6414
|
+
/// Vertical padding of checkbox list items.
|
|
6418
6415
|
/// @group checkbox
|
|
6419
6416
|
$kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
|
|
6420
6417
|
|
|
6421
6418
|
|
|
6422
6419
|
// Checkbox ripple
|
|
6423
6420
|
|
|
6424
|
-
///
|
|
6421
|
+
/// Background color of checkbox ripple.
|
|
6425
6422
|
/// @group checkbox
|
|
6426
|
-
$kendo-checkbox-ripple-
|
|
6427
|
-
|
|
6428
|
-
md: (map-get( $kendo-checkbox-sizes, "md" ) * 3),
|
|
6429
|
-
lg: (map-get( $kendo-checkbox-sizes, "lg" ) * 3)
|
|
6430
|
-
) !default;
|
|
6431
|
-
/// The ripple margin of checkbox.
|
|
6432
|
-
/// @group checkbox
|
|
6433
|
-
$kendo-checkbox-ripple-margin: (
|
|
6434
|
-
sm: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "sm" )} + 2 * #{$kendo-checkbox-border-width})),
|
|
6435
|
-
md: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "md" )} + 2 * #{$kendo-checkbox-border-width})),
|
|
6436
|
-
lg: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "lg" )} + 2 * #{$kendo-checkbox-border-width}))
|
|
6437
|
-
) !default;
|
|
6438
|
-
/// The ripple opacity of checkbox.
|
|
6423
|
+
$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
|
|
6424
|
+
/// Opacity of checkbox ripple.
|
|
6439
6425
|
/// @group checkbox
|
|
6440
|
-
$kendo-checkbox-ripple-opacity: .
|
|
6426
|
+
$kendo-checkbox-ripple-opacity: .25 !default;
|
|
6441
6427
|
|
|
6442
6428
|
// #endregion
|
|
6443
6429
|
// #region @import "_layout.scss"; -> packages/classic/scss/checkbox/_layout.scss
|
|
@@ -6463,51 +6449,20 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6463
6449
|
-webkit-appearance: none;
|
|
6464
6450
|
}
|
|
6465
6451
|
|
|
6466
|
-
@each $name, $size in $kendo-checkbox-sizes {
|
|
6467
|
-
// Checkbox sizes
|
|
6468
|
-
.k-checkbox-#{$name} {
|
|
6469
|
-
width: $size;
|
|
6470
|
-
height: $size;
|
|
6471
|
-
|
|
6472
|
-
+ .k-checkbox-label {
|
|
6473
|
-
|
|
6474
|
-
.k-ripple {
|
|
6475
|
-
top: ($size / 2);
|
|
6476
|
-
left: ($size / 2);
|
|
6477
|
-
width: ($size * 5 / 2);
|
|
6478
|
-
height: ($size * 5 / 2);
|
|
6479
|
-
}
|
|
6480
|
-
}
|
|
6481
|
-
}
|
|
6482
|
-
|
|
6483
6452
|
|
|
6484
|
-
|
|
6485
|
-
|
|
6486
|
-
|
|
6487
|
-
|
|
6488
|
-
|
|
6489
|
-
|
|
6490
|
-
|
|
6491
|
-
|
|
6492
|
-
|
|
6493
|
-
|
|
6494
|
-
|
|
6495
|
-
|
|
6496
|
-
|
|
6497
|
-
left: 50%;
|
|
6498
|
-
}
|
|
6499
|
-
|
|
6500
|
-
@if $kendo-checkbox-icon-type == "marker" {
|
|
6501
|
-
content: "";
|
|
6502
|
-
width: ($size - map-get( $spacing, 1 ));
|
|
6503
|
-
height: ($size - map-get( $spacing, 1 ));
|
|
6504
|
-
background-color: currentColor;
|
|
6505
|
-
transform: scale(0) translate(-50%, -50%);
|
|
6506
|
-
overflow: hidden;
|
|
6507
|
-
position: absolute;
|
|
6508
|
-
top: 50%;
|
|
6509
|
-
left: 50%;
|
|
6510
|
-
}
|
|
6453
|
+
// Checkbox indicator
|
|
6454
|
+
.k-checkbox::before {
|
|
6455
|
+
@if $kendo-checkbox-indicator-type == "glyph" {
|
|
6456
|
+
content: $kendo-checkbox-checked-glyph;
|
|
6457
|
+
width: 1em;
|
|
6458
|
+
height: 1em;
|
|
6459
|
+
font-family: $kendo-checkbox-glyph-font-family;
|
|
6460
|
+
line-height: 1;
|
|
6461
|
+
transform: translate(-50%, -50%) scale(0);
|
|
6462
|
+
overflow: hidden;
|
|
6463
|
+
position: absolute;
|
|
6464
|
+
top: 50%;
|
|
6465
|
+
left: 50%;
|
|
6511
6466
|
}
|
|
6512
6467
|
}
|
|
6513
6468
|
|
|
@@ -6515,52 +6470,37 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6515
6470
|
// Checked state
|
|
6516
6471
|
.k-checkbox:checked,
|
|
6517
6472
|
.k-checkbox.k-checked {
|
|
6518
|
-
@if $kendo-checkbox-
|
|
6473
|
+
@if $kendo-checkbox-indicator-type == "image" {
|
|
6519
6474
|
background-image: $kendo-checkbox-checked-image;
|
|
6520
6475
|
}
|
|
6521
6476
|
|
|
6522
|
-
@if $kendo-checkbox-
|
|
6477
|
+
@if $kendo-checkbox-indicator-type == "glyph" {
|
|
6523
6478
|
&::before {
|
|
6524
|
-
transform:
|
|
6525
|
-
}
|
|
6526
|
-
}
|
|
6527
|
-
|
|
6528
|
-
@if $kendo-checkbox-icon-type == "marker" {
|
|
6529
|
-
&::before {
|
|
6530
|
-
transform: scale(1) translate(-50%, -50%);
|
|
6479
|
+
transform: translate(-50%, -50%) scale(1);
|
|
6531
6480
|
}
|
|
6532
6481
|
}
|
|
6533
6482
|
}
|
|
6534
6483
|
|
|
6484
|
+
|
|
6535
6485
|
// Indeterminate state
|
|
6536
6486
|
.k-checkbox:indeterminate,
|
|
6537
6487
|
.k-checkbox.k-indeterminate {
|
|
6538
|
-
@if $kendo-checkbox-
|
|
6488
|
+
@if $kendo-checkbox-indicator-type == "image" {
|
|
6539
6489
|
background-image: $kendo-checkbox-indeterminate-image;
|
|
6540
6490
|
}
|
|
6541
6491
|
|
|
6542
|
-
@if $kendo-checkbox-
|
|
6492
|
+
@if $kendo-checkbox-indicator-type == "glyph" {
|
|
6543
6493
|
&::before {
|
|
6544
6494
|
content: $kendo-checkbox-indeterminate-glyph;
|
|
6545
6495
|
transform: scale(1) translate(-50%, -50%);
|
|
6546
6496
|
}
|
|
6547
6497
|
}
|
|
6548
|
-
|
|
6549
|
-
@if $kendo-checkbox-icon-type == "marker" {
|
|
6550
|
-
&::before {
|
|
6551
|
-
width: $kendo-checkbox-maker-indeterminate-width;
|
|
6552
|
-
height: $kendo-checkbox-marker-indeterminate-height;
|
|
6553
|
-
transform: scale(1) translate(-50%, -50%);
|
|
6554
|
-
}
|
|
6555
|
-
}
|
|
6556
6498
|
}
|
|
6557
6499
|
|
|
6558
6500
|
|
|
6559
6501
|
// Disabled state
|
|
6560
6502
|
.k-checkbox:disabled,
|
|
6561
|
-
.k-checkbox.k-disabled
|
|
6562
|
-
.k-checkbox:disabled + .k-checkbox-label,
|
|
6563
|
-
.k-checkbox.k-disabled + .k-checkbox-label {
|
|
6503
|
+
.k-checkbox.k-disabled {
|
|
6564
6504
|
@include disabled( $disabled-styling );
|
|
6565
6505
|
}
|
|
6566
6506
|
|
|
@@ -6572,6 +6512,9 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6572
6512
|
flex-flow: row nowrap;
|
|
6573
6513
|
gap: 0;
|
|
6574
6514
|
align-items: center;
|
|
6515
|
+
align-self: flex-start;
|
|
6516
|
+
vertical-align: middle;
|
|
6517
|
+
position: relative;
|
|
6575
6518
|
|
|
6576
6519
|
&::before {
|
|
6577
6520
|
content: "\200b";
|
|
@@ -6588,55 +6531,24 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6588
6531
|
.k-checkbox-label {
|
|
6589
6532
|
margin: 0;
|
|
6590
6533
|
padding: 0;
|
|
6591
|
-
line-height: $kendo-checkbox-line-height;
|
|
6592
6534
|
display: inline-flex;
|
|
6593
6535
|
align-items: flex-start;
|
|
6536
|
+
gap: $kendo-checkbox-label-margin-x;
|
|
6594
6537
|
vertical-align: middle;
|
|
6595
6538
|
position: relative;
|
|
6596
6539
|
cursor: pointer;
|
|
6597
6540
|
|
|
6598
|
-
.k-label {
|
|
6599
|
-
cursor: pointer;
|
|
6600
|
-
}
|
|
6601
|
-
|
|
6602
6541
|
.k-ripple {
|
|
6603
|
-
right: auto;
|
|
6604
|
-
bottom: auto;
|
|
6605
|
-
transform: translate(-50%, -50%);
|
|
6606
|
-
border-radius: 50%;
|
|
6607
|
-
|
|
6608
6542
|
// Hide ripple temporarily
|
|
6609
6543
|
visibility: hidden !important; // sass-lint:disable-line no-important
|
|
6610
6544
|
}
|
|
6611
|
-
|
|
6612
|
-
.k-ripple-blob {
|
|
6613
|
-
// sass-lint:disable-block no-important
|
|
6614
|
-
// use !important until ripple can apply these styles from the script
|
|
6615
|
-
top: 50% !important;
|
|
6616
|
-
left: 50% !important;
|
|
6617
|
-
width: 200% !important;
|
|
6618
|
-
height: 200% !important;
|
|
6619
|
-
}
|
|
6620
|
-
}
|
|
6621
|
-
.k-checkbox + .k-checkbox-label {
|
|
6622
|
-
display: inline;
|
|
6623
6545
|
}
|
|
6546
|
+
.k-checkbox + .k-label,
|
|
6547
|
+
.k-checkbox-wrap + .k-label,
|
|
6624
6548
|
.k-checkbox + .k-checkbox-label,
|
|
6625
|
-
.k-checkbox-
|
|
6626
|
-
margin-left: $kendo-checkbox-label-margin-x;
|
|
6627
|
-
}
|
|
6628
|
-
.k-checkbox-label > .k-checkbox {
|
|
6629
|
-
margin-right: $kendo-checkbox-label-margin-x;
|
|
6630
|
-
flex-shrink: 0;
|
|
6631
|
-
}
|
|
6632
|
-
kendo-label.k-checkbox-label > .k-checkbox:last-child {
|
|
6633
|
-
margin-right: 0;
|
|
6634
|
-
}
|
|
6635
|
-
kendo-label.k-checkbox-label > .k-label:first-child {
|
|
6636
|
-
margin-right: $kendo-checkbox-label-margin-x;
|
|
6637
|
-
}
|
|
6638
|
-
kendo-label.k-checkbox-label > .k-label {
|
|
6549
|
+
.k-checkbox-wrap + .k-checkbox-label {
|
|
6639
6550
|
display: inline;
|
|
6551
|
+
margin-inline-start: $kendo-checkbox-label-margin-x;
|
|
6640
6552
|
}
|
|
6641
6553
|
|
|
6642
6554
|
|
|
@@ -6644,9 +6556,6 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6644
6556
|
.k-checkbox-label:empty {
|
|
6645
6557
|
display: none !important; // sass-lint:disable-line no-important
|
|
6646
6558
|
}
|
|
6647
|
-
|
|
6648
|
-
|
|
6649
|
-
// Label with no text
|
|
6650
6559
|
.k-checkbox-label.k-no-text {
|
|
6651
6560
|
min-width: 1px;
|
|
6652
6561
|
}
|
|
@@ -6671,7 +6580,7 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6671
6580
|
gap: map-get( $spacing, 1 );
|
|
6672
6581
|
|
|
6673
6582
|
.k-checkbox-label {
|
|
6674
|
-
|
|
6583
|
+
margin: 0;
|
|
6675
6584
|
}
|
|
6676
6585
|
}
|
|
6677
6586
|
.k-checkbox-list-horizontal,
|
|
@@ -6682,46 +6591,55 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6682
6591
|
}
|
|
6683
6592
|
|
|
6684
6593
|
|
|
6685
|
-
//
|
|
6686
|
-
|
|
6687
|
-
.k-checkbox
|
|
6688
|
-
|
|
6689
|
-
|
|
6690
|
-
|
|
6691
|
-
|
|
6692
|
-
|
|
6693
|
-
|
|
6694
|
-
|
|
6594
|
+
// Ripple
|
|
6595
|
+
.k-ripple-container {
|
|
6596
|
+
.k-checkbox::after {
|
|
6597
|
+
content: "";
|
|
6598
|
+
display: block;
|
|
6599
|
+
position: absolute;
|
|
6600
|
+
left: 50%;
|
|
6601
|
+
top: 50%;
|
|
6602
|
+
border-radius: 100%;
|
|
6603
|
+
z-index: -1;
|
|
6604
|
+
transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
|
|
6605
|
+
transform: translate(-50%, -50%) scale(0);
|
|
6606
|
+
transform-origin: center center;
|
|
6695
6607
|
}
|
|
6696
|
-
|
|
6697
|
-
|
|
6608
|
+
|
|
6609
|
+
.k-checkbox:focus,
|
|
6610
|
+
.k-checkbox.k-focus {
|
|
6611
|
+
box-shadow: none !important; // sass-lint:disable-line no-important
|
|
6612
|
+
|
|
6613
|
+
&::after {
|
|
6614
|
+
transform: translate(-50%, -50%) scale(1);
|
|
6615
|
+
}
|
|
6698
6616
|
}
|
|
6699
|
-
|
|
6700
|
-
|
|
6701
|
-
|
|
6617
|
+
|
|
6618
|
+
.k-checkbox:disabled::after,
|
|
6619
|
+
.k-checkbox.k-disabled::after {
|
|
6620
|
+
display: none;
|
|
6702
6621
|
}
|
|
6703
6622
|
}
|
|
6704
6623
|
|
|
6705
|
-
.k-ripple-container {
|
|
6706
|
-
@each $name, $size in $kendo-checkbox-sizes {
|
|
6707
|
-
.k-checkbox-#{$name}::after {
|
|
6708
|
-
content: "";
|
|
6709
|
-
display: block;
|
|
6710
|
-
position: absolute;
|
|
6711
|
-
left: 0;
|
|
6712
|
-
top: 0;
|
|
6713
|
-
width: map-get( $kendo-checkbox-ripple-size, $name );
|
|
6714
|
-
height: map-get( $kendo-checkbox-ripple-size, $name );
|
|
6715
|
-
margin-left: map-get( $kendo-checkbox-ripple-margin, $name );
|
|
6716
|
-
margin-top: map-get( $kendo-checkbox-ripple-margin, $name );
|
|
6717
|
-
border-radius: 100%;
|
|
6718
|
-
z-index: 1;
|
|
6719
|
-
transform: scale(0);
|
|
6720
|
-
}
|
|
6721
6624
|
|
|
6722
|
-
|
|
6723
|
-
|
|
6724
|
-
|
|
6625
|
+
// Checkbox size
|
|
6626
|
+
@each $size, $size-props in $kendo-checkbox-sizes {
|
|
6627
|
+
$_size: map-get( $size-props, size );
|
|
6628
|
+
$_glyph-size: map-get( $size-props, glyph-size );
|
|
6629
|
+
$_ripple-size: map-get( $size-props, ripple-size );
|
|
6630
|
+
|
|
6631
|
+
.k-checkbox-#{$size} {
|
|
6632
|
+
width: $_size;
|
|
6633
|
+
height: $_size;
|
|
6634
|
+
|
|
6635
|
+
&::before {
|
|
6636
|
+
font-size: $_glyph-size;
|
|
6637
|
+
}
|
|
6638
|
+
}
|
|
6639
|
+
.k-ripple-container {
|
|
6640
|
+
.k-checkbox-#{size}::after {
|
|
6641
|
+
width: $_ripple-size;
|
|
6642
|
+
height: $_ripple-size;
|
|
6725
6643
|
}
|
|
6726
6644
|
}
|
|
6727
6645
|
}
|
|
@@ -6733,7 +6651,7 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6733
6651
|
// #endregion
|
|
6734
6652
|
// #region @import "_theme.scss"; -> packages/classic/scss/checkbox/_theme.scss
|
|
6735
6653
|
// #region @import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/checkbox/_theme.scss
|
|
6736
|
-
@include exports("checkbox/theme") {
|
|
6654
|
+
@include exports( "checkbox/theme" ) {
|
|
6737
6655
|
|
|
6738
6656
|
// Checkbox
|
|
6739
6657
|
.k-checkbox {
|
|
@@ -6813,20 +6731,22 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6813
6731
|
|
|
6814
6732
|
|
|
6815
6733
|
// Invalid
|
|
6816
|
-
.k-checkbox:invalid,
|
|
6817
6734
|
.k-checkbox.k-invalid {
|
|
6818
6735
|
@include fill( $border: $kendo-checkbox-invalid-border );
|
|
6819
6736
|
}
|
|
6820
|
-
.k-checkbox:invalid + .k-checkbox-label,
|
|
6821
6737
|
.k-checkbox.k-invalid + .k-checkbox-label {
|
|
6822
6738
|
@include fill( $color: $kendo-checkbox-invalid-text );
|
|
6823
6739
|
}
|
|
6824
6740
|
|
|
6825
6741
|
|
|
6826
6742
|
// Ripple
|
|
6743
|
+
.k-checkbox-wrap .k-ripple-blob {
|
|
6744
|
+
color: $kendo-checkbox-ripple-bg;
|
|
6745
|
+
opacity: $kendo-checkbox-ripple-opacity;
|
|
6746
|
+
}
|
|
6827
6747
|
.k-ripple-container {
|
|
6828
6748
|
.k-checkbox::after {
|
|
6829
|
-
background: $kendo-checkbox-
|
|
6749
|
+
background: $kendo-checkbox-ripple-bg;
|
|
6830
6750
|
opacity: $kendo-checkbox-ripple-opacity;
|
|
6831
6751
|
}
|
|
6832
6752
|
}
|
|
@@ -6886,6 +6806,10 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6886
6806
|
flex: none;
|
|
6887
6807
|
overflow: hidden;
|
|
6888
6808
|
text-overflow: ellipsis;
|
|
6809
|
+
cursor: pointer;
|
|
6810
|
+
}
|
|
6811
|
+
.k-list-optionlabel {
|
|
6812
|
+
@extend .k-list-group-sticky-header;
|
|
6889
6813
|
}
|
|
6890
6814
|
|
|
6891
6815
|
|
|
@@ -6929,10 +6853,6 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6929
6853
|
transition-duration: 200ms;
|
|
6930
6854
|
transition-timing-function: ease;
|
|
6931
6855
|
|
|
6932
|
-
.k-checkbox-wrap {
|
|
6933
|
-
align-self: flex-start;
|
|
6934
|
-
}
|
|
6935
|
-
|
|
6936
6856
|
&.k-first::before {
|
|
6937
6857
|
content: "";
|
|
6938
6858
|
border-width: 1px 0 0;
|
|
@@ -6943,9 +6863,6 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
6943
6863
|
right: 0;
|
|
6944
6864
|
}
|
|
6945
6865
|
}
|
|
6946
|
-
.k-list-optionlabel {
|
|
6947
|
-
@extend .k-list-item;
|
|
6948
|
-
}
|
|
6949
6866
|
|
|
6950
6867
|
|
|
6951
6868
|
// List group item
|
|
@@ -7072,6 +6989,12 @@ $kendo-checkbox-ripple-opacity: .3 !default;
|
|
|
7072
6989
|
white-space: normal;
|
|
7073
6990
|
}
|
|
7074
6991
|
|
|
6992
|
+
|
|
6993
|
+
// Alias
|
|
6994
|
+
.k-nodata {
|
|
6995
|
+
@extend .k-no-data !optional;
|
|
6996
|
+
}
|
|
6997
|
+
|
|
7075
6998
|
}
|
|
7076
6999
|
|
|
7077
7000
|
// #endregion
|
|
@@ -8029,24 +7952,21 @@ $kendo-button-border-width: 1px !default;
|
|
|
8029
7952
|
|
|
8030
7953
|
/// Border radius of the button.
|
|
8031
7954
|
/// @group button
|
|
8032
|
-
$kendo-button-border-radius:
|
|
8033
|
-
$kendo-button-border-radius-sm: ( map-get( $spacing, 1 ) / 4 ) !default;
|
|
8034
|
-
$kendo-button-border-radius-md: ( map-get( $spacing, 1 ) / 2 ) !default;
|
|
8035
|
-
$kendo-button-border-radius-lg: map-get( $spacing, 1 ) !default;
|
|
7955
|
+
$kendo-button-border-radius: null !default;
|
|
8036
7956
|
|
|
8037
7957
|
/// Horizontal padding of the button.
|
|
8038
7958
|
/// @group button
|
|
8039
7959
|
$kendo-button-padding-x: map-get( $spacing, 2 ) !default;
|
|
8040
|
-
$kendo-button-padding-x-sm: map-get( $spacing,
|
|
7960
|
+
$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
|
|
8041
7961
|
$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
|
|
8042
|
-
$kendo-button-padding-x-lg: map-get( $spacing,
|
|
7962
|
+
$kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
|
|
8043
7963
|
|
|
8044
7964
|
/// Vertical padding of the button.
|
|
8045
7965
|
/// @group button
|
|
8046
|
-
$kendo-button-padding-y:
|
|
8047
|
-
$kendo-button-padding-y-sm: $
|
|
8048
|
-
$kendo-button-padding-y-md:
|
|
8049
|
-
$kendo-button-padding-y-lg: $
|
|
7966
|
+
$kendo-button-padding-y: map-get( $spacing, 1 ) !default;
|
|
7967
|
+
$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
|
|
7968
|
+
$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
|
|
7969
|
+
$kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
|
|
8050
7970
|
|
|
8051
7971
|
/// Font family of the button.
|
|
8052
7972
|
/// @group button
|
|
@@ -8054,17 +7974,17 @@ $kendo-button-font-family: $font-family !default;
|
|
|
8054
7974
|
|
|
8055
7975
|
/// Font sizes of the button.
|
|
8056
7976
|
/// @group button
|
|
8057
|
-
$kendo-button-font-size: $font-size !default;
|
|
8058
|
-
$kendo-button-font-size-sm: $font-size-
|
|
8059
|
-
$kendo-button-font-size-md: $font-size !default;
|
|
8060
|
-
$kendo-button-font-size-lg: $font-size-
|
|
7977
|
+
$kendo-button-font-size: $font-size-md !default;
|
|
7978
|
+
$kendo-button-font-size-sm: $font-size-md !default;
|
|
7979
|
+
$kendo-button-font-size-md: $font-size-md !default;
|
|
7980
|
+
$kendo-button-font-size-lg: $font-size-md !default;
|
|
8061
7981
|
|
|
8062
7982
|
/// Line heights used along with $font-size.
|
|
8063
7983
|
/// @group button
|
|
8064
|
-
$kendo-button-line-height: $line-height !default;
|
|
8065
|
-
$kendo-button-line-height-sm: $line-height-
|
|
8066
|
-
$kendo-button-line-height-md: $line-height !default;
|
|
8067
|
-
$kendo-button-line-height-lg: $line-height-
|
|
7984
|
+
$kendo-button-line-height: $line-height-md !default;
|
|
7985
|
+
$kendo-button-line-height-sm: $line-height-md !default;
|
|
7986
|
+
$kendo-button-line-height-md: $line-height-md !default;
|
|
7987
|
+
$kendo-button-line-height-lg: $line-height-md !default;
|
|
8068
7988
|
|
|
8069
7989
|
/// Calculated height of the button.
|
|
8070
7990
|
/// @group button
|
|
@@ -8074,9 +7994,15 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
|
|
|
8074
7994
|
/// @group button
|
|
8075
7995
|
$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
|
|
8076
7996
|
|
|
7997
|
+
$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
|
|
7998
|
+
$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
|
|
7999
|
+
|
|
8077
8000
|
/// Theme colors map for the button.
|
|
8078
8001
|
/// @group button
|
|
8079
|
-
$kendo-button-theme-colors: map-merge(
|
|
8002
|
+
$kendo-button-theme-colors: map-merge(
|
|
8003
|
+
$theme-colors,
|
|
8004
|
+
( "base": $base-bg )
|
|
8005
|
+
) !default;
|
|
8080
8006
|
|
|
8081
8007
|
/// The base background of the button.
|
|
8082
8008
|
/// @group button
|
|
@@ -8102,7 +8028,7 @@ $kendo-button-hover-bg: try-shade( $kendo-button-bg, 1 ) !default;
|
|
|
8102
8028
|
$kendo-button-hover-text: null !default;
|
|
8103
8029
|
/// The base border color of hovered button.
|
|
8104
8030
|
/// @group button
|
|
8105
|
-
$kendo-button-hover-border: try-shade( $kendo-button-
|
|
8031
|
+
$kendo-button-hover-border: try-shade( $kendo-button-bg, 3 ) !default;
|
|
8106
8032
|
/// The base background gradient of hovered button.
|
|
8107
8033
|
/// @group button
|
|
8108
8034
|
$kendo-button-hover-gradient: null !default;
|
|
@@ -8118,7 +8044,7 @@ $kendo-button-active-bg: try-shade( $kendo-button-bg, 2 ) !default;
|
|
|
8118
8044
|
$kendo-button-active-text: null !default;
|
|
8119
8045
|
/// The base border color of active button.
|
|
8120
8046
|
/// @group button
|
|
8121
|
-
$kendo-button-active-border: try-shade( $kendo-button-
|
|
8047
|
+
$kendo-button-active-border: try-shade( $kendo-button-bg, 4 ) !default;
|
|
8122
8048
|
/// The base background gradient of active button.
|
|
8123
8049
|
/// @group button
|
|
8124
8050
|
$kendo-button-active-gradient: null !default;
|
|
@@ -8128,14 +8054,14 @@ $kendo-button-active-shadow: null !default;
|
|
|
8128
8054
|
|
|
8129
8055
|
/// The base background color of selected button.
|
|
8130
8056
|
/// @group button
|
|
8131
|
-
$kendo-button-selected-bg: $
|
|
8132
|
-
/// The
|
|
8057
|
+
$kendo-button-selected-bg: $primary !default;
|
|
8058
|
+
/// The text color of selected buttons.
|
|
8133
8059
|
/// @group button
|
|
8134
|
-
$kendo-button-selected-text: $kendo-button-
|
|
8135
|
-
/// The
|
|
8060
|
+
$kendo-button-selected-text: contrast-wcag( $kendo-button-selected-bg ) !default;
|
|
8061
|
+
/// The border color of selected buttons.
|
|
8136
8062
|
/// @group button
|
|
8137
|
-
$kendo-button-selected-border: $kendo-button-
|
|
8138
|
-
/// The
|
|
8063
|
+
$kendo-button-selected-border: $kendo-button-selected-bg !default;
|
|
8064
|
+
/// The background gradient of selected buttons.
|
|
8139
8065
|
/// @group button
|
|
8140
8066
|
$kendo-button-selected-gradient: $kendo-button-active-gradient !default;
|
|
8141
8067
|
/// The base shadow of selected button.
|
|
@@ -8174,6 +8100,35 @@ $kendo-button-disabled-gradient: null !default;
|
|
|
8174
8100
|
/// @group button
|
|
8175
8101
|
$kendo-button-disabled-shadow: null !default;
|
|
8176
8102
|
|
|
8103
|
+
// Solid button
|
|
8104
|
+
$kendo-solid-button-gradient: $base-gradient !default;
|
|
8105
|
+
$kendo-solid-button-shade-function: "try-shade";
|
|
8106
|
+
$kendo-solid-button-shade-text-amount: 0 !default;
|
|
8107
|
+
$kendo-solid-button-shade-bg-amount: 0 !default;
|
|
8108
|
+
$kendo-solid-button-shade-border-amount: 2 !default;
|
|
8109
|
+
$kendo-solid-button-hover-shade-text-amount: null !default;
|
|
8110
|
+
$kendo-solid-button-hover-shade-bg-amount: 1 !default;
|
|
8111
|
+
$kendo-solid-button-hover-shade-border-amount: 3 !default;
|
|
8112
|
+
$kendo-solid-button-active-shade-text-amount: null !default;
|
|
8113
|
+
$kendo-solid-button-active-shade-bg-amount: 2 !default;
|
|
8114
|
+
$kendo-solid-button-active-shade-border-amount: 4 !default;
|
|
8115
|
+
$kendo-solid-button-shadow: true !default;
|
|
8116
|
+
$kendo-solid-button-shadow-blur: 4px !default;
|
|
8117
|
+
$kendo-solid-button-shadow-spread: 0px !default;
|
|
8118
|
+
$kendo-solid-button-shadow-opacity: .75 !default;
|
|
8119
|
+
|
|
8120
|
+
// Outline button
|
|
8121
|
+
$kendo-outline-button-shadow: true !default;
|
|
8122
|
+
$kendo-outline-button-shadow-blur: 4px !default;
|
|
8123
|
+
$kendo-outline-button-shadow-spread: 0px !default;
|
|
8124
|
+
$kendo-outline-button-shadow-opacity: .75 !default;
|
|
8125
|
+
|
|
8126
|
+
// Link button
|
|
8127
|
+
$kendo-link-button-shadow: true !default;
|
|
8128
|
+
$kendo-link-button-shadow-blur: 4px !default;
|
|
8129
|
+
$kendo-link-button-shadow-spread: 0px !default;
|
|
8130
|
+
$kendo-link-button-shadow-opacity: .75 !default;
|
|
8131
|
+
|
|
8177
8132
|
/// The overlay opacity of hovered flat button. Used to create background for the flat button.
|
|
8178
8133
|
/// @group button
|
|
8179
8134
|
$kendo-flat-button-hover-opacity: .08 !default;
|
|
@@ -8189,11 +8144,7 @@ $kendo-flat-button-selected-opacity: .2 !default;
|
|
|
8189
8144
|
|
|
8190
8145
|
/// The color transition of the flat button.
|
|
8191
8146
|
/// @group button
|
|
8192
|
-
$kendo-button-
|
|
8193
|
-
|
|
8194
|
-
/// The base shadow of focused button group.
|
|
8195
|
-
/// @group button
|
|
8196
|
-
$kendo-button-group-focus-shadow: null !default;
|
|
8147
|
+
$kendo-button-transition: color .2s ease-in-out !default;
|
|
8197
8148
|
|
|
8198
8149
|
// #endregion
|
|
8199
8150
|
// #region @import "_layout.scss"; -> packages/classic/scss/button/_layout.scss
|
|
@@ -8219,6 +8170,7 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
8219
8170
|
outline: none;
|
|
8220
8171
|
-webkit-appearance: none;
|
|
8221
8172
|
position: relative;
|
|
8173
|
+
transition: $kendo-button-transition;
|
|
8222
8174
|
|
|
8223
8175
|
&:disabled,
|
|
8224
8176
|
&.k-disabled {
|
|
@@ -8255,7 +8207,24 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
8255
8207
|
|
|
8256
8208
|
.k-button-text {}
|
|
8257
8209
|
|
|
8258
|
-
|
|
8210
|
+
|
|
8211
|
+
// Button arrow
|
|
8212
|
+
.k-button-arrow {
|
|
8213
|
+
padding-left: $kendo-button-arrow-padding-x;
|
|
8214
|
+
padding-right: $kendo-button-arrow-padding-x;
|
|
8215
|
+
flex: none;
|
|
8216
|
+
display: inline-flex;
|
|
8217
|
+
align-items: center;
|
|
8218
|
+
justify-content: center;
|
|
8219
|
+
}
|
|
8220
|
+
.k-button > .k-button-arrow {
|
|
8221
|
+
margin-inline-start: -$kendo-button-arrow-padding-x;
|
|
8222
|
+
margin-inline-end: -$kendo-button-padding-x;
|
|
8223
|
+
}
|
|
8224
|
+
.k-icon-button > .k-button-arrow {
|
|
8225
|
+
margin-inline-start: 0;
|
|
8226
|
+
margin-inline-end: -$kendo-button-padding-y;
|
|
8227
|
+
}
|
|
8259
8228
|
|
|
8260
8229
|
|
|
8261
8230
|
// Sizes
|
|
@@ -8301,15 +8270,13 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
8301
8270
|
}
|
|
8302
8271
|
|
|
8303
8272
|
|
|
8304
|
-
//
|
|
8305
|
-
.k-button-rectangle { }
|
|
8306
|
-
|
|
8273
|
+
// Button shape
|
|
8307
8274
|
.k-button-square {
|
|
8308
8275
|
aspect-ratio: 1;
|
|
8309
8276
|
}
|
|
8310
8277
|
|
|
8311
8278
|
|
|
8312
|
-
// Menu
|
|
8279
|
+
// Menu button
|
|
8313
8280
|
.k-menu-button,
|
|
8314
8281
|
.k-dropdown-button {
|
|
8315
8282
|
outline: 0;
|
|
@@ -8334,67 +8301,74 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
8334
8301
|
-webkit-touch-callout: none;
|
|
8335
8302
|
-webkit-tap-highlight-color: $rgba-transparent;
|
|
8336
8303
|
|
|
8337
|
-
.k-button
|
|
8338
|
-
@include border-radius( 0 );
|
|
8339
|
-
}
|
|
8340
|
-
|
|
8341
|
-
.k-button ~ .k-button {
|
|
8304
|
+
> .k-button + .k-button {
|
|
8342
8305
|
margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
|
|
8343
8306
|
}
|
|
8344
8307
|
|
|
8345
|
-
.k-button:hover,
|
|
8346
|
-
.k-button.k-hover,
|
|
8347
|
-
.k-button:
|
|
8348
|
-
.k-button.k-
|
|
8349
|
-
.k-button
|
|
8350
|
-
.k-button
|
|
8351
|
-
.k-button.k-
|
|
8308
|
+
> .k-button:hover,
|
|
8309
|
+
> .k-button.k-hover,
|
|
8310
|
+
> .k-button:focus,
|
|
8311
|
+
> .k-button.k-focus,
|
|
8312
|
+
> .k-button:active,
|
|
8313
|
+
> .k-button.k-active,
|
|
8314
|
+
> .k-button.k-selected {
|
|
8352
8315
|
z-index: 2;
|
|
8353
8316
|
}
|
|
8354
8317
|
|
|
8355
|
-
.k-
|
|
8356
|
-
|
|
8357
|
-
|
|
8318
|
+
.k-button:not(:first-child):not(:last-child) {
|
|
8319
|
+
border-start-end-radius: 0;
|
|
8320
|
+
border-end-end-radius: 0;
|
|
8321
|
+
border-start-start-radius: 0;
|
|
8322
|
+
border-end-start-radius: 0;
|
|
8323
|
+
}
|
|
8324
|
+
> .k-button:first-child:not(:only-child) {
|
|
8325
|
+
border-start-end-radius: 0;
|
|
8326
|
+
border-end-end-radius: 0;
|
|
8327
|
+
}
|
|
8328
|
+
> .k-button:last-child:not(:only-child) {
|
|
8329
|
+
border-start-start-radius: 0;
|
|
8330
|
+
border-end-start-radius: 0;
|
|
8358
8331
|
}
|
|
8359
|
-
|
|
8360
|
-
|
|
8361
|
-
|
|
8332
|
+
|
|
8333
|
+
&:disabled,
|
|
8334
|
+
&[disabled],
|
|
8335
|
+
&.k-disabled {
|
|
8336
|
+
opacity: 1;
|
|
8337
|
+
filter: none;
|
|
8362
8338
|
}
|
|
8363
8339
|
}
|
|
8364
8340
|
|
|
8365
8341
|
.k-button-group-stretched {
|
|
8366
|
-
|
|
8342
|
+
width: 100%;
|
|
8367
8343
|
|
|
8368
|
-
|
|
8369
|
-
display: inline-block;
|
|
8344
|
+
> * {
|
|
8370
8345
|
flex: 1 0 0%;
|
|
8371
8346
|
overflow: hidden;
|
|
8372
|
-
text-overflow: ellipsis;
|
|
8373
|
-
|
|
8374
|
-
> .k-icon {
|
|
8375
|
-
vertical-align: text-bottom;
|
|
8376
|
-
}
|
|
8377
8347
|
}
|
|
8378
8348
|
}
|
|
8379
8349
|
|
|
8380
8350
|
|
|
8381
8351
|
// Split button
|
|
8382
8352
|
.k-split-button {
|
|
8383
|
-
@include border-radius( 0 );
|
|
8384
8353
|
|
|
8385
|
-
|
|
8386
|
-
|
|
8387
|
-
|
|
8354
|
+
.k-split-button-arrow {
|
|
8355
|
+
padding: $kendo-button-arrow-padding-y $kendo-button-arrow-padding-x;
|
|
8356
|
+
width: auto;
|
|
8357
|
+
flex: none;
|
|
8388
8358
|
|
|
8389
|
-
|
|
8390
|
-
|
|
8359
|
+
.k-button-icon {
|
|
8360
|
+
min-width: 0;
|
|
8361
|
+
}
|
|
8391
8362
|
}
|
|
8392
8363
|
}
|
|
8393
8364
|
|
|
8394
8365
|
|
|
8395
|
-
// Flat
|
|
8366
|
+
// Flat button
|
|
8396
8367
|
.k-button-flat {
|
|
8397
|
-
|
|
8368
|
+
border-color: transparent !important; // sass-lint:disable-line no-important
|
|
8369
|
+
color: inherit;
|
|
8370
|
+
background: none !important; // sass-lint:disable-line no-important
|
|
8371
|
+
box-shadow: none !important; // sass-lint:disable-line no-important
|
|
8398
8372
|
|
|
8399
8373
|
// Overlay background
|
|
8400
8374
|
&::before {
|
|
@@ -8403,81 +8377,44 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
8403
8377
|
|
|
8404
8378
|
// Focus ring
|
|
8405
8379
|
&::after {
|
|
8380
|
+
box-shadow: inset 0 0 0 2px currentColor;
|
|
8406
8381
|
display: block !important; // sass-lint:disable-line no-important
|
|
8407
8382
|
}
|
|
8408
8383
|
|
|
8409
|
-
&:focus::after
|
|
8384
|
+
&:focus::after,
|
|
8410
8385
|
&.k-focus::after {
|
|
8411
8386
|
opacity: .12;
|
|
8412
8387
|
}
|
|
8413
8388
|
}
|
|
8414
8389
|
|
|
8415
8390
|
|
|
8416
|
-
//
|
|
8417
|
-
.k-button-
|
|
8418
|
-
|
|
8419
|
-
|
|
8420
|
-
|
|
8421
|
-
&:focus,
|
|
8422
|
-
&.k-focus {
|
|
8423
|
-
text-decoration: underline;
|
|
8424
|
-
}
|
|
8425
|
-
|
|
8426
|
-
// Focus ring
|
|
8427
|
-
&::after {
|
|
8428
|
-
display: block !important; // sass-lint:disable-line no-important
|
|
8429
|
-
}
|
|
8430
|
-
|
|
8431
|
-
&:focus::after ,
|
|
8432
|
-
&.k-focus::after {
|
|
8433
|
-
opacity: .12;
|
|
8434
|
-
}
|
|
8391
|
+
// Outline button
|
|
8392
|
+
.k-button-outline {
|
|
8393
|
+
border-color: currentColor;
|
|
8394
|
+
color: inherit;
|
|
8395
|
+
background: none;
|
|
8435
8396
|
}
|
|
8436
8397
|
|
|
8437
|
-
// RTL
|
|
8438
|
-
.k-rtl,
|
|
8439
|
-
[dir="rtl"] {
|
|
8440
8398
|
|
|
8441
|
-
|
|
8442
|
-
|
|
8443
|
-
|
|
8444
|
-
|
|
8445
|
-
|
|
8446
|
-
|
|
8447
|
-
|
|
8448
|
-
.k-group-start,
|
|
8449
|
-
.k-button:first-child {
|
|
8450
|
-
@include border-right-radius( $kendo-button-border-radius );
|
|
8451
|
-
}
|
|
8452
|
-
|
|
8453
|
-
.k-group-end,
|
|
8454
|
-
.k-button:last-child {
|
|
8455
|
-
@include border-left-radius( $kendo-button-border-radius );
|
|
8456
|
-
}
|
|
8457
|
-
|
|
8458
|
-
.k-group-start.k-group-end,
|
|
8459
|
-
.k-button:first-child:last-child {
|
|
8460
|
-
@include border-radius( $kendo-button-border-radius );
|
|
8461
|
-
}
|
|
8399
|
+
// Link button
|
|
8400
|
+
.k-button-link {
|
|
8401
|
+
border-color: transparent;
|
|
8402
|
+
color: inherit;
|
|
8403
|
+
text-decoration: none;
|
|
8404
|
+
background: none;
|
|
8462
8405
|
|
|
8406
|
+
&:hover,
|
|
8407
|
+
&.k-hover {
|
|
8408
|
+
text-decoration: underline;
|
|
8463
8409
|
}
|
|
8410
|
+
}
|
|
8464
8411
|
|
|
8465
|
-
// Split button
|
|
8466
|
-
.k-split-button {
|
|
8467
|
-
|
|
8468
|
-
.k-button {
|
|
8469
|
-
@include border-radius( 0 );
|
|
8470
|
-
}
|
|
8471
|
-
|
|
8472
|
-
// k-button
|
|
8473
|
-
> .k-button:first-child {
|
|
8474
|
-
@include border-right-radius( $kendo-button-border-radius );
|
|
8475
|
-
}
|
|
8476
8412
|
|
|
8477
|
-
|
|
8478
|
-
|
|
8479
|
-
|
|
8480
|
-
|
|
8413
|
+
// IE
|
|
8414
|
+
.k-ie .k-button-group,
|
|
8415
|
+
.k-ie .k-split-button {
|
|
8416
|
+
.k-button {
|
|
8417
|
+
@include border-radius( 0 );
|
|
8481
8418
|
}
|
|
8482
8419
|
}
|
|
8483
8420
|
|
|
@@ -8584,269 +8521,249 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
8584
8521
|
// #region @import "~@progress/kendo-theme-default/scss/button/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/button/_theme.scss
|
|
8585
8522
|
@include exports( "button/theme" ) {
|
|
8586
8523
|
|
|
8587
|
-
// Solid
|
|
8588
|
-
|
|
8589
|
-
|
|
8590
|
-
|
|
8591
|
-
|
|
8592
|
-
|
|
8593
|
-
|
|
8594
|
-
|
|
8595
|
-
|
|
8596
|
-
);
|
|
8597
|
-
@include box-shadow( $kendo-button-shadow );
|
|
8524
|
+
// Solid button
|
|
8525
|
+
.k-button-solid-base {
|
|
8526
|
+
@include fill(
|
|
8527
|
+
$kendo-button-text,
|
|
8528
|
+
$kendo-button-bg,
|
|
8529
|
+
$kendo-button-border,
|
|
8530
|
+
$kendo-button-gradient
|
|
8531
|
+
);
|
|
8532
|
+
@include box-shadow( $kendo-button-shadow );
|
|
8598
8533
|
|
|
8599
|
-
|
|
8600
|
-
|
|
8601
|
-
|
|
8602
|
-
|
|
8603
|
-
|
|
8604
|
-
|
|
8605
|
-
|
|
8606
|
-
|
|
8607
|
-
|
|
8608
|
-
|
|
8609
|
-
|
|
8534
|
+
// Hover state
|
|
8535
|
+
&:hover,
|
|
8536
|
+
&.k-hover {
|
|
8537
|
+
@include fill(
|
|
8538
|
+
$kendo-button-hover-text,
|
|
8539
|
+
$kendo-button-hover-bg,
|
|
8540
|
+
$kendo-button-hover-border,
|
|
8541
|
+
$kendo-button-hover-gradient
|
|
8542
|
+
);
|
|
8543
|
+
@include box-shadow( $kendo-button-hover-shadow );
|
|
8544
|
+
}
|
|
8610
8545
|
|
|
8611
|
-
|
|
8612
|
-
|
|
8613
|
-
|
|
8614
|
-
|
|
8615
|
-
|
|
8546
|
+
// Focus state
|
|
8547
|
+
&:focus,
|
|
8548
|
+
&.k-focus {
|
|
8549
|
+
@include box-shadow( $kendo-button-focus-shadow );
|
|
8550
|
+
}
|
|
8616
8551
|
|
|
8617
|
-
|
|
8618
|
-
|
|
8619
|
-
|
|
8620
|
-
|
|
8621
|
-
|
|
8622
|
-
|
|
8623
|
-
|
|
8624
|
-
|
|
8625
|
-
|
|
8626
|
-
|
|
8627
|
-
|
|
8552
|
+
// Active state
|
|
8553
|
+
&:active,
|
|
8554
|
+
&.k-active {
|
|
8555
|
+
@include fill(
|
|
8556
|
+
$kendo-button-active-text,
|
|
8557
|
+
$kendo-button-active-bg,
|
|
8558
|
+
$kendo-button-active-border,
|
|
8559
|
+
$kendo-button-active-gradient
|
|
8560
|
+
);
|
|
8561
|
+
@include box-shadow( $kendo-button-active-shadow );
|
|
8562
|
+
}
|
|
8628
8563
|
|
|
8629
|
-
|
|
8630
|
-
|
|
8631
|
-
|
|
8632
|
-
|
|
8633
|
-
|
|
8634
|
-
|
|
8635
|
-
|
|
8636
|
-
|
|
8637
|
-
|
|
8638
|
-
|
|
8639
|
-
} @else {
|
|
8640
|
-
color: contrast-wcag( $color );
|
|
8641
|
-
background-color: $color;
|
|
8642
|
-
border-color: $color;
|
|
8643
|
-
background-image: linear-gradient( rgba( black, 0 ), rgba( black, .04 ) );
|
|
8564
|
+
// Selected state
|
|
8565
|
+
&.k-selected {
|
|
8566
|
+
@include fill(
|
|
8567
|
+
$kendo-button-selected-text,
|
|
8568
|
+
$kendo-button-selected-bg,
|
|
8569
|
+
$kendo-button-selected-border,
|
|
8570
|
+
$kendo-button-selected-gradient
|
|
8571
|
+
);
|
|
8572
|
+
@include box-shadow( $kendo-button-selected-shadow );
|
|
8573
|
+
}
|
|
8644
8574
|
|
|
8645
|
-
|
|
8646
|
-
|
|
8647
|
-
|
|
8648
|
-
|
|
8649
|
-
|
|
8650
|
-
|
|
8575
|
+
// Disabled state
|
|
8576
|
+
&:disabled,
|
|
8577
|
+
&.k-disabled {
|
|
8578
|
+
@include fill(
|
|
8579
|
+
$kendo-button-disabled-text,
|
|
8580
|
+
$kendo-button-disabled-bg,
|
|
8581
|
+
$kendo-button-disabled-border,
|
|
8582
|
+
$kendo-button-disabled-gradient
|
|
8583
|
+
);
|
|
8584
|
+
@include box-shadow( $kendo-button-disabled-shadow );
|
|
8585
|
+
}
|
|
8586
|
+
}
|
|
8651
8587
|
|
|
8652
|
-
|
|
8653
|
-
&:focus,
|
|
8654
|
-
&.k-focus {
|
|
8655
|
-
box-shadow: 0 0 0 2px rgba( $color, .3 );
|
|
8656
|
-
}
|
|
8588
|
+
$_shade-fn: get-function( $kendo-solid-button-shade-function );
|
|
8657
8589
|
|
|
8658
|
-
|
|
8659
|
-
|
|
8660
|
-
|
|
8661
|
-
|
|
8662
|
-
|
|
8663
|
-
}
|
|
8590
|
+
@each $name, $color in $kendo-button-theme-colors {
|
|
8591
|
+
@if ($name != "base") {
|
|
8592
|
+
$_button-text: contrast-wcag( $color );
|
|
8593
|
+
$_button-bg: if( $kendo-solid-button-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null );
|
|
8594
|
+
$_button-border: if( $kendo-solid-button-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null );
|
|
8664
8595
|
|
|
8665
|
-
|
|
8666
|
-
|
|
8667
|
-
|
|
8668
|
-
border-color: try-shade( $color, 1.5 );
|
|
8669
|
-
}
|
|
8670
|
-
}
|
|
8596
|
+
$_button-hover-text: null;
|
|
8597
|
+
$_button-hover-bg: if( $kendo-solid-button-hover-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null );
|
|
8598
|
+
$_button-hover-border: if( $kendo-solid-button-hover-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null );
|
|
8671
8599
|
|
|
8672
|
-
|
|
8673
|
-
|
|
8674
|
-
|
|
8600
|
+
$_button-active-text: null;
|
|
8601
|
+
$_button-active-bg: if( $kendo-solid-button-active-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null );
|
|
8602
|
+
$_button-active-border: if( $kendo-solid-button-active-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null );
|
|
8603
|
+
|
|
8604
|
+
.k-button-solid-#{$name} {
|
|
8675
8605
|
@include fill(
|
|
8676
|
-
$
|
|
8677
|
-
$
|
|
8678
|
-
$
|
|
8679
|
-
$kendo-button-
|
|
8606
|
+
$_button-text,
|
|
8607
|
+
$_button-bg,
|
|
8608
|
+
$_button-border,
|
|
8609
|
+
$kendo-solid-button-gradient
|
|
8680
8610
|
);
|
|
8681
|
-
@include box-shadow( $kendo-button-disabled-shadow );
|
|
8682
|
-
}
|
|
8683
|
-
}
|
|
8684
|
-
}
|
|
8685
|
-
|
|
8686
|
-
|
|
8687
|
-
// Outline Buttons
|
|
8688
|
-
.k-button-outline {
|
|
8689
|
-
@include box-shadow( none );
|
|
8690
|
-
border-color: currentColor;
|
|
8691
|
-
background: none;
|
|
8692
|
-
}
|
|
8693
|
-
|
|
8694
|
-
@each $name, $color in $kendo-button-theme-colors {
|
|
8695
|
-
.k-button-outline-#{$name} {
|
|
8696
|
-
@if ($name == "base") {
|
|
8697
|
-
color: $kendo-button-text;
|
|
8698
8611
|
|
|
8699
8612
|
// Hover state
|
|
8700
8613
|
&:hover,
|
|
8701
8614
|
&.k-hover {
|
|
8702
8615
|
@include fill(
|
|
8703
|
-
|
|
8704
|
-
$
|
|
8705
|
-
$
|
|
8616
|
+
$_button-hover-text,
|
|
8617
|
+
$_button-hover-bg,
|
|
8618
|
+
$_button-hover-border
|
|
8706
8619
|
);
|
|
8707
8620
|
}
|
|
8708
8621
|
|
|
8709
8622
|
// Focus state
|
|
8710
8623
|
&:focus,
|
|
8711
8624
|
&.k-focus {
|
|
8712
|
-
@
|
|
8625
|
+
@if ( $kendo-solid-button-shadow ) {
|
|
8626
|
+
box-shadow: 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity );
|
|
8627
|
+
}
|
|
8713
8628
|
}
|
|
8714
8629
|
|
|
8715
8630
|
// Active state
|
|
8716
8631
|
&:active,
|
|
8717
8632
|
&.k-active {
|
|
8718
8633
|
@include fill(
|
|
8719
|
-
|
|
8720
|
-
$
|
|
8721
|
-
$
|
|
8634
|
+
$_button-active-text,
|
|
8635
|
+
$_button-active-bg,
|
|
8636
|
+
$_button-active-border
|
|
8722
8637
|
);
|
|
8723
8638
|
}
|
|
8724
8639
|
|
|
8725
|
-
// Selected
|
|
8640
|
+
// Selected
|
|
8726
8641
|
&.k-selected {
|
|
8727
8642
|
@include fill(
|
|
8728
|
-
|
|
8729
|
-
$
|
|
8730
|
-
$
|
|
8643
|
+
$_button-active-text,
|
|
8644
|
+
$_button-active-bg,
|
|
8645
|
+
$_button-active-border
|
|
8731
8646
|
);
|
|
8732
8647
|
}
|
|
8733
|
-
} @else {
|
|
8734
|
-
color: $color;
|
|
8735
8648
|
|
|
8736
|
-
//
|
|
8737
|
-
&:
|
|
8738
|
-
&.k-
|
|
8649
|
+
// Disabled state
|
|
8650
|
+
&:disabled,
|
|
8651
|
+
&.k-disabled {
|
|
8739
8652
|
@include fill(
|
|
8740
|
-
|
|
8741
|
-
$
|
|
8742
|
-
$
|
|
8653
|
+
$kendo-button-disabled-text,
|
|
8654
|
+
$kendo-button-disabled-bg,
|
|
8655
|
+
$kendo-button-disabled-border,
|
|
8656
|
+
$kendo-button-disabled-gradient
|
|
8743
8657
|
);
|
|
8658
|
+
@include box-shadow( $kendo-button-disabled-shadow );
|
|
8744
8659
|
}
|
|
8660
|
+
}
|
|
8661
|
+
}
|
|
8662
|
+
}
|
|
8745
8663
|
|
|
8746
|
-
// Focus state
|
|
8747
|
-
&:focus,
|
|
8748
|
-
&.k-focus {
|
|
8749
|
-
box-shadow: 0 0 0 2px rgba( $color, .3 );
|
|
8750
|
-
}
|
|
8751
8664
|
|
|
8752
|
-
|
|
8753
|
-
|
|
8754
|
-
|
|
8755
|
-
|
|
8756
|
-
|
|
8757
|
-
|
|
8758
|
-
|
|
8759
|
-
);
|
|
8760
|
-
}
|
|
8665
|
+
// Outline button
|
|
8666
|
+
@each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
|
|
8667
|
+
.k-button-outline-#{$name} {
|
|
8668
|
+
@include box-shadow( none );
|
|
8669
|
+
border-color: currentColor;
|
|
8670
|
+
color: $color;
|
|
8671
|
+
background-color: transparent;
|
|
8761
8672
|
|
|
8762
|
-
|
|
8763
|
-
|
|
8764
|
-
|
|
8765
|
-
|
|
8766
|
-
|
|
8767
|
-
|
|
8768
|
-
|
|
8673
|
+
// Hover state
|
|
8674
|
+
&:hover,
|
|
8675
|
+
&.k-hover {
|
|
8676
|
+
@include fill(
|
|
8677
|
+
contrast-wcag( $color ),
|
|
8678
|
+
$color,
|
|
8679
|
+
$color
|
|
8680
|
+
);
|
|
8681
|
+
}
|
|
8682
|
+
|
|
8683
|
+
// Focus state
|
|
8684
|
+
&:focus,
|
|
8685
|
+
&.k-focus {
|
|
8686
|
+
@if $kendo-outline-button-shadow {
|
|
8687
|
+
box-shadow: 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity );
|
|
8769
8688
|
}
|
|
8770
8689
|
}
|
|
8771
8690
|
|
|
8691
|
+
// Active state
|
|
8692
|
+
&:active,
|
|
8693
|
+
&.k-active {
|
|
8694
|
+
@include fill(
|
|
8695
|
+
contrast-wcag( $color ),
|
|
8696
|
+
$color,
|
|
8697
|
+
$color
|
|
8698
|
+
);
|
|
8699
|
+
}
|
|
8700
|
+
|
|
8701
|
+
// Selected
|
|
8702
|
+
&.k-selected {
|
|
8703
|
+
@include fill(
|
|
8704
|
+
contrast-wcag( $color ),
|
|
8705
|
+
$color,
|
|
8706
|
+
$color
|
|
8707
|
+
);
|
|
8708
|
+
}
|
|
8709
|
+
|
|
8772
8710
|
// Disabled state
|
|
8773
8711
|
&:disabled,
|
|
8774
8712
|
&.k-disabled {
|
|
8775
|
-
|
|
8776
|
-
$kendo-button-disabled-text,
|
|
8777
|
-
$kendo-button-disabled-bg,
|
|
8778
|
-
$kendo-button-disabled-border,
|
|
8779
|
-
$kendo-button-disabled-gradient
|
|
8780
|
-
);
|
|
8781
|
-
@include box-shadow( $kendo-button-disabled-shadow );
|
|
8713
|
+
color: $kendo-button-disabled-text;
|
|
8782
8714
|
}
|
|
8783
8715
|
}
|
|
8784
8716
|
}
|
|
8785
8717
|
|
|
8786
8718
|
|
|
8787
|
-
// Flat
|
|
8788
|
-
|
|
8789
|
-
@include box-shadow( none );
|
|
8790
|
-
border-color: transparent;
|
|
8791
|
-
background: none;
|
|
8792
|
-
|
|
8793
|
-
// Focus ring
|
|
8794
|
-
&::after {
|
|
8795
|
-
box-shadow: inset 0 0 0 2px currentColor;
|
|
8796
|
-
}
|
|
8797
|
-
}
|
|
8798
|
-
@each $name, $color in $kendo-button-theme-colors {
|
|
8719
|
+
// Flat button
|
|
8720
|
+
@each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
|
|
8799
8721
|
.k-button-flat-#{$name} {
|
|
8800
|
-
|
|
8801
|
-
color: inherit;
|
|
8802
|
-
} @else {
|
|
8803
|
-
color: $color;
|
|
8804
|
-
}
|
|
8722
|
+
color: $color;
|
|
8805
8723
|
|
|
8806
8724
|
// Disabled state
|
|
8807
8725
|
&:disabled,
|
|
8808
8726
|
&.k-disabled {
|
|
8809
|
-
|
|
8810
|
-
$kendo-button-disabled-text,
|
|
8811
|
-
$kendo-button-disabled-bg,
|
|
8812
|
-
$kendo-button-disabled-border,
|
|
8813
|
-
$kendo-button-disabled-gradient
|
|
8814
|
-
);
|
|
8815
|
-
@include box-shadow( $kendo-button-disabled-shadow );
|
|
8727
|
+
color: $kendo-button-disabled-text;
|
|
8816
8728
|
}
|
|
8817
8729
|
}
|
|
8818
8730
|
}
|
|
8819
8731
|
|
|
8820
8732
|
|
|
8821
|
-
// Link
|
|
8822
|
-
|
|
8823
|
-
@include box-shadow( none );
|
|
8824
|
-
border-color: transparent;
|
|
8825
|
-
background: none;
|
|
8826
|
-
|
|
8827
|
-
// Focus ring
|
|
8828
|
-
&::after {
|
|
8829
|
-
box-shadow: inset 0 0 0 2px currentColor;
|
|
8830
|
-
}
|
|
8831
|
-
}
|
|
8832
|
-
@each $name, $color in $kendo-button-theme-colors {
|
|
8733
|
+
// Link button
|
|
8734
|
+
@each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
|
|
8833
8735
|
.k-button-link-#{$name} {
|
|
8834
|
-
|
|
8835
|
-
|
|
8836
|
-
|
|
8837
|
-
|
|
8736
|
+
color: $color;
|
|
8737
|
+
|
|
8738
|
+
// Hover
|
|
8739
|
+
&:hover,
|
|
8740
|
+
&.k-hover {
|
|
8741
|
+
color: try-shade( $color, 2 );
|
|
8742
|
+
}
|
|
8743
|
+
|
|
8744
|
+
// Focus
|
|
8745
|
+
&:focus,
|
|
8746
|
+
&.k-focus {
|
|
8747
|
+
@if ( $kendo-link-button-shadow ) {
|
|
8748
|
+
box-shadow: 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity );
|
|
8749
|
+
}
|
|
8750
|
+
}
|
|
8751
|
+
|
|
8752
|
+
// Active
|
|
8753
|
+
&:active,
|
|
8754
|
+
&.k-active {
|
|
8755
|
+
color: try-shade( $color, 2 );
|
|
8756
|
+
}
|
|
8757
|
+
|
|
8758
|
+
// Selected
|
|
8759
|
+
&.k-selected {
|
|
8760
|
+
color: try-shade( $color, 2 );
|
|
8838
8761
|
}
|
|
8839
8762
|
|
|
8840
8763
|
// Disabled state
|
|
8841
8764
|
&:disabled,
|
|
8842
8765
|
&.k-disabled {
|
|
8843
|
-
|
|
8844
|
-
$kendo-button-disabled-text,
|
|
8845
|
-
$kendo-button-disabled-bg,
|
|
8846
|
-
$kendo-button-disabled-border,
|
|
8847
|
-
$kendo-button-disabled-gradient
|
|
8848
|
-
);
|
|
8849
|
-
@include box-shadow( $kendo-button-disabled-shadow );
|
|
8766
|
+
color: $kendo-button-disabled-text;
|
|
8850
8767
|
}
|
|
8851
8768
|
}
|
|
8852
8769
|
}
|
|
@@ -8857,16 +8774,7 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
8857
8774
|
|
|
8858
8775
|
|
|
8859
8776
|
// Button group
|
|
8860
|
-
.k-button-group {
|
|
8861
|
-
|
|
8862
|
-
.k-button:focus,
|
|
8863
|
-
.k-button.k-focus,
|
|
8864
|
-
.k-button-outline:focus,
|
|
8865
|
-
.k-button-outline.k-focus {
|
|
8866
|
-
@include box-shadow( $kendo-button-group-focus-shadow );
|
|
8867
|
-
}
|
|
8868
|
-
|
|
8869
|
-
}
|
|
8777
|
+
.k-button-group {}
|
|
8870
8778
|
|
|
8871
8779
|
|
|
8872
8780
|
// Split button
|
|
@@ -9003,10 +8911,12 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
9003
8911
|
font-family: $kendo-input-font-family;
|
|
9004
8912
|
font-size: $kendo-input-font-size;
|
|
9005
8913
|
line-height: $kendo-input-line-height;
|
|
8914
|
+
text-align: start;
|
|
9006
8915
|
box-shadow: none;
|
|
9007
8916
|
display: inline-flex;
|
|
9008
8917
|
flex-flow: row nowrap;
|
|
9009
8918
|
align-items: stretch;
|
|
8919
|
+
vertical-align: middle;
|
|
9010
8920
|
position: relative;
|
|
9011
8921
|
overflow: hidden;
|
|
9012
8922
|
text-overflow: ellipsis;
|
|
@@ -9021,10 +8931,25 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
9021
8931
|
outline: 0;
|
|
9022
8932
|
box-shadow: none;
|
|
9023
8933
|
}
|
|
8934
|
+
|
|
8935
|
+
// fix for Safari
|
|
8936
|
+
& > * {
|
|
8937
|
+
margin: 0;
|
|
8938
|
+
}
|
|
9024
8939
|
}
|
|
8940
|
+
|
|
8941
|
+
|
|
8942
|
+
// Input
|
|
8943
|
+
.k-input {}
|
|
9025
8944
|
input.k-input {
|
|
9026
8945
|
padding: $kendo-input-padding-y $kendo-input-padding-x;
|
|
9027
8946
|
}
|
|
8947
|
+
|
|
8948
|
+
|
|
8949
|
+
// Picker
|
|
8950
|
+
.k-picker {
|
|
8951
|
+
cursor: pointer;
|
|
8952
|
+
}
|
|
9028
8953
|
select.k-picker {
|
|
9029
8954
|
padding: $kendo-input-padding-y $kendo-input-padding-x;
|
|
9030
8955
|
appearance: auto;
|
|
@@ -9066,6 +8991,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
9066
8991
|
}
|
|
9067
8992
|
}
|
|
9068
8993
|
span.k-input-inner {
|
|
8994
|
+
white-space: nowrap;
|
|
9069
8995
|
display: flex;
|
|
9070
8996
|
flex-flow: row nowrap;
|
|
9071
8997
|
align-items: center;
|
|
@@ -9192,7 +9118,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
9192
9118
|
|
|
9193
9119
|
> .k-button-icon {
|
|
9194
9120
|
min-width: auto !important; // sass-lint:disable-line no-important
|
|
9195
|
-
min-height: auto !important; // sass-lint:disable-line no-important
|
|
9121
|
+
// min-height: auto !important; // sass-lint:disable-line no-important
|
|
9196
9122
|
}
|
|
9197
9123
|
|
|
9198
9124
|
&:focus {
|
|
@@ -9387,11 +9313,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
9387
9313
|
);
|
|
9388
9314
|
@include box-shadow( $kendo-input-focus-shadow );
|
|
9389
9315
|
}
|
|
9316
|
+
&:focus-within {
|
|
9317
|
+
@include fill (
|
|
9318
|
+
$kendo-input-focus-text,
|
|
9319
|
+
$kendo-input-focus-bg,
|
|
9320
|
+
$kendo-input-focus-border
|
|
9321
|
+
);
|
|
9322
|
+
@include box-shadow( $kendo-input-focus-shadow );
|
|
9323
|
+
}
|
|
9390
9324
|
|
|
9391
9325
|
// Invalid
|
|
9392
|
-
&:invalid,
|
|
9393
9326
|
&.k-invalid,
|
|
9394
|
-
&.ng-invalid
|
|
9327
|
+
&.ng-invalid.ng-touched,
|
|
9328
|
+
&.ng-invalid.ng-dirty {
|
|
9395
9329
|
@include fill( $border: $invalid-border );
|
|
9396
9330
|
|
|
9397
9331
|
.k-input-validation-icon {
|
|
@@ -9402,10 +9336,15 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
9402
9336
|
&.k-focus {
|
|
9403
9337
|
@include box-shadow($invalid-shadow);
|
|
9404
9338
|
}
|
|
9339
|
+
&:focus-within {
|
|
9340
|
+
@include box-shadow($invalid-shadow);
|
|
9341
|
+
}
|
|
9405
9342
|
}
|
|
9406
9343
|
|
|
9407
9344
|
}
|
|
9408
9345
|
|
|
9346
|
+
|
|
9347
|
+
// Solid picker
|
|
9409
9348
|
.k-picker {
|
|
9410
9349
|
@include fill(
|
|
9411
9350
|
$kendo-button-text,
|
|
@@ -9436,11 +9375,20 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
9436
9375
|
);
|
|
9437
9376
|
@include box-shadow( $kendo-button-focus-shadow );
|
|
9438
9377
|
}
|
|
9378
|
+
&:focus-within {
|
|
9379
|
+
@include fill (
|
|
9380
|
+
$kendo-button-focus-text,
|
|
9381
|
+
$kendo-button-focus-bg,
|
|
9382
|
+
$kendo-button-focus-border,
|
|
9383
|
+
$kendo-button-focus-gradient
|
|
9384
|
+
);
|
|
9385
|
+
@include box-shadow( $kendo-button-focus-shadow );
|
|
9386
|
+
}
|
|
9439
9387
|
|
|
9440
9388
|
// Invalid
|
|
9441
|
-
&:invalid,
|
|
9442
9389
|
&.k-invalid,
|
|
9443
|
-
&.ng-invalid
|
|
9390
|
+
&.ng-invalid.ng-touched,
|
|
9391
|
+
&.ng-invalid.ng-dirty {
|
|
9444
9392
|
@include fill( $border: $kendo-input-invalid-border );
|
|
9445
9393
|
|
|
9446
9394
|
.k-input-validation-icon {
|
|
@@ -9451,8 +9399,12 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
9451
9399
|
&.k-focus {
|
|
9452
9400
|
@include box-shadow( $kendo-input-invalid-shadow );
|
|
9453
9401
|
}
|
|
9402
|
+
&:focus-within {
|
|
9403
|
+
@include box-shadow( $kendo-input-invalid-shadow );
|
|
9404
|
+
}
|
|
9454
9405
|
}
|
|
9455
9406
|
}
|
|
9407
|
+
|
|
9456
9408
|
}
|
|
9457
9409
|
|
|
9458
9410
|
// #endregion
|
|
@@ -9763,127 +9715,125 @@ $menu-scroll-button-hover-gradient: null !default;
|
|
|
9763
9715
|
// Menu popup
|
|
9764
9716
|
|
|
9765
9717
|
/// Horizontal padding of the menu popup.
|
|
9766
|
-
/// @group menu
|
|
9718
|
+
/// @group menu
|
|
9767
9719
|
$kendo-menu-popup-padding-x: null !default;
|
|
9768
9720
|
|
|
9769
9721
|
/// Vertical padding of the menu popup.
|
|
9770
|
-
/// @group menu
|
|
9722
|
+
/// @group menu
|
|
9771
9723
|
$kendo-menu-popup-padding-y: null !default;
|
|
9772
9724
|
|
|
9773
9725
|
/// Width of the border around the menu popup.
|
|
9774
|
-
/// @group menu
|
|
9726
|
+
/// @group menu
|
|
9775
9727
|
$kendo-menu-popup-border-width: $popup-border-width !default;
|
|
9776
9728
|
|
|
9777
9729
|
/// Font sizes of the menu popup.
|
|
9778
|
-
/// @group menu
|
|
9779
|
-
$kendo-menu-popup-font-size: $font-size !default;
|
|
9780
|
-
$kendo-menu-popup-font-size-sm: $font-size-
|
|
9781
|
-
$kendo-menu-popup-font-size-md: $font-size !default;
|
|
9782
|
-
$kendo-menu-popup-font-size-lg: $font-size-
|
|
9730
|
+
/// @group menu
|
|
9731
|
+
$kendo-menu-popup-font-size: $font-size-md !default;
|
|
9732
|
+
$kendo-menu-popup-font-size-sm: $font-size-md !default;
|
|
9733
|
+
$kendo-menu-popup-font-size-md: $font-size-md !default;
|
|
9734
|
+
$kendo-menu-popup-font-size-lg: $font-size-md !default;
|
|
9783
9735
|
|
|
9784
9736
|
/// Line heights used along with $font-size.
|
|
9785
|
-
/// @group menu
|
|
9786
|
-
$kendo-menu-popup-line-height: $line-height !default;
|
|
9787
|
-
$kendo-menu-popup-line-height-sm: $line-height-
|
|
9788
|
-
$kendo-menu-popup-line-height-md: $line-height !default;
|
|
9789
|
-
$kendo-menu-popup-line-height-lg: $line-height-
|
|
9737
|
+
/// @group menu
|
|
9738
|
+
$kendo-menu-popup-line-height: $line-height-md !default;
|
|
9739
|
+
$kendo-menu-popup-line-height-sm: $line-height-md !default;
|
|
9740
|
+
$kendo-menu-popup-line-height-md: $line-height-md !default;
|
|
9741
|
+
$kendo-menu-popup-line-height-lg: $line-height-md !default;
|
|
9790
9742
|
|
|
9791
9743
|
/// The background of the menu popup.
|
|
9792
|
-
/// @group menu
|
|
9744
|
+
/// @group menu
|
|
9793
9745
|
$kendo-menu-popup-bg: $popup-bg !default;
|
|
9794
9746
|
/// The text color of the menu popup.
|
|
9795
|
-
/// @group menu
|
|
9747
|
+
/// @group menu
|
|
9796
9748
|
$kendo-menu-popup-text: $popup-text !default;
|
|
9797
9749
|
/// The border color of the menu popup.
|
|
9798
|
-
/// @group menu
|
|
9750
|
+
/// @group menu
|
|
9799
9751
|
$kendo-menu-popup-border: $popup-border !default;
|
|
9800
9752
|
/// The background gradient of the menu popup.
|
|
9801
|
-
/// @group menu
|
|
9753
|
+
/// @group menu
|
|
9802
9754
|
$kendo-menu-popup-gradient: null !default;
|
|
9803
9755
|
|
|
9804
9756
|
|
|
9805
9757
|
// Menu popup item
|
|
9806
9758
|
|
|
9807
9759
|
/// Horizontal padding of the menu item in popup.
|
|
9808
|
-
/// @group menu
|
|
9809
|
-
$kendo-menu-popup-item-padding-x:
|
|
9810
|
-
$kendo-menu-popup-item-padding-x-
|
|
9811
|
-
$kendo-menu-popup-item-padding-x-
|
|
9812
|
-
$kendo-menu-popup-item-padding-x-
|
|
9813
|
-
$kendo-menu-popup-item-padding-x-lg: ( $kendo-menu-popup-item-padding-x-base * 1.25 ) !default;
|
|
9760
|
+
/// @group menu
|
|
9761
|
+
$kendo-menu-popup-item-padding-x: map-get( $spacing, 2 ) !default;
|
|
9762
|
+
$kendo-menu-popup-item-padding-x-sm: map-get( $spacing, 2 ) !default;
|
|
9763
|
+
$kendo-menu-popup-item-padding-x-md: map-get( $spacing, 2 ) !default;
|
|
9764
|
+
$kendo-menu-popup-item-padding-x-lg: map-get( $spacing, 2 ) !default;
|
|
9814
9765
|
|
|
9815
9766
|
/// Vertical padding of the menu item in popup.
|
|
9816
|
-
/// @group menu
|
|
9817
|
-
$kendo-menu-popup-item-padding-y:
|
|
9818
|
-
$kendo-menu-popup-item-padding-y-
|
|
9819
|
-
$kendo-menu-popup-item-padding-y-
|
|
9820
|
-
$kendo-menu-popup-item-padding-y-
|
|
9821
|
-
$kendo-menu-popup-item-padding-y-lg: ( $kendo-menu-popup-item-padding-y-base * 1.25 ) !default;
|
|
9767
|
+
/// @group menu
|
|
9768
|
+
$kendo-menu-popup-item-padding-y: map-get( $spacing, 1 ) !default;
|
|
9769
|
+
$kendo-menu-popup-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
|
|
9770
|
+
$kendo-menu-popup-item-padding-y-md: map-get( $spacing, 1 ) !default;
|
|
9771
|
+
$kendo-menu-popup-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
|
|
9822
9772
|
|
|
9823
9773
|
/// The end padding of the menu item in popup.
|
|
9824
|
-
/// @group menu
|
|
9825
|
-
$kendo-menu-popup-item-padding-end:
|
|
9774
|
+
/// @group menu
|
|
9775
|
+
$kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$icon-size} ) !default;
|
|
9826
9776
|
$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + #{$icon-size} ) !default;
|
|
9827
9777
|
$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$icon-size} ) !default;
|
|
9828
9778
|
$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$icon-size} ) !default;
|
|
9829
9779
|
|
|
9830
9780
|
/// The start margin of the menu item expand icon.
|
|
9831
|
-
/// @group menu
|
|
9781
|
+
/// @group menu
|
|
9832
9782
|
$kendo-menu-popup-item-icon-margin-start-sm: $kendo-menu-popup-item-padding-x-sm !default;
|
|
9833
9783
|
$kendo-menu-popup-item-icon-margin-start: $kendo-menu-popup-item-padding-x-md !default;
|
|
9834
9784
|
$kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg !default;
|
|
9835
9785
|
|
|
9836
9786
|
/// The end margin of the menu item expand icon.
|
|
9837
|
-
/// @group menu
|
|
9787
|
+
/// @group menu
|
|
9838
9788
|
$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) ) !default;
|
|
9839
9789
|
$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{$kendo-menu-popup-item-padding-x-md / 2}) ) !default;
|
|
9840
9790
|
$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{$kendo-menu-popup-item-padding-x-lg / 2}) ) !default;
|
|
9841
9791
|
|
|
9842
9792
|
/// The spacing between the menu items in popup.
|
|
9843
|
-
/// @group menu
|
|
9793
|
+
/// @group menu
|
|
9844
9794
|
$kendo-menu-popup-item-spacing: 0px !default;
|
|
9845
9795
|
|
|
9846
9796
|
/// The background of the menu item in popup.
|
|
9847
|
-
/// @group menu
|
|
9797
|
+
/// @group menu
|
|
9848
9798
|
$kendo-menu-popup-item-bg: null !default;
|
|
9849
9799
|
/// The text color of the menu item in popup.
|
|
9850
|
-
/// @group menu
|
|
9800
|
+
/// @group menu
|
|
9851
9801
|
$kendo-menu-popup-item-text: null !default;
|
|
9852
9802
|
/// The border color of the menu item in popup.
|
|
9853
|
-
/// @group menu
|
|
9803
|
+
/// @group menu
|
|
9854
9804
|
$kendo-menu-popup-item-border: null !default;
|
|
9855
9805
|
/// The background gradient of the menu item in popup.
|
|
9856
|
-
/// @group menu
|
|
9806
|
+
/// @group menu
|
|
9857
9807
|
$kendo-menu-popup-item-gradient: null !default;
|
|
9858
9808
|
|
|
9859
9809
|
/// The background of hovered menu item in popup.
|
|
9860
|
-
/// @group menu
|
|
9810
|
+
/// @group menu
|
|
9861
9811
|
$kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
|
|
9862
9812
|
/// The text color of hovered menu item in popup.
|
|
9863
|
-
/// @group menu
|
|
9813
|
+
/// @group menu
|
|
9864
9814
|
$kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
|
|
9865
9815
|
/// The border color of hovered menu item in popup.
|
|
9866
|
-
/// @group menu
|
|
9816
|
+
/// @group menu
|
|
9867
9817
|
$kendo-menu-popup-item-hover-border: null !default;
|
|
9868
9818
|
/// The background gradient of hovered menu item in popup.
|
|
9869
|
-
/// @group menu
|
|
9819
|
+
/// @group menu
|
|
9870
9820
|
$kendo-menu-popup-item-hover-gradient: null !default;
|
|
9871
9821
|
|
|
9872
9822
|
/// The background of expanded menu item in popup.
|
|
9873
|
-
/// @group menu
|
|
9823
|
+
/// @group menu
|
|
9874
9824
|
$kendo-menu-popup-item-expanded-bg: $kendo-list-item-selected-bg !default;
|
|
9875
9825
|
/// The text color of expanded menu item in popup.
|
|
9876
|
-
/// @group menu
|
|
9826
|
+
/// @group menu
|
|
9877
9827
|
$kendo-menu-popup-item-expanded-text: $kendo-list-item-selected-text !default;
|
|
9878
9828
|
/// The border color of expanded menu item in popup.
|
|
9879
|
-
/// @group menu
|
|
9829
|
+
/// @group menu
|
|
9880
9830
|
$kendo-menu-popup-item-expanded-border: null !default;
|
|
9881
9831
|
/// The background gradient of expanded menu item in popup.
|
|
9882
|
-
/// @group menu
|
|
9832
|
+
/// @group menu
|
|
9883
9833
|
$kendo-menu-popup-item-expanded-gradient: null !default;
|
|
9884
9834
|
|
|
9885
9835
|
/// The base shadow of focused menu item in popup.
|
|
9886
|
-
/// @group menu
|
|
9836
|
+
/// @group menu
|
|
9887
9837
|
$kendo-menu-popup-item-focus-shadow: $menu-item-focus-shadow !default;
|
|
9888
9838
|
|
|
9889
9839
|
// #endregion
|
|
@@ -10035,8 +9985,8 @@ $grid-filter-menu-item-spacing-y: $grid-filter-menu-item-spacing-x !default;
|
|
|
10035
9985
|
$grid-column-menu-popup-padding-x: null !default;
|
|
10036
9986
|
$grid-column-menu-popup-padding-y: null !default;
|
|
10037
9987
|
|
|
10038
|
-
$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x
|
|
10039
|
-
$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y
|
|
9988
|
+
$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x !default;
|
|
9989
|
+
$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !default;
|
|
10040
9990
|
|
|
10041
9991
|
$grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
|
|
10042
9992
|
$grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
|
|
@@ -10098,22 +10048,22 @@ $kendo-table-cell-padding-y: null !default;
|
|
|
10098
10048
|
/// @group table
|
|
10099
10049
|
$kendo-table-sizes: (
|
|
10100
10050
|
sm: (
|
|
10101
|
-
font-size: $font-size,
|
|
10102
|
-
line-height: $line-height,
|
|
10051
|
+
font-size: $font-size-md,
|
|
10052
|
+
line-height: $line-height-md,
|
|
10103
10053
|
cell-padding-x: map-get( $spacing, 2 ),
|
|
10104
|
-
cell-padding-y: map-get( $spacing,
|
|
10054
|
+
cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
|
|
10105
10055
|
),
|
|
10106
10056
|
md: (
|
|
10107
|
-
font-size: $font-size,
|
|
10108
|
-
line-height: $line-height,
|
|
10057
|
+
font-size: $font-size-md,
|
|
10058
|
+
line-height: $line-height-md,
|
|
10109
10059
|
cell-padding-x: map-get( $spacing, 2 ),
|
|
10110
|
-
cell-padding-y: map-get( $spacing, 2 )
|
|
10060
|
+
cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
|
|
10111
10061
|
),
|
|
10112
10062
|
lg: (
|
|
10113
|
-
font-size: $font-size,
|
|
10114
|
-
line-height: $line-height,
|
|
10063
|
+
font-size: $font-size-md,
|
|
10064
|
+
line-height: $line-height-md,
|
|
10115
10065
|
cell-padding-x: map-get( $spacing, 2 ),
|
|
10116
|
-
cell-padding-y: map-get( $spacing,
|
|
10066
|
+
cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
|
|
10117
10067
|
)
|
|
10118
10068
|
) !default;
|
|
10119
10069
|
|
|
@@ -10344,7 +10294,7 @@ $kendo-table-selected-border: $grid-selected-border !default;
|
|
|
10344
10294
|
.k-table-group-row {
|
|
10345
10295
|
|
|
10346
10296
|
&::before {
|
|
10347
|
-
content: "
|
|
10297
|
+
content: "\200b";
|
|
10348
10298
|
padding: $kendo-table-cell-padding-y 0;
|
|
10349
10299
|
width: 0;
|
|
10350
10300
|
display: block;
|
|
@@ -10943,7 +10893,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
|
|
|
10943
10893
|
// Chip List
|
|
10944
10894
|
|
|
10945
10895
|
/// The sizes of the chip list.
|
|
10946
|
-
/// @group chip
|
|
10896
|
+
/// @group chip
|
|
10947
10897
|
$kendo-chip-list-sizes: (
|
|
10948
10898
|
sm: map-get( $spacing, 1 ),
|
|
10949
10899
|
md: map-get( $spacing, 2 ),
|
|
@@ -11977,7 +11927,7 @@ $skeleton-wave-bg: rgba( black, .04 ) !default;
|
|
|
11977
11927
|
transform: $skeleton-text-transform;
|
|
11978
11928
|
|
|
11979
11929
|
&:empty::before {
|
|
11980
|
-
content: "\
|
|
11930
|
+
content: "\200b";
|
|
11981
11931
|
}
|
|
11982
11932
|
}
|
|
11983
11933
|
|
|
@@ -12239,9 +12189,12 @@ $tooltip-error-border: $tooltip-error-bg !default;
|
|
|
12239
12189
|
|
|
12240
12190
|
// Input
|
|
12241
12191
|
.k-input,
|
|
12242
|
-
.k-picker
|
|
12192
|
+
.k-picker {
|
|
12243
12193
|
width: $toolbar-input-width;
|
|
12244
12194
|
}
|
|
12195
|
+
.k-color-picker {
|
|
12196
|
+
width: min-content;
|
|
12197
|
+
}
|
|
12245
12198
|
|
|
12246
12199
|
// Overflow anchor
|
|
12247
12200
|
.k-overflow-anchor {
|
|
@@ -12402,6 +12355,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
|
|
|
12402
12355
|
.k-toolbar {
|
|
12403
12356
|
padding: 0;
|
|
12404
12357
|
border-width: 0;
|
|
12358
|
+
flex-shrink: 1;
|
|
12405
12359
|
color: inherit;
|
|
12406
12360
|
background: none;
|
|
12407
12361
|
}
|
|
@@ -12821,10 +12775,6 @@ $fieldset-legend-border: null !default;
|
|
|
12821
12775
|
display: flex;
|
|
12822
12776
|
flex-flow: row nowrap;
|
|
12823
12777
|
}
|
|
12824
|
-
.k-checkbox-label,
|
|
12825
|
-
.k-radio-label {
|
|
12826
|
-
display: inline-flex;
|
|
12827
|
-
}
|
|
12828
12778
|
|
|
12829
12779
|
.k-label + .k-radio {
|
|
12830
12780
|
margin-left: 0;
|
|
@@ -12859,13 +12809,11 @@ $fieldset-legend-border: null !default;
|
|
|
12859
12809
|
padding: 0;
|
|
12860
12810
|
}
|
|
12861
12811
|
|
|
12862
|
-
.k-form-field
|
|
12863
|
-
.k-daterangepicker .k-textbox-container {
|
|
12812
|
+
.k-form-field {
|
|
12864
12813
|
margin-top: $form-field-margin-top;
|
|
12865
12814
|
}
|
|
12866
12815
|
|
|
12867
|
-
>
|
|
12868
|
-
.k-daterangepicker .k-textbox-container {
|
|
12816
|
+
> * {
|
|
12869
12817
|
&:not(.k-hidden):first-child,
|
|
12870
12818
|
&.k-hidden + :not(.k-hidden) {
|
|
12871
12819
|
margin-top: 0;
|
|
@@ -12904,6 +12852,11 @@ $fieldset-legend-border: null !default;
|
|
|
12904
12852
|
display: inline-flex;
|
|
12905
12853
|
width: 100%;
|
|
12906
12854
|
}
|
|
12855
|
+
.k-daterangepicker {
|
|
12856
|
+
width: 100%;
|
|
12857
|
+
flex-flow: column nowrap;
|
|
12858
|
+
gap: 0;
|
|
12859
|
+
}
|
|
12907
12860
|
}
|
|
12908
12861
|
|
|
12909
12862
|
// Form Buttons Container
|
|
@@ -13545,7 +13498,9 @@ $fieldset-legend-border: null !default;
|
|
|
13545
13498
|
@include exports( "textarea/layout" ) {
|
|
13546
13499
|
|
|
13547
13500
|
// Textarea
|
|
13548
|
-
.k-textarea {
|
|
13501
|
+
.k-textarea {
|
|
13502
|
+
display: flex;
|
|
13503
|
+
}
|
|
13549
13504
|
|
|
13550
13505
|
}
|
|
13551
13506
|
|
|
@@ -13696,9 +13651,18 @@ $listbox-drop-hint-width: 1px !default;
|
|
|
13696
13651
|
|
|
13697
13652
|
.k-list-scroller {
|
|
13698
13653
|
width: 100%;
|
|
13654
|
+
height: inherit;
|
|
13699
13655
|
border-width: $listbox-border-width;
|
|
13700
13656
|
border-style: solid;
|
|
13701
13657
|
box-sizing: border-box;
|
|
13658
|
+
|
|
13659
|
+
.k-list-scroller {
|
|
13660
|
+
border-width: 0;
|
|
13661
|
+
}
|
|
13662
|
+
|
|
13663
|
+
.k-list {
|
|
13664
|
+
height: inherit;
|
|
13665
|
+
}
|
|
13702
13666
|
}
|
|
13703
13667
|
|
|
13704
13668
|
.k-drop-hint {
|
|
@@ -14121,127 +14085,125 @@ $progressbar-chunk-border: $body-bg !default;
|
|
|
14121
14085
|
// #region @import "_variables.scss"; -> packages/classic/scss/radio/_variables.scss
|
|
14122
14086
|
// Radio button
|
|
14123
14087
|
|
|
14124
|
-
///
|
|
14125
|
-
/// @group radio
|
|
14126
|
-
$kendo-radio-sizes: (
|
|
14127
|
-
sm: map-get( $spacing, 3),
|
|
14128
|
-
md: map-get( $spacing, 4),
|
|
14129
|
-
lg: map-get( $spacing, 6)
|
|
14130
|
-
) !default;
|
|
14131
|
-
|
|
14132
|
-
/// The Border radius of the radio button.
|
|
14088
|
+
/// Border radius of radio button.
|
|
14133
14089
|
/// @group radio
|
|
14134
14090
|
$kendo-radio-radius: 50% !default;
|
|
14135
|
-
///
|
|
14091
|
+
/// Border width of radio button.
|
|
14136
14092
|
/// @group radio
|
|
14137
14093
|
$kendo-radio-border-width: 1px !default;
|
|
14138
|
-
/// The Line height of the radio button.
|
|
14139
|
-
/// @group radio
|
|
14140
|
-
$kendo-radio-line-height: calc( #{map-get( $kendo-radio-sizes, "md" )} + #{$kendo-radio-border-width} ) !default;
|
|
14141
14094
|
|
|
14142
|
-
|
|
14095
|
+
// Radio button sizes
|
|
14096
|
+
$kendo-radio-sizes: (
|
|
14097
|
+
sm: (
|
|
14098
|
+
size: map-get( $spacing, 3 ),
|
|
14099
|
+
glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
|
|
14100
|
+
ripple-size: map-get( $spacing, 3 ) * 3
|
|
14101
|
+
),
|
|
14102
|
+
md: (
|
|
14103
|
+
size: map-get( $spacing, 4 ),
|
|
14104
|
+
glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
|
|
14105
|
+
ripple-size: map-get( $spacing, 4 ) * 3
|
|
14106
|
+
),
|
|
14107
|
+
lg: (
|
|
14108
|
+
size: map-get( $spacing, 5 ),
|
|
14109
|
+
glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
|
|
14110
|
+
ripple-size: map-get( $spacing, 5 ) * 3
|
|
14111
|
+
)
|
|
14112
|
+
) !default;
|
|
14113
|
+
|
|
14114
|
+
/// Background color of radio button.
|
|
14143
14115
|
/// @group radio
|
|
14144
14116
|
$kendo-radio-bg: $kendo-checkbox-bg !default;
|
|
14145
|
-
///
|
|
14117
|
+
/// Color of radio button.
|
|
14146
14118
|
/// @group radio
|
|
14147
14119
|
$kendo-radio-text: $kendo-checkbox-text !default;
|
|
14148
|
-
///
|
|
14120
|
+
/// Border color of radio button.
|
|
14149
14121
|
/// @group radio
|
|
14150
14122
|
$kendo-radio-border: $kendo-checkbox-border !default;
|
|
14151
14123
|
|
|
14152
|
-
///
|
|
14124
|
+
/// Background color of hovered radio button.
|
|
14153
14125
|
/// @group radio
|
|
14154
14126
|
$kendo-radio-hover-bg: $kendo-checkbox-hover-bg !default;
|
|
14155
|
-
///
|
|
14127
|
+
/// Color of hovered radio button.
|
|
14156
14128
|
/// @group radio
|
|
14157
14129
|
$kendo-radio-hover-text: $kendo-checkbox-hover-text !default;
|
|
14158
|
-
///
|
|
14130
|
+
/// Border color of hovered radio button.
|
|
14159
14131
|
/// @group radio
|
|
14160
14132
|
$kendo-radio-hover-border: $kendo-checkbox-hover-border !default;
|
|
14161
14133
|
|
|
14162
|
-
///
|
|
14134
|
+
/// Background color of checked radio button.
|
|
14163
14135
|
/// @group radio
|
|
14164
14136
|
$kendo-radio-checked-bg: $kendo-checkbox-checked-bg !default;
|
|
14165
|
-
///
|
|
14137
|
+
/// Color of checked radio button.
|
|
14166
14138
|
/// @group radio
|
|
14167
14139
|
$kendo-radio-checked-text: $kendo-checkbox-checked-text !default;
|
|
14168
|
-
///
|
|
14140
|
+
/// Border color of checked radio button.
|
|
14169
14141
|
/// @group radio
|
|
14170
14142
|
$kendo-radio-checked-border: $kendo-checkbox-checked-border !default;
|
|
14171
14143
|
|
|
14172
|
-
///
|
|
14173
|
-
/// @group radio
|
|
14174
|
-
$kendo-radio-indeterminate-bg: $kendo-radio-checked-bg !default;
|
|
14175
|
-
/// The text of indeterminate radio button
|
|
14176
|
-
/// @group radio
|
|
14177
|
-
$kendo-radio-indeterminate-text: $kendo-radio-checked-text !default;
|
|
14178
|
-
/// The border of indeterminate radio button.
|
|
14179
|
-
/// @group radio
|
|
14180
|
-
$kendo-radio-indeterminate-border: $kendo-radio-checked-border !default;
|
|
14181
|
-
|
|
14182
|
-
/// The border of focused radio button.
|
|
14144
|
+
/// Border color of focused radio button.
|
|
14183
14145
|
/// @group radio
|
|
14184
|
-
$kendo-radio-focus-border: $kendo-checkbox-
|
|
14185
|
-
///
|
|
14146
|
+
$kendo-radio-focus-border: $kendo-checkbox-focus-border !default;
|
|
14147
|
+
/// Box shadow of focused radio button.
|
|
14186
14148
|
/// @group radio
|
|
14187
14149
|
$kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;
|
|
14188
|
-
///
|
|
14150
|
+
/// Border color of focused and checked radio button.
|
|
14189
14151
|
/// @group radio
|
|
14190
|
-
$kendo-radio-focus-checked-border: $kendo-checkbox-checked-border !default;
|
|
14191
|
-
///
|
|
14152
|
+
$kendo-radio-focus-checked-border: $kendo-checkbox-focus-checked-border !default;
|
|
14153
|
+
/// Box shadow of focused and checked radio button.
|
|
14192
14154
|
/// @group radio
|
|
14193
14155
|
$kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
|
|
14194
14156
|
|
|
14195
|
-
///
|
|
14157
|
+
/// Background color of disabled radio button.
|
|
14196
14158
|
/// @group radio
|
|
14197
|
-
$kendo-radio-disabled-bg:
|
|
14198
|
-
///
|
|
14159
|
+
$kendo-radio-disabled-bg: $kendo-checkbox-disabled-bg !default;
|
|
14160
|
+
/// Color of disabled radio button.
|
|
14199
14161
|
/// @group radio
|
|
14200
|
-
$kendo-radio-disabled-text:
|
|
14201
|
-
///
|
|
14162
|
+
$kendo-radio-disabled-text: $kendo-checkbox-disabled-text !default;
|
|
14163
|
+
/// Border color of disabled radio button.
|
|
14202
14164
|
/// @group radio
|
|
14203
|
-
$kendo-radio-disabled-border:
|
|
14165
|
+
$kendo-radio-disabled-border: $kendo-checkbox-disabled-border !default;
|
|
14204
14166
|
|
|
14205
|
-
///
|
|
14167
|
+
/// Background color of disabled and checked radio button.
|
|
14206
14168
|
/// @group radio
|
|
14207
|
-
$kendo-radio-disabled-checked-bg:
|
|
14208
|
-
///
|
|
14169
|
+
$kendo-radio-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg !default;
|
|
14170
|
+
/// Color of disabled and checked radio button.
|
|
14209
14171
|
/// @group radio
|
|
14210
|
-
$kendo-radio-disabled-checked-text:
|
|
14211
|
-
///
|
|
14172
|
+
$kendo-radio-disabled-checked-text: $kendo-checkbox-disabled-checked-text !default;
|
|
14173
|
+
/// Border color of disabled and checked radio button.
|
|
14212
14174
|
/// @group radio
|
|
14213
|
-
$kendo-radio-disabled-checked-border:
|
|
14175
|
+
$kendo-radio-disabled-checked-border: $kendo-checkbox-disabled-checked-border !default;
|
|
14214
14176
|
|
|
14215
|
-
///
|
|
14177
|
+
/// Background color of invalid radio button.
|
|
14216
14178
|
/// @group radio
|
|
14217
|
-
$kendo-radio-invalid-bg:
|
|
14218
|
-
///
|
|
14179
|
+
$kendo-radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
|
|
14180
|
+
/// Color of invalid radio button.
|
|
14219
14181
|
/// @group radio
|
|
14220
|
-
$kendo-radio-invalid-text: $invalid-text !default;
|
|
14221
|
-
///
|
|
14182
|
+
$kendo-radio-invalid-text: $kendo-checkbox-invalid-text !default;
|
|
14183
|
+
/// Border color of invalid radio button.
|
|
14222
14184
|
/// @group radio
|
|
14223
|
-
$kendo-radio-invalid-border: $invalid-border !default;
|
|
14185
|
+
$kendo-radio-invalid-border: $kendo-checkbox-invalid-border !default;
|
|
14224
14186
|
|
|
14225
14187
|
|
|
14226
14188
|
// Radio indicator
|
|
14227
14189
|
|
|
14228
|
-
///
|
|
14190
|
+
/// Type of radio button indicator.
|
|
14229
14191
|
/// @group radio
|
|
14230
|
-
$kendo-radio-
|
|
14192
|
+
$kendo-radio-indicator-type: image !default;
|
|
14231
14193
|
|
|
14232
|
-
///
|
|
14194
|
+
/// Glyph font family of radio button indicator.
|
|
14233
14195
|
/// @group radio
|
|
14234
14196
|
$kendo-radio-glyph-font-family: "WebComponentsIcons", monospace !default;
|
|
14235
|
-
///
|
|
14236
|
-
/// @group radio
|
|
14237
|
-
$kendo-radio-glyph-size: 12px !default;
|
|
14238
|
-
/// The checked glyph of radio button.
|
|
14197
|
+
/// Glyph of radio button indicator.
|
|
14239
14198
|
/// @group radio
|
|
14240
14199
|
$kendo-radio-checked-glyph: "\e308" !default;
|
|
14241
14200
|
|
|
14242
|
-
///
|
|
14201
|
+
/// Image of checked radio button indicator.
|
|
14202
|
+
/// @group radio
|
|
14203
|
+
$kendo-radio-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
|
|
14204
|
+
/// Image of disabled and checked radio button indicator.
|
|
14243
14205
|
/// @group radio
|
|
14244
|
-
$kendo-radio-checked-image: null !default;
|
|
14206
|
+
$kendo-radio-disabled-checked-image: null !default;
|
|
14245
14207
|
|
|
14246
14208
|
|
|
14247
14209
|
// Radio label
|
|
@@ -14253,36 +14215,25 @@ $kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
|
|
|
14253
14215
|
|
|
14254
14216
|
// Radio list
|
|
14255
14217
|
|
|
14256
|
-
///
|
|
14218
|
+
/// Spacing between items of horizontal radio button list.
|
|
14257
14219
|
/// @group radio
|
|
14258
14220
|
$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
|
|
14259
|
-
///
|
|
14221
|
+
/// Horizontal padding of radio button list items.
|
|
14260
14222
|
/// @group radio
|
|
14261
14223
|
$kendo-radio-list-item-padding-x: 0px !default;
|
|
14262
|
-
///
|
|
14224
|
+
/// Vertical padding of radio button list items.
|
|
14263
14225
|
/// @group radio
|
|
14264
14226
|
$kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
|
|
14265
14227
|
|
|
14266
14228
|
|
|
14267
14229
|
// Radio ripple
|
|
14268
14230
|
|
|
14269
|
-
///
|
|
14231
|
+
/// Background color of radio button ripple.
|
|
14270
14232
|
/// @group radio
|
|
14271
|
-
$kendo-radio-ripple-
|
|
14272
|
-
|
|
14273
|
-
md: (map-get( $kendo-radio-sizes, "md" ) * 3),
|
|
14274
|
-
lg: (map-get( $kendo-radio-sizes, "lg" ) * 3)
|
|
14275
|
-
) !default;
|
|
14276
|
-
/// The ripple margin of radio button.
|
|
14233
|
+
$kendo-radio-ripple-bg: $kendo-radio-checked-bg !default;
|
|
14234
|
+
/// Opacity of radio button ripple.
|
|
14277
14235
|
/// @group radio
|
|
14278
|
-
$kendo-radio-ripple-
|
|
14279
|
-
sm: calc(-1 * (#{map-get( $kendo-radio-sizes, "sm" )} + 2 * #{$kendo-radio-border-width})),
|
|
14280
|
-
md: calc(-1 * (#{map-get( $kendo-radio-sizes, "md" )} + 2 * #{$kendo-radio-border-width})),
|
|
14281
|
-
lg: calc(-1 * (#{map-get( $kendo-radio-sizes, "lg" )} + 2 * #{$kendo-radio-border-width}))
|
|
14282
|
-
) !default;
|
|
14283
|
-
/// The ripple opacity of radio button.
|
|
14284
|
-
/// @group radio
|
|
14285
|
-
$kendo-radio-ripple-opacity: .3 !default;
|
|
14236
|
+
$kendo-radio-ripple-opacity: .25 !default;
|
|
14286
14237
|
|
|
14287
14238
|
// #endregion
|
|
14288
14239
|
// #region @import "_layout.scss"; -> packages/classic/scss/radio/_layout.scss
|
|
@@ -14310,82 +14261,50 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
14310
14261
|
-webkit-appearance: none;
|
|
14311
14262
|
}
|
|
14312
14263
|
|
|
14313
|
-
// Radio size
|
|
14314
|
-
|
|
14315
|
-
@each $name, $size in $kendo-radio-sizes {
|
|
14316
|
-
.k-radio-#{$name} {
|
|
14317
|
-
width: $size;
|
|
14318
|
-
height: $size;
|
|
14319
|
-
|
|
14320
|
-
+ .k-radio-label {
|
|
14321
14264
|
|
|
14322
|
-
|
|
14323
|
-
|
|
14324
|
-
|
|
14325
|
-
|
|
14326
|
-
|
|
14327
|
-
|
|
14328
|
-
|
|
14329
|
-
|
|
14330
|
-
|
|
14331
|
-
|
|
14332
|
-
|
|
14333
|
-
|
|
14334
|
-
|
|
14335
|
-
width: $kendo-radio-glyph-size;
|
|
14336
|
-
height: $kendo-radio-glyph-size;
|
|
14337
|
-
font-size: $kendo-radio-glyph-size;
|
|
14338
|
-
font-family: $kendo-radio-glyph-font-family;
|
|
14339
|
-
line-height: 1;
|
|
14340
|
-
transform: scale(0) translate(-50%, -50%);
|
|
14341
|
-
overflow: hidden;
|
|
14342
|
-
position: absolute;
|
|
14343
|
-
top: 50%;
|
|
14344
|
-
left: 50%;
|
|
14345
|
-
}
|
|
14346
|
-
|
|
14347
|
-
@if $kendo-radio-icon-type == "marker" {
|
|
14348
|
-
content: "";
|
|
14349
|
-
width: ($size / 2);
|
|
14350
|
-
height: ($size / 2);
|
|
14351
|
-
border-radius: 50%;
|
|
14352
|
-
background-color: currentColor;
|
|
14353
|
-
transform: scale(0) translate(-50%, -50%);
|
|
14354
|
-
overflow: hidden;
|
|
14355
|
-
position: absolute;
|
|
14356
|
-
top: 50%;
|
|
14357
|
-
left: 50%;
|
|
14358
|
-
}
|
|
14265
|
+
// Radio indicator
|
|
14266
|
+
.k-radio::before {
|
|
14267
|
+
@if $kendo-radio-indicator-type == "glyph" {
|
|
14268
|
+
content: $kendo-radio-checked-glyph;
|
|
14269
|
+
width: 1em;
|
|
14270
|
+
height: 1em;
|
|
14271
|
+
font-family: $kendo-radio-glyph-font-family;
|
|
14272
|
+
line-height: 1;
|
|
14273
|
+
transform: scale(0) translate(-50%, -50%);
|
|
14274
|
+
overflow: hidden;
|
|
14275
|
+
position: absolute;
|
|
14276
|
+
top: 50%;
|
|
14277
|
+
left: 50%;
|
|
14359
14278
|
}
|
|
14360
14279
|
}
|
|
14361
14280
|
|
|
14281
|
+
|
|
14362
14282
|
// Checked state
|
|
14363
14283
|
.k-radio:checked,
|
|
14364
14284
|
.k-radio.k-checked {
|
|
14365
|
-
@if $kendo-radio-
|
|
14285
|
+
@if $kendo-radio-indicator-type == "image" {
|
|
14366
14286
|
background-image: $kendo-radio-checked-image;
|
|
14367
14287
|
}
|
|
14368
14288
|
|
|
14369
|
-
@if $kendo-radio-
|
|
14370
|
-
&::before {
|
|
14371
|
-
transform: scale(1) translate(-50%, -50%);
|
|
14372
|
-
}
|
|
14373
|
-
}
|
|
14374
|
-
|
|
14375
|
-
@if $kendo-radio-icon-type == "marker" {
|
|
14289
|
+
@if $kendo-radio-indicator-type == "glyph" {
|
|
14376
14290
|
&::before {
|
|
14377
14291
|
transform: scale(1) translate(-50%, -50%);
|
|
14378
14292
|
}
|
|
14379
14293
|
}
|
|
14380
14294
|
}
|
|
14381
14295
|
|
|
14296
|
+
|
|
14382
14297
|
// Disabled state
|
|
14383
14298
|
.k-radio:disabled,
|
|
14384
|
-
.k-radio.k-disabled
|
|
14385
|
-
.k-radio:disabled + .k-radio-label,
|
|
14386
|
-
.k-radio.k-disabled + .k-radio-label {
|
|
14299
|
+
.k-radio.k-disabled {
|
|
14387
14300
|
@include disabled( $disabled-styling );
|
|
14388
14301
|
}
|
|
14302
|
+
.k-radio:disabled:checked,
|
|
14303
|
+
.k-radio.k-disabled.k-checked {
|
|
14304
|
+
@if $kendo-radio-indicator-type == "image" {
|
|
14305
|
+
background-image: $kendo-radio-disabled-checked-image;
|
|
14306
|
+
}
|
|
14307
|
+
}
|
|
14389
14308
|
|
|
14390
14309
|
|
|
14391
14310
|
// Radio wrap
|
|
@@ -14395,6 +14314,9 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
14395
14314
|
flex-flow: row nowrap;
|
|
14396
14315
|
gap: 0;
|
|
14397
14316
|
align-items: center;
|
|
14317
|
+
align-self: start;
|
|
14318
|
+
vertical-align: middle;
|
|
14319
|
+
position: relative;
|
|
14398
14320
|
|
|
14399
14321
|
&::before {
|
|
14400
14322
|
content: "\200b";
|
|
@@ -14406,63 +14328,41 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
14406
14328
|
}
|
|
14407
14329
|
}
|
|
14408
14330
|
|
|
14409
|
-
.k-radio + .k-radio-label {
|
|
14410
|
-
display: inline;
|
|
14411
|
-
}
|
|
14412
14331
|
|
|
14413
14332
|
// Radio label
|
|
14414
14333
|
.k-radio-label {
|
|
14415
14334
|
margin: 0;
|
|
14416
14335
|
padding: 0;
|
|
14417
|
-
line-height: $kendo-radio-line-height;
|
|
14418
14336
|
display: inline-flex;
|
|
14419
14337
|
align-items: flex-start;
|
|
14338
|
+
gap: $kendo-radio-label-margin-x;
|
|
14420
14339
|
vertical-align: middle;
|
|
14421
14340
|
position: relative;
|
|
14422
14341
|
cursor: pointer;
|
|
14423
14342
|
|
|
14424
|
-
.k-label {
|
|
14425
|
-
cursor: pointer;
|
|
14426
|
-
}
|
|
14427
|
-
|
|
14428
|
-
// Hide empty label
|
|
14429
|
-
&:empty {
|
|
14430
|
-
display: none !important; // sass-lint:disable-line no-important
|
|
14431
|
-
}
|
|
14432
|
-
|
|
14433
14343
|
.k-ripple {
|
|
14434
|
-
right: auto;
|
|
14435
|
-
bottom: auto;
|
|
14436
|
-
transform: translate(-50%, -50%);
|
|
14437
|
-
border-radius: 50%;
|
|
14438
|
-
|
|
14439
14344
|
// Hide ripple temporarily
|
|
14440
14345
|
visibility: hidden !important; // sass-lint:disable-line no-important
|
|
14441
14346
|
}
|
|
14442
|
-
|
|
14443
|
-
.k-ripple-blob {
|
|
14444
|
-
// sass-lint:disable-block no-important
|
|
14445
|
-
// use !important until ripple can apply these styles from the script
|
|
14446
|
-
top: 50% !important;
|
|
14447
|
-
left: 50% !important;
|
|
14448
|
-
width: 200% !important;
|
|
14449
|
-
height: 200% !important;
|
|
14450
|
-
}
|
|
14451
14347
|
}
|
|
14452
|
-
|
|
14348
|
+
.k-radio + .k-label,
|
|
14349
|
+
.k-radio-wrap + .k-label,
|
|
14453
14350
|
.k-radio + .k-radio-label,
|
|
14454
|
-
.k-radio-
|
|
14455
|
-
|
|
14456
|
-
margin-
|
|
14351
|
+
.k-radio-wrap + .k-radio-label {
|
|
14352
|
+
display: inline;
|
|
14353
|
+
margin-inline-start: $kendo-radio-label-margin-x;
|
|
14457
14354
|
}
|
|
14458
|
-
|
|
14459
|
-
|
|
14460
|
-
|
|
14355
|
+
|
|
14356
|
+
|
|
14357
|
+
// Empty label
|
|
14358
|
+
.k-radio-label:empty {
|
|
14359
|
+
display: none !important; // sass-lint:disable-line no-important
|
|
14461
14360
|
}
|
|
14462
|
-
|
|
14463
|
-
|
|
14361
|
+
.k-radio-label.k-no-text {
|
|
14362
|
+
min-width: 1px;
|
|
14464
14363
|
}
|
|
14465
14364
|
|
|
14365
|
+
|
|
14466
14366
|
// Radio list
|
|
14467
14367
|
.k-radio-list {
|
|
14468
14368
|
margin: 0;
|
|
@@ -14482,7 +14382,7 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
14482
14382
|
gap: map-get( $spacing, 1 );
|
|
14483
14383
|
|
|
14484
14384
|
.k-radio-label {
|
|
14485
|
-
|
|
14385
|
+
margin: 0;
|
|
14486
14386
|
}
|
|
14487
14387
|
}
|
|
14488
14388
|
.k-radio-list-horizontal,
|
|
@@ -14492,43 +14392,28 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
14492
14392
|
gap: $kendo-radio-list-spacing;
|
|
14493
14393
|
}
|
|
14494
14394
|
|
|
14495
|
-
// RTL
|
|
14496
|
-
.k-rtl,
|
|
14497
|
-
[dir="rtl"] {
|
|
14498
|
-
.k-radio + .k-radio-label,
|
|
14499
|
-
.k-radio-label + .k-radio,
|
|
14500
|
-
.k-label + .k-radio {
|
|
14501
|
-
margin-left: 0;
|
|
14502
|
-
margin-right: $kendo-radio-label-margin-x;
|
|
14503
|
-
}
|
|
14504
|
-
.k-radio-label > .k-radio {
|
|
14505
|
-
margin-right: 0;
|
|
14506
|
-
margin-left: $kendo-radio-label-margin-x;
|
|
14507
|
-
}
|
|
14508
|
-
kendo-label.k-radio-label > .k-radio:last-child {
|
|
14509
|
-
margin-left: 0;
|
|
14510
|
-
}
|
|
14511
|
-
kendo-label.k-radio-label > .k-label:first-child {
|
|
14512
|
-
margin-right: 0;
|
|
14513
|
-
margin-left: $kendo-radio-label-margin-x;
|
|
14514
|
-
}
|
|
14515
|
-
}
|
|
14516
14395
|
|
|
14396
|
+
// Ripple
|
|
14517
14397
|
.k-ripple-container {
|
|
14518
|
-
|
|
14519
|
-
|
|
14520
|
-
|
|
14521
|
-
|
|
14522
|
-
|
|
14523
|
-
|
|
14524
|
-
|
|
14525
|
-
|
|
14526
|
-
|
|
14527
|
-
|
|
14528
|
-
|
|
14529
|
-
|
|
14530
|
-
|
|
14531
|
-
|
|
14398
|
+
.k-radio::after {
|
|
14399
|
+
content: "";
|
|
14400
|
+
display: block;
|
|
14401
|
+
position: absolute;
|
|
14402
|
+
left: 50%;
|
|
14403
|
+
top: 50%;
|
|
14404
|
+
border-radius: 100%;
|
|
14405
|
+
z-index: -1;
|
|
14406
|
+
transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
|
|
14407
|
+
transform: translate(-50%, -50%) scale(0);
|
|
14408
|
+
transform-origin: center center;
|
|
14409
|
+
}
|
|
14410
|
+
|
|
14411
|
+
.k-radio:focus,
|
|
14412
|
+
.k-radio.k-state-focus {
|
|
14413
|
+
box-shadow: none !important; // sass-lint:disable-line no-important
|
|
14414
|
+
|
|
14415
|
+
&::after {
|
|
14416
|
+
transform: translate(-50%, -50%) scale(1);
|
|
14532
14417
|
}
|
|
14533
14418
|
}
|
|
14534
14419
|
|
|
@@ -14536,25 +14421,33 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
14536
14421
|
.k-radio.k-disabled::after {
|
|
14537
14422
|
display: none;
|
|
14538
14423
|
}
|
|
14539
|
-
}
|
|
14540
|
-
}
|
|
14541
|
-
|
|
14542
14424
|
|
|
14425
|
+
.k-radio:disabled::after,
|
|
14426
|
+
.k-radio.k-disabled::after {
|
|
14427
|
+
display: none;
|
|
14428
|
+
}
|
|
14429
|
+
}
|
|
14543
14430
|
|
|
14544
14431
|
|
|
14545
|
-
|
|
14432
|
+
// Radio size
|
|
14433
|
+
@each $size, $size-props in $kendo-radio-sizes {
|
|
14434
|
+
$_size: map-get( $size-props, size );
|
|
14435
|
+
$_glyph-size: map-get( $size-props, glyph-size );
|
|
14436
|
+
$_ripple-size: map-get( $size-props, ripple-size );
|
|
14546
14437
|
|
|
14547
|
-
|
|
14548
|
-
|
|
14549
|
-
|
|
14550
|
-
color: inherit;
|
|
14551
|
-
background-color: inherit;
|
|
14552
|
-
}
|
|
14438
|
+
.k-radio-#{$size} {
|
|
14439
|
+
width: $_size;
|
|
14440
|
+
height: $_size;
|
|
14553
14441
|
|
|
14554
|
-
|
|
14555
|
-
|
|
14556
|
-
|
|
14557
|
-
|
|
14442
|
+
&::before {
|
|
14443
|
+
font-size: $_glyph-size;
|
|
14444
|
+
}
|
|
14445
|
+
}
|
|
14446
|
+
.k-ripple-container {
|
|
14447
|
+
.k-radio-#{$size}::after {
|
|
14448
|
+
width: $_ripple-size;
|
|
14449
|
+
height: $_ripple-size;
|
|
14450
|
+
}
|
|
14558
14451
|
}
|
|
14559
14452
|
}
|
|
14560
14453
|
|
|
@@ -14565,7 +14458,7 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
14565
14458
|
// #endregion
|
|
14566
14459
|
// #region @import "_theme.scss"; -> packages/classic/scss/radio/_theme.scss
|
|
14567
14460
|
// #region @import "~@progress/kendo-theme-default/scss/radio/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/radio/_theme.scss
|
|
14568
|
-
@include exports("radio/theme") {
|
|
14461
|
+
@include exports( "radio/theme" ) {
|
|
14569
14462
|
|
|
14570
14463
|
// Radio
|
|
14571
14464
|
.k-radio {
|
|
@@ -14620,7 +14513,6 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
14620
14513
|
$kendo-radio-checked-border
|
|
14621
14514
|
);
|
|
14622
14515
|
}
|
|
14623
|
-
|
|
14624
14516
|
.k-radio:checked:focus,
|
|
14625
14517
|
.k-radio.k-checked.k-state-focus {
|
|
14626
14518
|
@include fill( $border: $kendo-radio-focus-checked-border );
|
|
@@ -14646,11 +14538,12 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
14646
14538
|
);
|
|
14647
14539
|
}
|
|
14648
14540
|
|
|
14541
|
+
|
|
14649
14542
|
// Ripple
|
|
14650
14543
|
.k-ripple-container {
|
|
14651
14544
|
.k-radio::after {
|
|
14652
|
-
background: $kendo-
|
|
14653
|
-
opacity: $kendo-
|
|
14545
|
+
background: $kendo-radio-checked-bg;
|
|
14546
|
+
opacity: $kendo-radio-ripple-opacity;
|
|
14654
14547
|
}
|
|
14655
14548
|
}
|
|
14656
14549
|
|
|
@@ -14757,23 +14650,11 @@ $slider-disabled-opacity: null !default;
|
|
|
14757
14650
|
line-height: $slider-line-height;
|
|
14758
14651
|
background: none;
|
|
14759
14652
|
display: inline-flex;
|
|
14760
|
-
align-items:
|
|
14653
|
+
align-items: center;
|
|
14761
14654
|
position: relative;
|
|
14762
14655
|
-webkit-touch-callout: none;
|
|
14763
14656
|
-webkit-tap-highlight-color: $rgba-transparent;
|
|
14764
14657
|
|
|
14765
|
-
.k-button-increase {
|
|
14766
|
-
position: absolute;
|
|
14767
|
-
right: 0;
|
|
14768
|
-
top: 0;
|
|
14769
|
-
}
|
|
14770
|
-
|
|
14771
|
-
.k-button-decrease {
|
|
14772
|
-
position: absolute;
|
|
14773
|
-
left: 0;
|
|
14774
|
-
top: 0;
|
|
14775
|
-
}
|
|
14776
|
-
|
|
14777
14658
|
.k-label {
|
|
14778
14659
|
width: auto;
|
|
14779
14660
|
font-size: .92em;
|
|
@@ -14813,30 +14694,33 @@ $slider-disabled-opacity: null !default;
|
|
|
14813
14694
|
left: auto;
|
|
14814
14695
|
right: 0;
|
|
14815
14696
|
}
|
|
14697
|
+
}
|
|
14698
|
+
}
|
|
14816
14699
|
|
|
14817
|
-
.k-button-increase {
|
|
14818
|
-
left: 0;
|
|
14819
|
-
right: auto;
|
|
14820
|
-
}
|
|
14821
14700
|
|
|
14822
|
-
|
|
14823
|
-
|
|
14824
|
-
|
|
14825
|
-
|
|
14826
|
-
|
|
14701
|
+
// Slider wrap
|
|
14702
|
+
.k-slider-wrap {
|
|
14703
|
+
width: 100%;
|
|
14704
|
+
height: 100%;
|
|
14705
|
+
box-sizing: border-box;
|
|
14706
|
+
display: flex;
|
|
14707
|
+
flex-flow: inherit;
|
|
14708
|
+
align-items: inherit;
|
|
14709
|
+
gap: inherit;
|
|
14710
|
+
position: relative;
|
|
14827
14711
|
}
|
|
14828
14712
|
|
|
14829
14713
|
|
|
14830
14714
|
// New rendering
|
|
14831
14715
|
.k-slider {
|
|
14716
|
+
width: min-content;
|
|
14717
|
+
height: min-content;
|
|
14832
14718
|
gap: calc( #{$slider-draghandle-size} / 2 );
|
|
14833
14719
|
|
|
14834
|
-
|
|
14835
|
-
|
|
14836
|
-
flex-shrink: 0;
|
|
14837
|
-
align-self: center;
|
|
14720
|
+
.k-button {
|
|
14721
|
+
flex: none;
|
|
14838
14722
|
}
|
|
14839
|
-
|
|
14723
|
+
.k-slider-track-wrap {
|
|
14840
14724
|
flex: 1 1 auto;
|
|
14841
14725
|
display: flex;
|
|
14842
14726
|
flex-flow: inherit;
|
|
@@ -14844,6 +14728,9 @@ $slider-disabled-opacity: null !default;
|
|
|
14844
14728
|
touch-action: none;
|
|
14845
14729
|
|
|
14846
14730
|
.k-slider-items {
|
|
14731
|
+
margin: 0;
|
|
14732
|
+
padding: 0;
|
|
14733
|
+
list-style: none;
|
|
14847
14734
|
// For some reason, Safari does not understand `flex-basis: 100%`
|
|
14848
14735
|
// See telerik/kendo-themes#2197
|
|
14849
14736
|
// flex-basis: 100%;
|
|
@@ -14851,8 +14738,7 @@ $slider-disabled-opacity: null !default;
|
|
|
14851
14738
|
display: flex;
|
|
14852
14739
|
flex-flow: inherit;
|
|
14853
14740
|
justify-content: space-between;
|
|
14854
|
-
|
|
14855
|
-
&::after { display: none; }
|
|
14741
|
+
user-select: none;
|
|
14856
14742
|
}
|
|
14857
14743
|
.k-tick {
|
|
14858
14744
|
flex: 0 0 1px;
|
|
@@ -14864,7 +14750,8 @@ $slider-disabled-opacity: null !default;
|
|
|
14864
14750
|
}
|
|
14865
14751
|
|
|
14866
14752
|
&-horizontal {
|
|
14867
|
-
|
|
14753
|
+
.k-slider-track-wrap {
|
|
14754
|
+
height: 26px;
|
|
14868
14755
|
|
|
14869
14756
|
.k-slider-track {
|
|
14870
14757
|
width: 100%;
|
|
@@ -14916,7 +14803,8 @@ $slider-disabled-opacity: null !default;
|
|
|
14916
14803
|
}
|
|
14917
14804
|
|
|
14918
14805
|
&-vertical {
|
|
14919
|
-
|
|
14806
|
+
.k-slider-track-wrap {
|
|
14807
|
+
width: 26px;
|
|
14920
14808
|
|
|
14921
14809
|
.k-slider-track {
|
|
14922
14810
|
height: 100%;
|
|
@@ -14949,14 +14837,8 @@ $slider-disabled-opacity: null !default;
|
|
|
14949
14837
|
// Slider vertical
|
|
14950
14838
|
.k-slider-vertical {
|
|
14951
14839
|
height: $slider-size;
|
|
14952
|
-
width: $slider-alt-size;
|
|
14953
14840
|
flex-flow: column-reverse nowrap;
|
|
14954
14841
|
|
|
14955
|
-
.k-button-decrease {
|
|
14956
|
-
bottom: 0;
|
|
14957
|
-
top: auto;
|
|
14958
|
-
}
|
|
14959
|
-
|
|
14960
14842
|
.k-tick {
|
|
14961
14843
|
text-align: right;
|
|
14962
14844
|
margin-left: 2px;
|
|
@@ -14968,32 +14850,32 @@ $slider-disabled-opacity: null !default;
|
|
|
14968
14850
|
|
|
14969
14851
|
// ticks
|
|
14970
14852
|
|
|
14971
|
-
.k-tick { background-position: -
|
|
14972
|
-
.k-slider-topleft .k-tick { background-position: -
|
|
14973
|
-
.k-slider-bottomright .k-tick { background-position: -
|
|
14853
|
+
.k-tick { background-position: -94px center; }
|
|
14854
|
+
.k-slider-topleft .k-tick { background-position: -124px center; }
|
|
14855
|
+
.k-slider-bottomright .k-tick { background-position: -154px center; }
|
|
14974
14856
|
|
|
14975
14857
|
.k-tick-large {
|
|
14976
14858
|
display: flex;
|
|
14977
14859
|
align-items: center;
|
|
14978
|
-
background-position: -
|
|
14860
|
+
background-position: -4px center;
|
|
14979
14861
|
}
|
|
14980
14862
|
|
|
14981
|
-
.k-slider-topleft .k-tick-large { background-position: -
|
|
14982
|
-
.k-slider-bottomright .k-tick-large { background-position: -
|
|
14863
|
+
.k-slider-topleft .k-tick-large { background-position: -34px center; }
|
|
14864
|
+
.k-slider-bottomright .k-tick-large { background-position: -64px center; }
|
|
14983
14865
|
|
|
14984
|
-
.k-first { background-position: -
|
|
14985
|
-
.k-tick-large.k-first { background-position: -
|
|
14986
|
-
.k-slider-topleft .k-first { background-position: -
|
|
14987
|
-
.k-slider-topleft .k-tick-large.k-first { background-position: -
|
|
14988
|
-
.k-slider-bottomright .k-first { background-position: -
|
|
14989
|
-
.k-slider-bottomright .k-tick-large.k-first { background-position: -
|
|
14866
|
+
.k-first { background-position: -94px 100%; }
|
|
14867
|
+
.k-tick-large.k-first { background-position: -4px 100%; }
|
|
14868
|
+
.k-slider-topleft .k-first { background-position: -124px 100%; }
|
|
14869
|
+
.k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; }
|
|
14870
|
+
.k-slider-bottomright .k-first { background-position: -154px 100%; }
|
|
14871
|
+
.k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; }
|
|
14990
14872
|
|
|
14991
|
-
.k-last { background-position: -
|
|
14992
|
-
.k-tick-large.k-last { background-position: -
|
|
14993
|
-
.k-slider-topleft .k-last { background-position: -
|
|
14994
|
-
.k-slider-topleft .k-tick-large.k-last { background-position: -
|
|
14995
|
-
.k-slider-bottomright .k-last { background-position: -
|
|
14996
|
-
.k-slider-bottomright .k-tick-large.k-last { background-position: -
|
|
14873
|
+
.k-last { background-position: -94px 0; }
|
|
14874
|
+
.k-tick-large.k-last { background-position: -4px 0; }
|
|
14875
|
+
.k-slider-topleft .k-last { background-position: -124px 0; }
|
|
14876
|
+
.k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; }
|
|
14877
|
+
.k-slider-bottomright .k-last { background-position: -154px 0; }
|
|
14878
|
+
.k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; }
|
|
14997
14879
|
|
|
14998
14880
|
// labels
|
|
14999
14881
|
|
|
@@ -15031,17 +14913,9 @@ $slider-disabled-opacity: null !default;
|
|
|
15031
14913
|
|
|
15032
14914
|
// Slider horizontal
|
|
15033
14915
|
.k-slider-horizontal {
|
|
15034
|
-
height: $slider-alt-size;
|
|
15035
14916
|
width: $slider-size;
|
|
15036
14917
|
flex-flow: row nowrap;
|
|
15037
14918
|
|
|
15038
|
-
// ticks
|
|
15039
|
-
.k-tick {
|
|
15040
|
-
float: left;
|
|
15041
|
-
height: 100%;
|
|
15042
|
-
text-align: center;
|
|
15043
|
-
}
|
|
15044
|
-
|
|
15045
14919
|
.k-tick { background-position: center -92px; }
|
|
15046
14920
|
.k-slider-topleft .k-tick { background-position: center -122px; }
|
|
15047
14921
|
.k-slider-bottomright .k-tick { background-position: center -152px; }
|
|
@@ -15087,9 +14961,6 @@ $slider-disabled-opacity: null !default;
|
|
|
15087
14961
|
right: 0;
|
|
15088
14962
|
left: auto;
|
|
15089
14963
|
}
|
|
15090
|
-
.k-slider-buttons .k-slider-track {
|
|
15091
|
-
right: $slider-button-spacing;
|
|
15092
|
-
}
|
|
15093
14964
|
|
|
15094
14965
|
.k-button .k-i-arrow-e,
|
|
15095
14966
|
.k-button .k-i-arrow-w {
|
|
@@ -15098,11 +14969,6 @@ $slider-disabled-opacity: null !default;
|
|
|
15098
14969
|
}
|
|
15099
14970
|
}
|
|
15100
14971
|
|
|
15101
|
-
.k-slider-wrap {
|
|
15102
|
-
height: 100%;
|
|
15103
|
-
width: 100%;
|
|
15104
|
-
}
|
|
15105
|
-
|
|
15106
14972
|
.k-slider-track,
|
|
15107
14973
|
.k-slider-selection {
|
|
15108
14974
|
margin: 0;
|
|
@@ -15124,16 +14990,6 @@ $slider-disabled-opacity: null !default;
|
|
|
15124
14990
|
}
|
|
15125
14991
|
}
|
|
15126
14992
|
|
|
15127
|
-
.k-slider-buttons .k-slider-track {
|
|
15128
|
-
.k-slider-horizontal & {
|
|
15129
|
-
left: $slider-button-spacing;
|
|
15130
|
-
}
|
|
15131
|
-
|
|
15132
|
-
.k-slider-vertical & {
|
|
15133
|
-
bottom: $slider-button-spacing;
|
|
15134
|
-
}
|
|
15135
|
-
}
|
|
15136
|
-
|
|
15137
14993
|
|
|
15138
14994
|
.k-draghandle {
|
|
15139
14995
|
background-color: transparent;
|
|
@@ -15144,30 +15000,10 @@ $slider-disabled-opacity: null !default;
|
|
|
15144
15000
|
position: absolute;
|
|
15145
15001
|
text-align: center;
|
|
15146
15002
|
text-decoration: none;
|
|
15147
|
-
box-sizing:
|
|
15003
|
+
box-sizing: border-box;
|
|
15148
15004
|
width: $slider-draghandle-size;
|
|
15149
15005
|
height: $slider-draghandle-size;
|
|
15150
15006
|
|
|
15151
|
-
.k-slider-horizontal & {
|
|
15152
|
-
top: 50%;
|
|
15153
|
-
transform: translateY(-50%);
|
|
15154
|
-
|
|
15155
|
-
&:active,
|
|
15156
|
-
&.k-pressed {
|
|
15157
|
-
transform: translateY(-50%) scale($slider-draghandle-active-scale);
|
|
15158
|
-
}
|
|
15159
|
-
}
|
|
15160
|
-
|
|
15161
|
-
.k-slider-vertical & {
|
|
15162
|
-
left: 50%;
|
|
15163
|
-
transform: translateX(-50%);
|
|
15164
|
-
|
|
15165
|
-
&:active,
|
|
15166
|
-
&.k-pressed {
|
|
15167
|
-
transform: translateX(-50%) scale($slider-draghandle-active-scale);
|
|
15168
|
-
}
|
|
15169
|
-
}
|
|
15170
|
-
|
|
15171
15007
|
.k-slider-transitions.k-slider-horizontal & {
|
|
15172
15008
|
transition: left $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
|
|
15173
15009
|
}
|
|
@@ -15196,34 +15032,18 @@ $slider-disabled-opacity: null !default;
|
|
|
15196
15032
|
}
|
|
15197
15033
|
|
|
15198
15034
|
|
|
15199
|
-
|
|
15200
|
-
|
|
15201
|
-
|
|
15202
|
-
.k-slider-
|
|
15203
|
-
|
|
15204
|
-
|
|
15205
|
-
|
|
15206
|
-
.k-slider-horizontal & {
|
|
15207
|
-
height: 100%;
|
|
15208
|
-
padding: 2px 0;
|
|
15209
|
-
box-sizing: border-box;
|
|
15210
|
-
}
|
|
15211
|
-
|
|
15212
|
-
.k-slider-vertical & {
|
|
15213
|
-
padding-top: 1px;
|
|
15214
|
-
}
|
|
15215
|
-
|
|
15216
|
-
.k-slider-vertical .k-slider-buttons & {
|
|
15217
|
-
margin: 0;
|
|
15218
|
-
padding-top: $slider-button-spacing;
|
|
15035
|
+
// Slider readonly
|
|
15036
|
+
.k-slider.k-readonly {
|
|
15037
|
+
.k-button,
|
|
15038
|
+
.k-slider-track,
|
|
15039
|
+
.k-tick,
|
|
15040
|
+
.k-draghandle {
|
|
15041
|
+
pointer-events: none;
|
|
15219
15042
|
}
|
|
15220
15043
|
}
|
|
15221
|
-
.k-slider-items::after {
|
|
15222
|
-
content: "";
|
|
15223
|
-
display: block;
|
|
15224
|
-
clear: both;
|
|
15225
|
-
}
|
|
15226
15044
|
|
|
15045
|
+
|
|
15046
|
+
// Slider tooltip
|
|
15227
15047
|
.k-slider-tooltip {
|
|
15228
15048
|
.k-callout-n,
|
|
15229
15049
|
.k-callout-s {
|
|
@@ -15235,6 +15055,21 @@ $slider-disabled-opacity: null !default;
|
|
|
15235
15055
|
margin-top: -$tooltip-callout-size / 2;
|
|
15236
15056
|
}
|
|
15237
15057
|
}
|
|
15058
|
+
|
|
15059
|
+
|
|
15060
|
+
// Angular specific
|
|
15061
|
+
.k-slider kendo-resize-sensor {
|
|
15062
|
+
position: absolute;
|
|
15063
|
+
}
|
|
15064
|
+
.k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
|
|
15065
|
+
padding-left: calc( #{$slider-draghandle-size} / 2 );
|
|
15066
|
+
padding-right: calc( #{$slider-draghandle-size} / 2 );
|
|
15067
|
+
}
|
|
15068
|
+
.k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
|
|
15069
|
+
padding-top: calc( #{$slider-draghandle-size} / 2 );
|
|
15070
|
+
padding-bottom: calc( #{$slider-draghandle-size} / 2 );
|
|
15071
|
+
}
|
|
15072
|
+
|
|
15238
15073
|
}
|
|
15239
15074
|
|
|
15240
15075
|
// #endregion
|
|
@@ -15305,12 +15140,6 @@ $slider-disabled-opacity: null !default;
|
|
|
15305
15140
|
&.k-state-disabled {
|
|
15306
15141
|
opacity: $slider-disabled-opacity;
|
|
15307
15142
|
}
|
|
15308
|
-
|
|
15309
|
-
.k-slider-wrap {
|
|
15310
|
-
&:focus {
|
|
15311
|
-
outline: none;
|
|
15312
|
-
}
|
|
15313
|
-
}
|
|
15314
15143
|
}
|
|
15315
15144
|
|
|
15316
15145
|
.k-slider-horizontal .k-tick {
|
|
@@ -15764,7 +15593,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
|
|
|
15764
15593
|
display: block;
|
|
15765
15594
|
position: absolute;
|
|
15766
15595
|
bottom: 0;
|
|
15767
|
-
content: "
|
|
15596
|
+
content: "\200b";
|
|
15768
15597
|
height: 0;
|
|
15769
15598
|
line-height: 0;
|
|
15770
15599
|
z-index: 1;
|
|
@@ -15802,7 +15631,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
|
|
|
15802
15631
|
&::after {
|
|
15803
15632
|
display: block;
|
|
15804
15633
|
position: absolute;
|
|
15805
|
-
content: "
|
|
15634
|
+
content: "\200b";
|
|
15806
15635
|
height: 0;
|
|
15807
15636
|
line-height: 0;
|
|
15808
15637
|
z-index: 1;
|
|
@@ -16360,7 +16189,7 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
|
|
|
16360
16189
|
&::before,
|
|
16361
16190
|
&::after {
|
|
16362
16191
|
display: block;
|
|
16363
|
-
content: "
|
|
16192
|
+
content: "\200b";
|
|
16364
16193
|
position: absolute;
|
|
16365
16194
|
width: 100%;
|
|
16366
16195
|
left: 0;
|
|
@@ -16390,13 +16219,14 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
|
|
|
16390
16219
|
flex: 1;
|
|
16391
16220
|
position: relative;
|
|
16392
16221
|
z-index: 1;
|
|
16222
|
+
outline: 0;
|
|
16393
16223
|
overflow: hidden;
|
|
16394
16224
|
|
|
16395
16225
|
&::before,
|
|
16396
16226
|
&::after {
|
|
16397
16227
|
display: block;
|
|
16398
16228
|
position: absolute;
|
|
16399
|
-
content: "
|
|
16229
|
+
content: "\200b";
|
|
16400
16230
|
height: 0;
|
|
16401
16231
|
line-height: 0;
|
|
16402
16232
|
z-index: 1;
|
|
@@ -16576,25 +16406,6 @@ $time-list-focused-bg: rgba(0, 0, 0, .04) !default;
|
|
|
16576
16406
|
// Component
|
|
16577
16407
|
// #region @import "_variables.scss"; -> packages/classic/scss/autocomplete/_variables.scss
|
|
16578
16408
|
// Autocomplete
|
|
16579
|
-
$autocomplete-bg: $kendo-input-bg !default;
|
|
16580
|
-
$autocomplete-text: $kendo-input-text !default;
|
|
16581
|
-
$autocomplete-border: $kendo-input-border !default;
|
|
16582
|
-
$autocomplete-shadow: $kendo-input-shadow !default;
|
|
16583
|
-
|
|
16584
|
-
$autocomplete-hovered-bg: $kendo-input-hover-bg !default;
|
|
16585
|
-
$autocomplete-hovered-text: $kendo-input-hover-text !default;
|
|
16586
|
-
$autocomplete-hovered-border: $kendo-input-hover-border !default;
|
|
16587
|
-
$autocomplete-hovered-shadow: $kendo-input-hover-shadow !default;
|
|
16588
|
-
|
|
16589
|
-
$autocomplete-focused-bg: $kendo-input-focus-bg !default;
|
|
16590
|
-
$autocomplete-focused-text: $kendo-input-focus-text !default;
|
|
16591
|
-
$autocomplete-focused-border: $kendo-input-focus-border !default;
|
|
16592
|
-
$autocomplete-focused-shadow: $kendo-input-focus-shadow !default;
|
|
16593
|
-
|
|
16594
|
-
$autocomplete-disabled-bg: null !default;
|
|
16595
|
-
$autocomplete-disabled-text: null !default;
|
|
16596
|
-
$autocomplete-disabled-border: null !default;
|
|
16597
|
-
$autocomplete-disabled-shadow: null !default;
|
|
16598
16409
|
|
|
16599
16410
|
// #endregion
|
|
16600
16411
|
// #region @import "_layout.scss"; -> packages/classic/scss/autocomplete/_layout.scss
|
|
@@ -16611,7 +16422,7 @@ $autocomplete-disabled-shadow: null !default;
|
|
|
16611
16422
|
// #endregion
|
|
16612
16423
|
// #region @import "_theme.scss"; -> packages/classic/scss/autocomplete/_theme.scss
|
|
16613
16424
|
// #region @import "~@progress/kendo-theme-default/scss/autocomplete/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/autocomplete/_theme.scss
|
|
16614
|
-
@include exports("autocomplete/theme") {
|
|
16425
|
+
@include exports( "autocomplete/theme" ) {
|
|
16615
16426
|
|
|
16616
16427
|
// Autocomplete
|
|
16617
16428
|
.k-autocomplete {}
|
|
@@ -17135,10 +16946,6 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
|
|
|
17135
16946
|
z-index: 1;
|
|
17136
16947
|
}
|
|
17137
16948
|
|
|
17138
|
-
.k-slider-wrap > .k-slider-track {
|
|
17139
|
-
height: $colorgradient-slider-vertical-size;
|
|
17140
|
-
}
|
|
17141
|
-
|
|
17142
16949
|
.k-slider-selection {
|
|
17143
16950
|
display: none;
|
|
17144
16951
|
}
|
|
@@ -17508,10 +17315,15 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
|
|
|
17508
17315
|
@include exports( "colorpicker/layout" ) {
|
|
17509
17316
|
|
|
17510
17317
|
// Color picker
|
|
17511
|
-
.k-
|
|
17318
|
+
.k-color-picker {
|
|
17512
17319
|
width: min-content;
|
|
17513
17320
|
}
|
|
17514
17321
|
|
|
17322
|
+
// Alias
|
|
17323
|
+
.k-colorpicker {
|
|
17324
|
+
@extend .k-color-picker;
|
|
17325
|
+
}
|
|
17326
|
+
|
|
17515
17327
|
}
|
|
17516
17328
|
|
|
17517
17329
|
// #endregion
|
|
@@ -17522,7 +17334,7 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
|
|
|
17522
17334
|
@include exports( "colorpicker/theme" ) {
|
|
17523
17335
|
|
|
17524
17336
|
// Color picker
|
|
17525
|
-
.k-
|
|
17337
|
+
.k-color-picker {}
|
|
17526
17338
|
|
|
17527
17339
|
}
|
|
17528
17340
|
|
|
@@ -17823,6 +17635,21 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
|
|
|
17823
17635
|
}
|
|
17824
17636
|
|
|
17825
17637
|
|
|
17638
|
+
// Angular specific
|
|
17639
|
+
kendo-daterange {
|
|
17640
|
+
// @extend .k-daterangepicker;
|
|
17641
|
+
}
|
|
17642
|
+
|
|
17643
|
+
|
|
17644
|
+
// React specific
|
|
17645
|
+
.k-daterangepicker-wrap {
|
|
17646
|
+
display: inherit;
|
|
17647
|
+
flex-flow: inherit;
|
|
17648
|
+
align-items: inherit;
|
|
17649
|
+
gap: inherit;
|
|
17650
|
+
}
|
|
17651
|
+
|
|
17652
|
+
|
|
17826
17653
|
// Alias
|
|
17827
17654
|
.k-daterangepicker {
|
|
17828
17655
|
@extend .k-daterange-picker;
|
|
@@ -18252,13 +18079,28 @@ $dropdownlist-focused-shadow: $kendo-input-focus-shadow !default;
|
|
|
18252
18079
|
// Dropdown operator
|
|
18253
18080
|
.k-dropdown-operator {
|
|
18254
18081
|
width: min-content;
|
|
18082
|
+
flex: none;
|
|
18255
18083
|
aspect-ratio: 1;
|
|
18256
18084
|
|
|
18085
|
+
.k-input-button {
|
|
18086
|
+
border-width: 0;
|
|
18087
|
+
}
|
|
18088
|
+
.k-input-button .k-button-icon {
|
|
18089
|
+
width: auto;
|
|
18090
|
+
aspect-ratio: 1;
|
|
18091
|
+
}
|
|
18092
|
+
|
|
18257
18093
|
.k-input-inner {
|
|
18258
18094
|
display: none;
|
|
18259
18095
|
}
|
|
18260
18096
|
}
|
|
18261
18097
|
|
|
18098
|
+
// Alias
|
|
18099
|
+
.k-dropdown,
|
|
18100
|
+
.k-dropdownlist {
|
|
18101
|
+
@extend .k-dropdown-list !optional;
|
|
18102
|
+
}
|
|
18103
|
+
|
|
18262
18104
|
}
|
|
18263
18105
|
|
|
18264
18106
|
// #endregion
|
|
@@ -18386,30 +18228,30 @@ $dropdownlist-focused-shadow: $kendo-input-focus-shadow !default;
|
|
|
18386
18228
|
// #region @import "_variables.scss"; -> packages/classic/scss/treeview/_variables.scss
|
|
18387
18229
|
// Treeview
|
|
18388
18230
|
|
|
18389
|
-
///
|
|
18231
|
+
/// Font family of the treeview component.
|
|
18390
18232
|
/// @group treeview
|
|
18391
18233
|
$kendo-treeview-font-family: $font-family !default;
|
|
18392
|
-
///
|
|
18234
|
+
/// Font size of the treeview component.
|
|
18393
18235
|
/// @group treeview
|
|
18394
|
-
$kendo-treeview-font-size: $font-size !default;
|
|
18395
|
-
///
|
|
18236
|
+
$kendo-treeview-font-size: $font-size-md !default;
|
|
18237
|
+
/// Line height of the treeview component.
|
|
18396
18238
|
/// @group treeview
|
|
18397
|
-
$kendo-treeview-line-height: $line-height !default;
|
|
18239
|
+
$kendo-treeview-line-height: $line-height-md !default;
|
|
18398
18240
|
|
|
18399
|
-
///
|
|
18241
|
+
/// Indentation of child groups in treeview component.
|
|
18400
18242
|
/// @group treeview
|
|
18401
18243
|
$kendo-treeview-indent: 16px !default;
|
|
18402
18244
|
|
|
18403
|
-
///
|
|
18245
|
+
/// Horizontal padding of treeview items.
|
|
18404
18246
|
/// @group treeview
|
|
18405
|
-
$kendo-treeview-item-padding-x:
|
|
18406
|
-
///
|
|
18247
|
+
$kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
|
|
18248
|
+
/// Vertical padding of treeview items.
|
|
18407
18249
|
/// @group treeview
|
|
18408
|
-
$kendo-treeview-item-padding-y:
|
|
18409
|
-
///
|
|
18250
|
+
$kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
|
|
18251
|
+
/// Border width of treeview items.
|
|
18410
18252
|
/// @group treeview
|
|
18411
18253
|
$kendo-treeview-item-border-width: 0px !default;
|
|
18412
|
-
///
|
|
18254
|
+
/// Border radius of treeview items.
|
|
18413
18255
|
/// @group treeview
|
|
18414
18256
|
$kendo-treeview-item-border-radius: $border-radius !default;
|
|
18415
18257
|
|
|
@@ -18418,97 +18260,96 @@ $kendo-treeview-item-border-radius: $border-radius !default;
|
|
|
18418
18260
|
/// @group treeview
|
|
18419
18261
|
$kendo-treeview-sizes: (
|
|
18420
18262
|
sm: (
|
|
18421
|
-
font-size:
|
|
18422
|
-
line-height: $line-height,
|
|
18423
|
-
item-padding-x: map-get( $spacing,
|
|
18424
|
-
item-padding-y: map-get( $spacing, 1 )
|
|
18263
|
+
font-size: $font-size-md,
|
|
18264
|
+
line-height: $line-height-md,
|
|
18265
|
+
item-padding-x: map-get( $spacing, 2 ),
|
|
18266
|
+
item-padding-y: map-get( $spacing, 1 ) - map-get( $spacing, thin )
|
|
18425
18267
|
),
|
|
18426
18268
|
md: (
|
|
18427
|
-
font-size: $font-size,
|
|
18428
|
-
line-height: $line-height,
|
|
18429
|
-
item-padding-x: map-get( $spacing,
|
|
18430
|
-
item-padding-y: map-get( $spacing,
|
|
18269
|
+
font-size: $font-size-md,
|
|
18270
|
+
line-height: $line-height-md,
|
|
18271
|
+
item-padding-x: map-get( $spacing, 2 ),
|
|
18272
|
+
item-padding-y: map-get( $spacing, 1 )
|
|
18431
18273
|
),
|
|
18432
18274
|
lg: (
|
|
18433
|
-
font-size:
|
|
18434
|
-
line-height: $line-height,
|
|
18275
|
+
font-size: $font-size-md,
|
|
18276
|
+
line-height: $line-height-md,
|
|
18435
18277
|
item-padding-x: map-get( $spacing, 2 ),
|
|
18436
|
-
item-padding-y: map-get( $spacing,
|
|
18278
|
+
item-padding-y: map-get( $spacing, 1 ) + map-get( $spacing, thin )
|
|
18437
18279
|
)
|
|
18438
18280
|
) !default;
|
|
18439
18281
|
|
|
18440
18282
|
|
|
18441
|
-
///
|
|
18283
|
+
/// Background color of the treeview component.
|
|
18442
18284
|
/// @group treeview
|
|
18443
18285
|
$kendo-treeview-bg: null !default;
|
|
18444
|
-
///
|
|
18286
|
+
/// Text color of the treeview component.
|
|
18445
18287
|
/// @group treeview
|
|
18446
18288
|
$kendo-treeview-text: $component-text !default;
|
|
18447
|
-
///
|
|
18289
|
+
/// Border color of the treeview component.
|
|
18448
18290
|
/// @group treeview
|
|
18449
18291
|
$kendo-treeview-border: null !default;
|
|
18450
18292
|
|
|
18451
|
-
///
|
|
18293
|
+
/// Background color of hovered treeview items.
|
|
18452
18294
|
/// @group treeview
|
|
18453
18295
|
$kendo-treeview-item-hover-bg: $hovered-bg !default;
|
|
18454
|
-
///
|
|
18296
|
+
/// Text color of hovered treeview items.
|
|
18455
18297
|
/// @group treeview
|
|
18456
18298
|
$kendo-treeview-item-hover-text: $hovered-text !default;
|
|
18457
|
-
///
|
|
18299
|
+
/// Border color of hovered treeview items.
|
|
18458
18300
|
/// @group treeview
|
|
18459
18301
|
$kendo-treeview-item-hover-border: $hovered-border !default;
|
|
18460
|
-
///
|
|
18302
|
+
/// Background gradient of hovered treeview items.
|
|
18461
18303
|
/// @group treeview
|
|
18462
18304
|
$kendo-treeview-item-hover-gradient: $hovered-gradient !default;
|
|
18463
18305
|
|
|
18464
|
-
///
|
|
18306
|
+
/// Background color of selected treeview items.
|
|
18465
18307
|
/// @group treeview
|
|
18466
18308
|
$kendo-treeview-item-selected-bg: $selected-bg !default;
|
|
18467
|
-
///
|
|
18309
|
+
/// Text color of selected treeview items.
|
|
18468
18310
|
/// @group treeview
|
|
18469
18311
|
$kendo-treeview-item-selected-text: $selected-text !default;
|
|
18470
|
-
///
|
|
18312
|
+
/// Border color of selected treeview items.
|
|
18471
18313
|
/// @group treeview
|
|
18472
18314
|
$kendo-treeview-item-selected-border: $selected-border !default;
|
|
18473
|
-
///
|
|
18315
|
+
/// Background gradient of selected treeview items.
|
|
18474
18316
|
/// @group treeview
|
|
18475
18317
|
$kendo-treeview-item-selected-gradient: $selected-gradient !default;
|
|
18476
18318
|
|
|
18477
|
-
///
|
|
18319
|
+
/// Box shadow of focused treeview items.
|
|
18478
18320
|
/// @group treeview
|
|
18479
18321
|
$kendo-treeview-item-focus-shadow: $focused-shadow !default;
|
|
18480
|
-
/// The shadow of a selected and focused treeview item.
|
|
18481
18322
|
|
|
18482
|
-
///
|
|
18323
|
+
/// Background color of load more.
|
|
18483
18324
|
/// @group treeview
|
|
18484
18325
|
$kendo-treeview-loadmore-bg: transparent !default;
|
|
18485
|
-
///
|
|
18326
|
+
/// Text color of load more.
|
|
18486
18327
|
/// @group treeview
|
|
18487
18328
|
$kendo-treeview-loadmore-text: $link-text !default;
|
|
18488
|
-
///
|
|
18329
|
+
/// Border color of load more.
|
|
18489
18330
|
/// @group treeview
|
|
18490
18331
|
$kendo-treeview-loadmore-border: null !default;
|
|
18491
18332
|
|
|
18492
|
-
///
|
|
18333
|
+
/// Background color of a hovered load more.
|
|
18493
18334
|
/// @group treeview
|
|
18494
18335
|
$kendo-treeview-loadmore-hover-bg: transparent !default;
|
|
18495
|
-
///
|
|
18336
|
+
/// Text color of a hovered load more.
|
|
18496
18337
|
/// @group treeview
|
|
18497
18338
|
$kendo-treeview-loadmore-hover-text: $link-hover-text !default;
|
|
18498
|
-
///
|
|
18339
|
+
/// Border color of a hovered load more.
|
|
18499
18340
|
/// @group treeview
|
|
18500
18341
|
$kendo-treeview-loadmore-hover-border: null !default;
|
|
18501
18342
|
|
|
18502
|
-
///
|
|
18343
|
+
/// Background color of a focused load more.
|
|
18503
18344
|
/// @group treeview
|
|
18504
18345
|
$kendo-treeview-loadmore-focus-bg: transparent !default;
|
|
18505
|
-
///
|
|
18346
|
+
/// Text color of a focused load more.
|
|
18506
18347
|
/// @group treeview
|
|
18507
18348
|
$kendo-treeview-loadmore-focus-text: $link-hover-text !default;
|
|
18508
|
-
///
|
|
18349
|
+
/// Border color of a focused load more.
|
|
18509
18350
|
/// @group treeview
|
|
18510
18351
|
$kendo-treeview-loadmore-focus-border: null !default;
|
|
18511
|
-
///
|
|
18352
|
+
/// Box shadow of a focused load more.
|
|
18512
18353
|
/// @group treeview
|
|
18513
18354
|
$kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;
|
|
18514
18355
|
|
|
@@ -18525,6 +18366,8 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18525
18366
|
box-sizing: border-box;
|
|
18526
18367
|
outline: 0;
|
|
18527
18368
|
font-family: $kendo-treeview-font-family;
|
|
18369
|
+
font-size: $kendo-treeview-font-size;
|
|
18370
|
+
line-height: $kendo-treeview-line-height;
|
|
18528
18371
|
display: block;
|
|
18529
18372
|
cursor: default;
|
|
18530
18373
|
overflow: auto;
|
|
@@ -18534,9 +18377,18 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18534
18377
|
}
|
|
18535
18378
|
|
|
18536
18379
|
|
|
18380
|
+
// Treeview filter
|
|
18381
|
+
.k-treeview-filter {
|
|
18382
|
+
padding: map-get( $spacing, 1 );
|
|
18383
|
+
box-sizing: border-box;
|
|
18384
|
+
display: block;
|
|
18385
|
+
position: relative;
|
|
18386
|
+
flex: none;
|
|
18387
|
+
}
|
|
18388
|
+
|
|
18389
|
+
|
|
18537
18390
|
// Treeview group
|
|
18538
|
-
.k-treeview-group
|
|
18539
|
-
.k-treeview .k-group {
|
|
18391
|
+
.k-treeview-group {
|
|
18540
18392
|
margin: 0;
|
|
18541
18393
|
padding: 0;
|
|
18542
18394
|
list-style: none;
|
|
@@ -18579,11 +18431,6 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18579
18431
|
flex-flow: row nowrap;
|
|
18580
18432
|
align-items: center;
|
|
18581
18433
|
cursor: pointer;
|
|
18582
|
-
|
|
18583
|
-
+ .k-checkbox-wrap,
|
|
18584
|
-
+ .k-checkbox-wrapper {
|
|
18585
|
-
margin-left: $icon-spacing;
|
|
18586
|
-
}
|
|
18587
18434
|
}
|
|
18588
18435
|
|
|
18589
18436
|
|
|
@@ -18596,13 +18443,16 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18596
18443
|
// Checkbox
|
|
18597
18444
|
.k-treeview .k-checkbox-wrap,
|
|
18598
18445
|
.k-treeview .k-checkbox-wrapper {
|
|
18446
|
+
margin-left: $icon-spacing;
|
|
18599
18447
|
margin-right: $icon-spacing;
|
|
18448
|
+
align-self: center;
|
|
18600
18449
|
}
|
|
18601
18450
|
|
|
18602
18451
|
|
|
18603
18452
|
// Treeview leaf
|
|
18604
18453
|
.k-treeview-leaf {
|
|
18605
18454
|
@include border-radius( $kendo-treeview-item-border-radius );
|
|
18455
|
+
padding: $kendo-treeview-item-padding-y $kendo-treeview-item-padding-x;
|
|
18606
18456
|
border: $kendo-treeview-item-border-width solid transparent;
|
|
18607
18457
|
text-decoration: none;
|
|
18608
18458
|
display: inline-flex;
|
|
@@ -18617,8 +18467,7 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18617
18467
|
margin-right: $icon-spacing;
|
|
18618
18468
|
}
|
|
18619
18469
|
|
|
18620
|
-
&.k-
|
|
18621
|
-
&.k-state-focused {
|
|
18470
|
+
&.k-focus {
|
|
18622
18471
|
z-index: 1;
|
|
18623
18472
|
}
|
|
18624
18473
|
}
|
|
@@ -18629,10 +18478,9 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18629
18478
|
cursor: pointer;
|
|
18630
18479
|
|
|
18631
18480
|
&:hover,
|
|
18632
|
-
&.k-
|
|
18481
|
+
&.k-hover,
|
|
18633
18482
|
&:focus,
|
|
18634
|
-
&.k-
|
|
18635
|
-
&.k-state-focused {
|
|
18483
|
+
&.k-focus {
|
|
18636
18484
|
text-decoration: underline;
|
|
18637
18485
|
}
|
|
18638
18486
|
}
|
|
@@ -18652,11 +18500,6 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18652
18500
|
.k-treeview-toggle {
|
|
18653
18501
|
margin-left: 0;
|
|
18654
18502
|
margin-right: -$kendo-treeview-indent;
|
|
18655
|
-
|
|
18656
|
-
+ .k-checkbox-wrap,
|
|
18657
|
-
+ .k-checkbox-wrapper {
|
|
18658
|
-
margin-right: $icon-spacing;
|
|
18659
|
-
}
|
|
18660
18503
|
}
|
|
18661
18504
|
|
|
18662
18505
|
// Loading
|
|
@@ -18665,13 +18508,6 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18665
18508
|
margin-left: $icon-spacing;
|
|
18666
18509
|
}
|
|
18667
18510
|
|
|
18668
|
-
// Checkbox
|
|
18669
|
-
.k-checkbox-wrap,
|
|
18670
|
-
.k-checkbox-wrapper {
|
|
18671
|
-
margin-right: 0;
|
|
18672
|
-
margin-left: $icon-spacing;
|
|
18673
|
-
}
|
|
18674
|
-
|
|
18675
18511
|
// Treeview leaf
|
|
18676
18512
|
.k-treeview-leaf,
|
|
18677
18513
|
.k-in {
|
|
@@ -18695,10 +18531,11 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18695
18531
|
line-height: $_line-height;
|
|
18696
18532
|
|
|
18697
18533
|
.k-treeview-leaf {
|
|
18698
|
-
padding: $_item-padding-
|
|
18534
|
+
padding: $_item-padding-y $_item-padding-x;
|
|
18699
18535
|
}
|
|
18700
18536
|
}
|
|
18701
18537
|
}
|
|
18538
|
+
|
|
18702
18539
|
}
|
|
18703
18540
|
|
|
18704
18541
|
// #endregion
|
|
@@ -18783,6 +18620,7 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
|
|
|
18783
18620
|
@include box-shadow( $kendo-treeview-loadmore-focus-shadow );
|
|
18784
18621
|
}
|
|
18785
18622
|
}
|
|
18623
|
+
|
|
18786
18624
|
}
|
|
18787
18625
|
|
|
18788
18626
|
// #endregion
|
|
@@ -20449,7 +20287,7 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
|
|
|
20449
20287
|
$appbar-margin-y: null !default;
|
|
20450
20288
|
$appbar-margin-x: null !default;
|
|
20451
20289
|
$appbar-padding-y: map-get( $spacing, 2 ) !default;
|
|
20452
|
-
$appbar-padding-x: map-get( $spacing,
|
|
20290
|
+
$appbar-padding-x: map-get( $spacing, 2 ) !default;
|
|
20453
20291
|
$appbar-border-width: 0px !default;
|
|
20454
20292
|
|
|
20455
20293
|
$appbar-zindex: 1000 !default;
|
|
@@ -20527,9 +20365,12 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
|
|
|
20527
20365
|
|
|
20528
20366
|
// Input
|
|
20529
20367
|
.k-input,
|
|
20530
|
-
.k-picker
|
|
20368
|
+
.k-picker {
|
|
20531
20369
|
width: 10em;
|
|
20532
20370
|
}
|
|
20371
|
+
.k-color-picker {
|
|
20372
|
+
width: min-content;
|
|
20373
|
+
}
|
|
20533
20374
|
|
|
20534
20375
|
}
|
|
20535
20376
|
|
|
@@ -22066,10 +21907,10 @@ $actionsheet-item-disabled-shadow: null !default;
|
|
|
22066
21907
|
margin-top: -($window-inner-padding-y / 2);
|
|
22067
21908
|
}
|
|
22068
21909
|
.k-window-content:first-child {
|
|
22069
|
-
padding-top:
|
|
21910
|
+
padding-top: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
|
|
22070
21911
|
}
|
|
22071
21912
|
.k-window-content:last-child {
|
|
22072
|
-
padding-bottom:
|
|
21913
|
+
padding-bottom: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
|
|
22073
21914
|
}
|
|
22074
21915
|
|
|
22075
21916
|
.k-window-iframecontent {
|
|
@@ -22099,6 +21940,16 @@ $actionsheet-item-disabled-shadow: null !default;
|
|
|
22099
21940
|
overflow: hidden;
|
|
22100
21941
|
}
|
|
22101
21942
|
|
|
21943
|
+
|
|
21944
|
+
// Prompt
|
|
21945
|
+
.k-prompt-container {
|
|
21946
|
+
|
|
21947
|
+
> .k-textarea {
|
|
21948
|
+
width: 100%;
|
|
21949
|
+
}
|
|
21950
|
+
|
|
21951
|
+
}
|
|
21952
|
+
|
|
22102
21953
|
// Resize Handles
|
|
22103
21954
|
.k-window {
|
|
22104
21955
|
.k-resize-n { top: 0; }
|
|
@@ -25482,7 +25333,7 @@ $tabstrip-content-border-focused: $component-text !default;
|
|
|
25482
25333
|
color: inherit;
|
|
25483
25334
|
background-color: transparent;
|
|
25484
25335
|
display: flex;
|
|
25485
|
-
flex-
|
|
25336
|
+
flex-flow: column nowrap;
|
|
25486
25337
|
-webkit-touch-callout: none;
|
|
25487
25338
|
-webkit-tap-highlight-color: $rgba-transparent;
|
|
25488
25339
|
|
|
@@ -25575,6 +25426,9 @@ $tabstrip-content-border-focused: $component-text !default;
|
|
|
25575
25426
|
left: 0;
|
|
25576
25427
|
transition: width .2s linear;
|
|
25577
25428
|
|
|
25429
|
+
// TODO: a better name
|
|
25430
|
+
display: none;
|
|
25431
|
+
|
|
25578
25432
|
&.k-complete {
|
|
25579
25433
|
width: 100%;
|
|
25580
25434
|
border-top-width: 0;
|
|
@@ -25588,6 +25442,7 @@ $tabstrip-content-border-focused: $component-text !default;
|
|
|
25588
25442
|
|
|
25589
25443
|
> .k-tabstrip-items {
|
|
25590
25444
|
flex: 1 1 auto;
|
|
25445
|
+
flex-wrap: nowrap;
|
|
25591
25446
|
white-space: nowrap;
|
|
25592
25447
|
overflow: hidden;
|
|
25593
25448
|
}
|
|
@@ -27390,14 +27245,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
27390
27245
|
}
|
|
27391
27246
|
}
|
|
27392
27247
|
|
|
27393
|
-
.k-grid-filter-menu {
|
|
27394
|
-
|
|
27395
|
-
.k-filter-selected-items {
|
|
27396
|
-
margin: 1em;
|
|
27397
|
-
font-weight: normal;
|
|
27398
|
-
}
|
|
27399
|
-
}
|
|
27400
|
-
|
|
27401
27248
|
.k-grid-edit-form {
|
|
27402
27249
|
|
|
27403
27250
|
.k-popup-edit-form,
|
|
@@ -27406,7 +27253,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
27406
27253
|
min-width: auto;
|
|
27407
27254
|
}
|
|
27408
27255
|
}
|
|
27409
|
-
|
|
27410
27256
|
}
|
|
27411
27257
|
|
|
27412
27258
|
.k-grid.k-grid-mobile {
|
|
@@ -27673,29 +27519,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
27673
27519
|
|
|
27674
27520
|
.k-pane-wrapper {
|
|
27675
27521
|
|
|
27676
|
-
.k-
|
|
27677
|
-
|
|
27678
|
-
.k-grid-filter-menu,
|
|
27679
|
-
.k-scheduler-edit-form {
|
|
27680
|
-
|
|
27681
|
-
> .k-header {
|
|
27682
|
-
display: flex;
|
|
27683
|
-
justify-content: space-between;
|
|
27684
|
-
padding: .3em .6em;
|
|
27685
|
-
width: auto;
|
|
27686
|
-
line-height: 2em;
|
|
27687
|
-
|
|
27688
|
-
.k-header-done,
|
|
27689
|
-
.k-header-cancel {
|
|
27690
|
-
display: flex;
|
|
27691
|
-
flex-direction: row;
|
|
27692
|
-
align-items: center;
|
|
27693
|
-
|
|
27694
|
-
.k-icon {
|
|
27695
|
-
font-size: 1.5em;
|
|
27696
|
-
}
|
|
27697
|
-
}
|
|
27698
|
-
}
|
|
27522
|
+
.k-appbar {
|
|
27523
|
+
padding: map-get( $spacing, 1 );
|
|
27699
27524
|
}
|
|
27700
27525
|
|
|
27701
27526
|
.k-list-title,
|
|
@@ -27704,6 +27529,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
27704
27529
|
display: block;
|
|
27705
27530
|
}
|
|
27706
27531
|
|
|
27532
|
+
.k-listgroup-title {
|
|
27533
|
+
padding: $listgroup-item-padding-y $listgroup-item-padding-x;
|
|
27534
|
+
font-weight: bold;
|
|
27535
|
+
text-transform: uppercase;
|
|
27536
|
+
}
|
|
27537
|
+
|
|
27707
27538
|
.k-listgroup {
|
|
27708
27539
|
|
|
27709
27540
|
.k-listgroup-item {
|
|
@@ -27711,23 +27542,56 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
27711
27542
|
}
|
|
27712
27543
|
}
|
|
27713
27544
|
.k-listgroup + .k-listgroup {
|
|
27714
|
-
margin-top:
|
|
27545
|
+
margin-top: map-get( $spacing, 4 );
|
|
27715
27546
|
}
|
|
27716
27547
|
|
|
27717
27548
|
// Column menu
|
|
27718
27549
|
.k-column-menu {
|
|
27550
|
+
padding: map-get( $spacing, 2 );
|
|
27551
|
+
display: flex;
|
|
27552
|
+
flex-flow: column nowrap;
|
|
27553
|
+
gap: map-get( $spacing, 2 );
|
|
27719
27554
|
|
|
27720
27555
|
.k-filter-item .k-filterable * {
|
|
27721
27556
|
pointer-events: none;
|
|
27722
27557
|
}
|
|
27558
|
+
|
|
27559
|
+
.k-list-title,
|
|
27560
|
+
.k-listgroup-title {
|
|
27561
|
+
padding: 0;
|
|
27562
|
+
}
|
|
27563
|
+
|
|
27564
|
+
.k-listgroup {
|
|
27565
|
+
margin-inline: -#{map-get( $spacing, 2 )};
|
|
27566
|
+
}
|
|
27723
27567
|
}
|
|
27724
27568
|
|
|
27725
27569
|
// Filter menu
|
|
27726
27570
|
.k-filter-menu {
|
|
27571
|
+
padding: map-get( $spacing, 2 );
|
|
27572
|
+
display: flex;
|
|
27573
|
+
flex-flow: column nowrap;
|
|
27574
|
+
gap: map-get( $spacing, 2 );
|
|
27575
|
+
|
|
27576
|
+
.k-list-title {
|
|
27577
|
+
padding: 0;
|
|
27578
|
+
}
|
|
27579
|
+
|
|
27580
|
+
.k-list-filter {
|
|
27581
|
+
padding: 0;
|
|
27582
|
+
display: flex;
|
|
27583
|
+
flex-flow: column nowrap;
|
|
27584
|
+
gap: inherit;
|
|
27585
|
+
}
|
|
27586
|
+
|
|
27727
27587
|
.k-filter-tools {
|
|
27728
|
-
margin: 1em;
|
|
27729
27588
|
display: flex;
|
|
27730
|
-
|
|
27589
|
+
flex-flow: row nowrap;
|
|
27590
|
+
gap: inherit;
|
|
27591
|
+
}
|
|
27592
|
+
|
|
27593
|
+
.k-listgroup {
|
|
27594
|
+
margin-inline: -#{map-get( $spacing, 2 )};
|
|
27731
27595
|
}
|
|
27732
27596
|
}
|
|
27733
27597
|
|
|
@@ -27751,7 +27615,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
27751
27615
|
}
|
|
27752
27616
|
|
|
27753
27617
|
// Pager
|
|
27754
|
-
|
|
27755
27618
|
.k-pager-wrap.k-pager-sm {
|
|
27756
27619
|
justify-content: center;
|
|
27757
27620
|
|
|
@@ -27761,39 +27624,14 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
27761
27624
|
|
|
27762
27625
|
}
|
|
27763
27626
|
|
|
27764
|
-
// IE
|
|
27765
|
-
|
|
27766
|
-
.k-ie & {
|
|
27767
|
-
|
|
27768
|
-
.k-scheduler {
|
|
27769
|
-
.k-scheduler-toolbar,
|
|
27770
|
-
.k-scheduler-footer {
|
|
27771
|
-
line-height: 2em;
|
|
27772
|
-
}
|
|
27773
|
-
}
|
|
27774
|
-
|
|
27775
|
-
.k-grid {
|
|
27776
|
-
|
|
27777
|
-
.k-icon {
|
|
27778
|
-
text-indent: 0;
|
|
27779
|
-
}
|
|
27780
|
-
}
|
|
27781
|
-
}
|
|
27782
|
-
|
|
27783
27627
|
// RTL
|
|
27784
|
-
|
|
27785
27628
|
.k-rtl &,
|
|
27786
27629
|
&[dir="rtl"],
|
|
27787
27630
|
[dir="rtl"] & {
|
|
27788
27631
|
|
|
27789
|
-
.k-
|
|
27790
|
-
.k-
|
|
27791
|
-
|
|
27792
|
-
.k-scheduler-edit-form {
|
|
27793
|
-
|
|
27794
|
-
> .k-header {
|
|
27795
|
-
flex-direction: row-reverse;
|
|
27796
|
-
}
|
|
27632
|
+
.k-header-cancel .k-i-arrow-chevron-left,
|
|
27633
|
+
.k-listgroup-item .k-select .k-i-arrow-chevron-right {
|
|
27634
|
+
transform: scaleX( -1 );
|
|
27797
27635
|
}
|
|
27798
27636
|
|
|
27799
27637
|
.k-scheduler-mobile {
|
|
@@ -27815,10 +27653,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
27815
27653
|
margin-right: 0;
|
|
27816
27654
|
}
|
|
27817
27655
|
}
|
|
27818
|
-
|
|
27819
|
-
.k-scheduler-edit-form .k-item .k-i-arrow-chevron-right {
|
|
27820
|
-
transform: scaleX(-1);
|
|
27821
|
-
}
|
|
27822
27656
|
}
|
|
27823
27657
|
}
|
|
27824
27658
|
}
|
|
@@ -27896,15 +27730,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
27896
27730
|
.k-grid-filter-menu,
|
|
27897
27731
|
.k-scheduler-edit-form {
|
|
27898
27732
|
|
|
27899
|
-
.k-header {
|
|
27900
|
-
color: $adaptive-menu-text;
|
|
27901
|
-
background-color: $adaptive-menu-bg;
|
|
27902
|
-
|
|
27903
|
-
.k-link {
|
|
27904
|
-
color: inherit;
|
|
27905
|
-
}
|
|
27906
|
-
}
|
|
27907
|
-
|
|
27908
27733
|
.k-item,
|
|
27909
27734
|
.k-link {
|
|
27910
27735
|
color: $base-text;
|
|
@@ -28023,7 +27848,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
28023
27848
|
// be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
|
|
28024
27849
|
$grid-command-cell-padding-y: calc( #{$table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$line-height-em}) / 2 ) !default;
|
|
28025
27850
|
|
|
28026
|
-
$grid-form-component-vertical-align: middle !default;
|
|
28027
27851
|
$grid-hierarchy-col-width: ($icon-size * 2) !default;
|
|
28028
27852
|
|
|
28029
27853
|
$grid-group-indicator-border-radius: $border-radius !default;
|
|
@@ -28746,6 +28570,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
28746
28570
|
|
|
28747
28571
|
> span,
|
|
28748
28572
|
.k-filtercell-wrapper {
|
|
28573
|
+
width: 100%;
|
|
28749
28574
|
display: flex;
|
|
28750
28575
|
flex-flow: row nowrap;
|
|
28751
28576
|
align-items: center;
|
|
@@ -28757,6 +28582,16 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
28757
28582
|
}
|
|
28758
28583
|
}
|
|
28759
28584
|
|
|
28585
|
+
.k-input,
|
|
28586
|
+
.k-picker {
|
|
28587
|
+
width: auto;
|
|
28588
|
+
flex: 1 1 auto;
|
|
28589
|
+
}
|
|
28590
|
+
.k-color-picker,
|
|
28591
|
+
.k-dropdown-operator {
|
|
28592
|
+
width: min-content;
|
|
28593
|
+
flex: none;
|
|
28594
|
+
}
|
|
28760
28595
|
}
|
|
28761
28596
|
|
|
28762
28597
|
// Grid content
|
|
@@ -28790,6 +28625,18 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
28790
28625
|
}
|
|
28791
28626
|
|
|
28792
28627
|
|
|
28628
|
+
// Checkboxes
|
|
28629
|
+
.k-grid th,
|
|
28630
|
+
.k-grid td {
|
|
28631
|
+
> .k-radio,
|
|
28632
|
+
> .k-radio-wrap,
|
|
28633
|
+
> .k-checkbox,
|
|
28634
|
+
> .k-checkbox-wrap {
|
|
28635
|
+
vertical-align: top;
|
|
28636
|
+
}
|
|
28637
|
+
}
|
|
28638
|
+
|
|
28639
|
+
|
|
28793
28640
|
// Edit row
|
|
28794
28641
|
.k-grid .k-edit-cell,
|
|
28795
28642
|
.k-grid .k-command-cell,
|
|
@@ -28805,13 +28652,19 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
28805
28652
|
> select,
|
|
28806
28653
|
> .k-widget:not(.k-switch) {
|
|
28807
28654
|
width: 100%;
|
|
28808
|
-
vertical-align:
|
|
28655
|
+
vertical-align: middle;
|
|
28809
28656
|
box-sizing: border-box;
|
|
28810
28657
|
}
|
|
28658
|
+
> .k-radio,
|
|
28659
|
+
> .k-checkbox,
|
|
28660
|
+
> .k-radio-wrap,
|
|
28661
|
+
> .k-checkbox-wrap {
|
|
28662
|
+
vertical-align: middle;
|
|
28663
|
+
}
|
|
28811
28664
|
}
|
|
28812
28665
|
|
|
28813
28666
|
.k-grid .k-command-cell > .k-button {
|
|
28814
|
-
vertical-align:
|
|
28667
|
+
vertical-align: middle;
|
|
28815
28668
|
}
|
|
28816
28669
|
.k-grid .k-command-cell > .k-button + .k-button {
|
|
28817
28670
|
margin-left: $grid-command-cell-button-spacing;
|
|
@@ -29261,11 +29114,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29261
29114
|
.k-item,
|
|
29262
29115
|
.k-check-all-wrap {
|
|
29263
29116
|
padding: $grid-column-menu-list-item-padding-y $grid-column-menu-list-item-padding-x;
|
|
29264
|
-
|
|
29265
|
-
|
|
29266
|
-
line-height: inherit;
|
|
29267
|
-
display: block;
|
|
29268
|
-
}
|
|
29117
|
+
display: flex;
|
|
29118
|
+
flex-flow: row nowrap;
|
|
29269
29119
|
}
|
|
29270
29120
|
}
|
|
29271
29121
|
|
|
@@ -29306,7 +29156,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29306
29156
|
padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
|
|
29307
29157
|
}
|
|
29308
29158
|
.k-popup > & {
|
|
29309
|
-
width: 100%;
|
|
29159
|
+
max-width: 100%;
|
|
29310
29160
|
}
|
|
29311
29161
|
|
|
29312
29162
|
.k-actions {
|
|
@@ -29347,10 +29197,17 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29347
29197
|
}
|
|
29348
29198
|
|
|
29349
29199
|
.k-column-list-item {
|
|
29350
|
-
position: relative;
|
|
29351
|
-
display: block;
|
|
29352
29200
|
margin: 0;
|
|
29201
|
+
display: flex;
|
|
29202
|
+
flex-flow: row nowrap;
|
|
29203
|
+
align-items: center;
|
|
29204
|
+
gap: 4px;
|
|
29353
29205
|
cursor: pointer;
|
|
29206
|
+
position: relative;
|
|
29207
|
+
|
|
29208
|
+
.k-checkbox-label {
|
|
29209
|
+
margin: 0;
|
|
29210
|
+
}
|
|
29354
29211
|
}
|
|
29355
29212
|
|
|
29356
29213
|
.k-columns-items-wrap {
|
|
@@ -29598,12 +29455,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29598
29455
|
@include fill( $bg: $grid-sticky-selected-alt-bg );
|
|
29599
29456
|
}
|
|
29600
29457
|
|
|
29601
|
-
// Hovered state
|
|
29602
|
-
.k-state-hover td,
|
|
29603
|
-
tr:hover td {
|
|
29604
|
-
@include fill( $bg: $grid-sticky-hovered-bg );
|
|
29605
|
-
}
|
|
29606
|
-
|
|
29607
29458
|
// Selected hover
|
|
29608
29459
|
.k-state-selected:hover td,
|
|
29609
29460
|
.k-state-selected.k-state-hover td {
|
|
@@ -30312,6 +30163,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
|
|
|
30312
30163
|
margin: 0;
|
|
30313
30164
|
}
|
|
30314
30165
|
.k-spreadsheet-tabstrip .k-loading {
|
|
30166
|
+
// TODO: better name
|
|
30315
30167
|
display: none;
|
|
30316
30168
|
}
|
|
30317
30169
|
.k-spreadsheet-tabstrip .k-content,
|
|
@@ -30340,9 +30192,12 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
|
|
|
30340
30192
|
}
|
|
30341
30193
|
|
|
30342
30194
|
.k-input,
|
|
30343
|
-
.k-picker
|
|
30195
|
+
.k-picker {
|
|
30344
30196
|
width: 5em;
|
|
30345
30197
|
}
|
|
30198
|
+
.k-color-picker {
|
|
30199
|
+
width: min-content;
|
|
30200
|
+
}
|
|
30346
30201
|
}
|
|
30347
30202
|
|
|
30348
30203
|
|
|
@@ -30875,7 +30730,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
|
|
|
30875
30730
|
}
|
|
30876
30731
|
.k-details-summary,
|
|
30877
30732
|
.k-columnmenu-item {
|
|
30878
|
-
padding: $kendo-menu-popup-item-padding-y
|
|
30733
|
+
padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
|
|
30879
30734
|
display: flex;
|
|
30880
30735
|
align-items: center;
|
|
30881
30736
|
cursor: pointer;
|
|
@@ -32632,9 +32487,13 @@ $treelist-footer-row-border-width: 1px !default;
|
|
|
32632
32487
|
padding: .4em .6em;
|
|
32633
32488
|
line-height: 1.6em;
|
|
32634
32489
|
|
|
32490
|
+
// TODO: see what this does and use a better name
|
|
32635
32491
|
.k-loading {
|
|
32636
32492
|
vertical-align: baseline;
|
|
32637
32493
|
margin-right: 5px;
|
|
32494
|
+
|
|
32495
|
+
// TODO
|
|
32496
|
+
display: none;
|
|
32638
32497
|
}
|
|
32639
32498
|
}
|
|
32640
32499
|
|
|
@@ -32788,6 +32647,7 @@ $filter-preview-operator-text: $subtle-text !default;
|
|
|
32788
32647
|
// #region @import "_layout.scss"; -> packages/classic/scss/filter/_layout.scss
|
|
32789
32648
|
// #region @import "~@progress/kendo-theme-default/scss/filter/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/filter/_layout.scss
|
|
32790
32649
|
@include exports("filter/layout") {
|
|
32650
|
+
|
|
32791
32651
|
.k-filter {
|
|
32792
32652
|
border-width: 0;
|
|
32793
32653
|
display: inline-block;
|
|
@@ -32829,6 +32689,9 @@ $filter-preview-operator-text: $subtle-text !default;
|
|
|
32829
32689
|
border-style: solid;
|
|
32830
32690
|
}
|
|
32831
32691
|
}
|
|
32692
|
+
.k-filter-operator .k-dropdown-list {
|
|
32693
|
+
width: $filter-operator-dropdown-width;
|
|
32694
|
+
}
|
|
32832
32695
|
|
|
32833
32696
|
.k-filter-item {
|
|
32834
32697
|
position: relative;
|
|
@@ -34295,10 +34158,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
|
|
|
34295
34158
|
display: flex;
|
|
34296
34159
|
flex-direction: column;
|
|
34297
34160
|
padding: 10px 0 40px;
|
|
34298
|
-
|
|
34299
|
-
> span {
|
|
34300
|
-
padding-bottom: $padding-y;
|
|
34301
|
-
}
|
|
34302
34161
|
}
|
|
34303
34162
|
|
|
34304
34163
|
.k-matches-container {
|
|
@@ -34537,13 +34396,13 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
|
|
|
34537
34396
|
width: 5em;
|
|
34538
34397
|
}
|
|
34539
34398
|
|
|
34540
|
-
& + .k-
|
|
34399
|
+
& + .k-color-picker,
|
|
34541
34400
|
& + .k-dropdown-list {
|
|
34542
34401
|
margin-left: map-get( $spacing, 2 );
|
|
34543
34402
|
}
|
|
34544
34403
|
}
|
|
34545
34404
|
|
|
34546
|
-
.k-
|
|
34405
|
+
.k-color-picker {
|
|
34547
34406
|
vertical-align: middle;
|
|
34548
34407
|
}
|
|
34549
34408
|
|
|
@@ -35581,7 +35440,7 @@ $gantt-offset-resize-handler-top: 50% !default;
|
|
|
35581
35440
|
position: relative;
|
|
35582
35441
|
vertical-align: middle;
|
|
35583
35442
|
}
|
|
35584
|
-
td::after { content: "\
|
|
35443
|
+
td::after { content: "\200b"; }
|
|
35585
35444
|
}
|
|
35586
35445
|
.k-task-wrap {
|
|
35587
35446
|
margin: 0 -21px;
|
|
@@ -37112,7 +36971,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
|
|
|
37112
36971
|
// TODO: add this class to jQuery rendering
|
|
37113
36972
|
// after refactoring jQuery scheduler layout to be flex
|
|
37114
36973
|
.k-recurrence-editor {
|
|
37115
|
-
display:
|
|
36974
|
+
display: flex;
|
|
37116
36975
|
flex-direction: column;
|
|
37117
36976
|
}
|
|
37118
36977
|
kendo-scheduler .k-recurrence-editor {
|
|
@@ -37364,27 +37223,40 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
|
|
|
37364
37223
|
|
|
37365
37224
|
.k-scheduler-edit-form {
|
|
37366
37225
|
|
|
37367
|
-
.k-edit-form-container { width:
|
|
37226
|
+
.k-edit-form-container { width: 100%; }
|
|
37368
37227
|
.k-edit-label { width: 17%; }
|
|
37369
37228
|
.k-edit-field { width: 77%; }
|
|
37370
37229
|
|
|
37371
|
-
.k-
|
|
37372
|
-
|
|
37230
|
+
.k-edit-field > ul > li {
|
|
37231
|
+
display: flex;
|
|
37232
|
+
flex-flow: row nowrap;
|
|
37233
|
+
align-items: center;
|
|
37234
|
+
}
|
|
37235
|
+
.k-recurrence-editor {
|
|
37236
|
+
.k-radio-list .k-radio-wrap,
|
|
37237
|
+
.k-checkbox-list .k-checkbox-wrap {
|
|
37238
|
+
align-self: center;
|
|
37239
|
+
}
|
|
37373
37240
|
}
|
|
37374
37241
|
|
|
37375
|
-
|
|
37376
|
-
.k-
|
|
37377
|
-
.k-
|
|
37378
|
-
.k-widget.k-recur-monthday {
|
|
37242
|
+
.k-recur-interval,
|
|
37243
|
+
.k-recur-count,
|
|
37244
|
+
.k-recur-monthday {
|
|
37379
37245
|
width: 5em;
|
|
37380
37246
|
}
|
|
37381
|
-
.k-
|
|
37382
|
-
.k-
|
|
37383
|
-
.k-
|
|
37384
|
-
.k-
|
|
37247
|
+
.k-recur-until,
|
|
37248
|
+
.k-recur-month,
|
|
37249
|
+
.k-recur-weekday,
|
|
37250
|
+
.k-recur-weekday-offset {
|
|
37385
37251
|
width: 10em;
|
|
37386
37252
|
}
|
|
37387
37253
|
|
|
37254
|
+
.k-scheduler-datetime-picker {
|
|
37255
|
+
display: flex;
|
|
37256
|
+
flex-flow: row nowrap;
|
|
37257
|
+
gap: map-get( $spacing, 2 );
|
|
37258
|
+
}
|
|
37259
|
+
|
|
37388
37260
|
}
|
|
37389
37261
|
|
|
37390
37262
|
}
|
|
@@ -37898,11 +37770,6 @@ $chat-quick-reply-hover-bg: $primary !default;
|
|
|
37898
37770
|
$chat-quick-reply-hover-text: $primary-contrast !default;
|
|
37899
37771
|
$chat-quick-reply-hover-border: $primary !default;
|
|
37900
37772
|
|
|
37901
|
-
$chat-message-box-bg: $kendo-input-bg !default;
|
|
37902
|
-
$chat-message-box-text: $kendo-input-text !default;
|
|
37903
|
-
$chat-message-box-border: inherit !default;
|
|
37904
|
-
$chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
37905
|
-
|
|
37906
37773
|
// #endregion
|
|
37907
37774
|
// #region @import "_layout.scss"; -> packages/classic/scss/chat/_layout.scss
|
|
37908
37775
|
// #region @import "~@progress/kendo-theme-default/scss/chat/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/chat/_layout.scss
|
|
@@ -38179,7 +38046,8 @@ $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
|
38179
38046
|
box-sizing: border-box;
|
|
38180
38047
|
border-width: 1px 0 0;
|
|
38181
38048
|
border-style: solid;
|
|
38182
|
-
border-
|
|
38049
|
+
border-color: inherit !important; // sass-lint:disable-line no-important
|
|
38050
|
+
border-radius: 0 !important; // sass-lint:disable-line no-important
|
|
38183
38051
|
flex: none;
|
|
38184
38052
|
display: flex;
|
|
38185
38053
|
flex-flow: row nowrap;
|
|
@@ -38206,11 +38074,6 @@ $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
|
38206
38074
|
display: inline-block;
|
|
38207
38075
|
}
|
|
38208
38076
|
|
|
38209
|
-
&::before,
|
|
38210
|
-
&::after {
|
|
38211
|
-
display: none;
|
|
38212
|
-
}
|
|
38213
|
-
|
|
38214
38077
|
.k-rtl &,
|
|
38215
38078
|
&[dir="rtl"] {
|
|
38216
38079
|
transform: scaleX(-1);
|
|
@@ -38357,10 +38220,16 @@ $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
|
38357
38220
|
|
|
38358
38221
|
.k-scroll-button {
|
|
38359
38222
|
height: 100%;
|
|
38223
|
+
aspect-ratio: auto;
|
|
38360
38224
|
position: absolute;
|
|
38361
38225
|
z-index: 2;
|
|
38362
38226
|
top: 50%;
|
|
38363
38227
|
transform: translateY(-50%);
|
|
38228
|
+
|
|
38229
|
+
.k-button-icon {
|
|
38230
|
+
min-width: auto;
|
|
38231
|
+
min-height: auto;
|
|
38232
|
+
}
|
|
38364
38233
|
}
|
|
38365
38234
|
.k-scroll-button-left {
|
|
38366
38235
|
left: 0;
|
|
@@ -38536,19 +38405,6 @@ $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
|
38536
38405
|
);
|
|
38537
38406
|
}
|
|
38538
38407
|
|
|
38539
|
-
|
|
38540
|
-
// Message box
|
|
38541
|
-
.k-message-box {
|
|
38542
|
-
@include fill(
|
|
38543
|
-
$chat-message-box-text,
|
|
38544
|
-
$chat-message-box-bg,
|
|
38545
|
-
$chat-message-box-border
|
|
38546
|
-
);
|
|
38547
|
-
}
|
|
38548
|
-
.k-message-box.k-state-focused {
|
|
38549
|
-
@include box-shadow( $chat-message-box-focus-shadow );
|
|
38550
|
-
}
|
|
38551
|
-
|
|
38552
38408
|
}
|
|
38553
38409
|
|
|
38554
38410
|
|
|
@@ -38676,6 +38532,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
|
|
|
38676
38532
|
padding: 0 (14px / 2);
|
|
38677
38533
|
align-items: center;
|
|
38678
38534
|
}
|
|
38535
|
+
.k-mediaplayer-volume {
|
|
38536
|
+
width: 100px;
|
|
38537
|
+
}
|
|
38679
38538
|
|
|
38680
38539
|
|
|
38681
38540
|
// Seekbar
|
|
@@ -38683,8 +38542,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
|
|
|
38683
38542
|
width: 100%;
|
|
38684
38543
|
position: absolute;
|
|
38685
38544
|
z-index: 3;
|
|
38686
|
-
top:
|
|
38545
|
+
top: 0;
|
|
38687
38546
|
left: 0;
|
|
38547
|
+
transform: translateY( -50% );
|
|
38688
38548
|
}
|
|
38689
38549
|
.k-mediaplayer-seekbar .k-slider-track {
|
|
38690
38550
|
// sass-lint:disable no-important
|
|
@@ -38692,6 +38552,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
|
|
|
38692
38552
|
// sass-lint:enable no-important
|
|
38693
38553
|
border-radius: 0;
|
|
38694
38554
|
}
|
|
38555
|
+
.k-mediaplayer-seekbar .k-slider-selection {
|
|
38556
|
+
border-radius: 0;
|
|
38557
|
+
}
|
|
38695
38558
|
|
|
38696
38559
|
.k-mediaplayer-fullscreen {
|
|
38697
38560
|
z-index: 10000;
|