@kvass/widgets 1.1.0 → 1.1.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/package.json
CHANGED
package/src/contact/README.md
CHANGED
|
@@ -63,6 +63,7 @@ These are the available CSS variables.
|
|
|
63
63
|
| :------------------------------- | :---------------------------------------------------------- | :------------ |
|
|
64
64
|
| --kvass-contact-background | The form's background color | `#ffffff` |
|
|
65
65
|
| --kvass-contact-spacing | Base spacing amount. Other amounts are calculated from this | `2rem` |
|
|
66
|
+
| --kvass-contact-padding | Outer padding of the form element | `2rem` |
|
|
66
67
|
| --kvass-contact-max-width | Max width of the form | `720px` |
|
|
67
68
|
| --kvass-contact-border-radius | Base border-radius | `4px` |
|
|
68
69
|
| --kvass-contact-border-color | Color of the borders of the form fields | `#eaeaea` |
|
|
@@ -6,7 +6,7 @@ export default {
|
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
8
|
<script setup>
|
|
9
|
-
import { computed, ref } from 'vue'
|
|
9
|
+
import { computed, ref } from 'vue';
|
|
10
10
|
|
|
11
11
|
const emit = defineEmits(['update:modelValue'])
|
|
12
12
|
const props = defineProps({
|
|
@@ -76,9 +76,11 @@ function onBlur() {
|
|
|
76
76
|
margin-left: var(--kvass-contact-label-transform, 0);
|
|
77
77
|
font-weight: var(--kvass-contact-label-weight, initial);
|
|
78
78
|
}
|
|
79
|
+
|
|
79
80
|
input {
|
|
80
81
|
-webkit-appearance: none;
|
|
81
82
|
}
|
|
83
|
+
|
|
82
84
|
&__element {
|
|
83
85
|
padding: calc(
|
|
84
86
|
var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2
|
|
@@ -106,6 +108,7 @@ function onBlur() {
|
|
|
106
108
|
);
|
|
107
109
|
resize: vertical;
|
|
108
110
|
font: inherit;
|
|
111
|
+
color: inherit;
|
|
109
112
|
background-color: var(
|
|
110
113
|
--kvass-contact-input-background,
|
|
111
114
|
var(--kvass-contact-default-input-background)
|
|
@@ -126,7 +129,7 @@ function onBlur() {
|
|
|
126
129
|
}
|
|
127
130
|
|
|
128
131
|
&--required {
|
|
129
|
-
.kvass-contact-field__label
|
|
132
|
+
.kvass-contact-field__label::after {
|
|
130
133
|
content: '*';
|
|
131
134
|
color: var(--kvass-contact-error, var(--kvass-contact-default-error));
|
|
132
135
|
margin-left: 0.3rem;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { onMounted, reactive, ref,
|
|
2
|
+
import { computed, onMounted, reactive, ref, useAttrs } from 'vue'
|
|
3
3
|
import { createLead, getProjects } from '../api'
|
|
4
4
|
import { Capitalize } from '../utils'
|
|
5
5
|
|
|
6
|
+
import Checkbox from './Checkbox.ce.vue'
|
|
6
7
|
import Field from './Field.ce.vue'
|
|
7
8
|
import Fieldset from './Fieldset.ce.vue'
|
|
8
|
-
import Checkbox from './Checkbox.ce.vue'
|
|
9
9
|
|
|
10
10
|
const Labels = {
|
|
11
11
|
nb: {
|
|
@@ -248,6 +248,10 @@ onMounted(() => {
|
|
|
248
248
|
|
|
249
249
|
--kvass-contact-default-background: #ffffff;
|
|
250
250
|
--kvass-contact-default-spacing: 2rem;
|
|
251
|
+
--kvass-contact-default-padding: var(
|
|
252
|
+
--kvass-contact-spacing,
|
|
253
|
+
var(--kvass-contact-default-spacing)
|
|
254
|
+
);
|
|
251
255
|
--kvass-contact-default-border-radius: 4px;
|
|
252
256
|
--kvass-contact-default-border-color: #eaeaea;
|
|
253
257
|
--kvass-contact-default-border-width: 1px;
|
|
@@ -275,7 +279,7 @@ onMounted(() => {
|
|
|
275
279
|
--kvass-contact-background,
|
|
276
280
|
var(--kvass-contact-default-background)
|
|
277
281
|
);
|
|
278
|
-
padding: var(--kvass-contact-
|
|
282
|
+
padding: var(--kvass-contact-padding, var(--kvass-contact-default-padding));
|
|
279
283
|
border-radius: var(
|
|
280
284
|
--kvass-contact-border-radius,
|
|
281
285
|
var(--kvass-contact-default-border-radius)
|