@farm-investimentos/front-mfe-components 11.8.4 → 11.9.1
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/front-mfe-components.common.js +217 -225
- package/dist/front-mfe-components.common.js.map +1 -1
- package/dist/front-mfe-components.css +1 -1
- package/dist/front-mfe-components.umd.js +217 -225
- package/dist/front-mfe-components.umd.js.map +1 -1
- package/dist/front-mfe-components.umd.min.js +1 -1
- package/dist/front-mfe-components.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Checkbox/Checkbox.scss +4 -0
- package/src/components/Checkbox/Checkbox.stories.js +12 -9
- package/src/components/Checkbox/Checkbox.vue +30 -6
- package/src/components/Form/Form.stories.js +43 -37
- package/src/components/Logos/OriginatorLogo/OriginatorLogo.vue +1 -1
- package/src/components/Logos/ProductLogo/ProductLogo.vue +1 -1
- package/src/components/Radio/Radio.vue +1 -1
- package/src/components/RadioGroup/RadioGroup.stories.js +35 -44
- package/src/components/RadioGroup/RadioGroup.vue +47 -57
- package/src/components/RadioGroup/IRadioGroup.ts +0 -6
- package/src/components/RadioGroup/RadioGroup.scss +0 -108
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
@import '../../configurations/theme-colors';
|
|
2
|
-
|
|
3
|
-
.farm-radio-group {
|
|
4
|
-
border: none;
|
|
5
|
-
cursor: default;
|
|
6
|
-
display: flex;
|
|
7
|
-
width: 100%;
|
|
8
|
-
|
|
9
|
-
&__item {
|
|
10
|
-
font-size: 16px;
|
|
11
|
-
line-height: 18px;
|
|
12
|
-
cursor: pointer;
|
|
13
|
-
display: grid;
|
|
14
|
-
grid-template-columns: 16px auto;
|
|
15
|
-
gap: 0;
|
|
16
|
-
color: rgba(0, 0, 0, .6);
|
|
17
|
-
margin-right: 32px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
label {
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
input[type="radio"].checked {
|
|
25
|
-
border: 1.5px solid black;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&--vertical {
|
|
29
|
-
flex-direction: column;
|
|
30
|
-
.farm-radio-group__item {
|
|
31
|
-
margin-right: 24px;
|
|
32
|
-
margin-top: 16px;
|
|
33
|
-
&:first-of-type {
|
|
34
|
-
margin-top: 0;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
@each $color in $theme-colors-list {
|
|
40
|
-
&#{'[color=' + $color + ']'} {
|
|
41
|
-
input[type="radio"]::before {
|
|
42
|
-
box-shadow: inset 16px 16px themeColor($color);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
input[type="radio"].checked {
|
|
46
|
-
border-color: themeColor($color);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
input[type="radio"] {
|
|
54
|
-
-webkit-appearance: none;
|
|
55
|
-
appearance: none;
|
|
56
|
-
background-color: #ffffff;
|
|
57
|
-
margin: 0;
|
|
58
|
-
font: inherit;
|
|
59
|
-
color: rgba(0, 0, 0, .6);
|
|
60
|
-
width: 18px;
|
|
61
|
-
height: 18px;
|
|
62
|
-
border: 1.5px solid rgba(0, 0, 0, .6);
|
|
63
|
-
border-radius: 50%;
|
|
64
|
-
transform: translate(-12px);
|
|
65
|
-
display: grid;
|
|
66
|
-
place-content: center;
|
|
67
|
-
cursor: pointer;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
input[type="radio"]::before {
|
|
71
|
-
content: "";
|
|
72
|
-
width: 10px;
|
|
73
|
-
height: 10px;
|
|
74
|
-
border-radius: 50%;
|
|
75
|
-
transform: scale(0);
|
|
76
|
-
transition: 120ms transform ease-in-out;
|
|
77
|
-
background-color: CanvasText;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
input[type="radio"].checked::before {
|
|
81
|
-
transform: scale(1);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
input[type="radio"]:focus {
|
|
85
|
-
outline: none;
|
|
86
|
-
outline-offset: none;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
input[type='radio']:hover {
|
|
90
|
-
box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1);
|
|
91
|
-
background-color: rgba(0, 0, 0, 0.1);
|
|
92
|
-
border-radius: 50%;
|
|
93
|
-
opacity: 1;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
input[type='radio']:active {
|
|
97
|
-
animation: pulse 0.2s 1 ease-out;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
@keyframes pulse {
|
|
101
|
-
from {
|
|
102
|
-
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.2);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
to {
|
|
106
|
-
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(0, 0, 0, 0.2);
|
|
107
|
-
}
|
|
108
|
-
}
|