diff --git a/src/calculator-form.ts b/src/calculator-form.ts
index 3959d00..2193b59 100644
--- a/src/calculator-form.ts
+++ b/src/calculator-form.ts
@@ -105,7 +105,6 @@ export const formTemplate = (
>${questionIcon(tooltipSize, tooltipSize)}
-
${select({
id: 'project',
required: true,
@@ -131,7 +130,7 @@ export const formTemplate = (
>${questionIcon(tooltipSize, tooltipSize)}
-
+
${questionIcon(tooltipSize, tooltipSize)}
-
+
${select({
id: 'owner_status',
required: true,
@@ -173,7 +172,7 @@ export const formTemplate = (
>${questionIcon(tooltipSize, tooltipSize)}
-
+
-
+
${select({
id: 'tax_filing',
required: true,
@@ -216,7 +215,7 @@ export const formTemplate = (
>${questionIcon(tooltipSize, tooltipSize)}
-
+
${select({
id: 'household_size',
required: true,
diff --git a/src/select.ts b/src/select.ts
index 18bbf0d..2bd3373 100644
--- a/src/select.ts
+++ b/src/select.ts
@@ -100,7 +100,7 @@ export const selectStyles = css`
background-color: var(--ra-select-background-color);
background-image: var(--ra-select-background-image);
- margin-top: 4px;
+ margin: var(--ra-select-margin);
}
.select select[disabled] {
diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
index 7970645..92072c2 100644
--- a/src/state-incentive-details.ts
+++ b/src/state-incentive-details.ts
@@ -14,10 +14,10 @@ export const stateIncentivesStyles = css`
--ra-embed-card-border-radius: 0.75rem;
/* labels */
--ra-form-label-font-size: 11px;
- --ra-form-label-line-height: 125%;
+ --ra-form-label-line-height: 20px;
--ra-form-label-font-weight: 700;
--ra-form-label-font-style: normal;
- --ra-form-label-margin: 0;
+ --ra-form-label-margin: 0 0 8px 0;
--ra-form-label-text-transform: uppercase;
--ra-form-label-letter-spacing: 0.55px;
/* button */
@@ -28,9 +28,11 @@ export const stateIncentivesStyles = css`
--ra-select-border: 1px solid #E2E2E2;
--ra-select-focus-color: var(--rewiring-purple);
--ra-select-background-image: none;
+ --ra-select-margin: 0;
/* input */
--ra-input-border: 1px solid #E2E2E2;
--ra-input-focus-color: var(--rewiring-purple);
+ --ra-input-margin: 0;
}
diff --git a/src/styles.ts b/src/styles.ts
index 97a9b04..6a72748 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -68,6 +68,7 @@ export const baseStyles = css`
--ra-select-padding: 0.5rem 1rem;
--ra-select-arrow-color: #222;
--ra-select-focus-color: blue;
+ --ra-select-margin: 4px 0 0 0;
/* input styles */
--ra-input-border: 1px solid #cccccc;
--ra-input-focus-color: blue;
@@ -75,6 +76,7 @@ export const baseStyles = css`
--ra-input-font-size: var(--ra-embed-font-size);
--ra-input-line-height: var(--ra-embed-line-height);
--ra-input-border-radius: 4px;
+ --ra-input-margin: 4px 0 0 0;
}
:host {
@@ -119,6 +121,7 @@ export const baseStyles = css`
}
label {
+ display: block;
font-size: var(--ra-form-label-font-size);
line-height: var(--ra-form-label-line-height);
font-weight: var(--ra-form-label-font-weight);
diff --git a/src/styles/input.ts b/src/styles/input.ts
index 086aeb2..c744a9d 100644
--- a/src/styles/input.ts
+++ b/src/styles/input.ts
@@ -8,9 +8,7 @@ export const inputStyles = css`
border: var(--ra-input-border);
border-radius: var(--ra-input-border-radius);
width: 100%;
- margin-top: 4px;
- margin-left: 0;
- margin-right: 0;
+ margin: var(--ra-input-margin);
}
input:focus {