@fkui/design 6.40.0 → 6.42.0
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/lib/fkui.css +138 -80
- package/lib/fkui.min.css +1 -1
- package/package.json +6 -6
- package/src/components/button/_button-group.scss +62 -0
- package/src/components/button/_button-list.scss +22 -0
- package/src/components/button/_button.scss +0 -79
- package/src/components/button/_index.scss +2 -0
- package/src/components/datepicker-field/_datepicker-field.scss +12 -0
- package/src/components/loader/_loader.scss +8 -0
- package/src/components/select-field/_select-field.scss +8 -0
- package/src/components/table-ng/_cell.scss +1 -0
- package/src/internal-components/calendar-navbar/_calendar-navbar.scss +23 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fkui/design",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.42.0",
|
|
4
4
|
"description": "fkui design",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"fkui",
|
|
@@ -39,10 +39,10 @@
|
|
|
39
39
|
"unit:watch": "node --test --watch"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@fkui/icon-lib-default": "6.
|
|
43
|
-
"@fkui/theme-default": "6.
|
|
42
|
+
"@fkui/icon-lib-default": "6.42.0",
|
|
43
|
+
"@fkui/theme-default": "6.42.0",
|
|
44
44
|
"autoprefixer": "10.4.27",
|
|
45
|
-
"cssnano": "7.1.
|
|
45
|
+
"cssnano": "7.1.4",
|
|
46
46
|
"glob": "13.0.6",
|
|
47
47
|
"picocolors": "1.1.1",
|
|
48
48
|
"postcss": "8.5.8",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"svgo": "4.0.1"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"@fkui/theme-default": "^6.
|
|
54
|
+
"@fkui/theme-default": "^6.42.0",
|
|
55
55
|
"sass": "^1.40.0",
|
|
56
56
|
"stylelint": ">= 14"
|
|
57
57
|
},
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"npm": ">= 7"
|
|
69
69
|
},
|
|
70
70
|
"sass": "./src/fkui.scss",
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "14cda3b6de43b4b4bb9250f672d79215282b0e7c"
|
|
72
72
|
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
@use "../../core";
|
|
2
|
+
@use "../../core/size";
|
|
3
|
+
|
|
4
|
+
@mixin button-group-margin($margin-bottom, $margin-right) {
|
|
5
|
+
margin-bottom: $margin-bottom;
|
|
6
|
+
margin-right: $margin-right;
|
|
7
|
+
|
|
8
|
+
&:last-child {
|
|
9
|
+
margin-right: 0;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.button-group {
|
|
14
|
+
align-items: center;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-wrap: wrap;
|
|
17
|
+
margin-bottom: core.densify(size.$margin-050);
|
|
18
|
+
margin-top: core.densify(size.$margin-025);
|
|
19
|
+
|
|
20
|
+
&--end {
|
|
21
|
+
justify-content: flex-end;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&__item {
|
|
25
|
+
margin: 0;
|
|
26
|
+
margin-bottom: core.densify(size.$margin-100);
|
|
27
|
+
|
|
28
|
+
@include core.breakpoint-up(md) {
|
|
29
|
+
@include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
> .button--discrete {
|
|
34
|
+
@include button-group-margin(core.densify(size.$margin-100), size.$margin-150);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
> .button--small {
|
|
38
|
+
@include button-group-margin(core.densify(size.$margin-075), size.$margin-075);
|
|
39
|
+
|
|
40
|
+
&.button--full-width {
|
|
41
|
+
@include core.breakpoint-down(sm) {
|
|
42
|
+
margin-right: 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
> .button--medium {
|
|
48
|
+
@include button-group-margin(core.densify(size.$margin-075), size.$margin-100);
|
|
49
|
+
|
|
50
|
+
&.button--full-width {
|
|
51
|
+
@include core.breakpoint-down(sm) {
|
|
52
|
+
margin-right: 0;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
> .button--large {
|
|
58
|
+
@include core.breakpoint-up(md) {
|
|
59
|
+
@include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@use "../../core";
|
|
2
|
+
@use "../../core/size";
|
|
3
|
+
|
|
4
|
+
.button-list {
|
|
5
|
+
margin-bottom: core.densify(size.$margin-050);
|
|
6
|
+
margin-top: core.densify(size.$margin-025);
|
|
7
|
+
padding-left: 0;
|
|
8
|
+
|
|
9
|
+
> li button {
|
|
10
|
+
margin: 0;
|
|
11
|
+
margin-bottom: core.densify(size.$margin-100);
|
|
12
|
+
|
|
13
|
+
&.button.button--small,
|
|
14
|
+
&.button.button--medium {
|
|
15
|
+
margin-bottom: core.densify(size.$margin-075);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&.button.button--large {
|
|
19
|
+
margin-bottom: core.densify(size.$margin-100);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -2,85 +2,6 @@
|
|
|
2
2
|
@use "../../core/size";
|
|
3
3
|
@use "variables" as *;
|
|
4
4
|
|
|
5
|
-
@mixin button-group-margin($margin-bottom, $margin-right) {
|
|
6
|
-
margin-bottom: $margin-bottom;
|
|
7
|
-
margin-right: $margin-right;
|
|
8
|
-
|
|
9
|
-
&:last-child {
|
|
10
|
-
margin-right: 0;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
/// Button group and button list
|
|
15
|
-
.button-group {
|
|
16
|
-
align-items: center;
|
|
17
|
-
display: flex;
|
|
18
|
-
flex-wrap: wrap;
|
|
19
|
-
margin-bottom: core.densify(size.$margin-050);
|
|
20
|
-
margin-top: core.densify(size.$margin-025);
|
|
21
|
-
|
|
22
|
-
.button-group__item {
|
|
23
|
-
margin: 0;
|
|
24
|
-
margin-bottom: core.densify(size.$margin-100);
|
|
25
|
-
|
|
26
|
-
@include core.breakpoint-up(md) {
|
|
27
|
-
@include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
> .button.button--discrete {
|
|
32
|
-
@include button-group-margin(core.densify(size.$margin-100), size.$margin-150);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
> .button.button--small {
|
|
36
|
-
@include button-group-margin(core.densify(size.$margin-075), size.$margin-075);
|
|
37
|
-
&.button--full-width {
|
|
38
|
-
@include core.breakpoint-down(sm) {
|
|
39
|
-
margin-right: 0;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
> .button.button--medium {
|
|
45
|
-
@include button-group-margin(core.densify(size.$margin-075), size.$margin-100);
|
|
46
|
-
&.button--full-width {
|
|
47
|
-
@include core.breakpoint-down(sm) {
|
|
48
|
-
margin-right: 0;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
> .button.button--large {
|
|
54
|
-
@include core.breakpoint-up(md) {
|
|
55
|
-
@include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&--end {
|
|
60
|
-
justify-content: flex-end;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.button-list {
|
|
65
|
-
margin-bottom: core.densify(size.$margin-050);
|
|
66
|
-
margin-top: core.densify(size.$margin-025);
|
|
67
|
-
padding-left: 0;
|
|
68
|
-
|
|
69
|
-
> li button {
|
|
70
|
-
margin: 0;
|
|
71
|
-
margin-bottom: core.densify(size.$margin-100);
|
|
72
|
-
|
|
73
|
-
&.button.button--small,
|
|
74
|
-
&.button.button--medium {
|
|
75
|
-
margin-bottom: core.densify(size.$margin-075);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
&.button.button--large {
|
|
79
|
-
margin-bottom: core.densify(size.$margin-100);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
5
|
/// Primary button
|
|
85
6
|
$button--primary: (
|
|
86
7
|
background-color: $button-primary-color-background-default,
|
|
@@ -24,15 +24,27 @@ $calendar-width: calc(100vw - #{$popup-spacing});
|
|
|
24
24
|
height: core.densify(var(--f-icon-size-x-large));
|
|
25
25
|
width: core.densify(var(--f-icon-size-x-large));
|
|
26
26
|
vertical-align: middle;
|
|
27
|
+
|
|
28
|
+
@media (forced-colors: active) {
|
|
29
|
+
color: ButtonBorder;
|
|
30
|
+
}
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
&:hover {
|
|
30
34
|
.icon {
|
|
31
35
|
color: $datepickerfield-f-icon-calendar-color-content-hover;
|
|
36
|
+
|
|
37
|
+
@media (forced-colors: active) {
|
|
38
|
+
color: LinkText;
|
|
39
|
+
}
|
|
32
40
|
}
|
|
33
41
|
}
|
|
34
42
|
&:disabled .icon {
|
|
35
43
|
color: $datepickerfield-f-icon-calendar-color-content-disabled;
|
|
44
|
+
|
|
45
|
+
@media (forced-colors: active) {
|
|
46
|
+
color: GrayText;
|
|
47
|
+
}
|
|
36
48
|
}
|
|
37
49
|
}
|
|
38
50
|
|
|
@@ -55,6 +55,10 @@
|
|
|
55
55
|
height: size.$padding-100;
|
|
56
56
|
position: absolute;
|
|
57
57
|
width: size.$padding-100;
|
|
58
|
+
|
|
59
|
+
@media (forced-colors: active) {
|
|
60
|
+
background-color: CanvasText;
|
|
61
|
+
}
|
|
58
62
|
}
|
|
59
63
|
|
|
60
64
|
&__wait-text {
|
|
@@ -85,6 +89,10 @@
|
|
|
85
89
|
|
|
86
90
|
.loader__circle {
|
|
87
91
|
background-color: $loader-circle-inverted-color-background;
|
|
92
|
+
|
|
93
|
+
@media (forced-colors: active) {
|
|
94
|
+
background-color: CanvasText;
|
|
95
|
+
}
|
|
88
96
|
}
|
|
89
97
|
}
|
|
90
98
|
|
|
@@ -38,6 +38,10 @@
|
|
|
38
38
|
padding: var(--padding-input-fields);
|
|
39
39
|
width: var(--f-width-full);
|
|
40
40
|
|
|
41
|
+
@media (forced-colors: active) {
|
|
42
|
+
border-color: ButtonBorder;
|
|
43
|
+
}
|
|
44
|
+
|
|
41
45
|
&:hover {
|
|
42
46
|
background-color: $selectfield-color-background-hover;
|
|
43
47
|
}
|
|
@@ -70,6 +74,10 @@
|
|
|
70
74
|
@extend %icon--inset-top-right;
|
|
71
75
|
|
|
72
76
|
color: $selectfield-f-icon-arrow-down-color-content-default;
|
|
77
|
+
|
|
78
|
+
@media (forced-colors: active) {
|
|
79
|
+
color: buttonText;
|
|
80
|
+
}
|
|
73
81
|
}
|
|
74
82
|
|
|
75
83
|
&__error-popup-icon {
|
|
@@ -5,7 +5,11 @@
|
|
|
5
5
|
|
|
6
6
|
$calendar-icon-padding: 5px;
|
|
7
7
|
$calendar-icon-disabled-border-width: 1px;
|
|
8
|
+
$calendar-icon-forced-colors-border-width: 2px;
|
|
8
9
|
$calendar-icon-disabled-padding: calc($calendar-icon-padding - $calendar-icon-disabled-border-width);
|
|
10
|
+
$calendar-icon-disabled-forced-colors-padding: calc($calendar-icon-padding - $calendar-icon-forced-colors-border-width);
|
|
11
|
+
$calendar-icon-forced-colors-padding: calc($calendar-icon-padding - $calendar-icon-forced-colors-border-width);
|
|
12
|
+
|
|
9
13
|
%calendar-title {
|
|
10
14
|
font-size: 1.5rem;
|
|
11
15
|
font-weight: bold;
|
|
@@ -71,12 +75,27 @@ $calendar-icon-disabled-padding: calc($calendar-icon-padding - $calendar-icon-di
|
|
|
71
75
|
border-radius: 50%;
|
|
72
76
|
box-shadow: var(--f-button-shadow);
|
|
73
77
|
|
|
78
|
+
@media (forced-colors: active) {
|
|
79
|
+
background-color: transparent;
|
|
80
|
+
border: $calendar-icon-forced-colors-border-width solid ButtonBorder;
|
|
81
|
+
color: ButtonText;
|
|
82
|
+
padding: $calendar-icon-forced-colors-padding;
|
|
83
|
+
}
|
|
84
|
+
|
|
74
85
|
&--disabled {
|
|
75
86
|
color: $calendarnavbar-f-icon-arrow-color-content-disabled;
|
|
76
87
|
background-color: $calendarnavbar-button-color-background-disabled;
|
|
77
88
|
padding: $calendar-icon-disabled-padding;
|
|
78
89
|
border: $calendar-icon-disabled-border-width solid $calendarnavbar-button-color-border-disabled;
|
|
79
90
|
box-shadow: none;
|
|
91
|
+
|
|
92
|
+
@media (forced-colors: active) {
|
|
93
|
+
background-color: transparent;
|
|
94
|
+
border-color: GrayText;
|
|
95
|
+
border-width: $calendar-icon-forced-colors-border-width;
|
|
96
|
+
color: GrayText;
|
|
97
|
+
padding: $calendar-icon-disabled-forced-colors-padding;
|
|
98
|
+
}
|
|
80
99
|
}
|
|
81
100
|
}
|
|
82
101
|
|
|
@@ -86,5 +105,9 @@ $calendar-icon-disabled-padding: calc($calendar-icon-padding - $calendar-icon-di
|
|
|
86
105
|
border: none;
|
|
87
106
|
background-color: transparent;
|
|
88
107
|
cursor: pointer;
|
|
108
|
+
|
|
109
|
+
@media (forced-colors: active) {
|
|
110
|
+
border-color: ButtonBorder;
|
|
111
|
+
}
|
|
89
112
|
}
|
|
90
113
|
}
|