forstok-ui-lib 8.9.7 → 8.9.8
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/index.js +11 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +11 -11
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/checkbox/styles.ts +44 -24
- package/src/components/radio/styles.ts +6 -6
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import styled, { css } from
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
2
|
|
|
3
3
|
const getInputContainerStyled = css`
|
|
4
4
|
position: absolute;
|
|
@@ -6,7 +6,7 @@ const getInputContainerStyled = css`
|
|
|
6
6
|
cursor: pointer;
|
|
7
7
|
height: 0;
|
|
8
8
|
width: 0;
|
|
9
|
-
|
|
9
|
+
`;
|
|
10
10
|
const arrowIconStyles = css`
|
|
11
11
|
padding-right: 18px;
|
|
12
12
|
i {
|
|
@@ -15,42 +15,58 @@ const arrowIconStyles = css`
|
|
|
15
15
|
top: 50%;
|
|
16
16
|
margin-top: -10px;
|
|
17
17
|
}
|
|
18
|
-
|
|
19
|
-
const getCheckboxModifiedStyled = ({
|
|
18
|
+
`;
|
|
19
|
+
const getCheckboxModifiedStyled = ({
|
|
20
|
+
$flow,
|
|
21
|
+
$iconRight,
|
|
22
|
+
disabled,
|
|
23
|
+
}: {
|
|
24
|
+
$flow?: string;
|
|
25
|
+
$iconRight?: boolean;
|
|
26
|
+
disabled: boolean;
|
|
27
|
+
}) => {
|
|
20
28
|
let style = ``;
|
|
21
29
|
if (disabled) {
|
|
22
30
|
style += `
|
|
23
31
|
cursor: default;
|
|
24
|
-
|
|
32
|
+
> span {
|
|
33
|
+
border: 1px solid transparent !important;
|
|
34
|
+
background-color: var(--mt-clr-bg__fc) !important;
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
25
37
|
}
|
|
26
38
|
switch ($flow) {
|
|
27
|
-
case
|
|
28
|
-
style +=
|
|
39
|
+
case "column":
|
|
40
|
+
style += `
|
|
29
41
|
display: inline-grid;
|
|
30
42
|
grid-auto-flow: column;
|
|
31
|
-
|
|
32
|
-
break
|
|
43
|
+
`;
|
|
44
|
+
break;
|
|
33
45
|
default:
|
|
34
46
|
style += `
|
|
35
47
|
display: grid;
|
|
36
48
|
grid-auto-flow: row;
|
|
37
|
-
|
|
38
|
-
break
|
|
49
|
+
`;
|
|
50
|
+
break;
|
|
39
51
|
}
|
|
40
52
|
if ($iconRight) {
|
|
41
|
-
style += arrowIconStyles
|
|
53
|
+
style += arrowIconStyles;
|
|
42
54
|
}
|
|
43
55
|
return style;
|
|
44
|
-
}
|
|
45
|
-
const getCheckmarkPropsModifiedStyled = ({
|
|
56
|
+
};
|
|
57
|
+
const getCheckmarkPropsModifiedStyled = ({
|
|
58
|
+
$isError,
|
|
59
|
+
}: {
|
|
60
|
+
$isError?: boolean;
|
|
61
|
+
}) => {
|
|
46
62
|
let style = ``;
|
|
47
63
|
if ($isError) {
|
|
48
64
|
style += `
|
|
49
65
|
border:1px solid #fc5c64;
|
|
50
|
-
|
|
66
|
+
`;
|
|
51
67
|
}
|
|
52
68
|
return style;
|
|
53
|
-
}
|
|
69
|
+
};
|
|
54
70
|
|
|
55
71
|
export const CheckmarkContainer = styled.span<{ $isError?: boolean }>`
|
|
56
72
|
position: absolute;
|
|
@@ -72,23 +88,27 @@ export const CheckmarkContainer = styled.span<{ $isError?: boolean }>`
|
|
|
72
88
|
border-radius: var(--ter-rd);
|
|
73
89
|
}
|
|
74
90
|
${getCheckmarkPropsModifiedStyled}
|
|
75
|
-
|
|
76
|
-
export const CheckboxContainer = styled.label<{
|
|
91
|
+
`;
|
|
92
|
+
export const CheckboxContainer = styled.label<{
|
|
93
|
+
$flow?: string;
|
|
94
|
+
$iconRight?: boolean;
|
|
95
|
+
disabled: boolean;
|
|
96
|
+
}>`
|
|
77
97
|
grid-gap: 6px;
|
|
78
98
|
position: relative;
|
|
79
99
|
cursor: pointer;
|
|
80
100
|
user-select: none;
|
|
81
101
|
align-items: center;
|
|
82
102
|
padding-left: 24px;
|
|
83
|
-
> input {
|
|
84
|
-
${getInputContainerStyled}
|
|
103
|
+
> input {
|
|
104
|
+
${getInputContainerStyled}
|
|
85
105
|
}
|
|
86
|
-
input:checked ~ span,
|
|
106
|
+
input:checked ~ span,
|
|
87
107
|
input.checked ~ span {
|
|
88
108
|
background-color: var(--ck-clr-bg__act);
|
|
89
109
|
border: 0;
|
|
90
110
|
}
|
|
91
|
-
input:checked ~ span:after,
|
|
111
|
+
input:checked ~ span:after,
|
|
92
112
|
input.checked ~ span:after {
|
|
93
113
|
display: grid;
|
|
94
114
|
}
|
|
@@ -96,7 +116,7 @@ export const CheckboxContainer = styled.label<{ $flow?: string, $iconRight?: boo
|
|
|
96
116
|
padding-left: 24px;
|
|
97
117
|
}
|
|
98
118
|
${getCheckboxModifiedStyled}
|
|
99
|
-
|
|
119
|
+
`;
|
|
100
120
|
export const InputContainer = styled.input`
|
|
101
121
|
&:disabled {
|
|
102
122
|
cursor: default;
|
|
@@ -106,4 +126,4 @@ export const InputContainer = styled.input`
|
|
|
106
126
|
}
|
|
107
127
|
}
|
|
108
128
|
${getInputContainerStyled}
|
|
109
|
-
|
|
129
|
+
`;
|
|
@@ -26,7 +26,7 @@ export const RadioSpan = styled.span<{ $mode?: string }>`
|
|
|
26
26
|
height: 10px;
|
|
27
27
|
z-index: 0;
|
|
28
28
|
transition: 0.28s ease;
|
|
29
|
-
border:
|
|
29
|
+
border: 1px solid var(--ck-clr-ln);
|
|
30
30
|
border-radius: 50%;
|
|
31
31
|
}
|
|
32
32
|
b {
|
|
@@ -64,12 +64,12 @@ export const RadioInput = styled.input<{ $mode?: string }>`
|
|
|
64
64
|
width: auto;
|
|
65
65
|
&:checked + ${RadioSpan} {
|
|
66
66
|
&:before {
|
|
67
|
-
border:
|
|
67
|
+
border: 1px solid var(--err-clr-ln);
|
|
68
68
|
}
|
|
69
69
|
&:after {
|
|
70
70
|
transform: scale(0.6);
|
|
71
71
|
background-color: var(--err-clr-ln);
|
|
72
|
-
border:
|
|
72
|
+
border: 1px solid transparent;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
${({ $mode }: { $mode?: string }) => {
|
|
@@ -106,12 +106,12 @@ export const RadioInput = styled.input<{ $mode?: string }>`
|
|
|
106
106
|
return css`
|
|
107
107
|
&:checked + ${RadioSpan} {
|
|
108
108
|
&:before {
|
|
109
|
-
border:
|
|
109
|
+
border: 1px solid var(--ck-clr-bg__act);
|
|
110
110
|
}
|
|
111
111
|
&:after {
|
|
112
112
|
transform: scale(0.6);
|
|
113
|
-
background-color: var(--
|
|
114
|
-
border:
|
|
113
|
+
background-color: var(--ck-clr-bg__act);
|
|
114
|
+
border: 1px solid transparent;
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
`;
|