@featherk/styles 0.5.5 → 0.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/v8.2.0/css/featherk-beautified.css +738 -151
- package/dist/v8.2.0/css/featherk.css +1 -1
- package/dist/v8.2.0/external-styles/featherk-overrides--k-datetime.css +64 -0
- package/dist/v8.2.0/scss/_externalStyles.scss +3 -1
- package/dist/v8.2.0/scss/_overrides.scss +221 -56
- package/dist/v8.2.0/scss/_tokens.scss +9 -4
- package/package.json +1 -1
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/* CUSTOM-DATE-RANGE adornment styles (composable adds .fk-daterangepicker class) */
|
|
2
|
+
.fk-daterangepicker .k-input-suffix {
|
|
3
|
+
cursor: pointer;
|
|
4
|
+
}
|
|
5
|
+
.fk-daterangepicker .k-input-suffix:hover {
|
|
6
|
+
background-color: var(--kendo-color-primary-subtle-hover);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* THEMEBUILDER Multi calendar fixes - CUSTOM-DATE-RANGE */
|
|
10
|
+
/* NOTE: Cannot use .fk-daterangepicker here because .k-animation-container is added dynamically appended to the body */
|
|
11
|
+
.k-calendar-view.k-hstack {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: row;
|
|
14
|
+
flex-wrap: wrap;
|
|
15
|
+
max-width: 36rem;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* THEMEBUILDER Multi calendar focus month highlight */
|
|
19
|
+
.k-calendar-table:has(.k-focus) {
|
|
20
|
+
background-color: hsl(from var(--kendo-color-primary) h s 95%);
|
|
21
|
+
border-radius: 0.25rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* THEMEBUILDER Calendar updates */
|
|
25
|
+
/* remove extra space when switching between months */
|
|
26
|
+
/* THEMEBUILDER bug? set min-height to fit-content - CustomDatePicker */
|
|
27
|
+
.k-calendar-view {
|
|
28
|
+
/* min-height: fit-content; */
|
|
29
|
+
}
|
|
30
|
+
/* when 2nd to last row is empty */
|
|
31
|
+
.k-calendar-table
|
|
32
|
+
> .k-calendar-tbody
|
|
33
|
+
> .k-calendar-tr:nth-last-child(2):has(
|
|
34
|
+
.k-calendar-td:first-child:is(.k-empty)
|
|
35
|
+
) {
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
/* when last row is empty */
|
|
39
|
+
.k-calendar-table
|
|
40
|
+
> .k-calendar-tbody
|
|
41
|
+
> .k-calendar-tr:last-child:has(.k-calendar-td:first-child:is(.k-empty)) {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Custom Date Picker html */
|
|
46
|
+
.k-animation-container
|
|
47
|
+
.k-child-animation-container
|
|
48
|
+
.k-calendar
|
|
49
|
+
.k-calendar-view.k-calendar-monthview
|
|
50
|
+
.k-calendar-tr
|
|
51
|
+
.k-calendar-td {
|
|
52
|
+
width: 2.5rem;
|
|
53
|
+
height: 2.5rem;
|
|
54
|
+
}
|
|
55
|
+
.k-animation-container
|
|
56
|
+
.k-child-animation-container
|
|
57
|
+
.k-calendar
|
|
58
|
+
.k-calendar-view.k-calendar-monthview
|
|
59
|
+
.k-calendar-tr
|
|
60
|
+
.k-calendar-th {
|
|
61
|
+
width: 2.5rem;
|
|
62
|
+
height: 2.5rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
@@ -10,4 +10,6 @@
|
|
|
10
10
|
|
|
11
11
|
@use "../external-styles/featherk-overrides--k-tooltip.css";
|
|
12
12
|
|
|
13
|
-
@use "../external-styles/featherk-overrides--k-expander.css";
|
|
13
|
+
@use "../external-styles/featherk-overrides--k-expander.css";
|
|
14
|
+
|
|
15
|
+
@use "../external-styles/featherk-overrides--k-datetime.css";
|
|
@@ -60,9 +60,7 @@
|
|
|
60
60
|
|
|
61
61
|
}
|
|
62
62
|
.k-button{
|
|
63
|
-
|
|
64
|
-
flex-direction: row;
|
|
65
|
-
border-bottom-style: none;
|
|
63
|
+
border-bottom-style: none;
|
|
66
64
|
border-left-style: none;
|
|
67
65
|
border-right-style: none;
|
|
68
66
|
border-top-style: none;
|
|
@@ -75,6 +73,7 @@
|
|
|
75
73
|
outline-width: 0px;
|
|
76
74
|
outline-color: $fk-feather-primary;
|
|
77
75
|
transition-timing-function: ease-out;
|
|
76
|
+
column-gap: 0.5rem;
|
|
78
77
|
|
|
79
78
|
}
|
|
80
79
|
.k-button.k-button-md{
|
|
@@ -92,11 +91,13 @@
|
|
|
92
91
|
}
|
|
93
92
|
.k-chip.k-chip-solid-base{
|
|
94
93
|
color: $fk-feather-secondary-text-on-surface;
|
|
94
|
+
background-color: $fk-kendo-chip-solid-bg;
|
|
95
95
|
|
|
96
96
|
}
|
|
97
97
|
.k-chip{
|
|
98
98
|
transition-property: all;
|
|
99
99
|
transition-duration: 280ms;
|
|
100
|
+
background-image: linear-gradient(transparent, transparent);
|
|
100
101
|
|
|
101
102
|
}
|
|
102
103
|
.k-chip.k-rounded-md{
|
|
@@ -497,22 +498,17 @@
|
|
|
497
498
|
|
|
498
499
|
}
|
|
499
500
|
.k-numerictextbox.k-input .k-input-spinner.k-spin-button .k-button.k-button-md.k-button-solid.k-button-solid-base.k-icon-button.k-spinner-increase{
|
|
500
|
-
|
|
501
|
-
background-image: none;
|
|
502
|
-
padding-right: $fk-kendo-input-padding-y;
|
|
501
|
+
padding-right: $fk-kendo-input-padding-y;
|
|
503
502
|
padding-left: $fk-kendo-input-padding-y;
|
|
504
503
|
color: inherit;
|
|
504
|
+
width: 100%;
|
|
505
|
+
height: 50%;
|
|
505
506
|
|
|
506
507
|
}
|
|
507
508
|
.k-numerictextbox.k-input .k-input-spinner.k-spin-button .k-button.k-button-md.k-button-solid.k-button-solid-base.k-icon-button.k-spinner-decrease{
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
padding-left: 0px;
|
|
512
|
-
column-gap: 0px;
|
|
513
|
-
color: inherit;
|
|
514
|
-
width: unset;
|
|
515
|
-
height: unset;
|
|
509
|
+
color: inherit;
|
|
510
|
+
height: 50%;
|
|
511
|
+
width: 100%;
|
|
516
512
|
|
|
517
513
|
}
|
|
518
514
|
.k-numerictextbox.k-input .k-input-spinner.k-spin-button .k-button.k-button-md.k-button-solid.k-button-solid-base.k-icon-button.k-spinner-increase.k-hover,.k-numerictextbox.k-input .k-input-spinner.k-spin-button .k-button.k-button-md.k-button-solid.k-button-solid-base.k-icon-button.k-spinner-increase.k-state-hover,.k-numerictextbox.k-input .k-input-spinner.k-spin-button .k-button.k-button-md.k-button-solid.k-button-solid-base.k-icon-button.k-spinner-increase.k-state-hovered,.k-numerictextbox.k-input .k-input-spinner.k-spin-button .k-button.k-button-md.k-button-solid.k-button-solid-base.k-icon-button.k-spinner-increase:hover{
|
|
@@ -541,6 +537,7 @@
|
|
|
541
537
|
}
|
|
542
538
|
.k-numerictextbox.k-input .k-input-spinner.k-spin-button{
|
|
543
539
|
color: $fk-feather-icon-on-neutral;
|
|
540
|
+
align-self: center;
|
|
544
541
|
height: 100%;
|
|
545
542
|
|
|
546
543
|
}
|
|
@@ -760,7 +757,9 @@
|
|
|
760
757
|
}
|
|
761
758
|
.k-textarea.k-input.k-hover,.k-textarea.k-input.k-state-hover,.k-textarea.k-input.k-state-hovered,.k-textarea.k-input:hover{
|
|
762
759
|
@extend %fk-effects-feather-input-hover-on-surface;
|
|
763
|
-
|
|
760
|
+
outline-color: currentcolor;
|
|
761
|
+
outline-width: 1px;
|
|
762
|
+
|
|
764
763
|
}
|
|
765
764
|
.k-textbox.k-input .k-input-prefix.k-input-prefix-horizontal{
|
|
766
765
|
margin-right: -12px;
|
|
@@ -802,11 +801,6 @@
|
|
|
802
801
|
.k-textbox.k-input .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-focus::before,.k-textbox.k-input .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-state-focus::before,.k-textbox.k-input .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-state-focused::before,.k-textbox.k-input .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button:focus::before{
|
|
803
802
|
opacity: 12%;
|
|
804
803
|
|
|
805
|
-
}
|
|
806
|
-
.k-textbox.k-input.k-focus,.k-textbox.k-input.k-state-focus,.k-textbox.k-input.k-state-focused,.k-textbox.k-input:focus{
|
|
807
|
-
outline-color: unset;
|
|
808
|
-
outline-width: 0px;
|
|
809
|
-
|
|
810
804
|
}
|
|
811
805
|
.k-textbox.k-input.k-focus.k-input-solid,.k-textbox.k-input.k-state-focus.k-input-solid,.k-textbox.k-input.k-state-focused.k-input-solid,.k-textbox.k-input.k-input-solid:focus{
|
|
812
806
|
border-bottom-color: currentcolor;
|
|
@@ -1185,7 +1179,7 @@
|
|
|
1185
1179
|
.k-textbox.k-input{
|
|
1186
1180
|
transition-property: all;
|
|
1187
1181
|
transition-duration: 280ms;
|
|
1188
|
-
outline-
|
|
1182
|
+
outline-style: solid;
|
|
1189
1183
|
|
|
1190
1184
|
}
|
|
1191
1185
|
.k-textbox.k-input.k-input-solid{
|
|
@@ -1401,9 +1395,12 @@
|
|
|
1401
1395
|
}
|
|
1402
1396
|
.k-chip.k-selected{
|
|
1403
1397
|
color: $fk-feather-primary-text-on-color;
|
|
1404
|
-
background-color: $fk-kendo-chip-solid-selected-bg;
|
|
1405
1398
|
background-image: linear-gradient(transparent, transparent);
|
|
1406
1399
|
|
|
1400
|
+
}
|
|
1401
|
+
.k-chip.k-selected.k-chip-solid-base{
|
|
1402
|
+
background-color: $fk-kendo-chip-solid-selected-bg;
|
|
1403
|
+
|
|
1407
1404
|
}
|
|
1408
1405
|
.k-chip.k-focus.k-chip-solid-base,.k-chip.k-state-focus.k-chip-solid-base,.k-chip.k-state-focused.k-chip-solid-base,.k-chip:focus.k-chip-solid-base{
|
|
1409
1406
|
@extend %fk-effects-feather-focus-outer-on-color;
|
|
@@ -1559,11 +1556,12 @@
|
|
|
1559
1556
|
|
|
1560
1557
|
}
|
|
1561
1558
|
.k-numerictextbox.k-input.k-hover,.k-numerictextbox.k-input.k-state-hover,.k-numerictextbox.k-input.k-state-hovered,.k-numerictextbox.k-input:hover{
|
|
1562
|
-
|
|
1563
|
-
border-bottom-color: $fk-kendo-input-hover-border;
|
|
1559
|
+
border-bottom-color: $fk-kendo-input-hover-border;
|
|
1564
1560
|
border-left-color: $fk-kendo-input-hover-border;
|
|
1565
1561
|
border-right-color: $fk-kendo-input-hover-border;
|
|
1566
1562
|
border-top-color: $fk-kendo-input-hover-border;
|
|
1563
|
+
outline-offset: -0.5px;
|
|
1564
|
+
outline-width: 1px;
|
|
1567
1565
|
|
|
1568
1566
|
}
|
|
1569
1567
|
.k-numerictextbox.k-input.k-hover.k-input-solid,.k-numerictextbox.k-input.k-state-hover.k-input-solid,.k-numerictextbox.k-input.k-state-hovered.k-input-solid,.k-numerictextbox.k-input:hover.k-input-solid{
|
|
@@ -1787,6 +1785,7 @@
|
|
|
1787
1785
|
min-width: 148px;
|
|
1788
1786
|
padding-top: $fk-kendo-input-lg-padding-y;
|
|
1789
1787
|
padding-bottom: $fk-kendo-input-lg-padding-y;
|
|
1788
|
+
color: $fk-kendo-input-text;
|
|
1790
1789
|
|
|
1791
1790
|
}
|
|
1792
1791
|
.k-textarea.k-input{
|
|
@@ -1804,13 +1803,15 @@
|
|
|
1804
1803
|
}
|
|
1805
1804
|
.k-textarea.k-input.k-state-focus-within.k-input-solid,.k-textarea.k-input:focus-within.k-input-solid{
|
|
1806
1805
|
@extend %fk-effects-feather-focus-outer-on-surface;
|
|
1807
|
-
|
|
1806
|
+
color: k-color( primary );
|
|
1807
|
+
|
|
1808
1808
|
}
|
|
1809
1809
|
.k-textarea.k-input.k-invalid.k-input-solid,.k-textarea.k-input.ng-invalid.ng-touched.k-input-solid,.k-textarea.k-input.ng-invalid.ng-dirty.k-input-solid{
|
|
1810
1810
|
border-bottom-color: k-color( error );
|
|
1811
1811
|
border-left-color: k-color( error );
|
|
1812
1812
|
border-right-color: k-color( error );
|
|
1813
1813
|
border-top-color: k-color( error );
|
|
1814
|
+
color: k-color( error );
|
|
1814
1815
|
|
|
1815
1816
|
}
|
|
1816
1817
|
.k-textarea.k-input.k-disabled.k-input-solid,.k-textarea.k-input.k-state-disabled.k-input-solid,.k-textarea.k-input:disabled.k-input-solid{
|
|
@@ -2140,10 +2141,6 @@
|
|
|
2140
2141
|
.k-button.k-disabled.k-button-flat.k-button-flat-primary .k-button-text,.k-button.k-state-disabled.k-button-flat.k-button-flat-primary .k-button-text,.k-button:disabled.k-button-flat.k-button-flat-primary .k-button-text{
|
|
2141
2142
|
color: $fk-feather-disabled-text-on-surface;
|
|
2142
2143
|
|
|
2143
|
-
}
|
|
2144
|
-
.k-chip.k-selected .k-chip-content{
|
|
2145
|
-
color: $fk-feather-primary-text-on-color;
|
|
2146
|
-
|
|
2147
2144
|
}
|
|
2148
2145
|
.k-button.k-selected.k-button-solid-primary .k-button-icon.k-icon.k-svg-icon{
|
|
2149
2146
|
color: $fk-feather-primary;
|
|
@@ -2201,16 +2198,19 @@
|
|
|
2201
2198
|
border-left-color: $fk-kendo-input-border;
|
|
2202
2199
|
border-right-color: $fk-kendo-input-border;
|
|
2203
2200
|
border-top-color: $fk-kendo-input-border;
|
|
2204
|
-
background-color: initial;
|
|
2205
2201
|
|
|
2206
2202
|
}
|
|
2207
2203
|
.k-numerictextbox.k-input{
|
|
2208
|
-
|
|
2209
|
-
transition-property: all;
|
|
2204
|
+
transition-property: all;
|
|
2210
2205
|
transition-duration: 280ms;
|
|
2211
2206
|
transition-timing-function: ease-out;
|
|
2212
2207
|
height: $fk-feather-container-height-lg;
|
|
2208
|
+
font-variant-numeric: tabular-nums;
|
|
2213
2209
|
|
|
2210
|
+
}
|
|
2211
|
+
.k-numerictextbox.k-input.k-input-md{
|
|
2212
|
+
@extend %fk-typography-feather-body-small;
|
|
2213
|
+
|
|
2214
2214
|
}
|
|
2215
2215
|
.k-maskedtextbox.k-input{
|
|
2216
2216
|
transition-property: all;
|
|
@@ -2615,13 +2615,14 @@
|
|
|
2615
2615
|
color: unset;
|
|
2616
2616
|
outline-color: currentcolor;
|
|
2617
2617
|
outline-style: solid;
|
|
2618
|
-
outline-width:
|
|
2618
|
+
outline-width: 1px;
|
|
2619
|
+
outline-offset: -0.5px;
|
|
2619
2620
|
|
|
2620
2621
|
}
|
|
2621
2622
|
.k-numerictextbox.k-input .k-input-inner{
|
|
2622
2623
|
@extend %fk-typography-feather-body-small;
|
|
2623
|
-
|
|
2624
|
-
|
|
2624
|
+
height: auto;
|
|
2625
|
+
color: $fk-kendo-input-text;
|
|
2625
2626
|
|
|
2626
2627
|
}
|
|
2627
2628
|
.k-maskedtextbox.k-input .k-input-inner{
|
|
@@ -3001,8 +3002,6 @@
|
|
|
3001
3002
|
border-bottom-right-radius: 8px;
|
|
3002
3003
|
border-top-left-radius: 8px;
|
|
3003
3004
|
border-top-right-radius: 8px;
|
|
3004
|
-
background-color: $fk-feather-surface-shade-1;
|
|
3005
|
-
background-image: none;
|
|
3006
3005
|
transition-property: box-shadow;
|
|
3007
3006
|
transition-duration: 280ms;
|
|
3008
3007
|
transition-timing-function: ease-out;
|
|
@@ -3451,6 +3450,10 @@
|
|
|
3451
3450
|
transition-timing-function: ease-out;
|
|
3452
3451
|
height: $fk-feather-container-height-lg;
|
|
3453
3452
|
background-image: none;
|
|
3453
|
+
outline-color: currentcolor;
|
|
3454
|
+
outline-style: solid;
|
|
3455
|
+
outline-width: 1px;
|
|
3456
|
+
outline-offset: -1px;
|
|
3454
3457
|
|
|
3455
3458
|
}
|
|
3456
3459
|
.k-input.k-input-solid{
|
|
@@ -3713,10 +3716,6 @@
|
|
|
3713
3716
|
border-right-color: $fk-kendo-input-focus-border;
|
|
3714
3717
|
border-top-color: $fk-kendo-input-focus-border;
|
|
3715
3718
|
|
|
3716
|
-
}
|
|
3717
|
-
.k-maskedtextbox.k-input.k-hover,.k-maskedtextbox.k-input.k-state-hover,.k-maskedtextbox.k-input.k-state-hovered,.k-maskedtextbox.k-input:hover{
|
|
3718
|
-
@extend %fk-effects-feather-input-hover-on-surface;
|
|
3719
|
-
|
|
3720
3719
|
}
|
|
3721
3720
|
.k-numerictextbox.k-input.k-disabled .k-input-inner,.k-numerictextbox.k-input.k-state-disabled .k-input-inner,.k-numerictextbox.k-input:disabled .k-input-inner{
|
|
3722
3721
|
color: $fk-feather-disabled-text-on-surface;
|
|
@@ -4018,6 +4017,7 @@
|
|
|
4018
4017
|
.k-button.k-icon-button{
|
|
4019
4018
|
aspect-ratio: 1/1;
|
|
4020
4019
|
background-image: none;
|
|
4020
|
+
column-gap: 0px;
|
|
4021
4021
|
|
|
4022
4022
|
}
|
|
4023
4023
|
.k-button.k-icon-button.k-button-md{
|
|
@@ -4754,16 +4754,6 @@
|
|
|
4754
4754
|
background-image: $fk-feather-hover-on-surface-gradient;
|
|
4755
4755
|
outline-style: none;
|
|
4756
4756
|
|
|
4757
|
-
}
|
|
4758
|
-
.k-form-hint{
|
|
4759
|
-
font-style: normal;
|
|
4760
|
-
font-size: $fk-feather-font-size-md;
|
|
4761
|
-
|
|
4762
|
-
}
|
|
4763
|
-
.k-form-error{
|
|
4764
|
-
font-size: $fk-feather-font-size-md;
|
|
4765
|
-
font-style: normal;
|
|
4766
|
-
|
|
4767
4757
|
}
|
|
4768
4758
|
.k-dropdowntree .k-input-button.k-button.k-icon-button{
|
|
4769
4759
|
width: $fk-feather-container-height-sm;
|
|
@@ -4805,11 +4795,12 @@
|
|
|
4805
4795
|
}
|
|
4806
4796
|
.k-textbox.k-input.k-input-md.k-rounded-md.k-input-solid .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary{
|
|
4807
4797
|
outline-style: none;
|
|
4798
|
+
color: k-color( primary );
|
|
4808
4799
|
|
|
4809
4800
|
}
|
|
4810
4801
|
.k-textbox.k-input.k-input-md.k-rounded-md.k-input-solid .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary.k-focus,.k-textbox.k-input.k-input-md.k-rounded-md.k-input-solid .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary.k-state-focus,.k-textbox.k-input.k-input-md.k-rounded-md.k-input-solid .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary.k-state-focused,.k-textbox.k-input.k-input-md.k-rounded-md.k-input-solid .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary:focus{
|
|
4811
|
-
|
|
4812
|
-
|
|
4802
|
+
outline-style: none;
|
|
4803
|
+
box-shadow: inset 2px 0px 0px 0px currentcolor !important;
|
|
4813
4804
|
|
|
4814
4805
|
}
|
|
4815
4806
|
.k-expander.k-expanded.k-disabled .k-expander-header .k-expander-indicator .k-icon.k-svg-icon.k-svg-i-chevron-up >svg,.k-expander.k-expanded.k-state-disabled .k-expander-header .k-expander-indicator .k-icon.k-svg-icon.k-svg-i-chevron-up >svg,.k-expander.k-expanded:disabled .k-expander-header .k-expander-indicator .k-icon.k-svg-icon.k-svg-i-chevron-up >svg{
|
|
@@ -4842,11 +4833,18 @@
|
|
|
4842
4833
|
border-right-color: $fk-kendo-input-invalid-border;
|
|
4843
4834
|
border-top-color: $fk-kendo-input-invalid-border;
|
|
4844
4835
|
|
|
4836
|
+
}
|
|
4837
|
+
.k-input.k-invalid,.k-input.ng-invalid.ng-touched,.k-input.ng-invalid.ng-dirty{
|
|
4838
|
+
outline-color: $fk-kendo-input-invalid-border;
|
|
4839
|
+
|
|
4845
4840
|
}
|
|
4846
4841
|
.k-input.k-hover,.k-input.k-state-hover,.k-input.k-state-hovered,.k-input:hover{
|
|
4847
4842
|
transition-property: all;
|
|
4848
4843
|
transition-duration: 280ms;
|
|
4849
4844
|
transition-timing-function: ease-out;
|
|
4845
|
+
outline-style: solid;
|
|
4846
|
+
outline-width: 0.5px;
|
|
4847
|
+
outline-color: $fk-kendo-input-hover-border;
|
|
4850
4848
|
|
|
4851
4849
|
}
|
|
4852
4850
|
.k-datepicker.k-input.k-invalid.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-touched.k-invalid.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-dirty.k-invalid.k-input-solid,.k-datepicker.k-input.k-invalid.ng-invalid.ng-touched.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-touched.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-dirty.ng-touched.k-input-solid,.k-datepicker.k-input.k-invalid.ng-invalid.ng-dirty.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-touched.ng-dirty.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-dirty.k-input-solid{
|
|
@@ -5120,7 +5118,7 @@
|
|
|
5120
5118
|
|
|
5121
5119
|
}
|
|
5122
5120
|
.fk-loader.k-loader.k-loader-lg.k-loader-spinner-4{
|
|
5123
|
-
visibility:
|
|
5121
|
+
visibility: visible;
|
|
5124
5122
|
|
|
5125
5123
|
}
|
|
5126
5124
|
.fk-loader.k-loader.k-loader-sm.k-loader-spinner-3 .k-loader-canvas{
|
|
@@ -5153,10 +5151,177 @@
|
|
|
5153
5151
|
|
|
5154
5152
|
}
|
|
5155
5153
|
.k-button.k-selected.k-icon-button.k-button-solid-base{
|
|
5156
|
-
background-color:
|
|
5154
|
+
background-color: k-color( primary );
|
|
5157
5155
|
|
|
5158
5156
|
}
|
|
5159
5157
|
.k-button.k-selected.k-icon-button{
|
|
5160
|
-
background-image:
|
|
5158
|
+
background-image: $fk-feather-selected-on-color;
|
|
5159
|
+
|
|
5160
|
+
}
|
|
5161
|
+
.k-dialog-wrapper .k-window.k-dialog .k-window-content.k-dialog-content{
|
|
5162
|
+
padding-top: 0.5rem;
|
|
5163
|
+
|
|
5164
|
+
}
|
|
5165
|
+
.fk-loader.k-loader.k-loader-sm.k-loader-spinner-3 .k-loader-canvas .k-loader-segment{
|
|
5166
|
+
visibility: hidden;
|
|
5167
|
+
|
|
5168
|
+
}
|
|
5169
|
+
.fk-loader.k-loader.k-loader-lg.k-loader-spinner-4 .k-loader-canvas .k-loader-segment{
|
|
5170
|
+
visibility: hidden;
|
|
5171
|
+
|
|
5172
|
+
}
|
|
5173
|
+
.fk-loader.k-loader.k-loader-md.k-loader-spinner-4 .k-loader-canvas .k-loader-segment{
|
|
5174
|
+
visibility: hidden;
|
|
5175
|
+
|
|
5176
|
+
}
|
|
5177
|
+
.fk-loader.k-loader.k-loader-lg.k-loader-spinner-3 .k-loader-canvas .k-loader-segment{
|
|
5178
|
+
visibility: hidden;
|
|
5179
|
+
|
|
5180
|
+
}
|
|
5181
|
+
.k-maskedtextbox.k-input.k-hover,.k-maskedtextbox.k-input.k-state-hover,.k-maskedtextbox.k-input.k-state-hovered,.k-maskedtextbox.k-input:hover{
|
|
5182
|
+
outline-color: currentcolor;
|
|
5183
|
+
outline-offset: -0.5px;
|
|
5184
|
+
|
|
5185
|
+
}
|
|
5186
|
+
.k-textarea.k-input.k-invalid .k-input-inner,.k-textarea.k-input.ng-invalid.ng-touched .k-input-inner,.k-textarea.k-input.ng-invalid.ng-dirty .k-input-inner{
|
|
5187
|
+
color: $fk-kendo-input-text;
|
|
5188
|
+
|
|
5189
|
+
}
|
|
5190
|
+
.k-colorgradient.k-focus .k-colorgradient-inputs.k-hstack .k-vstack.k-flex-1 .k-hex-value.k-textbox.k-input .k-input.k-input-solid,.k-colorgradient.k-state-focus .k-colorgradient-inputs.k-hstack .k-vstack.k-flex-1 .k-hex-value.k-textbox.k-input .k-input.k-input-solid,.k-colorgradient.k-state-focused .k-colorgradient-inputs.k-hstack .k-vstack.k-flex-1 .k-hex-value.k-textbox.k-input .k-input.k-input-solid,.k-colorgradient:focus .k-colorgradient-inputs.k-hstack .k-vstack.k-flex-1 .k-hex-value.k-textbox.k-input .k-input.k-input-solid{
|
|
5191
|
+
border-bottom-style: none;
|
|
5192
|
+
border-left-style: none;
|
|
5193
|
+
border-right-style: none;
|
|
5194
|
+
border-top-style: none;
|
|
5195
|
+
outline-style: none;
|
|
5196
|
+
|
|
5197
|
+
}
|
|
5198
|
+
.k-colorgradient .k-colorgradient-inputs .k-hex-value.k-textbox.k-input .k-input.k-input-solid{
|
|
5199
|
+
border-bottom-style: none;
|
|
5200
|
+
border-left-style: none;
|
|
5201
|
+
border-right-style: none;
|
|
5202
|
+
border-top-style: none;
|
|
5203
|
+
outline-style: none;
|
|
5204
|
+
|
|
5205
|
+
}
|
|
5206
|
+
.k-textbox.k-input.k-input-outline .k-input-inner{
|
|
5207
|
+
color: $fk-kendo-input-text;
|
|
5208
|
+
|
|
5209
|
+
}
|
|
5210
|
+
.k-textbox.k-input.k-input-outline{
|
|
5211
|
+
color: $fk-kendo-input-text;
|
|
5212
|
+
transition-property: all;
|
|
5213
|
+
transition-duration: 280ms;
|
|
5214
|
+
transition-timing-function: ease-out;
|
|
5215
|
+
border-bottom-color: currentcolor;
|
|
5216
|
+
border-left-color: currentcolor;
|
|
5217
|
+
border-right-color: currentcolor;
|
|
5218
|
+
border-top-color: currentcolor;
|
|
5219
|
+
|
|
5220
|
+
}
|
|
5221
|
+
.k-textbox.k-input.k-input-outline.k-focus,.k-textbox.k-input.k-input-outline.k-state-focus,.k-textbox.k-input.k-input-outline.k-state-focused,.k-textbox.k-input.k-input-outline:focus{
|
|
5222
|
+
@extend %fk-effects-feather-focus-outer-on-surface;
|
|
5223
|
+
border-bottom-color: currentcolor;
|
|
5224
|
+
border-left-color: currentcolor;
|
|
5225
|
+
border-right-color: currentcolor;
|
|
5226
|
+
border-top-color: currentcolor;
|
|
5227
|
+
color: k-color( primary );
|
|
5228
|
+
|
|
5229
|
+
}
|
|
5230
|
+
.k-textbox.k-input.k-input-outline.k-invalid,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty{
|
|
5231
|
+
color: k-color( error );
|
|
5232
|
+
outline-color: currentcolor;
|
|
5233
|
+
|
|
5234
|
+
}
|
|
5235
|
+
.k-textbox.k-input.k-input-outline.k-invalid.k-focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched.k-focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty.k-focus,.k-textbox.k-input.k-input-outline.k-invalid.k-state-focus,.k-textbox.k-input.k-input-outline.k-invalid.k-state-focused,.k-textbox.k-input.k-input-outline.k-invalid:focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched.k-state-focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched.k-state-focused,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched:focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty.k-state-focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty.k-state-focused,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty:focus{
|
|
5236
|
+
@extend %fk-effects-feather-focus-invalid-outer;
|
|
5237
|
+
|
|
5238
|
+
}
|
|
5239
|
+
.k-textbox.k-input.k-input-outline.k-disabled,.k-textbox.k-input.k-input-outline.k-state-disabled,.k-textbox.k-input.k-input-outline:disabled{
|
|
5240
|
+
color: $fk-feather-disabled-text-on-surface;
|
|
5241
|
+
outline-style: none;
|
|
5242
|
+
|
|
5243
|
+
}
|
|
5244
|
+
.k-textbox.k-input.k-input-outline.k-disabled .k-input-inner,.k-textbox.k-input.k-input-outline.k-state-disabled .k-input-inner,.k-textbox.k-input.k-input-outline:disabled .k-input-inner{
|
|
5245
|
+
color: inherit;
|
|
5246
|
+
|
|
5247
|
+
}
|
|
5248
|
+
.k-textbox.k-input.k-input-outline .k-clear-value{
|
|
5249
|
+
border-bottom-left-radius: $fk-feather-border-radius-full;
|
|
5250
|
+
border-bottom-right-radius: $fk-feather-border-radius-full;
|
|
5251
|
+
border-top-left-radius: $fk-feather-border-radius-full;
|
|
5252
|
+
border-top-right-radius: $fk-feather-border-radius-full;
|
|
5253
|
+
width: $fk-feather-container-height-sm;
|
|
5254
|
+
height: $fk-feather-container-height-sm;
|
|
5255
|
+
|
|
5256
|
+
}
|
|
5257
|
+
.k-flatcolorpicker.k-coloreditor .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-flat .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-selected{
|
|
5258
|
+
background-color: k-color( primary ) !important;
|
|
5259
|
+
background-image: none !important;
|
|
5260
|
+
color: k-color( on-primary );
|
|
5261
|
+
|
|
5262
|
+
}
|
|
5263
|
+
.k-flatcolorpicker.k-coloreditor .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-flat .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-selected.k-hover,.k-flatcolorpicker.k-coloreditor .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-flat .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-selected.k-state-hover,.k-flatcolorpicker.k-coloreditor .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-flat .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-selected.k-state-hovered,.k-flatcolorpicker.k-coloreditor .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-flat .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-selected:hover{
|
|
5264
|
+
background-color: k-color( primary ) !important;
|
|
5265
|
+
background-image: $fk-feather-hover-on-color !important;
|
|
5266
|
+
|
|
5267
|
+
}
|
|
5268
|
+
.k-flatcolorpicker.k-coloreditor .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-flat .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-selected.k-focus,.k-flatcolorpicker.k-coloreditor .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-flat .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-selected.k-state-focus,.k-flatcolorpicker.k-coloreditor .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-flat .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-selected.k-state-focused,.k-flatcolorpicker.k-coloreditor .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-flat .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-selected:focus{
|
|
5269
|
+
@extend %fk-effects-feather-focus-inner-on-color-important;
|
|
5270
|
+
|
|
5271
|
+
}
|
|
5272
|
+
.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-hover .k-icon.k-svg-icon.k-svg-i-image.k-button-icon,.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-state-hover .k-icon.k-svg-icon.k-svg-i-image.k-button-icon,.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-state-hovered .k-icon.k-svg-icon.k-svg-i-image.k-button-icon,.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button:hover .k-icon.k-svg-icon.k-svg-i-image.k-button-icon{
|
|
5273
|
+
width: $fk-feather-icon-size-sm;
|
|
5274
|
+
height: $fk-feather-icon-size-sm;
|
|
5275
|
+
|
|
5276
|
+
}
|
|
5277
|
+
.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button .k-icon.k-svg-icon.k-svg-i-image.k-button-icon >svg{
|
|
5278
|
+
width: $fk-feather-icon-size-sm;
|
|
5279
|
+
|
|
5280
|
+
}
|
|
5281
|
+
.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button{
|
|
5282
|
+
width: $fk-feather-container-height-sm;
|
|
5283
|
+
height: $fk-feather-container-height-sm;
|
|
5284
|
+
border-bottom-left-radius: $fk-feather-border-radius-full;
|
|
5285
|
+
border-bottom-right-radius: $fk-feather-border-radius-full;
|
|
5286
|
+
border-top-left-radius: $fk-feather-border-radius-full;
|
|
5287
|
+
border-top-right-radius: $fk-feather-border-radius-full;
|
|
5288
|
+
|
|
5289
|
+
}
|
|
5290
|
+
.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-focus,.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-state-focus,.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button.k-state-focused,.k-textbox.k-input.k-input-outline .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button:focus{
|
|
5291
|
+
@extend %fk-effects-feather-focus-inner-on-surface-important;
|
|
5292
|
+
border-bottom-style: none;
|
|
5293
|
+
border-left-style: none;
|
|
5294
|
+
border-right-style: none;
|
|
5295
|
+
border-top-style: none;
|
|
5296
|
+
|
|
5297
|
+
}
|
|
5298
|
+
.k-textbox.k-input.k-input-outline .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary.k-focus,.k-textbox.k-input.k-input-outline .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary.k-state-focus,.k-textbox.k-input.k-input-outline .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary.k-state-focused,.k-textbox.k-input.k-input-outline .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary:focus{
|
|
5299
|
+
box-shadow: inset 2px 0px 0px 0px currentcolor !important;
|
|
5300
|
+
|
|
5301
|
+
}
|
|
5302
|
+
.k-textbox.k-input.k-input-md.k-rounded-md.k-input-solid .k-input-prefix.k-input-prefix-horizontal .k-button.k-button-flat.k-button-flat-base.k-icon-button .k-icon.k-svg-icon.k-svg-i-image.k-button-icon{
|
|
5303
|
+
width: $fk-feather-icon-size-sm;
|
|
5304
|
+
|
|
5305
|
+
}
|
|
5306
|
+
.k-textbox.k-input.k-input-md.k-rounded-md.k-input-solid .k-input-suffix.k-input-suffix-horizontal .k-button.k-button-flat.k-button-flat-primary .k-button-text{
|
|
5307
|
+
color: inherit;
|
|
5308
|
+
|
|
5309
|
+
}
|
|
5310
|
+
.k-chip.k-selected .k-chip-content{
|
|
5311
|
+
color: inherit;
|
|
5312
|
+
|
|
5313
|
+
}
|
|
5314
|
+
.k-chip.k-hover .k-chip-content,.k-chip.k-state-hover .k-chip-content,.k-chip.k-state-hovered .k-chip-content,.k-chip:hover .k-chip-content{
|
|
5315
|
+
color: inherit;
|
|
5316
|
+
|
|
5317
|
+
}
|
|
5318
|
+
.k-form-hint{
|
|
5319
|
+
font-style: normal;
|
|
5320
|
+
line-height: 1.25;
|
|
5321
|
+
|
|
5322
|
+
}
|
|
5323
|
+
.k-form-error{
|
|
5324
|
+
font-style: normal;
|
|
5325
|
+
line-height: 1.25;
|
|
5161
5326
|
|
|
5162
5327
|
}
|
|
@@ -183,7 +183,6 @@ $fk-feather-border-light-on-surface: rgba(10,12,27,0.06);
|
|
|
183
183
|
$fk-kendo-checkbox-bg: transparent;
|
|
184
184
|
$fk-error: #a5021f;
|
|
185
185
|
$fk-feather-surface-shade-1: rgba(242,242,250,1);
|
|
186
|
-
$fk-base: #f5f5f5;
|
|
187
186
|
$fk-feather-primary-text-on-surface: rgba(10,12,27,0.9);
|
|
188
187
|
$fk-base-hover: #ebebeb;
|
|
189
188
|
$fk-primary-subtle: rgb(204, 214.6, 230.2);
|
|
@@ -276,7 +275,7 @@ $fk-kendo-button-active-bg: $fk-feather-surface-shade-3;
|
|
|
276
275
|
$fk-kendo-button-selected-bg: $fk-primary;
|
|
277
276
|
$fk-kendo-button-selected-text: $fk-on-primary;
|
|
278
277
|
$fk-kendo-button-selected-border: $fk-feather-primary;
|
|
279
|
-
$fk-kendo-component-bg: $fk-
|
|
278
|
+
$fk-kendo-component-bg: $fk-surface;
|
|
280
279
|
$fk-kendo-calendar-bg: $fk-kendo-component-bg;
|
|
281
280
|
$fk-subtle: $fk-feather-icon-on-neutral;
|
|
282
281
|
$fk-kendo-calendar-cell-selected-text: $fk-on-primary;
|
|
@@ -286,15 +285,18 @@ $fk-kendo-checkbox-checked-bg: $fk-primary;
|
|
|
286
285
|
$fk-kendo-checkbox-invalid-text: $fk-error;
|
|
287
286
|
$fk-kendo-checkbox-invalid-border: $fk-error;
|
|
288
287
|
$fk-kendo-chip-base-bg: $fk-feather-surface-shade-1;
|
|
288
|
+
$fk-kendo-chip-solid-bg: $fk-kendo-chip-base-bg;
|
|
289
289
|
$fk-kendo-chip-solid-hover-bg: $fk-feather-surface-shade-1;
|
|
290
290
|
$fk-kendo-chip-solid-selected-bg: $fk-feather-secondary-text-on-surface;
|
|
291
291
|
$fk-kendo-chip-outline-text: $fk-feather-secondary-text-on-surface;
|
|
292
292
|
$fk-kendo-chip-outline-border: $fk-feather-secondary-text-on-surface;
|
|
293
293
|
$fk-kendo-chip-outline-hover-bg: $fk-kendo-button-hover-bg;
|
|
294
|
+
$fk-base: $fk-primary;
|
|
294
295
|
$fk-kendo-chip-outline-selected-bg: $fk-feather-primary;
|
|
295
296
|
$fk-kendo-chip-outline-selected-text: $fk-feather-primary-text-on-color;
|
|
296
|
-
$fk-kendo-color-editor-bg: $fk-
|
|
297
|
-
$fk-kendo-
|
|
297
|
+
$fk-kendo-color-editor-bg: $fk-app-surface;
|
|
298
|
+
$fk-kendo-color-gradient-bg: $fk-app-surface;
|
|
299
|
+
$fk-kendo-component-text: $fk-on-app-surface;
|
|
298
300
|
$fk-kendo-component-header-text: $fk-feather-primary-text-on-surface;
|
|
299
301
|
$fk-kendo-invalid-border: $fk-error;
|
|
300
302
|
$fk-kendo-drawer-hover-bg: $fk-base-hover;
|
|
@@ -480,6 +482,7 @@ $kendo-checkbox-checked-bg: $fk-kendo-checkbox-checked-bg;
|
|
|
480
482
|
$kendo-checkbox-invalid-text: $fk-kendo-checkbox-invalid-text;
|
|
481
483
|
$kendo-checkbox-invalid-border: $fk-kendo-checkbox-invalid-border;
|
|
482
484
|
$kendo-chip-base-bg: $fk-kendo-chip-base-bg;
|
|
485
|
+
$kendo-chip-solid-bg: $fk-kendo-chip-solid-bg;
|
|
483
486
|
$kendo-chip-solid-hover-bg: $fk-kendo-chip-solid-hover-bg;
|
|
484
487
|
$kendo-chip-solid-selected-bg: $fk-kendo-chip-solid-selected-bg;
|
|
485
488
|
$kendo-chip-outline-text: $fk-kendo-chip-outline-text;
|
|
@@ -488,6 +491,7 @@ $kendo-chip-outline-hover-bg: $fk-kendo-chip-outline-hover-bg;
|
|
|
488
491
|
$kendo-chip-outline-selected-bg: $fk-kendo-chip-outline-selected-bg;
|
|
489
492
|
$kendo-chip-outline-selected-text: $fk-kendo-chip-outline-selected-text;
|
|
490
493
|
$kendo-color-editor-bg: $fk-kendo-color-editor-bg;
|
|
494
|
+
$kendo-color-gradient-bg: $fk-kendo-color-gradient-bg;
|
|
491
495
|
$kendo-component-text: $fk-kendo-component-text;
|
|
492
496
|
$kendo-component-header-text: $fk-kendo-component-header-text;
|
|
493
497
|
$kendo-invalid-border: $fk-kendo-invalid-border;
|
|
@@ -574,6 +578,7 @@ app-surface: $fk-feather-surface,
|
|
|
574
578
|
primary: $fk-feather-primary,
|
|
575
579
|
surface: $fk-feather-surface-shade-2,
|
|
576
580
|
subtle: $fk-feather-icon-on-neutral,
|
|
581
|
+
base: $fk-primary,
|
|
577
582
|
border-alt: $fk-feather-border-light-on-surface,
|
|
578
583
|
primary-on-surface: $fk-feather-primary,
|
|
579
584
|
secondary: $fk-feather-primary-variant,
|