@progress/kendo-theme-default 5.11.1-dev.1 → 5.11.1-dev.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.css +58 -47
- package/dist/all.scss +72 -33
- package/dist/default-main-dark.scss +5 -5
- package/dist/default-main.scss +5 -5
- package/lib/swatches/default-blue.json +1 -1
- package/lib/swatches/default-dataviz-v4.json +1 -1
- package/lib/swatches/default-green.json +1 -1
- package/lib/swatches/default-main-dark.json +6 -6
- package/lib/swatches/default-main.json +6 -6
- package/lib/swatches/default-nordic.json +1 -1
- package/lib/swatches/default-ocean-blue.json +1 -1
- package/lib/swatches/default-orange.json +1 -1
- package/lib/swatches/default-purple.json +1 -1
- package/lib/swatches/default-turquoise.json +1 -1
- package/lib/swatches/default-urban.json +1 -1
- package/package.json +4 -4
- package/scss/_variables.scss +1 -0
- package/scss/chip/_theme.scss +42 -15
- package/scss/chip/_variables.scss +16 -13
- package/scss/icons/_layout.scss +3 -5
- package/scss/popover/_layout.scss +1 -0
- package/scss/scheduler/_layout.scss +9 -0
package/dist/all.css
CHANGED
|
@@ -6869,7 +6869,8 @@ kendo-sortable {
|
|
|
6869
6869
|
display: none;
|
|
6870
6870
|
}
|
|
6871
6871
|
|
|
6872
|
-
.k-
|
|
6872
|
+
.k-icon-action {
|
|
6873
|
+
padding: 4px;
|
|
6873
6874
|
cursor: pointer;
|
|
6874
6875
|
}
|
|
6875
6876
|
|
|
@@ -14960,98 +14961,98 @@ textarea.k-input-inner {
|
|
|
14960
14961
|
}
|
|
14961
14962
|
|
|
14962
14963
|
.k-chip-solid-base {
|
|
14963
|
-
border-color:
|
|
14964
|
+
border-color: rgba(0, 0, 0, 0.08);
|
|
14964
14965
|
color: #424242;
|
|
14965
|
-
background-color: #
|
|
14966
|
+
background-color: #f5f5f5;
|
|
14967
|
+
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
|
|
14966
14968
|
}
|
|
14967
14969
|
|
|
14968
14970
|
.k-chip-solid-base:focus, .k-chip-solid-base.k-focus {
|
|
14969
|
-
box-shadow: 0 0 0 2px rgba(
|
|
14970
|
-
background-color: #f0f0f0;
|
|
14971
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
14971
14972
|
}
|
|
14972
14973
|
|
|
14973
14974
|
.k-chip-solid-base:hover, .k-chip-solid-base.k-hover {
|
|
14974
|
-
background-color: #
|
|
14975
|
+
background-color: #ebebeb;
|
|
14975
14976
|
}
|
|
14976
14977
|
|
|
14977
14978
|
.k-chip-solid-base.k-selected {
|
|
14978
|
-
background-color: #
|
|
14979
|
+
background-color: #d8d8d8;
|
|
14979
14980
|
}
|
|
14980
14981
|
|
|
14981
14982
|
.k-chip-solid-error {
|
|
14982
|
-
border-color: #
|
|
14983
|
-
color: #
|
|
14984
|
-
background-color: #
|
|
14983
|
+
border-color: #f65140;
|
|
14984
|
+
color: #550800;
|
|
14985
|
+
background-color: #fdd1cc;
|
|
14986
|
+
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
|
|
14985
14987
|
}
|
|
14986
14988
|
|
|
14987
14989
|
.k-chip-solid-error:focus, .k-chip-solid-error.k-focus {
|
|
14988
14990
|
box-shadow: 0 0 0 2px rgba(243, 23, 0, 0.16);
|
|
14989
|
-
background-color: #feeceb;
|
|
14990
14991
|
}
|
|
14991
14992
|
|
|
14992
14993
|
.k-chip-solid-error:hover, .k-chip-solid-error.k-hover {
|
|
14993
|
-
background-color: #
|
|
14994
|
+
background-color: #fbaea6;
|
|
14994
14995
|
}
|
|
14995
14996
|
|
|
14996
14997
|
.k-chip-solid-error.k-selected {
|
|
14997
|
-
background-color: #
|
|
14998
|
+
background-color: #f98b80;
|
|
14998
14999
|
}
|
|
14999
15000
|
|
|
15000
15001
|
.k-chip-solid-info {
|
|
15001
|
-
border-color: #
|
|
15002
|
-
color: #
|
|
15003
|
-
background-color: #
|
|
15002
|
+
border-color: #4082ef;
|
|
15003
|
+
color: #001f52;
|
|
15004
|
+
background-color: #ccdefb;
|
|
15005
|
+
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
|
|
15004
15006
|
}
|
|
15005
15007
|
|
|
15006
15008
|
.k-chip-solid-info:focus, .k-chip-solid-info.k-focus {
|
|
15007
15009
|
box-shadow: 0 0 0 2px rgba(0, 88, 233, 0.16);
|
|
15008
|
-
background-color: #ebf2fd;
|
|
15009
15010
|
}
|
|
15010
15011
|
|
|
15011
15012
|
.k-chip-solid-info:hover, .k-chip-solid-info.k-hover {
|
|
15012
|
-
background-color: #
|
|
15013
|
+
background-color: #a6c5f7;
|
|
15013
15014
|
}
|
|
15014
15015
|
|
|
15015
15016
|
.k-chip-solid-info.k-selected {
|
|
15016
|
-
background-color: #
|
|
15017
|
+
background-color: #80acf4;
|
|
15017
15018
|
}
|
|
15018
15019
|
|
|
15019
15020
|
.k-chip-solid-warning {
|
|
15020
|
-
border-color: #
|
|
15021
|
-
color: #
|
|
15022
|
-
background-color: #
|
|
15021
|
+
border-color: #ffd040;
|
|
15022
|
+
color: #594300;
|
|
15023
|
+
background-color: #fff2cc;
|
|
15024
|
+
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
|
|
15023
15025
|
}
|
|
15024
15026
|
|
|
15025
15027
|
.k-chip-solid-warning:focus, .k-chip-solid-warning.k-focus {
|
|
15026
15028
|
box-shadow: 0 0 0 2px rgba(255, 192, 0, 0.16);
|
|
15027
|
-
background-color: #fffaeb;
|
|
15028
15029
|
}
|
|
15029
15030
|
|
|
15030
15031
|
.k-chip-solid-warning:hover, .k-chip-solid-warning.k-hover {
|
|
15031
|
-
background-color: #
|
|
15032
|
+
background-color: #ffe9a6;
|
|
15032
15033
|
}
|
|
15033
15034
|
|
|
15034
15035
|
.k-chip-solid-warning.k-selected {
|
|
15035
|
-
background-color: #
|
|
15036
|
+
background-color: #ffe080;
|
|
15036
15037
|
}
|
|
15037
15038
|
|
|
15038
15039
|
.k-chip-solid-success {
|
|
15039
|
-
border-color: #
|
|
15040
|
-
color: #
|
|
15041
|
-
background-color: #
|
|
15040
|
+
border-color: #69c740;
|
|
15041
|
+
color: #133f00;
|
|
15042
|
+
background-color: #d7f0cc;
|
|
15043
|
+
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
|
|
15042
15044
|
}
|
|
15043
15045
|
|
|
15044
15046
|
.k-chip-solid-success:focus, .k-chip-solid-success.k-focus {
|
|
15045
15047
|
box-shadow: 0 0 0 2px rgba(55, 180, 0, 0.16);
|
|
15046
|
-
background-color: #eff9eb;
|
|
15047
15048
|
}
|
|
15048
15049
|
|
|
15049
15050
|
.k-chip-solid-success:hover, .k-chip-solid-success.k-hover {
|
|
15050
|
-
background-color: #
|
|
15051
|
+
background-color: #b9e5a6;
|
|
15051
15052
|
}
|
|
15052
15053
|
|
|
15053
15054
|
.k-chip-solid-success.k-selected {
|
|
15054
|
-
background-color: #
|
|
15055
|
+
background-color: #9bda80;
|
|
15055
15056
|
}
|
|
15056
15057
|
|
|
15057
15058
|
.k-chip-outline-base {
|
|
@@ -15061,7 +15062,7 @@ textarea.k-input-inner {
|
|
|
15061
15062
|
}
|
|
15062
15063
|
|
|
15063
15064
|
.k-chip-outline-base:focus, .k-chip-outline-base.k-focus {
|
|
15064
|
-
box-shadow: 0 0 0 2px rgba(
|
|
15065
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
|
15065
15066
|
}
|
|
15066
15067
|
|
|
15067
15068
|
.k-chip-outline-base:hover, .k-chip-outline-base.k-hover {
|
|
@@ -15075,8 +15076,8 @@ textarea.k-input-inner {
|
|
|
15075
15076
|
}
|
|
15076
15077
|
|
|
15077
15078
|
.k-chip-outline-error {
|
|
15078
|
-
border-color: #
|
|
15079
|
-
color: #
|
|
15079
|
+
border-color: #b61100;
|
|
15080
|
+
color: #b61100;
|
|
15080
15081
|
background-color: #ffffff;
|
|
15081
15082
|
}
|
|
15082
15083
|
|
|
@@ -15086,17 +15087,17 @@ textarea.k-input-inner {
|
|
|
15086
15087
|
|
|
15087
15088
|
.k-chip-outline-error:hover, .k-chip-outline-error.k-hover {
|
|
15088
15089
|
color: white;
|
|
15089
|
-
background-color: #
|
|
15090
|
+
background-color: #b61100;
|
|
15090
15091
|
}
|
|
15091
15092
|
|
|
15092
15093
|
.k-chip-outline-error.k-selected {
|
|
15093
15094
|
color: white;
|
|
15094
|
-
background-color: #
|
|
15095
|
+
background-color: #b61100;
|
|
15095
15096
|
}
|
|
15096
15097
|
|
|
15097
15098
|
.k-chip-outline-info {
|
|
15098
|
-
border-color: #
|
|
15099
|
-
color: #
|
|
15099
|
+
border-color: #0042af;
|
|
15100
|
+
color: #0042af;
|
|
15100
15101
|
background-color: #ffffff;
|
|
15101
15102
|
}
|
|
15102
15103
|
|
|
@@ -15106,17 +15107,17 @@ textarea.k-input-inner {
|
|
|
15106
15107
|
|
|
15107
15108
|
.k-chip-outline-info:hover, .k-chip-outline-info.k-hover {
|
|
15108
15109
|
color: white;
|
|
15109
|
-
background-color: #
|
|
15110
|
+
background-color: #0042af;
|
|
15110
15111
|
}
|
|
15111
15112
|
|
|
15112
15113
|
.k-chip-outline-info.k-selected {
|
|
15113
15114
|
color: white;
|
|
15114
|
-
background-color: #
|
|
15115
|
+
background-color: #0042af;
|
|
15115
15116
|
}
|
|
15116
15117
|
|
|
15117
15118
|
.k-chip-outline-warning {
|
|
15118
15119
|
border-color: #ffc000;
|
|
15119
|
-
color: #
|
|
15120
|
+
color: #424242;
|
|
15120
15121
|
background-color: #ffffff;
|
|
15121
15122
|
}
|
|
15122
15123
|
|
|
@@ -15125,18 +15126,18 @@ textarea.k-input-inner {
|
|
|
15125
15126
|
}
|
|
15126
15127
|
|
|
15127
15128
|
.k-chip-outline-warning:hover, .k-chip-outline-warning.k-hover {
|
|
15128
|
-
color:
|
|
15129
|
+
color: #332600;
|
|
15129
15130
|
background-color: #ffc000;
|
|
15130
15131
|
}
|
|
15131
15132
|
|
|
15132
15133
|
.k-chip-outline-warning.k-selected {
|
|
15133
|
-
color:
|
|
15134
|
+
color: #332600;
|
|
15134
15135
|
background-color: #ffc000;
|
|
15135
15136
|
}
|
|
15136
15137
|
|
|
15137
15138
|
.k-chip-outline-success {
|
|
15138
|
-
border-color: #
|
|
15139
|
-
color: #
|
|
15139
|
+
border-color: #298700;
|
|
15140
|
+
color: #298700;
|
|
15140
15141
|
background-color: #ffffff;
|
|
15141
15142
|
}
|
|
15142
15143
|
|
|
@@ -15146,12 +15147,12 @@ textarea.k-input-inner {
|
|
|
15146
15147
|
|
|
15147
15148
|
.k-chip-outline-success:hover, .k-chip-outline-success.k-hover {
|
|
15148
15149
|
color: white;
|
|
15149
|
-
background-color: #
|
|
15150
|
+
background-color: #298700;
|
|
15150
15151
|
}
|
|
15151
15152
|
|
|
15152
15153
|
.k-chip-outline-success.k-selected {
|
|
15153
15154
|
color: white;
|
|
15154
|
-
background-color: #
|
|
15155
|
+
background-color: #298700;
|
|
15155
15156
|
}
|
|
15156
15157
|
|
|
15157
15158
|
.k-color-preview {
|
|
@@ -23264,6 +23265,7 @@ kendo-card-footer {
|
|
|
23264
23265
|
.k-popover-inner {
|
|
23265
23266
|
position: relative;
|
|
23266
23267
|
border-radius: inherit;
|
|
23268
|
+
height: inherit;
|
|
23267
23269
|
}
|
|
23268
23270
|
|
|
23269
23271
|
.k-popover-header {
|
|
@@ -33025,6 +33027,11 @@ kendo-scheduler.k-scheduler.k-readonly-scheduler .k-event-delete {
|
|
|
33025
33027
|
vertical-align: top;
|
|
33026
33028
|
}
|
|
33027
33029
|
|
|
33030
|
+
.k-scheduler-layout td.k-selected,
|
|
33031
|
+
.k-scheduler-layout .k-scheduler-cell.k-selected {
|
|
33032
|
+
outline: none;
|
|
33033
|
+
}
|
|
33034
|
+
|
|
33028
33035
|
.k-scheduler-layout tr + tr .k-scheduler-times tr th,
|
|
33029
33036
|
.k-scheduler-layout .k-scheduler-pane + .k-scheduler-pane .k-scheduler-times tr th {
|
|
33030
33037
|
border-bottom-color: transparent;
|
|
@@ -33114,6 +33121,10 @@ kendo-scheduler.k-scheduler.k-readonly-scheduler .k-event-delete {
|
|
|
33114
33121
|
overflow: auto;
|
|
33115
33122
|
}
|
|
33116
33123
|
|
|
33124
|
+
.k-scheduler-content:focus {
|
|
33125
|
+
outline: none;
|
|
33126
|
+
}
|
|
33127
|
+
|
|
33117
33128
|
kendo-scheduler .k-event,
|
|
33118
33129
|
.k-event {
|
|
33119
33130
|
border-radius: 4px;
|
package/dist/all.scss
CHANGED
|
@@ -1014,6 +1014,7 @@ $default-scrollbar-width: 17px !default;
|
|
|
1014
1014
|
$icon-size: 16px !default;
|
|
1015
1015
|
$icon-size-lg: 32px !default;
|
|
1016
1016
|
$icon-spacing: map-get( $spacing, 1 ) !default;
|
|
1017
|
+
$icon-padding: map-get( $spacing, 1 ) !default;
|
|
1017
1018
|
|
|
1018
1019
|
/// The URL to the icon font that will be used by the theme
|
|
1019
1020
|
/// The default value of `null` embeds the package font with a `data:` URL
|
|
@@ -4869,11 +4870,9 @@ $display4-letter-spacing: null !default;
|
|
|
4869
4870
|
display: none;
|
|
4870
4871
|
}
|
|
4871
4872
|
|
|
4872
|
-
.k-
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
cursor: pointer;
|
|
4876
|
-
}
|
|
4873
|
+
.k-icon-action {
|
|
4874
|
+
padding: $icon-padding;
|
|
4875
|
+
cursor: pointer;
|
|
4877
4876
|
}
|
|
4878
4877
|
|
|
4879
4878
|
.k-icon-xs { font-size: ( $icon-size * .5 ); }
|
|
@@ -11306,7 +11305,7 @@ $kendo-chip-sizes: (
|
|
|
11306
11305
|
|
|
11307
11306
|
/// The base background of the chip.
|
|
11308
11307
|
/// @group chip
|
|
11309
|
-
$kendo-chip-base-bg: $
|
|
11308
|
+
$kendo-chip-base-bg: $kendo-button-bg !default;
|
|
11310
11309
|
|
|
11311
11310
|
/// Theme colors map for the chip.
|
|
11312
11311
|
/// @group chip
|
|
@@ -11320,34 +11319,37 @@ $kendo-chip-theme-colors: (
|
|
|
11320
11319
|
|
|
11321
11320
|
/// The base background color of solid chip.
|
|
11322
11321
|
/// @group chip
|
|
11323
|
-
$kendo-chip-solid-bg:
|
|
11322
|
+
$kendo-chip-solid-bg: $kendo-chip-base-bg !default;
|
|
11324
11323
|
/// The base text color of solid chip.
|
|
11325
11324
|
/// @group chip
|
|
11326
|
-
$kendo-chip-solid-text: $kendo-
|
|
11325
|
+
$kendo-chip-solid-text: $kendo-button-text !default;
|
|
11327
11326
|
/// The base border color of solid chip.
|
|
11328
11327
|
/// @group chip
|
|
11329
|
-
$kendo-chip-solid-border:
|
|
11328
|
+
$kendo-chip-solid-border: $kendo-button-border !default;
|
|
11330
11329
|
/// The base shadow of solid chip.
|
|
11331
11330
|
/// @group chip
|
|
11332
|
-
$kendo-chip-solid-shadow: 0 0 0 2px
|
|
11331
|
+
$kendo-chip-solid-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .08 )) !default;
|
|
11332
|
+
/// The base gradient of solid chip.
|
|
11333
|
+
/// @group chip
|
|
11334
|
+
$kendo-chip-solid-gradient: $kendo-button-gradient !default;
|
|
11333
11335
|
|
|
11334
11336
|
/// The base background color of focused solid chip.
|
|
11335
11337
|
/// @group chip
|
|
11336
|
-
$kendo-chip-solid-focus-bg:
|
|
11338
|
+
$kendo-chip-solid-focus-bg: null !default;
|
|
11337
11339
|
/// The base text color of focused solid chip.
|
|
11338
11340
|
/// @group chip
|
|
11339
11341
|
$kendo-chip-solid-focus-text: null !default;
|
|
11340
11342
|
|
|
11341
11343
|
/// The base background color of hovered solid chip.
|
|
11342
11344
|
/// @group chip
|
|
11343
|
-
$kendo-chip-solid-hover-bg:
|
|
11345
|
+
$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default;
|
|
11344
11346
|
/// The base text color of hovered solid chip.
|
|
11345
11347
|
/// @group chip
|
|
11346
11348
|
$kendo-chip-solid-hover-text: null !default;
|
|
11347
11349
|
|
|
11348
11350
|
/// The base background color of selected solid chip.
|
|
11349
11351
|
/// @group chip
|
|
11350
|
-
$kendo-chip-solid-selected-bg:
|
|
11352
|
+
$kendo-chip-solid-selected-bg: $kendo-button-active-bg !default;
|
|
11351
11353
|
/// The base text color of selected solid chip.
|
|
11352
11354
|
/// @group chip
|
|
11353
11355
|
$kendo-chip-solid-selected-text: null !default;
|
|
@@ -11357,20 +11359,20 @@ $kendo-chip-solid-selected-text: null !default;
|
|
|
11357
11359
|
$kendo-chip-outline-bg: $component-bg !default;
|
|
11358
11360
|
/// The base text color of outline chip.
|
|
11359
11361
|
/// @group chip
|
|
11360
|
-
$kendo-chip-outline-text: $kendo-chip-
|
|
11362
|
+
$kendo-chip-outline-text: $kendo-chip-solid-text !default;
|
|
11361
11363
|
/// The base border color of outline chip.
|
|
11362
11364
|
/// @group chip
|
|
11363
|
-
$kendo-chip-outline-border: $kendo-chip-
|
|
11365
|
+
$kendo-chip-outline-border: $kendo-chip-outline-text !default;
|
|
11364
11366
|
/// The base shadow of outline chip.
|
|
11365
11367
|
/// @group chip
|
|
11366
|
-
$kendo-chip-outline-shadow: 0 0 0 2px
|
|
11368
|
+
$kendo-chip-outline-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .08 )) !default;
|
|
11367
11369
|
|
|
11368
11370
|
/// The base background color of hovered outline chip.
|
|
11369
11371
|
/// @group chip
|
|
11370
|
-
$kendo-chip-outline-hover-bg: $kendo-chip-
|
|
11372
|
+
$kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
|
|
11371
11373
|
/// The base text color of hovered outline chip.
|
|
11372
11374
|
/// @group chip
|
|
11373
|
-
$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-
|
|
11375
|
+
$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-outline-hover-bg ) !default;
|
|
11374
11376
|
|
|
11375
11377
|
/// The base background color of selected outline chip.
|
|
11376
11378
|
/// @group chip
|
|
@@ -11577,7 +11579,8 @@ $kendo-chip-list-sizes: (
|
|
|
11577
11579
|
@include fill(
|
|
11578
11580
|
$kendo-chip-solid-text,
|
|
11579
11581
|
$kendo-chip-solid-bg,
|
|
11580
|
-
$kendo-chip-solid-border
|
|
11582
|
+
$kendo-chip-solid-border,
|
|
11583
|
+
$kendo-chip-solid-gradient
|
|
11581
11584
|
);
|
|
11582
11585
|
|
|
11583
11586
|
&:focus,
|
|
@@ -11596,24 +11599,24 @@ $kendo-chip-list-sizes: (
|
|
|
11596
11599
|
}
|
|
11597
11600
|
} @else {
|
|
11598
11601
|
@include fill(
|
|
11599
|
-
$color,
|
|
11600
|
-
try-tint( $color,
|
|
11601
|
-
try-tint( $color,
|
|
11602
|
+
try-shade( $color, 65% ),
|
|
11603
|
+
try-tint( $color, 80% ),
|
|
11604
|
+
try-tint( $color, 25% ),
|
|
11605
|
+
$kendo-chip-solid-gradient
|
|
11602
11606
|
);
|
|
11603
11607
|
|
|
11604
11608
|
&:focus,
|
|
11605
11609
|
&.k-focus {
|
|
11606
11610
|
@include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
|
|
11607
|
-
@include fill( $bg: try-tint( $color, 92% ) );
|
|
11608
11611
|
}
|
|
11609
11612
|
|
|
11610
11613
|
&:hover,
|
|
11611
11614
|
&.k-hover {
|
|
11612
|
-
@include fill( $bg: try-tint($color,
|
|
11615
|
+
@include fill( $bg: try-tint($color, 65% ) );
|
|
11613
11616
|
}
|
|
11614
11617
|
|
|
11615
11618
|
&.k-selected {
|
|
11616
|
-
@include fill( $bg: try-tint( $color,
|
|
11619
|
+
@include fill( $bg: try-tint( $color, 50% ) );
|
|
11617
11620
|
}
|
|
11618
11621
|
}
|
|
11619
11622
|
}
|
|
@@ -11649,30 +11652,56 @@ $kendo-chip-list-sizes: (
|
|
|
11649
11652
|
$bg: $kendo-chip-outline-selected-bg
|
|
11650
11653
|
);
|
|
11651
11654
|
}
|
|
11655
|
+
} @else if ($name == "warning") {
|
|
11656
|
+
@include fill(
|
|
11657
|
+
if( $dark-theme, tint($color, 25%), $kendo-chip-outline-text),
|
|
11658
|
+
if( $dark-theme, $black, $white ),
|
|
11659
|
+
if( $dark-theme, tint($color, 25%), $color)
|
|
11660
|
+
);
|
|
11661
|
+
|
|
11662
|
+
&:focus,
|
|
11663
|
+
&.k-focus {
|
|
11664
|
+
@include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
|
|
11665
|
+
}
|
|
11666
|
+
|
|
11667
|
+
&:hover,
|
|
11668
|
+
&.k-hover {
|
|
11669
|
+
@include fill(
|
|
11670
|
+
$color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
|
|
11671
|
+
$bg: if( $dark-theme, tint($color, 25%), $color)
|
|
11672
|
+
);
|
|
11673
|
+
}
|
|
11674
|
+
|
|
11675
|
+
&.k-selected {
|
|
11676
|
+
@include fill(
|
|
11677
|
+
$color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
|
|
11678
|
+
$bg: if( $dark-theme, tint($color, 25%), $color)
|
|
11679
|
+
);
|
|
11680
|
+
}
|
|
11652
11681
|
} @else {
|
|
11653
11682
|
@include fill(
|
|
11654
|
-
$color,
|
|
11655
|
-
$white,
|
|
11656
|
-
$color
|
|
11683
|
+
try-shade( $color, 25% ),
|
|
11684
|
+
if( $dark-theme, $black, $white ),
|
|
11685
|
+
try-shade( $color, 25% )
|
|
11657
11686
|
);
|
|
11658
11687
|
|
|
11659
11688
|
&:focus,
|
|
11660
11689
|
&.k-focus {
|
|
11661
|
-
@include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
|
|
11690
|
+
@include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
|
|
11662
11691
|
}
|
|
11663
11692
|
|
|
11664
11693
|
&:hover,
|
|
11665
11694
|
&.k-hover {
|
|
11666
11695
|
@include fill(
|
|
11667
|
-
$color: contrast-wcag( $color ),
|
|
11668
|
-
$bg: $color
|
|
11696
|
+
$color: contrast-wcag( try-shade( $color, 25% ) ),
|
|
11697
|
+
$bg: try-shade( $color, 25% )
|
|
11669
11698
|
);
|
|
11670
11699
|
}
|
|
11671
11700
|
|
|
11672
11701
|
&.k-selected {
|
|
11673
11702
|
@include fill(
|
|
11674
|
-
$color: contrast-wcag( $color ),
|
|
11675
|
-
$bg: $color
|
|
11703
|
+
$color: contrast-wcag( try-shade( $color, 25% ) ),
|
|
11704
|
+
$bg: try-shade( $color, 25% )
|
|
11676
11705
|
);
|
|
11677
11706
|
}
|
|
11678
11707
|
}
|
|
@@ -24175,6 +24204,7 @@ $popover-callout-border: $popover-border !default;
|
|
|
24175
24204
|
.k-popover-inner {
|
|
24176
24205
|
position: relative;
|
|
24177
24206
|
border-radius: inherit;
|
|
24207
|
+
height: inherit;
|
|
24178
24208
|
}
|
|
24179
24209
|
|
|
24180
24210
|
// Header
|
|
@@ -37441,6 +37471,11 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
|
|
|
37441
37471
|
vertical-align: top;
|
|
37442
37472
|
}
|
|
37443
37473
|
|
|
37474
|
+
td.k-selected,
|
|
37475
|
+
.k-scheduler-cell.k-selected {
|
|
37476
|
+
outline: none;
|
|
37477
|
+
}
|
|
37478
|
+
|
|
37444
37479
|
// Remove bottom border from first cell of hours cells spaning on two rows
|
|
37445
37480
|
tr + tr,
|
|
37446
37481
|
.k-scheduler-pane + .k-scheduler-pane {
|
|
@@ -37530,6 +37565,10 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
|
|
|
37530
37565
|
border-color: inherit;
|
|
37531
37566
|
position: relative;
|
|
37532
37567
|
overflow: auto;
|
|
37568
|
+
|
|
37569
|
+
&:focus {
|
|
37570
|
+
outline: none;
|
|
37571
|
+
}
|
|
37533
37572
|
}
|
|
37534
37573
|
|
|
37535
37574
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
$dark-theme: true;
|
|
2
2
|
$border-radius: 2px;
|
|
3
3
|
$primary: #ff6358;
|
|
4
|
-
$secondary: #
|
|
5
|
-
$info: #
|
|
6
|
-
$success: #
|
|
7
|
-
$warning: #
|
|
8
|
-
$error: #
|
|
4
|
+
$secondary: #666666;
|
|
5
|
+
$info: #0058e9;
|
|
6
|
+
$success: #37b400;
|
|
7
|
+
$warning: #ffc000;
|
|
8
|
+
$error: #f31700;
|
|
9
9
|
$body-text: #ffffff;
|
|
10
10
|
$body-bg: #000000;
|
|
11
11
|
$headings-text: #ffffff;
|
package/dist/default-main.scss
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
$border-radius: 2px;
|
|
2
2
|
$primary: #ff6358;
|
|
3
|
-
$secondary: #
|
|
4
|
-
$info: #
|
|
5
|
-
$success: #
|
|
6
|
-
$warning: #
|
|
7
|
-
$error: #
|
|
3
|
+
$secondary: #666666;
|
|
4
|
+
$info: #0058e9;
|
|
5
|
+
$success: #37b400;
|
|
6
|
+
$warning: #ffc000;
|
|
7
|
+
$error: #f31700;
|
|
8
8
|
$body-text: #424242;
|
|
9
9
|
$body-bg: #ffffff;
|
|
10
10
|
$headings-text: #272727;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"name": "Default Main Dark",
|
|
4
4
|
"product": "kendo",
|
|
5
5
|
"base": "@progress/kendo-theme-default",
|
|
6
|
-
"version": "5.11.1-dev.
|
|
6
|
+
"version": "5.11.1-dev.2",
|
|
7
7
|
"previewColors": [
|
|
8
8
|
"#000000",
|
|
9
9
|
"#151515",
|
|
@@ -43,27 +43,27 @@
|
|
|
43
43
|
"secondary": {
|
|
44
44
|
"name": "Secondary",
|
|
45
45
|
"type": "color",
|
|
46
|
-
"value": "#
|
|
46
|
+
"value": "#666666"
|
|
47
47
|
},
|
|
48
48
|
"info": {
|
|
49
49
|
"name": "Info",
|
|
50
50
|
"type": "color",
|
|
51
|
-
"value": "#
|
|
51
|
+
"value": "#0058e9"
|
|
52
52
|
},
|
|
53
53
|
"success": {
|
|
54
54
|
"name": "Success",
|
|
55
55
|
"type": "color",
|
|
56
|
-
"value": "#
|
|
56
|
+
"value": "#37b400"
|
|
57
57
|
},
|
|
58
58
|
"warning": {
|
|
59
59
|
"name": "Warning",
|
|
60
60
|
"type": "color",
|
|
61
|
-
"value": "#
|
|
61
|
+
"value": "#ffc000"
|
|
62
62
|
},
|
|
63
63
|
"error": {
|
|
64
64
|
"name": "Error",
|
|
65
65
|
"type": "color",
|
|
66
|
-
"value": "#
|
|
66
|
+
"value": "#f31700"
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
},
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"name": "Default Main",
|
|
4
4
|
"product": "kendo",
|
|
5
5
|
"base": "@progress/kendo-theme-default",
|
|
6
|
-
"version": "5.11.1-dev.
|
|
6
|
+
"version": "5.11.1-dev.2",
|
|
7
7
|
"previewColors": [
|
|
8
8
|
"#ffffff",
|
|
9
9
|
"#f5f5f5",
|
|
@@ -33,27 +33,27 @@
|
|
|
33
33
|
"secondary": {
|
|
34
34
|
"name": "Secondary",
|
|
35
35
|
"type": "color",
|
|
36
|
-
"value": "#
|
|
36
|
+
"value": "#666666"
|
|
37
37
|
},
|
|
38
38
|
"info": {
|
|
39
39
|
"name": "Info",
|
|
40
40
|
"type": "color",
|
|
41
|
-
"value": "#
|
|
41
|
+
"value": "#0058e9"
|
|
42
42
|
},
|
|
43
43
|
"success": {
|
|
44
44
|
"name": "Success",
|
|
45
45
|
"type": "color",
|
|
46
|
-
"value": "#
|
|
46
|
+
"value": "#37b400"
|
|
47
47
|
},
|
|
48
48
|
"warning": {
|
|
49
49
|
"name": "Warning",
|
|
50
50
|
"type": "color",
|
|
51
|
-
"value": "#
|
|
51
|
+
"value": "#ffc000"
|
|
52
52
|
},
|
|
53
53
|
"error": {
|
|
54
54
|
"name": "Error",
|
|
55
55
|
"type": "color",
|
|
56
|
-
"value": "#
|
|
56
|
+
"value": "#f31700"
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
},
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-theme-default",
|
|
3
3
|
"description": "SASS resources for the default Kendo UI theme",
|
|
4
|
-
"version": "5.11.1-dev.
|
|
4
|
+
"version": "5.11.1-dev.2",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -45,11 +45,11 @@
|
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@progress/kendo-font-icons": "^0.6.0",
|
|
48
|
-
"@progress/kendo-theme-core": "^5.11.1-dev.
|
|
49
|
-
"@progress/kendo-theme-utils": "^5.11.1-dev.
|
|
48
|
+
"@progress/kendo-theme-core": "^5.11.1-dev.2",
|
|
49
|
+
"@progress/kendo-theme-utils": "^5.11.1-dev.2"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"sass-build": "^1.1.0"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "1abe5dc353ef37c2ad5ee6177c8fb1e3894956d6"
|
|
55
55
|
}
|
package/scss/_variables.scss
CHANGED
|
@@ -64,6 +64,7 @@ $default-scrollbar-width: 17px !default;
|
|
|
64
64
|
$icon-size: 16px !default;
|
|
65
65
|
$icon-size-lg: 32px !default;
|
|
66
66
|
$icon-spacing: map-get( $spacing, 1 ) !default;
|
|
67
|
+
$icon-padding: map-get( $spacing, 1 ) !default;
|
|
67
68
|
|
|
68
69
|
/// The URL to the icon font that will be used by the theme
|
|
69
70
|
/// The default value of `null` embeds the package font with a `data:` URL
|
package/scss/chip/_theme.scss
CHANGED
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
@include fill(
|
|
9
9
|
$kendo-chip-solid-text,
|
|
10
10
|
$kendo-chip-solid-bg,
|
|
11
|
-
$kendo-chip-solid-border
|
|
11
|
+
$kendo-chip-solid-border,
|
|
12
|
+
$kendo-chip-solid-gradient
|
|
12
13
|
);
|
|
13
14
|
|
|
14
15
|
&:focus,
|
|
@@ -27,24 +28,24 @@
|
|
|
27
28
|
}
|
|
28
29
|
} @else {
|
|
29
30
|
@include fill(
|
|
30
|
-
$color,
|
|
31
|
-
try-tint( $color,
|
|
32
|
-
try-tint( $color,
|
|
31
|
+
try-shade( $color, 65% ),
|
|
32
|
+
try-tint( $color, 80% ),
|
|
33
|
+
try-tint( $color, 25% ),
|
|
34
|
+
$kendo-chip-solid-gradient
|
|
33
35
|
);
|
|
34
36
|
|
|
35
37
|
&:focus,
|
|
36
38
|
&.k-focus {
|
|
37
39
|
@include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
|
|
38
|
-
@include fill( $bg: try-tint( $color, 92% ) );
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
&:hover,
|
|
42
43
|
&.k-hover {
|
|
43
|
-
@include fill( $bg: try-tint($color,
|
|
44
|
+
@include fill( $bg: try-tint($color, 65% ) );
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
&.k-selected {
|
|
47
|
-
@include fill( $bg: try-tint( $color,
|
|
48
|
+
@include fill( $bg: try-tint( $color, 50% ) );
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
51
|
}
|
|
@@ -80,30 +81,56 @@
|
|
|
80
81
|
$bg: $kendo-chip-outline-selected-bg
|
|
81
82
|
);
|
|
82
83
|
}
|
|
84
|
+
} @else if ($name == "warning") {
|
|
85
|
+
@include fill(
|
|
86
|
+
if( $dark-theme, tint($color, 25%), $kendo-chip-outline-text),
|
|
87
|
+
if( $dark-theme, $black, $white ),
|
|
88
|
+
if( $dark-theme, tint($color, 25%), $color)
|
|
89
|
+
);
|
|
90
|
+
|
|
91
|
+
&:focus,
|
|
92
|
+
&.k-focus {
|
|
93
|
+
@include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&:hover,
|
|
97
|
+
&.k-hover {
|
|
98
|
+
@include fill(
|
|
99
|
+
$color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
|
|
100
|
+
$bg: if( $dark-theme, tint($color, 25%), $color)
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&.k-selected {
|
|
105
|
+
@include fill(
|
|
106
|
+
$color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
|
|
107
|
+
$bg: if( $dark-theme, tint($color, 25%), $color)
|
|
108
|
+
);
|
|
109
|
+
}
|
|
83
110
|
} @else {
|
|
84
111
|
@include fill(
|
|
85
|
-
$color,
|
|
86
|
-
$white,
|
|
87
|
-
$color
|
|
112
|
+
try-shade( $color, 25% ),
|
|
113
|
+
if( $dark-theme, $black, $white ),
|
|
114
|
+
try-shade( $color, 25% )
|
|
88
115
|
);
|
|
89
116
|
|
|
90
117
|
&:focus,
|
|
91
118
|
&.k-focus {
|
|
92
|
-
@include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
|
|
119
|
+
@include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
|
|
93
120
|
}
|
|
94
121
|
|
|
95
122
|
&:hover,
|
|
96
123
|
&.k-hover {
|
|
97
124
|
@include fill(
|
|
98
|
-
$color: contrast-wcag( $color ),
|
|
99
|
-
$bg: $color
|
|
125
|
+
$color: contrast-wcag( try-shade( $color, 25% ) ),
|
|
126
|
+
$bg: try-shade( $color, 25% )
|
|
100
127
|
);
|
|
101
128
|
}
|
|
102
129
|
|
|
103
130
|
&.k-selected {
|
|
104
131
|
@include fill(
|
|
105
|
-
$color: contrast-wcag( $color ),
|
|
106
|
-
$bg: $color
|
|
132
|
+
$color: contrast-wcag( try-shade( $color, 25% ) ),
|
|
133
|
+
$bg: try-shade( $color, 25% )
|
|
107
134
|
);
|
|
108
135
|
}
|
|
109
136
|
}
|
|
@@ -60,7 +60,7 @@ $kendo-chip-sizes: (
|
|
|
60
60
|
|
|
61
61
|
/// The base background of the chip.
|
|
62
62
|
/// @group chip
|
|
63
|
-
$kendo-chip-base-bg: $
|
|
63
|
+
$kendo-chip-base-bg: $kendo-button-bg !default;
|
|
64
64
|
|
|
65
65
|
/// Theme colors map for the chip.
|
|
66
66
|
/// @group chip
|
|
@@ -74,34 +74,37 @@ $kendo-chip-theme-colors: (
|
|
|
74
74
|
|
|
75
75
|
/// The base background color of solid chip.
|
|
76
76
|
/// @group chip
|
|
77
|
-
$kendo-chip-solid-bg:
|
|
77
|
+
$kendo-chip-solid-bg: $kendo-chip-base-bg !default;
|
|
78
78
|
/// The base text color of solid chip.
|
|
79
79
|
/// @group chip
|
|
80
|
-
$kendo-chip-solid-text: $kendo-
|
|
80
|
+
$kendo-chip-solid-text: $kendo-button-text !default;
|
|
81
81
|
/// The base border color of solid chip.
|
|
82
82
|
/// @group chip
|
|
83
|
-
$kendo-chip-solid-border:
|
|
83
|
+
$kendo-chip-solid-border: $kendo-button-border !default;
|
|
84
84
|
/// The base shadow of solid chip.
|
|
85
85
|
/// @group chip
|
|
86
|
-
$kendo-chip-solid-shadow: 0 0 0 2px
|
|
86
|
+
$kendo-chip-solid-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .08 )) !default;
|
|
87
|
+
/// The base gradient of solid chip.
|
|
88
|
+
/// @group chip
|
|
89
|
+
$kendo-chip-solid-gradient: $kendo-button-gradient !default;
|
|
87
90
|
|
|
88
91
|
/// The base background color of focused solid chip.
|
|
89
92
|
/// @group chip
|
|
90
|
-
$kendo-chip-solid-focus-bg:
|
|
93
|
+
$kendo-chip-solid-focus-bg: null !default;
|
|
91
94
|
/// The base text color of focused solid chip.
|
|
92
95
|
/// @group chip
|
|
93
96
|
$kendo-chip-solid-focus-text: null !default;
|
|
94
97
|
|
|
95
98
|
/// The base background color of hovered solid chip.
|
|
96
99
|
/// @group chip
|
|
97
|
-
$kendo-chip-solid-hover-bg:
|
|
100
|
+
$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default;
|
|
98
101
|
/// The base text color of hovered solid chip.
|
|
99
102
|
/// @group chip
|
|
100
103
|
$kendo-chip-solid-hover-text: null !default;
|
|
101
104
|
|
|
102
105
|
/// The base background color of selected solid chip.
|
|
103
106
|
/// @group chip
|
|
104
|
-
$kendo-chip-solid-selected-bg:
|
|
107
|
+
$kendo-chip-solid-selected-bg: $kendo-button-active-bg !default;
|
|
105
108
|
/// The base text color of selected solid chip.
|
|
106
109
|
/// @group chip
|
|
107
110
|
$kendo-chip-solid-selected-text: null !default;
|
|
@@ -111,20 +114,20 @@ $kendo-chip-solid-selected-text: null !default;
|
|
|
111
114
|
$kendo-chip-outline-bg: $component-bg !default;
|
|
112
115
|
/// The base text color of outline chip.
|
|
113
116
|
/// @group chip
|
|
114
|
-
$kendo-chip-outline-text: $kendo-chip-
|
|
117
|
+
$kendo-chip-outline-text: $kendo-chip-solid-text !default;
|
|
115
118
|
/// The base border color of outline chip.
|
|
116
119
|
/// @group chip
|
|
117
|
-
$kendo-chip-outline-border: $kendo-chip-
|
|
120
|
+
$kendo-chip-outline-border: $kendo-chip-outline-text !default;
|
|
118
121
|
/// The base shadow of outline chip.
|
|
119
122
|
/// @group chip
|
|
120
|
-
$kendo-chip-outline-shadow: 0 0 0 2px
|
|
123
|
+
$kendo-chip-outline-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .08 )) !default;
|
|
121
124
|
|
|
122
125
|
/// The base background color of hovered outline chip.
|
|
123
126
|
/// @group chip
|
|
124
|
-
$kendo-chip-outline-hover-bg: $kendo-chip-
|
|
127
|
+
$kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
|
|
125
128
|
/// The base text color of hovered outline chip.
|
|
126
129
|
/// @group chip
|
|
127
|
-
$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-
|
|
130
|
+
$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-outline-hover-bg ) !default;
|
|
128
131
|
|
|
129
132
|
/// The base background color of selected outline chip.
|
|
130
133
|
/// @group chip
|
package/scss/icons/_layout.scss
CHANGED
|
@@ -121,11 +121,9 @@
|
|
|
121
121
|
display: none;
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
.k-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
cursor: pointer;
|
|
128
|
-
}
|
|
124
|
+
.k-icon-action {
|
|
125
|
+
padding: $icon-padding;
|
|
126
|
+
cursor: pointer;
|
|
129
127
|
}
|
|
130
128
|
|
|
131
129
|
.k-icon-xs { font-size: ( $icon-size * .5 ); }
|
|
@@ -298,6 +298,11 @@
|
|
|
298
298
|
vertical-align: top;
|
|
299
299
|
}
|
|
300
300
|
|
|
301
|
+
td.k-selected,
|
|
302
|
+
.k-scheduler-cell.k-selected {
|
|
303
|
+
outline: none;
|
|
304
|
+
}
|
|
305
|
+
|
|
301
306
|
// Remove bottom border from first cell of hours cells spaning on two rows
|
|
302
307
|
tr + tr,
|
|
303
308
|
.k-scheduler-pane + .k-scheduler-pane {
|
|
@@ -387,6 +392,10 @@
|
|
|
387
392
|
border-color: inherit;
|
|
388
393
|
position: relative;
|
|
389
394
|
overflow: auto;
|
|
395
|
+
|
|
396
|
+
&:focus {
|
|
397
|
+
outline: none;
|
|
398
|
+
}
|
|
390
399
|
}
|
|
391
400
|
|
|
392
401
|
|