@progress/kendo-theme-material 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/README.md +0 -3
- package/dist/all.css +1013 -1622
- package/dist/all.scss +1190 -1443
- package/dist/material-dataviz-v4.scss +8 -0
- package/lib/swatches/material-dataviz-v4.json +51 -0
- package/package.json +3 -3
- package/scss/appbar/_variables.scss +1 -1
- package/scss/autocomplete/_variables.scss +0 -19
- package/scss/button/_layout.scss +26 -14
- package/scss/button/_theme.scss +28 -120
- package/scss/button/_variables.scss +55 -30
- package/scss/chat/_variables.scss +0 -5
- package/scss/checkbox/_theme.scss +2 -9
- package/scss/checkbox/_variables.scss +67 -66
- package/scss/chip/_variables.scss +1 -1
- package/scss/grid/_layout.scss +0 -5
- package/scss/grid/_variables.scss +2 -2
- package/scss/list/_variables.scss +27 -27
- package/scss/listbox/_variables.scss +4 -4
- package/scss/menu/_variables.scss +44 -47
- package/scss/radio/_theme.scss +2 -9
- package/scss/radio/_variables.scss +68 -81
- package/scss/scheduler/_layout.scss +0 -16
- package/scss/table/_variables.scss +5 -5
- package/scss/treeview/_variables.scss +46 -47
package/dist/all.scss
CHANGED
|
@@ -3575,18 +3575,6 @@ $display4-letter-spacing: null !default;
|
|
|
3575
3575
|
// #region @import "~@progress/kendo-theme-default/scss/common/_loading.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/common/_loading.scss
|
|
3576
3576
|
@include exports( "common/loading" ) {
|
|
3577
3577
|
|
|
3578
|
-
// Loading indicator
|
|
3579
|
-
.k-loading {
|
|
3580
|
-
width: 64px;
|
|
3581
|
-
height: 64px;
|
|
3582
|
-
display: block;
|
|
3583
|
-
|
|
3584
|
-
.animate {
|
|
3585
|
-
animation: loading 2s infinite linear;
|
|
3586
|
-
}
|
|
3587
|
-
}
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
3578
|
// Loading mask
|
|
3591
3579
|
.k-loading-mask,
|
|
3592
3580
|
.k-loading-image,
|
|
@@ -3675,7 +3663,7 @@ $display4-letter-spacing: null !default;
|
|
|
3675
3663
|
content: "";
|
|
3676
3664
|
// See https://github.com/telerik/kendo-themes/issues/1925
|
|
3677
3665
|
border-width: 1px; // TODO: Remove once we drop IE support
|
|
3678
|
-
border-width:
|
|
3666
|
+
border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
|
|
3679
3667
|
font-size: 4em;
|
|
3680
3668
|
}
|
|
3681
3669
|
}
|
|
@@ -6878,32 +6866,32 @@ $message-box-link-text-decoration: underline !default;
|
|
|
6878
6866
|
/// Font size of the list component, if no size is set.
|
|
6879
6867
|
/// @group list
|
|
6880
6868
|
$kendo-list-font-size: null !default;
|
|
6881
|
-
$kendo-list-font-size-sm: $font-size-
|
|
6882
|
-
$kendo-list-font-size-md: $font-size-
|
|
6883
|
-
$kendo-list-font-size-lg: $font-size-
|
|
6869
|
+
$kendo-list-font-size-sm: $font-size-lg !default;
|
|
6870
|
+
$kendo-list-font-size-md: $font-size-lg !default;
|
|
6871
|
+
$kendo-list-font-size-lg: $font-size-lg !default;
|
|
6884
6872
|
|
|
6885
6873
|
/// Line height of the list component, if no size is set.
|
|
6886
6874
|
/// @group list
|
|
6887
6875
|
$kendo-list-line-height: null !default;
|
|
6888
|
-
$kendo-list-line-height-sm: 1.
|
|
6889
|
-
$kendo-list-line-height-md: 1.
|
|
6890
|
-
$kendo-list-line-height-lg: 1.
|
|
6876
|
+
$kendo-list-line-height-sm: 1.25 !default;
|
|
6877
|
+
$kendo-list-line-height-md: 1.25 !default;
|
|
6878
|
+
$kendo-list-line-height-lg: 1.25 !default;
|
|
6891
6879
|
|
|
6892
6880
|
/// Horizontal padding of list header, if no size is set.
|
|
6893
6881
|
/// @group list
|
|
6894
6882
|
$kendo-list-header-padding-x: null !default;
|
|
6895
6883
|
$kendo-list-header-padding-x-base: map-get( $spacing, 4 ) !default;
|
|
6896
|
-
$kendo-list-header-padding-x-sm: ( $
|
|
6897
|
-
$kendo-list-header-padding-x-md: ( $
|
|
6898
|
-
$kendo-list-header-padding-x-lg: ( $
|
|
6884
|
+
$kendo-list-header-padding-x-sm: map-get( $spacing, 4 ) !default;
|
|
6885
|
+
$kendo-list-header-padding-x-md: map-get( $spacing, 4 ) !default;
|
|
6886
|
+
$kendo-list-header-padding-x-lg: map-get( $spacing, 4 ) !default;
|
|
6899
6887
|
|
|
6900
6888
|
/// Vertical padding of list header, if no size is set.
|
|
6901
6889
|
/// @group list
|
|
6902
6890
|
$kendo-list-header-padding-y: null !default;
|
|
6903
|
-
$kendo-list-header-padding-y-base: map-get( $spacing,
|
|
6904
|
-
$kendo-list-header-padding-y-sm: ( $
|
|
6905
|
-
$kendo-list-header-padding-y-md: ( $
|
|
6906
|
-
$kendo-list-header-padding-y-lg: ( $
|
|
6891
|
+
$kendo-list-header-padding-y-base: map-get( $spacing, 2 ) !default;
|
|
6892
|
+
$kendo-list-header-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
|
|
6893
|
+
$kendo-list-header-padding-y-md: map-get( $spacing, 2 ) !default;
|
|
6894
|
+
$kendo-list-header-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
|
|
6907
6895
|
|
|
6908
6896
|
/// Border width of list header.
|
|
6909
6897
|
/// @group list
|
|
@@ -6931,17 +6919,17 @@ $kendo-list-header-font-weight: null !default;
|
|
|
6931
6919
|
/// @group list
|
|
6932
6920
|
$kendo-list-item-padding-x: null !default;
|
|
6933
6921
|
$kendo-list-item-padding-x-base: map-get( $spacing, 4 ) !default;
|
|
6934
|
-
$kendo-list-item-padding-x-sm: ( $
|
|
6935
|
-
$kendo-list-item-padding-x-md: ( $
|
|
6936
|
-
$kendo-list-item-padding-x-lg: ( $
|
|
6922
|
+
$kendo-list-item-padding-x-sm: map-get( $spacing, 4 ) !default;
|
|
6923
|
+
$kendo-list-item-padding-x-md: map-get( $spacing, 4 ) !default;
|
|
6924
|
+
$kendo-list-item-padding-x-lg: map-get( $spacing, 4 ) !default;
|
|
6937
6925
|
|
|
6938
6926
|
/// Vertical padding of list items, when no size is set.
|
|
6939
6927
|
/// @group list
|
|
6940
6928
|
$kendo-list-item-padding-y: null !default;
|
|
6941
|
-
$kendo-list-item-padding-y-base: map-get( $spacing,
|
|
6942
|
-
$kendo-list-item-padding-y-sm: ( $
|
|
6943
|
-
$kendo-list-item-padding-y-md: ( $
|
|
6944
|
-
$kendo-list-item-padding-y-lg: ( $
|
|
6929
|
+
$kendo-list-item-padding-y-base: map-get( $spacing, 2 ) !default;
|
|
6930
|
+
$kendo-list-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
|
|
6931
|
+
$kendo-list-item-padding-y-md: map-get( $spacing, 2 ) !default;
|
|
6932
|
+
$kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
|
|
6945
6933
|
|
|
6946
6934
|
/// Font size of list items, if no size is set.
|
|
6947
6935
|
/// @group list
|
|
@@ -6961,17 +6949,17 @@ $kendo-list-item-line-height-lg: null !default;
|
|
|
6961
6949
|
/// @group list
|
|
6962
6950
|
$kendo-list-group-item-padding-x: null !default;
|
|
6963
6951
|
$kendo-list-group-item-padding-x-base: map-get( $spacing, 4 ) !default;
|
|
6964
|
-
$kendo-list-group-item-padding-x-sm: ( $
|
|
6965
|
-
$kendo-list-group-item-padding-x-md: ( $
|
|
6966
|
-
$kendo-list-group-item-padding-x-lg: ( $
|
|
6952
|
+
$kendo-list-group-item-padding-x-sm: map-get( $spacing, 4 ) !default;
|
|
6953
|
+
$kendo-list-group-item-padding-x-md: map-get( $spacing, 4 ) !default;
|
|
6954
|
+
$kendo-list-group-item-padding-x-lg: map-get( $spacing, 4 ) !default;
|
|
6967
6955
|
|
|
6968
6956
|
/// Vertical padding of list group items, when no size is set.
|
|
6969
6957
|
/// @group list
|
|
6970
6958
|
$kendo-list-group-item-padding-y: null !default;
|
|
6971
|
-
$kendo-list-group-item-padding-y-base: map-get( $spacing,
|
|
6972
|
-
$kendo-list-group-item-padding-y-sm: ( $
|
|
6973
|
-
$kendo-list-group-item-padding-y-md: ( $
|
|
6974
|
-
$kendo-list-group-item-padding-y-lg: ( $
|
|
6959
|
+
$kendo-list-group-item-padding-y-base: map-get( $spacing, 2 ) !default;
|
|
6960
|
+
$kendo-list-group-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
|
|
6961
|
+
$kendo-list-group-item-padding-y-md: map-get( $spacing, 2 ) !default;
|
|
6962
|
+
$kendo-list-group-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
|
|
6975
6963
|
|
|
6976
6964
|
/// Border width of list group items.
|
|
6977
6965
|
/// @group list
|
|
@@ -7129,123 +7117,135 @@ $kendo-list-no-data-text: $subtle-text !default;
|
|
|
7129
7117
|
// #region @import "_variables.scss"; -> packages/material/scss/checkbox/_variables.scss
|
|
7130
7118
|
// Checkbox
|
|
7131
7119
|
|
|
7132
|
-
///
|
|
7120
|
+
/// Border width of checkbox.
|
|
7133
7121
|
/// @group checkbox
|
|
7122
|
+
$kendo-checkbox-border-width: 2px !default;
|
|
7123
|
+
|
|
7124
|
+
// Checkbox sizes
|
|
7134
7125
|
$kendo-checkbox-sizes: (
|
|
7135
|
-
sm:
|
|
7136
|
-
|
|
7137
|
-
|
|
7126
|
+
sm: (
|
|
7127
|
+
size: map-get( $spacing, 3 ),
|
|
7128
|
+
glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
|
|
7129
|
+
ripple-size: map-get( $spacing, 3 ) * 3
|
|
7130
|
+
),
|
|
7131
|
+
md: (
|
|
7132
|
+
size: map-get( $spacing, 4 ),
|
|
7133
|
+
glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
|
|
7134
|
+
ripple-size: map-get( $spacing, 4 ) * 3
|
|
7135
|
+
),
|
|
7136
|
+
lg: (
|
|
7137
|
+
size: map-get( $spacing, 5 ),
|
|
7138
|
+
glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
|
|
7139
|
+
ripple-size: map-get( $spacing, 5 ) * 3
|
|
7140
|
+
)
|
|
7138
7141
|
) !default;
|
|
7139
7142
|
|
|
7140
|
-
///
|
|
7141
|
-
/// @group checkbox
|
|
7142
|
-
$kendo-checkbox-border-width: 2px !default;
|
|
7143
|
-
/// The line height of checkbox.
|
|
7144
|
-
/// @group checkbox
|
|
7145
|
-
$kendo-checkbox-line-height: calc( #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width} ) !default;
|
|
7146
|
-
|
|
7147
|
-
/// The background of checkbox.
|
|
7143
|
+
/// Background color of checkbox.
|
|
7148
7144
|
/// @group checkbox
|
|
7149
7145
|
$kendo-checkbox-bg: null !default;
|
|
7150
|
-
///
|
|
7146
|
+
/// Color of checkbox.
|
|
7151
7147
|
/// @group checkbox
|
|
7152
|
-
$kendo-checkbox-text:
|
|
7153
|
-
///
|
|
7148
|
+
$kendo-checkbox-text: null !default;
|
|
7149
|
+
/// Border color of checkbox.
|
|
7154
7150
|
/// @group checkbox
|
|
7155
7151
|
$kendo-checkbox-border: rgba( if( $dark-theme, $white, $black ), .54 ) !default;
|
|
7156
7152
|
|
|
7157
|
-
///
|
|
7153
|
+
/// Background color of hovered checkbox.
|
|
7158
7154
|
/// @group checkbox
|
|
7159
7155
|
$kendo-checkbox-hover-bg: null !default;
|
|
7160
|
-
///
|
|
7156
|
+
/// Color of hovered checkbox.
|
|
7161
7157
|
/// @group checkbox
|
|
7162
7158
|
$kendo-checkbox-hover-text: null !default;
|
|
7163
|
-
///
|
|
7159
|
+
/// Border color of hovered checkbox.
|
|
7164
7160
|
/// @group checkbox
|
|
7165
|
-
$kendo-checkbox-hover-border:
|
|
7161
|
+
$kendo-checkbox-hover-border: null !default;
|
|
7166
7162
|
|
|
7167
|
-
///
|
|
7163
|
+
/// Background color of checked checkbox.
|
|
7168
7164
|
/// @group checkbox
|
|
7169
7165
|
$kendo-checkbox-checked-bg: $primary !default;
|
|
7170
|
-
///
|
|
7166
|
+
/// Color of checked checkbox.
|
|
7171
7167
|
/// @group checkbox
|
|
7172
7168
|
$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
|
|
7173
|
-
///
|
|
7169
|
+
/// Border color of checked checkbox.
|
|
7174
7170
|
/// @group checkbox
|
|
7175
7171
|
$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
|
|
7176
7172
|
|
|
7177
|
-
///
|
|
7173
|
+
/// Background color of indeterminate checkbox.
|
|
7178
7174
|
/// @group checkbox
|
|
7179
7175
|
$kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
|
|
7180
|
-
///
|
|
7176
|
+
/// Color of indeterminate checkbox.
|
|
7181
7177
|
/// @group checkbox
|
|
7182
7178
|
$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
|
|
7183
|
-
///
|
|
7179
|
+
/// Border color of indeterminate checkbox.
|
|
7184
7180
|
/// @group checkbox
|
|
7185
7181
|
$kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
|
|
7186
7182
|
|
|
7187
|
-
///
|
|
7183
|
+
/// Border color of focused checkbox.
|
|
7188
7184
|
/// @group checkbox
|
|
7189
|
-
$kendo-checkbox-focus-border:
|
|
7190
|
-
///
|
|
7185
|
+
$kendo-checkbox-focus-border: null !default;
|
|
7186
|
+
/// Box shadow of focused checkbox.
|
|
7191
7187
|
/// @group checkbox
|
|
7192
|
-
$kendo-checkbox-focus-shadow:
|
|
7193
|
-
///
|
|
7188
|
+
$kendo-checkbox-focus-shadow: null !default;
|
|
7189
|
+
/// Border color of focused and checked checkbox.
|
|
7194
7190
|
/// @group checkbox
|
|
7195
|
-
$kendo-checkbox-focus-checked-border:
|
|
7196
|
-
///
|
|
7191
|
+
$kendo-checkbox-focus-checked-border: null !default;
|
|
7192
|
+
/// Box shadow of focused and checked checkbox.
|
|
7197
7193
|
/// @group checkbox
|
|
7198
|
-
$kendo-checkbox-focus-checked-shadow:
|
|
7194
|
+
$kendo-checkbox-focus-checked-shadow: null !default;
|
|
7199
7195
|
|
|
7200
|
-
///
|
|
7196
|
+
/// Background color of disabled checkbox.
|
|
7201
7197
|
/// @group checkbox
|
|
7202
7198
|
$kendo-checkbox-disabled-bg: null !default;
|
|
7203
|
-
///
|
|
7199
|
+
/// Color of disabled checkbox.
|
|
7204
7200
|
/// @group checkbox
|
|
7205
7201
|
$kendo-checkbox-disabled-text: null !default;
|
|
7206
|
-
///
|
|
7202
|
+
/// Border color of disabled checkbox.
|
|
7207
7203
|
/// @group checkbox
|
|
7208
7204
|
$kendo-checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
|
|
7209
7205
|
|
|
7210
|
-
|
|
7206
|
+
|
|
7207
|
+
/// Background color of disabled and checked checkbox.
|
|
7211
7208
|
/// @group checkbox
|
|
7212
7209
|
$kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
|
|
7213
|
-
///
|
|
7210
|
+
/// Color of disabled and checked checkbox.
|
|
7214
7211
|
/// @group checkbox
|
|
7215
7212
|
$kendo-checkbox-disabled-checked-text: contrast-wcag( $kendo-checkbox-disabled-checked-bg ) !default;
|
|
7216
|
-
///
|
|
7213
|
+
/// Border color of disabled and checked checkbox.
|
|
7217
7214
|
/// @group checkbox
|
|
7218
7215
|
$kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
|
|
7219
7216
|
|
|
7220
|
-
///
|
|
7217
|
+
/// Background color of invalid checkbox.
|
|
7221
7218
|
/// @group checkbox
|
|
7222
7219
|
$kendo-checkbox-invalid-bg: null !default;
|
|
7223
|
-
///
|
|
7220
|
+
/// Color of invalid checkbox.
|
|
7224
7221
|
/// @group checkbox
|
|
7225
7222
|
$kendo-checkbox-invalid-text: $invalid-text !default;
|
|
7226
|
-
///
|
|
7223
|
+
/// Border color of invalid checkbox.
|
|
7227
7224
|
/// @group checkbox
|
|
7228
7225
|
$kendo-checkbox-invalid-border: $invalid-border !default;
|
|
7229
7226
|
|
|
7230
7227
|
|
|
7231
7228
|
// Checkbox indicator
|
|
7232
7229
|
|
|
7233
|
-
///
|
|
7230
|
+
/// Type of checkbox indicator.
|
|
7234
7231
|
/// @group checkbox
|
|
7235
|
-
$kendo-checkbox-
|
|
7232
|
+
$kendo-checkbox-indicator-type: image !default;
|
|
7236
7233
|
|
|
7237
|
-
///
|
|
7234
|
+
/// Glyph font family of checkbox indicator.
|
|
7238
7235
|
/// @group checkbox
|
|
7239
7236
|
$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
|
|
7240
|
-
|
|
7237
|
+
$kendo-checkbox-glyph-size: 10px !default;
|
|
7238
|
+
/// Glyph of checkbox indicator.
|
|
7241
7239
|
/// @group checkbox
|
|
7242
7240
|
$kendo-checkbox-checked-glyph: "\e118" !default;
|
|
7243
|
-
///
|
|
7241
|
+
/// Glyph of indeterminate checkbox indicator.
|
|
7244
7242
|
/// @group checkbox
|
|
7245
7243
|
$kendo-checkbox-indeterminate-glyph: "\e121" !default;
|
|
7246
7244
|
|
|
7245
|
+
/// Image of checked checkbox indicator.
|
|
7246
|
+
/// @group checkbox
|
|
7247
7247
|
$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
|
|
7248
|
-
///
|
|
7248
|
+
/// Image of checked checkbox indicator.
|
|
7249
7249
|
/// @group checkbox
|
|
7250
7250
|
$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
|
|
7251
7251
|
|
|
@@ -7259,36 +7259,25 @@ $kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
|
|
|
7259
7259
|
|
|
7260
7260
|
// Checkbox list
|
|
7261
7261
|
|
|
7262
|
-
///
|
|
7262
|
+
/// Spacing between items of horizontal checkbox list.
|
|
7263
7263
|
/// @group checkbox
|
|
7264
7264
|
$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
|
|
7265
|
-
///
|
|
7265
|
+
/// Horizontal padding of checkbox list items.
|
|
7266
7266
|
/// @group checkbox
|
|
7267
7267
|
$kendo-checkbox-list-item-padding-x: 0px !default;
|
|
7268
|
-
///
|
|
7268
|
+
/// Vertical padding of checkbox list items.
|
|
7269
7269
|
/// @group checkbox
|
|
7270
7270
|
$kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
|
|
7271
7271
|
|
|
7272
7272
|
|
|
7273
7273
|
// Checkbox ripple
|
|
7274
7274
|
|
|
7275
|
-
///
|
|
7275
|
+
/// Background color of checkbox ripple.
|
|
7276
7276
|
/// @group checkbox
|
|
7277
|
-
$kendo-checkbox-ripple-
|
|
7278
|
-
|
|
7279
|
-
md: (map-get( $kendo-checkbox-sizes, "md" ) * 3),
|
|
7280
|
-
lg: (map-get( $kendo-checkbox-sizes, "lg" ) * 3)
|
|
7281
|
-
) !default;
|
|
7282
|
-
/// The ripple margin of checkbox.
|
|
7277
|
+
$kendo-checkbox-ripple-bg: $primary !default;
|
|
7278
|
+
/// Opacity of checkbox ripple.
|
|
7283
7279
|
/// @group checkbox
|
|
7284
|
-
$kendo-checkbox-ripple-
|
|
7285
|
-
sm: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "sm" )} + #{$kendo-checkbox-border-width})),
|
|
7286
|
-
md: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width})),
|
|
7287
|
-
lg: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "lg" )} + #{$kendo-checkbox-border-width}))
|
|
7288
|
-
) !default;
|
|
7289
|
-
/// The ripple opacity of checkbox.
|
|
7290
|
-
/// @group checkbox
|
|
7291
|
-
$kendo-checkbox-ripple-opacity: .38 !default;
|
|
7280
|
+
$kendo-checkbox-ripple-opacity: .2 !default;
|
|
7292
7281
|
|
|
7293
7282
|
// #endregion
|
|
7294
7283
|
// #region @import "_layout.scss"; -> packages/material/scss/checkbox/_layout.scss
|
|
@@ -7314,51 +7303,20 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7314
7303
|
-webkit-appearance: none;
|
|
7315
7304
|
}
|
|
7316
7305
|
|
|
7317
|
-
@each $name, $size in $kendo-checkbox-sizes {
|
|
7318
|
-
// Checkbox sizes
|
|
7319
|
-
.k-checkbox-#{$name} {
|
|
7320
|
-
width: $size;
|
|
7321
|
-
height: $size;
|
|
7322
|
-
|
|
7323
|
-
+ .k-checkbox-label {
|
|
7324
7306
|
|
|
7325
|
-
|
|
7326
|
-
|
|
7327
|
-
|
|
7328
|
-
|
|
7329
|
-
|
|
7330
|
-
|
|
7331
|
-
|
|
7332
|
-
|
|
7333
|
-
|
|
7334
|
-
|
|
7335
|
-
|
|
7336
|
-
|
|
7337
|
-
|
|
7338
|
-
content: $kendo-checkbox-checked-glyph;
|
|
7339
|
-
width: ($size - map-get( $spacing, thin ));
|
|
7340
|
-
height: ($size - map-get( $spacing, thin ));
|
|
7341
|
-
font-size: ($size - map-get( $spacing, thin ));
|
|
7342
|
-
font-family: $kendo-checkbox-glyph-font-family;
|
|
7343
|
-
line-height: 1;
|
|
7344
|
-
transform: scale(0) translate(-50%, -50%);
|
|
7345
|
-
overflow: hidden;
|
|
7346
|
-
position: absolute;
|
|
7347
|
-
top: 50%;
|
|
7348
|
-
left: 50%;
|
|
7349
|
-
}
|
|
7350
|
-
|
|
7351
|
-
@if $kendo-checkbox-icon-type == "marker" {
|
|
7352
|
-
content: "";
|
|
7353
|
-
width: ($size - map-get( $spacing, 1 ));
|
|
7354
|
-
height: ($size - map-get( $spacing, 1 ));
|
|
7355
|
-
background-color: currentColor;
|
|
7356
|
-
transform: scale(0) translate(-50%, -50%);
|
|
7357
|
-
overflow: hidden;
|
|
7358
|
-
position: absolute;
|
|
7359
|
-
top: 50%;
|
|
7360
|
-
left: 50%;
|
|
7361
|
-
}
|
|
7307
|
+
// Checkbox indicator
|
|
7308
|
+
.k-checkbox::before {
|
|
7309
|
+
@if $kendo-checkbox-indicator-type == "glyph" {
|
|
7310
|
+
content: $kendo-checkbox-checked-glyph;
|
|
7311
|
+
width: 1em;
|
|
7312
|
+
height: 1em;
|
|
7313
|
+
font-family: $kendo-checkbox-glyph-font-family;
|
|
7314
|
+
line-height: 1;
|
|
7315
|
+
transform: translate(-50%, -50%) scale(0);
|
|
7316
|
+
overflow: hidden;
|
|
7317
|
+
position: absolute;
|
|
7318
|
+
top: 50%;
|
|
7319
|
+
left: 50%;
|
|
7362
7320
|
}
|
|
7363
7321
|
}
|
|
7364
7322
|
|
|
@@ -7366,52 +7324,37 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7366
7324
|
// Checked state
|
|
7367
7325
|
.k-checkbox:checked,
|
|
7368
7326
|
.k-checkbox.k-checked {
|
|
7369
|
-
@if $kendo-checkbox-
|
|
7327
|
+
@if $kendo-checkbox-indicator-type == "image" {
|
|
7370
7328
|
background-image: $kendo-checkbox-checked-image;
|
|
7371
7329
|
}
|
|
7372
7330
|
|
|
7373
|
-
@if $kendo-checkbox-
|
|
7331
|
+
@if $kendo-checkbox-indicator-type == "glyph" {
|
|
7374
7332
|
&::before {
|
|
7375
|
-
transform:
|
|
7376
|
-
}
|
|
7377
|
-
}
|
|
7378
|
-
|
|
7379
|
-
@if $kendo-checkbox-icon-type == "marker" {
|
|
7380
|
-
&::before {
|
|
7381
|
-
transform: scale(1) translate(-50%, -50%);
|
|
7333
|
+
transform: translate(-50%, -50%) scale(1);
|
|
7382
7334
|
}
|
|
7383
7335
|
}
|
|
7384
7336
|
}
|
|
7385
7337
|
|
|
7338
|
+
|
|
7386
7339
|
// Indeterminate state
|
|
7387
7340
|
.k-checkbox:indeterminate,
|
|
7388
7341
|
.k-checkbox.k-indeterminate {
|
|
7389
|
-
@if $kendo-checkbox-
|
|
7342
|
+
@if $kendo-checkbox-indicator-type == "image" {
|
|
7390
7343
|
background-image: $kendo-checkbox-indeterminate-image;
|
|
7391
7344
|
}
|
|
7392
7345
|
|
|
7393
|
-
@if $kendo-checkbox-
|
|
7346
|
+
@if $kendo-checkbox-indicator-type == "glyph" {
|
|
7394
7347
|
&::before {
|
|
7395
7348
|
content: $kendo-checkbox-indeterminate-glyph;
|
|
7396
7349
|
transform: scale(1) translate(-50%, -50%);
|
|
7397
7350
|
}
|
|
7398
7351
|
}
|
|
7399
|
-
|
|
7400
|
-
@if $kendo-checkbox-icon-type == "marker" {
|
|
7401
|
-
&::before {
|
|
7402
|
-
width: $kendo-checkbox-maker-indeterminate-width;
|
|
7403
|
-
height: $kendo-checkbox-marker-indeterminate-height;
|
|
7404
|
-
transform: scale(1) translate(-50%, -50%);
|
|
7405
|
-
}
|
|
7406
|
-
}
|
|
7407
7352
|
}
|
|
7408
7353
|
|
|
7409
7354
|
|
|
7410
7355
|
// Disabled state
|
|
7411
7356
|
.k-checkbox:disabled,
|
|
7412
|
-
.k-checkbox.k-disabled
|
|
7413
|
-
.k-checkbox:disabled + .k-checkbox-label,
|
|
7414
|
-
.k-checkbox.k-disabled + .k-checkbox-label {
|
|
7357
|
+
.k-checkbox.k-disabled {
|
|
7415
7358
|
@include disabled( $disabled-styling );
|
|
7416
7359
|
}
|
|
7417
7360
|
|
|
@@ -7423,6 +7366,9 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7423
7366
|
flex-flow: row nowrap;
|
|
7424
7367
|
gap: 0;
|
|
7425
7368
|
align-items: center;
|
|
7369
|
+
align-self: flex-start;
|
|
7370
|
+
vertical-align: middle;
|
|
7371
|
+
position: relative;
|
|
7426
7372
|
|
|
7427
7373
|
&::before {
|
|
7428
7374
|
content: "\200b";
|
|
@@ -7439,55 +7385,24 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7439
7385
|
.k-checkbox-label {
|
|
7440
7386
|
margin: 0;
|
|
7441
7387
|
padding: 0;
|
|
7442
|
-
line-height: $kendo-checkbox-line-height;
|
|
7443
7388
|
display: inline-flex;
|
|
7444
7389
|
align-items: flex-start;
|
|
7390
|
+
gap: $kendo-checkbox-label-margin-x;
|
|
7445
7391
|
vertical-align: middle;
|
|
7446
7392
|
position: relative;
|
|
7447
7393
|
cursor: pointer;
|
|
7448
7394
|
|
|
7449
|
-
.k-label {
|
|
7450
|
-
cursor: pointer;
|
|
7451
|
-
}
|
|
7452
|
-
|
|
7453
7395
|
.k-ripple {
|
|
7454
|
-
right: auto;
|
|
7455
|
-
bottom: auto;
|
|
7456
|
-
transform: translate(-50%, -50%);
|
|
7457
|
-
border-radius: 50%;
|
|
7458
|
-
|
|
7459
7396
|
// Hide ripple temporarily
|
|
7460
7397
|
visibility: hidden !important; // sass-lint:disable-line no-important
|
|
7461
7398
|
}
|
|
7462
|
-
|
|
7463
|
-
.k-ripple-blob {
|
|
7464
|
-
// sass-lint:disable-block no-important
|
|
7465
|
-
// use !important until ripple can apply these styles from the script
|
|
7466
|
-
top: 50% !important;
|
|
7467
|
-
left: 50% !important;
|
|
7468
|
-
width: 200% !important;
|
|
7469
|
-
height: 200% !important;
|
|
7470
|
-
}
|
|
7471
|
-
}
|
|
7472
|
-
.k-checkbox + .k-checkbox-label {
|
|
7473
|
-
display: inline;
|
|
7474
7399
|
}
|
|
7400
|
+
.k-checkbox + .k-label,
|
|
7401
|
+
.k-checkbox-wrap + .k-label,
|
|
7475
7402
|
.k-checkbox + .k-checkbox-label,
|
|
7476
|
-
.k-checkbox-
|
|
7477
|
-
margin-left: $kendo-checkbox-label-margin-x;
|
|
7478
|
-
}
|
|
7479
|
-
.k-checkbox-label > .k-checkbox {
|
|
7480
|
-
margin-right: $kendo-checkbox-label-margin-x;
|
|
7481
|
-
flex-shrink: 0;
|
|
7482
|
-
}
|
|
7483
|
-
kendo-label.k-checkbox-label > .k-checkbox:last-child {
|
|
7484
|
-
margin-right: 0;
|
|
7485
|
-
}
|
|
7486
|
-
kendo-label.k-checkbox-label > .k-label:first-child {
|
|
7487
|
-
margin-right: $kendo-checkbox-label-margin-x;
|
|
7488
|
-
}
|
|
7489
|
-
kendo-label.k-checkbox-label > .k-label {
|
|
7403
|
+
.k-checkbox-wrap + .k-checkbox-label {
|
|
7490
7404
|
display: inline;
|
|
7405
|
+
margin-inline-start: $kendo-checkbox-label-margin-x;
|
|
7491
7406
|
}
|
|
7492
7407
|
|
|
7493
7408
|
|
|
@@ -7495,9 +7410,6 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7495
7410
|
.k-checkbox-label:empty {
|
|
7496
7411
|
display: none !important; // sass-lint:disable-line no-important
|
|
7497
7412
|
}
|
|
7498
|
-
|
|
7499
|
-
|
|
7500
|
-
// Label with no text
|
|
7501
7413
|
.k-checkbox-label.k-no-text {
|
|
7502
7414
|
min-width: 1px;
|
|
7503
7415
|
}
|
|
@@ -7522,7 +7434,7 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7522
7434
|
gap: map-get( $spacing, 1 );
|
|
7523
7435
|
|
|
7524
7436
|
.k-checkbox-label {
|
|
7525
|
-
|
|
7437
|
+
margin: 0;
|
|
7526
7438
|
}
|
|
7527
7439
|
}
|
|
7528
7440
|
.k-checkbox-list-horizontal,
|
|
@@ -7533,46 +7445,55 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7533
7445
|
}
|
|
7534
7446
|
|
|
7535
7447
|
|
|
7536
|
-
//
|
|
7537
|
-
|
|
7538
|
-
.k-checkbox
|
|
7539
|
-
|
|
7540
|
-
|
|
7541
|
-
|
|
7542
|
-
|
|
7543
|
-
|
|
7544
|
-
|
|
7545
|
-
|
|
7448
|
+
// Ripple
|
|
7449
|
+
.k-ripple-container {
|
|
7450
|
+
.k-checkbox::after {
|
|
7451
|
+
content: "";
|
|
7452
|
+
display: block;
|
|
7453
|
+
position: absolute;
|
|
7454
|
+
left: 50%;
|
|
7455
|
+
top: 50%;
|
|
7456
|
+
border-radius: 100%;
|
|
7457
|
+
z-index: -1;
|
|
7458
|
+
transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
|
|
7459
|
+
transform: translate(-50%, -50%) scale(0);
|
|
7460
|
+
transform-origin: center center;
|
|
7546
7461
|
}
|
|
7547
|
-
|
|
7548
|
-
|
|
7462
|
+
|
|
7463
|
+
.k-checkbox:focus,
|
|
7464
|
+
.k-checkbox.k-focus {
|
|
7465
|
+
box-shadow: none !important; // sass-lint:disable-line no-important
|
|
7466
|
+
|
|
7467
|
+
&::after {
|
|
7468
|
+
transform: translate(-50%, -50%) scale(1);
|
|
7469
|
+
}
|
|
7549
7470
|
}
|
|
7550
|
-
|
|
7551
|
-
|
|
7552
|
-
|
|
7471
|
+
|
|
7472
|
+
.k-checkbox:disabled::after,
|
|
7473
|
+
.k-checkbox.k-disabled::after {
|
|
7474
|
+
display: none;
|
|
7553
7475
|
}
|
|
7554
7476
|
}
|
|
7555
7477
|
|
|
7556
|
-
.k-ripple-container {
|
|
7557
|
-
@each $name, $size in $kendo-checkbox-sizes {
|
|
7558
|
-
.k-checkbox-#{$name}::after {
|
|
7559
|
-
content: "";
|
|
7560
|
-
display: block;
|
|
7561
|
-
position: absolute;
|
|
7562
|
-
left: 0;
|
|
7563
|
-
top: 0;
|
|
7564
|
-
width: map-get( $kendo-checkbox-ripple-size, $name );
|
|
7565
|
-
height: map-get( $kendo-checkbox-ripple-size, $name );
|
|
7566
|
-
margin-left: map-get( $kendo-checkbox-ripple-margin, $name );
|
|
7567
|
-
margin-top: map-get( $kendo-checkbox-ripple-margin, $name );
|
|
7568
|
-
border-radius: 100%;
|
|
7569
|
-
z-index: 1;
|
|
7570
|
-
transform: scale(0);
|
|
7571
|
-
}
|
|
7572
7478
|
|
|
7573
|
-
|
|
7574
|
-
|
|
7575
|
-
|
|
7479
|
+
// Checkbox size
|
|
7480
|
+
@each $size, $size-props in $kendo-checkbox-sizes {
|
|
7481
|
+
$_size: map-get( $size-props, size );
|
|
7482
|
+
$_glyph-size: map-get( $size-props, glyph-size );
|
|
7483
|
+
$_ripple-size: map-get( $size-props, ripple-size );
|
|
7484
|
+
|
|
7485
|
+
.k-checkbox-#{$size} {
|
|
7486
|
+
width: $_size;
|
|
7487
|
+
height: $_size;
|
|
7488
|
+
|
|
7489
|
+
&::before {
|
|
7490
|
+
font-size: $_glyph-size;
|
|
7491
|
+
}
|
|
7492
|
+
}
|
|
7493
|
+
.k-ripple-container {
|
|
7494
|
+
.k-checkbox-#{size}::after {
|
|
7495
|
+
width: $_ripple-size;
|
|
7496
|
+
height: $_ripple-size;
|
|
7576
7497
|
}
|
|
7577
7498
|
}
|
|
7578
7499
|
}
|
|
@@ -7584,7 +7505,7 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7584
7505
|
// #endregion
|
|
7585
7506
|
// #region @import "_theme.scss"; -> packages/material/scss/checkbox/_theme.scss
|
|
7586
7507
|
// #region @import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/checkbox/_theme.scss
|
|
7587
|
-
@include exports("checkbox/theme") {
|
|
7508
|
+
@include exports( "checkbox/theme" ) {
|
|
7588
7509
|
|
|
7589
7510
|
// Checkbox
|
|
7590
7511
|
.k-checkbox {
|
|
@@ -7664,20 +7585,22 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7664
7585
|
|
|
7665
7586
|
|
|
7666
7587
|
// Invalid
|
|
7667
|
-
.k-checkbox:invalid,
|
|
7668
7588
|
.k-checkbox.k-invalid {
|
|
7669
7589
|
@include fill( $border: $kendo-checkbox-invalid-border );
|
|
7670
7590
|
}
|
|
7671
|
-
.k-checkbox:invalid + .k-checkbox-label,
|
|
7672
7591
|
.k-checkbox.k-invalid + .k-checkbox-label {
|
|
7673
7592
|
@include fill( $color: $kendo-checkbox-invalid-text );
|
|
7674
7593
|
}
|
|
7675
7594
|
|
|
7676
7595
|
|
|
7677
7596
|
// Ripple
|
|
7597
|
+
.k-checkbox-wrap .k-ripple-blob {
|
|
7598
|
+
color: $kendo-checkbox-ripple-bg;
|
|
7599
|
+
opacity: $kendo-checkbox-ripple-opacity;
|
|
7600
|
+
}
|
|
7678
7601
|
.k-ripple-container {
|
|
7679
7602
|
.k-checkbox::after {
|
|
7680
|
-
background: $kendo-checkbox-
|
|
7603
|
+
background: $kendo-checkbox-ripple-bg;
|
|
7681
7604
|
opacity: $kendo-checkbox-ripple-opacity;
|
|
7682
7605
|
}
|
|
7683
7606
|
}
|
|
@@ -7686,7 +7609,7 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7686
7609
|
|
|
7687
7610
|
// #endregion
|
|
7688
7611
|
|
|
7689
|
-
@include exports("checkbox/theme/material") {
|
|
7612
|
+
@include exports( "checkbox/theme/material" ) {
|
|
7690
7613
|
|
|
7691
7614
|
// Checkbox
|
|
7692
7615
|
.k-checkbox-label {
|
|
@@ -7697,15 +7620,8 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7697
7620
|
opacity: 1;
|
|
7698
7621
|
filter: none;
|
|
7699
7622
|
}
|
|
7700
|
-
|
|
7701
|
-
|
|
7702
|
-
// Ripple
|
|
7703
|
-
.k-ripple-blob {
|
|
7704
|
-
opacity: .2;
|
|
7705
|
-
background-color: $kendo-checkbox-checked-bg;
|
|
7706
|
-
}
|
|
7707
|
-
|
|
7708
7623
|
}
|
|
7624
|
+
|
|
7709
7625
|
}
|
|
7710
7626
|
|
|
7711
7627
|
// #endregion
|
|
@@ -7759,6 +7675,10 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7759
7675
|
flex: none;
|
|
7760
7676
|
overflow: hidden;
|
|
7761
7677
|
text-overflow: ellipsis;
|
|
7678
|
+
cursor: pointer;
|
|
7679
|
+
}
|
|
7680
|
+
.k-list-optionlabel {
|
|
7681
|
+
@extend .k-list-group-sticky-header;
|
|
7762
7682
|
}
|
|
7763
7683
|
|
|
7764
7684
|
|
|
@@ -7802,10 +7722,6 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7802
7722
|
transition-duration: 200ms;
|
|
7803
7723
|
transition-timing-function: ease;
|
|
7804
7724
|
|
|
7805
|
-
.k-checkbox-wrap {
|
|
7806
|
-
align-self: flex-start;
|
|
7807
|
-
}
|
|
7808
|
-
|
|
7809
7725
|
&.k-first::before {
|
|
7810
7726
|
content: "";
|
|
7811
7727
|
border-width: 1px 0 0;
|
|
@@ -7816,9 +7732,6 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7816
7732
|
right: 0;
|
|
7817
7733
|
}
|
|
7818
7734
|
}
|
|
7819
|
-
.k-list-optionlabel {
|
|
7820
|
-
@extend .k-list-item;
|
|
7821
|
-
}
|
|
7822
7735
|
|
|
7823
7736
|
|
|
7824
7737
|
// List group item
|
|
@@ -7945,6 +7858,12 @@ $kendo-checkbox-ripple-opacity: .38 !default;
|
|
|
7945
7858
|
white-space: normal;
|
|
7946
7859
|
}
|
|
7947
7860
|
|
|
7861
|
+
|
|
7862
|
+
// Alias
|
|
7863
|
+
.k-nodata {
|
|
7864
|
+
@extend .k-no-data !optional;
|
|
7865
|
+
}
|
|
7866
|
+
|
|
7948
7867
|
}
|
|
7949
7868
|
|
|
7950
7869
|
// #endregion
|
|
@@ -8899,31 +8818,25 @@ $badge-dot-size-lg: 12px !default;
|
|
|
8899
8818
|
|
|
8900
8819
|
/// Width of the border around the button.
|
|
8901
8820
|
/// @group button
|
|
8902
|
-
$kendo-button-border-width:
|
|
8821
|
+
$kendo-button-border-width: 1px !default;
|
|
8903
8822
|
|
|
8904
8823
|
/// Border radius of the button.
|
|
8905
8824
|
/// @group button
|
|
8906
|
-
$kendo-button-border-radius:
|
|
8907
|
-
$kendo-button-border-radius-sm: ( map-get( $spacing, 1 ) / 4 ) !default;
|
|
8908
|
-
$kendo-button-border-radius-md: ( map-get( $spacing, 1 ) / 2 ) !default;
|
|
8909
|
-
$kendo-button-border-radius-lg: map-get( $spacing, 1 ) !default;
|
|
8910
|
-
|
|
8825
|
+
$kendo-button-border-radius: null !default;
|
|
8911
8826
|
|
|
8912
8827
|
/// Horizontal padding of the button.
|
|
8913
8828
|
/// @group button
|
|
8914
8829
|
$kendo-button-padding-x: map-get( $spacing, 4 ) !default;
|
|
8915
|
-
$kendo-button-padding-x-sm: map-get( $spacing,
|
|
8830
|
+
$kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
|
|
8916
8831
|
$kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
|
|
8917
|
-
$kendo-button-padding-x-lg: map-get( $spacing,
|
|
8918
|
-
|
|
8832
|
+
$kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
|
|
8919
8833
|
|
|
8920
8834
|
/// Vertical padding of the button.
|
|
8921
8835
|
/// @group button
|
|
8922
|
-
$kendo-button-padding-y:
|
|
8923
|
-
$kendo-button-padding-y-sm: $
|
|
8924
|
-
$kendo-button-padding-y-md:
|
|
8925
|
-
$kendo-button-padding-y-lg:
|
|
8926
|
-
|
|
8836
|
+
$kendo-button-padding-y: map-get( $spacing, 2 ) !default;
|
|
8837
|
+
$kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
|
|
8838
|
+
$kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
|
|
8839
|
+
$kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
|
|
8927
8840
|
|
|
8928
8841
|
/// Font family of the button.
|
|
8929
8842
|
/// @group button
|
|
@@ -8931,17 +8844,17 @@ $kendo-button-font-family: $font-family !default;
|
|
|
8931
8844
|
|
|
8932
8845
|
/// Font sizes of the button.
|
|
8933
8846
|
/// @group button
|
|
8934
|
-
$kendo-button-font-size: $font-size !default;
|
|
8935
|
-
$kendo-button-font-size-sm: $font-size-
|
|
8936
|
-
$kendo-button-font-size-md: $font-size !default;
|
|
8937
|
-
$kendo-button-font-size-lg: $font-size-
|
|
8847
|
+
$kendo-button-font-size: $font-size-md !default;
|
|
8848
|
+
$kendo-button-font-size-sm: $font-size-md !default;
|
|
8849
|
+
$kendo-button-font-size-md: $font-size-md !default;
|
|
8850
|
+
$kendo-button-font-size-lg: $font-size-md !default;
|
|
8938
8851
|
|
|
8939
8852
|
/// Line heights used along with $font-size.
|
|
8940
8853
|
/// @group button
|
|
8941
|
-
$kendo-button-line-height: (20 / 14) !default;
|
|
8942
|
-
$kendo-button-line-height-sm: (20 / 14) !default;
|
|
8943
|
-
$kendo-button-line-height-md: (20 / 14) !default;
|
|
8944
|
-
$kendo-button-line-height-lg:
|
|
8854
|
+
$kendo-button-line-height: ( 20 / 14 ) !default;
|
|
8855
|
+
$kendo-button-line-height-sm: ( 20 / 14 ) !default;
|
|
8856
|
+
$kendo-button-line-height-md: ( 20 / 14 ) !default;
|
|
8857
|
+
$kendo-button-line-height-lg: ( 20 / 14 ) !default;
|
|
8945
8858
|
|
|
8946
8859
|
/// Calculated height of the button.
|
|
8947
8860
|
/// @group button
|
|
@@ -8951,9 +8864,15 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
|
|
|
8951
8864
|
/// @group button
|
|
8952
8865
|
$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
|
|
8953
8866
|
|
|
8867
|
+
$kendo-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
|
|
8868
|
+
$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
|
|
8869
|
+
|
|
8954
8870
|
/// Theme colors map for the button.
|
|
8955
8871
|
/// @group button
|
|
8956
|
-
$kendo-button-theme-colors: map-merge(
|
|
8872
|
+
$kendo-button-theme-colors: map-merge(
|
|
8873
|
+
$theme-colors,
|
|
8874
|
+
( "base": $base-bg )
|
|
8875
|
+
) !default;
|
|
8957
8876
|
|
|
8958
8877
|
/// The base background of the button.
|
|
8959
8878
|
/// @group button
|
|
@@ -9043,7 +8962,7 @@ $kendo-button-disabled-bg: try-shade( $body-bg, 12% ) !default;
|
|
|
9043
8962
|
$kendo-button-disabled-text: $disabled-text !default;
|
|
9044
8963
|
/// The base border color of disabled button.
|
|
9045
8964
|
/// @group button
|
|
9046
|
-
$kendo-button-disabled-border:
|
|
8965
|
+
$kendo-button-disabled-border: $kendo-button-disabled-bg !default;
|
|
9047
8966
|
/// The base background gradient of disabled button.
|
|
9048
8967
|
/// @group button
|
|
9049
8968
|
$kendo-button-disabled-gradient: null !default;
|
|
@@ -9051,6 +8970,35 @@ $kendo-button-disabled-gradient: null !default;
|
|
|
9051
8970
|
/// @group button
|
|
9052
8971
|
$kendo-button-disabled-shadow: none !default;
|
|
9053
8972
|
|
|
8973
|
+
// Solid button
|
|
8974
|
+
$kendo-solid-button-gradient: null !default;
|
|
8975
|
+
$kendo-solid-button-shade-function: "try-shade";
|
|
8976
|
+
$kendo-solid-button-shade-text-amount: null !default;
|
|
8977
|
+
$kendo-solid-button-shade-bg-amount: 0 !default;
|
|
8978
|
+
$kendo-solid-button-shade-border-amount: 0 !default;
|
|
8979
|
+
$kendo-solid-button-hover-shade-text-amount: null !default;
|
|
8980
|
+
$kendo-solid-button-hover-shade-bg-amount: null !default;
|
|
8981
|
+
$kendo-solid-button-hover-shade-border-amount: null !default;
|
|
8982
|
+
$kendo-solid-button-active-shade-text-amount: null !default;
|
|
8983
|
+
$kendo-solid-button-active-shade-bg-amount: null !default;
|
|
8984
|
+
$kendo-solid-button-active-shade-border-amount: null !default;
|
|
8985
|
+
$kendo-solid-button-shadow: null !default;
|
|
8986
|
+
$kendo-solid-button-shadow-blur: null !default;
|
|
8987
|
+
$kendo-solid-button-shadow-spread: null !default;
|
|
8988
|
+
$kendo-solid-button-shadow-opacity: null !default;
|
|
8989
|
+
|
|
8990
|
+
// Outline button
|
|
8991
|
+
$kendo-outline-button-shadow: null !default;
|
|
8992
|
+
$kendo-outline-button-shadow-blur: null !default;
|
|
8993
|
+
$kendo-outline-button-shadow-spread: null !default;
|
|
8994
|
+
$kendo-outline-button-shadow-opacity: null !default;
|
|
8995
|
+
|
|
8996
|
+
// link button
|
|
8997
|
+
$kendo-link-button-shadow: null !default;
|
|
8998
|
+
$kendo-link-button-shadow-blur: null !default;
|
|
8999
|
+
$kendo-link-button-shadow-spread: null !default;
|
|
9000
|
+
$kendo-link-button-shadow-opacity: null !default;
|
|
9001
|
+
|
|
9054
9002
|
/// The overlay opacity of hovered flat button. Used to create background for the flat button.
|
|
9055
9003
|
/// @group button
|
|
9056
9004
|
$kendo-flat-button-hover-opacity: .08 !default;
|
|
@@ -9064,13 +9012,9 @@ $kendo-flat-button-active-opacity: .16 !default;
|
|
|
9064
9012
|
/// @group button
|
|
9065
9013
|
$kendo-flat-button-selected-opacity: .22 !default;
|
|
9066
9014
|
|
|
9067
|
-
/// The
|
|
9015
|
+
/// The transition of the button.
|
|
9068
9016
|
/// @group button
|
|
9069
|
-
$kendo-button-
|
|
9070
|
-
|
|
9071
|
-
/// The base shadow of focused button group.
|
|
9072
|
-
/// @group button
|
|
9073
|
-
$kendo-button-group-focus-shadow: null !default;
|
|
9017
|
+
$kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default;
|
|
9074
9018
|
|
|
9075
9019
|
// #endregion
|
|
9076
9020
|
// #region @import "_layout.scss"; -> packages/material/scss/button/_layout.scss
|
|
@@ -9096,6 +9040,7 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9096
9040
|
outline: none;
|
|
9097
9041
|
-webkit-appearance: none;
|
|
9098
9042
|
position: relative;
|
|
9043
|
+
transition: $kendo-button-transition;
|
|
9099
9044
|
|
|
9100
9045
|
&:disabled,
|
|
9101
9046
|
&.k-disabled {
|
|
@@ -9132,7 +9077,24 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9132
9077
|
|
|
9133
9078
|
.k-button-text {}
|
|
9134
9079
|
|
|
9135
|
-
|
|
9080
|
+
|
|
9081
|
+
// Button arrow
|
|
9082
|
+
.k-button-arrow {
|
|
9083
|
+
padding-left: $kendo-button-arrow-padding-x;
|
|
9084
|
+
padding-right: $kendo-button-arrow-padding-x;
|
|
9085
|
+
flex: none;
|
|
9086
|
+
display: inline-flex;
|
|
9087
|
+
align-items: center;
|
|
9088
|
+
justify-content: center;
|
|
9089
|
+
}
|
|
9090
|
+
.k-button > .k-button-arrow {
|
|
9091
|
+
margin-inline-start: -$kendo-button-arrow-padding-x;
|
|
9092
|
+
margin-inline-end: -$kendo-button-padding-x;
|
|
9093
|
+
}
|
|
9094
|
+
.k-icon-button > .k-button-arrow {
|
|
9095
|
+
margin-inline-start: 0;
|
|
9096
|
+
margin-inline-end: -$kendo-button-padding-y;
|
|
9097
|
+
}
|
|
9136
9098
|
|
|
9137
9099
|
|
|
9138
9100
|
// Sizes
|
|
@@ -9178,15 +9140,13 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9178
9140
|
}
|
|
9179
9141
|
|
|
9180
9142
|
|
|
9181
|
-
//
|
|
9182
|
-
.k-button-rectangle { }
|
|
9183
|
-
|
|
9143
|
+
// Button shape
|
|
9184
9144
|
.k-button-square {
|
|
9185
9145
|
aspect-ratio: 1;
|
|
9186
9146
|
}
|
|
9187
9147
|
|
|
9188
9148
|
|
|
9189
|
-
// Menu
|
|
9149
|
+
// Menu button
|
|
9190
9150
|
.k-menu-button,
|
|
9191
9151
|
.k-dropdown-button {
|
|
9192
9152
|
outline: 0;
|
|
@@ -9211,67 +9171,74 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9211
9171
|
-webkit-touch-callout: none;
|
|
9212
9172
|
-webkit-tap-highlight-color: $rgba-transparent;
|
|
9213
9173
|
|
|
9214
|
-
.k-button
|
|
9215
|
-
@include border-radius( 0 );
|
|
9216
|
-
}
|
|
9217
|
-
|
|
9218
|
-
.k-button ~ .k-button {
|
|
9174
|
+
> .k-button + .k-button {
|
|
9219
9175
|
margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
|
|
9220
9176
|
}
|
|
9221
9177
|
|
|
9222
|
-
.k-button:hover,
|
|
9223
|
-
.k-button.k-hover,
|
|
9224
|
-
.k-button:
|
|
9225
|
-
.k-button.k-
|
|
9226
|
-
.k-button
|
|
9227
|
-
.k-button
|
|
9228
|
-
.k-button.k-
|
|
9178
|
+
> .k-button:hover,
|
|
9179
|
+
> .k-button.k-hover,
|
|
9180
|
+
> .k-button:focus,
|
|
9181
|
+
> .k-button.k-focus,
|
|
9182
|
+
> .k-button:active,
|
|
9183
|
+
> .k-button.k-active,
|
|
9184
|
+
> .k-button.k-selected {
|
|
9229
9185
|
z-index: 2;
|
|
9230
9186
|
}
|
|
9231
9187
|
|
|
9232
|
-
.k-
|
|
9233
|
-
|
|
9234
|
-
|
|
9188
|
+
.k-button:not(:first-child):not(:last-child) {
|
|
9189
|
+
border-start-end-radius: 0;
|
|
9190
|
+
border-end-end-radius: 0;
|
|
9191
|
+
border-start-start-radius: 0;
|
|
9192
|
+
border-end-start-radius: 0;
|
|
9235
9193
|
}
|
|
9236
|
-
.k-
|
|
9237
|
-
|
|
9238
|
-
|
|
9194
|
+
> .k-button:first-child:not(:only-child) {
|
|
9195
|
+
border-start-end-radius: 0;
|
|
9196
|
+
border-end-end-radius: 0;
|
|
9197
|
+
}
|
|
9198
|
+
> .k-button:last-child:not(:only-child) {
|
|
9199
|
+
border-start-start-radius: 0;
|
|
9200
|
+
border-end-start-radius: 0;
|
|
9201
|
+
}
|
|
9202
|
+
|
|
9203
|
+
&:disabled,
|
|
9204
|
+
&[disabled],
|
|
9205
|
+
&.k-disabled {
|
|
9206
|
+
opacity: 1;
|
|
9207
|
+
filter: none;
|
|
9239
9208
|
}
|
|
9240
9209
|
}
|
|
9241
9210
|
|
|
9242
9211
|
.k-button-group-stretched {
|
|
9243
|
-
|
|
9212
|
+
width: 100%;
|
|
9244
9213
|
|
|
9245
|
-
|
|
9246
|
-
display: inline-block;
|
|
9214
|
+
> * {
|
|
9247
9215
|
flex: 1 0 0%;
|
|
9248
9216
|
overflow: hidden;
|
|
9249
|
-
text-overflow: ellipsis;
|
|
9250
|
-
|
|
9251
|
-
> .k-icon {
|
|
9252
|
-
vertical-align: text-bottom;
|
|
9253
|
-
}
|
|
9254
9217
|
}
|
|
9255
9218
|
}
|
|
9256
9219
|
|
|
9257
9220
|
|
|
9258
9221
|
// Split button
|
|
9259
9222
|
.k-split-button {
|
|
9260
|
-
@include border-radius( 0 );
|
|
9261
9223
|
|
|
9262
|
-
|
|
9263
|
-
|
|
9264
|
-
|
|
9224
|
+
.k-split-button-arrow {
|
|
9225
|
+
padding: $kendo-button-arrow-padding-y $kendo-button-arrow-padding-x;
|
|
9226
|
+
width: auto;
|
|
9227
|
+
flex: none;
|
|
9265
9228
|
|
|
9266
|
-
|
|
9267
|
-
|
|
9229
|
+
.k-button-icon {
|
|
9230
|
+
min-width: 0;
|
|
9231
|
+
}
|
|
9268
9232
|
}
|
|
9269
9233
|
}
|
|
9270
9234
|
|
|
9271
9235
|
|
|
9272
|
-
// Flat
|
|
9236
|
+
// Flat button
|
|
9273
9237
|
.k-button-flat {
|
|
9274
|
-
|
|
9238
|
+
border-color: transparent !important; // sass-lint:disable-line no-important
|
|
9239
|
+
color: inherit;
|
|
9240
|
+
background: none !important; // sass-lint:disable-line no-important
|
|
9241
|
+
box-shadow: none !important; // sass-lint:disable-line no-important
|
|
9275
9242
|
|
|
9276
9243
|
// Overlay background
|
|
9277
9244
|
&::before {
|
|
@@ -9280,81 +9247,44 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9280
9247
|
|
|
9281
9248
|
// Focus ring
|
|
9282
9249
|
&::after {
|
|
9250
|
+
box-shadow: inset 0 0 0 2px currentColor;
|
|
9283
9251
|
display: block !important; // sass-lint:disable-line no-important
|
|
9284
9252
|
}
|
|
9285
9253
|
|
|
9286
|
-
&:focus::after
|
|
9254
|
+
&:focus::after,
|
|
9287
9255
|
&.k-focus::after {
|
|
9288
9256
|
opacity: .12;
|
|
9289
9257
|
}
|
|
9290
9258
|
}
|
|
9291
9259
|
|
|
9292
9260
|
|
|
9293
|
-
//
|
|
9294
|
-
.k-button-
|
|
9295
|
-
|
|
9296
|
-
|
|
9297
|
-
|
|
9298
|
-
&:focus,
|
|
9299
|
-
&.k-focus {
|
|
9300
|
-
text-decoration: underline;
|
|
9301
|
-
}
|
|
9302
|
-
|
|
9303
|
-
// Focus ring
|
|
9304
|
-
&::after {
|
|
9305
|
-
display: block !important; // sass-lint:disable-line no-important
|
|
9306
|
-
}
|
|
9307
|
-
|
|
9308
|
-
&:focus::after ,
|
|
9309
|
-
&.k-focus::after {
|
|
9310
|
-
opacity: .12;
|
|
9311
|
-
}
|
|
9261
|
+
// Outline button
|
|
9262
|
+
.k-button-outline {
|
|
9263
|
+
border-color: currentColor;
|
|
9264
|
+
color: inherit;
|
|
9265
|
+
background: none;
|
|
9312
9266
|
}
|
|
9313
9267
|
|
|
9314
|
-
// RTL
|
|
9315
|
-
.k-rtl,
|
|
9316
|
-
[dir="rtl"] {
|
|
9317
|
-
|
|
9318
|
-
// Button group
|
|
9319
|
-
.k-button-group {
|
|
9320
9268
|
|
|
9321
|
-
|
|
9322
|
-
|
|
9323
|
-
|
|
9324
|
-
|
|
9325
|
-
|
|
9326
|
-
|
|
9327
|
-
@include border-right-radius( $kendo-button-border-radius );
|
|
9328
|
-
}
|
|
9329
|
-
|
|
9330
|
-
.k-group-end,
|
|
9331
|
-
.k-button:last-child {
|
|
9332
|
-
@include border-left-radius( $kendo-button-border-radius );
|
|
9333
|
-
}
|
|
9334
|
-
|
|
9335
|
-
.k-group-start.k-group-end,
|
|
9336
|
-
.k-button:first-child:last-child {
|
|
9337
|
-
@include border-radius( $kendo-button-border-radius );
|
|
9338
|
-
}
|
|
9269
|
+
// Link button
|
|
9270
|
+
.k-button-link {
|
|
9271
|
+
border-color: transparent;
|
|
9272
|
+
color: inherit;
|
|
9273
|
+
text-decoration: none;
|
|
9274
|
+
background: none;
|
|
9339
9275
|
|
|
9276
|
+
&:hover,
|
|
9277
|
+
&.k-hover {
|
|
9278
|
+
text-decoration: underline;
|
|
9340
9279
|
}
|
|
9280
|
+
}
|
|
9341
9281
|
|
|
9342
|
-
// Split button
|
|
9343
|
-
.k-split-button {
|
|
9344
|
-
|
|
9345
|
-
.k-button {
|
|
9346
|
-
@include border-radius( 0 );
|
|
9347
|
-
}
|
|
9348
|
-
|
|
9349
|
-
// k-button
|
|
9350
|
-
> .k-button:first-child {
|
|
9351
|
-
@include border-right-radius( $kendo-button-border-radius );
|
|
9352
|
-
}
|
|
9353
9282
|
|
|
9354
|
-
|
|
9355
|
-
|
|
9356
|
-
|
|
9357
|
-
|
|
9283
|
+
// IE
|
|
9284
|
+
.k-ie .k-button-group,
|
|
9285
|
+
.k-ie .k-split-button {
|
|
9286
|
+
.k-button {
|
|
9287
|
+
@include border-radius( 0 );
|
|
9358
9288
|
}
|
|
9359
9289
|
}
|
|
9360
9290
|
|
|
@@ -9462,36 +9392,48 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9462
9392
|
.k-button {
|
|
9463
9393
|
text-transform: uppercase;
|
|
9464
9394
|
font-weight: 500;
|
|
9465
|
-
transition: $kendo-button-color-transition;
|
|
9466
9395
|
|
|
9467
9396
|
&::before {
|
|
9468
9397
|
display: block;
|
|
9469
|
-
transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
|
|
9398
|
+
transition: opacity .4s cubic-bezier( .25, .8, .25, 1 );
|
|
9470
9399
|
}
|
|
9471
9400
|
&::after {
|
|
9472
9401
|
display: none !important; // sass-lint:disable-line no-important
|
|
9473
9402
|
}
|
|
9403
|
+
|
|
9404
|
+
&:disabled,
|
|
9405
|
+
&[disabled],
|
|
9406
|
+
&.k-disabled,
|
|
9407
|
+
&.k-state-disabled {
|
|
9408
|
+
opacity: 1;
|
|
9409
|
+
filter: none;
|
|
9410
|
+
}
|
|
9474
9411
|
}
|
|
9475
9412
|
|
|
9476
|
-
// Outline
|
|
9413
|
+
// Outline button
|
|
9477
9414
|
.k-button-outline {
|
|
9478
9415
|
background-color: transparent !important; // sass-lint:disable-line no-important
|
|
9479
|
-
|
|
9480
|
-
&::after {
|
|
9481
|
-
display: block !important; // sass-lint:disable-line no-important
|
|
9482
|
-
box-shadow: inset 0 0 0 1px currentColor;
|
|
9483
|
-
opacity: 1;
|
|
9484
|
-
}
|
|
9416
|
+
box-shadow: none !important; // sass-lint:disable-line no-important
|
|
9485
9417
|
}
|
|
9486
9418
|
|
|
9487
9419
|
|
|
9488
|
-
// Link
|
|
9420
|
+
// Link button
|
|
9489
9421
|
.k-button-link {
|
|
9490
|
-
|
|
9491
|
-
|
|
9422
|
+
&:hover,
|
|
9423
|
+
&.k-hover,
|
|
9424
|
+
&:active,
|
|
9425
|
+
&.k-active,
|
|
9426
|
+
&.k-selected {
|
|
9427
|
+
&::before {
|
|
9428
|
+
opacity: 0;
|
|
9429
|
+
}
|
|
9492
9430
|
}
|
|
9493
|
-
|
|
9494
|
-
|
|
9431
|
+
|
|
9432
|
+
&:focus,
|
|
9433
|
+
&.k-focus {
|
|
9434
|
+
&::before {
|
|
9435
|
+
opacity: $kendo-flat-button-focus-opacity;
|
|
9436
|
+
}
|
|
9495
9437
|
}
|
|
9496
9438
|
}
|
|
9497
9439
|
|
|
@@ -9519,269 +9461,249 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9519
9461
|
// #region @import "~@progress/kendo-theme-default/scss/button/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/button/_theme.scss
|
|
9520
9462
|
@include exports( "button/theme" ) {
|
|
9521
9463
|
|
|
9522
|
-
// Solid
|
|
9523
|
-
|
|
9524
|
-
|
|
9525
|
-
|
|
9526
|
-
|
|
9527
|
-
|
|
9528
|
-
|
|
9529
|
-
|
|
9530
|
-
|
|
9531
|
-
);
|
|
9532
|
-
@include box-shadow( $kendo-button-shadow );
|
|
9464
|
+
// Solid button
|
|
9465
|
+
.k-button-solid-base {
|
|
9466
|
+
@include fill(
|
|
9467
|
+
$kendo-button-text,
|
|
9468
|
+
$kendo-button-bg,
|
|
9469
|
+
$kendo-button-border,
|
|
9470
|
+
$kendo-button-gradient
|
|
9471
|
+
);
|
|
9472
|
+
@include box-shadow( $kendo-button-shadow );
|
|
9533
9473
|
|
|
9534
|
-
|
|
9535
|
-
|
|
9536
|
-
|
|
9537
|
-
|
|
9538
|
-
|
|
9539
|
-
|
|
9540
|
-
|
|
9541
|
-
|
|
9542
|
-
|
|
9543
|
-
|
|
9544
|
-
|
|
9474
|
+
// Hover state
|
|
9475
|
+
&:hover,
|
|
9476
|
+
&.k-hover {
|
|
9477
|
+
@include fill(
|
|
9478
|
+
$kendo-button-hover-text,
|
|
9479
|
+
$kendo-button-hover-bg,
|
|
9480
|
+
$kendo-button-hover-border,
|
|
9481
|
+
$kendo-button-hover-gradient
|
|
9482
|
+
);
|
|
9483
|
+
@include box-shadow( $kendo-button-hover-shadow );
|
|
9484
|
+
}
|
|
9545
9485
|
|
|
9546
|
-
|
|
9547
|
-
|
|
9548
|
-
|
|
9549
|
-
|
|
9550
|
-
|
|
9486
|
+
// Focus state
|
|
9487
|
+
&:focus,
|
|
9488
|
+
&.k-focus {
|
|
9489
|
+
@include box-shadow( $kendo-button-focus-shadow );
|
|
9490
|
+
}
|
|
9551
9491
|
|
|
9552
|
-
|
|
9553
|
-
|
|
9554
|
-
|
|
9555
|
-
|
|
9556
|
-
|
|
9557
|
-
|
|
9558
|
-
|
|
9559
|
-
|
|
9560
|
-
|
|
9561
|
-
|
|
9562
|
-
|
|
9492
|
+
// Active state
|
|
9493
|
+
&:active,
|
|
9494
|
+
&.k-active {
|
|
9495
|
+
@include fill(
|
|
9496
|
+
$kendo-button-active-text,
|
|
9497
|
+
$kendo-button-active-bg,
|
|
9498
|
+
$kendo-button-active-border,
|
|
9499
|
+
$kendo-button-active-gradient
|
|
9500
|
+
);
|
|
9501
|
+
@include box-shadow( $kendo-button-active-shadow );
|
|
9502
|
+
}
|
|
9563
9503
|
|
|
9564
|
-
|
|
9565
|
-
|
|
9566
|
-
|
|
9567
|
-
|
|
9568
|
-
|
|
9569
|
-
|
|
9570
|
-
|
|
9571
|
-
|
|
9572
|
-
|
|
9573
|
-
|
|
9574
|
-
} @else {
|
|
9575
|
-
color: contrast-wcag( $color );
|
|
9576
|
-
background-color: $color;
|
|
9577
|
-
border-color: $color;
|
|
9578
|
-
background-image: linear-gradient( rgba( black, 0 ), rgba( black, .04 ) );
|
|
9504
|
+
// Selected state
|
|
9505
|
+
&.k-selected {
|
|
9506
|
+
@include fill(
|
|
9507
|
+
$kendo-button-selected-text,
|
|
9508
|
+
$kendo-button-selected-bg,
|
|
9509
|
+
$kendo-button-selected-border,
|
|
9510
|
+
$kendo-button-selected-gradient
|
|
9511
|
+
);
|
|
9512
|
+
@include box-shadow( $kendo-button-selected-shadow );
|
|
9513
|
+
}
|
|
9579
9514
|
|
|
9580
|
-
|
|
9581
|
-
|
|
9582
|
-
|
|
9583
|
-
|
|
9584
|
-
|
|
9585
|
-
|
|
9515
|
+
// Disabled state
|
|
9516
|
+
&:disabled,
|
|
9517
|
+
&.k-disabled {
|
|
9518
|
+
@include fill(
|
|
9519
|
+
$kendo-button-disabled-text,
|
|
9520
|
+
$kendo-button-disabled-bg,
|
|
9521
|
+
$kendo-button-disabled-border,
|
|
9522
|
+
$kendo-button-disabled-gradient
|
|
9523
|
+
);
|
|
9524
|
+
@include box-shadow( $kendo-button-disabled-shadow );
|
|
9525
|
+
}
|
|
9526
|
+
}
|
|
9586
9527
|
|
|
9587
|
-
|
|
9588
|
-
&:focus,
|
|
9589
|
-
&.k-focus {
|
|
9590
|
-
box-shadow: 0 0 0 2px rgba( $color, .3 );
|
|
9591
|
-
}
|
|
9528
|
+
$_shade-fn: get-function( $kendo-solid-button-shade-function );
|
|
9592
9529
|
|
|
9593
|
-
|
|
9594
|
-
|
|
9595
|
-
|
|
9596
|
-
|
|
9597
|
-
|
|
9598
|
-
}
|
|
9530
|
+
@each $name, $color in $kendo-button-theme-colors {
|
|
9531
|
+
@if ($name != "base") {
|
|
9532
|
+
$_button-text: contrast-wcag( $color );
|
|
9533
|
+
$_button-bg: if( $kendo-solid-button-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null );
|
|
9534
|
+
$_button-border: if( $kendo-solid-button-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null );
|
|
9599
9535
|
|
|
9600
|
-
|
|
9601
|
-
|
|
9602
|
-
|
|
9603
|
-
border-color: try-shade( $color, 1.5 );
|
|
9604
|
-
}
|
|
9605
|
-
}
|
|
9536
|
+
$_button-hover-text: null;
|
|
9537
|
+
$_button-hover-bg: if( $kendo-solid-button-hover-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null );
|
|
9538
|
+
$_button-hover-border: if( $kendo-solid-button-hover-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null );
|
|
9606
9539
|
|
|
9607
|
-
|
|
9608
|
-
|
|
9609
|
-
|
|
9540
|
+
$_button-active-text: null;
|
|
9541
|
+
$_button-active-bg: if( $kendo-solid-button-active-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null );
|
|
9542
|
+
$_button-active-border: if( $kendo-solid-button-active-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null );
|
|
9543
|
+
|
|
9544
|
+
.k-button-solid-#{$name} {
|
|
9610
9545
|
@include fill(
|
|
9611
|
-
$
|
|
9612
|
-
$
|
|
9613
|
-
$
|
|
9614
|
-
$kendo-button-
|
|
9546
|
+
$_button-text,
|
|
9547
|
+
$_button-bg,
|
|
9548
|
+
$_button-border,
|
|
9549
|
+
$kendo-solid-button-gradient
|
|
9615
9550
|
);
|
|
9616
|
-
@include box-shadow( $kendo-button-disabled-shadow );
|
|
9617
|
-
}
|
|
9618
|
-
}
|
|
9619
|
-
}
|
|
9620
|
-
|
|
9621
|
-
|
|
9622
|
-
// Outline Buttons
|
|
9623
|
-
.k-button-outline {
|
|
9624
|
-
@include box-shadow( none );
|
|
9625
|
-
border-color: currentColor;
|
|
9626
|
-
background: none;
|
|
9627
|
-
}
|
|
9628
|
-
|
|
9629
|
-
@each $name, $color in $kendo-button-theme-colors {
|
|
9630
|
-
.k-button-outline-#{$name} {
|
|
9631
|
-
@if ($name == "base") {
|
|
9632
|
-
color: $kendo-button-text;
|
|
9633
9551
|
|
|
9634
9552
|
// Hover state
|
|
9635
9553
|
&:hover,
|
|
9636
9554
|
&.k-hover {
|
|
9637
9555
|
@include fill(
|
|
9638
|
-
|
|
9639
|
-
$
|
|
9640
|
-
$
|
|
9556
|
+
$_button-hover-text,
|
|
9557
|
+
$_button-hover-bg,
|
|
9558
|
+
$_button-hover-border
|
|
9641
9559
|
);
|
|
9642
9560
|
}
|
|
9643
9561
|
|
|
9644
9562
|
// Focus state
|
|
9645
9563
|
&:focus,
|
|
9646
9564
|
&.k-focus {
|
|
9647
|
-
@
|
|
9565
|
+
@if ( $kendo-solid-button-shadow ) {
|
|
9566
|
+
box-shadow: 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity );
|
|
9567
|
+
}
|
|
9648
9568
|
}
|
|
9649
9569
|
|
|
9650
9570
|
// Active state
|
|
9651
9571
|
&:active,
|
|
9652
9572
|
&.k-active {
|
|
9653
9573
|
@include fill(
|
|
9654
|
-
|
|
9655
|
-
$
|
|
9656
|
-
$
|
|
9574
|
+
$_button-active-text,
|
|
9575
|
+
$_button-active-bg,
|
|
9576
|
+
$_button-active-border
|
|
9657
9577
|
);
|
|
9658
9578
|
}
|
|
9659
9579
|
|
|
9660
|
-
// Selected
|
|
9580
|
+
// Selected
|
|
9661
9581
|
&.k-selected {
|
|
9662
9582
|
@include fill(
|
|
9663
|
-
|
|
9664
|
-
$
|
|
9665
|
-
$
|
|
9583
|
+
$_button-active-text,
|
|
9584
|
+
$_button-active-bg,
|
|
9585
|
+
$_button-active-border
|
|
9666
9586
|
);
|
|
9667
9587
|
}
|
|
9668
|
-
} @else {
|
|
9669
|
-
color: $color;
|
|
9670
9588
|
|
|
9671
|
-
//
|
|
9672
|
-
&:
|
|
9673
|
-
&.k-
|
|
9589
|
+
// Disabled state
|
|
9590
|
+
&:disabled,
|
|
9591
|
+
&.k-disabled {
|
|
9674
9592
|
@include fill(
|
|
9675
|
-
|
|
9676
|
-
$
|
|
9677
|
-
$
|
|
9593
|
+
$kendo-button-disabled-text,
|
|
9594
|
+
$kendo-button-disabled-bg,
|
|
9595
|
+
$kendo-button-disabled-border,
|
|
9596
|
+
$kendo-button-disabled-gradient
|
|
9678
9597
|
);
|
|
9598
|
+
@include box-shadow( $kendo-button-disabled-shadow );
|
|
9679
9599
|
}
|
|
9600
|
+
}
|
|
9601
|
+
}
|
|
9602
|
+
}
|
|
9680
9603
|
|
|
9681
|
-
// Focus state
|
|
9682
|
-
&:focus,
|
|
9683
|
-
&.k-focus {
|
|
9684
|
-
box-shadow: 0 0 0 2px rgba( $color, .3 );
|
|
9685
|
-
}
|
|
9686
9604
|
|
|
9687
|
-
|
|
9688
|
-
|
|
9689
|
-
|
|
9690
|
-
|
|
9691
|
-
|
|
9692
|
-
|
|
9693
|
-
|
|
9694
|
-
);
|
|
9695
|
-
}
|
|
9605
|
+
// Outline button
|
|
9606
|
+
@each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
|
|
9607
|
+
.k-button-outline-#{$name} {
|
|
9608
|
+
@include box-shadow( none );
|
|
9609
|
+
border-color: currentColor;
|
|
9610
|
+
color: $color;
|
|
9611
|
+
background-color: transparent;
|
|
9696
9612
|
|
|
9697
|
-
|
|
9698
|
-
|
|
9699
|
-
|
|
9700
|
-
|
|
9701
|
-
|
|
9702
|
-
|
|
9703
|
-
|
|
9613
|
+
// Hover state
|
|
9614
|
+
&:hover,
|
|
9615
|
+
&.k-hover {
|
|
9616
|
+
@include fill(
|
|
9617
|
+
contrast-wcag( $color ),
|
|
9618
|
+
$color,
|
|
9619
|
+
$color
|
|
9620
|
+
);
|
|
9621
|
+
}
|
|
9622
|
+
|
|
9623
|
+
// Focus state
|
|
9624
|
+
&:focus,
|
|
9625
|
+
&.k-focus {
|
|
9626
|
+
@if $kendo-outline-button-shadow {
|
|
9627
|
+
box-shadow: 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity );
|
|
9704
9628
|
}
|
|
9705
9629
|
}
|
|
9706
9630
|
|
|
9631
|
+
// Active state
|
|
9632
|
+
&:active,
|
|
9633
|
+
&.k-active {
|
|
9634
|
+
@include fill(
|
|
9635
|
+
contrast-wcag( $color ),
|
|
9636
|
+
$color,
|
|
9637
|
+
$color
|
|
9638
|
+
);
|
|
9639
|
+
}
|
|
9640
|
+
|
|
9641
|
+
// Selected
|
|
9642
|
+
&.k-selected {
|
|
9643
|
+
@include fill(
|
|
9644
|
+
contrast-wcag( $color ),
|
|
9645
|
+
$color,
|
|
9646
|
+
$color
|
|
9647
|
+
);
|
|
9648
|
+
}
|
|
9649
|
+
|
|
9707
9650
|
// Disabled state
|
|
9708
9651
|
&:disabled,
|
|
9709
9652
|
&.k-disabled {
|
|
9710
|
-
|
|
9711
|
-
$kendo-button-disabled-text,
|
|
9712
|
-
$kendo-button-disabled-bg,
|
|
9713
|
-
$kendo-button-disabled-border,
|
|
9714
|
-
$kendo-button-disabled-gradient
|
|
9715
|
-
);
|
|
9716
|
-
@include box-shadow( $kendo-button-disabled-shadow );
|
|
9653
|
+
color: $kendo-button-disabled-text;
|
|
9717
9654
|
}
|
|
9718
9655
|
}
|
|
9719
9656
|
}
|
|
9720
9657
|
|
|
9721
9658
|
|
|
9722
|
-
// Flat
|
|
9723
|
-
|
|
9724
|
-
@include box-shadow( none );
|
|
9725
|
-
border-color: transparent;
|
|
9726
|
-
background: none;
|
|
9727
|
-
|
|
9728
|
-
// Focus ring
|
|
9729
|
-
&::after {
|
|
9730
|
-
box-shadow: inset 0 0 0 2px currentColor;
|
|
9731
|
-
}
|
|
9732
|
-
}
|
|
9733
|
-
@each $name, $color in $kendo-button-theme-colors {
|
|
9659
|
+
// Flat button
|
|
9660
|
+
@each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
|
|
9734
9661
|
.k-button-flat-#{$name} {
|
|
9735
|
-
|
|
9736
|
-
color: inherit;
|
|
9737
|
-
} @else {
|
|
9738
|
-
color: $color;
|
|
9739
|
-
}
|
|
9662
|
+
color: $color;
|
|
9740
9663
|
|
|
9741
9664
|
// Disabled state
|
|
9742
9665
|
&:disabled,
|
|
9743
9666
|
&.k-disabled {
|
|
9744
|
-
|
|
9745
|
-
$kendo-button-disabled-text,
|
|
9746
|
-
$kendo-button-disabled-bg,
|
|
9747
|
-
$kendo-button-disabled-border,
|
|
9748
|
-
$kendo-button-disabled-gradient
|
|
9749
|
-
);
|
|
9750
|
-
@include box-shadow( $kendo-button-disabled-shadow );
|
|
9667
|
+
color: $kendo-button-disabled-text;
|
|
9751
9668
|
}
|
|
9752
9669
|
}
|
|
9753
9670
|
}
|
|
9754
9671
|
|
|
9755
9672
|
|
|
9756
|
-
// Link
|
|
9757
|
-
|
|
9758
|
-
@include box-shadow( none );
|
|
9759
|
-
border-color: transparent;
|
|
9760
|
-
background: none;
|
|
9761
|
-
|
|
9762
|
-
// Focus ring
|
|
9763
|
-
&::after {
|
|
9764
|
-
box-shadow: inset 0 0 0 2px currentColor;
|
|
9765
|
-
}
|
|
9766
|
-
}
|
|
9767
|
-
@each $name, $color in $kendo-button-theme-colors {
|
|
9673
|
+
// Link button
|
|
9674
|
+
@each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
|
|
9768
9675
|
.k-button-link-#{$name} {
|
|
9769
|
-
|
|
9770
|
-
|
|
9771
|
-
|
|
9772
|
-
|
|
9676
|
+
color: $color;
|
|
9677
|
+
|
|
9678
|
+
// Hover
|
|
9679
|
+
&:hover,
|
|
9680
|
+
&.k-hover {
|
|
9681
|
+
color: try-shade( $color, 2 );
|
|
9682
|
+
}
|
|
9683
|
+
|
|
9684
|
+
// Focus
|
|
9685
|
+
&:focus,
|
|
9686
|
+
&.k-focus {
|
|
9687
|
+
@if ( $kendo-link-button-shadow ) {
|
|
9688
|
+
box-shadow: 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity );
|
|
9689
|
+
}
|
|
9690
|
+
}
|
|
9691
|
+
|
|
9692
|
+
// Active
|
|
9693
|
+
&:active,
|
|
9694
|
+
&.k-active {
|
|
9695
|
+
color: try-shade( $color, 2 );
|
|
9696
|
+
}
|
|
9697
|
+
|
|
9698
|
+
// Selected
|
|
9699
|
+
&.k-selected {
|
|
9700
|
+
color: try-shade( $color, 2 );
|
|
9773
9701
|
}
|
|
9774
9702
|
|
|
9775
9703
|
// Disabled state
|
|
9776
9704
|
&:disabled,
|
|
9777
9705
|
&.k-disabled {
|
|
9778
|
-
|
|
9779
|
-
$kendo-button-disabled-text,
|
|
9780
|
-
$kendo-button-disabled-bg,
|
|
9781
|
-
$kendo-button-disabled-border,
|
|
9782
|
-
$kendo-button-disabled-gradient
|
|
9783
|
-
);
|
|
9784
|
-
@include box-shadow( $kendo-button-disabled-shadow );
|
|
9706
|
+
color: $kendo-button-disabled-text;
|
|
9785
9707
|
}
|
|
9786
9708
|
}
|
|
9787
9709
|
}
|
|
@@ -9792,16 +9714,7 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9792
9714
|
|
|
9793
9715
|
|
|
9794
9716
|
// Button group
|
|
9795
|
-
.k-button-group {
|
|
9796
|
-
|
|
9797
|
-
.k-button:focus,
|
|
9798
|
-
.k-button.k-focus,
|
|
9799
|
-
.k-button-outline:focus,
|
|
9800
|
-
.k-button-outline.k-focus {
|
|
9801
|
-
@include box-shadow( $kendo-button-group-focus-shadow );
|
|
9802
|
-
}
|
|
9803
|
-
|
|
9804
|
-
}
|
|
9717
|
+
.k-button-group {}
|
|
9805
9718
|
|
|
9806
9719
|
|
|
9807
9720
|
// Split button
|
|
@@ -9816,95 +9729,47 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9816
9729
|
|
|
9817
9730
|
@include exports( "button/theme/material" ) {
|
|
9818
9731
|
|
|
9819
|
-
// Solid
|
|
9732
|
+
// Solid button
|
|
9820
9733
|
@each $name, $color in $kendo-button-theme-colors {
|
|
9821
9734
|
.k-button-solid-#{$name} {
|
|
9822
|
-
|
|
9823
|
-
|
|
9824
|
-
@include box-shadow( $kendo-button-shadow );
|
|
9825
|
-
|
|
9826
|
-
// Hover state
|
|
9827
|
-
&:hover,
|
|
9828
|
-
&.k-hover {
|
|
9829
|
-
background-color: $color;
|
|
9830
|
-
border-color: $color;
|
|
9831
|
-
}
|
|
9832
|
-
|
|
9833
|
-
// Focus state
|
|
9834
|
-
&:focus,
|
|
9835
|
-
&.k-focus {
|
|
9836
|
-
@include box-shadow( $kendo-button-shadow );
|
|
9837
|
-
}
|
|
9838
|
-
|
|
9839
|
-
// Active state
|
|
9840
|
-
&:active,
|
|
9841
|
-
&.k-active {
|
|
9842
|
-
@include box-shadow( $kendo-button-active-shadow );
|
|
9843
|
-
background-color: $color;
|
|
9844
|
-
border-color: $color;
|
|
9845
|
-
}
|
|
9846
|
-
|
|
9847
|
-
// Selected
|
|
9848
|
-
&.k-selected {
|
|
9849
|
-
background-color: $color;
|
|
9850
|
-
border-color: $color;
|
|
9851
|
-
}
|
|
9852
|
-
}
|
|
9735
|
+
color: if( $name == "base", $kendo-button-text, contrast-wcag( $color ) );
|
|
9736
|
+
background-color: if( $name == "base", $kendo-button-bg, $color );
|
|
9853
9737
|
}
|
|
9854
9738
|
}
|
|
9855
9739
|
|
|
9856
9740
|
|
|
9857
|
-
// Outline
|
|
9741
|
+
// Outline button
|
|
9858
9742
|
@each $name, $color in $kendo-button-theme-colors {
|
|
9859
9743
|
.k-button-outline-#{$name} {
|
|
9860
|
-
|
|
9861
|
-
|
|
9862
|
-
// Hover state
|
|
9863
|
-
&:hover,
|
|
9864
|
-
&.k-hover {
|
|
9865
|
-
color: $kendo-button-text;
|
|
9866
|
-
}
|
|
9867
|
-
|
|
9868
|
-
// Active state
|
|
9869
|
-
&:active,
|
|
9870
|
-
&.k-active {
|
|
9871
|
-
color: $kendo-button-text;
|
|
9872
|
-
}
|
|
9873
|
-
|
|
9874
|
-
// Selected state
|
|
9875
|
-
&.k-selected {
|
|
9876
|
-
color: $kendo-button-text;
|
|
9877
|
-
}
|
|
9878
|
-
} @else {
|
|
9879
|
-
// Hover state
|
|
9880
|
-
&:hover,
|
|
9881
|
-
&.k-hover {
|
|
9882
|
-
color: $color;
|
|
9883
|
-
}
|
|
9744
|
+
color: if( $name == "base", $kendo-button-text, $color );
|
|
9884
9745
|
|
|
9885
|
-
|
|
9886
|
-
|
|
9887
|
-
|
|
9888
|
-
|
|
9889
|
-
|
|
9746
|
+
&:hover,
|
|
9747
|
+
&.k-hover,
|
|
9748
|
+
&:focus,
|
|
9749
|
+
&.k-focus,
|
|
9750
|
+
&:active,
|
|
9751
|
+
&.k-active
|
|
9752
|
+
&.k-selected {
|
|
9753
|
+
color: if( $name == "base", $kendo-button-text, $color );
|
|
9754
|
+
}
|
|
9890
9755
|
|
|
9891
|
-
|
|
9892
|
-
|
|
9893
|
-
|
|
9894
|
-
|
|
9756
|
+
// Disabled state
|
|
9757
|
+
&:disabled,
|
|
9758
|
+
&.k-disabled {
|
|
9759
|
+
color: $kendo-button-disabled-text;
|
|
9895
9760
|
}
|
|
9896
9761
|
}
|
|
9897
9762
|
}
|
|
9898
9763
|
|
|
9899
9764
|
|
|
9900
|
-
// Link
|
|
9765
|
+
// Link button
|
|
9901
9766
|
@each $name, $color in $kendo-button-theme-colors {
|
|
9902
9767
|
.k-button-link-#{$name} {
|
|
9903
9768
|
|
|
9904
9769
|
// Disabled state
|
|
9905
9770
|
&:disabled,
|
|
9906
9771
|
&.k-disabled {
|
|
9907
|
-
|
|
9772
|
+
color: $kendo-button-disabled-text;
|
|
9908
9773
|
}
|
|
9909
9774
|
}
|
|
9910
9775
|
}
|
|
@@ -9914,29 +9779,6 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9914
9779
|
.k-menu-button {}
|
|
9915
9780
|
|
|
9916
9781
|
|
|
9917
|
-
// Button group
|
|
9918
|
-
.k-button-group {
|
|
9919
|
-
|
|
9920
|
-
.k-button:focus,
|
|
9921
|
-
.k-button.k-focus,
|
|
9922
|
-
.k-button-outline:focus,
|
|
9923
|
-
.k-button-outline.k-focus {
|
|
9924
|
-
@include box-shadow( $kendo-button-group-focus-shadow );
|
|
9925
|
-
}
|
|
9926
|
-
|
|
9927
|
-
}
|
|
9928
|
-
|
|
9929
|
-
|
|
9930
|
-
// Split button
|
|
9931
|
-
.k-split-button:focus,
|
|
9932
|
-
.k-split-button.k-focus {
|
|
9933
|
-
@include box-shadow( $kendo-button-focus-shadow );
|
|
9934
|
-
}
|
|
9935
|
-
|
|
9936
|
-
}
|
|
9937
|
-
|
|
9938
|
-
|
|
9939
|
-
@include exports( "button/theme/material/legacy" ) {
|
|
9940
9782
|
// Button group
|
|
9941
9783
|
.k-button-group {
|
|
9942
9784
|
@include box-shadow( $kendo-button-shadow );
|
|
@@ -9945,46 +9787,25 @@ $kendo-button-group-focus-shadow: null !default;
|
|
|
9945
9787
|
@include box-shadow( none );
|
|
9946
9788
|
}
|
|
9947
9789
|
|
|
9790
|
+
// Disabled state
|
|
9948
9791
|
&:disabled,
|
|
9792
|
+
&[disabled],
|
|
9949
9793
|
&.k-disabled {
|
|
9950
9794
|
@include box-shadow( none );
|
|
9951
|
-
opacity: 1;
|
|
9952
9795
|
}
|
|
9953
9796
|
}
|
|
9954
9797
|
|
|
9955
9798
|
|
|
9956
9799
|
// Split button
|
|
9957
|
-
.k-split-button
|
|
9958
|
-
|
|
9959
|
-
|
|
9960
|
-
.k-button {
|
|
9961
|
-
@include box-shadow( none );
|
|
9962
|
-
}
|
|
9963
|
-
|
|
9964
|
-
> .k-button:last-child,
|
|
9965
|
-
> .k-split-button-arrow {
|
|
9966
|
-
color: $subtle-text;
|
|
9967
|
-
}
|
|
9968
|
-
|
|
9969
|
-
> .k-button:last-child:hover,
|
|
9970
|
-
> .k-split-button-arrow:hover {
|
|
9971
|
-
color: $kendo-button-text;
|
|
9972
|
-
}
|
|
9973
|
-
|
|
9974
|
-
&:disabled,
|
|
9975
|
-
&.k-disabled {
|
|
9976
|
-
@include box-shadow( none );
|
|
9977
|
-
opacity: 1;
|
|
9978
|
-
}
|
|
9979
|
-
|
|
9980
|
-
&.k-flat {
|
|
9981
|
-
@include box-shadow( none );
|
|
9982
|
-
}
|
|
9800
|
+
.k-split-button:focus,
|
|
9801
|
+
.k-split-button.k-focus {
|
|
9802
|
+
// @include box-shadow( $kendo-button-focus-shadow );
|
|
9983
9803
|
}
|
|
9984
9804
|
|
|
9985
9805
|
|
|
9986
9806
|
// Variant button group
|
|
9987
9807
|
.k-button-group-flat,
|
|
9808
|
+
.k-button-group-link,
|
|
9988
9809
|
.k-button-group-outline {
|
|
9989
9810
|
@include box-shadow( none );
|
|
9990
9811
|
}
|
|
@@ -10117,10 +9938,12 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
10117
9938
|
font-family: $kendo-input-font-family;
|
|
10118
9939
|
font-size: $kendo-input-font-size;
|
|
10119
9940
|
line-height: $kendo-input-line-height;
|
|
9941
|
+
text-align: start;
|
|
10120
9942
|
box-shadow: none;
|
|
10121
9943
|
display: inline-flex;
|
|
10122
9944
|
flex-flow: row nowrap;
|
|
10123
9945
|
align-items: stretch;
|
|
9946
|
+
vertical-align: middle;
|
|
10124
9947
|
position: relative;
|
|
10125
9948
|
overflow: hidden;
|
|
10126
9949
|
text-overflow: ellipsis;
|
|
@@ -10135,10 +9958,25 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
10135
9958
|
outline: 0;
|
|
10136
9959
|
box-shadow: none;
|
|
10137
9960
|
}
|
|
9961
|
+
|
|
9962
|
+
// fix for Safari
|
|
9963
|
+
& > * {
|
|
9964
|
+
margin: 0;
|
|
9965
|
+
}
|
|
10138
9966
|
}
|
|
9967
|
+
|
|
9968
|
+
|
|
9969
|
+
// Input
|
|
9970
|
+
.k-input {}
|
|
10139
9971
|
input.k-input {
|
|
10140
9972
|
padding: $kendo-input-padding-y $kendo-input-padding-x;
|
|
10141
9973
|
}
|
|
9974
|
+
|
|
9975
|
+
|
|
9976
|
+
// Picker
|
|
9977
|
+
.k-picker {
|
|
9978
|
+
cursor: pointer;
|
|
9979
|
+
}
|
|
10142
9980
|
select.k-picker {
|
|
10143
9981
|
padding: $kendo-input-padding-y $kendo-input-padding-x;
|
|
10144
9982
|
appearance: auto;
|
|
@@ -10180,6 +10018,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
10180
10018
|
}
|
|
10181
10019
|
}
|
|
10182
10020
|
span.k-input-inner {
|
|
10021
|
+
white-space: nowrap;
|
|
10183
10022
|
display: flex;
|
|
10184
10023
|
flex-flow: row nowrap;
|
|
10185
10024
|
align-items: center;
|
|
@@ -10306,7 +10145,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
10306
10145
|
|
|
10307
10146
|
> .k-button-icon {
|
|
10308
10147
|
min-width: auto !important; // sass-lint:disable-line no-important
|
|
10309
|
-
min-height: auto !important; // sass-lint:disable-line no-important
|
|
10148
|
+
// min-height: auto !important; // sass-lint:disable-line no-important
|
|
10310
10149
|
}
|
|
10311
10150
|
|
|
10312
10151
|
&:focus {
|
|
@@ -10540,11 +10379,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
10540
10379
|
);
|
|
10541
10380
|
@include box-shadow( $kendo-input-focus-shadow );
|
|
10542
10381
|
}
|
|
10382
|
+
&:focus-within {
|
|
10383
|
+
@include fill (
|
|
10384
|
+
$kendo-input-focus-text,
|
|
10385
|
+
$kendo-input-focus-bg,
|
|
10386
|
+
$kendo-input-focus-border
|
|
10387
|
+
);
|
|
10388
|
+
@include box-shadow( $kendo-input-focus-shadow );
|
|
10389
|
+
}
|
|
10543
10390
|
|
|
10544
10391
|
// Invalid
|
|
10545
|
-
&:invalid,
|
|
10546
10392
|
&.k-invalid,
|
|
10547
|
-
&.ng-invalid
|
|
10393
|
+
&.ng-invalid.ng-touched,
|
|
10394
|
+
&.ng-invalid.ng-dirty {
|
|
10548
10395
|
@include fill( $border: $invalid-border );
|
|
10549
10396
|
|
|
10550
10397
|
.k-input-validation-icon {
|
|
@@ -10555,10 +10402,15 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
10555
10402
|
&.k-focus {
|
|
10556
10403
|
@include box-shadow($invalid-shadow);
|
|
10557
10404
|
}
|
|
10405
|
+
&:focus-within {
|
|
10406
|
+
@include box-shadow($invalid-shadow);
|
|
10407
|
+
}
|
|
10558
10408
|
}
|
|
10559
10409
|
|
|
10560
10410
|
}
|
|
10561
10411
|
|
|
10412
|
+
|
|
10413
|
+
// Solid picker
|
|
10562
10414
|
.k-picker {
|
|
10563
10415
|
@include fill(
|
|
10564
10416
|
$kendo-button-text,
|
|
@@ -10589,11 +10441,20 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
10589
10441
|
);
|
|
10590
10442
|
@include box-shadow( $kendo-button-focus-shadow );
|
|
10591
10443
|
}
|
|
10444
|
+
&:focus-within {
|
|
10445
|
+
@include fill (
|
|
10446
|
+
$kendo-button-focus-text,
|
|
10447
|
+
$kendo-button-focus-bg,
|
|
10448
|
+
$kendo-button-focus-border,
|
|
10449
|
+
$kendo-button-focus-gradient
|
|
10450
|
+
);
|
|
10451
|
+
@include box-shadow( $kendo-button-focus-shadow );
|
|
10452
|
+
}
|
|
10592
10453
|
|
|
10593
10454
|
// Invalid
|
|
10594
|
-
&:invalid,
|
|
10595
10455
|
&.k-invalid,
|
|
10596
|
-
&.ng-invalid
|
|
10456
|
+
&.ng-invalid.ng-touched,
|
|
10457
|
+
&.ng-invalid.ng-dirty {
|
|
10597
10458
|
@include fill( $border: $kendo-input-invalid-border );
|
|
10598
10459
|
|
|
10599
10460
|
.k-input-validation-icon {
|
|
@@ -10604,8 +10465,12 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
|
|
|
10604
10465
|
&.k-focus {
|
|
10605
10466
|
@include box-shadow( $kendo-input-invalid-shadow );
|
|
10606
10467
|
}
|
|
10468
|
+
&:focus-within {
|
|
10469
|
+
@include box-shadow( $kendo-input-invalid-shadow );
|
|
10470
|
+
}
|
|
10607
10471
|
}
|
|
10608
10472
|
}
|
|
10473
|
+
|
|
10609
10474
|
}
|
|
10610
10475
|
|
|
10611
10476
|
// #endregion
|
|
@@ -10956,128 +10821,125 @@ $menu-scroll-button-hover-gradient: null !default;
|
|
|
10956
10821
|
// Menu popup
|
|
10957
10822
|
|
|
10958
10823
|
/// Horizontal padding of the menu popup.
|
|
10959
|
-
/// @group menu
|
|
10824
|
+
/// @group menu
|
|
10960
10825
|
$kendo-menu-popup-padding-x: null !default;
|
|
10961
10826
|
|
|
10962
10827
|
/// Vertical padding of the menu popup.
|
|
10963
|
-
/// @group menu
|
|
10828
|
+
/// @group menu
|
|
10964
10829
|
$kendo-menu-popup-padding-y: null !default;
|
|
10965
10830
|
|
|
10966
10831
|
/// Width of the border around the menu popup.
|
|
10967
|
-
/// @group menu
|
|
10832
|
+
/// @group menu
|
|
10968
10833
|
$kendo-menu-popup-border-width: $popup-border-width !default;
|
|
10969
10834
|
|
|
10970
10835
|
/// Font sizes of the menu popup.
|
|
10971
|
-
/// @group menu
|
|
10972
|
-
$kendo-menu-popup-font-size: $font-size !default;
|
|
10973
|
-
$kendo-menu-popup-font-size-sm: $font-size-
|
|
10974
|
-
$kendo-menu-popup-font-size-md: $font-size !default;
|
|
10836
|
+
/// @group menu
|
|
10837
|
+
$kendo-menu-popup-font-size: $font-size-lg !default;
|
|
10838
|
+
$kendo-menu-popup-font-size-sm: $font-size-lg !default;
|
|
10839
|
+
$kendo-menu-popup-font-size-md: $font-size-lg !default;
|
|
10975
10840
|
$kendo-menu-popup-font-size-lg: $font-size-lg !default;
|
|
10976
10841
|
|
|
10977
10842
|
/// Line heights used along with $font-size.
|
|
10978
|
-
/// @group menu
|
|
10979
|
-
$kendo-menu-popup-line-height:
|
|
10980
|
-
$kendo-menu-popup-line-height-sm:
|
|
10981
|
-
$kendo-menu-popup-line-height-md:
|
|
10982
|
-
$kendo-menu-popup-line-height-lg:
|
|
10843
|
+
/// @group menu
|
|
10844
|
+
$kendo-menu-popup-line-height: 1.25 !default;
|
|
10845
|
+
$kendo-menu-popup-line-height-sm: 1.25 !default;
|
|
10846
|
+
$kendo-menu-popup-line-height-md: 1.25 !default;
|
|
10847
|
+
$kendo-menu-popup-line-height-lg: 1.25 !default;
|
|
10983
10848
|
|
|
10984
10849
|
/// The background of the menu popup.
|
|
10985
|
-
/// @group menu
|
|
10850
|
+
/// @group menu
|
|
10986
10851
|
$kendo-menu-popup-bg: $popup-bg !default;
|
|
10987
10852
|
/// The text color of the menu popup.
|
|
10988
|
-
/// @group menu
|
|
10853
|
+
/// @group menu
|
|
10989
10854
|
$kendo-menu-popup-text: $popup-text !default;
|
|
10990
10855
|
/// The border color of the menu popup.
|
|
10991
|
-
/// @group menu
|
|
10856
|
+
/// @group menu
|
|
10992
10857
|
$kendo-menu-popup-border: $popup-border !default;
|
|
10993
10858
|
/// The background gradient of the menu popup.
|
|
10994
|
-
/// @group menu
|
|
10859
|
+
/// @group menu
|
|
10995
10860
|
$kendo-menu-popup-gradient: null !default;
|
|
10996
10861
|
|
|
10997
10862
|
|
|
10998
10863
|
// Menu popup item
|
|
10999
10864
|
|
|
11000
10865
|
/// Horizontal padding of the menu item in popup.
|
|
11001
|
-
/// @group menu
|
|
11002
|
-
$kendo-menu-popup-item-padding-x:
|
|
11003
|
-
$kendo-menu-popup-item-padding-x-
|
|
11004
|
-
$kendo-menu-popup-item-padding-x-
|
|
11005
|
-
$kendo-menu-popup-item-padding-x-
|
|
11006
|
-
$kendo-menu-popup-item-padding-x-lg: ( $kendo-menu-popup-item-padding-x-base * 1.25 ) !default;
|
|
11007
|
-
|
|
10866
|
+
/// @group menu
|
|
10867
|
+
$kendo-menu-popup-item-padding-x: map-get( $spacing, 4 ) !default;
|
|
10868
|
+
$kendo-menu-popup-item-padding-x-sm: map-get( $spacing, 4 ) !default;
|
|
10869
|
+
$kendo-menu-popup-item-padding-x-md: map-get( $spacing, 4 ) !default;
|
|
10870
|
+
$kendo-menu-popup-item-padding-x-lg: map-get( $spacing, 4 ) !default;
|
|
11008
10871
|
|
|
11009
10872
|
/// Vertical padding of the menu item in popup.
|
|
11010
|
-
/// @group menu
|
|
11011
|
-
$kendo-menu-popup-item-padding-y:
|
|
11012
|
-
$kendo-menu-popup-item-padding-y-
|
|
11013
|
-
$kendo-menu-popup-item-padding-y-
|
|
11014
|
-
$kendo-menu-popup-item-padding-y-
|
|
11015
|
-
$kendo-menu-popup-item-padding-y-lg: ( $kendo-menu-popup-item-padding-y-base * 1.25 ) !default;
|
|
10873
|
+
/// @group menu
|
|
10874
|
+
$kendo-menu-popup-item-padding-y: map-get( $spacing, 2 ) !default;
|
|
10875
|
+
$kendo-menu-popup-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
|
|
10876
|
+
$kendo-menu-popup-item-padding-y-md: map-get( $spacing, 2 ) !default;
|
|
10877
|
+
$kendo-menu-popup-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
|
|
11016
10878
|
|
|
11017
10879
|
/// The end padding of the menu item in popup.
|
|
11018
|
-
/// @group menu
|
|
11019
|
-
$kendo-menu-popup-item-padding-end:
|
|
10880
|
+
/// @group menu
|
|
10881
|
+
$kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$icon-size} ) !default;
|
|
11020
10882
|
$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + #{$icon-size} ) !default;
|
|
11021
10883
|
$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$icon-size} ) !default;
|
|
11022
10884
|
$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$icon-size} ) !default;
|
|
11023
10885
|
|
|
11024
10886
|
/// The start margin of the menu item expand icon.
|
|
11025
|
-
/// @group menu
|
|
10887
|
+
/// @group menu
|
|
11026
10888
|
$kendo-menu-popup-item-icon-margin-start-sm: $kendo-menu-popup-item-padding-x-sm !default;
|
|
11027
10889
|
$kendo-menu-popup-item-icon-margin-start: $kendo-menu-popup-item-padding-x-md !default;
|
|
11028
10890
|
$kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg !default;
|
|
11029
10891
|
|
|
11030
10892
|
/// The end margin of the menu item expand icon.
|
|
11031
|
-
/// @group menu
|
|
10893
|
+
/// @group menu
|
|
11032
10894
|
$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;
|
|
11033
10895
|
$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;
|
|
11034
10896
|
$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;
|
|
11035
10897
|
|
|
11036
10898
|
/// The spacing between the menu items in popup.
|
|
11037
|
-
/// @group menu
|
|
10899
|
+
/// @group menu
|
|
11038
10900
|
$kendo-menu-popup-item-spacing: 0px !default;
|
|
11039
10901
|
|
|
11040
10902
|
/// The background of the menu item in popup.
|
|
11041
|
-
/// @group menu
|
|
10903
|
+
/// @group menu
|
|
11042
10904
|
$kendo-menu-popup-item-bg: null !default;
|
|
11043
10905
|
/// The text color of the menu item in popup.
|
|
11044
|
-
/// @group menu
|
|
10906
|
+
/// @group menu
|
|
11045
10907
|
$kendo-menu-popup-item-text: null !default;
|
|
11046
10908
|
/// The border color of the menu item in popup.
|
|
11047
|
-
/// @group menu
|
|
10909
|
+
/// @group menu
|
|
11048
10910
|
$kendo-menu-popup-item-border: null !default;
|
|
11049
10911
|
/// The background gradient of the menu item in popup.
|
|
11050
|
-
/// @group menu
|
|
10912
|
+
/// @group menu
|
|
11051
10913
|
$kendo-menu-popup-item-gradient: null !default;
|
|
11052
10914
|
|
|
11053
10915
|
/// The background of hovered menu item in popup.
|
|
11054
|
-
/// @group menu
|
|
10916
|
+
/// @group menu
|
|
11055
10917
|
$kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
|
|
11056
10918
|
/// The text color of hovered menu item in popup.
|
|
11057
|
-
/// @group menu
|
|
10919
|
+
/// @group menu
|
|
11058
10920
|
$kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
|
|
11059
10921
|
/// The border color of hovered menu item in popup.
|
|
11060
|
-
/// @group menu
|
|
10922
|
+
/// @group menu
|
|
11061
10923
|
$kendo-menu-popup-item-hover-border: null !default;
|
|
11062
10924
|
/// The background gradient of hovered menu item in popup.
|
|
11063
|
-
/// @group menu
|
|
10925
|
+
/// @group menu
|
|
11064
10926
|
$kendo-menu-popup-item-hover-gradient: null !default;
|
|
11065
10927
|
|
|
11066
10928
|
/// The background of expanded menu item in popup.
|
|
11067
|
-
/// @group menu
|
|
10929
|
+
/// @group menu
|
|
11068
10930
|
$kendo-menu-popup-item-expanded-bg: $kendo-list-item-selected-bg !default;
|
|
11069
10931
|
/// The text color of expanded menu item in popup.
|
|
11070
|
-
/// @group menu
|
|
10932
|
+
/// @group menu
|
|
11071
10933
|
$kendo-menu-popup-item-expanded-text: $kendo-list-item-selected-text !default;
|
|
11072
10934
|
/// The border color of expanded menu item in popup.
|
|
11073
|
-
/// @group menu
|
|
10935
|
+
/// @group menu
|
|
11074
10936
|
$kendo-menu-popup-item-expanded-border: null !default;
|
|
11075
10937
|
/// The background gradient of expanded menu item in popup.
|
|
11076
|
-
/// @group menu
|
|
10938
|
+
/// @group menu
|
|
11077
10939
|
$kendo-menu-popup-item-expanded-gradient: null !default;
|
|
11078
10940
|
|
|
11079
10941
|
/// The base shadow of focused menu item in popup.
|
|
11080
|
-
/// @group menu
|
|
10942
|
+
/// @group menu
|
|
11081
10943
|
$kendo-menu-popup-item-focus-shadow: null !default;
|
|
11082
10944
|
|
|
11083
10945
|
// #endregion
|
|
@@ -11227,8 +11089,8 @@ $grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
|
|
|
11227
11089
|
$grid-column-menu-popup-padding-x: null !default;
|
|
11228
11090
|
$grid-column-menu-popup-padding-y: null !default;
|
|
11229
11091
|
|
|
11230
|
-
$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x
|
|
11231
|
-
$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y
|
|
11092
|
+
$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x !default;
|
|
11093
|
+
$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !default;
|
|
11232
11094
|
|
|
11233
11095
|
$grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
|
|
11234
11096
|
$grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
|
|
@@ -11290,22 +11152,22 @@ $kendo-table-cell-padding-y: null !default;
|
|
|
11290
11152
|
/// @group table
|
|
11291
11153
|
$kendo-table-sizes: (
|
|
11292
11154
|
sm: (
|
|
11293
|
-
font-size: $font-size,
|
|
11155
|
+
font-size: $font-size-md,
|
|
11294
11156
|
line-height: ( 20 / 14 ),
|
|
11295
11157
|
cell-padding-x: map-get( $spacing, 4 ),
|
|
11296
|
-
cell-padding-y: map-get( $spacing,
|
|
11158
|
+
cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
|
|
11297
11159
|
),
|
|
11298
11160
|
md: (
|
|
11299
|
-
font-size: $font-size,
|
|
11161
|
+
font-size: $font-size-md,
|
|
11300
11162
|
line-height: ( 20 / 14 ),
|
|
11301
11163
|
cell-padding-x: map-get( $spacing, 4 ),
|
|
11302
11164
|
cell-padding-y: map-get( $spacing, 2 )
|
|
11303
11165
|
),
|
|
11304
11166
|
lg: (
|
|
11305
|
-
font-size: $font-size,
|
|
11167
|
+
font-size: $font-size-md,
|
|
11306
11168
|
line-height: ( 20 / 14 ),
|
|
11307
11169
|
cell-padding-x: map-get( $spacing, 4 ),
|
|
11308
|
-
cell-padding-y: map-get( $spacing,
|
|
11170
|
+
cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
|
|
11309
11171
|
)
|
|
11310
11172
|
) !default;
|
|
11311
11173
|
|
|
@@ -11536,7 +11398,7 @@ $kendo-table-selected-border: $grid-selected-border !default;
|
|
|
11536
11398
|
.k-table-group-row {
|
|
11537
11399
|
|
|
11538
11400
|
&::before {
|
|
11539
|
-
content: "
|
|
11401
|
+
content: "\200b";
|
|
11540
11402
|
padding: $kendo-table-cell-padding-y 0;
|
|
11541
11403
|
width: 0;
|
|
11542
11404
|
display: block;
|
|
@@ -12135,7 +11997,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
|
|
|
12135
11997
|
// Chip List
|
|
12136
11998
|
|
|
12137
11999
|
/// The sizes of the chip list.
|
|
12138
|
-
/// @group chip
|
|
12000
|
+
/// @group chip
|
|
12139
12001
|
$kendo-chip-list-sizes: (
|
|
12140
12002
|
sm: map-get( $spacing, 1 ),
|
|
12141
12003
|
md: map-get( $spacing, 2 ),
|
|
@@ -13209,7 +13071,7 @@ $skeleton-wave-bg: rgba( black, .04 ) !default;
|
|
|
13209
13071
|
transform: $skeleton-text-transform;
|
|
13210
13072
|
|
|
13211
13073
|
&:empty::before {
|
|
13212
|
-
content: "\
|
|
13074
|
+
content: "\200b";
|
|
13213
13075
|
}
|
|
13214
13076
|
}
|
|
13215
13077
|
|
|
@@ -13471,9 +13333,12 @@ $tooltip-error-border: $tooltip-error-bg !default;
|
|
|
13471
13333
|
|
|
13472
13334
|
// Input
|
|
13473
13335
|
.k-input,
|
|
13474
|
-
.k-picker
|
|
13336
|
+
.k-picker {
|
|
13475
13337
|
width: $toolbar-input-width;
|
|
13476
13338
|
}
|
|
13339
|
+
.k-color-picker {
|
|
13340
|
+
width: min-content;
|
|
13341
|
+
}
|
|
13477
13342
|
|
|
13478
13343
|
// Overflow anchor
|
|
13479
13344
|
.k-overflow-anchor {
|
|
@@ -13634,6 +13499,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
|
|
|
13634
13499
|
.k-toolbar {
|
|
13635
13500
|
padding: 0;
|
|
13636
13501
|
border-width: 0;
|
|
13502
|
+
flex-shrink: 1;
|
|
13637
13503
|
color: inherit;
|
|
13638
13504
|
background: none;
|
|
13639
13505
|
}
|
|
@@ -14089,10 +13955,6 @@ $fieldset-legend-border: null !default;
|
|
|
14089
13955
|
display: flex;
|
|
14090
13956
|
flex-flow: row nowrap;
|
|
14091
13957
|
}
|
|
14092
|
-
.k-checkbox-label,
|
|
14093
|
-
.k-radio-label {
|
|
14094
|
-
display: inline-flex;
|
|
14095
|
-
}
|
|
14096
13958
|
|
|
14097
13959
|
.k-label + .k-radio {
|
|
14098
13960
|
margin-left: 0;
|
|
@@ -14127,13 +13989,11 @@ $fieldset-legend-border: null !default;
|
|
|
14127
13989
|
padding: 0;
|
|
14128
13990
|
}
|
|
14129
13991
|
|
|
14130
|
-
.k-form-field
|
|
14131
|
-
.k-daterangepicker .k-textbox-container {
|
|
13992
|
+
.k-form-field {
|
|
14132
13993
|
margin-top: $form-field-margin-top;
|
|
14133
13994
|
}
|
|
14134
13995
|
|
|
14135
|
-
>
|
|
14136
|
-
.k-daterangepicker .k-textbox-container {
|
|
13996
|
+
> * {
|
|
14137
13997
|
&:not(.k-hidden):first-child,
|
|
14138
13998
|
&.k-hidden + :not(.k-hidden) {
|
|
14139
13999
|
margin-top: 0;
|
|
@@ -14172,6 +14032,11 @@ $fieldset-legend-border: null !default;
|
|
|
14172
14032
|
display: inline-flex;
|
|
14173
14033
|
width: 100%;
|
|
14174
14034
|
}
|
|
14035
|
+
.k-daterangepicker {
|
|
14036
|
+
width: 100%;
|
|
14037
|
+
flex-flow: column nowrap;
|
|
14038
|
+
gap: 0;
|
|
14039
|
+
}
|
|
14175
14040
|
}
|
|
14176
14041
|
|
|
14177
14042
|
// Form Buttons Container
|
|
@@ -14855,7 +14720,9 @@ $fieldset-legend-border: null !default;
|
|
|
14855
14720
|
@include exports( "textarea/layout" ) {
|
|
14856
14721
|
|
|
14857
14722
|
// Textarea
|
|
14858
|
-
.k-textarea {
|
|
14723
|
+
.k-textarea {
|
|
14724
|
+
display: flex;
|
|
14725
|
+
}
|
|
14859
14726
|
|
|
14860
14727
|
}
|
|
14861
14728
|
|
|
@@ -14916,15 +14783,15 @@ $listbox-default-height: 200px !default;
|
|
|
14916
14783
|
|
|
14917
14784
|
$listbox-border-width: 1px !default;
|
|
14918
14785
|
$listbox-font-family: $font-family !default;
|
|
14919
|
-
$listbox-font-size: $font-size !default;
|
|
14920
|
-
$listbox-line-height: $line-height !default;
|
|
14786
|
+
$listbox-font-size: $kendo-list-font-size-md !default;
|
|
14787
|
+
$listbox-line-height: $kendo-list-line-height-md !default;
|
|
14921
14788
|
|
|
14922
14789
|
$listbox-bg: $component-bg !default;
|
|
14923
14790
|
$listbox-text: $component-text !default;
|
|
14924
14791
|
$listbox-border: $component-border !default;
|
|
14925
14792
|
|
|
14926
|
-
$listbox-item-padding-x:
|
|
14927
|
-
$listbox-item-padding-y:
|
|
14793
|
+
$listbox-item-padding-x: $kendo-list-item-padding-x-md !default;
|
|
14794
|
+
$listbox-item-padding-y: $kendo-list-item-padding-y-md !default;
|
|
14928
14795
|
|
|
14929
14796
|
$listbox-drop-hint-border-width: 2px !default;
|
|
14930
14797
|
$listbox-drop-hint-width: 2px !default;
|
|
@@ -15006,9 +14873,18 @@ $listbox-drop-hint-width: 2px !default;
|
|
|
15006
14873
|
|
|
15007
14874
|
.k-list-scroller {
|
|
15008
14875
|
width: 100%;
|
|
14876
|
+
height: inherit;
|
|
15009
14877
|
border-width: $listbox-border-width;
|
|
15010
14878
|
border-style: solid;
|
|
15011
14879
|
box-sizing: border-box;
|
|
14880
|
+
|
|
14881
|
+
.k-list-scroller {
|
|
14882
|
+
border-width: 0;
|
|
14883
|
+
}
|
|
14884
|
+
|
|
14885
|
+
.k-list {
|
|
14886
|
+
height: inherit;
|
|
14887
|
+
}
|
|
15012
14888
|
}
|
|
15013
14889
|
|
|
15014
14890
|
.k-drop-hint {
|
|
@@ -15558,127 +15434,125 @@ $progressbar-chunk-border: $component-bg !default;
|
|
|
15558
15434
|
// #region @import "_variables.scss"; -> packages/material/scss/radio/_variables.scss
|
|
15559
15435
|
// Radio button
|
|
15560
15436
|
|
|
15561
|
-
///
|
|
15562
|
-
/// @group radio
|
|
15563
|
-
$kendo-radio-sizes: (
|
|
15564
|
-
sm: map-get( $spacing, 3),
|
|
15565
|
-
md: map-get( $spacing, 4),
|
|
15566
|
-
lg: map-get( $spacing, 6)
|
|
15567
|
-
) !default;
|
|
15568
|
-
|
|
15569
|
-
/// The Border radius of the radio button.
|
|
15437
|
+
/// Border radius of radio button.
|
|
15570
15438
|
/// @group radio
|
|
15571
15439
|
$kendo-radio-radius: 50% !default;
|
|
15572
|
-
///
|
|
15440
|
+
/// Border width of radio button.
|
|
15573
15441
|
/// @group radio
|
|
15574
15442
|
$kendo-radio-border-width: 2px !default;
|
|
15575
|
-
/// The Line height of the radio button.
|
|
15576
|
-
/// @group radio
|
|
15577
|
-
$kendo-radio-line-height: calc( #{map-get( $kendo-radio-sizes, "md" )} + #{$kendo-radio-border-width} ) !default;
|
|
15578
15443
|
|
|
15579
|
-
|
|
15444
|
+
// Radio button sizes
|
|
15445
|
+
$kendo-radio-sizes: (
|
|
15446
|
+
sm: (
|
|
15447
|
+
size: map-get( $spacing, 3 ),
|
|
15448
|
+
glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
|
|
15449
|
+
ripple-size: map-get( $spacing, 3 ) * 3
|
|
15450
|
+
),
|
|
15451
|
+
md: (
|
|
15452
|
+
size: map-get( $spacing, 4 ),
|
|
15453
|
+
glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
|
|
15454
|
+
ripple-size: map-get( $spacing, 4 ) * 3
|
|
15455
|
+
),
|
|
15456
|
+
lg: (
|
|
15457
|
+
size: map-get( $spacing, 5 ),
|
|
15458
|
+
glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
|
|
15459
|
+
ripple-size: map-get( $spacing, 5 ) * 3
|
|
15460
|
+
)
|
|
15461
|
+
) !default;
|
|
15462
|
+
|
|
15463
|
+
/// Background color of radio button.
|
|
15580
15464
|
/// @group radio
|
|
15581
|
-
$kendo-radio-bg:
|
|
15582
|
-
///
|
|
15465
|
+
$kendo-radio-bg: $kendo-checkbox-bg !default;
|
|
15466
|
+
/// Color of radio button.
|
|
15583
15467
|
/// @group radio
|
|
15584
|
-
$kendo-radio-text:
|
|
15585
|
-
///
|
|
15468
|
+
$kendo-radio-text: $kendo-checkbox-text !default;
|
|
15469
|
+
/// Border color of radio button.
|
|
15586
15470
|
/// @group radio
|
|
15587
15471
|
$kendo-radio-border: $kendo-checkbox-border !default;
|
|
15588
15472
|
|
|
15589
|
-
///
|
|
15473
|
+
/// Background color of hovered radio button.
|
|
15590
15474
|
/// @group radio
|
|
15591
15475
|
$kendo-radio-hover-bg: null !default;
|
|
15592
|
-
///
|
|
15476
|
+
/// Color of hovered radio button.
|
|
15593
15477
|
/// @group radio
|
|
15594
15478
|
$kendo-radio-hover-text: null !default;
|
|
15595
|
-
///
|
|
15479
|
+
/// Border color of hovered radio button.
|
|
15596
15480
|
/// @group radio
|
|
15597
|
-
$kendo-radio-hover-border:
|
|
15481
|
+
$kendo-radio-hover-border: null !default;
|
|
15598
15482
|
|
|
15599
|
-
///
|
|
15483
|
+
/// Background color of checked radio button.
|
|
15600
15484
|
/// @group radio
|
|
15601
15485
|
$kendo-radio-checked-bg: null !default;
|
|
15602
|
-
///
|
|
15486
|
+
/// Color of checked radio button.
|
|
15603
15487
|
/// @group radio
|
|
15604
15488
|
$kendo-radio-checked-text: $primary !default;
|
|
15605
|
-
///
|
|
15489
|
+
/// Border color of checked radio button.
|
|
15606
15490
|
/// @group radio
|
|
15607
15491
|
$kendo-radio-checked-border: $kendo-radio-checked-text !default;
|
|
15608
15492
|
|
|
15609
|
-
///
|
|
15610
|
-
/// @group radio
|
|
15611
|
-
$kendo-radio-indeterminate-bg: $kendo-radio-checked-bg !default;
|
|
15612
|
-
/// The text of indeterminate radio button
|
|
15613
|
-
/// @group radio
|
|
15614
|
-
$kendo-radio-indeterminate-text: $kendo-radio-checked-text !default;
|
|
15615
|
-
/// The border of indeterminate radio button.
|
|
15616
|
-
/// @group radio
|
|
15617
|
-
$kendo-radio-indeterminate-border: $kendo-radio-checked-border !default;
|
|
15618
|
-
|
|
15619
|
-
/// The border of focused radio button.
|
|
15493
|
+
/// Border color of focused radio button.
|
|
15620
15494
|
/// @group radio
|
|
15621
|
-
$kendo-radio-focus-border: $kendo-checkbox-border !default;
|
|
15622
|
-
///
|
|
15495
|
+
$kendo-radio-focus-border: $kendo-checkbox-focus-border !default;
|
|
15496
|
+
/// Box shadow of focused radio button.
|
|
15623
15497
|
/// @group radio
|
|
15624
15498
|
$kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;
|
|
15625
|
-
///
|
|
15499
|
+
/// Border color of focused and checked radio button.
|
|
15626
15500
|
/// @group radio
|
|
15627
|
-
$kendo-radio-focus-checked-border: $kendo-checkbox-checked-border !default;
|
|
15628
|
-
///
|
|
15501
|
+
$kendo-radio-focus-checked-border: $kendo-checkbox-focus-checked-border !default;
|
|
15502
|
+
/// Box shadow of focused and checked radio button.
|
|
15629
15503
|
/// @group radio
|
|
15630
15504
|
$kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
|
|
15631
15505
|
|
|
15632
|
-
///
|
|
15506
|
+
/// Background color of disabled radio button.
|
|
15633
15507
|
/// @group radio
|
|
15634
15508
|
$kendo-radio-disabled-bg: null !default;
|
|
15635
|
-
///
|
|
15509
|
+
/// Color of disabled radio button.
|
|
15636
15510
|
/// @group radio
|
|
15637
15511
|
$kendo-radio-disabled-text: null !default;
|
|
15638
|
-
///
|
|
15512
|
+
/// Border color of disabled radio button.
|
|
15639
15513
|
/// @group radio
|
|
15640
|
-
$kendo-radio-disabled-border:
|
|
15514
|
+
$kendo-radio-disabled-border: $kendo-checkbox-disabled-border !default;
|
|
15641
15515
|
|
|
15642
|
-
///
|
|
15516
|
+
/// Background color of disabled and checked radio button.
|
|
15643
15517
|
/// @group radio
|
|
15644
15518
|
$kendo-radio-disabled-checked-bg: null !default;
|
|
15645
|
-
///
|
|
15519
|
+
/// Color of disabled and checked radio button.
|
|
15646
15520
|
/// @group radio
|
|
15647
15521
|
$kendo-radio-disabled-checked-text: $kendo-radio-disabled-border !default;
|
|
15648
|
-
///
|
|
15522
|
+
/// Border color of disabled and checked radio button.
|
|
15649
15523
|
/// @group radio
|
|
15650
15524
|
$kendo-radio-disabled-checked-border: $kendo-radio-disabled-border !default;
|
|
15651
15525
|
|
|
15652
|
-
///
|
|
15526
|
+
/// Background color of invalid radio button.
|
|
15653
15527
|
/// @group radio
|
|
15654
|
-
$kendo-radio-invalid-bg:
|
|
15655
|
-
///
|
|
15528
|
+
$kendo-radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
|
|
15529
|
+
/// Color of invalid radio button.
|
|
15656
15530
|
/// @group radio
|
|
15657
|
-
$kendo-radio-invalid-text: $invalid-text !default;
|
|
15658
|
-
///
|
|
15531
|
+
$kendo-radio-invalid-text: $kendo-checkbox-invalid-text !default;
|
|
15532
|
+
/// Border color of invalid radio button.
|
|
15659
15533
|
/// @group radio
|
|
15660
|
-
$kendo-radio-invalid-border: $invalid-border !default;
|
|
15534
|
+
$kendo-radio-invalid-border: $kendo-checkbox-invalid-border !default;
|
|
15661
15535
|
|
|
15662
15536
|
|
|
15663
15537
|
// Radio indicator
|
|
15664
15538
|
|
|
15665
|
-
///
|
|
15539
|
+
/// Type of radio button indicator.
|
|
15666
15540
|
/// @group radio
|
|
15667
|
-
$kendo-radio-
|
|
15541
|
+
$kendo-radio-indicator-type: image !default;
|
|
15668
15542
|
|
|
15669
|
-
///
|
|
15543
|
+
/// Glyph font family of radio button indicator.
|
|
15670
15544
|
/// @group radio
|
|
15671
15545
|
$kendo-radio-glyph-font-family: "WebComponentsIcons", monospace !default;
|
|
15672
|
-
///
|
|
15673
|
-
/// @group radio
|
|
15674
|
-
$kendo-radio-glyph-size: 12px !default;
|
|
15675
|
-
/// The checked glyph of radio button.
|
|
15546
|
+
/// Glyph of radio button indicator.
|
|
15676
15547
|
/// @group radio
|
|
15677
15548
|
$kendo-radio-checked-glyph: "\e308" !default;
|
|
15678
15549
|
|
|
15679
|
-
///
|
|
15550
|
+
/// Image of checked radio button indicator.
|
|
15551
|
+
/// @group radio
|
|
15552
|
+
$kendo-radio-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
|
|
15553
|
+
/// Image of disabled and checked radio button indicator.
|
|
15680
15554
|
/// @group radio
|
|
15681
|
-
$kendo-radio-checked-image:
|
|
15555
|
+
$kendo-radio-disabled-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-disabled-checked-text}'/></svg>") ) !default;
|
|
15682
15556
|
|
|
15683
15557
|
|
|
15684
15558
|
// Radio label
|
|
@@ -15690,36 +15564,25 @@ $kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
|
|
|
15690
15564
|
|
|
15691
15565
|
// Radio list
|
|
15692
15566
|
|
|
15693
|
-
///
|
|
15567
|
+
/// Spacing between items of horizontal radio button list.
|
|
15694
15568
|
/// @group radio
|
|
15695
15569
|
$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
|
|
15696
|
-
///
|
|
15570
|
+
/// Horizontal padding of radio button list items.
|
|
15697
15571
|
/// @group radio
|
|
15698
15572
|
$kendo-radio-list-item-padding-x: 0px !default;
|
|
15699
|
-
///
|
|
15573
|
+
/// Vertical padding of radio button list items.
|
|
15700
15574
|
/// @group radio
|
|
15701
15575
|
$kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
|
|
15702
15576
|
|
|
15703
15577
|
|
|
15704
15578
|
// Radio ripple
|
|
15705
15579
|
|
|
15706
|
-
///
|
|
15580
|
+
/// Background color of radio button ripple.
|
|
15707
15581
|
/// @group radio
|
|
15708
|
-
$kendo-radio-ripple-
|
|
15709
|
-
|
|
15710
|
-
md: (map-get( $kendo-radio-sizes, "md" ) * 3),
|
|
15711
|
-
lg: (map-get( $kendo-radio-sizes, "lg" ) * 3)
|
|
15712
|
-
) !default;
|
|
15713
|
-
/// The ripple margin of radio button.
|
|
15582
|
+
$kendo-radio-ripple-bg: $primary !default;
|
|
15583
|
+
/// Opacity of radio button ripple.
|
|
15714
15584
|
/// @group radio
|
|
15715
|
-
$kendo-radio-ripple-
|
|
15716
|
-
sm: calc(-1 * (#{map-get( $kendo-radio-sizes, "sm" )} + 2 * #{$kendo-radio-border-width})),
|
|
15717
|
-
md: calc(-1 * (#{map-get( $kendo-radio-sizes, "md" )} + 2 * #{$kendo-radio-border-width})),
|
|
15718
|
-
lg: calc(-1 * (#{map-get( $kendo-radio-sizes, "lg" )} + 2 * #{$kendo-radio-border-width}))
|
|
15719
|
-
) !default;
|
|
15720
|
-
/// The ripple opacity of radio button.
|
|
15721
|
-
/// @group radio
|
|
15722
|
-
$kendo-radio-ripple-opacity: .3 !default;
|
|
15585
|
+
$kendo-radio-ripple-opacity: .2 !default;
|
|
15723
15586
|
|
|
15724
15587
|
// #endregion
|
|
15725
15588
|
// #region @import "_layout.scss"; -> packages/material/scss/radio/_layout.scss
|
|
@@ -15747,82 +15610,50 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
15747
15610
|
-webkit-appearance: none;
|
|
15748
15611
|
}
|
|
15749
15612
|
|
|
15750
|
-
// Radio size
|
|
15751
|
-
|
|
15752
|
-
@each $name, $size in $kendo-radio-sizes {
|
|
15753
|
-
.k-radio-#{$name} {
|
|
15754
|
-
width: $size;
|
|
15755
|
-
height: $size;
|
|
15756
|
-
|
|
15757
|
-
+ .k-radio-label {
|
|
15758
|
-
|
|
15759
|
-
.k-ripple {
|
|
15760
|
-
top: ($size / 2);
|
|
15761
|
-
left: ($size / 2);
|
|
15762
|
-
width: ($size * 5 / 2);
|
|
15763
|
-
height: ($size * 5 / 2);
|
|
15764
|
-
}
|
|
15765
|
-
}
|
|
15766
|
-
}
|
|
15767
|
-
|
|
15768
|
-
// Radio indicator
|
|
15769
|
-
.k-radio-#{$name}::before {
|
|
15770
|
-
@if $kendo-radio-icon-type == "glyph" {
|
|
15771
|
-
content: $kendo-radio-checked-glyph;
|
|
15772
|
-
width: $kendo-radio-glyph-size;
|
|
15773
|
-
height: $kendo-radio-glyph-size;
|
|
15774
|
-
font-size: $kendo-radio-glyph-size;
|
|
15775
|
-
font-family: $kendo-radio-glyph-font-family;
|
|
15776
|
-
line-height: 1;
|
|
15777
|
-
transform: scale(0) translate(-50%, -50%);
|
|
15778
|
-
overflow: hidden;
|
|
15779
|
-
position: absolute;
|
|
15780
|
-
top: 50%;
|
|
15781
|
-
left: 50%;
|
|
15782
|
-
}
|
|
15783
15613
|
|
|
15784
|
-
|
|
15785
|
-
|
|
15786
|
-
|
|
15787
|
-
|
|
15788
|
-
|
|
15789
|
-
|
|
15790
|
-
|
|
15791
|
-
|
|
15792
|
-
|
|
15793
|
-
|
|
15794
|
-
|
|
15795
|
-
|
|
15614
|
+
// Radio indicator
|
|
15615
|
+
.k-radio::before {
|
|
15616
|
+
@if $kendo-radio-indicator-type == "glyph" {
|
|
15617
|
+
content: $kendo-radio-checked-glyph;
|
|
15618
|
+
width: 1em;
|
|
15619
|
+
height: 1em;
|
|
15620
|
+
font-family: $kendo-radio-glyph-font-family;
|
|
15621
|
+
line-height: 1;
|
|
15622
|
+
transform: scale(0) translate(-50%, -50%);
|
|
15623
|
+
overflow: hidden;
|
|
15624
|
+
position: absolute;
|
|
15625
|
+
top: 50%;
|
|
15626
|
+
left: 50%;
|
|
15796
15627
|
}
|
|
15797
15628
|
}
|
|
15798
15629
|
|
|
15630
|
+
|
|
15799
15631
|
// Checked state
|
|
15800
15632
|
.k-radio:checked,
|
|
15801
15633
|
.k-radio.k-checked {
|
|
15802
|
-
@if $kendo-radio-
|
|
15634
|
+
@if $kendo-radio-indicator-type == "image" {
|
|
15803
15635
|
background-image: $kendo-radio-checked-image;
|
|
15804
15636
|
}
|
|
15805
15637
|
|
|
15806
|
-
@if $kendo-radio-
|
|
15807
|
-
&::before {
|
|
15808
|
-
transform: scale(1) translate(-50%, -50%);
|
|
15809
|
-
}
|
|
15810
|
-
}
|
|
15811
|
-
|
|
15812
|
-
@if $kendo-radio-icon-type == "marker" {
|
|
15638
|
+
@if $kendo-radio-indicator-type == "glyph" {
|
|
15813
15639
|
&::before {
|
|
15814
15640
|
transform: scale(1) translate(-50%, -50%);
|
|
15815
15641
|
}
|
|
15816
15642
|
}
|
|
15817
15643
|
}
|
|
15818
15644
|
|
|
15645
|
+
|
|
15819
15646
|
// Disabled state
|
|
15820
15647
|
.k-radio:disabled,
|
|
15821
|
-
.k-radio.k-disabled
|
|
15822
|
-
.k-radio:disabled + .k-radio-label,
|
|
15823
|
-
.k-radio.k-disabled + .k-radio-label {
|
|
15648
|
+
.k-radio.k-disabled {
|
|
15824
15649
|
@include disabled( $disabled-styling );
|
|
15825
15650
|
}
|
|
15651
|
+
.k-radio:disabled:checked,
|
|
15652
|
+
.k-radio.k-disabled.k-checked {
|
|
15653
|
+
@if $kendo-radio-indicator-type == "image" {
|
|
15654
|
+
background-image: $kendo-radio-disabled-checked-image;
|
|
15655
|
+
}
|
|
15656
|
+
}
|
|
15826
15657
|
|
|
15827
15658
|
|
|
15828
15659
|
// Radio wrap
|
|
@@ -15832,6 +15663,9 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
15832
15663
|
flex-flow: row nowrap;
|
|
15833
15664
|
gap: 0;
|
|
15834
15665
|
align-items: center;
|
|
15666
|
+
align-self: start;
|
|
15667
|
+
vertical-align: middle;
|
|
15668
|
+
position: relative;
|
|
15835
15669
|
|
|
15836
15670
|
&::before {
|
|
15837
15671
|
content: "\200b";
|
|
@@ -15843,63 +15677,41 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
15843
15677
|
}
|
|
15844
15678
|
}
|
|
15845
15679
|
|
|
15846
|
-
.k-radio + .k-radio-label {
|
|
15847
|
-
display: inline;
|
|
15848
|
-
}
|
|
15849
15680
|
|
|
15850
15681
|
// Radio label
|
|
15851
15682
|
.k-radio-label {
|
|
15852
15683
|
margin: 0;
|
|
15853
15684
|
padding: 0;
|
|
15854
|
-
line-height: $kendo-radio-line-height;
|
|
15855
15685
|
display: inline-flex;
|
|
15856
15686
|
align-items: flex-start;
|
|
15687
|
+
gap: $kendo-radio-label-margin-x;
|
|
15857
15688
|
vertical-align: middle;
|
|
15858
15689
|
position: relative;
|
|
15859
15690
|
cursor: pointer;
|
|
15860
15691
|
|
|
15861
|
-
.k-label {
|
|
15862
|
-
cursor: pointer;
|
|
15863
|
-
}
|
|
15864
|
-
|
|
15865
|
-
// Hide empty label
|
|
15866
|
-
&:empty {
|
|
15867
|
-
display: none !important; // sass-lint:disable-line no-important
|
|
15868
|
-
}
|
|
15869
|
-
|
|
15870
15692
|
.k-ripple {
|
|
15871
|
-
right: auto;
|
|
15872
|
-
bottom: auto;
|
|
15873
|
-
transform: translate(-50%, -50%);
|
|
15874
|
-
border-radius: 50%;
|
|
15875
|
-
|
|
15876
15693
|
// Hide ripple temporarily
|
|
15877
15694
|
visibility: hidden !important; // sass-lint:disable-line no-important
|
|
15878
15695
|
}
|
|
15879
|
-
|
|
15880
|
-
.k-ripple-blob {
|
|
15881
|
-
// sass-lint:disable-block no-important
|
|
15882
|
-
// use !important until ripple can apply these styles from the script
|
|
15883
|
-
top: 50% !important;
|
|
15884
|
-
left: 50% !important;
|
|
15885
|
-
width: 200% !important;
|
|
15886
|
-
height: 200% !important;
|
|
15887
|
-
}
|
|
15888
15696
|
}
|
|
15889
|
-
|
|
15697
|
+
.k-radio + .k-label,
|
|
15698
|
+
.k-radio-wrap + .k-label,
|
|
15890
15699
|
.k-radio + .k-radio-label,
|
|
15891
|
-
.k-radio-
|
|
15892
|
-
|
|
15893
|
-
margin-
|
|
15700
|
+
.k-radio-wrap + .k-radio-label {
|
|
15701
|
+
display: inline;
|
|
15702
|
+
margin-inline-start: $kendo-radio-label-margin-x;
|
|
15894
15703
|
}
|
|
15895
|
-
|
|
15896
|
-
|
|
15897
|
-
|
|
15704
|
+
|
|
15705
|
+
|
|
15706
|
+
// Empty label
|
|
15707
|
+
.k-radio-label:empty {
|
|
15708
|
+
display: none !important; // sass-lint:disable-line no-important
|
|
15898
15709
|
}
|
|
15899
|
-
|
|
15900
|
-
|
|
15710
|
+
.k-radio-label.k-no-text {
|
|
15711
|
+
min-width: 1px;
|
|
15901
15712
|
}
|
|
15902
15713
|
|
|
15714
|
+
|
|
15903
15715
|
// Radio list
|
|
15904
15716
|
.k-radio-list {
|
|
15905
15717
|
margin: 0;
|
|
@@ -15919,7 +15731,7 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
15919
15731
|
gap: map-get( $spacing, 1 );
|
|
15920
15732
|
|
|
15921
15733
|
.k-radio-label {
|
|
15922
|
-
|
|
15734
|
+
margin: 0;
|
|
15923
15735
|
}
|
|
15924
15736
|
}
|
|
15925
15737
|
.k-radio-list-horizontal,
|
|
@@ -15929,43 +15741,28 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
15929
15741
|
gap: $kendo-radio-list-spacing;
|
|
15930
15742
|
}
|
|
15931
15743
|
|
|
15932
|
-
// RTL
|
|
15933
|
-
.k-rtl,
|
|
15934
|
-
[dir="rtl"] {
|
|
15935
|
-
.k-radio + .k-radio-label,
|
|
15936
|
-
.k-radio-label + .k-radio,
|
|
15937
|
-
.k-label + .k-radio {
|
|
15938
|
-
margin-left: 0;
|
|
15939
|
-
margin-right: $kendo-radio-label-margin-x;
|
|
15940
|
-
}
|
|
15941
|
-
.k-radio-label > .k-radio {
|
|
15942
|
-
margin-right: 0;
|
|
15943
|
-
margin-left: $kendo-radio-label-margin-x;
|
|
15944
|
-
}
|
|
15945
|
-
kendo-label.k-radio-label > .k-radio:last-child {
|
|
15946
|
-
margin-left: 0;
|
|
15947
|
-
}
|
|
15948
|
-
kendo-label.k-radio-label > .k-label:first-child {
|
|
15949
|
-
margin-right: 0;
|
|
15950
|
-
margin-left: $kendo-radio-label-margin-x;
|
|
15951
|
-
}
|
|
15952
|
-
}
|
|
15953
15744
|
|
|
15745
|
+
// Ripple
|
|
15954
15746
|
.k-ripple-container {
|
|
15955
|
-
|
|
15956
|
-
|
|
15957
|
-
|
|
15958
|
-
|
|
15959
|
-
|
|
15960
|
-
|
|
15961
|
-
|
|
15962
|
-
|
|
15963
|
-
|
|
15964
|
-
|
|
15965
|
-
|
|
15966
|
-
|
|
15967
|
-
|
|
15968
|
-
|
|
15747
|
+
.k-radio::after {
|
|
15748
|
+
content: "";
|
|
15749
|
+
display: block;
|
|
15750
|
+
position: absolute;
|
|
15751
|
+
left: 50%;
|
|
15752
|
+
top: 50%;
|
|
15753
|
+
border-radius: 100%;
|
|
15754
|
+
z-index: -1;
|
|
15755
|
+
transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
|
|
15756
|
+
transform: translate(-50%, -50%) scale(0);
|
|
15757
|
+
transform-origin: center center;
|
|
15758
|
+
}
|
|
15759
|
+
|
|
15760
|
+
.k-radio:focus,
|
|
15761
|
+
.k-radio.k-state-focus {
|
|
15762
|
+
box-shadow: none !important; // sass-lint:disable-line no-important
|
|
15763
|
+
|
|
15764
|
+
&::after {
|
|
15765
|
+
transform: translate(-50%, -50%) scale(1);
|
|
15969
15766
|
}
|
|
15970
15767
|
}
|
|
15971
15768
|
|
|
@@ -15973,25 +15770,33 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
15973
15770
|
.k-radio.k-disabled::after {
|
|
15974
15771
|
display: none;
|
|
15975
15772
|
}
|
|
15976
|
-
}
|
|
15977
|
-
}
|
|
15978
|
-
|
|
15979
15773
|
|
|
15774
|
+
.k-radio:disabled::after,
|
|
15775
|
+
.k-radio.k-disabled::after {
|
|
15776
|
+
display: none;
|
|
15777
|
+
}
|
|
15778
|
+
}
|
|
15980
15779
|
|
|
15981
15780
|
|
|
15982
|
-
|
|
15781
|
+
// Radio size
|
|
15782
|
+
@each $size, $size-props in $kendo-radio-sizes {
|
|
15783
|
+
$_size: map-get( $size-props, size );
|
|
15784
|
+
$_glyph-size: map-get( $size-props, glyph-size );
|
|
15785
|
+
$_ripple-size: map-get( $size-props, ripple-size );
|
|
15983
15786
|
|
|
15984
|
-
|
|
15985
|
-
|
|
15986
|
-
|
|
15987
|
-
color: inherit;
|
|
15988
|
-
background-color: inherit;
|
|
15989
|
-
}
|
|
15787
|
+
.k-radio-#{$size} {
|
|
15788
|
+
width: $_size;
|
|
15789
|
+
height: $_size;
|
|
15990
15790
|
|
|
15991
|
-
|
|
15992
|
-
|
|
15993
|
-
|
|
15994
|
-
|
|
15791
|
+
&::before {
|
|
15792
|
+
font-size: $_glyph-size;
|
|
15793
|
+
}
|
|
15794
|
+
}
|
|
15795
|
+
.k-ripple-container {
|
|
15796
|
+
.k-radio-#{$size}::after {
|
|
15797
|
+
width: $_ripple-size;
|
|
15798
|
+
height: $_ripple-size;
|
|
15799
|
+
}
|
|
15995
15800
|
}
|
|
15996
15801
|
}
|
|
15997
15802
|
|
|
@@ -16011,7 +15816,7 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
16011
15816
|
// #endregion
|
|
16012
15817
|
// #region @import "_theme.scss"; -> packages/material/scss/radio/_theme.scss
|
|
16013
15818
|
// #region @import "~@progress/kendo-theme-default/scss/radio/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/radio/_theme.scss
|
|
16014
|
-
@include exports("radio/theme") {
|
|
15819
|
+
@include exports( "radio/theme" ) {
|
|
16015
15820
|
|
|
16016
15821
|
// Radio
|
|
16017
15822
|
.k-radio {
|
|
@@ -16066,7 +15871,6 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
16066
15871
|
$kendo-radio-checked-border
|
|
16067
15872
|
);
|
|
16068
15873
|
}
|
|
16069
|
-
|
|
16070
15874
|
.k-radio:checked:focus,
|
|
16071
15875
|
.k-radio.k-checked.k-state-focus {
|
|
16072
15876
|
@include fill( $border: $kendo-radio-focus-checked-border );
|
|
@@ -16092,11 +15896,12 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
16092
15896
|
);
|
|
16093
15897
|
}
|
|
16094
15898
|
|
|
15899
|
+
|
|
16095
15900
|
// Ripple
|
|
16096
15901
|
.k-ripple-container {
|
|
16097
15902
|
.k-radio::after {
|
|
16098
|
-
background: $kendo-
|
|
16099
|
-
opacity: $kendo-
|
|
15903
|
+
background: $kendo-radio-checked-bg;
|
|
15904
|
+
opacity: $kendo-radio-ripple-opacity;
|
|
16100
15905
|
}
|
|
16101
15906
|
}
|
|
16102
15907
|
|
|
@@ -16104,7 +15909,7 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
16104
15909
|
|
|
16105
15910
|
// #endregion
|
|
16106
15911
|
|
|
16107
|
-
@include exports("radio/theme/material") {
|
|
15912
|
+
@include exports( "radio/theme/material" ) {
|
|
16108
15913
|
|
|
16109
15914
|
// Radio
|
|
16110
15915
|
.k-radio-label {
|
|
@@ -16115,15 +15920,8 @@ $kendo-radio-ripple-opacity: .3 !default;
|
|
|
16115
15920
|
opacity: 1;
|
|
16116
15921
|
filter: none;
|
|
16117
15922
|
}
|
|
16118
|
-
|
|
16119
|
-
|
|
16120
|
-
// Ripple
|
|
16121
|
-
.k-ripple-blob {
|
|
16122
|
-
opacity: .2;
|
|
16123
|
-
background-color: $kendo-radio-checked-bg;
|
|
16124
|
-
}
|
|
16125
|
-
|
|
16126
15923
|
}
|
|
15924
|
+
|
|
16127
15925
|
}
|
|
16128
15926
|
|
|
16129
15927
|
// #endregion
|
|
@@ -16213,23 +16011,11 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16213
16011
|
line-height: $slider-line-height;
|
|
16214
16012
|
background: none;
|
|
16215
16013
|
display: inline-flex;
|
|
16216
|
-
align-items:
|
|
16014
|
+
align-items: center;
|
|
16217
16015
|
position: relative;
|
|
16218
16016
|
-webkit-touch-callout: none;
|
|
16219
16017
|
-webkit-tap-highlight-color: $rgba-transparent;
|
|
16220
16018
|
|
|
16221
|
-
.k-button-increase {
|
|
16222
|
-
position: absolute;
|
|
16223
|
-
right: 0;
|
|
16224
|
-
top: 0;
|
|
16225
|
-
}
|
|
16226
|
-
|
|
16227
|
-
.k-button-decrease {
|
|
16228
|
-
position: absolute;
|
|
16229
|
-
left: 0;
|
|
16230
|
-
top: 0;
|
|
16231
|
-
}
|
|
16232
|
-
|
|
16233
16019
|
.k-label {
|
|
16234
16020
|
width: auto;
|
|
16235
16021
|
font-size: .92em;
|
|
@@ -16269,30 +16055,33 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16269
16055
|
left: auto;
|
|
16270
16056
|
right: 0;
|
|
16271
16057
|
}
|
|
16058
|
+
}
|
|
16059
|
+
}
|
|
16272
16060
|
|
|
16273
|
-
.k-button-increase {
|
|
16274
|
-
left: 0;
|
|
16275
|
-
right: auto;
|
|
16276
|
-
}
|
|
16277
16061
|
|
|
16278
|
-
|
|
16279
|
-
|
|
16280
|
-
|
|
16281
|
-
|
|
16282
|
-
|
|
16062
|
+
// Slider wrap
|
|
16063
|
+
.k-slider-wrap {
|
|
16064
|
+
width: 100%;
|
|
16065
|
+
height: 100%;
|
|
16066
|
+
box-sizing: border-box;
|
|
16067
|
+
display: flex;
|
|
16068
|
+
flex-flow: inherit;
|
|
16069
|
+
align-items: inherit;
|
|
16070
|
+
gap: inherit;
|
|
16071
|
+
position: relative;
|
|
16283
16072
|
}
|
|
16284
16073
|
|
|
16285
16074
|
|
|
16286
16075
|
// New rendering
|
|
16287
16076
|
.k-slider {
|
|
16077
|
+
width: min-content;
|
|
16078
|
+
height: min-content;
|
|
16288
16079
|
gap: calc( #{$slider-draghandle-size} / 2 );
|
|
16289
16080
|
|
|
16290
|
-
|
|
16291
|
-
|
|
16292
|
-
flex-shrink: 0;
|
|
16293
|
-
align-self: center;
|
|
16081
|
+
.k-button {
|
|
16082
|
+
flex: none;
|
|
16294
16083
|
}
|
|
16295
|
-
|
|
16084
|
+
.k-slider-track-wrap {
|
|
16296
16085
|
flex: 1 1 auto;
|
|
16297
16086
|
display: flex;
|
|
16298
16087
|
flex-flow: inherit;
|
|
@@ -16300,6 +16089,9 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16300
16089
|
touch-action: none;
|
|
16301
16090
|
|
|
16302
16091
|
.k-slider-items {
|
|
16092
|
+
margin: 0;
|
|
16093
|
+
padding: 0;
|
|
16094
|
+
list-style: none;
|
|
16303
16095
|
// For some reason, Safari does not understand `flex-basis: 100%`
|
|
16304
16096
|
// See telerik/kendo-themes#2197
|
|
16305
16097
|
// flex-basis: 100%;
|
|
@@ -16307,8 +16099,7 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16307
16099
|
display: flex;
|
|
16308
16100
|
flex-flow: inherit;
|
|
16309
16101
|
justify-content: space-between;
|
|
16310
|
-
|
|
16311
|
-
&::after { display: none; }
|
|
16102
|
+
user-select: none;
|
|
16312
16103
|
}
|
|
16313
16104
|
.k-tick {
|
|
16314
16105
|
flex: 0 0 1px;
|
|
@@ -16320,7 +16111,8 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16320
16111
|
}
|
|
16321
16112
|
|
|
16322
16113
|
&-horizontal {
|
|
16323
|
-
|
|
16114
|
+
.k-slider-track-wrap {
|
|
16115
|
+
height: 26px;
|
|
16324
16116
|
|
|
16325
16117
|
.k-slider-track {
|
|
16326
16118
|
width: 100%;
|
|
@@ -16372,7 +16164,8 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16372
16164
|
}
|
|
16373
16165
|
|
|
16374
16166
|
&-vertical {
|
|
16375
|
-
|
|
16167
|
+
.k-slider-track-wrap {
|
|
16168
|
+
width: 26px;
|
|
16376
16169
|
|
|
16377
16170
|
.k-slider-track {
|
|
16378
16171
|
height: 100%;
|
|
@@ -16405,14 +16198,8 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16405
16198
|
// Slider vertical
|
|
16406
16199
|
.k-slider-vertical {
|
|
16407
16200
|
height: $slider-size;
|
|
16408
|
-
width: $slider-alt-size;
|
|
16409
16201
|
flex-flow: column-reverse nowrap;
|
|
16410
16202
|
|
|
16411
|
-
.k-button-decrease {
|
|
16412
|
-
bottom: 0;
|
|
16413
|
-
top: auto;
|
|
16414
|
-
}
|
|
16415
|
-
|
|
16416
16203
|
.k-tick {
|
|
16417
16204
|
text-align: right;
|
|
16418
16205
|
margin-left: 2px;
|
|
@@ -16424,32 +16211,32 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16424
16211
|
|
|
16425
16212
|
// ticks
|
|
16426
16213
|
|
|
16427
|
-
.k-tick { background-position: -
|
|
16428
|
-
.k-slider-topleft .k-tick { background-position: -
|
|
16429
|
-
.k-slider-bottomright .k-tick { background-position: -
|
|
16214
|
+
.k-tick { background-position: -94px center; }
|
|
16215
|
+
.k-slider-topleft .k-tick { background-position: -124px center; }
|
|
16216
|
+
.k-slider-bottomright .k-tick { background-position: -154px center; }
|
|
16430
16217
|
|
|
16431
16218
|
.k-tick-large {
|
|
16432
16219
|
display: flex;
|
|
16433
16220
|
align-items: center;
|
|
16434
|
-
background-position: -
|
|
16221
|
+
background-position: -4px center;
|
|
16435
16222
|
}
|
|
16436
16223
|
|
|
16437
|
-
.k-slider-topleft .k-tick-large { background-position: -
|
|
16438
|
-
.k-slider-bottomright .k-tick-large { background-position: -
|
|
16224
|
+
.k-slider-topleft .k-tick-large { background-position: -34px center; }
|
|
16225
|
+
.k-slider-bottomright .k-tick-large { background-position: -64px center; }
|
|
16439
16226
|
|
|
16440
|
-
.k-first { background-position: -
|
|
16441
|
-
.k-tick-large.k-first { background-position: -
|
|
16442
|
-
.k-slider-topleft .k-first { background-position: -
|
|
16443
|
-
.k-slider-topleft .k-tick-large.k-first { background-position: -
|
|
16444
|
-
.k-slider-bottomright .k-first { background-position: -
|
|
16445
|
-
.k-slider-bottomright .k-tick-large.k-first { background-position: -
|
|
16227
|
+
.k-first { background-position: -94px 100%; }
|
|
16228
|
+
.k-tick-large.k-first { background-position: -4px 100%; }
|
|
16229
|
+
.k-slider-topleft .k-first { background-position: -124px 100%; }
|
|
16230
|
+
.k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; }
|
|
16231
|
+
.k-slider-bottomright .k-first { background-position: -154px 100%; }
|
|
16232
|
+
.k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; }
|
|
16446
16233
|
|
|
16447
|
-
.k-last { background-position: -
|
|
16448
|
-
.k-tick-large.k-last { background-position: -
|
|
16449
|
-
.k-slider-topleft .k-last { background-position: -
|
|
16450
|
-
.k-slider-topleft .k-tick-large.k-last { background-position: -
|
|
16451
|
-
.k-slider-bottomright .k-last { background-position: -
|
|
16452
|
-
.k-slider-bottomright .k-tick-large.k-last { background-position: -
|
|
16234
|
+
.k-last { background-position: -94px 0; }
|
|
16235
|
+
.k-tick-large.k-last { background-position: -4px 0; }
|
|
16236
|
+
.k-slider-topleft .k-last { background-position: -124px 0; }
|
|
16237
|
+
.k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; }
|
|
16238
|
+
.k-slider-bottomright .k-last { background-position: -154px 0; }
|
|
16239
|
+
.k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; }
|
|
16453
16240
|
|
|
16454
16241
|
// labels
|
|
16455
16242
|
|
|
@@ -16487,17 +16274,9 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16487
16274
|
|
|
16488
16275
|
// Slider horizontal
|
|
16489
16276
|
.k-slider-horizontal {
|
|
16490
|
-
height: $slider-alt-size;
|
|
16491
16277
|
width: $slider-size;
|
|
16492
16278
|
flex-flow: row nowrap;
|
|
16493
16279
|
|
|
16494
|
-
// ticks
|
|
16495
|
-
.k-tick {
|
|
16496
|
-
float: left;
|
|
16497
|
-
height: 100%;
|
|
16498
|
-
text-align: center;
|
|
16499
|
-
}
|
|
16500
|
-
|
|
16501
16280
|
.k-tick { background-position: center -92px; }
|
|
16502
16281
|
.k-slider-topleft .k-tick { background-position: center -122px; }
|
|
16503
16282
|
.k-slider-bottomright .k-tick { background-position: center -152px; }
|
|
@@ -16543,9 +16322,6 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16543
16322
|
right: 0;
|
|
16544
16323
|
left: auto;
|
|
16545
16324
|
}
|
|
16546
|
-
.k-slider-buttons .k-slider-track {
|
|
16547
|
-
right: $slider-button-spacing;
|
|
16548
|
-
}
|
|
16549
16325
|
|
|
16550
16326
|
.k-button .k-i-arrow-e,
|
|
16551
16327
|
.k-button .k-i-arrow-w {
|
|
@@ -16554,11 +16330,6 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16554
16330
|
}
|
|
16555
16331
|
}
|
|
16556
16332
|
|
|
16557
|
-
.k-slider-wrap {
|
|
16558
|
-
height: 100%;
|
|
16559
|
-
width: 100%;
|
|
16560
|
-
}
|
|
16561
|
-
|
|
16562
16333
|
.k-slider-track,
|
|
16563
16334
|
.k-slider-selection {
|
|
16564
16335
|
margin: 0;
|
|
@@ -16580,16 +16351,6 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16580
16351
|
}
|
|
16581
16352
|
}
|
|
16582
16353
|
|
|
16583
|
-
.k-slider-buttons .k-slider-track {
|
|
16584
|
-
.k-slider-horizontal & {
|
|
16585
|
-
left: $slider-button-spacing;
|
|
16586
|
-
}
|
|
16587
|
-
|
|
16588
|
-
.k-slider-vertical & {
|
|
16589
|
-
bottom: $slider-button-spacing;
|
|
16590
|
-
}
|
|
16591
|
-
}
|
|
16592
|
-
|
|
16593
16354
|
|
|
16594
16355
|
.k-draghandle {
|
|
16595
16356
|
background-color: transparent;
|
|
@@ -16600,30 +16361,10 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16600
16361
|
position: absolute;
|
|
16601
16362
|
text-align: center;
|
|
16602
16363
|
text-decoration: none;
|
|
16603
|
-
box-sizing:
|
|
16364
|
+
box-sizing: border-box;
|
|
16604
16365
|
width: $slider-draghandle-size;
|
|
16605
16366
|
height: $slider-draghandle-size;
|
|
16606
16367
|
|
|
16607
|
-
.k-slider-horizontal & {
|
|
16608
|
-
top: 50%;
|
|
16609
|
-
transform: translateY(-50%);
|
|
16610
|
-
|
|
16611
|
-
&:active,
|
|
16612
|
-
&.k-pressed {
|
|
16613
|
-
transform: translateY(-50%) scale($slider-draghandle-active-scale);
|
|
16614
|
-
}
|
|
16615
|
-
}
|
|
16616
|
-
|
|
16617
|
-
.k-slider-vertical & {
|
|
16618
|
-
left: 50%;
|
|
16619
|
-
transform: translateX(-50%);
|
|
16620
|
-
|
|
16621
|
-
&:active,
|
|
16622
|
-
&.k-pressed {
|
|
16623
|
-
transform: translateX(-50%) scale($slider-draghandle-active-scale);
|
|
16624
|
-
}
|
|
16625
|
-
}
|
|
16626
|
-
|
|
16627
16368
|
.k-slider-transitions.k-slider-horizontal & {
|
|
16628
16369
|
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;
|
|
16629
16370
|
}
|
|
@@ -16652,34 +16393,18 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16652
16393
|
}
|
|
16653
16394
|
|
|
16654
16395
|
|
|
16655
|
-
|
|
16656
|
-
|
|
16657
|
-
|
|
16658
|
-
.k-slider-
|
|
16659
|
-
|
|
16660
|
-
|
|
16661
|
-
|
|
16662
|
-
.k-slider-horizontal & {
|
|
16663
|
-
height: 100%;
|
|
16664
|
-
padding: 2px 0;
|
|
16665
|
-
box-sizing: border-box;
|
|
16666
|
-
}
|
|
16667
|
-
|
|
16668
|
-
.k-slider-vertical & {
|
|
16669
|
-
padding-top: 1px;
|
|
16670
|
-
}
|
|
16671
|
-
|
|
16672
|
-
.k-slider-vertical .k-slider-buttons & {
|
|
16673
|
-
margin: 0;
|
|
16674
|
-
padding-top: $slider-button-spacing;
|
|
16396
|
+
// Slider readonly
|
|
16397
|
+
.k-slider.k-readonly {
|
|
16398
|
+
.k-button,
|
|
16399
|
+
.k-slider-track,
|
|
16400
|
+
.k-tick,
|
|
16401
|
+
.k-draghandle {
|
|
16402
|
+
pointer-events: none;
|
|
16675
16403
|
}
|
|
16676
16404
|
}
|
|
16677
|
-
.k-slider-items::after {
|
|
16678
|
-
content: "";
|
|
16679
|
-
display: block;
|
|
16680
|
-
clear: both;
|
|
16681
|
-
}
|
|
16682
16405
|
|
|
16406
|
+
|
|
16407
|
+
// Slider tooltip
|
|
16683
16408
|
.k-slider-tooltip {
|
|
16684
16409
|
.k-callout-n,
|
|
16685
16410
|
.k-callout-s {
|
|
@@ -16691,6 +16416,21 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16691
16416
|
margin-top: -$tooltip-callout-size / 2;
|
|
16692
16417
|
}
|
|
16693
16418
|
}
|
|
16419
|
+
|
|
16420
|
+
|
|
16421
|
+
// Angular specific
|
|
16422
|
+
.k-slider kendo-resize-sensor {
|
|
16423
|
+
position: absolute;
|
|
16424
|
+
}
|
|
16425
|
+
.k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
|
|
16426
|
+
padding-left: calc( #{$slider-draghandle-size} / 2 );
|
|
16427
|
+
padding-right: calc( #{$slider-draghandle-size} / 2 );
|
|
16428
|
+
}
|
|
16429
|
+
.k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
|
|
16430
|
+
padding-top: calc( #{$slider-draghandle-size} / 2 );
|
|
16431
|
+
padding-bottom: calc( #{$slider-draghandle-size} / 2 );
|
|
16432
|
+
}
|
|
16433
|
+
|
|
16694
16434
|
}
|
|
16695
16435
|
|
|
16696
16436
|
// #endregion
|
|
@@ -16810,12 +16550,6 @@ $slider-disabled-opacity: .65 !default;
|
|
|
16810
16550
|
&.k-state-disabled {
|
|
16811
16551
|
opacity: $slider-disabled-opacity;
|
|
16812
16552
|
}
|
|
16813
|
-
|
|
16814
|
-
.k-slider-wrap {
|
|
16815
|
-
&:focus {
|
|
16816
|
-
outline: none;
|
|
16817
|
-
}
|
|
16818
|
-
}
|
|
16819
16553
|
}
|
|
16820
16554
|
|
|
16821
16555
|
.k-slider-horizontal .k-tick {
|
|
@@ -17307,7 +17041,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
|
|
|
17307
17041
|
display: block;
|
|
17308
17042
|
position: absolute;
|
|
17309
17043
|
bottom: 0;
|
|
17310
|
-
content: "
|
|
17044
|
+
content: "\200b";
|
|
17311
17045
|
height: 0;
|
|
17312
17046
|
line-height: 0;
|
|
17313
17047
|
z-index: 1;
|
|
@@ -17345,7 +17079,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
|
|
|
17345
17079
|
&::after {
|
|
17346
17080
|
display: block;
|
|
17347
17081
|
position: absolute;
|
|
17348
|
-
content: "
|
|
17082
|
+
content: "\200b";
|
|
17349
17083
|
height: 0;
|
|
17350
17084
|
line-height: 0;
|
|
17351
17085
|
z-index: 1;
|
|
@@ -17951,7 +17685,7 @@ $time-list-focused-bg: null !default;
|
|
|
17951
17685
|
&::before,
|
|
17952
17686
|
&::after {
|
|
17953
17687
|
display: block;
|
|
17954
|
-
content: "
|
|
17688
|
+
content: "\200b";
|
|
17955
17689
|
position: absolute;
|
|
17956
17690
|
width: 100%;
|
|
17957
17691
|
left: 0;
|
|
@@ -17981,13 +17715,14 @@ $time-list-focused-bg: null !default;
|
|
|
17981
17715
|
flex: 1;
|
|
17982
17716
|
position: relative;
|
|
17983
17717
|
z-index: 1;
|
|
17718
|
+
outline: 0;
|
|
17984
17719
|
overflow: hidden;
|
|
17985
17720
|
|
|
17986
17721
|
&::before,
|
|
17987
17722
|
&::after {
|
|
17988
17723
|
display: block;
|
|
17989
17724
|
position: absolute;
|
|
17990
|
-
content: "
|
|
17725
|
+
content: "\200b";
|
|
17991
17726
|
height: 0;
|
|
17992
17727
|
line-height: 0;
|
|
17993
17728
|
z-index: 1;
|
|
@@ -18185,25 +17920,6 @@ $time-list-focused-bg: null !default;
|
|
|
18185
17920
|
// Component
|
|
18186
17921
|
// #region @import "_variables.scss"; -> packages/material/scss/autocomplete/_variables.scss
|
|
18187
17922
|
// Autocomplete
|
|
18188
|
-
$autocomplete-bg: $kendo-input-bg !default;
|
|
18189
|
-
$autocomplete-text: $kendo-input-text !default;
|
|
18190
|
-
$autocomplete-border: $kendo-input-border !default;
|
|
18191
|
-
$autocomplete-shadow: $kendo-input-shadow !default;
|
|
18192
|
-
|
|
18193
|
-
$autocomplete-hovered-bg: $kendo-input-hover-bg !default;
|
|
18194
|
-
$autocomplete-hovered-text: $kendo-input-hover-text !default;
|
|
18195
|
-
$autocomplete-hovered-border: $kendo-input-hover-border !default;
|
|
18196
|
-
$autocomplete-hovered-shadow: $kendo-input-hover-shadow !default;
|
|
18197
|
-
|
|
18198
|
-
$autocomplete-focused-bg: $kendo-input-focus-bg !default;
|
|
18199
|
-
$autocomplete-focused-text: $kendo-input-focus-text !default;
|
|
18200
|
-
$autocomplete-focused-border: $kendo-input-focus-border !default;
|
|
18201
|
-
$autocomplete-focused-shadow: $kendo-input-focus-shadow !default;
|
|
18202
|
-
|
|
18203
|
-
$autocomplete-disabled-bg: null !default;
|
|
18204
|
-
$autocomplete-disabled-text: null !default;
|
|
18205
|
-
$autocomplete-disabled-border: null !default;
|
|
18206
|
-
$autocomplete-disabled-shadow: null !default;
|
|
18207
17923
|
|
|
18208
17924
|
// #endregion
|
|
18209
17925
|
// #region @import "_layout.scss"; -> packages/material/scss/autocomplete/_layout.scss
|
|
@@ -18220,7 +17936,7 @@ $autocomplete-disabled-shadow: null !default;
|
|
|
18220
17936
|
// #endregion
|
|
18221
17937
|
// #region @import "_theme.scss"; -> packages/material/scss/autocomplete/_theme.scss
|
|
18222
17938
|
// #region @import "~@progress/kendo-theme-default/scss/autocomplete/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/autocomplete/_theme.scss
|
|
18223
|
-
@include exports("autocomplete/theme") {
|
|
17939
|
+
@include exports( "autocomplete/theme" ) {
|
|
18224
17940
|
|
|
18225
17941
|
// Autocomplete
|
|
18226
17942
|
.k-autocomplete {}
|
|
@@ -18743,10 +18459,6 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
|
|
|
18743
18459
|
z-index: 1;
|
|
18744
18460
|
}
|
|
18745
18461
|
|
|
18746
|
-
.k-slider-wrap > .k-slider-track {
|
|
18747
|
-
height: $colorgradient-slider-vertical-size;
|
|
18748
|
-
}
|
|
18749
|
-
|
|
18750
18462
|
.k-slider-selection {
|
|
18751
18463
|
display: none;
|
|
18752
18464
|
}
|
|
@@ -19115,10 +18827,15 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
|
|
|
19115
18827
|
@include exports( "colorpicker/layout" ) {
|
|
19116
18828
|
|
|
19117
18829
|
// Color picker
|
|
19118
|
-
.k-
|
|
18830
|
+
.k-color-picker {
|
|
19119
18831
|
width: min-content;
|
|
19120
18832
|
}
|
|
19121
18833
|
|
|
18834
|
+
// Alias
|
|
18835
|
+
.k-colorpicker {
|
|
18836
|
+
@extend .k-color-picker;
|
|
18837
|
+
}
|
|
18838
|
+
|
|
19122
18839
|
}
|
|
19123
18840
|
|
|
19124
18841
|
// #endregion
|
|
@@ -19129,7 +18846,7 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
|
|
|
19129
18846
|
@include exports( "colorpicker/theme" ) {
|
|
19130
18847
|
|
|
19131
18848
|
// Color picker
|
|
19132
|
-
.k-
|
|
18849
|
+
.k-color-picker {}
|
|
19133
18850
|
|
|
19134
18851
|
}
|
|
19135
18852
|
|
|
@@ -19430,6 +19147,21 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
|
|
|
19430
19147
|
}
|
|
19431
19148
|
|
|
19432
19149
|
|
|
19150
|
+
// Angular specific
|
|
19151
|
+
kendo-daterange {
|
|
19152
|
+
// @extend .k-daterangepicker;
|
|
19153
|
+
}
|
|
19154
|
+
|
|
19155
|
+
|
|
19156
|
+
// React specific
|
|
19157
|
+
.k-daterangepicker-wrap {
|
|
19158
|
+
display: inherit;
|
|
19159
|
+
flex-flow: inherit;
|
|
19160
|
+
align-items: inherit;
|
|
19161
|
+
gap: inherit;
|
|
19162
|
+
}
|
|
19163
|
+
|
|
19164
|
+
|
|
19433
19165
|
// Alias
|
|
19434
19166
|
.k-daterangepicker {
|
|
19435
19167
|
@extend .k-daterange-picker;
|
|
@@ -19863,13 +19595,28 @@ $dropdownlist-select-focused-text: $kendo-input-text !default;
|
|
|
19863
19595
|
// Dropdown operator
|
|
19864
19596
|
.k-dropdown-operator {
|
|
19865
19597
|
width: min-content;
|
|
19598
|
+
flex: none;
|
|
19866
19599
|
aspect-ratio: 1;
|
|
19867
19600
|
|
|
19601
|
+
.k-input-button {
|
|
19602
|
+
border-width: 0;
|
|
19603
|
+
}
|
|
19604
|
+
.k-input-button .k-button-icon {
|
|
19605
|
+
width: auto;
|
|
19606
|
+
aspect-ratio: 1;
|
|
19607
|
+
}
|
|
19608
|
+
|
|
19868
19609
|
.k-input-inner {
|
|
19869
19610
|
display: none;
|
|
19870
19611
|
}
|
|
19871
19612
|
}
|
|
19872
19613
|
|
|
19614
|
+
// Alias
|
|
19615
|
+
.k-dropdown,
|
|
19616
|
+
.k-dropdownlist {
|
|
19617
|
+
@extend .k-dropdown-list !optional;
|
|
19618
|
+
}
|
|
19619
|
+
|
|
19873
19620
|
}
|
|
19874
19621
|
|
|
19875
19622
|
// #endregion
|
|
@@ -19997,30 +19744,30 @@ $dropdownlist-select-focused-text: $kendo-input-text !default;
|
|
|
19997
19744
|
// #region @import "_variables.scss"; -> packages/material/scss/treeview/_variables.scss
|
|
19998
19745
|
// Treeview
|
|
19999
19746
|
|
|
20000
|
-
///
|
|
19747
|
+
/// Font family of the treeview component.
|
|
20001
19748
|
/// @group treeview
|
|
20002
19749
|
$kendo-treeview-font-family: $font-family !default;
|
|
20003
|
-
///
|
|
19750
|
+
/// Font size of the treeview component.
|
|
20004
19751
|
/// @group treeview
|
|
20005
|
-
$kendo-treeview-font-size: $font-size !default;
|
|
20006
|
-
///
|
|
19752
|
+
$kendo-treeview-font-size: $font-size-lg !default;
|
|
19753
|
+
/// Line height of the treeview component.
|
|
20007
19754
|
/// @group treeview
|
|
20008
|
-
$kendo-treeview-line-height:
|
|
19755
|
+
$kendo-treeview-line-height: 1.25 !default;
|
|
20009
19756
|
|
|
20010
|
-
///
|
|
19757
|
+
/// Indentation of child groups in treeview component.
|
|
20011
19758
|
/// @group treeview
|
|
20012
19759
|
$kendo-treeview-indent: 16px !default;
|
|
20013
19760
|
|
|
20014
|
-
///
|
|
19761
|
+
/// Horizontal padding of treeview items.
|
|
20015
19762
|
/// @group treeview
|
|
20016
|
-
$kendo-treeview-item-padding-x:
|
|
20017
|
-
///
|
|
19763
|
+
$kendo-treeview-item-padding-x: map-get( $spacing, 4 ) !default;
|
|
19764
|
+
/// Vertical padding of treeview items.
|
|
20018
19765
|
/// @group treeview
|
|
20019
|
-
$kendo-treeview-item-padding-y:
|
|
20020
|
-
///
|
|
19766
|
+
$kendo-treeview-item-padding-y: map-get( $spacing, 2 ) !default;
|
|
19767
|
+
/// Border width of treeview items.
|
|
20021
19768
|
/// @group treeview
|
|
20022
19769
|
$kendo-treeview-item-border-width: 0px !default;
|
|
20023
|
-
///
|
|
19770
|
+
/// Border radius of treeview items.
|
|
20024
19771
|
/// @group treeview
|
|
20025
19772
|
$kendo-treeview-item-border-radius: null !default;
|
|
20026
19773
|
|
|
@@ -20029,99 +19776,98 @@ $kendo-treeview-item-border-radius: null !default;
|
|
|
20029
19776
|
/// @group treeview
|
|
20030
19777
|
$kendo-treeview-sizes: (
|
|
20031
19778
|
sm: (
|
|
20032
|
-
font-size:
|
|
20033
|
-
line-height:
|
|
20034
|
-
item-padding-x: map-get( $spacing,
|
|
20035
|
-
item-padding-y: map-get( $spacing,
|
|
19779
|
+
font-size: $font-size-lg,
|
|
19780
|
+
line-height: 1.25,
|
|
19781
|
+
item-padding-x: map-get( $spacing, 4 ),
|
|
19782
|
+
item-padding-y: map-get( $spacing, 2 ) - map-get( $spacing, thin )
|
|
20036
19783
|
),
|
|
20037
19784
|
md: (
|
|
20038
|
-
font-size: $font-size,
|
|
20039
|
-
line-height:
|
|
20040
|
-
item-padding-x: map-get( $spacing,
|
|
19785
|
+
font-size: $font-size-lg,
|
|
19786
|
+
line-height: 1.25,
|
|
19787
|
+
item-padding-x: map-get( $spacing, 4 ),
|
|
20041
19788
|
item-padding-y: map-get( $spacing, 2 )
|
|
20042
19789
|
),
|
|
20043
19790
|
lg: (
|
|
20044
|
-
font-size:
|
|
20045
|
-
line-height:
|
|
20046
|
-
item-padding-x: map-get( $spacing,
|
|
20047
|
-
item-padding-y: map-get( $spacing,
|
|
19791
|
+
font-size: $font-size-lg,
|
|
19792
|
+
line-height: 1.25,
|
|
19793
|
+
item-padding-x: map-get( $spacing, 4 ),
|
|
19794
|
+
item-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
|
|
20048
19795
|
)
|
|
20049
19796
|
) !default;
|
|
20050
19797
|
|
|
20051
19798
|
|
|
20052
|
-
///
|
|
19799
|
+
/// Background color of the treeview component.
|
|
20053
19800
|
/// @group treeview
|
|
20054
19801
|
$kendo-treeview-bg: null !default;
|
|
20055
|
-
///
|
|
19802
|
+
/// Text color of the treeview component.
|
|
20056
19803
|
/// @group treeview
|
|
20057
19804
|
$kendo-treeview-text: $component-text !default;
|
|
20058
|
-
///
|
|
19805
|
+
/// Border color of the treeview component.
|
|
20059
19806
|
/// @group treeview
|
|
20060
19807
|
$kendo-treeview-border: null !default;
|
|
20061
19808
|
|
|
20062
|
-
///
|
|
19809
|
+
/// Background color of hovered treeview items.
|
|
20063
19810
|
/// @group treeview
|
|
20064
19811
|
$kendo-treeview-item-hover-bg: rgba( $kendo-treeview-text, .07 ) !default;
|
|
20065
|
-
///
|
|
19812
|
+
/// Text color of hovered treeview items.
|
|
20066
19813
|
/// @group treeview
|
|
20067
19814
|
$kendo-treeview-item-hover-text: null !default;
|
|
20068
|
-
///
|
|
19815
|
+
/// Border color of hovered treeview items.
|
|
20069
19816
|
/// @group treeview
|
|
20070
19817
|
$kendo-treeview-item-hover-border: null !default;
|
|
20071
|
-
///
|
|
19818
|
+
/// Background gradient of hovered treeview items.
|
|
20072
19819
|
/// @group treeview
|
|
20073
19820
|
$kendo-treeview-item-hover-gradient: null !default;
|
|
20074
19821
|
|
|
20075
|
-
///
|
|
19822
|
+
/// Background color of selected treeview items.
|
|
20076
19823
|
/// @group treeview
|
|
20077
19824
|
$kendo-treeview-item-selected-bg: null !default;
|
|
20078
|
-
///
|
|
19825
|
+
/// Text color of selected treeview items.
|
|
20079
19826
|
/// @group treeview
|
|
20080
19827
|
$kendo-treeview-item-selected-text: $selected-bg !default;
|
|
20081
|
-
///
|
|
19828
|
+
/// Border color of selected treeview items.
|
|
20082
19829
|
/// @group treeview
|
|
20083
19830
|
$kendo-treeview-item-selected-border: null !default;
|
|
20084
|
-
///
|
|
19831
|
+
/// Background gradient of selected treeview items.
|
|
20085
19832
|
/// @group treeview
|
|
20086
19833
|
$kendo-treeview-item-selected-gradient: null !default;
|
|
20087
19834
|
|
|
20088
|
-
///
|
|
19835
|
+
/// Box shadow of focused treeview items.
|
|
20089
19836
|
/// @group treeview
|
|
20090
19837
|
$kendo-treeview-item-focus-shadow: null !default;
|
|
20091
|
-
/// The shadow of a selected and focused treeview item.
|
|
20092
19838
|
|
|
20093
|
-
///
|
|
19839
|
+
/// Background color of load more.
|
|
20094
19840
|
/// @group treeview
|
|
20095
19841
|
$kendo-treeview-loadmore-bg: transparent !default;
|
|
20096
|
-
///
|
|
19842
|
+
/// Text color of load more.
|
|
20097
19843
|
/// @group treeview
|
|
20098
19844
|
$kendo-treeview-loadmore-text: inherit !default;
|
|
20099
|
-
///
|
|
19845
|
+
/// Border color of load more.
|
|
20100
19846
|
/// @group treeview
|
|
20101
19847
|
$kendo-treeview-loadmore-border: null !default;
|
|
20102
19848
|
|
|
20103
|
-
///
|
|
19849
|
+
/// Background color of a hovered load more.
|
|
20104
19850
|
/// @group treeview
|
|
20105
19851
|
$kendo-treeview-loadmore-hover-bg: transparent !default;
|
|
20106
|
-
///
|
|
19852
|
+
/// Text color of a hovered load more.
|
|
20107
19853
|
/// @group treeview
|
|
20108
19854
|
$kendo-treeview-loadmore-hover-text: inherit !default;
|
|
20109
|
-
///
|
|
19855
|
+
/// Border color of a hovered load more.
|
|
20110
19856
|
/// @group treeview
|
|
20111
19857
|
$kendo-treeview-loadmore-hover-border: null !default;
|
|
20112
19858
|
|
|
20113
|
-
///
|
|
19859
|
+
/// Background color of a focused load more.
|
|
20114
19860
|
/// @group treeview
|
|
20115
19861
|
$kendo-treeview-loadmore-focus-bg: transparent !default;
|
|
20116
|
-
///
|
|
19862
|
+
/// Text color of a focused load more.
|
|
20117
19863
|
/// @group treeview
|
|
20118
19864
|
$kendo-treeview-loadmore-focus-text: inherit !default;
|
|
20119
|
-
///
|
|
19865
|
+
/// Border color of a focused load more.
|
|
20120
19866
|
/// @group treeview
|
|
20121
19867
|
$kendo-treeview-loadmore-focus-border: null !default;
|
|
20122
|
-
///
|
|
19868
|
+
/// Box shadow of a focused load more.
|
|
20123
19869
|
/// @group treeview
|
|
20124
|
-
$kendo-treeview-loadmore-focus-shadow:
|
|
19870
|
+
$kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;
|
|
20125
19871
|
|
|
20126
19872
|
// #endregion
|
|
20127
19873
|
// #region @import "_layout.scss"; -> packages/material/scss/treeview/_layout.scss
|
|
@@ -20136,6 +19882,8 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20136
19882
|
box-sizing: border-box;
|
|
20137
19883
|
outline: 0;
|
|
20138
19884
|
font-family: $kendo-treeview-font-family;
|
|
19885
|
+
font-size: $kendo-treeview-font-size;
|
|
19886
|
+
line-height: $kendo-treeview-line-height;
|
|
20139
19887
|
display: block;
|
|
20140
19888
|
cursor: default;
|
|
20141
19889
|
overflow: auto;
|
|
@@ -20145,9 +19893,18 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20145
19893
|
}
|
|
20146
19894
|
|
|
20147
19895
|
|
|
19896
|
+
// Treeview filter
|
|
19897
|
+
.k-treeview-filter {
|
|
19898
|
+
padding: map-get( $spacing, 1 );
|
|
19899
|
+
box-sizing: border-box;
|
|
19900
|
+
display: block;
|
|
19901
|
+
position: relative;
|
|
19902
|
+
flex: none;
|
|
19903
|
+
}
|
|
19904
|
+
|
|
19905
|
+
|
|
20148
19906
|
// Treeview group
|
|
20149
|
-
.k-treeview-group
|
|
20150
|
-
.k-treeview .k-group {
|
|
19907
|
+
.k-treeview-group {
|
|
20151
19908
|
margin: 0;
|
|
20152
19909
|
padding: 0;
|
|
20153
19910
|
list-style: none;
|
|
@@ -20190,11 +19947,6 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20190
19947
|
flex-flow: row nowrap;
|
|
20191
19948
|
align-items: center;
|
|
20192
19949
|
cursor: pointer;
|
|
20193
|
-
|
|
20194
|
-
+ .k-checkbox-wrap,
|
|
20195
|
-
+ .k-checkbox-wrapper {
|
|
20196
|
-
margin-left: $icon-spacing;
|
|
20197
|
-
}
|
|
20198
19950
|
}
|
|
20199
19951
|
|
|
20200
19952
|
|
|
@@ -20207,13 +19959,16 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20207
19959
|
// Checkbox
|
|
20208
19960
|
.k-treeview .k-checkbox-wrap,
|
|
20209
19961
|
.k-treeview .k-checkbox-wrapper {
|
|
19962
|
+
margin-left: $icon-spacing;
|
|
20210
19963
|
margin-right: $icon-spacing;
|
|
19964
|
+
align-self: center;
|
|
20211
19965
|
}
|
|
20212
19966
|
|
|
20213
19967
|
|
|
20214
19968
|
// Treeview leaf
|
|
20215
19969
|
.k-treeview-leaf {
|
|
20216
19970
|
@include border-radius( $kendo-treeview-item-border-radius );
|
|
19971
|
+
padding: $kendo-treeview-item-padding-y $kendo-treeview-item-padding-x;
|
|
20217
19972
|
border: $kendo-treeview-item-border-width solid transparent;
|
|
20218
19973
|
text-decoration: none;
|
|
20219
19974
|
display: inline-flex;
|
|
@@ -20228,8 +19983,7 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20228
19983
|
margin-right: $icon-spacing;
|
|
20229
19984
|
}
|
|
20230
19985
|
|
|
20231
|
-
&.k-
|
|
20232
|
-
&.k-state-focused {
|
|
19986
|
+
&.k-focus {
|
|
20233
19987
|
z-index: 1;
|
|
20234
19988
|
}
|
|
20235
19989
|
}
|
|
@@ -20240,10 +19994,9 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20240
19994
|
cursor: pointer;
|
|
20241
19995
|
|
|
20242
19996
|
&:hover,
|
|
20243
|
-
&.k-
|
|
19997
|
+
&.k-hover,
|
|
20244
19998
|
&:focus,
|
|
20245
|
-
&.k-
|
|
20246
|
-
&.k-state-focused {
|
|
19999
|
+
&.k-focus {
|
|
20247
20000
|
text-decoration: underline;
|
|
20248
20001
|
}
|
|
20249
20002
|
}
|
|
@@ -20263,11 +20016,6 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20263
20016
|
.k-treeview-toggle {
|
|
20264
20017
|
margin-left: 0;
|
|
20265
20018
|
margin-right: -$kendo-treeview-indent;
|
|
20266
|
-
|
|
20267
|
-
+ .k-checkbox-wrap,
|
|
20268
|
-
+ .k-checkbox-wrapper {
|
|
20269
|
-
margin-right: $icon-spacing;
|
|
20270
|
-
}
|
|
20271
20019
|
}
|
|
20272
20020
|
|
|
20273
20021
|
// Loading
|
|
@@ -20276,13 +20024,6 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20276
20024
|
margin-left: $icon-spacing;
|
|
20277
20025
|
}
|
|
20278
20026
|
|
|
20279
|
-
// Checkbox
|
|
20280
|
-
.k-checkbox-wrap,
|
|
20281
|
-
.k-checkbox-wrapper {
|
|
20282
|
-
margin-right: 0;
|
|
20283
|
-
margin-left: $icon-spacing;
|
|
20284
|
-
}
|
|
20285
|
-
|
|
20286
20027
|
// Treeview leaf
|
|
20287
20028
|
.k-treeview-leaf,
|
|
20288
20029
|
.k-in {
|
|
@@ -20306,10 +20047,11 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20306
20047
|
line-height: $_line-height;
|
|
20307
20048
|
|
|
20308
20049
|
.k-treeview-leaf {
|
|
20309
|
-
padding: $_item-padding-
|
|
20050
|
+
padding: $_item-padding-y $_item-padding-x;
|
|
20310
20051
|
}
|
|
20311
20052
|
}
|
|
20312
20053
|
}
|
|
20054
|
+
|
|
20313
20055
|
}
|
|
20314
20056
|
|
|
20315
20057
|
// #endregion
|
|
@@ -20394,6 +20136,7 @@ $kendo-treeview-loadmore-focus-shadow: none !default;
|
|
|
20394
20136
|
@include box-shadow( $kendo-treeview-loadmore-focus-shadow );
|
|
20395
20137
|
}
|
|
20396
20138
|
}
|
|
20139
|
+
|
|
20397
20140
|
}
|
|
20398
20141
|
|
|
20399
20142
|
// #endregion
|
|
@@ -22181,7 +21924,7 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
|
|
|
22181
21924
|
$appbar-margin-y: null !default;
|
|
22182
21925
|
$appbar-margin-x: null !default;
|
|
22183
21926
|
$appbar-padding-y: map-get( $spacing, 2 ) !default;
|
|
22184
|
-
$appbar-padding-x: map-get( $spacing,
|
|
21927
|
+
$appbar-padding-x: map-get( $spacing, 2 ) !default;
|
|
22185
21928
|
$appbar-border-width: 0px !default;
|
|
22186
21929
|
|
|
22187
21930
|
$appbar-zindex: 1000 !default;
|
|
@@ -22259,9 +22002,12 @@ $appbar-bottom-box-shadow: 0px -2px 3px rgba(0, 0, 0, .24) !default;
|
|
|
22259
22002
|
|
|
22260
22003
|
// Input
|
|
22261
22004
|
.k-input,
|
|
22262
|
-
.k-picker
|
|
22005
|
+
.k-picker {
|
|
22263
22006
|
width: 10em;
|
|
22264
22007
|
}
|
|
22008
|
+
.k-color-picker {
|
|
22009
|
+
width: min-content;
|
|
22010
|
+
}
|
|
22265
22011
|
|
|
22266
22012
|
}
|
|
22267
22013
|
|
|
@@ -23897,10 +23643,10 @@ $actionsheet-item-disabled-opacity: .42 !default;
|
|
|
23897
23643
|
margin-top: -($window-inner-padding-y / 2);
|
|
23898
23644
|
}
|
|
23899
23645
|
.k-window-content:first-child {
|
|
23900
|
-
padding-top:
|
|
23646
|
+
padding-top: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
|
|
23901
23647
|
}
|
|
23902
23648
|
.k-window-content:last-child {
|
|
23903
|
-
padding-bottom:
|
|
23649
|
+
padding-bottom: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
|
|
23904
23650
|
}
|
|
23905
23651
|
|
|
23906
23652
|
.k-window-iframecontent {
|
|
@@ -23930,6 +23676,16 @@ $actionsheet-item-disabled-opacity: .42 !default;
|
|
|
23930
23676
|
overflow: hidden;
|
|
23931
23677
|
}
|
|
23932
23678
|
|
|
23679
|
+
|
|
23680
|
+
// Prompt
|
|
23681
|
+
.k-prompt-container {
|
|
23682
|
+
|
|
23683
|
+
> .k-textarea {
|
|
23684
|
+
width: 100%;
|
|
23685
|
+
}
|
|
23686
|
+
|
|
23687
|
+
}
|
|
23688
|
+
|
|
23933
23689
|
// Resize Handles
|
|
23934
23690
|
.k-window {
|
|
23935
23691
|
.k-resize-n { top: 0; }
|
|
@@ -27426,7 +27182,7 @@ $tabstrip-content-border-focused: $component-text !default;
|
|
|
27426
27182
|
color: inherit;
|
|
27427
27183
|
background-color: transparent;
|
|
27428
27184
|
display: flex;
|
|
27429
|
-
flex-
|
|
27185
|
+
flex-flow: column nowrap;
|
|
27430
27186
|
-webkit-touch-callout: none;
|
|
27431
27187
|
-webkit-tap-highlight-color: $rgba-transparent;
|
|
27432
27188
|
|
|
@@ -27519,6 +27275,9 @@ $tabstrip-content-border-focused: $component-text !default;
|
|
|
27519
27275
|
left: 0;
|
|
27520
27276
|
transition: width .2s linear;
|
|
27521
27277
|
|
|
27278
|
+
// TODO: a better name
|
|
27279
|
+
display: none;
|
|
27280
|
+
|
|
27522
27281
|
&.k-complete {
|
|
27523
27282
|
width: 100%;
|
|
27524
27283
|
border-top-width: 0;
|
|
@@ -27532,6 +27291,7 @@ $tabstrip-content-border-focused: $component-text !default;
|
|
|
27532
27291
|
|
|
27533
27292
|
> .k-tabstrip-items {
|
|
27534
27293
|
flex: 1 1 auto;
|
|
27294
|
+
flex-wrap: nowrap;
|
|
27535
27295
|
white-space: nowrap;
|
|
27536
27296
|
overflow: hidden;
|
|
27537
27297
|
}
|
|
@@ -29365,14 +29125,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29365
29125
|
}
|
|
29366
29126
|
}
|
|
29367
29127
|
|
|
29368
|
-
.k-grid-filter-menu {
|
|
29369
|
-
|
|
29370
|
-
.k-filter-selected-items {
|
|
29371
|
-
margin: 1em;
|
|
29372
|
-
font-weight: normal;
|
|
29373
|
-
}
|
|
29374
|
-
}
|
|
29375
|
-
|
|
29376
29128
|
.k-grid-edit-form {
|
|
29377
29129
|
|
|
29378
29130
|
.k-popup-edit-form,
|
|
@@ -29381,7 +29133,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29381
29133
|
min-width: auto;
|
|
29382
29134
|
}
|
|
29383
29135
|
}
|
|
29384
|
-
|
|
29385
29136
|
}
|
|
29386
29137
|
|
|
29387
29138
|
.k-grid.k-grid-mobile {
|
|
@@ -29648,29 +29399,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29648
29399
|
|
|
29649
29400
|
.k-pane-wrapper {
|
|
29650
29401
|
|
|
29651
|
-
.k-
|
|
29652
|
-
|
|
29653
|
-
.k-grid-filter-menu,
|
|
29654
|
-
.k-scheduler-edit-form {
|
|
29655
|
-
|
|
29656
|
-
> .k-header {
|
|
29657
|
-
display: flex;
|
|
29658
|
-
justify-content: space-between;
|
|
29659
|
-
padding: .3em .6em;
|
|
29660
|
-
width: auto;
|
|
29661
|
-
line-height: 2em;
|
|
29662
|
-
|
|
29663
|
-
.k-header-done,
|
|
29664
|
-
.k-header-cancel {
|
|
29665
|
-
display: flex;
|
|
29666
|
-
flex-direction: row;
|
|
29667
|
-
align-items: center;
|
|
29668
|
-
|
|
29669
|
-
.k-icon {
|
|
29670
|
-
font-size: 1.5em;
|
|
29671
|
-
}
|
|
29672
|
-
}
|
|
29673
|
-
}
|
|
29402
|
+
.k-appbar {
|
|
29403
|
+
padding: map-get( $spacing, 1 );
|
|
29674
29404
|
}
|
|
29675
29405
|
|
|
29676
29406
|
.k-list-title,
|
|
@@ -29679,6 +29409,12 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29679
29409
|
display: block;
|
|
29680
29410
|
}
|
|
29681
29411
|
|
|
29412
|
+
.k-listgroup-title {
|
|
29413
|
+
padding: $listgroup-item-padding-y $listgroup-item-padding-x;
|
|
29414
|
+
font-weight: bold;
|
|
29415
|
+
text-transform: uppercase;
|
|
29416
|
+
}
|
|
29417
|
+
|
|
29682
29418
|
.k-listgroup {
|
|
29683
29419
|
|
|
29684
29420
|
.k-listgroup-item {
|
|
@@ -29686,23 +29422,56 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29686
29422
|
}
|
|
29687
29423
|
}
|
|
29688
29424
|
.k-listgroup + .k-listgroup {
|
|
29689
|
-
margin-top:
|
|
29425
|
+
margin-top: map-get( $spacing, 4 );
|
|
29690
29426
|
}
|
|
29691
29427
|
|
|
29692
29428
|
// Column menu
|
|
29693
29429
|
.k-column-menu {
|
|
29430
|
+
padding: map-get( $spacing, 2 );
|
|
29431
|
+
display: flex;
|
|
29432
|
+
flex-flow: column nowrap;
|
|
29433
|
+
gap: map-get( $spacing, 2 );
|
|
29694
29434
|
|
|
29695
29435
|
.k-filter-item .k-filterable * {
|
|
29696
29436
|
pointer-events: none;
|
|
29697
29437
|
}
|
|
29438
|
+
|
|
29439
|
+
.k-list-title,
|
|
29440
|
+
.k-listgroup-title {
|
|
29441
|
+
padding: 0;
|
|
29442
|
+
}
|
|
29443
|
+
|
|
29444
|
+
.k-listgroup {
|
|
29445
|
+
margin-inline: -#{map-get( $spacing, 2 )};
|
|
29446
|
+
}
|
|
29698
29447
|
}
|
|
29699
29448
|
|
|
29700
29449
|
// Filter menu
|
|
29701
29450
|
.k-filter-menu {
|
|
29451
|
+
padding: map-get( $spacing, 2 );
|
|
29452
|
+
display: flex;
|
|
29453
|
+
flex-flow: column nowrap;
|
|
29454
|
+
gap: map-get( $spacing, 2 );
|
|
29455
|
+
|
|
29456
|
+
.k-list-title {
|
|
29457
|
+
padding: 0;
|
|
29458
|
+
}
|
|
29459
|
+
|
|
29460
|
+
.k-list-filter {
|
|
29461
|
+
padding: 0;
|
|
29462
|
+
display: flex;
|
|
29463
|
+
flex-flow: column nowrap;
|
|
29464
|
+
gap: inherit;
|
|
29465
|
+
}
|
|
29466
|
+
|
|
29702
29467
|
.k-filter-tools {
|
|
29703
|
-
margin: 1em;
|
|
29704
29468
|
display: flex;
|
|
29705
|
-
|
|
29469
|
+
flex-flow: row nowrap;
|
|
29470
|
+
gap: inherit;
|
|
29471
|
+
}
|
|
29472
|
+
|
|
29473
|
+
.k-listgroup {
|
|
29474
|
+
margin-inline: -#{map-get( $spacing, 2 )};
|
|
29706
29475
|
}
|
|
29707
29476
|
}
|
|
29708
29477
|
|
|
@@ -29726,7 +29495,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29726
29495
|
}
|
|
29727
29496
|
|
|
29728
29497
|
// Pager
|
|
29729
|
-
|
|
29730
29498
|
.k-pager-wrap.k-pager-sm {
|
|
29731
29499
|
justify-content: center;
|
|
29732
29500
|
|
|
@@ -29736,39 +29504,14 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29736
29504
|
|
|
29737
29505
|
}
|
|
29738
29506
|
|
|
29739
|
-
// IE
|
|
29740
|
-
|
|
29741
|
-
.k-ie & {
|
|
29742
|
-
|
|
29743
|
-
.k-scheduler {
|
|
29744
|
-
.k-scheduler-toolbar,
|
|
29745
|
-
.k-scheduler-footer {
|
|
29746
|
-
line-height: 2em;
|
|
29747
|
-
}
|
|
29748
|
-
}
|
|
29749
|
-
|
|
29750
|
-
.k-grid {
|
|
29751
|
-
|
|
29752
|
-
.k-icon {
|
|
29753
|
-
text-indent: 0;
|
|
29754
|
-
}
|
|
29755
|
-
}
|
|
29756
|
-
}
|
|
29757
|
-
|
|
29758
29507
|
// RTL
|
|
29759
|
-
|
|
29760
29508
|
.k-rtl &,
|
|
29761
29509
|
&[dir="rtl"],
|
|
29762
29510
|
[dir="rtl"] & {
|
|
29763
29511
|
|
|
29764
|
-
.k-
|
|
29765
|
-
.k-
|
|
29766
|
-
|
|
29767
|
-
.k-scheduler-edit-form {
|
|
29768
|
-
|
|
29769
|
-
> .k-header {
|
|
29770
|
-
flex-direction: row-reverse;
|
|
29771
|
-
}
|
|
29512
|
+
.k-header-cancel .k-i-arrow-chevron-left,
|
|
29513
|
+
.k-listgroup-item .k-select .k-i-arrow-chevron-right {
|
|
29514
|
+
transform: scaleX( -1 );
|
|
29772
29515
|
}
|
|
29773
29516
|
|
|
29774
29517
|
.k-scheduler-mobile {
|
|
@@ -29790,10 +29533,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29790
29533
|
margin-right: 0;
|
|
29791
29534
|
}
|
|
29792
29535
|
}
|
|
29793
|
-
|
|
29794
|
-
.k-scheduler-edit-form .k-item .k-i-arrow-chevron-right {
|
|
29795
|
-
transform: scaleX(-1);
|
|
29796
|
-
}
|
|
29797
29536
|
}
|
|
29798
29537
|
}
|
|
29799
29538
|
}
|
|
@@ -29871,15 +29610,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29871
29610
|
.k-grid-filter-menu,
|
|
29872
29611
|
.k-scheduler-edit-form {
|
|
29873
29612
|
|
|
29874
|
-
.k-header {
|
|
29875
|
-
color: $adaptive-menu-text;
|
|
29876
|
-
background-color: $adaptive-menu-bg;
|
|
29877
|
-
|
|
29878
|
-
.k-link {
|
|
29879
|
-
color: inherit;
|
|
29880
|
-
}
|
|
29881
|
-
}
|
|
29882
|
-
|
|
29883
29613
|
.k-item,
|
|
29884
29614
|
.k-link {
|
|
29885
29615
|
color: $base-text;
|
|
@@ -29981,7 +29711,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
|
|
|
29981
29711
|
// #endregion
|
|
29982
29712
|
// #region @import "_layout.scss"; -> packages/material/scss/grid/_layout.scss
|
|
29983
29713
|
$grid-hierarchy-col-width: 32px !default;
|
|
29984
|
-
$grid-form-component-vertical-align: middle !default;
|
|
29985
29714
|
// TODO: perhaps these should be the values for cell-padding-x/-y
|
|
29986
29715
|
$grid-grouping-row-border-top: 0px !default;
|
|
29987
29716
|
$grid-group-footer-border-y: 1px !default;
|
|
@@ -30013,7 +29742,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
30013
29742
|
// be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
|
|
30014
29743
|
$grid-command-cell-padding-y: calc( #{$table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$line-height-em}) / 2 ) !default;
|
|
30015
29744
|
|
|
30016
|
-
$grid-form-component-vertical-align: middle !default;
|
|
30017
29745
|
$grid-hierarchy-col-width: ($icon-size * 2) !default;
|
|
30018
29746
|
|
|
30019
29747
|
$grid-group-indicator-border-radius: $border-radius !default;
|
|
@@ -30736,6 +30464,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
30736
30464
|
|
|
30737
30465
|
> span,
|
|
30738
30466
|
.k-filtercell-wrapper {
|
|
30467
|
+
width: 100%;
|
|
30739
30468
|
display: flex;
|
|
30740
30469
|
flex-flow: row nowrap;
|
|
30741
30470
|
align-items: center;
|
|
@@ -30747,6 +30476,16 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
30747
30476
|
}
|
|
30748
30477
|
}
|
|
30749
30478
|
|
|
30479
|
+
.k-input,
|
|
30480
|
+
.k-picker {
|
|
30481
|
+
width: auto;
|
|
30482
|
+
flex: 1 1 auto;
|
|
30483
|
+
}
|
|
30484
|
+
.k-color-picker,
|
|
30485
|
+
.k-dropdown-operator {
|
|
30486
|
+
width: min-content;
|
|
30487
|
+
flex: none;
|
|
30488
|
+
}
|
|
30750
30489
|
}
|
|
30751
30490
|
|
|
30752
30491
|
// Grid content
|
|
@@ -30780,6 +30519,18 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
30780
30519
|
}
|
|
30781
30520
|
|
|
30782
30521
|
|
|
30522
|
+
// Checkboxes
|
|
30523
|
+
.k-grid th,
|
|
30524
|
+
.k-grid td {
|
|
30525
|
+
> .k-radio,
|
|
30526
|
+
> .k-radio-wrap,
|
|
30527
|
+
> .k-checkbox,
|
|
30528
|
+
> .k-checkbox-wrap {
|
|
30529
|
+
vertical-align: top;
|
|
30530
|
+
}
|
|
30531
|
+
}
|
|
30532
|
+
|
|
30533
|
+
|
|
30783
30534
|
// Edit row
|
|
30784
30535
|
.k-grid .k-edit-cell,
|
|
30785
30536
|
.k-grid .k-command-cell,
|
|
@@ -30795,13 +30546,19 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
30795
30546
|
> select,
|
|
30796
30547
|
> .k-widget:not(.k-switch) {
|
|
30797
30548
|
width: 100%;
|
|
30798
|
-
vertical-align:
|
|
30549
|
+
vertical-align: middle;
|
|
30799
30550
|
box-sizing: border-box;
|
|
30800
30551
|
}
|
|
30552
|
+
> .k-radio,
|
|
30553
|
+
> .k-checkbox,
|
|
30554
|
+
> .k-radio-wrap,
|
|
30555
|
+
> .k-checkbox-wrap {
|
|
30556
|
+
vertical-align: middle;
|
|
30557
|
+
}
|
|
30801
30558
|
}
|
|
30802
30559
|
|
|
30803
30560
|
.k-grid .k-command-cell > .k-button {
|
|
30804
|
-
vertical-align:
|
|
30561
|
+
vertical-align: middle;
|
|
30805
30562
|
}
|
|
30806
30563
|
.k-grid .k-command-cell > .k-button + .k-button {
|
|
30807
30564
|
margin-left: $grid-command-cell-button-spacing;
|
|
@@ -31251,11 +31008,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
31251
31008
|
.k-item,
|
|
31252
31009
|
.k-check-all-wrap {
|
|
31253
31010
|
padding: $grid-column-menu-list-item-padding-y $grid-column-menu-list-item-padding-x;
|
|
31254
|
-
|
|
31255
|
-
|
|
31256
|
-
line-height: inherit;
|
|
31257
|
-
display: block;
|
|
31258
|
-
}
|
|
31011
|
+
display: flex;
|
|
31012
|
+
flex-flow: row nowrap;
|
|
31259
31013
|
}
|
|
31260
31014
|
}
|
|
31261
31015
|
|
|
@@ -31296,7 +31050,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
31296
31050
|
padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
|
|
31297
31051
|
}
|
|
31298
31052
|
.k-popup > & {
|
|
31299
|
-
width: 100%;
|
|
31053
|
+
max-width: 100%;
|
|
31300
31054
|
}
|
|
31301
31055
|
|
|
31302
31056
|
.k-actions {
|
|
@@ -31337,10 +31091,17 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
31337
31091
|
}
|
|
31338
31092
|
|
|
31339
31093
|
.k-column-list-item {
|
|
31340
|
-
position: relative;
|
|
31341
|
-
display: block;
|
|
31342
31094
|
margin: 0;
|
|
31095
|
+
display: flex;
|
|
31096
|
+
flex-flow: row nowrap;
|
|
31097
|
+
align-items: center;
|
|
31098
|
+
gap: 4px;
|
|
31343
31099
|
cursor: pointer;
|
|
31100
|
+
position: relative;
|
|
31101
|
+
|
|
31102
|
+
.k-checkbox-label {
|
|
31103
|
+
margin: 0;
|
|
31104
|
+
}
|
|
31344
31105
|
}
|
|
31345
31106
|
|
|
31346
31107
|
.k-columns-items-wrap {
|
|
@@ -31442,10 +31203,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
31442
31203
|
@include exports ("grid/layout/material") {
|
|
31443
31204
|
|
|
31444
31205
|
.k-grid {
|
|
31445
|
-
.k-checkbox-label,
|
|
31446
|
-
.k-radio-label {
|
|
31447
|
-
line-height: normal;
|
|
31448
|
-
}
|
|
31449
31206
|
|
|
31450
31207
|
.k-group-footer td {
|
|
31451
31208
|
border-top-width: 0;
|
|
@@ -31704,12 +31461,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
|
|
|
31704
31461
|
@include fill( $bg: $grid-sticky-selected-alt-bg );
|
|
31705
31462
|
}
|
|
31706
31463
|
|
|
31707
|
-
// Hovered state
|
|
31708
|
-
.k-state-hover td,
|
|
31709
|
-
tr:hover td {
|
|
31710
|
-
@include fill( $bg: $grid-sticky-hovered-bg );
|
|
31711
|
-
}
|
|
31712
|
-
|
|
31713
31464
|
// Selected hover
|
|
31714
31465
|
.k-state-selected:hover td,
|
|
31715
31466
|
.k-state-selected.k-state-hover td {
|
|
@@ -32693,6 +32444,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
|
|
|
32693
32444
|
margin: 0;
|
|
32694
32445
|
}
|
|
32695
32446
|
.k-spreadsheet-tabstrip .k-loading {
|
|
32447
|
+
// TODO: better name
|
|
32696
32448
|
display: none;
|
|
32697
32449
|
}
|
|
32698
32450
|
.k-spreadsheet-tabstrip .k-content,
|
|
@@ -32721,9 +32473,12 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
|
|
|
32721
32473
|
}
|
|
32722
32474
|
|
|
32723
32475
|
.k-input,
|
|
32724
|
-
.k-picker
|
|
32476
|
+
.k-picker {
|
|
32725
32477
|
width: 5em;
|
|
32726
32478
|
}
|
|
32479
|
+
.k-color-picker {
|
|
32480
|
+
width: min-content;
|
|
32481
|
+
}
|
|
32727
32482
|
}
|
|
32728
32483
|
|
|
32729
32484
|
|
|
@@ -33256,7 +33011,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
|
|
|
33256
33011
|
}
|
|
33257
33012
|
.k-details-summary,
|
|
33258
33013
|
.k-columnmenu-item {
|
|
33259
|
-
padding: $kendo-menu-popup-item-padding-y
|
|
33014
|
+
padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
|
|
33260
33015
|
display: flex;
|
|
33261
33016
|
align-items: center;
|
|
33262
33017
|
cursor: pointer;
|
|
@@ -35303,9 +35058,13 @@ $treelist-footer-row-border-width: 1px !default;
|
|
|
35303
35058
|
padding: .4em .6em;
|
|
35304
35059
|
line-height: 1.6em;
|
|
35305
35060
|
|
|
35061
|
+
// TODO: see what this does and use a better name
|
|
35306
35062
|
.k-loading {
|
|
35307
35063
|
vertical-align: baseline;
|
|
35308
35064
|
margin-right: 5px;
|
|
35065
|
+
|
|
35066
|
+
// TODO
|
|
35067
|
+
display: none;
|
|
35309
35068
|
}
|
|
35310
35069
|
}
|
|
35311
35070
|
|
|
@@ -35504,6 +35263,7 @@ $filter-preview-operator-text: $subtle-text !default;
|
|
|
35504
35263
|
// #region @import "_layout.scss"; -> packages/material/scss/filter/_layout.scss
|
|
35505
35264
|
// #region @import "~@progress/kendo-theme-default/scss/filter/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/filter/_layout.scss
|
|
35506
35265
|
@include exports("filter/layout") {
|
|
35266
|
+
|
|
35507
35267
|
.k-filter {
|
|
35508
35268
|
border-width: 0;
|
|
35509
35269
|
display: inline-block;
|
|
@@ -35545,6 +35305,9 @@ $filter-preview-operator-text: $subtle-text !default;
|
|
|
35545
35305
|
border-style: solid;
|
|
35546
35306
|
}
|
|
35547
35307
|
}
|
|
35308
|
+
.k-filter-operator .k-dropdown-list {
|
|
35309
|
+
width: $filter-operator-dropdown-width;
|
|
35310
|
+
}
|
|
35548
35311
|
|
|
35549
35312
|
.k-filter-item {
|
|
35550
35313
|
position: relative;
|
|
@@ -37012,10 +36775,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
|
|
|
37012
36775
|
display: flex;
|
|
37013
36776
|
flex-direction: column;
|
|
37014
36777
|
padding: 10px 0 40px;
|
|
37015
|
-
|
|
37016
|
-
> span {
|
|
37017
|
-
padding-bottom: $padding-y;
|
|
37018
|
-
}
|
|
37019
36778
|
}
|
|
37020
36779
|
|
|
37021
36780
|
.k-matches-container {
|
|
@@ -37254,13 +37013,13 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
|
|
|
37254
37013
|
width: 5em;
|
|
37255
37014
|
}
|
|
37256
37015
|
|
|
37257
|
-
& + .k-
|
|
37016
|
+
& + .k-color-picker,
|
|
37258
37017
|
& + .k-dropdown-list {
|
|
37259
37018
|
margin-left: map-get( $spacing, 2 );
|
|
37260
37019
|
}
|
|
37261
37020
|
}
|
|
37262
37021
|
|
|
37263
|
-
.k-
|
|
37022
|
+
.k-color-picker {
|
|
37264
37023
|
vertical-align: middle;
|
|
37265
37024
|
}
|
|
37266
37025
|
|
|
@@ -38347,7 +38106,7 @@ $gantt-offset-resize-handler-top: 50% !default;
|
|
|
38347
38106
|
position: relative;
|
|
38348
38107
|
vertical-align: middle;
|
|
38349
38108
|
}
|
|
38350
|
-
td::after { content: "\
|
|
38109
|
+
td::after { content: "\200b"; }
|
|
38351
38110
|
}
|
|
38352
38111
|
.k-task-wrap {
|
|
38353
38112
|
margin: 0 -21px;
|
|
@@ -39914,7 +39673,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
|
|
|
39914
39673
|
// TODO: add this class to jQuery rendering
|
|
39915
39674
|
// after refactoring jQuery scheduler layout to be flex
|
|
39916
39675
|
.k-recurrence-editor {
|
|
39917
|
-
display:
|
|
39676
|
+
display: flex;
|
|
39918
39677
|
flex-direction: column;
|
|
39919
39678
|
}
|
|
39920
39679
|
kendo-scheduler .k-recurrence-editor {
|
|
@@ -40166,27 +39925,40 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
|
|
|
40166
39925
|
|
|
40167
39926
|
.k-scheduler-edit-form {
|
|
40168
39927
|
|
|
40169
|
-
.k-edit-form-container { width:
|
|
39928
|
+
.k-edit-form-container { width: 100%; }
|
|
40170
39929
|
.k-edit-label { width: 17%; }
|
|
40171
39930
|
.k-edit-field { width: 77%; }
|
|
40172
39931
|
|
|
40173
|
-
.k-
|
|
40174
|
-
|
|
39932
|
+
.k-edit-field > ul > li {
|
|
39933
|
+
display: flex;
|
|
39934
|
+
flex-flow: row nowrap;
|
|
39935
|
+
align-items: center;
|
|
39936
|
+
}
|
|
39937
|
+
.k-recurrence-editor {
|
|
39938
|
+
.k-radio-list .k-radio-wrap,
|
|
39939
|
+
.k-checkbox-list .k-checkbox-wrap {
|
|
39940
|
+
align-self: center;
|
|
39941
|
+
}
|
|
40175
39942
|
}
|
|
40176
39943
|
|
|
40177
|
-
|
|
40178
|
-
.k-
|
|
40179
|
-
.k-
|
|
40180
|
-
.k-widget.k-recur-monthday {
|
|
39944
|
+
.k-recur-interval,
|
|
39945
|
+
.k-recur-count,
|
|
39946
|
+
.k-recur-monthday {
|
|
40181
39947
|
width: 5em;
|
|
40182
39948
|
}
|
|
40183
|
-
.k-
|
|
40184
|
-
.k-
|
|
40185
|
-
.k-
|
|
40186
|
-
.k-
|
|
39949
|
+
.k-recur-until,
|
|
39950
|
+
.k-recur-month,
|
|
39951
|
+
.k-recur-weekday,
|
|
39952
|
+
.k-recur-weekday-offset {
|
|
40187
39953
|
width: 10em;
|
|
40188
39954
|
}
|
|
40189
39955
|
|
|
39956
|
+
.k-scheduler-datetime-picker {
|
|
39957
|
+
display: flex;
|
|
39958
|
+
flex-flow: row nowrap;
|
|
39959
|
+
gap: map-get( $spacing, 2 );
|
|
39960
|
+
}
|
|
39961
|
+
|
|
40190
39962
|
}
|
|
40191
39963
|
|
|
40192
39964
|
}
|
|
@@ -40459,8 +40231,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
|
|
|
40459
40231
|
|
|
40460
40232
|
.k-scheduler-edit-form {
|
|
40461
40233
|
|
|
40462
|
-
.k-edit-form-container { width: 390px; }
|
|
40463
|
-
|
|
40464
40234
|
.k-edit-label {
|
|
40465
40235
|
width: auto;
|
|
40466
40236
|
margin-bottom: .5em;
|
|
@@ -40492,20 +40262,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
|
|
|
40492
40262
|
width: 45%;
|
|
40493
40263
|
}
|
|
40494
40264
|
|
|
40495
|
-
|
|
40496
|
-
// Recurrence editor
|
|
40497
|
-
.k-edit-field .k-recur-interval,
|
|
40498
|
-
.k-edit-field .k-recur-count,
|
|
40499
|
-
.k-edit-field .k-recur-month,
|
|
40500
|
-
.k-edit-field .k-recur-monthday,
|
|
40501
|
-
.k-edit-field .k-recur-weekday-offset,
|
|
40502
|
-
.k-edit-field .k-recur-weekday {
|
|
40503
|
-
width: 28%;
|
|
40504
|
-
}
|
|
40505
|
-
.k-edit-field .k-recur-until {
|
|
40506
|
-
width: 66%;
|
|
40507
|
-
}
|
|
40508
|
-
|
|
40509
40265
|
}
|
|
40510
40266
|
|
|
40511
40267
|
// #endregion
|
|
@@ -40915,11 +40671,6 @@ $chat-quick-reply-hover-bg: $primary !default;
|
|
|
40915
40671
|
$chat-quick-reply-hover-text: $primary-contrast !default;
|
|
40916
40672
|
$chat-quick-reply-hover-border: $primary !default;
|
|
40917
40673
|
|
|
40918
|
-
$chat-message-box-bg: $component-bg !default;
|
|
40919
|
-
$chat-message-box-text: $kendo-input-text !default;
|
|
40920
|
-
$chat-message-box-border: inherit !default;
|
|
40921
|
-
$chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
40922
|
-
|
|
40923
40674
|
// #endregion
|
|
40924
40675
|
// #region @import "_layout.scss"; -> packages/material/scss/chat/_layout.scss
|
|
40925
40676
|
// #region @import "~@progress/kendo-theme-default/scss/chat/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/chat/_layout.scss
|
|
@@ -41196,7 +40947,8 @@ $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
|
41196
40947
|
box-sizing: border-box;
|
|
41197
40948
|
border-width: 1px 0 0;
|
|
41198
40949
|
border-style: solid;
|
|
41199
|
-
border-
|
|
40950
|
+
border-color: inherit !important; // sass-lint:disable-line no-important
|
|
40951
|
+
border-radius: 0 !important; // sass-lint:disable-line no-important
|
|
41200
40952
|
flex: none;
|
|
41201
40953
|
display: flex;
|
|
41202
40954
|
flex-flow: row nowrap;
|
|
@@ -41223,11 +40975,6 @@ $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
|
41223
40975
|
display: inline-block;
|
|
41224
40976
|
}
|
|
41225
40977
|
|
|
41226
|
-
&::before,
|
|
41227
|
-
&::after {
|
|
41228
|
-
display: none;
|
|
41229
|
-
}
|
|
41230
|
-
|
|
41231
40978
|
.k-rtl &,
|
|
41232
40979
|
&[dir="rtl"] {
|
|
41233
40980
|
transform: scaleX(-1);
|
|
@@ -41374,10 +41121,16 @@ $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
|
41374
41121
|
|
|
41375
41122
|
.k-scroll-button {
|
|
41376
41123
|
height: 100%;
|
|
41124
|
+
aspect-ratio: auto;
|
|
41377
41125
|
position: absolute;
|
|
41378
41126
|
z-index: 2;
|
|
41379
41127
|
top: 50%;
|
|
41380
41128
|
transform: translateY(-50%);
|
|
41129
|
+
|
|
41130
|
+
.k-button-icon {
|
|
41131
|
+
min-width: auto;
|
|
41132
|
+
min-height: auto;
|
|
41133
|
+
}
|
|
41381
41134
|
}
|
|
41382
41135
|
.k-scroll-button-left {
|
|
41383
41136
|
left: 0;
|
|
@@ -41553,19 +41306,6 @@ $chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
|
|
|
41553
41306
|
);
|
|
41554
41307
|
}
|
|
41555
41308
|
|
|
41556
|
-
|
|
41557
|
-
// Message box
|
|
41558
|
-
.k-message-box {
|
|
41559
|
-
@include fill(
|
|
41560
|
-
$chat-message-box-text,
|
|
41561
|
-
$chat-message-box-bg,
|
|
41562
|
-
$chat-message-box-border
|
|
41563
|
-
);
|
|
41564
|
-
}
|
|
41565
|
-
.k-message-box.k-state-focused {
|
|
41566
|
-
@include box-shadow( $chat-message-box-focus-shadow );
|
|
41567
|
-
}
|
|
41568
|
-
|
|
41569
41309
|
}
|
|
41570
41310
|
|
|
41571
41311
|
|
|
@@ -41693,6 +41433,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
|
|
|
41693
41433
|
padding: 0 (14px / 2);
|
|
41694
41434
|
align-items: center;
|
|
41695
41435
|
}
|
|
41436
|
+
.k-mediaplayer-volume {
|
|
41437
|
+
width: 100px;
|
|
41438
|
+
}
|
|
41696
41439
|
|
|
41697
41440
|
|
|
41698
41441
|
// Seekbar
|
|
@@ -41700,8 +41443,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
|
|
|
41700
41443
|
width: 100%;
|
|
41701
41444
|
position: absolute;
|
|
41702
41445
|
z-index: 3;
|
|
41703
|
-
top:
|
|
41446
|
+
top: 0;
|
|
41704
41447
|
left: 0;
|
|
41448
|
+
transform: translateY( -50% );
|
|
41705
41449
|
}
|
|
41706
41450
|
.k-mediaplayer-seekbar .k-slider-track {
|
|
41707
41451
|
// sass-lint:disable no-important
|
|
@@ -41709,6 +41453,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
|
|
|
41709
41453
|
// sass-lint:enable no-important
|
|
41710
41454
|
border-radius: 0;
|
|
41711
41455
|
}
|
|
41456
|
+
.k-mediaplayer-seekbar .k-slider-selection {
|
|
41457
|
+
border-radius: 0;
|
|
41458
|
+
}
|
|
41712
41459
|
|
|
41713
41460
|
.k-mediaplayer-fullscreen {
|
|
41714
41461
|
z-index: 10000;
|